opencode-top 3.0.0

package/src/ui/components/MessagesPanel.tsx

@@ -0,0 +1,188 @@
+import React, { useMemo, memo } from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme";
+import type { Session, Interaction, MessagePart } from "../../core/types";
+
+interface MessagesPanelProps {
+  session: Session | null;
+  scrollOffset: number;
+  onScrollOffsetChange: (offset: number) => void;
+  maxHeight: number;
+}
+
+type MsgLine =
+  | { kind: "interaction-header"; interaction: Interaction }
+  | { kind: "tool-call"; part: MessagePart & { type: "tool" } }
+  | { kind: "text"; text: string }
+  | { kind: "reasoning"; text: string }
+  | { kind: "spacer" };
+
+function buildLines(session: Session): MsgLine[] {
+  const lines: MsgLine[] = [];
+  for (const interaction of session.interactions) {
+    if (interaction.role !== "assistant") continue;
+    lines.push({ kind: "interaction-header", interaction });
+    for (const part of interaction.parts) {
+      if (part.type === "tool") {
+        lines.push({ kind: "tool-call", part: part as MessagePart & { type: "tool" } });
+      } else if (part.type === "text" && part.text.trim()) {
+        // Split long text into display lines of ~wrap length
+        const wrapped = wrapText(part.text.trim(), 200);
+        for (const line of wrapped) {
+          lines.push({ kind: "text", text: line });
+        }
+      } else if (part.type === "reasoning" && part.text.trim()) {
+        const wrapped = wrapText(part.text.trim(), 200);
+        for (const line of wrapped) {
+          lines.push({ kind: "reasoning", text: line });
+        }
+      }
+    }
+    lines.push({ kind: "spacer" });
+  }
+  return lines;
+}
+
+function wrapText(text: string, maxLen: number): string[] {
+  const rawLines = text.split("\n");
+  const out: string[] = [];
+  for (const raw of rawLines) {
+    if (raw.length <= maxLen) {
+      out.push(raw);
+    } else {
+      for (let i = 0; i < raw.length; i += maxLen) {
+        out.push(raw.slice(i, i + maxLen));
+      }
+    }
+  }
+  return out;
+}
+
+function formatTime(ts: number | null): string {
+  if (!ts) return "";
+  return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+function formatDuration(ms: number): string {
+  if (ms <= 0) return "";
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function renderLine(line: MsgLine, idx: number): React.ReactElement {
+  switch (line.kind) {
+    case "interaction-header": {
+      const { interaction: i } = line;
+      const dur =
+        i.time.completed && i.time.created
+          ? i.time.completed - i.time.created
+          : 0;
+      return (
+        <Box key={idx} flexDirection="row" marginTop={1}>
+          <Text color={colors.purple} bold>◆ </Text>
+          <Text color={colors.info}>{truncate(i.modelId, 28)}</Text>
+          {i.agent && <Text color={colors.cyan}> [{i.agent}]</Text>}
+          <Box flexGrow={1} />
+          {dur > 0 && <Text color={colors.textDim}>{formatDuration(dur)} </Text>}
+          <Text color={colors.textDim}>{formatTime(i.time.created)}</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 dur = p.timeEnd > 0 && p.timeStart > 0 ? p.timeEnd - p.timeStart : 0;
+      const exitStr = p.exitCode !== null && p.exitCode !== 0 ? ` exit:${p.exitCode}` : "";
+      return (
+        <Box key={idx} flexDirection="column" paddingLeft={2}>
+          <Box flexDirection="row">
+            <Text color={statusColor}>{statusIcon} </Text>
+            <Text color={colors.text} bold>{truncate(p.toolName, 20)}</Text>
+            {p.title && <Text color={colors.textDim}> {truncate(p.title, 30)}</Text>}
+            <Box flexGrow={1} />
+            {exitStr && <Text color={colors.error}>{exitStr} </Text>}
+            {dur > 0 && <Text color={colors.textDim}>{formatDuration(dur)}</Text>}
+          </Box>
+          {/* Show output preview for errors or short outputs */}
+          {(p.status === "error" || (p.output && p.output.length < 200 && p.output.trim())) && (
+            <Box paddingLeft={2}>
+              <Text color={p.status === "error" ? colors.error : colors.textDim}>
+                {truncate(p.output.trim(), 120)}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      );
+    }
+
+    case "text":
+      return (
+        <Box key={idx} paddingLeft={2}>
+          <Text color={colors.text}>{line.text}</Text>
+        </Box>
+      );
+
+    case "reasoning":
+      return (
+        <Box key={idx} paddingLeft={2}>
+          <Text color={colors.accentDim}>⚡ {line.text}</Text>
+        </Box>
+      );
+
+    case "spacer":
+      return <Box key={idx} />;
+  }
+}
+
+function MessagesPanelInner({
+  session,
+  scrollOffset,
+  maxHeight,
+}: MessagesPanelProps) {
+  const allLines = useMemo(() => {
+    if (!session) return [];
+    return buildLines(session);
+  }, [session]);
+
+  if (!session) {
+    return (
+      <Box paddingX={1}>
+        <Text color={colors.textDim}>Select a session</Text>
+      </Box>
+    );
+  }
+
+  if (allLines.length === 0) {
+    return (
+      <Box paddingX={1}>
+        <Text color={colors.textDim}>No messages</Text>
+      </Box>
+    );
+  }
+
+  const clampedOffset = Math.max(0, Math.min(scrollOffset, Math.max(0, allLines.length - maxHeight)));
+  const visibleLines = allLines.slice(clampedOffset, clampedOffset + maxHeight);
+
+  return (
+    <Box flexDirection="column" paddingX={1} overflow="hidden">
+      <Box flexDirection="row">
+        <Text color={colors.textDim}>
+          {clampedOffset + 1}–{Math.min(clampedOffset + maxHeight, allLines.length)}/{allLines.length}
+        </Text>
+        <Box flexGrow={1} />
+        <Text color={colors.textDim}>{session.interactions.length} turns</Text>
+      </Box>
+      {visibleLines.map((line, i) => renderLine(line, clampedOffset + i))}
+    </Box>
+  );
+}
+
+export const MessagesPanel = memo(MessagesPanelInner);
+
+function truncate(s: string, max: number): string {
+  if (s.length <= max) return s;
+  return s.slice(0, max - 1) + "…";
+}

package/src/ui/components/SparkLine.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from "react";
+import { Text } from "ink";
+import { colors } from "../theme";
+import { buildSparkSeries } from "../../core/session";
+
+interface SparkLineProps {
+  values: number[];
+  color?: string;
+  width?: number;
+}
+
+function SparkLineInner({ values, color = colors.info, width }: SparkLineProps) {
+  const data = width && values.length > width ? values.slice(-width) : values;
+  const spark = buildSparkSeries(data);
+  return <Text color={color}>{spark}</Text>;
+}
+
+export const SparkLine = memo(SparkLineInner);

package/src/ui/components/StatusBar.tsx

@@ -0,0 +1,24 @@
+import React, { memo } from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme";
+
+interface StatusBarProps {
+  hints: string;
+  info?: string;
+}
+
+function StatusBarInner({ hints, info }: StatusBarProps) {
+  return (
+    <Box paddingX={1} borderStyle="single" borderColor={colors.border} flexDirection="row">
+      <Text color={colors.textDim}>{hints}</Text>
+      {info && (
+        <>
+          <Box flexGrow={1} />
+          <Text color={colors.info}>{info}</Text>
+        </>
+      )}
+    </Box>
+  );
+}
+
+export const StatusBar = memo(StatusBarInner);

package/src/ui/components/TabBar.tsx

@@ -0,0 +1,42 @@
+import React, { memo } from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme";
+import type { ScreenId } from "../../core/types";
+
+interface TabBarProps {
+  activeScreen: ScreenId;
+  lastRefresh: Date;
+}
+
+const TABS: { id: ScreenId; label: string; key: string }[] = [
+  { id: "sessions", label: "Sessions", key: "1" },
+  { id: "tools", label: "Tools", key: "2" },
+  { id: "overview", label: "Overview", key: "3" },
+];
+
+function TabBarInner({ activeScreen, lastRefresh }: TabBarProps) {
+  return (
+    <Box paddingX={1} borderStyle="single" borderColor={colors.border} flexDirection="row">
+      <Text color={colors.accent} bold>
+        OCMonitor{" "}
+      </Text>
+      {TABS.map((tab) => {
+        const isActive = tab.id === activeScreen;
+        return (
+          <Box key={tab.id} marginRight={1}>
+            <Text
+              color={isActive ? colors.accent : colors.textDim}
+              bold={isActive}
+            >
+              [{tab.key}]{isActive ? <Text color={colors.text}> {tab.label}</Text> : ` ${tab.label}`}
+            </Text>
+          </Box>
+        );
+      })}
+      <Box flexGrow={1} />
+      <Text color={colors.textDim}>{lastRefresh.toLocaleTimeString()}</Text>
+    </Box>
+  );
+}
+
+export const TabBar = memo(TabBarInner);

package/src/ui/screens/OverviewScreen.tsx

@@ -0,0 +1,327 @@
+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) + "…";
+}