repoburg 1.3.196 → 1.3.197

package/agent-pane/frontend/src/components/TurnContent.tsx

@@ -1,12 +1,70 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import { memo, useState, useEffect } from 'react';
-import { Layers, ChevronRight } from 'lucide-react';
-import type { Turn, Item } from '../types/index.ts';
+import {
+  Layers, ChevronRight, Brain, Terminal, SatelliteDish, Bot, Cog,
+  FilePlus, Plug, Search, ListTodo, Minimize2, CircleAlert, Check, Square, FileText, X,
+} from 'lucide-react';
+import type { Turn, Item, DiscussionThread, Attachment } from '../types/index.ts';
+import { runtimeIcon } from '../types/index.ts';
 import CollapsibleToolCalls, { isToolItem } from './CollapsibleToolCalls.tsx';
+import CommentableText from './CommentableText.tsx';
 
 marked.setOptions({ breaks: true, gfm: true });
 
+/** Compact inline attachment pills shown below the user prompt in the render area. */
+function AttachmentPills({ attachments }: { attachments: Attachment[] }) {
+  const [previewSrc, setPreviewSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!previewSrc) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setPreviewSrc(null);
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [previewSrc]);
+
+  if (!Array.isArray(attachments) || attachments.length === 0) return null;
+
+  return (
+    <>
+      <div className="attachment-pills">
+        {attachments.map((att, i) => {
+          const isImage = att.media_type.startsWith('image/');
+          const src = `data:${att.media_type};base64,${att.data}`;
+          return (
+            <span
+              key={i}
+              className="attachment-pill"
+              title={att.name}
+              onClick={isImage ? () => setPreviewSrc(src) : undefined}
+              style={isImage ? { cursor: 'pointer' } : undefined}
+            >
+              {isImage ? (
+                <img src={src} alt={att.name} className="attachment-pill-thumb" />
+              ) : (
+                <FileText size={12} className="attachment-pill-icon" />
+              )}
+              <span className="attachment-pill-name">{att.name}</span>
+            </span>
+          );
+        })}
+      </div>
+      {previewSrc && (
+        <div className="image-preview-modal" onClick={() => setPreviewSrc(null)}>
+          <div className="image-preview-content" onClick={(e) => e.stopPropagation()}>
+            <img src={previewSrc} alt="preview" />
+            <button className="image-preview-close" onClick={() => setPreviewSrc(null)}>
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
 function renderMarkdown(content: string): string {
   const raw = marked.parse(content) as string;
   return DOMPurify.sanitize(raw);
@@ -28,20 +86,28 @@ function cleanCommand(cmd: string): string {
 const MAX_OUTPUT = 10_000;
 
 /** Render a single item as a turn card. */
-function ItemCard({ item }: { item: Item }) {
+function ItemCard({ item, runtimeType, turn, threads }: { item: Item; runtimeType?: string; turn: Turn; threads: DiscussionThread[] }) {
   const isRunning = item.status === 'in_progress';
   const [showFullOutput, setShowFullOutput] = useState(false);
 
   switch (item.type) {
     case 'agent_message': {
+      const { iconClass, iconText } = runtimeIcon(runtimeType ?? 'codex');
       return (
         <div className="render-content">
           <div className="turn-header">
-            <span className="turn-header-icon ic-codex">CX</span>
+            <span className={`turn-header-icon ${iconClass}`}>{iconText}</span>
             <span className="turn-header-title">Agent</span>
             {isRunning && <span className="turn-header-meta">writing…</span>}
           </div>
-          <div dangerouslySetInnerHTML={{ __html: renderMarkdown(itemText(item) || '…') }} />
+          <CommentableText
+            itemId={item.id}
+            turnId={turn.id}
+            sessionId={turn.session_id}
+            content={itemText(item) || '…'}
+            threads={threads}
+            runtimeType={runtimeType}
+          />
         </div>
       );
     }
@@ -51,7 +117,7 @@ function ItemCard({ item }: { item: Item }) {
         <div className="render-content">
           <div className="turn-header">
             <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-              💭
+              <Brain size={14} />
             </span>
             <span className="turn-header-title">Reasoning</span>
           </div>
@@ -73,7 +139,7 @@ function ItemCard({ item }: { item: Item }) {
         <div className="render-content">
           <div className="turn-header">
             <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-              🔧
+              <Terminal size={14} />
             </span>
             <span className="turn-header-title">Command</span>
             {summary && <span className="turn-header-meta">{summary}</span>}
@@ -98,13 +164,14 @@ function ItemCard({ item }: { item: Item }) {
     }
 
     case 'file_change': {
-      const changes = (item.data?.changes as Array<{ path: string; kind: string }>) || [];
+      const rawChanges = item.data?.changes;
+      const changes = Array.isArray(rawChanges) ? (rawChanges as Array<{ path: string; kind: string }>) : [];
       const summary = `${changes.length} file${changes.length !== 1 ? 's' : ''}`;
       return (
         <div className="render-content">
           <div className="turn-header">
             <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-              📁
+              <FilePlus size={14} />
             </span>
             <span className="turn-header-title">File Changes</span>
             <span className="turn-header-meta">{summary}</span>
@@ -128,6 +195,24 @@ function ItemCard({ item }: { item: Item }) {
     case 'mcp_tool_call': {
       const data = item.data || {};
       const tool = (data.tool as string) || 'mcp';
+
+      // Compact status card for Agent calls (non-clickable — subagent view removed)
+      if (tool === 'Agent') {
+        const args = data.arguments as Record<string, unknown> | null;
+        const desc = (args?.description as string) || (args?.prompt as string) || 'Subagent';
+        const isFailed = item.status === 'failed';
+        const summary = isRunning ? 'running…' : isFailed ? 'failed' : 'done';
+        return (
+          <div className="agent-call-card">
+            <span className="agent-call-icon"><Bot size={14} /></span>
+            <span className="agent-call-desc">{desc}</span>
+            <span className={`agent-call-status ${isRunning ? 'running' : isFailed ? 'failed' : 'done'}`}>
+              {summary}
+            </span>
+          </div>
+        );
+      }
+
       const server = (data.server as string) || '';
       const args = data.arguments as Record<string, unknown> | null;
       const result = data.result as {
@@ -142,7 +227,7 @@ function ItemCard({ item }: { item: Item }) {
         <div className="render-content">
           <div className="turn-header">
             <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-              🔌
+              <Plug size={14} />
             </span>
             <span className="turn-header-title">MCP: {tool}</span>
             {server && <span className="turn-header-meta">{server}</span>}
@@ -191,7 +276,7 @@ function ItemCard({ item }: { item: Item }) {
         <div className="render-content">
           <div className="turn-header">
             <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-              🔍
+              <Search size={14} />
             </span>
             <span className="turn-header-title">Web Search</span>
           </div>
@@ -206,14 +291,14 @@ function ItemCard({ item }: { item: Item }) {
         <div className="render-content">
           <div className="turn-header">
             <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-              📋
+              <ListTodo size={14} />
             </span>
             <span className="turn-header-title">Todo List</span>
           </div>
           <ul className="todo-list">
             {items.map((t, i) => (
               <li key={i} className={t.completed ? 'todo-done' : 'todo-pending'}>
-                {t.completed ? '✅' : '⬜'} {t.text}
+                {t.completed ? <Check size={14} /> : <Square size={14} />} {t.text}
               </li>
             ))}
           </ul>
@@ -221,13 +306,73 @@ function ItemCard({ item }: { item: Item }) {
       );
     }
 
+    case 'background_task': {
+      const data = item.data || {};
+      const taskType = (data.task_type as string) || 'unknown';
+      const subagentType = (data.subagent_type as string) || null;
+      const desc = (data.description as string) || '';
+      const taskStatus = (data.status as string) || 'running';
+      const lastTool = (data.last_tool_name as string) || null;
+      const tokenCount = (data.token_count as number) || null;
+      const isSubagent = taskType === 'local_agent';
+      const isMonitor = taskType === 'local_bash';
+      const TaskIcon = isSubagent ? Bot : isMonitor ? SatelliteDish : Cog;
+      const typeLabel = isSubagent ? `Subagent${subagentType ? `: ${subagentType}` : ''}` : isMonitor ? 'Monitor' : 'Background Task';
+      const statusLabel = taskStatus === 'running' ? 'running…' : taskStatus === 'completed' ? 'done' : taskStatus === 'failed' ? 'failed' : taskStatus === 'stopped' ? 'stopped' : taskStatus;
+      const isFailed = item.status === 'failed' || taskStatus === 'failed';
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
+              <TaskIcon size={14} />
+            </span>
+            <span className="turn-header-title">{typeLabel}</span>
+            <span className="turn-header-meta" style={isFailed ? { color: 'var(--red)' } : undefined}>
+              {statusLabel}
+            </span>
+          </div>
+          {desc && <p className="user-message" style={{ fontSize: '13px' }}>{desc}</p>}
+          {lastTool && isRunning && (
+            <div className="cmd-output" style={{ color: 'var(--text-3)', fontSize: '12px' }}>
+              last tool: {lastTool}
+              {tokenCount != null && ` · ${tokenCount.toLocaleString()} tokens`}
+            </div>
+          )}
+          <div className="cmd-output" style={{ color: 'var(--text-muted)', fontSize: '11px' }}>
+            Output available in Tasks panel — click the status bar indicator or the Tasks tab.
+          </div>
+        </div>
+      );
+    }
+
+    case 'context_compaction': {
+      const trigger = (item.data?.trigger as string) ?? 'auto';
+      const pre = (item.data?.pre_tokens as number) ?? 0;
+      const post = (item.data?.post_tokens as number) ?? 0;
+      const reduction = pre > 0 ? Math.round((1 - post / pre) * 100) : 0;
+      const label = trigger === 'manual' ? 'Context compacted (/compact)' : 'Context auto-compacted';
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
+              <Minimize2 size={14} />
+            </span>
+            <span className="turn-header-title">{label}</span>
+          </div>
+          <div className="cmd-output" style={{ color: 'var(--text-3)' }}>
+            {pre.toLocaleString()} → {post.toLocaleString()} tokens ({reduction}% reduction)
+          </div>
+        </div>
+      );
+    }
+
     case 'error': {
       const msg = (item.data?.message as string) || 'Unknown error';
       return (
         <div className="render-content">
           <div className="turn-header">
             <span className="turn-header-icon" style={{ background: 'var(--red)', color: '#fff' }}>
-              !
+              <CircleAlert size={14} />
             </span>
             <span className="turn-header-title">Error</span>
           </div>
@@ -248,21 +393,28 @@ export { MemoItemCard };
 
 interface Props {
   turn: Turn;
+  runtimeType?: string;
+  threads?: DiscussionThread[];
 }
 
-function TurnContentBase({ turn }: Props) {
+function TurnContentBase({ turn, runtimeType, threads = [] }: Props) {
   const [intermediateExpanded, setIntermediateExpanded] = useState(false);
 
-  // Auto-expand Level 1 when turn is running/pending, auto-collapse when completed
+  // Auto-expand Level 1 when turn is running/pending, auto-collapse when completed.
+  // Guard: don't auto-collapse if there are in_progress background_task items —
+  // Monitor tasks may still be running after the turn's result/success arrives.
   useEffect(() => {
+    const hasRunningBgTask = turn.items.some(
+      (item) => item.type === 'background_task' && item.status === 'in_progress',
+    );
     if (turn.status === 'running' || turn.status === 'pending') {
       setIntermediateExpanded(true);
-    } else if (turn.status === 'completed') {
+    } else if (turn.status === 'completed' && !hasRunningBgTask) {
       setIntermediateExpanded(false);
     }
-  }, [turn.status]);
+  }, [turn.status, turn.items]);
 
-  // Find the last agent_message item — that is the final response
+  // Find the last agent_message item FROM THE MAIN AGENT — that is the final response.
   let lastAgentIdx = -1;
   for (let i = turn.items.length - 1; i >= 0; i--) {
     if (turn.items[i].type === 'agent_message') {
@@ -275,6 +427,18 @@ function TurnContentBase({ turn }: Props) {
   // Intermediate = everything before final agent_message (or ALL items if running)
   const intermediateItems = hasFinalResponse ? turn.items.slice(0, lastAgentIdx) : turn.items;
 
+  // Filter out empty reasoning items (text is "" — signed-empty thinking blocks from Claude SDK).
+  // These inflate the intermediate step count and render as empty cards.
+  const visibleIntermediate = intermediateItems.filter(
+    (item) => !(item.type === 'reasoning' && (!item.data?.text || item.data.text === '')),
+  );
+
+  // Filter main flow: remove background_task items (they belong in Tasks panel).
+  const mainIntermediate = visibleIntermediate.filter((item) => {
+    if (item.type === 'background_task') return false;
+    return true;
+  });
+
   // Group intermediate items into segments by agent_message boundaries
   // Each segment: one agent_message + following tool/non-tool items until next agent_message
   interface Segment {
@@ -284,7 +448,7 @@ function TurnContentBase({ turn }: Props) {
   }
   const segments: Segment[] = [];
   let currentSeg: Segment | null = null;
-  for (const item of intermediateItems) {
+  for (const item of mainIntermediate) {
     if (item.type === 'agent_message') {
       if (currentSeg) segments.push(currentSeg);
       currentSeg = { agentMessage: item, toolItems: [], otherItems: [] };
@@ -296,7 +460,11 @@ function TurnContentBase({ turn }: Props) {
   }
   if (currentSeg) segments.push(currentSeg);
 
-  const intermediateCount = intermediateItems.length;
+  // Count only tool items for the collapsed header (reasoning is not a "step")
+  const toolItemCount = mainIntermediate.filter((item) => isToolItem(item)).length;
+  // Show intermediate section when there are tool calls or when turn is running/pending
+  // (so the user sees thinking activity). For completed turns with only reasoning, hide it.
+  const showIntermediate = toolItemCount > 0 || (mainIntermediate.length > 0 && (turn.status === 'running' || turn.status === 'pending'));
 
   return (
     <div className="turn-group">
@@ -309,17 +477,20 @@ function TurnContentBase({ turn }: Props) {
           <span className="turn-header-title">You</span>
         </div>
         <p className="user-message">{turn.user_prompt}</p>
+        {Array.isArray(turn.attachments) && turn.attachments.length > 0 && <AttachmentPills attachments={turn.attachments} />}
       </div>
 
       {/* Level 1: Intermediate steps — collapsible (auto-expand while running, auto-collapse on complete) */}
-      {intermediateCount > 0 && (
+      {showIntermediate && (
         <div className="tool-calls">
           <div className="tool-calls-header" onClick={() => setIntermediateExpanded((e) => !e)}>
             <span className="tool-calls-icon">
               <Layers size={12} />
             </span>
             <span className="tool-calls-summary">
-              {intermediateCount} intermediate step{intermediateCount > 1 ? 's' : ''}
+              {toolItemCount > 0
+                ? `${toolItemCount} tool call${toolItemCount > 1 ? 's' : ''}`
+                : 'thinking…'}
             </span>
             <ChevronRight
               size={14}
@@ -332,13 +503,13 @@ function TurnContentBase({ turn }: Props) {
               {segments.map((seg, i) => (
                 <div key={i} className="intermediate-segment">
                   {/* Agent message for this segment */}
-                  {seg.agentMessage && <MemoItemCard item={seg.agentMessage} />}
+                  {seg.agentMessage && <MemoItemCard item={seg.agentMessage} runtimeType={runtimeType} turn={turn} threads={threads} />}
                   {/* Non-tool items inline (reasoning, etc.) */}
                   {seg.otherItems.map((item) => (
-                    <MemoItemCard key={item.id} item={item} />
+                    <MemoItemCard key={item.id} item={item} runtimeType={runtimeType} turn={turn} threads={threads} />
                   ))}
                   {/* Level 2: Tool calls for this segment — collapsed by default */}
-                  {seg.toolItems.length > 0 && <CollapsibleToolCalls items={seg.toolItems} />}
+                  {seg.toolItems.length > 0 && <CollapsibleToolCalls items={seg.toolItems} runtimeType={runtimeType} turn={turn} threads={threads} />}
                 </div>
               ))}
             </div>
@@ -347,10 +518,10 @@ function TurnContentBase({ turn }: Props) {
       )}
 
       {/* Final agent message — always visible */}
-      {hasFinalResponse && <MemoItemCard key={turn.items[lastAgentIdx].id} item={turn.items[lastAgentIdx]} />}
+      {hasFinalResponse && <MemoItemCard key={turn.items[lastAgentIdx].id} item={turn.items[lastAgentIdx]} runtimeType={runtimeType} turn={turn} threads={threads} />}
 
       {/* Items after final agent message (rare — errors, etc.) */}
-      {hasFinalResponse && turn.items.slice(lastAgentIdx + 1).map((item) => <MemoItemCard key={item.id} item={item} />)}
+      {hasFinalResponse && turn.items.slice(lastAgentIdx + 1).map((item) => <MemoItemCard key={item.id} item={item} runtimeType={runtimeType} turn={turn} threads={threads} />)}
 
       {/* Pending state (no items at all) */}
       {turn.items.length === 0 && !turn.error && (turn.status === 'pending' || turn.status === 'running') && (

package/agent-pane/frontend/src/components/input/SlashPopup.tsx

@@ -1,4 +1,4 @@
-import type { ProviderCapabilities } from '../../types/index.ts';
+import type { ProviderCapabilities, ProviderSlashCommand } from '../../types/index.ts';
 
 /** A slash command definition. */
 export interface SlashCommand {
@@ -9,10 +9,13 @@ export interface SlashCommand {
   capability: keyof ProviderCapabilities | null;
   /** Sub-popup type to open when selected. */
   subPopup?: 'sandbox' | 'websearch' | 'network';
+  /** When true, selecting inserts `/<id> ` as text (provider-native commands
+   *  like /compact, /clear that are handled by the runtime, not the UI). */
+  insertAsText?: boolean;
 }
 
-/** All available slash commands. */
-const ALL_COMMANDS: SlashCommand[] = [
+/** All built-in slash commands. */
+const BUILTIN_COMMANDS: SlashCommand[] = [
   { id: 'model', label: '/model', hint: 'Change model', capability: 'dynamicModels' },
   { id: 'sandbox', label: '/sandbox', hint: 'Sandbox mode', capability: 'sandbox', subPopup: 'sandbox' },
   { id: 'websearch', label: '/websearch', hint: 'Web search mode', capability: 'webSearch', subPopup: 'websearch' },
@@ -22,12 +25,28 @@ const ALL_COMMANDS: SlashCommand[] = [
   { id: 'mcp', label: '/mcp', hint: 'Browse MCP servers', capability: 'mcpServers' },
 ];
 
-/** Filter commands by capability and text filter. */
+/** Map provider-native commands (fetched dynamically from the runtime) to SlashCommand. */
+function mapProviderCommands(commands: ProviderSlashCommand[]): SlashCommand[] {
+  return commands.map((c) => ({
+    id: c.name,
+    label: `/${c.name}`,
+    hint: c.description,
+    capability: null,
+    insertAsText: true,
+  }));
+}
+
+/** Filter built-in and provider commands by capability and text filter. */
 export function filterCommands(
   filter: string,
   capabilities: ProviderCapabilities,
+  providerCommands: ProviderSlashCommand[] = [],
 ): SlashCommand[] {
-  return ALL_COMMANDS.filter((cmd) => {
+  const all = [...BUILTIN_COMMANDS, ...mapProviderCommands(providerCommands)];
+  const seen = new Set<string>();
+  return all.filter((cmd) => {
+    if (seen.has(cmd.label)) return false;
+    seen.add(cmd.label);
     if (cmd.capability && !capabilities[cmd.capability]) return false;
     if (filter && !cmd.label.toLowerCase().includes(filter.toLowerCase())) return false;
     return true;

package/agent-pane/frontend/src/components/panels/TasksPanel.test.tsx

@@ -0,0 +1,97 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import TasksPanel from './TasksPanel.tsx';
+import { resetStore } from '../../test/component-helpers.ts';
+import { makeDetail, makeTurn, makeItem } from '../../test/fixtures.ts';
+
+describe('TasksPanel', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('shows empty state when no background tasks', () => {
+    const detail = makeDetail('s1', []);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<TasksPanel />);
+    expect(screen.getByText('No background tasks yet')).toBeInTheDocument();
+  });
+
+  it('renders a Monitor task card with description', () => {
+    const item = makeItem('i1', 't1', 'background_task');
+    item.data = {
+      task_type: 'local_bash',
+      description: 'watch echo hello',
+      status: 'running',
+      output: 'hello\n',
+    };
+    item.status = 'in_progress';
+    const turn = makeTurn('t1', 's1', { items: [item] });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<TasksPanel />);
+    expect(screen.getByText('Monitor')).toBeInTheDocument();
+    expect(screen.getByText('watch echo hello')).toBeInTheDocument();
+    // Output is in a <code> element inside .task-output
+    const outputEl = document.querySelector('.task-output code');
+    expect(outputEl?.textContent).toContain('hello');
+  });
+
+  it('does not show Subagent (local_agent) tasks in Tasks panel', () => {
+    const item = makeItem('i2', 't1', 'background_task');
+    item.data = {
+      task_type: 'local_agent',
+      subagent_type: 'explore-codebase',
+      description: 'explore the codebase',
+      status: 'completed',
+    };
+    item.status = 'completed';
+    const turn = makeTurn('t1', 's1', { items: [item] });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<TasksPanel />);
+    // local_agent items are filtered out — they appear in subagent tabs, not Tasks panel
+    expect(screen.getByText('No background tasks yet')).toBeInTheDocument();
+  });
+
+  it('sorts running tasks before completed', () => {
+    const runningItem = makeItem('i1', 't2', 'background_task');
+    runningItem.data = { task_type: 'local_bash', description: 'running task', status: 'running' };
+    runningItem.status = 'in_progress';
+
+    const doneItem = makeItem('i2', 't1', 'background_task');
+    doneItem.data = { task_type: 'local_bash', description: 'done task', status: 'completed' };
+    doneItem.status = 'completed';
+
+    const turn1 = makeTurn('t1', 's1', { items: [doneItem] });
+    const turn2 = makeTurn('t2', 's1', { items: [runningItem] });
+    const detail = makeDetail('s1', [turn1, turn2]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<TasksPanel />);
+
+    const cards = document.querySelectorAll('.task-card');
+    expect(cards.length).toBe(2);
+    // Running task should be first
+    expect(cards[0].textContent).toContain('running task');
+    expect(cards[1].textContent).toContain('done task');
+  });
+
+  it('shows task count in section title (local_agent excluded)', () => {
+    const item1 = makeItem('i1', 't1', 'background_task');
+    item1.data = { task_type: 'local_bash', description: 'task 1', status: 'completed' };
+    item1.status = 'completed';
+
+    const item2 = makeItem('i2', 't1', 'background_task');
+    item2.data = { task_type: 'local_agent', description: 'task 2', status: 'completed' };
+    item2.status = 'completed';
+
+    const turn = makeTurn('t1', 's1', { items: [item1, item2] });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<TasksPanel />);
+    // Only local_bash counted — local_agent filtered out
+    expect(screen.getByText(/Background Tasks \(1\)/)).toBeInTheDocument();
+  });
+});