lyuksovannyy
bf99a952fb
- sidebar: workspaces (+ sessions) of every other device appear inside the stock Workspaces list with a server icon and the device name; click folds sessions, hover + creates a session there, a session opens as the remote conversation view (/r/<device>/#/session/<id>); the viewed device's own rows stay native - Devices tab: every device with its state (online/offline, last seen, platform, workspace/session/running counts), offline and revoked devices included - deploy/e2e-dom.mjs, e2e-eval.mjs: DOM dump / evaluate-in-page helpers
724 lines
49 KiB
JavaScript
724 lines
49 KiB
JavaScript
/**
|
|
* @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));
|
|
}
|
|
|
|
// ---- icons (the primitives have no server glyph, so draw it)
|
|
function ServerIcon({ size = 16 }) {
|
|
return h('svg', { viewBox: '0 0 16 16', width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.2, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, 'data-dshr-icon': 'server' },
|
|
h('rect', { x: 2, y: 2.5, width: 12, height: 4.2, rx: 1.1 }),
|
|
h('rect', { x: 2, y: 9.3, width: 12, height: 4.2, rx: 1.1 }),
|
|
h('path', { d: 'M4.6 4.6h.01M4.6 11.4h.01', strokeWidth: 1.8 }));
|
|
}
|
|
function FolderIcon({ size = 16 }) {
|
|
return h('svg', { viewBox: '0 0 16 16', width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.2, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
|
|
h('path', { d: 'M2 4.5A1.5 1.5 0 0 1 3.5 3h2.6l1.4 1.5h5A1.5 1.5 0 0 1 14 6v5.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 11.5z' }));
|
|
}
|
|
|
|
/** Workspaces of one device with their sessions (workspace registry + sessions by cwd). */
|
|
function groupDevice(dev, q = '') {
|
|
const match = (s) => !q || `${s.title || ''} ${s.cwd || ''}`.toLowerCase().includes(q);
|
|
const groups = [];
|
|
const byPath = new Map();
|
|
for (const w of dev.workspaces || []) {
|
|
const g = { key: `${dev.device}:${w.id}`, id: w.id, title: w.title || base(w.path) || w.path, path: w.path, sessions: [] };
|
|
groups.push(g); byPath.set(w.path, g);
|
|
}
|
|
for (const s of dev.items || []) {
|
|
if (!match(s)) continue;
|
|
const p = s.cwd || '';
|
|
let g = byPath.get(p);
|
|
if (!g) {
|
|
g = { key: `${dev.device}:cwd:${p}`, id: undefined, title: base(p) || 'No workspace', path: p, sessions: [] };
|
|
groups.push(g); byPath.set(p, g);
|
|
}
|
|
g.sessions.push(s);
|
|
}
|
|
return q ? groups.filter((g) => g.sessions.length) : groups;
|
|
}
|
|
|
|
// ------------------------------------------------------------------ Devices page
|
|
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 q = filter.trim().toLowerCase();
|
|
const bySessions = Object.fromEntries((st.sessions || []).map((d) => [d.device, d]));
|
|
const devices = (st.state?.devices || []).filter((d) => !d.revoked || d.self);
|
|
const online = devices.filter((d) => d.online).length;
|
|
return h('div', { style: S.page, 'data-dsh-plugin': 'dsh-remote' },
|
|
h('h1', { style: S.h1 }, 'Devices'),
|
|
h('p', { style: S.sub },
|
|
`${online} of ${devices.length} online`,
|
|
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((m) => {
|
|
const dev = bySessions[m.id] || { device: m.id, name: m.name, items: [], workspaces: [], self: m.self };
|
|
const groups = groupDevice(dev, q);
|
|
const running = (dev.items || []).filter((s) => s.running).length;
|
|
const state = m.online
|
|
? (dev.error ? 'unreachable' : `online${m.connectedAt ? ' · connected ' + ago(m.connectedAt) : ''}`)
|
|
: `offline${m.lastSeenAt ? ' · last seen ' + ago(m.lastSeenAt) : ''}`;
|
|
return h('div', { key: m.id, style: { ...S.card, opacity: m.online ? 1 : .7 } },
|
|
h('div', { style: S.devHead },
|
|
h('span', { style: S.dot(m.online && !dev.error) }),
|
|
h('strong', null, m.name || m.id),
|
|
m.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'),
|
|
m.revoked && h('span', { style: S.badge('warn') }, 'revoked'),
|
|
h('span', { style: { flex: 1 } }),
|
|
m.online && !m.self && h('a', { style: { ...S.btn, textDecoration: 'none' }, href: `${mount.root}r/${m.id}/` }, 'Open DSH ↗'),
|
|
m.online && !dev.error && h(NewSession, { dev, selfId: self?.id })),
|
|
h('div', { style: { fontSize: 12, opacity: .65, margin: '0 0 6px' } },
|
|
state,
|
|
m.platform ? ` · ${m.platform}` : '',
|
|
m.online && !dev.error ? ` · ${(dev.workspaces || []).length} workspaces · ${(dev.items || []).length} sessions${running ? ` · ${running} running` : ''}` : ''),
|
|
dev.error && h('div', { style: S.err }, dev.error),
|
|
!dev.error && m.online && !groups.length && h('div', { style: { opacity: .6, fontSize: 13 } }, q ? 'No matching sessions.' : 'No workspaces yet.'),
|
|
groups.map((g) => h('div', { key: g.key },
|
|
h('div', { style: { ...S.ws, display: 'flex', alignItems: 'center', gap: 6 }, title: g.path },
|
|
h('span', { style: { display: 'inline-flex', opacity: .8 } }, m.self ? h(FolderIcon, { size: 14 }) : h(ServerIcon, { size: 14 })),
|
|
g.title),
|
|
g.sessions.length
|
|
? g.sessions.map((s) => h(SessionRow, { key: s.sessionId, dev, s, selfId: self?.id }))
|
|
: h('div', { style: { fontSize: 12, opacity: .5, padding: '2px 8px 4px 28px' } }, 'no sessions'))));
|
|
}));
|
|
}
|
|
|
|
// ------------------------------------------------------------------ remote workspaces in the sidebar
|
|
// The stock Workspaces list belongs to ui-workspace and has no slot for extra groups, so a
|
|
// small React root is mounted as the last child of its tree and styled with the same
|
|
// design tokens. Rows use a server glyph where the stock rows use a folder; sessions open
|
|
// as the usual conversation view of that device (/r/<device>/#/session/<id>).
|
|
const SB_CSS = `
|
|
.dshr-sb{margin-top:2px;display:flex;flex-direction:column;gap:2px}
|
|
.dshr-sb-row{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:34px;padding:0 8px;border-radius:var(--dsw-radius-md,8px);cursor:pointer;user-select:none;color:var(--dsw-alias-label-primary,inherit);font-size:14px;text-decoration:none}
|
|
.dshr-sb-row:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
|
|
.dshr-sb-slot{width:16px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--dsw-alias-label-tertiary,#888)}
|
|
.dshr-sb-title{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px}
|
|
.dshr-sb-dev{flex:0 0 auto;font-size:10px;line-height:16px;color:var(--dsw-alias-label-tertiary,#888);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.dshr-sb-sess{height:32px;padding-inline-start:30px;gap:0}
|
|
.dshr-sb-sess .dshr-sb-title{margin:0 6px 0 4px}
|
|
.dshr-sb-time{flex:0 0 auto;font-size:10px;line-height:16px;color:var(--dsw-alias-label-tertiary,#888)}
|
|
.dshr-sb-plus{display:none;flex:0 0 auto;width:20px;height:20px;border:0;border-radius:6px;background:none;color:inherit;cursor:pointer;line-height:1;font-size:15px}
|
|
.dshr-sb-plus:hover{background:rgba(127,127,127,.2)}
|
|
.dshr-sb-row:hover .dshr-sb-plus{display:inline-flex;align-items:center;justify-content:center}
|
|
.dshr-sb-more{font-size:12px;color:var(--dsw-alias-label-tertiary,#888);padding:2px 8px 2px 30px;cursor:pointer;border:0;background:none;text-align:left}
|
|
.dshr-sb-run{width:8px;height:8px;border-radius:8px;background:#d29922;margin-right:2px;flex:0 0 auto;animation:dshr-pulse 1s infinite}
|
|
`;
|
|
const SB_SESSIONS = 6;
|
|
|
|
function SidebarRemote() {
|
|
const st = useStore();
|
|
const [open, setOpen] = useState(() => { try { return JSON.parse(localStorage.getItem('dshr-ws-open') || '{}'); } catch { return {}; } });
|
|
const [more, setMore] = useState({});
|
|
const selfId = st.state?.self?.id;
|
|
// The device whose UI this page is showing already has its own native rows.
|
|
const viewed = mount.device || selfId;
|
|
const devs = (st.sessions || []).filter((d) => d.device !== viewed && !d.error);
|
|
if (!st.state || !devs.length) return null;
|
|
const toggle = (key) => {
|
|
const next = { ...open, [key]: !open[key] };
|
|
setOpen(next);
|
|
try { localStorage.setItem('dshr-ws-open', JSON.stringify(next)); } catch { /* ignore */ }
|
|
};
|
|
const create = async (e, dev, g) => {
|
|
e.stopPropagation();
|
|
try {
|
|
const r = await post('new-session', { device: dev.device, workspaceId: g.id, cwd: g.id ? undefined : g.path || undefined });
|
|
location.href = sessionUrl(dev.device, selfId, r.sessionId);
|
|
} catch (err) { console.warn('[dsh-remote] new session failed:', err.message); }
|
|
};
|
|
return h('div', { className: 'dshr-sb', 'data-dshr-remote-workspaces': '' },
|
|
devs.flatMap((dev) => groupDevice(dev).map((g) => {
|
|
const isOpen = !!open[g.key];
|
|
const shown = more[g.key] ? g.sessions : g.sessions.slice(0, SB_SESSIONS);
|
|
return h(React.Fragment, { key: g.key },
|
|
h('div', { className: 'dshr-sb-row', role: 'treeitem', 'aria-expanded': isOpen, title: `${dev.name}: ${g.path}`, onClick: () => toggle(g.key) },
|
|
h('span', { className: 'dshr-sb-slot' }, h(ServerIcon)),
|
|
h('span', { className: 'dshr-sb-title' }, g.title),
|
|
h('button', { className: 'dshr-sb-plus', title: `New session on ${dev.name}`, onClick: (e) => create(e, dev, g) }, '+'),
|
|
h('span', { className: 'dshr-sb-dev' }, dev.name || dev.device)),
|
|
isOpen && shown.map((s) => h('a', { key: s.sessionId, className: 'dshr-sb-row dshr-sb-sess', role: 'treeitem', href: sessionUrl(dev.device, selfId, s.sessionId), title: `${s.title || s.sessionId}\n${dev.name}` },
|
|
s.running ? h('span', { className: 'dshr-sb-run', title: 'running' }) : null,
|
|
h('span', { className: 'dshr-sb-title' }, s.title || 'untitled'),
|
|
h('span', { className: 'dshr-sb-time' }, ago(s.updatedAt)))),
|
|
isOpen && !more[g.key] && g.sessions.length > SB_SESSIONS && h('button', { className: 'dshr-sb-more', onClick: () => setMore({ ...more, [g.key]: true }) }, `Show ${g.sessions.length - SB_SESSIONS} more`),
|
|
isOpen && !g.sessions.length && h('div', { className: 'dshr-sb-more', style: { cursor: 'default' } }, 'no sessions'));
|
|
})));
|
|
}
|
|
|
|
function mountSidebarRemote() {
|
|
if (!document.getElementById('dshr-sb-style')) {
|
|
const css = document.createElement('style');
|
|
css.id = 'dshr-sb-style';
|
|
css.textContent = SB_CSS;
|
|
document.head.appendChild(css);
|
|
}
|
|
const host = document.createElement('div');
|
|
host.className = 'dshr-sb-host';
|
|
host.setAttribute('role', 'none');
|
|
const root = ReactDOM.createRoot ? ReactDOM.createRoot(host) : null;
|
|
if (root) root.render(h(SidebarRemote)); else ReactDOM.render(h(SidebarRemote), host);
|
|
let raf = 0;
|
|
const place = () => {
|
|
raf = 0;
|
|
const tree = document.querySelector('[data-slot="sidebar.workspaces"] [role="tree"]');
|
|
if (!tree) return;
|
|
if (host.parentElement !== tree || tree.lastElementChild !== host) tree.appendChild(host);
|
|
};
|
|
const schedule = () => { if (!raf) raf = requestAnimationFrame(place); };
|
|
const obs = new MutationObserver(schedule);
|
|
obs.observe(document.body, { childList: true, subtree: true });
|
|
schedule();
|
|
return () => {
|
|
obs.disconnect();
|
|
try { root ? root.unmount() : ReactDOM.unmountComponentAtNode(host); } catch { /* ignore */ }
|
|
host.remove();
|
|
};
|
|
}
|
|
|
|
// ------------------------------------------------------------------ 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));
|
|
}
|
|
|
|
/**
|
|
* Auth proxy (edge) credentials for reaching the master through Authentik /
|
|
* oauth2-proxy / Cloudflare Access / Basic auth. Secrets are sent once and stored by
|
|
* the host as DSH credential refs; the form never shows them again.
|
|
*/
|
|
function EdgeAuthFields({ value, onChange }) {
|
|
const v = value || { mode: 'none' };
|
|
const set = (patch) => onChange({ ...v, ...patch });
|
|
const row = (label, el, hint) => h(Field, { label, hint }, el);
|
|
const input = (key, props = {}) => h('input', { style: S.input, value: v[key] || '', onChange: (e) => set({ [key]: e.target.value }), ...props });
|
|
return h('div', { style: { margin: '6px 0 10px', padding: '8px 10px', border: '1px dashed rgba(127,127,127,.35)', borderRadius: 8 } },
|
|
row('Auth proxy in front of the master',
|
|
h('select', { style: S.input, value: v.mode, onChange: (e) => onChange({ mode: e.target.value }) },
|
|
h('option', { value: 'none' }, 'None (LAN / proxy exempts /dsh-remote/*)'),
|
|
h('option', { value: 'basic' }, 'Basic: user + (app) password (Authentik, nginx, Traefik)'),
|
|
h('option', { value: 'oauth2' }, 'OAuth2 client credentials (Authentik machine-to-machine)'),
|
|
h('option', { value: 'bearer' }, 'Bearer token'),
|
|
h('option', { value: 'cookie' }, 'Session cookie (paste, e.g. authentik_proxy_… from a signed-in browser)'),
|
|
h('option', { value: 'headers' }, 'Custom headers (Cloudflare Access service token, …)')),
|
|
'The slave logs in to the proxy itself, keeps the session cookie and replays it on the link.'),
|
|
v.mode === 'basic' && h(React.Fragment, null,
|
|
row('Username', input('username', { placeholder: 'e.g. dsh-remote-mac (Authentik service account)' })),
|
|
row('Password / app password', input('password', { type: 'password', placeholder: '(stored as credential DSH_REMOTE_EDGE_PASSWORD)' }),
|
|
'Authentik: Directory → Tokens and App passwords → create an App password for the user, and enable “Intercept header authentication” on the proxy provider.')),
|
|
v.mode === 'oauth2' && h(React.Fragment, null,
|
|
row('Token URL', input('tokenUrl', { placeholder: 'https://auth.rizzy.dev/application/o/token/' })),
|
|
row('Client ID', input('clientId', { placeholder: 'proxy provider client_id' })),
|
|
row('Username (Authentik service account)', input('username')),
|
|
row('App password', input('password', { type: 'password' })),
|
|
row('Client secret (optional)', input('clientSecret', { type: 'password' }))),
|
|
v.mode === 'bearer' && row('Token', input('token', { type: 'password', placeholder: '(stored as credential DSH_REMOTE_EDGE_TOKEN)' })),
|
|
v.mode === 'cookie' && row('Proxy session cookie',
|
|
h('textarea', { style: { ...S.input, minHeight: 60, fontFamily: 'ui-monospace,monospace' }, value: v.cookie || '', placeholder: 'authentik_proxy_a420a2e1=ABC… (or the whole "Cookie:" header)', onChange: (e) => set({ cookie: e.target.value }) }),
|
|
'Sign in to the master in a browser, then copy the proxy cookie: DevTools → Application → Cookies → the master site (Authentik: authentik_proxy_<hash>). It is stored as credential DSH_REMOTE_EDGE_COOKIE; the proxy\'s refreshed cookies are saved back automatically. The master DSH\'s own dsh-auth-* cookie is ignored.'),
|
|
v.mode === 'headers' && row('Headers (one per line, "Name: value")',
|
|
h('textarea', { style: { ...S.input, minHeight: 60, fontFamily: 'ui-monospace,monospace' }, value: v.headersText || '', placeholder: 'CF-Access-Client-Id: xxx.access\nCF-Access-Client-Secret: yyy', onChange: (e) => set({ headersText: e.target.value }) })));
|
|
}
|
|
function edgeSpec(v) {
|
|
if (!v || v.mode === 'none') return { mode: 'none' };
|
|
if (v.mode === 'headers') {
|
|
const headers = {};
|
|
for (const line of String(v.headersText || '').split('\n')) {
|
|
const at = line.indexOf(':');
|
|
if (at > 0) headers[line.slice(0, at).trim()] = line.slice(at + 1).trim();
|
|
}
|
|
return { mode: 'headers', headers };
|
|
}
|
|
const { headersText, ...rest } = v;
|
|
return rest;
|
|
}
|
|
|
|
function EdgeAuthCard({ s }) {
|
|
const [edit, setEdit] = useState(null);
|
|
const [info, setInfo] = useState(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const run = async (body) => {
|
|
setBusy(true);
|
|
try { setInfo(body ? await post('edge-auth', body) : await api('edge-auth')); if (body) setEdit(null); }
|
|
catch (e) { setInfo({ error: e.message }); }
|
|
setBusy(false); store.refresh();
|
|
};
|
|
if (s.role !== 'slave' || !s.master?.url) return null;
|
|
const cur = info?.edgeAuth || s.master.edgeAuth || { mode: 'none' };
|
|
return h('div', { style: S.card },
|
|
h('strong', null, 'Auth proxy (edge) login'),
|
|
h('div', { style: { fontSize: 13, margin: '4px 0 8px' } },
|
|
'Mode: ', h('code', null, cur.mode || 'none'),
|
|
cur.username ? h('span', null, ' · user ', h('code', null, cur.username)) : null,
|
|
cur.tokenValidUntil ? ` · token valid until ${new Date(cur.tokenValidUntil).toLocaleTimeString()}` : '',
|
|
cur.cookies?.length ? ` · proxy session cookie: ${cur.cookies.join(', ')}` : ''),
|
|
info?.probe && h('div', { style: { fontSize: 13, margin: '0 0 8px', color: info.probe.reachedDsh ? '#3fb950' : '#f85149' } },
|
|
info.probe.reachedDsh ? '✓ The proxy lets this device through to the master DSH.' : `✗ ${info.probe.error}${info.probe.hint ? ` (${info.probe.hint})` : ''}`),
|
|
info?.error && h('div', { style: S.err }, info.error),
|
|
edit ? h('div', null,
|
|
h(EdgeAuthFields, { value: edit, onChange: setEdit }),
|
|
h('button', { style: S.btnPrimary, disabled: busy, onClick: () => run({ edgeAuth: edgeSpec(edit) }) }, busy ? 'Saving…' : 'Save & reconnect'), ' ',
|
|
h('button', { style: S.btn, onClick: () => setEdit(null) }, 'Cancel'))
|
|
: h('span', null,
|
|
h('button', { style: S.btn, disabled: busy, onClick: () => run(null) }, busy ? 'Testing…' : 'Test'), ' ',
|
|
h('button', { style: S.btn, onClick: () => setEdit({ mode: cur.mode || 'none', username: cur.username, tokenUrl: cur.tokenUrl, clientId: cur.clientId }) }, 'Change')));
|
|
}
|
|
function SettingsPanel() {
|
|
const st = useStore();
|
|
const [code, setCode] = useState(null);
|
|
const [masterUrl, setMasterUrl] = useState('');
|
|
const [pairCode, setPairCode] = useState('');
|
|
const [edge, setEdge] = useState({ mode: 'none' });
|
|
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 || window.__dshrMasterOrigin || '', 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(EdgeAuthFields, { value: edge, onChange: setEdge }),
|
|
h('button', { style: S.btnPrimary, disabled: busy || !(masterUrl || window.__dshrMasterOrigin) || !pairCode, onClick: () => act(async () => {
|
|
const r = await post('pair', { masterUrl: masterUrl || window.__dshrMasterOrigin, code: pairCode, edgeAuth: edgeSpec(edge) });
|
|
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' }, h(NodeCard, { s }), header, pairing, h(EdgeAuthCard, { s }), 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(); };
|
|
}
|
|
|
|
// ------------------------------------------------------------------ auth-proxy sign-in popup
|
|
// When the slave's link meets a non-DSH answer from the master (a login wall) and "auth
|
|
// middleware" is on, open the master's /dsh-remote/signin through the proxy in a popup. The
|
|
// user signs in to the proxy there; the page hands the proxy session cookie back with
|
|
// postMessage (after an explicit click) and we store it and retry the link.
|
|
const signIn = { win: null, lastAt: 0 };
|
|
async function startSignIn(masterUrl, { force = false } = {}) {
|
|
if (!masterUrl) return { ok: false, error: 'no master origin' };
|
|
if (signIn.win && !signIn.win.closed && !force) { signIn.win.focus(); return { ok: true, pending: true }; }
|
|
const url = `${masterUrl.replace(/\/+$/, '')}/dsh-remote/signin?origin=${encodeURIComponent(location.origin)}`;
|
|
const win = window.open(url, 'dshr-signin', 'popup=yes,width=520,height=720');
|
|
if (!win) return { ok: false, blocked: true, url };
|
|
signIn.win = win; signIn.lastAt = Date.now();
|
|
return { ok: true, url };
|
|
}
|
|
window.addEventListener('message', async (ev) => {
|
|
const d = ev.data;
|
|
if (!d || d.type !== 'dsh-remote-signin' || typeof d.cookie !== 'string') return;
|
|
// Only accept from the master we are paired with.
|
|
const master = store.state?.master?.url;
|
|
let ok = false;
|
|
try { ok = !!master && new URL(master).origin === ev.origin; } catch { ok = false; }
|
|
if (!ok) return;
|
|
try {
|
|
await post('edge-auth', { edgeAuth: { mode: 'cookie', cookie: d.cookie } });
|
|
await post('retry-link', {});
|
|
} catch (e) { console.warn('[dsh-remote] sign-in hand-over failed:', e.message); }
|
|
store.refresh();
|
|
});
|
|
// Auto-open once per distinct auth-required event, when the setting is on.
|
|
let lastPrompted = 0;
|
|
store.events.add((ev) => {
|
|
if (ev.type !== 'auth-required' || mount.device) return;
|
|
if (!ev.at || ev.at === lastPrompted || Date.now() - signIn.lastAt < 30000) return;
|
|
lastPrompted = ev.at;
|
|
showSignInBanner(ev);
|
|
});
|
|
|
|
let bannerEl = null;
|
|
function showSignInBanner(ev) {
|
|
if (bannerEl) return;
|
|
bannerEl = document.createElement('div');
|
|
Object.assign(bannerEl.style, { position: 'fixed', top: '14px', left: '50%', transform: 'translateX(-50%)', zIndex: 10000, background: '#1f2937', color: '#fff', padding: '10px 14px', borderRadius: '10px', fontSize: '13px', fontFamily: 'system-ui, sans-serif', boxShadow: '0 6px 24px rgba(0,0,0,.35)', display: 'flex', gap: '10px', alignItems: 'center', maxWidth: '90vw' });
|
|
const span = document.createElement('span');
|
|
span.textContent = 'The auth proxy in front of the master needs you to sign in.';
|
|
const go = document.createElement('button');
|
|
go.textContent = 'Sign in';
|
|
Object.assign(go.style, { font: 'inherit', padding: '4px 12px', borderRadius: '6px', border: 0, background: '#2f81f7', color: '#fff', cursor: 'pointer' });
|
|
const no = document.createElement('button');
|
|
no.textContent = 'Later';
|
|
Object.assign(no.style, { font: 'inherit', padding: '4px 10px', borderRadius: '6px', border: '1px solid #555', background: 'none', color: '#ddd', cursor: 'pointer' });
|
|
const close = () => { bannerEl?.remove(); bannerEl = null; };
|
|
// window.open from a click (not from the event) so popup blockers allow it.
|
|
go.onclick = async () => { close(); const r = await startSignIn(ev.masterUrl, { force: true }); if (r.blocked) alert(`Allow popups for this site, or open ${r.url} manually.`); };
|
|
no.onclick = close;
|
|
bannerEl.append(span, go, no);
|
|
document.body.appendChild(bannerEl);
|
|
}
|
|
|
|
/** Settings card: node type, origin, auth middleware. */
|
|
function NodeCard({ s }) {
|
|
const node = s.node || {};
|
|
const [type, setType] = useState(node.nodeType || s.role);
|
|
const [middleware, setMiddleware] = useState(!!node.authMiddleware);
|
|
const [origin, setOrigin] = useState('');
|
|
const [msg, setMsg] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
const own = location.origin + mount.root.replace(/\/$/, '');
|
|
const save = async (patch) => {
|
|
setBusy(true); setMsg('');
|
|
try { const r = await post('node', patch); setMsg(r.restartRequired ? 'Saved. Restart DSH on this machine to switch its node type.' : 'Saved.'); }
|
|
catch (e) { setMsg(e.message); }
|
|
setBusy(false); store.refresh();
|
|
};
|
|
const restart = async () => { try { await post('restart', {}); setMsg('Restarting… reload the page in a few seconds.'); } catch (e) { setMsg(e.message); } };
|
|
const effective = node.effectiveNodeType || s.role;
|
|
const needsRestart = node.restartRequired;
|
|
return h('div', { style: S.card },
|
|
h('strong', null, 'Node'),
|
|
h(Field, { label: 'Type' },
|
|
h('select', { style: S.input, value: type, disabled: busy, onChange: (e) => { setType(e.target.value); save({ nodeType: e.target.value }); } },
|
|
h('option', { value: 'master' }, 'Master: holds plugins, config and sessions; slaves connect to it'),
|
|
h('option', { value: 'slave' }, 'Slave: connects to a master and syncs from it'))),
|
|
needsRestart && h('div', { style: { fontSize: 13, margin: '0 0 10px', color: '#d29922' } },
|
|
`Running as ${effective}; ${node.nodeType} applies after a restart. `,
|
|
h('button', { style: S.btn, onClick: restart }, 'Restart DSH')),
|
|
effective === 'master'
|
|
? h(Field, { label: 'Origin', hint: 'The address slaves use to reach this master (browser-visible origin of this page).' },
|
|
h('input', { style: { ...S.input, opacity: .75 }, value: s.publicUrl || s.lanUrl || own, disabled: true, readOnly: true }))
|
|
: h(Field, { label: 'Master origin', hint: store.state?.master?.url ? 'Paired. To use another master, re-pair below.' : 'Enter the master\'s origin, then pair below with a pairing code.' },
|
|
store.state?.master?.url
|
|
? h('input', { style: { ...S.input, opacity: .75 }, value: store.state.master.url, disabled: true, readOnly: true })
|
|
: h('input', { style: S.input, value: origin, placeholder: 'https://dsh.example.com or http://192.168.0.111:3080', onChange: (e) => { setOrigin(e.target.value); window.__dshrMasterOrigin = e.target.value; } })),
|
|
h('label', { style: { display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, margin: '4px 0 6px' } },
|
|
h('input', { type: 'checkbox', checked: middleware, disabled: busy, onChange: (e) => { setMiddleware(e.target.checked); save({ authMiddleware: e.target.checked }); } }),
|
|
h('span', null,
|
|
h('strong', null, 'Master has an auth middleware'),
|
|
h('div', { style: { opacity: .65, fontSize: 12, marginTop: 2 } }, 'On: when the link meets something that is not DSH (a sign-in page of Authentik, oauth2-proxy, …), a sign-in window opens, then the link retries. Off: work as usual, no prompts.'))),
|
|
node.authRequired && effective === 'slave' && h('div', { style: { fontSize: 13, margin: '6px 0', color: '#f85149' } },
|
|
node.authRequired.reason || 'The master asked for sign-in.', ' ',
|
|
h('button', { style: S.btnPrimary, onClick: async () => { const r = await startSignIn(store.state?.master?.url, { force: true }); if (r.blocked) setMsg(`Popup blocked: open ${r.url}`); } }, 'Sign in')),
|
|
middleware && effective === 'slave' && store.state?.master?.url && !node.authRequired && h('div', null,
|
|
h('button', { style: S.btn, onClick: () => startSignIn(store.state.master.url, { force: true }) }, 'Sign in to the auth proxy…'), ' ',
|
|
h('button', { style: S.btn, onClick: async () => { try { const r = await post('retry-link', {}); setMsg(r.linked ? 'Linked.' : (r.error || 'Not linked yet.')); } catch (e) { setMsg(e.message); } store.refresh(); } }, 'Retry link')),
|
|
msg && h('div', { style: { fontSize: 12, opacity: .8, marginTop: 6 } }, msg));
|
|
}
|
|
|
|
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());
|
|
// Other machines' workspaces inside the stock Workspaces list (server icon).
|
|
disposers.push(mountSidebarRemote());
|
|
|
|
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');
|
|
},
|
|
};
|
|
},
|
|
});
|