opencode-top 3.0.0

package/src/ui/App.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Box, Text, useApp, useInput, useStdout } from "ink";
+import { colors } from "./theme";
+import { TabBar } from "./components/TabBar";
+import { SessionsScreen } from "./screens/SessionsScreen";
+import { ToolsScreen } from "./screens/ToolsScreen";
+import { OverviewScreen } from "./screens/OverviewScreen";
+import type { Workflow, ScreenId } from "../core/types";
+import { loadSessions, sessionExists } from "../data/sqlite";
+import { groupSessionsToWorkflows } from "../core/agents";
+
+interface AppProps {
+  refreshInterval?: number;
+}
+
+function workflowsEqual(a: Workflow[], b: Workflow[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].id !== b[i].id) return false;
+    if (a[i].mainSession.interactions.length !== b[i].mainSession.interactions.length) return false;
+    if (a[i].subAgentSessions.length !== b[i].subAgentSessions.length) return false;
+  }
+  return true;
+}
+
+export function App({ refreshInterval = 2000 }: AppProps) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const terminalHeight = stdout?.rows ?? 24;
+  const terminalWidth = stdout?.columns ?? 80;
+
+  const [workflows, setWorkflows] = useState<Workflow[]>([]);
+  const [screen, setScreen] = useState<ScreenId>("sessions");
+  const [error, setError] = useState<string | null>(null);
+  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
+
+  const workflowsRef = useRef<Workflow[]>([]);
+  const mountedRef = useRef(false);
+
+  const loadData = useCallback(() => {
+    if (!sessionExists()) {
+      if (mountedRef.current) {
+        setError("No OpenCode database found. Run OpenCode first.");
+      }
+      return;
+    }
+
+    try {
+      const sessions = loadSessions();
+      const grouped = groupSessionsToWorkflows(sessions);
+
+      if (!workflowsEqual(workflowsRef.current, grouped)) {
+        workflowsRef.current = grouped;
+        if (mountedRef.current) {
+          setWorkflows(grouped);
+          setLastRefresh(new Date());
+        }
+      }
+
+      if (mountedRef.current) {
+        setError(null);
+      }
+    } catch (e) {
+      if (mountedRef.current) {
+        setError(e instanceof Error ? e.message : "Failed to load sessions");
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    loadData();
+    const interval = setInterval(loadData, refreshInterval);
+    return () => {
+      mountedRef.current = false;
+      clearInterval(interval);
+    };
+  }, [loadData, refreshInterval]);
+
+  // Global: q quit, r refresh, 1-3 tabs
+  useInput((input, key) => {
+    if (input === "q" || key.escape) {
+      exit();
+      return;
+    }
+    if (input === "r") {
+      loadData();
+      return;
+    }
+    if (input === "1") { setScreen("sessions"); return; }
+    if (input === "2") { setScreen("tools"); return; }
+    if (input === "3") { setScreen("overview"); return; }
+  });
+
+  if (error) {
+    return (
+      <Box flexDirection="column" padding={2}>
+        <Text color={colors.error} bold>Error</Text>
+        <Text color={colors.text}>{error}</Text>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>Press q to quit</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Tab bar is 3 rows (border top + content + border bottom)
+  const contentHeight = terminalHeight - 3;
+
+  return (
+    <Box flexDirection="column" width={terminalWidth}>
+      <TabBar activeScreen={screen} lastRefresh={lastRefresh} />
+      <Box width={terminalWidth} height={contentHeight}>
+        {screen === "sessions" && (
+          <SessionsScreen
+            workflows={workflows}
+            isActive={true}
+            contentHeight={contentHeight}
+            terminalWidth={terminalWidth}
+          />
+        )}
+        {screen === "tools" && (
+          <ToolsScreen
+            workflows={workflows}
+            isActive={true}
+            contentHeight={contentHeight}
+            terminalWidth={terminalWidth}
+          />
+        )}
+        {screen === "overview" && (
+          <OverviewScreen
+            workflows={workflows}
+            isActive={true}
+            contentHeight={contentHeight}
+            terminalWidth={terminalWidth}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/components/AgentChainGraph.tsx

@@ -0,0 +1,95 @@
+import React, { memo } from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme";
+import type { AgentNode } from "../../core/types";
+import { getSessionTokens, getSessionCostSingle } from "../../core/session";
+import { getPricing } from "../../data/pricing";
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toString();
+}
+
+interface AgentNodeRowProps {
+  node: AgentNode;
+  isLast: boolean;
+  prefix: string;
+}
+
+function AgentNodeRow({ node, isLast, prefix }: AgentNodeRowProps) {
+  const { session } = node;
+  const tokens = getSessionTokens(session);
+  const pricing = getPricing(session.interactions[0]?.modelId ?? "");
+  const cost = getSessionCostSingle(session, pricing);
+  const agentName = session.interactions[0]?.agent ?? session.interactions[0]?.role ?? "main";
+
+  const connector = isLast ? "└─ " : "├─ ";
+  const childPrefix = prefix + (isLast ? "   " : "│  ");
+
+  return (
+    <>
+      <Box flexDirection="row">
+        <Text color={colors.textDim}>{prefix}{connector}</Text>
+        <Text color={colors.cyan}>[{agentName}]</Text>
+        <Text color={colors.text}> {truncate(session.title ?? session.id.slice(0, 8), 20)}</Text>
+        <Box flexGrow={1} />
+        <Text color={colors.textDim}>{formatTokens(tokens.total)}</Text>
+        <Text color={colors.textDim}> </Text>
+        <Text color={colors.success}>${cost.toFixed(3)}</Text>
+      </Box>
+      {node.children.map((child, i) => (
+        <AgentNodeRow
+          key={child.session.id}
+          node={child}
+          isLast={i === node.children.length - 1}
+          prefix={childPrefix}
+        />
+      ))}
+    </>
+  );
+}
+
+interface AgentChainGraphProps {
+  agentTree: AgentNode;
+}
+
+function AgentChainGraphInner({ agentTree }: AgentChainGraphProps) {
+  const { session } = agentTree;
+  const tokens = getSessionTokens(session);
+  const pricing = getPricing(session.interactions[0]?.modelId ?? "");
+  const cost = getSessionCostSingle(session, pricing);
+  const agentName = session.interactions[0]?.agent ?? "main";
+
+  if (agentTree.children.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="row">
+        <Text color={colors.cyan} bold>[{agentName}]</Text>
+        <Text color={colors.text}> {truncate(session.title ?? "root", 20)}</Text>
+        <Box flexGrow={1} />
+        <Text color={colors.textDim}>{formatTokens(tokens.total)}</Text>
+        <Text color={colors.textDim}> </Text>
+        <Text color={colors.success}>${cost.toFixed(3)}</Text>
+      </Box>
+      {agentTree.children.map((child, i) => (
+        <AgentNodeRow
+          key={child.session.id}
+          node={child}
+          isLast={i === agentTree.children.length - 1}
+          prefix=""
+        />
+      ))}
+    </Box>
+  );
+}
+
+export const AgentChainGraph = memo(AgentChainGraphInner);
+
+function truncate(s: string, max: number): string {
+  if (s.length <= max) return s;
+  return s.slice(0, max - 1) + "…";
+}

package/src/ui/components/AgentTree.tsx

@@ -0,0 +1,98 @@
+import React, { memo } from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme";
+import type { Workflow, FlatNode } from "../../core/types";
+import { getSessionTokens, getSessionCostSingle } from "../../core/session";
+import { getPricing } from "../../data/pricing";
+import Decimal from "decimal.js";
+
+interface AgentTreeProps {
+  workflows: Workflow[];
+  selectedId: string | null;
+  flatNodes: FlatNode[];
+  onSelect: (id: string) => void;
+  maxHeight?: number;
+}
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toString();
+}
+
+function formatCost(d: Decimal): string {
+  if (d.lessThan(0.01)) return `$${d.toFixed(4)}`;
+  return `$${d.toFixed(2)}`;
+}
+
+function AgentTreeInner({ workflows, selectedId, flatNodes, maxHeight = 20 }: AgentTreeProps) {
+  const headerHeight = 2;
+  const visibleCount = Math.max(1, maxHeight - headerHeight);
+  const selectedIndex = flatNodes.findIndex((n) => n.id === selectedId);
+
+  let startIndex = 0;
+  if (selectedIndex >= visibleCount - 1) {
+    startIndex = Math.max(0, selectedIndex - visibleCount + 2);
+  }
+  const visibleNodes = flatNodes.slice(startIndex, startIndex + visibleCount);
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box marginBottom={1} flexDirection="row">
+        <Text color={colors.accent} bold>Sessions</Text>
+        <Box flexGrow={1} />
+        <Text color={colors.textDim}>{workflows.length}</Text>
+      </Box>
+
+      {visibleNodes.map((node) => {
+        const isSelected = node.id === selectedId;
+        const tokens = getSessionTokens(node.session);
+        const pricing = getPricing(node.session.interactions[0]?.modelId ?? "");
+        const cost = getSessionCostSingle(node.session, pricing);
+        const agentName = node.session.interactions[0]?.agent ?? null;
+
+        const indent = "  ".repeat(node.depth);
+        const prefix = node.depth === 0
+          ? (node.hasChildren ? "▶ " : "● ")
+          : (node.hasChildren ? "├▶ " : "├─ ");
+
+        const label = node.depth === 0
+          ? truncate(node.session.title ?? node.session.projectName ?? "Untitled", 22)
+          : truncate(`[${agentName ?? "?"}] ${node.session.title ?? ""}`, 20);
+
+        return (
+          <Box key={node.id} flexDirection="row">
+            <Box width={1} />
+            <Text
+              color={isSelected ? undefined : colors.text}
+              backgroundColor={isSelected ? colors.accent : undefined}
+              bold={isSelected}
+            >
+              {indent}{prefix}{label}
+            </Text>
+            <Box flexGrow={1} />
+            <Text color={colors.textDim} dimColor>{formatTokens(tokens.total)}</Text>
+            <Box width={1} />
+            <Text color={colors.success}>{formatCost(cost)}</Text>
+            <Box width={1} />
+          </Box>
+        );
+      })}
+
+      {flatNodes.length > visibleCount && (
+        <Text color={colors.textDim}>
+          {startIndex > 0 ? "↑ " : "  "}
+          {startIndex + visibleCount}/{flatNodes.length}
+          {startIndex + visibleCount < flatNodes.length ? " ↓" : "  "}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+export const AgentTree = memo(AgentTreeInner);
+
+function truncate(label: string, maxLen: number): string {
+  if (label.length <= maxLen) return label;
+  return label.slice(0, maxLen - 1) + "…";
+}

package/src/ui/components/DetailsPanel.tsx

@@ -0,0 +1,210 @@
+import React, { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme";
+import type { Workflow } from "../../core/types";
+import {
+  getSessionTokens,
+  getSessionCostSingle,
+  getSessionDuration,
+  getOutputRate,
+  getToolUsage,
+} from "../../core/session";
+import { getPricing } from "../../data/pricing";
+import { AgentChainGraph } from "./AgentChainGraph";
+
+interface DetailsPanelProps {
+  workflow: Workflow | null;
+}
+
+function StatRow({
+  label,
+  value,
+  color = colors.text,
+}: {
+  label: string;
+  value: string;
+  color?: string;
+}) {
+  return (
+    <Box flexDirection="row">
+      <Box width={12}>
+        <Text color={colors.textDim}>{label}</Text>
+      </Box>
+      <Text color={color}>{value}</Text>
+    </Box>
+  );
+}
+
+function formatDuration(ms: number): string {
+  if (ms === 0) return "—";
+  const mins = Math.floor(ms / 60000);
+  const secs = Math.floor((ms % 60000) / 1000);
+  if (mins === 0) return `${secs}s`;
+  return `${mins}m ${secs}s`;
+}
+
+function ProgressBar({
+  value,
+  max,
+  width = 16,
+  color = colors.accent,
+}: {
+  value: number;
+  max: number;
+  width?: number;
+  color?: string;
+}) {
+  const pct = max > 0 ? Math.min(value / max, 1) : 0;
+  const filled = Math.round(pct * width);
+  const empty = width - filled;
+
+  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 formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toString();
+}
+
+function DetailsPanelInner({ workflow }: DetailsPanelProps) {
+  const data = useMemo(() => {
+    if (!workflow) return null;
+
+    const session = workflow.mainSession;
+    const tokens = getSessionTokens(session);
+    const modelId = session.interactions[0]?.modelId ?? "";
+    const pricing = getPricing(modelId);
+    const cost = getSessionCostSingle(session, pricing);
+    const duration = getSessionDuration(session);
+    const outputRate = getOutputRate(session);
+
+    const contextUsage = tokens.input + tokens.cacheRead + tokens.cacheWrite;
+    const contextPct = pricing.contextWindow > 0 ? contextUsage / pricing.contextWindow : 0;
+
+    const modelBreakdown = new Map<string, { count: number; tokens: number }>();
+    for (const i of session.interactions) {
+      const existing = modelBreakdown.get(i.modelId) ?? { count: 0, tokens: 0 };
+      existing.count++;
+      existing.tokens += i.tokens.total;
+      modelBreakdown.set(i.modelId, existing);
+    }
+
+    const toolUsage = getToolUsage(session);
+    const topTools = toolUsage
+      .sort((a, b) => b.calls - a.calls)
+      .slice(0, 3);
+
+    return {
+      title: session.title ?? "Untitled",
+      project: session.projectName ?? "—",
+      tokens: tokens.total,
+      cost,
+      duration,
+      outputRate,
+      calls: session.interactions.length,
+      contextUsage,
+      contextWindow: pricing.contextWindow,
+      contextPct,
+      modelBreakdown,
+      topTools,
+      agentTree: workflow.agentTree,
+      hasSubAgents: workflow.subAgentSessions.length > 0,
+    };
+  }, [workflow]);
+
+  if (!data) {
+    return (
+      <Box flexDirection="column" paddingX={1}>
+        <Text color={colors.textDim}>Select a session</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box marginBottom={1}>
+        <Text color={colors.accent} bold>
+          Details
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        <Text color={colors.cyan} bold>
+          {data.title}
+        </Text>
+        <Text color={colors.textDim}>{data.project}</Text>
+
+        <StatRow label="Tokens" value={formatTokens(data.tokens)} />
+        <StatRow label="Cost" value={`$${data.cost.toFixed(4)}`} color={colors.success} />
+        <StatRow label="Duration" value={formatDuration(data.duration)} />
+        <StatRow label="Rate" value={`${data.outputRate.toFixed(0)} tok/s`} />
+        <StatRow label="Calls" value={data.calls.toString()} />
+
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>Context</Text>
+        </Box>
+        <ProgressBar
+          value={data.contextUsage}
+          max={data.contextWindow}
+          color={data.contextPct > 0.8 ? colors.warning : colors.accent}
+        />
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.purple} bold>
+          Models
+        </Text>
+      </Box>
+      {Array.from(data.modelBreakdown.entries())
+        .slice(0, 3)
+        .map(([model, stats]) => (
+          <Box key={model} flexDirection="row">
+            <Text color={colors.text}>{model.slice(0, 25)}</Text>
+            <Box flexGrow={1} />
+            <Text color={colors.textDim}>{stats.count}</Text>
+            <Box width={1} />
+            <Text color={colors.info}>{formatTokens(stats.tokens)}</Text>
+          </Box>
+        ))}
+
+      {data.topTools.length > 0 && (
+        <>
+          <Box marginTop={1}>
+            <Text color={colors.purple} bold>
+              Top Tools
+            </Text>
+          </Box>
+          {data.topTools.map((tool) => (
+            <Box key={tool.name} flexDirection="row">
+              <Text color={colors.text}>{tool.name.slice(0, 20)}</Text>
+              <Box flexGrow={1} />
+              <Text color={tool.failures > 0 ? colors.warning : colors.success}>
+                {tool.successes}/{tool.calls}
+              </Text>
+            </Box>
+          ))}
+        </>
+      )}
+
+      {data.hasSubAgents && (
+        <>
+          <Box marginTop={1}>
+            <Text color={colors.purple} bold>
+              Agent Chain
+            </Text>
+          </Box>
+          <AgentChainGraph agentTree={data.agentTree} />
+        </>
+      )}
+    </Box>
+  );
+}
+
+export const DetailsPanel = memo(DetailsPanelInner);