+ {/* Agent pills row */}
+
+ {/* All option */}
+
+
+ {/* Agent pills */}
+ {JOB_DEFINITIONS.map((job) => {
+ const isSelected = selectedAgent === job.processName;
+ const isRunning = getProcessStatus(job.processName);
+
+ return (
+
+ );
+ })}
+
+
+ {/* Search and errors toggle row */}
+
+
{isLive ?
:
}
{isLive ? 'Online' : 'Offline'}
@@ -35,12 +37,17 @@ const TopBar: React.FC = () => {
{/* Actions */}
-
-
+
AD
diff --git a/web/hooks/useActivityFeed.ts b/web/hooks/useActivityFeed.ts
new file mode 100644
index 00000000..ba2402ee
--- /dev/null
+++ b/web/hooks/useActivityFeed.ts
@@ -0,0 +1,250 @@
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { useStore } from '../store/useStore.js';
+import { fetchLogs } from '../api.js';
+import { WEB_JOB_REGISTRY } from '../utils/jobs.js';
+import type { IStatusSnapshot } from '@shared/types';
+
+export interface IActivityEvent {
+ id: string;
+ type: 'agent_completed' | 'agent_failed' | 'schedule_fired' | 'automation_paused' | 'automation_resumed' | 'pr_opened';
+ agent?: string;
+ duration?: string;
+ prd?: string;
+ error?: string;
+ prNumber?: number;
+ prTitle?: string;
+ ts: Date;
+}
+
+interface IDayGroup {
+ label: string;
+ events: IActivityEvent[];
+}
+
+const MAX_EVENTS = 50;
+const LOG_LINES_TO_FETCH = 200;
+
+function generateEventId(): string {
+ return Math.random().toString(36).substring(2, 10) + Date.now().toString(36);
+}
+
+function formatDuration(startTime: number): string {
+ const seconds = Math.floor((Date.now() - startTime) / 1000);
+ if (seconds < 60) return `${seconds}s`;
+ const minutes = Math.floor(seconds / 60);
+ if (minutes < 60) return `${minutes}m`;
+ const hours = Math.floor(minutes / 60);
+ return `${hours}h`;
+}
+
+function getDayLabel(date: Date): string {
+ const today = new Date();
+ const yesterday = new Date(today);
+ yesterday.setDate(yesterday.getDate() - 1);
+
+ const isToday = date.toDateString() === today.toDateString();
+ const isYesterday = date.toDateString() === yesterday.toDateString();
+
+ if (isToday) return 'Today';
+ if (isYesterday) return 'Yesterday';
+ return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function parseLogEntryForEvent(logLine: string, agentName: string): IActivityEvent | null {
+ const tsMatch = logLine.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2})/);
+ const timestamp = tsMatch ? new Date(tsMatch[1]) : new Date();
+
+ if (logLine.includes('[ERROR]') || logLine.includes('[error]') || /\bError:/.test(logLine) || /\bFailed\b/.test(logLine)) {
+ const errorMatch = logLine.match(/(?:\[ERROR\]|Error:|Failed)\s*(.+)/i);
+ return {
+ id: generateEventId(),
+ type: 'agent_failed',
+ agent: agentName,
+ error: errorMatch?.[1]?.substring(0, 100) || 'Unknown error',
+ ts: timestamp,
+ };
+ }
+
+ if (logLine.includes('completed') || logLine.includes('Completed') || logLine.includes('finished') || logLine.includes('Finished')) {
+ const prdMatch = logLine.match(/PRD[-\s]*(\w+)/i);
+ const durationMatch = logLine.match(/(?:duration|took)[:\s]*(\d+[hms]+)/i);
+ return {
+ id: generateEventId(),
+ type: 'agent_completed',
+ agent: agentName,
+ duration: durationMatch?.[1],
+ prd: prdMatch?.[1],
+ ts: timestamp,
+ };
+ }
+
+ return null;
+}
+
+export function useActivityFeed(): {
+ events: IActivityEvent[];
+ groupedEvents: IDayGroup[];
+ hasUnread: boolean;
+ markAsRead: () => void;
+} {
+ const status = useStore((s) => s.status);
+ const activityCenterOpen = useStore((s) => s.activityCenterOpen);
+ const [events, setEvents] = useState
([]);
+ const [lastReadTimestamp, setLastReadTimestamp] = useState(() => {
+ const saved = typeof localStorage !== 'undefined' ? localStorage.getItem('nw-activity-last-read') : null;
+ return saved ? new Date(saved) : new Date(0);
+ });
+ const previousStatusRef = useRef(null);
+ const runningStartTimesRef = useRef>(new Map());
+
+ const markAsRead = useCallback(() => {
+ const now = new Date();
+ setLastReadTimestamp(now);
+ if (typeof localStorage !== 'undefined') {
+ localStorage.setItem('nw-activity-last-read', now.toISOString());
+ }
+ }, []);
+
+ const hasUnread = !activityCenterOpen && events.some((e) => e.ts > lastReadTimestamp);
+
+ useEffect(() => {
+ if (previousStatusRef.current && status) {
+ const prevStatus = previousStatusRef.current;
+ const newEvents: IActivityEvent[] = [];
+
+ status.processes.forEach((currentProcess) => {
+ const prevProcess = prevStatus.processes.find((p) => p.name === currentProcess.name);
+ const jobDef = WEB_JOB_REGISTRY.find((j) => j.processName === currentProcess.name);
+ const agentLabel = jobDef?.label || currentProcess.name;
+
+ if (prevProcess?.running && !currentProcess.running) {
+ const startTime = runningStartTimesRef.current.get(currentProcess.name);
+ const duration = startTime ? formatDuration(startTime) : undefined;
+
+ newEvents.push({
+ id: generateEventId(),
+ type: 'agent_completed',
+ agent: agentLabel,
+ duration,
+ ts: new Date(),
+ });
+ runningStartTimesRef.current.delete(currentProcess.name);
+ }
+
+ if (!prevProcess?.running && currentProcess.running) {
+ runningStartTimesRef.current.set(currentProcess.name, Date.now());
+ }
+ });
+
+ const wasInstalled = prevStatus.crontab?.installed;
+ const isInstalled = status.crontab?.installed;
+ if (wasInstalled && !isInstalled) {
+ newEvents.push({
+ id: generateEventId(),
+ type: 'automation_paused',
+ ts: new Date(),
+ });
+ } else if (!wasInstalled && isInstalled) {
+ newEvents.push({
+ id: generateEventId(),
+ type: 'automation_resumed',
+ ts: new Date(),
+ });
+ }
+
+ const prevPrNumbers = new Set(prevStatus.prs.map((pr) => pr.number));
+ status.prs.forEach((pr) => {
+ if (!prevPrNumbers.has(pr.number) && pr.ciStatus !== 'unknown') {
+ newEvents.push({
+ id: generateEventId(),
+ type: 'pr_opened',
+ prNumber: pr.number,
+ prTitle: pr.title,
+ ts: new Date(),
+ });
+ }
+ });
+
+ if (newEvents.length > 0) {
+ setEvents((prev) => [...newEvents, ...prev].slice(0, MAX_EVENTS));
+ }
+ }
+
+ previousStatusRef.current = status;
+ }, [status]);
+
+ useEffect(() => {
+ const abortController = new AbortController();
+
+ const fetchInitialEvents = async () => {
+ const initialEvents: IActivityEvent[] = [];
+
+ try {
+ const logPromises = WEB_JOB_REGISTRY.slice(0, 5).map(async (job) => {
+ try {
+ const response = await fetchLogs(job.processName, LOG_LINES_TO_FETCH);
+ if (abortController.signal.aborted) return;
+ const lines = response?.lines || [];
+ const recentLines = lines.slice(-20);
+ recentLines.forEach((line) => {
+ const event = parseLogEntryForEvent(line, job.label);
+ if (event) {
+ initialEvents.push(event);
+ }
+ });
+ } catch {
+ // Silently ignore log fetch errors during initial load
+ }
+ });
+
+ await Promise.all(logPromises);
+
+ if (abortController.signal.aborted) return;
+
+ const uniqueEvents = initialEvents
+ .filter((event, index, self) =>
+ index === self.findIndex((e) =>
+ e.ts.getTime() === event.ts.getTime() && e.type === event.type
+ )
+ )
+ .sort((a, b) => b.ts.getTime() - a.ts.getTime())
+ .slice(0, MAX_EVENTS);
+
+ setEvents((prev) => {
+ const existingIds = new Set(prev.map((e) => e.id));
+ const newEvents = uniqueEvents.filter((e) => !existingIds.has(e.id));
+ return [...newEvents, ...prev].slice(0, MAX_EVENTS);
+ });
+ } catch {
+ // Silently ignore initial fetch errors
+ }
+ };
+
+ fetchInitialEvents();
+
+ return () => {
+ abortController.abort();
+ };
+ }, []);
+
+ const groupedEvents = useMemo((): IDayGroup[] => {
+ const result: IDayGroup[] = [];
+ const grouped = new Map();
+
+ events.forEach((event) => {
+ const label = getDayLabel(event.ts);
+ if (!grouped.has(label)) {
+ grouped.set(label, []);
+ }
+ grouped.get(label)!.push(event);
+ });
+
+ grouped.forEach((groupEvts, label) => {
+ result.push({ label, events: groupEvts });
+ });
+
+ return result;
+ }, [events]);
+
+ return { events, groupedEvents, hasUnread, markAsRead };
+}
diff --git a/web/hooks/useCommandPalette.ts b/web/hooks/useCommandPalette.ts
new file mode 100644
index 00000000..2b7510a1
--- /dev/null
+++ b/web/hooks/useCommandPalette.ts
@@ -0,0 +1,54 @@
+import { useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useStore } from '../store/useStore.js';
+
+export function useCommandPalette(): void {
+ const { setCommandPaletteOpen } = useStore();
+ const navigate = useNavigate();
+
+ const handleKeyDown = useCallback((e: KeyboardEvent) => {
+ const isShortcut = e.metaKey || e.ctrlKey;
+
+ // Cmd+K / Ctrl+K to Toggle command palette
+ if (isShortcut && (e.key === 'k' || e.key === 'K')) {
+ e.preventDefault();
+ setCommandPaletteOpen((prev: boolean) => !prev);
+ return;
+ }
+
+ // Cmd+1-4 for quick navigation
+ if (isShortcut && e.key >= '1' && e.key <= '4') {
+ e.preventDefault();
+ const routeMap: Record = {
+ 1: '/',
+ 2: '/logs',
+ 3: '/board',
+ 4: '/scheduling',
+ };
+ navigate(routeMap[Number(e.key)]);
+ setCommandPaletteOpen(false);
+ return;
+ }
+
+ // Cmd+, for Settings shortcut
+ if (isShortcut && e.key === ',') {
+ e.preventDefault();
+ navigate('/settings');
+ setCommandPaletteOpen(false);
+ return;
+ }
+
+ // Escape to close command palette
+ if (e.key === 'Escape') {
+ setCommandPaletteOpen(false);
+ }
+ }, [navigate, setCommandPaletteOpen]);
+
+ // Register keyboard listener
+ useEffect(() => {
+ document.addEventListener('keydown', handleKeyDown);
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [handleKeyDown]);
+}
diff --git a/web/pages/Logs.tsx b/web/pages/Logs.tsx
index 9aefb50a..d748967b 100644
--- a/web/pages/Logs.tsx
+++ b/web/pages/Logs.tsx
@@ -1,20 +1,25 @@
import React, { useState, useEffect, useRef } from 'react';
-import { Pause, Play, Search, ArrowDownCircle, AlertCircle } from 'lucide-react';
-import Button from '../components/ui/Button';
-import { useApi, fetchLogs } from '../api';
-import { useStore } from '../store/useStore';
+import { Pause, Play, ArrowDownCircle, AlertCircle } from 'lucide-react';
+import Button from '../components/ui/Button.js';
+import LogFilterBar from '../components/LogFilterBar.js';
+import { useApi, fetchLogs } from '../api.js';
+import { useStore } from '../store/useStore.js';
import { JOB_DEFINITIONS } from '../utils/jobs.js';
type LogName = string;
const Logs: React.FC = () => {
const [autoScroll, setAutoScroll] = useState(true);
- const [filter, setFilter] = useState('');
const [activeLog, setActiveLog] = useState('executor');
const scrollRef = useRef(null);
const { selectedProjectId, globalModeLoading } = useStore();
const status = useStore((s) => s.status);
+ // New filter state
+ const [selectedAgent, setSelectedAgent] = useState(null);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [errorsOnly, setErrorsOnly] = useState(false);
+
const { data: logData, loading: logLoading, error: logError, refetch: refetchLogs } = useApi(
() => fetchLogs(activeLog, 500),
[activeLog, selectedProjectId],
@@ -41,13 +46,64 @@ const Logs: React.FC = () => {
return () => window.clearInterval(intervalId);
}, [autoScroll, activeLog, refetchLogs]);
- const filteredLogs = logs.filter(log => log.toLowerCase().includes(filter.toLowerCase()));
+ // Handle agent selection - also switch the log file
+ const handleSelectAgent = (agent: string | null) => {
+ setSelectedAgent(agent);
+ if (agent) {
+ setActiveLog(agent);
+ }
+ setSearchTerm('');
+ };
- const handleLogChange = (logName: LogName) => {
- setActiveLog(logName);
- setFilter('');
+ // Parse log line to extract agent name from [agent-name] prefix
+ const parseLogAgent = (log: string): string | null => {
+ const match = log.match(/\[(\w+)\]/);
+ if (match) {
+ const agentName = match[1].toLowerCase();
+ // Check if it matches one of our known agents
+ const knownAgent = JOB_DEFINITIONS.find(
+ (j) => j.processName.toLowerCase() === agentName || j.label.toLowerCase() === agentName
+ );
+ return knownAgent?.processName ?? null;
+ }
+ return null;
};
+ // Filter logs based on selected agent, search term, and errors only
+ const filteredLogs = logs.filter((log) => {
+ // Agent filter - check if log contains the agent prefix
+ if (selectedAgent) {
+ const logAgent = parseLogAgent(log);
+ // Also check if the log line contains the selected agent name anywhere
+ const containsAgent = log.toLowerCase().includes(selectedAgent.toLowerCase());
+ if (logAgent !== selectedAgent && !containsAgent) {
+ return false;
+ }
+ }
+
+ // Search term filter
+ if (searchTerm && !log.toLowerCase().includes(searchTerm.toLowerCase())) {
+ return false;
+ }
+
+ // Errors only filter
+ if (errorsOnly) {
+ const hasError = log.includes('[ERROR]') ||
+ log.includes('[error]') ||
+ log.includes('error:') ||
+ log.includes('Error:') ||
+ log.includes('failed') ||
+ log.includes('Failed') ||
+ log.includes('exception') ||
+ log.includes('Exception');
+ if (!hasError) {
+ return false;
+ }
+ }
+
+ return true;
+ });
+
const getProcessStatus = (logName: LogName) => {
if (!status?.processes) return false;
const process = status.processes.find(p => p.name === logName);
@@ -67,39 +123,20 @@ const Logs: React.FC = () => {
return (
+ {/* Filter Bar */}
+
+
+
+
{/* Controls */}
-
-
-
- setFilter(e.target.value)}
- />
-
-
-
-
- {JOB_DEFINITIONS.map(({ processName, label }) => (
-
- ))}
-
-
+