codex-devtools 0.1.11 → 0.2.1

package/out/renderer/assets/{index-BEzdp8iI.js → index-5ydAmpDO.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,491 @@ const DashboardView = () => {
     ] })
   ] });
 };
+const CONTRIBUTION_WEEKDAY_LABELS = ["", "Mon", "", "Wed", "", "Fri", ""];
+const CALENDAR_METRIC_OPTIONS = [
+  { value: "totalTokens", label: "Total tokens", tooltipLabel: "total tokens" },
+  { value: "inputTokens", label: "Input tokens", tooltipLabel: "input tokens" },
+  { value: "outputTokens", label: "Output tokens", tooltipLabel: "output tokens" },
+  { value: "eventCount", label: "Events", tooltipLabel: "events" },
+  { value: "sessionCount", label: "Sessions", tooltipLabel: "sessions" }
+];
+function normalizeScope(scope) {
+  if (scope.type === "project" && scope.cwd.trim().length > 0) {
+    return { type: "project", cwd: scope.cwd.trim() };
+  }
+  return { type: "all" };
+}
+function parseDateKey(value) {
+  return /* @__PURE__ */ new Date(`${value}T00:00:00`);
+}
+function formatDateKey(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function getContributionLevel(outputTokens, maxOutputTokens) {
+  if (!Number.isFinite(outputTokens) || outputTokens <= 0 || maxOutputTokens <= 0) {
+    return 0;
+  }
+  const normalized = Math.log(outputTokens + 1) / Math.log(maxOutputTokens + 1);
+  if (normalized < 0.25) {
+    return 1;
+  }
+  if (normalized < 0.5) {
+    return 2;
+  }
+  if (normalized < 0.75) {
+    return 3;
+  }
+  return 4;
+}
+function getDailyMetricValue(point, metric) {
+  if (!point) {
+    return 0;
+  }
+  switch (metric) {
+    case "totalTokens":
+      return point.totalTokens;
+    case "inputTokens":
+      return point.inputTokens;
+    case "outputTokens":
+      return point.outputTokens;
+    case "eventCount":
+      return point.eventCount;
+    case "sessionCount":
+      return point.sessionCount;
+    default:
+      return 0;
+  }
+}
+function buildDailyContributionGrid(daily, metric) {
+  if (daily.length === 0) {
+    return {
+      weeks: [],
+      months: []
+    };
+  }
+  const sorted = [...daily].sort((left, right) => left.date.localeCompare(right.date));
+  const valuesByDate = new Map(sorted.map((point) => [point.date, point]));
+  const maxMetricValue = Math.max(...sorted.map((point) => getDailyMetricValue(point, metric)), 0);
+  const firstDate = parseDateKey(sorted[0].date);
+  const lastDate = parseDateKey(sorted[sorted.length - 1].date);
+  const paddedStart = new Date(firstDate);
+  paddedStart.setDate(paddedStart.getDate() - paddedStart.getDay());
+  const paddedEnd = new Date(lastDate);
+  paddedEnd.setDate(paddedEnd.getDate() + (6 - paddedEnd.getDay()));
+  const weeks = [];
+  const cursor = new Date(paddedStart);
+  while (cursor <= paddedEnd) {
+    const week = [];
+    for (let offset = 0; offset < 7; offset += 1) {
+      const date = formatDateKey(cursor);
+      const point = valuesByDate.get(date);
+      const inRange = cursor >= firstDate && cursor <= lastDate;
+      const metricValue = getDailyMetricValue(point, metric);
+      week.push({
+        date,
+        metricValue,
+        level: getContributionLevel(metricValue, maxMetricValue),
+        inRange
+      });
+      cursor.setDate(cursor.getDate() + 1);
+    }
+    weeks.push(week);
+  }
+  const months = [];
+  let previousMonthKey = "";
+  weeks.forEach((week, weekIndex) => {
+    const monthStartCell = week.find((cell) => cell.inRange && cell.date.endsWith("-01"));
+    const anchor = monthStartCell != null ? monthStartCell : week.find((cell) => cell.inRange);
+    if (!anchor) {
+      return;
+    }
+    const monthDate = parseDateKey(anchor.date);
+    const monthKey = `${monthDate.getFullYear()}-${String(monthDate.getMonth() + 1).padStart(2, "0")}`;
+    if (monthKey === previousMonthKey) {
+      return;
+    }
+    months.push({
+      key: monthKey,
+      label: monthDate.toLocaleString(void 0, { month: "short" }),
+      weekIndex
+    });
+    previousMonthKey = monthKey;
+  });
+  return {
+    weeks,
+    months
+  };
+}
+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
+  }));
+  const [calendarMetric, setCalendarMetric] = reactExports.useState("outputTokens");
+  const [contributionTooltip, setContributionTooltip] = reactExports.useState(null);
+  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 : [0]);
+    },
+    [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]
+  );
+  const dailyContributionGrid = reactExports.useMemo(
+    () => {
+      var _a;
+      return buildDailyContributionGrid((_a = statsData == null ? void 0 : statsData.daily) != null ? _a : [], calendarMetric);
+    },
+    [statsData, calendarMetric]
+  );
+  const selectedCalendarMetricOption = reactExports.useMemo(
+    () => {
+      var _a;
+      return (_a = CALENDAR_METRIC_OPTIONS.find((option) => option.value === calendarMetric)) != null ? _a : CALENDAR_METRIC_OPTIONS[2];
+    },
+    [calendarMetric]
+  );
+  reactExports.useEffect(() => {
+    setContributionTooltip(null);
+  }, [calendarMetric, statsData]);
+  const uncachedInputTokens = reactExports.useMemo(
+    () => {
+      var _a, _b;
+      return Math.max(((_a = statsData == null ? void 0 : statsData.totals.inputTokens) != null ? _a : 0) - ((_b = statsData == null ? void 0 : statsData.totals.cachedTokens) != null ? _b : 0), 0);
+    },
+    [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",
+            title: `Cached: ${statsData.totals.cachedTokens.toLocaleString()} | Uncached: ${uncachedInputTokens.toLocaleString()}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stat-label", children: "In" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "stat-value", children: statsData.totals.inputTokens.toLocaleString() })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "stat-card", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "stat-label", children: "Out" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "stat-value", children: statsData.totals.outputTokens.toLocaleString() })
+        ] })
+      ] }),
+      /* @__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 rawWidthPercent = dailyMaxOutput > 0 ? point.outputTokens / dailyMaxOutput * 100 : 0;
+          const widthPercent = Number.isFinite(rawWidthPercent) ? Math.max(0, Math.min(100, rawWidthPercent)) : 0;
+          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-section", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-section-header", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Output calendar" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-section-header-actions", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "sidebar-label", htmlFor: "stats-calendar-metric", children: "Type" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "select",
+              {
+                id: "stats-calendar-metric",
+                className: "app-select stats-contrib-select",
+                value: calendarMetric,
+                onChange: (event) => {
+                  setCalendarMetric(event.target.value);
+                },
+                children: CALENDAR_METRIC_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value))
+              }
+            )
+          ] })
+        ] }),
+        dailyContributionGrid.weeks.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "empty-copy", children: "No daily token data yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-contrib-frame", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "stats-contrib-weekdays", children: CONTRIBUTION_WEEKDAY_LABELS.map((label, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: label }, `contrib-weekday-${index}`)) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "stats-contrib-scroll", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "stats-contrib-months",
+                style: { gridTemplateColumns: `repeat(${dailyContributionGrid.weeks.length}, 12px)` },
+                children: dailyContributionGrid.months.map((month) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "span",
+                  {
+                    className: "stats-contrib-month",
+                    style: { gridColumn: String(month.weekIndex + 1) },
+                    children: month.label
+                  },
+                  month.key
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "stats-contrib-weeks",
+                role: "img",
+                "aria-label": "Daily output tokens calendar heatmap",
+                children: dailyContributionGrid.weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "stats-contrib-week", children: week.map((cell) => {
+                  const tooltipText = `${cell.date} • ${cell.metricValue.toLocaleString()} ${selectedCalendarMetricOption.tooltipLabel}`;
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: `stats-contrib-cell level-${cell.level}${!cell.inRange ? " is-padding" : ""}${cell.inRange && cell.level === 0 ? " is-empty" : ""}`,
+                      title: cell.inRange ? tooltipText : void 0,
+                      "aria-label": cell.inRange ? tooltipText : void 0,
+                      tabIndex: cell.inRange ? 0 : -1,
+                      onMouseEnter: (event) => {
+                        if (!cell.inRange) {
+                          return;
+                        }
+                        setContributionTooltip({
+                          text: tooltipText,
+                          x: event.clientX,
+                          y: event.clientY
+                        });
+                      },
+                      onMouseMove: (event) => {
+                        if (!cell.inRange) {
+                          return;
+                        }
+                        setContributionTooltip({
+                          text: tooltipText,
+                          x: event.clientX,
+                          y: event.clientY
+                        });
+                      },
+                      onMouseLeave: () => {
+                        setContributionTooltip(null);
+                      },
+                      onFocus: (event) => {
+                        if (!cell.inRange) {
+                          return;
+                        }
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        setContributionTooltip({
+                          text: tooltipText,
+                          x: rect.left + rect.width / 2,
+                          y: rect.bottom + 4
+                        });
+                      },
+                      onBlur: () => {
+                        setContributionTooltip(null);
+                      }
+                    },
+                    cell.date
+                  );
+                }) }, `week-${weekIndex}`))
+              }
+            )
+          ] })
+        ] }),
+        contributionTooltip ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "stats-contrib-tooltip",
+            role: "tooltip",
+            style: {
+              left: `${contributionTooltip.x + 12}px`,
+              top: `${contributionTooltip.y + 12}px`
+            },
+            children: contributionTooltip.text
+          }
+        ) : null
+      ] }),
+      /* @__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,
@@ -10829,12 +11384,15 @@ function parseCommandPreview(execution) {
   return null;
 }
 const ExecutionTrace = ({ execution }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const [expanded, setExpanded] = reactExports.useState(false);
   const output = (_b = (_a = execution.functionOutput) == null ? void 0 : _a.output) != null ? _b : "";
   const commandPreview = reactExports.useMemo(() => parseCommandPreview(execution), [execution]);
   const isTerminalCommand = reactExports.useMemo(() => isTerminalCommandExecution(execution), [execution]);
-  const tokenUsageLabel = execution.tokenUsage ? `${execution.tokenUsage.inputTokens.toLocaleString()} in • ${execution.tokenUsage.outputTokens.toLocaleString()} out` : null;
+  const tokenUsageLabel = execution.tokenUsage ? `${execution.tokenUsage.inputTokens.toLocaleString()} in (${((_c = execution.tokenUsage.cachedInputTokens) != null ? _c : 0).toLocaleString()} cached + ${Math.max(
+    execution.tokenUsage.inputTokens - ((_d = execution.tokenUsage.cachedInputTokens) != null ? _d : 0),
+    0
+  ).toLocaleString()} uncached) • ${execution.tokenUsage.outputTokens.toLocaleString()} out` : null;
   const formattedArguments = reactExports.useMemo(
     () => prettyPrintJson(execution.functionCall.arguments),
     [execution.functionCall.arguments]
@@ -10843,7 +11401,7 @@ const ExecutionTrace = ({ execution }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "section",
     {
-      className: `trace-card ${((_c = execution.functionOutput) == null ? void 0 : _c.isError) ? "error" : ""} ${isTerminalCommand ? "terminal" : ""}`,
+      className: `trace-card ${((_e = execution.functionOutput) == null ? void 0 : _e.isError) ? "error" : ""} ${isTerminalCommand ? "terminal" : ""}`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
@@ -10891,7 +11449,9 @@ const ExecutionTraceGroup = ({
 }) => {
   const [expanded, setExpanded] = reactExports.useState(false);
   const tokenTotals = reactExports.useMemo(() => {
+    var _a;
     let inputTokens = 0;
+    let cachedInputTokens = 0;
     let outputTokens = 0;
     let hasTokenUsage = false;
     for (const execution of executions) {
@@ -10900,15 +11460,19 @@ const ExecutionTraceGroup = ({
       }
       hasTokenUsage = true;
       inputTokens += execution.tokenUsage.inputTokens;
+      cachedInputTokens += (_a = execution.tokenUsage.cachedInputTokens) != null ? _a : 0;
       outputTokens += execution.tokenUsage.outputTokens;
     }
-    return { hasTokenUsage, inputTokens, outputTokens };
+    return { hasTokenUsage, inputTokens, cachedInputTokens, outputTokens };
   }, [executions]);
   if (executions.length === 0) {
     return null;
   }
   const countLabel = `${executions.length} command${executions.length === 1 ? "" : "s"}`;
-  const tokenUsageLabel = tokenTotals.hasTokenUsage ? `${tokenTotals.inputTokens.toLocaleString()} in • ${tokenTotals.outputTokens.toLocaleString()} out` : null;
+  const tokenUsageLabel = tokenTotals.hasTokenUsage ? `${tokenTotals.inputTokens.toLocaleString()} in (${tokenTotals.cachedInputTokens.toLocaleString()} cached + ${Math.max(
+    tokenTotals.inputTokens - tokenTotals.cachedInputTokens,
+    0
+  ).toLocaleString()} uncached) • ${tokenTotals.outputTokens.toLocaleString()} out` : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "trace-group-card", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
@@ -11320,6 +11884,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 +11908,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 +11957,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 +12015,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 +12050,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 +12073,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 +12127,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 +12364,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 +12373,7 @@ const TabBar = () => {
     setActiveTab,
     closeTab,
     openDashboardTab,
+    openStatsTab,
     openSettingsTab,
     toggleSidebarCollapsed,
     sidebarCollapsed
@@ -11712,6 +12383,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 +12415,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 +12469,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 +12481,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
       ] })