@seqyuan/annodex 0.1.11 → 0.1.12

package/components/SubagentPanel.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useMemo } from "react";
+import type { AgentMessage, CustomMessage, SubagentRun } from "@/lib/types";
+import { coerceSubagentRuns, mergeSubagentRuns, normalizeSubagentStatus } from "@/lib/subagent-progress";
+
+interface Props {
+  messages?: AgentMessage[];
+  runs?: SubagentRun[];
+}
+
+/**
+ * Extracts subagent run info from messages:
+ * - toolCall "subagent" → running
+ * - toolResult for subagent → completed/failed
+ * - custom_message "subagent-notify" → completed/failed for background
+ */
+export function extractSubagentRuns(messages: AgentMessage[]): SubagentRun[] {
+  const runs = new Map<string, SubagentRun>();
+
+  for (const msg of messages) {
+    if (msg.role === "custom" && (msg as CustomMessage).customType === "subagent-progress") {
+      const details = (msg as CustomMessage).details as { runs?: unknown } | undefined;
+      for (const run of coerceSubagentRuns(details?.runs)) {
+        runs.set(run.id, run);
+      }
+    }
+
+    // Background async completion notifications
+    if (msg.role === "custom") {
+      const cm = msg as CustomMessage;
+      if (cm.customType === "subagent-notify" && typeof cm.content === "string") {
+        const bgMatch = cm.content.match(/^Background task (completed|failed|paused):\s*\*\*(.+?)\*\*(?:\s+\((.+?)\))?/);
+        if (bgMatch) {
+          const id = `bg-${bgMatch[2]}-${cm.timestamp ?? ""}`;
+          runs.set(id, {
+            id,
+            agent: bgMatch[2],
+            status: bgMatch[1] as SubagentRun["status"],
+            task: bgMatch[3],
+            summary: cm.content.split("\n").slice(3).join("\n").trim() || undefined,
+            timestamp: cm.timestamp,
+          });
+        }
+      }
+    }
+
+    // Subagent tool calls in assistant messages
+    if (msg.role === "assistant") {
+      const content = (msg as { content?: Array<{ type: string; toolName?: string; toolCallId?: string; input?: Record<string, unknown> }> }).content;
+      if (!content) continue;
+      for (const block of content) {
+        if (block.type === "toolCall" && block.toolName === "subagent" && block.input) {
+          const input = block.input as {
+            agent?: string;
+            task?: string;
+            chain?: unknown[];
+            tasks?: unknown[];
+            action?: string;
+          };
+          const agent = input.agent ?? (input.chain ? "chain" : input.tasks ? "parallel" : input.action ?? "subagent");
+          const task = typeof input.task === "string" ? input.task : undefined;
+          const id = block.toolCallId ?? `sub-${agent}-${msg.timestamp ?? Date.now()}`;
+          runs.set(id, { id, agent, status: "running", task, timestamp: (msg as { timestamp?: number }).timestamp });
+        }
+      }
+    }
+
+    // Tool results mark subagent runs as completed/failed
+    if (msg.role === "toolResult") {
+      const tr = msg as { toolCallId?: string; toolName?: string; isError?: boolean; content?: Array<{ type: string; text?: string }> };
+      if (tr.toolCallId && runs.has(tr.toolCallId)) {
+        const run = runs.get(tr.toolCallId)!;
+        run.status = tr.isError ? "failed" : "completed";
+        const textContent = tr.content?.filter((b) => b.type === "text").map((b) => b.text ?? "").join("\n") ?? "";
+        run.summary = textContent.slice(0, 200) || undefined;
+      }
+    }
+  }
+
+  return Array.from(runs.values()).sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
+}
+
+export function SubagentPanel({ messages, runs: providedRuns }: Props) {
+  const computedRuns = useMemo(() => extractSubagentRuns(messages ?? []), [messages]);
+  const runs = useMemo(() => mergeSubagentRuns(computedRuns, providedRuns), [computedRuns, providedRuns]);
+  const active = runs.filter((r) => r.status === "running" || r.status === "pending");
+  const done = runs.filter((r) => r.status !== "running" && r.status !== "pending");
+
+  if (runs.length === 0) return null;
+
+  return (
+    <div style={{ height: "100%", overflow: "auto", padding: 12 }}>
+      {/* Active runs */}
+      {active.length > 0 && (
+        <div style={{ marginBottom: 16 }}>
+          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--text-dim)", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.05em" }}>
+            Active ({active.length})
+          </div>
+          {active.map((run) => (
+            <div
+              key={run.id}
+              style={{
+                padding: "8px 12px",
+                borderRadius: 6,
+                border: "1px solid rgba(99,102,241,0.2)",
+                background: "rgba(99,102,241,0.04)",
+                marginBottom: 6,
+                fontSize: 12,
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                <span style={{
+                  width: 8, height: 8, borderRadius: "50%",
+                  background: "#818cf8",
+                  display: "inline-block",
+                  animation: "pulse 1.5s infinite",
+                  flexShrink: 0,
+                }} />
+                <span style={{ fontWeight: 600, color: "var(--text)" }}>{run.agent}</span>
+                {run.role && <span style={{ color: "var(--text-dim)", fontSize: 10 }}>{run.role}</span>}
+                <span style={{ color: "var(--accent)", fontSize: 10, fontWeight: 600 }}>running</span>
+              </div>
+              {run.task && (
+                <div style={{ marginTop: 4, color: "var(--text-muted)", fontSize: 11, lineHeight: 1.4 }}>
+                  {run.task.length > 120 ? run.task.slice(0, 120) + "…" : run.task}
+                </div>
+              )}
+              {run.threadId && (
+                <div style={{ marginTop: 4, color: "var(--text-dim)", fontSize: 10, fontFamily: "var(--font-mono)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                  {run.threadId}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Completed runs */}
+      {done.length > 0 && (
+        <div>
+          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--text-dim)", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.05em" }}>
+            Completed ({done.length})
+          </div>
+          {done.map((run) => (
+            <div
+              key={run.id}
+              style={{
+                padding: "6px 12px",
+                borderRadius: 6,
+                border: "1px solid var(--border)",
+                background: "var(--bg-panel)",
+                marginBottom: 4,
+                fontSize: 12,
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                <span style={{ fontSize: 12, flexShrink: 0 }}>
+                  {run.status === "completed" ? "✓" : run.status === "failed" || run.status === "not_found" ? "!" : run.status === "paused" ? "||" : "..."}
+                </span>
+                <span style={{ fontWeight: 600, color: "var(--text)" }}>{run.agent}</span>
+                {run.role && <span style={{ color: "var(--text-dim)", fontSize: 10 }}>{run.role}</span>}
+                <span style={{
+                  color: run.status === "completed" ? "#22c55e" : run.status === "failed" || run.status === "not_found" ? "#ef4444" : "var(--text-dim)",
+                  fontSize: 10, fontWeight: 600,
+                }}>
+                  {normalizeSubagentStatus(run.status)}
+                </span>
+              </div>
+              {run.task && (
+                <div style={{ marginTop: 3, color: "var(--text-muted)", fontSize: 11, lineHeight: 1.4, maxHeight: 44, overflow: "hidden" }}>
+                  {run.task}
+                </div>
+              )}
+              {run.summary && (
+                <div style={{ marginTop: 3, color: "var(--text-muted)", fontSize: 11, lineHeight: 1.4, maxHeight: 60, overflow: "hidden" }}>
+                  {run.summary}
+                </div>
+              )}
+              {run.threadId && (
+                <div style={{ marginTop: 3, color: "var(--text-dim)", fontSize: 10, fontFamily: "var(--font-mono)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                  {run.threadId}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/TabBar.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+import { getFileIcon } from "./FileIcons";
+
+export interface Tab {
+  id: string;
+  label: string;
+  filePath?: string;
+  closable?: boolean;
+  icon?: "report";
+}
+
+interface Props {
+  tabs: Tab[];
+  activeTabId: string;
+  onSelectTab: (id: string) => void;
+  onCloseTab: (id: string) => void;
+}
+
+export function TabBar({ tabs, activeTabId, onSelectTab, onCloseTab }: Props) {
+  const [hoveredClose, setHoveredClose] = useState<string | null>(null);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "flex-end",
+        background: "var(--bg-panel)",
+        overflowX: "auto",
+        flexShrink: 0,
+        height: 36,
+      }}
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+        const closable = tab.closable !== false;
+        return (
+          <div
+            key={tab.id}
+            onClick={() => onSelectTab(tab.id)}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              height: 36,
+              paddingLeft: 12,
+              paddingRight: 6,
+              borderRight: "1px solid var(--border)",
+              background: isActive ? "var(--bg)" : "var(--bg-panel)",
+              cursor: "pointer",
+              fontSize: 12,
+              color: isActive ? "var(--text)" : "var(--text-muted)",
+              whiteSpace: "nowrap",
+              maxWidth: 180,
+              minWidth: 80,
+              flexShrink: 0,
+              userSelect: "none",
+              transition: "background 0.1s, color 0.1s",
+            }}
+          >
+            <span style={{ flexShrink: 0, opacity: isActive ? 1 : 0.7, display: "flex", alignItems: "center" }}>
+              {tab.icon === "report" ? (
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                  <polyline points="14 2 14 8 20 8" />
+                  <line x1="8" y1="13" x2="16" y2="13" />
+                  <line x1="8" y1="17" x2="13" y2="17" />
+                </svg>
+              ) : (
+                getFileIcon(tab.filePath ?? tab.label, 13)
+              )}
+            </span>
+            <span
+              style={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                flex: 1,
+                fontWeight: isActive ? 500 : 400,
+              }}
+              title={tab.filePath ?? tab.label}
+            >
+              {tab.label}
+            </span>
+            {closable && (
+              <button
+                onClick={(e) => { e.stopPropagation(); onCloseTab(tab.id); }}
+                onMouseEnter={() => setHoveredClose(tab.id)}
+                onMouseLeave={() => setHoveredClose(null)}
+                style={{
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  width: 16, height: 16,
+                  background: hoveredClose === tab.id ? "var(--bg-hover)" : "transparent",
+                  border: "none",
+                  borderRadius: 3,
+                  color: hoveredClose === tab.id ? "var(--text)" : "var(--text-dim)",
+                  cursor: "pointer",
+                  padding: 0,
+                  flexShrink: 0,
+                  transition: "background 0.1s, color 0.1s",
+                }}
+                title="Close"
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
+                  <line x1="2" y1="2" x2="8" y2="8" />
+                  <line x1="8" y1="2" x2="2" y2="8" />
+                </svg>
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/components/ToolPanel.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export interface ToolEntry {
+  name: string;
+  description: string;
+  active: boolean;
+}
+
+export type ToolPreset = "none" | "default" | "full";
+export const PRESET_NONE: string[] = [];
+export const PRESET_DEFAULT: string[] = ["read", "bash", "edit", "write"];
+export const PRESET_FULL: string[] = ["bash", "read", "edit", "write", "grep", "find", "ls"];
+
+export function getPresetFromTools(tools: ToolEntry[]): ToolPreset {
+  const active = tools.filter(t => t.active).map(t => t.name).sort().join(",");
+  if (active === "") return "none";
+  if (active === [...PRESET_DEFAULT].sort().join(",")) return "default";
+  if (active === [...PRESET_FULL].sort().join(",")) return "full";
+  return "default"; // closest match
+}
+
+interface Props {
+  tools: ToolEntry[];
+  onPreset: (preset: ToolPreset, toolNames: string[]) => void;
+  onClose: () => void;
+}
+
+const PRESETS: { id: ToolPreset; label: string; desc: string; tools: string[] }[] = [
+  { id: "none",    label: "Off",  desc: "No tools",                                tools: PRESET_NONE },
+  { id: "default", label: "Low",  desc: "read · bash · edit · write",              tools: PRESET_DEFAULT },
+  { id: "full",    label: "High", desc: "read · bash · edit · write · grep · find · ls", tools: PRESET_FULL },
+
+];
+
+export function ToolPanel({ tools, onPreset, onClose }: Props) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const current = getPresetFromTools(tools);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+
+  const currentIndex = PRESETS.findIndex(p => p.id === current);
+
+  return (
+    <div
+      ref={panelRef}
+      style={{
+        position: "absolute",
+        bottom: "calc(100% + 8px)",
+        right: 0,
+        zIndex: 200,
+        background: "var(--bg)",
+        border: "1px solid var(--border)",
+        borderRadius: 10,
+        boxShadow: "0 -4px 20px rgba(0,0,0,0.10)",
+        width: 260,
+        padding: "12px 14px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+      }}
+    >
+      {/* Segmented control */}
+      <div style={{
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr 1fr",
+        background: "var(--bg-panel)",
+        borderRadius: 8,
+        padding: 3,
+        gap: 3,
+      }}>
+        {PRESETS.map((preset) => {
+          const isActive = current === preset.id;
+          return (
+            <button
+              key={preset.id}
+              onClick={() => { onPreset(preset.id, preset.tools); onClose(); }}
+              style={{
+                padding: "5px 0",
+                borderRadius: 6,
+                border: "none",
+                background: isActive ? "var(--bg)" : "transparent",
+                boxShadow: isActive ? "0 1px 3px rgba(0,0,0,0.12)" : "none",
+                color: isActive ? "var(--accent)" : "var(--text-muted)",
+                fontWeight: isActive ? 600 : 400,
+                fontSize: 12,
+                cursor: "pointer",
+                transition: "all 0.12s",
+              }}
+            >
+              {preset.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Description of current selection */}
+      <div style={{ fontSize: 11, color: "var(--text-dim)", lineHeight: 1.5 }}>
+        {currentIndex >= 0 ? PRESETS[currentIndex].desc || "No tools enabled" : ""}
+        {current === "none" && <span> — agent will not use any tools</span>}
+      </div>
+
+      {/* Track bar */}
+      <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+        {PRESETS.map((_, i) => (
+          <div
+            key={i}
+            style={{
+              flex: 1, height: 3, borderRadius: 2,
+              background: i <= currentIndex ? "var(--accent)" : "var(--border)",
+              transition: "background 0.15s",
+            }}
+          />
+        ))}
+      </div>
+
+      <div style={{ fontSize: 10, color: "var(--text-dim)" }}>
+        takes effect on next turn
+      </div>
+    </div>
+  );
+}