@toddzheng024/dscode-desktop 0.7.34 → 0.7.35

package/plugins/desktop/client.mjs

@@ -6,7 +6,7 @@ components.push({
   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'] };
@@ -52,10 +52,10 @@ components.push({
         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…'); },
@@ -88,8 +88,8 @@ components.push({
               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 })),
@@ -118,8 +118,7 @@ components.push({
     }
     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;
@@ -146,7 +145,11 @@ components.push({
             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));
       },
     };
   },
@@ -158,7 +161,7 @@ components.push({
   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);
     }
@@ -351,9 +354,9 @@ components.push({
         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.'),
@@ -367,7 +370,7 @@ components.push({
           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 } },
@@ -386,7 +389,7 @@ components.push({
         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}.`),
@@ -413,18 +416,31 @@ components.push({
       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;
@@ -439,7 +455,7 @@ components.push({
   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' };
+    const control = { boxSizing: 'border-box', minWidth: 0, maxWidth: '100%' };
     function Accounts({ execute }) {
       const [state, setState] = useState(null), [key, setKey] = useState(''), [busy, setBusy] = useState(false);
       const [error, setError] = useState(''), [notice, setNotice] = useState(''), [confirm, setConfirm] = useState(null);
@@ -480,27 +496,28 @@ components.push({
       }, [state?.opencode.pending]);
       const button = (text, action, disabled = false) => h('button', { type: 'button', style: control, disabled: busy || disabled, onClick: action }, text);
       const destructive = (id, label) => button(confirm === id ? `Confirm ${label.toLowerCase()}` : label, () => confirm === id ? run(id) : setConfirm(id));
-      return h('section', { 'aria-label': 'DSCODE account settings', style: { padding: 20, display: 'grid', gap: 16, maxWidth: 720 } },
-        h('h2', { style: { margin: 0 } }, 'DSCODE accounts'),
+      return h('section', { className: 'dscode-ui', 'aria-label': 'DSCODE account settings', style: { padding: 0, display: 'grid', gap: 16, maxWidth: 720 } },
+        h('h2', { style: { margin: 0 } }, 'Accounts'),
         error && h('div', { role: 'alert' }, error),
         refreshError && h('div', { role: 'alert' }, refreshError),
         notice && h('div', { role: 'status', style: { whiteSpace: 'pre-wrap' } }, notice),
-        button('Refresh account status', () => run('status')),
-        state && h('fieldset', { disabled: busy, style: { border: '1px solid #8886', borderRadius: 8, padding: 16 } },
-          h('legend', null, 'DSCODE OpenRouter'),
+        h('div', { className: 'dscode-actions' }, button('Refresh account status', () => run('status'))),
+        state && h('fieldset', { className: 'dscode-card', disabled: busy, style: { border: '.5px solid var(--dsw-alias-settings-card-stroke)', borderRadius: 'var(--dsw-radius-xl)', padding: 16 } },
+          h('h3', null, 'DSCODE OpenRouter'),
           h('p', null, state.openrouter.configured ? `Configured (${state.openrouter.source ?? 'saved'})` : 'No API key saved'),
-          h('p', null, 'The key is shared with DSCODE terminal sessions and native routes using the same credential. Select DSCODE OpenRouter in the model picker for DSCODE reasoning controls.'),
+          h('p', null, 'Uses your existing Desktop key. Choose DSCODE OpenRouter in the model picker for DSCODE reasoning controls.'),
+          confirm === 'remove-openrouter' && h('p', { role: 'alert' }, 'Removal clears the Desktop key and any legacy terminal copy. Environment keys are unchanged.'),
           h('label', null, 'OpenRouter API key', h('input', { 'aria-label': 'OpenRouter API key', type: 'password', autoComplete: 'new-password', style: { ...control, display: 'block', width: '100%', boxSizing: 'border-box' },
             value: key, disabled: !state.openrouter.writable, onChange: event => { setKey(event.target.value); setConfirm(null); } })),
           h('div', { style: { display: 'flex', gap: 8, marginTop: 12 } },
             button('Save OpenRouter key', () => run('save-openrouter', { key }), !state.openrouter.writable || !key.trim()),
             state.openrouter.configured && state.openrouter.writable && destructive('remove-openrouter', 'Remove OpenRouter key'))),
-        state && h('fieldset', { disabled: busy, style: { border: '1px solid #8886', borderRadius: 8, padding: 16 } },
-          h('legend', null, 'Grok'),
+        state && h('fieldset', { className: 'dscode-card', disabled: busy, style: { border: '.5px solid var(--dsw-alias-settings-card-stroke)', borderRadius: 'var(--dsw-radius-xl)', padding: 16 } },
+          h('h3', null, 'Grok'),
           h('p', null, state.grok.configured ? 'Local Grok CLI login available' : 'No usable local Grok CLI login'),
           h('p', null, 'Run grok login in a terminal, then refresh this status. DSCODE reads ~/.grok/auth.json without changing or refreshing its tokens.')),
-        state && h('fieldset', { disabled: busy, style: { border: '1px solid #8886', borderRadius: 8, padding: 16 } },
-          h('legend', null, 'OpenCode Go'),
+        state && h('fieldset', { className: 'dscode-card', disabled: busy, style: { border: '.5px solid var(--dsw-alias-settings-card-stroke)', borderRadius: 'var(--dsw-radius-xl)', padding: 16 } },
+          h('h3', null, 'OpenCode Go'),
           h('p', { style: { whiteSpace: 'pre-wrap' } }, state.opencode.lines.join('\n')),
           h('p', null, 'Sign in opens the OpenCode consent page in your browser. It identifies the OpenCode CLI client used for this login.'),
           h('div', { style: { display: 'flex', gap: 8 } },
@@ -508,15 +525,21 @@ components.push({
             state.opencode.pending && button('Cancel OpenCode login', () => run('cancel-opencode')),
             state.opencode.configured && destructive('logout-opencode', 'Sign out of OpenCode Go'))));
     }
-    return { inject: ['slots', 'connection'], apply(ctx) {
-      ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'dscode-accounts', order: 12, label: () => 'DSCODE accounts',
+    return {
+      inject: ['slots', 'connection'],
+      settingsPage(ctx) { return { entry: { name: 'settings.section', id: 'dscode-accounts', order: 12, label: () => 'Accounts',
         inject: () => ({ execute: async (action, args = {}) => {
           const response = await ctx.connection.rpc.call('/api', 'dscode-accounts', { action, ...args });
           if (!response.ok) throw Error(response.error.message);
           return response.value;
         } }),
-      }, Accounts));
-    } };
+      }, Component: Accounts }; },
+      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));
+      },
+    };
   },
 });
 
@@ -524,7 +547,7 @@ components.push({
   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', minWidth: 0, maxWidth: '100%' };
+    const control = { boxSizing: 'border-box', minWidth: 0, maxWidth: '100%' };
     const row = { display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' };
     const initial = () => ({ id: '', prompt: '', objective: '', kind: 'interval', seconds: '3600', cron: '0 9 * * 1-5', timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
       command: '[]', scriptMode: 'poll', persistent: true, permission: 'read-only', enabled: true });
@@ -613,8 +636,8 @@ components.push({
         // the user runs another task or changes workspace before retrying.
         await refresh(); eventKeys.current.delete(identity);
       });
-      return h('section', { 'aria-label': 'DSCODE scheduling settings', style: { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 16, padding: 20, maxWidth: 960, minWidth: 0, boxSizing: 'border-box', overflowWrap: 'anywhere' } },
-        h('h2', { style: { margin: 0 } }, 'DSCODE schedules'),
+      return h('section', { className: 'dscode-ui', 'aria-label': 'DSCODE scheduling settings', style: { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 16, padding: 0, maxWidth: 960, minWidth: 0, boxSizing: 'border-box', overflowWrap: 'anywhere' } },
+        h('h2', { style: { margin: 0 } }, 'Schedules'),
         h('p', null, 'Enabling delivery runs due tasks for every registered project and remembers this choice when Desktop opens again. Keep the application open. Stopping delivery interrupts active tasks and script sources; pending jobs stay queued.'),
         error && h('div', { role: 'alert', tabIndex: -1, ref: actionError }, error),
         refreshError && h('div', { role: 'alert' }, refreshError),
@@ -644,8 +667,8 @@ components.push({
               button(`Read ${item.id} source log`, () => run(async () => { const result = await execute('source', { sessionId: selected.current, args: { action: 'logs', trigger_id: item.id } }); if (alive.current) setLog(result.log || 'No source output recorded.'); }))))),
           log && h('pre', { 'aria-label': 'Source log', style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } }, log),
           !workspace.definitions.length && h('p', null, 'No tasks in this workspace.'),
-          h('fieldset', { disabled: busy || !workspace.writable, style: { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', minWidth: 0, gap: 12, border: '1px solid #8886', borderRadius: 8, padding: 16 } },
-            h('legend', null, editing ? `Edit ${editing.id}` : 'Create task'), field('Task ID', 'id'),
+          h('fieldset', { className: 'dscode-card', disabled: busy || !workspace.writable, style: { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', minWidth: 0, gap: 12, border: '.5px solid var(--dsw-alias-settings-card-stroke)', borderRadius: 'var(--dsw-radius-xl)', padding: 16 } },
+            h('h3', null, editing ? `Edit ${editing.id}` : 'Create task'), field('Task ID', 'id'),
             h('label', null, 'Task instructions', h('textarea', { 'aria-label': 'Task instructions', style: { ...control, display: 'block', width: '100%', minHeight: 90 }, value: draft.prompt,
               onChange: event => setDraft(previous => ({ ...previous, prompt: event.target.value })) })),
             field('Goal (defaults to task instructions)', 'objective'),
@@ -664,15 +687,21 @@ components.push({
             job.state === 'pending' && button(`Cancel ${job.triggerId} job`, () => mutate('jobs', { action: 'cancel', job_id: job.id }), !workspace.writable))),
           !workspace.jobs.length && h('p', null, 'No jobs in this workspace.')));
     }
-    return { inject: ['slots', 'connection'], apply(ctx) {
-      ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'dscode-schedules', order: 13, label: () => 'DSCODE schedules',
+    return {
+      inject: ['slots', 'connection'],
+      settingsPage(ctx) { return { entry: { name: 'settings.section', id: 'dscode-schedules', order: 13, label: () => 'Schedules',
         inject: () => ({ execute: async (action, args = {}) => {
           const response = await ctx.connection.rpc.call('/api', 'dscode-triggers', { action, ...args });
           if (!response.ok) throw Error(response.error.message);
           return response.value;
         } }),
-      }, Schedules));
-    } };
+      }, Component: Schedules }; },
+      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));
+      },
+    };
   },
 });
 
@@ -680,7 +709,7 @@ components.push({
   id: '@toddzheng024/dscode-desktop',
   factory: require => {
     const { createElement: h, useState, useEffect, useRef } = require('react');
-    const control = { padding: '7px 10px', border: '1px solid #8886', borderRadius: 6, background: 'transparent', color: 'inherit', font: 'inherit' };
+    const control = { padding: '7px 10px', border: '.5px solid var(--dsw-alias-border-l3, #8886)', borderRadius: 'var(--dsw-radius-md, 6px)', background: 'transparent', color: 'inherit', font: 'inherit' };
     function Inbox({ execute }) {
       const [state, setState] = useState(null), [mail, setMail] = useState(null), [offset, setOffset] = useState(0);
       const [error, setError] = useState(''), [notice, setNotice] = useState(''), [busy, setBusy] = useState(false), [sent, setSent] = useState(false);
@@ -727,7 +756,7 @@ components.push({
         const value = await execute('read', { key });
         if (alive.current) { setMail(value); requestId.current = crypto.randomUUID(); }
       });
-      return h('section', { 'aria-label': 'DSCODE email inbox', style: { padding: 16, overflow: 'auto', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 12 } },
+      return h('section', { className: 'dscode-ui', 'aria-label': 'DSCODE email inbox', style: { padding: 16, overflow: 'auto', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 12 } },
         h('strong', null, 'Email inbox'),
         h('p', { style: { margin: 0, fontSize: 12 } }, 'Shared local inbox. Reading mail does not start the agent. Add only the message you want this session to use as external context.'),
         error && h('div', { role: 'alert' }, error),
@@ -748,12 +777,12 @@ components.push({
               try { await execute('connect-imap', { config: { ...form, port: Number(form.port) } }); }
               finally { if (alive.current) setForm(old => ({ ...old, password: '' })); }
               if (alive.current) await refresh(offset);
-            }); } }, h('fieldset', { disabled: busy || !!state?.pending, style: { display: 'grid', gap: 8, border: '1px solid #8886', borderRadius: 6 } },
+            }); } }, h('fieldset', { disabled: busy || !!state?.pending, style: { display: 'grid', gap: 8, border: '.5px solid var(--dsw-alias-border-l3, #8886)', borderRadius: 'var(--dsw-radius-md, 6px)' } },
               h('legend', null, 'IMAP with an application password'),
               field('account', 'Mailbox login'), field('host', 'IMAP host'), field('port', 'TLS port'), field('mailbox', 'Mailbox folder'), field('password', 'Application password', 'password'),
               h('p', { style: { margin: 0, fontSize: 12 } }, 'Uses verified TLS and reads the selected folder without changing flags. The password is saved locally after a successful connection and never enters the conversation. Reconnect the same account and folder to update it.'),
               h('button', { style: control, type: 'submit', disabled: !form.account.trim() || !form.password }, 'Connect IMAP'))),
-            h('fieldset', { disabled: busy || !!state?.pending, style: { display: 'grid', gap: 8, border: '1px solid #8886', borderRadius: 6 } },
+            h('fieldset', { disabled: busy || !!state?.pending, style: { display: 'grid', gap: 8, border: '.5px solid var(--dsw-alias-border-l3, #8886)', borderRadius: 'var(--dsw-radius-md, 6px)' } },
               h('legend', null, 'Optional Gmail OAuth'),
               h('label', null, 'Google Desktop client JSON path', h('input', { 'aria-label': 'Google Desktop client JSON path', value: path,
                 onChange: event => setPath(event.target.value), style: { ...control, width: '100%', boxSizing: 'border-box' } })),
@@ -761,7 +790,7 @@ components.push({
               h('p', { style: { margin: 0, fontSize: 12 } }, 'Authorization opens Google in your browser and requests mail read access plus label and filter management. It creates or reuses the ToAgent label and subject filter. Use your Google account settings to revoke access.'),
               button('Authorize Gmail', () => action('connect-gmail'), !state?.gmail.configured)))),
         h('div', { 'aria-label': 'Received emails', style: { display: 'grid', gap: 6, maxHeight: '26vh', overflow: 'auto' } },
-          ...(state?.emails ?? []).map(row => h('button', { key: row.key, type: 'button', style: { ...control, textAlign: 'left', overflowWrap: 'anywhere', borderColor: mail?.key === row.key ? '#5794ff' : '#8886' },
+          ...(state?.emails ?? []).map(row => h('button', { key: row.key, type: 'button', style: { ...control, textAlign: 'left', overflowWrap: 'anywhere', borderColor: mail?.key === row.key ? 'var(--dsw-alias-state-business-primary)' : 'var(--dsw-alias-border-l3)' },
             disabled: busy, onClick: () => select(row.key) }, h('strong', null, row.subject), h('div', { style: { fontSize: 12 } }, `${row.from} · ${new Date(row.updatedAt).toLocaleString()}`))),
           state?.emails.length === 0 && h('p', null, 'No emails received.')),
         state && h('div', { style: { display: 'flex', gap: 8 } },
@@ -801,7 +830,7 @@ components.push({
     const money = (cost, partial = false) => cost === null || partial && cost === 0 ? 'Unknown' : `$${cost.toFixed(4)}${partial ? '+' : ''}`;
     const percent = value => value === null ? 'Unknown' : `${value.toFixed(1)}%`;
     const speed = value => value === null ? 'Unknown' : `${value.toFixed(1)} tokens/s`;
-    const control = { padding: '7px 10px', border: '1px solid #8886', borderRadius: 6, background: 'transparent', color: 'inherit', font: 'inherit' };
+    const control = { padding: '7px 10px', border: '.5px solid var(--dsw-alias-border-l3, #8886)', borderRadius: 'var(--dsw-radius-md, 6px)', background: 'transparent', color: 'inherit', font: 'inherit' };
     function Usage({ execute }) {
       const [state, setState] = useState(null), [error, setError] = useState('');
       const active = useRef(false), alive = useRef(true);
@@ -813,9 +842,9 @@ components.push({
       };
       useEffect(() => { alive.current = true; void refresh(); const timer = setInterval(refresh, 1000);
         return () => { alive.current = false; clearInterval(timer); }; }, []);
-      const fact = (label, value) => h('div', { key: label, style: { padding: 10, border: '1px solid #8884', borderRadius: 6 } },
+      const fact = (label, value) => h('div', { key: label, style: { padding: 10, border: '.5px solid var(--dsw-alias-border-l2, #8884)', borderRadius: 'var(--dsw-radius-md, 6px)' } },
         h('dt', { style: { fontSize: 12, marginBottom: 5 } }, label), h('dd', { style: { margin: 0, fontVariantNumeric: 'tabular-nums' } }, value));
-      return h('section', { 'aria-label': 'DSCODE session usage', style: { padding: 16, height: '100%', overflow: 'auto', boxSizing: 'border-box' } },
+      return h('section', { className: 'dscode-ui', 'aria-label': 'DSCODE session usage', style: { padding: 16, height: '100%', overflow: 'auto', boxSizing: 'border-box' } },
         h('h2', { style: { marginTop: 0 } }, 'Session usage'),
         h('p', { style: { fontSize: 12 } }, 'Recorded model usage for this DSCODE session, including attributed child and background calls. Costs are estimates, not an invoice.'),
         h('button', { type: 'button', style: control, onClick: refresh }, 'Refresh usage'),
@@ -862,7 +891,7 @@ components.push({
   factory: require => {
     const { createElement: h, useState, useEffect, useRef } = require('react');
     const columns = [['pending', 'Pending'], ['running', 'Running'], ['verifying', 'Verifying'], ['complete', 'Complete']];
-    const control = { padding: '7px 10px', border: '1px solid #8886', borderRadius: 6, background: 'transparent', color: 'inherit', font: 'inherit' };
+    const control = { padding: '7px 10px', border: '.5px solid var(--dsw-alias-border-l3, #8886)', borderRadius: 'var(--dsw-radius-md, 6px)', background: 'transparent', color: 'inherit', font: 'inherit' };
     function Board({ execute }) {
       const [state, setState] = useState(null), [error, setError] = useState('');
       const active = useRef(false), alive = useRef(true);
@@ -874,7 +903,7 @@ components.push({
       };
       useEffect(() => { alive.current = true; void refresh(); const timer = setInterval(refresh, 1000);
         return () => { alive.current = false; clearInterval(timer); }; }, []);
-      const card = (task, column) => h('li', { key: task.id, style: { listStyle: 'none', border: '1px solid #8885', borderRadius: 6, padding: 10, marginTop: 8, overflowWrap: 'anywhere' } },
+      const card = (task, column) => h('li', { key: task.id, style: { listStyle: 'none', border: '.5px solid var(--dsw-alias-settings-card-stroke, #8885)', borderRadius: 'var(--dsw-radius-md, 6px)', padding: 10, marginTop: 8, overflowWrap: 'anywhere' } },
         h('strong', null, `${task.id} · ${task.title}`),
         h('p', { style: { margin: '6px 0', fontSize: 12 } }, `/${task.child} · ${task.priority} priority`),
         task.waiting && h('p', null, 'Waiting for the coordinator’s answer'),
@@ -884,7 +913,7 @@ components.push({
         (task.detail || task.note || task.verification || task.worktree) && h('details', null, h('summary', null, 'Task details'),
           ...[['Scope and checks', task.detail], ['Reopened because', task.note], ['Verification evidence', task.verification], ['Worktree', task.worktree]]
             .filter(([, value]) => value).map(([label, value]) => h('div', { key: label, style: { marginTop: 8 } }, h('strong', null, label), h('p', { style: { whiteSpace: 'pre-wrap', margin: '4px 0' } }, value)))));
-      return h('section', { 'aria-label': 'DSCODE delegation board', style: { padding: 16, height: '100%', overflow: 'auto', boxSizing: 'border-box' } },
+      return h('section', { className: 'dscode-ui', 'aria-label': 'DSCODE delegation board', style: { padding: 16, height: '100%', overflow: 'auto', boxSizing: 'border-box' } },
         h('h2', { style: { marginTop: 0 } }, 'Delegation board'),
         h('p', { style: { fontSize: 12 } }, 'Use /delegate <task> in the main session to coordinate work in isolated Git worktrees. The coordinator plans tasks and records verified results.'),
         h('button', { type: 'button', style: control, onClick: refresh }, 'Refresh board'),
@@ -916,114 +945,50 @@ components.push({
 components.push({
   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' };
-    const box = { border: '1px solid #8886', borderRadius: 8, padding: 16 };
-    function Hub({ execute, manage, close }) {
-      const [query, setQuery] = useState(''), [category, setCategory] = useState(''), [categories, setCategories] = useState([]);
-      const [results, setResults] = useState(null), [detail, setDetail] = useState(null), [preview, setPreview] = useState(null);
-      const [operation, setOperation] = useState(null), [error, setError] = useState(''), [busy, setBusy] = useState(false);
-      const alive = useRef(true), locked = useRef(false), pageQuery = useRef({ query: '', category: '' });
-      const run = async fn => {
-        if (locked.current) return;
-        locked.current = true; setBusy(true); setError('');
-        try { await fn(); } catch (error) { if (alive.current) setError(error.message); }
-        finally { locked.current = false; if (alive.current) setBusy(false); }
-      };
-      const search = async (more = false) => {
-        const input = more ? pageQuery.current : { query, category };
-        if (!more) { setDetail(null); setPreview(null); setResults(null); }
-        const value = await execute('search', { ...input, ...(more ? results.nextPage ? { page: results.nextPage } : { cursor: results.nextCursor } : {}) });
-        if (!alive.current) return;
-        pageQuery.current = input;
-        setResults(more ? { ...value, items: [...results.items, ...value.items.filter(item => !results.items.some(previous => previous.packageName === item.packageName))] } : value);
-      };
-      const load = () => run(async () => {
-        const [list, initial, status] = await Promise.all([execute('categories'), execute('search', { query: '', category: '' }), execute('status')]);
-        if (alive.current) { setCategories(list.items); setResults(initial); setOperation(status.operation); pageQuery.current = { query: '', category: '' }; }
-      });
-      useEffect(() => { alive.current = true; void load(); return () => { alive.current = false; }; }, []);
-      useEffect(() => {
-        if (operation?.status !== 'running') return;
-        let stopped = false, polling = false;
-        const timer = setInterval(async () => {
-          if (polling) return; polling = true;
-          try {
-            const value = await execute('operation', { requestId: operation.requestId });
-            if (!stopped && alive.current) setOperation(value);
-          } catch (error) { if (!stopped && alive.current) setError(`Could not refresh installation: ${error.message}`); }
-          finally { polling = false; }
-        }, 1000);
-        return () => { stopped = true; clearInterval(timer); };
-      }, [operation?.requestId, operation?.status]);
-      const installing = operation?.status === 'running';
-      const button = (label, action, disabled = false) => h('button', { type: 'button', style: control, disabled: busy || disabled, onClick: action }, label);
-      const openManagement = packageName => run(async () => { manage(packageName); close?.(); });
-      const show = name => run(async () => {
-        setDetail(null); setPreview(null);
-        const value = await execute('detail', { packageName: name }); if (alive.current) setDetail(value);
-      });
-      const installed = detail?.installed || (operation?.packageName === detail?.packageName && operation?.result?.application === 'applied' && operation.result.bundle === detail?.packageName);
-      const security = item => `Hub scan: ${item.security?.status ?? 'not reported'}`;
-      const result = operation?.result;
-      return h('section', { 'aria-label': 'Plugin Hub', style: { padding: 20, display: 'grid', gap: 16, maxWidth: 900 } },
-        h('h2', { style: { margin: 0 } }, 'Plugin Hub'),
-        h('p', null, 'Discover community plugins from DSH Plugin Hub. Install here, then enable and configure in Settings → Plugins.'),
-        h('form', { style: { display: 'flex', flexWrap: 'wrap', gap: 8 }, onSubmit: event => { event.preventDefault(); void run(() => search()); } },
-          h('input', { type: 'search', 'aria-label': 'Search plugins', placeholder: 'Search plugins or describe a capability', value: query, maxLength: 300, style: { ...control, flex: 1 }, disabled: busy || installing, onChange: event => setQuery(event.target.value) }),
-          h('select', { 'aria-label': 'Plugin category', value: category, style: control, disabled: busy || installing, onChange: event => setCategory(event.target.value) },
-            h('option', { value: '' }, 'All categories'), ...categories.map(item => h('option', { key: item.name, value: item.name }, `${item.displayName} (${item.count})`))),
-          h('button', { type: 'submit', disabled: busy || installing, style: control }, busy ? 'Loading…' : 'Search')),
-        error && h('div', { role: 'alert' }, error, ' ', button('Refresh catalog', load, installing)),
-        operation && h('div', { role: 'status', style: box },
-          h('strong', null, operation.spec),
-          h('p', null, installing ? 'Installing with the official plugin manager…' : operation.error ? operation.error : result?.application === 'applied' ? 'Installation completed. Enable the plugin in Settings → Plugins.' :
-            result?.application === 'restart-required' ? 'The plugin manager requires a Desktop restart. Check Settings → Plugins after restarting.' :
-              result?.application === 'cancelled' ? 'Installation cancelled.' : `Installation outcome: ${result?.application ?? 'unknown'}. Check Settings → Plugins.`),
-          result?.error && h('p', null, result.error.message),
-          result?.warnings?.map((warning, index) => h('p', { key: index }, warning)),
-          result?.pendingBuilds?.length > 0 && h('p', null, `Build approval is required for ${result.pendingBuilds.join(', ')}. Review it through the official plugin manager.`),
-          installing ? button('Cancel installation', () => run(async () => { const value = await execute('cancel', { requestId: operation.requestId }); if (alive.current) setOperation(value); })) :
-            button('Manage installed plugin', () => openManagement(operation.packageName))),
-        detail && h('article', { style: box, 'aria-label': 'Plugin details' },
-          h('h3', null, detail.displayName), h('code', null, `${detail.packageName}@${detail.latestVersion}`),
-          h('p', null, detail.summary), h('p', { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } }, detail.description),
-          h('p', null, `${detail.categories.join(' · ')} · ${detail.weeklyDownloads} weekly downloads`),
-          h('p', null, `Repository: ${detail.repository} · License: ${detail.license ?? 'not reported'}`),
-          h('p', null, `${detail.claimed ? 'Publisher claimed' : 'Publisher unclaimed'} · ${detail.verified ? 'Publisher verified' : 'Publisher unverified'}`),
-          h('p', null, security(detail), '. Publisher verification and scans do not guarantee safety.'),
-          detail.security && h('ul', null, ...[['dependencyInventoryComplete', 'Complete dependency inventory'], ['advisoryScanned', 'Vulnerability advisories checked'], ['behaviorAnalyzed', 'Behavior analysis completed']].map(([key, label]) => h('li', { key }, `${label}: ${detail.security[key] === true ? 'yes' : 'no'}`))),
-          h('a', { href: detail.url, target: '_blank', rel: 'noreferrer' }, 'View on DSH Plugin Hub'),
-          h('p', null, `Your Desktop: DSH ${detail.environment.runtime} · ${detail.environment.platform}`),
-          detail.candidate.compatibility && h('p', null, `Declared compatibility: DSH ${detail.candidate.compatibility.dsh} · ${detail.candidate.compatibility.surfaces.join(', ')} · ${detail.candidate.compatibility.platforms.join(', ') || 'all platforms'}`),
-          detail.candidate.reasons.length > 0 && h('ul', null, ...detail.candidate.reasons.map(reason => h('li', { key: reason }, reason))),
-          installed ? button('Manage in Plugins', () => openManagement(detail.packageName), installing) :
-            button('Review installation', () => run(async () => { const value = await execute('prepare', { packageName: detail.packageName }); if (alive.current) { setDetail(value.detail); setPreview(value); } }), installing || detail.candidate.reasons.length > 0),
-          preview && h('div', { style: { ...box, marginTop: 16 }, role: 'group', 'aria-label': 'Confirm plugin installation' },
-            h('p', null, `Install ${preview.detail.candidate.spec} from ${preview.inspection.registry ?? 'your configured npm registry'}?`),
-            h('p', null, 'The official manager will download the package and its dependencies. It will remain disabled until you enable it in Plugins. Enabling third-party plugins runs their code in the Host.'),
-            button('Confirm installation', () => run(async () => { const value = await execute('install', { token: preview.token, confirm: true }); if (alive.current) { setOperation(value); setPreview(null); } }), installing),
-            ' ', button('Back', () => setPreview(null), installing))),
-        results && h('div', { 'aria-label': 'Plugin search results', style: { display: 'grid', gap: 12 } },
-          results.items.length === 0 && h('p', null, 'No plugins match this search. Try another phrase or category.'),
-          ...results.items.map(item => h('article', { key: item.packageName, style: box },
-            h('h3', { style: { margin: 0 } }, item.displayName), h('code', null, `${item.packageName}@${item.latestVersion}`),
-            h('p', null, item.summary), h('p', null, `${security(item)}${item.deprecated ? ' · Deprecated' : ''}`),
-            button('View details', () => show(item.packageName), installing))),
-          (results.nextPage || results.nextCursor) && button('Load more plugins', () => run(() => search(true)), installing)));
+    const { createElement: h, useState } = require('react');
+    const packageName = '@toddzheng024/dscode-desktop';
+    const labels = { 'dscode-models': 'Models', 'dscode-accounts': 'Accounts', 'dscode-schedules': 'Schedules' };
+    function Mark() {
+      return h('svg', { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
+        h('rect', { x: 2, y: 4, width: 20, height: 16, rx: 4 }), h('path', { d: 'm7 9 3 3-3 3m6 0h4' }));
     }
-    return { inject: ['slots', 'connection'], apply(ctx) {
-      ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'dscode-hub', order: 13, label: () => 'Plugin Hub',
-        inject: () => ({ execute: async (action, args = {}) => {
-          const response = await ctx.connection.rpc.call('/api', 'dscode-hub', { ...args, action });
-          if (!response.ok) throw Error(response.error.message);
-          return response.value;
-        }, manage: packageName => {
-          const navigation = ctx.get('pluginNavigation');
-          if (!navigation) throw Error('Plugin management is unavailable. Close settings and open Plugins from the sidebar.');
-          navigation.openBundle(packageName);
-        } }),
-      }, Hub));
+    function Setup() {
+      const steps = [
+        ['Enable and restart', 'Enable the DSCODE bundle in Plugins. After installing or updating, fully quit and reopen DeepSeek Harness. Closing a window is not enough.'],
+        ['Show agent presets', 'In Settings → General, enable Show coding view. If Agent presets is disabled in Plugins, enable it too.'],
+        ['Start a DSCODE session', 'Create a new session and choose DSCODE in the Agent preset picker. Existing sessions keep their original preset.'],
+        ['Use your existing account', 'Choose a model in the normal model picker. No second login or copied API key is required for models you already use.'],
+      ];
+      return h('section', { className: 'dscode-setup', 'aria-label': 'Start using DSCODE' },
+        h('h3', null, 'Start using DSCODE'),
+        h('ol', { className: 'dscode-steps' }, ...steps.map(([title, description]) =>
+          h('li', { key: title }, h('div', null, h('strong', null, title), h('p', null, description))))),
+        h('p', { className: 'dscode-note' }, 'Browser preview controls DSCODE’s external Chrome. The official Browser remains available for ordinary browsing.'));
+    }
+    function Settings({ pages, view }) {
+      const [selected, setSelected] = useState('overview');
+      if (view === 'summary') return h('span', null, 'Community DSCODE coding preset · Setup, additional providers and schedules');
+      const page = pages.find(page => page.entry.id === selected);
+      return h('section', { 'aria-label': 'DSCODE settings', className: 'dscode-ui dscode-settings' },
+        view !== 'page' && h('div', { className: 'dscode-heading' }, h(Mark), h('h2', null, 'DSCODE'), h('span', null, 'Community plugin')),
+        h('p', null, 'Coding workflows in Harness Desktop. Your existing models and accounts work here.'),
+        h('nav', { 'aria-label': 'DSCODE settings pages', className: 'dscode-tabs' },
+          ...[['overview', 'Get started'], ...pages.map(page => [page.entry.id, labels[page.entry.id]])].map(([id, label]) =>
+            h('button', { key: id, type: 'button', 'aria-pressed': selected === id, onClick: () => setSelected(id) }, label))),
+        page ? h(page.Component, { key: selected, ...page.entry.inject() }) : h(Setup));
+    }
+    function Activation({ onDismiss, onOpenDetails }) {
+      return h('section', { className: 'dscode-ui dscode-activation' }, h('h2', null, 'DSCODE enabled — restart to finish setup'), h(Setup),
+        h('div', { className: 'dscode-actions' },
+          h('button', { type: 'button', className: 'dscode-primary', onClick: onOpenDetails }, 'Open DSCODE setup'),
+          h('button', { type: 'button', onClick: onDismiss }, 'Close')));
+    }
+    return { inject: ['slots'], apply(ctx, { pages = [] } = {}) {
+      const props = () => ({ pages });
+      ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'dscode', order: 11, label: () => 'DSCODE', inject: props }, Settings));
+      ctx.slots.inject('plugins.item', () => ctx.slots.register({ name: 'plugins.item', id: 'dscode', order: 90, label: () => 'DSCODE · Community', inject: props }, Settings));
+      ctx.slots.inject('plugins.bundle.config', () => ctx.slots.register({ name: 'plugins.bundle.config', key: packageName, inject: props }, Settings));
+      ctx.slots.inject('plugins.bundle.activation', () => ctx.slots.register({ name: 'plugins.bundle.activation', key: packageName }, Activation));
     } };
   },
 });
@@ -1031,10 +996,19 @@ components.push({
 globalThis.__ModuleLoader__.load({
   id: "@toddzheng024/dscode-desktop",
   factory: require => {
+    if (typeof document !== 'undefined' && !document.querySelector('style[data-dscode-ui]')) {
+      const style = document.createElement('style');
+      style.dataset.dscodeUi = '';
+      style.textContent = "/* Scoped to DSCODE. Tokens are supplied by Harness ui-theme (0.2.0-rc.2).\n   Do not target the host's hashed classes or change other plugins' controls. */\n.dscode-ui { box-sizing: border-box; color: var(--dsw-alias-label-primary); font-family: inherit; font-size: 14px; line-height: 22px; min-width: 0; }\n.dscode-ui *, .dscode-ui *::before, .dscode-ui *::after { box-sizing: border-box; }\n.dscode-ui h2 { font-size: 16px; line-height: 24px; font-weight: 500; margin: 0; }\n.dscode-ui h3, .dscode-ui legend { font-size: 14px; line-height: 22px; font-weight: 500; margin: 0; }\n.dscode-ui p { margin: 0; color: var(--dsw-alias-label-tertiary); }\n.dscode-ui button { cursor: pointer; min-height: 36px; padding: 6px 14px; border: .5px solid var(--dsw-alias-border-l3); border-radius: var(--dsw-radius-md); color: var(--dsw-alias-label-primary); background: transparent; font: inherit; }\n.dscode-ui button:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }\n.dscode-ui button:disabled { opacity: .4; cursor: default; }\n.dscode-ui :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline-offset: 2px; }\n.dscode-ui :is(input:not([type=checkbox]), select, textarea) { min-width: 0; max-width: 100%; min-height: 36px; padding: 6px 10px; border: .5px solid var(--dsw-alias-border-l3); border-radius: var(--dsw-radius-md); color: var(--dsw-alias-label-primary); background: var(--dsw-alias-settings-card-fill); font: inherit; }\n.dscode-ui input[type=checkbox] { accent-color: var(--dsw-alias-state-business-primary); margin-right: 8px; }\n.dscode-ui label { color: var(--dsw-alias-label-secondary); font-size: 13px; }\n.dscode-ui fieldset { min-width: 0; }\n.dscode-ui [role=alert] { color: var(--dsw-alias-state-error-primary); overflow-wrap: anywhere; }\n.dscode-ui [role=status] { font-size: 12px; color: var(--dsw-alias-label-secondary); }\n.dscode-settings { padding: 8px 0; display: grid; gap: 16px; }\n.dscode-heading { display: flex; align-items: center; gap: 8px; }\n.dscode-heading svg { flex: none; width: 20px; height: 20px; }\n.dscode-heading span { margin-left: auto; color: var(--dsw-alias-label-tertiary); font-size: 12px; }\n.dscode-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 12px; border-bottom: .5px solid var(--dsw-alias-border-l2); }\n.dscode-tabs button { border: 0; padding: 6px 12px; }\n.dscode-tabs button[aria-pressed=true] { background: var(--dsw-specific-sidebar-nav-item-active); }\n.dscode-setup { display: grid; gap: 12px; }\n.dscode-steps { list-style: none; margin: 0; padding: 0; counter-reset: setup; }\n.dscode-steps li { counter-increment: setup; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: .5px solid var(--dsw-alias-border-l2); }\n.dscode-steps li::before { content: counter(setup); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dsw-alias-bg-module-platform); color: var(--dsw-alias-label-secondary); font-size: 12px; }\n.dscode-steps strong { display: block; font-weight: 500; margin-bottom: 4px; }\n.dscode-steps p, .dscode-note { font-size: 13px; line-height: 20px; }\n.dscode-activation { display: grid; gap: 16px; padding: 16px 0; }\n.dscode-actions { display: flex; flex-wrap: wrap; gap: 8px; }\n.dscode-ui .dscode-primary { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); border-color: transparent; }\n.dscode-ui .dscode-primary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover); }\n\n.dscode-ui .dscode-card { background: var(--dsw-alias-settings-card-fill); margin: 0; display: grid; gap: 12px; }\n";
+      document.head.appendChild(style);
+    }
     const plugins = components.map(component => component.factory(require));
     return {
       inject: [...new Set(plugins.flatMap(plugin => plugin.inject ?? []))],
-      apply(ctx) { for (const plugin of plugins) plugin.apply(ctx); },
+      apply(ctx) {
+        const pages = plugins.flatMap(plugin => plugin.settingsPage ? [plugin.settingsPage(ctx)] : []);
+        for (const plugin of plugins) plugin.apply(ctx, { settings: false, pages, presetOnly: true });
+      },
     };
   },
 });