opencode-top 3.1.1 → 3.2.0

package/src/ui/screens/OverviewScreen.tsx

@@ -1,327 +0,0 @@
-import React, { useMemo, memo } from "react";
-import { Box, Text } from "ink";
-import { colors } from "../theme";
-import { StatusBar } from "../components/StatusBar";
-import { SparkLine } from "../components/SparkLine";
-import type { Workflow } from "../../core/types";
-import { computeOverviewStats, buildSparkSeries } from "../../core/session";
-import { getAllPricing } from "../../data/pricing";
-
-interface OverviewScreenProps {
-  workflows: Workflow[];
-  isActive: boolean;
-  contentHeight: number;
-  terminalWidth: 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 StatRow({ label, value, color = colors.text }: { label: string; value: string; color?: string }) {
-  return (
-    <Box flexDirection="row">
-      <Box width={18}>
-        <Text color={colors.textDim}>{label}</Text>
-      </Box>
-      <Text color={color}>{value}</Text>
-    </Box>
-  );
-}
-
-function SectionHeader({ title }: { title: string }) {
-  return (
-    <Box marginTop={1}>
-      <Text color={colors.purple} bold>{title}</Text>
-    </Box>
-  );
-}
-
-/** Horizontal bar: filled █ proportional to value/max, with label and count */
-function HBar({
-  label,
-  value,
-  max,
-  total,
-  width = 16,
-  barColor = colors.info,
-  labelWidth = 10,
-  showPct = false,
-}: {
-  label: string;
-  value: number;
-  max: number;
-  total?: number;
-  width?: number;
-  barColor?: string;
-  labelWidth?: number;
-  showPct?: boolean;
-}) {
-  const pct = max > 0 ? value / max : 0;
-  const filled = Math.max(0, Math.round(pct * width));
-  const empty = width - filled;
-  const pctStr = showPct && total && total > 0 ? ` ${Math.round((value / total) * 100)}%` : "";
-  return (
-    <Box flexDirection="row">
-      <Box width={labelWidth}>
-        <Text color={colors.text}>{truncate(label, labelWidth - 1)}</Text>
-      </Box>
-      <Text color={barColor}>{"█".repeat(filled)}</Text>
-      <Text color={colors.border}>{"░".repeat(empty)}</Text>
-      <Text color={colors.textDim}> {value}{pctStr}</Text>
-    </Box>
-  );
-}
-
-/** Error rate bar: shows ok + error segments */
-function ErrorBar({
-  label,
-  calls,
-  errors,
-  width = 16,
-  labelWidth = 8,
-}: {
-  label: string;
-  calls: number;
-  errors: number;
-  width: number;
-  labelWidth: number;
-}) {
-  const okCount = calls - errors;
-  const okFilled = calls > 0 ? Math.round((okCount / calls) * width) : width;
-  const errFilled = width - okFilled;
-  const errPct = calls > 0 ? Math.round((errors / calls) * 100) : 0;
-  return (
-    <Box flexDirection="row">
-      <Box width={labelWidth}>
-        <Text color={colors.text}>{truncate(label, labelWidth - 1)}</Text>
-      </Box>
-      <Text color={colors.success}>{"█".repeat(okFilled)}</Text>
-      <Text color={errors > 0 ? colors.error : colors.border}>{"█".repeat(errFilled)}</Text>
-      <Text color={colors.textDim}> {calls} calls</Text>
-      {errors > 0 && <Text color={colors.error}> {errors} err ({errPct}%)</Text>}
-    </Box>
-  );
-}
-
-function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth }: OverviewScreenProps) {
-  const pricing = useMemo(() => getAllPricing(), []);
-  const stats = useMemo(() => computeOverviewStats(workflows, pricing), [workflows, pricing]);
-
-  const topModels = useMemo(() =>
-    Array.from(stats.modelBreakdown.entries())
-      .sort((a, b) => b[1].calls - a[1].calls)
-      .slice(0, 4),
-    [stats]
-  );
-
-  const topProjects = useMemo(() =>
-    Array.from(stats.projectBreakdown.entries())
-      .sort((a, b) => b[1].sessions - a[1].sessions)
-      .slice(0, 4),
-    [stats]
-  );
-
-  const agentToolErrorList = useMemo(() =>
-    Array.from(stats.agentToolErrors.entries())
-      .sort((a, b) => b[1].calls - a[1].calls),
-    [stats]
-  );
-
-  const topTools = useMemo(() =>
-    Array.from(stats.toolCallCounts.entries())
-      .sort((a, b) => b[1].calls - a[1].calls)
-      .slice(0, 8),
-    [stats]
-  );
-  const maxToolCalls = topTools[0]?.[1].calls ?? 1;
-
-  // Weekly sparklines
-  const weeklyTokenValues = stats.weeklyTokens.map((d) => d.tokens);
-  const weeklySessionValues = stats.weeklySessions.map((d) => d.sessions);
-  const maxWeeklyTokens = Math.max(...weeklyTokenValues, 1);
-  const maxWeeklySessions = Math.max(...weeklySessionValues, 1);
-
-  // Hourly heatmap — group into 4-hour buckets for compactness: 0-3,4-7,8-11,12-15,16-19,20-23
-  const hourlyBuckets = Array.from({ length: 6 }, (_, i) =>
-    stats.hourlyActivity.slice(i * 4, i * 4 + 4).reduce((a, b) => a + b, 0)
-  );
-  const hourSpark = buildSparkSeries(stats.hourlyActivity);
-
-  // Column widths based on terminal
-  const leftW = Math.max(32, Math.floor(terminalWidth * 0.38));
-  const midW = Math.max(26, Math.floor(terminalWidth * 0.30));
-  // right gets remaining
-
-  return (
-    <Box flexDirection="column" width={terminalWidth} height={contentHeight}>
-      <Box paddingX={1} flexDirection="row">
-        <Text color={colors.accent} bold>Overview</Text>
-        <Box flexGrow={1} />
-        <Text color={colors.textDim}>{workflows.length} workflows  {stats.totalTokens.total > 0 ? formatTokens(stats.totalTokens.total) + " tokens" : ""}</Text>
-      </Box>
-
-      <Box flexDirection="row" flexGrow={1} paddingX={1}>
-
-        {/* ── LEFT COLUMN ─────────────────────────────────────── */}
-        <Box flexDirection="column" width={leftW}>
-
-          <SectionHeader title="Totals" />
-          <StatRow label="Total tokens" value={formatTokens(stats.totalTokens.total)} />
-          <StatRow label="  input" value={formatTokens(stats.totalTokens.input)} color={colors.info} />
-          <StatRow label="  output" value={formatTokens(stats.totalTokens.output)} color={colors.cyan} />
-          <StatRow label="  cache r/w" value={`${formatTokens(stats.totalTokens.cacheRead)} / ${formatTokens(stats.totalTokens.cacheWrite)}`} color={colors.textDim} />
-          <StatRow label="Total cost" value={`$${stats.totalCost.toFixed(4)}`} color={colors.success} />
-
-          <SectionHeader title="Token trend (7d)" />
-          <Box flexDirection="row">
-            <SparkLine values={weeklyTokenValues} color={colors.cyan} />
-          </Box>
-          <Box flexDirection="row">
-            <Text color={colors.textDim}>{stats.weeklyTokens[0]?.date.slice(3) ?? ""}</Text>
-            <Box flexGrow={1} />
-            <Text color={colors.textDim}>peak {formatTokens(maxWeeklyTokens)}</Text>
-            <Box flexGrow={1} />
-            <Text color={colors.textDim}>{stats.weeklyTokens[6]?.date.slice(3) ?? ""}</Text>
-          </Box>
-
-          <SectionHeader title="Sessions (7d)" />
-          <Box flexDirection="row">
-            <SparkLine values={weeklySessionValues} color={colors.accent} />
-          </Box>
-          <Box flexDirection="row">
-            <Text color={colors.textDim}>{stats.weeklySessions[0]?.date.slice(3) ?? ""}</Text>
-            <Box flexGrow={1} />
-            <Text color={colors.textDim}>peak {maxWeeklySessions}/day</Text>
-            <Box flexGrow={1} />
-            <Text color={colors.textDim}>{stats.weeklySessions[6]?.date.slice(3) ?? ""}</Text>
-          </Box>
-
-          <SectionHeader title="Hourly activity" />
-          <Text color={colors.warning}>{hourSpark}</Text>
-          <Box flexDirection="row">
-            <Text color={colors.textDim}>00</Text>
-            <Box flexGrow={1} />
-            <Text color={colors.textDim}>06</Text>
-            <Box flexGrow={1} />
-            <Text color={colors.textDim}>12</Text>
-            <Box flexGrow={1} />
-            <Text color={colors.textDim}>18</Text>
-            <Box flexGrow={1} />
-            <Text color={colors.textDim}>23</Text>
-          </Box>
-
-        </Box>
-
-        {/* ── MIDDLE COLUMN ───────────────────────────────────── */}
-        <Box flexDirection="column" width={midW} paddingLeft={2}>
-
-          <SectionHeader title="Tool errors by agent" />
-          {agentToolErrorList.length === 0
-            ? <Text color={colors.textDim}>No tool data</Text>
-            : agentToolErrorList.map(([agent, data]) => (
-              <ErrorBar
-                key={agent}
-                label={agent}
-                calls={data.calls}
-                errors={data.errors}
-                width={14}
-                labelWidth={9}
-              />
-            ))
-          }
-
-          <SectionHeader title="Top tools (calls / errors)" />
-          {topTools.length === 0
-            ? <Text color={colors.textDim}>No tool data</Text>
-            : topTools.map(([name, data]) => (
-              <Box key={name} flexDirection="row">
-                <Box width={10}>
-                  <Text color={colors.text}>{truncate(name, 9)}</Text>
-                </Box>
-                <Text color={data.errors > 0 ? colors.warning : colors.info}>
-                  {"█".repeat(Math.max(1, Math.round((data.calls / maxToolCalls) * 12)))}
-                </Text>
-                <Text color={colors.border}>
-                  {"░".repeat(Math.max(0, 12 - Math.max(1, Math.round((data.calls / maxToolCalls) * 12))))}
-                </Text>
-                <Text color={colors.textDim}> {data.calls}</Text>
-                {data.errors > 0 && <Text color={colors.error}> ✗{data.errors}</Text>}
-              </Box>
-            ))
-          }
-
-        </Box>
-
-        {/* ── RIGHT COLUMN ────────────────────────────────────── */}
-        <Box flexDirection="column" flexGrow={1} paddingLeft={2}>
-
-          <SectionHeader title="Projects" />
-          {topProjects.length === 0
-            ? <Text color={colors.textDim}>No project data</Text>
-            : topProjects.map(([project, data]) => (
-              <Box key={project} flexDirection="row">
-                <Box width={22}>
-                  <Text color={colors.text}>{truncate(project, 20)}</Text>
-                </Box>
-                <Text color={colors.info}>{data.sessions} sess</Text>
-                <Text color={colors.success}> ${data.cost.toFixed(3)}</Text>
-              </Box>
-            ))
-          }
-
-          <SectionHeader title="Tool avg duration (top 5)" />
-          {(() => {
-            const durList = Array.from(stats.toolCallCounts.entries())
-              .filter(([, d]) => d.calls > 0 && d.totalDurationMs > 0)
-              .map(([name, d]) => ({ name, avg: d.totalDurationMs / d.calls }))
-              .sort((a, b) => b.avg - a.avg)
-              .slice(0, 5);
-            const maxAvg = durList[0]?.avg ?? 1;
-            const barW = 10;
-            return durList.map(({ name, avg }) => {
-              const filled = Math.max(1, Math.round((avg / maxAvg) * barW));
-              const durStr = avg < 1000 ? `${avg.toFixed(0)}ms` : `${(avg / 1000).toFixed(1)}s`;
-              return (
-                <Box key={name} flexDirection="row">
-                  <Box width={12}>
-                    <Text color={colors.text}>{truncate(name, 10)}</Text>
-                  </Box>
-                  <Text color={colors.warning}>{"█".repeat(filled)}</Text>
-                  <Text color={colors.border}>{"░".repeat(barW - filled)}</Text>
-                  <Text color={colors.textDim}> {durStr}</Text>
-                </Box>
-              );
-            });
-          })()}
-
-          <SectionHeader title="Models" />
-          {topModels.length === 0
-            ? <Text color={colors.textDim}>No model data</Text>
-            : topModels.map(([model, data]) => (
-              <Box key={model} flexDirection="row">
-                <Box width={22}>
-                  <Text color={colors.text}>{truncate(model, 20)}</Text>
-                </Box>
-                <Text color={colors.info}>{data.calls}</Text>
-                <Text color={colors.textDim}> {formatTokens(data.tokens)}</Text>
-              </Box>
-            ))
-          }
-
-        </Box>
-      </Box>
-
-      <StatusBar hints="1:sessions  2:tools  r:refresh  q:quit" />
-    </Box>
-  );
-}
-
-export const OverviewScreen = memo(OverviewScreenInner);
-
-function truncate(s: string, max: number): string {
-  if (s.length <= max) return s;
-  return s.slice(0, max - 1) + "…";
-}

