feat: CodeBurn-inspired overview dashboard with dense multi-panel layout (#8)

Replace the old tabbed layout with a dense, all-at-once grid dashboard
inspired by CodeBurn. Shows cost, tokens, sessions, cache hit rate,
daily activity, projects, models, activity categories, tools, and MCP
servers — all visible simultaneously without tab switching.

- New OverviewDashboard component with 6 data panels in 2-column grid
- HBar gradient component for horizontal bar visualizations
- Dashboard/Analytics nav toggle (analytics preserved as secondary view)
- Rate limits integrated into dashboard with 60s polling
- Project path normalization (merges subdirs like scripts/ into parent)
- Version badge in macOS menu bar app
- Responsive layout with mobile breakpoint

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: NOGIT007

ClaudeMonitorBar/Sources/main.swift

@@ -8,6 +8,14 @@ class ServerManager: ObservableObject {
     @Published var isRunning = false
     @Published var statusText = "Checking..."
 
+    let version: String = {
+        let pkgPath = "/Users/kennetkusk/code/claude-monitoring/package.json"
+        guard let data = try? Data(contentsOf: URL(fileURLWithPath: pkgPath)),
+              let json = try? JSONSerialization.jsonObject(with: data) as? [String: Any],
+              let v = json["version"] as? String else { return "?" }
+        return "v\(v)"
+    }()
+
     private var pollTimer: Timer?
     private let port = 4500
     private let repoPath = "/Users/kennetkusk/code/claude-monitoring"
@@ -172,6 +180,13 @@ struct MenuBarView: View {
                     .frame(width: 8, height: 8)
                 Text("Claude Code Monitor")
                     .font(.headline)
+                Text(serverManager.version)
+                    .font(.caption2)
+                    .foregroundColor(.secondary)
+                    .padding(.horizontal, 5)
+                    .padding(.vertical, 2)
+                    .background(Color.secondary.opacity(0.12))
+                    .cornerRadius(4)
                 Spacer()
                 Text(serverManager.statusText)
                     .font(.caption)

src/client/App.tsx

@@ -1,12 +1,13 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import type { ActiveSession, DayEntry, PeriodStats, WsMessage } from "./types";
+import { OverviewDashboard } from "./components/OverviewDashboard";
 import { LiveSessions } from "./components/LiveSessions";
 import { StatsTabs } from "./components/StatsTabs";
-import { RateLimits } from "./components/RateLimits";
 import { AnalyticsTabs } from "./components/AnalyticsTabs";
 
 type Period = "today" | "week" | "month";
 type WsStatus = "connecting" | "connected" | "disconnected";
+type View = "dashboard" | "analytics";
 
 export function App() {
   const [sessions, setSessions] = useState<ActiveSession[]>([]);
@@ -15,6 +16,7 @@ export function App() {
   const [period, setPeriod] = useState<Period>("today");
   const [wsStatus, setWsStatus] = useState<WsStatus>("connecting");
   const [apiError, setApiError] = useState<string | null>(null);
+  const [view, setView] = useState<View>("dashboard");
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
 
@@ -80,8 +82,6 @@ export function App() {
         });
 
     fetchSessions();
-
-    // Poll every 15s to pick up closed sessions
     const pollInterval = setInterval(fetchSessions, 15000);
 
     fetch("/api/history?days=30")
@@ -102,97 +102,7 @@ export function App() {
   }, [connectWs]);
 
   return (
-    <div style={{ maxWidth: 1200, margin: "0 auto", padding: "2rem 1.5rem 3rem" }}>
-      {/* Top bar */}
-      <header
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginBottom: "2.5rem",
-          paddingBottom: "1.25rem",
-          borderBottom: `1px solid rgba(69, 71, 90, 0.3)`,
-        }}
-      >
-        <div style={{ display: "flex", alignItems: "baseline", gap: "0.75rem" }}>
-          <h1
-            style={{
-              margin: 0,
-              fontFamily: "var(--font-display)",
-              fontSize: "1.6rem",
-              fontWeight: 800,
-              color: "var(--ctp-lavender)",
-              letterSpacing: "-0.02em",
-            }}
-          >
-            Claude Monitor
-          </h1>
-          {sessions.length > 0 && (
-            <span
-              style={{
-                background: "rgba(166, 227, 161, 0.15)",
-                color: "var(--ctp-green)",
-                fontFamily: "var(--font-mono)",
-                fontSize: "0.7rem",
-                fontWeight: 600,
-                padding: "0.2rem 0.6rem",
-                borderRadius: 20,
-                border: "1px solid rgba(166, 227, 161, 0.2)",
-              }}
-            >
-              {sessions.length} active
-            </span>
-          )}
-        </div>
-        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-          {window.__SNAPSHOT__ ? (
-            <span
-              style={{
-                fontFamily: "var(--font-mono)",
-                fontSize: "0.6rem",
-                color: "var(--ctp-yellow)",
-              }}
-              title={`Snapshot captured ${new Date(window.__SNAPSHOT__.capturedAt).toLocaleString()}`}
-            >
-              snapshot · {new Date(window.__SNAPSHOT__.capturedAt).toLocaleDateString()}
-            </span>
-          ) : (
-            <span
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "0.3rem",
-                fontFamily: "var(--font-mono)",
-                fontSize: "0.6rem",
-                color: wsStatus === "connected" ? "var(--ctp-green)"
-                  : wsStatus === "connecting" ? "var(--ctp-yellow)"
-                  : "var(--ctp-red)",
-              }}
-              title={`WebSocket: ${wsStatus}`}
-            >
-              <span style={{
-                width: 6,
-                height: 6,
-                borderRadius: "50%",
-                background: "currentColor",
-                display: "inline-block",
-              }} />
-              {wsStatus === "disconnected" ? "reconnecting…" : "live"}
-            </span>
-          )}
-          <span
-            style={{
-              fontFamily: "var(--font-mono)",
-              fontSize: "0.65rem",
-              color: "var(--ctp-overlay0)",
-              letterSpacing: "0.05em",
-            }}
-          >
-            powered by bun
-          </span>
-        </div>
-      </header>
-
+    <div>
       {/* Error banner */}
       {apiError && (
         <div
@@ -201,7 +111,7 @@ export function App() {
             border: "1px solid rgba(243, 139, 168, 0.3)",
             borderRadius: 10,
             padding: "0.6rem 1rem",
-            marginBottom: "1.5rem",
+            margin: "1rem 1.5rem 0",
             fontFamily: "var(--font-mono)",
             fontSize: "0.75rem",
             color: "var(--ctp-red)",
@@ -212,47 +122,54 @@ export function App() {
         </div>
       )}
 
-      {/* Live Sessions */}
-      <section style={{ marginBottom: "2.5rem" }}>
-        <h2 className="section-title">Live Sessions</h2>
-        <LiveSessions sessions={sessions} />
-      </section>
-
-      {/* Rate Limits */}
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 className="section-title">Rate Limits</h2>
-        <div className="card">
-          <RateLimits />
+      {/* Navigation */}
+      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "1rem 1.5rem 0" }}>
+        <nav className="ov-nav">
+          <button
+            className={`ov-nav-btn ${view === "dashboard" ? "ov-nav-btn--active" : ""}`}
+            onClick={() => setView("dashboard")}
+          >
+            Dashboard
+          </button>
+          <button
+            className={`ov-nav-btn ${view === "analytics" ? "ov-nav-btn--active" : ""}`}
+            onClick={() => setView("analytics")}
+          >
+            Analytics
+          </button>
+        </nav>
+      </div>
+
+      {view === "dashboard" ? (
+        <>
+          <OverviewDashboard
+            activeSessions={sessions.length}
+            wsStatus={wsStatus}
+          />
+
+          {/* Live Sessions — show below dashboard when active */}
+          {sessions.length > 0 && (
+            <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 1.5rem 2rem" }}>
+              <h2 className="section-title">Live Sessions</h2>
+              <LiveSessions sessions={sessions} />
+            </div>
+          )}
+        </>
+      ) : (
+        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "1rem 1.5rem 3rem" }}>
+          {/* Stats */}
+          <section style={{ marginBottom: "2rem" }}>
+            <h2 className="section-title">Usage Statistics</h2>
+            <StatsTabs onStatsChange={setCurrentStats} onPeriodChange={setPeriod} />
+          </section>
+
+          {/* Analytics */}
+          <section style={{ marginBottom: "2.5rem" }}>
+            <h2 className="section-title">Analytics</h2>
+            <AnalyticsTabs period={period} currentStats={currentStats} history={history} />
+          </section>
         </div>
