cortico 0.1.2 → 0.1.3

package/src/providers/transport/errors.ts

@@ -46,3 +46,12 @@ export function retryDelay(ms: number, signal?: AbortSignal): Promise<void> {
     signal.addEventListener('abort', onAbort, { once: true });
   });
 }
+
+/** `Retry-After` 头换算成毫秒:数字按秒,HTTP 日期按距今;缺失或不成形返回 null,过期为 0。 */
+export function parseRetryAfter(header: string | null): number | null {
+  if (!header) return null;
+  const value = header.trim();
+  if (/^\d+$/.test(value)) return Number(value) * 1000;
+  const at = Date.parse(value);
+  return Number.isNaN(at) ? null : Math.max(0, at - Date.now());
+}

package/src/providers/transport/response-http.ts

@@ -3,7 +3,7 @@ import type { Request, Response, StreamEvent } from '../../protocol/open-respons
 import type { ItemOrigin } from '../../protocol/open-responses/context.ts';
 import { GenerationError, priceUsage, unknownMeters, type GenerateOptions, type Generation, type ProviderAttempt, type PriceSnapshot, type TokenMeters } from '../../core/generation.ts';
 import { ResponseProtocolError } from '../../protocol/open-responses/stream.ts';
-import { LLMError, abortError, retryDelay, reqIdSuffix } from './errors.ts';
+import { LLMError, abortError, parseRetryAfter, retryDelay, reqIdSuffix } from './errors.ts';
 import type { ResponseAssembly } from './response-assembly.ts';
 
 export interface ResponseTransport {
@@ -67,14 +67,17 @@ export async function generate(request: Request, options: GenerateOptions, origi
   let lastError: unknown;
   let partial: Response | null = null;
   let authRetried = false;
+  // 上一次尝试的 `Retry-After`;没有头或解析不成形时按固定间隔退避。
+  let retryAfterMs: number | null = null;
   const delays = options.diagnostic ? [] : [1000, 4000, 10000];
   const fail = (error: unknown): GenerationError => new GenerationError((error instanceof Error ? error.message : String(error)) + reqIdSuffix(attempts.filter(attempt => attempt.purpose !== 'diagnostic').at(-1)?.requestId), attempts,
     partial, origin, error instanceof LLMError ? error.status : 0, error instanceof LLMError ? error.body : '', { cause: error });
   for (let ordinal = 0; ordinal <= delays.length; ordinal++) {
     try {
       if (options.signal?.aborted) throw abortError(options.signal);
-      if (ordinal) await retryDelay(delays[ordinal - 1], options.signal);
+      if (ordinal) await retryDelay(retryAfterMs ?? delays[ordinal - 1], options.signal);
     } catch (error) { throw fail(error); }
+    retryAfterMs = null;
     const attempt: ProviderAttempt = {
       id: crypto.randomUUID(), generationId, ordinal, origin: structuredClone(origin), startedAt: new Date().toISOString(), elapsedMs: 0,
       requestId: null, responseId: null, outcome: 'failed', status: null, serviceTier: null, requestedServiceTier: typeof transport.body.service_tier === 'string' ? transport.body.service_tier : request.service_tier ?? null, purpose: options.diagnostic ? 'diagnostic' : 'generation', meters: unknownMeters(), charges: [],
@@ -123,6 +126,7 @@ export async function generate(request: Request, options: GenerateOptions, origi
       attempt.requestId = response.headers.get('x-request-id');
       if (!response.ok) {
         const error = new LLMError(`LLM API ${response.status}`, response.status, await response.text());
+        retryAfterMs = parseRetryAfter(response.headers.get('retry-after'));
         if (!options.diagnostic && (response.status === 401 || response.status === 403) && !authRetried && await transport.refresh()) {
           authRetried = true;
           lastError = error;
@@ -176,7 +180,7 @@ export async function generate(request: Request, options: GenerateOptions, origi
       lastError = error;
       if (!sent || committed || runaway || (!streaming && error instanceof ResponseProtocolError)) break;
       const status = error instanceof LLMError ? error.status : 0;
-      if (status !== 0 && status !== 429 && status < 500) break;
+      if (status !== 0 && status !== 408 && status !== 429 && status < 500) break;
       if (!options.diagnostic && observed && Date.now() - started >= 20000 && !await transport.failure({
         model: request.model ?? '', role: options.role, elapsedMs: Date.now() - started, status,
         requestId: attempt.requestId, body: error instanceof LLMError ? error.body : '', message: String(error),

package/src/web/README.md

@@ -86,4 +86,7 @@ upgrade 断开;登录态是 HttpOnly Cookie 里的无状态签名令牌(见 [con
 | `bots/*/console/client.ts` | `persona:<name>` |
 
 esbuild 输出分包 ESM 和带 hash 的文件名，写入 `asset-manifest.json`；Tailwind 输出 `styles.css`。
+清单的 `sources` 记下 esbuild 读到的每个仓库内源文件的 sha256，`bin/web-assets.mjs` 据此判断产物是否落后于源码；依赖包与 Tailwind 的输入不在其中。
 浏览器代码使用 `tsconfig.web.json` 检查：`pnpm typecheck:web`。
+
+供应商卡片区分当前连接、可连接、配置问题与草稿。其他部署的运行实例选用同一连接时显示实例名并隐藏连接操作；未运行部署的选用记录单独标注。页面每五秒刷新列表，保留详情草稿。

package/src/web/client/console-pages/host.ts

@@ -121,20 +121,20 @@ export class ConsolePageHost {
     this.emitNav();
   }
 
-  /** Mount module panels inside a connection editor while its adapter stages configuration edits. */
-  async mountConnection(pageId: string, root: HTMLElement, scope: Readonly<Record<string, string>>,
+  /** Mount one of a page's panels inside the connection editor; `adapt` stages the panel's configuration edits. */
+  async mountConnection(pageId: string, panelId: string, root: HTMLElement, scope: Readonly<Record<string, string>>,
     adapt: (context: ConsolePanelContext) => ConsolePanelContext): Promise<Disposable> {
     const lifecycle = new Lifecycle(this.deps.onError);
     const page = this.find(pageId);
-    for (const panel of asArray(page?.panels).filter(panel => panel.id !== 'settings')) {
-      const box = this.deps.doc.createElement('div'); root.append(box);
-      try {
-        const impl = panel.builtin ? this.builtinPanel(panel.builtin) : await this.deps.loader.resolvePanel(pageId, panel.id, page?.client);
-        if (lifecycle.disposed) break;
-        const result = await impl.mount(adapt(this.panelContext(pageId, panel.id, box, lifecycle, this.generation, scope)));
+    const panel = asArray(page?.panels).find(candidate => candidate.id === panelId);
+    try {
+      if (!panel) throw new Error(S.noSuchPanel(page?.label ?? pageId, panelId));
+      const impl = panel.builtin ? this.builtinPanel(panel.builtin) : await this.deps.loader.resolvePanel(pageId, panel.id, page?.client);
+      if (!lifecycle.disposed) {
+        const result = await impl.mount(adapt(this.panelContext(pageId, panel.id, root, lifecycle, this.generation, scope)));
         if (result) lifecycle.own(result);
-      } catch (error) { box.textContent = String(error); }
-    }
+      }
+    } catch (error) { root.textContent = String(error); }
     return lifecycle;
   }
 

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

@@ -6,33 +6,60 @@ 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 type { Disposable } from '../../../shared/client-panel.ts';
 import { S } from './strings.ts';
 
-export interface DetailController { dispose(): void; dirty(): boolean; leave(): Promise<boolean>; }
+export interface DetailController { dispose(): void; }
 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>;
+  /** Every edit; `dirty` is false when the form again equals the saved connection. */
+  changed(editing: Editing, invalid: boolean, dirty: boolean): void;
+  onSaved(name: string, select?: boolean): Promise<void>; cancelled(): Promise<void>;
+  deleted(): Promise<void>; duplicate(editing: Editing): Promise<void>;
 }
+type Section = Module['sections'][number];
+type Spec = NonNullable<Detail['entry']['spec']>;
+/** What a save would write; `raw` only carries field text and never reaches the server. */
+const snapshot = (editing: Editing) => JSON.stringify({ name: editing.name, entry: editing.entry, secretValue: editing.secretValue });
+/** Protocol knobs the editor keeps under the protocol block; the rest of a module's scalars belong to its own sections. */
+const PROTOCOL_FIELDS = ['endpointPath', 'extraHeaders', 'extraBody'];
+/**
+ * One connection's editor. Sections come from `module.sections` in declared order: a `builtin`
+ * names a block drawn here, the rest are the module's own panels, mounted with their edits staged
+ * into `editing`.
+ */
 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: {} });
+  const persisted: Editing | null = saved ? { original: saved.name, name: saved.name, entry: saved.entry, revision: saved.revision, secretValue: '', raw: {} } : null;
+  const editing: Editing = structuredClone(options.draft ?? persisted!);
   editing.entry.spec ??= { model: '', thinking: false };
-  let baseline = JSON.stringify(editing);
-  const dirty = () => JSON.stringify(editing) !== baseline;
+  if (persisted) (persisted.entry.spec ??= { model: '', thinking: false });
+  const dirty = () => !persisted || snapshot(editing) !== snapshot(persisted);
   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;
+  const panelHandles: Disposable[] = [];
   let panelHost: ReturnType<NonNullable<FeatureContext['consolePageHost']>> | null = null;
-  const change = () => options.changed(editing, !!form.querySelector('[aria-invalid="true"]'));
+  /** The model block's way of showing a spec a module panel changed. */
+  let syncSpec: (() => void) | null = null;
+  /** A saved connection shows the discard button only while the form differs from what is saved. */
+  let cancel: HTMLButtonElement | null = null;
+  const change = () => {
+    if (cancel) cancel.hidden = !!saved && !dirty();
+    options.changed(editing, !!form.querySelector('[aria-invalid="true"]'), dirty());
+  };
   const run = (work: () => Promise<unknown>) => { void work().catch(error => { if (!lifecycle.disposed) report.textContent = String(error); }); };
+  /** Preview name for an unsaved connection; the server resolves secrets by it. */
+  const identity = saved?.name ?? 'draft';
+  /** The probe and the model list run on what the form holds, key included, before anything is saved. */
+  const draftBody = () => ({ entry: editing.entry, ...(editing.secretValue ? { secretValue: editing.secretValue } : {}) });
+  const disposePanels = () => { for (const handle of panelHandles.splice(0)) handle.dispose(); };
   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');
@@ -57,206 +84,226 @@ export async function mountDetail(options: Options): Promise<DetailController> {
     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;
+  function block(box: HTMLElement, section: Section, fold = false) {
+    const card = fold ? ui.foldSheet('connection-' + section.id, { title: section.title, desc: section.description }) : ui.sheet({ title: section.title, desc: section.description });
+    box.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 => {
+  /** Reads a dotted path under the entry; writes create the objects on the way. */
+  const entryPath = (suffix: string) => {
+    const parts = suffix.split('.');
+    return {
+      get: () => parts.reduce<unknown>((value, part) => (value as Record<string, unknown> | undefined)?.[part], editing.entry),
+      set: (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>;
+        if (value === undefined) delete target[parts.at(-1)!]; else target[parts.at(-1)!] = value;
+      },
+    };
+  };
+  function endpointBlock(box: HTMLElement, section: Section) {
+    const body = block(box, section);
+    field(body, '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 key = field(body, 'key', S.key, editing.secretValue, value => { editing.secretValue = value; }, undefined, 'password');
+    key.placeholder = saved?.secretConfigured !== 'none' && saved ? '••••••••' : 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);
+        const result = await post<{ ok: boolean; status: number | null; elapsedMs: number; model?: string; error?: string; hint?: string }>(connectionPath(identity) + '/test', draftBody(), 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);
+    }) });
+    const testRow = ui.rowbar(); testRow.classList.add('connection-test'); testRow.append(test);
+    if (saved?.readiness.reason) testRow.append(ui.msgline(saved.readiness.reason, true));
+    body.append(testRow);
+  }
+  function modelBlock(box: HTMLElement, section: Section, module: Module, spec: Spec) {
+    const body = block(box, section);
+    const modelInput = field(body, '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); body.append(catalog);
     let listedModels: Array<{ id: string; contextWindow?: number }> = [];
     let contextInput: HTMLInputElement | null = null;
+    const windowNote = ui.msgline();
+    const noteCatalogWindow = () => {
+      if (!listedModels.length) { windowNote.textContent = ''; return; }
+      windowNote.textContent = listedModels.find(item => item.id === spec.model)?.contextWindow ? '' : S.catalogNoWindow;
+    };
     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(); }
+      noteCatalogWindow();
     }, 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);
+      try { const result = await post<{ models: Array<{ id: string; contextWindow?: number }> }>(connectionPath(identity) + '/models', draftBody(), opts);
         catalog.replaceChildren(...result.models.map(item => { const option = ui.h('option'); option.value = item.id; return option; }));
         listedModels = result.models;
+        noteCatalogWindow();
       } finally { fetch.disabled = false; }
-    }) }); model.append(fetch);
-    const tiers = selectedModule?.reasoningTiers ?? [];
+    }) }); body.append(fetch);
+    const tiers = module.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 => {
+      } }); select.setAttribute('aria-label', S.reasoning); body.append(ui.field(S.reasoning, select));
+    } else field(body, '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 => {
+      const input = field(body, 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));
+    body.append(windowNote);
+    if (module.serviceTiers.length) {
+      const select = ui.select({ value: editing.entry.serviceTier ?? '', options: [{ value: '', label: '—' }, ...module.serviceTiers.map(tier => ({ value: tier.id, label: tier.label }))], onChange: value => { editing.entry.serviceTier = value; change(); } });
+      select.setAttribute('aria-label', S.tier); body.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');
+    images.addEventListener('change', () => { editing.entry.multimodal = images.checked; change(); }, opts); body.append(ui.field(S.images, images));
+    syncSpec = () => { modelInput.value = spec.model; errors.get('model')?.(); if (contextInput && spec.contextWindow !== undefined) contextInput.value = String(spec.contextWindow); };
+  }
+  function pricingBlock(box: HTMLElement, section: Section) {
+    const body = block(box, section, true);
     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);
