codex-devtools 0.1.11 → 0.2.0

package/out/renderer/assets/{index-BEzdp8iI.js → index-C-iGxog-.js}

@@ -7055,6 +7055,14 @@ class HttpApiClient {
   async getSessionChunks(sessionId) {
     return this.get(`/sessions/${encodeURIComponent(sessionId)}/chunks`);
   }
+  async getStats(scope = { type: "all" }) {
+    if (scope.type === "project") {
+      return this.get(
+        `/stats?scope=project&cwd=${encodeURIComponent(scope.cwd)}`
+      );
+    }
+    return this.get("/stats?scope=all");
+  }
   async searchSessions(query) {
     return this.get(`/search?q=${encodeURIComponent(query)}`);
   }
@@ -7642,8 +7650,57 @@ const createSessionSlice = (client2) => (set, get) => ({
     });
   }
 });
+function normalizeScope$1(scope) {
+  var _a;
+  if (!scope || scope.type === "all") {
+    return { type: "all" };
+  }
+  const cwd = (_a = scope.cwd) == null ? void 0 : _a.trim();
+  if (!cwd) {
+    return { type: "all" };
+  }
+  return {
+    type: "project",
+    cwd
+  };
+}
+const createStatsSlice = (client2) => (set, get) => ({
+  statsData: null,
+  statsScope: { type: "all" },
+  statsLoading: false,
+  statsError: null,
+  fetchStats: async (scope, options) => {
+    var _a;
+    const resolvedScope = normalizeScope$1(scope != null ? scope : get().statsScope);
+    const background = (_a = options == null ? void 0 : options.background) != null ? _a : false;
+    if (!background) {
+      set({ statsLoading: true, statsError: null });
+    }
+    try {
+      const statsData = await client2.getStats(resolvedScope);
+      set((state) => ({
+        statsData,
+        statsScope: resolvedScope,
+        statsLoading: background ? state.statsLoading : false,
+        statsError: null
+      }));
+    } catch (error) {
+      set((state) => ({
+        statsScope: resolvedScope,
+        statsLoading: background ? state.statsLoading : false,
+        statsError: error instanceof Error ? error.message : "Failed to fetch stats"
+      }));
+    }
+  },
+  setStatsScope: async (scope) => {
+    const resolvedScope = normalizeScope$1(scope);
+    set({ statsScope: resolvedScope });
+    await get().fetchStats(resolvedScope);
+  }
+});
 const DASHBOARD_TAB_ID$2 = "dashboard";
 const SETTINGS_TAB_ID$2 = "settings";
+const STATS_TAB_ID$3 = "stats";
 function createSessionTabId(sessionId) {
   return `session:${sessionId}`;
 }
