-
{t('logsConfig.time')}
-
- {t('logsConfig.level')}
+ {liveTailSlot ? (
+
+ {liveTailSlot}
-
- {t('logsConfig.source')}
-
-
{t('logsConfig.message')}
-
- {t('logsConfig.proc')}
-
-
- {t('logsConfig.run')}
-
-
- {t('logsConfig.open')}
-
-
+ ) : null}
-
+
{isLoading ? (
- {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map((item) => (
+ {Array.from({ length: 14 }).map((_, idx) => (
))}
- ) : entries.length === 0 ? (
-
-
-
-
- No matching entries
-
-
- Your current source, level, or search filters are hiding the stream. Adjust them to
- bring entries back into view.
-
-
-
+ ) : items.length === 0 ? (
+
) : (
-
-
- {entries.map((entry) => {
- const isSelected = entry.id === selectedEntryId;
-
- return (
-
onSelect(entry.id)}
- className={cn(
- 'group relative flex w-full items-center border-b border-border/5 px-0 py-2.5 text-left transition-all duration-150',
- isSelected
- ? 'z-10 bg-primary/[0.08] shadow-[inset_4px_0_0_rgba(var(--primary),1)]'
- : 'bg-transparent hover:bg-muted/30'
- )}
- >
-
-
-
-
-
- {new Date(entry.timestamp).toLocaleTimeString(undefined, {
- hour12: false,
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- })}
-
-
-
-
-
-
-
-
-
- {sourceLabels[entry.source] ?? entry.source}
-
-
- {entry.event}
-
-
-
-
-
-
- {entry.processId ?? '????'}
-
-
- {entry.runId?.slice(0, 4).toUpperCase() ?? 'NONE'}
-
-
-
-
- );
- })}
-
+
(atBottom ? 'auto' : false)}
+ computeItemKey={(_idx, item) =>
+ item.kind === 'trace' ? `t:${item.requestId}` : `l:${item.entry.id}`
+ }
+ />
)}
-
-
-
-
- Node: CCS-CORE
-
-
-
- Status: Operational
-
-
-
-
- Entries: {entries.length}
-
-
-
);
}
diff --git a/ui/src/components/logs/logs-error.tsx b/ui/src/components/logs/logs-error.tsx
new file mode 100644
index 00000000..f96d1f3a
--- /dev/null
+++ b/ui/src/components/logs/logs-error.tsx
@@ -0,0 +1,27 @@
+import { AlertTriangle, RotateCcw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export interface LogsErrorProps {
+ error: Error | { message?: string } | null;
+ onRetry: () => void;
+}
+
+export function LogsError({ error, onRetry }: LogsErrorProps) {
+ const message = error?.message ?? 'Unknown error fetching logs.';
+ return (
+
+
+
Could not load logs
+
{message}
+
+
+
+ );
+}
diff --git a/ui/src/components/logs/logs-filters.tsx b/ui/src/components/logs/logs-filters.tsx
index d3b73b3d..4d00d830 100644
--- a/ui/src/components/logs/logs-filters.tsx
+++ b/ui/src/components/logs/logs-filters.tsx
@@ -1,26 +1,28 @@
-import { Search, RefreshCw, Filter, Shield, Zap } from 'lucide-react';
+import { useState } from 'react';
+import { ChevronDown, Search, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
import type { LogsSource } from '@/lib/api-client';
import { cn } from '@/lib/utils';
-import type { LogsLevelFilter, LogsSourceFilter } from '@/hooks/use-logs';
-import { getLogLevelOptions } from '@/hooks/use-logs';
-import { useTranslation } from 'react-i18next';
+import {
+ getLogLevelOptions,
+ getLogsTimeWindowOptions,
+ type LogsLevelFilter,
+ type LogsSourceFilter,
+ type LogsTimeWindow,
+} from '@/hooks/use-logs';
+import { FOCUS_RING } from './tokens';
-export function LogsFilters({
- sources,
- selectedSource,
- onSourceChange,
- selectedLevel,
- onLevelChange,
- search,
- onSearchChange,
- limit,
- onLimitChange,
- onRefresh,
- isRefreshing,
-}: {
+export interface LogsFiltersProps {
sources: LogsSource[];
selectedSource: LogsSourceFilter;
onSourceChange: (value: LogsSourceFilter) => void;
@@ -32,169 +34,355 @@ export function LogsFilters({
onLimitChange: (value: number) => void;
onRefresh: () => void;
isRefreshing: boolean;
-}) {
- const { t } = useTranslation();
+
+ /** Phase-04 advanced filters (optional for back-compat). */
+ moduleFilter?: string;
+ onModuleChange?: (v: string) => void;
+ stageFilter?: string;
+ onStageChange?: (v: string) => void;
+ requestIdFilter?: string;
+ onRequestIdChange?: (v: string) => void;
+ timeWindow?: LogsTimeWindow;
+ onTimeWindowChange?: (v: LogsTimeWindow) => void;
+ /** When true, hides entries from `web-server:*` sources. Default ON. */
+ hideDashboardInternals?: boolean;
+ onHideDashboardInternalsChange?: (next: boolean) => void;
+ onClearAll?: () => void;
+}
+
+interface ChipProps {
+ label: string;
+ onRemove: () => void;
+}
+
+function Chip({ label, onRemove }: ChipProps) {
+ return (
+
+ {label}
+
+
+
+ );
+}
+
+export function LogsFilters({
+ sources,
+ selectedSource,
+ onSourceChange,
+ selectedLevel,
+ onLevelChange,
+ search,
+ onSearchChange,
+ limit,
+ onLimitChange,
+ onRefresh: _onRefresh,
+ isRefreshing: _isRefreshing,
+ moduleFilter = '',
+ onModuleChange,
+ stageFilter = '',
+ onStageChange,
+ requestIdFilter = '',
+ onRequestIdChange,
+ timeWindow = 'all',
+ onTimeWindowChange,
+ hideDashboardInternals = true,
+ onHideDashboardInternalsChange,
+ onClearAll,
+}: LogsFiltersProps) {
+ const [advancedOpen, setAdvancedOpen] = useState(false);
const levels = getLogLevelOptions();
const limits = [50, 100, 150, 250];
+ const timeWindows = getLogsTimeWindowOptions();
+
+ const activeChips: Array<{ key: string; label: string; clear: () => void }> = [];
+ if (selectedLevel !== 'all') {
+ activeChips.push({
+ key: 'level',
+ label: `level: ${selectedLevel}`,
+ clear: () => onLevelChange('all'),
+ });
+ }
+ if (selectedSource !== 'all') {
+ const label = sources.find((s) => s.source === selectedSource)?.label ?? selectedSource;
+ activeChips.push({
+ key: 'source',
+ label: `source: ${label}`,
+ clear: () => onSourceChange('all'),
+ });
+ }
+ if (search.trim()) {
+ activeChips.push({
+ key: 'search',
+ label: `search: ${search}`,
+ clear: () => onSearchChange(''),
+ });
+ }
+ if (moduleFilter) {
+ activeChips.push({
+ key: 'module',
+ label: `module: ${moduleFilter}`,
+ clear: () => onModuleChange?.(''),
+ });
+ }
+ if (stageFilter) {
+ activeChips.push({
+ key: 'stage',
+ label: `stage: ${stageFilter}`,
+ clear: () => onStageChange?.(''),
+ });
+ }
+ if (requestIdFilter) {
+ activeChips.push({
+ key: 'requestId',
+ label: `requestId: ${requestIdFilter}`,
+ clear: () => onRequestIdChange?.(''),
+ });
+ }
+ if (timeWindow !== 'all') {
+ activeChips.push({
+ key: 'timeWindow',
+ label: `time: ${timeWindow}`,
+ clear: () => onTimeWindowChange?.('all'),
+ });
+ }
return (
-
-
-
-
-
-
+
+ {/* Primary row */}
+
+
+ Search
+
+
+
-
-
-
- Source Matrix
-
-
-
-
onSourceChange('all')}
- className={cn(
- 'group relative flex items-center justify-between rounded-lg border px-3 py-2 transition-all active:scale-[0.98]',
- selectedSource === 'all'
- ? 'border-primary/50 bg-primary/10 text-primary shadow-[0_0_15px_rgba(var(--primary),0.1)]'
- : 'border-border/40 bg-muted/20 text-foreground/40 hover:border-border hover:bg-muted/40 hover:text-foreground/80'
- )}
+
+
+
-
- Global Stream
-
- {selectedSource === 'all' && (
-
- )}
-
-
-
- {sources.map((source) => (
- onSourceChange(source.source)}
- className={cn(
- 'rounded-lg border px-2.5 py-1.5 text-[10px] font-semibold uppercase tracking-[0.1em] transition-all active:scale-[0.97]',
- selectedSource === source.source
- ? 'border-primary/50 bg-primary/10 text-primary shadow-sm'
- : 'border-border/40 bg-muted/20 text-foreground/40 hover:border-border hover:bg-muted/40 hover:text-foreground/80'
- )}
- >
- {source.label}
-
- ))}
-
+ Level
+
+
onLevelChange(v as LogsLevelFilter)}>
+
+
+
+ {levels.map((opt) => (
+
+ {opt.label}
+
+ ))}
+
+
+
+
+
+ Source
+
+ onSourceChange(v as LogsSourceFilter)}
+ >
+
+
+
+ All sources
+ {sources.map((s) => (
+
+ {s.label}
+
+ ))}
+
+
-
-
- Sensitivity
-
-
-
- {levels.map((option) => (
-
onLevelChange(option.value)}
- className={cn(
- 'flex flex-col items-center gap-1 rounded-lg border px-2 py-2 text-[10px] font-semibold uppercase tracking-[0.1em] transition-all active:scale-[0.97]',
- selectedLevel === option.value
- ? 'border-primary/50 bg-primary/10 text-primary shadow-[0_0_15px_rgba(var(--primary),0.1)]'
- : 'border-border/40 bg-muted/20 text-foreground/40 hover:border-border hover:bg-muted/40 hover:text-foreground/80'
- )}
- >
- {option.label}
-
+
+
+ Advanced filters
+
+
+
+ {onModuleChange ? (
+
+
+ Module
+
+
+ ) : null}
+ {onStageChange ? (
+
+
+ Stage
+
+
+ ) : null}
+ {onRequestIdChange ? (
+
+
+ Request ID
+
+
+ ) : null}
+ {onTimeWindowChange ? (
+
+
+ Time window
+
+ onTimeWindowChange(v as LogsTimeWindow)}
+ >
+
+
+
+ {timeWindows.map((opt) => (
+
+ {opt.label}
+
+ ))}
+
+
+
+ ) : null}
+ {onHideDashboardInternalsChange ? (
+
+
+
+ Hide dashboard internals
+
+
+ Suppress web-server:*{' '}
+ self-polling.
+
+
+
onHideDashboardInternalsChange(e.target.checked)}
+ className={cn('mt-0.5 h-4 w-4 cursor-pointer accent-foreground', FOCUS_RING)}
+ aria-label="Hide dashboard internals"
+ />
+
+
+
+
+
+ Visible entries
+
+
+ {limits.map((option) => (
+ onLimitChange(option)}
+ >
+ {option}
+
))}
- {/* Operational Deck */}
-
-
-
-
-
- Operational Window
-
-
- Tail Capacity
-
-
-
-
-
-
-
- {limits.map((option) => (
- onLimitChange(option)}
- className={cn(
- 'rounded-md border py-1.5 text-[11px] font-semibold tabular-nums transition-all active:scale-[0.95]',
- limit === option
- ? 'border-foreground bg-foreground text-background'
- : 'border-border/60 bg-muted/40 text-foreground/40 hover:bg-muted hover:text-foreground'
- )}
- >
- {option}
-
- ))}
-
-
-
-
-
- {t('logsConfig.refreshEntries')}
-
-
+ {activeChips.length > 0 ? (
+
+ Active:
+ {activeChips.map((c) => (
+
+ Clear all
+
+ ) : null}
-
+ ) : null}
);
}
diff --git a/ui/src/components/logs/logs-header.tsx b/ui/src/components/logs/logs-header.tsx
new file mode 100644
index 00000000..e403b905
--- /dev/null
+++ b/ui/src/components/logs/logs-header.tsx
@@ -0,0 +1,147 @@
+import { RefreshCw, Settings, ScrollText, HelpCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { FOCUS_RING, MONO_NUMERIC } from './tokens';
+
+export interface LogsHeaderStats {
+ entries: number;
+ traces: number;
+ errors: number;
+}
+
+export interface LogsHeaderProps {
+ isFetching: boolean;
+ hasError: boolean;
+ capturedCount: number;
+ stats?: LogsHeaderStats;
+ onRefresh: () => void;
+ onOpenSettings: () => void;
+ onOpenShortcuts: () => void;
+}
+
+/**
+ * Logs page header.
+ *
+ * Two rows:
+ * 1. Title bar (`LOGS.STREAM` ornamental marker matching dashboard's
+ * `HEALTH.X` design language) + status pill + actions.
+ * 2. Stat strip — entries / traces / errors counters mirroring the home
+ * page's `LIVE Account Monitor` card grid.
+ *
+ * Visual unity is the goal here, not minimalism for its own sake.
+ */
+export function LogsHeader({
+ isFetching,
+ hasError,
+ capturedCount,
+ stats,
+ onRefresh,
+ onOpenSettings,
+ onOpenShortcuts,
+}: LogsHeaderProps) {
+ const status = hasError ? 'error' : isFetching ? 'syncing' : 'live';
+ const statusLabel =
+ status === 'error' ? 'Disconnected' : status === 'syncing' ? 'Syncing' : 'Live';
+ const dotClass =
+ status === 'error' ? 'bg-red-500' : status === 'syncing' ? 'bg-amber-500' : 'bg-emerald-500';
+
+ return (
+
+
+
+
+ LOGS.STREAM
+
+
Live activity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Stat strip — visual unity with home page's `LIVE Account Monitor`. */}
+
+ 0 ? 'error' : 'neutral'}
+ />
+
+ ) : null}
+
+
+ );
+}
+
+interface StatProps {
+ label: string;
+ value: number;
+ fallback: string;
+ tone?: 'neutral' | 'error';
+}
+
+function Stat({ label, value, fallback, tone = 'neutral' }: StatProps) {
+ return (
+
+
+ {label}
+
+
+ {fallback}
+
+
+ );
+}
diff --git a/ui/src/components/logs/logs-overview-cards.tsx b/ui/src/components/logs/logs-overview-cards.tsx
deleted file mode 100644
index 8cdea69b..00000000
--- a/ui/src/components/logs/logs-overview-cards.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Activity, Archive, Database, RadioTower } from 'lucide-react';
-import type { LogsConfig, LogsEntry, LogsSource } from '@/lib/api-client';
-import { cn } from '@/lib/utils';
-import { formatCount, formatLogTimestamp, formatRelativeLogTime } from './utils';
-// TODO i18n: import { useTranslation } from 'react-i18next'; when keys are ready
-
-function MetricCard({
- label,
- value,
- detail,
- icon: Icon,
- accent,
-}: {
- label: string;
- value: string;
- detail: string;
- icon: typeof Activity;
- accent: string;
-}) {
- return (
-
-
-
-
{label}
-
{value}
-
{detail}
-
-
-
-
-
- );
-}
-
-export function LogsOverviewCards({
- config,
- sources,
- entries,
- latestTimestamp,
-}: {
- config: LogsConfig;
- sources: LogsSource[];
- entries: LogsEntry[];
- latestTimestamp: string | null;
-}) {
- // TODO i18n: uncomment when keys for Pipeline/Retention/Coverage/Visible Entries are added
- // const { t } = useTranslation();
- const nativeSources = sources.filter((source) => source.kind === 'native').length;
- const legacySources = sources.length - nativeSources;
- const errorCount = entries.filter((entry) => entry.level === 'error').length;
-
- return (
-
- {/* TODO i18n: missing keys for Pipeline/Retention/Coverage/Visible Entries labels and detail strings */}
-
-
-
0 ? ` • ${legacySources} legacy` : ''}`}
- icon={Database}
- accent="bg-sky-500/10 text-sky-700 dark:text-sky-300"
- />
-
- Last ingested event:{' '}
- {formatLogTimestamp(latestTimestamp)}
-
-
- );
-}
diff --git a/ui/src/components/logs/logs-page-skeleton.tsx b/ui/src/components/logs/logs-page-skeleton.tsx
index 1e8fcf47..ae2df11f 100644
--- a/ui/src/components/logs/logs-page-skeleton.tsx
+++ b/ui/src/components/logs/logs-page-skeleton.tsx
@@ -1,58 +1,45 @@
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
import { useTranslation } from 'react-i18next';
+import { Skeleton } from '@/components/ui/skeleton';
+/**
+ * Logs surface initial-load skeleton.
+ * Shape mirrors the new shell: 48px header, 40px tab bar, 3-pane body.
+ * `aria-busy` lives here; phase-06 layers full a11y polish.
+ */
export function LogsPageSkeleton() {
const { t } = useTranslation();
-
return (
-
-
-
-
-
-
-
- {[1, 2, 3, 4].map((item) => (
-
-
-
-
- ))}
+
+
+
-
-
-
-
-
- {[1, 2, 3, 4].map((item) => (
-
-
-
-
-
-
-
-
-
-
- {[1, 2, 3, 4].map((item) => (
-
-
+
+
+
+
+
+
+ {Array.from({ length: 12 }).map((_, idx) => (
+
+
+
);
diff --git a/ui/src/components/logs/logs-row.tsx b/ui/src/components/logs/logs-row.tsx
new file mode 100644
index 00000000..62f2fd98
--- /dev/null
+++ b/ui/src/components/logs/logs-row.tsx
@@ -0,0 +1,191 @@
+import { memo, useState, type KeyboardEvent, type MouseEvent } from 'react';
+import { Copy } from 'lucide-react';
+import type { LogsEntry } from '@/lib/api-client';
+import { cn } from '@/lib/utils';
+import { LogLevelBadge } from './log-level-badge';
+import { FOCUS_RING, MONO_NUMERIC, ROW_DENSITY, ROW_INTERACTIVE, type RowDensity } from './tokens';
+import { getDisplayLatency, getDisplayModule, getDisplayRequestId } from './utils';
+
+export interface LogsRowProps {
+ entry: LogsEntry;
+ isSelected: boolean;
+ density: RowDensity;
+ sourceLabel: string;
+ onSelect: (entryId: string) => void;
+ /** Optional indent (px) when row sits inside an expanded trace. */
+ indent?: number;
+ /** Optional stage chip text (e.g. for child rows of a trace). */
+ stageHint?: string;
+ /** Optional repeat counter — when the row coalesces N identical consecutive entries. */
+ repeatCount?: number;
+}
+
+function formatHms(timestamp: string): string {
+ const d = new Date(timestamp);
+ if (Number.isNaN(d.getTime())) return timestamp;
+ return d.toLocaleTimeString(undefined, {
+ hour12: false,
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ });
+}
+
+async function copyText(text: string): Promise
{
+ try {
+ await navigator.clipboard.writeText(text);
+ return true;
+ } catch {
+ // Insecure context or clipboard permission denied. Caller should NOT
+ // claim success in the UI when this returns false.
+ return false;
+ }
+}
+
+function LogsRowImpl({
+ entry,
+ isSelected,
+ density,
+ sourceLabel,
+ onSelect,
+ indent = 0,
+ stageHint,
+ repeatCount,
+}: LogsRowProps) {
+ const [justCopied, setJustCopied] = useState(false);
+ const moduleLabel = getDisplayModule(entry, sourceLabel);
+ const latencyLabel = getDisplayLatency(entry);
+ const shortRequestId = getDisplayRequestId(entry, { short: true });
+
+ const handleSelect = () => onSelect(entry.id);
+ const handleKey = (e: KeyboardEvent) => {
+ // Ignore keys that bubbled from a nested interactive element (e.g. the
+ // copy-requestId button). Without this guard, pressing Enter on the
+ // copy button would also select the row and shift the detail panel.
+ if (e.target !== e.currentTarget) return;
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleSelect();
+ }
+ };
+
+ const handleCopyRequestId = async (e: MouseEvent) => {
+ e.stopPropagation();
+ if (!entry.requestId) return;
+ const ok = await copyText(entry.requestId);
+ if (!ok) return;
+ setJustCopied(true);
+ window.setTimeout(() => setJustCopied(false), 1200);
+ };
+
+ // Row is a focusable div (not a button) so it can host a real
+ // for the copy-requestId affordance — nesting interactive elements
+ // inside a is invalid HTML and breaks keyboard focus order.
+ return (
+
+ {/* Leading 16px slot mirrors the trace-row chevron column so leaf
+ rows align under the same column edges as trace rows. */}
+
+ {formatHms(entry.timestamp)}
+
+
+
+
+ {moduleLabel}
+
+
+ {/* Stage chip renders inline at the start of the message column
+ when a hint is available. Keeps the 7-column grid intact —
+ adding a dedicated stage column squeezed message to 0px at
+ common list-panel widths. */}
+ {stageHint ? (
+
+ {stageHint}
+
+ ) : null}
+ {entry.message}
+ {repeatCount && repeatCount > 1 ? (
+
+ ×{repeatCount}
+
+ ) : null}
+
+
+ {latencyLabel === '—' ? '' : latencyLabel}
+
+
+ {entry.requestId ? (
+ <>
+ {shortRequestId}
+
+
+
+ ) : null}
+
+
+ );
+}
+
+export const LogsRow = memo(LogsRowImpl, (prev, next) => {
+ return (
+ prev.entry.id === next.entry.id &&
+ prev.isSelected === next.isSelected &&
+ prev.density === next.density &&
+ prev.indent === next.indent &&
+ prev.stageHint === next.stageHint &&
+ prev.sourceLabel === next.sourceLabel &&
+ prev.repeatCount === next.repeatCount
+ );
+});
diff --git a/ui/src/components/logs/logs-shell.tsx b/ui/src/components/logs/logs-shell.tsx
new file mode 100644
index 00000000..a659ee27
--- /dev/null
+++ b/ui/src/components/logs/logs-shell.tsx
@@ -0,0 +1,358 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from '@/components/ui/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ErrorLogsMonitor } from '@/components/error-logs-monitor';
+import { LogsConfigCard } from '@/components/logs/logs-config-card';
+import { LogsDetailPanel } from '@/components/logs/logs-detail-panel';
+import { LogsEntryList } from '@/components/logs/logs-entry-list';
+import { LogsEmpty } from '@/components/logs/logs-empty';
+import { LogsError } from '@/components/logs/logs-error';
+import { LogsFilters } from '@/components/logs/logs-filters';
+import { LogsHeader } from '@/components/logs/logs-header';
+import { LiveTailControls } from '@/components/logs/live-tail-controls';
+import { LogsShortcutsDialog } from '@/components/logs/logs-shortcuts-dialog';
+import { useLogsKeyboardNav } from '@/components/logs/use-logs-keyboard-nav';
+import {
+ getSourceLabelMap,
+ type useLogsWorkspace,
+ type useUpdateLogsConfig,
+} from '@/hooks/use-logs';
+
+const LAYOUT_KEY = 'ccs.logs.layout.v1';
+const DESKTOP_BREAKPOINT = 1200;
+
+type Workspace = ReturnType;
+type UpdateConfig = ReturnType;
+
+interface LayoutSizes {
+ filters: number;
+ list: number;
+ detail: number;
+}
+
+const DEFAULT_SIZES: LayoutSizes = { filters: 22, list: 52, detail: 26 };
+
+function readSavedSizes(): LayoutSizes {
+ if (typeof window === 'undefined') return DEFAULT_SIZES;
+ try {
+ const raw = window.localStorage.getItem(LAYOUT_KEY);
+ if (!raw) return DEFAULT_SIZES;
+ const parsed = JSON.parse(raw) as Partial;
+ if (
+ typeof parsed.filters === 'number' &&
+ typeof parsed.list === 'number' &&
+ typeof parsed.detail === 'number'
+ ) {
+ return { filters: parsed.filters, list: parsed.list, detail: parsed.detail };
+ }
+ } catch {
+ // ignore
+ }
+ return DEFAULT_SIZES;
+}
+
+function useDesktopLayout(): boolean {
+ const [isDesktop, setIsDesktop] = useState(() =>
+ typeof window === 'undefined' ? true : window.innerWidth >= DESKTOP_BREAKPOINT
+ );
+ useEffect(() => {
+ if (typeof window === 'undefined') return;
+ const mq = window.matchMedia(`(min-width: ${DESKTOP_BREAKPOINT}px)`);
+ const sync = () => setIsDesktop(window.innerWidth >= DESKTOP_BREAKPOINT);
+ sync();
+ mq.addEventListener('change', sync);
+ return () => mq.removeEventListener('change', sync);
+ }, []);
+ return isDesktop;
+}
+
+type SheetKey = 'settings' | 'detail' | null;
+
+export interface LogsShellProps {
+ workspace: Workspace;
+ updateConfig: UpdateConfig;
+}
+
+export function LogsShell({ workspace, updateConfig }: LogsShellProps) {
+ const isDesktop = useDesktopLayout();
+ const sourceLabels = useMemo(
+ () => getSourceLabelMap(workspace.sourcesQuery.data ?? []),
+ [workspace.sourcesQuery.data]
+ );
+ const [activeSheet, setActiveSheet] = useState(null);
+ const [sizes, setSizes] = useState(readSavedSizes);
+ const [shortcutsOpen, setShortcutsOpen] = useState(false);
+ const searchInputRef = useRef(null);
+
+ const config = workspace.configQuery.data;
+
+ const handleRefresh = useCallback(() => {
+ void Promise.all([workspace.sourcesQuery.refetch(), workspace.entriesQuery.refetch()]);
+ }, [workspace.entriesQuery, workspace.sourcesQuery]);
+
+ const onLayout = useCallback((next: number[]) => {
+ if (next.length !== 3) return;
+ const [filters, list, detail] = next as [number, number, number];
+ const updated = { filters, list, detail };
+ setSizes(updated);
+ try {
+ window.localStorage.setItem(LAYOUT_KEY, JSON.stringify(updated));
+ } catch {
+ // ignore
+ }
+ }, []);
+
+ const openSettings = useCallback(() => setActiveSheet('settings'), []);
+ const openDetailSheet = useCallback(() => setActiveSheet('detail'), []);
+ const closeSheet = useCallback(() => setActiveSheet(null), []);
+
+ // On mobile, selecting an entry opens the detail bottom-sheet.
+ // We wrap `setSelectedEntryId` so it stays an event-driven side effect.
+ const baseSetSelectedEntryId = workspace.setSelectedEntryId;
+ const handleSelectEntry = useCallback(
+ (id: string | null) => {
+ baseSetSelectedEntryId(id);
+ if (!isDesktop && id) setActiveSheet('detail');
+ },
+ [baseSetSelectedEntryId, isDesktop]
+ );
+
+ const handleShowTrace = useCallback(
+ (requestId: string) => {
+ workspace.setRequestIdFilter(requestId);
+ workspace.setSearch('');
+ },
+ [workspace]
+ );
+
+ const entryIds = useMemo(
+ () => (workspace.entriesQuery.data ?? []).map((e) => e.id),
+ [workspace.entriesQuery.data]
+ );
+
+ // Derive header stat strip values once per data refetch.
+ const headerStats = useMemo(() => {
+ const data = workspace.entriesQuery.data ?? [];
+ const requestIds = new Set();
+ let errors = 0;
+ for (const entry of data) {
+ if (entry.requestId) requestIds.add(entry.requestId);
+ if (entry.level === 'error') errors += 1;
+ }
+ return { entries: data.length, traces: requestIds.size, errors };
+ }, [workspace.entriesQuery.data]);
+
+ const focusSearch = useCallback(() => {
+ const input = document.getElementById('logs-search') as HTMLInputElement | null;
+ if (input) {
+ input.focus();
+ input.select();
+ } else if (searchInputRef.current) {
+ searchInputRef.current.focus();
+ }
+ }, []);
+
+ useLogsKeyboardNav({
+ entryIds,
+ selectedId: workspace.selectedEntryId,
+ onSelect: workspace.setSelectedEntryId,
+ onTogglePause: workspace.liveTail.togglePause,
+ onFocusSearch: focusSearch,
+ onOpenShortcuts: () => setShortcutsOpen(true),
+ onCloseDetail: !isDesktop && activeSheet === 'detail' ? closeSheet : undefined,
+ });
+
+ if (!config) return null;
+
+ const filtersNode = (
+ void workspace.entriesQuery.refetch()}
+ />
+ ) : (
+
+
setShortcutsOpen(true)}
+ />
+
+
+
+
+
+ Stream
+
+
+ Upstream errors
+
+
+
+
+
+ {isDesktop ? (
+
+
+
+ {filtersNode}
+
+
+
+
+ {listNode}
+
+
+
+
+ {detailNode}
+
+
+
+ ) : (
+
+
{filtersNode}
+
{listNode}
+
+
+
+
+
+
+
+ {/* Logging settings sheet (right). Phase-05 may replace body with extracted form. */}
+ (open ? openSettings() : closeSheet())}
+ >
+
+
+ Logging settings
+
+ Configure retention, redaction, and sampling for the logs surface.
+
+
+
+ updateConfig.mutate(payload)}
+ isPending={updateConfig.isPending}
+ />
+
+
+
+
+ (open ? openDetailSheet() : closeSheet())}
+ >
+
+
+ Entry detail
+ Selected log entry context and raw payload.
+
+ {detailNode}
+
+
+ ) : null}
+
+ {children}
+
+ );
+}
+
+export function LogsShortcutsDialog({ open, onOpenChange }: LogsShortcutsDialogProps) {
+ return (
+
+
+
+ Keyboard shortcuts
+ Logs surface keybindings.
+
+
+ {SHORTCUTS.map((s) => (
+
+ {s.label}
+
+ {s.keys.map((k) => (
+ {k}
+ ))}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/ui/src/components/logs/logs-trace-row.tsx b/ui/src/components/logs/logs-trace-row.tsx
new file mode 100644
index 00000000..e5cc6e4c
--- /dev/null
+++ b/ui/src/components/logs/logs-trace-row.tsx
@@ -0,0 +1,136 @@
+import { memo } from 'react';
+import { ChevronDown, ChevronRight, GitBranch } from 'lucide-react';
+import type { LogsEntry, LogsLevel } from '@/lib/api-client';
+import { cn } from '@/lib/utils';
+import { deriveStageHint } from './derive-trace-groups';
+import { LogLevelBadge } from './log-level-badge';
+import { LogsRow } from './logs-row';
+import { FOCUS_RING, MONO_NUMERIC, ROW_DENSITY, ROW_INTERACTIVE, type RowDensity } from './tokens';
+
+export interface TraceGroup {
+ kind: 'trace';
+ requestId: string;
+ module: string;
+ source: string;
+ ts: string; // min child ts
+ maxLevel: LogsLevel;
+ totalLatencyMs: number;
+ children: LogsEntry[];
+}
+
+export interface LogsTraceRowProps {
+ group: TraceGroup;
+ isExpanded: boolean;
+ selectedEntryId: string | null;
+ density: RowDensity;
+ sourceLabel: string;
+ onToggle: (requestId: string) => void;
+ onSelect: (entryId: string) => void;
+}
+
+function formatHms(timestamp: string): string {
+ const d = new Date(timestamp);
+ if (Number.isNaN(d.getTime())) return timestamp;
+ return d.toLocaleTimeString(undefined, {
+ hour12: false,
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ });
+}
+
+function LogsTraceRowImpl({
+ group,
+ isExpanded,
+ selectedEntryId,
+ density,
+ sourceLabel,
+ onToggle,
+ onSelect,
+}: LogsTraceRowProps) {
+ const Chevron = isExpanded ? ChevronDown : ChevronRight;
+ return (
+
+ onToggle(group.requestId)}
+ className={cn(
+ 'flex w-full items-center gap-3 pl-3 pr-3 text-left',
+ ROW_DENSITY[density],
+ ROW_INTERACTIVE,
+ FOCUS_RING
+ )}
+ >
+ {/* Reserve the same 16px slot as leaf rows so all columns align. */}
+
+
+
+ {formatHms(group.ts)}
+
+
+
+
+
+
+ trace · {group.children.length} stages
+
+
+ {group.totalLatencyMs > 0 ? `${group.totalLatencyMs}ms` : ''}
+
+
+ {group.requestId.slice(-8)}
+
+
+ {/* Children render unconditionally — every stage is preserved so
+ retries, duplicated stage logs, and multi-attempt traces stay
+ individually inspectable. The user-facing noise problem this
+ PR addresses lives at the standalone-leaf level (dashboard
+ self-polling spam) where leaf-coalesce in deriveTraceGroups
+ handles it; opting in to see internals is a deliberate debug
+ choice, so collapsing trace stages there would hide intent. */}
+ {isExpanded
+ ? group.children.map((child) => (
+
+ );
+}
+
+export const LogsTraceRow = memo(LogsTraceRowImpl);
diff --git a/ui/src/components/logs/tokens.ts b/ui/src/components/logs/tokens.ts
new file mode 100644
index 00000000..6efc1a96
--- /dev/null
+++ b/ui/src/components/logs/tokens.ts
@@ -0,0 +1,67 @@
+import type { LogsLevel } from '@/lib/api-client';
+
+/**
+ * Calm-density design tokens for the logs surface.
+ *
+ * Strings only -- no runtime cost. Components import these instead of
+ * duplicating Tailwind utilities. Color values use neutral red/amber/blue/zinc
+ * scales tuned for AA contrast on `bg-background` in both light and dark
+ * themes.
+ */
+
+export interface LevelToken {
+ bg: string;
+ fg: string;
+ border: string;
+ dot: string;
+}
+
+export const LEVEL_TOKENS: Record = {
+ error: {
+ bg: 'bg-red-500/10',
+ fg: 'text-red-700 dark:text-red-300',
+ border: 'border-red-500/30',
+ dot: 'bg-red-500',
+ },
+ warn: {
+ bg: 'bg-amber-500/10',
+ fg: 'text-amber-800 dark:text-amber-200',
+ border: 'border-amber-500/30',
+ dot: 'bg-amber-500',
+ },
+ info: {
+ bg: 'bg-sky-500/10',
+ fg: 'text-sky-800 dark:text-sky-200',
+ border: 'border-sky-500/30',
+ dot: 'bg-sky-500',
+ },
+ debug: {
+ bg: 'bg-zinc-500/10',
+ fg: 'text-zinc-700 dark:text-zinc-300',
+ border: 'border-zinc-500/30',
+ dot: 'bg-zinc-500',
+ },
+};
+
+export const ROW_DENSITY = {
+ compact: 'h-8 text-[12px]',
+ cozy: 'h-10 text-[13px]',
+} as const;
+
+export type RowDensity = keyof typeof ROW_DENSITY;
+
+export const PANEL_CHROME = 'border-border bg-background';
+
+export const PANEL_CHROME_RIGHT = 'border-r border-border bg-background';
+export const PANEL_CHROME_LEFT = 'border-l border-border bg-background';
+
+/** Mono numerics for timestamp / latency columns. */
+export const MONO_NUMERIC = 'font-mono tabular-nums';
+
+/** Subtle row hover/selected feedback. */
+export const ROW_INTERACTIVE =
+ 'transition-colors hover:bg-muted/40 data-[selected=true]:bg-muted/60';
+
+/** Calm focus ring used across logs interactive elements. */
+export const FOCUS_RING =
+ 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background';
diff --git a/ui/src/components/logs/use-logs-keyboard-nav.ts b/ui/src/components/logs/use-logs-keyboard-nav.ts
new file mode 100644
index 00000000..1c94f0db
--- /dev/null
+++ b/ui/src/components/logs/use-logs-keyboard-nav.ts
@@ -0,0 +1,97 @@
+import { useEffect } from 'react';
+
+export interface UseLogsKeyboardNavOptions {
+ /** Currently visible entry ids in display order (post-filter, post-grouping flatten). */
+ entryIds: string[];
+ selectedId: string | null;
+ onSelect: (id: string) => void;
+ onTogglePause: () => void;
+ onFocusSearch: () => void;
+ onOpenShortcuts: () => void;
+ /** Detail-sheet close (mobile only). Optional. */
+ onCloseDetail?: () => void;
+ enabled?: boolean;
+}
+
+function isTypingTarget(target: EventTarget | null): boolean {
+ if (!(target instanceof HTMLElement)) return false;
+ const tag = target.tagName;
+ if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+ return target.isContentEditable;
+}
+
+/**
+ * Centralised keyboard navigation for the logs surface.
+ * Bound on `window`. Bail out when typing in form fields or the user has
+ * any modifier (cmd/ctrl/alt) other than shift on `?`.
+ */
+export function useLogsKeyboardNav({
+ entryIds,
+ selectedId,
+ onSelect,
+ onTogglePause,
+ onFocusSearch,
+ onOpenShortcuts,
+ onCloseDetail,
+ enabled = true,
+}: UseLogsKeyboardNavOptions): void {
+ useEffect(() => {
+ if (!enabled) return;
+ const handler = (event: KeyboardEvent) => {
+ if (event.metaKey || event.ctrlKey || event.altKey) return;
+
+ // `/` always focuses search, even from inputs (consistent with most apps)
+ if (event.key === '/') {
+ event.preventDefault();
+ onFocusSearch();
+ return;
+ }
+ if (event.key === '?') {
+ event.preventDefault();
+ onOpenShortcuts();
+ return;
+ }
+ if (isTypingTarget(event.target)) return;
+
+ if (event.key === 'Escape' && onCloseDetail) {
+ onCloseDetail();
+ return;
+ }
+
+ if (event.key === ' ') {
+ event.preventDefault();
+ onTogglePause();
+ return;
+ }
+
+ if (event.key === 'j' || event.key === 'ArrowDown') {
+ event.preventDefault();
+ if (entryIds.length === 0) return;
+ const idx = selectedId ? entryIds.indexOf(selectedId) : -1;
+ const next = entryIds[Math.min(idx + 1, entryIds.length - 1)] ?? entryIds[0];
+ if (next) onSelect(next);
+ return;
+ }
+
+ if (event.key === 'k' || event.key === 'ArrowUp') {
+ event.preventDefault();
+ if (entryIds.length === 0) return;
+ const idx = selectedId ? entryIds.indexOf(selectedId) : 0;
+ const next = entryIds[Math.max(idx - 1, 0)] ?? entryIds[0];
+ if (next) onSelect(next);
+ return;
+ }
+ };
+ window.addEventListener('keydown', handler);
+ return () => window.removeEventListener('keydown', handler);
+ }, [
+ enabled,
+ entryIds,
+ selectedId,
+ onSelect,
+ onTogglePause,
+ onFocusSearch,
+ onOpenShortcuts,
+ onCloseDetail,
+ ]);
+}
diff --git a/ui/src/components/logs/utils.ts b/ui/src/components/logs/utils.ts
index 90de8d1b..1c77dbf3 100644
--- a/ui/src/components/logs/utils.ts
+++ b/ui/src/components/logs/utils.ts
@@ -1,4 +1,4 @@
-import type { LogsLevel } from '@/lib/api-client';
+import type { LogsEntry, LogsLevel } from '@/lib/api-client';
// NOTE: This module contains utility functions that are not directly i18n-aware.
// String literals here ("No activity yet", "Error", etc.) are used as fallbacks
// and defaults in non-component contexts. Components consuming these values
@@ -80,3 +80,37 @@ export function getLevelLabel(level: LogsLevel) {
return 'Debug';
}
}
+
+// Field accessors shared by list row + detail panel.
+// Without these, list and detail diverged — list fell back to source/sourceLabel
+// while detail showed `—` for the same entry. Single source of truth.
+
+export function getDisplayModule(entry: LogsEntry, sourceLabel?: string): string {
+ return entry.module ?? sourceLabel ?? entry.source ?? '—';
+}
+
+export function getDisplayStage(entry: LogsEntry): string {
+ return entry.stage ?? '—';
+}
+
+export function getDisplayRequestId(entry: LogsEntry, options: { short?: boolean } = {}): string {
+ if (!entry.requestId) return '—';
+ return options.short ? entry.requestId.slice(-8) : entry.requestId;
+}
+
+export function getDisplayLatency(entry: LogsEntry): string {
+ if (entry.latencyMs === undefined || entry.latencyMs === null) return '—';
+ return `${entry.latencyMs}ms`;
+}
+
+/**
+ * Default filter pattern: dashboard self-polling sources start with `web-server:`.
+ * UI applies as a default exclusion to keep the logs view focused on signal,
+ * not the dashboard observing itself.
+ */
+export const DASHBOARD_INTERNALS_PATTERN = /^web-server:/i;
+
+export function isDashboardInternal(entry: LogsEntry): boolean {
+ if (!entry.source) return false;
+ return DASHBOARD_INTERNALS_PATTERN.test(entry.source);
+}
diff --git a/ui/src/hooks/use-logs.ts b/ui/src/hooks/use-logs.ts
index 356ebb3a..702db1f6 100644
--- a/ui/src/hooks/use-logs.ts
+++ b/ui/src/hooks/use-logs.ts
@@ -1,5 +1,5 @@
import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useDeferredValue, useMemo, useState } from 'react';
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import {
@@ -9,20 +9,124 @@ import {
type UpdateLogsConfigPayload,
} from '@/lib/api-client';
+// ---- dev-only fixture injection (`?mock=logs`) -----------------------------
+// Tree-shaken from production: the fixture import lives behind
+// `import.meta.env.DEV` and the URL flag check.
+const KNOWN_LOGS_ENTRY_KEYS = new Set([
+ 'id',
+ 'timestamp',
+ 'level',
+ 'source',
+ 'event',
+ 'message',
+ 'processId',
+ 'runId',
+ 'context',
+ 'requestId',
+ 'module',
+ 'stage',
+ 'latencyMs',
+ 'metadata',
+ 'error',
+]);
+
+let _shapeWarned = false;
+function assertLogsEntryShape(entry: LogsEntry): void {
+ if (!import.meta.env.DEV || _shapeWarned) return;
+ const missing: string[] = [];
+ if (!entry.id) missing.push('id');
+ if (!entry.timestamp) missing.push('timestamp');
+ if (!entry.level) missing.push('level');
+ const unknown = Object.keys(entry).filter((k) => !KNOWN_LOGS_ENTRY_KEYS.has(k));
+ if (missing.length || unknown.length) {
+ _shapeWarned = true;
+
+ console.warn('[logs] LogsEntry shape drift detected -- backend contract changed?', {
+ missing,
+ unknown,
+ });
+ }
+}
+
+function isMockLogsEnabled(): boolean {
+ if (!import.meta.env.DEV) return false;
+ if (typeof window === 'undefined') return false;
+ try {
+ return new URLSearchParams(window.location.search).get('mock') === 'logs';
+ } catch {
+ return false;
+ }
+}
+
export type LogsLevelFilter = 'all' | LogsLevel;
export type LogsSourceFilter = 'all' | string;
+export type LogsTimeWindow = 'all' | '5m' | '15m' | '1h' | '24h';
const CONFIG_QUERY_KEY = ['logs', 'config'] as const;
const SOURCES_QUERY_KEY = ['logs', 'sources'] as const;
const DEFAULT_LIMIT = 150;
+const POLL_INTERVAL_MS = 10_000;
+const TEXT_DEBOUNCE_MS = 250;
+
+function useDebouncedValue(value: T, delayMs: number): T {
+ const [debounced, setDebounced] = useState(value);
+ useEffect(() => {
+ const t = window.setTimeout(() => setDebounced(value), delayMs);
+ return () => window.clearTimeout(t);
+ }, [value, delayMs]);
+ return debounced;
+}
+
+function useDocumentVisible(): boolean {
+ const [visible, setVisible] = useState(() =>
+ typeof document === 'undefined' ? true : document.visibilityState !== 'hidden'
+ );
+ useEffect(() => {
+ if (typeof document === 'undefined') return;
+ const sync = () => setVisible(document.visibilityState !== 'hidden');
+ document.addEventListener('visibilitychange', sync);
+ return () => document.removeEventListener('visibilitychange', sync);
+ }, []);
+ return visible;
+}
+
+function windowToCutoffMs(window: LogsTimeWindow): number | null {
+ switch (window) {
+ case '5m':
+ return 5 * 60_000;
+ case '15m':
+ return 15 * 60_000;
+ case '1h':
+ return 60 * 60_000;
+ case '24h':
+ return 24 * 60 * 60_000;
+ default:
+ return null;
+ }
+}
export function useLogsWorkspace() {
const [selectedSource, setSelectedSource] = useState('all');
const [selectedLevel, setSelectedLevel] = useState('all');
const [search, setSearch] = useState('');
+ const [moduleFilter, setModuleFilter] = useState('');
+ const [stageFilter, setStageFilter] = useState('');
+ const [requestIdFilter, setRequestIdFilter] = useState('');
+ const [timeWindow, setTimeWindow] = useState('all');
const [limit, setLimit] = useState(DEFAULT_LIMIT);
const [selectedEntryId, setSelectedEntryId] = useState(null);
+ const [isPaused, setIsPaused] = useState(false);
+ // Default ON: dashboard self-polling generates 100s of identical entries
+ // per refresh which drown out real provider activity. Users can opt in to
+ // see internals via the advanced filter toggle.
+ const [hideDashboardInternals, setHideDashboardInternals] = useState(true);
+ const frozenIdsRef = useRef>(new Set());
+
const deferredSearch = useDeferredValue(search.trim());
+ const debouncedModule = useDebouncedValue(moduleFilter.trim(), TEXT_DEBOUNCE_MS);
+ const debouncedStage = useDebouncedValue(stageFilter.trim(), TEXT_DEBOUNCE_MS);
+ const debouncedRequestId = useDebouncedValue(requestIdFilter.trim(), TEXT_DEBOUNCE_MS);
+ const documentVisible = useDocumentVisible();
const configQuery = useQuery({
queryKey: CONFIG_QUERY_KEY,
@@ -36,37 +140,122 @@ export function useLogsWorkspace() {
refetchInterval: 15_000,
});
+ const mockEnabled = isMockLogsEnabled();
+ const refetchInterval = isPaused || !documentVisible ? false : POLL_INTERVAL_MS;
+
const entriesQuery = useQuery({
- queryKey: ['logs', 'entries', selectedSource, selectedLevel, deferredSearch, limit],
- queryFn: async () =>
- (
- await api.logs.getEntries({
+ queryKey: [
+ 'logs',
+ 'entries',
+ selectedSource,
+ selectedLevel,
+ deferredSearch,
+ debouncedModule,
+ debouncedStage,
+ debouncedRequestId,
+ timeWindow,
+ limit,
+ hideDashboardInternals ? 'hide-internals' : 'show-internals',
+ mockEnabled ? 'mock' : 'live',
+ ],
+ queryFn: async () => {
+ let entries: LogsEntry[];
+ if (mockEnabled && import.meta.env.DEV) {
+ const { STRUCTURED_LOG_ENTRIES } =
+ await import('@/components/logs/__fixtures__/structured-log-entries');
+ entries = STRUCTURED_LOG_ENTRIES.filter((entry) => {
+ if (selectedSource !== 'all' && entry.source !== selectedSource) return false;
+ if (selectedLevel !== 'all' && entry.level !== selectedLevel) return false;
+ if (deferredSearch) {
+ const needle = deferredSearch.toLowerCase();
+ const hay =
+ `${entry.message} ${entry.event} ${entry.module ?? ''} ${entry.requestId ?? ''}`.toLowerCase();
+ if (!hay.includes(needle)) return false;
+ }
+ return true;
+ }).slice(0, limit);
+ } else {
+ const result = await api.logs.getEntries({
source: selectedSource === 'all' ? undefined : selectedSource,
level: selectedLevel === 'all' ? undefined : selectedLevel,
search: deferredSearch || undefined,
limit,
- })
- ).entries,
+ });
+ entries = result.entries;
+ }
+
+ // Client-side fallback for advanced filters (backend may not yet implement).
+ const cutoffMs = windowToCutoffMs(timeWindow);
+ const now = Date.now();
+ const filtered = entries.filter((entry) => {
+ if (debouncedModule && !(entry.module ?? '').includes(debouncedModule)) return false;
+ if (debouncedStage && (entry.stage ?? '') !== debouncedStage) return false;
+ if (debouncedRequestId && !(entry.requestId ?? '').includes(debouncedRequestId))
+ return false;
+ if (cutoffMs !== null) {
+ const ts = Date.parse(entry.timestamp);
+ if (Number.isFinite(ts) && now - ts > cutoffMs) return false;
+ }
+ // Hide dashboard self-polling unless user opted in. Preserves the
+ // signal-to-noise ratio for fresh-load investigations.
+ if (hideDashboardInternals && /^web-server:/i.test(entry.source)) return false;
+ return true;
+ });
+ const head = filtered[0];
+ if (head) assertLogsEntryShape(head);
+ return filtered;
+ },
placeholderData: keepPreviousData,
- refetchInterval: 10_000,
+ refetchInterval,
+ refetchOnWindowFocus: true,
});
- const activeSelectedEntryId = useMemo(() => {
- const nextEntries = entriesQuery.data ?? [];
- if (nextEntries.length === 0) {
- return null;
+ // Live-tail pending count: rotation-safe id-set diff.
+ const entriesData = entriesQuery.data;
+ const backendEntries = useMemo(() => entriesData ?? [], [entriesData]);
+ const pendingCount = useMemo(() => {
+ if (!isPaused) return 0;
+ const frozen = frozenIdsRef.current;
+ let count = 0;
+ for (const e of backendEntries) {
+ if (!frozen.has(e.id)) count += 1;
}
+ return count;
+ }, [backendEntries, isPaused]);
- if (selectedEntryId && nextEntries.some((entry) => entry.id === selectedEntryId)) {
+ const pause = useCallback(() => {
+ frozenIdsRef.current = new Set(backendEntries.map((e) => e.id));
+ setIsPaused(true);
+ }, [backendEntries]);
+
+ const resume = useCallback(() => {
+ frozenIdsRef.current = new Set();
+ setIsPaused(false);
+ void entriesQuery.refetch();
+ }, [entriesQuery]);
+
+ const togglePause = useCallback(() => {
+ if (isPaused) resume();
+ else pause();
+ }, [isPaused, pause, resume]);
+
+ // Selection: keep selectedId across refetch, fall back to first entry.
+ const activeSelectedEntryId = useMemo(() => {
+ if (backendEntries.length === 0) return null;
+ if (selectedEntryId && backendEntries.some((entry) => entry.id === selectedEntryId)) {
return selectedEntryId;
}
-
- return nextEntries[0]?.id ?? null;
- }, [entriesQuery.data, selectedEntryId]);
+ return backendEntries[0]?.id ?? null;
+ }, [backendEntries, selectedEntryId]);
const selectedEntry = useMemo(
- () => (entriesQuery.data ?? []).find((entry) => entry.id === activeSelectedEntryId) ?? null,
- [activeSelectedEntryId, entriesQuery.data]
+ () => backendEntries.find((entry) => entry.id === activeSelectedEntryId) ?? null,
+ [activeSelectedEntryId, backendEntries]
+ );
+
+ // selectionOutOfScope: a selection survived but is no longer in filtered entries.
+ const isSelectionOutOfScope = Boolean(
+ selectedEntryId && !backendEntries.some((entry) => entry.id === selectedEntryId)
);
const latestTimestamp = useMemo(() => {
@@ -76,6 +265,17 @@ export function useLogsWorkspace() {
return timestamps.sort((left, right) => right.localeCompare(left))[0] ?? null;
}, [sourcesQuery.data]);
+ const clearAdvancedFilters = useCallback(() => {
+ setSearch('');
+ setSelectedLevel('all');
+ setSelectedSource('all');
+ setModuleFilter('');
+ setStageFilter('');
+ setRequestIdFilter('');
+ setTimeWindow('all');
+ setHideDashboardInternals(true);
+ }, []);
+
return {
configQuery,
sourcesQuery,
@@ -86,16 +286,35 @@ export function useLogsWorkspace() {
setSelectedLevel,
search,
setSearch,
+ moduleFilter,
+ setModuleFilter,
+ stageFilter,
+ setStageFilter,
+ requestIdFilter,
+ setRequestIdFilter,
+ timeWindow,
+ setTimeWindow,
+ hideDashboardInternals,
+ setHideDashboardInternals,
limit,
setLimit,
selectedEntryId: activeSelectedEntryId,
setSelectedEntryId,
selectedEntry,
+ isSelectionOutOfScope,
latestTimestamp,
isInitialLoading:
(!configQuery.data && configQuery.isLoading) ||
(!sourcesQuery.data && sourcesQuery.isLoading) ||
(!entriesQuery.data && entriesQuery.isLoading),
+ liveTail: {
+ isPaused,
+ pendingCount,
+ pause,
+ resume,
+ togglePause,
+ },
+ clearAdvancedFilters,
};
}
@@ -129,6 +348,16 @@ export function getLogLevelOptions(): Array<{ value: LogsLevelFilter; label: str
];
}
+export function getLogsTimeWindowOptions(): Array<{ value: LogsTimeWindow; label: string }> {
+ return [
+ { value: 'all', label: 'All time' },
+ { value: '5m', label: 'Last 5m' },
+ { value: '15m', label: 'Last 15m' },
+ { value: '1h', label: 'Last 1h' },
+ { value: '24h', label: 'Last 24h' },
+ ];
+}
+
export function getSelectedSourceLabel(
source: LogsSourceFilter,
sources: Array<{ source: string; label: string }>
diff --git a/ui/src/lib/api-client.ts b/ui/src/lib/api-client.ts
index d3338297..c35034cb 100644
--- a/ui/src/lib/api-client.ts
+++ b/ui/src/lib/api-client.ts
@@ -9,7 +9,7 @@ import type {
ListAiProvidersResult,
UpsertAiProviderEntryInput,
} from '../../../src/cliproxy/ai-providers';
-import type { ProviderEntitlementEvidence } from '../../../src/cliproxy/provider-entitlement-types';
+import type { ProviderEntitlementEvidence } from '../../../src/cliproxy/auth/provider-entitlement-types';
import type { BrowserRuntimeEnv } from '../../../src/utils/browser/chrome-reuse';
export const API_BASE_URL = '/api';
@@ -981,6 +981,14 @@ export interface LogsEntry {
processId: number | null;
runId: string | null;
context?: unknown;
+ // Structured-log fields from #1141 contract. All optional; UI ships first,
+ // backend fills these incrementally. Order is stable and additive.
+ requestId?: string;
+ module?: string;
+ stage?: string;
+ latencyMs?: number;
+ metadata?: Record;
+ error?: { message: string; stack?: string; code?: string };
}
export interface LogsEntriesParams {
diff --git a/ui/src/pages/logs.tsx b/ui/src/pages/logs.tsx
index ffc755fe..124439fd 100644
--- a/ui/src/pages/logs.tsx
+++ b/ui/src/pages/logs.tsx
@@ -1,487 +1,25 @@
-import { useEffect, useState } from 'react';
-import {
- ArrowRight,
- ChevronLeft,
- ChevronRight,
- RefreshCw,
- ScrollText,
- TimerReset,
-} from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { cn } from '@/lib/utils';
-import { ErrorLogsMonitor } from '@/components/error-logs-monitor';
-import { LogsConfigCard } from '@/components/logs/logs-config-card';
-import { LogsDetailPanel } from '@/components/logs/logs-detail-panel';
-import { LogsEntryList } from '@/components/logs/logs-entry-list';
-import { LogsFilters } from '@/components/logs/logs-filters';
+import { LogsShell } from '@/components/logs/logs-shell';
import { LogsPageSkeleton } from '@/components/logs/logs-page-skeleton';
-import { getSourceLabelMap, useLogsWorkspace, useUpdateLogsConfig } from '@/hooks/use-logs';
-// TODO i18n: import { useTranslation } from 'react-i18next'; when keys are ready
-
-const DESKTOP_LOGS_BREAKPOINT = 1200;
-const LEFT_PANEL_WIDTH = 336;
-const RIGHT_PANEL_WIDTH = 368;
-const COLLAPSED_PANEL_WIDTH = 52;
-
-function CollapsedPaneToggle({
- side,
- label,
- onExpand,
-}: {
- side: 'left' | 'right';
- label: string;
- onExpand: () => void;
-}) {
- return (
-
-
- {side === 'left' ? (
-
-
- {label}
-
-
- );
-}
+import { useLogsWorkspace, useUpdateLogsConfig } from '@/hooks/use-logs';
+/**
+ * Logs route — calm, virtualized 3-pane shell.
+ *
+ * Implementation lives in `LogsShell` (composition + layout) and the
+ * `logs/*` components (filters/list/detail/settings). This file is just the
+ * route + initial-load gate.
+ */
export function LogsPage() {
- // TODO i18n: uncomment when keys for Syncing/Refresh and other strings are added
- // const { t } = useTranslation();
const workspace = useLogsWorkspace();
const updateConfig = useUpdateLogsConfig();
- const sourceLabels = getSourceLabelMap(workspace.sourcesQuery.data ?? []);
- const [isDesktopLayout, setIsDesktopLayout] = useState(() =>
- typeof window !== 'undefined' ? window.innerWidth >= DESKTOP_LOGS_BREAKPOINT : false
- );
- const [isFiltersCollapsed, setIsFiltersCollapsed] = useState(false);
- const [isDetailsCollapsed, setIsDetailsCollapsed] = useState(false);
-
- useEffect(() => {
- const mediaQuery = window.matchMedia(`(min-width: ${DESKTOP_LOGS_BREAKPOINT}px)`);
- const syncLayout = () => {
- setIsDesktopLayout(window.innerWidth >= DESKTOP_LOGS_BREAKPOINT);
- };
-
- syncLayout();
- mediaQuery.addEventListener('change', syncLayout);
- return () => mediaQuery.removeEventListener('change', syncLayout);
- }, []);
if (workspace.isInitialLoading) {
return
-
-
-
-
-
-
-
-
-
-
- Operational
-
-
- Log Operations Center
-
-
-
- CCS.TOC.LOGS.STREAM.v3
-
-
-
-
-
-
-
-
-
-
-
- Redaction
-
-
- {config.redact ? 'Enforced' : 'Standby'}
-
-
-
-
-
-
-
-
- Retention
-
-
- {config.retain_days}D / {config.rotate_mb}MB
-
-
-
-
-
-
-
-
- void Promise.all([workspace.sourcesQuery.refetch(), workspace.entriesQuery.refetch()])
- }
- >
-
-
- {!workspace.entriesQuery.isFetching && !workspace.sourcesQuery.isFetching && (
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
- Telemetry Stream
-
-
- Legacy Errors
-
-
-
-
-
-
-
-
- Connected
-
-
-
- {workspace.entriesQuery.data?.length ?? 0} captured
-
-
-
- {isDesktopLayout ? (
-
-
- {isFiltersCollapsed ? (
-
setIsFiltersCollapsed(false)}
- />
- ) : (
-
-
-
-
- Filters
-
-
- Search, source, and retention controls
-
-
-
setIsFiltersCollapsed(true)}
- aria-label="Hide filters"
- className="h-9 w-9 rounded-xl border border-border/70 bg-background/85 shadow-sm"
- >
-
-
-
-
-
-
- void Promise.all([
- workspace.sourcesQuery.refetch(),
- workspace.entriesQuery.refetch(),
- ])
- }
- isRefreshing={
- workspace.entriesQuery.isFetching || workspace.sourcesQuery.isFetching
- }
- />
-
- updateConfig.mutate(payload)}
- isPending={updateConfig.isPending}
- />
-
-
-
-
-
-
-
-
- {isDetailsCollapsed ? (
-
setIsDetailsCollapsed(false)}
- />
- ) : (
-
-
-
-
- Details
-
-
- Selected entry context and raw payload
-
-
-
setIsDetailsCollapsed(true)}
- aria-label="Hide details"
- className="h-9 w-9 rounded-xl border border-border/70 bg-background/85 shadow-sm"
- >
-
-
-
-
-
-
-
-
-
- void Promise.all([
- workspace.sourcesQuery.refetch(),
- workspace.entriesQuery.refetch(),
- ])
- }
- isRefreshing={
- workspace.entriesQuery.isFetching || workspace.sourcesQuery.isFetching
- }
- />
- updateConfig.mutate(payload)}
- isPending={updateConfig.isPending}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Legacy Diagnostic Node
-
-
- CCS-MATRIX-FAILURE-MONITOR
-
-
-
-
- Mode: Historical
-
-
-
- CLIProxy Failure Analysis
-
-
- Maintain oversight of legacy request failures while the unified stream
- consolidates system-wide telemetry. This view provides direct access to the
- historical failure matrix for deep-field debugging.
-
-
-
-
-
-
-
-
-
-
- Realtime Monitoring Deck
-
-
-
-
-
-
-
-
& Pick): LogsEntry {
+ return {
+ level: 'info',
+ source: 'web-server:http',
+ event: 'event.default',
+ message: 'default message',
+ ...overrides,
+ } as LogsEntry;
+}
+
+function leafEntries(
+ ...overrides: Array & Pick>
+) {
+ return overrides.map(entry);
+}
+
+describe('deriveStageHint', () => {
+ it('returns explicit stage when present', () => {
+ expect(deriveStageHint(entry({ id: '1', timestamp: 't', stage: 'route' }))).toBe('route');
+ });
+
+ it('falls back to last `.`-segment of event when stage is missing', () => {
+ expect(deriveStageHint(entry({ id: '1', timestamp: 't', event: 'request.dispatched' }))).toBe(
+ 'dispatched'
+ );
+ });
+
+ it('caps the derived hint at 12 chars', () => {
+ expect(
+ deriveStageHint(entry({ id: '1', timestamp: 't', event: 'foo.absurdlylongsegmentname' }))
+ ).toBe('absurdlylong');
+ });
+
+ it('returns undefined when neither stage nor event is meaningful', () => {
+ expect(deriveStageHint(entry({ id: '1', timestamp: 't', event: '' }))).toBeUndefined();
+ });
+
+ it('treats single-segment event as its own hint', () => {
+ expect(deriveStageHint(entry({ id: '1', timestamp: 't', event: 'startup' }))).toBe('startup');
+ });
+});
+
+describe('deriveTraceGroups', () => {
+ it('returns empty array for empty input', () => {
+ expect(deriveTraceGroups([])).toEqual([]);
+ });
+
+ it('emits a single leaf for a no-requestId entry', () => {
+ const e = entry({ id: '1', timestamp: '2026-01-01T00:00:00Z' });
+ const result = deriveTraceGroups([e]);
+ expect(result).toHaveLength(1);
+ expect(result[0]?.kind).toBe('leaf');
+ expect((result[0] as LeafItem).entry).toBe(e);
+ expect((result[0] as LeafItem).repeatCount).toBeUndefined();
+ });
+
+ it('groups entries sharing a requestId into one trace', () => {
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '1', timestamp: '2026-01-01T00:00:01Z', requestId: 'req-1', stage: 'intake' },
+ { id: '2', timestamp: '2026-01-01T00:00:02Z', requestId: 'req-1', stage: 'route' }
+ )
+ );
+ expect(result).toHaveLength(1);
+ expect(result[0]?.kind).toBe('trace');
+ expect((result[0] as TraceGroup).children).toHaveLength(2);
+ });
+
+ it('sorts trace children by ts ascending and pins group ts to oldest child', () => {
+ // Input order intentionally reverses ts so we can assert the sort.
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '2', timestamp: '2026-01-01T00:00:02Z', requestId: 'req-1' },
+ { id: '1', timestamp: '2026-01-01T00:00:01Z', requestId: 'req-1' }
+ )
+ );
+ const trace = result[0] as TraceGroup;
+ expect(trace.children.map((c) => c.id)).toEqual(['1', '2']);
+ expect(trace.ts).toBe('2026-01-01T00:00:01Z');
+ });
+
+ it('coalesces two adjacent identical leaves into a single ×N row', () => {
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '1', timestamp: 't1', event: 'poll', message: 'tick' },
+ { id: '2', timestamp: 't2', event: 'poll', message: 'tick' }
+ )
+ );
+ expect(result).toHaveLength(1);
+ const leaf = result[0] as LeafItem;
+ expect(leaf.repeatCount).toBe(2);
+ expect(leaf.collapsedRange?.fromTs).toBe('t1');
+ expect(leaf.collapsedRange?.toTs).toBe('t2');
+ });
+
+ it('does NOT coalesce identical leaves split by an unrelated trace (round-3 fix)', () => {
+ // Two identical no-requestId entries with a trace between them: the run
+ // must break — they were not adjacent in the real stream.
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '1', timestamp: 't1', event: 'poll', message: 'tick' },
+ { id: '2', timestamp: 't2', requestId: 'req-1' },
+ { id: '3', timestamp: 't3', event: 'poll', message: 'tick' }
+ )
+ );
+ // Expected: 1 trace + 2 distinct leaves (no ×N).
+ const leaves = result.filter((r) => r.kind === 'leaf') as LeafItem[];
+ expect(leaves).toHaveLength(2);
+ expect(leaves.every((l) => l.repeatCount === undefined)).toBe(true);
+ });
+
+ it('keeps adjacent leaves with different stages as separate rows (round-6 fix)', () => {
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '1', timestamp: 't1', event: 'e', message: 'm', stage: 'route' },
+ { id: '2', timestamp: 't2', event: 'e', message: 'm', stage: 'dispatch' }
+ )
+ );
+ expect(result).toHaveLength(2);
+ expect(result.every((r) => r.kind === 'leaf' && r.repeatCount === undefined)).toBe(true);
+ });
+
+ it('keeps adjacent leaves with different messages as separate rows', () => {
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '1', timestamp: 't1', event: 'login', message: 'alice' },
+ { id: '2', timestamp: 't2', event: 'login', message: 'bob' }
+ )
+ );
+ expect(result).toHaveLength(2);
+ expect(result.every((r) => r.kind === 'leaf' && r.repeatCount === undefined)).toBe(true);
+ });
+
+ it('display-sorts items reverse-chronologically', () => {
+ // Use distinct events so leaves don't coalesce — testing display sort,
+ // not coalesce.
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '1', timestamp: '2026-01-01T00:00:01Z', event: 'a' },
+ { id: '2', timestamp: '2026-01-01T00:00:03Z', event: 'b' },
+ { id: '3', timestamp: '2026-01-01T00:00:02Z', event: 'c' }
+ )
+ );
+ const ids = result.map((r) => (r.kind === 'leaf' ? r.entry.id : 'trace'));
+ expect(ids).toEqual(['2', '3', '1']);
+ });
+
+ it('computes max level across trace children', () => {
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '1', timestamp: 't1', requestId: 'r', level: 'debug' },
+ { id: '2', timestamp: 't2', requestId: 'r', level: 'error' },
+ { id: '3', timestamp: 't3', requestId: 'r', level: 'info' }
+ )
+ );
+ expect((result[0] as TraceGroup).maxLevel).toBe('error');
+ });
+
+ it('sums latencyMs across trace children', () => {
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '1', timestamp: 't1', requestId: 'r', latencyMs: 100 },
+ { id: '2', timestamp: 't2', requestId: 'r', latencyMs: 50 },
+ { id: '3', timestamp: 't3', requestId: 'r' /* no latency */ }
+ )
+ );
+ expect((result[0] as TraceGroup).totalLatencyMs).toBe(150);
+ });
+
+ it('preserves original input order when computing leaf adjacency, even if display sort reorders later', () => {
+ // Stream: [A, B, A] — A entries identical but split by B. A run of 1+1+1.
+ const result = deriveTraceGroups(
+ leafEntries(
+ { id: '1', timestamp: '2026-01-01T00:00:01Z', event: 'A' },
+ { id: '2', timestamp: '2026-01-01T00:00:02Z', event: 'B' },
+ { id: '3', timestamp: '2026-01-01T00:00:03Z', event: 'A' }
+ )
+ );
+ const leaves = result.filter((r) => r.kind === 'leaf') as LeafItem[];
+ expect(leaves).toHaveLength(3);
+ // None should have repeatCount because A and A weren't adjacent.
+ expect(leaves.every((l) => l.repeatCount === undefined)).toBe(true);
+ });
+});
diff --git a/ui/tests/unit/ui/pages/logs-page.test.tsx b/ui/tests/unit/ui/pages/logs-page.test.tsx
index 4c7e01fd..7db802b0 100644
--- a/ui/tests/unit/ui/pages/logs-page.test.tsx
+++ b/ui/tests/unit/ui/pages/logs-page.test.tsx
@@ -1,5 +1,26 @@
-import { render, screen, userEvent, waitFor } from '@tests/setup/test-utils';
+import { render, screen, userEvent, waitFor, within } from '@tests/setup/test-utils';
import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Mock react-virtuoso for jsdom (no layout measurements -> zero rows).
+vi.mock('react-virtuoso', () => {
+ const Virtuoso = ({
+ data,
+ itemContent,
+ }: {
+ data: unknown[];
+ itemContent: (index: number, item: unknown) => React.ReactNode;
+ }) => (
+
+ {data.map((item, index) => (
+
+ {itemContent(index, item)}
+
+ ))}
+
();
@@ -8,15 +29,12 @@ beforeAll(() => {
if (!Element.prototype.hasPointerCapture) {
Element.prototype.hasPointerCapture = () => false;
}
-
if (!Element.prototype.setPointerCapture) {
Element.prototype.setPointerCapture = () => undefined;
}
-
if (!Element.prototype.releasePointerCapture) {
Element.prototype.releasePointerCapture = () => undefined;
}
-
if (!Element.prototype.scrollIntoView) {
Element.prototype.scrollIntoView = () => undefined;
}
@@ -47,7 +65,6 @@ function buildEntries(source: string) {
},
];
}
-
return [
{
id: 'entry-1',
@@ -92,7 +109,6 @@ function installFetchMock() {
},
});
}
-
if (parsed.pathname === '/api/logs/sources') {
return jsonResponse({
sources: [
@@ -113,7 +129,6 @@ function installFetchMock() {
],
});
}
-
if (parsed.pathname === '/api/logs/entries') {
const source = parsed.searchParams.get('source') ?? 'all';
const search = parsed.searchParams.get('search');
@@ -122,7 +137,6 @@ function installFetchMock() {
);
return jsonResponse({ entries });
}
-
return Promise.reject(new Error(`Unhandled request: ${url}`));
});
}
@@ -131,69 +145,55 @@ describe('LogsPage', () => {
beforeEach(() => {
vi.clearAllMocks();
global.fetch = fetchMock;
+ // Force desktop layout so the detail panel renders inline.
Object.defineProperty(window, 'innerWidth', {
configurable: true,
writable: true,
- value: 900,
+ value: 1400,
});
});
it('shows the loading skeleton while the initial queries are pending', () => {
fetchMock.mockImplementation(() => new Promise(() => {}));
-
render( 
+ 
+ 
+ 
+ 
+ 
+ 
+