/**
 * @local/dsh-remote — browser side.
 *
 *  - Sidebar panel "Devices" (sidebar.panellist + keyed main slot): every linked device
 *    with its sessions grouped by workspace, live running state, "open" (local session →
 *    in place, remote → /r/<device>/#/session/<id>), "new session on device".
 *  - Settings section "Remote devices": role, link status, pairing (master: create code;
 *    slave: enter master URL + code), device list with revoke/remove and per-device sync
 *    policy (enabled, allow/deny, opt-in secrets), "sync now".
 *  - Toast when a session on any device finishes (server-sent events).
 *  - When the page itself is served under /r/<device>/, a small banner shows which
 *    device you are looking at, with a link back to the local DSH.
 */
window.__ModuleLoader__.load({
  id: '@local/dsh-remote',
  factory(require) {
    const React = require('react');
    const ReactDOM = require('react-dom');
    const h = React.createElement;
    const { useState, useEffect, useCallback, useMemo, useRef } = React;
    let P = {};
    try { P = require('@deepseek-ai/dsh-client-ui-primitives') || {}; } catch { P = {}; }

    const PANEL_ID = 'dsh-remote-devices';

    // When this UI is itself proxied (/r/<dev>/), API calls must go to *this* page's
    // host DSH, i.e. the remote device. Relative URLs already do that. For the device
    // overview we always want the browser's own DSH, which is the URL root before /r/.
    const mount = (() => {
      const m = location.pathname.match(/^(.*?)\/r\/([a-z0-9-]+)\//);
      return m ? { root: m[1] + '/', device: m[2] } : { root: location.pathname.replace(/[^/]*$/, ''), device: null };
    })();
    const rootUrl = (p) => mount.root + p;

    async function api(path, init) {
      const res = await fetch(rootUrl('dsh-remote/' + path), {
        ...init,
        headers: { accept: 'application/json', ...(init && init.body ? { 'content-type': 'application/json' } : {}) },
        credentials: 'same-origin',
      });
      let json;
      try { json = await res.json(); } catch { json = {}; }
      if (!res.ok) throw new Error(json.error || res.statusText || String(res.status));
      return json;
    }
    const post = (path, body) => api(path, { method: 'POST', body: JSON.stringify(body || {}) });

    function sessionUrl(device, selfId, sessionId) {
      const base = device === selfId ? mount.root : `${mount.root}r/${device}/`;
      return `${base}#/session/${encodeURIComponent(sessionId)}`;
    }

    const ago = (t) => {
      if (!t) return '';
      const s = Math.max(0, (Date.now() - t) / 1000);
      if (s < 60) return 'just now';
      if (s < 3600) return `${Math.floor(s / 60)}m ago`;
      if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
      return `${Math.floor(s / 86400)}d ago`;
    };
    const base = (p) => String(p || '').replace(/\/+$/, '').split('/').pop() || p || '';

    // ------------------------------------------------------------------ styles
    const S = {
      page: { padding: '20px 28px', overflow: 'auto', height: '100%', boxSizing: 'border-box', color: 'var(--color-text, inherit)' },
      h1: { fontSize: 20, fontWeight: 600, margin: '0 0 4px' },
      sub: { opacity: 0.65, fontSize: 13, margin: '0 0 18px' },
      card: { border: '1px solid var(--color-border, rgba(127,127,127,.25))', borderRadius: 10, padding: '12px 14px', margin: '0 0 14px', background: 'var(--color-surface, transparent)' },
      devHead: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 },
      dot: (on) => ({ width: 9, height: 9, borderRadius: 9, background: on ? '#3fb950' : '#8b949e', flex: 'none' }),
      badge: (tone) => ({ fontSize: 11, padding: '1px 7px', borderRadius: 9, border: '1px solid currentColor', opacity: 0.8, color: tone === 'accent' ? '#58a6ff' : tone === 'warn' ? '#d29922' : tone === 'ok' ? '#3fb950' : 'inherit' }),
      ws: { fontSize: 12, textTransform: 'uppercase', letterSpacing: '.04em', opacity: 0.6, margin: '10px 0 4px' },
      row: { display: 'flex', alignItems: 'center', gap: 8, padding: '5px 8px', borderRadius: 6, cursor: 'pointer', fontSize: 14 },
      title: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
      meta: { fontSize: 12, opacity: 0.55, flex: 'none' },
      btn: { font: 'inherit', fontSize: 13, padding: '4px 10px', borderRadius: 6, border: '1px solid var(--color-border, rgba(127,127,127,.35))', background: 'transparent', color: 'inherit', cursor: 'pointer' },
      btnPrimary: { font: 'inherit', fontSize: 13, padding: '5px 12px', borderRadius: 6, border: '1px solid #2f81f7', background: '#2f81f7', color: '#fff', cursor: 'pointer' },
      input: { font: 'inherit', fontSize: 13, padding: '5px 8px', borderRadius: 6, border: '1px solid var(--color-border, rgba(127,127,127,.35))', background: 'transparent', color: 'inherit', minWidth: 0 },
      err: { color: '#f85149', fontSize: 13 },
      code: { fontFamily: 'ui-monospace, monospace', fontSize: 18, letterSpacing: '.08em', padding: '6px 10px', border: '1px dashed currentColor', borderRadius: 6, display: 'inline-block' },
      spin: { display: 'inline-block', width: 8, height: 8, borderRadius: 8, background: '#d29922', animation: 'dshr-pulse 1s infinite' },
    };
    if (!document.getElementById('dshr-style')) {
      const st = document.createElement('style');
      st.id = 'dshr-style';
      st.textContent = '@keyframes dshr-pulse{0%,100%{opacity:.3}50%{opacity:1}} .dshr-row:hover{background:var(--color-hover,rgba(127,127,127,.12))}';
      document.head.appendChild(st);
    }

    // ------------------------------------------------------------------ live store
    const store = {
      state: null, sessions: null, error: null, listeners: new Set(), events: new Set(),
      emit() { for (const l of this.listeners) l(); },
      async refresh() {
        try {
          const [state, sessions] = await Promise.all([api('state'), api('sessions')]);
          this.state = state; this.sessions = sessions.devices; this.error = null;
        } catch (e) { this.error = e.message; }
        this.emit();
      },
    };
    let es = null;
    let refreshTimer = null;
    function startStream() {
      if (es) return;
      try {
        es = new EventSource(rootUrl('dsh-remote/stream'));
        es.onmessage = (m) => {
          let ev; try { ev = JSON.parse(m.data); } catch { return; }
          for (const l of store.events) l(ev);
          clearTimeout(refreshTimer);
          refreshTimer = setTimeout(() => store.refresh(), 300);
        };
        es.onerror = () => { /* EventSource reconnects on its own */ };
      } catch { es = null; }
    }

    function useStore() {
      const [, force] = useState(0);
      useEffect(() => {
        const l = () => force((x) => x + 1);
        store.listeners.add(l);
        if (!store.state) store.refresh();
        const t = setInterval(() => store.refresh(), 10000);
        return () => { store.listeners.delete(l); clearInterval(t); };
      }, []);
      return store;
    }

    // ------------------------------------------------------------------ Devices panel
    function DeviceIcon({ size }) {
      return h('svg', { 'data-dsh-panel-entry': PANEL_ID, viewBox: '0 0 16 16', width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.3, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
        h('rect', { x: 1.5, y: 2.5, width: 9, height: 6.5, rx: 1 }),
        h('path', { d: 'M4 12h4M6 9v3' }),
        h('rect', { x: 11.5, y: 5.5, width: 3, height: 8, rx: .8 }));
    }

    function SessionRow({ dev, s, selfId }) {
      return h('a', {
        className: 'dshr-row', style: { ...S.row, color: 'inherit', textDecoration: 'none' },
        href: sessionUrl(dev.device, selfId, s.sessionId),
        title: `${s.title || s.sessionId}\n${s.cwd || ''}`,
      },
      s.running ? h('span', { style: S.spin, title: 'running' }) : h('span', { style: { width: 8, flex: 'none' } }),
      h('span', { style: S.title }, s.title || h('i', { style: { opacity: .6 } }, 'untitled')),
      h('span', { style: S.meta }, ago(s.updatedAt)));
    }

    function NewSession({ dev, selfId }) {
      const [open, setOpen] = useState(false);
      const [busy, setBusy] = useState(false);
      const [err, setErr] = useState('');
      const options = dev.workspaces || [];
      const [ws, setWs] = useState(options[0]?.id || '');
      const go = async () => {
        setBusy(true); setErr('');
        try {
          const r = await post('new-session', { device: dev.device, workspaceId: ws || undefined });
          location.href = sessionUrl(dev.device, selfId, r.sessionId);
          if (dev.device === selfId) setTimeout(() => location.reload(), 50);
        } catch (e) { setErr(e.message); setBusy(false); }
      };
      if (!open) return h('button', { style: S.btn, onClick: () => setOpen(true) }, '+ New session');
      return h('span', { style: { display: 'inline-flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' } },
        h('select', { style: S.input, value: ws, onChange: (e) => setWs(e.target.value) },
          options.length ? options.map((w) => h('option', { key: w.id, value: w.id }, w.title || base(w.path))) : h('option', { value: '' }, '(no workspace)')),
        h('button', { style: S.btnPrimary, disabled: busy || !options.length, onClick: go }, busy ? 'Creating…' : 'Create'),
        h('button', { style: S.btn, onClick: () => setOpen(false) }, 'Cancel'),
        err && h('span', { style: S.err }, err));
    }

    function DevicesPage() {
      const st = useStore();
      const [filter, setFilter] = useState('');
      const self = st.state?.self;
      if (!st.state && !st.error) return h('div', { style: S.page }, 'Loading devices…');
      const devices = st.sessions || [];
      const q = filter.trim().toLowerCase();
      const meta = Object.fromEntries((st.state?.devices || []).map((d) => [d.id, d]));
      return h('div', { style: S.page, 'data-dsh-plugin': 'dsh-remote' },
        h('h1', { style: S.h1 }, 'Devices'),
        h('p', { style: S.sub },
          st.state ? `This device: ${self?.name} (${st.state.role})` : '',
          st.state?.role === 'slave' && st.state.master
            ? (st.state.master.linked ? ` · linked to ${st.state.master.info?.name || st.state.master.url}` : ` · master unreachable${st.state.master.error ? ': ' + st.state.master.error : ''}`)
            : ''),
        st.error && h('p', { style: S.err }, st.error),
        h('div', { style: { display: 'flex', gap: 8, margin: '0 0 14px' } },
          h('input', { style: { ...S.input, flex: 1 }, placeholder: 'Filter sessions…', value: filter, onChange: (e) => setFilter(e.target.value) }),
          h('button', { style: S.btn, onClick: () => store.refresh() }, 'Refresh')),
        devices.map((dev) => {
          const m = meta[dev.device] || {};
          const items = (dev.items || []).filter((s) => !q || `${s.title || ''} ${s.cwd || ''}`.toLowerCase().includes(q));
          const byWs = new Map();
          for (const s of items) {
            const key = s.cwd || '';
            if (!byWs.has(key)) byWs.set(key, []);
            byWs.get(key).push(s);
          }
          const wsTitle = (cwd) => (dev.workspaces || []).find((w) => w.path === cwd)?.title || base(cwd) || 'No workspace';
          return h('div', { key: dev.device, style: S.card },
            h('div', { style: S.devHead },
              h('span', { style: S.dot(!dev.error) }),
              h('strong', null, dev.name || dev.device),
              dev.self && h('span', { style: S.badge('accent') }, 'this device'),
              m.role === 'master' && h('span', { style: S.badge() }, 'master'),
              m.via && h('span', { style: S.badge() }, 'via master'),
              h('span', { style: { flex: 1 } }),
              !dev.self && h('a', { style: { ...S.btn, textDecoration: 'none' }, href: `${mount.root}r/${dev.device}/` }, 'Open DSH ↗'),
              h(NewSession, { dev, selfId: self?.id })),
            dev.error && h('div', { style: S.err }, dev.error),
            !dev.error && !items.length && h('div', { style: { opacity: .6, fontSize: 13 } }, q ? 'No matching sessions.' : 'No sessions yet.'),
            [...byWs.entries()].map(([cwd, list]) => h('div', { key: cwd },
              h('div', { style: S.ws, title: cwd }, wsTitle(cwd)),
              list.map((s) => h(SessionRow, { key: s.sessionId, dev, s, selfId: self?.id })))));
        }));
    }

    // ------------------------------------------------------------------ Settings section
    function Field({ label, children, hint }) {
      return h('label', { style: { display: 'grid', gap: 4, margin: '0 0 10px', fontSize: 13 } },
        h('span', { style: { opacity: .8 } }, label), children, hint && h('span', { style: { opacity: .55, fontSize: 12 } }, hint));
    }
    const listToText = (l) => (l || []).join(', ');
    const textToList = (t) => String(t || '').split(/[\s,]+/).map((x) => x.trim()).filter(Boolean);

    function DeviceSync({ d, offer, onSaved }) {
      const [enabled, setEnabled] = useState(d.sync?.enabled !== false);
      const [allow, setAllow] = useState(listToText(d.sync?.allow));
      const [deny, setDeny] = useState(listToText(d.sync?.deny));
      const [secrets, setSecrets] = useState(new Set(d.sync?.secrets || []));
      const [msg, setMsg] = useState('');
      const save = async () => {
        try {
          await post(`devices/${d.id}/sync`, { enabled, allow: textToList(allow), deny: textToList(deny), secrets: [...secrets] });
          setMsg('Saved; device notified.'); onSaved();
        } catch (e) { setMsg(e.message); }
      };
      return h('div', { style: { margin: '8px 0 0 18px', paddingLeft: 10, borderLeft: '2px solid rgba(127,127,127,.25)' } },
        h('label', { style: { display: 'flex', gap: 6, alignItems: 'center', fontSize: 13, marginBottom: 8 } },
          h('input', { type: 'checkbox', checked: enabled, onChange: (e) => setEnabled(e.target.checked) }), 'Sync plugins + config to this device'),
        h(Field, { label: 'Only these bundles (empty = all)', hint: 'Exact names or prefix*, comma separated' },
          h('input', { style: S.input, value: allow, onChange: (e) => setAllow(e.target.value) })),
        h(Field, { label: 'Never these bundles' }, h('input', { style: S.input, value: deny, onChange: (e) => setDeny(e.target.value) })),
        h('div', { style: { fontSize: 13, margin: '0 0 8px' } },
          h('div', { style: { opacity: .8, marginBottom: 4 } }, 'Secrets this device may pull (it must also opt in locally)'),
          offer.length ? offer.map((n) => h('label', { key: n, style: { display: 'inline-flex', gap: 4, marginRight: 12 } },
            h('input', { type: 'checkbox', checked: secrets.has(n), onChange: (e) => { const s = new Set(secrets); e.target.checked ? s.add(n) : s.delete(n); setSecrets(s); } }),
            h('code', null, n)))
            : h('span', { style: { opacity: .55 } }, 'None offered. Add names to sync.offerSecrets in the dsh-remote config.')),
        h('button', { style: S.btn, onClick: save }, 'Save sync policy'), ' ', msg && h('span', { style: { fontSize: 12, opacity: .75 } }, msg));
    }

    function SettingsPanel() {
      const st = useStore();
      const [code, setCode] = useState(null);
      const [masterUrl, setMasterUrl] = useState('');
      const [pairCode, setPairCode] = useState('');
      const [msg, setMsg] = useState('');
      const [busy, setBusy] = useState(false);
      const [open, setOpen] = useState({});
      const [syncRes, setSyncRes] = useState(null);
      const s = st.state;
      if (!s) return h('div', { style: { padding: 4 } }, st.error ? h('span', { style: S.err }, st.error) : 'Loading…');
      const act = async (fn) => { setBusy(true); setMsg(''); try { await fn(); } catch (e) { setMsg(e.message); } setBusy(false); store.refresh(); };

      const header = h('div', { style: S.card },
        h('div', { style: S.devHead }, h('strong', null, s.self.name), h('span', { style: S.badge('accent') }, s.role), h('code', { style: { opacity: .6, fontSize: 12 } }, s.self.id)),
        s.role === 'master' && h('div', { style: { fontSize: 13, opacity: .8 } },
          'Slaves pair with this URL: ', h('code', null, s.publicUrl || s.lanUrl || location.origin + mount.root.replace(/\/$/, '')),
          s.publicUrl && s.lanUrl ? h('span', null, ' (LAN: ', h('code', null, s.lanUrl), ')') : null),
        s.role === 'slave' && h('div', { style: { fontSize: 13 } },
          h('span', { style: S.dot(s.master?.linked) }), ' ',
          s.master?.linked ? `Linked to ${s.master.info?.name} · ${s.master.url}` : `Not linked (${s.master?.url || 'no master'})${s.master?.error ? ': ' + s.master.error : ''}`));

      const pairing = s.role === 'master'
        ? h('div', { style: S.card },
          h('strong', null, 'Pair a new device'),
          h('p', { style: { fontSize: 13, opacity: .75, margin: '4px 0 10px' } }, 'Create a one-time code (valid 15 minutes), then enter it in Settings → Remote devices on the new machine.'),
          code ? h('div', null, h('span', { style: S.code }, code.code), h('div', { style: { fontSize: 12, opacity: .6, marginTop: 4 } }, `expires ${new Date(code.expiresAt).toLocaleTimeString()}`))
            : h('button', { style: S.btnPrimary, disabled: busy, onClick: () => act(async () => setCode(await post('pairing', {}))) }, 'Create pairing code'))
        : h('div', { style: S.card },
          h('strong', null, s.master?.url ? 'Re-pair with a master' : 'Pair with a master'),
          h(Field, { label: 'Master URL', hint: 'e.g. https://dsh.rizzy.dev or http://192.168.0.111:3080' },
            h('input', { style: S.input, value: masterUrl, placeholder: 'https://…', onChange: (e) => setMasterUrl(e.target.value) })),
          h(Field, { label: 'Pairing code' }, h('input', { style: { ...S.input, fontFamily: 'ui-monospace,monospace' }, value: pairCode, placeholder: 'ABCD-EFGH-…', onChange: (e) => setPairCode(e.target.value.toUpperCase()) })),
          h('button', { style: S.btnPrimary, disabled: busy || !masterUrl || !pairCode, onClick: () => act(async () => {
            const r = await post('pair', { masterUrl, code: pairCode });
            setMsg(r.restartRequired ? 'Paired. Restart DSH on this machine to switch it to slave mode.' : `Paired with ${r.master?.name}.`);
          }) }, 'Pair'),
          s.master?.url && h('span', null, ' ', h('button', { style: S.btn, disabled: busy, onClick: () => act(() => post('unpair', {})) }, 'Unpair')));

      const devices = s.role === 'master' && h('div', { style: S.card },
        h('strong', null, 'Paired devices'),
        (s.devices || []).filter((d) => !d.self).length === 0 && h('div', { style: { fontSize: 13, opacity: .6, marginTop: 6 } }, 'No devices yet.'),
        (s.devices || []).filter((d) => !d.self).map((d) => h('div', { key: d.id, style: { padding: '8px 0', borderTop: '1px solid rgba(127,127,127,.15)' } },
          h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 14 } },
            h('span', { style: S.dot(d.online) }), h('strong', null, d.name), h('code', { style: { fontSize: 12, opacity: .6 } }, d.id),
            d.revoked && h('span', { style: S.badge('warn') }, 'revoked'),
            h('span', { style: { fontSize: 12, opacity: .6 } }, d.online ? `online since ${ago(d.connectedAt)}` : d.lastSeenAt ? `seen ${ago(d.lastSeenAt)}` : 'never connected'),
            h('span', { style: { flex: 1 } }),
            h('button', { style: S.btn, onClick: () => setOpen({ ...open, [d.id]: !open[d.id] }) }, open[d.id] ? 'Hide sync' : 'Sync policy'),
            !d.revoked && h('button', { style: S.btn, disabled: busy, onClick: () => confirm(`Revoke ${d.name}? It will be disconnected and must re-pair.`) && act(() => post(`devices/${d.id}/revoke`, {})) }, 'Revoke'),
            h('button', { style: S.btn, disabled: busy, onClick: () => confirm(`Remove ${d.name} completely?`) && act(() => post(`devices/${d.id}/remove`, {})) }, 'Remove')),
          open[d.id] && h(DeviceSync, { d, offer: s.sync?.offerSecrets || [], onSaved: () => store.refresh() }))));

      const syncCard = h('div', { style: S.card },
        h('strong', null, 'Plugin + config sync'),
        s.role === 'master'
          ? h('p', { style: { fontSize: 13, opacity: .75, margin: '4px 0 8px' } }, 'Slaves pull this machine\'s bundles (registry + local link: plugins) and its cordis.patch.yml (minus machine-local entries) into a managed layer that their own config overrides.')
          : h('div', { style: { fontSize: 13, margin: '4px 0 8px' } },
            h('div', null, `Auto sync: ${s.sync?.auto ? 'on' : 'off'} · allow: ${listToText(s.sync?.allow) || 'all'} · deny: ${listToText(s.sync?.deny) || 'none'}`),
            h('div', null, 'Accepted secrets: ', listToText(s.sync?.secrets) || h('span', { style: { opacity: .6 } }, 'none (set sync.secrets in this device\'s dsh-remote config)')),
            s.lastSync && h('div', { style: { marginTop: 6, opacity: .8 } },
              `Last sync ${ago(s.lastSync.at)}: ${s.lastSync.installed?.length || 0} installed, ${s.lastSync.updated?.length || 0} updated, ${s.lastSync.failed?.length || 0} failed, ${s.lastSync.patchEntries || 0} config entries`,
              (s.lastSync.failed || []).map((f, i) => h('div', { key: i, style: S.err }, f)))),
        h('button', { style: S.btn, disabled: busy, onClick: () => act(async () => {
          const r = await post('sync', {});
          setSyncRes(r);
          if (r.restartRequired) setMsg('Synced. Some plugins changed: restart DSH on this device to load them.');
        }) }, s.role === 'master' ? 'Push sync to all devices' : 'Sync now'),
        syncRes && s.role === 'master' && h('span', { style: { fontSize: 12, opacity: .7 } }, ` notified ${syncRes.pushed} device(s)`));

      return h('div', { 'data-dsh-plugin': 'dsh-remote' }, header, pairing, devices, syncCard, msg && h('div', { style: { ...S.card, fontSize: 13 } }, msg));
    }

    // ------------------------------------------------------------------ toasts
    function ToastHost() {
      const [items, setItems] = useState([]);
      useEffect(() => {
        const l = (ev) => {
          if (ev.type !== 'session-finished') return;
          const id = `${ev.device}:${ev.sessionId}:${ev.at}`;
          setItems((xs) => [...xs.slice(-2), { id, ev }]);
        };
        store.events.add(l);
        return () => store.events.delete(l);
      }, []);
      return h(React.Fragment, null, items.map(({ id, ev }) => {
        const text = `${ev.deviceName}: “${ev.title || 'session'}” finished`;
        const done = () => setItems((xs) => xs.filter((x) => x.id !== id));
        const actions = [{ label: 'Open', prefix: ' · ', onClick: () => { location.href = sessionUrl(ev.device, store.state?.self?.id, ev.sessionId); done(); } }];
        if (P.Toast) return h(P.Toast, { key: id, text, tone: 'success', holdMs: 6000, actions, onDone: done });
        return h('div', { key: id, onClick: actions[0].onClick, style: { position: 'fixed', top: 16, left: '50%', transform: 'translateX(-50%)', zIndex: 9999, background: '#1f6feb', color: '#fff', padding: '8px 14px', borderRadius: 8, cursor: 'pointer', fontSize: 14 } }, text);
      }));
    }

    function mountToasts() {
      const el = document.createElement('div');
      el.id = 'dshr-toasts';
      document.body.appendChild(el);
      const root = ReactDOM.createRoot ? ReactDOM.createRoot(el) : null;
      if (root) root.render(h(ToastHost));
      else ReactDOM.render(h(ToastHost), el);
      return () => { try { root ? root.unmount() : ReactDOM.unmountComponentAtNode(el); } catch { /* ignore */ } el.remove(); };
    }

    // Banner when this whole UI is a remote device seen through /r/<device>/.
    function mountRemoteBanner() {
      if (!mount.device) return () => {};
      const el = document.createElement('a');
      el.href = mount.root;
      el.textContent = `● Remote: ${mount.device}  ·  back to local`;
      el.title = 'You are using the DSH of another device through dsh-remote. Sessions run there.';
      Object.assign(el.style, { position: 'fixed', bottom: '10px', right: '12px', zIndex: 9998, background: 'rgba(31,111,235,.92)', color: '#fff', padding: '4px 10px', borderRadius: '12px', fontSize: '12px', textDecoration: 'none', fontFamily: 'system-ui, sans-serif' });
      document.body.appendChild(el);
      return () => el.remove();
    }

    // ------------------------------------------------------------------ plugin
    return {
      inject: ['slots'],
      apply(ctx) {
        // Toasts / banner only belong to the outermost (local) UI, not proxied copies.
        startStream();
        const disposers = [];
        if (!mount.device) disposers.push(mountToasts());
        disposers.push(mountRemoteBanner());

        disposers.push(ctx.slots.inject('sidebar.panellist', () => ctx.slots.register({
          name: 'sidebar.panellist', id: PANEL_ID, order: 50, label: 'Devices',
        }, DeviceIcon)));
        disposers.push(ctx.slots.inject('main', () => ctx.slots.register({ name: 'main', key: PANEL_ID }, DevicesPage)));
        disposers.push(ctx.slots.inject('settings.section', () => ctx.slots.register({
          name: 'settings.section', id: 'dsh-remote', order: 160, label: 'Remote devices',
        }, SettingsPanel)));

        ctx.effect(() => () => {
          for (const d of disposers.splice(0)) { try { d && d(); } catch { /* ignore */ } }
          try { es && es.close(); } catch { /* ignore */ }
          es = null;
        }, 'dsh-remote: ui');
      },
    };
  },
});