@@ -7674,6 +7731,10 @@ const createTabSlice = (_client) => (set, get) => ({
   openDashboardTab: () => {
     set({ activeTabId: DASHBOARD_TAB_ID$2, activeSessionId: null });
   },
+  openStatsTab: () => {
+    set({ activeTabId: STATS_TAB_ID$3, activeSessionId: null });
+    void get().fetchStats(get().statsScope);
+  },
   openSettingsTab: () => {
     set({ activeTabId: SETTINGS_TAB_ID$2, activeSessionId: null });
   },
@@ -7690,6 +7751,9 @@ const createTabSlice = (_client) => (set, get) => ({
     if (tab.type === "session" && tab.sessionId) {
       void get().fetchChunks(tab.sessionId);
     }
+    if (tab.type === "stats") {
+      void get().fetchStats(get().statsScope);
+    }
   },
   closeTab: (tabId) => {
     set((state) => {
@@ -7728,6 +7792,7 @@ const createUISlice = (_client) => (set) => ({
 const createAppStore = (client2 = api) => create()((...args) => ({
   ...createProjectSlice(client2)(...args),
   ...createSessionSlice(client2)(...args),
+  ...createStatsSlice(client2)(...args),
   ...createConversationSlice(client2)(...args),
   ...createConfigSlice(client2)(...args),
   ...createTabSlice()(...args),
@@ -7737,6 +7802,7 @@ const createAppStore = (client2 = api) => create()((...args) => ({
 const useAppStore = createAppStore();
 const REFRESH_DEBOUNCE_MS = 120;
 const FALLBACK_POLL_INTERVAL_MS = 5e3;
+const STATS_TAB_ID$2 = "stats";
 function initializeEventListeners(store = useAppStore, client2 = api) {
   let refreshTimer = null;
   let pollTimer = null;
@@ -7760,6 +7826,9 @@ function initializeEventListeners(store = useAppStore, client2 = api) {
       if (state.activeSessionId) {
         void state.fetchChunks(state.activeSessionId);
       }
+      if (state.activeTabId === STATS_TAB_ID$2) {
+        void state.fetchStats(state.statsScope, { background: true });
+      }
     }, REFRESH_DEBOUNCE_MS);
   });
   const runFallbackRefresh = () => {
@@ -7782,7 +7851,8 @@ function initializeEventListeners(store = useAppStore, client2 = api) {
         prefetchPreviews: false,
         background: true
       }) : Promise.resolve(),
-      state.activeSessionId ? state.fetchChunks(state.activeSessionId) : Promise.resolve()
+      state.activeSessionId ? state.fetchChunks(state.activeSessionId) : Promise.resolve(),
+      state.activeTabId === STATS_TAB_ID$2 ? state.fetchStats(state.statsScope, { background: true }) : Promise.resolve()
     ]).finally(() => {
       polling = false;
     });
@@ -9353,6 +9423,256 @@ const DashboardView = () => {
     ] })
   ] });
 };
+function formatDuration$1(durationMs) {
+  if (!Number.isFinite(durationMs) || durationMs <= 0) {
+    return "0m";
+  }
+  const totalMinutes = Math.round(durationMs / 6e4);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  if (hours <= 0) {
+    return `${minutes}m`;
+  }
+  if (minutes === 0) {
+    return `${hours}h`;
+  }
+  return `${hours}h ${minutes}m`;
+}
+function normalizeScope(scope) {
+  if (scope.type === "project" && scope.cwd.trim().length > 0) {
+    return { type: "project", cwd: scope.cwd.trim() };
+  }
+  return { type: "all" };
+}
+const StatsView = () => {
+  const {
+    projects,
+    statsData,
+    statsScope,
+    statsLoading,
+    statsError,
+    fetchStats,
+    setStatsScope
+  } = useAppStore((state) => ({
+    projects: state.projects,
+    statsData: state.statsData,
+    statsScope: state.statsScope,
+    statsLoading: state.statsLoading,
+    statsError: state.statsError,
+    fetchStats: state.fetchStats,
+    setStatsScope: state.setStatsScope
+  }));
+  reactExports.useEffect(() => {
+    if (!statsData && !statsLoading) {
+      void fetchStats(statsScope);
+    }
+  }, [statsData, statsLoading, fetchStats, statsScope]);
+  const dailyMaxOutput = reactExports.useMemo(
+    () => {
+      var _a;
+      return Math.max(...(_a = statsData == null ? void 0 : statsData.daily.map((point) => point.outputTokens)) != null ? _a : [1]);
+    },
+    [statsData]
+  );
+  const hourlyMaxEvents = reactExports.useMemo(
+    () => {
+      var _a;
+      return Math.max(...(_a = statsData == null ? void 0 : statsData.hourly.map((point) => point.eventCount)) != null ? _a : [1]);
+    },
+    [statsData]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-shell", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: "stats-header", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "Stats" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Token volume, activity patterns, model usage, and reasoning effort." })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "stats-controls", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "sidebar-label", htmlFor: "stats-scope", children: "Scope" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "select",
+        {
+          id: "stats-scope",
+          className: "app-select",
+          value: statsScope.type,
+          onChange: (event) => {
+            var _a, _b;
+            if (event.target.value === "project") {
+              const defaultProject = (_b = (_a = projects[0]) == null ? void 0 : _a.cwd) != null ? _b : "";
+              void setStatsScope({ type: "project", cwd: defaultProject });
+              return;
+            }
+            void setStatsScope({ type: "all" });
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: "All projects" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "project", children: "Single project" })
+          ]
+        }
+      ),
+      statsScope.type === "project" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "sidebar-label", htmlFor: "stats-project", children: "Project" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "select",
+          {
+            id: "stats-project",
+            className: "app-select",
+            value: statsScope.cwd,
+            onChange: (event) => {
+              void setStatsScope({ type: "project", cwd: event.target.value });
+            },
+            children: [
+              projects.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "No projects available" }) : null,
+              projects.map((project) => /* @__PURE__ */ jsxRuntimeExports.jsxs("option", { value: project.cwd, children: [
+                project.name,
+                " - ",
+                project.cwd
+              ] }, project.cwd))
+            ]
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          className: "tabbar-action",
+          onClick: () => {
+            void fetchStats(normalizeScope(statsScope));
+          },
+          children: "Refresh"
+        }
+      )
+    ] }),
+    statsError ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "stats-error", children: statsError }) : null,
+    !statsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "empty-view", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "empty-title", children: statsLoading ? "Loading stats..." : "No stats available yet" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "stats-kpi-grid", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "stat-card", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stat-label", children: "Total tokens" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "stat-value", children: statsData.totals.totalTokens.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "stat-card", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stat-label", children: "Generated tokens" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "stat-value", children: statsData.totals.outputTokens.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "stat-card", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stat-label", children: "Active time" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "stat-value", children: formatDuration$1(statsData.totals.durationMs) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "stat-card", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stat-label", children: "Sessions" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("strong", { className: "stat-value", children: [
+            statsData.totals.sessions.toLocaleString(),
+            statsData.totals.archivedSessions > 0 ? ` (${statsData.totals.archivedSessions.toLocaleString()} archived)` : ""
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "stats-section", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-section-header", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Generated tokens by day" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stats-section-subtle", children: "Output tokens" })
+        ] }),
+        statsData.daily.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "empty-copy", children: "No daily token data yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "stats-day-list", children: statsData.daily.map((point) => {
+          const widthPercent = dailyMaxOutput > 0 ? Math.max(6, point.outputTokens / dailyMaxOutput * 100) : 6;
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "stats-day-row", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stats-day-label", children: point.date }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "stats-day-bar-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "stats-day-bar", style: { width: `${widthPercent}%` } }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stats-day-value", children: point.outputTokens.toLocaleString() })
+          ] }, point.date);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "stats-grid-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "stats-section", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-section-header", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Most active days" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stats-section-subtle", children: "By event count" })
+          ] }),
+          statsData.topDays.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "empty-copy", children: "No activity data yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "stats-top-list", children: statsData.topDays.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "stats-top-item", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: day.date }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+              day.eventCount.toLocaleString(),
+              " events"
+            ] })
+          ] }, day.date)) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "stats-section", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-section-header", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Most active hours" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stats-section-subtle", children: "By event count" })
+          ] }),
+          statsData.topHours.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "empty-copy", children: "No activity data yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "stats-top-list", children: statsData.topHours.map((hour) => /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "stats-top-item", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+              String(hour.hour).padStart(2, "0"),
+              ":00"
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+              hour.eventCount.toLocaleString(),
+              " events"
+            ] })
+          ] }, hour.hour)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "stats-section", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-section-header", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Hourly activity heatmap" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stats-section-subtle", children: "Event count + token volume + session presence" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "stats-heatmap-grid", children: statsData.hourly.map((point) => {
+          const intensity = point.eventCount <= 0 ? 0 : point.eventCount / hourlyMaxEvents;
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: "stats-heat-cell",
+              style: {
+                backgroundColor: intensity === 0 ? "rgba(59, 130, 246, 0.08)" : `rgba(59, 130, 246, ${0.16 + intensity * 0.66})`
+              },
+              title: `${String(point.hour).padStart(2, "0")}:00 • ${point.eventCount.toLocaleString()} events • ${point.totalTokens.toLocaleString()} tokens • ${point.sessionCount.toLocaleString()} sessions`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: String(point.hour).padStart(2, "0") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: point.eventCount.toLocaleString() })
+              ]
+            },
+            point.hour
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "stats-grid-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "stats-section", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-section-header", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Models and reasoning effort" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stats-section-subtle", children: "Token distribution" })
+          ] }),
+          statsData.models.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "empty-copy", children: "No model usage data yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "stats-table-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "stats-table", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: "Model" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: "Effort" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: "Tokens" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: "Sessions" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: statsData.models.map((model) => /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: model.model }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: model.reasoningEffort }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: model.totalTokens.toLocaleString() }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: model.sessionCount.toLocaleString() })
+            ] }, `${model.model}::${model.reasoningEffort}`)) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "stats-section", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-section-header", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Reasoning effort mix" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stats-section-subtle", children: "Across all models" })
+          ] }),
+          statsData.reasoningEfforts.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "empty-copy", children: "No reasoning effort data yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "stats-top-list", children: statsData.reasoningEfforts.map((effort) => /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "stats-top-item", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: effort.reasoningEffort }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+              effort.totalTokens.toLocaleString(),
+              " tokens"
+            ] })
+          ] }, effort.reasoningEffort)) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
 const SettingsView = () => {
   const { appConfig, configLoading, fetchConfig, updateConfig } = useAppStore((state) => ({
     appConfig: state.appConfig,
@@ -11320,6 +11640,16 @@ function getPreludeHint(kind) {
       return "System prelude";
   }
 }
+function buildSessionTokenStats() {
+  return {
+    totalTokens: 0,
+    inputTokens: 0,
+    outputTokens: 0
+  };
+}
+function buildSystemPreludeKey(timestamp, rowIndex) {
+  return `${timestamp}-${rowIndex}`;
+}
 const ChatHistory = ({ sessionId }) => {
   const { chunks, chunksLoading, chunksSessionId, sessions } = useAppStore((state) => ({
     chunks: state.chunks,
@@ -11334,7 +11664,40 @@ const ChatHistory = ({ sessionId }) => {
     estimateSize: () => 168,
     overscan: 6
   });
+  const [expandedPreludeKeys, setExpandedPreludeKeys] = reactExports.useState(
+    () => /* @__PURE__ */ new Set()
+  );
   const virtualRows = rowVirtualizer.getVirtualItems();
+  const remeasureVisibleRows = reactExports.useCallback(() => {
+    rowVirtualizer.measure();
+    const parent = parentRef.current;
+    if (!parent) {
+      return;
+    }
+    for (const row of rowVirtualizer.getVirtualItems()) {
+      const element = parent.querySelector(`[data-index="${row.index}"]`);
+      if (!element) {
+        continue;
+      }
+      rowVirtualizer.measureElement(element);
+    }
+  }, [rowVirtualizer]);
+  const toggleSystemPrelude = reactExports.useCallback((preludeKey) => {
+    setExpandedPreludeKeys((current) => {
+      const next = new Set(current);
+      if (next.has(preludeKey)) {
+        next.delete(preludeKey);
+      } else {
+        next.add(preludeKey);
+      }
+      return next;
+    });
+    remeasureVisibleRows();
+    notifyChatLayoutInvalidated();
+  }, [remeasureVisibleRows]);
+  reactExports.useEffect(() => {
+    setExpandedPreludeKeys(/* @__PURE__ */ new Set());
+  }, [sessionId]);
   reactExports.useEffect(() => {
     const container = parentRef.current;
     if (!container) {
@@ -11350,15 +11713,37 @@ const ChatHistory = ({ sessionId }) => {
       return;
     }
     const handleLayoutInvalidation = () => {
-      rowVirtualizer.measure();
+      remeasureVisibleRows();
+      requestAnimationFrame(() => {
+        remeasureVisibleRows();
+      });
     };
     window.addEventListener(CHAT_LAYOUT_INVALIDATED_EVENT, handleLayoutInvalidation);
     return () => {
       window.removeEventListener(CHAT_LAYOUT_INVALIDATED_EVENT, handleLayoutInvalidation);
     };
-  }, [rowVirtualizer]);
+  }, [remeasureVisibleRows]);
+  reactExports.useEffect(() => {
+    remeasureVisibleRows();
+    const raf = requestAnimationFrame(() => {
+      remeasureVisibleRows();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [chunks, expandedPreludeKeys, remeasureVisibleRows]);
   const hasChunks = chunks.length > 0;
   const isLoading = chunksLoading && chunksSessionId === sessionId;
+  const sessionTokenStats = reactExports.useMemo(() => {
+    return chunks.reduce((totals, chunk) => {
+      var _a, _b, _c;
+      if (chunk.type !== "ai") {
+        return totals;
+      }
+      totals.totalTokens += (_a = chunk.metrics.totalTokens) != null ? _a : 0;
+      totals.inputTokens += (_b = chunk.metrics.inputTokens) != null ? _b : 0;
+      totals.outputTokens += (_c = chunk.metrics.outputTokens) != null ? _c : 0;
+      return totals;
+    }, buildSessionTokenStats());
+  }, [chunks]);
   const initialModelUsage = reactExports.useMemo(() => {
     if (!sessionId) {
       return null;
@@ -11386,14 +11771,27 @@ const ChatHistory = ({ sessionId }) => {
       ] });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      initialModelUsage ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "chat-model-summary", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "chat-model-summary-label", children: [
-        "Initial model: ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: initialModelUsage.model }),
-        initialModelUsage.reasoningEffort !== "unknown" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          " ",
-          /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: initialModelUsage.reasoningEffort })
-        ] }) : null
-      ] }) }) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "chat-session-token-sticky", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chat-session-token-strip", "aria-label": "Session token totals and initial model", children: [
+        initialModelUsage ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "chat-session-token-pair", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "chat-session-token-key", children: "Model:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "chat-session-token-value", children: [
+            initialModelUsage.model,
+            initialModelUsage.reasoningEffort !== "unknown" ? ` (${initialModelUsage.reasoningEffort})` : ""
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "chat-session-token-pair", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "chat-session-token-key", children: "In:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "chat-session-token-value", children: sessionTokenStats.inputTokens.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "chat-session-token-pair", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "chat-session-token-key", children: "Out:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "chat-session-token-value", children: sessionTokenStats.outputTokens.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "chat-session-token-pair", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "chat-session-token-key", children: "Total:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "chat-session-token-value", children: sessionTokenStats.totalTokens.toLocaleString() })
+        ] })
+      ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
@@ -11408,6 +11806,8 @@ const ChatHistory = ({ sessionId }) => {
               return null;
             }
             const systemPreludeKind = chunk.type === "system" ? classifyCodexBootstrapMessage(chunk.content) : null;
