@tokentop/ttop 0.5.0 → 0.6.1

package/src/tui/views/RealTimeDashboard.tsx

@@ -2,11 +2,13 @@ import type { ScrollBoxRenderable } from "@opentui/core";
 import { useTerminalDimensions } from "@opentui/react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { notificationBus } from "@/plugins/notification-bus.ts";
+import { classifyProviderError } from "@/utils/error-category.ts";
 import { HelpOverlay } from "../components/HelpOverlay.tsx";
 import { KpiStrip } from "../components/KpiStrip.tsx";
 import { ProviderLimitsPanel } from "../components/ProviderLimitsPanel.tsx";
 import { SessionsTable } from "../components/SessionsTable.tsx";
 import { type DriverDimension, getSidebarMode, SmartSidebar } from "../components/SmartSidebar.tsx";
+import { SortOverlay } from "../components/SortOverlay.tsx";
 import { useAgentSessions } from "../contexts/AgentSessionContext.tsx";
 import { useConfig } from "../contexts/ConfigContext.tsx";
 import { useDashboardRuntime } from "../contexts/DashboardRuntimeContext.tsx";
@@ -15,6 +17,8 @@ import { usePlugins } from "../contexts/PluginContext.tsx";
 import { useColors } from "../contexts/ThemeContext.tsx";
 import { useTimeWindow } from "../contexts/TimeWindowContext.tsx";
 import { useDashboardKeyboard } from "../hooks/useDashboardKeyboard.ts";
+import type { SortDirection, SortField } from "../types/sort.ts";
+import { SORT_FIELDS } from "../types/sort.ts";
 import { getProviderColor } from "../utils/providerColor.ts";
 
 export function RealTimeDashboard() {
@@ -30,6 +34,23 @@ export function RealTimeDashboard() {
   const showLargeHeader = terminalHeight >= 35;
   const showProviderLimitsPanel = terminalHeight >= 24;
 
+  // SessionsTable hides REQ, NAME, DUR, TIME columns in narrow mode (<140).
+  // Filter sort fields to match visible columns.
+  const SESSIONS_WIDE_THRESHOLD = 140;
+  const NARROW_HIDDEN_FIELDS: ReadonlySet<SortField> = new Set([
+    "requests",
+    "name",
+    "duration",
+    "time",
+  ]);
+  const visibleSortFields = useMemo(
+    () =>
+      terminalWidth >= SESSIONS_WIDE_THRESHOLD
+        ? SORT_FIELDS
+        : SORT_FIELDS.filter((f) => !NARROW_HIDDEN_FIELDS.has(f.id)),
+    [terminalWidth],
+  );
+
   // Visible-row count for scroll tracking — every non-session-data line must be counted.
   const visibleRows = (() => {
     const appChrome = (showLargeHeader ? 7 : 1) + 1; // App.tsx: Header + StatusBar
@@ -61,7 +82,9 @@ export function RealTimeDashboard() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(config.display.sidebarCollapsed);
   const [filterQuery, setFilterQuery] = useState("");
   const [isFiltering, setIsFiltering] = useState(false);
-  const [sortField, setSortField] = useState<"cost" | "tokens" | "time">("cost");
+  const [sortField, setSortField] = useState<SortField>("time");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
+  const [showSortOverlay, setShowSortOverlay] = useState(false);
   const [pendingG, setPendingG] = useState(false);
   const scrollOffsetRef = useRef(0);
   const selectedSessionIdRef = useRef<string | null>(null);
@@ -184,14 +207,53 @@ export function RealTimeDashboard() {
       const bActive = b.status === "active" ? 1 : 0;
       if (bActive !== aActive) return bActive - aActive;
 
-      if (sortField === "cost") return (b.totalCostUsd ?? 0) - (a.totalCostUsd ?? 0);
-      if (sortField === "tokens")
-        return b.totals.input + b.totals.output - (a.totals.input + a.totals.output);
-      return b.lastActivityAt - a.lastActivityAt;
+      let cmp = 0;
+      switch (sortField) {
+        case "cost":
+          cmp = (a.totalCostUsd ?? 0) - (b.totalCostUsd ?? 0);
+          break;
+        case "tokens":
+          cmp = a.totals.input + a.totals.output - (b.totals.input + b.totals.output);
+          break;
+        case "time":
+          cmp = a.lastActivityAt - b.lastActivityAt;
+          break;
+        case "requests":
+          cmp = a.requestCount - b.requestCount;
+          break;
+        case "duration": {
+          const aDur = (a.endedAt ?? Date.now()) - a.startedAt;
+          const bDur = (b.endedAt ?? Date.now()) - b.startedAt;
+          cmp = aDur - bDur;
+          break;
+        }
+        case "project": {
+          const aProj = a.projectPath?.split("/").pop() ?? "";
+          const bProj = b.projectPath?.split("/").pop() ?? "";
+          cmp = aProj.localeCompare(bProj);
+          break;
+        }
+        case "agent":
+          cmp = a.agentName.localeCompare(b.agentName);
+          break;
+        case "model": {
+          const aModel = a.streams[0]?.modelId ?? "";
+          const bModel = b.streams[0]?.modelId ?? "";
+          cmp = aModel.localeCompare(bModel);
+          break;
+        }
+        case "name": {
+          const aName = a.sessionName ?? "";
+          const bName = b.sessionName ?? "";
+          cmp = aName.localeCompare(bName);
+          break;
+        }
+      }
+      return sortDirection === "desc" ? -cmp : cmp;
     });
 
     return result;
-  }, [baseFilteredSessions, activeDriverFilter, driverDimension, sortField]);
+  }, [baseFilteredSessions, activeDriverFilter, driverDimension, sortField, sortDirection]);
 
   // Stabilize selection across re-sorts: track selected session by ID
   // so the highlight follows the same session when live data causes reordering.
