@aiwuk/autocomplete 0.0.0-stage → 1.0.4

package/client.js

@@ -0,0 +1,1170 @@
+// @generated by packages/autocomplete/scripts/build-client.mjs from client/*.js — edit those files, then run npm run build:autocomplete.
+// Composer ghost-text suggestions and the settings card. React comes from the host module table.
+window.__ModuleLoader__.load({
+  id: '@aiwuk/autocomplete',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+    // Relative to the page (<base href="./">), so it works on loopback, behind the hub tunnel and under any path prefix.
+    const ENDPOINT = 'autocomplete/predict';
+    const NS = 'capability-autocomplete';
+    const PACKAGE = '@aiwuk/autocomplete';
+    const FORM = 'autocomplete';
+    const DEFAULTS = { enabled: true, routeMode: 'session', provider: '', model: '', maxSuggestions: 3, typePauseMs: 700, mobileBar: true };
+    const NO_GHOST = { mode: 'next', items: [], index: 0, stream: '', active: false };
+    const en = {
+      title: 'Composer autocomplete', hint: 'Inline continuation while you pause and next-message suggestions after replies; Tab on desktop or tap the bar on mobile accepts, nothing is sent automatically.',
+      enabled: 'Enable suggestions', enabledHint: 'When off, no prediction is requested or shown.', route: 'Model routing',
+      routeHint: 'Follow the session model, or pin a low-latency model.', session: 'Follow session (recommended)', fixed: 'Fixed model',
+      provider: 'Provider ID', model: 'Model ID', fixedHint: 'Fixed mode needs an existing provider ID and model ID (not a key).',
+      count: 'Candidates', countHint: 'Maximum candidates per prediction; Alt+Up/Down cycles them.', pause: 'Typing pause (ms)',
+      pauseHint: 'How long after typing stops before a continuation is requested.', mobileBar: 'Touch suggestion bar',
+      mobileBarHint: 'On phones and tablets, show suggestions as tappable buttons above the composer.',
+      saved: 'Saved', failed: 'Save failed', loading: 'Loading settings…',
+      unavailable: 'Settings unavailable: make sure the plugin is enabled.', summary: 'Inline composer completion and next-message suggestions',
+      barLabel: 'Suggestions', suggest: 'Suggest', thinking: 'Thinking…', accept: 'Accept: {text}', dismiss: 'Dismiss suggestions', none: 'No suggestion',
+    };
+    /** Touch-first devices get the tap bar; a phone has no Tab key. Re-evaluated when the input mode changes. */
+    function useTouch() {
+      const query = typeof window.matchMedia === 'function' ? window.matchMedia('(pointer: coarse)') : null;
+      const [touch, setTouch] = React.useState(() => query?.matches === true);
+      React.useEffect(() => {
+        if (!query) return undefined;
+        const update = () => setTouch(query.matches === true);
+        query.addEventListener?.('change', update);
+        return () => query.removeEventListener?.('change', update);
+      }, []);
+      return touch;
+    }
+    const fill = (template, values) => template.replace(/\{(\w+)\}/g, (_m, key) => values[key] ?? '');
+    /** Re-render on a `{getSnapshot, subscribe}` store such as a ConfigForm. */
+    function useStoreSnapshot(store) {
+      const [, redraw] = React.useState(0);
+      React.useEffect(() => (typeof store?.subscribe === 'function' ? store.subscribe(() => redraw(n => n + 1)) : undefined), [store]);
+      return store?.getSnapshot?.() ?? { status: 'unavailable' };
+    }
+    const configOf = snapshot => ({ ...DEFAULTS, ...(snapshot?.status === 'ready' ? snapshot.value ?? {} : {}) });
+    function parseSse(text) {
+      const events = [];
+      for (const block of text.split(/\r?\n\r?\n/)) {
+        if (!block.trim()) continue;
+        let type = 'message', data = '';
+        for (const line of block.split(/\r?\n/)) {
+          if (line.startsWith('event:')) type = line.slice(6).trim();
+          else if (line.startsWith('data:')) data += line.slice(5).trim();
+        }
+        if (data) { try { events.push({ ...JSON.parse(data), type }); } catch { /* skip malformed frame */ } }
+      }
+      return events;
+    }
+    async function consumeStream(stream, signal, onEvent) {
+      const reader = stream.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+      try {
+        while (!signal.aborted) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const parts = buffer.split(/\r?\n\r?\n/);
+          buffer = parts.pop() ?? '';
+          for (const part of parts) for (const event of parseSse(part)) onEvent(event);
+        }
+      } finally { reader.releaseLock(); }
+    }
+    /** Slash commands and @-references own the composer; suggestions stay out of their way. */
+    const isTriggerToken = draft => /(?:^|\s)\/[^\s]*$/u.test(draft) || /(?:^|\s)@"?[^\s]*$/u.test(draft);
+    const collapse = text => text.replace(/\s+/gu, ' ').trim();
+    function composerNear(anchor) {
+      if (!anchor?.isConnected) return null;
+      const card = anchor.closest('[data-composer-card]') || anchor.closest('form') || anchor.parentElement;
+      const editor = card?.querySelector('[contenteditable="true"]') || card?.querySelector('[role="textbox"]') || card?.querySelector('textarea');
+      return editor ? { card, editor } : null;
+    }
+    function caretRect(range) {
+      let rect = range.getBoundingClientRect();
+      if (!rect.width && !rect.height) rect = range.getClientRects()[0] ?? rect;
+      if ((!rect.width && !rect.height) || (!rect.top && !rect.left)) {
+        let node = range.startContainer, offset = range.startOffset;
+        if (node?.nodeType === Node.ELEMENT_NODE && offset > 0) {
+          node = node.childNodes[offset - 1] || node;
+          offset = node.nodeType === Node.TEXT_NODE ? node.textContent?.length ?? 0 : node.childNodes?.length ?? 0;
+        }
+        if (node?.nodeType === Node.TEXT_NODE && offset > 0) {
+          const probe = document.createRange();
+          probe.setStart(node, offset - 1); probe.setEnd(node, offset);
+          const r = probe.getBoundingClientRect();
+          if (r.width || r.height) return { left: r.right, top: r.top, height: r.height };
+        }
+      }
+      return !rect.width && !rect.height ? null : { left: rect.left, top: rect.top, height: rect.height };
+    }
+    /** The caret position, only when it sits at the end of the draft (continuations append, never splice). */
+    function caretAtEnd(editor, _draft) {
+      const selection = window.getSelection();
+      if (!selection?.rangeCount) return null;
+      const range = selection.getRangeAt(0);
+      if (!range.collapsed || !editor.contains(range.startContainer)) return null;
+      const suffix = document.createRange();
+      suffix.selectNodeContents(editor);
+      suffix.setStart(range.startContainer, range.startOffset);
+      if (suffix.toString().trim() !== '') return null;
+      if (!editor.textContent?.trim()) return null;
+      return caretRect(range);
+    }
+
+    const zh = {
+      title: '输入框自动补全', hint: '打字停顿时行内续写，回复后建议下一句；电脑按 Tab、手机点建议栏采纳，绝不自动发送。',
+      enabled: '启用补全', enabledHint: '关闭后不再请求或展示任何候选。', route: '模型路由',
+      routeHint: '跟随当前会话模型，或固定一个低延迟模型。', session: '跟随会话（推荐）', fixed: '固定模型',
+      provider: '提供商 ID', model: '模型 ID', fixedHint: '固定模式需要同时填写已有的提供商 ID 与模型 ID（不是密钥）。',
+      count: '候选数', countHint: '每次最多生成的候选，Alt+↑/↓ 切换。', pause: '停顿延迟（毫秒）',
+      pauseHint: '停止输入后多久请求续写。', mobileBar: '触屏建议栏', mobileBarHint: '在手机、平板上把建议显示为输入框上方可点击的按钮。',
+      saved: '已保存', failed: '保存失败', loading: '正在读取设置…',
+      unavailable: '设置暂不可用：请确认已启用该插件。', summary: '输入框行内补全与下一句建议',
+      barLabel: '补全建议', suggest: '获取建议', thinking: '正在生成…', accept: '采纳：{text}', dismiss: '关闭建议', none: '暂无建议',
+    };
+
+    /**
+     * Whether the composer is busy and suggestions must stand down. Multi-agent sessions add two cases besides a running
+     * turn: a confirmation card docked above the composer (e.g. a team dispatch plan the user must approve), and a
+     * read-only teammate view whose composer cannot send. Composer DOM is checked, not plugin internals, so this works
+     * with any plugin that docks a card and keeps working if that plugin is absent.
+     */
+    function useComposerBusy(useSession) {
+      const session = useSession ? useSession(s => ({ running: s?.running === true, readonly: s?.subagent != null && s.subagent.address?.mode !== 'continuable' })) : null;
+      const running = session?.running === true, readonly = session?.readonly === true;
+      const [docked, setDocked] = React.useState(false);
+      React.useEffect(() => {
+        if (typeof document === 'undefined' || typeof MutationObserver !== 'function') return undefined;
+        // Any dock content other than our own strip means another surface (e.g. a dispatch confirmation) is in use.
+        const check = () => setDocked([...document.querySelectorAll('.ctm-dock, [data-composer-dock-busy]')].some(el => el.getBoundingClientRect().height > 0));
+        check();
+        const observer = new MutationObserver(check);
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => observer.disconnect();
+      }, []);
+      return { busy: running || readonly || docked, running, readonly, docked };
+    }
+    /**
+     * Shared prediction state for both input modes: one in-flight request per composer, streamed deltas, abort on
+     * draft change and during IME composition, and a "dismissed" marker so a closed suggestion does not reappear.
+     */
+    function usePredictions(sessionId, draft) {
+      const [ghost, setGhost] = React.useState(NO_GHOST);
+      const abortRef = React.useRef(null);
+      const composingRef = React.useRef(false);
+      const dismissedRef = React.useRef(null);
+      const request = React.useCallback(async (mode, text) => {
+        if (!sessionId || document.hidden) return;
+        abortRef.current?.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setGhost({ mode, items: [], index: 0, stream: '', active: true });
+        const settle = items => {
+          if (controller.signal.aborted) return;
+          setGhost(prev => (prev.mode !== mode ? prev : items.length ? { mode, items, index: 0, stream: '', active: false } : NO_GHOST));
+        };
+        try {
+          const response = await fetch(ENDPOINT, { method: 'POST', signal: controller.signal, credentials: 'same-origin',
+            headers: { 'content-type': 'application/json', accept: 'text/event-stream' },
+            body: JSON.stringify({ sessionId, mode, draft: text }) });
+          if (!response.ok || controller.signal.aborted) { settle([]); return; }
+          if (!(response.headers.get('content-type') || '').includes('text/event-stream') || !response.body) {
+            const done = parseSse(await response.text().catch(() => '')).find(e => e.type === 'done');
+            settle(Array.isArray(done?.suggestions) ? done.suggestions : []);
+            return;
+          }
+          await consumeStream(response.body, controller.signal, event => {
+            if (controller.signal.aborted) return;
+            if (event.type === 'delta' && typeof event.text === 'string') {
+              setGhost(prev => (prev.active && prev.mode === mode ? { ...prev, stream: prev.stream + event.text } : prev));
+            } else if (event.type === 'done') settle(Array.isArray(event.suggestions) ? event.suggestions : []);
+            else if (event.type === 'error') settle([]);
+          });
+        } catch { if (!controller.signal.aborted) settle([]); }
+      }, [sessionId]);
+      React.useEffect(() => {
+        const start = () => { composingRef.current = true; abortRef.current?.abort(); setGhost(NO_GHOST); };
+        const end = () => { composingRef.current = false; };
+        document.addEventListener('compositionstart', start, true);
+        document.addEventListener('compositionend', end, true);
+        return () => { document.removeEventListener('compositionstart', start, true); document.removeEventListener('compositionend', end, true); abortRef.current?.abort(); };
+      }, []);
+      React.useEffect(() => {
+        abortRef.current?.abort();
+        setGhost(NO_GHOST);
+        if (dismissedRef.current && dismissedRef.current.draft !== draft) dismissedRef.current = null;
+      }, [draft]);
+      return { ghost, setGhost, request, abortRef, composingRef, dismissedRef };
+    }
+    /** The candidate shown for a draft: continuation text after the draft, or a whole next message. */
+    function candidateOf(ghost, draft) {
+      const raw = ghost.items.length ? ghost.items[Math.min(ghost.index, ghost.items.length - 1)] ?? ''
+        : ghost.stream.trim().split(/\r?\n/)[0]?.replace(/^[-*0-9.)\s]+/, '') ?? '';
+      if (ghost.mode !== 'continue') return raw;
+      if (raw.startsWith(draft)) return raw.slice(draft.length);
+      const lowerRaw = raw.toLowerCase(), lowerDraft = draft.toLowerCase();
+      if (lowerRaw.startsWith(lowerDraft)) return raw.slice(draft.length);
+      return raw;
+    }
+
+    /** Insert into the shell-owned draft; never submits. Falls back to the editor's own insert on older hosts. */
+    function insertSuggestion(inputActions, value) {
+      if (inputActions?.insertText && inputActions.captureInsertion && inputActions.insertText(value, inputActions.captureInsertion())) return;
+      document.execCommand('insertText', false, value);
+    }
+    /** Keyboard devices: ghost text inside the composer. Touch devices use the dock strip instead (TouchDock). */
+    function ComposerOverlay(props) {
+      const config = configOf(useStoreSnapshot(props.form));
+      const touch = useTouch();
+      if (!config.enabled || (touch && config.mobileBar)) return null;
+      return h(GhostOverlay, { ...props, config });
+    }
+    /** Touch devices: the suggestion strip, rendered in the dock above the composer. */
+    function TouchDock(props) {
+      const config = configOf(useStoreSnapshot(props.form));
+      const touch = useTouch();
+      if (!config.enabled || !touch || !config.mobileBar) return null;
+      return h(TouchSuggestionBar, { ...props, config });
+    }
+    function GhostOverlay({ sessionId, useInput, useSession, inputActions, config }) {
+      const draft = useInput ? useInput(s => (s?.draft ? String(s.draft) : '')) ?? '' : '';
+      // "running" here means any busy state (running turn, docked confirmation, read-only teammate view).
+      const { busy: running } = useComposerBusy(useSession);
+      const { ghost, setGhost, request, abortRef, composingRef, dismissedRef } = usePredictions(sessionId, draft);
+      React.useEffect(() => { if (running) { abortRef.current?.abort(); setGhost(NO_GHOST); } }, [running]);
+      const [box, setBox] = React.useState(null);
+      const anchorRef = React.useRef(null);
+      const currentRef = React.useRef('');
+      React.useEffect(() => {
+        if (!config.enabled || running || draft !== '' || !sessionId || dismissedRef.current?.draft === draft) return undefined;
+        const timer = setTimeout(() => { if (!composingRef.current) void request('next', ''); }, 600);
+        return () => clearTimeout(timer);
+      }, [sessionId, running, draft, request, config.enabled]);
+      React.useEffect(() => {
+        if (!config.enabled || !sessionId || draft.trim().length < 3 || isTriggerToken(draft) || dismissedRef.current?.draft === draft) return undefined;
+        const timer = setTimeout(() => {
+          const found = composerNear(anchorRef.current);
+          if (composingRef.current || !found || !caretAtEnd(found.editor, draft)) return;
+          void request('continue', draft.slice(-4000));
+        }, Math.max(200, config.typePauseMs));
+        return () => clearTimeout(timer);
+      }, [sessionId, draft, request, config.enabled, config.typePauseMs]);
+      const current = candidateOf(ghost, draft);
+      currentRef.current = current;
+      const visible = Boolean(config.enabled && current && box && (ghost.mode === 'next' ? !draft && !running : draft.trim() && !isTriggerToken(draft)));
+      React.useLayoutEffect(() => {
+        if (!current) { setBox(null); return undefined; }
+        const measure = () => {
+          const found = composerNear(anchorRef.current);
+          if (!found) { setBox(null); return; }
+          const card = found.card.getBoundingClientRect(), editor = found.editor.getBoundingClientRect();
+          if (editor.width <= 0) { setBox(null); return; }
+          if (ghost.mode === 'next') {
+            const style = window.getComputedStyle(found.editor);
+            setBox({ top: Math.round(Math.max(0, editor.top - card.top + (parseFloat(style.paddingTop) || 8))),
+              left: Math.round(Math.max(0, editor.left - card.left + (parseFloat(style.paddingLeft) || 12))), height: Math.round(parseFloat(style.lineHeight) || 22) });
+            return;
+          }
+          const caret = caretAtEnd(found.editor, draft);
+          if (!caret) { setBox(null); return; }
+          const left = Math.max(0, caret.left - card.left);
+          setBox({ top: Math.round(caret.top - card.top), left: Math.round(left), maxWidth: Math.round(Math.max(48, card.right - card.left - left - 16)), height: Math.round(caret.height || 22) });
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        const scrollEl = anchorRef.current?.closest('[data-composer-card]')?.querySelector('[data-input-scroll]');
+        scrollEl?.addEventListener('scroll', measure, { passive: true });
+        return () => {
+          window.removeEventListener('resize', measure);
+          scrollEl?.removeEventListener('scroll', measure);
+        };
+      }, [ghost.mode, draft, sessionId, current]);
+      React.useLayoutEffect(() => {
+        if (typeof document === 'undefined') return undefined;
+        const ID = 'aiwuk-autocomplete-ghost-style';
+        if (!document.getElementById(ID)) {
+          const tag = document.createElement('style');
+          tag.id = ID;
+          tag.textContent = '[data-aiwuk-ghost-next] [data-composer-placeholder]{visibility:hidden !important;}';
+          (document.head || document.documentElement).appendChild(tag);
+        }
+        const card = anchorRef.current?.closest('[data-composer-card]') || anchorRef.current?.parentElement;
+        if (!card) return undefined;
+        if (visible && ghost.mode === 'next') card.setAttribute('data-aiwuk-ghost-next', '');
+        else card.removeAttribute('data-aiwuk-ghost-next');
+        return () => { card.removeAttribute('data-aiwuk-ghost-next'); };
+      }, [visible, ghost.mode]);
+      React.useEffect(() => {
+        if (!visible) return undefined;
+        const onSelectionChange = () => {
+          const found = composerNear(anchorRef.current);
+          if (!found) return;
+          if (ghost.mode === 'continue' && !caretAtEnd(found.editor, draft)) setBox(null);
+        };
+        document.addEventListener('selectionchange', onSelectionChange);
+        return () => document.removeEventListener('selectionchange', onSelectionChange);
+      }, [visible, ghost.mode, draft]);
+      React.useEffect(() => {
+        if (!visible) return undefined;
+        const onKeyDown = event => {
+          if (event.defaultPrevented || event.isComposing || event.keyCode === 229) return;
+          const found = composerNear(anchorRef.current);
+          if (!found || !found.card.contains(document.activeElement)) return;
+          if (event.key === 'Escape') {
+            event.preventDefault(); event.stopPropagation();
+            dismissedRef.current = { draft }; abortRef.current?.abort(); setGhost(NO_GHOST);
+          } else if (event.altKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp') && ghost.items.length > 1) {
+            event.preventDefault(); event.stopPropagation();
+            const step = event.key === 'ArrowDown' ? 1 : -1;
+            setGhost(prev => ({ ...prev, index: (prev.index + step + prev.items.length) % prev.items.length }));
+          } else if (event.key === 'Tab' && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey && !ghost.active && currentRef.current) {
+            event.preventDefault(); event.stopPropagation();
+            const value = currentRef.current;
+            dismissedRef.current = { draft: ghost.mode === 'continue' ? draft + value : value };
+            setGhost(NO_GHOST);
+            insertSuggestion(inputActions, value);
+          }
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => document.removeEventListener('keydown', onKeyDown, true);
+      }, [visible, draft, ghost.items.length, ghost.active, ghost.mode, inputActions]);
+      const anchor = h('span', { key: 'anchor', ref: anchorRef, style: { display: 'none' }, 'aria-hidden': 'true' });
+      if (!visible || !box) return anchor;
+      const tag = { fontSize: '10px', borderRadius: 'var(--dsw-radius-xs, 3px)', padding: '0 4px', border: '1px solid var(--dsw-alias-border-l2, #555)', opacity: 0.75 };
+      return h(React.Fragment, null, anchor,
+        h('div', { key: 'ghost', 'data-composer-prediction': ghost.mode, style: { position: 'absolute', top: `${box.top}px`, left: `${box.left}px`,
+          maxWidth: box.maxWidth ? `${box.maxWidth}px` : undefined, height: `${box.height}px`, display: 'flex', alignItems: 'center', gap: '6px',
+          color: 'var(--dsw-alias-label-tertiary, #888)', pointerEvents: 'none', userSelect: 'none', whiteSpace: 'pre', overflow: 'hidden', zIndex: 10 } },
+          h('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', opacity: 0.85, whiteSpace: 'pre' } }, current),
+          ghost.items.length > 1 ? h('span', { style: tag }, `${ghost.index + 1}/${ghost.items.length}`) : null,
+          ghost.active ? null : h('kbd', { style: tag }, 'Tab')));
+    }
+
+    /**
+     * One touch store per session, shared by the ✦ button (composer tool row) and the suggestion strip (dock): the two
+     * live in different slots, so they meet through this small subscribable store instead of React state.
+     */
+    const touchStores = new Map();
+    function touchStore(sessionId) {
+      let store = touchStores.get(sessionId);
+      if (!store) {
+        const listeners = new Set();
+        store = { askSeq: 0, ask() { this.askSeq += 1; for (const l of listeners) l(); }, subscribe(l) { listeners.add(l); return () => listeners.delete(l); } };
+        touchStores.set(sessionId, store);
+      }
+      return store;
+    }
+    /**
+     * Below this width the native tool row has no free space (measured at 320px: even a 28px button wrapped it onto a
+     * second line), so the ✦ moves from the tool row to the start of the suggestion strip.
+     */
+    const NARROW = '(max-width: 359px)';
+    function useNarrow() {
+      const query = typeof window.matchMedia === 'function' ? window.matchMedia(NARROW) : null;
+      const [narrow, setNarrow] = React.useState(() => query?.matches === true);
+      React.useEffect(() => {
+        if (!query) return undefined;
+        const update = () => setNarrow(query.matches === true);
+        query.addEventListener?.('change', update);
+        return () => query.removeEventListener?.('change', update);
+      }, []);
+      return narrow;
+    }
+    /** The card of THIS composer: the nearest ancestor of the strip that contains one (a page may hold several). */
+    function composerCardOf(strip) {
+      for (let el = strip?.parentElement; el; el = el.parentElement) {
+        const card = el.querySelector('[data-composer-card]');
+        if (card) return card;
+      }
+      return null;
+    }
+    /**
+     * Measure the strip's own box against the input box and correct its current margins by the difference. The dock's
+     * direct parents use `display: contents` (no box of their own), so a parent rect cannot be the reference.
+     */
+    function measureCardInset(strip, setInset) {
+      const card = composerCardOf(strip);
+      if (!card) return;
+      const own = strip.getBoundingClientRect(), target = card.getBoundingClientRect();
+      if (!target.width || !own.width) return;
+      setInset(prev => {
+        const next = { left: Math.max(0, Math.round(prev.left + target.left - own.left)), right: Math.max(0, Math.round(prev.right + own.right - target.right)) };
+        return prev.left === next.left && prev.right === next.right ? prev : next;
+      });
+    }
+    /**
+     * Insets that line the strip up with the input box. The dock spans the whole composer column, which is wider than the
+     * input box (measured on a phone: 56px on the left, 16px on the right), so without this the chips start left of it.
+     * Re-measured on resize and whenever the input box resizes; no inset when there is no input box to measure.
+     */
+    function useCardAlignment(stripRef) {
+      const [inset, setInset] = React.useState({ left: 0, right: 0 });
+      React.useLayoutEffect(() => {
+        const strip = stripRef.current;
+        if (!strip) return undefined;
+        const measure = () => measureCardInset(strip, setInset);
+        measure();
+        window.addEventListener('resize', measure);
+        const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : null;
+        const card = composerCardOf(strip);
+        if (observer && card) observer.observe(card);
+        return () => { window.removeEventListener('resize', measure); observer?.disconnect(); };
+      }, [stripRef.current]);
+      return inset;
+    }
+    /** ✦ button in the composer's own tool row (conversation.input.right): no extra height, nothing covered. */
+    function TouchAskButton({ sessionId, useSession, form, t }) {
+      const config = configOf(useStoreSnapshot(form));
+      const touch = useTouch();
+      const narrow = useNarrow();
+      const { busy } = useComposerBusy(useSession);
+      if (!touch || narrow || !config.enabled || !config.mobileBar || !sessionId || busy) return null;
+      const label = typeof t === 'function' ? t : key => en[key] ?? key;
+      return h('button', { type: 'button', 'data-action': 'suggest', 'aria-label': label('suggest'), title: label('suggest'),
+        onMouseDown: event => event.preventDefault(), onClick: () => touchStore(sessionId).ask(),
+        // Sized like the native tool-row icons (measured at 320px: a wider button wrapped the row onto two lines).
+        style: { width: '28px', height: '28px', padding: 0, flex: '0 0 auto', border: 'none', borderRadius: 'var(--dsw-radius-md, 14px)', background: 'transparent',
+          color: 'var(--dsw-alias-label-secondary, inherit)', fontSize: 'var(--dsw-font-base-16-font-size, 15px)', lineHeight: 1 } }, '✦');
+    }
+    /**
+     * Touch suggestion strip (phones, tablets): a phone has no Tab key, so suggestions are tappable chips. It renders in
+     * the dock above the composer, which DSH lays out in normal flow — it pushes content instead of covering the native
+     * controls there. It takes no space at all until there is something to show.
+     */
+    function TouchSuggestionBar({ sessionId, useInput, useSession, inputActions, config, t }) {
+      const draft = useInput ? useInput(s => (s?.draft ? String(s.draft) : '')) ?? '' : '';
+      const { busy, running } = useComposerBusy(useSession);
+      const { ghost, setGhost, request, abortRef, composingRef, dismissedRef } = usePredictions(sessionId, draft);
+      const narrow = useNarrow();
+      const stripRef = React.useRef(null);
+      const align = useCardAlignment(stripRef);
+      const label = typeof t === 'function' ? t : key => en[key] ?? key;
+      const blocked = !sessionId || busy || isTriggerToken(draft);
+      // A dispatch card or a running teammate turn appearing must also cancel a request already in flight.
+      React.useEffect(() => { if (busy) { abortRef.current?.abort(); setGhost(NO_GHOST); } }, [busy]);
+      const ask = () => {
+        if (blocked || composingRef.current) return;
+        dismissedRef.current = null;
+        void (draft.trim() ? request('continue', draft.slice(-4000)) : request('next', ''));
+      };
+      const askRef = React.useRef(ask);
+      askRef.current = ask;
+      React.useEffect(() => (sessionId ? touchStore(sessionId).subscribe(() => askRef.current()) : undefined), [sessionId]);
+      // Next-message suggestions arrive by themselves after a reply; continuations wait for an explicit tap.
+      React.useEffect(() => {
+        if (blocked || draft !== '' || dismissedRef.current?.draft === draft) return undefined;
+        const timer = setTimeout(() => { if (!composingRef.current) void request('next', ''); }, 600);
+        return () => clearTimeout(timer);
+      }, [sessionId, running, draft, request]);
+      const items = ghost.items.length ? ghost.items : [candidateOf(ghost, draft)].filter(Boolean);
+      // Nothing to show: render nothing, so the dock keeps zero height and the layout is untouched. On narrow screens
+      // the strip also carries the ✦ — but only once there is a draft to continue, so an idle composer stays compact.
+      const askHere = narrow && draft.trim() !== '';
+      if (blocked || (!ghost.active && !items.length && !askHere)) return null;
+      const accept = item => {
+        const value = ghost.mode === 'continue' && item.startsWith(draft) ? item.slice(draft.length) : item;
+        dismissedRef.current = { draft: ghost.mode === 'continue' ? draft + value : value };
+        setGhost(NO_GHOST);
+        insertSuggestion(inputActions, value);
+      };
+      const close = () => { dismissedRef.current = { draft }; abortRef.current?.abort(); setGhost(NO_GHOST); };
+      // 36px+ targets, horizontal scroll for long chips, and no focus steal so the soft keyboard stays open.
+      const keep = event => event.preventDefault();
+      const chip = { flex: '0 0 auto', maxWidth: '80vw', minHeight: '36px', padding: '6px 12px', borderRadius: 'var(--dsw-radius-lg, 18px)', overflow: 'hidden',
+        textOverflow: 'ellipsis', whiteSpace: 'nowrap', border: '1px solid var(--dsw-alias-border-l2, #555)',
+        background: 'var(--dsw-alias-bg-layer-2, transparent)', color: 'var(--dsw-alias-label-primary, inherit)', fontSize: 'var(--dsw-font-s-14-font-size, 14px)' };
+      // In flow (no absolute positioning): one row, scrolls sideways, never wraps into a second line.
+      return h('div', { ref: stripRef, role: 'toolbar', 'aria-label': label('barLabel'), 'data-autocomplete-bar': ghost.mode,
+        // flexShrink 0: the composer stack is a fixed-height flex column and would otherwise squeeze the chips flat.
+        // The dock is wider than the composer card, so the strip is inset to the card's own left and right edges.
+        style: { display: 'flex', flexShrink: 0, gap: '8px', alignItems: 'center', overflowX: 'auto', overflowY: 'hidden', WebkitOverflowScrolling: 'touch',
+          scrollbarWidth: 'none', padding: '2px 0 6px', boxSizing: 'border-box', marginLeft: `${align.left}px`, marginRight: `${align.right}px` } },
+        askHere ? h('button', { type: 'button', key: 'ask', 'data-action': 'suggest', 'aria-label': label('suggest'), onMouseDown: keep, onClick: ask,
+          disabled: ghost.active, style: { ...chip, minWidth: '36px', padding: '6px 10px' } }, ghost.active ? '…' : '✦') : null,
+        ghost.active && !items.length ? h('span', { key: 'busy', style: { fontSize: 'var(--dsw-font-xs-13-font-size, 13px)', opacity: 0.7 } }, label('thinking')) : null,
+        ...items.map((item, index) => h('button', { type: 'button', key: `s${index}`, 'data-action': 'accept', disabled: ghost.active,
+          'aria-label': fill(label('accept'), { text: item }), onMouseDown: keep, onClick: () => accept(item), style: chip }, item)),
+        items.length ? h('button', { type: 'button', key: 'close', 'data-action': 'dismiss', 'aria-label': label('dismiss'), onMouseDown: keep, onClick: close,
+          style: { ...chip, minWidth: '36px', padding: '6px 10px' } }, '×') : null);
+    }
+
+    /** Settings card bound to this plugin's ConfigForm: the host config is the single source of truth. */
+    function AutocompleteSettings({ form, t, view }) {
+      const snapshot = useStoreSnapshot(form);
+      const [draft, setDraft] = React.useState({});
+      const [result, setResult] = React.useState(null);
+      if (view === 'summary') return t('summary');
+      if (snapshot.status === 'loading') return h('p', null, t('loading'));
+      if (snapshot.status !== 'ready') return h('p', { 'data-unavailable': '' }, t('unavailable'));
+      const value = { ...configOf(snapshot), ...draft };
+      const locked = snapshot.writable === false;
+      const save = async (key, next) => {
+        setDraft(prev => ({ ...prev, [key]: next }));
+        let ok = false;
+        try { ok = await form.mutate([{ op: 'set', path: [key], value: next }], snapshot.revision); } catch { ok = false; }
+        setResult(ok ? 'saved' : 'failed');
+        if (ok) setDraft(prev => { const rest = { ...prev }; delete rest[key]; return rest; });
+      };
+      const muted = { fontSize: '12px', color: 'var(--dsw-alias-label-secondary, #888)' };
+      const row = (label, hint, control) => h('label', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px', padding: '8px 0' } },
+        h('span', { style: { display: 'flex', flexDirection: 'column', gap: '2px' } }, h('span', null, label), h('span', { style: muted }, hint)), control);
+      const number = (key, min, max, step) => h('input', { type: 'number', name: key, min, max, step, disabled: locked, value: value[key],
+        style: { width: '96px' }, onChange: event => { const n = Number(event.target.value); if (Number.isInteger(n) && n >= min && n <= max) void save(key, n); } });
+      const text = key => h('input', { type: 'text', name: key, disabled: locked, value: value[key] ?? '',
+        onChange: event => setDraft(prev => ({ ...prev, [key]: event.target.value })), onBlur: event => void save(key, event.target.value.trim()) });
+      return h('div', { 'data-autocomplete-settings': '', style: { display: 'flex', flexDirection: 'column', gap: '4px' } },
+        h('strong', null, t('title')), h('span', { style: muted }, t('hint')),
+        row(t('enabled'), t('enabledHint'), h('input', { type: 'checkbox', name: 'enabled', role: 'switch', disabled: locked, checked: value.enabled === true,
+          onChange: event => void save('enabled', event.target.checked) })),
+        row(t('route'), t('routeHint'), h('select', { name: 'routeMode', disabled: locked, value: value.routeMode, onChange: event => void save('routeMode', event.target.value) },
+          h('option', { value: 'session' }, t('session')), h('option', { value: 'fixed' }, t('fixed')))),
+        value.routeMode === 'fixed' ? h('div', { 'data-fixed-route': '' },
+          h('span', { style: muted }, t('fixedHint')), row(t('provider'), '', text('provider')), row(t('model'), '', text('model'))) : null,
+        row(t('count'), t('countHint'), number('maxSuggestions', 1, 5, 1)),
+        row(t('pause'), t('pauseHint'), number('typePauseMs', 200, 5000, 50)),
+        row(t('mobileBar'), t('mobileBarHint'), h('input', { type: 'checkbox', name: 'mobileBar', role: 'switch', disabled: locked, checked: value.mobileBar !== false,
+          onChange: event => void save('mobileBar', event.target.checked) })),
+        result ? h('span', { role: 'status', style: muted }, t(result)) : null);
+    }
+
+// @generated by shared-ui/build.mjs from shared-ui/*.js, catalog.json and locale/*.json — edit those, then run node shared-ui/build.mjs.
+    const aiwukConfig = (() => {
+    const BRAND_TEXT = {"mothership":{"en":"AIWUK Mothership","zh":"AI\u609f\u7a7a \u6bcd\u8230"}};
+    // Pure logic of the config panel (no DOM, no React, no host imports) so it is testable and reused verbatim in the
+    // browser bundle. Nothing here ever receives a secret value: secrets are described (configured / source) only.
+    
+    /** Credentials `describe` accepts at most this many refs per call. */
+    const DESCRIBE_BATCH = 64;
+    const SECRET_STATES = Object.freeze(['unset', 'stored', 'env', 'managed']);
+    
+    const chunk = (list, size = DESCRIBE_BATCH) => {
+      const out = [];
+      for (let i = 0; i < list.length; i += size) out.push(list.slice(i, i + size));
+      return out;
+    };
+    
+    /** Relative (base-href aware) URL of an extension's values-free manifest route; mirrors managed-config-route.js. */
+    const managedConfigUrl = extension => `api/aiwuk.managed-config.${extension}`;
+    
+    /** Remote replies are `{ok, value}` / `{ok:false, error}`; a bare value passes through. Throws on a refusal. */
+    function unwrapReply(reply) {
+      if (reply && typeof reply === 'object' && typeof reply.ok === 'boolean') {
+        if (!reply.ok) throw new Error(String(reply.error?.code ?? reply.error?.message ?? 'remote-error'));
+        return reply.value;
+      }
+      return reply;
+    }
+    
+    /** Wire manifest → Map(ref → {locked, secret, value?}); null when the payload is not a manifest. A secret never keeps a value. */
+    function manifestFromWire(wire) {
+      if (!wire || typeof wire !== 'object' || !Array.isArray(wire.entries)) return null;
+      const entries = new Map();
+      for (const item of wire.entries) {
+        if (!item || typeof item.ref !== 'string') continue;
+        const secret = item.secret === true;
+        entries.set(item.ref, { locked: item.locked === true, secret, ...(!secret && typeof item.value === 'string' ? { value: item.value } : {}) });
+      }
+      return { revision: Number.isSafeInteger(wire.revision) ? wire.revision : 0, entries };
+    }
+    
+    /** The Mothership's value of a non-secret managed ref (for display), or undefined. */
+    const managedValueOf = (manifest, ref) => (ref ? manifest?.entries?.get(ref)?.value : undefined);
+    
+    /**
+     * Panel-level managed status: how many of the panel's integration fields the Mothership manages and how many it
+     * locks. `mode` is 'none' (self-configured), 'full' (every integration field managed) or 'partial'.
+     */
+    function managedStatus(fields, manifest) {
+      const refs = fields.filter(field => field.ref).map(field => field.ref);
+      const managed = refs.filter(ref => manifest?.entries?.has(ref));
+      const locked = managed.filter(ref => manifest.entries.get(ref).locked);
+      return { managed: managed.length, locked: locked.length, total: refs.length, mode: !managed.length ? 'none' : managed.length === refs.length ? 'full' : 'partial' };
+    }
+    
+    /** 'locked' | 'default' (managed but editable) | 'none' for a ref. */
+    function lockMode(manifest, ref) {
+      const entry = ref ? manifest?.entries?.get(ref) : undefined;
+      return !entry ? 'none' : entry.locked ? 'locked' : 'default';
+    }
+    
+    /**
+     * State of a secret field from the host's `describe` view (`{configured, source?, writable}`) and the lock mode.
+     * Locked managed refs read as managed whatever the store says; the value itself is never involved.
+     */
+    function secretState(info, mode = 'none') {
+      const readOnly = mode === 'locked' || info?.writable === false;
+      if (mode === 'locked') return { kind: 'managed', configured: info?.configured === true, editable: false, clearable: false };
+      const configured = info?.configured === true;
+      const kind = !configured ? 'unset' : info?.source === 'file' ? 'stored' : 'env';
+      // The environment is not writable by the product: Replace writes a stored value that then takes precedence,
+      // Clear only removes the stored value (it cannot unset the environment), so it is offered for stored values only.
+      return { kind, configured, editable: !readOnly, clearable: !readOnly && kind === 'stored' };
+    }
+    
+    /** Text of an input for a stored settings value. */
+    function fieldText(field, value) {
+      if (value === undefined || value === null) return '';
+      return field.multiple && Array.isArray(value) ? value.join(',') : String(value);
+    }
+    
+    /** Whether a (non-secret) field currently has a value, for the summary count. */
+    function hasValue(field, value) {
+      if (Array.isArray(value)) return value.length > 0;
+      return value !== undefined && value !== null && value !== '';
+    }
+    
+    /** Validation key (a dictionary key under `err.`) for an edited value, or null when acceptable. */
+    function validateValue(field, raw) {
+      if (field.kind === 'number') {
+        const n = Number(raw);
+        return Number.isInteger(n) && n >= field.min && n <= field.max ? null : 'number';
+      }
+      if (field.kind === 'url') {
+        if (raw === '') return null;
+        try { const url = new URL(raw); return url.protocol === 'https:' || url.protocol === 'http:' ? null : 'url'; } catch { return 'url'; }
+      }
+      if (field.kind === 'enum' && field.multiple) return Array.isArray(raw) && raw.every(v => field.options.includes(v)) ? null : 'enum';
+      if (field.kind === 'enum') return raw === '' || field.options.includes(raw) ? null : 'enum';
+      return null;
+    }
+    
+    /** Whether a field is visible given the current (draft over saved) values. */
+    const isShown = (field, current) => !field.showWhen || Object.entries(field.showWhen).every(([key, want]) => current[key] === want);
+    
+    /**
+     * form.mutate operations for the edited fields. `values` are the saved settings, `drafts` maps field id → edited
+     * value (string, boolean or array). Locked managed fields are never written; an emptied field is unset so the layers
+     * below apply again. Returns `{ops, invalid}` where `invalid` maps field id → error key.
+     */
+    function buildOps(fields, values, drafts, manifest) {
+      const ops = [], invalid = {};
+      for (const field of fields) {
+        if (field.kind === 'secret' || !field.path || !Object.hasOwn(drafts, field.id)) continue;
+        if (lockMode(manifest, field.ref) === 'locked') continue;
+        let next = drafts[field.id];
+        if (typeof next === 'string') next = next.trim();
+        if (field.kind === 'number') {
+          if (next === '') { if (hasValue(field, values?.[field.path])) ops.push({ op: 'unset', path: [field.path] }); continue; }
+          const problem = validateValue(field, next);
+          if (problem) { invalid[field.id] = problem; continue; }
+          next = Number(next);
+        } else if (field.multiple && typeof next === 'string') {
+          next = next.split(',').map(v => v.trim()).filter(Boolean);
+        }
+        const problem = field.kind === 'number' ? null : validateValue(field, next);
+        if (problem) { invalid[field.id] = problem; continue; }
+        const saved = values?.[field.path];
+        const same = Array.isArray(next) ? Array.isArray(saved) && saved.length === next.length && saved.every((v, i) => v === next[i]) : saved === next;
+        if (same) continue;
+        if (next === '' || (Array.isArray(next) && !next.length)) { if (hasValue(field, saved)) ops.push({ op: 'unset', path: [field.path] }); continue; }
+        ops.push({ op: 'set', path: [field.path], value: next });
+      }
+      return { ops, invalid };
+    }
+    
+    /**
+     * Summary numbers: how many integration fields (those with a ref) hold a value, and how many are managed.
+     * `states` maps secret ref → secretState(); `values` are saved settings.
+     */
+    function summaryCounts(fields, values, states, manifest) {
+      let configured = 0, total = 0, managed = 0;
+      for (const field of fields) {
+        if (!field.ref) continue;
+        total++;
+        const mode = lockMode(manifest, field.ref);
+        if (mode !== 'none') managed++;
+        const set = field.kind === 'secret' ? states?.[field.ref]?.configured === true : hasValue(field, values?.[field.path]);
+        if (set || mode === 'locked') configured++;
+      }
+      return { configured, total, managed };
+    }
+    
+    /** Refs whose state the panel asks the host to describe. */
+    const secretRefs = fields => fields.filter(field => field.kind === 'secret').map(field => field.ref);
+    
+    /**
+     * Describe the refs through `credentials.describe` in batches of DESCRIBE_BATCH. Returns `{ref: {configured, source?,
+     * writable}}`; a failed batch leaves its refs out (the panel then shows them as unknown, never as "set").
+     */
+    async function describeSecrets(credentials, refs) {
+      return (await describeSecretsResult(credentials, refs)).described;
+    }
+    
+    /** One describe attempt must settle within this time; a hung call counts as a failure so the row never waits forever. */
+    const DESCRIBE_TIMEOUT_MS = 1200;
+    /** Pause before the single automatic retry of a failed describe. Worst case until "Could not check": 2 × timeout + this. */
+    const DESCRIBE_RETRY_DELAY_MS = 300;
+    
+    /** Reject after `ms` when `work` has not settled; the timer is always cleared. */
+    function withTimeout(work, ms) {
+      return new Promise((resolve, reject) => {
+        const timer = setTimeout(() => reject(new Error('timeout')), ms);
+        Promise.resolve(work).then(value => { clearTimeout(timer); resolve(value); }, error => { clearTimeout(timer); reject(error); });
+      });
+    }
+    
+    /**
+     * Like describeSecrets, but also says whether any batch FAILED (thrown error, refusal, timeout, malformed reply, missing API).
+     * A ref absent from a successful reply is reported as not configured: the host answered, it just holds nothing for it.
+     * Refs of a failed batch are left out (unknown), never guessed.
+     */
+    async function describeSecretsResult(credentials, refs, timeoutMs = DESCRIBE_TIMEOUT_MS) {
+      const described = {};
+      let failed = false;
+      if (!refs.length) return { described, failed };
+      if (typeof credentials?.describe !== 'function') return { described, failed: true };
+      for (const batch of chunk(refs)) {
+        try {
+          const view = unwrapReply(await withTimeout(Promise.resolve().then(() => credentials.describe(batch)), timeoutMs));
+          if (!view || typeof view !== 'object') throw new Error('malformed-reply');
+          for (const ref of batch) {
+            const item = view[ref];
+            described[ref] = item && typeof item === 'object'
+              ? { configured: item.configured === true, source: item.source, writable: item.writable !== false }
+              : { configured: false, writable: true };
+          }
+        } catch { failed = true; /* leave this batch unknown */ }
+      }
+      return { described, failed };
+    }
+    
+    /** Store a new value (write-only). Rejects an empty value, a locked ref and a missing API; resolves to true. */
+    async function writeSecret(credentials, ref, value, mode = 'none') {
+      if (mode === 'locked') throw new Error('locked');
+      if (typeof value !== 'string' || !value.trim()) throw new Error('empty');
+      if (typeof credentials?.set !== 'function') throw new Error('unavailable');
+      unwrapReply(await credentials.set(ref, value));
+      return true;
+    }
+    
+    /** Remove the stored value of a ref. Rejects a locked ref and a missing API; resolves to true. */
+    async function clearSecret(credentials, ref, mode = 'none') {
+      if (mode === 'locked') throw new Error('locked');
+      if (typeof credentials?.unset !== 'function') throw new Error('unavailable');
+      unwrapReply(await credentials.unset(ref));
+      return true;
+    }
+    // Per-extension panel field lists (contract section E). A field is addressed by:
+    //   path  - key in the bundle's volatile DSH settings section (non-secret values, written with form.mutate)
+    //   ref   - env-style name shared with the managed manifest and the credential store (see catalog.js)
+    // Secret fields have no path: they are credentials (ctx.remote.credentials), never settings values.
+    // `enabled` is deliberately absent: on/off is DSH's own plugin switch on the Plugins page.
+    // Labels live in the dictionaries (locale/*.json, plus catalog.js for ref fields) under `field.<ref or id>`.
+    const field = (id, kind, extra = {}) => Object.freeze({ id, kind, ...extra });
+    const num = (id, min, max, step = 1) => field(id, 'number', { path: id, min, max, step });
+    const secret = ref => field(ref, 'secret', { ref });
+    
+    const PANELS = Object.freeze({
+      autocomplete: Object.freeze({
+        extension: 'autocomplete', bundle: '@aiwuk/autocomplete', namespace: 'autocomplete',
+        fields: Object.freeze([
+          field('routeMode', 'enum', { path: 'routeMode', ref: 'AUTOCOMPLETE_ROUTE_MODE', options: ['session', 'fixed'] }),
+          field('provider', 'text', { path: 'provider', ref: 'AUTOCOMPLETE_PROVIDER', showWhen: { routeMode: 'fixed' } }),
+          field('model', 'text', { path: 'model', ref: 'AUTOCOMPLETE_MODEL', showWhen: { routeMode: 'fixed' } }),
+          num('maxSuggestions', 1, 5), num('typePauseMs', 200, 5000, 50), num('maxOutputTokens', 16, 2048),
+          num('timeoutMs', 1000, 120000, 500), num('maxMessages', 1, 50), num('maxChars', 500, 32000, 100),
+          field('mobileBar', 'switch', { path: 'mobileBar' }),
+        ]),
+      }),
+      memory: Object.freeze({
+        extension: 'memory', bundle: '@aiwuk/memory', namespace: 'global-memory',
+        fields: Object.freeze([
+          field('autoRecall', 'switch', { path: 'autoRecall' }),
+          num('injectChars', 200, 6000, 100), num('recallK', 1, 20),
+          field('memoryBackend', 'enum', { path: 'memoryBackend', ref: 'MEMORY_BACKEND', options: ['local', 'openviking'] }),
+          field('memoryUrl', 'url', { path: 'memoryUrl', ref: 'OPENVIKING_URL' }),
+          field('embeddingBaseUrl', 'url', { path: 'embeddingBaseUrl', ref: 'EMBEDDING_BASE_URL' }),
+          field('embeddingModel', 'text', { path: 'embeddingModel', ref: 'EMBEDDING_MODEL' }),
+          secret('OPENVIKING_API_KEY'), secret('EMBEDDING_API_KEY'),
+        ]),
+      }),
+      search: Object.freeze({
+        extension: 'search', bundle: '@aiwuk/search', namespace: 'omni-search',
+        // Selects this extension as DSH's web search provider: `searchProvider` on the host `web` entry (another namespace).
+        // Unsetting the user layer restores the host default (`deepseek-official` in the shipped base).
+        hostSelection: Object.freeze({ id: 'webSearch', entry: 'web', path: 'searchProvider', value: 'aiwuk-search' }),
+        fields: Object.freeze([
+          field('engines', 'enum', { path: 'engines', ref: 'OMNI_SEARCH_ENGINES', options: ['tavily', 'brave', 'searxng', 'custom'], multiple: true }),
+          field('fetchEngines', 'enum', { path: 'fetchEngines', ref: 'OMNI_FETCH_ENGINES', options: ['jina', 'tavily', 'custom'], multiple: true }),
+          field('baseUrl', 'url', { path: 'baseUrl', ref: 'OMNI_SEARCH_BASE_URL' }),
+          field('searxngUrl', 'url', { path: 'searxngUrl', ref: 'SEARXNG_URL' }),
+          field('audioBaseUrl', 'url', { path: 'audioBaseUrl', ref: 'OMNI_AUDIO_BASE_URL' }),
+          secret('OMNI_SEARCH_API_KEY'), secret('TAVILY_API_KEY'), secret('BRAVE_API_KEY'),
+          secret('SEARXNG_API_KEY'), secret('JINA_API_KEY'), secret('OMNI_AUDIO_API_KEY'),
+        ]),
+      }),
+      // The team bundle has no editable integration fields: its page summarizes the Memory and Search panels.
+      team: Object.freeze({ extension: 'team', bundle: '@aiwuk/team', namespace: 'capability-team-ui', fields: Object.freeze([]) }),
+    });
+    const DICTIONARIES = {"en":{"lock.locked":"Managed by {mothership}","lock.default":"Default from Mothership","lock.hint":"Change it in the Mothership","value.managed":"Managed","value.default":"Using Mothership default","secret.unset":"Not set","secret.stored":"Set (stored)","secret.env":"Set (environment)","secret.managed":"Managed by {mothership}","secret.unknown":"Checking...","secret.failed":"Could not check","secret.note.saved":"Saved. The value is not shown again.","secret.note.cleared":"Cleared.","secret.note.failed":"The change failed. Nothing was stored.","action.set":"Set","action.replace":"Replace","action.clear":"Clear","action.confirmClear":"Confirm clear","action.save":"Save","action.cancel":"Cancel","action.retry":"Retry","state.loading":"Loading...","state.unavailable":"Settings are unavailable: make sure the plugin is enabled.","state.saved":"Saved.","state.failed":"Save failed. Reload and retry.","summary.configured":"Configured {configured}/{total}","summary.managed":"Managed {managed}","err.number":"Enter a whole number in range.","err.url":"Enter a valid http(s) address.","err.enum":"Choose a supported value.","opt.default":"Default","opt.session":"Follow session","opt.fixed":"Fixed model","opt.local":"Local","opt.openviking":"OpenViking","opt.current":"Current project","opt.none":"Whole account","opt.tavily":"Tavily","opt.brave":"Brave","opt.searxng":"SearXNG","opt.jina":"Jina","opt.custom":"Custom gateway","field.maxSuggestions":"Max suggestions","field.typePauseMs":"Typing pause (ms)","field.maxOutputTokens":"Max output tokens","field.timeoutMs":"Timeout (ms)","field.maxMessages":"Context messages","field.maxChars":"Context characters","field.mobileBar":"Touch suggestion bar","field.autoRecall":"Auto recall","field.injectChars":"Injected characters","field.recallK":"Recall count","team.integrations":"Integrations","team.memory":"Memory","team.search":"Search","team.hint":"Memory and Search keep their own settings pages under Plugins.","team.unmanaged":"Nothing is managed by the Mothership.","team.managedCount":"{count} setting(s) managed by {mothership}.","host.webSearch.label":"Use AIWUK Search for DSH web search","host.webSearch.current":"Current provider: {provider}.","host.webSearch.auto":"automatic","host.webSearch.hint":"Turn it off to restore the DSH default.","host.webSearch.unavailable":"DSH web search settings are unavailable.","host.webSearch.failed":"Could not change the web search provider.","secret.managedSet":"Configured by {mothership}","secret.managedEmpty":"Managed by {mothership} (not set there)","banner.full":"Configured by {mothership}. Nothing to set up here.","banner.partial":"Partly configured by {mothership}.","banner.detail":"{managed} of {total} settings come from the Mothership ({locked} locked). Locked settings can only be changed in the Mothership.","optional.title":"Optional settings not sent by the Mothership ({count})","optional.hint":"Leave these empty unless you want an extra engine on this machine only."},"zh":{"lock.locked":"\u7531 {mothership}\u6258\u7ba1","lock.default":"\u6bcd\u8230\u9ed8\u8ba4\u503c","lock.hint":"\u8bf7\u5728\u6bcd\u8230\u4e2d\u4fee\u6539","value.managed":"\u5df2\u6258\u7ba1","value.default":"\u4f7f\u7528\u6bcd\u8230\u9ed8\u8ba4\u503c","secret.unset":"\u672a\u8bbe\u7f6e","secret.stored":"\u5df2\u8bbe\u7f6e\uff08\u5df2\u4fdd\u5b58\uff09","secret.env":"\u5df2\u8bbe\u7f6e\uff08\u73af\u5883\u53d8\u91cf\uff09","secret.managed":"\u7531 {mothership}\u6258\u7ba1","secret.unknown":"\u68c0\u67e5\u4e2d\u2026","secret.failed":"\u65e0\u6cd5\u68c0\u67e5","secret.note.saved":"\u5df2\u4fdd\u5b58\uff0c\u503c\u4e0d\u4f1a\u518d\u6b21\u663e\u793a\u3002","secret.note.cleared":"\u5df2\u6e05\u9664\u3002","secret.note.failed":"\u64cd\u4f5c\u5931\u8d25\uff0c\u672a\u4fdd\u5b58\u4efb\u4f55\u5185\u5bb9\u3002","action.set":"\u8bbe\u7f6e","action.replace":"\u66ff\u6362","action.clear":"\u6e05\u9664","action.confirmClear":"\u786e\u8ba4\u6e05\u9664","action.save":"\u4fdd\u5b58","action.cancel":"\u53d6\u6d88","action.retry":"\u91cd\u8bd5","state.loading":"\u8bfb\u53d6\u4e2d\u2026","state.unavailable":"\u8bbe\u7f6e\u6682\u4e0d\u53ef\u7528\uff1a\u8bf7\u786e\u8ba4\u5df2\u542f\u7528\u8be5\u63d2\u4ef6\u3002","state.saved":"\u5df2\u4fdd\u5b58\u3002","state.failed":"\u4fdd\u5b58\u5931\u8d25\uff0c\u8bf7\u5237\u65b0\u540e\u91cd\u8bd5\u3002","summary.configured":"\u5df2\u914d\u7f6e {configured}/{total}","summary.managed":"\u6258\u7ba1 {managed}","err.number":"\u8bf7\u8f93\u5165\u8303\u56f4\u5185\u7684\u6574\u6570\u3002","err.url":"\u8bf7\u8f93\u5165\u6709\u6548\u7684 http(s) \u5730\u5740\u3002","err.enum":"\u8bf7\u9009\u62e9\u53d7\u652f\u6301\u7684\u503c\u3002","opt.default":"\u9ed8\u8ba4","opt.session":"\u8ddf\u968f\u4f1a\u8bdd","opt.fixed":"\u56fa\u5b9a\u6a21\u578b","opt.local":"\u672c\u5730","opt.openviking":"OpenViking","opt.current":"\u5f53\u524d\u9879\u76ee","opt.none":"\u6574\u4e2a\u8d26\u6237","opt.tavily":"Tavily","opt.brave":"Brave","opt.searxng":"SearXNG","opt.jina":"Jina","opt.custom":"\u81ea\u5b9a\u4e49\u7f51\u5173","field.maxSuggestions":"\u5019\u9009\u6570","field.typePauseMs":"\u505c\u987f\u65f6\u95f4\uff08\u6beb\u79d2\uff09","field.maxOutputTokens":"\u6700\u5927\u8f93\u51fa","field.timeoutMs":"\u8d85\u65f6\uff08\u6beb\u79d2\uff09","field.maxMessages":"\u4e0a\u4e0b\u6587\u6d88\u606f\u6570","field.maxChars":"\u4e0a\u4e0b\u6587\u5b57\u7b26\u6570","field.mobileBar":"\u89e6\u5c4f\u5efa\u8bae\u680f","field.autoRecall":"\u81ea\u52a8\u53ec\u56de","field.injectChars":"\u6ce8\u5165\u5b57\u6570","field.recallK":"\u53ec\u56de\u6761\u6570","team.integrations":"\u96c6\u6210","team.memory":"\u5168\u5c40\u8bb0\u5fc6","team.search":"\u5168\u80fd\u641c\u7d22","team.hint":"\u5168\u5c40\u8bb0\u5fc6\u4e0e\u5168\u80fd\u641c\u7d22\u7684\u8bbe\u7f6e\u9875\u4f4d\u4e8e\u201c\u63d2\u4ef6\u201d\u9875\u5bf9\u5e94\u6761\u76ee\u4e0b\u3002","team.unmanaged":"\u6ca1\u6709\u4efb\u4f55\u8bbe\u7f6e\u7531\u6bcd\u8230\u6258\u7ba1\u3002","team.managedCount":"{count} \u9879\u8bbe\u7f6e\u7531 {mothership}\u6258\u7ba1\u3002","host.webSearch.label":"\u8ba9 DSH \u7f51\u9875\u641c\u7d22\u4f7f\u7528 AI\u609f\u7a7a \u5168\u80fd\u641c\u7d22","host.webSearch.current":"\u5f53\u524d\u63d0\u4f9b\u65b9\uff1a{provider}\u3002","host.webSearch.auto":"\u81ea\u52a8\u9009\u62e9","host.webSearch.hint":"\u5173\u95ed\u540e\u6062\u590d DSH \u9ed8\u8ba4\u3002","host.webSearch.unavailable":"DSH \u7f51\u9875\u641c\u7d22\u8bbe\u7f6e\u4e0d\u53ef\u7528\u3002","host.webSearch.failed":"\u65e0\u6cd5\u66f4\u6539\u7f51\u9875\u641c\u7d22\u63d0\u4f9b\u65b9\u3002","secret.managedSet":"\u5df2\u7531 {mothership}\u914d\u7f6e","secret.managedEmpty":"\u7531 {mothership}\u6258\u7ba1\uff08\u6bcd\u8230\u672a\u8bbe\u7f6e\uff09","banner.full":"\u5df2\u901a\u8fc7 {mothership}\u914d\u7f6e\u5b8c\u6210\uff0c\u65e0\u9700\u5728\u8fd9\u91cc\u8bbe\u7f6e\u3002","banner.partial":"\u90e8\u5206\u8bbe\u7f6e\u5df2\u7531 {mothership}\u914d\u7f6e\u3002","banner.detail":"{total} \u9879\u8bbe\u7f6e\u4e2d\u6709 {managed} \u9879\u6765\u81ea\u6bcd\u8230\uff08\u5176\u4e2d {locked} \u9879\u5df2\u9501\u5b9a\uff09\u3002\u9501\u5b9a\u7684\u8bbe\u7f6e\u53ea\u80fd\u5728\u6bcd\u8230\u4e2d\u4fee\u6539\u3002","optional.title":"\u6bcd\u8230\u672a\u4e0b\u53d1\u7684\u53ef\u9009\u8bbe\u7f6e\uff08{count} \u9879\uff09","optional.hint":"\u9664\u975e\u53ea\u60f3\u5728\u8fd9\u53f0\u673a\u5668\u4e0a\u989d\u5916\u542f\u7528\u67d0\u4e2a\u5f15\u64ce\uff0c\u5426\u5219\u4fdd\u6301\u4e3a\u7a7a\u5373\u53ef\u3002"}};
+    const CATALOG = [{"ref":"OMNI_SEARCH_BASE_URL","extension":"search","label":{"en":"Search gateway URL","zh":"\u641c\u7d22\u7f51\u5173\u5730\u5740"},"kind":"url","secret":false,"defaultLocked":true},{"ref":"SEARXNG_URL","extension":"search","label":{"en":"SearXNG URL","zh":"SearXNG \u5730\u5740"},"kind":"url","secret":false,"defaultLocked":true},{"ref":"OMNI_SEARCH_ENGINES","extension":"search","label":{"en":"Search engines","zh":"\u641c\u7d22\u5f15\u64ce"},"kind":"enum","options":["tavily","brave","searxng","custom"],"multiple":true,"secret":false,"defaultLocked":true},{"ref":"OMNI_FETCH_ENGINES","extension":"search","label":{"en":"Fetch engines","zh":"\u6293\u53d6\u5f15\u64ce"},"kind":"enum","options":["jina","tavily","custom"],"multiple":true,"secret":false,"defaultLocked":true,"default":"jina"},{"ref":"OMNI_SEARCH_PROVIDERS_PATH","extension":"search","label":{"en":"Search gateway providers path","zh":"\u641c\u7d22\u7f51\u5173\u63d0\u4f9b\u65b9\u8def\u5f84"},"kind":"text","secret":false,"defaultLocked":true},{"ref":"OMNI_AUDIO_BASE_URL","extension":"search","label":{"en":"Speech-to-text URL","zh":"\u8bed\u97f3\u8f6c\u5199\u5730\u5740"},"kind":"url","secret":false,"defaultLocked":true},{"ref":"OMNI_SEARCH_API_KEY","extension":"search","label":{"en":"Search gateway API key","zh":"\u641c\u7d22\u7f51\u5173\u5bc6\u94a5"},"kind":"secret","secret":true,"defaultLocked":true},{"ref":"TAVILY_API_KEY","extension":"search","label":{"en":"Tavily API key","zh":"Tavily \u5bc6\u94a5"},"kind":"secret","secret":true,"defaultLocked":true},{"ref":"BRAVE_API_KEY","extension":"search","label":{"en":"Brave API key","zh":"Brave \u5bc6\u94a5"},"kind":"secret","secret":true,"defaultLocked":true},{"ref":"SEARXNG_API_KEY","extension":"search","label":{"en":"SearXNG API key","zh":"SearXNG \u5bc6\u94a5"},"kind":"secret","secret":true,"defaultLocked":true},{"ref":"JINA_API_KEY","extension":"search","label":{"en":"Jina API key","zh":"Jina \u5bc6\u94a5"},"kind":"secret","secret":true,"defaultLocked":true},{"ref":"OMNI_AUDIO_API_KEY","extension":"search","label":{"en":"Speech-to-text API key","zh":"\u8bed\u97f3\u8f6c\u5199\u5bc6\u94a5"},"kind":"secret","secret":true,"defaultLocked":true},{"ref":"EMBEDDING_BASE_URL","extension":"memory","label":{"en":"Embedding URL","zh":"\u5411\u91cf\u670d\u52a1\u5730\u5740"},"kind":"url","secret":false,"defaultLocked":true,"legacyRefs":["CPA_EMBED_BASE_URL"]},{"ref":"EMBEDDING_MODEL","extension":"memory","label":{"en":"Embedding model","zh":"\u5411\u91cf\u6a21\u578b"},"kind":"text","secret":false,"defaultLocked":true,"legacyRefs":["CPA_EMBED_MODEL"]},{"ref":"EMBEDDING_DIMENSIONS","extension":"memory","label":{"en":"Embedding dimensions","zh":"\u5411\u91cf\u7ef4\u5ea6"},"kind":"number","secret":false,"defaultLocked":true,"legacyRefs":["CPA_EMBED_DIMENSIONS"]},{"ref":"OPENVIKING_URL","extension":"memory","label":{"en":"Memory URL","zh":"\u8bb0\u5fc6\u670d\u52a1\u5730\u5740"},"kind":"url","secret":false,"defaultLocked":true},{"ref":"MEMORY_BACKEND","extension":"memory","label":{"en":"Backend","zh":"\u5b58\u50a8\u540e\u7aef"},"kind":"enum","options":["local","openviking"],"secret":false,"defaultLocked":true,"default":"local"},{"ref":"MEMORY_SHARED_RECALL","extension":"memory","label":{"en":"Shared recall scope","zh":"\u5171\u4eab\u53ec\u56de\u8303\u56f4"},"kind":"enum","options":["current","none"],"secret":false,"defaultLocked":true,"default":"current"},{"ref":"EMBEDDING_API_KEY","extension":"memory","label":{"en":"Embedding API key","zh":"\u5411\u91cf\u670d\u52a1\u5bc6\u94a5"},"kind":"secret","secret":true,"defaultLocked":true,"legacyRefs":["CPA_EMBED_API_KEY"]},{"ref":"OPENVIKING_API_KEY","extension":"memory","label":{"en":"Memory API key","zh":"\u8bb0\u5fc6\u670d\u52a1\u5bc6\u94a5"},"kind":"secret","secret":true,"defaultLocked":true},{"ref":"AUTOCOMPLETE_ROUTE_MODE","extension":"autocomplete","label":{"en":"Model routing","zh":"\u6a21\u578b\u8def\u7531"},"kind":"enum","options":["session","fixed"],"secret":false,"defaultLocked":true,"default":"session"},{"ref":"AUTOCOMPLETE_PROVIDER","extension":"autocomplete","label":{"en":"Provider","zh":"\u63d0\u4f9b\u65b9"},"kind":"text","secret":false,"defaultLocked":true},{"ref":"AUTOCOMPLETE_MODEL","extension":"autocomplete","label":{"en":"Model","zh":"\u6a21\u578b"},"kind":"text","secret":false,"defaultLocked":true}];
+    /** en / zh dictionaries of one panel: shared texts, catalog labels (ref.<REF>) and the Mothership name filled in. */
+    function panelDictionaries(panel) {
+      const out = {};
+      for (const lang of ['en', 'zh']) {
+        const dict = { ...DICTIONARIES[lang] };
+        for (const field of panel.fields) {
+          const entry = CATALOG.find(item => item.ref === field.ref);
+          if (entry) dict['ref.' + entry.ref] = entry.label[lang];
+        }
+        for (const key of Object.keys(dict)) dict[key] = dict[key].replaceAll('{mothership}', BRAND_TEXT.mothership[lang]);
+        out[lang] = dict;
+      }
+      return out;
+    }
+    // Data-driven React config panel for the AIWUK extensions (contract section E). React comes from the host module
+    // table and is passed in; nothing here imports a DSH client package. The browser bundle is produced by
+    // shared-ui/build.mjs, which strips the `export`/`import` keywords so this file shares one factory scope with
+    // config-logic.js. Secrets are shown as a STATE only: values are never fetched, rendered or logged, and the
+    // write-only input is cleared after every save attempt. Styling uses --dsw-* tokens only.
+    
+    function createPanelKit(React) {
+      const h = React.createElement;
+      const fmt = (text, values) => String(text).replace(/\{(\w+)\}/g, (_, key) => values?.[key] ?? '');
+      const ui = {
+        col: { display: 'flex', flexDirection: 'column', gap: '8px' },
+        row: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px', padding: '6px 0', borderBottom: '1px solid var(--dsw-alias-border-l2)' },
+        text: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0 },
+        label: { color: 'var(--dsw-alias-label-primary)', fontSize: '1em' },
+        muted: { color: 'var(--dsw-alias-label-secondary)', fontSize: '0.85em' },
+        err: { color: 'var(--dsw-alias-state-error-primary)', fontSize: '0.85em' },
+        input: { width: '220px', color: 'var(--dsw-alias-label-primary)', background: 'var(--dsw-alias-bg-layer-1)', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 'var(--dsw-radius-lg)', padding: '4px 8px', fontSize: '0.9em' },
+        button: { color: 'var(--dsw-alias-label-primary)', background: 'var(--dsw-alias-bg-layer-2)', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 'var(--dsw-radius-lg)', padding: '4px 10px', fontSize: '0.9em', cursor: 'pointer' },
+        primary: { color: 'var(--dsw-alias-label-primary-inverted)', background: 'var(--dsw-alias-brand-primary)', border: '1px solid var(--dsw-alias-brand-primary)' },
+        badge: { borderRadius: '999px', padding: '0 8px', fontSize: '0.85em', whiteSpace: 'nowrap' },
+        controls: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', justifyContent: 'flex-end' },
+        banner: { display: 'flex', flexDirection: 'column', gap: '4px', padding: '10px 12px', borderRadius: 'var(--dsw-radius-md)', border: '1px solid var(--dsw-alias-state-success-primary)', background: 'var(--dsw-alias-state-success-tertiary, var(--dsw-alias-bg-layer-2))' },
+        details: { marginTop: '4px' },
+        summary: { cursor: 'pointer', color: 'var(--dsw-alias-label-secondary)', fontSize: '0.9em', padding: '6px 0' },
+      };
+      const badgeStyle = mode => {
+        const tone = mode === 'locked' ? 'var(--dsw-alias-state-warn-primary)' : 'var(--dsw-alias-state-success-primary)';
+        return { ...ui.badge, color: tone, border: `1px solid ${tone}`, background: 'var(--dsw-alias-bg-layer-2)' };
+      };
+    
+      /** Re-render on a `{getSnapshot, subscribe}` store (a ConfigForm). */
+      function useStoreSnapshot(store) {
+        const [, redraw] = React.useState(0);
+        React.useEffect(() => (typeof store?.subscribe === 'function' ? store.subscribe(() => redraw(n => n + 1)) : undefined), [store]);
+        return store?.getSnapshot?.() ?? { status: 'unavailable', value: undefined, revision: undefined, writable: false };
+      }
+    
+      /**
+       * Fetch the values-free managed manifest. Resolves to `{manifest}` (null = the route is missing, an unmanaged
+       * install) or to `undefined` when the answer is unknown (network error, 5xx): the caller then keeps what it knew,
+       * so a transient failure never drops a lock.
+       */
+      async function fetchManifest(extension, services) {
+        try {
+          const fetcher = services.fetch ?? (typeof fetch === 'function' ? fetch : null);
+          const res = fetcher ? await fetcher(managedConfigUrl(extension), { headers: { accept: 'application/json' } }) : null;
+          if (res?.ok) return { manifest: manifestFromWire(await res.json()) };
+          return res?.status === 404 ? { manifest: null } : undefined;
+        } catch { return undefined; }
+      }
+    
+      /**
+       * The managed manifest, refreshed when a credential changes (the Connector writes managed values there) and when the
+       * window regains focus. `reload()` returns the freshest known manifest so every write can re-check the lock first.
+       * `services` is created once per registration (a stable object), so the callback identity does not change.
+       */
+      function useManifest(extension, services) {
+        const [manifest, setManifest] = React.useState(null);
+        const known = React.useRef(null), latest = React.useRef(0);
+        const reload = React.useCallback(async () => {
+          const ticket = ++latest.current;
+          const answer = await fetchManifest(extension, services);
+          if (answer && ticket === latest.current) { known.current = answer.manifest; setManifest(answer.manifest); }
+          return answer ? answer.manifest : known.current;
+        }, [extension, services]);
+        React.useEffect(() => {
+          void reload();
+          const off = services.on?.('credentials/reference-updated', () => { void reload(); });
+          const onFocus = () => { void reload(); };
+          if (typeof window !== 'undefined') window.addEventListener?.('focus', onFocus);
+          return () => {
+            if (typeof off === 'function') off();
+            if (typeof window !== 'undefined') window.removeEventListener?.('focus', onFocus);
+          };
+        }, [reload, services.on]);
+        return [manifest, reload];
+      }
+    
+      /**
+       * Secret states from `credentials.describe`, refreshed on `credentials/reference-updated`. Returns
+       * `[described, refresh, failed]`. Every row leaves "checking" in bounded time: a result from a superseded or
+       * unmounted run is dropped (ticket), the credentials service is read at call time (never captured stale), a failed
+       * run is retried once automatically, and after that `failed` is true so rows offer Retry instead of waiting forever.
+       */
+      function useSecretStates(services, refs) {
+        const [described, setDescribed] = React.useState({});
+        const [failed, setFailed] = React.useState(false);
+        const key = refs.join(',');
+        const ticket = React.useRef(0), alive = React.useRef(true), timer = React.useRef(null), retried = React.useRef(false), refsRef = React.useRef(refs);
+        refsRef.current = refs;
+        const run = React.useCallback(async () => {
+          const mine = ++ticket.current;
+          clearTimeout(timer.current);
+          const list = refsRef.current;
+          if (!list.length) return;
+          const result = await describeSecretsResult(services.credentials, list);
+          if (!alive.current || mine !== ticket.current) return; // stale: a newer run or an unmount took over
+          if (!result.failed) { retried.current = false; setDescribed(result.described); setFailed(false); return; }
+          setDescribed(prev => ({ ...prev, ...result.described }));
+          if (retried.current) { setFailed(true); return; }
+          retried.current = true;
+          timer.current = setTimeout(() => { if (alive.current && mine === ticket.current) void run(); }, DESCRIBE_RETRY_DELAY_MS);
+        }, [services]);
+        const reload = React.useCallback(() => { retried.current = false; setFailed(false); return run(); }, [run]);
+        React.useEffect(() => {
+          alive.current = true;
+          retried.current = false;
+          setFailed(false);
+          void run();
+          const off = services.on?.('credentials/reference-updated', ref => { if (refsRef.current.includes(ref)) void run(); });
+          return () => { alive.current = false; ticket.current++; clearTimeout(timer.current); if (typeof off === 'function') off(); };
+        }, [key, services.credentials, run]);
+        return [described, run, failed, reload];
+      }
+    
+      /**
+       * Switch that makes this extension the host's provider for a capability (DSH web search): it writes
+       * `spec.path` on the host entry `spec.entry` through `ctx.configForms.get(entry)`, and unsets it to restore the
+       * host default. The current selection is always shown.
+       */
+      function HostSelectionRow({ spec, services, t }) {
+        const store = services.forms?.get?.(spec.entry) ?? null;
+        const snapshot = useStoreSnapshot(store);
+        const [note, setNote] = React.useState(null);
+        const [pending, setPending] = React.useState(false);
+        const ready = snapshot.status === 'ready' && snapshot.writable !== false && typeof store?.mutate === 'function';
+        const current = snapshot.value?.[spec.path];
+        const on = current === spec.value;
+        const toggle = async next => {
+          setNote(null); setPending(true);
+          let ok = false;
+          try { ok = await store.mutate([next ? { op: 'set', path: [spec.path], value: spec.value } : { op: 'unset', path: [spec.path] }], snapshot.revision); } catch { ok = false; }
+          setPending(false); setNote(ok ? 'saved' : 'failed');
+        };
+        const shown = typeof current === 'string' && current ? current : t(`host.${spec.id}.auto`);
+        return h(FieldRow, { id: `host.${spec.id}`, label: t(`host.${spec.id}.label`), t,
+          hint: snapshot.status === 'unavailable' ? t(`host.${spec.id}.unavailable`) : `${fmt(t(`host.${spec.id}.current`), { provider: shown })} ${t(`host.${spec.id}.hint`)}`,
+          error: note === 'failed' ? t(`host.${spec.id}.failed`) : undefined },
+          note === 'saved' ? h('span', { role: 'status', style: ui.muted }, t('state.saved')) : null,
+          h('input', { type: 'checkbox', role: 'switch', name: `host.${spec.id}`, 'data-host-selection': on ? 'on' : 'off', checked: on, disabled: !ready || pending, onChange: event => { void toggle(event.target.checked); } }));
+      }
+    
+      function LockBadge({ mode, t }) {
+        if (!mode || mode === 'none') return null;
+        return h('span', { 'data-lock': mode, title: mode === 'locked' ? t('lock.hint') : undefined, style: badgeStyle(mode) }, t(mode === 'locked' ? 'lock.locked' : 'lock.default'));
+      }
+    
+      function FieldRow({ id, label, hint, mode, error, children, t }) {
+        return h('div', { 'data-field': id, style: ui.row },
+          h('span', { style: ui.text }, h('span', { style: ui.label }, label), hint ? h('span', { style: ui.muted }, hint) : null, error ? h('span', { role: 'alert', style: ui.err }, error) : null),
+          h('span', { style: ui.controls }, h(LockBadge, { mode, t }), children));
+      }
+    
+      /** State line plus Set / Replace / Clear. The typed value lives only in this component and is dropped after save. */
+      function SecretField({ field, label, info, mode, failed, t, onSet, onClear, onRetry }) {
+        const [typed, setTyped] = React.useState(null); // null = input hidden
+        const [confirming, setConfirming] = React.useState(false);
+        const [note, setNote] = React.useState(null);
+        const state = secretState(info, mode);
+        const save = async () => {
+          const value = typed;
+          setTyped(null); // cleared first: the value is never kept after the attempt
+          try { await onSet(field.ref, value); setNote('saved'); } catch { setNote('failed'); }
+        };
+        const clear = async () => { setConfirming(false); try { await onClear(field.ref); setNote('cleared'); } catch { setNote('failed'); } };
+        const unresolved = info === undefined && mode !== 'locked';
+        const phase = unresolved ? (failed ? 'failed' : 'unknown') : state.kind;
+        const statusText = unresolved ? t(failed ? 'secret.failed' : 'secret.unknown')
+          : state.kind === 'managed' ? t(info === undefined || state.configured ? 'secret.managedSet' : 'secret.managedEmpty') : t(`secret.${state.kind}`);
+        return h(FieldRow, { id: field.id, label, mode, t, hint: note ? t(`secret.note.${note}`) : undefined },
+          h('span', { 'data-secret-state': phase, style: unresolved && failed ? ui.err : ui.muted }, statusText),
+          unresolved && failed ? h('button', { type: 'button', 'data-action': 'retry-secret', style: ui.button, onClick: onRetry }, t('action.retry')) : null,
+          typed !== null ? h('input', { type: 'password', name: field.id, autoComplete: 'new-password', value: typed, style: ui.input, 'aria-label': label, onChange: event => setTyped(event.target.value) }) : null,
+          typed !== null ? h('button', { type: 'button', 'data-action': 'save-secret', style: { ...ui.button, ...ui.primary }, disabled: !typed.trim(), onClick: save }, t('action.save')) : null,
+          typed !== null ? h('button', { type: 'button', 'data-action': 'cancel-secret', style: ui.button, onClick: () => setTyped(null) }, t('action.cancel')) : null,
+          typed === null && !confirming && mode !== 'locked' && state.editable ? h('button', { type: 'button', 'data-action': 'set-secret', style: ui.button, onClick: () => { setNote(null); setTyped(''); } }, t(state.configured ? 'action.replace' : 'action.set')) : null,
+          typed === null && !confirming && state.clearable ? h('button', { type: 'button', 'data-action': 'clear-secret', style: ui.button, onClick: () => setConfirming(true) }, t('action.clear')) : null,
+          confirming ? h('button', { type: 'button', 'data-action': 'confirm-clear', style: { ...ui.button, ...ui.primary }, onClick: clear }, t('action.confirmClear')) : null,
+          confirming ? h('button', { type: 'button', 'data-action': 'cancel-clear', style: ui.button, onClick: () => setConfirming(false) }, t('action.cancel')) : null);
+      }
+    
+      function control({ field, value, readOnly, mode, onChange, t }) {
+        const common = { name: field.id, disabled: readOnly, readOnly };
+        if (field.kind === 'switch') return h('input', { ...common, type: 'checkbox', role: 'switch', checked: value === true, onChange: event => onChange(event.target.checked) });
+        if (field.kind === 'enum' && field.multiple) {
+          const chosen = Array.isArray(value) ? value : String(value ?? '').split(',').filter(Boolean);
+          return h('span', { style: ui.controls }, field.options.map(option => h('label', { key: option, style: ui.muted },
+            h('input', { type: 'checkbox', name: `${field.id}.${option}`, disabled: readOnly, checked: chosen.includes(option),
+              onChange: event => onChange(event.target.checked ? [...chosen, option] : chosen.filter(v => v !== option)) }), ` ${t(`opt.${option}`)}`)));
+        }
+        if (field.kind === 'enum') return h('select', { ...common, value: value ?? '', style: ui.input, onChange: event => onChange(event.target.value) },
+          h('option', { value: '' }, t('opt.default')), field.options.map(option => h('option', { key: option, value: option }, t(`opt.${option}`))));
+        const props = { ...common, style: ui.input, value: value ?? '', title: readOnly && value ? String(value) : undefined, placeholder: mode === 'locked' ? t('value.managed') : mode === 'default' ? t('value.default') : undefined, onChange: event => onChange(event.target.value) };
+        return field.kind === 'number' ? h('input', { ...props, type: 'number', min: field.min, max: field.max, step: field.step }) : h('input', { ...props, type: field.kind === 'url' ? 'url' : 'text' });
+      }
+    
+      /** "Configured by the Mothership" notice: shown when the Mothership manages any integration field of this panel. */
+      function ManagedBanner({ status, t }) {
+        if (status.mode === 'none') return null;
+        return h('div', { 'data-managed-banner': status.mode, role: 'note', style: ui.banner },
+          h('span', { style: { ...ui.label, fontWeight: 600 } }, t(status.mode === 'full' ? 'banner.full' : 'banner.partial')),
+          h('span', { style: ui.muted }, fmt(t('banner.detail'), status)));
+      }
+    
+      function ConfigPanel(props) {
+        const { panel, view, services, t } = props;
+        const store = props.form ? null : (services.forms?.get?.(panel.namespace) ?? null);
+        const live = useStoreSnapshot(store);
+        const snapshot = props.form ? props.form.state : live;
+        const mutate = props.form ? props.form.mutate : store?.mutate?.bind(store);
+        const [manifest, reloadManifest] = useManifest(panel.extension, services);
+        const [described, refresh, describeFailed, retryDescribe] = useSecretStates(services, secretRefs(panel.fields));
+        // Every write re-reads the lock first: a Mothership lock applied while this page is open must win.
+        const freshMode = async ref => lockMode(await reloadManifest(), ref);
+        const [drafts, setDrafts] = React.useState({});
+        const [result, setResult] = React.useState(null);
+        const values = snapshot?.value ?? {};
+        const states = Object.fromEntries(Object.entries(described).map(([ref, info]) => [ref, secretState(info, lockMode(manifest, ref))]));
+        if (view === 'summary') {
+          const c = summaryCounts(panel.fields, values, states, manifest);
+          return `${fmt(t('summary.configured'), c)}${c.managed ? ` · ${fmt(t('summary.managed'), c)}` : ''}`;
+        }
+        const ready = snapshot?.status === 'ready';
+        const readOnly = !ready || snapshot.writable === false || typeof mutate !== 'function';
+        const current = { ...values, ...drafts };
+        const { ops, invalid } = buildOps(panel.fields, values, drafts, manifest);
+        const save = async () => {
+          let ok = false;
+          try {
+            // Rebuild the ops against the fresh manifest so a newly locked field is dropped, not written.
+            const fresh = buildOps(panel.fields, values, drafts, await reloadManifest());
+            ok = fresh.ops.length > 0 && Object.keys(fresh.invalid).length === 0 && await mutate(fresh.ops, snapshot.revision);
+          } catch { ok = false; }
+          setResult(ok ? 'saved' : 'failed');
+          if (ok) setDrafts({});
+        };
+        const labelOf = field => t(field.ref ? `ref.${field.ref}` : `field.${field.id}`);
+        const status = managedStatus(panel.fields, manifest);
+        // A locked Mothership value also decides which dependent rows show (e.g. provider/model under a fixed route).
+        const effective = { ...current };
+        for (const field of panel.fields) {
+          const fromHub = managedValueOf(manifest, field.ref);
+          if (field.path && fromHub !== undefined && lockMode(manifest, field.ref) === 'locked' && !Object.hasOwn(drafts, field.id)) effective[field.path] = fromHub;
+        }
+        const visible = panel.fields.filter(field => isShown(field, effective));
+        // Once the Mothership configures this extension, integration fields it does not send are optional extras.
+        const isOptional = field => status.mode !== 'none' && field.ref && lockMode(manifest, field.ref) === 'none';
+        const main = visible.filter(field => !isOptional(field)), optional = visible.filter(isOptional);
+        const renderField = field => {
+          const mode = lockMode(manifest, field.ref);
+          if (field.kind === 'secret') {
+            return h(SecretField, { key: field.id, field, label: labelOf(field), info: described[field.ref], mode, failed: describeFailed, t, onRetry: retryDescribe,
+              onSet: async (ref, value) => { await writeSecret(services.credentials, ref, value, await freshMode(ref)); await refresh(); },
+              onClear: async ref => { await clearSecret(services.credentials, ref, await freshMode(ref)); await refresh(); } });
+          }
+          const fromHub = managedValueOf(manifest, field.ref);
+          const shown = Object.hasOwn(drafts, field.id) ? drafts[field.id] : field.kind === 'switch' ? values[field.path]
+            : mode === 'locked' ? (fromHub === undefined ? '' : field.multiple ? fromHub.split(',').map(v => v.trim()).filter(Boolean) : fromHub)
+              : field.multiple ? values[field.path] : fieldText(field, values[field.path]);
+          return h(FieldRow, { key: field.id, id: field.id, label: labelOf(field), mode, t, error: invalid[field.id] ? t(`err.${invalid[field.id]}`) : undefined },
+            control({ field, value: shown, readOnly: readOnly || mode === 'locked', mode, t, onChange: next => { setResult(null); setDrafts(prev => ({ ...prev, [field.id]: next })); } }));
+        };
+        return h('div', { 'data-config-panel': panel.extension, style: ui.col },
+          panel.hostSelection && view !== 'summary' ? h(HostSelectionRow, { spec: panel.hostSelection, services, t }) : null,
+          !ready ? h('p', { style: ui.muted, 'data-unavailable': snapshot?.status === 'unavailable' ? '' : undefined }, t(snapshot?.status === 'loading' ? 'state.loading' : 'state.unavailable')) : null,
+          h(ManagedBanner, { status, t }),
+          main.map(renderField),
+          optional.length ? h('details', { 'data-optional-fields': '', style: ui.details },
+            h('summary', { style: ui.summary }, fmt(t('optional.title'), { count: optional.length })),
+            h('p', { style: ui.muted }, t('optional.hint')),
+            optional.map(renderField)) : null,
+          panel.fields.some(field => field.kind !== 'secret') ? h('div', { style: ui.controls },
+            result ? h('span', { role: 'status', style: result === 'saved' ? ui.muted : ui.err }, t(`state.${result}`)) : null,
+            h('button', { type: 'button', 'data-action': 'save', style: { ...ui.button, ...ui.primary }, disabled: readOnly || !ops.length || Object.keys(invalid).length > 0, onClick: save }, t('action.save'))) : null);
+      }
+    
+      /** Team bundle entry: how many settings the Mothership manages, with a pointer to the Memory and Search pages. */
+      function IntegrationsSummary({ view, services, t }) {
+        const [manifest] = useManifest('team', services);
+        const count = manifest ? manifest.entries.size : 0;
+        const line = count ? fmt(t('team.managedCount'), { count }) : t('team.unmanaged');
+        if (view === 'summary') return `${t('team.integrations')}: ${line}`;
+        return h('div', { 'data-integrations-summary': '', style: ui.col },
+          h('span', { style: ui.label }, t('team.integrations')), h('span', { style: ui.muted }, line), h('span', { style: ui.muted }, t('team.hint')));
+      }
+    
+      /** Contract entry point: the element for one bundle's `plugins.bundle.config` slot. */
+      function renderConfigPanel({ services, panel, view, form, t }) {
+        return h(ConfigPanel, { services, panel, view, form, t });
+      }
+    
+      /**
+       * Register dictionaries and the `plugins.bundle.config` slot entry of one panel. The host services
+       * (`remote.credentials`, `configForms`) come from the plugin's static `inject` list; null checks keep a
+       * test or odd host mounting (non-secret fields then read-only).
+       */
+      function registerConfigPanel(ctx, { panel, ns, dictionaries, summaryOnly = false }) {
+        const services = { credentials: null, on: null, forms: null };
+        // A summary-only entry reuses the host plugin's own namespace (its dictionaries are merged by the caller).
+        if (!summaryOnly) ctx.effect?.(() => ctx.locale.register(ns, dictionaries), `${ns}: dictionaries`);
+        // The plugin declares `remote.credentials` and `configForms` statically in its `inject` list (a dynamic
+        // ctx.inject callback never fired in the real host), so both are read directly from the context here.
+        const remote = ctx.remote;
+        if (remote?.credentials) {
+          services.credentials = remote.credentials;
+          services.on = typeof remote.$on === 'function' ? (event, listener) => remote.$on(event, listener) : null;
+        }
+        if (ctx.configForms) services.forms = ctx.configForms;
+        if (!summaryOnly) ctx.effect?.(() => () => { services.credentials = null; services.on = null; services.forms = null; }, `${ns}: services`);
+        const t = ctx.locale.bind(ns);
+        ctx.slots.inject('plugins.bundle.config', () => ctx.slots.register({ name: 'plugins.bundle.config', key: panel.bundle, locale: ns },
+          props => (summaryOnly ? h(IntegrationsSummary, { view: props?.view, services, t: props?.t ?? t })
+            : renderConfigPanel({ services, panel, view: props?.view, form: props?.form, t: props?.t ?? t }))));
+        return services;
+      }
+    
+      return { IntegrationsSummary, ConfigPanel, FieldRow, SecretField, LockBadge, renderConfigPanel, registerConfigPanel, useManifest, unwrapReply, validateValue };
+    }
+    return { createPanelKit, PANELS, panelDictionaries };
+    })();
+
+    const plugin = {
+      inject: ['slots', 'locale', 'remote', 'remote.credentials', 'configForms'],
+      apply(ctx) {
+        ctx.effect?.(() => ctx.locale.register(NS, { zh, en }), 'autocomplete: dictionaries');
+        const t = ctx.locale.bind(NS);
+        // `configForms` is a static inject; the null check keeps a missing form from breaking the overlay (defaults apply).
+        const form = ctx.configForms?.get?.(FORM) ?? null;
+        ctx.slots.inject('conversation.input.overlay', () => ctx.slots.register({
+          name: 'conversation.input.overlay', id: 'capability-autocomplete', order: 10, locale: NS,
+        }, props => h(ComposerOverlay, { ...props, form, t: props?.t ?? t })));
+        // Touch: the strip lives in the dock (laid out in flow above the composer, so it never covers native controls)
+        // and the ✦ button lives in the composer's own tool row (no extra height).
+        ctx.slots.inject('conversation.input.dock', () => ctx.slots.register({
+          name: 'conversation.input.dock', id: 'capability-autocomplete-touch', order: 90, locale: NS,
+        }, props => h(TouchDock, { ...props, form, t: props?.t ?? t })));
+        ctx.slots.inject('conversation.input.right', () => ctx.slots.register({
+          name: 'conversation.input.right', id: 'capability-autocomplete-ask', order: 90, locale: NS,
+        }, props => h(TouchAskButton, { ...props, form, t: props?.t ?? t })));
+        const settings = props => h(AutocompleteSettings, { ...props, form, t: props?.t ?? t });
+        ctx.slots.inject('settings.general.item', () => ctx.slots.register({
+          name: 'settings.general.item', id: 'capability-autocomplete', order: 55, label: () => t('title'), locale: NS,
+        }, settings));
+        // The bundle's Plugins page gets the shared data-driven panel (managed-lock aware); the card above stays in Settings.
+        const panel = aiwukConfig.PANELS.autocomplete;
+        aiwukConfig.createPanelKit(React).registerConfigPanel(ctx, { panel, ns: 'aiwuk-autocomplete', dictionaries: aiwukConfig.panelDictionaries(panel) });
+      },
+    };
+    // Test-only seam: harnesses may define window.__acTestHook; browsers never do.
+    if (typeof window.__acTestHook === 'function') window.__acTestHook({ ComposerOverlay, GhostOverlay, TouchSuggestionBar, TouchDock, TouchAskButton, touchStore, measureCardInset, AutocompleteSettings, parseSse, isTriggerToken, configOf, candidateOf, caretAtEnd, caretRect, ENDPOINT, zh, en });
+
+    return plugin;
+  },
+});