claude-session-dashboard 0.2.1 → 0.3.1

package/dist/server/assets/{index-Do0HxVmM.js → index-Biupny11.js}

@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { p as paginatedSessionListQuery, a as activeSessionsQuery } from "./sessions.queries-B5ZBiVJy.js";
 import { a as formatDuration, b as formatRelativeTime, d as formatBytes } from "./format-DIZHV7IJ.js";
-import { u as usePrivacy, a as Route } from "./router-ChxlsPNU.js";
+import { u as usePrivacy, a as Route } from "./router-kB-tCwY9.js";
 import "./createSsrRpc-CVg2UDl0.js";
 import "../server.js";
 import "@tanstack/history";
@@ -46,9 +46,10 @@ function RunningTimer({ startedAt }) {
   return /* @__PURE__ */ jsx("span", { className: "text-emerald-400", children: formatDuration(elapsed) });
 }
 function SessionCard({ session }) {
-  const { privacyMode, anonymizePath, anonymizeProjectName } = usePrivacy();
+  const { privacyMode, anonymizePath, anonymizeProjectName, anonymizeBranch } = usePrivacy();
   const displayName = privacyMode ? anonymizeProjectName(session.projectName) : session.projectName;
-  const displayCwd = session.cwd ? privacyMode ? anonymizePath(session.cwd) : session.cwd : null;
+  const displayCwd = session.cwd ? anonymizePath(session.cwd, session.projectName) : null;
+  const displayBranch = session.branch ? anonymizeBranch(session.branch) : null;
   return /* @__PURE__ */ jsxs(
     Link,
     {
@@ -63,7 +64,7 @@ function SessionCard({ session }) {
               /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-semibold text-white", children: displayName }),
               /* @__PURE__ */ jsx(StatusBadge, { isActive: session.isActive })
             ] }),
-            session.branch && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs text-gray-500", children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: session.branch }) })
+            displayBranch && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs text-gray-500", children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: displayBranch }) })
           ] }),
           /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-gray-500", children: formatRelativeTime(session.lastActiveAt) })
         ] }),