-      </section>
-
-      {/* Stats with comparison badges */}
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 className="section-title">Usage Statistics</h2>
-        <StatsTabs onStatsChange={setCurrentStats} onPeriodChange={setPeriod} />
-      </section>
-
-      {/* Analytics */}
-      <section style={{ marginBottom: "2.5rem" }}>
-        <h2 className="section-title">Analytics</h2>
-        <AnalyticsTabs period={period} currentStats={currentStats} history={history} />
-      </section>
-
-      {/* Footer */}
-      <footer
-        style={{
-          marginTop: "3rem",
-          paddingTop: "1.25rem",
-          borderTop: "1px solid rgba(69, 71, 90, 0.3)",
-          textAlign: "center",
-          fontFamily: "var(--font-mono)",
-          fontSize: "0.7rem",
-          color: "var(--ctp-overlay0)",
-          letterSpacing: "0.03em",
-        }}
-      >
-        made with AI <span style={{ color: "var(--ctp-red)", fontSize: "0.85rem" }}>♥</span>
-      </footer>
+      )}
     </div>
   );
 }

src/client/components/HBar.tsx

@@ -0,0 +1,57 @@
+/** Horizontal gradient bar — CodeBurn-inspired */
+
+interface Props {
+  /** 0–1 fraction filled */
+  value: number;
+  /** Bar width in px (default 80) */
+  width?: number;
+  /** Bar height in px (default 10) */
+  height?: number;
+}
+
+/** Interpolate blue → amber → orange based on percentage */
+function gradientColor(pct: number): string {
+  // blue(137,180,250) → amber(249,226,175) → orange(250,179,135)
+  if (pct <= 0.5) {
+    const t = pct / 0.5;
+    const r = Math.round(137 + (249 - 137) * t);
+    const g = Math.round(180 + (226 - 180) * t);
+    const b = Math.round(250 + (175 - 250) * t);
+    return `rgb(${r},${g},${b})`;
+  }
+  const t = (pct - 0.5) / 0.5;
+  const r = Math.round(249 + (250 - 249) * t);
+  const g = Math.round(226 + (179 - 226) * t);
+  const b = Math.round(175 + (135 - 175) * t);
+  return `rgb(${r},${g},${b})`;
+}
+
+export function HBar({ value, width = 80, height = 10 }: Props) {
+  const clamped = Math.max(0, Math.min(1, value));
+  const filledW = Math.round(clamped * width);
+
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        width,
+        height,
+        borderRadius: 3,
+        overflow: "hidden",
+        background: "rgba(69,71,90,0.3)",
+        flexShrink: 0,
+      }}
+    >
+      {filledW > 0 && (
+        <div
+          style={{
+            width: filledW,
+            height: "100%",
+            background: `linear-gradient(90deg, ${gradientColor(0)}, ${gradientColor(clamped)})`,
+            borderRadius: 3,
+          }}
+        />
+      )}
+    </div>
+  );
+}