@toddzheng024/dscode-desktop 0.7.34 → 0.7.36

package/docs/releases/0.7.36.md

@@ -0,0 +1,14 @@
+# DSCODE 0.7.36
+
+This release exposes the DSCODE agent preset to ACP clients through the source and npm launchers.
+
+- **ACP entry point:** `dscode acp` runs DSH's native stdio bridge with DSCODE tools and provider adapters. It uses the saved model selection or `--model PROVIDER/ID`; configure credentials and custom services in the terminal interface first. Configure clients with executable `dscode` and arguments `["acp"]`. See the [ACP guide](../acp.md) for setup.
+- **Client approvals and session lifecycle:** ACP sessions use the `ask` permission preset and send approval requests to the client. Creation, prompts, cancellation, model configuration, listing, resume, close and MCP attachment inherit the pinned native bridge. Stdout carries protocol frames, terminal-only generation is disabled, and closing stdin exits the runtime while preserving the installation's session state.
+- **Support boundary:** the bridge retains the `deepseek-harness-acp` identity. It does not add transcript replay through `session/load`, modes, slash commands, client filesystem/terminal delegation or interactive question forms. This is a terminal-launcher transport; the Desktop plugin retains its existing support boundary.
+- **Distribution checks:** the npm launcher includes its ACP routing code, the bundle includes the bridge, and Hub publication requires a successful protocol probe against the installed artifacts. Native tool-result regression cases cover all three custom API formats using upstream's serializer. Linux CI uses the official Node image's ECR Public mirror to avoid Docker Hub anonymous pull limits.
+
+Update the global launcher with `npm install -g @toddzheng024/dscode@latest`, then run `dscode update` to refresh an existing Hub profile. A fresh installation provisions its matching profile on first use.
+
+Verification of the merged feature code passed `npm run check` on Node 22.19.0 and 24.19.0: 1,087 unit/component tests, both TypeScript checks, 80.16% complete source line coverage, integration/package checks and 63 offline evaluation cases. Real Chrome checks and the scripted browser evaluation passed. Linux end-to-end verification passed all seven steps, including installed ACP, Hub installation, agent execution, failed upgrade and rollback; the GitHub macOS and Linux gates also passed. Documentation and lint checks run for this version change, and the release workflow requalifies the exact versioned terminal and Desktop archives before publication.
+
+The ACP probe covers initialization, a fixture custom API, DSCODE tool calls, allow/reject approvals, cancellation, list/resume/close and EOF shutdown. Specific editor compatibility and paid model endpoints have no automated case in this release. No live-model quality claim follows from the fixture probes.

package/docs/triggers.md

@@ -7,7 +7,7 @@ A trigger is not a way to reach a session that is already open: that is [session
 ## Experimental Desktop scheduling
 
 The [combined Desktop package](browser-use.md#install-the-experimental-combined-desktop-package)
-adds **Settings → DSCODE schedules**. Open a DSCODE session in the target project,
+adds **Settings → DSCODE → Schedules**. Open a DSCODE session in the target project,
 then select that session in the settings page. The form creates or edits an
 interval, calendar, external-event or script task. New form entries default to
 read-only execution and a persistent task-owned session. You can pause a task,

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "DSCODE",
-    "description": "Coding collaboration, session memory, browser workflows and community plugin discovery for Harness Desktop."
+    "description": "Coding collaboration, session memory and browser workflows for Harness Desktop."
   }
 }

package/locale/zh-cn.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "DSCODE",
-    "description": "为 Harness Desktop 提供编码协作、会话记忆、浏览器工作流和社区插件发现。"
+    "description": "为 Harness Desktop 提供编码协作、会话记忆和浏览器工作流。"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toddzheng024/dscode-desktop",
-  "version": "0.7.34",
+  "version": "0.7.36",
   "private": false,
   "description": "DSCODE for Harness Desktop: coding collaboration, session memory, browser workflows and task management.",
   "license": "MIT",