@@ -129,7 +130,7 @@ function SessionFilters({ projects, activeCount }) {
         placeholder: "Search sessions...",
         value: localSearch,
         onChange: (e) => handleSearchChange(e.target.value),
-        className: "rounded-lg border border-gray-700 bg-gray-800/50 px-3 py-1.5 text-sm text-gray-200 placeholder-gray-500 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+        className: "rounded-lg border border-gray-700 bg-gray-800/50 px-3 py-1.5 text-sm text-gray-200 placeholder-gray-500 outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "flex rounded-lg border border-gray-700 text-xs", children: ["all", "active", "completed"].map((s) => /* @__PURE__ */ jsxs(
@@ -153,7 +154,7 @@ function SessionFilters({ projects, activeCount }) {
       {
         value: project,
         onChange: (e) => handleProjectChange(e.target.value),
-        className: "rounded-lg border border-gray-700 bg-gray-800/50 px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-blue-500",
+        className: "rounded-lg border border-gray-700 bg-gray-800/50 px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-brand-500",
         children: [
           /* @__PURE__ */ jsx("option", { value: "", children: "All projects" }),
           projects.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: privacyMode ? anonymizeProjectName(p) : p }, p))
@@ -167,20 +168,20 @@ const VALID_SIZES = [5, 10, 25, 50];
 function isValidSize(value) {
   return VALID_SIZES.includes(value);
 }
-function usePageSizePreference() {
-  const [storedPageSize, setStoredPageSize] = useState(null);
-  useEffect(() => {
-    try {
-      const raw = localStorage.getItem(STORAGE_KEY);
-      if (raw !== null) {
-        const parsed = Number(raw);
-        if (isValidSize(parsed)) {
-          setStoredPageSize(parsed);
-        }
-      }
-    } catch {
+function readStoredPageSize() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw !== null) {
+      const parsed = Number(raw);
+      if (isValidSize(parsed)) return parsed;
     }
-  }, []);
+  } catch {
+  }
+  return null;
+}
+function usePageSizePreference() {
+  const [storedPageSize, setStoredPageSize] = useState(readStoredPageSize);
   const setPageSize = useCallback((size) => {
     if (!isValidSize(size)) return;
     try {
@@ -211,7 +212,7 @@ function PaginationControls({
         {
           value: pageSize,
           onChange: (e) => onPageSizeChange(Number(e.target.value)),
-          className: "rounded-lg border border-gray-700 bg-gray-800/50 px-2 py-1 text-xs text-gray-200 outline-none focus:border-blue-500",
+          className: "rounded-lg border border-gray-700 bg-gray-800/50 px-2 py-1 text-xs text-gray-200 outline-none focus:border-brand-500",
           children: VALID_SIZES.map((size) => /* @__PURE__ */ jsxs("option", { value: size, children: [
             size,
             " / page"
@@ -255,7 +256,7 @@ function PaginationControls({
           "button",
           {
             onClick: () => onPageChange(item),
-            className: `min-w-[2rem] rounded-lg px-2 py-1.5 text-xs font-mono transition-colors ${item === page ? "bg-blue-600 text-white" : "border border-gray-700 bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200"}`,
+            className: `min-w-[2rem] rounded-lg px-2 py-1.5 text-xs font-mono transition-colors ${item === page ? "bg-brand-600 text-white" : "border border-gray-700 bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200"}`,
             children: item
           },
           item

package/dist/server/assets/{project-analytics.server-BkWSd6a8.js → project-analytics.server-t1bM6wAa.js}

@@ -1,11 +1,11 @@
 import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
-import { s as scanAllSessions } from "./session-scanner-CLfls9u-.js";
+import { s as scanAllSessions } from "./session-scanner-1h9TTTAV.js";
 import { c as createServerFn } from "../server.js";
 import "node:fs";
 import "node:path";
-import "./claude-path-BdwflgZ1.js";
+import "./claude-path-B2oho3NT.js";
 import "node:os";
-import "./session-parser-CAEXxF1D.js";
+import "./session-parser-CIucKYBT.js";
 import "node:readline";
 import "@tanstack/history";
 import "@tanstack/router-core/ssr/client";

package/dist/server/assets/{router-ChxlsPNU.js → router-kB-tCwY9.js}

@@ -1,27 +1,31 @@
 import { createRootRoute, Outlet, HeadContent, Scripts, createFileRoute, lazyRouteComponent, redirect, createRouter } from "@tanstack/react-router";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { useState, useRef, useEffect, useCallback, createContext, useContext } from "react";
+import { useState, useRef, useCallback, createContext, useContext } from "react";
 import { z } from "zod";
 const OS_USERNAME_PATTERN = /^(\/(?:Users|home))\/[^/]+/;
-function anonymizePath(path) {
+function anonymizePath(path, anonymizedProjectName) {
+  if (anonymizedProjectName) {
+    return `.../${anonymizedProjectName}`;
+  }
   return path.replace(OS_USERNAME_PATTERN, "$1/user");
 }
 const STORAGE_KEY = "claude-dashboard:privacy-mode";
+function readStoredPrivacyMode() {
+  if (typeof window === "undefined") return false;
+  try {
+    return localStorage.getItem(STORAGE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
 const PrivacyContext = createContext(null);
 function PrivacyProvider({ children }) {
-  const [privacyMode, setPrivacyMode] = useState(false);
+  const [privacyMode, setPrivacyMode] = useState(readStoredPrivacyMode);
   const projectNameMapRef = useRef(/* @__PURE__ */ new Map());
   const nextIndexRef = useRef(1);
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored === "true") {
-        setPrivacyMode(true);
-      }
-    } catch {
-    }
-  }, []);
+  const branchNameMapRef = useRef(/* @__PURE__ */ new Map());
+  const nextBranchIndexRef = useRef(1);
   const togglePrivacyMode = useCallback(() => {
     setPrivacyMode((prev) => {
       const next = !prev;
@@ -31,16 +35,11 @@ function PrivacyProvider({ children }) {
       }
       projectNameMapRef.current = /* @__PURE__ */ new Map();
       nextIndexRef.current = 1;
+      branchNameMapRef.current = /* @__PURE__ */ new Map();
+      nextBranchIndexRef.current = 1;
       return next;
     });
   }, []);
-  const anonymizePath$1 = useCallback(
-    (path) => {
-      if (!privacyMode) return path;
-      return anonymizePath(path);
-    },
-    [privacyMode]
-  );
   const anonymizeProjectName = useCallback(
     (name) => {
       if (!privacyMode) return name;
@@ -53,14 +52,38 @@ function PrivacyProvider({ children }) {
     },
     [privacyMode]
   );
+  const anonymizePathFn = useCallback(
+    (path, projectName) => {
+      if (!privacyMode) return path;
+      if (projectName) {
+        const anonName = anonymizeProjectName(projectName);
+        return anonymizePath(path, anonName);
+      }
+      return anonymizePath(path);
+    },
+    [privacyMode, anonymizeProjectName]
+  );
+  const anonymizeBranch = useCallback(
+    (branch) => {
+      if (!privacyMode) return branch;
+      const existing = branchNameMapRef.current.get(branch);
+      if (existing) return existing;
+      const anonymized = `branch-${nextBranchIndexRef.current}`;
+      nextBranchIndexRef.current += 1;
+      branchNameMapRef.current.set(branch, anonymized);
+      return anonymized;
+    },
+    [privacyMode]
+  );
   return /* @__PURE__ */ jsx(
     PrivacyContext.Provider,
     {
       value: {
         privacyMode,
         togglePrivacyMode,
-        anonymizePath: anonymizePath$1,
-        anonymizeProjectName
+        anonymizePath: anonymizePathFn,
+        anonymizeProjectName,
+        anonymizeBranch
       },
       children
     }
@@ -73,7 +96,7 @@ function usePrivacy() {
   }
   return ctx;
 }
-const appCss = "/assets/app-u2nTs9ny.css";
+const appCss = "/assets/app-DNBe9Acr.css";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -87,13 +110,16 @@ const Route$6 = createRootRoute({
     meta: [
       { charSet: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },
-      { title: "Claude Session Dashboard" }
+      { title: "Claude Session Dashboard" },
+      { name: "theme-color", content: "#141413" },
+      { name: "description", content: "Local observability dashboard for Claude Code sessions" }
     ],
     links: [
       {
         rel: "stylesheet",
         href: appCss
-      }
+      },
+      { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" }
     ]
   }),
   component: RootComponent
@@ -110,7 +136,7 @@ function RootDocument({ children }) {
     ] })
   ] });
 }
-const $$splitComponentImporter$4 = () => import("./_dashboard-CAO6-qAS.js");
+const $$splitComponentImporter$4 = () => import("./_dashboard-TUzgwLqB.js");
 const Route$5 = createFileRoute("/_dashboard")({
   component: lazyRouteComponent($$splitComponentImporter$4, "component")
 });
@@ -119,7 +145,7 @@ const Route$4 = createFileRoute("/")({
     throw redirect({ to: "/sessions" });
   }
 });
-const $$splitComponentImporter$3 = () => import("./stats-C9cZXTP5.js");
+const $$splitComponentImporter$3 = () => import("./stats-CzGBAoxT.js");
 const statsSearchSchema = z.object({
   tab: z.enum(["overview", "projects"]).default("overview").catch("overview")
 });
@@ -127,11 +153,11 @@ const Route$3 = createFileRoute("/_dashboard/stats")({
   validateSearch: statsSearchSchema,
   component: lazyRouteComponent($$splitComponentImporter$3, "component")
 });
-const $$splitComponentImporter$2 = () => import("./settings-ko61yfVs.js");
+const $$splitComponentImporter$2 = () => import("./settings-jxAA3KAS.js");
 const Route$2 = createFileRoute("/_dashboard/settings")({
   component: lazyRouteComponent($$splitComponentImporter$2, "component")
 });
-const $$splitComponentImporter$1 = () => import("./index-Do0HxVmM.js");
+const $$splitComponentImporter$1 = () => import("./index-Biupny11.js");
 const sessionsSearchSchema = z.object({
   page: z.number().int().min(1).default(1).catch(1),
   pageSize: z.number().int().min(5).max(100).default(5).catch(5),
@@ -143,7 +169,7 @@ const Route$1 = createFileRoute("/_dashboard/sessions/")({
   validateSearch: sessionsSearchSchema,
   component: lazyRouteComponent($$splitComponentImporter$1, "component")
 });
-const $$splitComponentImporter = () => import("./_sessionId-BZf2Aqy5.js");
+const $$splitComponentImporter = () => import("./_sessionId-BvDwvNyA.js");
 const searchSchema = z.object({
   project: z.string().optional()
 });

package/dist/server/assets/{session-detail.server-DLXl-Pn-.js → session-detail.server-IUw67jz-.js}

@@ -1,8 +1,8 @@
 import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
 import * as path from "node:path";
 import * as fs from "node:fs";
-import { e as extractProjectName, a as getProjectsDir, d as decodeProjectDirName } from "./claude-path-BdwflgZ1.js";
-import { p as parseDetail } from "./session-parser-CAEXxF1D.js";
+import { e as extractProjectName, g as getProjectsDir, d as decodeProjectDirName } from "./claude-path-B2oho3NT.js";
+import { p as parseDetail } from "./session-parser-CIucKYBT.js";
 import { c as createServerFn } from "../server.js";
 import "node:os";
 import "node:readline";

package/dist/server/assets/{session-parser-CAEXxF1D.js → session-parser-CIucKYBT.js}

@@ -77,6 +77,7 @@ async function parseDetail(filePath, sessionId, projectPath, projectName) {
   const agentProgressTokens = /* @__PURE__ */ new Map();
   const agentProgressToolCalls = /* @__PURE__ */ new Map();
   const agentProgressModel = /* @__PURE__ */ new Map();
+  const agentIdByToolUseId = /* @__PURE__ */ new Map();
   const pendingTaskByToolUseId = /* @__PURE__ */ new Map();
   const taskById = /* @__PURE__ */ new Map();
   const contextSnapshots = [];
@@ -89,6 +90,10 @@ async function parseDetail(filePath, sessionId, projectPath, projectName) {
     if (msg.gitBranch && !branch) branch = msg.gitBranch;
     if (msg.type === "progress" && msg.parentToolUseID) {
       const parentId = msg.parentToolUseID;
+      const progressAgentId = msg.data?.agentId;
+      if (progressAgentId && parentId) {
+        agentIdByToolUseId.set(parentId, progressAgentId);
+      }
       const progressModel = msg.data?.message?.message?.model;
       if (progressModel && parentId) {
         agentProgressModel.set(parentId, progressModel);
@@ -313,6 +318,19 @@ async function parseDetail(filePath, sessionId, projectPath, projectName) {
       agent.model = actualModel;
     }
   }
+  const subagentDir = filePath.replace(/\.jsonl$/, "");
+  await Promise.all(
+    agents.map(async (agent) => {
+      const agentId = agentIdByToolUseId.get(agent.toolUseId);
+      if (!agentId) return;
+      agent.agentId = agentId;
+      const subagentFilePath = `${subagentDir}/subagents/agent-${agentId}.jsonl`;
+      try {
+        agent.skills = await parseSubagentSkills(subagentFilePath);
+      } catch {
+      }
+    })
+  );
   const modelName = modelsSet.size > 0 ? Array.from(modelsSet)[0] : "unknown";
   const contextWindow = buildContextWindowData(
     contextSnapshots,
@@ -335,6 +353,55 @@ async function parseDetail(filePath, sessionId, projectPath, projectName) {
     contextWindow
   };
 }
+const COMMAND_NAME_RE = /<command-name>([^<]+)<\/command-name>/;
+async function parseSubagentSkills(subagentFilePath) {
+  const skills = [];
+  const stream = fs.createReadStream(subagentFilePath, { encoding: "utf-8" });
+  const rl = readline.createInterface({ input: stream, crlfDelay: Infinity });
+  let lineCount = 0;
+  const MAX_LINES_FOR_INJECTED = 20;
+  for await (const line of rl) {
+    const msg = safeParse(line);
+    if (!msg) continue;
+    lineCount++;
+    if (lineCount <= MAX_LINES_FOR_INJECTED && msg.type === "user" && msg.message?.content) {
+      const content = msg.message.content;
+      if (Array.isArray(content) && content.length >= 1) {
+        const firstBlock = content[0];
+        if (firstBlock.type === "text" && firstBlock.text) {
+          const match = COMMAND_NAME_RE.exec(firstBlock.text);
+          if (match) {
+            const skillName = match[1].trim();
+            if (skillName) {
+              skills.push({
+                skill: skillName,
+                args: null,
+                timestamp: msg.timestamp ?? "",
+                toolUseId: `injected-${skillName}-${msg.timestamp ?? lineCount}`,
+                source: "injected"
+              });
+            }
+          }
+        }
+      }
+    }
+    if (msg.type === "assistant" && msg.message?.content) {
+      for (const block of msg.message.content) {
+        if (block.type !== "tool_use" || block.name !== "Skill") continue;
+        const inp = block.input;
+        if (!inp?.skill) continue;
+        skills.push({
+          skill: String(inp.skill),
+          args: inp.args ? String(inp.args) : null,
+          timestamp: msg.timestamp ?? "",
+          toolUseId: block.id ?? "",
+          source: "invoked"
+        });
+      }
+    }
+  }
+  return skills;
+}
 function getContextLimit(_modelName) {
   return 2e5;
 }

package/dist/server/assets/{session-scanner-CLfls9u-.js → session-scanner-1h9TTTAV.js}

@@ -1,7 +1,7 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
-import { a as getProjectsDir, d as decodeProjectDirName, e as extractProjectName, b as extractSessionId } from "./claude-path-BdwflgZ1.js";
-import { a as parseSummary } from "./session-parser-CAEXxF1D.js";
+import { g as getProjectsDir, d as decodeProjectDirName, e as extractProjectName, b as extractSessionId } from "./claude-path-B2oho3NT.js";
+import { a as parseSummary } from "./session-parser-CIucKYBT.js";
 async function scanProjects() {
   const projectsDir = getProjectsDir();
   let entries;

package/dist/server/assets/{sessions.server-CUhasKW2.js → sessions.server-Cpffr3MU.js}

@@ -1,12 +1,12 @@
 import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
 import { z } from "zod";
-import { s as scanAllSessions, g as getActiveSessions } from "./session-scanner-CLfls9u-.js";
+import { s as scanAllSessions, g as getActiveSessions } from "./session-scanner-1h9TTTAV.js";
 import { c as createServerFn } from "../server.js";
 import "node:fs";
 import "node:path";
-import "./claude-path-BdwflgZ1.js";
+import "./claude-path-B2oho3NT.js";
 import "node:os";
-import "./session-parser-CAEXxF1D.js";
+import "./session-parser-CIucKYBT.js";
 import "node:readline";
 import "@tanstack/history";
 import "@tanstack/router-core/ssr/client";

package/dist/server/assets/{settings-ko61yfVs.js → settings-jxAA3KAS.js}

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { s as settingsQuery, u as useSettingsMutation } from "./settings.queries-DSQd324O.js";
 import { a as SUBSCRIPTION_TIERS, b as DEFAULT_PRICING, D as DEFAULT_SETTINGS } from "./settings.types-DntadCHo.js";
+import { u as usePrivacy } from "./router-kB-tCwY9.js";
 import "./createSsrRpc-CVg2UDl0.js";
 import "../server.js";
 import "@tanstack/history";
@@ -24,7 +25,7 @@ function TierSelector({ value, onChange }) {
       {
         type: "button",
         onClick: () => onChange(tier.id),
-        className: `rounded-lg border px-3 py-2 text-left transition-colors ${isSelected ? "border-blue-500 bg-blue-500/10 text-white" : "border-gray-800 bg-gray-900/50 text-gray-400 hover:border-gray-700 hover:text-gray-300"}`,
+        className: `rounded-lg border px-3 py-2 text-left transition-colors ${isSelected ? "border-brand-500 bg-brand-500/10 text-white" : "border-gray-800 bg-gray-900/50 text-gray-400 hover:border-gray-700 hover:text-gray-300"}`,
         children: [
           /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: tier.displayName }),
           /* @__PURE__ */ jsx("div", { className: "mt-0.5 font-mono text-[10px] text-gray-500", children: tier.monthlyUSD !== null ? `$${tier.monthlyUSD}/mo` : "Custom" })
@@ -92,28 +93,31 @@ function PricingTableEditor({ overrides, onChange }) {
               min: "0",
               value,
               onChange: (e) => handleCellChange(model.modelId, f.key, e.target.value),
-              className: `w-20 rounded border px-2 py-1 text-right font-mono text-xs ${changed ? "border-blue-500/50 bg-blue-500/10 text-blue-400" : "border-gray-700 bg-gray-800 text-gray-300"} focus:border-blue-500 focus:outline-none`
+              className: `w-20 rounded border px-2 py-1 text-right font-mono text-xs ${changed ? "border-brand-500/50 bg-brand-500/10 text-brand-400" : "border-gray-700 bg-gray-800 text-gray-300"} focus:border-brand-500 focus:outline-none`
             }
           ) }, f.key);
         })
       ] }, model.modelId)) })
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] text-gray-600", children: "Prices in USD per million tokens. Overridden values shown in blue." })
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] text-gray-600", children: "Prices in USD per million tokens. Overridden values are highlighted." })
   ] });
 }
 function SettingsPage() {
   const { data: settings, isLoading } = useQuery(settingsQuery);
+  if (isLoading || !settings) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-48 animate-pulse rounded bg-gray-800" }),
+      /* @__PURE__ */ jsx("div", { className: "h-64 animate-pulse rounded-xl bg-gray-900/50" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(SettingsForm, { settings });
+}
+function SettingsForm({ settings }) {
   const mutation = useSettingsMutation();
-  const [tier, setTier] = useState("pro");
-  const [overrides, setOverrides] = useState({});
+  const { privacyMode, togglePrivacyMode } = usePrivacy();
+  const [tier, setTier] = useState(settings.subscriptionTier);
+  const [overrides, setOverrides] = useState(settings.pricingOverrides);
   const [isDirty, setIsDirty] = useState(false);
-  useEffect(() => {
-    if (settings) {
-      setTier(settings.subscriptionTier);
-      setOverrides(settings.pricingOverrides);
-      setIsDirty(false);
-    }
-  }, [settings]);
   function handleTierChange(newTier) {
     setTier(newTier);
     setIsDirty(true);
@@ -139,15 +143,57 @@ function SettingsPage() {
       }
     });
   }
-  if (isLoading) {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-8 w-48 animate-pulse rounded bg-gray-800" }),
-      /* @__PURE__ */ jsx("div", { className: "h-64 animate-pulse rounded-xl bg-gray-900/50" })
-    ] });
-  }
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-white", children: "Settings" }),
     /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Configure your subscription tier and API pricing for cost estimation." }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-300", children: "Privacy Mode" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-gray-500", children: "Hide project names, file paths, and branch names across the dashboard. Useful when screen-sharing or recording demos." }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-xl border border-gray-800 bg-gray-900/50 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-300", children: "Enable privacy mode" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: privacyMode ? "On" : "Off" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "aria-checked": privacyMode,
