repoburg 1.3.202 → 1.3.204

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

@@ -1,208 +0,0 @@
-import { useState, useEffect, useRef, memo } from 'react';
-import { useStore } from '../../store/store.ts';
-import type { Item } from '../../types/index.ts';
-import { SatelliteDish, Bot, Cog, ChevronRight, Check, CircleAlert, Square } from 'lucide-react';
-
-/** Maximum output length before truncation (20KB — panel has more room than inline). */
-const MAX_OUTPUT = 20_000;
-
-/** A background_task item collected from turns, enriched with turn index for context. */
-interface TaskEntry {
-  item: Item;
-  turnIndex: number;
-  turnPrompt: string;
-}
-
-/** Collect all background_task items from all turns, excluding local_agent
- *  (subagents are shown in tabs/subagent views, not in Tasks panel). */
-function collectTaskItems(
-  turns: { id: string; user_prompt: string; items: Item[] }[],
-): TaskEntry[] {
-  const entries: TaskEntry[] = [];
-  turns.forEach((turn, idx) => {
-    for (const item of turn.items) {
-      if (item.type === 'background_task') {
-        // Skip local_agent — subagents have their own tab/view
-        const taskType = (item.data?.task_type as string) || 'unknown';
-        if (taskType === 'local_agent') continue;
-        entries.push({ item, turnIndex: idx, turnPrompt: turn.user_prompt });
-      }
-    }
-  });
-  return entries;
-}
-
-/** Render a single task card with live output. */
-function TaskCard({ entry }: { entry: TaskEntry }) {
-  const { item, turnIndex, turnPrompt } = entry;
-  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 summary = (data.summary as string) || null;
-  const lastTool = (data.last_tool_name as string) || null;
-  const tokenCount = (data.token_count as number) || null;
-  const output = (data.output as string) || '';
-  const isRunning = item.status === 'in_progress';
-  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';
-
-  const [expanded, setExpanded] = useState(isRunning);
-  const [showFullOutput, setShowFullOutput] = useState(false);
-  const outputRef = useRef<HTMLPreElement>(null);
-
-  // Auto-expand while running, auto-collapse on completion
-  useEffect(() => {
-    if (isRunning) setExpanded(true);
-  }, [isRunning]);
-
-  // Auto-scroll output to bottom for running tasks
-  useEffect(() => {
-    if (expanded && isRunning && outputRef.current) {
-      outputRef.current.scrollTop = outputRef.current.scrollHeight;
-    }
-  }, [expanded, isRunning, output]);
-
-  const isTruncated = output.length > MAX_OUTPUT;
-  const displayOutput =
-    isTruncated && !showFullOutput
-      ? output.slice(0, MAX_OUTPUT) + '\n… (truncated, click to expand)'
-      : output;
-
-  const statusIcon = isRunning ? null : taskStatus === 'completed' ? <Check size={12} /> : isFailed ? <CircleAlert size={12} /> : <Square size={12} />;
-
-  return (
-    <div className={`task-card ${isRunning ? 'task-running' : ''} ${isFailed ? 'task-failed' : ''}`}>
-      <div className="task-card-header" onClick={() => setExpanded((e) => !e)} style={{ cursor: 'pointer' }}>
-        <span className="task-card-icon">
-          <TaskIcon size={14} />
-        </span>
-        <span className="task-card-type">{typeLabel}</span>
-        <span className={`task-card-status ${isFailed ? 'task-status-failed' : isRunning ? 'task-status-running' : 'task-status-done'}`}>
-          {statusIcon} {statusLabel}
-        </span>
-        <ChevronRight
-          size={14}
-          className="task-card-chevron"
-          style={{ transform: expanded ? 'rotate(90deg)' : 'none', marginLeft: 'auto' }}
-        />
-      </div>
-
-      {desc && <div className="task-card-desc">{desc}</div>}
-
-      {isRunning && lastTool && (
-        <div className="task-card-meta">
-          last tool: {lastTool}
-          {tokenCount != null && ` · ${tokenCount.toLocaleString()} tokens`}
-        </div>
-      )}
-
-      {expanded && (
-        <div className="task-card-body">
-          {output ? (
-            <>
-              <pre className="cmd-output task-output" ref={outputRef}>
-                <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>
-              )}
-            </>
-          ) : summary ? (
-            <pre className="cmd-output task-output">
-              <code>{summary}</code>
-            </pre>
-          ) : isRunning ? (
-            <div className="task-card-placeholder">Waiting for output…</div>
-          ) : (
-            <div className="task-card-placeholder">No output captured.</div>
-          )}
-          <div className="task-card-context" title={turnPrompt}>
-            from turn {turnIndex + 1}: {turnPrompt.length > 60 ? turnPrompt.slice(0, 60) + '…' : turnPrompt}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-const MemoTaskCard = memo(TaskCard);
-
-function TasksPanelBase() {
-  const activeSessionId = useStore((s) => s.activeSessionId);
-  const sessionDetails = useStore((s) => s.sessionDetails);
-
-  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
-  const turns = detail?.turns ?? [];
-  const bgTasks = detail?.backgroundTasks ?? [];
-
-  // Collect all background_task items from all turns
-  const taskEntries = collectTaskItems(turns);
-
-  // Sort: running first, then by turn index (most recent first within same status)
-  const sorted = [...taskEntries].sort((a, b) => {
-    const aRunning = a.item.status === 'in_progress';
-    const bRunning = b.item.status === 'in_progress';
-    if (aRunning && !bRunning) return -1;
-    if (!aRunning && bRunning) return 1;
-    return b.turnIndex - a.turnIndex;
-  });
-
-  // Count active tasks from both backgroundTasks event and in_progress items (dedup by task_id)
-  // Only count local_bash monitors — local_agent subagents are in tabs, not Tasks panel
-  const activeTypes = new Map<string, string>();
-  for (const t of bgTasks) {
-    if (t.task_type === 'local_bash') activeTypes.set(t.task_id, t.task_type);
-  }
-  for (const entry of taskEntries) {
-    if (entry.item.status === 'in_progress') {
-      const taskId = (entry.item.data?.task_id as string) ?? entry.item.external_item_id;
-      const taskType = (entry.item.data?.task_type as string) ?? 'unknown';
-      activeTypes.set(taskId, taskType);
-    }
-  }
-  const monitorCount = [...activeTypes.values()].filter((t) => t === 'local_bash').length;
-
-  if (taskEntries.length === 0) {
-    return <div className="empty-state">No background tasks yet</div>;
-  }
-
-  return (
-    <div className="right-section">
-      <div className="right-section-title">
-        Background Tasks ({taskEntries.length})
-        {monitorCount > 0 && (
-          <span className="task-count-badge" style={{ color: 'var(--amber)' }}>
-            {' '}{monitorCount} running
-          </span>
-        )}
-      </div>
-      {sorted.map((entry) => (
-        <MemoTaskCard key={entry.item.id} entry={entry} />
-      ))}
-    </div>
-  );
-}
-
-const TasksPanel = memo(TasksPanelBase);
-export default TasksPanel;

package/agent-pane/frontend/src/components/panels/ThreadsPanel.tsx

@@ -1,382 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-import { CheckCircle2, RotateCcw, Trash2, Send, MessageSquare, Navigation, Quote } from 'lucide-react';
-import { useStore } from '../../store/store.ts';
-import type { DiscussionThread, Turn, Item } from '../../types/index.ts';
-
-marked.setOptions({ breaks: true, gfm: true });
-
-function renderMarkdown(content: string): string {
-  const raw = marked.parse(content) as string;
-  return DOMPurify.sanitize(raw);
-}
-
-/** Extract text from item data (agent_message has {text}). */
-function itemText(item: Item): string {
-  if (item.data?.text) return item.data.text as string;
-  return '';
-}
-
-/** Strip the quoted prefix from a thread turn's user_prompt for display. */
-function stripQuotePrefix(prompt: string): string {
-  const match = prompt.match(/^\[Quoting from your previous response\]:\n> .*\n\n([\s\S]*)$/);
-  return match ? match[1] : prompt;
-}
-
-type ThreadFilter = 'open' | 'resolved' | 'all';
-
-/** Render a single thread turn's conversation (user message + AI response). */
-function ThreadTurnView({ turn }: { turn: Turn }) {
-  const agentItems = turn.items.filter((i) => i.type === 'agent_message');
-  const displayPrompt = stripQuotePrefix(turn.user_prompt);
-
-  return (
-    <div className="thread-card-turn">
-      {/* User message */}
-      <div className="thread-card-user-message">{displayPrompt}</div>
-      {/* AI responses */}
-      {agentItems.map((item) => (
-        <div
-          key={item.id}
-          className="thread-card-ai-response"
-          dangerouslySetInnerHTML={{ __html: renderMarkdown(itemText(item)) }}
-        />
-      ))}
-      {/* Pending state */}
-      {turn.items.length === 0 && (turn.status === 'pending' || turn.status === 'running') && (
-        <div className="thread-card-pending">{turn.status === 'running' ? 'AI is responding…' : 'Waiting…'}</div>
-      )}
-    </div>
-  );
-}
-
-function ThreadCard({
-  thread,
-  isRunning,
-  threadTurns,
-  onResolve,
-  onReopen,
-  onDelete,
-  onFollowup,
-  onLocate,
-}: {
-  thread: DiscussionThread;
-  isRunning: boolean;
-  threadTurns: Turn[];
-  onResolve: () => void;
-  onReopen: () => void;
-  onDelete: () => void;
-  onFollowup: (message: string) => void;
-  onLocate: () => void;
-}) {
-  const [followup, setFollowup] = useState('');
-  const [expanded, setExpanded] = useState(true);
-  const followupRef = useRef<HTMLTextAreaElement>(null);
-  const conversationRef = useRef<HTMLDivElement>(null);
-  const [showQuoteBtn, setShowQuoteBtn] = useState(false);
-  const [quoteBtnPos, setQuoteBtnPos] = useState({ x: 0, y: 0 });
-  const [selectedText, setSelectedText] = useState('');
-
-  const FOLLOWUP_MIN = 28;
-  const FOLLOWUP_MAX = 120;
-
-  // Auto-scroll to bottom (latest message) when turns change or card expands
-  useEffect(() => {
-    const el = conversationRef.current;
-    if (el) el.scrollTop = el.scrollHeight;
-  }, [threadTurns.length, expanded]);
-
-  function autoResizeFollowup() {
-    const el = followupRef.current;
-    if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = Math.min(el.scrollHeight, FOLLOWUP_MAX) + 'px';
-  }
-
-  const handleConversationMouseDown = useCallback(() => {
-    setShowQuoteBtn(false);
-  }, []);
-
-  const checkSelection = useCallback(() => {
-    const container = conversationRef.current;
-    if (!container) return;
-    const sel = window.getSelection();
-    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) {
-      setShowQuoteBtn(false);
-      return;
-    }
-    const range = sel.getRangeAt(0);
-    if (!container.contains(range.commonAncestorContainer)) {
-      setShowQuoteBtn(false);
-      return;
-    }
-    // Only show quote button when selection is within an AI response
-    const targetEl =
-      range.commonAncestorContainer.nodeType === Node.TEXT_NODE
-        ? range.commonAncestorContainer.parentElement
-        : (range.commonAncestorContainer as HTMLElement);
-    if (!targetEl?.closest('.thread-card-ai-response')) {
-      setShowQuoteBtn(false);
-      return;
-    }
-    const text = sel.toString();
-    if (!text.trim()) {
-      setShowQuoteBtn(false);
-      return;
-    }
-    const selRect = range.getBoundingClientRect();
-    const BUTTON_HEIGHT = 28;
-    const GAP = 6;
-    const BUTTON_WIDTH_EST = 170;
-
-    // Detect backward selection via anchor (press) vs focus (release) order.
-    let backward = false;
-    if (sel.anchorNode && sel.focusNode) {
-      try {
-        const fr = document.createRange();
-        fr.setStart(sel.focusNode, sel.focusOffset);
-        fr.setEnd(sel.focusNode, sel.focusOffset);
-        const ar = document.createRange();
-        ar.setStart(sel.anchorNode, sel.anchorOffset);
-        ar.setEnd(sel.anchorNode, sel.anchorOffset);
-        backward = ar.compareBoundaryPoints(Range.START_TO_START, fr) > 0;
-      } catch {
-        backward = false;
-      }
-    }
-
-    let btnY = selRect.top - BUTTON_HEIGHT - GAP;
-    if (btnY < 8) btnY = selRect.bottom + GAP;
-    let btnX = backward ? selRect.left - BUTTON_WIDTH_EST : selRect.right;
-    btnX = Math.max(8, Math.min(btnX, window.innerWidth - BUTTON_WIDTH_EST - 8));
-    setQuoteBtnPos({ x: btnX, y: btnY });
-    setSelectedText(text);
-    setShowQuoteBtn(true);
-  }, []);
-
-  // Detect selections on mouseup anywhere in the document so that releasing
-  // the mouse in the surrounding padding (common with backward drags) still
-  // registers the quote button.
-  useEffect(() => {
-    function onDocMouseUp(e: MouseEvent) {
-      const t = e.target as HTMLElement | null;
-      if (t && t.closest('.selection-actions')) return;
-      checkSelection();
-    }
-    document.addEventListener('mouseup', onDocMouseUp);
-    return () => document.removeEventListener('mouseup', onDocMouseUp);
-  }, [checkSelection]);
-
-  const handleQuoteClick = useCallback(() => {
-    const formatted = `\n\`\`\`QUOTE\n${selectedText}\n\`\`\`\n\n`;
-    setFollowup((prev) => prev + formatted);
-    setShowQuoteBtn(false);
-    setSelectedText('');
-    window.getSelection()?.removeAllRanges();
-    setTimeout(() => {
-      if (followupRef.current) {
-        followupRef.current.style.height = 'auto';
-        followupRef.current.style.height = Math.min(followupRef.current.scrollHeight, FOLLOWUP_MAX) + 'px';
-        followupRef.current.focus();
-        const len = followupRef.current.value.length;
-        followupRef.current.setSelectionRange(len, len);
-      }
-    }, 0);
-  }, [selectedText]);
-
-  return (
-    <div className={`thread-card ${thread.status === 'resolved' ? 'thread-resolved' : ''}`} id={`thread-${thread.id}`}>
-      {/* Header: quoted text + status */}
-      <div className="thread-card-header" onClick={() => setExpanded((e) => !e)}>
-        <div className="thread-card-quote">
-          &ldquo;{thread.selected_text.slice(0, 100)}{thread.selected_text.length > 100 ? '…' : ''}&rdquo;
-        </div>
-        <div className="thread-card-header-right">
-          <button
-            className="thread-locate-btn"
-            onClick={(e) => { e.stopPropagation(); onLocate(); }}
-            title="Scroll to text"
-          >
-            <Navigation size={12} />
-          </button>
-          <span className={`thread-status-badge ${thread.status === 'open' ? 'thread-status-open' : 'thread-status-resolved'}`}>
-            {thread.status === 'open' ? 'Open' : 'Resolved'}
-          </span>
-        </div>
-      </div>
-
-      {/* Conversation history */}
-      {expanded && (
-        <>
-          <div
-            className="thread-card-conversation"
-            ref={conversationRef}
-            onMouseDown={handleConversationMouseDown}
-          >
-            {threadTurns.map((turn) => (
-              <ThreadTurnView key={turn.id} turn={turn} />
-            ))}
-            {threadTurns.length === 0 && (
-              <div className="thread-card-placeholder">No messages yet.</div>
-            )}
-          </div>
-
-          {/* Floating Quote button — shown when text is selected in an AI response */}
-          {showQuoteBtn && (
-            <div className="selection-actions" style={{ left: quoteBtnPos.x, top: quoteBtnPos.y }}>
-              <button
-                className="discuss-button"
-                onClick={handleQuoteClick}
-                title="Quote this text in your follow-up"
-              >
-                <Quote size={14} />
-                <span>Quote</span>
-              </button>
-            </div>
-          )}
-
-          {/* Follow-up input (only for open threads) */}
-          {thread.status === 'open' && (
-            <div className="thread-card-followup">
-              <textarea
-                ref={followupRef}
-                className="thread-card-followup-input"
-                placeholder={isRunning ? 'Agent is running…' : 'Type a follow-up…'}
-                value={followup}
-                onChange={(e) => {
-                  setFollowup(e.target.value);
-                  autoResizeFollowup();
-                }}
-                disabled={isRunning}
-                rows={1}
-                style={{ minHeight: FOLLOWUP_MIN, maxHeight: FOLLOWUP_MAX }}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !isRunning && followup.trim()) {
-                    e.preventDefault();
-                    onFollowup(followup.trim());
-                    setFollowup('');
-                    if (followupRef.current) followupRef.current.style.height = FOLLOWUP_MIN + 'px';
-                  }
-                }}
-              />
-              <button
-                className="thread-card-followup-send"
-                disabled={isRunning || !followup.trim()}
-                onClick={() => {
-                  onFollowup(followup.trim());
-                  setFollowup('');
-                }}
-              >
-                <Send size={13} />
-              </button>
-            </div>
-          )}
-
-          {/* Actions */}
-          <div className="thread-card-actions">
-            {thread.status === 'open' ? (
-              <button className="thread-action-btn" onClick={onResolve} title="Resolve thread">
-                <CheckCircle2 size={13} /> Resolve
-              </button>
-            ) : (
-              <button className="thread-action-btn" onClick={onReopen} title="Reopen thread">
-                <RotateCcw size={13} /> Reopen
-              </button>
-            )}
-            <button className="thread-action-btn thread-action-danger" onClick={onDelete} title="Delete thread">
-              <Trash2 size={13} /> Delete
-            </button>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-export default function ThreadsPanel() {
-  const { activeSessionId, sessionDetails, followupThread, resolveThread, reopenThread, deleteThread, activeRightTab, switchRightTab } = useStore();
-  const [filter, setFilter] = useState<ThreadFilter>('open');
-
-  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
-  const threads = detail?.threads ?? [];
-  const allTurns = detail?.turns ?? [];
-  const isRunning = detail?.is_running === 1;
-
-  const filtered = threads.filter((t) => {
-    if (filter === 'open') return t.status === 'open';
-    if (filter === 'resolved') return t.status === 'resolved';
-    return true;
-  });
-
-  const openCount = threads.filter((t) => t.status === 'open').length;
-  const resolvedCount = threads.filter((t) => t.status === 'resolved').length;
-
-  /** Scroll the render area to the <mark> anchored by this thread. */
-  function handleLocate(threadId: string) {
-    // If on changes tab, marks are not in DOM — switch to turns first
-    if (activeRightTab === 'changes') {
-      switchRightTab('turns');
-    }
-    setTimeout(() => {
-      const mark = document.querySelector(`mark[data-thread-id="${threadId}"]`);
-      if (mark) {
-        mark.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        mark.classList.add('thread-mark-flash');
-        setTimeout(() => mark.classList.remove('thread-mark-flash'), 1500);
-      }
-    }, activeRightTab === 'changes' ? 150 : 50);
-  }
-
-  if (!activeSessionId) {
-    return <div className="empty-state">No session selected</div>;
-  }
-
-  if (threads.length === 0) {
-    return (
-      <div className="empty-state">
-        <MessageSquare size={24} style={{ opacity: 0.3, marginBottom: 8 }} />
-        <div>No threads yet.</div>
-        <div style={{ fontSize: '11px', marginTop: '4px' }}>Select text in an agent response to start a discussion.</div>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {/* Filter tabs */}
-      <div className="thread-filter-tabs">
-        <button className={`thread-filter-tab ${filter === 'open' ? 'active' : ''}`} onClick={() => setFilter('open')}>
-          Open ({openCount})
-        </button>
-        <button className={`thread-filter-tab ${filter === 'resolved' ? 'active' : ''}`} onClick={() => setFilter('resolved')}>
-          Resolved ({resolvedCount})
-        </button>
-        <button className={`thread-filter-tab ${filter === 'all' ? 'active' : ''}`} onClick={() => setFilter('all')}>
-          All ({threads.length})
-        </button>
-      </div>
-
-      {/* Thread list */}
-      {filtered.length === 0 ? (
-        <div className="empty-state" style={{ padding: '20px 0' }}>
-          No {filter} threads.
-        </div>
-      ) : (
-        filtered.map((thread) => (
-          <ThreadCard
-            key={thread.id}
-            thread={thread}
-            isRunning={isRunning}
-            threadTurns={allTurns.filter((t) => t.thread_id === thread.id)}
-            onResolve={() => resolveThread(activeSessionId, thread.id)}
-            onReopen={() => reopenThread(activeSessionId, thread.id)}
-            onDelete={() => deleteThread(activeSessionId, thread.id)}
-            onFollowup={(msg) => followupThread(activeSessionId, thread.id, msg)}
-            onLocate={() => handleLocate(thread.id)}
-          />
-        ))
-      )}
-    </div>
-  );
-}