@swarmclawai/swarmclaw 0.4.5 → 0.5.0

package/src/components/chat/streaming-bubble.tsx

@@ -1,22 +1,72 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import { AiAvatar } from '@/components/shared/avatar'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { CodeBlock } from './code-block'
 import { ToolCallBubble } from './tool-call-bubble'
-import { useChatStore } from '@/stores/use-chat-store'
+import { useChatStore, type ToolEvent } from '@/stores/use-chat-store'
+
+function ToolEventsSection({ toolEvents }: { toolEvents: ToolEvent[] }) {
+  const [expanded, setExpanded] = useState(false)
+  const shouldCollapse = toolEvents.length > 2
+  const latestTool = toolEvents[toolEvents.length - 1]
+
+  if (shouldCollapse && !expanded) {
+    return (
+      <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
+        <button
+          type="button"
+          onClick={() => setExpanded(true)}
+          className="self-start flex items-center gap-2 px-3 py-1.5 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] border border-white/[0.06] cursor-pointer transition-colors"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/60">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+          <span className="text-[11px] text-text-3 font-mono">
+            {toolEvents.length} tool calls
+          </span>
+          <span className="text-[10px] text-text-3/50">
+            latest: {latestTool?.name || 'unknown'}
+          </span>
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
+      {shouldCollapse && (
+        <button
+          type="button"
+          onClick={() => setExpanded(false)}
+          className="self-start px-2.5 py-1 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] text-[11px] text-text-3 border border-white/[0.06] cursor-pointer transition-colors"
+        >
+          Collapse tool calls
+        </button>
+      )}
+      {toolEvents.map((event) => (
+        <ToolCallBubble key={event.id} event={event} />
+      ))}
+    </div>
+  )
+}
 
 interface Props {
   text: string
   assistantName?: string
+  agentAvatarSeed?: string
+  agentName?: string
 }
 
-export function StreamingBubble({ text, assistantName }: Props) {
+export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentName }: Props) {
   const rendered = useMemo(() => text, [text])
   const toolEvents = useChatStore((s) => s.toolEvents)
+  const streamPhase = useChatStore((s) => s.streamPhase)
+  const streamToolName = useChatStore((s) => s.streamToolName)
 
   return (
     <div
@@ -24,18 +74,17 @@ export function StreamingBubble({ text, assistantName }: Props) {
       style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}
     >
       <div className="flex items-center gap-2.5 mb-2 px-1">
-        <AiAvatar size="sm" />
+        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={36} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
         <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>
         <span className="w-2 h-2 rounded-full bg-accent-bright" style={{ animation: 'pulse 1.5s ease infinite' }} />
+        {streamPhase === 'tool' && streamToolName && (
+          <span className="text-[10px] text-text-3/50 font-mono">Using {streamToolName}...</span>
+        )}
       </div>
 
-      {/* Tool call events */}
+      {/* Tool call events (collapsible when > 2) */}
       {toolEvents.length > 0 && (
-        <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
-          {toolEvents.map((event) => (
-            <ToolCallBubble key={event.id} event={event} />
-          ))}
-        </div>
+        <ToolEventsSection toolEvents={toolEvents} />
       )}
 
       {rendered && (

package/src/components/chat/suggestions-bar.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import type { Message } from '@/types'
+
+interface Props {
+  lastMessage: Message | null
+  onSend: (text: string) => void
+}
+
+function getSuggestions(msg: Message | null): string[] {
+  if (!msg?.text) return ['Continue', 'Tell me more']
+  const text = msg.text
+
+  // Error patterns
+  if (/error|exception|failed|traceback|panic|ECONNREFUSED|ETIMEDOUT/i.test(text)) {
+    return ['Can you fix this?', 'Try an alternative approach', 'Explain the error']
+  }
+
+  // Code blocks present
+  if (/```[\s\S]*```/.test(text)) {
+    return ['Explain this code', 'Write tests for this', 'Any improvements?']
+  }
+
+  // File mentions
+  if (/`\/[\w./-]+\.\w+`/.test(text) || /\b(created|modified|updated|wrote|saved)\b.*\b(file|files)\b/i.test(text)) {
+    return ['Show me the file', 'Make changes to it', 'What else needs updating?']
+  }
+
+  // Task completion signals
+  if (/\b(done|complete|finished|ready|all set|successfully)\b/i.test(text)) {
+    return ["What's next?", 'Summarize what was done', 'Any remaining issues?']
+  }
+
+  // Question asked by assistant
+  if (/\?\s*$/.test(text.trim())) {
+    return ['Yes, go ahead', 'No, try a different approach', 'Tell me more about the options']
+  }
+
+  // List/steps presented
+  if (/^\s*(\d+\.|[-*])\s/m.test(text)) {
+    return ['Start with the first step', 'Can you elaborate?', 'Any alternatives?']
+  }
+
+  return ['Continue', 'Tell me more', 'Can you explain further?']
+}
+
+export function SuggestionsBar({ lastMessage, onSend }: Props) {
+  const suggestions = lastMessage?.suggestions?.length === 3
+    ? lastMessage.suggestions
+    : getSuggestions(lastMessage)
+
+  if (!suggestions.length) return null
+
+  return (
+    <div
+      className="flex flex-wrap gap-2 px-1 pt-2"
+      style={{ animation: 'fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }}
+    >
+      {suggestions.map((text) => (
+        <button
+          key={text}
+          type="button"
+          onClick={() => onSend(text)}
+          className="rounded-full px-3.5 py-1.5 text-[12px] font-500 border border-white/[0.06] bg-white/[0.03]
+            text-text-3 hover:text-text-2 hover:bg-white/[0.06] hover:border-white/[0.10]
+            cursor-pointer transition-all active:scale-[0.97]"
+          style={{ fontFamily: 'inherit' }}
+        >
+          {text}
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/components/chat/thinking-indicator.tsx

@@ -1,24 +1,38 @@
 'use client'
 
 import { AiAvatar } from '@/components/shared/avatar'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { useChatStore } from '@/stores/use-chat-store'
 
 interface Props {
   assistantName?: string
+  agentAvatarSeed?: string
+  agentName?: string
 }
 
-export function ThinkingIndicator({ assistantName }: Props) {
+export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentName }: Props) {
+  const streamPhase = useChatStore((s) => s.streamPhase)
+  const streamToolName = useChatStore((s) => s.streamToolName)
+
+  const statusText = streamPhase === 'tool' && streamToolName
+    ? `Using ${streamToolName}...`
+    : 'Thinking...'
+
   return (
     <div className="flex flex-col items-start"
       style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}>
       <div className="flex items-center gap-2.5 mb-2 px-1">
-        <AiAvatar size="sm" />
+        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={36} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
         <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>
       </div>
       <div className="bubble-ai px-6 py-5">
-        <div className="flex gap-2">
-          <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
-          <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
-          <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+        <div className="flex items-center gap-3">
+          <div className="flex gap-2">
+            <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
+            <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
+            <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+          </div>
+          <span className="text-[12px] text-text-3/60 font-mono">{statusText}</span>
         </div>
       </div>
     </div>

package/src/components/chat/tool-call-bubble.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useMemo } from 'react'
 import type { ToolEvent } from '@/stores/use-chat-store'
+import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 
 const TOOL_COLORS: Record<string, string> = {
@@ -251,6 +252,61 @@ function extractMedia(output: string): { images: string[]; videos: string[]; pdf
   return { images, videos, pdfs, files, cleanText }
 }
 
+import type { AppSettings } from '@/types'
+
+/** Settings keys that can be quick-fixed from error output */
+const TIMEOUT_SETTINGS: Array<{ pattern: RegExp; settingKey: keyof AppSettings; label: string; increment: number }> = [
+  { pattern: /Claude Code CLI timed out/i, settingKey: 'claudeCodeTimeoutSec', label: 'Claude Code Timeout', increment: 600 },
+  { pattern: /Codex CLI timed out|OpenCode CLI timed out/i, settingKey: 'cliProcessTimeoutSec', label: 'CLI Process Timeout', increment: 600 },
+  { pattern: /command timed out|shell.*timed out/i, settingKey: 'shellCommandTimeoutSec', label: 'Shell Timeout', increment: 60 },
+]
+
+/** Inline quick-fix button for timeout errors */
+function TimeoutQuickFix({ event }: { event: ToolEvent }) {
+  const [applied, setApplied] = useState(false)
+  if (event.status !== 'error' || !event.output) return null
+
+  const match = TIMEOUT_SETTINGS.find((s) => s.pattern.test(event.output || ''))
+  if (!match) return null
+
+  const handleIncrease = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const store = useAppStore.getState()
+    const current = (store.appSettings[match.settingKey] as number) || 0
+    const newValue = current + match.increment
+    await store.updateSettings({ [match.settingKey]: newValue })
+    setApplied(true)
+  }
+
+  if (applied) {
+    const store = useAppStore.getState()
+    const val = store.appSettings[match.settingKey] as number
+    return (
+      <div className="flex items-center gap-2 mt-2 text-[12px] text-emerald-400 font-500">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
+        {match.label} increased to {val}s
+      </div>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleIncrease}
+      className="mt-2 flex items-center gap-1.5 px-3 py-1.5 rounded-[8px] text-[12px] font-600
+        bg-amber-500/10 border border-amber-500/20 text-amber-400 hover:bg-amber-500/20
+        cursor-pointer transition-all"
+      style={{ fontFamily: 'inherit' }}
+    >
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="12 6 12 12 16 14" />
+      </svg>
+      Increase {match.label}
+    </button>
+  )
+}
+
 export function ToolCallBubble({ event }: { event: ToolEvent }) {
   const [expanded, setExpanded] = useState(false)
   const [imgExpanded, setImgExpanded] = useState(false)
@@ -338,7 +394,7 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
                 role="link"
                 tabIndex={0}
                 onClick={handleAgentClick}
-                onKeyDown={(e) => e.key === 'Enter' && handleAgentClick(e as any)}
+                onKeyDown={(e) => e.key === 'Enter' && handleAgentClick(e as unknown as React.MouseEvent)}
                 className="text-accent-bright hover:underline cursor-pointer font-600"
               >
                 {delegationInfo.agentName}
@@ -383,6 +439,7 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
                     {formattedCleanOutput}
                   </pre>
                 )}
+                <TimeoutQuickFix event={event} />
               </>
             )}
           </div>
@@ -397,23 +454,39 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
               <img
                 src={src}
                 alt={`Screenshot ${i + 1}`}
+                loading="lazy"
                 className={`rounded-[10px] border border-white/10 cursor-pointer transition-all duration-200 hover:border-white/25 ${imgExpanded ? 'max-w-full' : 'max-w-[400px]'}`}
                 onClick={(e) => { e.stopPropagation(); setImgExpanded(!imgExpanded) }}
                 onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
               />
-              <a
-                href={src}
-                download
-                onClick={(e) => e.stopPropagation()}
-                className="absolute top-2 right-2 opacity-0 group-hover/img:opacity-100 transition-opacity bg-black/60 backdrop-blur-sm rounded-[8px] p-1.5 hover:bg-black/80"
-                title="Download"
-              >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
-                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                  <polyline points="7 10 12 15 17 10" />
-                  <line x1="12" y1="15" x2="12" y2="3" />
-                </svg>
-              </a>
+              <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover/img:opacity-100 transition-opacity">
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    useChatStore.getState().setPreviewContent({ type: 'image', url: src, title: `${label} — Screenshot` })
+                  }}
+                  className="bg-black/60 backdrop-blur-sm rounded-[8px] p-1.5 hover:bg-black/80 border-none cursor-pointer"
+                  title="Open in side panel"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
+                    <rect x="3" y="3" width="18" height="18" rx="2" />
+                    <line x1="12" y1="3" x2="12" y2="21" />
+                  </svg>
+                </button>
+                <a
+                  href={src}
+                  download
+                  onClick={(e) => e.stopPropagation()}
+                  className="bg-black/60 backdrop-blur-sm rounded-[8px] p-1.5 hover:bg-black/80"
+                  title="Download"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                    <polyline points="7 10 12 15 17 10" />
+                    <line x1="12" y1="15" x2="12" y2="3" />
+                  </svg>
+                </a>
+              </div>
             </div>
           ))}
         </div>
@@ -423,7 +496,7 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
       {media.videos.length > 0 && (
         <div className="mt-2 flex flex-col gap-2">
           {media.videos.map((src, i) => (
-            <video key={i} src={src} controls playsInline className="max-w-full rounded-[10px] border border-white/10" />
+            <video key={i} src={src} controls playsInline preload="none" className="max-w-full rounded-[10px] border border-white/10" />
           ))}
         </div>
       )}
@@ -433,7 +506,7 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
         <div className="mt-2 flex flex-col gap-2">
           {media.pdfs.map((file, i) => (
             <div key={i} className="rounded-[10px] border border-white/10 overflow-hidden">
-              <iframe src={file.url} className="w-full h-[400px] bg-white" title={file.name} />
+              <iframe src={file.url} loading="lazy" className="w-full h-[400px] bg-white" title={file.name} />
               <a
                 href={file.url}
                 download

package/src/components/chat/tool-request-banner.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useChatStore } from '@/stores/use-chat-store'
 import { api } from '@/lib/api-client'
 import { TOOL_LABELS } from '@/lib/tool-definitions'
 
@@ -15,6 +16,7 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
   const [granted, setGranted] = useState<Set<string>>(new Set())
+  const continueSentRef = useRef(false)
 
   const toolRequests: { toolId: string; reason: string }[] = []
   const seen = new Set<string>()
@@ -53,7 +55,23 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
     const updated = [...currentTools, toolId]
     await api('PUT', `/sessions/${sid}`, { tools: updated })
     await loadSessions()
-    setGranted((prev) => new Set(prev).add(toolId))
+    const newGranted = new Set(granted).add(toolId)
+    setGranted(newGranted)
+
+    // Auto-continue: once all requested tools are granted, send a follow-up message
+    const allGranted = toolRequests.every(
+      (r) => newGranted.has(r.toolId) || updated.includes(r.toolId),
+    )
+    if (allGranted && !continueSentRef.current) {
+      continueSentRef.current = true
+      // Small delay to let the session update propagate
+      setTimeout(() => {
+        const { streaming, sendMessage } = useChatStore.getState()
+        if (!streaming) {
+          sendMessage('Continue')
+        }
+      }, 300)
+    }
   }
 
   return (

package/src/components/chat/trace-block.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { useState } from 'react'
+import type { ChatTraceBlock } from '@/types'
+
+interface Props {
+  trace: ChatTraceBlock
+}
+
+export function TraceBlock({ trace }: Props) {
+  const [collapsed, setCollapsed] = useState(trace.collapsed !== false)
+
+  const bgColor = trace.type === 'thinking'
+    ? 'bg-purple-500/[0.04] border-purple-500/10'
+    : trace.type === 'tool-call'
+      ? 'bg-sky-500/[0.04] border-sky-500/10'
+      : 'bg-emerald-500/[0.04] border-emerald-500/10'
+
+  const labelColor = trace.type === 'thinking'
+    ? 'text-purple-400/70'
+    : trace.type === 'tool-call'
+      ? 'text-sky-400/70'
+      : 'text-emerald-400/70'
+
+  const icon = trace.type === 'thinking'
+    ? '...'
+    : trace.type === 'tool-call'
+      ? '>'
+      : '<'
+
+  return (
+    <div className={`my-1 rounded-[8px] border ${bgColor} overflow-hidden`}>
+      <button
+        onClick={() => setCollapsed(!collapsed)}
+        className={`w-full flex items-center gap-2 px-3 py-1.5 text-left cursor-pointer border-none bg-transparent transition-colors hover:bg-white/[0.02] ${labelColor}`}
+        style={{ fontFamily: 'inherit' }}
+      >
+        <span className="font-mono text-[10px] w-4 shrink-0">{collapsed ? '+' : '-'}</span>
+        <span className="font-mono text-[10px] shrink-0">{icon}</span>
+        <span className="text-[11px] font-600 truncate">
+          {trace.label || trace.type.replace('-', ' ')}
+        </span>
+      </button>
+      {!collapsed && (
+        <div className="px-3 pb-2">
+          <pre className={`text-[11px] leading-relaxed whitespace-pre-wrap break-words m-0 ${
+            trace.type === 'thinking'
+              ? 'text-text-3/60 italic'
+              : 'text-text-3/70 font-mono'
+          }`}>
+            {trace.content.length > 2000
+              ? trace.content.slice(0, 2000) + '\n... (truncated)'
+              : trace.content}
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** Parse message text with [[prefix]] markers into text and trace blocks */
+export function parseTraceBlocks(text: string): Array<{ type: 'text'; content: string } | ChatTraceBlock> {
+  const blocks: Array<{ type: 'text'; content: string } | ChatTraceBlock> = []
+  const regex = /\[\[(thinking|tool|tool-result|trace|meta)\]\]([\s\S]*?)(?=\[\[(thinking|tool|tool-result|trace|meta)\]\]|$)/g
+
+  let lastEnd = 0
+  let match: RegExpExecArray | null
+
+  while ((match = regex.exec(text)) !== null) {
+    // Add any text before this match
+    if (match.index > lastEnd) {
+      const before = text.slice(lastEnd, match.index).trim()
+      if (before) blocks.push({ type: 'text', content: before })
+    }
+
+    const prefix = match[1]
+    const content = match[2].trim()
+    if (content) {
+      if (prefix === 'thinking' || prefix === 'trace') {
+        blocks.push({ type: 'thinking', content, collapsed: true })
+      } else if (prefix === 'tool') {
+        const firstLine = content.split('\n')[0] || ''
+        blocks.push({ type: 'tool-call', content, label: firstLine.slice(0, 60), collapsed: true })
+      } else if (prefix === 'tool-result') {
+        blocks.push({ type: 'tool-result', content, collapsed: true })
+      }
+      // meta is ignored
+    }
+
+    lastEnd = match.index + match[0].length
+  }
+
+  // Add remaining text
+  if (lastEnd === 0) {
+    // No trace markers found
+    if (text.trim()) blocks.push({ type: 'text', content: text })
+  } else if (lastEnd < text.length) {
+    const remaining = text.slice(lastEnd).trim()
+    if (remaining) blocks.push({ type: 'text', content: remaining })
+  }
+
+  return blocks
+}

package/src/components/projects/project-list.tsx

@@ -14,6 +14,7 @@ export function ProjectList() {
   const setActiveProjectFilter = useAppStore((s) => s.setActiveProjectFilter)
   const [search, setSearch] = useState('')
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => { loadProjects() }, [])
 
   const filtered = useMemo(() => {