+                onClick: togglePrivacyMode,
+                className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors ${privacyMode ? "bg-brand-600" : "bg-gray-800"}`,
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform ${privacyMode ? "translate-x-[18px]" : "translate-x-[3px]"}`
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-gray-800 pt-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium text-gray-400", children: "What gets hidden:" }),
+          /* @__PURE__ */ jsxs("ul", { className: "mt-1.5 space-y-1 text-[10px] text-gray-500", children: [
+            /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Project names" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-600", children: "→ project-1, project-2, ..." })
+            ] }),
+            /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "File paths" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-600", children: "→ .../project-1" })
+            ] }),
+            /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Branch names" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-600", children: "→ branch-1, branch-2, ..." })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-300", children: "Subscription Tier" }),
       /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-gray-500", children: "Select your Claude subscription plan. This is informational only and does not affect cost calculations." }),
@@ -186,7 +232,7 @@ function SettingsPage() {
             type: "button",
             onClick: handleSave,
             disabled: !isDirty || mutation.isPending,
-            className: `rounded-lg px-4 py-1.5 text-xs font-medium transition-colors ${isDirty && !mutation.isPending ? "bg-blue-600 text-white hover:bg-blue-500" : "cursor-not-allowed bg-gray-800 text-gray-500"}`,
+            className: `rounded-lg px-4 py-1.5 text-xs font-medium transition-colors ${isDirty && !mutation.isPending ? "bg-brand-600 text-white hover:bg-brand-500" : "cursor-not-allowed bg-gray-800 text-gray-500"}`,
             children: mutation.isPending ? "Saving..." : "Save"
           }
         )