repoburg 1.3.201 → 1.3.204

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

@@ -1,548 +0,0 @@
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-import { memo, useState, useEffect } from 'react';
-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);
-}
-
-/** Extract text from item data (agent_message / reasoning have {text}). */
-function itemText(item: Item): string {
-  if (item.data?.text) return item.data.text as string;
-  return '';
-}
-
-/** Strip shell wrapper from command for display (e.g. /bin/zsh -lc "actual cmd"). */
-function cleanCommand(cmd: string): string {
-  const match = cmd.match(/^\/bin\/\w+\s+-\w+\s+"(.*)"$/s);
-  return match ? match[1] : cmd;
-}
-
-/** Maximum output length before truncation (10KB). */
-const MAX_OUTPUT = 10_000;
-
-/** Render a single item as a turn card. */
-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 ${iconClass}`}>{iconText}</span>
-            <span className="turn-header-title">Agent</span>
-            {isRunning && <span className="turn-header-meta">writing…</span>}
-          </div>
-          <CommentableText
-            itemId={item.id}
-            turnId={turn.id}
-            sessionId={turn.session_id}
-            content={itemText(item) || '…'}
-            threads={threads}
-            runtimeType={runtimeType}
-          />
-        </div>
-      );
-    }
-
-    case 'reasoning': {
-      return (
-        <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>
-          <div dangerouslySetInnerHTML={{ __html: renderMarkdown(itemText(item)) }} />
-        </div>
-      );
-    }
-
-    case 'command_execution': {
-      const data = item.data || {};
-      const command = cleanCommand((data.command as string) || '');
-      const output = (data.aggregated_output as string) || '';
-      const exitCode = data.exit_code as number | null;
-      const summary = isRunning ? 'running…' : exitCode !== null ? `exit ${exitCode}` : '';
-      const isTruncated = output.length > MAX_OUTPUT;
-      const displayOutput =
-        isTruncated && !showFullOutput ? output.slice(0, MAX_OUTPUT) + '\n… (truncated, click to expand)' : output;
-      return (
-        <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>}
-          </div>
-          <pre className="cmd-block">
-            <code>{command}</code>
-          </pre>
-          {output && (
-            <>
-              <pre className="cmd-output">
-                <code>{displayOutput}</code>
-              </pre>
-              {isTruncated && (
-                <button className="cmd-output-toggle" onClick={() => setShowFullOutput((v) => !v)}>
-                  {showFullOutput ? 'Show less' : `Show full output (${(output.length / 1024).toFixed(0)}KB)`}
-                </button>
-              )}
-            </>
-          )}
-        </div>
-      );
-    }
-
-    case 'file_change': {
-      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>
-          </div>
-          <div className="file-change-list">
-            {changes.map((c, i) => {
-              const statusChar = c.kind === 'add' ? 'A' : c.kind === 'delete' ? 'D' : 'M';
-              const statusClass = c.kind === 'add' ? 'fc-add' : c.kind === 'delete' ? 'fc-del' : 'fc-mod';
-              return (
-                <div key={i} className="file-change">
-                  <span className={`fc-status ${statusClass}`}>{statusChar}</span>
-                  <span className="fc-name">{c.path}</span>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      );
-    }
-
-    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 {
-        content?: Array<{ type: string; text: string }>;
-        structured_content?: Record<string, unknown>;
-      } | null;
-      const error = data.error as string | null;
-      const isFailed = item.status === 'failed' || !!error;
-      const summary = isRunning ? 'running…' : isFailed ? 'failed' : 'done';
-      const resultTexts = result?.content?.filter((c) => c.type === 'text').map((c) => c.text) ?? [];
-      return (
-        <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>}
-            {summary && (
-              <span className="turn-header-meta" style={isFailed ? { color: 'var(--red)' } : undefined}>
-                {summary}
-              </span>
-            )}
-          </div>
-          {args && Object.keys(args).length > 0 && (
-            <div className="mcp-args">
-              {Object.entries(args).map(([key, value]) => (
-                <div key={key} className="mcp-arg">
-                  <span className="mcp-arg-key">{key}</span>
-                  {key === 'code' ? (
-                    <pre className="cmd-block">
-                      <code>{String(value)}</code>
-                    </pre>
-                  ) : (
-                    <span className="mcp-arg-value">
-                      {typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
-                    </span>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-          {resultTexts.length > 0 &&
-            resultTexts.map((text, i) => (
-              <pre key={i} className="cmd-output">
-                <code>{text}</code>
-              </pre>
-            ))}
-          {error && (
-            <pre className="cmd-output" style={{ color: 'var(--red)' }}>
-              <code>{error}</code>
-            </pre>
-          )}
-        </div>
-      );
-    }
-
-    case 'web_search': {
-      const query = (item.data?.query as string) || '';
-      return (
-        <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>
-          <p className="user-message">{query}</p>
-        </div>
-      );
-    }
-
-    case 'todo_list': {
-      const items = (item.data?.items as Array<{ text: string; completed: boolean }>) || [];
-      return (
-        <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 ? <Check size={14} /> : <Square size={14} />} {t.text}
-              </li>
-            ))}
-          </ul>
-        </div>
-      );
-    }
-
-    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>
-          <pre className="cmd-output" style={{ color: 'var(--red)' }}>
-            <code>{msg}</code>
-          </pre>
-        </div>
-      );
-    }
-
-    default:
-      return null;
-  }
-}
-
-const MemoItemCard = memo(ItemCard);
-export { MemoItemCard };
-
-interface Props {
-  turn: Turn;
-  runtimeType?: string;
-  threads?: DiscussionThread[];
-}
-
-function TurnContentBase({ turn, runtimeType, threads = [] }: Props) {
-  const [intermediateExpanded, setIntermediateExpanded] = useState(false);
-
-  // 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' && !hasRunningBgTask) {
-      setIntermediateExpanded(false);
-    }
-  }, [turn.status, turn.items]);
-
-  // 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') {
-      lastAgentIdx = i;
-      break;
-    }
-  }
-
-  const hasFinalResponse = lastAgentIdx >= 0;
-  // 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 {
-    agentMessage: Item | null;
-    toolItems: Item[];
-    otherItems: Item[];
-  }
-  const segments: Segment[] = [];
-  let currentSeg: Segment | null = null;
-  for (const item of mainIntermediate) {
-    if (item.type === 'agent_message') {
-      if (currentSeg) segments.push(currentSeg);
-      currentSeg = { agentMessage: item, toolItems: [], otherItems: [] };
-    } else {
-      if (!currentSeg) currentSeg = { agentMessage: null, toolItems: [], otherItems: [] };
-      if (isToolItem(item)) currentSeg.toolItems.push(item);
-      else currentSeg.otherItems.push(item);
-    }
-  }
-  if (currentSeg) segments.push(currentSeg);
-
-  // 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">
-      {/* User prompt — always visible at top */}
-      <div className="render-content">
-        <div className="turn-header">
-          <span className="turn-header-icon" style={{ background: 'var(--amber)', color: '#fff' }}>
-            U
-          </span>
-          <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) */}
-      {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">
-              {toolItemCount > 0
-                ? `${toolItemCount} tool call${toolItemCount > 1 ? 's' : ''}`
-                : 'thinking…'}
-            </span>
-            <ChevronRight
-              size={14}
-              className="tool-calls-chevron"
-              style={{ transform: intermediateExpanded ? 'rotate(90deg)' : 'none' }}
-            />
-          </div>
-          {intermediateExpanded && (
-            <div className="tool-calls-body">
-              {segments.map((seg, i) => (
-                <div key={i} className="intermediate-segment">
-                  {/* Agent message for this segment */}
-                  {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} runtimeType={runtimeType} turn={turn} threads={threads} />
-                  ))}
-                  {/* Level 2: Tool calls for this segment — collapsed by default */}
-                  {seg.toolItems.length > 0 && <CollapsibleToolCalls items={seg.toolItems} runtimeType={runtimeType} turn={turn} threads={threads} />}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Final agent message — always visible */}
-      {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} runtimeType={runtimeType} turn={turn} threads={threads} />)}
-
-      {/* Pending state (no items at all) */}
-      {turn.items.length === 0 && !turn.error && (turn.status === 'pending' || turn.status === 'running') && (
-        <div className="render-content">
-          <p style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>
-            {turn.status === 'running' ? 'Agent is thinking…' : 'Waiting to start…'}
-          </p>
-        </div>
-      )}
-
-      {/* Turn error (if any) */}
-      {turn.error && (
-        <div className="render-content">
-          <pre className="cmd-output" style={{ color: 'var(--red)' }}>
-            <code>{turn.error}</code>
-          </pre>
-        </div>
-      )}
-    </div>
-  );
-}
-
-const TurnContent = memo(TurnContentBase);
-export default TurnContent;