cortico 0.1.1 → 0.1.2

package/src/web/client/features/live/protocol.ts

@@ -71,6 +71,7 @@ export interface StatusChip {
 }
 
 export interface StatusSnapshot {
+  modelConnection?: { name: string; model: string | null; module: string; moduleTitle: string; baseUrl: string; ready: boolean } | null;
   displayName?: string;
   loop?: LoopStatus | null;
   /**

package/src/web/client/features/live/strings.ts

@@ -3,6 +3,8 @@ import { pick } from '../../core/language.ts';
 const zh = {
   // index.ts
   navLabel: '终端',
+  currentProvider: '当前模型供应商',
+  noProvider: '未选择模型供应商',
   ctxOpenAria: '查看 token 分类',
   ctxPanelAria: 'Token 分类',
   netConnecting: '连接中…',
@@ -10,8 +12,9 @@ const zh = {
   netOffline: '接口不可达',
   composerLabel: '终端消息输入',
   composerPlaceholder: "输入消息…",
-  composerHint: 'Terminal · Enter 发送 · 可粘贴或拖入图片',
-  composerNoProvider: '当前无可用 Provider,请前往「模型提供商」页设置',
+  exportDiagnostics: '导出诊断',
+  exportFailed: '诊断包取不回来',
+  composerNoProvider: '当前模型供应商不可用，请前往「模型供应商」页设置',
   composerQueued: '终端通道正在重连，消息已排队',
   emptyConnecting: '连接调试通道中…',
   ctxTitle: (total: string, max: string | null) =>
@@ -127,6 +130,8 @@ const zh = {
 const en: typeof zh = {
   // index.ts
   navLabel: 'Terminal',
+  currentProvider: 'Current model provider',
+  noProvider: 'No provider selected',
   ctxOpenAria: 'View token breakdown',
   ctxPanelAria: 'Token breakdown',
   netConnecting: 'Connecting…',
@@ -134,7 +139,8 @@ const en: typeof zh = {
   netOffline: 'API unreachable',
   composerLabel: 'Terminal message input',
   composerPlaceholder: "Enter a message…",
-  composerHint: 'Terminal · Enter to send · paste or drop images',
+  exportDiagnostics: 'Export diagnostics',
+  exportFailed: 'The diagnostics bundle could not be fetched',
   composerNoProvider: 'No usable provider. Set one up on the LLM Provider page.',
   composerQueued: 'Terminal channel is reconnecting; message queued',
   emptyConnecting: 'Connecting to the debug channel…',

package/src/web/client/features/providers/detail.ts

@@ -0,0 +1,262 @@
+import type { FeatureContext } from '../feature.ts';
+import { get, post } from '../../core/api.ts';
+import { Lifecycle } from '../../core/lifecycle.ts';
+import { configField, type ConfigGroup } from '../config/view.ts';
+import { validateProviderName } from '../../../../providers/name.ts';
+import { connectionPath, type Detail, type Editing, type Module } from './types.ts';
+import { LANGUAGE } from '../../core/language.ts';
+import { pricingEditor } from '../../console-pages/builtins/llm-settings/pricing-panel.ts';
+import { S } from './strings.ts';
+
+export interface DetailController { dispose(): void; dirty(): boolean; leave(): Promise<boolean>; }
+interface Options {
+  ctx: FeatureContext; root: HTMLElement; modules: Module[]; saved: Detail | null; draft: Editing | null;
+  changed(editing: Editing, invalid: boolean): void; saveDraft(editing: Editing): void; onSaved(name: string, select?: boolean): Promise<void>; cancelled(): Promise<void>;
+  discarded(): void; deleted(): Promise<void>; duplicate(editing: Editing): Promise<void>;
+}
+export async function mountDetail(options: Options): Promise<DetailController> {
+  const { ctx, root, saved, modules } = options;
+  const { ui } = ctx;
+  const lifecycle = new Lifecycle(ctx.onError);
+  const opts = { signal: lifecycle.signal };
+  const editing: Editing = structuredClone(options.draft ?? { original: saved!.name, name: saved!.name, entry: saved!.entry, revision: saved!.revision, secretValue: '', raw: {} });
+  editing.entry.spec ??= { model: '', thinking: false };
+  let baseline = JSON.stringify(editing);
+  const dirty = () => JSON.stringify(editing) !== baseline;
+  const report = ui.msgline();
+  const form = ui.h('div');
+  root.append(form, report);
+  const errors = new Map<string, () => boolean>();
+  let rendering = 0;
+  let saving = false;
+  let panelHandle: { dispose(): void } | null = null;
+  let panelHost: ReturnType<NonNullable<FeatureContext['consolePageHost']>> | null = null;
+  const change = () => options.changed(editing, !!form.querySelector('[aria-invalid="true"]'));
+  const run = (work: () => Promise<unknown>) => { void work().catch(error => { if (!lifecycle.disposed) report.textContent = String(error); }); };
+  function field(body: HTMLElement, key: string, label: string, value: string, set: (value: string) => void, validate?: (value: string) => string | null, type = 'text') {
+    const input = ui.input({ value, type: type as 'text' }); input.setAttribute('aria-label', label);
+    const note = ui.h('div', 'field-error');
+    const row = ui.h('div', 'connection-field'); row.append(ui.field(label + (['name', 'baseUrl', 'model'].includes(key) ? ' *' : ''), input), note); body.append(row);
+    const check = () => { const error = validate?.(input.value); note.textContent = error ?? ''; input.setAttribute('aria-invalid', String(!!error)); return !error; };
+    errors.set(key, check);
+    input.addEventListener('input', () => { set(input.value); check(); change(); }, opts);
+    return input;
+  }
+  function jsonField(body: HTMLElement, key: string, label: string, value: unknown, array: boolean, set: (value: unknown) => void) {
+    const input = ui.textarea({ rows: 4, value: editing.raw[key] ?? (value === undefined ? '' : JSON.stringify(value, null, 2)), cls: 'mono' });
+    input.setAttribute('aria-label', label);
+    const error = ui.h('div', 'field-error'); body.append(ui.field(label, input), error);
+    const check = () => {
+      try {
+        const parsed: unknown = input.value.trim() ? JSON.parse(input.value) : undefined;
+        if (parsed !== undefined && (array ? !Array.isArray(parsed) : !parsed || typeof parsed !== 'object' || Array.isArray(parsed))) throw new Error();
+        set(parsed); error.textContent = ''; input.setAttribute('aria-invalid', 'false'); return true;
+      } catch { error.textContent = array ? S.jsonArray : S.jsonObject; input.setAttribute('aria-invalid', 'true'); return false; }
+    };
+    errors.set(key, check);
+    if (editing.raw[key] !== undefined) check();
+    input.addEventListener('input', () => { editing.raw[key] = input.value; check(); change(); }, opts);
+  }
+  function section(title: string, id?: string, open = false) {
+    const card = id ? ui.foldSheet('connection-' + id, { title, defaultOpen: open }) : ui.sheet({ title });
+    form.append(card.el); return card.body;
+  }
+  async function render() {
+    const gen = ++rendering;
+    panelHandle?.dispose(); panelHandle = null;
+    errors.clear(); form.replaceChildren();
+    const basic = section(S.basic);
+    field(basic, 'name', S.name, editing.name, value => { editing.name = value; }, value => value === saved?.name ? null : validateProviderName(value) ? S.nameHint : null);
+    basic.append(ui.msgline(S.nameHint));
+    const selectedModule = modules.find(module => module.id === editing.entry.kind);
+    if (saved) {
+      const module = ui.select({ value: editing.entry.kind, options: [{ value: editing.entry.kind, label: selectedModule?.title ?? editing.entry.kind }], disabled: true });
+      module.setAttribute('aria-label', S.module); module.classList.add('connection-module-readonly');
+      basic.append(ui.field(S.module, module), ui.msgline(S.fixedModule));
+    }
+    else {
+      const select = ui.select({ value: editing.entry.kind, options: [{ value: '', label: '—' }, ...modules.map(module => ({ value: module.id, label: module.title }))],
+        onChange: kind => {
+          const module = modules.find(module => module.id === kind);
+          editing.entry = { kind, baseUrl: module?.defaultBaseUrl ?? '', spec: { model: '', thinking: module?.reasoningTiers[0]?.thinking ?? true, ...(module?.reasoningTiers[0]?.effort ? { reasoningEffort: module.reasoningTiers[0].effort } : {}) } };
+          editing.raw = {}; change(); run(render);
+        } });
+      select.setAttribute('aria-label', S.module); basic.append(ui.field(S.module + ' *', select));
+      const required = ui.h('div', 'field-error'); basic.append(required);
+      errors.set('module', () => { required.textContent = editing.entry.kind ? '' : S.required; select.setAttribute('aria-invalid', String(!editing.entry.kind)); return !!editing.entry.kind; });
+    }
+    if (selectedModule) basic.append(ui.h('p', 'field-note', S.moduleNote(selectedModule.description, selectedModule.id)));
+    const connection = section(S.connection);
+    field(connection, 'baseUrl', S.url, editing.entry.baseUrl, value => { editing.entry.baseUrl = value; }, value => {
+      try { const url = new URL(value); return ['https:', 'http:'].includes(url.protocol) && !url.username && !url.password ? null : S.required; } catch { return S.required; }
+    });
+    const key = field(connection, 'key', S.key, editing.secretValue, value => { editing.secretValue = value; }, undefined, 'password');
+    key.placeholder = saved?.secretConfigured !== 'none' && saved ? S.keySet : S.keyEmpty;
+    const test = ui.button(S.test, { onClick: () => run(async () => {
+      if (!saved || dirty()) { report.textContent = S.savedFirst; return; }
+      test.disabled = true;
+      try {
+        const result = await post<{ ok: boolean; status: number | null; elapsedMs: number; model?: string; error?: string; hint?: string }>(connectionPath(saved.name) + '/test', {}, opts);
+        report.textContent = result.ok ? `${S.testOk} · HTTP ${result.status ?? '—'} · ${(result.elapsedMs / 1000).toFixed(1)}s · ${result.model ?? ''}` : `${S.testFailed}: ${result.hint ?? result.error ?? ''}`;
+      } finally { test.disabled = false; }
+    }) }); connection.append(test);
+    if (saved?.readiness.reason) connection.append(ui.msgline(saved.readiness.reason, true));
+    const model = section(S.modelSection, 'model', true);
+    const spec = editing.entry.spec ??= { model: '', thinking: false };
+    const modelInput = field(model, 'model', S.model, spec.model, value => { spec.model = value; }, value => value.trim() ? null : S.required);
+    const catalog = ui.h('datalist'); catalog.id = 'connection-models-' + Math.random().toString(36).slice(2); modelInput.setAttribute('list', catalog.id); model.append(catalog);
+    let listedModels: Array<{ id: string; contextWindow?: number }> = [];
+    let contextInput: HTMLInputElement | null = null;
+    modelInput.addEventListener('change', () => {
+      const known = listedModels.find(item => item.id === modelInput.value)?.contextWindow;
+      if (known && contextInput) { spec.contextWindow = known; contextInput.value = String(known); delete editing.raw.contextWindow; change(); }
+    }, opts);
+    const fetch = ui.button(S.fetchModels, { onClick: () => run(async () => {
+      if (!saved || dirty()) { report.textContent = S.savedFirst; return; }
+      fetch.disabled = true;
+      try { const result = await post<{ models: Array<{ id: string; contextWindow?: number }> }>(connectionPath(saved.name) + '/models', {}, opts);
+        catalog.replaceChildren(...result.models.map(item => { const option = ui.h('option'); option.value = item.id; return option; }));
+        listedModels = result.models;
+      } finally { fetch.disabled = false; }
+    }) }); model.append(fetch);
+    const tiers = selectedModule?.reasoningTiers ?? [];
+    if (tiers.length) {
+      const select = ui.select({ value: tiers.find(tier => tier.thinking === spec.thinking && tier.effort === spec.reasoningEffort)?.id ?? '', options: tiers.map(tier => ({ value: tier.id, label: tier.label })), onChange: value => {
+        const tier = tiers.find(tier => tier.id === value)!; spec.thinking = tier.thinking;
+        if (tier.effort) spec.reasoningEffort = tier.effort; else delete spec.reasoningEffort; change();
+      } }); select.setAttribute('aria-label', S.reasoning); model.append(ui.field(S.reasoning, select));
+    } else field(model, 'reasoning', S.reasoning, !spec.thinking ? 'none' : spec.reasoningEffort ?? '', value => {
+      spec.thinking = value !== 'none'; if (value && value !== 'none') spec.reasoningEffort = value; else delete spec.reasoningEffort;
+    });
+    for (const [name, label] of [['temperature', S.temperature], ['maxTokens', S.maxTokens], ['contextWindow', S.context]] as const) {
+      const input = field(model, name, label, editing.raw[name] ?? String(spec[name] ?? ''), value => {
+        editing.raw[name] = value; if (!value) delete spec[name]; else spec[name] = Number(value);
+      }, value => !value || Number.isFinite(Number(value)) && (name === 'temperature' ? Number(value) >= 0 && Number(value) <= 2 : Number.isInteger(Number(value)) && Number(value) > 0) ? null : S.invalidNumber, 'number');
+      if (name === 'contextWindow') contextInput = input;
+    }
+    if (selectedModule?.serviceTiers.length) {
+      const select = ui.select({ value: editing.entry.serviceTier ?? '', options: [{ value: '', label: '—' }, ...selectedModule.serviceTiers.map(tier => ({ value: tier.id, label: tier.label }))], onChange: value => { editing.entry.serviceTier = value; change(); } });
+      select.setAttribute('aria-label', S.tier); model.append(ui.field(S.tier, select));
+    }
+    const images = ui.h('input'); images.type = 'checkbox'; images.checked = editing.entry.multimodal === true; images.setAttribute('aria-label', S.images);
+    images.addEventListener('change', () => { editing.entry.multimodal = images.checked; change(); }, opts); model.append(ui.field(S.images, images));
+    const moduleBody = section(S.moduleSection, 'module', true);
+    const pricing = section(S.pricing, 'pricing');
+    const prices = pricingEditor(ui, editing.entry.pricing ?? [], saved?.quotes ?? [], value => {
+      editing.entry.pricing = value as Detail['entry']['pricing']; change();
+    }, LANGUAGE, { raw: editing.raw.pricing, onRaw: value => { editing.raw.pricing = value; change(); } });
+    pricing.append(prices.body);
+    errors.set('pricing', prices.validate);
+    const advanced = section(S.advanced, 'advanced'); advanced.append(ui.msgline(S.advancedHint));
+    field(advanced, 'secret', S.secret, editing.entry.secret ?? '', value => { if (value) editing.entry.secret = value; else delete editing.entry.secret; });
+    form.append(ui.h('div', 'connection-shared', S.shared));
+    const actions = ui.h('div', 'connection-actions');
+    if (saved) {
+      actions.append(ui.button(S.remove, { variant: 'danger', onClick: () => run(async () => {
+        const current = await get<Detail>(connectionPath(saved.name), opts);
+        if (current.references.length) { await ui.confirm({ title: S.remove, body: S.referenced + current.references.join(', ') }); return; }
+        if (!(await ui.confirm({ title: S.remove, body: S.deleteConfirm, danger: true }))) return;
+        await post(connectionPath(saved.name) + '/delete', { expectedRevision: saved.revision }, opts); baseline = JSON.stringify(editing); await options.deleted();
+      }) }), ui.button(S.duplicate, { onClick: () => run(async () => {
+        if (!(await leave())) return;
+        await options.duplicate({ original: null, copyFrom: { name: saved.name, revision: saved.revision }, name: (validateProviderName(saved.name) ? 'Connection' : saved.name) + '-Copy', entry: structuredClone(saved.entry), secretValue: '', raw: {} });
+      }) }));
+    }
+    actions.append(ui.h('span', 'grow'), ui.button(S.cancel, { onClick: () => run(async () => { baseline = JSON.stringify(editing); await options.cancelled(); }) }), ui.button(S.draft, { onClick: () => { try { options.saveDraft(editing); baseline = JSON.stringify(editing); report.textContent = S.drafted; } catch (error) { report.textContent = String(error); } } }), ui.button(S.save, { variant: 'primary', onClick: () => run(() => save()) }));
+    form.append(actions);
+    if (!selectedModule) { moduleBody.append(ui.msgline(saved ? S.readiness['module-missing'] : S.chooseModule)); return; }
+    const identity = saved?.name ?? 'draft';
+    const groups = await post<ConfigGroup[]>('/api/provider-modules/config', { name: identity, entry: editing.entry }, opts);
+    if (gen !== rendering || lifecycle.disposed) return;
+    if (ctx.consolePageHost) {
+      panelHost ??= ctx.consolePageHost({ root: moduleBody, route: () => ['providers', saved?.name ?? ''] });
+      await panelHost.load();
+    }
+    const hasPanels = panelHost?.find(`llm:${editing.entry.kind}`)?.panels?.some(panel => panel.id !== 'settings');
+    for (const group of groups.filter(group => !group.id.endsWith('.connection'))) {
+      for (const [path, property] of Object.entries(group.schema.properties ?? {})) {
+        const suffix = path.slice(`providers.${identity}.`.length);
+        if (['baseUrl', 'secret', 'multimodal'].includes(suffix) || property.type === 'object') continue;
+        const parts = suffix.split('.');
+        const getValue = () => parts.reduce<unknown>((value, part) => (value as Record<string, unknown> | undefined)?.[part], editing.entry);
+        const setValue = (value: unknown) => {
+          let target = editing.entry as unknown as Record<string, unknown>;
+          for (const part of parts.slice(0, -1)) target = (target[part] ??= {}) as Record<string, unknown>;
+          target[parts.at(-1)!] = value;
+        };
+        const body = suffix.includes('endpointPath') || suffix.includes('extraHeaders') || suffix.includes('extraBody') ? advanced : moduleBody;
+        if (body === moduleBody && hasPanels) continue;
+        const control = configField(ui, property, getValue(), () => { if (control.read) { setValue(control.read()); change(); } }, lifecycle.signal);
+        control.node.setAttribute('aria-label', property.title ?? suffix);
+        body.append(ui.field(property.title ?? suffix, control.node));
+        if (property.description) body.append(ui.h('p', 'tdesc', property.description));
+      }
+    }
+    if (ctx.consolePageHost) {
+      const slot = ui.h('div'); moduleBody.append(slot);
+      panelHost ??= ctx.consolePageHost({ root: slot, route: () => ['providers', saved?.name ?? ''] });
+      await panelHost.load();
+      if (gen !== rendering || lifecycle.disposed) return;
+      panelHandle = await panelHost.mountConnection(`llm:${editing.entry.kind}`, slot, { instance: identity }, context => ({
+        ...context,
+        setConfig: async (_id, values) => {
+          for (const [path, value] of Object.entries(values)) {
+            const prefix = `providers.${identity}.`;
+            if (!path.startsWith(prefix)) throw new Error('Foreign connection field');
+            const parts = path.slice(prefix.length).split('.');
+            let target = editing.entry as unknown as Record<string, unknown>;
+            for (const part of parts.slice(0, -1)) target = (target[part] ??= {}) as Record<string, unknown>;
+            target[parts.at(-1)!] = value;
+          }
+          change(); return S.unsaved;
+        },
+        invoke: async <T>(method: string, args?: unknown[]): Promise<T> => {
+          const before = JSON.stringify(editing.entry);
+          const reply = await post<{ result: T; entry: Detail['entry'] }>('/api/provider-modules/preview', { name: identity, entry: editing.entry, panel: context.panelId, method, args }, opts);
+          if (before === JSON.stringify(editing.entry) && JSON.stringify(reply.entry) !== before) { if (reply.entry.spec) Object.assign(spec, reply.entry.spec); editing.entry = { ...reply.entry, spec }; change(); }
+          return reply.result;
+        },
+        refresh: async () => {},
+      }));
+      if (gen !== rendering || lifecycle.disposed) panelHandle.dispose();
+    }
+    // Object-valued protocol fields remain JSON editors; their presence is declared by the module schema.
+    for (const group of groups) for (const [path, property] of Object.entries(group.schema.properties ?? {})) {
+      if (property.type !== 'object') continue;
+      const parts = path.slice(`providers.${identity}.`.length).split('.');
+      const value = parts.reduce<unknown>((object, key) => (object as Record<string, unknown> | undefined)?.[key], editing.entry);
+      jsonField(advanced, path, property.title ?? parts.at(-1)!, value, false, value => {
+        let object = editing.entry as unknown as Record<string, unknown>;
+        for (const key of parts.slice(0, -1)) object = (object[key] ??= {}) as Record<string, unknown>;
+        if (value === undefined) delete object[parts.at(-1)!]; else object[parts.at(-1)!] = value;
+      });
+    }
+  }
+  async function save(select = true): Promise<boolean> {
+    if (saving) return false;
+    const valid = [...errors.values()].map(check => check()).every(Boolean); change();
+    if (!valid) { report.textContent = S.readiness.invalid; return false; }
+    saving = true;
+    try {
+      const result = await post<Detail>(saved ? connectionPath(saved.name) + '/save' : '/api/providers', { name: editing.name, entry: editing.entry, expectedRevision: editing.revision, copyFrom: editing.copyFrom, ...(editing.secretValue ? { secretValue: editing.secretValue } : {}) }, opts);
+      baseline = JSON.stringify(editing); await options.onSaved(result.name, select); return true;
+    } catch (error) { report.textContent = String(error); return false; }
+    finally { saving = false; }
+  }
+  async function leave(): Promise<boolean> {
+    if (!dirty()) return true;
+    return new Promise(resolve => {
+      const dialog = ui.h('dialog', 'connection-guard');
+      const buttons = ui.rowbar();
+      const finish = (answer: boolean) => { dialog.remove(); resolve(answer); };
+      dialog.append(ui.h('h3', '', S.unsaved), buttons);
+      buttons.append(ui.button(S.stay, { onClick: () => finish(false) }), ui.button(S.discard, { onClick: () => { baseline = JSON.stringify(editing); options.discarded(); finish(true); } }), ui.button(S.save, { variant: 'primary', onClick: () => { void save(false).then(ok => finish(ok)); } }));
+      dialog.addEventListener('cancel', event => { event.preventDefault(); finish(false); }, opts);
+      lifecycle.signal.addEventListener('abort', () => finish(false), { once: true });
+      root.ownerDocument.body.append(dialog);
+      if (dialog.showModal) dialog.showModal(); else dialog.setAttribute('open', '');
+    });
+  }
+  await render(); change();
+  return { dispose: () => { lifecycle.dispose(); panelHandle?.dispose(); panelHost?.unmount(); }, dirty, leave };
+}

package/src/web/client/features/providers/drafts.ts

@@ -0,0 +1,23 @@
+import type { Editing } from './types.ts';
+
+export const NEW_DRAFT_ID = '/new';
+
+/** Drafts are scoped to the deployment and never retain API Key input. */
+export function providerDrafts(storage: Storage, scope: string) {
+  const key = `cortico:provider-drafts:v2:${scope}`;
+  let values: Record<string, Editing> = Object.create(null);
+  try { values = JSON.parse(storage.getItem(key) ?? '{}'); } catch { /* A corrupt draft does not block saved connections. */ }
+  if (!values || typeof values !== 'object' || Array.isArray(values)) values = Object.create(null);
+  else values = Object.assign(Object.create(null), values);
+  const persist = () => storage.setItem(key, JSON.stringify(values));
+  return {
+    get(name: string): Editing | null {
+      const value = values[name];
+      return value && typeof value.name === 'string' && value.entry && typeof value.entry.kind === 'string' && value.raw
+        ? structuredClone({ ...value, secretValue: '' }) : null;
+    },
+    set(value: Editing): void { values[value.original ?? NEW_DRAFT_ID] = structuredClone({ ...value, secretValue: '' }); persist(); },
+    remove(name: string): void { delete values[name]; persist(); },
+    has(name: string): boolean { return !!values[name]; },
+  };
+}

package/src/web/client/features/providers/index.ts

@@ -1,100 +1,186 @@
-/**
- * 「语言模型」页 —— 模型供应模块的入口。
- *
- * 左侧次级菜单列出 manifest 里 kind 为 `llm` 的页(每个供应模块一条),右侧由
- * 嵌入的控制台页宿主渲染选中模块的面板:实例与模型、授权、托管、配置。这一页不认识
- * 任何具体模块——名字、灯、徽标与面板全部来自 manifest。
- *
- * 路由 `#/providers/<pageId>/<panelId>`:第二段选模块,第三段选面板;缺省取第一个
- * 模块及其第一个面板。面板页签由宿主渲染并指向同一前缀,所以切换留在本页内。
- */
-
-import { PROVIDERS_LAMP_ID } from '../../../shared/console-protocol.ts';
-import { lampRow, paintLamps, subscribeLamps } from '../../ui/lamp.ts';
 import { pageIntro } from '../../ui/page.ts';
-import type { Route } from '../../core/router.ts';
+import { icon } from '../../ui/icons.ts';
+import { NEW_DRAFT_ID, providerDrafts } from './drafts.ts';
 import type { FeatureContext, FrameworkFeature } from '../feature.ts';
+import { get, post } from '../../core/api.ts';
+import { LANGUAGE } from '../../core/language.ts';
+import { panel } from '../../console-pages/builtins/llm-settings/strings.ts';
+import { probeCard, type ProbeResult } from '../../console-pages/builtins/llm-settings/panel.ts';
 import { S } from './strings.ts';
-
-const PROVIDERS_ROUTE = 'providers';
-/** 这一页只列供应模块;人格与 IO 各有自己的入口。 */
-const PROVIDER_KIND = 'llm';
+import { connectionPath, type HubState, type Connection, type Module, type Detail, type Editing } from './types.ts';
+import { mountDetail, type DetailController } from './detail.ts';
 
 export async function mountProviders(ctx: FeatureContext): Promise<void> {
   const { ui, root } = ctx;
+  root.append(pageIntro(ui, S.pageTitle));
+  const report = ui.msgline();
+  const layout = ui.h('div', 'connection-hub');
+  const index = ui.h('div', 'connection-index');
+  const cards = ui.h('div', 'connection-cards');
+  const detailRoot = ui.h('div', 'connection-detail');
+  layout.append(index, detailRoot); root.append(report, layout);
+  const opts = { signal: ctx.signal };
+  let state = await get<HubState>('/api/providers', opts);
+  state.providers.sort((a, b) => Number(b.name === state.active) - Number(a.name === state.active));
+  const modules = await get<Module[]>('/api/provider-modules', opts);
+  if (ctx.signal.aborted) return;
+  const drafts = providerDrafts(root.ownerDocument.defaultView!.localStorage, state.scope);
+  let selected = '';
+  let newDraft: Editing | null = drafts.get(NEW_DRAFT_ID);
+  const invalid = new Set<string>();
+  let controller: DetailController | null = null;
+  let renderId = 0;
+  interface CardNode {
+    el: HTMLElement; title: HTMLElement; model: HTMLElement; url: HTMLElement; status: HTMLElement; secondary: HTMLElement;
+    kind: HTMLElement; activate: HTMLButtonElement; erase: HTMLButtonElement; probe: HTMLButtonElement; probePanel: HTMLElement; probeBody: HTMLElement;
+  }
+  const nodes = new Map<string, CardNode>();
+  const rows = new Map<string, Connection>();
   const doc = root.ownerDocument;
-  const intro = pageIntro(ui, S.pageTitle);
-  const layout = ui.h('div', 'settings-layout providerhub');
-  const index = ui.h('nav', 'settings-index');
-  index.setAttribute('aria-label', S.modulesAria);
-  index.setAttribute('role', 'tablist');
-  const content = ui.h('div', 'settings-content');
-  layout.append(index, content);
-  root.append(intro, layout);
-
-  if (!ctx.consolePageHost) {
-    content.appendChild(ui.placeholder(S.needHost));
-    return;
+  const run = (work: () => Promise<unknown>) => { void work().catch(error => { if (!ctx.signal.aborted) report.textContent = String(error); }); };
+  // 同时只有一张卡处在「确认删除」态。
+  let armed: (() => void) | null = null;
+  const disarm = () => { armed?.(); armed = null; };
+  const fallback = () => state.providers.find(item => item.name === state.active)?.name || state.providers[0]?.name || '';
+  function paint() {
+    report.textContent = state.active && !state.providers.some(item => item.name === state.active) ? S.missing + state.active : '';
+    const all: Array<Connection | { name: string; moduleTitle: string; model: string | null; baseUrl: string; readiness: { state: string } }> = [...state.providers];
+    if (newDraft) all.unshift({ name: NEW_DRAFT_ID, moduleTitle: moduleName(newDraft.entry.kind), model: newDraft.entry.spec?.model ?? null, baseUrl: newDraft.entry.baseUrl, readiness: { state: 'draft' } });
+    for (const [name, node] of nodes) if (!all.some(item => item.name === name)) { node.el.remove(); nodes.delete(name); }
+    for (const item of all) {
+      const identity = item.name;
+      let node = nodes.get(identity);
+      if (!node) {
+        const el = ui.h('article', 'connection-card'); el.dataset.provider = identity;
+        const title = ui.h('div', 'connection-name'); const kind = ui.h('div', 'connection-kind');
+        const model = ui.h('div', 'connection-model'); const url = ui.h('div', 'connection-url');
+        const status = ui.h('div', 'connection-status'); const secondary = ui.h('div', 'connection-secondary');
+        const actions = ui.rowbar();
+        const configure = ui.button(S.configure, { size: 'sm', onClick: () => run(() => select(identity)) });
+        const activate = ui.button(S.activate, { size: 'sm', onClick: () => run(async () => {
+          activate.disabled = true;
+          try { await post(connectionPath(identity) + '/activate', {}, opts); state.active = identity; paint(); }
+          finally { activate.disabled = false; }
+        }) });
+        const probePanel = ui.h('div', 'connection-probe');
+        const probeBody = ui.h('div', 'connection-probe-body');
+        probePanel.append(probeBody);
+        const probe = ui.button(S.probe, { size: 'sm', onClick: () => run(() => runProbe(identity)) });
+        probe.classList.add('connection-probe-btn'); probe.append(ui.h('span', 'connection-spin'));
+        const erase = eraseButton(identity);
+        actions.append(configure, probe, activate); el.append(erase, title, kind, model, url, status, secondary, actions, probePanel);
+        el.addEventListener('click', event => { if (!(event.target as Element).closest('button')) run(() => select(identity)); }, opts);
+        if (identity === NEW_DRAFT_ID) cards.prepend(el); else cards.append(el);
+        node = { el, title, kind, model, url, status, secondary, activate, erase, probe, probePanel, probeBody }; nodes.set(identity, node);
+      }
+      const active = identity === state.active;
+      node.el.classList.toggle('is-active', active); node.el.classList.toggle('is-selected', identity === selected);
+      node.title.textContent = identity === NEW_DRAFT_ID ? newDraft?.name || S.newName : identity;
+      node.title.title = node.title.textContent;
+      node.kind.textContent = item.moduleTitle; node.kind.title = item.moduleTitle;
+      node.model.textContent = item.model || '—'; node.url.textContent = item.baseUrl || '—';
+      node.model.title = item.model ?? ''; node.url.title = item.baseUrl ?? '';
+      const readiness = invalid.has(identity) && identity !== NEW_DRAFT_ID ? 'invalid' : item.readiness.state;
+      node.status.textContent = active ? S.active : S.readiness[readiness];
+      node.secondary.textContent = active && readiness !== 'ready' ? S.readiness[readiness] : identity !== NEW_DRAFT_ID && drafts.has(identity) ? S.readiness.draft : '';
+      node.activate.hidden = active || identity === NEW_DRAFT_ID;
+      node.activate.disabled = item.readiness.state !== 'ready';
+      node.probe.hidden = identity === NEW_DRAFT_ID;
+      if (identity === NEW_DRAFT_ID) rows.delete(identity); else rows.set(identity, item as Connection);
+    }
   }
-  const host = ctx.consolePageHost({
-    root: content,
-    route: (pageId, panelId) => [PROVIDERS_ROUTE, pageId, panelId],
-  });
-  ctx.lifecycle.own({ dispose: () => host.unmount() });
-  content.appendChild(ui.placeholder(S.loading));
-  await host.load();
-  if (ctx.signal.aborted) return;
-
-  const providers = host.pages.filter((p) => p.kind === PROVIDER_KIND);
-  if (!providers.length) {
-    content.replaceChildren(ui.placeholder(S.none));
-    return;
+  /** 删除按钮先伸成「确认删除」,第二次点击才动手;点别处或 Esc 收回。 */
+  function eraseButton(identity: string): HTMLButtonElement {
+    const el = ui.h('button', 'connection-erase') as HTMLButtonElement;
+    el.type = 'button';
+    const text = ui.h('span', 'connection-erase-text'); text.append(ui.h('span', '', S.eraseConfirm));
+    el.append(icon(doc, 'trash'), text);
+    const label = (armedNow: boolean) => { const name = armedNow ? S.eraseConfirm : S.remove; el.title = name; el.setAttribute('aria-label', name); };
+    label(false);
+    el.addEventListener('click', event => {
+      event.stopPropagation();
+      const wasArmed = el.classList.contains('is-armed');
+      disarm();
+      if (wasArmed) { run(() => remove(identity)); return; }
+      el.classList.add('is-armed'); label(true);
+      armed = () => { el.classList.remove('is-armed'); label(false); };
+    }, opts);
+    return el;
   }
-
-  const jumps = new Map<string, HTMLButtonElement>();
-  const lampNodes = new Map<string, HTMLSpanElement>();
-  for (const p of providers) {
-    const jump = ui.h('button', 'settings-jump providerhub-jump');
-    jump.type = 'button';
-    jump.setAttribute('role', 'tab');
-    jump.append(ui.h('span', 'lbl', p.label || p.id));
-    const lamps = lampRow(doc, p.lamps ?? []);
-    jump.appendChild(lamps);
-    lampNodes.set(p.id, lamps);
-    jump.addEventListener('click', () => {
-      try { ctx.router.navigate([PROVIDERS_ROUTE, p.id]); } catch (err) { ctx.onError(err); }
-    }, { signal: ctx.signal });
-    index.appendChild(jump);
-    jumps.set(p.id, jump);
+  async function remove(identity: string): Promise<void> {
+    if (identity === NEW_DRAFT_ID) {
+      drafts.remove(NEW_DRAFT_ID); newDraft = null; invalid.delete(identity);
+      if (selected === NEW_DRAFT_ID) await select(fallback(), true); else paint();
+      return;
+    }
+    await post(connectionPath(identity) + '/delete', { expectedRevision: rows.get(identity)?.revision }, opts);
+    drafts.remove(identity); invalid.delete(identity);
+    await refresh();
+    if (selected === identity) await select(fallback(), true);
   }
-  // 灯的活数据只改那几个点,不重排菜单(与左栏同一节拍)。
-  ctx.lifecycle.own(subscribeLamps(doc, (lamps) => {
-    for (const [id, el] of lampNodes) paintLamps(el, lamps[id] ?? []);
-  }));
-
-  const show = (route: Route): void => {
-    const wanted = route.segments[1];
-    const provider = providers.find((p) => p.id === wanted) ?? providers[0]!;
-    for (const [id, jump] of jumps) {
-      const on = id === provider.id;
-      jump.classList.toggle('active', on);
-      jump.setAttribute('aria-selected', String(on));
+  /** 探活结果挂在卡片下面,与模块页上的那份同一种呈现。 */
+  async function runProbe(identity: string): Promise<void> {
+    const node = nodes.get(identity);
+    if (!node || node.probe.disabled) return;
+    node.probe.disabled = true; node.probe.classList.add('is-busy');
+    try {
+      const result = await post<ProbeResult>(connectionPath(identity) + '/test', {}, opts);
+      if (ctx.signal.aborted) return;
+      const close = ui.button(S.probeClose, { size: 'sm', onClick: () => node.probePanel.classList.remove('is-open') });
+      node.probeBody.replaceChildren(probeCard(ui, LANGUAGE === 'en' ? panel.en : panel.zh, result), close);
+      node.probePanel.classList.add('is-open');
+    } finally { node.probe.disabled = false; node.probe.classList.remove('is-busy'); }
+  }
+  async function refresh() { state = await get<HubState>('/api/providers', opts); paint(); }
+  async function select(identity: string, force = false): Promise<void> {
+    if (!force && identity === selected) return;
+    if (!force && controller && !(await controller.leave())) return;
+    const gen = ++renderId;
+    controller?.dispose(); controller = null;
+    selected = identity; paint(); detailRoot.replaceChildren();
+    if (!identity) {
+      detailRoot.append(ui.h('h3', '', S.empty), ui.msgline(S.emptyHint), ui.button(S.create, { onClick: () => run(create) }));
+      return;
     }
-    const panel = route.segments[2];
-    void host.show(provider.id, typeof panel === 'string' && panel !== '' ? panel : undefined);
-  };
-  show(ctx.route);
-  ctx.lifecycle.own(ctx.router.onChange((route) => {
-    if (route.segments[0] !== PROVIDERS_ROUTE) return;
-    show(route);
+    const saved = identity === NEW_DRAFT_ID ? null : await get<Detail>(connectionPath(identity), opts);
+    if (gen !== renderId || ctx.signal.aborted) return;
+    const detailView = ui.h('div'); detailRoot.replaceChildren(detailView);
+    const mounted = await mountDetail({ ctx, root: detailView, modules, saved, draft: identity === NEW_DRAFT_ID ? newDraft : drafts.get(identity),
+      discarded: () => { invalid.delete(identity); if (identity === NEW_DRAFT_ID) newDraft = drafts.get(NEW_DRAFT_ID); paint(); },
+      saveDraft: editing => { drafts.set(editing); paint(); },
+      changed: (editing, hasErrors) => { if (hasErrors) invalid.add(identity); else invalid.delete(identity); if (identity === NEW_DRAFT_ID) newDraft = editing; paint(); },
+      onSaved: async (name, show = true) => { drafts.remove(identity); invalid.delete(identity); if (identity === NEW_DRAFT_ID) newDraft = null; await refresh(); if (show) await select(name, true); },
+      cancelled: async () => { drafts.remove(identity); invalid.delete(identity); if (identity === NEW_DRAFT_ID) newDraft = null; await select(identity === NEW_DRAFT_ID ? state.providers.find(item => item.name === state.active)?.name || state.providers[0]?.name || '' : identity, true); },
+      deleted: async () => { drafts.remove(identity); invalid.delete(identity); await refresh(); await select(state.providers.find(item => item.name === state.active)?.name || state.providers[0]?.name || '', true); },
+      duplicate: async editing => {
+        if (newDraft) { await select(NEW_DRAFT_ID); return; }
+        const used = new Set(state.providers.map(item => item.name.toLowerCase()));
+        const base = editing.name.slice(0, 56); let candidate = base; let number = 2;
+        while (used.has(candidate.toLowerCase())) candidate = `${base}-${number++}`;
+        editing.name = candidate; newDraft = editing; await select(NEW_DRAFT_ID, true);
+      },
+    });
+    if (gen !== renderId || ctx.signal.aborted) mounted.dispose(); else controller = mounted;
+  }
+  async function create() {
+    if (newDraft) return select(NEW_DRAFT_ID);
+    if (controller && !(await controller.leave())) return;
+    newDraft = { original: null, name: '', entry: { kind: '', baseUrl: '' }, secretValue: '', raw: {} };
+    await select(NEW_DRAFT_ID, true);
+  }
+  const moduleName = (kind: string) => modules.find(module => module.id === kind)?.title ?? kind;
+  doc.addEventListener('click', event => { if (!(event.target as Element).closest('.connection-erase')) disarm(); }, opts);
+  doc.addEventListener('keydown', event => { if (event.key === 'Escape') disarm(); }, opts);
+  const creator = ui.h('div', 'connection-create');
+  creator.append(ui.button(S.create, { variant: 'primary', onClick: () => run(create) }), ui.h('p', 'connection-create-hint', S.createHint));
+  index.append(creator, cards);
+  ctx.lifecycle.own({ dispose: () => { renderId++; controller?.dispose(); } });
+  ctx.lifecycle.own(ctx.router.addLeaveDecision(async () => controller ? controller.leave() : true));
+  ctx.lifecycle.own(ctx.router.onChange(route => {
+    if (route.segments[0] === 'providers' && route.segments[1]) run(() => select(route.segments[1]));
   }));
+  paint();
+  const wanted = ctx.route.segments[1] ?? (newDraft ? NEW_DRAFT_ID : undefined);
+  await select(wanted && (wanted === NEW_DRAFT_ID || state.providers.some(item => item.name === wanted)) ? wanted : state.providers.find(item => item.name === state.active)?.name ?? state.providers[0]?.name ?? '', true);
 }
-
-export const providersFeature: FrameworkFeature = {
-  route: PROVIDERS_ROUTE,
-  label: S.navLabel,
-  icon: 'cpu',
-  lampId: PROVIDERS_LAMP_ID,
-  navGroup: S.navGroup,
-  mount: mountProviders,
-};
+export const providersFeature: FrameworkFeature = { route: 'providers', label: S.navLabel, icon: 'cpu', navGroup: S.navGroup, mount: mountProviders };