ompchamber 0.3.0

package/src/shared/lib/markdown/mermaid.ts

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Async client-side hydration for ```mermaid blocks emitted by marked.ts.
+ *
+ * marked renders mermaid fences as `.mermaid-block[data-mermaid=<uri-encoded
+ * source>]` placeholders; this module lazily imports mermaid (kept out of the
+ * main bundle), renders each source to SVG, sanitizes it, and swaps the
+ * placeholder in place. Parse errors fall back to the raw source so streaming
+ * half-diagrams degrade to code instead of breaking the timeline.
+ *
+ * Rendered SVGs are cached per theme+source so a remounted block (timeline
+ * scroll, re-render) is restored synchronously instead of flashing the
+ * placeholder again.
+ */
+
+import { sanitizeMermaidSvg } from '@/shared/lib/markdown/sanitize';
+
+export interface MermaidRenderResult {
+  rendered: number;
+  failed: number;
+}
+
+type MermaidModule = typeof import('mermaid');
+type ThemeKey = 'dark' | 'default';
+
+const SVG_CACHE_LIMIT = 60;
+const svgCache = new Map<string, string>();
+
+let mermaidPromise: Promise<MermaidModule['default']> | null = null;
+let lastThemeKey: ThemeKey | null = null;
+
+function resolveThemeKey(): ThemeKey {
+  const theme = document.documentElement.dataset.theme || document.documentElement.getAttribute('data-theme');
+  return theme === 'one-dark-pro-soft' || theme === 'noir' || theme === 'dark' ? 'dark' : 'default';
+}
+
+function cacheKey(themeKey: ThemeKey, source: string): string {
+  return `${themeKey}\u0000${source}`;
+}
+
+function readCachedSvg(themeKey: ThemeKey, source: string): string | null {
+  return svgCache.get(cacheKey(themeKey, source)) ?? null;
+}
+
+function writeCachedSvg(themeKey: ThemeKey, source: string, svg: string): void {
+  if (svgCache.size >= SVG_CACHE_LIMIT) {
+    const oldest = svgCache.keys().next().value;
+    if (oldest !== undefined) svgCache.delete(oldest);
+  }
+  svgCache.set(cacheKey(themeKey, source), svg);
+}
+
+async function loadMermaid(themeKey: ThemeKey): Promise<MermaidModule['default']> {
+  if (!mermaidPromise || lastThemeKey !== themeKey) {
+    lastThemeKey = themeKey;
+    mermaidPromise = import('mermaid')
+      .then((mod) => {
+        mod.default.initialize({
+          startOnLoad: false,
+          securityLevel: 'strict',
+          theme: themeKey,
+          flowchart: { useMaxWidth: false, wrappingWidth: 100000 },
+          sequence: { useMaxWidth: false },
+        });
+        return mod.default;
+      })
+      .catch((error) => {
+        mermaidPromise = null;
+        throw error;
+      });
+  }
+  return mermaidPromise;
+}
+
+function applySvg(block: HTMLElement, svg: string, themeKey: ThemeKey): void {
+  const source = block.dataset.mermaid ?? '';
+  const copyAttr = source.replace(/"/g, '&quot;');
+  block.innerHTML =
+    `<button type="button" class="code-copy-float" data-copy="${copyAttr}" aria-label="Copy diagram source">` +
+    '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>' +
+    '</button>' +
+    svg;
+  block.dataset.mermaidState = 'done';
+  block.dataset.mermaidTheme = themeKey;
+
+  // Mermaid sizes the SVG from its own 16px label metrics. Cap the rendered
+  // width so the effective label size lands near the app's body text instead
+  // of towering over it; narrow columns still shrink the whole diagram.
+  const diagram = block.querySelector<SVGSVGElement>(':scope > svg');
+  const naturalWidth = Number(diagram?.getAttribute('width'));
+  if (diagram && Number.isFinite(naturalWidth) && naturalWidth > 0) {
+    block.style.setProperty('--mermaid-diagram-max', `${Math.round(naturalWidth * 0.8)}px`);
+  }
+}
+
+let renderSeq = 0;
+
+async function renderBlock(block: HTMLElement, cachedOnly: boolean): Promise<boolean> {
+  const source = block.dataset.mermaid;
+  if (source == null) return false;
+
+  const themeKey = resolveThemeKey();
+  const decoded = decodeURIComponent(source);
+  const cached = readCachedSvg(themeKey, decoded);
+  if (cached) {
+    applySvg(block, cached, themeKey);
+    return true;
+  }
+  if (cachedOnly) return true;
+
+  block.dataset.mermaidState = 'rendering';
+  try {
+    const mermaid = await loadMermaid(themeKey);
+    const { svg } = await mermaid.render(`mermaid-svg-${Date.now()}-${renderSeq++}`, decoded);
+    if (!block.isConnected) return false;
+    const clean = sanitizeMermaidSvg(svg);
+    writeCachedSvg(themeKey, decoded, clean);
+    applySvg(block, clean, themeKey);
+    return true;
+  } catch {
+    if (block.isConnected) block.dataset.mermaidState = 'error';
+    return false;
+  }
+}
+
+/**
+ * Render every pending `.mermaid-block` under `root`. Theme changes re-run
+ * this via `force: true`. Idempotent — blocks already rendered with the
+ * current theme are skipped unless forced. With `cachedOnly`, only blocks
+ * whose SVG is already cached are restored (synchronous, no rendering) — the
+ * fast path that keeps remounted blocks from flashing the placeholder.
+ */
+export async function hydrateMermaidBlocks(
+  root: ParentNode,
+  options: { force?: boolean; cachedOnly?: boolean } = {},
+): Promise<MermaidRenderResult> {
+  const themeKey = resolveThemeKey();
+  const blocks = Array.from(root.querySelectorAll<HTMLElement>('.mermaid-block'));
+  const results = await Promise.all(
+    blocks.map(async (block) => {
+      const state = block.dataset.mermaidState;
+      const themed = block.dataset.mermaidTheme === themeKey;
+      if (state === 'done' && themed && !options.force) return true;
+      if (state === 'rendering') return false;
+      return renderBlock(block, options.cachedOnly === true);
+    }),
+  );
+  return { rendered: results.filter(Boolean).length, failed: results.filter((ok) => !ok).length };
+}

package/src/shared/lib/markdown/sanitize.ts

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * DOMPurify sanitizer for rendered markdown HTML.
+ *
+ * The assistant is allowed to produce HTML but we never execute it: raw HTML
+ * tags are stripped by default (DOMPurify default profile) while KaTeX's
+ * MathML nodes are preserved via ADD_TAGS/ADD_ATTR. Sanitization is
+ * client-only — in a non-DOM (SSR) environment we return the input unchanged
+ * and let the browser dev server apply it on the client.
+ */
+
+import DOMPurify, { type Config } from 'dompurify';
+
+const KATEX_MATHML_TAGS = [
+  'math',
+  'annotation',
+  'annotation-xml',
+  'semantics',
+  'mrow',
+  'mi',
+  'mn',
+  'mo',
+  'mspace',
+  'ms',
+  'mtext',
+  'mroot',
+  'mfrac',
+  'msqrt',
+  'mstyle',
+  'merror',
+  'mpadded',
+  'mphantom',
+  'mtable',
+  'mtr',
+  'mtd',
+  'mlabeledtr',
+  'munder',
+  'mover',
+  'munderover',
+  'msup',
+  'msub',
+  'msubsup',
+  'mtext',
+  'mtd',
+  'menclose',
+];
+
+/** Whether KaTeX output is present — extends the allowlist for MathML. */
+function hasKatex(html: string): boolean {
+  return /class="[^"]*katex/.test(html);
+}
+
+/** Inline SVG icons emitted by the marked code-block copy button. */
+const COPY_ICON_TAGS = ['svg', 'path', 'polyline', 'rect', 'circle', 'line'];
+const COPY_ICON_ATTRS = [
+  'viewBox', 'd', 'points', 'x', 'y', 'x1', 'y1', 'x2', 'y2',
+  'width', 'height', 'rx', 'ry', 'cx', 'cy', 'r',
+  'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin',
+  'xmlns', 'aria-hidden', 'aria-label',
+];
+
+/** Mermaid diagram SVG shapes, text, edges, and metadata attributes. */
+const MERMAID_TAGS = [
+  'svg', 'g', 'line', 'path', 'rect', 'circle', 'ellipse', 'polygon', 'polyline',
+  'text', 'tspan', 'title', 'desc', 'marker', 'defs', 'style', 'use', 'symbol',
+  'foreignObject', 'html', 'head', 'body', 'div', 'span', 'p', 'br', 'img',
+];
+const MERMAID_ATTRS = [
+  'id', 'class', 'style', 'transform', 'viewBox', 'width', 'height', 'xmlns',
+  'x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'r', 'rx', 'ry', 'd', 'points',
+  'fill', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-dashoffset',
+  'stroke-linecap', 'stroke-linejoin', 'stroke-opacity', 'fill-opacity', 'opacity',
+  'font-family', 'font-size', 'font-weight', 'font-style', 'text-anchor',
+  'dominant-baseline', 'alignment-baseline', 'text-decoration', 'direction',
+  'marker-end', 'marker-start', 'marker-mid', 'markerWidth', 'markerHeight',
+  'refX', 'refY', 'orient', 'markerUnits', 'preserveAspectRatio', 'version',
+  'dx', 'dy', 'dy1', 'dy2', 'rowspan', 'colspan', 'start', 'aria-roledescription',
+  'aria-describedby', 'role', 'aria-hidden', 'aria-label', 'data-mermaid-theme',
+  'overflow', 'visibility', 'rel', 'src', 'alt',
+];
+const MERMAID_URI_ATTRS = ['href', 'xlink:href'];
+
+function buildMermaidConfig(hasUri: boolean): Config {
+  return {
+    USE_PROFILES: { html: true, svg: true, svgFilters: true },
+    ADD_TAGS: MERMAID_TAGS,
+    ADD_ATTR: [...MERMAID_ATTRS, ...(hasUri ? MERMAID_URI_ATTRS : [])],
+    HTML_INTEGRATION_POINTS: { 'annotation-xml': true, foreignobject: true },
+  };
+}
+
+/**
+ * Sanitize a rendered markdown HTML string. Strips scripts/event handlers and
+ * unknown tags (default profile) so assistant HTML is escaped, not executed.
+ * KaTeX MathML + the code-copy icon SVG are preserved when present.
+ */
+export function sanitizeHtml(html: string): string {
+  if (!html) return html;
+  if (typeof window === 'undefined' || !window.document) return html;
+
+  const hasSvgIcon = /<svg[^>]*>/.test(html);
+  const config = hasKatex(html) || hasSvgIcon
+    ? {
+        USE_PROFILES: { html: true, mathMl: true } as const,
+        ADD_TAGS: [...KATEX_MATHML_TAGS, ...(hasSvgIcon ? COPY_ICON_TAGS : [])],
+        ADD_ATTR: ['aria-hidden', 'aria-label', 'encoding', 'nonce', ...(hasSvgIcon ? COPY_ICON_ATTRS : [])],
+      }
+    : { USE_PROFILES: { html: true } as const };
+
+  try {
+    return DOMPurify.sanitize(html, config);
+  } catch {
+    return html;
+  }
+}
+
+/**
+ * Sanitize a mermaid-rendered SVG string. Mermaid with `securityLevel:
+ * 'strict'` already strips scripts and event handlers, but defense in depth:
+ * DOMPurify with an SVG allowlist tuned for mermaid output keeps diagram
+ * shapes/text/edges while dropping anything outside it. Returns the input
+ * unchanged in non-DOM (SSR) environments.
+ */
+export function sanitizeMermaidSvg(svg: string): string {
+  if (!svg) return svg;
+  if (typeof window === 'undefined' || !window.document) return svg;
+
+  const hasUri = /href/.test(svg);
+  try {
+    return DOMPurify.sanitize(svg, buildMermaidConfig(hasUri));
+  } catch {
+    return svg;
+  }
+}

package/src/shared/lib/models/catalog.ts

@@ -0,0 +1,88 @@
+/**
+ * Server-side access to the models.dev catalog (https://models.dev/api.json):
+ * a mapping of provider slug → model id → { name, attachment, reasoning,
+ * tool_call, limit.context/output, cost.input/output }. Used as the metadata
+ * fallback for provider models whose listing endpoint (/v1/models) only
+ * returns bare ids. Cached in-process for 1 hour with graceful degradation —
+ * catalog failures never fail the caller.
+ */
+
+const CATALOG_URL = 'https://models.dev/api.json';
+const CATALOG_TTL_MS = 60 * 60 * 1000;
+const CATALOG_TIMEOUT_MS = 8_000;
+
+export interface CatalogModelInfo {
+  name?: string;
+  attachment?: boolean;
+  reasoning?: boolean;
+  tool_call?: boolean;
+  limit?: { context?: number; output?: number };
+  cost?: { input?: number; output?: number; cache_read?: number };
+}
+
+type ModelsDevCatalog = Record<string, { models?: Record<string, CatalogModelInfo> }>;
+
+export interface CatalogLoadOptions {
+  timeoutMs?: number;
+  /**
+   * When true, a failed fetch or malformed payload throws instead of
+   * degrading to cached/empty data — callers that surface an error envelope
+   * (pricing) opt in.
+   */
+  strict?: boolean;
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __ompChamberModelsDevCatalog: { data: ModelsDevCatalog; expiresAt: number } | undefined;
+}
+
+export async function loadModelsDevCatalog(options: CatalogLoadOptions = {}): Promise<ModelsDevCatalog> {
+  const { timeoutMs = CATALOG_TIMEOUT_MS, strict = false } = options;
+  const cached = globalThis.__ompChamberModelsDevCatalog;
+  if (cached && cached.expiresAt > Date.now()) return cached.data;
+  try {
+    const response = await fetch(CATALOG_URL, { signal: AbortSignal.timeout(timeoutMs) });
+    if (!response.ok) {
+      if (strict) throw new Error(`models.dev responded ${response.status}`);
+      return cached?.data ?? {};
+    }
+    const data = await response.json() as ModelsDevCatalog;
+    if (!data || typeof data !== 'object') {
+      if (strict) throw new Error('models.dev payload is not an object');
+      return cached?.data ?? {};
+    }
+    globalThis.__ompChamberModelsDevCatalog = { data, expiresAt: Date.now() + CATALOG_TTL_MS };
+    return data;
+  } catch (error) {
+    if (strict) throw error;
+    return cached?.data ?? {};
+  }
+}
+
+/**
+ * Look up a model in the catalog trying the plain id and, for
+ * "vendor/id" composite ids (OpenRouter-style), the vendor prefix and the
+ * bare id after the slash.
+ */
+export function findCatalogModel(
+  catalog: ModelsDevCatalog,
+  providerSlug: string | undefined,
+  modelId: string,
+): { info: CatalogModelInfo; providerKey: string } | null {
+  const providerCandidates = new Set<string>();
+  if (providerSlug) providerCandidates.add(providerSlug);
+  const idCandidates = new Set<string>([modelId]);
+  if (modelId.includes('/')) {
+    providerCandidates.add(modelId.split('/')[0]);
+    const bareId = modelId.split('/').pop();
+    if (bareId) idCandidates.add(bareId);
+  }
+  for (const providerKey of providerCandidates) {
+    for (const id of idCandidates) {
+      const info = catalog[providerKey]?.models?.[id];
+      if (info) return { info, providerKey };
+    }
+  }
+  return null;
+}

package/src/shared/lib/models/client.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Shared client for GET /api/models. Dedupes concurrent callers onto a single
+ * in-flight request and caches the result for 60s (mirroring the server-side
+ * cache TTL), so mounting ChatInput + ModelDropdown together costs one fetch.
+ */
+
+import type { AIModelOption, ModelsData } from '@/shared/types';
+
+const CACHE_TTL_MS = 60_000;
+
+/** GET /api/models response: ModelsData (real mode) + mock-mode extras. */
+export type ModelsResponse = ModelsData & { selectedModel?: AIModelOption };
+
+let inFlight: Promise<ModelsResponse> | null = null;
+let cached: { data: ModelsResponse; expiresAt: number } | null = null;
+
+export function fetchModelsData(): Promise<ModelsResponse> {
+  if (cached && cached.expiresAt > Date.now()) return Promise.resolve(cached.data);
+  if (inFlight) return inFlight;
+
+  inFlight = fetch('/api/models')
+    .then((res) => (res.ok ? res.json() : Promise.reject(new Error(`GET /api/models failed: ${res.status}`))))
+    .then((data: ModelsResponse) => {
+      cached = { data, expiresAt: Date.now() + CACHE_TTL_MS };
+      return data;
+    })
+    .finally(() => {
+      inFlight = null;
+    });
+
+  return inFlight;
+}
+
+export function invalidateModelsCache(): void {
+  cached = null;
+}
+
+export function notifyModelsUpdated(): void {
+  cached = null;
+  window.dispatchEvent(new CustomEvent('omp:models-updated'));
+}
+
+export function subscribeModelsUpdated(handler: () => void): () => void {
+  window.addEventListener('omp:models-updated', handler);
+  return () => window.removeEventListener('omp:models-updated', handler);
+}

package/src/shared/lib/models/identity.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Catalog model identity.
+ *
+ * A model id is NOT unique on its own: the omp registry exposes the same id
+ * through several providers (`deepseek-v4-flash` exists under both `deepseek`
+ * and `kenari`, `deepseek-v4-pro` likewise, …). Keying a lookup, a selection or
+ * a mutation on the id alone resolves to whichever provider comes first —
+ * hovering one row highlights the other provider's row, and toggling a
+ * favourite or a thinking preset mutates the wrong model.
+ *
+ * `modelKey` is the single composite identity every lookup/map/React key must
+ * agree on, so the pieces cannot drift apart.
+ */
+export function modelKey(model: { provider: string; id: string } | null | undefined): string {
+  return model ? `${model.provider}:${model.id}` : '';
+}

package/src/shared/lib/models/provider-cleanup.ts

@@ -0,0 +1,20 @@
+import type { ProviderItem, ProviderModel } from '@/shared/types';
+
+const LEGACY_FALLBACK_ID = /^model-\d+-(?:1|2)$/;
+
+export function isKenariProvider(provider: Pick<ProviderItem, 'name' | 'slug' | 'baseUrl'>): boolean {
+  const identity = `${provider.name} ${provider.slug} ${provider.baseUrl || ''}`.toLowerCase();
+  return identity.includes('kenari');
+}
+
+export function removeLegacyKenariModels(
+  provider: Pick<ProviderItem, 'name' | 'slug' | 'baseUrl'>,
+  models: ProviderModel[],
+): ProviderModel[] {
+  if (!isKenariProvider(provider)) return models;
+  return models.filter((model) => {
+    const name = model.name.trim().toLowerCase();
+    const isFallbackName = name === 'kenari default model' || name === 'kenari fast / flash';
+    return !(LEGACY_FALLBACK_ID.test(model.id) && isFallbackName);
+  });
+}

package/src/shared/lib/models/provider-connection.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Client writes for the provider settings. Two concerns share one endpoint: the
+ * chamber-local overlay (per-model visibility + sampling config) and the
+ * omp-native connect/disconnect flag. Both reshape the chat model picker, so
+ * both notify it only AFTER the server confirmed the write — notifying first
+ * would re-cache the pre-mutation list for another 60s.
+ */
+
+import type { ProviderItem } from '@/shared/types';
+import { notifyModelsUpdated } from '@/shared/lib/models/client';
+
+const PROVIDERS_ENDPOINT = '/api/settings/providers';
+
+async function postProviders(body: unknown): Promise<ProviderItem[] | null> {
+  const response = await fetch(PROVIDERS_ENDPOINT, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  const data = (await response.json()) as { providers?: unknown; error?: string };
+  if (!response.ok) {
+    throw new Error(data?.error || `Providers request failed (HTTP ${response.status})`);
+  }
+  notifyModelsUpdated();
+  return Array.isArray(data.providers) ? (data.providers as ProviderItem[]) : null;
+}
+
+/** Stores the per-model overlay (visibility, sampling config) and refreshes the picker. */
+export function saveProviderOverlay(providers: ProviderItem[]): Promise<ProviderItem[] | null> {
+  return postProviders({ providers });
+}
+
+/** Flips a provider in omp's own config.yml disabledProviders list. */
+export function setProviderEnabled(slug: string, enabled: boolean): Promise<ProviderItem[] | null> {
+  return postProviders(enabled ? { enableProvider: slug } : { disableProvider: slug });
+}

package/src/shared/lib/models/provider-label.ts

@@ -0,0 +1,40 @@
+/**
+ * Pure provider-slug → display-label helpers (theme-independent, no React).
+ */
+
+/** Shape of the per-provider info carried by `ModelsData.connectedProviders`. */
+export type ProviderNameInfo = { id: string; name: string; disabled: boolean };
+
+/**
+ * Title-case a provider slug like `kenari` → `Kenari`, `command-code` →
+ * `Command Code`, `openai_codex` → `Openai Codex`. Empty slugs return an empty
+ * label so callers can omit the provider metadata item.
+ */
+export function titleCaseProviderSlug(slug: string): string {
+  if (!slug.trim()) return '';
+  return slug
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+/**
+ * Resolve a provider slug to a human label: prefer the connected-provider
+ * display name when the slug matches one, otherwise title-case the slug.
+ */
+export function providerLabel(slug: string, names: Record<string, string> = {}): string {
+  if (!slug.trim()) return '';
+  const known = names[slug];
+  return known?.trim() ? known : titleCaseProviderSlug(slug);
+}
+
+/** Build a slug → display-name map from `/api/models` `connectedProviders`. */
+export function providerNamesFromConnected(
+  connectedProviders: readonly ProviderNameInfo[] | undefined,
+): Record<string, string> {
+  if (!connectedProviders?.length) return {};
+  return Object.fromEntries(
+    connectedProviders.filter((p) => p.name?.trim()).map((p): [string, string] => [p.id, p.name]),
+  );
+}

package/src/shared/lib/models/provider-models.ts

@@ -0,0 +1,97 @@
+/**
+ * Auto-fetch helpers for the providers settings: remote model listing via
+ * POST /api/settings/provider-models, and the add-only merge — existing
+ * models are never removed or modified, only unknown ids get appended.
+ */
+
+import type { ProviderModel } from '@/shared/types';
+import { notifyModelsUpdated } from '@/shared/lib/models/client';
+
+export interface ProviderModelsFetchResult {
+  ok: boolean;
+  models?: ProviderModel[];
+  error?: string;
+  omp?: { written: boolean; addedCount: number; backfilledCount: number; reason?: string };
+}
+
+export async function fetchProviderModelsRemote(
+  baseUrl: string,
+  apiKey?: string,
+  providerSlug?: string,
+  persistToOmp = false,
+): Promise<ProviderModelsFetchResult> {
+  try {
+    const response = await fetch('/api/settings/provider-models', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ baseUrl, apiKey, providerSlug, persistToOmp }),
+    });
+    const data = await response.json() as ProviderModelsFetchResult;
+    if (!response.ok) {
+      return { ok: false, error: data?.error || `Request failed (HTTP ${response.status})` };
+    }
+    return data;
+  } catch (error) {
+    return {
+      ok: false,
+      error: error instanceof Error ? error.message : 'Network error while fetching models',
+    };
+  }
+}
+
+export interface ProviderModelsMergeResult {
+  merged: ProviderModel[];
+  added: ProviderModel[];
+  addedCount: number;
+}
+
+/**
+ * Existing entries pass through untouched (visibility/config survive); the
+ * chat model catalog is synced from the newly added entries only.
+ */
+export function mergeProviderModels(
+  existing: ProviderModel[],
+  incoming: ProviderModel[],
+): ProviderModelsMergeResult {
+  const known = new Set(existing.map((model) => model.id));
+  const added: ProviderModel[] = [];
+  for (const model of incoming) {
+    if (!model.id || known.has(model.id)) continue;
+    known.add(model.id);
+    added.push({ ...model });
+  }
+  return { merged: [...existing, ...added], added, addedCount: added.length };
+}
+
+export async function syncProviderModelsToCatalog(
+  providerName: string,
+  models: ProviderModel[],
+): Promise<void> {
+  try {
+    await Promise.all(
+      models.map((model) =>
+        fetch('/api/models', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            actionType: 'addModel',
+            model: {
+              id: model.id,
+              name: model.name,
+              provider: providerName,
+              contextWindow: model.contextWindow?.split(' ')[0] || '128K',
+              thinkingLevel: 'Default',
+              isFavorite: true,
+              capabilities: ['Tool calling', 'Reasoning'],
+              inputFormats: ['text'],
+              outputFormats: ['text'],
+            },
+          }),
+        }),
+      ),
+    );
+    notifyModelsUpdated();
+  } catch (error) {
+    console.error('Failed to sync provider models to catalog:', error);
+  }
+}

package/src/shared/lib/models/provider-presets.ts

@@ -0,0 +1,29 @@
+import type { PresetProviderOption, ProviderItem } from '@/shared/types/settings/provider';
+
+export function buildAvailableProviderPresets(
+  providers: ProviderItem[],
+  presets: PresetProviderOption[],
+): PresetProviderOption[] {
+  const connectedSlugs = new Set(
+    providers
+      .filter((provider) => provider.status === 'connected')
+      .map((provider) => provider.slug.trim().toLowerCase()),
+  );
+  const seenSlugs = new Set<string>();
+  const disconnectedProviders = providers
+    .filter((provider) => provider.status !== 'connected')
+    .map((provider) => ({
+      id: provider.slug,
+      name: provider.name,
+      slug: provider.slug,
+      icon: provider.icon,
+      defaultUrl: provider.baseUrl || 'https://',
+    }));
+
+  return [...presets, ...disconnectedProviders].filter((preset) => {
+    const slug = preset.slug.trim().toLowerCase();
+    if (connectedSlugs.has(slug) || seenSlugs.has(slug)) return false;
+    seenSlugs.add(slug);
+    return true;
+  });
+}