package/src/ui/screens/SessionsScreen.tsx

@@ -1,168 +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 { AgentTree } from "../components/AgentTree";
-import { DetailsPanel } from "../components/DetailsPanel";
-import { MessagesPanel } from "../components/MessagesPanel";
-import type { Workflow, 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 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;
-
-  const selectedWorkflow = useMemo(() => {
-    if (!selectedNode) return null;
-    const w = workflows[selectedNode.workflowIndex];
-    if (!w) return null;
-    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;
-
-  const statusBarHeight = 1;
-  const borderRows = 2;
-  const innerHeight = contentHeight - statusBarHeight - borderRows;
-  const panelHeight = contentHeight - statusBarHeight;
-  const msgHeight = innerHeight - 1; // minus tab header row
-
-  const handleSelect = useCallback((index: number) => {
-    setSelectedIndex(index);
-  }, []);
-
-  // SessionsScreen only handles: tab switch, tree nav (stats mode), session switch (messages mode)
-  useInput(
-    (input, key) => {
-      if (key.tab) {
-        setRightMode((m) => (m === "stats" ? "messages" : "stats"));
-        return;
-      }
-      if (rightMode === "stats") {
-        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 (input === "g") { handleSelect(0); return; }
-        if (input === "G") { handleSelect(flatNodes.length - 1); return; }
-      } else {
-        // In messages mode, [ and ] switch session
-        if (input === "[") { handleSelect(Math.max(0, clampedIndex - 1)); return; }
-        if (input === "]") { handleSelect(Math.min(flatNodes.length - 1, clampedIndex + 1)); return; }
-      }
-    },
-    { isActive }
-  );
-
-  return (
-    <Box flexDirection="column" width={terminalWidth} height={contentHeight}>
-      <Box flexDirection="row" height={panelHeight}>
-        {/* Left: agent/session tree */}
-        <Box
-          width={leftWidth}
-          height={panelHeight}
-          borderStyle="single"
-          borderColor={colors.border}
-          flexDirection="column"
-        >
-          <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={innerHeight}
-          />
-        </Box>
-
-        {/* Right: details or messages */}
-        <Box
-          width={rightWidth}
-          height={panelHeight}
-          borderStyle="single"
-          borderColor={colors.border}
-          flexDirection="column"
-        >
-          {/* Tab header: 1 row */}
-          <Box paddingX={1} height={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} height={innerHeight - 1} />
-          ) : (
-            <MessagesPanel
-              session={selectedNode?.session ?? null}
-              maxHeight={msgHeight}
-              isActive={isActive && rightMode === "messages"}
-            />
-          )}
-        </Box>
-      </Box>
-
-      <StatusBar
-        hints={
-          rightMode === "messages"
-            ? "j/k:scroll  d/u:½page  g/G:top/bot  Enter:expand  [:prev  ]:next  Tab:stats  q:quit"
-            : "j/k:nav  g/G:top/bot  Tab:messages  2:tools  3:overview  r:refresh  q:quit"
-        }
-      />
-    </Box>
-  );
-}
-
-export const SessionsScreen = memo(SessionsScreenInner);