@swarmclawai/swarmclaw 0.7.7 → 0.8.0

package/src/components/canvas/canvas-panel.tsx

@@ -1,8 +1,11 @@
 'use client'
 
 import { useEffect, useState, useCallback } from 'react'
+import ReactMarkdown from 'react-markdown'
 import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
+import { normalizeCanvasContent } from '@/lib/canvas-content'
+import type { CanvasContent, CanvasDocument } from '@/types'
 
 interface CanvasPanelProps {
   sessionId: string
@@ -10,86 +13,254 @@ interface CanvasPanelProps {
   onClose: () => void
 }
 
+const THEME_STYLES: Record<NonNullable<CanvasDocument['theme']>, { accent: string; chip: string }> = {
+  slate: { accent: 'text-sky-300', chip: 'bg-sky-500/10 text-sky-300 border-sky-500/20' },
+  sky: { accent: 'text-sky-300', chip: 'bg-sky-500/10 text-sky-300 border-sky-500/20' },
+  emerald: { accent: 'text-emerald-300', chip: 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20' },
+  amber: { accent: 'text-amber-300', chip: 'bg-amber-500/10 text-amber-300 border-amber-500/20' },
+  rose: { accent: 'text-rose-300', chip: 'bg-rose-500/10 text-rose-300 border-rose-500/20' },
+}
+
+function toneClass(tone?: string): string {
+  switch (tone) {
+    case 'positive': return 'text-emerald-300'
+    case 'negative': return 'text-rose-300'
+    case 'warning': return 'text-amber-300'
+    default: return 'text-text'
+  }
+}
+
+function intentClass(intent?: string): string {
+  switch (intent) {
+    case 'primary': return 'bg-sky-500 text-white border-sky-400/30'
+    case 'success': return 'bg-emerald-500 text-white border-emerald-400/30'
+    case 'danger': return 'bg-rose-500 text-white border-rose-400/30'
+    default: return 'bg-white/[0.03] text-text-2 border-white/[0.08]'
+  }
+}
+
+function StructuredCanvasView({ document }: { document: CanvasDocument }) {
+  const theme = THEME_STYLES[document.theme || 'slate']
+  return (
+    <div className="h-full overflow-y-auto bg-bg px-5 py-5">
+      <div className="max-w-4xl mx-auto space-y-4">
+        {(document.title || document.subtitle) && (
+          <div className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+            {document.title && <h2 className={`font-display text-[22px] font-700 tracking-[-0.03em] ${theme.accent}`}>{document.title}</h2>}
+            {document.subtitle && <p className="mt-1 text-[13px] text-text-3/70">{document.subtitle}</p>}
+          </div>
+        )}
+
+        {document.blocks.map((block, index) => {
+          if (block.type === 'markdown') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="max-w-none text-[14px] leading-6 text-text-2/90 [&_h1]:font-display [&_h1]:text-[24px] [&_h1]:text-text [&_h2]:font-display [&_h2]:text-[20px] [&_h2]:text-text [&_h3]:font-display [&_h3]:text-[18px] [&_h3]:text-text [&_p]:my-3 [&_ul]:my-3 [&_ul]:pl-5 [&_li]:my-1 [&_code]:rounded [&_code]:bg-black/[0.2] [&_code]:px-1.5 [&_code]:py-0.5">
+                  <ReactMarkdown>{block.markdown}</ReactMarkdown>
+                </div>
+              </section>
+            )
+          }
+
+          if (block.type === 'metrics') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
+                  {block.items.map((item) => (
+                    <div key={item.label} className="rounded-[14px] border border-white/[0.08] bg-black/[0.14] px-4 py-3">
+                      <div className="text-[11px] uppercase tracking-[0.08em] text-text-3/60">{item.label}</div>
+                      <div className={`mt-1 text-[24px] font-display font-700 tracking-[-0.03em] ${toneClass(item.tone)}`}>{item.value}</div>
+                      {item.detail && <div className="mt-1 text-[12px] text-text-3/65">{item.detail}</div>}
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )
+          }
+
+          if (block.type === 'cards') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {block.items.map((item) => (
+                    <div key={item.title} className="rounded-[14px] border border-white/[0.08] bg-black/[0.14] px-4 py-3">
+                      <div className={`text-[15px] font-700 ${toneClass(item.tone)}`}>{item.title}</div>
+                      {item.body && <p className="mt-2 text-[13px] leading-6 text-text-2/85 whitespace-pre-wrap">{item.body}</p>}
+                      {item.meta && <div className="mt-3 text-[11px] text-text-3/60">{item.meta}</div>}
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )
+          }
+
+          if (block.type === 'table') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4 overflow-hidden">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="overflow-x-auto rounded-[12px] border border-white/[0.08]">
+                  <table className="min-w-full text-left text-[13px]">
+                    <thead className="bg-black/[0.18]">
+                      <tr>
+                        {block.table.columns.map((column) => (
+                          <th key={column} className="px-3 py-2.5 font-700 text-text-2">{column}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {block.table.rows.map((row, rowIndex) => (
+                        <tr key={rowIndex} className="border-t border-white/[0.06]">
+                          {row.map((cell, cellIndex) => (
+                            <td key={cellIndex} className="px-3 py-2.5 text-text-3/80">{cell == null ? '—' : String(cell)}</td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                {block.table.caption && <div className="mt-2 text-[11px] text-text-3/60">{block.table.caption}</div>}
+              </section>
+            )
+          }
+
+          if (block.type === 'code') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <pre className="overflow-x-auto rounded-[14px] border border-white/[0.08] bg-black/[0.25] p-4 text-[12px] leading-6 text-text-2">
+                  <code>{block.code}</code>
+                </pre>
+                {block.language && <div className={`mt-2 inline-flex rounded-full border px-2 py-1 text-[10px] font-700 uppercase tracking-[0.08em] ${theme.chip}`}>{block.language}</div>}
+              </section>
+            )
+          }
+
+          if (block.type === 'actions') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="flex flex-wrap gap-2">
+                  {block.items.map((item) => (
+                    item.href ? (
+                      <a
+                        key={item.label}
+                        href={item.href}
+                        target="_blank"
+                        rel="noreferrer"
+                        className={`inline-flex items-center rounded-[12px] border px-3 py-2 text-[12px] font-700 transition-all hover:brightness-110 ${intentClass(item.intent)}`}
+                      >
+                        {item.label}
+                      </a>
+                    ) : (
+                      <div key={item.label} className={`inline-flex items-center rounded-[12px] border px-3 py-2 text-[12px] font-700 ${intentClass(item.intent)}`}>
+                        {item.label}
+                      </div>
+                    )
+                  ))}
+                </div>
+                {block.items.some((item) => item.note) && (
+                  <div className="mt-3 space-y-1">
+                    {block.items.filter((item) => item.note).map((item) => (
+                      <div key={`${item.label}-note`} className="text-[11px] text-text-3/60">{item.label}: {item.note}</div>
+                    ))}
+                  </div>
+                )}
+              </section>
+            )
+          }
+
+          return null
+        })}
+      </div>
+    </div>
+  )
+}
+
 export function CanvasPanel({ sessionId, agentName, onClose }: CanvasPanelProps) {
-  const [content, setContent] = useState<string | null>(null)
+  const [content, setContent] = useState<CanvasContent>(null)
+  const [loaded, setLoaded] = useState(false)
 
   const loadCanvas = useCallback(async () => {
     try {
-      const res = await api<{ content: string | null }>('GET', `/canvas/${sessionId}`)
-      setContent(res.content)
-    } catch { /* ignore */ }
+      const res = await api<{ content: CanvasContent }>('GET', `/canvas/${sessionId}`)
+      setContent(normalizeCanvasContent(res.content))
+    } catch {
+      setContent(null)
+    } finally {
+      setLoaded(true)
+    }
   }, [sessionId])
 
-  useEffect(() => { loadCanvas() }, [loadCanvas]) // eslint-disable-line react-hooks/set-state-in-effect
+  useEffect(() => { loadCanvas() }, [loadCanvas])
   useWs(`canvas:${sessionId}`, loadCanvas, 10_000)
 
-  if (!content) return (
-    <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright shrink-0">
-          <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8" /><path d="M12 17v4" />
+  const header = (
+    <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright shrink-0">
+        <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8" /><path d="M12 17v4" />
+      </svg>
+      <span className="text-[13px] font-600 text-text flex-1 truncate">
+        Canvas{agentName ? ` — ${agentName}` : ''}
+      </span>
+      <button
+        onClick={loadCanvas}
+        className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
+        title="Refresh"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
         </svg>
-        <span className="text-[13px] font-600 text-text flex-1 truncate">
-          Canvas{agentName ? ` — ${agentName}` : ''}
-        </span>
-        <button
-          onClick={onClose}
-          className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
-          title="Close canvas"
-          aria-label="Close canvas"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M18 6L6 18M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-      <div className="flex-1 flex items-center justify-center">
-        <div className="text-center">
-          <div className="w-8 h-8 rounded-full border-2 border-text-3/20 border-t-accent-bright animate-spin mx-auto mb-3" />
-          <span className="text-[13px] text-text-3">Loading canvas...</span>
-        </div>
-      </div>
+      </button>
+      <button
+        onClick={onClose}
+        className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
+        title="Close canvas"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
     </div>
   )
 
-  return (
-    <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
-      {/* Toolbar */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright shrink-0">
-          <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8" /><path d="M12 17v4" />
-        </svg>
-        <span className="text-[13px] font-600 text-text flex-1 truncate">
-          Canvas{agentName ? ` — ${agentName}` : ''}
-        </span>
-        <button
-          onClick={loadCanvas}
-          className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
-          title="Refresh"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-          </svg>
-        </button>
-        <button
-          onClick={onClose}
-          className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
-          title="Close canvas"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M18 6L6 18M6 6l12 12" />
-          </svg>
-        </button>
+  if (!loaded) {
+    return (
+      <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
+        {header}
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center">
+            <div className="w-8 h-8 rounded-full border-2 border-text-3/20 border-t-accent-bright animate-spin mx-auto mb-3" />
+            <span className="text-[13px] text-text-3">Loading canvas...</span>
+          </div>
+        </div>
       </div>
+    )
+  }
 
-      {/* Sandboxed iframe */}
+  return (
+    <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
+      {header}
       <div className="flex-1 overflow-hidden">
-        <iframe
-          sandbox="allow-scripts allow-same-origin"
-          srcDoc={content}
-          className="w-full h-full border-none bg-white"
-          title="Agent Canvas"
-        />
+        {!content ? (
+          <div className="h-full flex items-center justify-center text-center px-6">
+            <div>
+              <div className="text-[14px] font-600 text-text-2">No canvas content yet</div>
+              <p className="mt-1 text-[12px] text-text-3/60">Agents can present HTML or structured documents here.</p>
+            </div>
+          </div>
+        ) : typeof content === 'string' ? (
+          <iframe
+            sandbox="allow-scripts allow-same-origin"
+            srcDoc={content}
+            className="w-full h-full border-none bg-white"
+            title="Agent Canvas"
+          />
+        ) : (
+          <StructuredCanvasView document={content} />
+        )}
       </div>
     </div>
   )

package/src/components/chat/chat-area.tsx

@@ -136,10 +136,12 @@ export function ChatArea() {
       if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
       setMessagesLoading(false)
     })
-    // If server reports session is still active, show streaming state
-    if (session?.active) {
+
+    const sessionAtLoad = useAppStore.getState().sessions[requestedSessionId]
+    if (sessionAtLoad?.active) {
       useChatStore.setState({ streaming: true, streamingSessionId: requestedSessionId, streamText: '' })
     }
+
     // Refresh active state from server so returning to a session restores typing indicator.
     loadSessions().then(() => {
       if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
@@ -148,6 +150,7 @@ export function ChatArea() {
         useChatStore.setState({ streaming: true, streamingSessionId: requestedSessionId, streamText: '' })
       }
     }).catch((err) => console.error('Failed to refresh messages:', err))
+
     devServer(requestedSessionId, 'status').then((r) => {
       if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
       setDevServer(r.running ? r : null)
@@ -155,23 +158,31 @@ export function ChatArea() {
       if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
       setDevServer(null)
     })
-    // Check browser status
-    if (sessionHasBrowserPlugin) {
-      checkBrowser(requestedSessionId).then((r) => {
-        if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
-        setBrowserActive(r.active)
-      }).catch((err) => {
-        if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
-        console.error('Browser check failed:', err)
-        setBrowserActive(false)
-      })
-    } else {
+
+    return () => {
+      cancelled = true
+    }
+  }, [loadSessions, sessionId, setDevServer, setMessages])
+
+  useEffect(() => {
+    if (!sessionId) return
+    let cancelled = false
+    if (!sessionHasBrowserPlugin) {
       setBrowserActive(false)
+      return
     }
+    checkBrowser(sessionId).then((r) => {
+      if (cancelled || useAppStore.getState().currentSessionId !== sessionId) return
+      setBrowserActive(r.active)
+    }).catch((err) => {
+      if (cancelled || useAppStore.getState().currentSessionId !== sessionId) return
+      console.error('Browser check failed:', err)
+      setBrowserActive(false)
+    })
     return () => {
       cancelled = true
     }
-  }, [loadSessions, session?.active, sessionHasBrowserPlugin, sessionId, setDevServer, setMessages])
+  }, [sessionHasBrowserPlugin, sessionId])
 
   // Auto-poll messages for sessions that are actively running on the server
   const isServerActive = session?.active === true
@@ -216,10 +227,16 @@ export function ChatArea() {
     shouldPollMessages ? 2000 : undefined,
   )
 
-  // When server-active flag drops, stop the streaming indicator
+  // Keep the local typing indicator aligned with the server's active state
   useEffect(() => {
     if (!sessionId) return
     const state = useChatStore.getState()
+    if (isServerActive) {
+      if (!state.streaming && !state.streamText) {
+        useChatStore.setState({ streaming: true, streamingSessionId: sessionId, streamText: '' })
+      }
+      return
+    }
     if (
       !isServerActive
       && state.streaming
@@ -230,7 +247,7 @@ export function ChatArea() {
       fetchMessages(sessionId).then(setMessages).catch(() => {})
       useChatStore.setState({ streaming: false, streamingSessionId: null, streamText: '' })
     }
-  }, [isServerActive, sessionId])
+  }, [isServerActive, sessionId, setMessages])
 
   // Poll browser status while session has browser tools
   const hasBrowserTool = session?.plugins?.includes('browser')
@@ -255,7 +272,7 @@ export function ChatArea() {
     if (!sessionId) return
     await devServer(sessionId, 'stop')
     setDevServer(null)
-  }, [sessionId])
+  }, [sessionId, setDevServer])
 
   const handleClear = useCallback(async () => {
     setConfirmClear(false)
@@ -263,7 +280,7 @@ export function ChatArea() {
     await clearMessages(sessionId)
     setMessages([])
     loadSessions()
-  }, [sessionId])
+  }, [loadSessions, sessionId, setMessages])
 
   const handleDelete = useCallback(async () => {
     setConfirmDelete(false)
@@ -271,7 +288,7 @@ export function ChatArea() {
     await deleteChat(sessionId)
     removeSessionFromStore(sessionId)
     setCurrentSession(null)
-  }, [sessionId])
+  }, [removeSessionFromStore, sessionId, setCurrentSession])
 
   const handlePrompt = useCallback((text: string) => {
     sendMessage(text)

package/src/components/chat/chat-card.tsx

@@ -1,10 +1,12 @@
 'use client'
 
+import { useState } from 'react'
 import { DEFAULT_HEARTBEAT_INTERVAL_SEC } from '@/lib/heartbeat-defaults'
 import type { Session } from '@/types'
 import { api } from '@/lib/api-client'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { ConnectorPlatformBadge, getSessionConnector } from '@/components/shared/connector-platform-icon'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { toast } from 'sonner'
@@ -44,18 +46,26 @@ export function ChatCard({ session, active, onClick }: Props) {
   const streamPhase = useChatStore((s) => s.streamPhase)
   const streamToolName = useChatStore((s) => s.streamToolName)
   const lastReadTimestamps = useAppStore((s) => s.lastReadTimestamps)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [deleting, setDeleting] = useState(false)
   const isTyping = streamingSessionId === session.id
 
-  const handleDelete = async (e: React.MouseEvent) => {
+  const handleDeleteClick = (e: React.MouseEvent) => {
     e.stopPropagation()
-    if (!confirm(`Delete chat session "${session.name}"?`)) return
-    
+    setConfirmDelete(true)
+  }
+
+  const handleDelete = async () => {
+    setDeleting(true)
     try {
       await api('DELETE', `/chats/${session.id}`)
       removeSession(session.id)
       toast.success('Session deleted')
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to delete session')
+    } finally {
+      setDeleting(false)
+      setConfirmDelete(false)
     }
   }
 
@@ -84,14 +94,15 @@ export function ChatCard({ session, active, onClick }: Props) {
     && agent?.heartbeatEnabled !== false
 
   return (
-    <div
-      onClick={onClick}
-      className={`group/card relative py-3.5 px-4 cursor-pointer rounded-[14px]
-        transition-all duration-200 active:scale-[0.98]
-        ${active
-          ? 'bg-accent-soft border border-accent-bright/10'
-          : 'bg-transparent border border-transparent hover:bg-white/[0.02] hover:border-white/[0.03]'}`}
-    >
+    <>
+      <div
+        onClick={onClick}
+        className={`group/card relative py-3.5 px-4 cursor-pointer rounded-[14px]
+          transition-all duration-200 active:scale-[0.98]
+          ${active
+            ? 'bg-accent-soft border border-accent-bright/10'
+            : 'bg-transparent border border-transparent hover:bg-white/[0.02] hover:border-white/[0.03]'}`}
+      >
       {active && (
         <div className="absolute left-0 top-3.5 bottom-3.5 w-[2.5px] rounded-full bg-accent-bright" />
       )}
@@ -134,7 +145,7 @@ export function ChatCard({ session, active, onClick }: Props) {
           {timeAgo(session.lastActiveAt)}
         </span>
         <button
-          onClick={handleDelete}
+          onClick={handleDeleteClick}
           className="shrink-0 opacity-0 group-hover/card:opacity-100 transition-opacity duration-150
             text-text-3 hover:text-red-400 p-0.5 -mr-1 cursor-pointer bg-transparent border-none"
           title="Delete chat"
@@ -163,6 +174,18 @@ export function ChatCard({ session, active, onClick }: Props) {
       ) : (
         <div className="text-[13px] text-text-2/50 truncate mt-1 leading-relaxed">{preview}</div>
       )}
-    </div>
+      </div>
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete Chat?"
+        message={`Delete chat session "${session.name}"?`}
+        confirmLabel={deleting ? 'Deleting...' : 'Delete'}
+        confirmDisabled={deleting}
+        cancelDisabled={deleting}
+        danger
+        onConfirm={() => { void handleDelete() }}
+        onCancel={() => { if (!deleting) setConfirmDelete(false) }}
+      />
+    </>
   )
 }