@toddzheng024/dscode-desktop 0.7.33 → 0.7.35

package/docs/releases/0.7.35.md

@@ -0,0 +1,31 @@
+# DSCODE 0.7.35
+
+This release separates DSCODE from Hub, confines its Desktop browser integration to DSCODE sessions, and aligns setup and settings with Harness Desktop.
+
+- **Desktop browser boundaries:** browser tools, the browser skill and `/browser` are mounted in DSCODE sessions. Standard sessions retain their own tools; DSCODE preview refuses to start a browser from another preset. TUI Browser Use keeps its existing lazy Chrome integration. Shared Desktop credential and subagent compatibility services remain installed.
+- **Hub separation:** the Desktop package no longer contains Hub UI, discovery tools, endpoint, source files or Hub-specific dependencies. DSCODE remains discoverable through the Hub catalog, and the terminal's Hub distribution continues. This release does not provide a separate Hub Desktop plugin. Older 0.7.33/0.7.34 packages retain their published contents.
+- **Setup and interface:** Settings → DSCODE groups Get started, Models, Accounts and Schedules as peer entries, using Harness theme tokens and compact controls. Plugins → DSCODE · Community opens the same page. Activation guidance explains a full application restart, Show coding view, Agent presets and creating a DSCODE session. Existing sessions keep their preset; host-owned list icons remain unchanged.
+- **Existing accounts:** use the normal model picker for models already configured in Desktop. Native credentials take precedence and new Desktop keys are saved to the native store. Legacy terminal keys remain a fallback; explicit removal clears both copies to prevent reactivation and warns before confirmation. External account sign-in flows keep their existing behavior.
+- **Default distribution:** after an exact public installation passes, both npm `preview` and `latest` point to this Desktop version. This replaces the stale default 0.7.33 entry while retaining the preview support boundary. Publication requires the public-install receipt to match the archive.
+
+Update in official **Plugins → Add plugin** with `@toddzheng024/dscode-desktop@0.7.35`, then fully quit and reopen the application. Enable **Show coding view** in General and **Agent presets** in Plugins if needed; create a new session and select **DSCODE**. A window close alone does not restart the Host.
+
+Verification before release: `npm run check` passed 1,079 unit/component cases,
+both TypeScript checks, coverage, integration/package checks and 63 eval cases.
+Real Chrome checks passed for the TUI and independent Harness 0.2.0-rc.2
+Desktop Host, including screenshot/annotation transport, permissions,
+Standard/DSCODE isolation and repeated session creation before/after restart.
+The signed macOS application passed installation, upgrade from public 0.7.34,
+incompatible-update rejection, removal/reinstallation and data preservation.
+Light/dark setup, models, accounts, schedule empty state and the Plugins entry
+were inspected in the official shared client attached to an isolated Desktop
+Host. The final release workflow requalifies the exact versioned archives.
+
+The first local full run included a scheduler cleanup timeout; its isolated
+suite and the full rerun passed without scheduler code changes. The user's
+intermittent inactive-context failure was not reproduced, and hot reload is
+not qualified. Full restart remains required. Live-model task quality,
+external account login, individual mail/usage/delegation panel visual rehearsal,
+macOS Computer Use Accessibility qualification and other platforms/runtimes
+remain unverified by this release. The Desktop target is macOS Apple Silicon,
+Harness runtime 0.2.0-rc.2; no standalone DMG is included.

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.33",
+  "version": "0.7.35",
   "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/auto-review/index.mjs

@@ -1,3 +1,4 @@
+import { resolveDshHome } from '@deepseek-ai/dsh-home-paths';
 import z from '@deepseek-ai/schemastery';
 import { BlockAssembler, createSystemMessage, createUserMessage } from '@deepseek-ai/dsh-llm';
 import { REVIEW_POLICY, escalationDiagnosticGrant, needsMcpApproval, redact, fingerprint, contextFor, parseDecision } from './policy.mjs';
