@hienlh/ppm 0.23.2 → 0.23.3

package/src/services/db.service.ts

@@ -8,7 +8,7 @@ import { backupDbSync } from "./db-backup/db-backup-sync.ts";
 import { CODEX_DEFAULT_MODEL } from "../types/config.ts";
 // Must equal the last `PRAGMA user_version` below: the pre-migration snapshot is skipped for
 // any database already at this version, so a stale value silently drops that backup.
-export const CURRENT_SCHEMA_VERSION = 50;
+export const CURRENT_SCHEMA_VERSION = 51;
 
 let db: Database | null = null;
 let dbProfile: string | null = null;
@@ -1147,6 +1147,14 @@ export function runMigrations(database: Database): void {
     try { database.exec("ALTER TABLE session_metadata ADD COLUMN permission_mode TEXT"); } catch { /* exists */ }
     database.exec(`PRAGMA user_version = 50;`);
   }
+
+  if (current < 51) {
+    // Usage details that have no fixed column: Claude's per-model weekly limits (Fable and
+    // whatever comes next arrive as `limits[]` entries, not as `seven_day_<model>` keys) and
+    // Codex's free rate-limit reset credits. JSON so a new model needs no migration of its own.
+    try { database.exec("ALTER TABLE claude_limit_snapshots ADD COLUMN extra_json TEXT"); } catch { /* exists */ }
+    database.exec(`PRAGMA user_version = 51;`);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -1850,6 +1858,8 @@ export interface LimitSnapshotRow {
   weekly_opus_resets_at: string | null;
   weekly_sonnet_util: number | null;
   weekly_sonnet_resets_at: string | null;
+  /** JSON {@link import("../shared/usage-extra.ts").UsageExtra}: per-model weekly limits, reset credits. */
+  extra_json?: string | null;
   recorded_at: string;
 }
 
@@ -1859,8 +1869,8 @@ export function insertLimitSnapshot(
   getDb().query(
     `INSERT INTO claude_limit_snapshots
       (provider, account_id, five_hour_util, five_hour_resets_at, weekly_util, weekly_resets_at,
-       weekly_opus_util, weekly_opus_resets_at, weekly_sonnet_util, weekly_sonnet_resets_at)
-     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+       weekly_opus_util, weekly_opus_resets_at, weekly_sonnet_util, weekly_sonnet_resets_at, extra_json)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
   ).run(
     data.provider ?? DEFAULT_USAGE_PROVIDER,
     data.account_id ?? null,
@@ -1868,6 +1878,7 @@ export function insertLimitSnapshot(
     data.weekly_util ?? null, data.weekly_resets_at ?? null,
     data.weekly_opus_util ?? null, data.weekly_opus_resets_at ?? null,
     data.weekly_sonnet_util ?? null, data.weekly_sonnet_resets_at ?? null,
+    data.extra_json ?? null,
   );
 }
 

package/src/services/provider-usage/usage-snapshot-store.ts

@@ -8,6 +8,7 @@ import {
   type LimitSnapshotRow,
 } from "../db.service.ts";
 import { AMBIENT_ACCOUNT_KEY } from "./usage-source.ts";
+import { deserializeUsageExtra, serializeUsageExtra, usageExtraSignature } from "../../shared/usage-extra.ts";
 
 /**
  * The durable half of the usage layer: turning a provider's `UsageInfo` into a
@@ -58,7 +59,7 @@ export function snapshotToUsage(row: LimitSnapshotRow): UsageInfo & { lastFetche
   if (row.weekly_sonnet_util != null) {
     usage.weeklySonnet = toBucket(row.weekly_sonnet_util, row.weekly_sonnet_resets_at ?? "", 168);
   }
-  return usage;
+  return { ...usage, ...deserializeUsageExtra(row.extra_json) };
 }
 
 /** Read the newest stored snapshot for one provider account, or undefined. */
@@ -89,6 +90,7 @@ function hasChanged(usage: UsageInfo, last: LimitSnapshotRow | null): boolean {
   if (moved(usage.weeklySonnet?.utilization, last.weekly_sonnet_util)) return true;
   if (usage.session?.resetsAt && usage.session.resetsAt !== (last.five_hour_resets_at ?? "")) return true;
   if (usage.weekly?.resetsAt && usage.weekly.resetsAt !== (last.weekly_resets_at ?? "")) return true;
+  if (usageExtraSignature(serializeUsageExtra(usage)) !== usageExtraSignature(last.extra_json)) return true;
   return false;
 }
 
@@ -101,7 +103,8 @@ function hasChanged(usage: UsageInfo, last: LimitSnapshotRow | null): boolean {
  */
 export function writeStoredUsage(providerId: string, accountId: string, usage: UsageInfo): void {
   const hasAnyBucket = usage.session != null || usage.weekly != null
-    || usage.weeklyOpus != null || usage.weeklySonnet != null;
+    || usage.weeklyOpus != null || usage.weeklySonnet != null
+    || !!usage.weeklyScoped?.length || usage.resetCredits != null;
   if (!hasAnyBucket) return;
 
   const id = accountId === AMBIENT_ACCOUNT_KEY ? null : accountId;
@@ -121,6 +124,7 @@ export function writeStoredUsage(providerId: string, accountId: string, usage: U
     weekly_opus_resets_at: usage.weeklyOpus?.resetsAt ?? null,
     weekly_sonnet_util: usage.weeklySonnet?.utilization ?? null,
     weekly_sonnet_resets_at: usage.weeklySonnet?.resetsAt ?? null,
+    extra_json: serializeUsageExtra(usage),
   });
   cleanupOldLimitSnapshots();
 }

package/src/shared/usage-extra.ts

@@ -0,0 +1,123 @@
+/**
+ * Usage details that have no fixed column: parsed from the provider's payload, stored as
+ * one JSON column on the limit snapshot, and read back into `UsageInfo`.
+ *
+ * Two things live here today, and both would otherwise vanish whenever usage is served from
+ * the stored snapshot rather than a live fetch:
+ *
+ * - Claude's per-model weekly limits. Anthropic stopped filling `seven_day_opus` /
+ *   `seven_day_sonnet` (both null now) and reports a model's own weekly cap as a
+ *   `limits[]` entry of kind `weekly_scoped` with the model's display name — that is how
+ *   "Fable" arrives. Read by name, so the next model shows up without a code change.
+ * - Codex's free rate-limit reset credits (`rateLimitResetCredits`), which say how many
+ *   "reset my limits" grants the account still holds and when they lapse.
+ *
+ * Pure and dependency-free so both the server and the browser can use it.
+ */
+import type { ResetCredits, ScopedLimitBucket } from "../types/chat.ts";
+
+/** A per-model limit as stored: no countdown fields, those are recomputed on read. */
+export interface StoredScopedLimit {
+  label: string;
+  utilization: number;
+  resetsAt: string;
+}
+
+export interface UsageExtra {
+  scoped?: StoredScopedLimit[];
+  resetCredits?: ResetCredits;
+}
+
+const WEEK_HOURS = 168;
+
+/** Recompute a weekly bucket's countdown against the current clock. */
+export function scopedBucket(s: StoredScopedLimit): ScopedLimitBucket {
+  const diff = s.resetsAt ? new Date(s.resetsAt).getTime() - Date.now() : 0;
+  const totalMins = diff > 0 ? Math.ceil(diff / 60_000) : 0;
+  return {
+    label: s.label,
+    utilization: s.utilization,
+    resetsAt: s.resetsAt,
+    resetsInMinutes: null,
+    resetsInHours: Math.round((totalMins / 60) * 100) / 100,
+    windowHours: WEEK_HOURS,
+  };
+}
+
+/**
+ * Claude `limits[]` → per-model weekly limits.
+ *
+ * `percent` is 0–100 like the rest of that payload; stored as a 0–1 fraction like every other
+ * bucket. Entries without a model name are skipped: an unlabelled row would read as a second
+ * "Weekly" bar that disagrees with the real one.
+ */
+export function parseClaudeScopedLimits(raw: unknown): StoredScopedLimit[] {
+  const limits = (raw as { limits?: unknown })?.limits;
+  if (!Array.isArray(limits)) return [];
+  const out: StoredScopedLimit[] = [];
+  for (const l of limits as Array<Record<string, any>>) {
+    if (l?.kind !== "weekly_scoped") continue;
+    const label = l?.scope?.model?.display_name;
+    if (typeof label !== "string" || !label.trim() || typeof l.percent !== "number") continue;
+    out.push({ label: label.trim(), utilization: l.percent / 100, resetsAt: typeof l.resets_at === "string" ? l.resets_at : "" });
+  }
+  return out;
+}
+
+/**
+ * Codex `rateLimitResetCredits` → how many free resets are left and when the next lapses.
+ *
+ * Only credits Codex marks `available` count; a used or expired one is history. Returns
+ * undefined when the payload has no credits block at all, so "none reported" and "0 left"
+ * stay distinguishable.
+ */
+export function parseCodexResetCredits(raw: unknown): ResetCredits | undefined {
+  const block = (raw as { rateLimitResetCredits?: unknown })?.rateLimitResetCredits as
+    { credits?: Array<Record<string, any>> } | null | undefined;
+  if (!block || !Array.isArray(block.credits)) return undefined;
+  const available = block.credits
+    .filter((c) => c?.status === "available")
+    .filter((c) => typeof c.expiresAt !== "number" || c.expiresAt * 1000 > Date.now())
+    .sort((a, b) => (a.expiresAt ?? Infinity) - (b.expiresAt ?? Infinity));
+  const next = available[0];
+  return {
+    available: available.length,
+    ...(typeof next?.expiresAt === "number" ? { nextExpiresAt: new Date(next.expiresAt * 1000).toISOString() } : {}),
+    ...(typeof next?.title === "string" ? { title: next.title } : {}),
+  };
+}
+
+/** The extra fields of a `UsageInfo`, as the JSON column holds them — null when there are none. */
+export function serializeUsageExtra(u: { weeklyScoped?: ScopedLimitBucket[]; resetCredits?: ResetCredits }): string | null {
+  const extra: UsageExtra = {};
+  if (u.weeklyScoped?.length) {
+    extra.scoped = u.weeklyScoped.map((b) => ({ label: b.label, utilization: b.utilization, resetsAt: b.resetsAt }));
+  }
+  if (u.resetCredits) extra.resetCredits = u.resetCredits;
+  return extra.scoped || extra.resetCredits ? JSON.stringify(extra) : null;
+}
+
+/** The JSON column back into `UsageInfo` fields. Malformed JSON reads as nothing, not a throw. */
+export function deserializeUsageExtra(json: string | null | undefined): { weeklyScoped?: ScopedLimitBucket[]; resetCredits?: ResetCredits } {
+  if (!json) return {};
+  let extra: UsageExtra;
+  try { extra = JSON.parse(json) as UsageExtra; } catch { return {}; }
+  return {
+    ...(extra.scoped?.length ? { weeklyScoped: extra.scoped.map(scopedBucket) } : {}),
+    ...(extra.resetCredits ? { resetCredits: extra.resetCredits } : {}),
+  };
+}
+
+/**
+ * What counts as a change worth a new snapshot row.
+ *
+ * Reset timestamps are left out on purpose: Claude's carry microseconds that differ on every
+ * call ("08:59:59.720048" then "09:00:00.363882"), so comparing them would write a row per
+ * sweep. A utilization moving or a credit being granted/used is what matters.
+ */
+export function usageExtraSignature(json: string | null | undefined): string {
+  const e = deserializeUsageExtra(json);
+  const scoped = (e.weeklyScoped ?? []).map((b) => `${b.label}:${b.utilization.toFixed(3)}`).sort().join(",");
+  const credits = e.resetCredits ? `${e.resetCredits.available}@${e.resetCredits.nextExpiresAt ?? ""}` : "";
+  return `${scoped}|${credits}`;
+}

package/src/types/chat.ts

@@ -209,10 +209,29 @@ export interface UsageInfo {
   weekly?: LimitBucket;
   weeklyOpus?: LimitBucket;
   weeklySonnet?: LimitBucket;
+  /** Claude's per-model weekly limits ("Fable", …), labelled by model. */
+  weeklyScoped?: ScopedLimitBucket[];
+  /** Codex's free rate-limit resets still available to this account. */
+  resetCredits?: ResetCredits;
   activeAccountId?: string;
   activeAccountLabel?: string;
 }
 
+/** A weekly limit that applies to one model only, named as the provider names it. */
+export interface ScopedLimitBucket extends LimitBucket {
+  label: string;
+}
+
+/** Free "reset my rate limits" credits Codex grants an account. */
+export interface ResetCredits {
+  /** How many can still be used. */
+  available: number;
+  /** ISO time the soonest-expiring one lapses, if any is available. */
+  nextExpiresAt?: string;
+  /** What the soonest one resets, as Codex words it ("Full reset (Weekly + 5 hr)"). */
+  title?: string;
+}
+
 /** Result subtype from SDK ResultMessage */
 export type ResultSubtype =
   | "success"

package/src/web/app.tsx

@@ -15,7 +15,7 @@ import { useTabStore } from "@/stores/tab-store";
 import { hydrateWorkspaceFromServer } from "@/stores/panel-utils";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useTheme } from "@/theme/use-theme";
-import { initShikiThemeSync, warmShiki } from "@/theme/adapters/shiki-adapter";
+import { initShikiThemeSync } from "@/theme/adapters/shiki-adapter";
 import { initMonacoThemeSync } from "@/theme/adapters/monaco-adapter";
 import { getAuthToken } from "@/lib/api-client";
 import { useUrlSync, parseUrlState, autoOpenFromUrl } from "@/hooks/use-url-sync";
@@ -24,6 +24,7 @@ import { useNotificationBadge } from "@/hooks/use-notification-badge";
 import { useWakeLock } from "@/hooks/use-wake-lock";
 import { WakeLockMobileBadge } from "@/components/layout/wake-lock-indicator";
 import { useTabPrefetch } from "@/hooks/use-tab-prefetch";
+import { useFileIndexInvalidation } from "@/hooks/use-file-index-invalidation";
 import { useGlobalEvents } from "@/hooks/use-global-events";
 import { useServerReload } from "@/hooks/use-server-reload";
 import { CommandPalette } from "@/components/layout/command-palette";
@@ -59,6 +60,7 @@ const RemoteDesktopMobileSheet = lazy(() =>
 type AuthState = "checking" | "authenticated" | "unauthenticated";
 
 export function App() {
+  useFileIndexInvalidation();
   const [authState, setAuthState] = useState<AuthState>("checking");
   const isMobileViewport = useIsMobile();
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -70,10 +72,9 @@ export function App() {
   );
   // Resolves the active theme from the store and applies CSS vars to <html>.
   useTheme();
-  // Sync Shiki syntax highlighting to the active theme + warm the highlighter.
+  // Subscribe to themes without downloading either editor engine at startup.
   useEffect(() => {
     initShikiThemeSync();
-    warmShiki();
     initMonacoThemeSync();
   }, []);
   const deviceName = useSettingsStore((s) => s.deviceName);
@@ -307,7 +308,7 @@ export function App() {
         {/* Main layout */}
         <div className="flex flex-1 overflow-hidden">
           {/* Desktop unified nav rail (wordmark + project switcher + section rail + panel) */}
-          <Sidebar />
+          {!isMobileViewport && <Sidebar />}
 
           {/* Content area — keep-alive per project. `relative` is the positioning context
               the floating window layer measures and clamps its windows against. */}

package/src/web/components/ai-resources/ai-resource-editor.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback, useRef } from "react";
 import Editor from "@monaco-editor/react";
 import { Save, Undo2, Loader2, AlertTriangle, Lock } from "@/lib/icons";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { useAiResourcesStore } from "@/stores/ai-resources-store";
 import { readAiResource, writeAiResource, type AiResourceType, type AiResourceScope } from "@/lib/api-ai-resources";
 import { ScopeBadge, TYPE_ICON } from "./resource-visuals";
@@ -132,6 +133,7 @@ export function AiResourceEditor({ metadata }: AiResourceEditorProps) {
           <div className="p-6 text-center text-sm text-destructive">{error}</div>
         ) : (
           <Editor
+            beforeMount={prepareMonacoTheme}
             height="100%"
             language="markdown"
             theme={monacoTheme}

package/src/web/components/chat/chat-tab.tsx

@@ -145,7 +145,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       metadata?.pickedAccountProvider === providerId ? metadata?.pickedAccountId as string | undefined : undefined);
 
   // Draft auto-save/restore
-  const { draft, draftLoading, saveDraft, clearDraft, cancelPendingSave } = useDraft(projectName, sessionId);
+  const { draft, draftLoading, saveDraft, clearDraft, cancelPendingSave, moveDraft } = useDraft(projectName, sessionId, tabId);
 
   // Load global default permission mode on mount (if no per-session override)
   useEffect(() => {
@@ -402,6 +402,9 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   // echo — appending it to the still-visible source transcript would render the
   // edit in the wrong place; the real message appears once the fork loads.)
   const [editForking, setEditForking] = useState(false);
+  // Covers session creation AND the wait for its socket greeting. Streaming
+  // starts only after the queued first message reaches that socket.
+  const [firstSendPending, setFirstSendPending] = useState(false);
 
   /**
    * A message that could not be sent, on its way back into the composer. A nonce
@@ -427,6 +430,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
    * nothing at all.
    */
   const restoreUnsentMessage = useCallback((content: string, reason: string) => {
+    setFirstSendPending(false);
     setRestore({ text: content, nonce: Date.now() });
     toast.error("Message not sent", { description: `${reason} Your text is back in the input.` });
   }, []);
@@ -469,6 +473,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       pendingSendRef.current = null;
       if (pendingSendTimerRef.current) { clearTimeout(pendingSendTimerRef.current); pendingSendTimerRef.current = null; }
       sendMessage(content, { permissionMode: pm, ...(pendingImages?.length && { images: pendingImages }), ...(pendingPaths?.length && { imagePaths: pendingPaths }) });
+      setFirstSendPending(false);
       clearDraft(draftId);
     }
   }, [isConnected, sendMessage, clearDraft]);
@@ -620,6 +625,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         // reconnects to the forked session. The draft was composed under the
         // source session, so that is the one to clear when it goes.
         queuePendingSend({ content: fullContent, draftId: sessionId, permissionMode });
+        moveDraft(forked.id);
         // Swap the current tab to the forked session (no new tab).
         setStaleSwap(true);
         if (tabId) patchTabMetadata(tabId, { sessionId: forked.id });
@@ -638,7 +644,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         setRestore({ text: fullContent, nonce: Date.now() });
       }
     },
-    [sessionId, projectName, providerId, permissionMode, tabId, queuePendingSend],
+    [sessionId, projectName, providerId, permissionMode, tabId, queuePendingSend, moveDraft],
   );
 
   /** Swap THIS tab to another version's session (version switcher prev/next) */
@@ -711,6 +717,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       if (!fullContent.trim() && images.length === 0) return;
 
       if (!sessionId) {
+        setFirstSendPending(true);
         try {
           const pName = projectName;
           // Bounded: the composer is already empty by now, and a create call that hangs
@@ -730,6 +737,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             // instructions and the design permission default.
             ...(designSlug && { designSlug }),
           }, { signal: AbortSignal.timeout(SESSION_CREATE_TIMEOUT_MS) });
+          moveDraft(session.id);
           setSessionId(session.id);
           setProviderId(session.providerId);
           // Queue message — will be sent by effect when WS reports isConnected. It was
@@ -749,7 +757,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       // Only now: the message is on (or queued for) a live session's socket.
       clearDraft();
     },
-    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata, pickedAccountId, queuePendingSend, restoreUnsentMessage, clearDraft, designSlug],
+    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata, pickedAccountId, queuePendingSend, restoreUnsentMessage, clearDraft, designSlug, moveDraft],
   );
 
   // Read through a ref so handleInputSend keeps a stable identity — it is passed to
@@ -774,7 +782,9 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         const item = slashItemsRef.current.find(
           (i) => i.handler === "client" && (i.name === slash[1] || i.aliases?.includes(slash[1]!)),
         );
-        if (item?.name === "clear") {
+        // This local action must also work before the lazily loaded picker
+        // catalog arrives (for example, paste /clear and immediately submit).
+        if (slash[1] === "clear" || item?.name === "clear") {
           clearDraft();
           handleNewSession(slash[2]?.trim(), sessionId ?? undefined);
           return;
@@ -782,6 +792,9 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       }
 
       setForkDraft(undefined);
+      // Save synchronously in this browser tab before the composer clears. A
+      // recovery reload can happen before either the POST or draft debounce ends.
+      saveDraft(content, attachments.filter((a) => a.serverPath).map((a) => ({ name: a.name, path: a.serverPath! })));
       cancelPendingSave();
       if (editFork && sessionId && projectName) {
         const anchor = editFork.anchorMsgId;
@@ -791,7 +804,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       }
       void handleSend(content, attachments, priority);
     },
-    [handleSend, clearDraft, cancelPendingSave, editFork, sessionId, projectName, handleEditSend, buildMessageWithAttachments, handleNewSession],
+    [handleSend, clearDraft, saveDraft, cancelPendingSave, editFork, sessionId, projectName, handleEditSend, buildMessageWithAttachments, handleNewSession],
   );
 
   // Past user messages for the composer's ArrowUp/Down recall. Read through a ref
@@ -963,7 +976,12 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       <BackgroundCommandBar shells={backgroundShells} onKill={killBackgroundShell} />
 
       {/* Messages */}
-      <MessageList
+      {firstSendPending ? (
+        <div role="status" className="flex flex-1 items-center justify-center gap-2 text-sm text-text-secondary">
+          <Loader2 className="size-4 animate-spin" />
+          <span>Starting conversation...</span>
+        </div>
+      ) : <MessageList
         messages={renderedMessages}
         onExpandCompact={expandCompact}
         isCompactExpanded={isCompactExpanded}
@@ -988,7 +1006,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         onDismissMessage={dismissMessage}
         onClearErrors={clearErrors}
         bashPartialOutput={bashPartialOutput}
-      />
+      />}
 
       {/* Teammates still working — pinned here so it is the last thing under the conversation */}
       <TeamWorkingBar teamName={primaryTeam} members={teamMembers} projectName={projectName} />
@@ -1073,6 +1091,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             draftReady={!draftLoading}
             tabId={tabId}
             onSend={handleInputSend}
+            disabled={firstSendPending}
             isStreaming={isStreaming}
             onCancel={cancelStreaming}
             autoFocus={!(metadata?.sessionId) || !!forkDraft}

package/src/web/components/chat/codex-usage-panel.tsx

@@ -27,7 +27,7 @@ import { UsagePanelShell } from "./usage-panel-shell";
 
 import { CODEX_SIGNED_OUT_HINT, type CodexAccount } from "@/components/settings/accounts/use-codex-accounts";
 import { CodexSignInAgainDialog } from "@/components/settings/accounts/codex-sign-in-again-dialog";
-type Usage = Pick<UsageInfo, "fiveHour" | "sevenDay" | "session" | "weekly">;
+type Usage = Pick<UsageInfo, "fiveHour" | "sevenDay" | "session" | "weekly" | "resetCredits">;
 
 /** Matches the whole-percent figure the bars show, so a refusal agrees with the card. */
 function atCap(util: number | null | undefined): boolean {
@@ -211,6 +211,7 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
             onDailyGuardToggle={guard ? () => void handleDailyGuardToggle(a.id, !!a.dailyGuardEnabled) : undefined}
             dailyGuardToggling={togglingId === a.id}
             reauthHint={a.signedOut ? CODEX_SIGNED_OUT_HINT : undefined}
+            resetCredits={u.resetCredits}
             // Only a ChatGPT sign-in can be renewed in place; a dead API key is replaced.
             onReauth={a.type === "chatgpt" ? () => setSignInAgain(a) : undefined}
           />

package/src/web/components/chat/message-input.tsx

@@ -1,4 +1,5 @@
 import { usePanelStore } from "@/stores/panel-store";
+import { useProjectStore } from "@/stores/project-store";
 import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
 import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock, Bot, X } from "@/lib/icons";
 import { useVoiceInput } from "@/hooks/use-voice-input";
@@ -394,8 +395,8 @@ export const MessageInput = memo(function MessageInput({
       });
   }, [projectName, providerId, sessionId, onSlashItemsLoaded]);
 
-  // Load when projectName changes (cache hit after the first tab in a project)
-  useEffect(() => { loadSlashItems(); }, [loadSlashItems]);
+  // Load on the first slash interaction below. Opening a transcript should
+  // not enumerate skills (or start a provider CLI) before the user needs them.
 
   // Refresh button invalidated the server cache — drop ours too, then refetch.
   useEffect(() => {
@@ -419,7 +420,12 @@ export const MessageInput = memo(function MessageInput({
       // Share the store's array rather than mapping it: every mounted chat tab runs this,
       // and a project index can hold tens of thousands of entries, so a per-tab copy
       // kept one full duplicate alive for each open chat. Consumers only read it.
-      const nodes: FileNode[] = useFileStore.getState().fileIndex;
+      const files = useFileStore.getState();
+      if (filePickerOpenRef.current && files.indexStatus === "idle" && useProjectStore.getState().activeProject?.name === projectName) {
+        void files.loadIndex(projectName);
+        return;
+      }
+      const nodes: FileNode[] = files.indexProjectName === projectName ? files.fileIndex : [];
       fileItemsRef.current = nodes;
       onFileItemsLoaded?.(nodes);
     };
@@ -760,7 +766,7 @@ export const MessageInput = memo(function MessageInput({
       // Check for slash anywhere in text (after whitespace or at start)
       if (hasSlash) {
         const slashMatch = textBefore.match(/(?:^|\s)\/(\S*)$/);
-        if (slashMatch && slashItemsRef.current.length > 0) {
+        if (slashMatch) {
           if (!slashPickerOpenRef.current) loadSlashItems();
           const filter = slashMatch[1] ?? "";
           onSlashStateChange?.(true, filter);
@@ -773,7 +779,11 @@ export const MessageInput = memo(function MessageInput({
       // Check for @ anywhere in text (after whitespace or at start)
       if (hasAt) {
         const atMatch = textBefore.match(/@(\S*)$/);
-        if (atMatch && fileItemsRef.current.length > 0) {
+        if (atMatch) {
+          const files = useFileStore.getState();
+          if (projectName && (files.indexProjectName !== projectName || files.indexStatus === "idle" || files.indexStatus === "error")) {
+            void files.loadIndex(projectName);
+          }
           onFileStateChange?.(true, atMatch[1] ?? "");
           filePickerOpenRef.current = true;
           if (slashPickerOpenRef.current) { onSlashStateChange?.(false, ""); slashPickerOpenRef.current = false; }
@@ -785,7 +795,7 @@ export const MessageInput = memo(function MessageInput({
       if (slashPickerOpenRef.current) { onSlashStateChange?.(false, ""); slashPickerOpenRef.current = false; }
       if (filePickerOpenRef.current) { onFileStateChange?.(false, ""); filePickerOpenRef.current = false; }
     },
-    [onSlashStateChange, onFileStateChange, loadSlashItems],
+    [onSlashStateChange, onFileStateChange, loadSlashItems, projectName],
   );
 
   /** Unified onChange for both textareas — updates ref, syncs other textarea, triggers picker */

package/src/web/components/chat/usage-badge.tsx

@@ -26,6 +26,7 @@ import { useAccountsData } from "@/components/settings/accounts/use-accounts-dat
 import { formatLastUpdated, formatResetTime, pctColor } from "@/components/settings/accounts/account-usage-format";
 import { UsagePanelShell } from "./usage-panel-shell";
 import { AddAccountDialog } from "@/components/settings/accounts/account-add-dialog";
+import { ScopedBucketRows } from "@/components/settings/accounts/account-usage-extras";
 
 /** Matches the whole-percent figure the usage bars show, so a refusal agrees with the card. */
 function atCap(util: number | null | undefined): boolean {
@@ -176,12 +177,13 @@ export function UsageDetailPanel({
       cardCount={usages.length}
       fallback={initialLoading ? (
         <p className="text-[10px] text-text-subtle">Loading...</p>
-      ) : usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet ? (
+      ) : usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet || usage.weeklyScoped?.length ? (
         <div className="space-y-2.5">
           <AccountBucketRow label="5-Hour Session" bucket={usage.session} />
           <AccountBucketRow label="Weekly" bucket={usage.weekly} />
           <AccountBucketRow label="Weekly (Opus)" bucket={usage.weeklyOpus} />
           <AccountBucketRow label="Weekly (Sonnet)" bucket={usage.weeklySonnet} />
+          <ScopedBucketRows buckets={usage.weeklyScoped} />
         </div>
       ) : (
         <p className="text-xs text-text-subtle">No usage data available</p>

package/src/web/components/database/glide-data-preview-panel.tsx

@@ -3,6 +3,7 @@ import { Eye, Sparkles, WrapText, ExternalLink, X, GripHorizontal } from "@/lib/
 import Editor from "@monaco-editor/react";
 import { Loader2 } from "@/lib/icons";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 
 export interface PreviewData {
   title: string;
@@ -94,6 +95,7 @@ export function GlideDataPreviewPanel({ data, onClose, onOpenInTab }: PreviewPan
       </div>
       <div className="flex-1 min-h-0">
         <Editor
+          beforeMount={prepareMonacoTheme}
           height="100%"
           language={data.language === "plaintext" ? undefined : data.language}
           value={displayContent}

package/src/web/components/database/sql-query-editor.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import Editor, { type OnMount } from "@monaco-editor/react";
 import type * as MonacoType from "monaco-editor";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { createSqlCompletionProvider, clearCompletionCache, type SchemaInfo } from "./sql-completion-provider";
 import { getStatementAtCursor } from "./split-sql-statements";
 
@@ -73,6 +74,7 @@ export function SqlQueryEditor({ onExecute, loading, defaultValue = "SELECT * FR
   return (
     <div className="h-full overflow-hidden">
       <Editor
+        beforeMount={prepareMonacoTheme}
         height="100%"
         language="sql"
         theme={monacoTheme}

package/src/web/components/editor/code-editor.tsx

@@ -10,6 +10,7 @@ import { OnboardingRunDocumentPreview } from "@/components/onboarding/onboarding
 import { useSettingsStore } from "@/stores/settings-store";
 import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { useInlineBlame } from "@/hooks/use-inline-blame";
 import { applyBuiltinTypeScript } from "@/lib/lsp/monaco-builtin-typescript";
 import { useIsMobile, isMobileDevice } from "@/hooks/use-is-mobile";
@@ -928,7 +929,10 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
             // Before, not on, mount: the model is created with its language
             // id first, and a model created against an unregistered id is
             // plaintext for good.
-            beforeMount={registerDotenvLanguage}
+            beforeMount={(monaco) => {
+              prepareMonacoTheme(monaco);
+              registerDotenvLanguage(monaco);
+            }}
             value={content ?? ""}
             onChange={inlineContent != null ? undefined : handleChange}
             onMount={handleEditorMount}

package/src/web/components/editor/conflict-editor.tsx

@@ -6,6 +6,7 @@ import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { EDITOR_FONT_FAMILY, EDITOR_FONT_LIGATURES, EDITOR_FONT_SIZE } from "@/lib/editor-font";
 import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
 import { Loader2 } from "@/lib/icons";
@@ -360,7 +361,10 @@ export function ConflictEditor({ metadata }: ConflictEditorProps) {
           <Editor
             height={containerHeight}
             language={language}
-            beforeMount={registerDotenvLanguage}
+            beforeMount={(monaco) => {
+              prepareMonacoTheme(monaco);
+              registerDotenvLanguage(monaco);
+            }}
             value={content}
             onMount={handleMount}
             theme={monacoTheme}

package/src/web/components/editor/diff-viewer.tsx

@@ -4,6 +4,7 @@ import { api, projectUrl } from "@/lib/api-client";
 import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { EDITOR_FONT_FAMILY, EDITOR_FONT_LIGATURES, EDITOR_FONT_SIZE } from "@/lib/editor-font";
 import { useGitRepo } from "@/hooks/use-git-repo";
 import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
@@ -362,7 +363,10 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
           <DiffEditor
             height={containerHeight}
             language={language}
-            beforeMount={registerDotenvLanguage}
+            beforeMount={(monaco) => {
+              prepareMonacoTheme(monaco);
+              registerDotenvLanguage(monaco);
+            }}
             original={original}
             modified={modified}
             theme={monacoTheme}