@toddzheng024/dscode-desktop 0.0.0-stage → 0.7.33

package/plugins/desktop/client.mjs

@@ -0,0 +1,1041 @@
+// Generated from the shared Desktop component sources.
+(() => {
+const components = [];
+// Shared Web/Desktop client. Draft keys live only in this mounted form.
+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 row = { display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' };
+    const resetModel = model => {
+      const next = { ...model, thinking: 'default', inputModalities: ['text'] };
+      for (const [field, source] of [['contextWindow', 'contextSource'], ['maxTokens', 'outputSource']]) {
+        if (next[source] === 'server') { delete next[field]; delete next[source]; }
+      }
+      return next;
+    };
+    function Settings({ execute }) {
+      const [snapshot, setSnapshot] = useState(null), [draft, setDraft] = useState(null), [key, setKey] = useState('');
+      const [busy, setBusy] = useState(false), [error, setError] = useState(''), [notice, setNotice] = useState(''), [report, setReport] = useState(null), [removing, setRemoving] = useState(false);
+      const pending = useRef(false), alive = useRef(true), request = useRef(null);
+      const run = async (task, cancellable = false) => {
+        if (pending.current) return;
+        const controller = cancellable ? new AbortController() : null;
+        request.current = controller;
+        pending.current = true; setBusy(true); setError(''); setNotice('');
+        let cancellationFailed = false;
+        try { await task(controller?.signal); }
+        catch (error) {
+          cancellationFailed = error.cancellationFailed === true;
+          if (alive.current && (!controller?.signal.aborted || cancellationFailed)) setError(error.message);
+        }
+        finally {
+          request.current = null; pending.current = false;
+          if (alive.current) {
+            setBusy(false);
+            if (controller?.signal.aborted) setNotice(cancellationFailed ? 'Cancellation could not be confirmed.' : 'Request cancelled.');
+          }
+        }
+      };
+      const select = profile => { setDraft(profile ? { ...profile, models: profile.models.map(model => ({ ...model })) } : null); setKey(''); setReport(null); setRemoving(false); setNotice(''); };
+      const accept = value => { if (!alive.current) return; setSnapshot(value); select(value.providers.find(p => p.id === draft?.id) ?? value.providers[0]); };
+      useEffect(() => {
+        alive.current = true;
+        void run(async () => { accept(await execute('list')); });
+        return () => { alive.current = false; request.current?.abort(); };
+      }, []);
+      const change = values => { setDraft({ ...draft, ...values }); setReport(null); setRemoving(false); setNotice('Unsaved changes'); };
+      const modelChange = (index, values) => change({ models: draft.models.map((model, i) => i === index ? { ...model, ...values } : model) });
+      const button = (text, action, disabled = false, cancellable = false) => h('button', { type: 'button', style: { ...control, cursor: 'pointer' }, disabled: busy || disabled, onClick: () => run(action, cancellable) }, text);
+      const input = (label, value, onChange, options = {}) => h('label', { style: { display: 'grid', gap: 5, minWidth: 180, flex: 1 } }, label,
+        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'),
+        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),
+        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…'); },
+        }, 'Cancel request'),
+        h('div', { style: row },
+          button('Reload (discard draft)', async () => accept(await execute('list'))),
+          button('Add provider', async () => { const value = await execute('new'); if (alive.current) select(value); }, !snapshot)),
+        h('fieldset', { disabled: busy || !snapshot, style: { border: 0, padding: 0, margin: 0, display: 'grid', gap: 16 } },
+          choice('Saved provider', snapshot?.providers.some(p => p.id === draft?.id) ? draft.id : '', [['', 'Choose a provider'], ...(snapshot?.providers ?? []).map(p => [p.id, p.name])], id => select(snapshot.providers.find(p => p.id === id))),
+          draft && h('div', { style: { display: 'grid', gap: 16 } },
+            h('div', { style: row }, input('Provider name', draft.name, name => change({ name })),
+              input('API base URL', draft.baseURL, baseURL => change({ baseURL, backend: 'generic', models: draft.models.map(resetModel) }), { placeholder: 'https://example.com/v1', type: 'url' })),
+            h('div', { style: row }, choice('API format', draft.api, [['chat-completions', 'Chat Completions'], ['responses', 'Responses'], ['anthropic', 'Anthropic Messages']], api => change({ api, auth: api === 'anthropic' ? 'x-api-key' : 'bearer', models: draft.models.map(resetModel) })),
+              choice('Authentication', draft.auth, [['bearer', 'Bearer token'], ['x-api-key', 'API key header'], ['none', 'None']], auth => change({ auth }))),
+            draft.auth !== 'none' && input('API key', key, value => { setKey(value); setReport(null); setRemoving(false); setNotice('Unsaved changes'); }, { type: 'password', autoComplete: 'off', spellCheck: false, placeholder: 'Leave blank to keep the saved key' }),
+            h('small', null, draft.credentialStatus ?? 'Not saved'),
+            h('div', { style: row }, button('Discover models', async signal => {
+              const found = await execute('discover', { profile: draft, key }, signal);
+              if (!alive.current || signal.aborted) return;
+              const models = [...draft.models];
+              for (const model of found.models) {
+                const index = models.findIndex(previous => previous.id === model.id), previous = models[index];
+                if (index < 0) models.push(model);
+                else models[index] = {
+                  ...previous, ...model, thinking: previous.thinking,
+                  ...(previous.contextSource === 'user' ? { contextWindow: previous.contextWindow, contextSource: 'user' } : {}),
+                  ...(previous.outputSource === 'user' ? { maxTokens: previous.maxTokens, outputSource: 'user' } : {}),
+                };
+              }
+              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}`),
+              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 })),
+              h('div', { style: row }, choice(`Model ${index + 1} thinking`, model.thinking ?? 'default', [['default', 'Provider default'], ['off', 'Off'], ['on', 'On']], thinking => modelChange(index, { thinking })),
+                h('label', null, h('input', { type: 'checkbox', 'aria-label': `Model ${index + 1} accepts images`, checked: model.inputModalities?.includes('image') ?? false,
+                  onChange: event => modelChange(index, { inputModalities: event.target.checked ? ['text', 'image'] : ['text'] }) }), ' Accepts images')),
+              h('div', { style: row }, button(`Test model ${index + 1}`, async signal => {
+                setReport(null);
+                const stages = await execute('test', { profile: draft, model: model.id, key }, signal);
+                if (alive.current && !signal.aborted) setReport({ model: model.id, stages });
+              }, !model.id || !model.contextWindow, true),
+                button(`Remove model ${index + 1}`, async () => change({ models: draft.models.filter((_, i) => i !== index) }))))),
+            h('p', { style: { margin: 0, fontSize: 13 } }, 'Tests send text and tool calls to this service and may incur usage. Image support is a manual setting; the test does not verify vision.'),
+            report && h('div', null,
+              h('h3', { style: { margin: 0 } }, `Test results: ${report.model}`),
+              h('ul', { 'aria-label': 'Model test results' }, ...report.stages.map((stage, index) => h('li', { key: index }, `${stage.name}: ${stage.status}${stage.message ? ` — ${stage.message}` : ''}`)))),
+            h('div', { style: row }, button('Save provider', async () => {
+              const saved = await execute('save', { profile: draft, key, revision: snapshot.revision });
+              if (alive.current) { accept(saved); setNotice('Provider saved. Select its model in a session.'); }
+            }, draft.models.length === 0 || draft.models.some(model => !model.contextWindow)),
+            snapshot?.providers.some(p => p.id === draft.id) && button(removing ? 'Confirm remove provider and key' : 'Remove provider', async () => {
+              if (!removing) { setRemoving(true); return; }
+              const saved = await execute('remove', { id: draft.id, revision: snapshot.revision });
+              if (alive.current) { accept(saved); setNotice('Provider removed.'); }
+            })))));
+    }
+    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',
+          inject: () => ({ execute: async (action, args = {}, signal) => {
+            signal?.throwIfAborted();
+            const requestId = signal ? crypto.randomUUID() : undefined;
+            let cancellation;
+            const cancel = () => {
+              cancellation ??= ctx.connection.rpc.call('/api', 'dscode-custom', { action: 'cancel', requestId }, AbortSignal.timeout(10000))
+                .then(response => response.ok ? null : response.error.message, error => error.message);
+            };
+            signal?.addEventListener('abort', cancel, { once: true });
+            let response, requestError;
+            try {
+              response = await ctx.connection.rpc.call('/api', 'dscode-custom', { action, ...args, ...(requestId ? { requestId } : {}) }, signal);
+            } catch (error) { requestError = error; }
+            finally { signal?.removeEventListener('abort', cancel); }
+            if (cancellation) {
+              const failure = await cancellation;
+              if (failure) {
+                const error = Error('Could not confirm server cancellation. The request may still be running: ' + failure);
+                error.cancellationFailed = true;
+                throw error;
+              }
+            }
+            if (requestError) throw requestError;
+            if (!response.ok) throw Error(response.error.message);
+            return response.value;
+          } }),
+        }, Settings));
+      },
+    };
+  },
+});
+
+// Official Harness client-module format; React is supplied by the shared UI.
+components.push({
+  id: '@toddzheng024/dscode-browser-desktop',
+  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' };
+    function previewButton(props, label) {
+      return h('button', { ...props, style: { ...button, ...props.style, ...(props.disabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}) } }, label);
+    }
+    const sitePermissions = (permissions, origin) => origin && JSON.stringify([
+      permissions?.developerMode, permissions?.sites?.[origin], permissions?.sessionSites?.includes(origin),
+    ]);
+    function SessionPreview({ execute, draft }) {
+      const { pageId, setPageId, text, setText, draftRevision } = draft;
+      const [pages, setPages] = useState([]);
+      const [permissions, setPermissions] = useState(null);
+      const [handoff, setHandoff] = useState(null);
+      const [frame, setFrame] = useState(null), [point, setPoint] = useState(null);
+      const [expanded, setExpanded] = useState(false);
+      const [expired, setExpired] = useState(false);
+      const mounted = useRef(true);
+      useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
+      const [error, setError] = useState(''), [notice, setNotice] = useState(''), [busy, setBusy] = useState(false), [live, setLive] = useState(false);
+      const pending = useRef(false), controlPending = useRef(false), controlEpoch = useRef(0);
+      const activityEpoch = useRef(0);
+      const browserAvailable = useRef(!!pageId);
+      const [controlBusy, setControlBusy] = useState(false);
+      const disconnected = () => {
+        browserAvailable.current = false;
+        setHandoff(null); setPages([]); setPageId(''); setPermissions(null);
+        setFrame(null); setPoint(null); setLive(false);
+        setNotice('Browser disconnected. Your draft is kept. Start or reconnect the browser and capture a new preview.');
+      };
+      const run = async action => {
+        if (pending.current || controlPending.current) return;
+        activityEpoch.current++;
+        const epoch = controlEpoch.current;
+        const current = () => epoch === controlEpoch.current && !controlPending.current;
+        const operation = {};
+        pending.current = operation; setBusy(true); setError('');
+        try { await action(current); } catch (error) {
+          if (!current()) return;
+          setError(error.message); setLive(false); setFrame(null); setPoint(null); setPermissions(null);
+        }
+        finally { if (pending.current === operation) { pending.current = false; setBusy(false); } }
+      };
+      const list = async (current, { preserveDraft = false } = {}) => {
+        const revision = draftRevision.current;
+        const result = await execute('tabs');
+        if (!current() || !mounted.current) return;
+        if (result.connected === false) { disconnected(); return; }
+        browserAvailable.current = true;
+        setPages(result.pages);
+        setPermissions(result.permissions ?? null);
+        setHandoff(result.handoff ?? null);
+        if (result.handoff) { setFrame(null); setPoint(null); setLive(false); }
+        const selected = result.pages.find(page => String(page.id) === pageId) ?? result.pages.find(page => page.selected) ?? result.pages[0];
+        if (String(selected?.id ?? '') !== pageId) {
+          setPageId(selected ? String(selected.id) : ''); setFrame(null); setPoint(null); setLive(false);
+          // A first selection can follow browser startup or an empty tab list.
+          // Keep text written before any page was assigned to the draft.
+          if (pageId && !preserveDraft && !result.handoff && draftRevision.current === revision) setText('');
+        } else if (frame && (selected?.url !== frame.url || selected?.documentId !== frame.documentId)) {
+          setFrame(null); setPoint(null); setLive(false);
+          setNotice('The page changed or could not be verified. Refresh the preview; your draft is kept.');
+        }
+      };
+      const refresh = async current => {
+        if (!pageId || handoff) return;
+        setPoint(null);
+        const result = await execute('capture', { pageId: Number(pageId) });
+        if (current()) {
+          browserAvailable.current = true;
+          setPages(previous => previous.map(page => page.id === result.pageId ? { ...page, url: result.url, documentId: result.documentId } : page));
+          setPermissions(result.permissions ?? null);
+          setFrame(result); setNotice('');
+        }
+      };
+      let origin;
+      try {
+        const url = new URL(pages.find(page => String(page.id) === pageId)?.url);
+        if (['http:', 'https:'].includes(url.protocol) && !url.username && !url.password) origin = url.origin;
+      } catch { /* Blank and unavailable tabs have no site grant. */ }
+      useEffect(() => { void run(list); }, []);
+      useEffect(() => {
+        let active = true, reading = false;
+        const timer = setInterval(async () => {
+          if (reading || pending.current || controlPending.current) return;
+          const epoch = activityEpoch.current;
+          reading = true;
+          try {
+            // Read Host state and grants: no Chrome request or image capture.
+            const result = await execute('handoff');
+            if (!active || !mounted.current || epoch !== activityEpoch.current) return;
+            if (result.connected === false) {
+              if (!browserAvailable.current && !handoff) return;
+              disconnected();
+              return;
+            }
+            if (result.connected === true) browserAvailable.current = true;
+            if (result.permissions && JSON.stringify(result.permissions) !== JSON.stringify(permissions)) {
+              if (sitePermissions(result.permissions, origin) !== sitePermissions(permissions, origin)) {
+                setFrame(null); setPoint(null); setLive(false);
+                setNotice('Site permissions changed. Your draft is kept. Capture a new preview after access is granted.');
+              }
+              setPermissions(result.permissions);
+            }
+            const next = result.handoff ?? null;
+            if (JSON.stringify(next) === JSON.stringify(handoff)) return;
+            setHandoff(next); setFrame(null); setPoint(null); setLive(false);
+          } catch { /* The next visible tick retries; browser actions still enforce handoff. */ }
+          finally { reading = false; }
+        }, 2500);
+        return () => { active = false; clearInterval(timer); };
+      }, [execute, handoff, permissions, origin]);
+      const expire = () => { setExpired(true); setPoint(null); setLive(false); };
+      useEffect(() => {
+        setExpired(false);
+        if (!frame) return;
+        const remaining = frame.capturedAt + 60000 - Date.now();
+        if (remaining <= 0) { expire(); return; }
+        let active = true;
+        const timer = setTimeout(() => { if (active) expire(); }, remaining);
+        return () => { active = false; clearTimeout(timer); };
+      }, [frame]);
+      useEffect(() => {
+        if (!live || point || !pageId || handoff) return;
+        const timer = setInterval(() => { void run(refresh); }, 2500);
+        return () => clearInterval(timer);
+      }, [live, point, pageId, handoff, execute]);
+      const canSelect = () => {
+        if (!frame || handoff || pending.current || controlPending.current || expired) return false;
+        if (Date.now() - frame.capturedAt >= 60000) { expire(); return false; }
+        return true;
+      };
+      const selectPoint = event => {
+        if (!canSelect()) return;
+        setLive(false);
+        const rect = event.currentTarget.getBoundingClientRect();
+        setPoint({ x: Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)), y: Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height)) });
+      };
+      const selectPointKey = event => {
+        if (event.altKey || event.ctrlKey || event.metaKey || !['Enter', ' ', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return;
+        event.preventDefault();
+        if (!canSelect()) return;
+        if (event.key === 'Escape') { setPoint(null); return; }
+        setLive(false);
+        setPoint(previous => {
+          const xMax = frame.width - 1, yMax = frame.height - 1;
+          const base = ['Enter', ' '].includes(event.key) ? null : previous;
+          let x = Math.round((base?.x ?? 0.5) * xMax), y = Math.round((base?.y ?? 0.5) * yMax);
+          const step = event.shiftKey ? 10 : 1;
+          if (event.key === 'ArrowLeft') x -= step;
+          if (event.key === 'ArrowRight') x += step;
+          if (event.key === 'ArrowUp') y -= step;
+          if (event.key === 'ArrowDown') y += step;
+          return { x: xMax ? Math.min(xMax, Math.max(0, x)) / xMax : 0, y: yMax ? Math.min(yMax, Math.max(0, y)) / yMax : 0 };
+        });
+      };
+      const rule = permissions?.sites?.[origin];
+      const access = rule?.access === 'block' ? 'Blocked' : rule?.access === 'allow' ? 'Always allowed' :
+        permissions?.sessionSites?.includes(origin) ? 'Allowed until browser stops' : permissions ? 'Permission required' : 'Refresh tabs to load permissions';
+      const changeControl = async action => {
+        if (controlPending.current) return;
+        // Stop and revocation must not wait for a slow ordinary request. The epoch
+        // prevents earlier responses from restoring pixels or stale grants.
+        controlPending.current = true; controlEpoch.current++;
+        activityEpoch.current++;
+        // Superseded requests may remain in transport indefinitely. Release their
+        // UI lock; only the currently owned operation may clear a later lock.
+        pending.current = false; setBusy(false);
+        setControlBusy(true); setError(''); setNotice('');
+        setFrame(null); setPoint(null); setLive(false);
+        try {
+          await action();
+        } catch (error) {
+          setError(error.message); setPermissions(null);
+        } finally { controlPending.current = false; setControlBusy(false); }
+      };
+      const changePermission = (change, value = origin) => changeControl(async () => {
+        const result = await execute('permission', { change, value });
+        setPermissions(result.permissions);
+        setNotice(change === 'developer-mode' ? `Developer mode ${value}. Each site also needs its own grant.` : `Permissions updated for ${value}.`);
+      });
+      const stop = () => changeControl(async () => {
+        browserAvailable.current = false;
+        setPages([]); setPageId(''); setPermissions(null); setHandoff(null);
+        await execute('stop');
+        setNotice('Browser stopped. Your draft is kept. Start the browser and capture a new preview to continue.');
+      });
+      const resume = () => run(async current => {
+        setNotice(''); setFrame(null); setPoint(null); setLive(false);
+        await execute('resume');
+        if (!current() || !mounted.current) return;
+        setHandoff(null);
+        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' } },
+        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' } },
+          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.'),
+          handoff.focusError && h('p', null, handoff.focusError),
+          h('p', null, 'Complete the manual step in Chrome, then resume browser control.'),
+          previewButton({ style: button, disabled: busy || controlBusy, onClick: resume }, 'Resume browser control')),
+        h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } },
+          previewButton({ style: button, disabled: busy || controlBusy || !!handoff, onClick: () => run(async current => { setNotice(''); await execute('start'); if (current()) await list(current); }) }, 'Start browser'),
+          previewButton({ style: button, disabled: controlBusy, onClick: stop }, 'Stop browser'),
+          previewButton({ style: button, disabled: busy || controlBusy, onClick: () => run(list) }, 'Refresh tabs'),
+          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 } },
+          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 } },
+            ...[['Allow this session', 'once'], ['Always allow', 'allow'], ['Block site', 'block'], ['Forget decision', 'forget']].map(([label, change]) =>
+              previewButton({ key: change, style: button, disabled: controlBusy || change === 'once' && ['block', 'allow'].includes(rule?.access), onClick: () => changePermission(change) }, label))),
+          h('details', { style: { marginTop: 10 } },
+            h('summary', { style: { cursor: 'pointer' } }, 'Developer access'),
+            h('p', { 'aria-label': 'Developer access status', style: { fontSize: 12 } }, permissions ?
+              `Developer mode: ${permissions.developerMode ? 'on globally' : 'off globally'}. This site: ${rule?.developer ? 'granted' : 'not granted'}. Scripts, CSS, console and network inspection require both.` : 'Refresh tabs to load Developer permissions.'),
+            h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6 } },
+              previewButton({ style: button, disabled: controlBusy || !permissions, onClick: () => changePermission('developer-mode', permissions.developerMode ? 'off' : 'on') }, permissions?.developerMode ? 'Disable Developer mode' : 'Enable Developer mode'),
+              previewButton({ style: button, disabled: controlBusy || !permissions || rule?.access === 'block', onClick: () => changePermission(rule?.developer ? 'developer-block' : 'developer-allow') }, rule?.developer ? 'Revoke site Developer access' : 'Grant site Developer access'))),
+          h('p', { style: { fontSize: 12, opacity: 0.75, marginBottom: 0 } }, 'Changes apply to this exact origin. Action approvals still apply. Permissions sync while this pane is visible and idle; Refresh tabs updates them immediately.')),
+        h('label', null, h('input', { type: 'checkbox', checked: live, disabled: controlBusy || !pageId || !!point || !!handoff, onChange: e => setLive(e.target.checked) }), ' Refresh while visible'),
+        error && h('div', { role: 'alert', style: { whiteSpace: 'pre-wrap', color: '#db6868' } }, error),
+        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 } }),
+            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}.`),
+        frame && expired && h('p', { 'aria-label': 'Preview freshness', role: 'status', style: { fontSize: 12, margin: 0 } }, 'This preview has expired. Choose Refresh preview, then select the point again. Your draft is kept.'),
+        h('textarea', { 'aria-label': 'Browser annotation', placeholder: 'Describe what should change here…', value: text, maxLength: 4000, onChange: e => { draftRevision.current++; setText(e.target.value); }, style: { ...button, minHeight: 76, width: '100%', boxSizing: 'border-box', cursor: 'text' } }),
+        previewButton({ style: button, disabled: busy || controlBusy || expired || !!handoff || !frame || !point || !text.trim(), onClick: () => run(async current => {
+          if (!frame || handoff || expired || !point || !text.trim()) return;
+          // Background windows may throttle timers; check again at submission.
+          if (Date.now() - frame.capturedAt >= 60000) { expire(); return; }
+          const revision = draftRevision.current;
+          const result = await execute('annotate', { annotation: { token: frame.token, ...point, text } });
+          if (!current()) return;
+          setNotice(result.message); setPoint(null); setFrame(null);
+          // The editable field may already contain the user's next annotation.
+          if (draftRevision.current === revision) setText('');
+        }) }, 'Send annotation'),
+        notice && h('div', { role: 'status' }, notice));
+    }
+    function SessionPane({ execute, visible }) {
+      // Keep only the draft and selected tab while this session's pane is hidden.
+      // Sharing the revision also lets an in-flight send settle without clearing
+      // text edited after reopening. Pixels and refresh timers remain disposable.
+      const [pageId, setPageId] = useState(''), [text, setText] = useState('');
+      const draftRevision = useRef(0);
+      return visible ? h(SessionPreview, { execute, draft: { pageId, setPageId, text, setText, draftRevision } }) : null;
+    }
+    function Preview({ sessionId, execute, useTabInfo }) {
+      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 {
+      inject: ['slots', 'sidebarRightTabs', 'connection'],
+      apply(ctx) {
+        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 = {}) => {
+            const response = await ctx.connection.rpc.call('/api', 'dscode-browser', { sessionId, action, ...args });
+            if (!response.ok) throw Error(response.error.message);
+            return response.value;
+          } }),
+        }, Preview)), 'dscode-browser-preview.body');
+      },
+    };
+  },
+});
+
+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' };
+    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);
+      const [refreshError, setRefreshError] = useState('');
+      const pending = useRef(null), foreground = useRef(false), alive = useRef(true);
+      const run = async (action, args = {}, background = false) => {
+        if (background ? pending.current : foreground.current) return;
+        if (!background) { foreground.current = true; setBusy(true); setError(''); }
+        const previous = pending.current;
+        const operation = (async () => {
+          if (previous) await previous;
+          if (!alive.current) return;
+          try {
+            const value = await execute(action, args);
+            if (!alive.current) return;
+            setState(value); setRefreshError('');
+            if (action === 'status' && !value.opencode.pending) setNotice('');
+            if (action !== 'status') { setNotice(value.notice ?? ''); setConfirm(null); }
+            if (action === 'save-openrouter' || action === 'remove-openrouter') setKey('');
+          } catch (error) {
+            if (alive.current) {
+              if (background) setRefreshError(`Unable to refresh accounts: ${error.message}`);
+              else setError(error.message);
+            }
+          }
+        })();
+        pending.current = operation;
+        try { await operation; } finally {
+          if (pending.current === operation) pending.current = null;
+          if (!background) { foreground.current = false; if (alive.current) setBusy(false); }
+        }
+      };
+      useEffect(() => { alive.current = true; void run('status'); return () => { alive.current = false; }; }, []);
+      useEffect(() => {
+        if (!state?.opencode.pending) return;
+        const timer = setInterval(() => { void run('status', {}, true); }, 2000);
+        return () => clearInterval(timer);
+      }, [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'),
+        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('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('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'),
+          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'),
+          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 } },
+            button('Sign in to OpenCode Go', () => run('login-opencode'), state.opencode.pending),
+            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',
+        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));
+    } };
+  },
+});
+
+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 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 });
+    function Schedules({ execute }) {
+      const [snapshot, setSnapshot] = useState(null), [session, setSession] = useState(''), [workspace, setWorkspace] = useState(null);
+      const [draft, setDraft] = useState(initial), [editing, setEditing] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState(''), [log, setLog] = useState('');
+      const [refreshError, setRefreshError] = useState('');
+      const pending = useRef(null), foreground = useRef(false), alive = useRef(true), selected = useRef(''), eventKeys = useRef(new Map()), actionError = useRef(null);
+      // Foreground failures must be visible even after submitting a long form.
+      // Polling errors use separate state and must not steal the user's focus.
+      useEffect(() => { if (error) actionError.current?.focus(); }, [error]);
+      const refresh = async () => {
+        const value = await execute('status');
+        if (!alive.current) return;
+        setSnapshot(value);
+        const id = value.sessions.some(item => item.id === selected.current) ? selected.current : value.sessions[0]?.id ?? '';
+        if (id !== selected.current) { setWorkspace(null); setEditing(null); setDraft(initial()); setLog(''); }
+        selected.current = id; setSession(id);
+        if (id) {
+          const result = await execute('workspace', { sessionId: id });
+          if (alive.current && selected.current === id) setWorkspace(result);
+        } else setWorkspace(null);
+        if (alive.current) setRefreshError('');
+      };
+      const run = async (task, background = false) => {
+        if (background ? pending.current : foreground.current) return;
+        if (!background) { foreground.current = true; setBusy(true); setError(''); }
+        const previous = pending.current;
+        const operation = (async () => {
+          if (previous) await previous;
+          if (!alive.current) return;
+          try { await task(); } catch (error) {
+            if (alive.current) {
+              if (background) setRefreshError(`Unable to refresh schedules: ${error.message}`);
+              else setError(error.message);
+            }
+          }
+        })();
+        pending.current = operation;
+        try { await operation; } finally {
+          if (pending.current === operation) pending.current = null;
+          if (!background) { foreground.current = false; if (alive.current) setBusy(false); }
+        }
+      };
+      useEffect(() => {
+        alive.current = true; void run(refresh);
+        const timer = setInterval(() => { void run(refresh, true); }, 5000);
+        return () => { alive.current = false; clearInterval(timer); };
+      }, []);
+      const mutate = (action, args) => run(async () => {
+        await execute(action, { sessionId: selected.current, args }); await refresh();
+      });
+      const button = (label, action, disabled = false) => h('button', { type: 'button', style: control, disabled: busy || disabled, onClick: action }, label);
+      const field = (label, key, type = 'text') => h('label', { style: { display: 'grid', gap: 4 } }, label,
+        h('input', { 'aria-label': label, style: control, type, value: draft[key], disabled: key === 'id' && !!editing,
+          onChange: event => setDraft(previous => ({ ...previous, [key]: event.target.value })) }));
+      const select = (label, key, values) => h('label', null, label, h('select', { 'aria-label': label, style: control, value: draft[key],
+        onChange: event => setDraft(previous => ({ ...previous, [key]: event.target.value })) }, ...values.map(([value, label]) => h('option', { key: value, value }, label))));
+      const edit = definition => {
+        setEditing(definition);
+        setDraft({ ...initial(), id: definition.id, prompt: definition.prompt, objective: definition.goal.objective, kind: definition.source.kind,
+          seconds: String(definition.source.seconds ?? definition.source.everySeconds ?? 3600), cron: definition.source.cron ?? '0 9 * * 1-5',
+          timezone: definition.source.timezone ?? initial().timezone, command: JSON.stringify(definition.source.command ?? []),
+          scriptMode: definition.source.mode ?? 'poll', persistent: definition.session.mode === 'persistent', permission: definition.permission, enabled: definition.enabled });
+      };
+      const save = () => run(async () => {
+        const source = draft.kind === 'calendar' ? { kind: 'calendar', cron: draft.cron, timezone: draft.timezone }
+          : draft.kind === 'interval' ? { kind: 'interval', seconds: Number(draft.seconds) }
+            : draft.kind === 'script' ? { kind: 'script', mode: draft.scriptMode, command: JSON.parse(draft.command),
+              ...(draft.scriptMode === 'poll' ? { everySeconds: Number(draft.seconds) } : {}) } : { kind: 'external' };
+        const previousSource = editing?.source.kind === draft.kind ? { ...editing.source } : {};
+        if (draft.kind === 'script' && draft.scriptMode === 'daemon') { delete previousSource.everySeconds; delete previousSource.timeoutSeconds; }
+        await execute('manage', { sessionId: selected.current, args: { action: editing ? 'update' : 'create', trigger_id: draft.id,
+          definition: { prompt: draft.prompt, source: { ...previousSource, ...source },
+            goal: { ...(editing?.goal ?? {}), objective: draft.objective.trim() || draft.prompt }, session: { mode: draft.persistent ? 'persistent' : 'new' },
+            permission: draft.permission, enabled: draft.enabled } } });
+        if (alive.current) { setEditing(null); setDraft(initial()); }
+        await refresh();
+      });
+      const runIdentity = definition => JSON.stringify([definition.workspace, definition.id]);
+      const runOnce = definition => run(async () => {
+        const identity = runIdentity(definition);
+        if (!eventKeys.current.has(identity)) eventKeys.current.set(identity, crypto.randomUUID());
+        await execute('jobs', { sessionId: selected.current, args: { action: 'schedule', trigger_id: definition.id, after: '1s', idempotency_key: eventKeys.current.get(identity) } });
+        // Keep this task's key through a lost reply or failed refresh, even if
+        // 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'),
+        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),
+        snapshot && h('div', { role: 'status' }, `Delivery: ${snapshot.scheduler.running ? 'running' : snapshot.scheduler.stopping ? 'stopping' : 'stopped'} · Resume on launch: ${snapshot.scheduler.enabled ? 'on' : 'off'}${snapshot.scheduler.owner === 'external' ? ' · controlled by another process' : ''}`),
+        snapshot?.scheduler.error && h('div', { role: 'alert' }, snapshot.scheduler.error),
+        h('div', { style: row },
+          button('Enable delivery and resume on launch', () => run(async () => { await execute('start'); await refresh(); }), !snapshot || snapshot.scheduler.owner === 'external' || snapshot.scheduler.running || snapshot.scheduler.stopping),
+          button('Stop delivery and disable resume', () => run(async () => { await execute('stop'); await refresh(); }), !snapshot || (!snapshot.scheduler.enabled && !snapshot.scheduler.running)),
+          button('Refresh schedules', () => run(refresh))),
+        snapshot?.scheduler.owner === 'external' && h('p', null, snapshot.scheduler.next_step),
+        h('label', null, 'Workspace session', h('select', { 'aria-label': 'Workspace session', style: { ...control, display: 'block', width: '100%' }, value: session, disabled: busy,
+          onChange: event => { selected.current = event.target.value; setSession(event.target.value); setWorkspace(null); setEditing(null); setDraft(initial()); setLog(''); void run(refresh); } },
+        h('option', { value: '' }, 'Choose an open DSCODE session'), ...(snapshot?.sessions ?? []).map(item => h('option', { key: item.id, value: item.id }, `${item.workspace} · ${item.id.slice(0, 8)}`)))),
+        !session && h('p', null, 'Open a DSCODE session in the project you want to schedule.'),
+        workspace && h('div', null,
+          !workspace.writable && h('p', null, 'This session can inspect schedules. Use a writable, non-plan session to change them.'),
+          ...workspace.problems.map(problem => h('div', { role: 'alert', key: problem.path }, `${problem.path}: ${problem.message}`)),
+          h('h3', null, 'Tasks'),
+          ...workspace.definitions.map(item => h('article', { key: item.id, style: { padding: '12px 0', borderBottom: '1px solid #8884' } },
+            h('strong', null, item.id), h('p', null, `${item.enabled ? 'Enabled' : 'Paused'} · ${item.source.kind} · ${item.permission}`), h('p', { style: { whiteSpace: 'pre-wrap' } }, item.prompt),
+            h('div', { style: row }, button(`Edit ${item.id}`, () => edit(item), !workspace.writable || item.origin !== 'project'),
+              button(`${item.enabled ? 'Pause' : 'Enable'} ${item.id}`, () => mutate('manage', { action: item.enabled ? 'disable' : 'enable', trigger_id: item.id }), !workspace.writable || item.origin !== 'project'),
+              button(`${eventKeys.current.has(runIdentity(item)) ? 'Retry' : 'Run'} ${item.id} once`, () => runOnce(item), !workspace.writable || !item.enabled)),
+            item.source.kind === 'script' && h('div', { style: row },
+              h('span', null, `Source: ${workspace.sources.find(source => source.triggerId === item.id)?.status ?? 'unregistered'}`),
+              ...['start', 'stop', 'restart'].map(action => button(`${action} ${item.id} source`, () => mutate('source', { action, trigger_id: item.id }), !workspace.writable)),
+              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('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'),
+            select('Schedule', 'kind', [['interval', 'Interval'], ['calendar', 'Calendar'], ['external', 'Manual or external event'], ['script', 'Script events']]),
+            draft.kind === 'calendar' && h('div', { style: { display: 'grid', gap: 8 } }, field('Cron expression', 'cron'), field('Timezone', 'timezone')),
+            draft.kind === 'script' && h('div', { style: { display: 'grid', gap: 8 } }, field('Script command (JSON argument array)', 'command'), select('Script mode', 'scriptMode', [['poll', 'Poll'], ['daemon', 'Daemon']])),
+            (draft.kind === 'interval' || (draft.kind === 'script' && draft.scriptMode === 'poll')) && field('Interval seconds', 'seconds', 'number'),
+            select('Run permission', 'permission', [['read-only', 'Read only'], ['workspace-write', 'Write in this workspace']]),
+            ...[['persistent', 'Continue the task’s own session'], ['enabled', 'Enable this task']].map(([key, label]) => h('label', { key }, h('input', { type: 'checkbox', checked: draft[key],
+              onChange: event => setDraft(previous => ({ ...previous, [key]: event.target.checked })) }), label)),
+            h('div', { style: row }, button(editing ? 'Save task changes' : 'Create task', save, !draft.id.trim() || !draft.prompt.trim()),
+              editing && button('Cancel editing', () => { setEditing(null); setDraft(initial()); }))),
+          h('h3', null, 'Recent jobs'),
+          ...workspace.jobs.map(job => h('div', { key: job.id, style: { ...row, padding: '8px 0' } },
+            h('span', { style: { flex: 1 } }, `${job.triggerId}: ${job.state}${job.reason ? ` (${job.reason})` : ''} · ${new Date(job.dueAt).toLocaleString()}`),
+            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',
+        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));
+    } };
+  },
+});
+
+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' };
+    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);
+      const [form, setForm] = useState({ account: '', host: 'imap.gmail.com', port: '993', mailbox: 'INBOX', password: '' });
+      const [path, setPath] = useState('');
+      const active = useRef(null), foreground = useRef(false), alive = useRef(true), requestId = useRef(''), formTouched = useRef(false);
+      const run = async (work, background = false) => {
+        if (background ? active.current : foreground.current) return;
+        if (!background) { foreground.current = true; setBusy(true); setError(''); }
+        const previous = active.current;
+        const operation = (async () => {
+          if (previous) await previous;
+          if (!alive.current) return;
+          try { await work(); } catch (error) { if (alive.current) setError(error.message); }
+        })();
+        active.current = operation;
+        try { await operation; } finally {
+          if (active.current === operation) active.current = null;
+          if (!background) { foreground.current = false; if (alive.current) setBusy(false); }
+        }
+      };
+      const refresh = async page => {
+        const result = await execute('list', { offset: page });
+        if (!alive.current) return;
+        setState(result); setOffset(page);
+        if (!formTouched.current && result.imap.connected) setForm(old => ({ ...old, account: result.imap.account ?? '',
+          host: result.imap.host ?? 'imap.gmail.com', port: String(result.imap.port ?? 993), mailbox: result.imap.mailbox ?? 'INBOX' }));
+      };
+      useEffect(() => { alive.current = true; void run(() => refresh(0)); return () => { alive.current = false; }; }, []);
+      useEffect(() => {
+        const timer = setInterval(() => { void run(() => refresh(offset), true); }, 2000);
+        return () => clearInterval(timer);
+      }, [offset]);
+      const action = (name, args = {}) => run(async () => {
+        await execute(name, args);
+        if (alive.current) await refresh(offset);
+      });
+      const button = (text, click, disabled = false) => h('button', { type: 'button', style: control, disabled: busy || disabled, onClick: click }, text);
+      const field = (name, label, type = 'text') => h('label', { style: { display: 'grid', gap: 4 } }, label,
+        h('input', { 'aria-label': label, type, autoComplete: type === 'password' ? 'new-password' : 'off', style: { ...control, width: '100%', boxSizing: 'border-box' },
+          value: form[name], onChange: event => { formTouched.current = true; setForm(old => ({ ...old, [name]: event.target.value })); } }));
+      const select = key => run(async () => {
+        setMail(null); setSent(false); setNotice('');
+        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 } },
+        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),
+        notice && h('div', { role: 'status' }, notice),
+        h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } },
+          button('Refresh inbox', () => run(() => refresh(offset))),
+          button('Sync now', () => action('sync'), !!state?.pending || !(state?.imap.connected || state?.gmail.connected)),
+          state?.pending && button('Cancel email operation', () => action('cancel'))),
+        state && h('div', { style: { fontSize: 12 } }, state.pending ? `Running: ${state.pending}`
+          : state.last?.message ?? (state.imap.connected ? `IMAP · ${state.imap.account} · ${state.imap.mailbox}` : state.gmail.connected ? `Gmail · ${state.gmail.account}` : 'No mailbox connected')),
+        state?.rejected > 0 && h('div', { role: 'alert' }, `${state.rejected} unreadable local records were skipped.`),
+        h('details', null, h('summary', null, 'Mailbox connection'),
+          h('div', { style: { display: 'grid', gap: 10, marginTop: 10 } },
+            h('label', null, h('input', { type: 'checkbox', checked: state?.enabled ?? false, disabled: busy || !state,
+              onChange: event => action('background', { enabled: event.target.checked }) }), ' Sync in the background while Desktop is open'),
+            h('p', { style: { fontSize: 12, margin: 0 } }, 'IMAP takes precedence over Gmail OAuth. Only new [ToAgent] plain-text mail is imported. The first connection records a starting point without importing old mail.'),
+            h('form', { onSubmit: event => { event.preventDefault(); void run(async () => {
+              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('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('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' } })),
+              button('Import OAuth client', () => action('configure-gmail', { path }), !path.trim()),
+              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' },
+            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 } },
+          button('Previous emails', () => run(() => refresh(Math.max(0, offset - 50))), offset === 0),
+          button('Next emails', () => run(() => refresh(offset + 50)), offset + 50 >= state.total)),
+        mail && h('article', { 'aria-label': 'Email preview', style: { overflowWrap: 'anywhere' } },
+          h('h3', null, mail.subject), h('p', null, `From: ${mail.from}`), h('p', { style: { fontSize: 12 } }, `${mail.account} · ${mail.connector}`),
+          h('pre', { style: { whiteSpace: 'pre-wrap', font: 'inherit', maxHeight: '32vh', overflow: 'auto' } }, mail.body),
+          button(sent ? 'Added to this session' : 'Add email to this session', () => run(async () => {
+            const result = await execute('inject', { key: mail.key, revision: mail.revision, requestId: requestId.current });
+            if (alive.current) { setSent(true); setNotice(result.message); }
+          }), sent)));
+    }
+    function EmailPane({ sessionId, execute, useTabInfo }) {
+      const { tab } = useTabInfo();
+      return tab.visible ? h(Inbox, { key: sessionId, execute }) : null;
+    }
+    const id = '@toddzheng024/dscode-email-desktop';
+    return { inject: ['slots', 'sidebarRightTabs', 'connection'], apply(ctx) {
+      ctx.effect(() => ctx.sidebarRightTabs.register({ id, kind: 'dscode-email', multiple: false, title: () => 'Email inbox',
+        guide: [{ id: 'open', order: 32, title: () => 'Email inbox', description: () => 'Read local mail and add a chosen message to this session.' }] }), 'dscode-email.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 = {}) => {
+          const response = await ctx.connection.rpc.call('/api', 'dscode-email', { sessionId, action, ...args });
+          if (!response.ok) throw Error(response.error.message);
+          return response.value;
+        } }),
+      }, EmailPane)), 'dscode-email.body');
+    } };
+  },
+});
+
+components.push({
+  id: '@toddzheng024/dscode-desktop',
+  factory: require => {
+    const { createElement: h, useState, useEffect, useRef } = require('react');
+    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' };
+    function Usage({ execute }) {
+      const [state, setState] = useState(null), [error, setError] = useState('');
+      const active = useRef(false), alive = useRef(true);
+      const refresh = async () => {
+        if (active.current) return; active.current = true;
+        try { const next = await execute(); if (alive.current) { setState(next); setError(''); } }
+        catch (error) { if (alive.current) { setState(null); setError(error.message); } }
+        finally { active.current = false; }
+      };
+      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 } },
+        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' } },
+        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'),
+        error && h('p', { role: 'alert' }, error),
+        !state && !error && h('p', { role: 'status' }, 'Loading usage…'),
+        state && h('div', null,
+          h('p', { style: { overflowWrap: 'anywhere', fontSize: 12 } }, `${state.provider} / ${state.model}`),
+          h('p', { role: 'status' }, state.requestActive ? 'Model request in progress' : 'No active model request'),
+          h('dl', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 8 } },
+            fact('Recorded cost', money(state.cost, state.partial)), fact('Model calls', state.calls ?? 'Unknown'),
+            fact('Pending calls', state.pending ?? 'Unknown'), fact('Context estimate', percent(state.contextPercent)),
+            fact('Input cache share', percent(state.cachePercent)), fact('Smoothed request speed', speed(state.currentTps)),
+            fact('Session average speed', speed(state.averageTps)),
+            state.balance !== null && fact('Cached provider balance', money(state.balance)),
+            state.subscription && fact('Cached subscription usage', state.subscription),
+            state.budget && fact('Configured cost budget', `${money(state.budget.spent)} / ${money(state.budget.limit)} · ${state.budget.state}`)),
+          h('p', { style: { fontSize: 12 } }, 'Unknown means a reading or price is unavailable. + marks a partial cost. Pending calls have not settled. Cached account figures may lag the provider.'),
+          h('h3', null, 'Cost by turn'),
+          state.turns.length ? h('table', { style: { width: '100%', borderCollapse: 'collapse', textAlign: 'left', fontVariantNumeric: 'tabular-nums' } },
+            h('thead', null, h('tr', null, ...['Turn', 'Calls', 'Cost'].map(label => h('th', { key: label, style: { padding: 6 } }, label)))),
+            h('tbody', null, ...state.turns.map(row => h('tr', { key: row.turn }, h('td', { style: { padding: 6 } }, row.turn), h('td', { style: { padding: 6 } }, row.calls), h('td', { style: { padding: 6 } }, money(row.cost, row.partial))))))
+            : h('p', null, 'No turn costs recorded yet.'),
+          state.totalTurns > 50 && h('p', { style: { fontSize: 12 } }, `Showing the latest 50 of ${state.totalTurns} turns.`),
+          h('p', { style: { fontSize: 12 } }, `Cost outside recorded turn windows: ${money(state.unattributed, state.unattributedPartial)}`),
+          h('p', { style: { fontSize: 12 } }, 'Refreshes once per second while visible. Reading usage does not start the agent or request new account data.')));
+    }
+    function UsagePane({ sessionId, execute, useTabInfo }) { const { tab } = useTabInfo(); return tab.visible ? h(Usage, { key: sessionId, execute }) : null; }
+    const id = '@toddzheng024/dscode-metrics-desktop';
+    return { inject: ['slots', 'sidebarRightTabs', 'connection'], apply(ctx) {
+      ctx.effect(() => ctx.sidebarRightTabs.register({ id, kind: 'dscode-metrics', multiple: false, title: () => 'Session usage',
+        guide: [{ id: 'open', order: 33, title: () => 'Session usage', description: () => 'Inspect DSCODE cost, context, cache and request speed.' }] }), 'dscode-metrics.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 () => {
+          const response = await ctx.connection.rpc.call('/api', 'dscode-metrics', { action: 'status', sessionId });
+          if (!response.ok) throw Error(response.error.message); return response.value;
+        } }),
+      }, UsagePane)), 'dscode-metrics.body');
+    } };
+  },
+});
+
+components.push({
+  id: '@toddzheng024/dscode-desktop',
+  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' };
+    function Board({ execute }) {
+      const [state, setState] = useState(null), [error, setError] = useState('');
+      const active = useRef(false), alive = useRef(true);
+      const refresh = async () => {
+        if (active.current) return; active.current = true;
+        try { const next = await execute(); if (alive.current) { setState(next); setError(''); } }
+        catch (error) { if (alive.current) { setState(null); setError(error.message); } }
+        finally { active.current = false; }
+      };
+      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' } },
+        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'),
+        task.blockedBy.length > 0 ? h('p', null, `Blocked by ${task.blockedBy.join(', ')}`) : column === 'pending' && h('p', null, 'Ready to launch'),
+        column === 'verifying' && h('p', null, 'Awaiting coordinator verification'),
+        task.dependsOn.length > 0 && h('p', { style: { fontSize: 12 } }, `Depends on ${task.dependsOn.join(', ')}`),
+        (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' } },
+        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'),
+        error && h('p', { role: 'alert' }, error),
+        !state && !error && h('p', { role: 'status' }, 'Loading delegation board…'),
+        state && h('div', null,
+          h('p', { role: 'status' }, `${state.running} of ${state.limit} child slots running`),
+          !columns.some(([key]) => state.columns[key].length) && h('p', null, 'No delegated tasks yet.'),
+          h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12 } },
+            ...columns.map(([key, label]) => h('section', { key, 'aria-label': label }, h('h3', null, `${label} (${state.columns[key].length})`),
+              state.columns[key].length ? h('ul', { style: { padding: 0, margin: 0 } }, ...state.columns[key].map(task => card(task, key))) : h('p', { style: { fontSize: 12 } }, 'None')))),
+          h('p', { style: { fontSize: 12 } }, 'Refreshes once per second while visible. Reading the board does not launch children, change tasks or merge work.')));
+    }
+    function BoardPane({ sessionId, execute, useTabInfo }) { const { tab } = useTabInfo(); return tab.visible ? h(Board, { key: sessionId, execute }) : null; }
+    const id = '@toddzheng024/dscode-delegation-desktop';
+    return { inject: ['slots', 'sidebarRightTabs', 'connection'], apply(ctx) {
+      ctx.effect(() => ctx.sidebarRightTabs.register({ id, kind: 'dscode-delegation', multiple: false, title: () => 'Delegation board',
+        guide: [{ id: 'open', order: 34, title: () => 'Delegation board', description: () => 'Follow DSCODE delegated tasks, dependencies and verification.' }] }), 'dscode-delegation.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 () => {
+          const response = await ctx.connection.rpc.call('/api', 'dscode-delegation', { action: 'status', sessionId });
+          if (!response.ok) throw Error(response.error.message); return response.value;
+        } }),
+      }, BoardPane)), 'dscode-delegation.body');
+    } };
+  },
+});
+
+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)));
+    }
+    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));
+    } };
+  },
+});
+
+globalThis.__ModuleLoader__.load({
+  id: "@toddzheng024/dscode-desktop",
+  factory: require => {
+    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); },
+    };
+  },
+});
+})();