+            const systemPreludeKey = chunk.type === "system" && systemPreludeKind && systemPreludeKind !== "collaboration_mode" ? buildSystemPreludeKey(chunk.timestamp, virtualRow.index) : null;
+            const isSystemPreludeExpanded = systemPreludeKey !== null && expandedPreludeKeys.has(systemPreludeKey);
             const key = `${chunk.type}-${chunk.timestamp}-${virtualRow.index}`;
             return /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
@@ -11429,16 +11829,28 @@ const ChatHistory = ({ sessionId }) => {
                     "Collaboration mode: ",
                     /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: extractCollaborationModeLabel(chunk.content) })
                   ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "details",
+                    "section",
                     {
-                      className: `chat-system-prelude ${systemPreludeKind}`,
-                      onToggle: notifyChatLayoutInvalidated,
+                      className: `chat-system-prelude ${systemPreludeKind}${isSystemPreludeExpanded ? " open" : ""}`,
                       children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsxs("summary", { className: "chat-system-prelude-summary", children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: getPreludeLabel(systemPreludeKind) }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "chat-system-prelude-summary-hint", children: getPreludeHint(systemPreludeKind) })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "chat-system-prelude-content", children: chunk.content })
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            className: "chat-system-prelude-summary",
+                            "aria-expanded": isSystemPreludeExpanded,
+                            onClick: () => {
+                              if (systemPreludeKey) {
+                                toggleSystemPrelude(systemPreludeKey);
+                              }
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: getPreludeLabel(systemPreludeKind) }),
+                              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "chat-system-prelude-summary-hint", children: getPreludeHint(systemPreludeKind) })
+                            ]
+                          }
+                        ),
+                        isSystemPreludeExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "chat-system-prelude-content", children: chunk.content }) : null
                       ]
                     }
                   ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "chat-system-message", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: chunk.content }) }) : null,
