cortico 0.1.0 → 0.1.2

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

@@ -8,12 +8,13 @@ import type {
   ConsoleStreamHandle,
   Disposable,
 } from '../../../shared/client-panel.ts';
-import { PROVIDERS_LAMP_ID, panelStreamRoute } from '../../../shared/console-protocol.ts';
+import { panelStreamRoute } from '../../../shared/console-protocol.ts';
 import type { FeatureContext, FrameworkFeature } from '../feature.ts';
 import { get, post } from '../../core/api.ts';
 import { openStream } from '../../core/stream.ts';
 import { browserSocketEnv, openFrameworkSocket, type SocketEnv } from '../../core/websocket.ts';
 import { buildCtxPanel, computeCtx, type ContextBreakdown } from './context.ts';
+import { exportDiagnostics } from './diagnostics.ts';
 import { createForkView, MAIN_ID, MAIN_LABEL } from './fork.ts';
 import {
   arr,
@@ -22,7 +23,7 @@ import {
   type StatusSnapshot,
   type ToolSchemaDoc,
 } from './protocol.ts';
-import { subscribeLamps } from '../../ui/lamp.ts';
+import { icon } from '../../ui/icons.ts';
 import { createOnboarding, type OnboardingView } from './onboarding.ts';
 import { createSessionBand } from './sessions.ts';
 import { applyDisplayName, createStatusBand } from './status.ts';
@@ -150,13 +151,29 @@ function mountLive(ctx: FeatureContext, env: SocketEnv): Disposable | void {
   };
 
   const summary = ui.h('div', 'live-summary');
-  summary.append(status.el, ui.h('span', 'grow'), netEl);
+  const connection = ui.button('', { onClick: () => ctx.router.navigate(state.status?.modelConnection ? ['providers', state.status.modelConnection.name] : ['providers']) });
+  connection.className = 'live-connection';
+  const connectionValue = ui.h('span', 'live-connection-value');
+  connection.append(ui.h('span', 'live-connection-label', S.currentProvider), connectionValue);
+  summary.append(status.el, ui.h('span', 'grow'), connection, netEl);
   band.append(summary, sessionBand.el);
 
+  const exportButton = ui.button('', {
+    size: 'sm',
+    onClick: () => {
+      void exportDiagnostics({ doc, signal: ctx.signal }).catch((err: unknown) => {
+        ui.toast(S.exportFailed, 'bad');
+        ctx.onError(err);
+      });
+    },
+  });
+  exportButton.className += ' btn-ico';
+  exportButton.append(icon(doc, 'download'), ui.h('span', null, S.exportDiagnostics));
+
   const composer = ui.promptInput({
     label: S.composerLabel,
     placeholder: S.composerPlaceholder,
-    hint: S.composerHint,
+    leading: exportButton,
     tools: ctxAnchor,
     images: { max: 8 },
     onSubmit: (text, images) => {
@@ -175,21 +192,20 @@ function mountLive(ctx: FeatureContext, env: SocketEnv): Disposable | void {
   timeline.rebuild([], { empty: S.emptyConnecting });
 
   let providerReady = false;
-  ctx.lifecycle.own(subscribeLamps(ctx.root.ownerDocument, (lamps) => {
-    const lamp = lamps[PROVIDERS_LAMP_ID]?.[0];
-    composer.setPlaceholder(lamp && lamp.state !== 'online' ? S.composerNoProvider : null);
-    providerReady = lamp?.state === 'online';
-    onboarding?.setProvider(providerReady);
-  }));
 
   const resumeRun = (): Promise<unknown> => post('/api/run/resume', {}, { signal: ctx.signal });
 
+  /**
+   * 开场引导认部署目录里那个一次性标记（`.onboarding`，自建部署时写入）。session 与事件游标
+   * 都当不了判据：全新部署起来就有一条系统前缀和一条 session 开场事件，而上下文交接后 session
+   * 反倒是空的。
+   */
   let onboarding: OnboardingView | null = null;
   /** 本次挂载里已经收过一次；销标记的请求在路上时状态帧还会报 pending。 */
   let dismissed = false;
   const dismissOnboarding = (): void => {
     dismissed = true;
-    void post('/api/onboarding/dismiss', {}, { signal: ctx.signal }).catch(() => { /* 删除失败时标记仍在，下次挂载仍显示引导。 */ });
+    void post('/api/onboarding/dismiss', {}, { signal: ctx.signal }).catch(() => { /* 下次打开再收 */ });
     syncOnboarding();
   };
   const syncOnboarding = (): void => {
@@ -212,6 +228,7 @@ function mountLive(ctx: FeatureContext, env: SocketEnv): Disposable | void {
       });
       onboarding.setProvider(providerReady);
       timeline.setHeader(onboarding.el);
+      // 引导期间系统前缀那张卡先收起来:这一页此刻要说的是怎么把 bot 配起来。
       timeline.setHideSystem(true);
       timeline.rebuild(state.messages, { head: state.head });
       return;
@@ -261,6 +278,12 @@ function mountLive(ctx: FeatureContext, env: SocketEnv): Disposable | void {
   const setStatus = (st: StatusSnapshot | null): void => {
     state.status = st;
     status.render(st);
+    const current = st?.modelConnection;
+    connectionValue.textContent = current ? `${current.name} · ${current.model ?? '—'}` : S.noProvider;
+    connection.title = current ? `${current.moduleTitle} (${current.module})\n${current.baseUrl}` : S.noProvider;
+    providerReady = current?.ready === true;
+    composer.setPlaceholder(providerReady ? null : S.composerNoProvider);
+    onboarding?.setProvider(providerReady);
     if (st && applyDisplayName(doc, st.displayName, state.displayName)) {
       state.displayName = str(st.displayName);
     }

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

@@ -1,5 +1,5 @@
 /**
- * 开场引导的配置状态与操作入口。
+ * 新部署的开场引导：四条 Cortico 署名的气泡，用 assistant 直接输出那套气泡样式。
  * 端点状态由终端页从 providers 灯推进来，已启用的 World 在挂载时读一次接口。
  * 是否显示由终端页判定，这里只画。
  */
@@ -60,6 +60,7 @@ export function createOnboarding(deps: OnboardingDeps): OnboardingView {
     const box = ui.h('div', 'monolog');
     box.appendChild(ui.h('div', 'monolog-body', line));
     const state = ui.h('div', 'ob-state hidden');
+    // 外观取子页签那颗按钮（`.seg`），`ob-btn` 只挂本页的微调。
     const button = ui.h('button', action?.accent ? 'seg active ob-btn ob-go' : 'seg active ob-btn');
     button.type = 'button';
     if (action?.icon) button.appendChild(icon(doc, action.icon));
@@ -87,6 +88,7 @@ export function createOnboarding(deps: OnboardingDeps): OnboardingView {
   bubble(S.obPrompts, { label: S.obGoEdit, onClick: () => deps.go(['prompts']) });
 
   const startLabel = S.obStart;
+  // 最后那颗按的是「开始跑」，图标与左下角运行控制里的继续是同一个。
   const ready = bubble(S.obReady, {
     label: startLabel,
     icon: 'play',
@@ -106,6 +108,7 @@ export function createOnboarding(deps: OnboardingDeps): OnboardingView {
     el,
     setProvider(available) {
       provider.setState(available ? S.obProviderReady : S.obProviderNone, available ? 'ok' : 'bad');
+      // 最后一条只在还缺端点时说话：配好了就只剩那颗按钮。
       ready.setState(available ? null : S.obProviderNone, 'bad');
       ready.button.disabled = !available;
     },

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) =>
@@ -111,14 +114,14 @@ const zh = {
 
   // onboarding.ts
   obWho: 'Cortico',
-  obWelcome: '欢迎使用 Cortico。',
-  obProvider: '配置模型提供商后即可开始对话。',
+  obWelcome: '欢迎使用 Cortico！现在，让我们开始部署你的第一个 Cortico Bot。',
+  obProvider: '首先，请配置模型提供商：',
   obProviderNone: '尚未配置可用的模型提供商',
   obProviderReady: '模型提供商已配置',
-  obWorlds: '按需启用 World，也可以仅使用终端对话。',
-  obWorldsState: (labels: readonly string[]) => `已启用 ${labels.length} 个 World：${labels.join('、')}`,
-  obPrompts: '系统提示词定义人格描述、行为规范和语言风格，可按需修改。',
-  obReady: '配置好后，可以邀请 bot 开口。',
+  obWorlds: '接下来，请启用并配置你的 Bot 接入的外部环境模组（Cortico World）。也可以先仅启用终端对话。',
+  obWorldsState: (labels: readonly string[]) => `当前已经启用了 ${labels.length} 个外部环境：${labels.join('、')}`,
+  obPrompts: '最后，你可以在这里方便地编辑系统提示词，来提供人格描述、行为规范、语言风格等定制化内容！',
+  obReady: '准备就绪！',
   obGoConfigure: '前往配置',
   obGoEdit: '开始编辑',
   obStart: '打个招呼？',
@@ -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…',
@@ -235,15 +241,15 @@ const en: typeof zh = {
 
   // onboarding.ts
   obWho: 'Cortico',
-  obWelcome: "Welcome to Cortico.",
-  obProvider: 'Configure a model provider to start chatting.',
+  obWelcome: "Welcome to Cortico! Let's set up your first Cortico Bot.",
+  obProvider: 'First, configure a model provider:',
   obProviderNone: 'No usable model provider yet',
   obProviderReady: 'Model provider configured',
-  obWorlds: 'Enable Worlds as needed, or use terminal chat alone.',
+  obWorlds: 'Next, enable and configure the external environments your bot reaches (Cortico Worlds). Terminal chat alone is a fine start.',
   obWorldsState: (labels: readonly string[]) =>
     `Currently ${labels.length} external environment${labels.length === 1 ? '' : 's'} enabled: ${labels.join(', ')}`,
-  obPrompts: 'You can edit the system prompt to set personality, behavior and language style.',
-  obReady: 'Once configured, you can invite the bot to speak.',
+  obPrompts: 'Finally, the system prompt is edited here: who it is, how it behaves, how it talks.',
+  obReady: 'Ready to go!',
   obGoConfigure: 'Configure',
   obGoEdit: 'Edit',
   obStart: 'Say hello?',

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

@@ -100,7 +100,7 @@ export interface TimelineView {
   append(m: ContextRecord, index: number, live: boolean): void;
   /** 说话人展示名。头像图片加载不到时,ASSISTANT 组左栏的占位圆里印它的首字;下一次画到组时生效。 */
   setSpeaker(name: string): void;
-  /** 是否隐藏系统前缀，下一次重画生效。 */
+  /** 开场引导期间把系统前缀那张卡收起来，下一次重画生效。 */
   setHideSystem(hide: boolean): void;
   /** 在滚动区顶部挂一块外部内容，随时间线一起滚；传 null 取下。重画不动它。 */
   setHeader(node: HTMLElement | null): void;
@@ -131,6 +131,7 @@ export function createTimeline(deps: TimelineDeps): TimelineView {
   let turn: Turn | null = null;
   /** 头像占位圆里的字。 */
   let speakerInitial = 'B';
+  /** 收起系统前缀卡。 */
   let hideSystem = false;
   /** 挂在滚动区顶部的外部内容（开场引导）。 */
   let header: HTMLElement | null = null;

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]; },
+  };
+}