ompchamber 2.0.2 → 3.1.0

package/src/client/components/layout/RightActivityBar.tsx

@@ -1,4 +1,4 @@
-import { BarChart3, Bot, Files, GitBranch, Globe, Layers, Search, Terminal } from 'lucide-preact';
+import { BarChart3, Bot, Files, GitBranch, Globe, Layers, ListTodo, Search, Terminal } from 'lucide-preact';
 import type { ReactNode } from 'preact/compat';
 import { useGitStatus } from '@/client/hooks/workspace/git-status';
 import { GIT_STATUS_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
@@ -27,6 +27,7 @@ const PANEL_META: Record<RightPanelType, { title: string; icon: ReactNode }> = {
   'user-browser': { title: 'Browser (Anda)', icon: <Globe size={16} /> },
   browser: { title: 'Browser Agent', icon: <Bot size={16} /> },
   usage: { title: 'Usage', icon: <BarChart3 size={16} /> },
+  todo: { title: 'Todos', icon: <ListTodo size={16} /> },
 };
 
 export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasActiveContext, activeProjectPath, refreshKey }: RightActivityBarProps) {

package/src/client/components/layout/desktop-layout/TopNavbar.tsx

@@ -2,6 +2,19 @@ import { LayoutTemplate, MoreHorizontal, PanelLeft, PanelRight, PanelRightClose,
 import { PWAInstallButton } from '@/client/components/common/PWAInstallButton';
 import { StreamStatusDot } from '@/client/components/common/StreamStatusDot';
 import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
+import { WORKSPACE_KEY_BINDINGS, type WorkspaceCommand } from '@/shared/lib/workspace/keymap';
+import { describeBinding } from '@/shared/lib/ui/key-binding';
+
+/**
+ * A tooltip's text with the chord that actually invokes it. Derived from the
+ * workspace keymap rather than typed out, because a hand-written "⌘B" beside a
+ * binding that listens for something else is exactly the drift the keymap
+ * table exists to prevent.
+ */
+function withChord(command: WorkspaceCommand, label: string): string {
+  const binding = WORKSPACE_KEY_BINDINGS.find((entry) => entry.command === command);
+  return binding ? `${label} (${describeBinding(binding)})` : label;
+}
 
 interface TopNavbarProps {
   sessionTitle: string | null;
@@ -42,8 +55,8 @@ export function TopNavbar({
               type="button"
               onClick={onToggleLeftPanel}
               className="p-1.5 rounded hover:bg-ink/10 transition-colors text-ink/60 hover:text-ink cursor-pointer flex-shrink-0 titlebar-no-drag"
-              title="Expand Sidebar"
-              aria-label="Expand Sidebar"
+              title={withChord('toggleSidebar', 'Expand Sidebar')}
+              aria-label={withChord('toggleSidebar', 'Expand Sidebar')}
             >
               <PanelLeft size={16} />
             </button>
@@ -86,7 +99,9 @@ export function TopNavbar({
             type="button"
             onClick={onToggleEditor}
             className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${showEditor ? 'text-ink' : 'text-ink/40'}`}
-            title="Toggle Editor Layout"
+            title={withChord('toggleEditorPanel', 'Toggle Editor Layout')}
+            aria-label={withChord('toggleEditorPanel', 'Toggle Editor Layout')}
+            aria-pressed={showEditor}
           >
             <LayoutTemplate size={16} />
           </button>
@@ -94,7 +109,9 @@ export function TopNavbar({
             type="button"
             onClick={onToggleRightPanel}
             className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${showRightPanel ? 'text-ink' : 'text-ink/40'}`}
-            title="Toggle Right Panel"
+            title={withChord('toggleRightPanel', 'Toggle Right Panel')}
+            aria-label={withChord('toggleRightPanel', 'Toggle Right Panel')}
+            aria-pressed={showRightPanel}
           >
             {showRightPanel ? <PanelRightClose size={16} /> : <PanelRight size={16} />}
           </button>

package/src/client/components/layout/desktop-layout/WorkspacePanels.tsx

@@ -56,6 +56,8 @@ interface WorkspacePanelsProps {
   refreshKey: number;
   onSetActiveFileId: (id: number | string | null) => void;
   onCloseFile: (id: number | string) => void;
+  /** Replace a diff tab with the plain editor tab for the same file. */
+  onConvertDiffToEditor: (id: number | string) => void;
   onOpenFile: (file: any) => void;
   onRefreshWorkspace: () => void;
   onChangeRightPanel: (panel: RightPanelType) => void;
@@ -81,6 +83,7 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
     refreshKey,
     onSetActiveFileId,
     onCloseFile,
+    onConvertDiffToEditor,
     onOpenFile,
     onRefreshWorkspace,
     onChangeRightPanel,
@@ -185,6 +188,7 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
               activeFileId={activeFileId}
               onSelectFile={onSetActiveFileId}
               onCloseFile={onCloseFile}
+              onConvertDiffToEditor={onConvertDiffToEditor}
               refreshKey={refreshKey}
               onFileSaved={onRefreshWorkspace}
             />

package/src/client/components/layout/desktop-layout/index.tsx

@@ -16,6 +16,8 @@ import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 import { DEFAULT_LEFT_PANEL_WIDTH, MAX_LEFT_PANEL_WIDTH, MIN_LEFT_PANEL_WIDTH, type EditorWidthMode } from '@/shared/lib/workspace/panel-widths';
 import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHandle';
 import { useChamberEvent, useWindowEvent } from '@/client/hooks/ui/window-event';
+import { WORKSPACE_KEY_BINDINGS } from '@/shared/lib/workspace/keymap';
+import { resolveBinding } from '@/shared/lib/ui/key-binding';
 
 interface DesktopLayoutProps {
   sessionId: string | null;
@@ -56,6 +58,7 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     setActiveFileId,
     handleOpenFile,
     handleCloseFile,
+    convertDiffToEditor,
   } = useFileTabs(activeProjectPath, sessionId || '', handleOpenTab);
 
   const showEditor = openedFiles.length > 0 && (userToggledEditor ?? true);
@@ -83,13 +86,31 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
   const [sessionTitle, setSessionTitle] = useState<string | null>(null);
   const streamStatus = useAgentStreamStatus();
 
-  // Global keyboard shortcut for settings (Cmd/Ctrl + ,)
+  /**
+   * The workspace's own shortcuts, resolved from the shared keymap so the
+   * tooltips on the panel toggles name the chord that is actually bound.
+   *
+   * `⌘S` is deliberately absent here: the editor panel already owns it (it is
+   * the only surface with a buffer to save), and binding it twice would save
+   * the file twice.
+   */
   useWindowEvent('keydown', (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === ',') {
-      e.preventDefault();
+    const command = resolveBinding(WORKSPACE_KEY_BINDINGS, e);
+    if (!command) return;
+    if (command === 'saveFile') return;
+    if (command === 'toggleEditorPanel' && !showEditor) {
+      // The editor panel is only meaningful with a file open, and `showEditor`
+      // already folds in the user's own toggle.
+      if (openedFiles.length === 0) return;
+    }
+    e.preventDefault();
+    if (command === 'toggleSidebar') setShowLeftPanel((previous) => !previous);
+    else if (command === 'toggleEditorPanel') setUserToggledEditor((previous) => !(previous ?? showEditor));
+    else if (command === 'toggleRightPanel') setShowRightPanel((previous) => !previous);
+    else if (command === 'openSettings') {
       setSettingsCategory('appearance');
       setAutoOpenAddProvider(false);
-      setSettingsOpen(prev => !prev);
+      setSettingsOpen((previous) => !previous);
     }
   });
 
@@ -183,6 +204,7 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
                 refreshKey={refreshKey}
                 onSetActiveFileId={setActiveFileId}
                 onCloseFile={handleCloseFile}
+                onConvertDiffToEditor={convertDiffToEditor}
                 onOpenFile={handleOpenFile}
                 onRefreshWorkspace={handleRefreshWorkspace}
                 onChangeRightPanel={handleChangeRightPanel}

package/src/client/components/mobile/LayoutWrapper.tsx

@@ -118,6 +118,21 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
     setCurrentScreen('main');
   };
 
+  // Desktop parity: the `+` on a workspace header creates the pending session
+  // INSIDE that folder, so the prewarmed cwd and the eventual spawn cwd are the
+  // folder's — not whatever the active session resolved to.
+  const handleNewSessionForFolder = (targetFolderId: number) => {
+    const cwd = spawnCwdForNewSession(folders, sessionParam, targetFolderId);
+    if (cwd) triggerSessionPrewarm(cwd);
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev);
+      next.set('sessionId', `new-${Date.now()}`);
+      next.set('folderId', targetFolderId.toString());
+      return next;
+    }, { replace: true });
+    setCurrentScreen('main');
+  };
+
   const handleCreateFolder = async (input: { name: string; path?: string }) => {
     const res = await fetch('/api/folders', {
       method: 'POST',
@@ -162,6 +177,7 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
           activeSessionId={sessionId}
           onSelectSession={handleSelectSession}
           onNewSession={handleNewSession}
+          onNewSessionForFolder={handleNewSessionForFolder}
           onCreateFolder={handleCreateFolder}
           onClose={() => setCurrentScreen('main')}
           onDesktopToggle={onDesktopToggle}

package/src/client/components/mobile/RightSidebar.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'preact/hooks';
 import { Suspense } from 'preact/compat';
 import type { ReactNode } from 'preact/compat';
-import { BarChart3, Bot, Files, GitBranch, Globe, Layers, Search, Terminal, X } from 'lucide-preact';
-import { LazyBrowserPanel, LazyContextPanel, LazyFileExplorer, LazyGitPanel, LazySearchPanel, LazyTerminalPanel, LazyUsagePanel, LazyUserBrowserPanel } from '@/client/components/common/lazy-panels';
+import { BarChart3, Bot, Files, GitBranch, Globe, Layers, ListTodo, Search, Terminal, X } from 'lucide-preact';
+import { LazyBrowserPanel, LazyContextPanel, LazyFileExplorer, LazyGitPanel, LazySearchPanel, LazyTerminalPanel, LazyTodoPanel, LazyUsagePanel, LazyUserBrowserPanel } from '@/client/components/common/lazy-panels';
 import { useGitStatus } from '@/client/hooks/workspace/git-status';
 import { GIT_STATUS_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
 import { RIGHT_PANEL_TYPES, type RightPanelType } from '@/shared/lib/workspace/right-panels';
@@ -31,6 +31,7 @@ const PANEL_META: Record<RightPanelType, { title: string; label: string; icon: R
   'user-browser': { title: 'Browser (Anda)', label: 'Browser', icon: <Globe size={14} className="flex-shrink-0" /> },
   browser: { title: 'Browser Agent', label: 'Agent', icon: <Bot size={14} className="flex-shrink-0" /> },
   usage: { title: 'Usage', label: 'Usage', icon: <BarChart3 size={14} className="flex-shrink-0" /> },
+  todo: { title: 'Todos', label: 'Todos', icon: <ListTodo size={14} className="flex-shrink-0" /> },
 };
 
 export function MobileRightSidebar({
@@ -100,12 +101,17 @@ export function MobileRightSidebar({
         </button>
       </div>
 
-      {/* Main Tab Content — shared components so mobile == desktop features */}
+      {/* Main Tab Content — shared components so mobile == desktop features.
+          The workspace gate below applies per TAB, not to the whole drawer: a
+          todo list belongs to the session, not to the folder its cwd resolves
+          to, so the Todos tab stays reachable for a session running outside
+          every registered workspace. Every other view here reads the working
+          tree and genuinely needs one. */}
       <div
         className="flex-1 min-h-0 overflow-hidden relative"
         style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
       >
-        {!enabled ? (
+        {!enabled && activeTab !== 'todo' ? (
           <div className="h-full flex items-center justify-center text-ink/40">
             <span className="text-xs font-mono">No session selected</span>
           </div>
@@ -130,6 +136,7 @@ export function MobileRightSidebar({
               {activeTab === 'user-browser' && <LazyUserBrowserPanel className="h-full w-full" />}
               {activeTab === 'browser' && <LazyBrowserPanel className="h-full w-full" active />}
               {activeTab === 'usage' && <LazyUsagePanel className="h-full w-full" />}
+              {activeTab === 'todo' && <LazyTodoPanel className="h-full w-full" />}
             </Suspense>
           </>
         )}

package/src/client/components/mobile/SessionSidebar.tsx

@@ -16,6 +16,7 @@ interface MobileSessionSidebarProps {
   activeSessionId: number | string | null;
   onSelectSession: (id: number | string) => void;
   onNewSession: () => void;
+  onNewSessionForFolder: (folderId: number) => void;
   onCreateFolder: (input: { name: string; path?: string }) => Promise<void> | void;
   onClose: () => void;
   onDesktopToggle?: () => void;
@@ -26,6 +27,7 @@ export function MobileSessionSidebar({
   activeSessionId,
   onSelectSession,
   onNewSession,
+  onNewSessionForFolder,
   onCreateFolder,
   onClose,
   onDesktopToggle,
@@ -96,6 +98,13 @@ export function MobileSessionSidebar({
     onClose();
   };
 
+  // Same dismissal as the toolbar's New Session: the pending session is opened
+  // behind the drawer, so the user must land on the chat, not on the list.
+  const handleNewSessionForFolderAndClose = (folderId: number) => {
+    onNewSessionForFolder(folderId);
+    onClose();
+  };
+
   const handleToggleArchived = () => {
     setShowArchived(!showArchived);
     setOptionsOpen(false);
@@ -136,6 +145,7 @@ export function MobileSessionSidebar({
           isScrolling={isScrolling}
           onScroll={handleScroll}
           onSelectSession={handleSelectSession}
+          onNewSessionForFolder={handleNewSessionForFolderAndClose}
           onToggleFolder={toggleFolder}
         />
       )}

package/src/client/components/mobile/mobile-right-sidebar/FullEditor.tsx

@@ -29,7 +29,6 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
   const isMd = file.name.endsWith('.md');
 
   const editor = useFileEditor(file, {
-    reportLoadError: true,
     flushOnUnmount: true,
     reportSaveError: true,
     downloadMimeType: 'text/plain;charset=utf-8',

package/src/client/components/mobile/mobile-session-sidebar/Item.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'preact/hooks';
-import { ChevronDown, ChevronRight, GitBranch, MessageSquare, MoreHorizontal } from 'lucide-preact';
+import { ChevronDown, ChevronRight, GitBranch, MessageSquare, MoreHorizontal, Plus } from 'lucide-preact';
 import { MobileSessionRow } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
 import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-options-menu';
 import { useShowMore } from '@/client/hooks/ui/show-more';
@@ -14,6 +14,7 @@ interface MobileSessionCategoryProps {
   folder: WorkspaceFolderData;
   activeSessionId: number | string | null;
   onSelectSession: (id: number | string) => void;
+  onNewSessionForFolder: (folderId: number) => void;
   isExpanded: boolean;
   onToggleExpand: () => void;
   showArchived?: boolean;
@@ -24,6 +25,7 @@ export function MobileSessionCategory({
   folder,
   activeSessionId,
   onSelectSession,
+  onNewSessionForFolder,
   isExpanded,
   onToggleExpand,
   showArchived = false,
@@ -104,6 +106,19 @@ export function MobileSessionCategory({
             <GitBranch size={13} className="text-ink/50 ml-1" />
           )}
 
+          <button
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onNewSessionForFolder(folder.id);
+            }}
+            className="p-1.5 rounded-lg hover:bg-ink/10 active:bg-ink/15 text-ink/60 hover:text-ink"
+            title="New Session"
+            aria-label={`New session in ${folder.name}`}
+          >
+            <Plus size={15} />
+          </button>
+
           <div className="relative flex items-center" ref={menuRef} onClick={(event) => event.stopPropagation()}>
             <button
               type="button"

package/src/client/components/mobile/mobile-session-sidebar/List.tsx

@@ -11,6 +11,7 @@ interface MobileSessionListProps {
   isScrolling: boolean;
   onScroll: () => void;
   onSelectSession: (id: number | string) => void;
+  onNewSessionForFolder: (folderId: number) => void;
   onToggleFolder: (folderId: number) => void;
 }
 
@@ -23,6 +24,7 @@ export function MobileSessionList({
   isScrolling,
   onScroll,
   onSelectSession,
+  onNewSessionForFolder,
   onToggleFolder,
 }: MobileSessionListProps) {
   return (
@@ -41,6 +43,7 @@ export function MobileSessionList({
             folder={folder}
             activeSessionId={activeSessionId}
             onSelectSession={onSelectSession}
+            onNewSessionForFolder={onNewSessionForFolder}
             isExpanded={expandedFolders[folder.id] ?? true}
             onToggleExpand={() => onToggleFolder(folder.id)}
             showArchived={showArchived}

package/src/client/components/settings/categories/ProviderSettings.tsx

@@ -9,6 +9,10 @@ import { ReconnectModal } from '@/client/components/settings/categories/provider
 import { LoginModal } from '@/client/components/settings/categories/provider-settings/LoginModal';
 import { ModelConfigModal } from '@/client/components/settings/categories/provider-settings/ModelConfigModal';
 import { ModelCapabilitiesModal } from '@/client/components/settings/categories/provider-settings/ModelCapabilitiesModal';
+import { AddModelModal } from '@/client/components/settings/categories/provider-settings/AddModelModal';
+import { DeleteProviderModal } from '@/client/components/settings/categories/provider-settings/DeleteProviderModal';
+import { providerEmptyReason } from '@/shared/lib/models/provider/dialect';
+import { configuredProviderSlugs } from '@/shared/lib/models/provider/presets';
 
 interface ProviderSettingsProps {
   autoOpenAdd?: boolean;
@@ -28,7 +32,15 @@ export function ProviderSettings({
     setCurrentProject,
     isFetchingModels,
     toasts,
+    pushToast,
     dismissToast,
+    isAddModelModalOpen,
+    setIsAddModelModalOpen,
+    handleModelAdded,
+    isDeleteModalOpen,
+    setIsDeleteModalOpen,
+    isDeletingProvider,
+    handleDeleteProvider,
     isAddModalOpen,
     setIsAddModalOpen,
     isReconnectModalOpen,
@@ -72,19 +84,31 @@ export function ProviderSettings({
             <ProviderAuthSection
               provider={selectedProvider}
               onOpenReconnectModal={() => {
-                if (selectedProvider.id.startsWith('omp-auth-')) setIsLoginModalOpen(true);
-                else setIsReconnectModalOpen(true);
+                // A provider omp signs in through `/login` needs the OAuth
+                // dialog; one whose endpoint and key live in models.yml (or the
+                // chamber overlay) is edited in place. Testing the provider ID
+                // for `omp-auth-` was wrong: a native models.yml entry shares
+                // that ID prefix once merged, and a keyless local server has no
+                // login flow to complete at all.
+                if (selectedProvider.credentialSource === 'omp-auth' && selectedProvider.auth !== 'none') {
+                  setIsLoginModalOpen(true);
+                } else {
+                  setIsReconnectModalOpen(true);
+                }
               }}
               onToggleDisconnect={handleToggleDisconnect}
               onToggleDisabled={handleToggleProviderDisabled}
+              onDelete={() => setIsDeleteModalOpen(true)}
             />
 
             <ProviderModelsList
               models={selectedProvider.models}
+              emptyReason={providerEmptyReason(selectedProvider)}
               onToggleModelVisibility={handleToggleModelVisibility}
               onHideAll={handleHideAll}
               onShowAll={handleShowAll}
               onFetchModels={handleFetchModelsFromList}
+              onAddModel={() => setIsAddModelModalOpen(true)}
               canFetchModels={Boolean(selectedProvider.baseUrl)}
               isFetchingModels={isFetchingModels}
               onOpenModelConfig={(model) => setConfigModel(model)}
@@ -108,7 +132,7 @@ export function ProviderSettings({
         }}
         onAddProvider={handleAddProvider}
         presets={availablePresetProviders}
-        existingSlugs={providers.map((provider) => provider.slug)}
+        existingSlugs={configuredProviderSlugs(providers)}
       />
 
       {selectedProvider && (
@@ -131,13 +155,30 @@ export function ProviderSettings({
         />
       )}
 
+      {selectedProvider && (
+        <AddModelModal
+          isOpen={isAddModelModalOpen}
+          provider={selectedProvider}
+          onClose={() => setIsAddModelModalOpen(false)}
+          onAdded={(modelId) => void handleModelAdded(modelId)}
+          onError={(message) => pushToast(message, 'error')}
+        />
+      )}
+
+      <DeleteProviderModal
+        isOpen={isDeleteModalOpen}
+        provider={selectedProvider ?? null}
+        isDeleting={isDeletingProvider}
+        onClose={() => setIsDeleteModalOpen(false)}
+        onConfirm={() => void handleDeleteProvider()}
+      />
+
       <ModelConfigModal
         isOpen={!!configModel}
         model={configModel}
         onClose={() => setConfigModel(null)}
         onSaveModelConfig={handleSaveModelConfig}
       />
-
       <ModelCapabilitiesModal
         isOpen={!!capabilitiesModel}
         model={capabilitiesModel}

package/src/client/components/settings/categories/UsageSettings.tsx

@@ -1,15 +1,24 @@
-import { useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 import { AlertCircle, RefreshCw } from 'lucide-preact';
 import { UsageSidebarList } from '@/client/components/settings/categories/usage-settings/SidebarList';
-import type { UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { buildProviders, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
 import { ProviderDetail } from '@/client/components/settings/categories/usage-settings/ProviderDetail';
 import { formatDateTime } from '@/client/components/settings/categories/usage-settings/format';
 import { useUsageReport } from '@/client/hooks/settings/useUsageReport';
 
-/** Settings → Usage: provider balances, quota, and 30-day spend. */
+/** Settings → Usage: provider quota, balances, and locally recorded burn. */
 export function UsageSettings() {
   const { report, isLoading, error, reload } = useUsageReport();
-  const [selectedProviderId, setSelectedProviderId] = useState<UsageProviderId>('kenari');
+  const [selectedProviderId, setSelectedProviderId] = useState<UsageProviderId>('');
+
+  const providers = report ? buildProviders(report) : [];
+  const selected = providers.find((provider) => provider.id === selectedProviderId) ?? providers[0];
+
+  // The report can arrive with a different provider set (a key was added or
+  // removed); keep the selection pointing at something that exists.
+  useEffect(() => {
+    if (selected && selected.id !== selectedProviderId) setSelectedProviderId(selected.id);
+  }, [selected, selectedProviderId]);
 
   if (error && !report) {
     return (
@@ -39,7 +48,7 @@ export function UsageSettings() {
     <div className="flex h-full w-full overflow-hidden bg-paper text-xs text-ink">
       <UsageSidebarList
         report={report}
-        selectedProviderId={selectedProviderId}
+        selectedProviderId={selected?.id ?? ''}
         onSelectProvider={setSelectedProviderId}
       />
 
@@ -57,7 +66,7 @@ export function UsageSettings() {
           </div>
           <button
             type="button"
-            onClick={() => reload()}
+            onClick={() => reload({ force: true })}
             disabled={isLoading}
             className="p-1.5 bg-paper border border-ink/15 rounded-md hover:bg-ink/5 text-ink/80 transition-colors disabled:opacity-50 flex-shrink-0"
             title="Refresh usage"
@@ -69,7 +78,13 @@ export function UsageSettings() {
         <div className="flex-1 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static p-3.5 space-y-4">
           {error && <p className="text-error text-xs">{error}</p>}
 
-          <ProviderDetail providerId={selectedProviderId} report={report} />
+          {selected ? (
+            <ProviderDetail summary={selected.summary} />
+          ) : (
+            <p className="text-[11px] text-ink/50 leading-relaxed">
+              No provider credentials detected. Add an API key in Settings → Providers and it will appear here.
+            </p>
+          )}
         </div>
       </div>
     </div>