llm-deep-trace 0.1.0

package/src/components/SessionTree.tsx

@@ -0,0 +1,505 @@
+"use client";
+
+import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import {
+  ReactFlow,
+  Node,
+  Edge,
+  useReactFlow,
+  ReactFlowProvider,
+  NodeProps,
+  Handle,
+  Position,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { NormalizedMessage, ContentBlock } from "@/lib/types";
+import { extractText, cleanPreview } from "@/lib/client-utils";
+
+// ── Types ──
+
+interface TurnInfo {
+  turnIndex: number;
+  messageIndex: number;
+  preview: string;
+  subagents: SubagentInfo[];
+}
+
+interface SubagentInfo {
+  label: string;
+  fullLabel: string;
+  agentKey: string;
+}
+
+interface RootNodeData {
+  label: string;
+  fullLabel: string;
+  [key: string]: unknown;
+}
+
+interface TurnNodeData {
+  turnIndex: number;
+  messageIndex: number;
+  preview: string;
+  hasSubagents: boolean;
+  [key: string]: unknown;
+}
+
+interface SubagentNodeData {
+  label: string;
+  fullLabel: string;
+  agentKey: string;
+  [key: string]: unknown;
+}
+
+interface SessionTreeProps {
+  messages: NormalizedMessage[];
+  sessionId: string;
+  sessionLabel: string;
+  allSessions: import("@/lib/types").SessionInfo[];
+  onScrollToMessage: (messageIndex: number) => void;
+  onNavigateSession: (sessionKey: string) => void;
+  onClose: () => void;
+}
+
+// ── Extract turn structure from messages ──
+
+function buildTurns(messages: NormalizedMessage[]): TurnInfo[] {
+  const turns: TurnInfo[] = [];
+  let turnIndex = 0;
+
+  // Build a map of toolCallId → result text for extracting agentId from results
+  const toolResultMap = new Map<string, string>();
+  for (const msg of messages) {
+    if (msg.message?.role === "toolResult" && msg.message.toolCallId) {
+      const text = extractText(msg.message.content);
+      toolResultMap.set(msg.message.toolCallId, text);
+    }
+  }
+
+  for (let i = 0; i < messages.length; i++) {
+    const msg = messages[i];
+    if (msg.message?.role !== "user") continue;
+    if (msg.type === "tool_result" || msg.message.toolCallId) continue;
+
+    turnIndex++;
+    const userText = extractText(msg.message.content);
+    const preview = cleanPreview(userText).slice(0, 45) || `Turn ${turnIndex}`;
+
+    const subagents: SubagentInfo[] = [];
+
+    // Scan forward for assistant responses until next user turn
+    for (let j = i + 1; j < messages.length; j++) {
+      const next = messages[j];
+      if (
+        next.message?.role === "user" &&
+        !next.message.toolCallId &&
+        next.type !== "tool_result"
+      )
+        break;
+
+      if (
+        next.message?.role === "assistant" &&
+        Array.isArray(next.message.content)
+      ) {
+        for (const block of next.message.content as ContentBlock[]) {
+          if (
+            block.type === "tool_use" &&
+            (block.name === "sessions_spawn" ||
+              block.name === "Task" ||
+              block.name === "task")
+          ) {
+            const input = block.input || {};
+            const desc =
+              (input.description as string) ||
+              (input.name as string) ||
+              (input.prompt as string) ||
+              "subagent";
+            const fullDesc = desc.trim();
+            const label = fullDesc.slice(0, 30);
+
+            // Try to extract agentId from the tool result
+            let agentKey = "";
+            const resultText = block.id ? toolResultMap.get(block.id) || "" : "";
+            // Claude Code results contain "agentId: XXXXX"
+            const agentIdMatch = resultText.match(/agentId:\s*([a-zA-Z0-9_-]+)/);
+            if (agentIdMatch) {
+              agentKey = agentIdMatch[1];
+            }
+            // For sessions_spawn, try parsing result as JSON
+            if (!agentKey && resultText) {
+              try {
+                const parsed = JSON.parse(resultText);
+                agentKey = parsed.childSessionId || parsed.childSessionKey || parsed.agentId || "";
+              } catch { /* not JSON */ }
+            }
+            // Fallback to input fields
+            if (!agentKey) {
+              agentKey =
+                (input.agentId as string) ||
+                (input.name as string) ||
+                (input.sessionId as string) ||
+                block.id ||
+                "";
+            }
+            subagents.push({ label, fullLabel: fullDesc, agentKey });
+          }
+        }
+      }
+    }
+
+    turns.push({ turnIndex, messageIndex: i, preview, subagents });
+  }
+
+  return turns;
+}
+
+// ── Filter turns for display: if >50, show every 5th + turns with subagent spawns ──
+
+function filterTurns(turns: TurnInfo[]): TurnInfo[] {
+  if (turns.length <= 50) return turns;
+  return turns.filter(
+    (t) => t.turnIndex % 5 === 0 || t.subagents.length > 0
+  );
+}
+
+// ── Custom Nodes ──
+
+function RootNodeComponent({ data }: NodeProps<Node<RootNodeData>>) {
+  return (
+    <>
+      <div className="tree-node-card tree-node-root" title={data.fullLabel || data.label}>
+        <div className="tree-node-top">
+          <span className="tree-node-title">{data.label}</span>
+        </div>
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="tree-handle"
+      />
+    </>
+  );
+}
+
+function TurnNodeComponent({ data }: NodeProps<Node<TurnNodeData>>) {
+  return (
+    <>
+      <Handle type="target" position={Position.Top} className="tree-handle" />
+      <div className="tree-node-card tree-node-turn" title={data.preview}>
+        <div className="tree-node-top">
+          <span className="tree-turn-label">Turn {data.turnIndex}</span>
+        </div>
+        <div className="tree-node-preview">{data.preview}</div>
+      </div>
+      {data.hasSubagents && (
+        <Handle
+          type="source"
+          position={Position.Right}
+          id="right"
+          className="tree-handle"
+        />
+      )}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="bottom"
+        className="tree-handle"
+      />
+    </>
+  );
+}
+
+function SubagentNodeComponent({ data }: NodeProps<Node<SubagentNodeData>>) {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} className="tree-handle" />
+      <div className="tree-node-card tree-node-subagent" title={data.fullLabel || data.label}>
+        <div className="tree-node-top">
+          <span className="tree-node-title">{data.label}</span>
+          <span className="tree-node-badge">subagent</span>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const nodeTypes = {
+  rootNode: RootNodeComponent,
+  turnNode: TurnNodeComponent,
+  subagentNode: SubagentNodeComponent,
+};
+
+// ── Layout ──
+
+function layoutTurns(
+  turns: TurnInfo[],
+  label: string
+): { nodes: Node[]; edges: Edge[] } {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  const TURN_X = 0;
+  const SUBAGENT_X = 280;
+  const ROW_HEIGHT = 100;
+  const SUB_ROW_HEIGHT = 56;
+  const ROOT_Y = 0;
+
+  // Root session node
+  nodes.push({
+    id: "root",
+    type: "rootNode",
+    position: { x: TURN_X, y: ROOT_Y },
+    data: { label: label.slice(0, 30), fullLabel: label },
+  });
+
+  let y = 70;
+
+  for (let i = 0; i < turns.length; i++) {
+    const turn = turns[i];
+    const turnId = `turn-${turn.turnIndex}`;
+
+    nodes.push({
+      id: turnId,
+      type: "turnNode",
+      position: { x: TURN_X, y },
+      data: {
+        turnIndex: turn.turnIndex,
+        messageIndex: turn.messageIndex,
+        preview: turn.preview,
+        hasSubagents: turn.subagents.length > 0,
+      },
+    });
+
+    // Edge from previous
+    const prevId = i === 0 ? "root" : `turn-${turns[i - 1].turnIndex}`;
+    edges.push({
+      id: `${prevId}->${turnId}`,
+      source: prevId,
+      target: turnId,
+      sourceHandle: prevId === "root" ? undefined : "bottom",
+      type: "straight",
+      style: { stroke: "var(--border)", strokeWidth: 1 },
+    });
+
+    // Subagent branches to the right
+    for (let j = 0; j < turn.subagents.length; j++) {
+      const sub = turn.subagents[j];
+      const subId = `${turnId}-sub-${j}`;
+      const subY = y + j * SUB_ROW_HEIGHT;
+
+      nodes.push({
+        id: subId,
+        type: "subagentNode",
+        position: { x: SUBAGENT_X, y: subY },
+        data: { label: sub.label, fullLabel: sub.fullLabel || sub.label, agentKey: sub.agentKey },
+      });
+
+      edges.push({
+        id: `${turnId}->${subId}`,
+        source: turnId,
+        target: subId,
+        sourceHandle: "right",
+        type: "straight",
+        style: { stroke: "var(--border)", strokeWidth: 1 },
+      });
+    }
+
+    // Advance Y, accounting for subagent stack height
+    const subHeight =
+      turn.subagents.length > 1
+        ? (turn.subagents.length - 1) * SUB_ROW_HEIGHT
+        : 0;
+    y += Math.max(ROW_HEIGHT, subHeight + ROW_HEIGHT);
+  }
+
+  return { nodes, edges };
+}
+
+// ── Inner Flow (needs ReactFlowProvider) ──
+
+function InnerFlow({
+  messages,
+  sessionId: currentSessionId,
+  sessionLabel: label,
+  allSessions,
+  onScrollToMessage,
+  onNavigateSession,
+  onResetView,
+}: {
+  messages: NormalizedMessage[];
+  sessionId: string;
+  sessionLabel: string;
+  allSessions: import("@/lib/types").SessionInfo[];
+  onScrollToMessage: (messageIndex: number) => void;
+  onNavigateSession: (sessionKey: string) => void;
+  onResetView?: (fn: () => void) => void;
+}) {
+  const { fitView } = useReactFlow();
+
+  // Real child sessions from the session index (works for both Task and TaskCreate/Agent Teams)
+  const childSessions = useMemo(
+    () => allSessions.filter(
+      (s) => s.parentSessionId === currentSessionId || s.parentSessionId === currentSessionId
+    ),
+    [allSessions, currentSessionId]
+  );
+
+  // Build turns from messages, then enrich subagent nodes with real session IDs
+  const turns = useMemo(() => {
+    const raw = filterTurns(buildTurns(messages));
+
+    // For each turn's subagents, try to resolve agentKey → real sessionId
+    for (const turn of raw) {
+      for (const sub of turn.subagents) {
+        if (!sub.agentKey) continue;
+        // Try to find a matching child session
+        const match = childSessions.find(
+          (s) =>
+            s.sessionId === sub.agentKey ||
+            s.sessionId.includes(sub.agentKey) ||
+            ("agent-" + sub.agentKey) === s.sessionId ||
+            s.sessionId.endsWith(sub.agentKey)
+        );
+        if (match) sub.agentKey = match.sessionId;
+      }
+    }
+
+    // Add any child sessions not already covered by turns (Agent Teams: TaskCreate-based)
+    const coveredIds = new Set(raw.flatMap((t) => t.subagents.map((s) => s.agentKey)));
+    const uncovered = childSessions.filter((s) => !coveredIds.has(s.sessionId));
+    if (uncovered.length > 0 && raw.length > 0) {
+      // Attach uncovered children to the last turn as a group
+      const lastTurn = raw[raw.length - 1];
+      for (const s of uncovered) {
+        const fullSub = s.label || s.sessionId;
+        lastTurn.subagents.push({
+          label: fullSub.slice(0, 30),
+          fullLabel: fullSub,
+          agentKey: s.sessionId,
+        });
+      }
+    }
+
+    return raw;
+  }, [messages, childSessions]);
+
+  const { nodes, edges } = useMemo(
+    () => layoutTurns(turns, label),
+    [turns, label]
+  );
+
+  // Fit once on mount only — never re-fit while user is browsing
+  const hasFitted = useRef(false);
+  useEffect(() => {
+    if (hasFitted.current || nodes.length === 0) return;
+    hasFitted.current = true;
+    const timer = setTimeout(() => {
+      // More padding for small graphs (few turns), less for large ones — prevents over-zooming
+      const padding = nodes.length <= 4 ? 0.35 : nodes.length <= 10 ? 0.2 : 0.12;
+      fitView({ padding, minZoom: 0.15, maxZoom: 0.75, duration: 300 });
+    }, 80);
+    return () => clearTimeout(timer);
+  }, [nodes.length > 0, fitView]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Expose reset-view callback to parent
+  useEffect(() => {
+    if (onResetView) {
+      onResetView(() => {
+        fitView({ padding: 0.12, duration: 300 });
+      });
+    }
+  }, [fitView, onResetView]);
+
+  const onNodeClick = useCallback(
+    (_: React.MouseEvent, node: Node) => {
+      if (node.type === "turnNode") {
+        const d = node.data as TurnNodeData;
+        onScrollToMessage(d.messageIndex);
+      } else if (node.type === "subagentNode") {
+        const d = node.data as SubagentNodeData;
+        if (d.agentKey) onNavigateSession(d.agentKey);
+      }
+    },
+    [onScrollToMessage, onNavigateSession]
+  );
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      nodeTypes={nodeTypes}
+      onNodeClick={onNodeClick}
+      minZoom={0.15}
+      maxZoom={1.5}
+      proOptions={{ hideAttribution: true }}
+      className="session-tree-flow"
+    />
+  );
+}
+
+// ── Main Export ──
+
+export default function SessionTree({
+  messages,
+  sessionId,
+  sessionLabel: label,
+  allSessions,
+  onScrollToMessage,
+  onNavigateSession,
+  onClose,
+}: SessionTreeProps) {
+  const resetViewRef = useRef<(() => void) | null>(null);
+
+  const handleResetView = useCallback((fn: () => void) => {
+    resetViewRef.current = fn;
+  }, []);
+
+  return (
+    <div className="tree-panel">
+      <div className="tree-panel-header">
+        <span className="tree-panel-title">Conversation Map</span>
+        <div className="tree-panel-actions">
+          <button
+            className="tree-panel-reset"
+            onClick={() => resetViewRef.current?.()}
+            title="Reset view"
+          >
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M2 8a6 6 0 0110.47-4M14 8a6 6 0 01-10.47 4"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+              <path d="M12 1v3h-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M4 15v-3h3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+          <button className="tree-panel-close" onClick={onClose} title="Close">
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M3 3l10 10M13 3L3 13"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div className="tree-panel-body">
+        <ReactFlowProvider key={sessionId}>
+          <InnerFlow
+            messages={messages}
+            sessionId={sessionId}
+            sessionLabel={label}
+            allSessions={allSessions}
+            onScrollToMessage={onScrollToMessage}
+            onNavigateSession={onNavigateSession}
+            onResetView={handleResetView}
+          />
+        </ReactFlowProvider>
+      </div>
+    </div>
+  );
+}

package/src/components/SettingsPanel.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useStore } from "@/lib/store";
+import { BlockColors, DEFAULT_BLOCK_COLORS } from "@/lib/types";
+
+const BLOCK_COLOR_ENTRIES: { key: keyof BlockColors; label: string }[] = [
+  { key: "exec", label: "Exec / Bash" },
+  { key: "file", label: "File ops" },
+  { key: "web", label: "Web search/fetch" },
+  { key: "browser", label: "Browser" },
+  { key: "msg", label: "Message" },
+  { key: "agent", label: "Agent / Task" },
+  { key: "thinking", label: "Thinking" },
+];
+
+const SystemIcon = () => (
+  <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
+    <rect x="1" y="2" width="14" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.4" />
+    <path d="M5 14h6M8 12v2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+  </svg>
+);
+
+const DarkIcon = () => (
+  <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
+    <path d="M13.5 10.5A6 6 0 115.5 2.5a5 5 0 008 8z" fill="currentColor" />
+  </svg>
+);
+
+const LightIcon = () => (
+  <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
+    <circle cx="8" cy="8" r="3.5" stroke="currentColor" strokeWidth="1.4" />
+    <path
+      d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2M3.7 3.7l1.4 1.4M10.9 10.9l1.4 1.4M3.7 12.3l1.4-1.4M10.9 5.1l1.4-1.4"
+      stroke="currentColor"
+      strokeWidth="1.3"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+const CloseIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+    <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+  </svg>
+);
+
+export default function SettingsPanel() {
+  const theme = useStore((s) => s.theme);
+  const setTheme = useStore((s) => s.setTheme);
+  const blockColors = useStore((s) => s.blockColors);
+  const setBlockColor = useStore((s) => s.setBlockColor);
+  const resetBlockColor = useStore((s) => s.resetBlockColor);
+  const settings = useStore((s) => s.settings);
+  const setSetting = useStore((s) => s.setSetting);
+  const setSettingsOpen = useStore((s) => s.setSettingsOpen);
+
+  const themeButtons = [
+    { key: "system", icon: <SystemIcon />, label: "System" },
+    { key: "dark", icon: <DarkIcon />, label: "Dark" },
+    { key: "light", icon: <LightIcon />, label: "Light" },
+  ];
+
+  return (
+    <div className="settings-panel">
+      <div className="settings-header">
+        <span className="settings-title">Settings</span>
+        <button className="settings-close" onClick={() => setSettingsOpen(false)} title="Close">
+          <CloseIcon />
+        </button>
+      </div>
+
+      <div className="settings-body scroller">
+        {/* Theme section */}
+        <div className="settings-section">
+          <div className="settings-section-title">Theme</div>
+          <div className="settings-theme-row">
+            {themeButtons.map(({ key, icon, label }) => (
+              <button
+                key={key}
+                onClick={() => setTheme(key)}
+                className={`settings-theme-btn ${theme === key ? "active" : ""}`}
+              >
+                {icon}
+                <span>{label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Block colors section */}
+        <div className="settings-section">
+          <div className="settings-section-title">Block colors</div>
+          <div className="settings-colors-list">
+            {BLOCK_COLOR_ENTRIES.map(({ key, label }) => (
+              <div key={key} className="settings-color-row">
+                <span className="settings-color-label">{label}</span>
+                <div
+                  className="settings-color-swatch"
+                  style={{ background: blockColors[key] }}
+                />
+                <input
+                  type="color"
+                  value={blockColors[key]}
+                  onChange={(e) => setBlockColor(key, e.target.value)}
+                  className="settings-color-input"
+                />
+                {blockColors[key] !== DEFAULT_BLOCK_COLORS[key] && (
+                  <button
+                    className="settings-color-reset"
+                    onClick={() => resetBlockColor(key)}
+                    title="Reset to default"
+                  >
+                    reset
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Display section */}
+        <div className="settings-section">
+          <div className="settings-section-title">Display</div>
+          <label className="settings-toggle-row">
+            <input
+              type="checkbox"
+              checked={settings.showTimestamps}
+              onChange={(e) => setSetting("showTimestamps", e.target.checked)}
+            />
+            <span className="settings-toggle-label">Show timestamps</span>
+          </label>
+          <label className="settings-toggle-row">
+            <input
+              type="checkbox"
+              checked={settings.autoExpandToolCalls}
+              onChange={(e) => setSetting("autoExpandToolCalls", e.target.checked)}
+            />
+            <span className="settings-toggle-label">Auto-expand tool calls</span>
+          </label>
+          <label className="settings-toggle-row">
+            <input
+              type="checkbox"
+              checked={settings.compactSidebar}
+              onChange={(e) => setSetting("compactSidebar", e.target.checked)}
+            />
+            <span className="settings-toggle-label">Compact sidebar</span>
+          </label>
+          <label className="settings-toggle-row">
+            <input
+              type="checkbox"
+              checked={settings.skipPreamble}
+              onChange={(e) => setSetting("skipPreamble", e.target.checked)}
+            />
+            <span className="settings-toggle-label">Skip preamble (hide system messages before first user message)</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}