dsh-cursor-dev 0.0.0-stage → 0.11.1

package/lib/client.js

@@ -0,0 +1,626 @@
+/**
+ * The Cursor panel, in the seat a user actually looks in.
+ *
+ * This is the plugin's CLIENT half. The host half (`lib/index.js`) serves the
+ * dashboard at `/plugins/dsh-cursor-dev/`; this half puts that same page in a
+ * **Settings page**, registered in the native `settings.section` slot — the
+ * place a user looks for "what is this thing doing and what is it set to".
+ *
+ * It is written by hand rather than built: a DSH client plugin is loaded through
+ * `window.__ModuleLoader__.load({ id, factory })`, whose `factory` receives a
+ * CommonJS `require` for the shared runtime modules. There is no JSX and no
+ * bundler step, which keeps the plugin installable straight from this repository.
+ *
+ * `ctx.inject` waits for a service, so load order against the settings host does
+ * not matter and neither service is a hard dependency: without them the plugin
+ * still loads, it just has no page.
+ *
+ * The panel probes the host route before mounting the frame. A frame that cannot
+ * load shows nothing useful, so the probe's own answer — reachable, or which HTTP
+ * status came back — is rendered instead of an empty pane.
+ *
+ * The panel speaks Chinese by default and English on request, following the app
+ * locale when it can read it: `ctx.locale.getLocale().active` is passed to the
+ * dashboard as `?lang=`, and the dashboard keeps its own switch from then on.
+ */
+
+window.__ModuleLoader__.load({
+    id: 'dsh-cursor-dev',
+    factory: (require) => {
+        var module = { exports: {} };
+        var exports = module.exports;
+
+        const react = require('react');
+        const h = react.createElement;
+
+        const DASHBOARD_URL = '/plugins/dsh-cursor-dev/';
+        const STATUS_URL = '/plugins/dsh-cursor-dev/status';
+        const SETTINGS_ID = 'dsh-cursor-dev';
+
+        const CARD = {
+            padding: '16px 18px',
+            font: '13px/1.6 -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif',
+            color: 'inherit',
+        };
+        const CODE = {
+            display: 'block',
+            marginTop: '10px',
+            padding: '10px 12px',
+            maxHeight: '220px',
+            overflow: 'auto',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-all',
+            font: '12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace',
+            background: 'rgba(127,127,127,.12)',
+            borderRadius: '8px',
+        };
+        const BUTTON = {
+            marginTop: '12px',
+            padding: '6px 14px',
+            font: 'inherit',
+            color: 'inherit',
+            background: 'rgba(127,127,127,.16)',
+            border: '1px solid rgba(127,127,127,.28)',
+            borderRadius: '8px',
+            cursor: 'pointer',
+        };
+        const TITLE = {
+            font: '600 14px/1.4 -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif',
+            color: 'inherit',
+        };
+        const SUBTITLE = {
+            font: '12px/1.6 -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif',
+            opacity: 0.75,
+        };
+        const CHIP = {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '6px',
+            height: '24px',
+            padding: '0 8px',
+            font: '12px/1 -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif',
+            color: 'inherit',
+            background: 'rgba(127,127,127,.10)',
+            border: '1px solid rgba(127,127,127,.22)',
+            borderRadius: '12px',
+            cursor: 'pointer',
+            whiteSpace: 'nowrap',
+        };
+        const DOT = (live) => ({
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            background: live ? 'var(--dsh-accent, #6d8cff)' : 'rgba(127,127,127,.55)',
+            boxShadow: live ? '0 0 0 3px rgba(109,140,255,.18)' : 'none',
+        });
+        const OVERLAY = {
+            position: 'fixed',
+            top: '52px',
+            right: '16px',
+            width: 'min(560px, calc(100vw - 32px))',
+            height: 'min(72vh, 640px)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            padding: '10px 12px 12px',
+            background: 'var(--dsh-surface, #1e1e24)',
+            color: 'inherit',
+            border: '1px solid rgba(127,127,127,.28)',
+            borderRadius: '12px',
+            boxShadow: '0 18px 48px rgba(0,0,0,.4)',
+            zIndex: 90,
+        };
+        const OVERLAY_HEAD = {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            font: '600 13px/1.4 -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif',
+        };
+        const OVERLAY_LINK = {
+            marginLeft: 'auto',
+            font: '12px/1.4 -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif',
+            color: 'inherit',
+            opacity: 0.7,
+            textDecoration: 'none',
+        };
+        const OVERLAY_CLOSE = {
+            padding: '2px 8px',
+            font: 'inherit',
+            color: 'inherit',
+            background: 'transparent',
+            border: '1px solid rgba(127,127,127,.28)',
+            borderRadius: '8px',
+            cursor: 'pointer',
+        };
+
+        /** The locale service, once (and if) it is available. */
+        let localeService;
+
+        /** `zh` unless the app is running in English. */
+        function langOf() {
+            try {
+                const active = localeService?.getLocale?.()?.active;
+                if (active === 'en' || active === 'zh') return active;
+            } catch {
+                // An unavailable or throwing locale service must not break a render.
+            }
+            const tag = typeof document === 'undefined' ? '' : String(document.documentElement?.lang ?? '');
+            return tag.toLowerCase().startsWith('en') ? 'en' : 'zh';
+        }
+
+        /** The host route is unreachable: say which answer came back instead of a blank pane. */
+        function PanelOffline(props) {
+            const { status, text, onRetry, lang } = props;
+            const zh = lang !== 'en';
+            const headline = status === 0
+                ? (zh ? '连不上宿主路由' : 'the host route could not be reached')
+                : (zh ? `宿主路由返回 HTTP ${status}` : `the host route answered HTTP ${status}`);
+            return h(
+                'div',
+                { style: CARD },
+                h('div', { style: { fontWeight: 600 } }, zh ? 'Cursor 面板暂时不可用' : 'The Cursor panel is unavailable'),
+                h('div', { style: { marginTop: 6, opacity: 0.75 } }, headline),
+                h(
+                    'div',
+                    { style: { marginTop: 10, opacity: 0.75 } },
+                    zh
+                        ? `宿主插件 dsh-cursor-dev 已启用，但它没有应答 ${STATUS_URL}。`
+                        : `The host plugin dsh-cursor-dev is enabled but did not answer ${STATUS_URL}.`,
+                ),
+                h('code', { style: CODE }, text || '(empty response body)'),
+                h('button', { type: 'button', style: BUTTON, onClick: onRetry }, zh ? '重试' : 'Retry'),
+            );
+        }
+
+        /**
+         * The CLI is missing or signed out, so the plugin cannot do anything yet.
+         *
+         * These are the two walls every new user hits, and from inside the panel
+         * they look identical to a broken plugin. The card states which one it is
+         * and prints the exact command that clears it, instead of leaving a pane
+         * of dashes to interpret.
+         */
+        function SetupCard(props) {
+            const { kind, setup, detail, lang, onRetry } = props;
+            const zh = lang !== 'en';
+            const missing = kind === 'missing';
+            const windows = setup?.install?.win32 || "irm 'https://cursor.com/install?win32=true' | iex";
+            const unix = setup?.install?.unix || 'curl https://cursor.com/install -fsS | bash';
+            const login = setup?.login || 'agent login';
+            const verify = setup?.verify || 'agent status --format json';
+            const installArg = zh ? '安装命令（Windows PowerShell）：' : 'Install (Windows PowerShell):';
+            const unixArg = zh ? 'macOS / Linux 用：' : 'macOS / Linux:';
+            const loginArg = zh ? '然后在终端里登录（会打开浏览器授权）：' : 'Then sign in from a terminal (it opens the browser):';
+            const verifyArg = zh ? `确认状态：${verify}` : `Confirm with ${verify}.`;
+            return h(
+                'div',
+                { style: CARD },
+                h(
+                    'div',
+                    { style: { fontWeight: 600 } },
+                    missing
+                        ? (zh ? '还没找到 Cursor CLI' : 'The Cursor CLI is not installed yet')
+                        : (zh ? 'Cursor CLI 还没登录' : 'The Cursor CLI is not signed in yet'),
+                ),
+                h(
+                    'div',
+                    { style: { marginTop: 6, opacity: 0.75 } },
+                    missing
+                        ? (zh
+                            ? '这个插件靠本机的 Cursor CLI 干活，所以先把 CLI 装上；装完回到这里点重试。'
+                            : 'This plugin does its work through the local Cursor CLI, so install it first, then retry here.')
+                        : (zh
+                            ? '插件已经找到 CLI，但它还没登录 Cursor 账号，所以拿不到额度、也开不了会话。'
+                            : 'The CLI was found but is not signed in, so there is no quota to report and no session to open.'),
+                ),
+                missing
+                    ? h('code', { style: CODE }, `${installArg}\n${windows}\n\n${unixArg}\n${unix}\n\n${loginArg}\n${login}`)
+                    : h('code', { style: CODE }, `${loginArg}\n${login}\n\n${verifyArg}`),
+                detail
+                    ? h('div', { style: { marginTop: 8, opacity: 0.6 } }, detail)
+                    : null,
+                h('button', { type: 'button', style: BUTTON, onClick: onRetry }, zh ? '装好 / 登录了，重试' : 'Retry now'),
+            );
+        }
+
+        /**
+         * The host's dashboard, same-origin, filling the pane.
+         *
+         * The page is a plain server-rendered document with its own styling and
+         * its own polling, so the component stays this small and the panel keeps
+         * working while the conversation agent is busy.
+         */
+        function HostFrame(props) {
+            const { title, lang, style } = props;
+            const [probe, setProbe] = react.useState(null);
+            const [attempt, setAttempt] = react.useState(0);
+
+            react.useEffect(() => {
+                let alive = true;
+                const controller = typeof AbortController === 'function' ? new AbortController() : undefined;
+                // Retrying means "I just installed it / logged in" — ask the host
+                // for a fresh sign-in check instead of its one-minute cache.
+                const url = attempt === 0 ? STATUS_URL : `${STATUS_URL}?auth=refresh`;
+                fetch(url, {
+                    headers: { accept: 'application/json' },
+                    signal: controller?.signal,
+                })
+                    .then(async (response) => {
+                        const text = await response.text();
+                        if (alive) {
+                            setProbe({ ok: response.ok, status: response.status, text: text.slice(0, 4000) });
+                        }
+                    })
+                    .catch((error) => {
+                        if (alive) {
+                            setProbe({ ok: false, status: 0, text: String((error && error.message) || error) });
+                        }
+                    });
+                return () => {
+                    alive = false;
+                    controller?.abort();
+                };
+            }, [attempt]);
+
+            const retry = () => {
+                setProbe(null);
+                setAttempt((n) => n + 1);
+            };
+
+            if (probe === null) {
+                return h('div', { style: CARD }, lang === 'en' ? 'Connecting to the Cursor panel…' : '正在连接 Cursor 面板…');
+            }
+            if (!probe.ok) {
+                return h(PanelOffline, {
+                    status: probe.status,
+                    text: probe.text,
+                    lang,
+                    onRetry: retry,
+                });
+            }
+            let status;
+            try {
+                status = JSON.parse(probe.text);
+            }
+            catch {
+                status = undefined;
+            }
+            if (status !== undefined && status !== null && typeof status === 'object') {
+                if (status.agent !== undefined && status.agent?.found !== true) {
+                    return h(SetupCard, { kind: 'missing', setup: status.setup, detail: status.auth?.error, lang, onRetry: retry });
+                }
+                if (status.auth !== undefined && status.auth?.authenticated !== true) {
+                    return h(SetupCard, { kind: 'signed-out', setup: status.setup, detail: status.auth?.error, lang, onRetry: retry });
+                }
+            }
+            return h('iframe', {
+                src: `${DASHBOARD_URL}?lang=${lang === 'en' ? 'en' : 'zh'}`,
+                title,
+                style: Object.assign({
+                    width: '100%',
+                    height: '100%',
+                    border: '0',
+                    display: 'block',
+                    background: 'transparent',
+                }, style),
+            });
+        }
+
+        /**
+         * Open/closed state of the header panel, shared by two seats.
+         *
+         * The chip lives in the conversation header (`conversation.session.header.utilities`),
+         * the panel in the frame-wide overlay (`shell.overlay`) — different React
+         * trees, so the state is module-level with a tiny subscription instead of
+         * a context that neither seat can reach.
+         */
+        let panelOpen = false;
+        const panelListeners = new Set();
+
+        /** Open or close the header panel, and tell every seat that is showing it. */
+        function setPanelOpen(next) {
+            panelOpen = next;
+            for (const listener of [...panelListeners]) {
+                try {
+                    listener(next);
+                }
+                catch {
+                    // A broken listener must not swallow the toggle.
+                }
+            }
+        }
+
+        /** Subscribe one component to the shared open state. */
+        function usePanelOpen() {
+            const [open, setOpen] = react.useState(panelOpen);
+            react.useEffect(() => {
+                panelListeners.add(setOpen);
+                setOpen(panelOpen);
+                return () => {
+                    panelListeners.delete(setOpen);
+                };
+            }, []);
+            return open;
+        }
+
+        /**
+         * What the header chip shows: how many Cursor sessions are live, and on
+         * which model.
+         *
+         * Polled from `/status` rather than pushed, because the chip is rendered
+         * inside the conversation header where a stale "0 sessions" would be
+         * worse than one small request every 15 s. The poll stops with the
+         * component, so a session that is not open costs nothing.
+         */
+        function useLiveSessions() {
+            const [state, setState] = react.useState({ ready: false, count: 0, model: '', found: true });
+            react.useEffect(() => {
+                let alive = true;
+                const tick = () => {
+                    fetch(STATUS_URL, { headers: { accept: 'application/json' } })
+                        .then((response) => response.text())
+                        .then((body) => {
+                            if (!alive)
+                                return;
+                            let data;
+                            try {
+                                data = JSON.parse(body);
+                            }
+                            catch {
+                                data = undefined;
+                            }
+                            const rows = data !== null && typeof data === 'object' && Array.isArray(data.live) ? data.live : [];
+                            setState({
+                                ready: true,
+                                count: rows.length,
+                                model: rows.length > 0 && typeof rows[0].model === 'string' ? rows[0].model : '',
+                                found: data?.agent?.found === true,
+                            });
+                        })
+                        .catch(() => {
+                            if (alive)
+                                setState((previous) => ({ ...previous, ready: true }));
+                        });
+                };
+                tick();
+                const timer = setInterval(tick, 15000);
+                return () => {
+                    alive = false;
+                    clearInterval(timer);
+                };
+            }, []);
+            return state;
+        }
+
+        /**
+         * The header chip: the Cursor child agent's live session count, and the
+         * way into its panel.
+         *
+         * This is the seat the conversation itself offers (next to the parent's
+         * own subagent chips), so "how do I watch the child" has an answer that
+         * does not require knowing about Settings or a URL.
+         */
+        function CursorChip() {
+            const zh = langOf() !== 'en';
+            // Subscribe before polling: the shared open state is what the click
+            // below toggles, and the panel listens for the same change.
+            const open = usePanelOpen();
+            const live = useLiveSessions();
+            const suffix = live.count > 0 ? ` · ${live.count}` : '';
+            const title = live.model !== ''
+                ? (zh ? `Cursor 子智能体 · 当前模型 ${live.model}` : `Cursor child agent · ${live.model}`)
+                : (zh ? 'Cursor 子智能体：会话、模型与额度' : 'Cursor child agent: sessions, model and quota');
+            return h(
+                'button',
+                {
+                    type: 'button',
+                    title,
+                    onClick: () => setPanelOpen(!open),
+                    style: CHIP,
+                },
+                h('span', { style: DOT(live.count > 0) }),
+                `Cursor${suffix}`,
+            );
+        }
+
+        /**
+         * The panel the chip opens, in the frame-wide overlay so it is never
+         * clipped by the header's own layout.
+         */
+        function CursorOverlay() {
+            const zh = langOf() !== 'en';
+            const open = usePanelOpen();
+            if (!open)
+                return null;
+            return h(
+                'div',
+                { style: OVERLAY },
+                h(
+                    'div',
+                    { style: OVERLAY_HEAD },
+                    h('span', null, zh ? 'Cursor 子智能体' : 'Cursor child agent'),
+                    h(
+                        'a',
+                        {
+                            href: `${DASHBOARD_URL}?lang=${zh ? 'zh' : 'en'}`,
+                            target: '_blank',
+                            rel: 'noreferrer',
+                            style: OVERLAY_LINK,
+                        },
+                        zh ? '在新标签页打开' : 'open in a tab',
+                    ),
+                    h('button', { type: 'button', onClick: () => setPanelOpen(false), style: OVERLAY_CLOSE }, '✕'),
+                ),
+                h(
+                    'div',
+                    { style: { flex: '1 1 auto', minHeight: '0' } },
+                    h(HostFrame, { title: 'Cursor', lang: zh ? 'zh' : 'en' }),
+                ),
+            );
+        }
+
+        /**
+         * The Settings page.
+         *
+         * Settings is the seat a user looks in when they want the whole picture:
+         * quota, the model picker, and every conversation with its step
+         * timeline. The header chip opens the same dashboard in a floating
+         * panel, for the moment-to-moment question.
+         */
+        function CursorSettings() {
+            const lang = langOf();
+            const zh = lang !== 'en';
+            return h(
+                'div',
+                {
+                    style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '10px',
+                        height: '100%',
+                        minHeight: '0',
+                        padding: '2px',
+                    },
+                },
+                h('div', { style: TITLE }, zh ? 'Cursor 子智能体' : 'Cursor child agent'),
+                h(
+                    'div',
+                    { style: SUBTITLE },
+                    zh
+                        ? '额度、cursor_code 使用的模型、以及子智能体跑过的每一次会话（步骤轨迹可展开）。'
+                        : 'Quota, the model cursor_code uses, and every conversation the child ran (unfold a key for its step timeline).',
+                ),
+                h(
+                    // The host wraps this section in an auto-height box, so a
+                    // percentage height never resolves and the frame silently
+                    // falls back to the browser's 150px default — that is all
+                    // the user ever saw of the dashboard. A viewport-sized
+                    // frame is definite no matter what the slot does, and the
+                    // host's own scroll container absorbs any overflow.
+                    'div',
+                    { style: { flex: '1 1 auto', height: 'min(72vh, 640px)', minHeight: '320px', overflow: 'hidden' } },
+                    h(HostFrame, { title: 'Cursor', lang }),
+                ),
+            );
+        }
+
+        /**
+         * The dashboard's jump into a mirrored child conversation.
+         *
+         * The dashboard is served by the host half and rendered in an iframe, so
+         * it cannot navigate the app itself. It posts the address the subagent
+         * tree itself uses — `{parentSessionId, childSessionId, mode}` — and this
+         * half performs the opening, because `uiWorkspace.openSession` is a
+         * client-side service.
+         *
+         * The message is only trusted when it comes from this origin and carries
+         * the three non-empty strings the address is made of; anything else is
+         * ignored rather than forwarded to the app.
+         */
+        function bridgeChildOpens(ctx) {
+            const uiWorkspace = ctx.get('uiWorkspace');
+            // A host without the workspace service simply has no jump to offer;
+            // the dashboard knows that too and keeps opening the step timeline.
+            if (uiWorkspace === undefined || typeof uiWorkspace.openSession !== 'function')
+                return undefined;
+            const onMessage = (event) => {
+                if (event.origin !== window.location.origin)
+                    return;
+                const data = event.data;
+                if (data === null || typeof data !== 'object' || data.type !== 'dsh-cursor-dev:open-child')
+                    return;
+                const childSessionId = data.childSessionId;
+                const parentSessionId = data.parentSessionId;
+                if (typeof childSessionId !== 'string' || childSessionId === '')
+                    return;
+                // The panel floats above the conversation; leaving it open would
+                // hide the very session it just opened.
+                setPanelOpen(false);
+                try {
+                    uiWorkspace.openSession({
+                        parentSessionId: typeof parentSessionId === 'string' ? parentSessionId : '',
+                        childSessionId,
+                        mode: typeof data.mode === 'string' && data.mode !== '' ? data.mode : 'one-shot',
+                    });
+                }
+                catch (error) {
+                    console.warn('[dsh-cursor-dev] opening a child conversation failed:', error);
+                }
+            };
+            window.addEventListener('message', onMessage);
+            return () => window.removeEventListener('message', onMessage);
+        }
+
+        function apply(ctx) {
+            // Optional services: a seat is registered only when its host exists,
+            // and none of them may fail the plugin load.
+            ctx.inject(['locale'], (injected) => {
+                localeService = injected.get('locale');
+                return undefined;
+            });
+
+            const seats = [];
+
+            // The jump from the dashboard to a child conversation. It needs the
+            // workspace service, and it must survive the panel being opened from
+            // either seat, so it is mounted once here rather than per component.
+            const bridgeSeat = ctx.inject(['uiWorkspace'], (injected) => {
+                const release = bridgeChildOpens(injected);
+                if (release !== undefined)
+                    seats.push(release);
+                return undefined;
+            });
+
+            const slotsSeat = ctx.inject(['slots'], (injected) => {
+                const slots = injected.get('slots');
+                if (slots === undefined || typeof slots.register !== 'function' || typeof slots.inject !== 'function') {
+                    console.warn('[dsh-cursor-dev] the slots service is unavailable; the Cursor seats are not registered.');
+                    return undefined;
+                }
+                const seat = (slotName, order, label, component) => {
+                    const release = slots.inject(slotName, () => slots.register({
+                        name: slotName,
+                        id: SETTINGS_ID,
+                        order,
+                        label: () => label(),
+                    }, component));
+                    seats.push(release);
+                    return release;
+                };
+                seat('settings.section', 62, () => (langOf() === 'en' ? 'Cursor agent' : 'Cursor 子智能体'), CursorSettings);
+                // The conversation header: the child agent's sessions, one chip
+                // away from the conversation that spawned them.
+                seat('conversation.session.header.utilities', 40, () => (langOf() === 'en' ? 'Cursor sessions' : 'Cursor 会话'), CursorChip);
+                // And the floating panel it opens, in the frame-wide overlay so
+                // the header never clips it.
+                seat('shell.overlay', 90, () => 'Cursor', CursorOverlay);
+                return undefined;
+            });
+
+            ctx.effect(() => () => {
+                for (const release of seats) {
+                    try {
+                        release?.();
+                    }
+                    catch (error) {
+                        console.warn('[dsh-cursor-dev] releasing a Cursor seat failed:', error);
+                    }
+                }
+                seats.length = 0;
+                for (const [name, seat] of [['the child-open bridge', bridgeSeat], ['the Cursor seats', slotsSeat]]) {
+                    try {
+                        seat?.();
+                    }
+                    catch (error) {
+                        console.warn(`[dsh-cursor-dev] releasing ${name} failed:`, error);
+                    }
+                }
+            });
+        }
+
+        exports.name = 'dsh-cursor-dev-client';
+        exports.apply = apply;
+        exports.inject = [];
+        return module.exports;
+    },
+});