@@ -11471,7 +11883,20 @@ const ChatHistory = ({ sessionId }) => {
         }
       )
     ] });
-  }, [chunks, hasChunks, initialModelUsage, isLoading, rowVirtualizer, virtualRows]);
+  }, [
+    chunks,
+    hasChunks,
+    initialModelUsage,
+    isLoading,
+    rowVirtualizer,
+    sessionTokenStats.inputTokens,
+    sessionTokenStats.outputTokens,
+    sessionTokenStats.totalTokens,
+    expandedPreludeKeys,
+    remeasureVisibleRows,
+    toggleSystemPrelude,
+    virtualRows
+  ]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "chat-shell", ref: parentRef, children: content });
 };
 const SessionTabContent = ({ tab }) => {
@@ -11695,6 +12120,7 @@ const Sidebar = () => {
   ] });
 };
 const DASHBOARD_TAB_ID$1 = "dashboard";
+const STATS_TAB_ID$1 = "stats";
 const SETTINGS_TAB_ID$1 = "settings";
 const TabBar = () => {
   const {
@@ -11703,6 +12129,7 @@ const TabBar = () => {
     setActiveTab,
     closeTab,
     openDashboardTab,
+    openStatsTab,
     openSettingsTab,
     toggleSidebarCollapsed,
     sidebarCollapsed
@@ -11712,6 +12139,7 @@ const TabBar = () => {
     setActiveTab: state.setActiveTab,
     closeTab: state.closeTab,
     openDashboardTab: state.openDashboardTab,
+    openStatsTab: state.openStatsTab,
     openSettingsTab: state.openSettingsTab,
     toggleSidebarCollapsed: state.toggleSidebarCollapsed,
     sidebarCollapsed: state.sidebarCollapsed
@@ -11743,6 +12171,17 @@ const TabBar = () => {
             children: "Dashboard"
           }
         ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: `tabbar-action ${activeTabId === STATS_TAB_ID$1 ? "active" : ""}`,
+            onClick: openStatsTab,
+            type: "button",
+            role: "tab",
+            "aria-selected": activeTabId === STATS_TAB_ID$1,
+            children: "Stats"
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -11786,6 +12225,7 @@ const TabBar = () => {
 };
 const DASHBOARD_TAB_ID = "dashboard";
 const SETTINGS_TAB_ID = "settings";
+const STATS_TAB_ID = "stats";
 const TabbedLayout = () => {
   const { openTabs, activeTabId, sidebarCollapsed } = useAppStore((state) => ({
     openTabs: state.openTabs,
@@ -11797,13 +12237,15 @@ const TabbedLayout = () => {
     return (activeTab == null ? void 0 : activeTab.type) === "session" ? activeTab : null;
   }, [openTabs, activeTabId]);
   const settingsActive = activeTabId === SETTINGS_TAB_ID;
-  const dashboardActive = activeTabId === DASHBOARD_TAB_ID || !settingsActive && !activeSessionTab;
+  const statsActive = activeTabId === STATS_TAB_ID;
+  const dashboardActive = activeTabId === DASHBOARD_TAB_ID || !settingsActive && !statsActive && !activeSessionTab;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "layout-shell", children: [
     !sidebarCollapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(Sidebar, {}) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "content-shell", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(TabBar, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "content-body", children: [
         activeSessionTab ? /* @__PURE__ */ jsxRuntimeExports.jsx(SessionTabContent, { tab: activeSessionTab }) : null,
+        statsActive ? /* @__PURE__ */ jsxRuntimeExports.jsx(StatsView, {}) : null,
         dashboardActive ? /* @__PURE__ */ jsxRuntimeExports.jsx(DashboardView, {}) : null,
         settingsActive ? /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsView, {}) : null
       ] })