@@ -261,6 +323,7 @@ export function RealTimeDashboard() {
       filterQuery,
       isFiltering,
       sortField,
+      sortDirection,
       pendingG,
       scrollOffset: scrollOffsetRef.current,
       limitSelectedIndex,
@@ -269,6 +332,7 @@ export function RealTimeDashboard() {
       selectedDriverIndex,
       activeDriverFilter,
       sidebarMode,
+      showSortOverlay,
     },
     actions: {
       setShowHelp,
@@ -280,12 +344,14 @@ export function RealTimeDashboard() {
       setFilterQuery,
       setIsFiltering,
       setSortField,
+      setSortDirection,
       setPendingG,
       setScrollOffset,
       setLimitSelectedIndex,
       setDriverDimension,
       setSelectedDriverIndex,
       setActiveDriverFilter,
+      setShowSortOverlay,
     },
     processedSessions,
   });
@@ -348,6 +414,19 @@ export function RealTimeDashboard() {
   return (
     <box flexDirection="column" flexGrow={1} padding={1} gap={1} overflow="hidden">
       {showHelp && <HelpOverlay />}
+      {showSortOverlay && (
+        <SortOverlay
+          fields={visibleSortFields}
+          currentField={sortField}
+          currentDirection={sortDirection}
+          onSelect={(field, direction) => {
+            setSortField(() => field);
+            setSortDirection(() => direction);
+            setShowSortOverlay(false);
+          }}
+          onClose={() => setShowSortOverlay(false)}
+        />
+      )}
 
       <KpiStrip
         totalCost={windowedKpis.cost}
@@ -382,7 +461,9 @@ export function RealTimeDashboard() {
           name: p.plugin.name,
           usedPercent: getMaxUsedPercent(p),
           color: providerColorOf(p.plugin.id),
-          ...(p.usage?.error ? { error: p.usage.error } : {}),
+          ...(p.usage?.error
+            ? { error: p.usage.error, errorCategory: classifyProviderError(p.usage.error) }
+            : {}),
         }))}
         focused={focusedPanel === "limits"}
         selectedIndex={limitSelectedIndex}