+    body.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));
+  }
+  /** Module scalars the editor renders itself: declared fields of a module that ships no sections of its own. */
+  function groupBlock(box: HTMLElement, group: ConfigGroup) {
+    const scalars = Object.entries(group.schema.properties ?? {}).filter(([path, property]) => property.type !== 'object' && !PROTOCOL_FIELDS.some(name => path.endsWith('.' + name)));
+    if (!scalars.length) return;
+    const body = block(box, { id: group.id, title: group.schema.title ?? group.id, description: group.schema.description });
+    for (const [path, property] of scalars) {
+      const at = entryPath(path.slice(`providers.${identity}.`.length));
+      const control = configField(ui, property, at.get(), () => { if (control.read) { at.set(control.read()); change(); } }, lifecycle.signal);
+      control.node.setAttribute('aria-label', property.title ?? path);
+      body.append(ui.field(property.title ?? path, control.node));
+      if (property.description) body.append(ui.h('p', 'tdesc', property.description));
+    }
+  }
+  function protocolBlock(box: HTMLElement, section: Section, groups: ConfigGroup[]) {
+    const body = block(box, section, true);
+    field(body, 'secret', S.secret, editing.entry.secret ?? '', value => { if (value) editing.entry.secret = value; else delete editing.entry.secret; });
+    for (const group of groups) for (const [path, property] of Object.entries(group.schema.properties ?? {})) {
+      const suffix = path.slice(`providers.${identity}.`.length);
+      const at = entryPath(suffix);
+      if (property.type === 'object') { jsonField(body, path, property.title ?? suffix.split('.').at(-1)!, at.get(), false, at.set); continue; }
+      if (!PROTOCOL_FIELDS.some(name => suffix.endsWith(name))) continue;
+      const control = configField(ui, property, at.get(), () => { if (control.read) { at.set(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));
+    }
+  }
+  async function render() {
+    const gen = ++rendering;
+    disposePanels(); syncSpec = null;
+    errors.clear(); form.replaceChildren();
+    const identityCard = ui.sheet({ title: S.basic }); identityCard.el.classList.add('connection-identity'); form.append(identityCard.el);
+    const basic = identityCard.body;
+    field(basic, 'name', S.name, editing.name, value => { editing.name = value; }, value => value === saved?.name ? null : validateProviderName(value) ? S.nameHint : null)
+      .placeholder = S.newName;
+    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; });
+    }
+    const flow = ui.h('div', 'connection-flow'); form.append(flow);
+    const spec = editing.entry.spec ??= { model: '', thinking: false };
     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: {} });
