ompchamber 2.0.2 → 3.1.0

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',

package/src/client/data/settings/provider.ts

@@ -1,4 +1,4 @@
-import type { ProviderItem } from '@/shared/types';
+import type { PresetProviderOption, ProviderItem } from '@/shared/types/settings/provider';
 
 export const DEFAULT_PROVIDERS_LIST: ProviderItem[] = [
   {
@@ -8,6 +8,7 @@ export const DEFAULT_PROVIDERS_LIST: ProviderItem[] = [
     icon: 'deepseek',
     status: 'connected',
     configuredIn: 'auth credentials',
+    credentialSource: 'chamber',
     apiKey: 'sk-ds-••••••••••••••••••••38f1',
     baseUrl: 'https://api.deepseek.com/v1',
     models: [
@@ -59,6 +60,7 @@ export const DEFAULT_PROVIDERS_LIST: ProviderItem[] = [
     icon: 'agentrouter',
     status: 'connected',
     configuredIn: 'auth credentials',
+    credentialSource: 'chamber',
     apiKey: 'ar-live-•••••••••••••••••••89c2',
     baseUrl: 'https://router.agent.ai/v1',
     models: [
@@ -104,6 +106,7 @@ export const DEFAULT_PROVIDERS_LIST: ProviderItem[] = [
     icon: 'commandcode',
     status: 'connected',
     configuredIn: 'auth credentials',
+    credentialSource: 'chamber',
     apiKey: 'cc-key-••••••••••••••••••••7a12',
     baseUrl: 'https://api.commandcode.dev/v1',
     models: Array.from({ length: 41 }, (_, i) => {
@@ -142,6 +145,7 @@ export const DEFAULT_PROVIDERS_LIST: ProviderItem[] = [
     icon: 'opencode',
     status: 'connected',
     configuredIn: 'auth credentials',
+    credentialSource: 'chamber',
     apiKey: 'zen-live-•••••••••••••••••••44fa',
     baseUrl: 'https://zen.opencode.ai/v1',
     models: [
@@ -161,6 +165,7 @@ export const DEFAULT_PROVIDERS_LIST: ProviderItem[] = [
     icon: 'claude',
     status: 'connected',
     configuredIn: 'auth credentials',
+    credentialSource: 'chamber',
     apiKey: 'sk-ant-•••••••••••••••••••••991c',
     baseUrl: 'https://api.anthropic.com/v1',
     models: [
@@ -174,12 +179,139 @@ export const DEFAULT_PROVIDERS_LIST: ProviderItem[] = [
   },
 ];
 
-export const PRESET_NEW_PROVIDERS = [
-  { id: 'openai', name: 'OpenAI', slug: 'openai', icon: 'openai', defaultUrl: 'https://api.openai.com/v1' },
-  { id: 'anthropic', name: 'Anthropic', slug: 'anthropic', icon: 'claude', defaultUrl: 'https://api.anthropic.com/v1' },
-  { id: 'google', name: 'Google Gemini', slug: 'google', icon: 'gemini', defaultUrl: 'https://generativelanguage.googleapis.com/v1beta' },
-  { id: 'groq', name: 'Groq Cloud', slug: 'groq', icon: 'groq', defaultUrl: 'https://api.groq.com/openai/v1' },
-  { id: 'mistral', name: 'Mistral AI', slug: 'mistral', icon: 'mistral', defaultUrl: 'https://api.mistral.ai/v1' },
-  { id: 'ollama', name: 'Ollama (Local)', slug: 'ollama', icon: 'ollama', defaultUrl: 'http://localhost:11434/v1' },
-  { id: 'custom', name: 'Custom OpenAI-Compatible', slug: 'custom', icon: 'custom', defaultUrl: 'https://' },
+/**
+ * Providers offered by the Add Provider picker. `group` is the section the
+ * picker renders; `api`/`auth`/`discovery` are the `models.yml` fields the
+ * preset seeds, so a choice that omp understands is made once here rather than
+ * re-derived from the URL at write time.
+ *
+ * A preset whose id names a provider omp already bundles (`bundled: true`) is
+ * an OVERRIDE entry: omp keeps serving its own model list for that provider and
+ * only the endpoint changes. That is the documented way to point a bundled
+ * provider at a proxy, and it is deliberately not offered for providers whose
+ * models the chamber would then have to duplicate.
+ */
+export const PRESET_NEW_PROVIDERS: PresetProviderOption[] = [
+  {
+    id: 'openai', name: 'OpenAI', slug: 'openai', icon: 'openai',
+    defaultUrl: 'https://api.openai.com/v1', api: 'openai-responses', group: 'Frontier APIs',
+  },
+  {
+    id: 'anthropic', name: 'Anthropic', slug: 'anthropic', icon: 'claude',
+    defaultUrl: 'https://api.anthropic.com/v1', api: 'anthropic-messages', group: 'Frontier APIs',
+  },
+  {
+    id: 'google', name: 'Google Gemini', slug: 'google', icon: 'gemini',
+    defaultUrl: 'https://generativelanguage.googleapis.com/v1beta',
+    api: 'google-generative-ai', group: 'Frontier APIs',
+  },
+  {
+    id: 'groq', name: 'Groq Cloud', slug: 'groq', icon: 'groq',
+    defaultUrl: 'https://api.groq.com/openai/v1', api: 'openai-completions', group: 'Frontier APIs',
+  },
+  {
+    id: 'mistral', name: 'Mistral AI', slug: 'mistral', icon: 'mistral',
+    defaultUrl: 'https://api.mistral.ai/v1', api: 'openai-completions', group: 'Frontier APIs',
+  },
+  {
+    id: 'xai', name: 'xAI', slug: 'xai', icon: 'xai',
+    defaultUrl: 'https://api.x.ai/v1', api: 'openai-completions', group: 'Frontier APIs',
+  },
+  {
+    id: 'cerebras', name: 'Cerebras', slug: 'cerebras', icon: 'cerebras',
+    defaultUrl: 'https://api.cerebras.ai/v1', api: 'openai-completions', group: 'Frontier APIs',
+  },
+  {
+    id: 'deepseek', name: 'DeepSeek', slug: 'deepseek', icon: 'deepseek',
+    defaultUrl: 'https://api.deepseek.com/v1', api: 'openai-completions', group: 'Frontier APIs',
+  },
+  {
+    id: 'openrouter', name: 'OpenRouter', slug: 'openrouter', icon: 'openrouter',
+    defaultUrl: 'https://openrouter.ai/api/v1', api: 'openai-completions', group: 'Gateways',
+  },
+  {
+    id: 'together', name: 'Together AI', slug: 'together', icon: 'together',
+    defaultUrl: 'https://api.together.xyz/v1', api: 'openai-completions', group: 'Gateways',
+  },
+  {
+    id: 'fireworks', name: 'Fireworks', slug: 'fireworks', icon: 'fireworks',
+    defaultUrl: 'https://api.fireworks.ai/inference/v1', api: 'openai-completions', group: 'Gateways',
+  },
+  {
+    id: 'deepinfra', name: 'DeepInfra', slug: 'deepinfra', icon: 'deepinfra',
+    defaultUrl: 'https://api.deepinfra.com/v1/openai', api: 'openai-completions', group: 'Gateways',
+  },
+  {
+    id: 'siliconflow', name: 'SiliconFlow', slug: 'siliconflow', icon: 'siliconflow',
+    defaultUrl: 'https://api.siliconflow.com/v1', api: 'openai-completions', group: 'Gateways',
+  },
+  {
+    id: 'nvidia', name: 'NVIDIA NIM', slug: 'nvidia', icon: 'nvidia',
+    defaultUrl: 'https://integrate.api.nvidia.com/v1', api: 'openai-completions', group: 'Gateways',
+  },
+  {
+    id: 'novita', name: 'Novita AI', slug: 'novita', icon: 'novita',
+    defaultUrl: 'https://api.novita.ai/v3/openai', api: 'openai-completions', group: 'Gateways',
+  },
+  {
+    id: 'vercel-ai-gateway', name: 'Vercel AI Gateway', slug: 'vercel-ai-gateway', icon: 'vercel',
+    defaultUrl: 'https://ai-gateway.vercel.sh/v1', api: 'openai-completions', group: 'Gateways',
+  },
+  {
+    id: 'ollama', name: 'Ollama (Local)', slug: 'ollama', icon: 'ollama',
+    defaultUrl: 'http://127.0.0.1:11434', api: 'openai-responses',
+    auth: 'none', discovery: 'ollama', group: 'Local & self-hosted',
+  },
+  {
+    id: 'lm-studio', name: 'LM Studio (Local)', slug: 'lm-studio', icon: 'lmstudio',
+    defaultUrl: 'http://127.0.0.1:1234/v1', api: 'openai-completions',
+    auth: 'none', discovery: 'lm-studio', group: 'Local & self-hosted',
+  },
+  {
+    id: 'llama-cpp', name: 'llama.cpp (Local)', slug: 'llama.cpp', icon: 'llamacpp',
+    defaultUrl: 'http://127.0.0.1:8080', api: 'openai-responses',
+    auth: 'none', discovery: 'llama.cpp', group: 'Local & self-hosted',
+  },
+  {
+    id: 'vllm', name: 'vLLM (Local)', slug: 'vllm', icon: 'vllm',
+    defaultUrl: 'http://127.0.0.1:8000/v1', api: 'openai-completions',
+    auth: 'none', discovery: 'openai-models-list', group: 'Local & self-hosted',
+  },
+  {
+    id: 'litellm', name: 'LiteLLM Proxy', slug: 'litellm', icon: 'litellm',
+    defaultUrl: 'http://localhost:4000/v1', api: 'openai-completions',
+    discovery: 'litellm', group: 'Local & self-hosted',
+  },
+  {
+    id: 'azure', name: 'Azure OpenAI', slug: 'azure', icon: 'azure',
+    defaultUrl: 'https://YOUR-RESOURCE.openai.azure.com/openai/v1',
+    api: 'azure-openai-responses', bundled: true, group: 'Other dialects',
+  },
+  {
+    id: 'amazon-bedrock', name: 'Amazon Bedrock', slug: 'amazon-bedrock', icon: 'amazon',
+    defaultUrl: 'https://bedrock-runtime.us-east-1.amazonaws.com',
+    api: 'bedrock-converse-stream', bundled: true, group: 'Other dialects',
+  },
+  {
+    id: 'google-vertex', name: 'Google Vertex AI', slug: 'google-vertex', icon: 'vertexai',
+    defaultUrl: 'https://us-central1-aiplatform.googleapis.com/v1',
+    api: 'google-vertex', bundled: true, group: 'Other dialects',
+  },
+  {
+    id: 'openai-codex', name: 'OpenAI Codex', slug: 'openai-codex', icon: 'codex',
+    defaultUrl: 'https://chatgpt.com/backend-api/codex',
+    api: 'openai-codex-responses', bundled: true, group: 'Other dialects',
+  },
+  {
+    id: 'anthropic-custom', name: 'Anthropic-Compatible Proxy', slug: 'anthropic-custom', icon: 'claude',
+    defaultUrl: 'https://', api: 'anthropic-messages', group: 'Custom',
+  },
+  {
+    id: 'openai-custom', name: 'OpenAI-Compatible Gateway', slug: 'openai-custom', icon: 'openai',
+    defaultUrl: 'https://', api: 'openai-completions', group: 'Custom',
+  },
+  {
+    id: 'custom', name: 'Custom OpenAI-Compatible', slug: 'custom', icon: 'custom',
+    defaultUrl: 'https://', api: 'openai-completions', group: 'Custom',
+  },
 ];

package/src/client/hooks/editor/find-harness.test-util.ts

@@ -0,0 +1,170 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The harness `use-editor-find` is exercised through.
+ *
+ * Split out because the find hook has two test files (opening and stepping /
+ * writing and options) and both must render it the same way — the session
+ * provider it needs, the surface calls it makes, and a fresh session id per test
+ * so the PERSISTED query does not leak between them.
+ *
+ * The hook's modules are imported dynamically, after the DOM globals exist:
+ * Preact binds its environment at evaluation time, and a static import would
+ * capture the DOM-less one.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { ComponentChildren, h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import type { EditorFindState, useEditorFind as UseEditorFindHook } from '@/client/hooks/editor/use-editor-find';
+
+export interface FindHarness {
+  /** The latest render's state; re-read after every settle, never held across one. */
+  readonly find: EditorFindState | null;
+  /** What the hook under test is handed — mutated per test, then re-rendered. */
+  readonly input: {
+    text: string;
+    documentKey: string;
+    selection: { start: number; end: number } | null;
+  };
+  /** Surface calls, so "did it select / reveal / write" is observable. */
+  readonly selections: Array<[number, number, boolean]>;
+  readonly reveals: number[];
+  readonly writes: Array<{ value: string; caretStart: number }>;
+  /** Re-render with the current `input` and settle. */
+  rerender: () => Promise<void>;
+  /** Flush pending effects and renders. */
+  flush: () => Promise<void>;
+  /**
+   * Preact's `act`, exposed because every interaction in these tests is a hook
+   * call the DOM never sees: it has to be wrapped to be flushed.
+   */
+  act: typeof PreactAct;
+  /** Register the before/after hooks this harness needs. */
+  install: () => void;
+}
+
+export async function createFindHarness(): Promise<FindHarness> {
+  let useEditorFind: typeof UseEditorFindHook;
+  let SessionStateContext: { Provider: (props: { value: { sessionId: string; ready: boolean }; children: ComponentChildren }) => ComponentChildren };
+  let h: typeof PreactH;
+  let render: typeof PreactRender;
+  let act: typeof PreactAct;
+
+  let find: EditorFindState | null = null;
+  let container: HTMLElement;
+  let sessionId = 'test-session';
+  let sessionCounter = 0;
+
+  const input: FindHarness['input'] = { text: 'alpha beta alpha', documentKey: 'file-1', selection: { start: 0, end: 5 } };
+  const selections: FindHarness['selections'] = [];
+  const reveals: number[] = [];
+  const writes: FindHarness['writes'] = [];
+
+  function Inner() {
+    find = useEditorFind({
+      text: input.text,
+      documentKey: input.documentKey,
+      readSelection: () => input.selection,
+      select: (start, end, focus = true) => selections.push([start, end, focus]),
+      reveal: (offset) => reveals.push(offset),
+      applyDocument: (value, caretStart) => writes.push({ value, caretStart }),
+    });
+    return null;
+  }
+
+  function Harness() {
+    // The hook persists the query and the toggles per session, so it needs the
+    // provider the panel supplies. A test session id is all it reads.
+    return h(SessionStateContext.Provider, { value: { sessionId, ready: true }, children: h(Inner, {}) });
+  }
+
+  async function flush() {
+    for (let i = 0; i < 3; i++) {
+      await act(async () => {
+        for (let turn = 0; turn < 4; turn++) await Promise.resolve();
+      });
+    }
+  }
+
+  async function rerender() {
+    await act(async () => {
+      render(h(Harness, {}), container);
+    });
+    await flush();
+  }
+
+  const domGlobals = (win: Window): Record<string, unknown> => ({
+    window: win,
+    document: win.document,
+    navigator: win.navigator,
+    Node: win.Node,
+    Element: win.Element,
+    HTMLElement: win.HTMLElement,
+  });
+
+  const installed: Record<string, unknown> = {};
+  const displaced: Record<string, unknown> = {};
+
+  return {
+    get find() {
+      return find;
+    },
+    input,
+    selections,
+    reveals,
+    writes,
+    rerender,
+    flush,
+    get act() {
+      return act;
+    },
+    install() {
+      beforeAll(async () => {
+        const win = new Window({ url: 'http://localhost' });
+        for (const [key, value] of Object.entries(domGlobals(win))) {
+          displaced[key] = (globalThis as Record<string, unknown>)[key];
+          installed[key] = value;
+          (globalThis as Record<string, unknown>)[key] = value;
+        }
+        ({ useEditorFind } = await import('@/client/hooks/editor/use-editor-find'));
+        ({ SessionStateContext } = await import('@/client/hooks/workspace/session-state/context'));
+        ({ h, render } = await import('preact'));
+        ({ act } = await import('preact/test-utils'));
+      });
+
+      afterAll(() => {
+        for (const key of Object.keys(installed)) {
+          if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+          else (globalThis as Record<string, unknown>)[key] = displaced[key];
+        }
+      });
+
+      beforeEach(async () => {
+        find = null;
+        // The query and the toggles are persisted per session — that is the
+        // feature — so each test gets its OWN session id rather than sharing a
+        // blob with the test before it.
+        sessionId = `test-session-${++sessionCounter}`;
+        input.text = 'alpha beta alpha';
+        input.documentKey = 'file-1';
+        input.selection = { start: 0, end: 5 };
+        selections.length = 0;
+        reveals.length = 0;
+        writes.length = 0;
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        await rerender();
+      });
+
+      afterEach(() => {
+        render(null, container);
+        container.remove();
+      });
+    },
+  };
+}

package/src/client/hooks/editor/scroll-container.test.ts

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The scroll-container walk, shared by the editor's lazy window and the find
+ * widget's reveal.
+ *
+ * The two must agree: one resolves which lines to draw from the visible band,
+ * the other moves that band. Two copies of this walk would let the widget scroll
+ * a container the window never reads — the match would be marked somewhere
+ * nobody can see. Exercised against a real DOM (happy-dom) because the answer is
+ * a computed style.
+ */
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+
+import { findScrollContainer } from '@/client/hooks/editor/scroll-container';
+
+const installed: Record<string, unknown> = {};
+const displaced: Record<string, unknown> = {};
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  for (const key of ['window', 'document', 'Node', 'Element', 'HTMLElement', 'getComputedStyle']) {
+    displaced[key] = (globalThis as Record<string, unknown>)[key];
+    installed[key] = (win as unknown as Record<string, unknown>)[key];
+    (globalThis as Record<string, unknown>)[key] = installed[key];
+  }
+});
+
+afterAll(() => {
+  for (const key of Object.keys(installed)) {
+    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = displaced[key];
+  }
+});
+
+/** An element whose computed style reports `overflow-y`, with a scrollable height. */
+function makeElement(overflowY: string, scrollable: boolean): HTMLElement {
+  const element = document.createElement('div');
+  element.style.overflowY = overflowY;
+  if (scrollable) {
+    // happy-dom reports clientHeight 0, so the walk's `scrollHeight > clientHeight`
+    // test needs a stubbed pair to describe a container that can actually scroll.
+    Object.defineProperty(element, 'scrollHeight', { value: 400, configurable: true });
+    Object.defineProperty(element, 'clientHeight', { value: 100, configurable: true });
+  }
+  return element;
+}
+
+describe('findScrollContainer', () => {
+  test('finds the nearest ancestor that scrolls', () => {
+    const outer = makeElement('auto', true);
+    const inner = makeElement('visible', false);
+    const surface = document.createElement('div');
+    inner.appendChild(surface);
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+
+    expect(findScrollContainer(surface)).toBe(outer);
+    outer.remove();
+  });
+
+  test('skips a container that cannot actually scroll', () => {
+    // `overflow: auto` on a box whose content fits is not a scroller: returning
+    // it would make `revealOffset` write scrollTop onto a box that ignores it.
+    const outer = makeElement('auto', true);
+    const fitted = makeElement('auto', false);
+    const surface = document.createElement('div');
+    fitted.appendChild(surface);
+    outer.appendChild(fitted);
+    document.body.appendChild(outer);
+
+    expect(findScrollContainer(surface)).toBe(outer);
+    outer.remove();
+  });
+
+  test('reports nothing when no ancestor scrolls', () => {
+    const plain = document.createElement('div');
+    const surface = document.createElement('div');
+    plain.appendChild(surface);
+    document.body.appendChild(plain);
+
+    expect(findScrollContainer(surface)).toBeNull();
+    plain.remove();
+  });
+
+  test('prefers the nearest scroller, so a nested panel scrolls itself', () => {
+    const outer = makeElement('auto', true);
+    const inner = makeElement('scroll', true);
+    const surface = document.createElement('div');
+    inner.appendChild(surface);
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+
+    expect(findScrollContainer(surface)).toBe(inner);
+    outer.remove();
+  });
+});

package/src/client/hooks/editor/scroll-container.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The ancestor a code surface actually scrolls inside.
+ *
+ * The lazy editor window and the find widget's "scroll to this match" both need
+ * this answer, and they must agree: one resolves which lines to draw from the
+ * visible band, the other moves that band. Two copies of the walk would let the
+ * widget scroll a container the window never reads.
+ *
+ * Walks up rather than taking a ref: the surface is mounted under different
+ * scrollers (the desktop editor panel, the phone's full-screen editor) and is
+ * also mounted inside a page that scrolls itself, which is the `null` case.
+ */
+export function findScrollContainer(element: HTMLElement): HTMLElement | null {
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+  }
+  return null;
+}