ompchamber 2.0.2 → 3.0.0

package/src/client/components/workspace/editor/Toolbar.tsx

@@ -1,13 +1,20 @@
-import { Check, Copy, Download, Eye, EyeOff, Maximize, Save, WrapText, ZoomIn, ZoomOut } from 'lucide-preact';
+import { AlertCircle, Check, Copy, Download, Eye, EyeOff, Maximize, Minimize, Save, WrapText, ZoomIn, ZoomOut } from 'lucide-preact';
+
+export type EditorSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
 
 interface EditorToolbarProps {
   path: string;
-  saveStatus: 'idle' | 'saving' | 'saved';
+  saveStatus: EditorSaveStatus;
   wordWrap: boolean;
   isMd: boolean;
   isPreview: boolean;
+  /** True for the 1.5s after a copy landed, so the button can confirm it. */
+  copied: boolean;
   /** Raster image: no text to save or wrap, and zoom belongs to the picture. */
   isImage?: boolean;
+  /** A read failure left no trustworthy buffer, so there is nothing to save. */
+  saveDisabled?: boolean;
+  isMaximized?: boolean;
   onSave: () => void;
   onTogglePreview: () => void;
   onToggleWordWrap: () => void;
@@ -18,13 +25,25 @@ interface EditorToolbarProps {
   onToggleMaximize: () => void;
 }
 
+/**
+ * Shared icon-button shell. Every action here is icon-only, so each one carries
+ * a `title` (the tooltip) and an `aria-label` (the accessible name) — a bare
+ * `<svg onClick>` is unreachable by keyboard and unlabeled to a screen reader.
+ * `p-1.5` also gives the 14px glyph a ~26px hit target.
+ */
+const ACTION_CLASS =
+  'flex items-center justify-center p-1.5 rounded transition-colors cursor-pointer disabled:cursor-default disabled:opacity-50';
+
 export function EditorToolbar({
   path,
   saveStatus,
   wordWrap,
   isMd,
   isPreview,
+  copied,
   isImage = false,
+  saveDisabled = false,
+  isMaximized = false,
   onSave,
   onTogglePreview,
   onToggleWordWrap,
@@ -34,65 +53,131 @@ export function EditorToolbar({
   onDownload,
   onToggleMaximize,
 }: EditorToolbarProps) {
+  const saveTitle =
+    saveDisabled
+      ? 'Nothing to save — this file could not be read'
+      : saveStatus === 'saving'
+        ? 'Saving…'
+        : saveStatus === 'error'
+          ? 'Save failed — the file on disk was not changed'
+          : 'Save file (Ctrl+S)';
+
   return (
-    <div className="flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper">
+    <div className="flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
       {/* Left status */}
-      <div className="flex items-center space-x-2 text-xs font-mono text-ink/40">
+      <div className="flex items-center space-x-2 text-xs font-mono text-ink/40 min-w-0">
         <span className="truncate max-w-[300px]" title={path}>{path}</span>
       </div>
 
       {/* Right actions */}
-      <div className="flex items-center space-x-3 text-ink/40">
+      <div className="flex items-center space-x-1 text-ink/40 flex-shrink-0">
         {!isImage && (
-          <div className="flex items-center pr-3 border-r border-ink/10">
+          <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
             <button
               type="button"
               onClick={onSave}
-              className="flex items-center justify-center rounded hover:bg-ink/5 transition-colors"
-              title="Save file (Ctrl+S)"
+              disabled={saveDisabled || saveStatus === 'saving'}
+              className={`${ACTION_CLASS} hover:bg-ink/5`}
+              title={saveTitle}
+              aria-label={saveTitle}
             >
               {saveStatus === 'saving' ? (
                 <Save size={14} className="text-amber-500 animate-pulse" />
               ) : saveStatus === 'saved' ? (
                 <Check size={14} className="text-success" />
+              ) : saveStatus === 'error' ? (
+                <AlertCircle size={14} className="text-error" />
               ) : (
-                <Save size={14} className="hover:text-ink cursor-pointer" />
+                <Save size={14} className="hover:text-ink" />
               )}
             </button>
           </div>
         )}
 
         {isMd && (
-          <div onClick={onTogglePreview} className="flex items-center pr-3 border-r border-ink/10">
-            {isPreview ? (
-              <EyeOff size={14} className="hover:text-ink cursor-pointer" />
-            ) : (
-              <Eye size={14} className="hover:text-ink cursor-pointer" />
-            )}
+          <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
+            <button
+              type="button"
+              onClick={onTogglePreview}
+              className={`${ACTION_CLASS} hover:bg-ink/5 ${isPreview ? 'text-ink' : 'hover:text-ink'}`}
+              title={isPreview ? 'Show markdown source' : 'Preview markdown'}
+              aria-label={isPreview ? 'Show markdown source' : 'Preview markdown'}
+              aria-pressed={isPreview}
+            >
+              {isPreview ? <EyeOff size={14} /> : <Eye size={14} />}
+            </button>
           </div>
         )}
 
         {!isImage && (
           <>
-            <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
-              <WrapText size={14} className={`cursor-pointer ${wordWrap ? 'text-ink' : 'hover:text-ink'}`} onClick={onToggleWordWrap} />
+            <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
+              <button
+                type="button"
+                onClick={onToggleWordWrap}
+                className={`${ACTION_CLASS} hover:bg-ink/5 ${wordWrap ? 'text-ink' : 'hover:text-ink'}`}
+                title={wordWrap ? 'Word wrap on' : 'Word wrap off'}
+                aria-label={wordWrap ? 'Word wrap on' : 'Word wrap off'}
+                aria-pressed={wordWrap}
+              >
+                <WrapText size={14} />
+              </button>
             </div>
 
-            <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
-              <ZoomOut size={14} className="hover:text-ink cursor-pointer" onClick={onZoomOut} />
-              <ZoomIn size={14} className="hover:text-ink cursor-pointer" onClick={onZoomIn} />
+            <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
+              <button
+                type="button"
+                onClick={onZoomOut}
+                className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+                title="Decrease font size"
+                aria-label="Decrease font size"
+              >
+                <ZoomOut size={14} />
+              </button>
+              <button
+                type="button"
+                onClick={onZoomIn}
+                className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+                title="Increase font size"
+                aria-label="Increase font size"
+              >
+                <ZoomIn size={14} />
+              </button>
             </div>
           </>
         )}
 
-        <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
-          <Copy size={14} className="hover:text-ink cursor-pointer" onClick={onCopy} />
-          <Download size={14} className="hover:text-ink cursor-pointer" onClick={onDownload} />
+        <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
+          <button
+            type="button"
+            onClick={onCopy}
+            className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+            title={copied ? 'Copied' : isImage ? 'Copy image' : 'Copy content'}
+            aria-label={copied ? 'Copied' : isImage ? 'Copy image' : 'Copy content'}
+          >
+            {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
+          </button>
+          <button
+            type="button"
+            onClick={onDownload}
+            className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+            title="Download file"
+            aria-label="Download file"
+          >
+            <Download size={14} />
+          </button>
         </div>
 
-        <div className="flex items-center pl-1">
-          <Maximize size={14} className="hover:text-ink cursor-pointer" onClick={onToggleMaximize} />
-        </div>
+        <button
+          type="button"
+          onClick={onToggleMaximize}
+          className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink ${isMaximized ? 'text-ink' : ''}`}
+          title={isMaximized ? 'Exit full screen' : 'Full screen'}
+          aria-label={isMaximized ? 'Exit full screen' : 'Full screen'}
+          aria-pressed={isMaximized}
+        >
+          {isMaximized ? <Minimize size={14} /> : <Maximize size={14} />}
+        </button>
       </div>
     </div>
   );

package/src/client/components/workspace/editor/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'preact/hooks';
+import { AlertTriangle, Loader2 } from 'lucide-preact';
 import { FileIcon } from '@/client/components/common/file-icon';
 import { CodeSurface } from '@/client/components/common/code-surface';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
@@ -6,7 +7,6 @@ import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollba
 import { EditorTabs } from '@/client/components/workspace/editor/Tabs';
 import { EditorToolbar } from '@/client/components/workspace/editor/Toolbar';
 import { ImageViewer } from '@/client/components/common/image-viewer';
-import { getDefaultContent } from '@/shared/lib/code/editor-utils';
 import { DiffPanel } from '@/client/components/workspace/diff-panel';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
 import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
@@ -19,6 +19,8 @@ interface EditorProps {
   activeFileId: number | string | null;
   onSelectFile: (id: number | string) => void;
   onCloseFile: (id: number | string) => void;
+  /** Replace a diff tab with the plain editor tab for the same file. */
+  onConvertDiffToEditor: (id: number | string) => void;
   refreshKey?: number;
   onFileSaved?: () => void;
 }
@@ -29,6 +31,7 @@ export function Editor({
   activeFileId, 
   onSelectFile, 
   onCloseFile, 
+  onConvertDiffToEditor,
   refreshKey = 0,
   onFileSaved 
 }: EditorProps) {
@@ -42,7 +45,10 @@ export function Editor({
   const { isScrolling, handleScroll } = useScrollbarFade();
 
   const editor = useFileEditor(activeFile ?? null, {
-    fallback: getDefaultContent,
+    // A file that could not be read must report the failure, not substitute
+    // placeholder text — the mock sample used to be written straight over the
+    // real file by the next save.
+    reportSaveError: true,
     onFileSaved,
   });
 
@@ -96,7 +102,6 @@ export function Editor({
   const currentContent = editor.content;
   const isMd = activeFile?.name.endsWith('.md');
   const isPreview = activeFile ? previewMode[activeFile.id] : false;
-  const toolbarSaveStatus = editor.saveStatus === 'error' ? 'idle' : editor.saveStatus;
 
   const editorContainerClass = isMaximized 
     ? 'fixed inset-0 z-50 flex flex-col bg-canvas' 
@@ -119,11 +124,7 @@ export function Editor({
             isStaged={Boolean(activeFile.diffStaged)}
             root={activeFile.root}
             repo={activeFile.repo || '.'}
-            onOpenInEditor={() => {
-              // Convert diff tab to regular editor tab
-              activeFile.isDiff = false;
-              onSelectFile(activeFile.id);
-            }}
+            onOpenInEditor={() => onConvertDiffToEditor(activeFile.id)}
             onFileSaved={onFileSaved}
             className="flex-1"
           />
@@ -131,11 +132,14 @@ export function Editor({
           <>
             <EditorToolbar
               path={activeFile.path}
-              saveStatus={toolbarSaveStatus}
+              saveStatus={editor.saveStatus}
               wordWrap={wordWrap}
               isMd={isMd}
               isPreview={isPreview}
+              copied={editor.copied}
               isImage={editor.isImage}
+              saveDisabled={Boolean(editor.loadError)}
+              isMaximized={isMaximized}
               onSave={editor.saveNow}
               onTogglePreview={togglePreview}
               onToggleWordWrap={() => setWordWrap(!wordWrap)}
@@ -151,6 +155,20 @@ export function Editor({
               // the scrolling text container — a wheel there would scroll the
               // pane instead of zooming the image.
               <ImageViewer src={editor.imageUrl} name={activeFile.name} className="flex-1 min-h-0" />
+            ) : editor.isLoading ? (
+              <div className="flex-1 flex items-center justify-center gap-2 text-ink/40 text-xs font-mono">
+                <Loader2 size={14} className="animate-spin" />
+                <span>Loading file content…</span>
+              </div>
+            ) : editor.loadError ? (
+              // A read that failed must say so. Without this the pane rendered
+              // an empty (or substituted) buffer, and the next save wrote it
+              // over the real file.
+              <div className="flex-1 flex flex-col items-center justify-center gap-2 px-6 text-center">
+                <AlertTriangle size={20} className="text-error" />
+                <span className="text-xs text-error font-sans">Could not read {activeFile.name}</span>
+                <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
+              </div>
             ) : (
               <div onScroll={handleScroll} className={`flex-1 overflow-auto bg-paper flex ${scrollbarFadeClass(isScrolling)}`}>
                 {(isMd && isPreview) ? (

package/src/client/components/workspace/model-dropdown/Item.tsx

@@ -1,7 +1,8 @@
 import type { TargetedMouseEvent } from 'preact';
-import { Bot, Boxes, Brain, Check, Command, Globe, GripVertical, Sparkles, Star, Zap } from 'lucide-preact';
+import { Brain, Check, Command, GripVertical, Star } from 'lucide-preact';
 import type { AIModelOption } from '@/shared/types';
 import { formatContextWindow } from '@/shared/lib/code/format';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 
 interface ModelDropdownItemProps {
   model: AIModelOption;
@@ -35,28 +36,17 @@ export function ModelDropdownItem({
       );
     }
 
-    switch (model.providerIcon || model.provider.toLowerCase()) {
-      case 'deepseek':
-        return (
-          <span className="text-[12px] leading-none flex-shrink-0" title="DeepSeek">
-            🐋
-          </span>
-        );
-      case 'anthropic':
-      case 'claude':
-        return <Bot size={13} className="text-orange-400 flex-shrink-0" />;
-      case 'openai':
-        return <Boxes size={13} className="text-emerald-500 flex-shrink-0" />;
-      case 'google':
-      case 'gemini':
-        return <Sparkles size={13} className="text-blue-400 flex-shrink-0" />;
-      case 'opencode':
-        return <Zap size={13} className="text-violet-400 flex-shrink-0" />;
-      case 'mistral':
-        return <Globe size={13} className="text-rose-400 flex-shrink-0" />;
-      default:
-        return <Sparkles size={13} className="text-ink/60 flex-shrink-0" />;
-    }
+    // The provider's own mark, keyed on the catalog's `providerIcon` first so a
+    // legacy key still resolves; unknown providers fall back to their initials.
+    return (
+      <ProviderIcon
+        icon={model.providerIcon}
+        slug={model.provider}
+        name={model.provider}
+        size={13}
+        className="text-ink/70"
+      />
+    );
   };
 
   return (

package/src/client/components/workspace/model-dropdown/Panel.tsx

@@ -115,7 +115,7 @@ export function ModelDropdownPanel({
                   key={provider}
                   id={provider}
                   title={provider}
-                  iconType={provider === 'DEEPSEEK' ? 'whale' : 'provider'}
+                  iconType="provider"
                   models={pModels}
                   isCollapsed={!!collapsedSections[provider]}
                   onToggleCollapse={onToggleCollapse}

package/src/client/components/workspace/model-dropdown/Section.tsx

@@ -1,13 +1,14 @@
 import type { TargetedMouseEvent } from 'preact';
-import { ChevronDown, ChevronUp, GripVertical, History, Star } from 'lucide-preact';
+import { ChevronDown, ChevronUp, History, Star } from 'lucide-preact';
 import type { AIModelOption } from '@/shared/types';
 import { ModelDropdownItem } from '@/client/components/workspace/model-dropdown/Item';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 import { modelKey } from '@/shared/lib/models/identity';
 
 interface ModelDropdownSectionProps {
   id: string;
   title: string;
-  iconType?: 'star' | 'recent' | 'provider' | 'whale';
+  iconType?: 'star' | 'recent' | 'provider';
   models: AIModelOption[];
   isCollapsed: boolean;
   onToggleCollapse: (id: string) => void;
@@ -49,8 +50,16 @@ export function ModelDropdownSection({
         <div className="flex items-center space-x-1.5">
           {iconType === 'star' && <Star size={12} className="fill-sky-400 text-sky-400" />}
           {iconType === 'recent' && <History size={12} className="text-ink/60" />}
-          {iconType === 'whale' && <span>🐋</span>}
-          {iconType === 'provider' && <GripVertical size={11} className="text-ink/25" />}
+          {iconType === 'provider' && (
+            // The section's own provider, taken from a row rather than the
+            // uppercased group key, so the mark resolves off the real slug.
+            <ProviderIcon
+              icon={models[0]?.providerIcon}
+              slug={models[0]?.provider ?? id}
+              name={models[0]?.provider ?? id}
+              size={12}
+            />
+          )}
           <span>{title}</span>
         </div>
         {isCollapsed ? (

package/src/client/components/workspace/model-dropdown/index.tsx

@@ -5,6 +5,7 @@ import type { AIModelOption, ModelPreferences } from '@/shared/types';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 import { invalidateModelsCache } from '@/shared/lib/models/client';
 import { ModelDropdownPanel } from '@/client/components/workspace/model-dropdown/Panel';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 import { useModelCatalog } from '@/client/components/workspace/model-dropdown/use-catalog';
 import { buildPickerGroups } from '@/client/components/workspace/model-dropdown/groups';
 import { modelKey } from '@/shared/lib/models/identity';
@@ -229,10 +230,13 @@ export function ModelDropdown({
             <span className="text-ink/60 flex-shrink-0">
               {selectedModel.isCmdAgent ? (
                 <span className="font-mono text-[10px] font-bold text-ink/70">⌘</span>
-              ) : selectedModel.provider.toLowerCase() === 'deepseek' ? (
-                <span>🐋</span>
               ) : (
-                <Sparkles size={12} className="text-ink/60" />
+                <ProviderIcon
+                  icon={selectedModel.providerIcon}
+                  slug={selectedModel.provider}
+                  name={selectedModel.provider}
+                  size={12}
+                />
               )}
             </span>
             <span className="flex items-center space-x-1 min-w-0 max-w-[280px]">

package/src/client/components/workspace/usage-panel/ProviderSelect.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import type { KeyboardEvent as ReactKeyboardEvent } from 'preact/compat';
 import { Check, ChevronDown, Search } from 'lucide-preact';
 import { statusLabel, type ProviderEntry, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 
 interface ProviderSelectProps {
@@ -120,7 +121,8 @@ export function ProviderSelect({ providers, value, onChange }: ProviderSelectPro
         title="Select usage provider"
         className="flex w-full min-w-0 items-center justify-between gap-2 bg-paper border border-ink/15 rounded-lg px-3 py-1.5 text-xs text-ink hover:bg-ink/5 transition-colors"
       >
-        <span className="flex min-w-0 items-baseline gap-2">
+        <span className="flex min-w-0 items-center gap-2">
+          {selected && <ProviderIcon slug={selected.id} name={selected.name} size={13} className="text-ink/60" />}
           <span className="truncate font-medium">{selected?.name ?? 'Select provider'}</span>
           {selected && (
             <span className="truncate text-[10px] text-ink/50">{statusLabel(selected)}</span>
@@ -190,10 +192,13 @@ export function ProviderSelect({ providers, value, onChange }: ProviderSelectPro
                     index === activeIndex ? 'bg-ink/5' : 'hover:bg-ink/5'
                   }`}
                 >
-                  <span className="min-w-0">
-                    <span className="block truncate font-medium text-ink">{provider.name}</span>
-                    <span className="block truncate text-[10px] text-ink/50">
-                      {statusLabel(provider)} · {provider.hint}
+                  <span className="flex min-w-0 items-center gap-2">
+                    <ProviderIcon slug={provider.id} name={provider.name} size={14} className="text-ink/60" />
+                    <span className="min-w-0">
+                      <span className="block truncate font-medium text-ink">{provider.name}</span>
+                      <span className="block truncate text-[10px] text-ink/50">
+                        {statusLabel(provider)} · {provider.hint}
+                      </span>
                     </span>
                   </span>
                   {provider.id === value && <Check size={12} className="flex-shrink-0 text-ink" />}

package/src/client/components/workspace/usage-panel/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'preact/hooks';
 import { AlertCircle, RefreshCw } from 'lucide-preact';
 import { ProviderDetail } from '@/client/components/settings/categories/usage-settings/ProviderDetail';
 import { buildProviders, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
@@ -14,19 +15,30 @@ interface UsagePanelProps {
   active?: boolean;
 }
 
-/** Right-panel Usage: the selected provider's balance/quota via a dropdown. */
+/** Right-panel Usage: the selected provider's quota and balance via a dropdown. */
 export function UsagePanel({ className = '', active = true }: UsagePanelProps) {
   const { report, isLoading, error, reload } = useUsageReport();
   const [selectedProviderId, setSelectedProviderId] = useSessionState<UsageProviderId>(
     'usage.selectedProviderId',
-    'kenari',
+    '',
   );
 
-  // Auto refresh: keep balance/quota current without a manual reload. Silent —
-  // the spinner stays reserved for the user's own refresh button. Polls only
-  // while the panel is actually visible.
+  // Derived before every early return: a hook must not sit behind a conditional
+  // return, or the hook count changes between the loading and loaded renders.
+  const providers = report ? buildProviders(report) : [];
+  const selected = providers.find((provider) => provider.id === selectedProviderId) ?? providers[0];
+
+  // Auto refresh: keep quota current without a manual reload. Silent — the
+  // spinner stays reserved for the user's own refresh button. Polls only while
+  // the panel is actually visible.
   usePanelRefresh(() => reload({ silent: true }), active);
 
+  // A provider can disappear from the report (its key was removed) or a new one
+  // can take the first slot; keep the persisted selection valid.
+  useEffect(() => {
+    if (selected && selected.id !== selectedProviderId) setSelectedProviderId(selected.id);
+  }, [selected, selectedProviderId, setSelectedProviderId]);
+
   if (error && !report) {
     return (
       <div className={`flex h-full w-full flex-col items-center justify-center gap-2 p-8 text-center text-xs ${className}`}>
@@ -51,8 +63,6 @@ export function UsagePanel({ className = '', active = true }: UsagePanelProps) {
     );
   }
 
-  const providers = buildProviders(report);
-
   return (
     <div className={`flex h-full w-full min-w-0 min-h-0 flex-col overflow-hidden bg-paper text-xs text-ink ${className}`}>
       <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between gap-3 flex-shrink-0 min-w-0">
@@ -69,7 +79,7 @@ export function UsagePanel({ className = '', active = true }: UsagePanelProps) {
         </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"
@@ -78,20 +88,28 @@ export function UsagePanel({ className = '', active = true }: UsagePanelProps) {
         </button>
       </div>
 
-      <div className="px-3.5 py-2.5 border-b border-ink/10 flex-shrink-0 min-w-0">
-        <div className="flex items-center gap-2 min-w-0">
-          <span className="text-[11px] font-semibold text-ink/60 flex-shrink-0">Provider</span>
-          <ProviderSelect
-            providers={providers}
-            value={selectedProviderId}
-            onChange={setSelectedProviderId}
-          />
+      {providers.length > 0 && (
+        <div className="px-3.5 py-2.5 border-b border-ink/10 flex-shrink-0 min-w-0">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="text-[11px] font-semibold text-ink/60 flex-shrink-0">Provider</span>
+            <ProviderSelect
+              providers={providers}
+              value={selected?.id ?? ''}
+              onChange={setSelectedProviderId}
+            />
+          </div>
         </div>
-      </div>
+      )}
 
       <div className="flex-1 min-w-0 min-h-0 w-full 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>
   );

package/src/client/data/samples/dialogue-session.ts

@@ -42,7 +42,7 @@ export function getSampleDialogueSession(): {
         id: '1a6cb095',
         role: 'ai',
         content:
-          'Elysia + Bun app (OMPChamber). Top-level contents:\n\n- **App source** — `src/` (client, server, shared)\n- **Config** — `package.json`, `tsconfig.json`, `rsbuild.config.ts`, `postcss.config.mjs`, `bun.lock`, `AGENTS.md`, `DESIGN.md`\n- **Static/PWA** — `public/` (icons, manifest, service worker)\n- **DB** — `workspace.db` (112 KB)\n- **Misc** — `notes/` (2 planning docs)\n\nRoot has no stray source files; project is cleanly under `src/`.',
+          'Elysia + Bun app (OMPChamber). Top-level contents:\n\n- **App source** — `src/` (client, server, shared)\n- **Config** — `package.json`, `tsconfig.json`, `bunfig.toml`, `bun.lock`, `AGENTS.md`, `DESIGN.md`\n- **Static/PWA** — `public/` (icons, manifest, service worker)\n- **DB** — `workspace.db` (112 KB)\n- **Misc** — `notes/` (2 planning docs)\n\nRoot has no stray source files; project is cleanly under `src/`.',
         date: 'Sep 9, 04:33 AM',
         thinking: {
           thought: 'Brief listing.',

package/src/client/data/samples/sample-tools/other.ts

@@ -74,7 +74,7 @@ export const otherTools: ToolCallData[] = [
   "type": "module",
   "scripts": {
     "dev": "bun run --watch src/server/index.ts",
-    "build": "rsbuild build"
+    "build": "bun run scripts/build-client.ts"
   }
 }`,
     status: 'success',