opencode-top 3.0.0

package/src/ui/screens/SessionsScreen.tsx

@@ -0,0 +1,191 @@
+import React, { useState, useMemo, useCallback, memo } from "react";
+import { Box, Text, useInput } from "ink";
+import { colors } from "../theme";
+import { StatusBar } from "../components/StatusBar";
+import { AgentTree } from "../components/AgentTree";
+import { DetailsPanel } from "../components/DetailsPanel";
+import { MessagesPanel } from "../components/MessagesPanel";
+import type { Workflow, Session, AgentNode, FlatNode } from "../../core/types";
+
+interface SessionsScreenProps {
+  workflows: Workflow[];
+  isActive: boolean;
+  contentHeight: number;
+  terminalWidth: number;
+}
+
+type RightMode = "stats" | "messages";
+
+function flattenWorkflow(workflow: Workflow, workflowIndex: number): FlatNode[] {
+  const nodes: FlatNode[] = [];
+
+  function walk(node: AgentNode) {
+    nodes.push({
+      id: node.session.id,
+      session: node.session,
+      workflowIndex,
+      depth: node.depth,
+      hasChildren: node.children.length > 0,
+      agentNode: node,
+    });
+    for (const child of node.children) {
+      walk(child);
+    }
+  }
+
+  walk(workflow.agentTree);
+  return nodes;
+}
+
+function SessionsScreenInner({
+  workflows,
+  isActive,
+  contentHeight,
+  terminalWidth,
+}: SessionsScreenProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [rightMode, setRightMode] = useState<RightMode>("stats");
+  const [msgScrollOffset, setMsgScrollOffset] = useState(0);
+
+  // Flat list of all nodes (root workflows + sub-agents in tree order)
+  const flatNodes = useMemo(() => {
+    return workflows.flatMap((w, i) => flattenWorkflow(w, i));
+  }, [workflows]);
+
+  const clampedIndex = Math.min(selectedIndex, Math.max(0, flatNodes.length - 1));
+  const selectedNode = flatNodes[clampedIndex] ?? null;
+
+  // For DetailsPanel we need the full Workflow — use the root workflow of the selected node
+  const selectedWorkflow = useMemo(() => {
+    if (!selectedNode) return null;
+    const w = workflows[selectedNode.workflowIndex];
+    if (!w) return null;
+    // If we selected a sub-agent, wrap it as a single-session workflow for DetailsPanel
+    if (selectedNode.session.id !== w.mainSession.id) {
+      return {
+        id: selectedNode.session.id,
+        mainSession: selectedNode.session,
+        subAgentSessions: selectedNode.agentNode.children.map((c) => c.session),
+        agentTree: selectedNode.agentNode,
+      };
+    }
+    return w;
+  }, [selectedNode, workflows]);
+
+  const leftWidth = Math.floor(terminalWidth * 0.35);
+  const rightWidth = terminalWidth - leftWidth - 2; // 2 for borders
+
+  // Message scroll: reset when selection changes
+  const handleSelect = useCallback((index: number) => {
+    setSelectedIndex(index);
+    setMsgScrollOffset(0);
+  }, []);
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow || input === "k") {
+        handleSelect(Math.max(0, clampedIndex - 1));
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        handleSelect(Math.min(flatNodes.length - 1, clampedIndex + 1));
+        return;
+      }
+      if (key.tab) {
+        setRightMode((m) => (m === "stats" ? "messages" : "stats"));
+        setMsgScrollOffset(0);
+        return;
+      }
+      // Message scroll (only when in messages mode)
+      if (rightMode === "messages") {
+        if (input === "u" || key.pageUp) {
+          setMsgScrollOffset((o) => Math.max(0, o - 10));
+          return;
+        }
+        if (input === "d" || key.pageDown) {
+          setMsgScrollOffset((o) => o + 10);
+          return;
+        }
+      }
+    },
+    { isActive }
+  );
+
+  const panelHeight = contentHeight - 2; // leave room for status bar
+
+  return (
+    <Box flexDirection="column" width={terminalWidth} height={contentHeight}>
+      <Box flexDirection="row" flexGrow={1}>
+        {/* Left: agent/session tree */}
+        <Box
+          width={leftWidth}
+          borderStyle="single"
+          borderColor={colors.border}
+          flexDirection="column"
+          overflow="hidden"
+        >
+          <AgentTree
+            workflows={workflows}
+            selectedId={selectedNode?.id ?? null}
+            flatNodes={flatNodes}
+            onSelect={(id) => {
+              const idx = flatNodes.findIndex((n) => n.id === id);
+              if (idx >= 0) handleSelect(idx);
+            }}
+            maxHeight={panelHeight}
+          />
+        </Box>
+
+        {/* Right: details or messages */}
+        <Box
+          flexGrow={1}
+          width={rightWidth}
+          borderStyle="single"
+          borderColor={colors.border}
+          flexDirection="column"
+          overflow="hidden"
+        >
+          {/* Mode tab header */}
+          <Box paddingX={1} flexDirection="row">
+            <Text
+              color={rightMode === "stats" ? colors.accent : colors.textDim}
+              bold={rightMode === "stats"}
+            >
+              [Stats]
+            </Text>
+            <Text color={colors.textDim}> </Text>
+            <Text
+              color={rightMode === "messages" ? colors.accent : colors.textDim}
+              bold={rightMode === "messages"}
+            >
+              [Messages]
+            </Text>
+            <Box flexGrow={1} />
+            <Text color={colors.textDim}>Tab:switch</Text>
+          </Box>
+
+          {rightMode === "stats" ? (
+            <DetailsPanel workflow={selectedWorkflow} />
+          ) : (
+            <MessagesPanel
+              session={selectedNode?.session ?? null}
+              scrollOffset={msgScrollOffset}
+              onScrollOffsetChange={setMsgScrollOffset}
+              maxHeight={panelHeight - 2}
+            />
+          )}
+        </Box>
+      </Box>
+
+      <StatusBar
+        hints={
+          rightMode === "messages"
+            ? "j/k:nav  Tab:stats  u/d:scroll  2:tools  3:overview  r:refresh  q:quit"
+            : "j/k:nav  Tab:messages  2:tools  3:overview  r:refresh  q:quit"
+        }
+      />
+    </Box>
+  );
+}
+
+export const SessionsScreen = memo(SessionsScreenInner);