@@ -46,7 +46,6 @@
     "./workspace": "./plugins/desktop-workspace/index.mjs",
     "./credentials": "./plugins/credentials/index.mjs",
     "./custom": "./plugins/custom/index.mjs",
-    "./hub": "./plugins/hub/desktop-host.mjs",
     "./openrouter": "./plugins/openrouter/index.mjs",
     "./grok": "./plugins/grok/index.mjs",
     "./opencode-go": "./plugins/opencode-go/index.mjs",
@@ -92,8 +91,6 @@
     "@modelcontextprotocol/sdk": "1.30.0",
     "chrome-devtools-mcp": "1.10.1",
     "ws": "8.21.3",
-    "@dsh-plugin-hub/schemas": "0.5.0",
-    "semver": "7.8.5",
     "imapflow": "2.0.5",
     "mailparser": "3.9.28",
     "nodemailer": "10.0.10",
@@ -112,7 +109,7 @@
     "hub": {
       "schemaVersion": 1,
       "displayName": "DSCODE Desktop",
-      "summary": "Coding collaboration, memory, browser workflows and community plugin discovery for Harness Desktop.",
+      "summary": "Coding collaboration, memory, browser workflows and task management for Harness Desktop.",
       "description": "Adds DSCODE to the official Harness Desktop application. Requires the exact DSH runtime 0.2.0-rc.2. Qualified on macOS Apple Silicon. Install the plugin, select the DSCODE agent preset and configure a model account. This package does not include a standalone application or the terminal UI.",
       "homepage": "https://github.com/qiz029/dscode#readme",
       "categories": [
@@ -123,8 +120,7 @@
         "coding",
         "desktop",
         "browser",
-        "collaboration",
-        "plugin-hub"
+        "collaboration"
       ],
       "compatibility": {
         "dsh": "0.2.0-rc.2",
@@ -139,7 +135,6 @@
       },
       "entryIds": [
         "dscode-desktop",
-        "dscode-hub",
         "dscode-browser"
       ],
       "before": [],

package/plugins/acp/cli.mjs

@@ -0,0 +1,45 @@
+export const USAGE = `Usage: dscode acp [options]
+Serve Agent Client Protocol over stdio using the DSCODE agent preset.
+The client supplies each session's workspace. Stdout contains only ACP frames.
+
+Options:
+  --model PROVIDER/ID   initial model (default: the saved default model)
+  --patch FILE          additional composition overlay (repeatable)
+  -h, --help            show this help
+
+Configure credentials and custom providers in the TUI before connecting.
+Permission requests are answered by the ACP client. Disconnecting exits.`;
+
+export function parseAcpArgs(argv) {
+  const options = { patches: [], help: false };
+  for (let index = 0; index < argv.length; index++) {
+    const arg = argv[index];
+    if (arg === '--help' || arg === '-h') { options.help = true; continue; }
+    if (!['--model', '--patch'].includes(arg)) throw Error(`Unknown ACP option: ${arg}`);
+    const value = argv[++index];
+    if (!value || value.startsWith('-')) throw Error(`${arg} requires a value`);
+    if (arg === '--patch') options.patches.push(value);
+    else {
+      if (!/^[^/\s]+\/\S+$/.test(value)) throw Error('--model expects provider/model');
+      options.model = value;
+    }
+  }
+  return options;
+}
+
+export function acpOverlay(entry, options = {}) {
+  return `${['tui-startup', 'tui-runner', 'session-title-llm'].map(id => `- id: ${id}\n  disabled: true`).join('\n')}
+- id: dscode-session-cards
+  config:
+    enabled: false
+- id: dscode-memory
+  config:
+    generate: false
+- insert:
+    - id: acp-app-startup
+      name: '@deepseek-ai/dsh-acp-app'
+    - id: dscode-acp
+      name: ${JSON.stringify(entry)}
+      config: ${JSON.stringify(options.model ? { model: options.model } : {})}
+`;
+}

package/plugins/acp/index.mjs

@@ -0,0 +1,44 @@
+import { apply as applyAcp } from '@deepseek-ai/dsh-acp';
+import z from '@deepseek-ai/schemastery';
+
+export const name = 'dscode-acp';
+export const inject = ['acpAppStartup', 'agents', 'agentPresets', 'agentDefaultModel', 'permissionPresets', 'llm', 'sessionPersistence', 'sessions', 'dscodeCustom'];
+export const Config = z.object({ model: z.string() });
+
+// Scope the factory to this bridge: TUI and delegated agents keep their own
+// composition. ACP still owns model selection, MCP attachment and disposal.
+export function presetAgents(ctx) {
+  const wrap = method => async (options) => {
+    const handle = await ctx.agents[method]({
+      ...options,
+      ...(method === 'create' ? { meta: { ...options.meta, agentPreset: 'dscode' } } : {}),
+      setup: async (agentCtx, agent) => {
+        await ctx.agentPresets.mount(agentCtx, 'dscode');
+        await options.setup?.(agentCtx, agent);
+      },
+    });
+    ctx.permissionPresets.set(handle.agent.session, 'ask');
+    return handle;
+  };
+  const overrides = { create: wrap('create'), resume: wrap('resume') };
+  return new Proxy(ctx.agents, {
+    get(target, key) {
+      if (Object.hasOwn(overrides, key)) return overrides[key];
+      const value = Reflect.get(target, key, target);
+      return typeof value === 'function' ? value.bind(target) : value;
+    },
+  });
+}
+
+export function startAcp(ctx, config = {}, bridge = applyAcp) {
+  const selection = config.model
+    ? { provider: config.model.slice(0, config.model.indexOf('/')), model: config.model.slice(config.model.indexOf('/') + 1) }
+    : ctx.agentDefaultModel.currentSelection();
+  const scoped = ctx.extend({ agents: presetAgents(ctx) });
+  bridge(scoped, { provider: selection.provider, model: selection.model });
+}
+
+export async function apply(ctx, config) {
+  await ctx.get('dscodeCustom').refresh();
+  startAcp(ctx, config);
+}

package/plugins/browser/desktop-client.mjs

@@ -4,7 +4,7 @@ globalThis.__ModuleLoader__.load({
   factory: require => {
     const { createElement: h, useState, useEffect, useRef } = require('react');
     const id = '@toddzheng024/dscode-browser-desktop';
-    const button = { padding: '7px 11px', border: '1px solid #8886', borderRadius: 6, background: 'transparent', color: 'inherit', cursor: 'pointer' };
+    const button = { padding: '7px 11px', border: '.5px solid var(--dsw-alias-border-l3, #8886)', borderRadius: 'var(--dsw-radius-md, 6px)', background: 'transparent', color: 'inherit', cursor: 'pointer', font: 'inherit' };
     function previewButton(props, label) {
       return h('button', { ...props, style: { ...button, ...props.style, ...(props.disabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}) } }, label);
     }
@@ -197,9 +197,9 @@ globalThis.__ModuleLoader__.load({
         setNotice('Browser control resumed. Your draft is kept. Capture a new preview before sending.');
         await list(current, { preserveDraft: true });
       });
-      return h('section', { 'aria-label': 'DSCODE browser preview', style: { padding: 12, boxSizing: 'border-box', overflow: 'auto', height: '100%', display: 'flex', flexDirection: 'column', gap: 8, color: 'inherit' } },
+      return h('section', { className: 'dscode-ui', 'aria-label': 'DSCODE browser preview', style: { padding: 12, boxSizing: 'border-box', overflow: 'auto', height: '100%', display: 'flex', flexDirection: 'column', gap: 8, color: 'inherit' } },
         h('strong', null, 'Browser preview'),
-        handoff && h('div', { 'aria-label': 'Browser handoff', role: 'status', style: { border: '1px solid #8886', borderRadius: 8, padding: 10, overflowWrap: 'anywhere' } },
+        handoff && h('div', { 'aria-label': 'Browser handoff', role: 'status', style: { border: '.5px solid var(--dsw-alias-border-l3, #8886)', borderRadius: 8, padding: 10, overflowWrap: 'anywhere' } },
           h('strong', null, 'Waiting for you'),
           h('p', null, handoff.reason),
           handoff.invalidated && h('p', null, 'Chrome restarted. The original tab is unavailable; choose a live tab after resuming.'),
@@ -213,7 +213,7 @@ globalThis.__ModuleLoader__.load({
           previewButton({ style: button, disabled: busy || controlBusy || !pageId || !!handoff, onClick: () => run(refresh) }, 'Refresh preview'),
           frame && previewButton({ style: button, onClick: () => setExpanded(!expanded) }, expanded ? 'Fit image' : 'Expand image')),
         h('select', { 'aria-label': 'Browser tab', value: pageId, disabled: busy || controlBusy, onChange: e => { setPageId(e.target.value); setFrame(null); setPoint(null); setText(''); setLive(false); }, style: { ...button, width: '100%' } }, h('option', { value: '' }, 'Choose a tab'), ...pages.map(page => h('option', { key: page.id, value: String(page.id) }, `${page.id} · ${page.url}`))),
-        origin && h('details', { 'aria-label': 'Browser site permissions', style: { border: '1px solid #8886', borderRadius: 8, padding: '8px 10px', margin: 0, minWidth: 0 } },
+        origin && h('details', { 'aria-label': 'Browser site permissions', style: { border: '.5px solid var(--dsw-alias-border-l3, #8886)', borderRadius: 8, padding: '8px 10px', margin: 0, minWidth: 0 } },
           h('summary', { 'aria-label': `Site permissions · ${access}`, style: { cursor: 'pointer' } }, 'Site permissions · ', h('span', { 'aria-label': 'Site access status' }, access)),
           h('div', { style: { fontSize: 12, overflowWrap: 'anywhere', margin: '8px 0' } }, origin),
           h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6 } },
@@ -232,7 +232,7 @@ globalThis.__ModuleLoader__.load({
         frame && h('div', null,
           h('div', { style: { fontSize: 12, overflowWrap: 'anywhere', marginBottom: 8 } }, `${frame.url} · ${new Date(frame.capturedAt).toLocaleTimeString()}`),
           h('div', { style: { position: 'relative', lineHeight: 0, display: 'inline-block', maxWidth: '100%', ...(expanded ? { width: '100%' } : {}) } },
-            h('img', { src: `data:${frame.image.mimeType};base64,${frame.image.data}`, alt: expired ? 'Expired browser preview; refresh before annotating' : 'Captured browser page; click a point to annotate', role: 'button', tabIndex: 0, 'aria-disabled': busy || controlBusy || expired, 'aria-description': 'Enter or Space selects the center. Arrow keys move one pixel; Shift moves ten. Escape clears the point.', onClick: selectPoint, onKeyDown: selectPointKey, style: { maxWidth: '100%', maxHeight: expanded ? 'none' : '30vh', width: expanded ? '100%' : 'auto', height: 'auto', display: 'block', cursor: expired ? 'default' : 'crosshair', borderRadius: 6 } }),
+            h('img', { src: `data:${frame.image.mimeType};base64,${frame.image.data}`, alt: expired ? 'Expired browser preview; refresh before annotating' : 'Captured browser page; click a point to annotate', role: 'button', tabIndex: 0, 'aria-disabled': busy || controlBusy || expired, 'aria-description': 'Enter or Space selects the center. Arrow keys move one pixel; Shift moves ten. Escape clears the point.', onClick: selectPoint, onKeyDown: selectPointKey, style: { maxWidth: '100%', maxHeight: expanded ? 'none' : '30vh', width: expanded ? '100%' : 'auto', height: 'auto', display: 'block', cursor: expired ? 'default' : 'crosshair', borderRadius: 'var(--dsw-radius-md, 6px)' } }),
             point && h('span', { 'aria-label': 'Selected annotation point', style: { position: 'absolute', left: `${point.x * 100}%`, top: `${point.y * 100}%`, width: 20, height: 20, border: '3px solid #f97316', borderRadius: '50%', transform: 'translate(-50%, -50%)', pointerEvents: 'none', boxShadow: '0 0 0 2px white' } }))),
         h('p', { style: { fontSize: 12, margin: 0, opacity: 0.75 } }, 'Preview shows the controlled Chrome tab. Click a point, or focus the image and press Enter or Space to select the center. Arrow keys move one pixel; Shift moves ten. Escape clears the point. Refresh after navigation or after one minute.'),
         frame && point && h('p', { 'aria-label': 'Annotation coordinates', 'aria-live': 'polite', style: { fontSize: 12, margin: 0 } }, `Selected pixel: (${Math.round(point.x * (frame.width - 1))}, ${Math.round(point.y * (frame.height - 1))}) in ${frame.width}×${frame.height}.`),
@@ -259,18 +259,31 @@ globalThis.__ModuleLoader__.load({
       const draftRevision = useRef(0);
       return visible ? h(SessionPreview, { execute, draft: { pageId, setPageId, text, setText, draftRevision } }) : null;
     }
-    function Preview({ sessionId, execute, useTabInfo }) {
+    function PresetPreview({ execute, visible }) {
+      const [state, setState] = useState(null);
+      useEffect(() => {
+        let active = true;
+        execute('availability').then(value => { if (active) setState(value); }, error => { if (active) setState({ error: error.message }); });
+        return () => { active = false; };
+      }, [execute]);
+      if (!state) return h('p', { role: 'status' }, 'Checking DSCODE session…');
+      if (state.error) return h('p', { role: 'alert' }, state.error);
+      if (!state.available) return h('section', { className: 'dscode-ui', style: { padding: 16 } }, h('h3', null, 'DSCODE Browser preview'),
+        h('p', null, 'This session uses another preset. Create a new session and select DSCODE to use this preview. Its original browser tools remain available.'));
+      return h(SessionPane, { execute, visible });
+    }
+    function Preview({ sessionId, execute, useTabInfo, presetOnly }) {
       const { tab } = useTabInfo();
       // Session changes discard the draft. Hidden panes discard their request
       // lock and preview, while late responses stay bound to the original session.
-      return h(SessionPane, { key: sessionId, execute, visible: tab.visible });
+      return h(presetOnly ? PresetPreview : SessionPane, { key: sessionId, execute, visible: tab.visible });
     }
     return {
       inject: ['slots', 'sidebarRightTabs', 'connection'],
-      apply(ctx) {
+      apply(ctx, options = {}) {
         ctx.effect(() => ctx.sidebarRightTabs.register({ id, kind: 'dscode-browser', multiple: false, keepMounted: true, title: () => 'Browser preview', guide: [{ id: 'open', order: 31, title: () => 'Browser preview', description: () => 'Inspect the controlled Chrome tab and send a visual annotation.' }] }), 'dscode-browser-preview.type');
         ctx.effect(() => ctx.slots.inject('sidebar.right.pane.tab', () => ctx.slots.register({ name: 'sidebar.right.pane.tab', key: id,
-          inject: sessionId => ({ sessionId, execute: async (action, args = {}) => {
+          inject: sessionId => ({ sessionId, presetOnly: options.presetOnly === true, execute: async (action, args = {}) => {
             const response = await ctx.connection.rpc.call('/api', 'dscode-browser', { sessionId, action, ...args });
             if (!response.ok) throw Error(response.error.message);
             return response.value;

package/plugins/browser/desktop-host.mjs

@@ -13,6 +13,11 @@ export function apply(ctx) {
         if (!payload || typeof payload !== 'object' || typeof payload.sessionId !== 'string') throw Error('Choose a live session.');
         const agent = ctx.agents.get(payload.sessionId);
         if (!agent) throw Error('The session is no longer active. Open it before using Browser preview.');
+        const available = !ctx.get('dscodeDesktop') || agent.session.header.agentPreset === 'dscode';
+        if (action === 'availability') return { ok: true, value: { available } };
+        if (!available) {
+          throw Error('Browser preview belongs to DSCODE. Create a new session with the DSCODE preset; this session keeps its original browser tools.');
+        }
         if (action === 'start' || action === 'stop' || action === 'resume') {
           if (action === 'resume') {
             const browser = browserForAgent(agent);

package/plugins/credentials/index.mjs

@@ -19,9 +19,11 @@ const LOGINS = new Set(PROVIDERS.filter(provider => provider.login).map(provider
 export default class DscodeCredentials extends LocalCredentialProvider {
   shared;
   sharedConfig;
+  desktop;
   constructor(ctx, config = {}) {
     // Retain the old profile store, including other providers and OAuth records.
     super(ctx, { ...config, path: undefined });
+    this.desktop = config.desktop === true;
     this.sharedConfig = { ...config, path: config.path ?? join(homedir(), '.dscode', 'credentials.yaml') };
   }
   async *[Service.init]() {
@@ -34,6 +36,10 @@ export default class DscodeCredentials extends LocalCredentialProvider {
     yield* super[Service.init]();
   }
   async resolve(ref) {
+    if (this.desktop) {
+      const native = await super.resolve(ref);
+      if (native) return native;
+    }
     // dscode: the Grok subscription rail is the official CLI login, read-only. DSCODE never
     // writes that file: the CLI owns refresh-token rotation, and two writers log the other out.
     if (ref === GROK_TOKEN_REF) {
@@ -47,6 +53,10 @@ export default class DscodeCredentials extends LocalCredentialProvider {
     return super.resolve(ref);
   }
   async describe(ref) {
+    if (this.desktop) {
+      const native = await super.describe(ref);
+      if (native.configured) return LOGINS.has(ref) ? { ...native, source: 'account', writable: false } : native;
+    }
     if (ref === GROK_TOKEN_REF) {
       const state = grokAuthState();
       return state.kind === 'ready' ? { configured: true, source: 'file', writable: false } : { configured: false, writable: false };
@@ -63,6 +73,7 @@ export default class DscodeCredentials extends LocalCredentialProvider {
   set(ref, value) {
     // The CLI file is not a DSCODE store: saving here would go somewhere nothing reads.
     if (ref === GROK_TOKEN_REF) throw new Error('GROK_CLI_TOKEN comes from ~/.grok/auth.json; run grok login instead');
+    if (this.desktop) return super.set(ref, value);
     return (SHARED.has(ref) || isCustomKey(ref)) ? this.shared.set(ref, value) : super.set(ref, value);
   }
   async unset(ref) {

package/plugins/custom/desktop-client.mjs

@@ -3,7 +3,7 @@ globalThis.__ModuleLoader__.load({
   id: '@toddzheng024/dscode-desktop',
   factory: require => {
     const { createElement: h, useState, useEffect, useRef } = require('react');
-    const control = { padding: '8px 10px', border: '1px solid #8886', borderRadius: 6, background: 'transparent', color: 'inherit', font: 'inherit', boxSizing: 'border-box' };
+    const control = { boxSizing: 'border-box', minWidth: 0, maxWidth: '100%' };
     const row = { display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' };
     const resetModel = model => {
       const next = { ...model, thinking: 'default', inputModalities: ['text'] };
@@ -49,10 +49,10 @@ globalThis.__ModuleLoader__.load({
         h('input', { 'aria-label': label, style: { ...control, width: '100%' }, value: value ?? '', onChange: event => onChange(event.target.value), ...options }));
       const choice = (label, value, choices, onChange) => h('label', { style: { display: 'grid', gap: 5, flex: 1 } }, label,
         h('select', { 'aria-label': label, value, onChange: event => onChange(event.target.value), style: control }, ...choices.map(([id, text]) => h('option', { key: id, value: id }, text))));
-      return h('section', { 'aria-label': 'DSCODE model settings', style: { padding: 20, display: 'grid', gap: 16, maxWidth: 850, color: 'inherit' } },
-        h('h2', { style: { margin: 0 } }, 'DSCODE models'),
+      return h('section', { className: 'dscode-ui', 'aria-label': 'DSCODE model settings', style: { padding: 0, display: 'grid', gap: 16, maxWidth: 850, color: 'inherit' } },
+        h('h2', { style: { margin: 0 } }, 'Models'),
         h('p', { style: { margin: 0 } }, 'Connect a private or self-hosted model service. Saved models appear in the model picker.'),
-        error && h('div', { role: 'alert', style: { color: '#d85b5b', whiteSpace: 'pre-wrap' } }, error),
+        error && h('div', { role: 'alert', style: { color: 'var(--dsw-alias-state-error-primary)', whiteSpace: 'pre-wrap' } }, error),
         notice && h('div', { role: 'status' }, notice),
         busy && request.current && h('button', { type: 'button', style: control, disabled: request.current.signal.aborted,
           onClick: () => { request.current?.abort(); setNotice('Cancelling request…'); },
@@ -85,8 +85,8 @@ globalThis.__ModuleLoader__.load({
               change({ backend: found.backend, models });
               setNotice(`Found ${found.models.length} models. Confirm the context size and image support before saving.`);
             }, false, true), button('Add model', async () => change({ models: [...draft.models, { id: '', thinking: 'default', inputModalities: ['text'] }] }))),
-            ...draft.models.map((model, index) => h('fieldset', { key: index, style: { border: '1px solid #8886', borderRadius: 8, padding: 14, display: 'grid', gap: 12 } },
-              h('legend', null, `Model ${index + 1}`),
+            ...draft.models.map((model, index) => h('fieldset', { className: 'dscode-card', key: index, style: { border: '.5px solid var(--dsw-alias-settings-card-stroke)', borderRadius: 'var(--dsw-radius-xl)', padding: 14, display: 'grid', gap: 12 } },
+              h('h3', null, `Model ${index + 1}`),
               h('div', { style: row }, input(`Model ${index + 1} ID`, model.id, id => change({ models: draft.models.map((entry, i) => i === index ? { ...resetModel(entry), id } : entry) })),
                 input(`Model ${index + 1} context`, model.contextWindow, value => modelChange(index, { contextWindow: value ? Number(value) : undefined, contextSource: 'user' }), { type: 'number', min: 1, step: 1 }),
                 input(`Model ${index + 1} output limit`, model.maxTokens, value => modelChange(index, { maxTokens: value ? Number(value) : undefined, outputSource: 'user' }), { type: 'number', min: 1, step: 1 })),
@@ -115,8 +115,7 @@ globalThis.__ModuleLoader__.load({
     }
     return {
       inject: ['slots', 'connection'],
-      apply(ctx) {
-        ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'dscode-models', order: 11, label: () => 'DSCODE models',
+      settingsPage(ctx) { return { entry: { name: 'settings.section', id: 'dscode-models', order: 11, label: () => 'Models',
           inject: () => ({ execute: async (action, args = {}, signal) => {
             signal?.throwIfAborted();
             const requestId = signal ? crypto.randomUUID() : undefined;
@@ -143,7 +142,11 @@ globalThis.__ModuleLoader__.load({
             if (!response.ok) throw Error(response.error.message);
             return response.value;
           } }),
-        }, Settings));
+        }, Component: Settings }; },
+      apply(ctx, options = {}) {
+        if (options.settings === false) return;
+        const page = this.settingsPage(ctx);
+        ctx.slots.inject('settings.section', () => ctx.slots.register(page.entry, page.Component));
       },
     };
   },