opencode-top 3.3.6 → 3.4.0

package/README.md

@@ -73,3 +73,18 @@ cd opencode-top
 npm install
 npm start live   # run from source with tsx
 ```
+
+## Maintenance
+
+### Publishing a new version
+
+1. Make and commit your changes
+2. Bump the version in `package.json`
+3. Build and publish:
+
+```bash
+npm publish --access public
+```
+
+The `prepublishOnly` script runs the build automatically before publishing.
+The bin entry must point to `bin/octop.js` (not `bin/octop.mjs`) — `octop.js` loads the pre-built `dist/cli.mjs` and has no runtime dependencies.

package/dist/cli.mjs

@@ -18403,19 +18403,32 @@ var import_react32 = __toESM(require_react(), 1);
 
 // src/ui/theme.ts
 var colors = {
-  bg: "#1a1a2e",
-  bgSecondary: "#16213e",
-  border: "#0f3460",
-  accent: "#e94560",
-  accentDim: "#533483",
-  text: "#eaeaea",
-  textDim: "#888",
+  bg: "#0a0d0a",
+  bgSecondary: "#0f130f",
+  bgHighlight: "#162016",
+  border: "#1e2e1e",
+  borderBright: "#2d4a2d",
+  accent: "#4ade80",
+  // bright green — primary accent
+  accentDim: "#22543d",
+  accentAlt: "#86efac",
+  // light green
+  text: "#d4e8d4",
+  // slightly green-tinted white
+  textDim: "#527a52",
+  textMuted: "#2d4a2d",
   success: "#4ade80",
   warning: "#fbbf24",
   error: "#f87171",
-  info: "#60a5fa",
-  purple: "#a855f7",
-  cyan: "#22d3ee"
+  info: "#6ee7b7",
+  // mint/emerald
+  purple: "#a3e635",
+  // lime — replaces purple for section headers
+  cyan: "#34d399",
+  // emerald
+  teal: "#2dd4bf",
+  peach: "#86efac"
+  // light green instead of orange
 };
 
 // src/ui/components/TabBar.tsx
@@ -18427,22 +18440,19 @@ var TABS = [
   { id: "overview", label: "Overview", key: "3" }
 ];
 function TabBarInner({ activeScreen, lastRefresh }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { paddingX: 1, height: 1, flexDirection: "row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.accent, bold: true, children: "oc-top " }),
-    TABS.map((tab2) => {
-      const isActive = tab2.id === activeScreen;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { marginRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { color: isActive ? colors.accent : colors.textDim, bold: isActive, children: [
-        "[",
-        tab2.key,
-        "]",
-        isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { color: colors.text, children: [
-          " ",
-          tab2.label
-        ] }) : ` ${tab2.label}`
-      ] }) }, tab2.id);
-    }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { flexGrow: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.textDim, children: lastRefresh.toLocaleTimeString() })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { flexDirection: "column", height: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { paddingX: 1, height: 1, flexDirection: "row", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.accent, bold: true, children: "\u25C6 oc-top" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.textMuted, children: " \u2502 " }),
+      TABS.map((tab2, i) => {
+        const isActive = tab2.id === activeScreen;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { marginRight: 1, children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { backgroundColor: colors.bgHighlight, color: colors.accent, bold: true, children: ` ${tab2.key}:${tab2.label} ` }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.textDim, children: ` ${tab2.key}:${tab2.label} ` }) }, tab2.id);
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { flexGrow: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.textMuted, children: "\u21BB " }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.textDim, children: lastRefresh.toLocaleTimeString() })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { paddingX: 0, height: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.border, children: "\u2500".repeat(200) }) })
   ] });
 }
 var TabBar = (0, import_react22.memo)(TabBarInner);
@@ -18454,11 +18464,14 @@ var import_react28 = __toESM(require_react(), 1);
 var import_react23 = __toESM(require_react(), 1);
 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
 function StatusBarInner({ hints, info }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box_default, { paddingX: 1, height: 1, flexDirection: "row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: colors.textDim, children: hints }),
-    info && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { flexGrow: 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: colors.info, children: info })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box_default, { flexDirection: "column", height: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { paddingX: 0, height: 1, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: colors.border, children: "\u2500".repeat(200) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box_default, { paddingX: 1, height: 1, flexDirection: "row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: colors.textMuted, children: hints }),
+      info && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { flexGrow: 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: colors.info, children: info })
+      ] })
     ] })
   ] });
 }
@@ -20966,9 +20979,12 @@ function AgentTreeInner({ workflows, selectedId, flatNodes, maxHeight = 20 }) {
   const visibleNodes = flatNodes.slice(startIndex, startIndex + visibleCount);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box_default, { flexDirection: "column", paddingX: 1, height: maxHeight, overflow: "hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box_default, { marginBottom: 1, flexDirection: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: colors.accent, bold: true, children: "Sessions" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: colors.purple, bold: true, children: "SESSIONS" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box_default, { flexGrow: 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: colors.textDim, children: workflows.length })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { color: colors.textMuted, children: [
+        workflows.length,
+        " workflows"
+      ] })
     ] }),
     visibleNodes.map((node) => {
       const isSelected = node.id === selectedId;
@@ -20977,32 +20993,19 @@ function AgentTreeInner({ workflows, selectedId, flatNodes, maxHeight = 20 }) {
       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 ? "\u25B6 " : "\u25CF " : node.hasChildren ? "\u251C\u25B6 " : "\u251C\u2500 ";
+      const prefix = node.depth === 0 ? node.hasChildren ? "\u25B8 " : "  " : node.hasChildren ? "\u2570\u25B8 " : "\u2570\u2500 ";
       const label = node.depth === 0 ? truncate2(node.session.title ?? node.session.projectName ?? "Untitled", 22) : truncate2(`[${agentName ?? "?"}] ${node.session.title ?? ""}`, 20);
       const date = formatDate(node.session.timeCreated);
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box_default, { flexDirection: "row", height: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box_default, { width: 1 }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          Text,
-          {
-            color: isSelected ? void 0 : colors.text,
-            backgroundColor: isSelected ? colors.accent : void 0,
-            bold: isSelected,
-            children: [
-              indent,
-              prefix,
-              label
-            ]
-          }
-        ),
+        isSelected ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: colors.bgHighlight, backgroundColor: colors.accent, bold: true, children: `\u25B6 ${indent}${prefix}${label}` }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: node.depth === 0 ? colors.text : colors.textDim, children: `  ${indent}${prefix}${label}` }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box_default, { flexGrow: 1 }),
-        date && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { color: colors.textDim, children: [
+        date && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { color: colors.textMuted, children: [
           date,
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: colors.textDim, dimColor: true, children: formatTokens(tokens.total) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: colors.textDim, children: formatTokens(tokens.total) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box_default, { width: 1 }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: colors.success, children: formatCost(cost) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: cost.greaterThan(0) ? colors.success : colors.textMuted, children: formatCost(cost) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box_default, { width: 1 })
       ] }, node.id);
     }),
@@ -21148,8 +21151,8 @@ function ProgressBar({
   const filled = Math.round(pct * width);
   const empty = width - filled;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Text, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color, children: "\u2588".repeat(filled) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.border, children: "\u2591".repeat(empty) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color, children: "\u2593".repeat(filled) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.textMuted, children: "\u2591".repeat(empty) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Text, { color: colors.textDim, children: [
       " ",
       Math.round(pct * 100),
@@ -21204,35 +21207,45 @@ function DetailsPanelInner({ workflow, height }) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { flexDirection: "column", paddingX: 1, height, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.textDim, children: "Select a session" }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { flexDirection: "column", paddingX: 1, height, overflow: "hidden", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.accent, bold: true, children: "Details" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { flexDirection: "column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.cyan, bold: true, children: data.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.textDim, children: data.project }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.accent, bold: true, children: data.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Text, { color: colors.textMuted, children: [
+        "\u25CE ",
+        data.project
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.purple, bold: true, children: "\u2500\u2500 STATS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Tokens", value: formatTokens3(data.tokens) }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Cost", value: `$${data.cost.toFixed(4)}`, color: colors.success }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Duration", value: formatDuration(data.duration) }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Rate", value: `${data.outputRate.toFixed(0)} tok/s` }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Calls", value: data.calls.toString() }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.textDim, children: "Context" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Calls", value: data.calls.toString() })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.textMuted, children: "context" }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ProgressBar,
         {
           value: data.contextUsage,
           max: data.contextWindow,
-          color: data.contextPct > 0.8 ? colors.warning : colors.accent
+          color: data.contextPct > 0.8 ? colors.warning : colors.teal
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.purple, bold: true, children: "Models" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.purple, bold: true, children: "\u2500\u2500 MODELS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }),
     Array.from(data.modelBreakdown.entries()).slice(0, 3).map(([model, stats]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { flexDirection: "row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.text, children: model.slice(0, 25) }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { flexGrow: 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.textDim, children: stats.count }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Text, { color: colors.textMuted, children: [
+        stats.count,
+        "\xD7"
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { width: 1 }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.info, children: formatTokens3(stats.tokens) })
     ] }, model)),
     data.topTools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.purple, bold: true, children: "Top Tools" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.purple, bold: true, children: "\u2500\u2500 TOOLS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }),
       data.topTools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { flexDirection: "row", children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.text, children: tool.name.slice(0, 20) }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { flexGrow: 1 }),
@@ -21244,7 +21257,7 @@ function DetailsPanelInner({ workflow, height }) {
       ] }, tool.name))
     ] }),
     data.hasSubAgents && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.purple, bold: true, children: "Agent Chain" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: colors.purple, bold: true, children: "\u2500\u2500 AGENT CHAIN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AgentChainGraph, { agentTree: data.agentTree })
     ] })
   ] });
@@ -21618,7 +21631,7 @@ function SessionsScreenInner({
   }, [selectedNode, workflows]);
   const leftWidth = Math.floor(terminalWidth * 0.35);
   const rightWidth = terminalWidth - leftWidth - 2;
-  const statusBarHeight = 1;
+  const statusBarHeight = 2;
   const borderRows = 2;
   const innerHeight = contentHeight - statusBarHeight - borderRows;
   const panelHeight = contentHeight - statusBarHeight;
@@ -21669,8 +21682,8 @@ function SessionsScreenInner({
         {
           width: leftWidth,
           height: panelHeight,
-          borderStyle: "single",
-          borderColor: colors.border,
+          borderStyle: "round",
+          borderColor: colors.borderBright,
           flexDirection: "column",
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             AgentTree,
@@ -21692,16 +21705,16 @@ function SessionsScreenInner({
         {
           width: rightWidth,
           height: panelHeight,
-          borderStyle: "single",
-          borderColor: colors.border,
+          borderStyle: "round",
+          borderColor: colors.borderBright,
           flexDirection: "column",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { paddingX: 1, height: 1, flexDirection: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: rightMode === "stats" ? colors.accent : colors.textDim, bold: rightMode === "stats", children: "[Stats]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: colors.textDim, children: " " }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: rightMode === "messages" ? colors.accent : colors.textDim, bold: rightMode === "messages", children: "[Messages]" }),
+              rightMode === "stats" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { backgroundColor: colors.bgHighlight, color: colors.accent, bold: true, children: " Stats " }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: colors.textDim, children: " Stats " }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: colors.textMuted, children: "\u2502" }),
+              rightMode === "messages" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { backgroundColor: colors.bgHighlight, color: colors.accent, bold: true, children: " Messages " }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: colors.textDim, children: " Messages " }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box_default, { flexGrow: 1 }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: colors.textDim, children: "Tab:switch" })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: colors.textMuted, children: "Tab:switch" })
             ] }),
             rightMode === "stats" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DetailsPanel, { workflow: selectedWorkflow, height: innerHeight - 1 }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               MessagesPanel,
@@ -21766,10 +21779,10 @@ function SuccessBar({ successes, calls, width = 12 }) {
   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;
+  const color = pct >= 0.9 ? colors.teal : pct >= 0.7 ? colors.warning : colors.error;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color, children: "\u2588".repeat(filled) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.border, children: "\u2591".repeat(empty) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color, children: "\u2593".repeat(filled) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "\u2591".repeat(empty) }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { color: colors.textDim, children: [
       " ",
       Math.round(pct * 100),
@@ -21797,7 +21810,8 @@ function ToolsScreenInner({ workflows, isActive, contentHeight, terminalWidth })
         return copy.sort((a, b) => b.avgDurationMs - a.avgDurationMs);
     }
   }, [allTools, sortKey]);
-  const listHeight = contentHeight - 4;
+  const statusBarHeight = 2;
+  const listHeight = contentHeight - statusBarHeight - 3;
   const clampedIndex = Math.min(selectedIndex, Math.max(0, sortedTools.length - 1));
   const selectedTool = sortedTools[clampedIndex] ?? null;
   const startIndex = clampedIndex >= listHeight ? clampedIndex - listHeight + 1 : 0;
@@ -21824,84 +21838,70 @@ function ToolsScreenInner({ workflows, isActive, contentHeight, terminalWidth })
     { isActive }
   );
   const sortLabels = {
-    calls: "Calls",
-    failures: "Failures",
-    avgTime: "Avg Time"
+    calls: "calls",
+    failures: "failures",
+    avgTime: "avg-time"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { flexDirection: "column", width: terminalWidth, height: contentHeight, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { paddingX: 1, flexDirection: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.accent, bold: true, children: "Tools" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.accent, bold: true, children: "\u25C6 TOOLS" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { flexGrow: 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { color: colors.textDim, children: [
-        "sort:",
-        " ",
-        ["calls", "failures", "avgTime"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { color: sortKey === k ? colors.accent : colors.textDim, children: [
-          "[",
-          k === sortKey ? sortLabels[k] : k,
-          "]",
-          " "
-        ] }, k)),
-        "Tab:cycle"
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "sort: " }),
+      ["calls", "failures", "avgTime"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { color: sortKey === k ? colors.teal : colors.textMuted, children: [
+        sortKey === k ? `[${sortLabels[k]}]` : sortLabels[k],
+        " "
+      ] }, k)),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "Tab:cycle" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { flexDirection: "row", flexGrow: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { width: 36, flexDirection: "column", borderStyle: "single", borderColor: colors.border, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { width: 36, flexDirection: "column", borderStyle: "round", borderColor: colors.borderBright, children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { paddingX: 1, flexDirection: "row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, bold: true, children: "Tool" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.purple, bold: true, children: "TOOL" }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { flexGrow: 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: "calls " }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: "err" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "calls " }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "err" })
         ] }),
-        visibleTools.map((tool, i) => {
+        visibleTools.map((tool) => {
           const isSelected = tool.name === selectedTool?.name;
           return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { flexDirection: "row", paddingX: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              Text,
-              {
-                color: isSelected ? colors.accent : colors.textDim,
-                bold: isSelected,
-                children: [
-                  isSelected ? "\u25B6 " : "  ",
-                  truncate5(tool.name, 20)
-                ]
-              }
-            ),
+            isSelected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.bgHighlight, backgroundColor: colors.accent, bold: true, children: `\u25B6 ${truncate5(tool.name, 20)}` }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: `  ${truncate5(tool.name, 20)}` }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { flexGrow: 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.info, children: tool.calls }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: " " }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: tool.failures > 0 ? colors.error : colors.textDim, children: tool.failures })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.accentAlt, children: tool.calls }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: " " }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: tool.failures > 0 ? colors.error : colors.textMuted, children: tool.failures })
           ] }, tool.name);
         }),
         allTools.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: "No tool data yet" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { flexGrow: 1, flexDirection: "column", borderStyle: "single", borderColor: colors.border, paddingX: 1, children: selectedTool ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.cyan, bold: true, children: selectedTool.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { flexGrow: 1, flexDirection: "column", borderStyle: "round", borderColor: colors.borderBright, paddingX: 1, children: selectedTool ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.accent, bold: true, children: selectedTool.name }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { marginTop: 1, flexDirection: "column", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.purple, bold: true, children: "\u2500\u2500 STATS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { flexDirection: "row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { width: 14, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: "Total calls" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { width: 14, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "Total calls" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.text, children: selectedTool.calls })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { flexDirection: "row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { width: 14, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: "Successes" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { width: 14, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "Successes" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.success, children: selectedTool.successes })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { flexDirection: "row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { width: 14, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: "Failures" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: selectedTool.failures > 0 ? colors.error : colors.textDim, children: selectedTool.failures })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { width: 14, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "Failures" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: selectedTool.failures > 0 ? colors.error : colors.textMuted, children: selectedTool.failures })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { flexDirection: "row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { width: 14, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: "Avg time" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { width: 14, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "Avg time" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.info, children: formatDuration3(selectedTool.avgDurationMs) })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { marginTop: 1, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textDim, children: "Success rate " }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.textMuted, children: "success rate " }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SuccessBar, { successes: selectedTool.successes, calls: selectedTool.calls })
         ] }),
         selectedTool.recentErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.warning, bold: true, children: "Recent Errors" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.purple, bold: true, children: "\u2500\u2500 RECENT ERRORS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }),
           selectedTool.recentErrors.map((err, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { flexDirection: "row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.error, children: "\u2022 " }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.error, children: "\u2717 " }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: colors.text, children: truncate5(err, 60) })
           ] }, i))
         ] })
@@ -21937,6 +21937,7 @@ var SparkLine = (0, import_react30.memo)(SparkLineInner);
 
 // src/ui/screens/OverviewScreen.tsx
 var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+var TIME_FILTER_OPTIONS = [1, 7, 30, 90, 0];
 function formatTokens5(n) {
   if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
   if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
@@ -21949,7 +21950,11 @@ function StatRow2({ label, value, color = colors.text }) {
   ] });
 }
 function SectionHeader({ title }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.purple, bold: true, children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.purple, bold: true, children: [
+    "\u2500\u2500 ",
+    title.toUpperCase(),
+    " "
+  ] }) });
 }
 function ErrorBar({
   label,
@@ -21964,17 +21969,16 @@ function ErrorBar({
   const errPct = calls > 0 ? Math.round(errors / calls * 100) : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { width: labelWidth, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.text, children: truncate6(label, labelWidth - 1) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.success, children: "\u2588".repeat(okFilled) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: errors > 0 ? colors.error : colors.border, children: "\u2588".repeat(errFilled) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.teal, children: "\u2593".repeat(okFilled) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: errors > 0 ? colors.error : colors.textMuted, children: "\u2593".repeat(errFilled) }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.textDim, children: [
       " ",
-      calls,
-      " calls"
+      calls
     ] }),
     errors > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.error, children: [
-      " ",
+      " \u2717",
       errors,
-      " err (",
+      " (",
       errPct,
       "%)"
     ] })
@@ -21982,7 +21986,50 @@ function ErrorBar({
 }
 function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth }) {
   const pricing = (0, import_react31.useMemo)(() => getAllPricing(), []);
-  const stats = (0, import_react31.useMemo)(() => computeOverviewStats(workflows, pricing), [workflows, pricing]);
+  const [timeFilterIdx, setTimeFilterIdx] = (0, import_react31.useState)(0);
+  const [projectFilterIdx, setProjectFilterIdx] = (0, import_react31.useState)(0);
+  const timeFilter = TIME_FILTER_OPTIONS[timeFilterIdx];
+  const allProjects = (0, import_react31.useMemo)(() => {
+    const projects = /* @__PURE__ */ new Set();
+    for (const w of workflows) {
+      const p = w.mainSession.projectName ?? "Unknown";
+      projects.add(p);
+    }
+    return Array.from(projects).sort();
+  }, [workflows]);
+  const selectedProject = projectFilterIdx === 0 ? null : allProjects[projectFilterIdx - 1] ?? null;
+  const filteredWorkflows = (0, import_react31.useMemo)(() => {
+    let cutoff = 0;
+    if (timeFilter === 1) {
+      const today = /* @__PURE__ */ new Date();
+      today.setHours(0, 0, 0, 0);
+      cutoff = today.getTime();
+    } else if (timeFilter > 1) {
+      cutoff = Date.now() - timeFilter * 864e5;
+    }
+    return workflows.filter((w) => {
+      const ts = w.mainSession.timeCreated;
+      if (cutoff > 0 && (ts === null || ts < cutoff)) return false;
+      if (selectedProject !== null) {
+        const p = w.mainSession.projectName ?? "Unknown";
+        if (p !== selectedProject) return false;
+      }
+      return true;
+    });
+  }, [workflows, timeFilter, selectedProject]);
+  use_input_default((input) => {
+    if (!isActive) return;
+    if (input === "t") {
+      setTimeFilterIdx((i) => (i + 1) % TIME_FILTER_OPTIONS.length);
+    }
+    if (input === "p") {
+      setProjectFilterIdx((i) => (i + 1) % (allProjects.length + 1));
+    }
+    if (input === "P") {
+      setProjectFilterIdx((i) => (i - 1 + allProjects.length + 1) % (allProjects.length + 1));
+    }
+  }, { isActive });
+  const stats = (0, import_react31.useMemo)(() => computeOverviewStats(filteredWorkflows, pricing), [filteredWorkflows, pricing]);
   const topModels = (0, import_react31.useMemo)(
     () => Array.from(stats.modelBreakdown.entries()).sort((a, b) => b[1].calls - a[1].calls).slice(0, 4),
     [stats]
@@ -22013,14 +22060,27 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
   const midW = Math.max(26, Math.floor(terminalWidth * 0.3));
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "column", width: terminalWidth, height: contentHeight, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { paddingX: 1, flexDirection: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.accent, bold: true, children: "Overview" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.accent, bold: true, children: "\u25C6 OVERVIEW" }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexGrow: 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.textDim, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.textMuted, children: [
+        filteredWorkflows.length,
+        "/",
         workflows.length,
-        " workflows  ",
-        stats.totalTokens.total > 0 ? formatTokens5(stats.totalTokens.total) + " tokens" : ""
+        " workflows"
+      ] }),
+      stats.totalTokens.total > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.textMuted, children: [
+        "  ",
+        formatTokens5(stats.totalTokens.total),
+        " tokens"
       ] })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { paddingX: 1, flexDirection: "row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textMuted, children: "filter: " }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: timeFilter === 0 ? colors.accent : colors.teal, bold: true, children: timeFilter === 0 ? "all time" : timeFilter === 1 ? "today" : `last ${timeFilter}d` }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textMuted, children: "  \xB7  " }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: selectedProject ? colors.peach : colors.textMuted, children: selectedProject ? truncate6(selectedProject, 24) : "all projects" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textMuted, children: " (t/p)" })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", flexGrow: 1, paddingX: 1, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "column", width: leftW, children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionHeader, { title: "Totals" }),
@@ -22030,7 +22090,7 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "  cache r/w", value: `${formatTokens5(stats.totalTokens.cacheRead)} / ${formatTokens5(stats.totalTokens.cacheWrite)}`, color: colors.textDim }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "Total cost", value: `$${stats.totalCost.toFixed(4)}`, color: colors.success }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionHeader, { title: "Token trend (7d)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SparkLine, { values: weeklyTokenValues, color: colors.cyan }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SparkLine, { values: weeklyTokenValues, color: colors.accentAlt }) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textDim, children: stats.weeklyTokens[0]?.date.slice(3) ?? "" }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexGrow: 1 }),
@@ -22042,7 +22102,7 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textDim, children: stats.weeklyTokens[6]?.date.slice(3) ?? "" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionHeader, { title: "Sessions (7d)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SparkLine, { values: weeklySessionValues, color: colors.accent }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SparkLine, { values: weeklySessionValues, color: colors.purple }) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textDim, children: stats.weeklySessions[0]?.date.slice(3) ?? "" }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexGrow: 1 }),
@@ -22055,7 +22115,7 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textDim, children: stats.weeklySessions[6]?.date.slice(3) ?? "" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionHeader, { title: "Hourly activity" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.warning, children: hourSpark }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.teal, children: hourSpark }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textDim, children: "00" }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexGrow: 1 }),
@@ -22084,8 +22144,8 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionHeader, { title: "Top tools (calls / errors)" }),
         topTools.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textDim, children: "No tool data" }) : topTools.map(([name, data]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { width: 10, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.text, children: truncate6(name, 9) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: data.errors > 0 ? colors.warning : colors.info, children: "\u2588".repeat(Math.max(1, Math.round(data.calls / maxToolCalls * 12))) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.border, children: "\u2591".repeat(Math.max(0, 12 - Math.max(1, Math.round(data.calls / maxToolCalls * 12)))) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: data.errors > 0 ? colors.peach : colors.accentAlt, children: "\u2593".repeat(Math.max(1, Math.round(data.calls / maxToolCalls * 12))) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textMuted, children: "\u2591".repeat(Math.max(0, 12 - Math.max(1, Math.round(data.calls / maxToolCalls * 12)))) }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.textDim, children: [
             " ",
             data.calls
@@ -22119,8 +22179,8 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
             const durStr = avg < 1e3 ? `${avg.toFixed(0)}ms` : `${(avg / 1e3).toFixed(1)}s`;
             return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { width: 12, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.text, children: truncate6(name, 10) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.warning, children: "\u2588".repeat(filled) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.border, children: "\u2591".repeat(barW - filled) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.peach, children: "\u2593".repeat(filled) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textMuted, children: "\u2591".repeat(barW - filled) }),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.textDim, children: [
                 " ",
                 durStr
@@ -22139,7 +22199,7 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
         ] }, model))
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatusBar, { hints: "1:sessions  2:tools  r:refresh  q:quit" })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatusBar, { hints: "1:sessions  2:tools  t:time-filter  p/P:project  r:refresh  q:quit" })
   ] });
 }
 var OverviewScreen = (0, import_react31.memo)(OverviewScreenInner);
@@ -22472,7 +22532,7 @@ function App2({ refreshInterval = 2e3 }) {
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { color: colors.textDim, children: "Press q to quit" }) })
     ] });
   }
-  const contentHeight = terminalHeight - 2;
+  const contentHeight = terminalHeight - 3;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box_default, { flexDirection: "column", width: terminalWidth, height: terminalHeight - 1, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabBar, { activeScreen: screen, lastRefresh }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box_default, { width: terminalWidth, height: contentHeight, children: [
@@ -22508,9 +22568,7 @@ function App2({ refreshInterval = 2e3 }) {
 }
 
 // src/cli.ts
-import { createRequire } from "node:module";
-var require2 = createRequire(import.meta.url);
-var pkg = require2("../package.json");
+var pkg = true ? { version: "3.4.0", name: "opencode-top" } : devPkg();
 program.name(pkg.name).version(pkg.version).description("Monitor OpenCode AI coding sessions");
 program.command("live").description("Start live monitoring dashboard").option("-i, --interval <ms>", "Refresh interval in milliseconds", "2000").action((options) => {
   const refreshInterval = Number.parseInt(options.interval, 10);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-top",
-  "version": "3.3.6",
+  "version": "3.4.0",
   "description": "Monitor OpenCode AI coding sessions - Token usage, costs, and agent analytics",
   "type": "module",
   "bin": {