opencode-top 3.1.2 → 3.2.0

package/src/ui/screens/TimelineScreen.tsx

@@ -1,222 +0,0 @@
-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

@@ -1,260 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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;