auricui-skill 0.0.0-stage → 0.1.2

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/settings/CustomServices.tsx

@@ -0,0 +1,104 @@
+/**
+ * Settings → Services, under which service makes each kind of media: the person's custom services. Any service at an
+ * address (one they run on this computer, their own voice, an API not listed), with its key and their words on what it
+ * does and how it is called (or where its docs are). OpenFilm does not call one itself: their agent reads those words
+ * in `openfilm get` and calls it with `openfilm get call` (studio/server/custom-services.mjs).
+ */
+import React from 'react';
+import { Plus, Server } from 'lucide-react';
+import { useT } from '@/i18n';
+import type { OwnService, OwnServiceFields, ProvidersHook } from '@/lib/providers';
+import { SettingsButton, SettingsField, SettingsGroup, SettingsInset, SettingsItem, SettingsStatus, settingsError, settingsLink } from './ui';
+
+/** Whether the last change that failed was to one of the person's own services (it is said under its form). */
+export const customProblem = (hook: ProvidersHook) => hook.problemFor === 'custom' || Boolean(hook.state?.custom.some((s) => s.id === hook.problemFor));
+
+/** The person's own services: each with what it does and how it is called, and a form to add one. */
+export function CustomServices({ hook }: { hook: ProvidersHook }) {
+  const t = useT();
+  const services = hook.state?.custom ?? [];
+  const [open, setOpen] = React.useState<string | null>(null);
+  if (!hook.state) return null;
+  return (
+    <SettingsGroup title={t('settings.providers.own.title')} footnote={t('settings.providers.own.note')}>
+      {services.map((service) => (
+        <SettingsItem
+          key={service.id}
+          mark={<Server size={16} />}
+          title={service.name}
+          badge={service.last4 ? <SettingsStatus tone="muted"><span className="font-mono tabular-nums">•••• {service.last4}</span></SettingsStatus> : null}
+          description={(
+            <>
+              <span className="font-mono text-[13px] text-[var(--text-faint)]">{service.url}</span>
+              {service.note ? <span className="mt-0.5 block whitespace-pre-line">{service.note}</span> : null}
+            </>
+          )}
+          control={open === service.id ? null : (
+            <>
+              <SettingsButton variant="quiet" disabled={hook.busy === service.id} onClick={() => void hook.removeService(service.id)}>{t('settings.providers.own.remove')}</SettingsButton>
+              <SettingsButton onClick={() => setOpen(service.id)}>{t('settings.providers.own.edit')}</SettingsButton>
+            </>
+          )}
+        >
+          {open === service.id ? <ServiceForm hook={hook} service={service} onDone={() => setOpen(null)} /> : null}
+        </SettingsItem>
+      ))}
+      {open === '' ? (
+        <div className="py-4"><ServiceForm hook={hook} service={null} onDone={() => setOpen(null)} /></div>
+      ) : (
+        <div className="py-4">
+          <SettingsButton onClick={() => setOpen('')}><Plus size={15} strokeWidth={2} />{t('settings.providers.own.add')}</SettingsButton>
+        </div>
+      )}
+    </SettingsGroup>
+  );
+}
+
+/**
+ * A service's name, address, key and what it does (how it is called, or its docs): added (`service` null) or changed.
+ * Where the key goes is not asked: the agent writes {key} where the service's docs want it, else it goes as
+ * `Authorization: Bearer` (a service set up when this was asked keeps its answer).
+ */
+function ServiceForm({ hook, service, onDone }: { hook: ProvidersHook; service: OwnService | null; onDone: () => void }) {
+  const t = useT();
+  const [fields, setFields] = React.useState<OwnServiceFields>({ name: service?.name ?? '', url: service?.url ?? '', note: service?.note ?? '' });
+  const [key, setKey] = React.useState('');
+  const [dropKey, setDropKey] = React.useState(false);
+  const busy = hook.busy === (service?.id ?? 'custom');
+  const set = (name: keyof OwnServiceFields) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setFields((f) => ({ ...f, [name]: e.target.value }));
+  const save = async () => {
+    if (busy || !fields.name.trim() || !fields.url.trim()) return;
+    /* changed without a key typed: the one it has stays (unless taken away) */
+    const sent: OwnServiceFields = { ...fields, ...(key.trim() ? { key: key.trim() } : dropKey || !service ? { key: '' } : {}) };
+    if (await hook.saveService(service?.id ?? null, sent)) onDone();
+  };
+  const label = (text: string, field: React.ReactNode) => (
+    <label className="flex flex-col gap-1.5 text-[13.5px] text-[var(--text-muted)]">{text}{field}</label>
+  );
+  return (
+    /* under its row, it lines up with the row's words; a new one stands on its own */
+    <form className={service ? 'pl-[52px]' : ''} onSubmit={(e) => { e.preventDefault(); void save(); }} onKeyDown={(e) => { if (e.key === 'Escape') { e.preventDefault(); onDone(); } }}>
+      <SettingsInset>
+        {label(t('settings.providers.own.name'), <SettingsField autoFocus value={fields.name} onChange={set('name')} placeholder={t('settings.providers.own.namePlaceholder')} />)}
+        {label(t('settings.providers.own.url'), <SettingsField value={fields.url} onChange={set('url')} placeholder="http://localhost:8000" spellCheck={false} className="font-mono placeholder:font-sans" />)}
+        {label(t('settings.providers.own.key'), (
+          <SettingsField type="password" autoComplete="off" spellCheck={false} value={key} onChange={(e) => { setKey(e.target.value); setDropKey(false); }}
+            placeholder={service?.last4 && !dropKey ? t('settings.providers.own.keyKeep').replaceAll('{last4}', service.last4) : t('settings.providers.own.keyOptional')}
+            className="font-mono placeholder:font-sans" />
+        ))}
+        {service?.last4 && !key && !dropKey ? (
+          <button type="button" className={`${settingsLink} self-start text-[13.5px]`} onClick={() => setDropKey(true)}>{t('settings.providers.own.removeKey')}</button>
+        ) : null}
+        {label(t('settings.providers.own.what'), (
+          <textarea value={fields.note} onChange={set('note')} rows={4} maxLength={2000} placeholder={t('settings.providers.own.whatPlaceholder')}
+            className="w-full min-w-0 resize-y rounded-[8px] border border-[var(--border)] bg-transparent px-3 py-2 text-[14px] leading-[1.5] text-[var(--text)] outline-none transition placeholder:text-[var(--text-faint)] hover:border-[var(--border-strong)] focus:border-[var(--text-muted)]" />
+        ))}
+        {hook.problem && hook.problemFor === (service?.id ?? 'custom') ? <p className={settingsError} role="alert">{hook.problem}</p> : null}
+        <div className="flex justify-end gap-2">
+          <SettingsButton variant="quiet" onClick={onDone}>{t('settings.providers.cancel')}</SettingsButton>
+          <SettingsButton type="submit" variant="primary" disabled={busy || !fields.name.trim() || !fields.url.trim()}>{t('settings.providers.save')}</SettingsButton>
+        </div>
+      </SettingsInset>
+    </form>
+  );
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/settings/DiagnosticsGroup.tsx

@@ -0,0 +1,202 @@
+/**
+ * Settings → Developer's Diagnostics, for when something does not work and a person wants to say why: the report to
+ * copy (short: `openfilm doctor` with the last week's problems, this browser, the desktop app's agents; lib/diagnostics),
+ * the diagnostic file to export (the rest: the logs and the failed turns, zipped; server/diagnostics.mjs), and the
+ * problems of the last two weeks, newest first.
+ */
+import React from 'react';
+import { Check, Copy, Download, Loader2 } from 'lucide-react';
+import { useLanguage, useT } from '@/i18n';
+import { studioHost } from '@/lib/host';
+import { fullReport, pageFacts } from '@/lib/diagnostics';
+import { api, type StudioProblem } from '@/api';
+import { SettingsButton, SettingsGroup, SettingsInset, SettingsItem, SettingsSwitch } from './ui';
+
+/** The report as text, made now: the computer's (with its problems), this browser's, and the app's agents. */
+async function makeReport(): Promise<string> {
+  const [computer, app] = await Promise.all([api.doctor(), studioHost?.agents?.report?.().catch(() => null) ?? null]);
+  return fullReport(computer.text, pageFacts(), app);
+}
+
+/**
+ * Copying the report: its state, and the report itself when the browser does not let the page copy (an agent's
+ * preview pane may not), to select by hand.
+ */
+export function useReportCopy() {
+  const [state, setState] = React.useState<'idle' | 'making' | 'copied' | 'failed'>('idle');
+  const [shown, setShown] = React.useState<string | null>(null);
+  const copy = () => {
+    setState('making');
+    void makeReport()
+      .then((text) => navigator.clipboard.writeText(text).then(() => { setShown(null); setState('copied'); }, () => { setShown(text); setState('idle'); }))
+      .catch(() => setState('failed'));
+  };
+  return { state, shown, copy };
+}
+
+/** The button that copies the report, as Settings → Developer and an agent with a problem (Settings → Agents) show it. */
+export function CopyReportButton({ copying, variant = 'default' }: { copying: ReturnType<typeof useReportCopy>; variant?: 'default' | 'quiet' }) {
+  const t = useT();
+  const { state, copy } = copying;
+  return (
+    <SettingsButton variant={variant} disabled={state === 'making'} onClick={copy}>
+      {state === 'making' ? <Loader2 size={15} className="animate-spin" aria-hidden /> : state === 'copied' ? <Check size={15} aria-hidden /> : <Copy size={15} aria-hidden />}
+      {state === 'making' ? t('settings.report.making') : state === 'copied' ? t('settings.report.copied') : t('settings.report.copy')}
+    </SettingsButton>
+  );
+}
+
+/** The report to select, where the page could not copy it. */
+export function ReportText({ text }: { text: string }) {
+  const t = useT();
+  return (
+    <textarea readOnly value={text} rows={12} aria-label={t('settings.report.title')} onFocus={(e) => e.currentTarget.select()}
+      className="mb-2 w-full resize-y rounded-md border border-[var(--border)] bg-[var(--surface-2)] p-2 font-mono text-[11.5px] leading-snug text-[var(--text)]" />
+  );
+}
+
+/** The report as a link to copy it, under an agent's problem (Settings → Agents). */
+export function ReportLink() {
+  const t = useT();
+  const copying = useReportCopy();
+  return (
+    <>
+      <p className="text-[13.5px] leading-relaxed text-[var(--text-muted)]">
+        <button type="button" onClick={copying.copy} disabled={copying.state === 'making'} title={t('settings.report.hint')}
+          className="underline underline-offset-2 hover:text-[var(--text)] disabled:opacity-60">
+          {copying.state === 'making' ? t('settings.report.making') : copying.state === 'copied' ? t('settings.report.copied') : t('settings.report.copy')}
+        </button>
+        {copying.state === 'failed' ? ` ${t('settings.report.failed')}` : null}
+      </p>
+      {copying.shown ? <ReportText text={copying.shown} /> : null}
+    </>
+  );
+}
+
+/**
+ * What an exported file holds, in words, from the names of what went in (server/diagnostics.mjs): each part once, the
+ * logs and the turns counted.
+ */
+function fileParts(files: string[], conversations: boolean, t: (key: string) => string): string[] {
+  const count = (prefix: string) => files.filter((f) => f.startsWith(prefix)).length;
+  const logs = count('logs/');
+  const turns = count('turns/');
+  return [
+    ...(files.includes('report.txt') ? [t('settings.report.partReport')] : []),
+    ...(files.includes('problems.jsonl') ? [t('settings.report.partProblems')] : []),
+    ...(logs ? [t('settings.report.partLogs').replace('{count}', String(logs))] : []),
+    ...(turns ? [t(conversations ? 'settings.report.partTurnsWords' : 'settings.report.partTurns').replace('{count}', String(turns))] : []),
+    ...(files.includes('agents/codex.txt') ? [t('settings.report.partCodex')] : []),
+  ];
+}
+
+/* what turning on "Include what was said" adds, said in full before it is on */
+const ADDS = ['settings.report.adds1', 'settings.report.adds2', 'settings.report.adds3', 'settings.report.adds4', 'settings.report.adds5'];
+
+/** How many problems show before "Show all". */
+const PROBLEMS_SHOWN = 5;
+
+export function DiagnosticsGroup() {
+  const t = useT();
+  const locale = useLanguage();
+  const copying = useReportCopy();
+  /* what was said in failed turns: off unless the person turns it on, and only after reading what it adds (`asking`) */
+  const [conversations, setConversations] = React.useState(false);
+  const [asking, setAsking] = React.useState(false);
+  const [exporting, setExporting] = React.useState<{ state: 'idle' | 'making' | 'failed' } | { state: 'done'; name: string; parts: string[] }>({ state: 'idle' });
+  const [problems, setProblems] = React.useState<StudioProblem[] | null>(null);
+  const [all, setAll] = React.useState(false);
+  React.useEffect(() => { void api.problems().then(setProblems, () => setProblems([])); }, []);
+
+  const exportFile = () => {
+    setExporting({ state: 'making' });
+    void makeReport()
+      .then((report) => api.exportDiagnostics(report, conversations))
+      .then((made) => setExporting({ state: 'done', name: made.path.split(/[\\/]/).pop() ?? made.path, parts: fileParts(made.files, made.conversations, t) }))
+      .catch(() => setExporting({ state: 'failed' }));
+  };
+
+  const when = (iso: string) => {
+    const at = new Date(iso);
+    return Number.isNaN(at.getTime()) ? iso : at.toLocaleString(locale, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+  };
+  const shown = problems ? (all ? problems : problems.slice(0, PROBLEMS_SHOWN)) : [];
+
+  return (
+    <SettingsGroup title={t('settings.report.group')}>
+      <SettingsItem
+        title={t('settings.report.title')}
+        description={copying.state === 'failed' ? t('settings.report.failed') : copying.shown ? t('settings.report.select') : t('settings.report.hint')}
+        control={<CopyReportButton copying={copying} />}
+      >
+        {copying.shown ? <ReportText text={copying.shown} /> : null}
+      </SettingsItem>
+      <SettingsItem
+        title={t('settings.report.conversations')}
+        description={conversations ? t('settings.report.conversationsOn') : t('settings.report.conversationsHint')}
+        control={(
+          <SettingsSwitch checked={conversations || asking} label={t('settings.report.conversations')}
+            onChange={(on) => { if (on) setAsking(true); else { setAsking(false); setConversations(false); } }} />
+        )}
+      >
+        {asking ? (
+          <SettingsInset>
+            <p className="text-[14px] font-medium text-[var(--text)]">{t('settings.report.addsTitle')}</p>
+            <ul className="flex list-disc flex-col gap-1 pl-5 text-[13.5px] leading-relaxed text-[var(--text)]">
+              {ADDS.map((key) => <li key={key}>{t(key)}</li>)}
+            </ul>
+            <p className="text-[13px] leading-relaxed text-[var(--text-muted)]">{t('settings.report.addsKept')}</p>
+            <p className="text-[13px] leading-relaxed text-[var(--warn)]">{t('settings.report.addsWho')}</p>
+            <div className="flex justify-end gap-1.5">
+              <SettingsButton variant="quiet" onClick={() => setAsking(false)}>{t('settings.report.addsNo')}</SettingsButton>
+              <SettingsButton onClick={() => { setAsking(false); setConversations(true); }}>{t('settings.report.addsYes')}</SettingsButton>
+            </div>
+          </SettingsInset>
+        ) : null}
+      </SettingsItem>
+      <SettingsItem
+        title={t('settings.report.export')}
+        description={exporting.state === 'failed' ? t('settings.report.exportFailed')
+          : exporting.state === 'done' ? t('settings.report.exported').replace('{name}', exporting.name)
+            : t('settings.report.exportHint')}
+        control={(
+          <SettingsButton disabled={exporting.state === 'making' || asking} onClick={exportFile}>
+            {exporting.state === 'making' ? <Loader2 size={15} className="animate-spin" aria-hidden /> : <Download size={15} aria-hidden />}
+            {exporting.state === 'making' ? t('settings.report.exporting') : t('settings.report.exportButton')}
+          </SettingsButton>
+        )}
+      >
+        {exporting.state === 'done' ? (
+          <div className="mb-2 text-[13px] leading-relaxed text-[var(--text-muted)]">
+            <p>{t('settings.report.exportedHas')}</p>
+            <ul className="list-disc pl-5">{exporting.parts.map((part) => <li key={part}>{part}</li>)}</ul>
+          </div>
+        ) : null}
+      </SettingsItem>
+      <SettingsItem
+        title={t('settings.report.problems')}
+        description={problems && !problems.length ? t('settings.report.noProblems') : t('settings.report.problemsHint')}
+      >
+        {shown.length ? (
+          <ul className="mb-2 flex flex-col gap-1.5">
+            {shown.map((p, i) => (
+              <li key={`${p.t}:${i}`} className="min-w-0 rounded-md bg-[var(--surface-2)] px-2.5 py-1.5 text-[12.5px] leading-snug">
+                <div className="flex gap-2 text-[var(--text-muted)]">
+                  <span className="shrink-0 tabular-nums">{when(p.t)}</span>
+                  <span className="truncate">{[p.agent ?? p.area, p.step].filter(Boolean).join(' · ')}</span>
+                </div>
+                <div className="break-words text-[var(--text)]">{p.what}</div>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        {problems && problems.length > PROBLEMS_SHOWN && !all ? (
+          <button type="button" onClick={() => setAll(true)}
+            className="mb-2 text-[13px] text-[var(--text-muted)] underline underline-offset-2 transition hover:text-[var(--text)]">
+            {t('settings.report.more').replace('{count}', String(problems.length))}
+          </button>
+        ) : null}
+      </SettingsItem>
+    </SettingsGroup>
+  );
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/settings/ModelsSection.tsx

@@ -0,0 +1,179 @@
+/**
+ * Settings → Services: which connected provider, and which of its models, makes each kind of media. One of the models
+ * of a provider the person has a key for ("ElevenLabs · Eleven v3"), or none, listed by the providers' names, none put
+ * first. Connecting a provider fills the kinds that have none, with its first model; the person changes any here.
+ * Under them, the person's custom services, which their agent calls itself (CustomServices).
+ */
+import React from 'react';
+import { Check, ChevronDown, ChevronRight } from 'lucide-react';
+import { useLanguage, useT } from '@/i18n';
+import { USE_VERBS, couldMake, offered, useProviders, type ProviderVerb, type ProvidersHook } from '@/lib/providers';
+import { Popover } from '@/components/Popover';
+import { ProviderMark } from './ProviderMark';
+import { SettingsButton, SettingsGroup, SettingsItem, SettingsPage, settingsError } from './ui';
+import { CustomServices, customProblem } from './CustomServices';
+
+/** One thing a kind of media can be made with: a provider and its model. */
+interface Choice {
+  value: string;
+  provider: string;
+  providerName: string;
+  name: string;
+  pick: { model?: string };
+}
+
+export function ModelsSection({ onConnect }: { onConnect: () => void }) {
+  const t = useT();
+  const hook = useProviders();
+  const providers = hook.state;
+  const anything = Boolean(providers?.providers.some((p) => p.source));
+
+  return (
+    <SettingsPage note={t('settings.models.desc')}>
+      {providers && !anything ? (
+        <SettingsGroup>
+          <SettingsItem description={t('settings.models.nothing')} title={t('settings.models.goConnect')}
+            control={<SettingsButton onClick={onConnect}>{t('settings.models.goConnect')}</SettingsButton>} />
+        </SettingsGroup>
+      ) : null}
+      {providers ? (
+        <SettingsGroup>
+          {USE_VERBS.filter((verb) => offered(providers, verb)).map((verb) => <ModelRow key={verb} verb={verb} hook={hook} onConnect={onConnect} />)}
+        </SettingsGroup>
+      ) : null}
+      <CustomServices hook={hook} />
+      {/* a custom service's problem is said under its form */}
+      {hook.problem && !customProblem(hook) ? <p className={settingsError}>{hook.problem}</p> : null}
+    </SettingsPage>
+  );
+}
+
+/** One kind of media and what makes it, picked from the connected providers' models. */
+function ModelRow({ verb, hook, onConnect }: { verb: ProviderVerb; hook: ProvidersHook; onConnect: () => void }) {
+  const t = useT();
+  const state = hook.state!;
+  const label = t(`settings.providers.verbs.${verb}`);
+  const chosen = state.use[verb] ?? '';
+
+  const choices: Choice[] = [];
+  for (const p of state.providers) {
+    if (!((p.source && p.verbs.includes(verb)) || p.id === chosen)) continue;
+    for (const m of p.models[verb] ?? []) choices.push({ value: `${p.id}:${m.id}`, provider: p.id, providerName: p.name, name: m.name, pick: { model: m.id } });
+  }
+  /* by the providers' names; each provider's models stay in its own order (the sort is stable) */
+  choices.sort((a, b) => a.providerName.localeCompare(b.providerName));
+  const firstOf = (id: string) => state.providers.find((p) => p.id === id)?.models[verb]?.[0]?.id;
+  const value = chosen ? `${chosen}:${state.model[verb] ?? firstOf(chosen) ?? ''}` : '';
+  const current = choices.find((c) => c.value === value);
+  /* nothing connected makes it: the providers that would, once connected */
+  const could = couldMake(state, verb);
+
+  return (
+    <SettingsItem
+      title={label}
+      description={t(`settings.models.about.${verb}`)}
+      control={(
+        <ModelPicker
+          label={label}
+          choices={choices}
+          current={current ?? null}
+          busy={hook.busy === verb}
+          could={could}
+          onConnect={onConnect}
+          onPick={(choice) => void hook.choose(verb, choice?.provider ?? '', choice?.pick)}
+        />
+      )}
+    />
+  );
+}
+
+/**
+ * The button showing what makes a kind of media, and the menu of every model it could be, by provider. With nothing
+ * connected that makes it, it names the providers that would and goes to connect one.
+ */
+function ModelPicker({ label, choices, current, busy, could, onConnect, onPick }: {
+  label: string;
+  choices: Choice[];
+  current: Choice | null;
+  busy: boolean;
+  /** the names of the providers, not connected, that make this kind of media */
+  could: string[];
+  onConnect: () => void;
+  onPick: (choice: Choice | null) => void;
+}) {
+  const t = useT();
+  const language = useLanguage();
+  const [open, setOpen] = React.useState(false);
+  const list = React.useRef<HTMLDivElement>(null);
+  const empty = choices.length === 0;
+  const groups = choices.reduce<{ provider: string; name: string; choices: Choice[] }[]>((all, c) => {
+    const group = all.find((g) => g.provider === c.provider);
+    if (group) group.choices.push(c); else all.push({ provider: c.provider, name: c.providerName, choices: [c] });
+    return all;
+  }, []);
+
+  /* the menu opens on the chosen one; the arrow keys move between them */
+  React.useEffect(() => {
+    if (!open) return;
+    const r = requestAnimationFrame(() => (list.current?.querySelector<HTMLElement>('[aria-selected="true"]') ?? list.current?.querySelector<HTMLElement>('[role="option"]'))?.focus());
+    return () => cancelAnimationFrame(r);
+  }, [open]);
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
+    e.preventDefault();
+    const options = Array.from(list.current?.querySelectorAll<HTMLElement>('[role="option"]') ?? []);
+    const at = options.indexOf(document.activeElement as HTMLElement);
+    options[(at + (e.key === 'ArrowDown' ? 1 : -1) + options.length) % options.length]?.focus();
+  };
+  const pick = (choice: Choice | null) => { setOpen(false); if (choice?.value !== current?.value) onPick(choice); };
+
+  const option = (choice: Choice | null, text: string) => {
+    const selected = (choice?.value ?? '') === (current?.value ?? '');
+    return (
+      <button key={choice?.value ?? ''} type="button" role="option" aria-selected={selected} onClick={() => pick(choice)}
+        className="flex h-9 w-full items-center gap-2 rounded-[6px] px-2 text-left text-[14.5px] text-[var(--text)] outline-none hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)]">
+        <span className="min-w-0 flex-1 truncate">{text}</span>
+        {selected ? <Check size={17} className="shrink-0 text-[var(--text-muted)]" /> : null}
+      </button>
+    );
+  };
+
+  const connect = could.length
+    ? t('settings.models.connectNamed').replace('{names}', new Intl.ListFormat(language, { type: 'disjunction' }).format(could))
+    : t('settings.models.goConnect');
+  const trigger = empty ? (
+    <button type="button" aria-label={`${label}: ${connect}`} title={connect} disabled={busy} onClick={onConnect}
+      className="flex h-10 w-[280px] items-center gap-2 rounded-[8px] border border-[var(--border)] px-3 text-left text-[14.5px] text-[var(--text-muted)] transition hover:border-[var(--border-strong)] hover:text-[var(--text)] disabled:opacity-60">
+      <span className="min-w-0 flex-1 truncate">{connect}</span>
+      <ChevronRight size={15} className="shrink-0" />
+    </button>
+  ) : (
+    <button type="button" aria-label={label} aria-haspopup="listbox" aria-expanded={open} disabled={busy}
+      className={`flex h-10 w-[280px] items-center gap-2 rounded-[8px] border px-3 text-left text-[14.5px] text-[var(--text)] transition disabled:opacity-60 ${open ? 'border-[var(--text-muted)]' : 'border-[var(--border)] hover:border-[var(--border-strong)]'}`}>
+      {current ? <ProviderMark id={current.provider} size={15} /> : null}
+      <span className={`min-w-0 flex-1 truncate ${current ? '' : 'text-[var(--text-muted)]'}`}>
+        {current ? `${current.providerName} · ${current.name}` : t('settings.models.none')}
+      </span>
+      <ChevronDown size={15} className="shrink-0 text-[var(--text-muted)]" />
+    </button>
+  );
+
+  return (
+    <div className="shrink-0">
+      <Popover open={open && !empty} onOpenChange={setOpen} placement="auto" align="end" layer={10060} trigger={trigger}>
+        <div ref={list} role="listbox" aria-label={label} onKeyDown={onKeyDown}
+          className="max-h-[min(360px,var(--popover-max-h))] w-[288px] overflow-y-auto rounded-[10px] border border-[var(--border)] bg-[var(--surface)] p-1 shadow-[var(--shadow-lg)]">
+          {groups.map((group) => (
+            <div key={group.provider} className="mb-1" role="group" aria-label={group.name}>
+              <div className="flex items-center gap-1.5 px-2 pb-1 pt-1.5 text-[14px] font-medium text-[var(--text-muted)]">
+                <ProviderMark id={group.provider} size={15} />{group.name}
+              </div>
+              {group.choices.map((c) => option(c, c.name))}
+            </div>
+          ))}
+          <div className="border-t border-[var(--border-soft)] pt-1">{option(null, t('settings.models.none'))}</div>
+        </div>
+      </Popover>
+    </div>
+  );
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/settings/ProviderMark.tsx

@@ -0,0 +1,24 @@
+import { MARKS } from '@/lib/provider-marks';
+
+/** A provider's or an agent's mark (lib/provider-marks.ts), or, for one with none yet, its letter in a rounded square. */
+export function ProviderMark({ id, size = 18 }: { id: string; size?: number }) {
+  const mark = MARKS[id];
+  return (
+    <span className="inline-flex shrink-0 items-center justify-center text-[var(--text)]" style={{ width: size, height: size }} aria-hidden>
+      {mark ? (
+        <svg width={size} height={size} viewBox={mark.viewBox} fill="currentColor" fillRule="evenodd" className="block">
+          {mark.parts ? mark.parts.map((part) => <path key={part.d} d={part.d} fillOpacity={part.opacity} />) : <path d={mark.d} />}
+        </svg>
+      ) : id ? (
+        <svg width={size} height={size} viewBox="0 0 24 24" className="block">
+          {/* the letter cut out of a solid square, as heavy as the other marks */}
+          <mask id={`provider-mark-${id}`}>
+            <rect width="24" height="24" fill="white" />
+            <text x="12" y="17" textAnchor="middle" fontSize="15" fontWeight="700" fill="black" fontFamily="inherit">{id[0]!.toUpperCase()}</text>
+          </mask>
+          <rect x="1" y="1" width="22" height="22" rx="6" fill="currentColor" mask={`url(#provider-mark-${id})`} />
+        </svg>
+      ) : null}
+    </span>
+  );
+}