@@ -416,6 +497,8 @@ export function RealTimeDashboard() {
           focusedPanel={focusedPanel}
           windowLabel={windowLabel}
           getProviderColor={providerColorOf}
+          sortField={sortField}
+          sortDirection={sortDirection}
         />
 
         {!effectiveSidebarCollapsed && (
@@ -440,7 +523,7 @@ export function RealTimeDashboard() {
               : activeDriverFilter
                 ? `Filter: ${activeDriverFilter}  Esc clear`
                 : focusedPanel === "sessions"
-                  ? "/ filter  ↑↓ navigate  Enter details  s sort  l limits  Tab next  ⇧Tab prev"
+                  ? "/ filter  ↑↓ navigate  Enter details  s sort  l limits  Tab next"
                   : focusedPanel === "limits"
                     ? "←→ select provider  Tab next  ⇧Tab prev  Esc back"
                     : focusedPanel === "sidebar"

package/src/tui/views/SettingsView.tsx

@@ -2,6 +2,7 @@ import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import type { ConfigField } from "@tokentop/plugin-sdk";
 import { useCallback, useMemo, useState } from "react";
 import type { AppConfig } from "@/config/schema.ts";
+import { notificationBus } from "@/plugins/notification-bus.ts";
 import { useConfig } from "../contexts/ConfigContext.tsx";
 import { useDemoMode } from "../contexts/DemoModeContext.tsx";
 import { usePlugins } from "../contexts/PluginContext.tsx";
@@ -14,10 +15,11 @@ interface SettingItem {
   key: string;
   label: string;
   category: SettingCategory;
-  type: "toggle" | "select" | "number";
+  type: "toggle" | "select" | "number" | "action";
   options?: string[];
   getValue: (config: AppConfig) => string | number | boolean;
   setValue: (config: AppConfig, value: string | number | boolean) => AppConfig;
+  onAction?: () => void;
 }
 
 const SETTINGS: SettingItem[] = [
@@ -192,6 +194,15 @@ const SETTINGS: SettingItem[] = [
       notifications: { ...c.notifications, soundEnabled: v as boolean },
     }),
   },
+  {
+    key: "testNotification",
+    label: "Test Notifications",
+    category: "notifications",
+    type: "action",
+    onAction: () => void notificationBus.testNotification(),
+    getValue: () => "▸ Run",
+    setValue: (c) => c,
+  },
 ];
 
 const CATEGORIES: { id: SettingCategory; label: string }[] = [
@@ -384,6 +395,11 @@ export function SettingsView() {
       } else if (key.name === "up" || key.name === "k") {
         setSelectedIndex((i) => Math.max(i - 1, 0));
       } else if (key.name === "return" || key.name === "space") {
+        const setting = categorySettings[selectedIndex];
+        if (setting?.type === "action" && setting.onAction) {
+          setting.onAction();
+          return;
+        }
         toggleCurrentSetting();
       } else if (key.name === "left" || key.name === "h") {
         const setting = categorySettings[selectedIndex];
@@ -479,13 +495,15 @@ export function SettingsView() {
               >
                 <text fg={isSelected ? colors.background : colors.text}>{setting.label}</text>
                 <text fg={isSelected ? colors.background : colors.textMuted}>
-                  {setting.type === "toggle"
-                    ? value
-                      ? "● ON"
-                      : "○ OFF"
-                    : setting.type === "select"
-                      ? `◂ ${value} ▸`
-                      : String(value)}
+                  {setting.type === "action"
+                    ? "▸ Run"
+                    : setting.type === "toggle"
+                      ? value
+                        ? "● ON"
+                        : "○ OFF"
+                      : setting.type === "select"
+                        ? `◂ ${value} ▸`
+                        : String(value)}
                 </text>
               </box>
             );

package/src/utils/__tests__/error-category.test.ts

@@ -0,0 +1,147 @@
+import { describe, expect, test } from "bun:test";
+import { classifyProviderError } from "../error-category.ts";
+
+describe("classifyProviderError", () => {
+  describe("auth errors", () => {
+    test("classifies expired token errors", () => {
+      expect(classifyProviderError("Token expired. Run any command in OpenCode to refresh.")).toBe(
+        "auth",
+      );
+      expect(
+        classifyProviderError(
+          "Token expired or invalid. Re-authenticate in OpenCode or Claude Code.",
+        ),
+      ).toBe("auth");
+      expect(classifyProviderError("OAuth token expired. Re-authenticate in OpenCode.")).toBe(
+        "auth",
+      );
+      expect(
+        classifyProviderError("OAuth token expired or invalid. Re-authenticate in OpenCode."),
+      ).toBe("auth");
+      expect(
+        classifyProviderError("OAuth token expired or invalid. Re-authenticate via Gemini CLI."),
+      ).toBe("auth");
+      expect(classifyProviderError("Claude Code token expired")).toBe("auth");
+    });
+
+    test("classifies scope errors", () => {
+      expect(
+        classifyProviderError(
+          "Token lacks required scope. Re-authenticate in OpenCode or Claude Code.",
+        ),
+      ).toBe("auth");
+    });
+
+    test("classifies missing credential errors", () => {
+      expect(
+        classifyProviderError(
+          "OAuth token or API key required. Authenticate via OpenCode or Claude Code.",
+        ),
+      ).toBe("auth");
+      expect(
+        classifyProviderError(
+          "OAuth token required. Sign in via OpenCode with ChatGPT Pro account.",
+        ),
+      ).toBe("auth");
+      expect(
+        classifyProviderError("OAuth token required. Sign in via OpenCode with Google account."),
+      ).toBe("auth");
+      expect(
+        classifyProviderError("OAuth token required. Login via Gemini CLI with Google account."),
+      ).toBe("auth");
+      expect(
+        classifyProviderError("API key required. Set OPENAI_API_KEY environment variable."),
+      ).toBe("auth");
+      expect(
+        classifyProviderError("API key required. Set PERPLEXITY_API_KEY environment variable."),
+      ).toBe("auth");
+      expect(classifyProviderError("API key required. Configure MiniMax in OpenCode.")).toBe(
+        "auth",
+      );
+      expect(classifyProviderError("API key required. Configure Chutes in OpenCode.")).toBe("auth");
+      expect(classifyProviderError("API key required. Configure Z.ai in OpenCode.")).toBe("auth");
+      expect(
+        classifyProviderError("API key required. Run /connect in OpenCode to set up Zen."),
+      ).toBe("auth");
+    });
+
+    test("classifies authorization failure errors", () => {
+      expect(classifyProviderError("Authorization failed. Check your MiniMax API key.")).toBe(
+        "auth",
+      );
+      expect(classifyProviderError("Authorization failed. Check your Chutes API key.")).toBe(
+        "auth",
+      );
+      expect(classifyProviderError("Authorization failed. Check your Z.ai API key.")).toBe("auth");
+    });
+
+    test("classifies invalid key errors", () => {
+      expect(classifyProviderError("Invalid API key")).toBe("auth");
+      expect(classifyProviderError("Unauthorized – check API key")).toBe("auth");
+    });
+
+    test("classifies HTTP status code auth errors", () => {
+      expect(classifyProviderError("API error: 401 Unauthorized")).toBe("auth");
+      expect(classifyProviderError("API error: 403 Forbidden")).toBe("auth");
+      expect(classifyProviderError("Authentication failed (401). Check API key.")).toBe("auth");
+    });
+
+    test("classifies not-configured errors", () => {
+      expect(classifyProviderError("Not configured: missing GitHub token")).toBe("auth");
+      expect(classifyProviderError("Copilot not enabled for this account")).toBe("auth");
+    });
+
+    test("classifies refresh failure errors", () => {
+      expect(classifyProviderError("No valid access token and refresh failed.")).toBe("auth");
+      expect(
+        classifyProviderError("ChatGPT account ID required. Re-authenticate in OpenCode."),
+      ).toBe("auth");
+      expect(
+        classifyProviderError(
+          "MiniMax groupId required. Set MINIMAX_GROUP_ID or configure in OpenCode.",
+        ),
+      ).toBe("auth");
+    });
+  });
+
+  describe("rate limit errors", () => {
+    test("classifies rate limit errors", () => {
+      expect(classifyProviderError("Rate limited")).toBe("rate_limit");
+      expect(classifyProviderError("API error: 429 Too Many Requests")).toBe("rate_limit");
+    });
+  });
+
+  describe("insufficient credits errors", () => {
+    test("classifies insufficient credits errors", () => {
+      expect(classifyProviderError("Insufficient credits")).toBe("insufficient_credits");
+    });
+  });
+
+  describe("timeout errors", () => {
+    test("classifies timeout errors", () => {
+      expect(classifyProviderError("The operation timed out")).toBe("timeout");
+      expect(classifyProviderError("Request timeout")).toBe("timeout");
+      expect(classifyProviderError("ETIMEDOUT")).toBe("timeout");
+      expect(classifyProviderError("Request aborted")).toBe("timeout");
+    });
+  });
+
+  describe("network errors", () => {
+    test("classifies network errors", () => {
+      expect(classifyProviderError("fetch failed")).toBe("network");
+      expect(classifyProviderError("ECONNREFUSED")).toBe("network");
+      expect(classifyProviderError("ENOTFOUND")).toBe("network");
+      expect(classifyProviderError("ECONNRESET")).toBe("network");
+      expect(classifyProviderError("DNS resolution failed")).toBe("network");
+      expect(classifyProviderError("Network error")).toBe("network");
+    });
+  });
+
+  describe("unknown errors", () => {
+    test("classifies unrecognized errors as unknown", () => {
+      expect(classifyProviderError("Unknown error")).toBe("unknown");
+      expect(classifyProviderError("API error: 500 Internal Server Error")).toBe("unknown");
+      expect(classifyProviderError("Something went wrong")).toBe("unknown");
+    });
+  });
+});

package/src/utils/currency.ts

@@ -26,7 +26,9 @@ export function parseCurrencyInput(input: string): number | null {
   } else if (hasComma) {
     const parts = normalized.split(",");
     // 3 digits after comma = thousands separator (1,234), otherwise decimal (10,50)
-    if (parts.length === 2 && parts[1]!.length === 3 && parts[0]!.length > 0) {
+    const afterComma = parts[1]?.length ?? 0;
+    const beforeComma = parts[0]?.length ?? 0;
+    if (parts.length === 2 && afterComma === 3 && beforeComma > 0) {
       normalized = normalized.replace(",", "");
     } else {
       normalized = normalized.replace(",", ".");
@@ -35,7 +37,7 @@ export function parseCurrencyInput(input: string): number | null {
 
   const parsed = parseFloat(normalized);
 
-  if (isNaN(parsed) || !isFinite(parsed)) {
+  if (Number.isNaN(parsed) || !Number.isFinite(parsed)) {
     return null;
   }
 

package/src/utils/error-category.ts

@@ -0,0 +1,91 @@
+export type ProviderErrorCategory =
+  | "auth"
+  | "rate_limit"
+  | "timeout"
+  | "network"
+  | "insufficient_credits"
+  | "unknown";
+
+export function classifyProviderError(error: string): ProviderErrorCategory {
+  const lower = error.toLowerCase();
+
+  // Auth errors: expired tokens, invalid credentials, scope issues
+  if (
+    lower.includes("expired") ||
+    lower.includes("re-authenticate") ||
+    lower.includes("invalid") ||
+    lower.includes("unauthorized") ||
+    lower.includes("scope") ||
+    lower.includes("authentication failed") ||
+    lower.includes("authorization failed") ||
+    lower.includes("check api key") ||
+    lower.includes("api key required") ||
+    lower.includes("token required") ||
+    lower.includes("not configured") ||
+    lower.includes("sign in") ||
+    lower.includes("refresh failed") ||
+    lower.includes("not enabled") ||
+    lower.includes("configure") ||
+    /\b401\b/.test(lower) ||
+    /\b403\b/.test(lower)
+  ) {
+    return "auth";
+  }
+
+  // Rate limits
+  if (
+    lower.includes("rate limit") ||
+    lower.includes("too many requests") ||
+    /\b429\b/.test(lower)
+  ) {
+    return "rate_limit";
+  }
+
+  // Insufficient credits
+  if (lower.includes("insufficient") || lower.includes("credits") || /\b402\b/.test(lower)) {
+    return "insufficient_credits";
+  }
+
+  // Timeouts
+  if (
+    lower.includes("timeout") ||
+    lower.includes("timed out") ||
+    lower.includes("etimedout") ||
+    lower.includes("aborted")
+  ) {
+    return "timeout";
+  }
+
+  // Network errors
+  if (
+    lower.includes("econnrefused") ||
+    lower.includes("enotfound") ||
+    lower.includes("network") ||
+    lower.includes("fetch failed") ||
+    lower.includes("dns") ||
+    lower.includes("econnreset")
+  ) {
+    return "network";
+  }
+
+  return "unknown";
+}
+
+interface ErrorCategoryDisplay {
+  label: string;
+  icon: string;
+  isWarning: boolean;
+}
+
+const CATEGORY_DISPLAY: Record<ProviderErrorCategory, ErrorCategoryDisplay> = {
+  auth: { label: "AUTH", icon: "\u26B7", isWarning: true },
+  rate_limit: { label: "RATE", icon: "\u29D7", isWarning: true },
+  timeout: { label: "TIME", icon: "\u29D7", isWarning: true },
+  insufficient_credits: { label: "CRED", icon: "\u2717", isWarning: true },
+  network: { label: "NET", icon: "\u2717", isWarning: false },
+  unknown: { label: "ERR", icon: "\u2717", isWarning: false },
+};
+
+export function getErrorCategoryDisplay(category: ProviderErrorCategory): ErrorCategoryDisplay {
+  return CATEGORY_DISPLAY[category];
+}

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.5.0"; // x-release-please-version
+export const VERSION = "0.6.1"; // x-release-please-version