package/src/ui/screens/TimelineScreen.tsx

@@ -0,0 +1,222 @@
+import React, { useState, useMemo, useCallback, memo } from "react";
+import { Box, Text, useInput } from "ink";
+import { colors } from "../theme";
+import { StatusBar } from "../components/StatusBar";
+import type { Workflow, Interaction, MessagePart } from "../../core/types";
+
+interface TimelineScreenProps {
+  workflows: Workflow[];
+  isActive: boolean;
+  contentHeight: number;
+}
+
+type TimelineLine =
+  | { kind: "session-header"; sessionId: string; title: string; agent: string | null; time: number | null }
+  | { kind: "interaction-header"; interactionId: string; modelId: string; time: number | null; agent: string | null }
+  | { kind: "tool-call"; part: MessagePart & { type: "tool" }; interactionId: string }
+  | { kind: "text-snippet"; text: string; interactionId: string }
+  | { kind: "reasoning-snippet"; text: string; interactionId: string }
+  | { kind: "spacer" };
+
+function formatTime(ts: number | null): string {
+  if (!ts) return "??:??";
+  return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+function buildTimeline(workflows: Workflow[]): TimelineLine[] {
+  const lines: TimelineLine[] = [];
+
+  const allSessions = workflows.flatMap((w) => [
+    w.mainSession,
+    ...w.subAgentSessions,
+  ]);
+
+  // Sort by timeCreated
+  allSessions.sort((a, b) => (a.timeCreated ?? 0) - (b.timeCreated ?? 0));
+
+  for (const session of allSessions) {
+    const agentName = session.interactions[0]?.agent ?? null;
+    lines.push({
+      kind: "session-header",
+      sessionId: session.id,
+      title: session.title ?? session.id.slice(0, 12),
+      agent: agentName,
+      time: session.timeCreated,
+    });
+
+    for (const interaction of session.interactions) {
+      if (interaction.role !== "assistant") continue;
+
+      lines.push({
+        kind: "interaction-header",
+        interactionId: interaction.id,
+        modelId: interaction.modelId,
+        time: interaction.time.created,
+        agent: interaction.agent,
+      });
+
+      for (const part of interaction.parts) {
+        if (part.type === "tool") {
+          lines.push({
+            kind: "tool-call",
+            part: part as MessagePart & { type: "tool" },
+            interactionId: interaction.id,
+          });
+        } else if (part.type === "text" && part.text.trim().length > 0) {
+          lines.push({
+            kind: "text-snippet",
+            text: part.text.slice(0, 120).replace(/\n/g, " "),
+            interactionId: interaction.id,
+          });
+        } else if (part.type === "reasoning" && part.text.trim().length > 0) {
+          lines.push({
+            kind: "reasoning-snippet",
+            text: part.text.slice(0, 100).replace(/\n/g, " "),
+            interactionId: interaction.id,
+          });
+        }
+      }
+    }
+
+    lines.push({ kind: "spacer" });
+  }
+
+  return lines;
+}
+
+function renderLine(line: TimelineLine, idx: number): React.ReactElement {
+  switch (line.kind) {
+    case "session-header":
+      return (
+        <Box key={idx} flexDirection="row">
+          <Text color={colors.accent} bold>
+            ▶ {truncate(line.title, 40)}
+          </Text>
+          {line.agent && <Text color={colors.cyan}> [{line.agent}]</Text>}
+          <Box flexGrow={1} />
+          <Text color={colors.textDim}>{formatTime(line.time)}</Text>
+        </Box>
+      );
+
+    case "interaction-header":
+      return (
+        <Box key={idx} flexDirection="row">
+          <Text color={colors.textDim}>  </Text>
+          <Text color={colors.purple}>◆ </Text>
+          <Text color={colors.info}>{truncate(line.modelId, 30)}</Text>
+          {line.agent && <Text color={colors.cyan}> [{line.agent}]</Text>}
+          <Box flexGrow={1} />
+          <Text color={colors.textDim}>{formatTime(line.time)}</Text>
+        </Box>
+      );
+
+    case "tool-call": {
+      const p = line.part;
+      const statusIcon = p.status === "completed" ? "✓" : p.status === "error" ? "✗" : "◌";
+      const statusColor =
+        p.status === "completed" ? colors.success : p.status === "error" ? colors.error : colors.warning;
+      const durationMs = p.timeEnd > 0 && p.timeStart > 0 ? p.timeEnd - p.timeStart : 0;
+      const durationStr = durationMs > 0 ? ` ${(durationMs / 1000).toFixed(1)}s` : "";
+      return (
+        <Box key={idx} flexDirection="row">
+          <Text color={colors.textDim}>    </Text>
+          <Text color={statusColor}>{statusIcon} </Text>
+          <Text color={colors.text}>{truncate(p.toolName, 20)}</Text>
+          {p.title && <Text color={colors.textDim}> {truncate(p.title, 25)}</Text>}
+          <Box flexGrow={1} />
+          <Text color={colors.textDim}>{durationStr}</Text>
+        </Box>
+      );
+    }
+
+    case "text-snippet":
+      return (
+        <Box key={idx} flexDirection="row">
+          <Text color={colors.textDim}>    │ </Text>
+          <Text color={colors.text}>{truncate(line.text, 80)}</Text>
+        </Box>
+      );
+
+    case "reasoning-snippet":
+      return (
+        <Box key={idx} flexDirection="row">
+          <Text color={colors.textDim}>    ⚡ </Text>
+          <Text color={colors.accentDim}>{truncate(line.text, 80)}</Text>
+        </Box>
+      );
+
+    case "spacer":
+      return <Box key={idx} />;
+  }
+}
+
+function TimelineScreenInner({ workflows, isActive, contentHeight }: TimelineScreenProps) {
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  const allLines = useMemo(() => buildTimeline(workflows), [workflows]);
+
+  const visibleHeight = contentHeight - 4; // header row + status bar + borders
+
+  const clampOffset = useCallback(
+    (offset: number) => Math.max(0, Math.min(offset, Math.max(0, allLines.length - visibleHeight))),
+    [allLines.length, visibleHeight]
+  );
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow || input === "k") {
+        setScrollOffset((o) => clampOffset(o - 1));
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        setScrollOffset((o) => clampOffset(o + 1));
+        return;
+      }
+      if (input === "g") {
+        setScrollOffset(0);
+        return;
+      }
+      if (input === "G") {
+        setScrollOffset(clampOffset(allLines.length));
+        return;
+      }
+      if (key.pageUp) {
+        setScrollOffset((o) => clampOffset(o - visibleHeight));
+        return;
+      }
+      if (key.pageDown) {
+        setScrollOffset((o) => clampOffset(o + visibleHeight));
+        return;
+      }
+    },
+    { isActive }
+  );
+
+  const visibleLines = allLines.slice(scrollOffset, scrollOffset + visibleHeight);
+
+  return (
+    <Box flexDirection="column" height={contentHeight}>
+      <Box paddingX={1} flexDirection="row">
+        <Text color={colors.accent} bold>
+          Timeline
+        </Text>
+        <Box flexGrow={1} />
+        <Text color={colors.textDim}>
+          {scrollOffset + 1}-{Math.min(scrollOffset + visibleHeight, allLines.length)}/
+          {allLines.length}
+        </Text>
+      </Box>
+      <Box flexDirection="column" flexGrow={1} overflow="hidden">
+        {visibleLines.map((line, i) => renderLine(line, scrollOffset + i))}
+      </Box>
+      <StatusBar hints="j/k:scroll  g/G:top/bottom  PgUp/PgDn:page  1:sessions  3:tools  4:overview  q:quit" />
+    </Box>
+  );
+}
+
+export const TimelineScreen = memo(TimelineScreenInner);
+
+function truncate(s: string, max: number): string {
+  if (s.length <= max) return s;
+  return s.slice(0, max - 1) + "…";
+}

