zidane-ui 9.0.4 → 9.1.3

package/src/settings/sections/extensions/ExtensionOptionsSection.tsx

@@ -1,743 +0,0 @@
-/**
- * The options and action rows the enabled extensions declare, under
- * Settings › Extensions: `SettingsHost.extensions.configSchema` and
- * `actions`, values on `Settings.extensionConfig`. Booleans render as a
- * switch, enums cycle (like the choice rows), numbers and strings get a free
- * input committing on blur or Enter, `model` items a picker row over the
- * composer's catalog (chips and a `ModelListPicker`; with no catalog, the
- * free input, as in the TUI). Display is optimistic: the agent re-validates
- * default-first through the core resolver.
- *
- * Action rows run on the host (`runAction`); passive `actionStatuses`
- * probes decorate a row with no run going. As the TUI's `runConfigAction`:
- * one run at a time, a result yields back to the probe (8s, errors 20s), and
- * every settle probes all rows again (sibling actions often reflect the same
- * service).
- */
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
-import type { WireExtensionConfigItem, WireExtensionConfigSchema } from 'zidane';
-import type { Settings } from 'zidane/chat';
-
-import {
-  FormSection,
-  HostRow,
-  INPUT_CLASS,
-  MetaChip,
-  ROW_BUTTON_CLASS,
-  ROW_CLASS,
-  RowText,
-  Switch,
-} from '../../../components/Form';
-import { IconButton } from '../../../components/IconButton';
-import { LoadError } from '../../../components/LoadError';
-import { SegmentSpinner } from '../../../components/SegmentSpinner';
-import { BTN_SECONDARY } from '../../../components/button';
-import { useComposerModelName, useModelCatalog } from '../../../chat/composer/use-composer-stores';
-import type { SettingsSearchHit } from '../../headless/search';
-import type {
-  SettingsExtensionAction,
-  SettingsExtensionActionStatus,
-  SettingsResource,
-} from '../../headless/sections-host';
-import { useSettings, useSettingsHost } from '../../SettingsProvider';
-import { useSettingsResource } from '../shared/catalog';
-import { useSectionLabels } from '../use-section-labels';
-import { ModelListPicker, type ModelListEntry } from '../models/ModelListPicker';
-import { DEFAULT_EXTENSION_OPTIONS_LABELS, type ExtensionOptionsLabels } from './options-labels';
-
-/** The extension options' strings, overridable through `LabelsProvider`. */
-export function useExtensionOptionsLabels(): ExtensionOptionsLabels {
-  return useSectionLabels(DEFAULT_EXTENSION_OPTIONS_LABELS);
-}
-
-type ConfigValue = boolean | number | string;
-
-const NO_ACTIONS: readonly SettingsExtensionAction[] = [];
-
-/** The options schema and action rows of a folder, read through the host (`null`: none to read). */
-function useExtensionOptionResources(cwd: string | null) {
-  const host = useSettingsHost().extensions;
-  const schemaResource = useMemo(() => (cwd && host?.configSchema ? host.configSchema(cwd) : null), [cwd, host]);
-  const actionsResource = useMemo(() => (cwd && host?.actions ? host.actions(cwd) : null), [cwd, host]);
-  return {
-    schemaResource,
-    actionsResource,
-    schema: useSettingsResource(schemaResource),
-    actions: useSettingsResource(actionsResource),
-  };
-}
-
-/**
- * The extension options and actions of a folder as search hits on the
- * Extensions section (`SettingsShell`'s `extraSearch`).
- *
- * @param cwd - The folder (`null`: none).
- * @param section - The section the hits open. Default: `extensions`.
- */
-export function useExtensionOptionsSearch(cwd: string | null, section = 'extensions'): SettingsSearchHit[] {
-  const { schema, actions } = useExtensionOptionResources(cwd);
-  return useMemo(
-    () => [
-      ...(schema.data?.items ?? []).map((item) => ({
-        section,
-        label: `${item.extension}: ${item.label}`,
-        description: item.description ?? '',
-      })),
-      ...(actions.data ?? NO_ACTIONS).map((action) => ({
-        section,
-        label: `${action.extension}: ${action.label}`,
-        description: action.description ?? '',
-      })),
-    ],
-    [schema.data, actions.data, section],
-  );
-}
-
-/** Props for {@link ExtensionOptionsSection}. */
-export interface ExtensionOptionsSectionProps {
-  /** The folder whose enabled extensions' options show (`null`: none). */
-  cwd: string | null;
-  /** Whether the section is on screen: the passive probes run only then. Default: true. */
-  visible?: boolean;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * The enabled extensions' options and action rows for `cwd` (an
- * `ExtensionsSection`'s children), or why there are none.
- *
- * @param props - The folder, whether it shows, `className` and `style`.
- */
-export function ExtensionOptionsSection({ cwd, visible = true, className, style }: ExtensionOptionsSectionProps) {
-  const l = useExtensionOptionsLabels();
-  const { settings, setSetting } = useSettings();
-  const { schemaResource, actionsResource, schema, actions } = useExtensionOptionResources(cwd);
-  const values = settings.extensionConfig;
-  // One value under `extensionConfig[ext][key]`, or an action's already-sanitized patch in one write.
-  const writeMany = useCallback(
-    (ext: string, patch: Record<string, ConfigValue>) => {
-      const prev = values ?? {};
-      setSetting('extensionConfig', { ...prev, [ext]: { ...(prev[ext] ?? {}), ...patch } });
-    },
-    [values, setSetting],
-  );
-  const write = useCallback(
-    (ext: string, key: string, value: ConfigValue) => writeMany(ext, { [key]: value }),
-    [writeMany],
-  );
-  const list = actions.data ?? NO_ACTIONS;
-  const failed: { resource: SettingsResource<unknown>; error: NonNullable<typeof schema.error> } | null =
-    schema.error && schemaResource
-      ? { resource: schemaResource, error: schema.error }
-      : actions.error && actionsResource
-        ? { resource: actionsResource, error: actions.error }
-        : null;
-  if (schema.data && (schema.data.items.length > 0 || list.length > 0)) {
-    return (
-      <div className={className} style={style}>
-        <ExtensionOptionRows
-          schema={schema.data}
-          actions={list}
-          values={values}
-          cwd={cwd}
-          visible={visible}
-          onWrite={write}
-          onWriteMany={writeMany}
-        />
-      </div>
-    );
-  }
-  if (failed) {
-    return (
-      <LoadError
-        className={className ? `px-1 ${className}` : 'px-1'}
-        style={style}
-        onRetry={() => void failed.resource.refresh()}
-      >
-        {l.extensionOptionsFailed(failed.error)}
-      </LoadError>
-    );
-  }
-  return (
-    <p className={`text-xs text-[var(--zg-text-muted)] px-1 m-0${className ? ` ${className}` : ''}`} style={style}>
-      {l.extensionOptionsNone}
-    </p>
-  );
-}
-
-interface ExtConfigCategory {
-  id: string;
-  label: string;
-  items: WireExtensionConfigItem[];
-  actions: SettingsExtensionAction[];
-}
-
-interface ExtConfigGroup {
-  ext: string;
-  categories: ExtConfigCategory[];
-}
-
-/** How long a run's message outranks the live probe (errors linger longer). */
-const ACTION_DONE_TTL_MS = 8_000;
-const ACTION_ERROR_TTL_MS = 20_000;
-
-interface ActionRunState {
-  ext: string;
-  key: string;
-  state: 'busy' | 'done' | 'error';
-  text?: string;
-}
-
-function ExtensionOptionRows({
-  schema,
-  actions,
-  values,
-  cwd,
-  visible,
-  onWrite,
-  onWriteMany,
-}: {
-  schema: WireExtensionConfigSchema;
-  actions: readonly SettingsExtensionAction[];
-  values: Settings['extensionConfig'];
-  cwd: string | null;
-  visible: boolean;
-  onWrite: (ext: string, key: string, value: ConfigValue) => void;
-  /** One write for an action's sanitized config patch. */
-  onWriteMany: (ext: string, patch: Record<string, ConfigValue>) => void;
-}) {
-  const host = useSettingsHost().extensions;
-  // The catalog only when the schema declares a `model` item.
-  const hasModelItems = useMemo(() => schema.items.some((item) => item.type === 'model'), [schema]);
-  const models = useModelCatalog(hasModelItems ? null : [], cwd ?? undefined);
-  const modelCatalog = hasModelItems && !models.error ? models.catalog : null;
-  const modelCatalogFailed = hasModelItems && models.error !== null;
-  const groups = useMemo<ExtConfigGroup[]>(() => {
-    const catLabel = new Map(schema.categories.map((c) => [c.id, c.label]));
-    const byExt = new Map<string, Map<string, ExtConfigCategory>>();
-    const ensure = (ext: string, catId: string, label: string): ExtConfigCategory => {
-      let cats = byExt.get(ext);
-      if (!cats) {
-        cats = new Map();
-        byExt.set(ext, cats);
-      }
-      let cat = cats.get(catId);
-      if (!cat) {
-        cat = { id: catId, label, items: [], actions: [] };
-        cats.set(catId, cat);
-      }
-      return cat;
-    };
-    for (const item of schema.items) {
-      ensure(item.extension, item.category, catLabel.get(item.category) ?? item.category).items.push(item);
-    }
-    for (const action of actions) {
-      ensure(action.extension, action.category, action.categoryLabel).actions.push(action);
-    }
-    return [...byExt.entries()]
-      .sort(([a], [b]) => a.localeCompare(b))
-      .map(([ext, cats]) => ({ ext, categories: [...cats.values()] }));
-  }, [schema, actions]);
-
-  // Passive probes, keyed `ext:key`: read when the section shows and after a run settles; failures dropped.
-  const [probes, setProbes] = useState<Record<string, SettingsExtensionActionStatus>>({});
-  const [probeNonce, setProbeNonce] = useState(0);
-  const hasProbes = useMemo(() => actions.some((a) => a.hasStatus), [actions]);
-  const actionStatuses = host?.actionStatuses;
-
-  useEffect(() => {
-    if (!cwd || !visible || !hasProbes || !actionStatuses) return undefined;
-    let cancelled = false;
-    actionStatuses(cwd).then(
-      (next) => {
-        if (!cancelled) setProbes(next);
-      },
-      () => {
-        // A best-effort decoration.
-      },
-    );
-    return () => {
-      cancelled = true;
-    };
-  }, [cwd, visible, hasProbes, actionStatuses, probeNonce]);
-
-  // One run at a time, like the TUI; the ref guards double-clicks synchronously.
-  const [run, setRun] = useState<ActionRunState | null>(null);
-  const runBusyRef = useRef(false);
-
-  // A run's message is temporary: after the TTL it yields back to the live probe.
-  useEffect(() => {
-    if (!run || run.state === 'busy') return undefined;
-    const ttl = run.state === 'error' ? ACTION_ERROR_TTL_MS : ACTION_DONE_TTL_MS;
-    const id = setTimeout(() => {
-      setRun((current) => (current === run ? null : current));
-      setProbeNonce((n) => n + 1);
-    }, ttl);
-    return () => clearTimeout(id);
-  }, [run]);
-
-  const runAction = host?.runAction;
-  const onRun = useCallback(
-    (action: SettingsExtensionAction) => {
-      if (!cwd || !runAction || runBusyRef.current) return;
-      runBusyRef.current = true;
-      setRun({ ext: action.extension, key: action.key, state: 'busy' });
-      void (async () => {
-        try {
-          const result = await runAction(cwd, action.extension, action.key);
-          // The host already validated the patch against the schema.
-          if (result.config && Object.keys(result.config).length > 0) onWriteMany(action.extension, result.config);
-          setRun({ ext: action.extension, key: action.key, state: 'done', text: result.message });
-        } catch (err) {
-          setRun({
-            ext: action.extension,
-            key: action.key,
-            state: 'error',
-            text: (err as { detail?: string; message?: string }).detail ?? (err as Error).message,
-          });
-        } finally {
-          runBusyRef.current = false;
-        }
-        // Probe every row again: sibling actions often reflect the same service.
-        setProbeNonce((n) => n + 1);
-      })();
-    },
-    [cwd, runAction, onWriteMany],
-  );
-
-  return (
-    <>
-      {groups.map((group) => (
-        <FormSection key={group.ext} title={group.ext}>
-          {group.categories.map((cat) => (
-            <div key={`${group.ext}:${cat.id}`}>
-              {/* The implicit category (id === ext) echoes the section title: no header. */}
-              {cat.id !== group.ext && (
-                <div className="text-xs font-medium text-[var(--zg-text-muted)] px-3 pt-2.5 pb-0.5">{cat.label}</div>
-              )}
-              {cat.items.map((item) => (
-                <ExtConfigRow
-                  key={`${group.ext}:${item.key}`}
-                  item={item}
-                  value={currentExtValue(item, values?.[group.ext]?.[item.key])}
-                  modelCatalog={modelCatalog}
-                  modelCatalogFailed={modelCatalogFailed}
-                  onWrite={(v) => onWrite(group.ext, item.key, v)}
-                />
-              ))}
-              {runAction &&
-                cat.actions.map((action) => (
-                  <ExtActionRow
-                    key={`${group.ext}:${action.key}`}
-                    action={action}
-                    lifecycle={run && run.ext === action.extension && run.key === action.key ? run : null}
-                    probe={probes[`${action.extension}:${action.key}`] ?? null}
-                    anyBusy={run?.state === 'busy'}
-                    onRun={() => onRun(action)}
-                  />
-                ))}
-            </div>
-          ))}
-        </FormSection>
-      ))}
-    </>
-  );
-}
-
-/**
- * One action row — label + description left, live status line, and a Run
- * button. Run lifecycle (busy / result / error) outranks the passive probe,
- * exactly like the TUI's `ConfigActionRow`.
- */
-function ExtActionRow({
-  action,
-  lifecycle,
-  probe,
-  anyBusy,
-  onRun,
-}: {
-  action: SettingsExtensionAction;
-  lifecycle: ActionRunState | null;
-  probe: SettingsExtensionActionStatus | null;
-  /** Some action (possibly another row) is mid-run — one at a time. */
-  anyBusy: boolean;
-  onRun: () => void;
-}) {
-  const l = useExtensionOptionsLabels();
-  const lifecycleText = lifecycle?.state === 'busy' ? l.extensionOptionsRunningStatus : lifecycle?.text;
-  const statusText = lifecycleText ?? probe?.message;
-  const statusClass = lifecycle
-    ? lifecycle.state === 'error'
-      ? 'text-zg-danger'
-      : 'text-[var(--zg-text-muted)]'
-    : probe?.state === 'error'
-      ? 'text-zg-danger'
-      : 'text-[var(--zg-text-muted)]';
-
-  return (
-    <div className={ROW_CLASS}>
-      <div className="flex-1 min-w-0">
-        <RowText label={action.label} description={action.description} />
-        {statusText && <div className={`text-xs break-words ${statusClass}`}>{statusText}</div>}
-      </div>
-      <button type="button" onClick={onRun} disabled={anyBusy} className={BTN_SECONDARY}>
-        {lifecycle?.state === 'busy' ? (
-          <>
-            <SegmentSpinner size="xs" label={l.extensionOptionsRunning} />
-            {l.extensionOptionsRunning}
-          </>
-        ) : (
-          l.extensionOptionsRun
-        )}
-      </button>
-    </div>
-  );
-}
-
-function ExtConfigRow({
-  item,
-  value,
-  modelCatalog,
-  modelCatalogFailed,
-  onWrite,
-}: {
-  item: WireExtensionConfigItem;
-  value: ConfigValue;
-  modelCatalog: readonly ModelListEntry[] | null;
-  modelCatalogFailed: boolean;
-  onWrite: (value: ConfigValue) => void;
-}) {
-  if (item.type === 'boolean') {
-    return (
-      <button type="button" onClick={() => onWrite(!(value as boolean))} className={ROW_BUTTON_CLASS}>
-        <RowText label={item.label} description={item.description} />
-        <Switch on={value as boolean} />
-      </button>
-    );
-  }
-
-  if (item.type === 'enum') {
-    const options = item.options;
-    const current = options.find((o) => o.value === value);
-    const cycle = () => {
-      const idx = options.findIndex((o) => o.value === value);
-      const next = options[(idx + 1) % options.length];
-      if (next) {
-        onWrite(next.value);
-      }
-    };
-    return (
-      <button type="button" onClick={cycle} className={ROW_BUTTON_CLASS}>
-        <RowText label={item.label} description={item.description} />
-        <MetaChip tone="text" className="!h-6 !px-2.5">
-          {current?.label ?? String(value)}
-        </MetaChip>
-      </button>
-    );
-  }
-
-  if (item.type === 'model') {
-    // Degrade to the free string input when the catalog resolved empty or
-    // the fetch failed (headless host / nothing authed) — TUI parity.
-    const degraded = modelCatalogFailed || (modelCatalog !== null && modelCatalog.length === 0);
-    if (!degraded) {
-      return <ExtConfigModelRow item={item} value={String(value)} catalog={modelCatalog} onWrite={onWrite} />;
-    }
-  }
-
-  return <ExtConfigInputRow item={item} value={value} onWrite={onWrite} />;
-}
-
-// Label on top, control below: for multiline text fields that need width.
-const STACKED_ROW_CLASS = 'flex flex-col items-stretch gap-2 px-3 py-2';
-
-/**
- * Placeholder for free string / model inputs — the canonical
- * `ExtensionConfigStringItem` has no `placeholder` field, so derive one:
- * empty-default items read "Empty — <first sentence of the description>"
- * (clamped ~80 chars), non-empty defaults just echo the description.
- */
-function derivedPlaceholder(
-  item: Extract<WireExtensionConfigItem, { type: 'string' | 'model' }>,
-  l: ExtensionOptionsLabels,
-): string | undefined {
-  const desc = item.description?.trim();
-  if (!desc) {
-    return undefined;
-  }
-  const firstSentence = desc.split(/(?<=[.!?])\s+/)[0] ?? desc;
-  const text = item.default === '' ? l.extensionOptionsEmpty(firstSentence) : firstSentence;
-  return text.length > 80 ? `${text.slice(0, 79).trimEnd()}…` : text;
-}
-
-/** Split a stored model-config value (comma-separated ids) into clean ids. */
-function parseStoredModelIds(value: string): string[] {
-  return value
-    .split(',')
-    .map((s) => s.trim())
-    .filter((s) => s.length > 0);
-}
-
-/**
- * `type: 'model'` row — current value as id chips (or `(unset)` when empty,
- * matching the TUI's resting render), click opens the `ModelListPicker`
- * popover in place so Settings stays open. Persists the exact shape the TUI
- * writes — `ids.join(', ')` — which git-flow's `parseModelList` reader
- * splits/trims back, so TUI and GUI round-trip each other's values.
- */
-function ExtConfigModelRow({
-  item,
-  value,
-  catalog,
-  onWrite,
-}: {
-  item: Extract<WireExtensionConfigItem, { type: 'model' }>;
-  value: string;
-  catalog: readonly ModelListEntry[] | null;
-  onWrite: (value: string) => void;
-}) {
-  const [open, setOpen] = useState(false);
-  // The row the list hangs under, taken when it opens (a ref read during render would be stale).
-  const [anchor, setAnchor] = useState<HTMLDivElement | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const pickerRef = useRef<HTMLDivElement>(null);
-  const ids = useMemo(() => parseStoredModelIds(value), [value]);
-  const l = useExtensionOptionsLabels();
-  const modelName = useComposerModelName();
-
-  // Click outside the row + popover closes the picker.
-  useEffect(() => {
-    if (!open) {
-      return undefined;
-    }
-    const onDown = (e: MouseEvent) => {
-      const target = e.target as Node;
-      if (containerRef.current && !containerRef.current.contains(target) && !pickerRef.current?.contains(target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', onDown);
-    return () => document.removeEventListener('mousedown', onDown);
-  }, [open]);
-
-  return (
-    <div ref={containerRef} className="relative">
-      <HostRow>
-        <RowText label={item.label} description={item.description} />
-        <button
-          type="button"
-          data-row-control
-          onClick={() => {
-            setAnchor(containerRef.current);
-            setOpen((o) => !o);
-          }}
-          className="zg-press-subtle group flex items-center gap-1 flex-wrap justify-end max-w-[60%] bg-transparent border-0 p-0 cursor-pointer"
-          aria-haspopup="listbox"
-          aria-expanded={open}
-        >
-          {ids.length === 0 ? (
-            // "Nothing picked yet, click to choose": an affordance, not a
-            // value; hover brightens it like a button.
-            <MetaChip className="!h-6 !px-2.5 group-hover:!text-[var(--zg-text)]">{l.extensionOptionsUnset}</MetaChip>
-          ) : (
-            ids.map((id) => (
-              <MetaChip key={id} tone="text" className="!h-6 !px-2.5" title={id}>
-                {modelName(id)}
-              </MetaChip>
-            ))
-          )}
-        </button>
-        {ids.length > 0 && (
-          <IconButton
-            icon="i-ph-x"
-            label={l.extensionOptionsReset(item.label)}
-            title={l.extensionOptionsResetTitle}
-            size="sm"
-            onClick={() => {
-              onWrite(item.default);
-              setOpen(false);
-            }}
-          />
-        )}
-      </HostRow>
-      <ModelListPicker
-        ref={pickerRef}
-        open={open}
-        anchor={anchor}
-        catalog={catalog}
-        multi={item.multi === true}
-        selected={ids}
-        onPick={(next) => onWrite(next.join(', '))}
-        onClose={() => setOpen(false)}
-      />
-    </div>
-  );
-}
-
-function ExtConfigInputRow({
-  item,
-  value,
-  onWrite,
-}: {
-  // `model` items only land here as the degraded free-text fallback (no
-  // credentialed catalog) — same value shape as string; the canonical
-  // resolver validates against the live catalog agent-side.
-  item: Extract<WireExtensionConfigItem, { type: 'number' | 'string' | 'model' }>;
-  value: ConfigValue;
-  onWrite: (value: ConfigValue) => void;
-}) {
-  const l = useExtensionOptionsLabels();
-  const [draft, setDraft] = useState(String(value));
-  // Re-seed when the committed value changes underneath (a commit, an outside write). While the user
-  // types the value is unchanged, so this never clobbers input in progress.
-  const [seeded, setSeeded] = useState(value);
-  if (seeded !== value) {
-    setSeeded(value);
-    setDraft(String(value));
-  }
-
-  const commit = () => {
-    if (item.type === 'number') {
-      const n = Number(draft.trim());
-      if (!Number.isFinite(n)) {
-        setDraft(String(value));
-        return;
-      }
-      // Mirror core `clampExtensionConfigNumber` (src/extensions/config.ts):
-      // clamp to [min,max], snap to `step`, then re-clamp. Kept in lockstep so
-      // the same typed value persists identically from the TUI and the GUI
-      // (Settings.extensionConfig is shared user-level state).
-      let clamped = n;
-      if (item.min !== undefined) {
-        clamped = Math.max(item.min, clamped);
-      }
-      if (item.max !== undefined) {
-        clamped = Math.min(item.max, clamped);
-      }
-      if (item.step !== undefined && item.step > 0) {
-        const base = item.min ?? 0;
-        clamped = base + Math.round((clamped - base) / item.step) * item.step;
-        if (item.max !== undefined) {
-          clamped = Math.min(item.max, clamped);
-        }
-        if (item.min !== undefined) {
-          clamped = Math.max(item.min, clamped);
-        }
-      }
-      onWrite(clamped);
-      setDraft(String(clamped));
-      return;
-    }
-    // string — respect the pattern optimistically; reject (revert) on mismatch.
-    // (`model` items carry no pattern — free-form id, validated agent-side.)
-    if (item.type === 'string' && item.pattern) {
-      try {
-        if (!new RegExp(item.pattern).test(draft)) {
-          setDraft(String(value));
-          return;
-        }
-      } catch {
-        /* invalid author pattern → treat as no constraint */
-      }
-    }
-    onWrite(draft);
-  };
-
-  const placeholder = item.type === 'number' ? undefined : derivedPlaceholder(item, l);
-
-  if (item.type === 'string' && item.multiline) {
-    // Stacked layout: a 160px-wide textarea beside the label is too cramped
-    // to read or write prose in, so the field takes the full row width below.
-    return (
-      <div className={STACKED_ROW_CLASS}>
-        <RowText label={item.label} description={item.description} />
-        <textarea
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onBlur={commit}
-          rows={4}
-          placeholder={placeholder}
-          aria-label={item.label}
-          className="zg-well w-full px-2.5 py-2 text-zg-ui leading-relaxed resize-y placeholder:text-[var(--zg-text-subtle)]"
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className={ROW_CLASS}>
-      <RowText label={item.label} description={item.description} />
-      <input
-        aria-label={item.label}
-        type={item.type === 'number' ? 'number' : 'text'}
-        value={draft}
-        onChange={(e) => setDraft(e.target.value)}
-        onBlur={commit}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            e.currentTarget.blur();
-          }
-        }}
-        placeholder={placeholder}
-        {...(item.type === 'number'
-          ? {
-              ...(item.min !== undefined ? { min: item.min } : {}),
-              ...(item.max !== undefined ? { max: item.max } : {}),
-              ...(item.step !== undefined ? { step: item.step } : {}),
-            }
-          : {})}
-        className={`${INPUT_CLASS} !w-40 shrink-0`}
-      />
-    </div>
-  );
-}
-
-/**
- * Optimistic renderer-side display value — mirrors the core resolver's
- * default-first checks (type, number range, string pattern, enum membership)
- * so the row never shows a value the agent would actually ignore. The author
- * `validate` can't cross the IPC boundary, so it's the one check not mirrored
- * here; the authoritative default-first read still happens agent-side via the
- * core resolver.
- */
-function currentExtValue(item: WireExtensionConfigItem, persisted: unknown): ConfigValue {
-  switch (item.type) {
-    case 'boolean':
-      return typeof persisted === 'boolean' ? persisted : item.default;
-    case 'number':
-      return typeof persisted === 'number' &&
-        Number.isFinite(persisted) &&
-        (item.min === undefined || persisted >= item.min) &&
-        (item.max === undefined || persisted <= item.max)
-        ? persisted
-        : item.default;
-    case 'string': {
-      if (typeof persisted !== 'string') {
-        return item.default;
-      }
-      if (item.pattern) {
-        try {
-          // A broken author pattern is treated as "no constraint" (matches core).
-          if (!new RegExp(item.pattern).test(persisted)) {
-            return item.default;
-          }
-        } catch {
-          /* invalid author pattern → no constraint */
-        }
-      }
-      return persisted;
-    }
-    case 'enum':
-      return typeof persisted === 'string' && item.options.some((o) => o.value === persisted)
-        ? persisted
-        : item.default;
-    case 'model':
-      // Deliberately catalog-UNvalidated (matches core): a stored id whose
-      // provider is temporarily unauthed must survive, not silently reset.
-      return typeof persisted === 'string' ? persisted : item.default;
-  }
-}