-      }) }));
+        await post(connectionPath(saved.name) + '/delete', { expectedRevision: saved.revision }, opts); await options.deleted();
+      }) }), ui.button(S.duplicate, { onClick: () => run(() => 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);
+    cancel = ui.button(S.cancel, { onClick: () => run(() => options.cancelled()) });
+    cancel.hidden = !!saved && !dirty();
+    actions.append(ui.h('span', 'grow'), cancel, ui.button(S.save, { variant: 'primary', onClick: () => run(() => save()) }));
+    form.append(actions, ui.h('div', 'connection-shared', S.shared), ui.h('div', 'connection-shared', S.draftNote));
+    if (!selectedModule) { flow.append(ui.msgline(saved ? S.readiness['module-missing'] : S.chooseModule)); return; }
+    const groups = (await post<ConfigGroup[]>('/api/provider-modules/config', { name: identity, entry: editing.entry }, opts)).filter(group => !group.id.endsWith('.connection'));
     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));
+    const ownSections = selectedModule.sections.some(section => !section.builtin);
+    const pending: Array<{ section: Section; box: HTMLElement }> = [];
+    for (const section of selectedModule.sections) {
+      const box = ui.h('div', 'connection-step'); flow.append(box);
+      switch (section.builtin) {
+        case 'connection-endpoint': endpointBlock(box, section); break;
+        case 'connection-model':
+          modelBlock(box, section, selectedModule, spec);
+          if (!ownSections) for (const group of groups) groupBlock(box, group);
+          break;
+        case 'connection-pricing': pricingBlock(box, section); break;
+        case 'connection-protocol': protocolBlock(box, section, groups); break;
+        default: pending.push({ section, box });
       }
     }
-    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 => ({
+    if (!pending.length || !ctx.consolePageHost) return;
+    panelHost ??= ctx.consolePageHost({ root: ui.h('div'), route: () => ['providers', saved?.name ?? ''] });
+    await panelHost.load();
+    if (gen !== rendering || lifecycle.disposed) return;
+    for (const { section, box } of pending) {
+      const handle = await panelHost.mountConnection(`llm:${editing.entry.kind}`, section.id, box, { 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;
+            entryPath(path.slice(prefix.length)).set(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(); }
+          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 }; syncSpec?.(); 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;
-      });
+      if (gen !== rendering || lifecycle.disposed) { handle.dispose(); return; }
+      panelHandles.push(handle);
     }
   }
   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; }
+    if (!valid) {
+      for (const input of form.querySelectorAll('[aria-invalid="true"]')) { const fold = input.closest('details'); if (fold) fold.open = true; }
+      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;
+      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 };
+  return { dispose: () => { lifecycle.dispose(); disposePanels(); panelHost?.unmount(); } };
 }