@@ -22,8 +23,7 @@ export const Config = z.object({
 
 export function apply(ctx, config) {
   if (Boolean(config.provider) !== Boolean(config.model)) throw new Error('Auto review requires both provider and model, or neither');
-  if (!config.auditDirectory && !process.env.DSH_HOME) throw new Error('Auto review requires DSH_HOME or auditDirectory');
-  const audit = auditStore(config.auditDirectory ?? join(process.env.DSH_HOME, 'auto-review'));
+  const audit = auditStore(config.auditDirectory ?? join(resolveDshHome(), 'auto-review'));
   const calls = new WeakMap();
   const budgets = new WeakMap();
   const mode = agent => ctx.permissionPresets.current(agent.session);

package/plugins/browser/config.mjs

@@ -1,9 +1,9 @@
+import { resolveDshHome } from '@deepseek-ai/dsh-home-paths';
 import { createHash, randomUUID } from 'node:crypto';
 import { mkdir, readFile, rename, writeFile } from 'node:fs/promises';
-import { homedir } from 'node:os';
 import path, { join } from 'node:path';
 
-export const browserHome = () => join(process.env.DSH_HOME ?? process.env.DSCODE_HOME ?? join(homedir(), '.dscode'), 'browser');
+export const browserHome = () => join(resolveDshHome(), 'browser');
 export const DEFAULT_CONFIG = Object.freeze({ mode: 'persistent', headless: false });
 
 export function validateConfig(input, paths = path) {

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/code-review/baseline.mjs

@@ -1,7 +1,7 @@
+import { resolveDshHome } from '@deepseek-ai/dsh-home-paths';
 import { execFile } from 'node:child_process';
 import { createHash, randomUUID } from 'node:crypto';
 import { lstat, mkdir, readdir, realpath, rm, writeFile } from 'node:fs/promises';
-import { homedir } from 'node:os';
 import { isAbsolute, join, relative, sep } from 'node:path';
 import { promisify } from 'node:util';
 import { reviewSpec } from './git.mjs';
@@ -17,7 +17,7 @@ const SENSITIVE_PATTERNS = ['.env', '.env.*', '.npmrc', '.pypirc', 'id_rsa', 'id
 const IDENTITY = { GIT_AUTHOR_NAME: 'dscode', GIT_AUTHOR_EMAIL: 'review@dscode.invalid', GIT_COMMITTER_NAME: 'dscode', GIT_COMMITTER_EMAIL: 'review@dscode.invalid' };
 export const snapshotLimits = { files: 20000, bytes: 256 * 1024 * 1024, fileBytes: 4 * 1024 * 1024 };
 
-const defaultRoot = () => join(process.env.DSH_HOME ?? process.env.DSCODE_HOME ?? join(homedir(), '.local/share/dscode-hub'), 'review-baselines');
+const defaultRoot = () => join(resolveDshHome(), 'review-baselines');
 const anchored = path => `/${path.replace(/[\\*?[\]!#]/g, '\\$&').replace(/ $/, '\\ ')}`;
 const refPart = value => String(value).replace(/[^A-Za-z0-9_-]/g, '_');
 const refsFor = task => {

package/plugins/compaction/threshold.mjs

@@ -1,3 +1,4 @@
+import { resolveDshHome } from '@deepseek-ai/dsh-home-paths';
 import { cacheReadRatio } from '../session-metrics/pricing.mjs';
 import { ensureOpenRouterModels } from '../openrouter/models.mjs';
 
@@ -70,7 +71,7 @@ export function fitsInWindow(totalTokens, modelInfo) {
 
 /** The route's threshold ratio, waiting for the OpenRouter listing when it has not loaded yet. */
 export async function pricedThresholdRatio(provider, model, now = Date.now()) {
-  if (provider === 'openrouter') await ensureOpenRouterModels({ home: process.env.DSH_HOME, now });
+  if (provider === 'openrouter') await ensureOpenRouterModels({ home: resolveDshHome(), now });
   return thresholdForCacheRatio(cacheReadRatio(provider, model, now));
 }
 

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));
       },
     };
   },