@polderlabs/bizar 10.4.2 → 10.4.4

package/bizar-dash/src/web/v8/views/Agents/AgentsView.tsx

@@ -21,6 +21,31 @@ import type { BizarAgent, CCAgent, WsMessage } from '../../data/types.js';
 import { AlertTriangle, Bot, Cpu, Pause, Play, Plus, RotateCw } from 'lucide-react';
 import { AgentHierarchy } from './AgentHierarchy.js';
 
+/**
+ * Strip leaked LLM interior monologue from agent card snippets.
+ * Clips to the first sentence, caps at 140 chars.
+ */
+export function sanitizeSummary(raw: string | undefined): string {
+  if (!raw) return '';
+  let s = raw.replace(/<thinking>[\s\S]*?<\/thinking>/gi, '');
+  s = s.split('\n').filter((l) => !l.includes('```')).join('\n');
+  s = s.replace(/\bworktree:\s*/g, '');
+  s = s.replace(/\/tmp\//g, '');
+  s = s.replace(/\bReason:\s*/g, '');
+  s = s.replace(/^\s*→\s*/gm, '');
+  s = s.trim();
+  if (!s) return '';
+  // Strip leading bracketed prefix — [Premise — …] or [Analysis] etc.
+  s = s.replace(/^\[[\w\s]+[-—]\s*/, '');
+  s = s.replace(/^\[[\w\s]+\]\s*/gi, '');
+  s = s.trim();
+  if (!s) return '';
+  const m = s.match(/^[^.!?\n]+[.!?]/);
+  const first = m ? m[0] : s;
+  if (first.length <= 140) return first;
+  return first.slice(0, 137) + '…';
+}
+
 const SOURCE_STORAGE_KEY = 'bizar.agents.sourceFilter';
 const SOURCE_LABELS = {
   all: 'All',
@@ -83,24 +108,31 @@ function mapBizar(a: BizarAgent): AgentCardProps {
   };
 }
 
+function truncatePreview(s: string, max = 80): string {
+  if (!s) return '';
+  return s.length <= max ? s : s.slice(0, max - 1) + '…';
+}
+
 function mapCC(a: CCAgent): AgentCardProps {
   const raw = (a.status || a.state || 'idle').toLowerCase();
   const status: AgentStatus =
     raw === 'busy' || raw === 'working' ? 'busy' :
     raw === 'error' ? 'error' :
     raw === 'paused' ? 'paused' : 'idle';
+  const kind = a.kind === 'background' ? 'background' : 'interactive';
   return {
     id: `cc:${a.sessionId || a.id}`,
     name: a.name || a.sessionId?.slice(0, 8) || 'unknown',
-    role: a.kind === 'background' ? 'CC background' : 'CC interactive',
+    role: kind === 'background' ? 'CC background' : 'CC interactive',
     status,
-    currentTask: a.lastMessageSnippet || undefined,
+    currentTask: truncatePreview(sanitizeSummary(a.lastMessageSnippet)),
     lastActivity: a.lastMessageAt ? new Date(a.lastMessageAt).toLocaleTimeString() : (a.startedAt ? new Date(a.startedAt).toLocaleTimeString() : undefined),
     tasksToday: a.messageCount || 0,
     // CC agents don't expose successRate/tasksSucceeded — only messageCount.
     // Skip the metric strip for them; the badge + lastActivity carry the
-    // signal.
-    badges: [a.cwd?.split('/').slice(-2).join('/') || ''].filter(Boolean),
+    // signal. Include a kind chip so users can distinguish CC background
+    // sessions from interactive ones.
+    badges: [kind, a.cwd?.split('/').slice(-2).join('/') || ''].filter(Boolean),
   };
 }
 

package/bizar-dash/src/web/v8/views/Artifacts/ArtifactsView.tsx

@@ -94,7 +94,7 @@ export function ArtifactsView(): JSX.Element {
               <Skeleton style={{ height: 48 }} />
             </Stack>
           ) : artifacts.length === 0 ? (
-            <EmptyState icon={<Layers size={28} aria-hidden />} title="No artifacts" description="Create one to get started." />
+            <EmptyState icon={<Layers size={28} aria-hidden />} title="No artifacts" description="Artifacts are generated code — HTML canvases, SVG diagrams, and React components — created by the agent during task work. Add one to get started." />
           ) : (
             <Stack gap={1}>
               {artifacts.map((a) => {

package/bizar-dash/src/web/v8/views/Chat/ChatView.tsx

@@ -26,6 +26,7 @@ import { fetchJson, FetchError } from '../../data/fetcher.js';
 import { MessageBubble, EmptyTranscript } from '../../ui/chat/MessageBubble.js';
 import { readEventStream } from '../../ui/chat/EventStream.js';
 import type { ChatMessage, ChatSession, WsMessage } from '../../data/types.js';
+import { NewSessionModal } from '../ClaudeSessions/NewSessionModal.js';
 
 interface ChatPayload {
   messages: ChatMessage[];
@@ -55,6 +56,7 @@ export function ChatView(): JSX.Element {
   const [busy, setBusy] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+  const [newSessionOpen, setNewSessionOpen] = useState<boolean>(false);
 
   // Seed active session from the first row in the response.
   useEffect(() => {
@@ -198,7 +200,7 @@ export function ChatView(): JSX.Element {
             <Button variant="ghost" onClick={() => void audit()} data-testid="chat-audit">
               <ShieldCheck size={14} aria-hidden /> Audit
             </Button>
-            <Button variant="primary" onClick={() => void createSession()} data-testid="chat-create-session">
+            <Button variant="primary" onClick={() => setNewSessionOpen(true)} data-testid="chat-create-session">
               <MessageSquarePlus size={14} aria-hidden /> New session
             </Button>
           </Inline>
@@ -351,6 +353,16 @@ export function ChatView(): JSX.Element {
           </CardBody>
         </Card>
       </Inline>
+
+      <NewSessionModal
+        open={newSessionOpen}
+        onOpenChange={setNewSessionOpen}
+        onCreated={(id) => {
+          setActiveId(id);
+          void payload.refetch();
+          void sessionsPayload.refetch();
+        }}
+      />
     </Stack>
   );
 }

package/bizar-dash/src/web/v8/views/ClaudeSessions/NewSessionModal.tsx

@@ -0,0 +1,136 @@
+/**
+ * NewSessionModal — shared new-session Sheet, extracted from
+ * ClaudeSessionsView so ChatView can reuse the same form.
+ */
+
+import { useState } from 'react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Input } from '../../ui/controls/Input.js';
+import { Sheet, SheetClose, SheetContent } from '../../ui/feedback/Sheet.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+
+interface NewSessionModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (id: string) => void;
+}
+
+export function NewSessionModal({ open, onOpenChange, onCreated }: NewSessionModalProps): JSX.Element {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" title="New Claude session" description="Spawn a Claude Code session via the runner.">
+        <NewSessionForm
+          onCreated={(id) => {
+            onOpenChange(false);
+            onCreated(id);
+          }}
+          onCancel={() => onOpenChange(false)}
+        />
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+interface NewSessionFormProps {
+  onCreated: (id: string) => void;
+  onCancel: () => void;
+}
+
+export function NewSessionForm({ onCreated, onCancel }: NewSessionFormProps): JSX.Element {
+  const [title, setTitle] = useState<string>('');
+  const [agent, setAgent] = useState<string>('general');
+  const [prompt, setPrompt] = useState<string>('');
+  const [directory, setDirectory] = useState<string>('');
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (): Promise<void> => {
+    if (!agent.trim() || !prompt.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetchJson<{ id: string }>('/api/claude-sessions/new', {
+        method: 'POST',
+        body: {
+          title: title.trim() || null,
+          agent: agent.trim(),
+          prompt: prompt.trim(),
+          directory: directory.trim() || undefined,
+        },
+      });
+      onCreated(res.id);
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Stack gap={3} style={{ padding: 'var(--space-4)' }}>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Title (optional)</span>
+        <Input
+          value={title}
+          data-testid="claude-sessions-new-title"
+          onChange={(e) => setTitle((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Agent</span>
+        <Input
+          value={agent}
+          data-testid="claude-sessions-new-agent"
+          onChange={(e) => setAgent((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Seed prompt</span>
+        <textarea
+          value={prompt}
+          rows={4}
+          data-testid="claude-sessions-new-prompt"
+          onChange={(e) => setPrompt(e.target.value)}
+          style={{
+            background: 'var(--surface-0)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius-md)',
+            padding: 'var(--space-2)',
+            color: 'var(--fg)',
+            fontFamily: 'var(--font-sans)',
+            fontSize: 'var(--fs-13)',
+            resize: 'vertical',
+          }}
+        />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Working directory (optional)</span>
+        <Input
+          value={directory}
+          data-testid="claude-sessions-new-directory"
+          onChange={(e) => setDirectory((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      {error !== null && (
+        <span role="alert" data-testid="claude-sessions-new-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>
+          {error}
+        </span>
+      )}
+      <Inline justify="end" gap={2}>
+        <SheetClose asChild>
+          <Button variant="ghost" onClick={onCancel} data-testid="claude-sessions-new-cancel">Cancel</Button>
+        </SheetClose>
+        <Button
+          variant="primary"
+          onClick={() => void submit()}
+          disabled={busy || !agent.trim() || !prompt.trim()}
+          data-testid="claude-sessions-new-submit"
+        >
+          Create
+        </Button>
+      </Inline>
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/Clipboard/ClipboardView.tsx

@@ -81,7 +81,7 @@ export function ClipboardView(): JSX.Element {
               <Skeleton style={{ height: 60 }} />
             </Stack>
           ) : clips.length === 0 ? (
-            <EmptyState icon={<ClipboardPaste size={28} aria-hidden />} title="No saved clips" description="Save one with a URL + content." />
+            <EmptyState icon={<ClipboardPaste size={28} aria-hidden />} title="No saved clips" description="Clips are saved URL + text pairs captured from the clipboard during agent work. Each becomes a markdown note under clips/. Save one to get started." />
           ) : (
             <Stack gap={1}>
               {clips.map((c) => {

package/bizar-dash/src/web/v8/views/CommandPalette/AppCommandPalette.tsx

@@ -110,6 +110,14 @@ interface Project {
   cwd?: string;
 }
 
+/** Mirror of ProjectsView.isTestProject — keeps test projects out of the palette. */
+function isTestProject(p: Project): boolean {
+  return (
+    /^(bizar-(e2e|real-env|admin)|bh-(cold-boot|walk-proj))/.test(p.id) ||
+    (p.name != null && p.name === p.id)
+  );
+}
+
 async function spawnAgent(
   kind: string,
   onToast?: AppCommandPaletteProps['onToast'],
@@ -197,10 +205,12 @@ export function AppCommandPalette(props: AppCommandPaletteProps): JSX.Element {
     void newTask(title, onToast);
   };
 
-  const projectItems: NavItem[] = projects.map((p) => ({
-    id: `project:${p.id}`,
-    label: `Switch to ${p.name || p.id}`,
-  }));
+  const projectItems: NavItem[] = projects
+    .filter((p) => !isTestProject(p))
+    .map((p) => ({
+      id: `project:${p.id}`,
+      label: `Switch to ${p.name || p.id}`,
+    }));
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>

package/bizar-dash/src/web/v8/views/Diagnostics/DiagnosticsView.tsx

@@ -20,11 +20,13 @@ interface DiagnosticsHealth {
 }
 
 interface DiagnosticsSnapshot {
-  health?: DiagnosticsHealth;
-  uptime?: number;
   version?: string;
-  memory?: { used?: number; total?: number };
+  uptime?: number;
+  memory?: { rss?: number; heapUsed?: number; heapTotal?: number };
   checks?: Array<{ name: string; status: string; message?: string }>;
+  counts?: Record<string, number | string | null>;
+  errors?: Array<{ line: string; ts: string | null }>;
+  service?: { running?: boolean; pid?: number };
 }
 
 interface LogsResponse {
@@ -53,9 +55,9 @@ export function DiagnosticsView(): JSX.Element {
     return () => clearInterval(id);
   }, [logs]);
 
-  const health = snap.data?.health;
   const uptime = snap.data?.uptime;
   const checks = snap.data?.checks ?? [];
+  const counts = snap.data?.counts ?? {};
   const lines = logs.data?.lines ?? [];
   const logFile = logs.data?.file ?? null;
 
@@ -78,7 +80,13 @@ export function DiagnosticsView(): JSX.Element {
               <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Status</span>
               <Inline align="center" gap={2}>
                 <Activity size={14} aria-hidden />
-                <strong style={{ fontFamily: 'var(--font-mono)' }}>{snap.loading ? '…' : health?.status ?? 'unknown'}</strong>
+                <strong style={{ fontFamily: 'var(--font-mono)' }}>
+                  {snap.loading ? '…' : (
+                    snap.error ? 'error' :
+                    !snap.data?.service?.running ? 'stopped' :
+                    (snap.data?.errors?.length ?? 0) > 0 ? 'warn' : 'ok'
+                  )}
+                </strong>
               </Inline>
             </Stack>
           </CardBody>
@@ -87,7 +95,7 @@ export function DiagnosticsView(): JSX.Element {
           <CardBody>
             <Stack gap={1}>
               <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Uptime</span>
-              <strong style={{ fontFamily: 'var(--font-mono)' }}>{fmtUptime(uptime)}</strong>
+              <strong style={{ fontFamily: 'var(--font-mono)' }}>{snap.loading ? '…' : fmtUptime(uptime)}</strong>
             </Stack>
           </CardBody>
         </Card>
@@ -95,12 +103,47 @@ export function DiagnosticsView(): JSX.Element {
           <CardBody>
             <Stack gap={1}>
               <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Version</span>
-              <strong style={{ fontFamily: 'var(--font-mono)' }}>{snap.data?.version ?? '—'}</strong>
+              <strong style={{ fontFamily: 'var(--font-mono)' }}>{snap.loading ? '…' : (snap.data?.version ?? '—')}</strong>
             </Stack>
           </CardBody>
         </Card>
       </Grid>
 
+      {snap.error && (
+        <Card variant="default" style={{ borderColor: 'var(--danger)' }}>
+          <CardBody>
+            <Stack gap={2}>
+              <Inline align="center" gap={2}>
+                <Activity size={14} aria-hidden style={{ color: 'var(--danger)' }} />
+                <strong style={{ color: 'var(--danger)' }}>Diagnostics fetch failed</strong>
+              </Inline>
+              <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>{snap.error.message ?? String(snap.error)}</span>
+              <Button variant="secondary" size="sm" onClick={() => { void snap.refetch(); }}>
+                <RefreshCw size={12} aria-hidden /> Retry
+              </Button>
+            </Stack>
+          </CardBody>
+        </Card>
+      )}
+
+      {Object.keys(counts).length > 0 && (
+        <Card variant="default">
+          <CardBody>
+            <Stack gap={2}>
+              <strong>Counts</strong>
+              <Grid cols={4}>
+                {Object.entries(counts).map(([k, v]) => (
+                  <Stack key={k} gap={0}>
+                    <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{k}</span>
+                    <strong style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-13)' }}>{String(v ?? '—')}</strong>
+                  </Stack>
+                ))}
+              </Grid>
+            </Stack>
+          </CardBody>
+        </Card>
+      )}
+
       {checks.length > 0 && (
         <Card variant="default">
           <CardBody>

package/bizar-dash/src/web/v8/views/Dialogs/DialogsView.tsx

@@ -103,7 +103,7 @@ export function DialogsView(): JSX.Element {
             <EmptyState
               icon={<MessageSquare size={28} aria-hidden />}
               title="No active dialogs"
-              description="Dialogs enqueued via the slash-command plugin will appear here."
+              description="Dialogs are confirmations and prompts the agent raises when it needs user input before proceeding. They appear here when the slash-command plugin queues one."
             />
           ) : (
             <Stack gap={1}>

package/bizar-dash/src/web/v8/views/Libraries/LibrariesView.tsx

@@ -84,7 +84,12 @@ export function LibrariesView(props: LibrariesViewProps): JSX.Element {
     if (bust > 0) res.refetch();
   }, [bust, res]);
 
-  const items: LibraryItemProps[] = (res.data?.skills || res.data?.items || []).map(mapItem);
+  const items: LibraryItemProps[] = (res.data?.skills || res.data?.items || [])
+    .map(mapItem)
+    .reduce<LibraryItemProps[]>((acc, item) => {
+      if (!acc.some((existing) => existing.name === item.name)) acc.push(item);
+      return acc;
+    }, []);
 
   return (
     <Stack gap={5} data-testid={`${kind}-view`}>

package/bizar-dash/src/web/v8/views/Misc/MiscView.tsx

@@ -45,7 +45,7 @@ interface TailscaleStatus {
 export function MiscView(): JSX.Element {
   return (
     <Stack gap={4} data-testid="misc-view">
-      <ViewHeader title="Misc" description="Global search + Tailscale." />
+      <ViewHeader title="Misc" description="Global fuzzy search across projects, tasks, and agents — plus Tailscale VPN control." />
       <SearchPanel />
       <TailscalePanel />
     </Stack>

package/bizar-dash/src/web/v8/views/Notifications/NotificationsView.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Bell, CheckCheck, Trash2, RefreshCw } from 'lucide-react';
+import { Bell, CheckCheck, Trash2, RefreshCw, RotateCcw } from 'lucide-react';
 import { Stack } from '../../ui/primitives/Stack.js';
 import { Inline } from '../../ui/primitives/Inline.js';
 import { ViewHeader } from '../../ui/data/ViewHeader.js';
@@ -16,7 +16,8 @@ import type { WsMessage } from '../../data/types.js';
 /**
  * NotificationsView — Sprint S35. Per-user notification stream backed
  * by `/api/notifications`. Pulls unread + read mixed, supports
- * mark-one-read, mark-all-read, and dismiss.
+ * mark-one-read, mark-all-read, dismiss with 5s undo, and
+ * "Show dismissed" with restore.
  */
 
 type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
@@ -36,6 +37,12 @@ interface NotificationsResponse {
   stats?: { total: number; unread: number };
 }
 
+interface UndoToast {
+  id: string;
+  item: NotificationItem;
+  timer: ReturnType<typeof setTimeout>;
+}
+
 function toneFor(item: NotificationItem): Tone {
   if (item.tone && ['info', 'success', 'warning', 'danger', 'neutral'].includes(item.tone)) {
     return item.tone as Tone;
@@ -57,6 +64,9 @@ function fmtRel(iso: string | undefined): string {
 export function NotificationsView(): JSX.Element {
   const res = useFetch<NotificationsResponse>('/api/notifications?limit=200');
   const [items, setItems] = useState<NotificationItem[]>([]);
+  const [dismissed, setDismissed] = useState<NotificationItem[]>([]);
+  const [showDismissed, setShowDismissed] = useState(false);
+  const [undoToast, setUndoToast] = useState<UndoToast | null>(null);
   const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
@@ -95,12 +105,29 @@ export function NotificationsView(): JSX.Element {
     }
   };
 
+  const restore = (item: NotificationItem): void => {
+    clearTimeout(undoToast?.timer);
+    setUndoToast(null);
+    setDismissed((prev) => prev.filter((n) => n.id !== item.id));
+    setItems((prev) => [item, ...prev]);
+  };
+
   const dismiss = async (id: string): Promise<void> => {
+    const item = items.find((n) => n.id === id);
+    if (!item) return;
     setBusy(id);
     setError(null);
     try {
       await fetchJson(`/api/notifications/${encodeURIComponent(id)}`, { method: 'DELETE' });
       setItems((prev) => prev.filter((n) => n.id !== id));
+      setDismissed((prev) => [item, ...prev]);
+
+      // 5-second undo window
+      const timer = setTimeout(() => {
+        setDismissed((prev) => prev.filter((n) => n.id !== id));
+        setUndoToast((cur) => (cur?.id === id ? null : cur));
+      }, 5_000);
+      setUndoToast({ id, item, timer });
     } catch (err) {
       setError(err instanceof FetchError ? err.message : (err as Error).message);
     } finally {
@@ -109,12 +136,13 @@ export function NotificationsView(): JSX.Element {
   };
 
   const unread = items.filter((n) => !n.read).length;
+  const visibleItems = showDismissed ? [...items, ...dismissed] : items;
 
   return (
     <Stack gap={5} data-testid="notifications-view">
       <ViewHeader
         title="Notifications"
-        description={`${unread} unread of ${items.length} total. Backed by ~/.config/bizar/notifications.jsonl.`}
+        description={`${unread} unread of ${items.length} total${dismissed.length > 0 ? `, ${dismissed.length} dismissed` : ''}. Backed by ~/.config/bizar/notifications.jsonl.`}
         actions={
           <Inline gap={2} align="center">
             {error !== null && <span role="alert" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>}
@@ -124,6 +152,11 @@ export function NotificationsView(): JSX.Element {
             <Button variant="secondary" onClick={() => void markAll()} disabled={busy === 'all' || unread === 0} data-testid="notifications-mark-all">
               <CheckCheck size={14} aria-hidden /> Mark all read
             </Button>
+            {dismissed.length > 0 && (
+              <Button variant="ghost" onClick={() => setShowDismissed((v) => !v)} data-testid="notifications-toggle-dismissed">
+                {showDismissed ? 'Hide dismissed' : `Show dismissed (${dismissed.length})`}
+              </Button>
+            )}
           </Inline>
         }
       />
@@ -133,7 +166,7 @@ export function NotificationsView(): JSX.Element {
           <Skeleton style={{ height: 64 }} />
           <Skeleton style={{ height: 64 }} />
         </Stack>
-      ) : items.length === 0 ? (
+      ) : items.length === 0 && dismissed.length === 0 ? (
         <EmptyState
           icon={<Bell size={32} aria-hidden />}
           title="No notifications"
@@ -141,15 +174,17 @@ export function NotificationsView(): JSX.Element {
         />
       ) : (
         <Stack gap={2}>
-          {items.map((n) => {
+          {visibleItems.map((n) => {
+            const isDismissed = dismissed.some((d) => d.id === n.id);
             const tone = toneFor(n);
             return (
-              <Card key={n.id} variant="default" style={{ opacity: n.read ? 0.7 : 1 }}>
+              <Card key={n.id} variant="default" style={{ opacity: isDismissed || n.read ? 0.7 : 1 }}>
                 <CardBody>
                   <Inline align="start" justify="between" gap={3}>
                     <Stack gap={1} style={{ flex: 1, minWidth: 0 }}>
                       <Inline align="center" gap={2}>
-                        {!n.read && <span aria-label="Unread" style={{ width: 8, height: 8, borderRadius: 'var(--radius-pill)', background: 'var(--accent)' }} />}
+                        {isDismissed && <span data-testid={`notification-dismissed-badge-${n.id}`} style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>dismissed</span>}
+                        {!n.read && !isDismissed && <span aria-label="Unread" style={{ width: 8, height: 8, borderRadius: 'var(--radius-pill)', background: 'var(--accent)' }} />}
                         <strong style={{ fontSize: 'var(--fs-13)' }}>{n.title || n.source || n.id}</strong>
                         {n.source && <Badge tone={tone}>{n.source}</Badge>}
                         <span style={{ color: 'var(--fg-muted)', fontSize: 'var(--fs-12)' }}>{fmtRel(n.createdAt)}</span>
@@ -157,14 +192,22 @@ export function NotificationsView(): JSX.Element {
                       {n.body && <span style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)' }}>{n.body}</span>}
                     </Stack>
                     <Inline gap={1}>
-                      {!n.read && (
-                        <Button variant="ghost" onClick={() => void markRead(n.id)} disabled={busy === n.id} data-testid={`notification-read-${n.id}`}>
-                          Mark read
+                      {isDismissed ? (
+                        <Button variant="ghost" onClick={() => restore(n)} data-testid={`notification-restore-${n.id}`}>
+                          <RotateCcw size={12} aria-hidden /> Restore
                         </Button>
+                      ) : (
+                        <>
+                          {!n.read && (
+                            <Button variant="ghost" onClick={() => void markRead(n.id)} disabled={busy === n.id} data-testid={`notification-read-${n.id}`}>
+                              Mark read
+                            </Button>
+                          )}
+                          <Button variant="ghost" onClick={() => void dismiss(n.id)} disabled={busy === n.id} data-testid={`notification-dismiss-${n.id}`}>
+                            <Trash2 size={12} aria-hidden /> Dismiss
+                          </Button>
+                        </>
                       )}
-                      <Button variant="ghost" onClick={() => void dismiss(n.id)} disabled={busy === n.id} data-testid={`notification-dismiss-${n.id}`}>
-                        <Trash2 size={12} aria-hidden /> Dismiss
-                      </Button>
                     </Inline>
                   </Inline>
                 </CardBody>
@@ -173,6 +216,32 @@ export function NotificationsView(): JSX.Element {
           })}
         </Stack>
       )}
+      {undoToast !== null && (
+        <Card variant="default" data-testid="notifications-undo-toast" style={{ border: '1px solid var(--accent)', background: 'var(--surface-1)' }}>
+          <CardBody>
+            <Inline align="center" justify="between" gap={3}>
+              <span style={{ fontSize: 'var(--fs-13)' }}>
+                Notification dismissed.{' '}
+                <button
+                  type="button"
+                  onClick={() => {
+                    clearTimeout(undoToast.timer);
+                    setUndoToast(null);
+                    restore(undoToast.item);
+                  }}
+                  style={{ background: 'none', border: 'none', color: 'var(--accent)', cursor: 'pointer', fontSize: 'inherit', padding: 0, textDecoration: 'underline' }}
+                  data-testid="notifications-undo-btn"
+                >
+                  Undo
+                </button>
+              </span>
+              <Button variant="ghost" size="sm" onClick={() => { clearTimeout(undoToast.timer); setUndoToast(null); }} data-testid="notifications-undo-close">
+                ✕
+              </Button>
+            </Inline>
+          </CardBody>
+        </Card>
+      )}
     </Stack>
   );
 }