ompchamber 2.0.2 → 3.0.0

package/src/client/hooks/settings/providers/api.ts

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The settings API calls behind Settings → Providers.
+ *
+ * Split from the hook so the hook holds state transitions only — each of these
+ * is a request whose failure has to be reported to the user, and keeping them
+ * here means the "what does the server answer" contract has one home.
+ */
+
+import type { PresetProviderOption, ProviderItem, ProviderModel } from '@/shared/types';
+
+export interface ProviderSettingsPayload {
+  providers: ProviderItem[];
+  presetProviders?: PresetProviderOption[];
+}
+
+/** Load the merged provider registry (omp's sources + the chamber overlay). */
+export async function loadProvidersFromApi(): Promise<ProviderSettingsPayload | null> {
+  try {
+    const response = await fetch('/api/settings/providers');
+    const data = await response.json() as Partial<ProviderSettingsPayload>;
+    if (!Array.isArray(data?.providers)) return null;
+    return { providers: data.providers, ...(data.presetProviders ? { presetProviders: data.presetProviders } : {}) };
+  } catch (error) {
+    console.error('Failed to load providers from API:', error);
+    return null;
+  }
+}
+
+export interface ModelOverrideResult {
+  ok: boolean;
+  written?: boolean;
+  reason?: string;
+  error?: string;
+}
+
+/**
+ * Write the per-model knobs omp honours (`maxTokens`, reasoning effort) into
+ * models.yml `modelOverrides`. Writing only the chamber overlay left the
+ * controls inert — omp never read them.
+ */
+export async function saveModelOverrideRemote(
+  providerSlug: string,
+  modelId: string,
+  updates: Partial<ProviderModel>,
+): Promise<ModelOverrideResult> {
+  const body: Record<string, unknown> = { provider: providerSlug, modelId };
+  if ('maxTokens' in updates) body.maxTokens = updates.maxTokens ?? null;
+  if ('reasoningEffort' in updates) body.reasoningEffort = updates.reasoningEffort ?? null;
+  // Nothing omp would read — the overlay update alone is the whole change.
+  if (Object.keys(body).length === 2) return { ok: true, written: false };
+  try {
+    const response = await fetch('/api/settings/model-override', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    const data = await response.json() as { success?: boolean; written?: boolean; reason?: string; error?: string };
+    if (!response.ok) return { ok: false, error: data.error || 'Failed to save the model configuration.' };
+    return { ok: true, written: data.written, reason: data.reason };
+  } catch (error) {
+    console.error('Failed to save model override:', error);
+    return { ok: false, error: 'Failed to save the model configuration.' };
+  }
+}

package/src/client/hooks/settings/providers/index.ts

@@ -0,0 +1,138 @@
+import { useEffect, useMemo, useState } from 'preact/hooks';
+import type { PresetProviderOption, ProviderItem, ProviderModel } from '@/shared/types';
+import { PRESET_NEW_PROVIDERS } from '@/client/data/settings/provider';
+import { buildAvailableProviderPresets } from '@/shared/lib/models/provider/presets';
+import { useToasts } from '@/client/hooks/ui/toasts';
+import { loadProvidersFromApi } from '@/client/hooks/settings/providers/api';
+import { createProviderActions } from '@/client/hooks/settings/providers/actions';
+
+interface UseProviderSettingsOptions {
+  autoOpenAdd?: boolean;
+  onAddModalClose?: () => void;
+}
+
+/**
+ * State wiring behind Settings → Providers.
+ *
+ * The mutations themselves live in `providers/actions.ts`, which receives this
+ * hook's setters as one `deps` record — the split keeps both files under the
+ * repo's size ceiling without changing closure semantics, since every action
+ * still closes over the same state.
+ *
+ * Every mutation lands in one of two stores: the chamber-local overlay (per-model
+ * visibility and sampling config) or omp's own config.yml `disabledProviders`
+ * (connect / disconnect). Disconnect has to use the latter — the overlay is
+ * re-merged away on load, which is why a disconnected provider used to come back
+ * as connected.
+ */
+export function useProviderSettings({
+  autoOpenAdd = false,
+  onAddModalClose,
+}: UseProviderSettingsOptions = {}) {
+  const [providers, setProviders] = useState<ProviderItem[]>([]);
+  const [presetProviders, setPresetProviders] = useState<PresetProviderOption[]>(PRESET_NEW_PROVIDERS);
+  const [selectedProviderId, setSelectedProviderId] = useState<string>('provider-deepseek');
+  const [currentProject, setCurrentProject] = useState('ompchamber');
+  const [isFetchingModels, setIsFetchingModels] = useState(false);
+  const { toasts, pushToast, dismissToast } = useToasts();
+
+  const [isAddModalOpen, setIsAddModalOpen] = useState(autoOpenAdd);
+  const [isAddModelModalOpen, setIsAddModelModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isDeletingProvider, setIsDeletingProvider] = useState(false);
+  const [isReconnectModalOpen, setIsReconnectModalOpen] = useState(false);
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+  const [configModel, setConfigModel] = useState<ProviderModel | null>(null);
+  const [capabilitiesModel, setCapabilitiesModel] = useState<ProviderModel | null>(null);
+
+  useEffect(() => {
+    if (autoOpenAdd) setIsAddModalOpen(true);
+  }, [autoOpenAdd]);
+
+  useEffect(() => {
+    let active = true;
+    void loadProvidersFromApi().then((data) => {
+      if (!active || !data) return;
+      setProviders(data.providers);
+      const connected = data.providers.filter((provider) => provider.status === 'connected');
+      setSelectedProviderId(connected.length > 0 ? connected[0].id : '');
+      if (data.presetProviders) setPresetProviders(data.presetProviders);
+    });
+    return () => { active = false; };
+  }, []);
+
+  // The sidebar lists connected providers plus every provider the user disabled:
+  // a disabled provider reports `disconnected`, so filtering on status alone
+  // would make the switch that hid it unreachable.
+  const connectedProviders = useMemo(
+    () => providers.filter(
+      (provider) => provider.status === 'connected' || provider.disabled === true,
+    ),
+    [providers],
+  );
+  const availablePresetProviders = useMemo(
+    () => buildAvailableProviderPresets(providers, presetProviders),
+    [providers, presetProviders],
+  );
+  const selectedProvider = connectedProviders.find((p) => p.id === selectedProviderId) || connectedProviders[0];
+
+  const actions = createProviderActions({
+    providers,
+    selectedProvider,
+    connectedProviders,
+    isFetchingModels,
+    isDeletingProvider,
+    pushToast,
+    setProviders,
+    setSelectedProviderId,
+    setIsAddModalOpen,
+    setIsDeleteModalOpen,
+    setIsDeletingProvider,
+    setIsFetchingModels,
+    ...(onAddModalClose ? { onAddModalClose } : {}),
+  });
+
+  /**
+   * After a hand-registered model lands in models.yml, the registry has to be
+   * re-read: the new row exists only in omp's file, so nothing in the chamber's
+   * own overlay knows about it yet. Re-fetching the MERGED list (rather than
+   * re-saving the overlay, whose response is the overlay alone) is what puts
+   * the model in the sidebar count and the chat picker.
+   */
+  const handleModelAdded = async (modelId: string) => {
+    pushToast(`${modelId} registered in models.yml.`, 'success');
+    const data = await loadProvidersFromApi();
+    if (data) setProviders(data.providers);
+  };
+
+  return {
+    providers,
+    connectedProviders,
+    availablePresetProviders,
+    selectedProvider,
+    currentProject,
+    setCurrentProject,
+    isFetchingModels,
+    toasts,
+    pushToast,
+    dismissToast,
+    isAddModelModalOpen,
+    setIsAddModelModalOpen,
+    handleModelAdded,
+    isDeleteModalOpen,
+    setIsDeleteModalOpen,
+    isDeletingProvider,
+    isAddModalOpen,
+    setIsAddModalOpen,
+    isReconnectModalOpen,
+    setIsReconnectModalOpen,
+    isLoginModalOpen,
+    setIsLoginModalOpen,
+    configModel,
+    setConfigModel,
+    capabilitiesModel,
+    setCapabilitiesModel,
+    setSelectedProviderId,
+    ...actions,
+  };
+}

package/src/client/hooks/settings/providers/messages.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * What to TELL the user after a provider was added or re-fetched.
+ *
+ * The message depends on the shape that was written, not on the model count,
+ * because two of the three shapes have no local model list BY DESIGN: a
+ * discovery provider is listed by omp at runtime, and an endpoint override
+ * leaves the models to omp's own catalog. Reporting "0 models" for either made
+ * a registration that succeeded read as a failure.
+ */
+
+import type { ProviderItem } from '@/shared/types';
+
+/** The success/failure line for an Add Provider submission. */
+export function addProviderMessage(
+  provider: ProviderItem,
+  options: { fetchedCount: number; ompNote?: string },
+): { text: string; tone: 'success' | 'error' } {
+  if (provider.modelSource === 'discovery') {
+    return { text: `${provider.name} registered — omp discovers its models on each run.`, tone: 'success' };
+  }
+  if (provider.modelSource === 'override') {
+    return {
+      text: `${provider.name} endpoint registered — omp keeps its own model list for this provider.`,
+      tone: 'success',
+    };
+  }
+  if (options.fetchedCount > 0) {
+    return {
+      text: `Fetched ${options.fetchedCount} new model${options.fetchedCount === 1 ? '' : 's'} from the provider.`,
+      tone: 'success',
+    };
+  }
+  if (options.fetchedCount === -1) {
+    // The listing failed. When omp reported a reason it is the actionable half,
+    // so it is quoted rather than replaced by a generic line.
+    return {
+      text: options.ompNote
+        ? `Provider registered, but models could not be listed: ${options.ompNote}`
+        : 'Auto-fetch models failed — provider added with default models.',
+      tone: 'error',
+    };
+  }
+  return { text: `${provider.name} registered — no new models to add.`, tone: 'success' };
+}
+
+/**
+ * The extra line reported after a manual "fetch models": what the chamber wrote
+ * into `models.yml` versus what omp already had. A file write and a model-count
+ * change are different outcomes, and conflating them hid a failed write.
+ */
+export function fetchModelsNote(result: {
+  omp?: { written: boolean; addedCount: number; backfilledCount: number; reason?: string };
+}): { text: string; tone: 'success' | 'error' } | null {
+  if (!result.omp) return null;
+  if (result.omp.written) {
+    const parts: string[] = [];
+    if (result.omp.addedCount > 0) {
+      parts.push(`${result.omp.addedCount} new model${result.omp.addedCount === 1 ? '' : 's'} registered`);
+    }
+    if (result.omp.backfilledCount > 0) {
+      parts.push(`${result.omp.backfilledCount} model${result.omp.backfilledCount === 1 ? '' : 's'} enriched`);
+    }
+    return {
+      text: `omp models.yml updated${parts.length > 0 ? `: ${parts.join(', ')}` : ''}.`,
+      tone: 'success',
+    };
+  }
+  if (result.omp.reason) {
+    return { text: `omp models.yml not updated: ${result.omp.reason}`, tone: 'error' };
+  }
+  return null;
+}

package/src/client/hooks/settings/useUsageReport.ts

@@ -5,24 +5,29 @@ export interface UsageReportState {
   report: UsageReport | null;
   isLoading: boolean;
   error: string | null;
-  reload: (opts?: { silent?: boolean }) => void;
+  reload: (opts?: { silent?: boolean; force?: boolean }) => void;
 }
 
 /**
  * Shared `GET /api/settings/usage` loader for the Settings → Usage panel and
  * the Usage right panel. Both surfaces mount independently, so each keeps its
  * own copy of the last successful report until reload completes.
+ *
+ * `force` asks the server to re-probe the providers instead of answering from
+ * its one-minute quota cache — used by the user's own Refresh button, never by
+ * the background poll.
  */
 export function useUsageReport(): UsageReportState {
   const [report, setReport] = useState<UsageReport | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  const reload = useCallback(async (opts?: { silent?: boolean }) => {
+  const reload = useCallback(async (opts?: { silent?: boolean; force?: boolean }) => {
     if (!opts?.silent) setIsLoading(true);
     setError(null);
     try {
-      const response = await fetch('/api/settings/usage');
+      const url = opts?.force ? '/api/settings/usage?refresh=1' : '/api/settings/usage';
+      const response = await fetch(url);
       if (!response.ok) throw new Error(`Usage request failed (${response.status})`);
       const data = (await response.json()) as UsageReport;
       setReport(data);

package/src/client/hooks/ui/theme.ts

@@ -35,9 +35,9 @@ export function currentThemeId(): string {
  * Put the catalog on the document before the first render.
  *
  * The SSR shell already inlines the stylesheet and both attributes; this is the
- * guard for a document that predates them — a cached page, or `dist/client/
- * index.html` left over from an older build while only the server was restarted.
- * Without it the page keeps `:root`'s default palette and no variant attribute,
+ * guard for a document that predates them — a cached page, or markup rendered
+ * before the server restarted. Without it the page keeps `:root`'s default
+ * palette and no variant attribute,
  * which is a wrong palette, not merely a stale one.
  *
  * Called once from `main.tsx` rather than from a hook: the only components that

package/src/client/hooks/workspace/file-tabs.ts

@@ -2,8 +2,18 @@ import { useCallback, useEffect, useRef } from 'preact/hooks';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
 import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
 import { useChamberEvent } from '@/client/hooks/ui/window-event';
+import { diffTabId, diffTabName, fileTabId } from '@/shared/lib/workspace/file-tab-id';
 import type { OpenedFile } from '@/shared/types/fs';
 
+export interface OpenFileInput {
+  id?: number | string;
+  name: string;
+  path: string;
+  content?: string;
+  root?: string;
+  repo?: string;
+}
+
 export function useFileTabs(
   activeProjectPath: string | null,
   sessionId: string,
@@ -25,9 +35,12 @@ export function useFileTabs(
     setActiveFileId(null);
   }, [activeProjectPath, sessionId, layoutReady, setOpenedFiles, setActiveFileId]);
 
-  const handleOpenFile = useCallback((file: any) => {
+  const handleOpenFile = useCallback((file: OpenFileInput) => {
     const fileEntry: OpenedFile = {
       ...file,
+      // One id scheme for a path, so a file opened from the explorer, a chat
+      // link and a converted diff tab all land on the same tab.
+      id: file.id ?? fileTabId(file.path),
       root: file.root ?? activeProjectPath ?? undefined,
     };
     setOpenedFiles(prev => {
@@ -52,13 +65,12 @@ export function useFileTabs(
     root?: string;
   }) => {
     const rawPath = diffInfo.file.replace(/^\/+/, '');
-    const fileName = rawPath.split('/').pop() || rawPath;
     const isStaged = Boolean(diffInfo.staged);
-    const diffId = `diff-${isStaged ? 'staged' : 'working'}-${rawPath}`;
+    const diffId = diffTabId(rawPath, isStaged);
 
     const diffEntry: OpenedFile = {
       id: diffId,
-      name: `${fileName} (Diff)`,
+      name: diffTabName(rawPath),
       path: rawPath,
       isDiff: true,
       diffStatus: diffInfo.status || 'M',
@@ -91,6 +103,50 @@ export function useFileTabs(
     });
   }, [activeFileId, setOpenedFiles, setActiveFileId]);
 
+  /**
+   * Turn a diff tab into the plain editor tab for the same file.
+   *
+   * The panel used to do this by assigning `activeFile.isDiff = false` on the
+   * object it was handed. That object is the one inside `layout.openedFiles`,
+   * so the flag was mutated in place: React never saw a change (the array
+   * identity was identical), the tab kept rendering the diff until the next
+   * unrelated render, and — because the array is what gets persisted — the
+   * mutation reached the database. After a reload the "diff" tab came back as
+   * a file tab, and re-opening that file's diff found an entry that already
+   * matched, so the diff never came back at all.
+   *
+   * The target id is `fileTabId`, so if that file already has a tab the two
+   * entries would share an id and React would render duplicate keys. The diff
+   * entry is dropped in that case and the existing tab activated instead — the
+   * user asked to see the file, and it is already open.
+   */
+  const convertDiffToEditor = useCallback((diffId: number | string) => {
+    setOpenedFiles(prev => {
+      const index = prev.findIndex(f => f.id === diffId);
+      if (index === -1) return prev;
+      const diff = prev[index];
+      const fileId = fileTabId(diff.path);
+      const alreadyOpen = prev.find(f => f.id === fileId);
+
+      if (alreadyOpen) {
+        setActiveFileId(alreadyOpen.id);
+        return prev.filter(f => f.id !== diffId);
+      }
+
+      const next = [...prev];
+      next[index] = {
+        id: fileId,
+        name: diff.path.split('/').pop() || diff.name,
+        path: diff.path,
+        root: diff.root,
+        repo: diff.repo,
+      };
+      setActiveFileId(fileId);
+      return next;
+    });
+    onOpenTab?.();
+  }, [onOpenTab, setOpenedFiles, setActiveFileId]);
+
   // Global listeners for omp:open-file and omp:open-diff
   useChamberEvent('omp:open-file', (e) => {
     const customEvent = e as CustomEvent<{ path: string; name?: string; id?: number; content?: string; root?: string; repo?: string }>;
@@ -98,15 +154,9 @@ export function useFileTabs(
 
     const rawPath = customEvent.detail.path.replace(/^\/+/, '');
     const name = customEvent.detail.name || rawPath.split('/').pop() || 'file';
-    let hash = 0;
-    for (let i = 0; i < rawPath.length; i++) {
-      hash = (hash << 5) - hash + rawPath.charCodeAt(i);
-      hash |= 0;
-    }
-    const id = customEvent.detail.id || Math.abs(hash) || Date.now();
 
     handleOpenFile({
-      id,
+      id: customEvent.detail.id || fileTabId(rawPath),
       name,
       path: rawPath,
       content: customEvent.detail.content,
@@ -136,5 +186,6 @@ export function useFileTabs(
     handleOpenFile,
     handleOpenDiff,
     handleCloseFile,
+    convertDiffToEditor,
   };
 }

package/src/client/stubs/elkjs.ts

@@ -4,7 +4,12 @@
  */
 
 /**
- * Browser replacement for `elkjs`, aliased in `rsbuild.config.ts`.
+ * Browser replacement for `elkjs`, aliased through `tsconfig.json` `paths`.
+ *
+ * The alias moved there when the client build moved to Bun: Bun's bundler does
+ * not read an `alias` option (it is absent from `Bun.build`'s config and from
+ * `bun-types`; passing one is silently ignored — verified), while `paths` it
+ * honours for both internal aliases and package specifiers.
  *
  * Mermaid 12 changed the global `layout` default from `dagre` to `elk`, so every
  * flowchart pulled in `elkjs/lib/elk.bundled.js` whether the diagram asked for

package/src/server/index.ts

@@ -1,13 +1,16 @@
 import { Elysia } from 'elysia';
 import pkg from '@/../package.json';
+import shell from '@/../index.html';
 import { apiRoutes } from '@/server/routes';
 import { ssrRoutes } from '@/server/plugins/ssr';
+import { setShellSource } from '@/server/plugins/shell.server';
 import { getDatabasePath } from '@/server/db.server';
 import { fetchOmpRegistrySnapshot } from '@/server/lib/models/provider-registry.server';
 import { ompStartupError, ompStartupLogLines } from '@/server/lib/omp/core/startup';
 import { readInstanceRecord, removeInstanceRecord, writeInstanceRecord } from '@/server/lib/lifecycle/instance';
 import { resolveLaunchMode } from '@/server/lib/lifecycle/launch-mode';
 import { acquirePortLock, claimPort, PortInUseError } from '@/server/lib/lifecycle/port-guard';
+import { SHELL_ROUTE } from '@/server/lib/lifecycle/shell-route';
 import { isMockMode } from '@/server/mock.server';
 
 // Refuse to run without a resolvable omp binary — before the listener opens and
@@ -39,7 +42,15 @@ if (!lock) {
   process.exit(1);
 }
 
-const app = new Elysia().use(apiRoutes).use(ssrRoutes);
+// `serve.routes` is where the HTML shell lives. Elysia merges its own static
+// routes into that same table (its Bun adapter passes `serve` straight to
+// `Bun.serve`), and Bun's table wins for the paths it declares — so `/_shell`
+// renders the bundle while every other path falls through to `fetch`. The
+// WebSocket routes keep working: Elysia composes its `websocket` handler
+// alongside this object.
+const app = new Elysia({ serve: { routes: { [SHELL_ROUTE]: shell } } })
+  .use(apiRoutes)
+  .use(ssrRoutes);
 
 try {
   await claimPort({
@@ -50,7 +61,14 @@ try {
       // `reusePort: true`, which lets a second server bind a port already in
       // use and then sit invisible while the first-bound socket takes every
       // connection.
-      await app.listen({ port, hostname: host, reusePort: false });
+      app.listen({ port, hostname: host, reusePort: false });
+      if (!app.server) throw new Error('Bun.serve returned no listener');
+      // The shell is rendered by asking this same listener for it: Bun renders
+      // an HTML route only while serving, and there is no in-process API for an
+      // `HTMLBundle` (`new Response(bundle)` is "[object HTMLBundle]",
+      // `app.handle` answers 404). Handing the listener over is what makes
+      // `renderShell()` possible.
+      setShellSource(app.server);
     },
   });
 } catch (error) {

package/src/server/lib/assets/font-css.server.ts

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The font stylesheet, assembled at request time.
+ *
+ * `@font-face` blocks cannot live in the bundle: Bun's CSS loader resolves every
+ * local `url()`, and a font is always a local file — so a bundled face is either
+ * a base64 blob or an absolute filesystem path. `lib/bundler/css.ts` lifts each
+ * block out of its stylesheet and rewrites the urls to `<FONT_ROUTE_PREFIX><basename>`;
+ * this module serves the result.
+ *
+ * Two jobs, one route each:
+ *
+ * - `FONT_STYLESHEET_ROUTE` (`/fonts.css`) concatenates the extracted faces.
+ *   Read per request rather than cached: it is a handful of kilobytes, and a
+ *   cache is what would keep a stale face alive across an edit to a stylesheet.
+ *   A missing directory is an empty stylesheet, not a 404 — the shell links this
+ *   unconditionally.
+ *
+ * - `FONT_ROUTE_PREFIX` (`/fonts/<basename>`) serves the file itself from the
+ *   installed packages. The basename is the whole key, so the lookup is an index
+ *   rather than a path built from the request; see `fonts.server.ts`.
+ */
+
+import { join } from 'path';
+import { Glob } from 'bun';
+
+import { packageRoot, resolveFontFile } from '@/server/lib/assets/fonts.server';
+
+/** Directory holding one extracted face file per source stylesheet. */
+export const FONT_FACE_DIR = join('.ompchamber-build', 'font-faces');
+
+/** The route the assembled stylesheet is served on. */
+export const FONT_STYLESHEET_ROUTE = '/fonts.css';
+
+const FONT_MIME: Record<string, string> = {
+  '.woff2': 'font/woff2',
+  '.woff': 'font/woff',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/otf',
+};
+
+const STYLESHEET_HEADERS = {
+  'content-type': 'text/css; charset=utf-8',
+  'cache-control': 'no-store',
+} as const;
+
+/** Every extracted face file, concatenated in a stable order. */
+export async function fontStylesheet(): Promise<string> {
+  const dir = join(packageRoot(), FONT_FACE_DIR);
+  const glob = new Glob('*.css');
+  const files: string[] = [];
+  try {
+    for await (const file of glob.scan({ cwd: dir, onlyFiles: true })) files.push(file);
+  } catch {
+    return '';
+  }
+  // Sorted so the stylesheet is byte-stable between builds: the browser caches
+  // on the ETag, and an unstable order would invalidate it for no change.
+  files.sort();
+  const parts = await Promise.all(files.map((file) => Bun.file(join(dir, file)).text()));
+  return parts.join('\n');
+}
+
+/** The `/fonts.css` response. */
+export async function serveFontStylesheet(): Promise<Response> {
+  return new Response(await fontStylesheet(), { headers: STYLESHEET_HEADERS });
+}
+
+/** The `/fonts/<basename>` response, or null when no package ships that file. */
+export async function serveFontFile(name: string): Promise<Response | null> {
+  const file = await resolveFontFile(name);
+  if (!file) return null;
+  const ext = name.slice(name.lastIndexOf('.')).toLowerCase();
+  return new Response(Bun.file(file), {
+    headers: {
+      'content-type': FONT_MIME[ext] ?? 'application/octet-stream',
+      // A font's bytes never change under a fixed basename inside a pinned
+      // dependency, so this is the one asset that can be cached hard.
+      'cache-control': 'public, max-age=31536000, immutable',
+    },
+  });
+}