@operatingtag/dsh-unclesam 0.0.0-stage → 1.0.0

package/client.js

@@ -0,0 +1,1099 @@
+/**
+ * The two-way API / WEB switch, rendered in the composer dock and in Settings.
+ *
+ * @file    client.js
+ * @version 3.9.11
+ * @author  Operating Tag (@operatingtag)
+ * @license CC-BY-NC-ND-4.0
+ *
+ * WHAT THE SWITCH IS FOR
+ *     Two ways to reach a model: the metered API, or the free browser session on chat.deepseek.com.
+ *     Choosing between them is a persistent decision, not a per-message one, so the switch writes the
+ *     Host's default model selection and nothing ever flips it back. The only writer is a click.
+ *
+ * WHY THE COMPONENT DOES NOT HOLD THE TRUTH
+ *     The Host route is the single source of truth. This component reads it on mount and after every
+ *     click, so the dock copy and the Settings copy can never disagree, and a reload shows the real
+ *     persisted state rather than an optimistic guess.
+ *
+ * WHY A SEGMENTED CONTROL RATHER THAN A CHECKBOX
+ *     A checkbox answers "is X on?". This decision has two named sides and no neutral: the person is
+ *     either on the API or on the web chat, always. A two-position control says that directly, and the
+ *     moving thumb makes the current side readable at a glance from across the room.
+ *
+ * WHY IT RENDERS A DISABLED STATE
+ *     If the Host route is missing (a profile without the web server) the control still appears, greyed,
+ *     with the reason in its title. A control that silently vanishes is indistinguishable from a plugin
+ *     that failed to load, which is exactly the confusion this plugin has already caused once.
+ */
+
+window.__ModuleLoader__.load({
+  id: '@operatingtag/dsh-unclesam',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+
+    const ENDPOINT = '/api/deepseek-web/route';
+    const BLUE = '#3b82f6';
+    const RED = '#dc2626';
+    /*
+ * The panel's words.
+ *
+ * The Host sends the whole dictionary with each status reply, already in the language the harness is set
+ * to, so the panel never reads files and never decides what language to speak. Until the first reply lands
+ * this answers with nothing, and the caller falls back to the key - which is why the panel renders its
+ * skeleton rather than blank boxes.
+ */
+function makeT(strings) {
+  const table = strings && typeof strings === 'object' ? strings : null;
+  return (key, ...args) => {
+    const raw = table?.[key];
+    if (typeof raw !== 'string') return '';
+    let i = 0;
+    return raw.replace(/%s/g, () => (i < args.length ? String(args[i++]) : '%s'));
+  };
+}
+
+const GREY = '#6b7280';
+
+    /** Read the current route from the Host. Returns null when the route is unavailable. */
+    async function readRoute() {
+      try {
+        const res = await fetch(ENDPOINT, { cache: 'no-store' });
+        if (!res.ok) return null;
+        return await res.json();
+      } catch {
+        return null;
+      }
+    }
+
+    /**
+     * Ask the Host to move the route, for this conversation as well as for future ones.
+     *
+     * `sessionId` is the whole point: without it the Host only saves a default and the open chat keeps
+     * answering from the old model, which is precisely the behaviour that made the switch look broken.
+     */
+    async function writeRoute(route, sessionId) {
+      try {
+        const res = await fetch(ENDPOINT, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(sessionId ? { route, sessionId } : { route }),
+        });
+        const body = await res.json().catch(() => ({}));
+        if (!res.ok) return { error: body?.error || `HTTP ${res.status}` };
+        return body;
+      } catch (err) {
+        return { error: String(err?.message ?? err) };
+      }
+    }
+
+    /**
+     * Find the id of the conversation on screen.
+     *
+     * Three sources are tried in order of authority, because the wrong guess here changes a different
+     * conversation than the one the person is reading:
+     *
+     *   1. `ctx.sessions` — the client's own session service. If the plugin can reach it this is the
+     *      only source that is definitely right, because it is the same object the conversation uses.
+     *   2. The address bar, which the app keeps in step with the open conversation on some builds.
+     *   3. Nothing. `null` is returned rather than a guess: the Host then saves the default and says
+     *      plainly that no conversation was identified, instead of switching a chat at random.
+     *
+     * Session ids are `session-<uuid>`; a bare uuid was measured as "session not found", so both forms
+     * are accepted and normalised.
+     */
+    /** The Client context this plugin was mounted with; the switch uses it to reach `sessions`. */
+    let pluginCtx = null;
+
+    const SESSION_RE = /(?:^|[^0-9a-z-])(session-[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/i;
+    const BARE_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+    function normalise(id) {
+      const s = String(id || '').trim();
+      if (!s) return null;
+      if (SESSION_RE.test(s)) return SESSION_RE.exec(s)[1];
+      if (BARE_RE.test(s)) return `session-${s}`;
+      return null;
+    }
+
+    function sessionFromUrl() {
+      try {
+        const hit = SESSION_RE.exec(String(location.href));
+        if (hit) return hit[1];
+        const params = new URLSearchParams(location.search || '');
+        for (const key of ['session', 'sessionId', 's']) {
+          const v = normalise(params.get(key));
+          if (v) return v;
+        }
+        return null;
+      } catch {
+        return null;
+      }
+    }
+
+    /**
+     * Ask the client service for the selected session.
+     *
+     * The service exposes `binding(id)` and `scope(id)` for ids it already retains, but not the selected
+     * id itself, so the retained generations are enumerated through the retention counts the service
+     * already tracks. A single retained session is unambiguous; several means there is no way to tell
+     * which is on screen from here, and the caller falls back rather than guessing.
+     */
+    async function sessionFromService(ctx) {
+      const sessions = ctx?.sessions;
+      if (!sessions) return null;
+      try {
+        // `retainInfo` is the only enumeration the face offers; it needs an id, so ids are discovered
+        // from the DOM's session links as a candidate set and each is checked for a live generation.
+        const ids = new Set();
+        for (const a of document.querySelectorAll('a[href*="session-"]')) {
+          const v = normalise(a.getAttribute('href'));
+          if (v) ids.add(v);
+        }
+        const live = [];
+        for (const id of ids) {
+          const info = sessions.retainInfo?.(id);
+          const snap = info?.getSnapshot?.();
+          if (snap && (snap.referenceCount || 0) > 0) live.push(id);
+        }
+        if (live.length === 1) return live[0];
+        return null;
+      } catch {
+        return null;
+      }
+    }
+
+    function useRoute(ctx, sessionIdRef) {
+      const [state, setState] = React.useState({ loading: true, data: null, error: null, busy: false });
+
+      const refresh = React.useCallback(async () => {
+        const data = await readRoute();
+        setState((s) => ({
+          ...s,
+          loading: false,
+          data,
+          error: data ? null : 'switch unavailable (Host route not registered)',
+        }));
+      }, []);
+
+      React.useEffect(() => {
+        let alive = true;
+        refresh().catch(() => {});
+        // A slow poll keeps the two mounted copies (dock and settings) in step without a socket.
+        const timer = setInterval(() => {
+          if (alive) refresh().catch(() => {});
+        }, 4000);
+        return () => {
+          alive = false;
+          clearInterval(timer);
+        };
+      }, [refresh]);
+
+      const choose = React.useCallback(
+        async (route) => {
+          setState((s) => ({ ...s, busy: true }));
+          const sessionId = sessionIdRef.current;
+          const result = await writeRoute(route, sessionId);
+          if (result && result.error) {
+            setState((s) => ({ ...s, busy: false, error: result.error }));
+            return;
+          }
+          setState((s) => ({ ...s, busy: false, data: result, error: null }));
+        },
+        [],
+      );
+
+      return { ...state, choose, refresh };
+    }
+
+    /**
+     * The switch under the composer.
+     *
+     * Its slot is declared with `scope: 'session'`, and that scope passes `sessionId` to every contribution
+     * as a prop. That is the whole reason this works: the id of the conversation on screen is handed to us.
+     *
+     * The previous version went looking for it - through the sessions client service, then through sidebar
+     * links, then the address bar - and when all of those failed it sent no id at all. The Host then saved
+     * the choice as the default for NEW conversations and left the one on screen untouched, so the badge
+     * turned red while every reply still came from the API. The control said WEB and the routing said no,
+     * which is the one failure this whole plugin exists to prevent.
+     */
+    function DockSwitch(props) {
+      const sessionIdRef = React.useRef(null);
+      sessionIdRef.current = props?.sessionId ?? null;
+      /*
+       * Right-aligned to the composer edge, not centred under it.
+       *
+       * Centred, the switch floated in the middle of the row and read as a separate widget. Pushed to the
+       * end, it lines up with the right edge of the chat box above it, which is where a control that
+       * belongs to that box should sit.
+       */
+      return h(
+        'div',
+        {
+          style: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            width: '100%',
+            marginBottom: '2px',
+          },
+        },
+        h(Switch, { compact: true, sessionIdRef }),
+      );
+    }
+
+    function Switch({ compact, sessionIdRef }) {
+      const { loading, data, error, busy, choose } = useRoute(pluginCtx, sessionIdRef);
+      const route = data?.route === 'web' ? 'web' : 'api';
+
+      // `webReady` is whether the provider is genuinely mounted. The switch must show the truth, not the
+      // saved intent: a conversation can be configured for web while every reply is served by the API,
+      // and saying WEB then is worse than saying nothing because it looks like a confirmation.
+      const webReady = data?.webReady !== false;
+      const configuredWeb = data?.configuredRoute === 'web';
+      /**
+       * Grey means "the route you are ON cannot work" - nothing else.
+       *
+       * This used to look only at the saved default, so after a restart with WEB saved but no browser
+       * running, the dot went grey even while the conversation was on the API and answering perfectly.
+       * A grey light on a working route is worse than no light: it invites people to go and fix something
+       * that is not broken. Availability only matters when the route in force is the web one.
+       */
+      const webUnavailable = route === 'web' && configuredWeb && !webReady;
+
+      /**
+       * Only a request in flight makes the control untouchable.
+       *
+       * The first version ALSO disabled it whenever `error` was set, so a 409 complaining about the API
+       * side greyed out the whole switch - the one control needed to fix the problem was locked by the
+       * problem. `loading` had the same hazard: it starts true, and a failed first read left it stuck.
+       * A status light that stops responding while you need it is worse than no light.
+       */
+      const disabled = busy;
+
+      /*
+       * One quiet chip, not a pill with two buttons.
+       *
+       * The row it lives in is full of quiet, borderless text - the attachment button, "Full access", the
+       * model name. A bordered pill with a filled block and letter-spaced capitals was the loudest thing
+       * in it, which is why it looked bolted on rather than belonging.
+       *
+       * So it is now the same weight as its neighbours: a small dot and a lowercase word. The WORD is what
+       * makes it a button - a dot alone reads as a status light, and nothing about it invites a click. On
+       * hover it takes the same soft surface the other buttons use, so it is unmistakably interactive the
+       * moment somebody points at it, and invisible until then.
+       *
+       * Clicking toggles. Clicking the side already active re-applies it, which repairs a conversation
+       * whose badge and model have drifted apart.
+       */
+      const t = makeT(data?.strings);
+      const label = busy
+        ? t('switching') || 'switching…'
+        : data?.launching
+          ? t('starting')
+          : route === 'web'
+            ? // The same name the replies carry. The label in the composer and the signature on the answer
+              // are one idea, so seeing "El Tío Sam" here and "🔴 El Tío Sam" above the reply reads as one
+              // thing rather than two unrelated pieces of jargon.
+              t('title') || 'Uncle Sam'
+            : t('dockApi') || 'DeepSeek Harness';
+
+      const hint =
+        route === 'web'
+          ? t('dockWebTip') || 'Uncle Sam — replies come from chat.deepseek.com. Click for DeepSeek Harness.'
+          : t('dockApiTip') || 'DeepSeek Harness — replies come from your API key. Click for Uncle Sam.';
+
+      const dotColour = webUnavailable ? (data?.launching ? '#b45309' : GREY) : route === 'web' ? RED : BLUE;
+
+      return h(
+        'button',
+        {
+          type: 'button',
+          'data-deepseek-web-switch': route,
+          disabled,
+          title: error ? error : hint,
+          onClick: () => choose(route === 'web' ? 'api' : 'web'),
+          style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '5px',
+            // Matched to the neighbouring controls: same font, same size, no border, no fill.
+            font: 'inherit',
+            fontSize: '12px',
+            fontWeight: 500,
+            color: 'inherit',
+            opacity: disabled && !busy ? 0.55 : 0.85,
+            background: 'transparent',
+            border: 'none',
+            borderRadius: '6px',
+            padding: '2px 6px',
+            margin: '0',
+            cursor: disabled ? 'default' : 'pointer',
+            whiteSpace: 'nowrap',
+            flex: '0 0 auto',
+            userSelect: 'none',
+            transition: 'background 120ms ease, opacity 120ms ease',
+          },
+          onMouseEnter: (e) => {
+            if (!disabled) e.currentTarget.style.background = 'rgba(128,128,128,0.16)';
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = 'transparent';
+          },
+        },
+        [
+          h('span', {
+            key: 'dot',
+            style: {
+              width: '6px',
+              height: '6px',
+              borderRadius: '50%',
+              background: dotColour,
+              flex: '0 0 auto',
+              transition: 'background 180ms ease',
+            },
+          }),
+          h('span', { key: 'word', style: { lineHeight: '16px' } }, loading && !data ? 'reading…' : label),
+        ],
+      );
+    }
+
+    /**
+     * The settings switch: no conversation is on screen here, so it carries no session id.
+     *
+     * Changing the route from Settings sets it for NEW conversations. Saying so is better than letting
+     * somebody believe it also moved the conversation they left open.
+     */
+    function SettingsSwitch() {
+      const sessionIdRef = React.useRef(null);
+      return h(
+        'div',
+        {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '16px',
+            padding: '14px 4px',
+            borderTop: '1px solid rgba(128,128,128,0.22)',
+          },
+        },
+        [
+          h(
+            'div',
+            { key: 'text', style: { display: 'flex', flexDirection: 'column', gap: '3px' } },
+            [
+              h('div', { key: 't', style: { fontSize: '14px', fontWeight: 600 } }, t('routeTitle')),
+              h(
+                'div',
+                { key: 'd', style: { fontSize: '12px', opacity: 0.65, maxWidth: '46ch' } },
+                t('routeNote'),
+              ),
+            ],
+          ),
+          h('div', { key: 'ctl' }, h(Switch, { compact: false })),
+        ],
+      );
+    }
+
+    /**
+     * Render the saved amount so a small one is still legible.
+     *
+     * WHY THIS EXISTS
+     *     The figure was printed with two decimals, so anything under a cent read "$0.00" - which is exactly
+     *     what a first test produces. One turn of ordinary chat costs about a hundredth of a cent at the API's
+     *     list rate, so a person could use this for an evening and watch a counter that never left zero. A
+     *     number that cannot move is worse than no number: it reads as broken rather than as small.
+     *
+     *     So: whole cents and above keep the familiar "$0.42"; anything smaller is stated in cents with two
+     *     decimals ("0.01c"), and anything smaller still says "<0.01c" rather than pretending to be zero.
+     *     Currencies other than USD have no cents convention here, so they keep four decimals instead.
+     */
+    function moneySaved(savings) {
+      const value = Number(savings?.saved) || 0;
+      const currency = String(savings?.currency || 'USD').toUpperCase();
+      // Zero is zero. Reporting it as "<0.01c" would claim a small positive that is not there - which can
+      // happen legitimately, for instance when the configured rates are zero.
+      if (value <= 0) return currency === 'USD' ? '0.00c' : `${currency} 0.0000`;
+      if (currency !== 'USD') {
+        return value >= 0.01 ? `${currency} ${value.toFixed(2)}` : `${currency} ${value.toFixed(4)}`;
+      }
+      if (value >= 0.01) return `$${value.toFixed(2)}`;
+      const cents = value * 100;
+      return cents >= 0.01 ? `${cents.toFixed(2)}c` : '<0.01c';
+    }
+
+    /**
+     * The setup page under Settings → Plugins.
+     *
+     * This is the first thing a new user needs, so it leads with the one fact that matters - can this
+     * work right now - and then offers the single action that fixes the usual blocker. No credential is
+     * requested or stored: the browser profile holds the session, which is where a session belongs.
+     */
+    function SetupPage() {
+      const [state, setState] = React.useState({ loading: true, data: null, busy: false, error: null });
+
+      const refresh = React.useCallback(async () => {
+        try {
+          const res = await fetch('/api/deepseek-web/setup', { cache: 'no-store' });
+          if (!res.ok) {
+            setState({ loading: false, data: null, busy: false, error: `setup route returned ${res.status}` });
+            return;
+          }
+          setState({ loading: false, data: await res.json(), busy: false, error: null });
+        } catch (err) {
+          setState({ loading: false, data: null, busy: false, error: String(err?.message ?? err) });
+        }
+      }, []);
+
+      React.useEffect(() => {
+        let alive = true;
+        refresh();
+        const timer = setInterval(() => {
+          if (alive) refresh();
+        }, 5000);
+        return () => {
+          alive = false;
+          clearInterval(timer);
+        };
+      }, [refresh]);
+
+      const act = async (action, extra) => {
+        setState((s) => ({ ...s, busy: true, error: null }));
+        try {
+          await fetch('/api/deepseek-web/setup', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ action, ...(extra || {}) }),
+          });
+        } catch (err) {
+          setState((s) => ({ ...s, busy: false, error: String(err?.message ?? err) }));
+          return;
+        }
+        await refresh();
+      };
+
+;
+
+      const d = state.data ?? {};
+      // Every word this page shows comes from here, in the language the Host chose.
+      const t = makeT(d.strings);
+      const dot = (ok, warn) => ({
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        flex: '0 0 auto',
+        background: ok ? '#16a34a' : warn ? '#d97706' : '#9ca3af',
+      });
+      const row = (key, label, ok, detail, warn) =>
+        h('div', { key, style: { display: 'flex', gap: '10px', alignItems: 'baseline', padding: '5px 0' } }, [
+          h('span', { key: 'd', style: dot(ok, warn) }),
+          h('span', { key: 'l', style: { minWidth: '132px', fontSize: '13px', fontWeight: 500 } }, label),
+          h('span', { key: 'v', style: { fontSize: '12px', opacity: 0.7 } }, detail),
+        ]);
+
+      const button = (label, action, primary, unavailable) =>
+        h(
+          'button',
+          {
+            type: 'button',
+            disabled: state.busy || Boolean(unavailable),
+            title: unavailable ? t('buttonNeedsBrowser') : undefined,
+            onClick: () => act(action),
+            style: {
+              padding: '6px 14px',
+              borderRadius: '6px',
+              fontSize: '13px',
+              fontWeight: 500,
+              cursor: state.busy || unavailable ? 'default' : 'pointer',
+              color: primary ? '#fff' : 'inherit',
+              background: primary ? '#2563eb' : 'transparent',
+              border: primary ? '1px solid #2563eb' : '1px solid rgba(128,128,128,0.5)',
+              opacity: state.busy || unavailable ? 0.5 : 1,
+            },
+          },
+          label,
+        );
+
+      return h('div', { style: { padding: '8px 2px', fontFamily: 'inherit', maxWidth: '72ch' } }, [
+        h('div', { key: 'h', style: { fontSize: '16px', fontWeight: 600, marginBottom: '2px' } }, t('title')),
+        /*
+         * Language, right under the title.
+         *
+         * The default follows the harness, which already knows what language the person chose there. This is
+         * for the case detection gets wrong - someone living abroad, or reading English happily on a system
+         * set to another language - and it is deliberately small: it is a correction, not a feature.
+         */
+        h(
+          'div',
+          { key: 'lang', style: { fontSize: '11px', opacity: 0.6, marginBottom: '10px', display: 'flex', gap: '6px', alignItems: 'center' } },
+          [
+            h('span', { key: 'l' }, d.strings?.languageLabel || 'Language'),
+            h(
+              'select',
+              {
+                key: 's',
+                /*
+                 * The dropdown shows what the HOST has, never what the reader once clicked.
+                 *
+                 * When a choice is lost the host reports an empty code and the page is told nothing, so
+                 * answers come back in English. Showing "Español" anyway was how the panel and the answers
+                 * came to disagree: the reader saw Spanish selected and got English back with no
+                 * explanation. "auto" is the honest reading of "no choice is stored".
+                 */
+                value: d.languageCode || '',
+                onChange: (event) => act('language', { language: event.target.value }),
+                /*
+                 * The harness paints its controls from CSS custom properties, so this does too. 'transparent'
+                 * was the mistake: a native <select> draws its popup with the system colour, and on a light
+                 * system under a dark panel that is a white sheet over the page. Using the same tokens as
+                 * the shipped UI means the field and its list follow the theme, light or dark, with nothing
+                 * hard-coded here.
+                 */
+                style: {
+                  fontSize: '11px',
+                  padding: '2px 6px',
+                  borderRadius: 'var(--dsw-radius-sm)',
+                  background: 'var(--dsw-alias-bg-layer-2)',
+                  color: 'var(--dsw-alias-label-primary)',
+                  border: '1px solid var(--dsw-alias-border-l2)',
+                  colorScheme: 'normal',
+                },
+              },
+              [
+                h('option', { key: 'auto', value: '' }, t('languageAuto', d.language || 'English')),
+                ...(d.languages || []).map((lang) =>
+                  h(
+                    'option',
+                    {
+                      key: lang.code,
+                      value: lang.code,
+                      // The popup inherits nothing from the page, so each option is painted explicitly.
+                      style: {
+                        background: 'var(--dsw-alias-bg-layer-2)',
+                        color: 'var(--dsw-alias-label-primary)',
+                      },
+                    },
+                    lang.name,
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+        h(
+          'div',
+          { key: 'sub', style: { fontSize: '13px', opacity: 0.65, marginBottom: '14px', lineHeight: 1.5 } },
+          t('pageIntro'),
+        ),
+
+        state.error
+          ? h('div', { key: 'err', style: { fontSize: '12px', color: '#c2410c', marginBottom: '10px' } }, state.error)
+          : null,
+
+        /*
+         * The ask, sitting immediately above the Brave recommendation.
+         *
+         * It used to be pinned at the top of the page, where it read as a banner and pushed the actual
+         * settings down. Here it reads as part of the same thought: this page is about which browser to use
+         * and why the work is worth supporting, so the link belongs with that rather than above everything.
+         */
+        h(
+          'div',
+          { key: 'coffee-rec', style: { marginBottom: '10px' } },
+          h(
+            'a',
+            {
+              key: 'l',
+              href: 'https://revolut.me/operatingtag',
+              target: '_blank',
+              rel: 'noreferrer noopener',
+              style: {
+                color: '#3b82f6',
+                fontWeight: 700,
+                textDecoration: 'none',
+                textTransform: 'uppercase',
+                letterSpacing: '0.02em',
+                fontSize: '13px',
+              },
+            },
+            t('buyMeACoffee'),
+          ),
+        ),
+
+        /*
+         * The engine recommendation.
+         *
+         * Both remaining modes run on Brave, for reasons that are about protection rather than speed.
+         * A headless mode was built and withdrawn: chat.deepseek.com answers headless browsers with a 403
+         * from CloudFront before the application loads, so no configuration could make it work.
+         */
+        h(
+          'div',
+          {
+            key: 'rec',
+            style: {
+              padding: '10px 12px',
+              marginBottom: '14px',
+              borderRadius: '8px',
+              border: '1px solid rgba(128,128,128,0.3)',
+              fontSize: '12px',
+              lineHeight: 1.55,
+            },
+          },
+          [
+            h(
+              'div',
+              { key: 't', style: { fontWeight: 600, marginBottom: '4px' } },
+              t('braveTitle'),
+            ),
+            h(
+              'div',
+              { key: 'b', style: { opacity: 0.8, marginBottom: '6px' } },
+              t('braveWhy'),
+            ),
+            h('ol', { key: 'l', style: { margin: '0 0 0 18px', padding: 0, opacity: 0.8 } }, [
+              h('li', { key: '1' }, [
+                h('strong', { key: 'a' }, t('braveSecurity') + ' '),
+                t('braveSecurityBody'),
+              ]),
+              h('li', { key: '2' }, [
+                h('strong', { key: 'a' }, t('bravePrivacy') + ' '),
+                t('bravePrivacyBody'),
+              ]),
+              h('li', { key: '3' }, [
+                h('strong', { key: 'a' }, t('braveQuiet') + ' '),
+                t('braveQuietBody'),
+              ]),
+            ]),
+            h(
+              'div',
+              { key: 'n', style: { opacity: 0.6, marginTop: '8px', fontSize: '11px' } },
+              t('braveInvisible'),
+            ),
+          ],
+        ),
+
+        /*
+         * Two different facts, so two different labels.
+         *
+         * "Running" answers "is the browser up right now"; "Using" answers "which browser will it use".
+         * Calling both of them "Browser" made the panel look self-contradictory - one row said nothing was
+         * listening while the next named an engine - even though both were true.
+         */
+        row(
+          'running',
+          t('statusRunning'),
+          d.browserReady,
+          d.browserReady ? t('browserListening', d.port) : d.browserError || t('browserNone', d.port),
+          d.launching,
+        ),
+        row(
+          'session',
+          t('statusSession'),
+          d.signedIn && d.composer,
+          d.signedIn
+            ? d.composer
+              ? t('sessionSignedIn')
+              : t('sessionSignedInButSignInScreen')
+            : t('sessionNotSignedIn'),
+          d.signedIn && !d.composer,
+        ),
+        row(
+          'provider',
+          t('statusProvider'),
+          d.adapterRegistered,
+          d.adapterRegistered ? t('providerRegistered') : t('providerMissing'),
+        ),
+        row(
+          'ready',
+          t('statusReady'),
+          d.ready,
+          d.ready ? t('readyWeb') : t('readyApiFallback'),
+        ),
+
+        /*
+         * Browser row and upgrade nudge.
+         *
+         * The plugin works on either browser; it simply says which one it is using and what that costs.
+         * Brave is offered, never demanded, and the nudge disappears once Brave is in use.
+         */
+        row(
+          'engine',
+          t('statusUsing'),
+          d.recommended === true,
+          d.browser === 'brave'
+            ? t('usingBrave')
+            : d.browser === 'edge'
+              ? t('usingEdge')
+              : t('browserNoneFound'),
+          d.browser === 'edge'
+        ),
+        d.browser === 'edge'
+          ? h(
+              'div',
+              {
+                key: 'nudge',
+                style: {
+                  marginTop: '10px',
+                  padding: '10px 12px',
+                  borderRadius: '8px',
+                  border: '1px solid rgba(128,128,128,0.3)',
+                  fontSize: '12px',
+                  lineHeight: 1.5,
+                },
+              },
+              [
+                h(
+                  'div',
+                  { key: 't', style: { marginBottom: '6px' } },
+                  t('edgeSwitch'),
+                ),
+                h(
+                  'a',
+                  {
+                    key: 'a',
+                    href: 'https://brave.com/download/',
+                    target: '_blank',
+                    rel: 'noreferrer noopener',
+                    style: {
+                      display: 'inline-block',
+                      padding: '5px 12px',
+                      borderRadius: '6px',
+                      background: '#fb542b',
+                      color: '#fff',
+                      fontWeight: 600,
+                      fontSize: '12px',
+                      textDecoration: 'none',
+                    },
+                  },
+                  t('getBrave'),
+                ),
+              ],
+            )
+          : null,
+        /*
+         * What this session has saved.
+         *
+         * The plugin exists to stop you paying per token, and until now that was a claim. This is the
+         * number, priced at the API's own list rate, climbing as you use it. It says "estimated" because
+         * the page reports no usage and the tokens are derived from character counts - a figure this
+         * prominent has to be honest about its basis.
+         */
+        h(
+          'div',
+          {
+            key: 'savings',
+            style: {
+              marginTop: '16px',
+              padding: '12px 14px',
+              borderRadius: '8px',
+              border: '1px solid rgba(128,128,128,0.3)',
+              background: 'rgba(34,197,94,0.07)',
+            },
+          },
+          [
+            h('div', { key: 't', style: { fontSize: '11px', opacity: 0.6, marginBottom: '2px' } }, t('savingsTitle')),
+            h(
+              'div',
+              { key: 'v', style: { fontSize: '24px', fontWeight: 700, color: '#16a34a', lineHeight: 1.2 } },
+              d.savings && d.savings.calls > 0 ? moneySaved(d.savings) : '—',
+            ),
+            h(
+              'div',
+              { key: 'd', style: { fontSize: '11px', opacity: 0.6, marginTop: '4px' } },
+              d.savings && d.savings.calls > 0
+                ? `${t('savingsDetail', d.savings.calls, d.savings.totalTokens.toLocaleString(), d.savings.priceLabel)} · ` +
+                  t('savingsEstimatedNote')
+                : t('savingsEmpty'),
+            ),
+          ],
+        ),
+
+        /*
+         * Trust panel.
+         *
+         * A plugin that drives a browser on someone's own account deserves the same suspicion people give
+         * a random installer. Saying plainly what it does and does not touch is quicker than answering that
+         * suspicion one support question at a time.
+         */
+        h(
+          'div',
+          {
+            key: 'trust',
+            style: { marginTop: '16px', fontSize: '12px', lineHeight: 1.7, opacity: 0.85 },
+          },
+          [
+            h('div', { key: 't', style: { fontWeight: 600, marginBottom: '4px' } }, t('trustTitle')),
+            h('div', { key: 'y', style: { color: '#16a34a' } }, [
+              `✓ ${t('trustUsesSession')}`,
+              h('br', { key: '1' }),
+              `✓ ${t('trustLocal')}`,
+              h('br', { key: '2' }),
+              `✓ ${t('trustCounts')}`,
+            ]),
+            h('div', { key: 'n', style: { opacity: 0.75, marginTop: '4px' } }, [
+              `· ${t('trustNoPassword')}`,
+              h('br', { key: '1' }),
+              `· ${t('trustNoProxy')}`,
+              h('br', { key: '2' }),
+              `· ${t('trustNoTelemetry')}`,
+            ]),
+          ],
+        ),
+
+        /*
+         * What was actually typed into the browser.
+         *
+         * Every confusion about this plugin came from not being able to see what it put in the chat box.
+         * Showing it here answers the question without making anyone open the tab.
+         */
+        d.lastPrompt
+          ? h(
+              'div',
+              { key: 'sent', style: { marginTop: '16px' } },
+              [
+                h(
+                  'div',
+                  { key: 't', style: { fontSize: '12px', fontWeight: 600, marginBottom: '4px' } },
+                  t('lastSentTitle', d.lastPrompt.chars.toLocaleString()),
+                ),
+                /*
+                 * The tool line, stated plainly.
+                 *
+                 * The chat box has no system channel, so a model can only call a tool that was named in the
+                 * message. That line is therefore unavoidable - but it should be inspectable here rather
+                 * than surprising someone reading their own conversation.
+                 */
+                d.lastPrompt.tools
+                  ? h(
+                      'div',
+                      { key: 'tools', style: { fontSize: '11px', opacity: 0.65, marginBottom: '6px' } },
+                      t('toolsOffered', d.lastPrompt.tools),
+                    )
+                  : null,
+                h(
+                  'pre',
+                  {
+                    key: 'p',
+                    style: {
+                      margin: 0,
+                      padding: '10px 12px',
+                      borderRadius: '6px',
+                      background: 'rgba(128,128,128,0.12)',
+                      fontSize: '11px',
+                      lineHeight: 1.5,
+                      maxHeight: '180px',
+                      overflow: 'auto',
+                      whiteSpace: 'pre-wrap',
+                      wordBreak: 'break-word',
+                    },
+                  },
+                  d.lastPrompt.text,
+                ),
+              ],
+            )
+          : null,
+
+        h('div', { key: 'actions', style: { display: 'flex', gap: '8px', marginTop: '16px', flexWrap: 'wrap' } }, [
+          button(d.signedIn && d.composer ? t('buttonOpenChat') : t('buttonSignIn'), 'signin', !d.ready),
+          button(t('buttonCheck'), 'check', false),
+          // Both need a live browser; disabled rather than failing when there is none.
+          button(t('buttonFresh'), 'fresh', false, !d.browserReady),
+          button(t('buttonShow'), 'show', false, !d.browserReady),
+        ]),
+
+        h(
+          'div',
+          { key: 'note', style: { fontSize: '11px', opacity: 0.5, marginTop: '14px', lineHeight: 1.5 } },
+          t('noteFirstRun'),
+        ),
+
+        // Support note.
+        //
+        // Written as an explanation rather than a plea. People fund work they understand and ignore appeals
+        // to pity, so this says what the plugin does, what it would take to do it better, and leaves the
+        // decision alone. No fake urgency, no guilt, and no link that goes nowhere.
+        h(
+          'div',
+          {
+            key: 'support',
+            style: {
+              marginTop: '18px',
+              paddingTop: '12px',
+              borderTop: '1px solid rgba(128,128,128,0.25)',
+              fontSize: '12px',
+              lineHeight: 1.6,
+              opacity: 0.8,
+            },
+          },
+          [
+            /*
+             * The ask comes first, as a link rather than a heading.
+             *
+             * There is only one person behind this, the reader already knows who, so naming a handle would
+             * be noise in the one place the reader looks first. Everything after this is the case: what the
+             * money is for, why it matters, and no pressure applied.
+             */
+            h(
+              'div',
+              { key: 't', style: { marginBottom: '8px' } },
+              h(
+                'a',
+                {
+                  key: 'l',
+                  href: 'https://revolut.me/operatingtag',
+                  target: '_blank',
+                  rel: 'noreferrer noopener',
+                  style: {
+                    color: '#3b82f6',
+                    fontWeight: 700,
+                    textDecoration: 'none',
+                  },
+                },
+                t('buyMeACoffee'),
+              ),
+            ),
+            h(
+              'div',
+              { key: 'b' },
+              t('authorIntro'),
+            ),
+            h(
+              'div',
+              { key: 'c', style: { marginTop: '6px' } },
+              t('authorAsk'),
+            ),
+
+            /*
+             * What the money is for.
+             *
+             * A spec sheet, not a plea: every line is a fact about the machine, and the reader decides what
+             * that is worth without being told how to feel about it.
+             */
+            h(
+              'div',
+              { key: 'goal', style: { marginTop: '12px' } },
+              [
+                h(
+                  'div',
+                  {
+                    key: 'specs',
+                    style: {
+                      padding: '10px 12px',
+                      borderRadius: '6px',
+                      background: 'rgba(128,128,128,0.12)',
+                      fontSize: '11.5px',
+                      lineHeight: 1.7,
+                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+                      whiteSpace: 'pre-wrap',
+                    },
+                  },
+                  [
+                    t('specTitle'),
+                    /*
+                     * Labels are translated, values are not.
+                     *
+                     * Translations differ wildly in length ("Speicher" against "Storage"), so the column is
+                     * padded after translation rather than inside the string, and the block still lines up.
+                     */
+                    `  ${t('specCpu').padEnd(9)} Ryzen AI 9 HX 370 · 12 cores · 5.1 GHz`,
+                    `  ${t('specNpu').padEnd(9)} AMD XDNA · 50 TOPS`,
+                    `  ${t('specGpu').padEnd(9)} RTX 5090 Laptop · 24 GB GDDR7`,
+                    `  ${t('specRam').padEnd(9)} 64 GB LPDDR5X`,
+                    `  ${t('specStorage').padEnd(9)} 2 TB PCIe 4.0 NVMe`,
+                    `  ${t('specDisplay').padEnd(9)} 16" 4K OLED · 120 Hz · 1600 nits · touch`,
+                    `  ${t('specPorts').padEnd(9)} USB4 40 Gbps · HDMI 2.1 · SD Express 7`,
+                    `  ${t('specPower').padEnd(9)} 240 W · 1.95 kg`,
+                  ].join('\n'),
+                ),
+                h(
+                  'div',
+                  { key: 'a', style: { marginTop: '8px', fontWeight: 600 } },
+                  t('authorCloser'),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ]);
+    }
+
+    return {
+      inject: ['slots', 'sessions'],
+      apply(ctx) {
+        pluginCtx = ctx;
+        /*
+         * The tab label is static - it is set at registration, before any status reply can bring the
+         * dictionary. The harness's own locale service covers en and zh, so the label follows that; every
+         * other language sees the brand name, which is how product names behave anyway.
+         */
+        let tabLabel = 'Uncle Sam';
+        try {
+          const active = ctx.get('locale')?.getSnapshot?.()?.active;
+          if (active === 'zh') tabLabel = '山姆大叔';
+        } catch {
+          /* no locale service: the brand name is fine */
+        }
+        /*
+         * Inside the composer's tool row, on the left.
+         *
+         * It used to sit in `conversation.composer.dock`, which renders BELOW the card - visible, but in
+         * its own strip, floating. The tool row is where a choice about how to send the message belongs,
+         * and its LEFT side is the only part of it with room: the right half is already permission, model,
+         * reasoning, usage and submit, so anything added there squeezes the model name or pushes the send
+         * button off. The left holds a single small button.
+         *
+         * Both slots are `scope: 'session'` and carry no replacement risk, so the session id keeps arriving
+         * as a prop - which is what makes the switch change THIS conversation rather than only the default.
+         */
+        ctx.slots.inject('conversation.input.left', () =>
+          ctx.slots.register(
+            { name: 'conversation.input.left', id: 'deepseek-web-switch', order: -10 },
+            DockSwitch,
+          ),
+        );
+        ctx.slots.inject('settings.models.footer', () =>
+          ctx.slots.register(
+            { name: 'settings.models.footer', id: 'deepseek-web-switch-settings', order: 40 },
+            SettingsSwitch,
+          ),
+        );
+        ctx.slots.inject('settings.plugins.tab', () =>
+          ctx.slots.register(
+            {
+              name: 'settings.plugins.tab',
+              id: 'deepseek-web-setup',
+              order: 60,
+              label: tabLabel,
+            },
+            SetupPage,
+          ),
+        );
+        /*
+         * Also a top-level settings page.
+         *
+         * `settings.plugins.tab` is a sub-tab of the Plugins settings SECTION, which is not where a person
+         * lands after clicking a plugin in the Plugins LIST - that list is the bundle inventory, showing
+         * Uninstall, components and the source path. The tab also only appears if that section exists at
+         * all, so on a profile without it the panel is invisible with no error at all.
+         *
+         * `settings.section` is documented as "one settings page per list entry", which is unambiguous, so
+         * the same component is registered there too. Two seats, one component, no duplicated logic.
+         */
+        ctx.slots.inject('settings.section', () =>
+          ctx.slots.register(
+            {
+              name: 'settings.section',
+              id: 'deepseek-web-setup-page',
+              order: 60,
+              label: tabLabel,
+            },
+            SetupPage,
+          ),
+        );
+      },
+    };
+  },
+});