package/src/ui/screens/ToolsScreen.tsx

@@ -0,0 +1,260 @@
+import React, { useState, useMemo, memo } from "react";
+import { Box, Text, useInput } from "ink";
+import { colors } from "../theme";
+import { StatusBar } from "../components/StatusBar";
+import type { Workflow, ToolUsage } from "../../core/types";
+import { getToolUsage } from "../../core/session";
+
+interface ToolsScreenProps {
+  workflows: Workflow[];
+  isActive: boolean;
+  contentHeight: number;
+  terminalWidth: number;
+}
+
+type SortKey = "calls" | "failures" | "avgTime";
+
+function aggregateToolUsage(workflows: Workflow[]): ToolUsage[] {
+  const merged = new Map<
+    string,
+    { calls: number; successes: number; failures: number; totalDurationMs: number; recentErrors: string[] }
+  >();
+
+  for (const workflow of workflows) {
+    const allSessions = [workflow.mainSession, ...workflow.subAgentSessions];
+    for (const session of allSessions) {
+      for (const tool of getToolUsage(session)) {
+        const existing = merged.get(tool.name) ?? {
+          calls: 0,
+          successes: 0,
+          failures: 0,
+          totalDurationMs: 0,
+          recentErrors: [],
+        };
+        existing.calls += tool.calls;
+        existing.successes += tool.successes;
+        existing.failures += tool.failures;
+        existing.totalDurationMs += tool.totalDurationMs;
+        for (const err of tool.recentErrors) {
+          if (existing.recentErrors.length < 3) existing.recentErrors.push(err);
+        }
+        merged.set(tool.name, existing);
+      }
+    }
+  }
+
+  return Array.from(merged.entries()).map(([name, s]) => ({
+    name,
+    calls: s.calls,
+    successes: s.successes,
+    failures: s.failures,
+    totalDurationMs: s.totalDurationMs,
+    avgDurationMs: s.calls > 0 ? s.totalDurationMs / s.calls : 0,
+    recentErrors: s.recentErrors,
+  }));
+}
+
+function SuccessBar({ successes, calls, width = 12 }: { successes: number; calls: number; width?: number }) {
+  const pct = calls > 0 ? successes / calls : 0;
+  const filled = Math.round(pct * width);
+  const empty = width - filled;
+  const color = pct >= 0.9 ? colors.success : pct >= 0.7 ? colors.warning : colors.error;
+  return (
+    <Text>
+      <Text color={color}>{"█".repeat(filled)}</Text>
+      <Text color={colors.border}>{"░".repeat(empty)}</Text>
+      <Text color={colors.textDim}> {Math.round(pct * 100)}%</Text>
+    </Text>
+  );
+}
+
+function formatDuration(ms: number): string {
+  if (ms === 0) return "—";
+  if (ms < 1000) return `${ms.toFixed(0)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function ToolsScreenInner({ workflows, isActive, contentHeight, terminalWidth }: ToolsScreenProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [sortKey, setSortKey] = useState<SortKey>("calls");
+
+  const allTools = useMemo(() => aggregateToolUsage(workflows), [workflows]);
+
+  const sortedTools = useMemo(() => {
+    const copy = [...allTools];
+    switch (sortKey) {
+      case "calls":
+        return copy.sort((a, b) => b.calls - a.calls);
+      case "failures":
+        return copy.sort((a, b) => b.failures - a.failures);
+      case "avgTime":
+        return copy.sort((a, b) => b.avgDurationMs - a.avgDurationMs);
+    }
+  }, [allTools, sortKey]);
+
+  const listHeight = contentHeight - 4; // header + status bar + padding
+  const clampedIndex = Math.min(selectedIndex, Math.max(0, sortedTools.length - 1));
+  const selectedTool = sortedTools[clampedIndex] ?? null;
+
+  // Pagination
+  const startIndex = clampedIndex >= listHeight ? clampedIndex - listHeight + 1 : 0;
+  const visibleTools = sortedTools.slice(startIndex, startIndex + listHeight);
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow || input === "k") {
+        setSelectedIndex((i) => Math.max(0, i - 1));
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        setSelectedIndex((i) => Math.min(sortedTools.length - 1, i + 1));
+        return;
+      }
+      if (key.tab) {
+        setSortKey((k) => {
+          if (k === "calls") return "failures";
+          if (k === "failures") return "avgTime";
+          return "calls";
+        });
+        return;
+      }
+    },
+    { isActive }
+  );
+
+  const sortLabels: Record<SortKey, string> = {
+    calls: "Calls",
+    failures: "Failures",
+    avgTime: "Avg Time",
+  };
+
+  return (
+    <Box flexDirection="column" width={terminalWidth} height={contentHeight}>
+      <Box paddingX={1} flexDirection="row">
+        <Text color={colors.accent} bold>
+          Tools
+        </Text>
+        <Box flexGrow={1} />
+        <Text color={colors.textDim}>
+          sort:{" "}
+          {(["calls", "failures", "avgTime"] as SortKey[]).map((k) => (
+            <Text key={k} color={sortKey === k ? colors.accent : colors.textDim}>
+              [{k === sortKey ? sortLabels[k] : k}]{" "}
+            </Text>
+          ))}
+          Tab:cycle
+        </Text>
+      </Box>
+
+      <Box flexDirection="row" flexGrow={1}>
+        {/* Left: tool list */}
+        <Box width={36} flexDirection="column" borderStyle="single" borderColor={colors.border}>
+          <Box paddingX={1} flexDirection="row">
+            <Text color={colors.textDim} bold>
+              Tool
+            </Text>
+            <Box flexGrow={1} />
+            <Text color={colors.textDim}>calls </Text>
+            <Text color={colors.textDim}>err</Text>
+          </Box>
+          {visibleTools.map((tool, i) => {
+            const isSelected = tool.name === selectedTool?.name;
+            return (
+              <Box key={tool.name} flexDirection="row" paddingX={1}>
+                <Text
+                  color={isSelected ? colors.accent : colors.textDim}
+                  bold={isSelected}
+                >
+                  {isSelected ? "▶ " : "  "}{truncate(tool.name, 20)}
+                </Text>
+                <Box flexGrow={1} />
+                <Text color={colors.info}>{tool.calls}</Text>
+                <Text color={colors.textDim}> </Text>
+                <Text color={tool.failures > 0 ? colors.error : colors.textDim}>{tool.failures}</Text>
+              </Box>
+            );
+          })}
+          {allTools.length === 0 && (
+            <Box paddingX={1}>
+              <Text color={colors.textDim}>No tool data yet</Text>
+            </Box>
+          )}
+        </Box>
+
+        {/* Right: detail panel */}
+        <Box flexGrow={1} flexDirection="column" borderStyle="single" borderColor={colors.border} paddingX={1}>
+          {selectedTool ? (
+            <>
+              <Text color={colors.cyan} bold>
+                {selectedTool.name}
+              </Text>
+              <Box marginTop={1} flexDirection="column">
+                <Box flexDirection="row">
+                  <Box width={14}>
+                    <Text color={colors.textDim}>Total calls</Text>
+                  </Box>
+                  <Text color={colors.text}>{selectedTool.calls}</Text>
+                </Box>
+                <Box flexDirection="row">
+                  <Box width={14}>
+                    <Text color={colors.textDim}>Successes</Text>
+                  </Box>
+                  <Text color={colors.success}>{selectedTool.successes}</Text>
+                </Box>
+                <Box flexDirection="row">
+                  <Box width={14}>
+                    <Text color={colors.textDim}>Failures</Text>
+                  </Box>
+                  <Text color={selectedTool.failures > 0 ? colors.error : colors.textDim}>
+                    {selectedTool.failures}
+                  </Text>
+                </Box>
+                <Box flexDirection="row">
+                  <Box width={14}>
+                    <Text color={colors.textDim}>Avg time</Text>
+                  </Box>
+                  <Text color={colors.info}>{formatDuration(selectedTool.avgDurationMs)}</Text>
+                </Box>
+              </Box>
+
+              <Box marginTop={1}>
+                <Text color={colors.textDim}>Success rate </Text>
+                <SuccessBar successes={selectedTool.successes} calls={selectedTool.calls} />
+              </Box>
+
+              {selectedTool.recentErrors.length > 0 && (
+                <>
+                  <Box marginTop={1}>
+                    <Text color={colors.warning} bold>
+                      Recent Errors
+                    </Text>
+                  </Box>
+                  {selectedTool.recentErrors.map((err, i) => (
+                    <Box key={i} flexDirection="row">
+                      <Text color={colors.error}>• </Text>
+                      <Text color={colors.text}>{truncate(err, 60)}</Text>
+                    </Box>
+                  ))}
+                </>
+              )}
+            </>
+          ) : (
+            <Text color={colors.textDim}>No tools found. Run some OpenCode sessions first.</Text>
+          )}
+        </Box>
+      </Box>
+
+      <StatusBar
+        hints="j/k:nav  Tab:cycle-sort  1:sessions  3:overview  q:quit"
+        info={`${allTools.length} tools`}
+      />
+    </Box>
+  );
+}
+
+export const ToolsScreen = memo(ToolsScreenInner);
+
+function truncate(s: string, max: number): string {
+  if (s.length <= max) return s;
+  return s.slice(0, max - 1) + "…";
+}

package/src/ui/theme.ts

@@ -0,0 +1,21 @@
+export const colors = {
+  bg: "#1a1a2e",
+  bgSecondary: "#16213e",
+  border: "#0f3460",
+  accent: "#e94560",
+  accentDim: "#533483",
+  text: "#eaeaea",
+  textDim: "#888",
+  success: "#4ade80",
+  warning: "#fbbf24",
+  error: "#f87171",
+  info: "#60a5fa",
+  purple: "#a855f7",
+  cyan: "#22d3ee",
+} as const;
+
+export const tokens = {
+  radius: 1,
+  paddingX: 1,
+  paddingY: 0,
+} as const;