@nelsonlongxiang/dsh-open-a2a-net 0.5.13

package/lib/client/A2aControl.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A2A network control: a footer action opening this host's network panel.
+ * Probes the host's session-node state route at registration time (the seat
+ * renders only on a host that serves it). The panel has three sections:
+ * session nodes (live rows show title, recent-activity excerpt, and team with
+ * a join/leave toggle and open the session on row click — the wake action on
+ * cold rows opens the session through the standard flow), the peer fleet
+ * (tracked URLs with quality scores), and the recent routing activity ring
+ * (inbound and outbound outcomes). While open, the panel polls so listings
+ * visibly follow each turn.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { Button, IconGlobeOutline14 } from '@deepseek-ai/dsh-client-ui-primitives';
+import css from './A2aControl.module.css';
+/** Fetch the host's network state; undefined means the route is absent. */
+async function fetchState() {
+    const response = await fetch('/__dsh_a2a/state', { cache: 'no-store' });
+    if (!response.ok)
+        return undefined;
+    const body = await response.json();
+    if (body.nodes !== true || !Array.isArray(body.sessions))
+        return undefined;
+    return {
+        sessions: body.sessions,
+        groups: Array.isArray(body.groups) ? body.groups : [],
+        peers: Array.isArray(body.peers) ? body.peers : [],
+        activity: Array.isArray(body.activity) ? body.activity : [],
+        inFlight: Array.isArray(body.inFlight) ? body.inFlight : [],
+        remote: Array.isArray(body.remote) ? body.remote : [],
+        ...(typeof body.version === 'string' ? { version: body.version } : {}),
+    };
+}
+/** Compact relative time for an activity row. */
+function relativeTime(ts) {
+    const seconds = Math.max(0, Math.round((Date.now() - ts) / 1000));
+    if (seconds < 60)
+        return `${String(seconds)}s`;
+    const minutes = Math.round(seconds / 60);
+    if (minutes < 60)
+        return `${String(minutes)}m`;
+    return `${String(Math.round(minutes / 60))}h`;
+}
+/**
+ * One session row: the facts block opens the session, the toggle joins or
+ * leaves, and the tag button opens the group picker (assign / create /
+ * clear).
+ */
+function SessionRow({ row, t, listById, openSession, busy, onToggle, pickerFor, setPickerFor, groups, newGroupName, setNewGroupName, onAssign }) {
+    const cold = row.live === false;
+    const name = cold ? (listById[row.id]?.displayTitle ?? row.label) : (row.name ?? row.label);
+    const description = cold ? t('a2a.cold') : (row.description ?? '');
+    const pickerOpen = pickerFor === row.id;
+    return (_jsxs("div", { className: clsx(css.row, row.joined && css.joined), children: [_jsxs("button", { type: "button", className: css.facts, title: cold ? t('a2a.wake') : name, onClick: () => { openSession(row.id); }, children: [_jsxs("span", { className: css.nameRow, children: [_jsx("span", { className: clsx(css.stateDot, cold ? 'cold' : 'live', row.joined && 'joined'), "aria-hidden": true }), _jsx("span", { className: css.name, children: name }), row.group !== undefined ? _jsx("span", { className: css.groupTag, children: row.group }) : null] }), _jsx("span", { className: css.description, children: description }), _jsx("span", { className: css.team, children: row.team })] }), _jsx("button", { type: "button", className: css.groupButton, title: t('a2a.group'), "aria-label": t('a2a.group'), onClick: () => { setPickerFor(pickerOpen ? null : row.id); }, children: "#" }), cold
+                ? (_jsx(Button, { variant: "outline", size: "sm", disabled: busy === row.id, onClick: () => { onToggle(row); }, children: t('a2a.leave') }))
+                : (_jsx(Button, { variant: row.joined ? 'outline' : 'primary', size: "sm", disabled: busy === row.id, onClick: () => { onToggle(row); }, children: row.joined ? t('a2a.leave') : t('a2a.join') })), pickerOpen && (_jsxs("div", { className: css.groupPicker, children: [_jsx("button", { type: "button", className: css.groupOption, onClick: () => { onAssign(row.id, ''); }, children: t('a2a.groupClear') }), groups.map((group) => (_jsx("button", { type: "button", className: clsx(css.groupOption, row.group === group && css.groupOptionActive), onClick: () => { onAssign(row.id, group); }, children: group }, group))), _jsxs("div", { className: css.groupNew, children: [_jsx("input", { className: css.groupInput, value: newGroupName, placeholder: t('a2a.groupNew'), maxLength: 40, onChange: (event) => { setNewGroupName(event.target.value); }, onKeyDown: (event) => {
+                                    if (event.key === 'Enter' && newGroupName.trim() !== '')
+                                        onAssign(row.id, newGroupName.trim());
+                                } }), _jsx(Button, { variant: "primary", size: "sm", disabled: newGroupName.trim() === '', onClick: () => { if (newGroupName.trim() !== '')
+                                    onAssign(row.id, newGroupName.trim()); }, children: t('a2a.groupNewGo') })] })] }))] }));
+}
+/**
+ * Render the network toggle and its network panel.
+ * @param props - composed slot props.
+ * @returns the control element tree.
+ */
+export function A2aControl({ wide, t, useSessions, openSession }) {
+    const [open, setOpen] = useState(false);
+    const [state, setState] = useState({ sessions: [], groups: [], peers: [], activity: [], inFlight: [], remote: [] });
+    const [busy, setBusy] = useState(null);
+    const [seenActivity, setSeenActivity] = useState(0);
+    // Panel-local search: filters session rows by name/team/description.
+    const [search, setSearch] = useState('');
+    // Group UI: the row whose group picker is open, and collapsed groups.
+    const [pickerFor, setPickerFor] = useState(null);
+    const [newGroupName, setNewGroupName] = useState('');
+    const [collapsed, setCollapsed] = useState(new Set());
+    const stopped = useRef(false);
+    useEffect(() => () => { stopped.current = true; }, []);
+    const wrap = useRef(null);
+    // Cold rows carry no host-side facts; the client's own session list holds
+    // the durable title for exactly those sessions.
+    const listById = useSessions(state2 => state2.byId);
+    // The popover anchors to the trigger's viewport rect: the sidebar column
+    // clips its descendants (the collapse slide), so an in-column absolute
+    // popover is cut at the column edge whenever the column is narrower than
+    // the popover; fixed positioning escapes the clip at rest (the ui-settings
+    // panel precedent). The left edge clamps so a narrow viewport never hides
+    // the popover's right side.
+    const [anchor, setAnchor] = useState(null);
+    // The unread badge counts inbound activity entries that arrived while the
+    // panel was closed; opening the panel clears it.
+    const unread = Math.max(0, state.activity.filter(entry => entry.dir === 'in').length - seenActivity);
+    const toggleOpen = () => {
+        if (open) {
+            setOpen(false);
+            return;
+        }
+        const rect = wrap.current?.getBoundingClientRect();
+        if (rect !== undefined) {
+            setAnchor({
+                left: Math.max(8, Math.min(rect.left, window.innerWidth - 336)),
+                bottom: window.innerHeight - rect.top + 8,
+            });
+        }
+        setSeenActivity(state.activity.filter(entry => entry.dir === 'in').length);
+        setOpen(true);
+    };
+    const refresh = useCallback(() => {
+        void fetchState().then((next) => {
+            if (!stopped.current && next !== undefined)
+                setState(next);
+        }).catch(() => { });
+    }, []);
+    useEffect(() => {
+        if (open)
+            refresh();
+    }, [open, refresh]);
+    useEffect(() => {
+        // The unread badge lives on the closed trigger, so the state must move
+        // even while the panel is closed — a slow poll keeps it fresh; the open
+        // panel's faster poll below takes over while visible.
+        const slow = setInterval(refresh, 10_000);
+        refresh();
+        return () => { clearInterval(slow); };
+    }, [refresh]);
+    useEffect(() => {
+        if (!open)
+            return;
+        // While the panel is open, titles, activity excerpts, and the routing
+        // ring keep moving; poll so the listing visibly follows.
+        const poll = setInterval(refresh, 2_000);
+        return () => { clearInterval(poll); };
+    }, [open, refresh]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (event.target.closest(`.${css.wrap}`) === null)
+                setOpen(false);
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => { document.removeEventListener('pointerdown', onPointerDown); };
+    }, [open]);
+    /** Join or leave one session, then refresh the listing. */
+    const toggle = (row) => {
+        setBusy(row.id);
+        void fetch(`/__dsh_a2a/${row.joined ? 'leave' : 'join'}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id: row.id }),
+        })
+            .then(() => { refresh(); })
+            .catch(() => { })
+            .finally(() => { if (!stopped.current)
+            setBusy(null); });
+    };
+    /** Assign one session to a group ('' clears), then refresh. */
+    const assign = (id, name) => {
+        void fetch('/__dsh_a2a/groups', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ action: 'assign', id, name }),
+        })
+            .then(() => { setPickerFor(null); setNewGroupName(''); refresh(); })
+            .catch(() => { });
+    };
+    const { sessions, groups, peers, activity, inFlight, remote } = state;
+    // Search filters by name, team, or description (case-insensitive).
+    const needle = search.trim().toLowerCase();
+    const matches = (row) => {
+        if (needle === '')
+            return true;
+        const name = row.live === false ? (listById[row.id]?.displayTitle ?? row.label) : (row.name ?? row.label);
+        return name.toLowerCase().includes(needle)
+            || row.team.toLowerCase().includes(needle)
+            || (row.description ?? '').toLowerCase().includes(needle);
+    };
+    const visible = sessions.filter(matches);
+    const ungrouped = visible.filter(row => row.group === undefined);
+    const grouped = groups
+        .map(name => ({ name, rows: visible.filter(row => row.group === name) }))
+        .filter(group => group.rows.length > 0);
+    return (_jsxs("div", { ref: wrap, className: clsx(css.wrap, wide ? css.wide : css.rail), children: [_jsx(Button, { variant: "ghost", size: "sm", title: t('a2a.label'), "aria-label": t('a2a.label'), "aria-expanded": open, onClick: () => { toggleOpen(); }, children: _jsxs("span", { className: css.trigger, children: [_jsx(IconGlobeOutline14, {}), wide ? _jsx("span", { children: t('a2a.label') }) : null, unread > 0 ? _jsx("span", { className: css.unreadBadge, "aria-label": String(unread), children: unread > 9 ? '9+' : String(unread) }) : null] }) }), open
+                ? (_jsxs("div", { className: css.popover, role: "dialog", "aria-label": t('a2a.title'), style: anchor === null ? undefined : { left: `${String(anchor.left)}px`, bottom: `${String(anchor.bottom)}px` }, children: [_jsxs("div", { className: css.title, children: [t('a2a.title'), state.version !== undefined ? _jsxs("span", { className: css.versionTag, title: state.version, children: ["v", state.version] }) : null] }), _jsx("input", { className: css.searchInput, type: "search", value: search, placeholder: t('a2a.search'), "aria-label": t('a2a.search'), onChange: (event) => { setSearch(event.target.value); } }), sessions.length === 0
+                            ? _jsx("div", { className: css.empty, children: t('a2a.empty') })
+                            : visible.length === 0
+                                ? _jsx("div", { className: css.empty, children: t('a2a.searchEmpty') })
+                                : (_jsxs(_Fragment, { children: [ungrouped.length > 0 && (_jsxs("div", { className: css.sessionGroup, children: [_jsxs("button", { type: "button", className: css.groupHead, onClick: () => {
+                                                        setCollapsed((current) => {
+                                                            const next = new Set(current);
+                                                            if (next.has(''))
+                                                                next.delete('');
+                                                            else
+                                                                next.add('');
+                                                            return next;
+                                                        });
+                                                    }, children: [_jsx("span", { className: clsx(css.groupChevron, collapsed.has('') && css.groupChevronClosed), "aria-hidden": true, children: "\u25BE" }), t('a2a.groupDefault'), " \u00B7 ", String(ungrouped.length)] }), !collapsed.has('') && ungrouped.map((row) => (_jsx(SessionRow, { row: row, t: t, listById: listById, openSession: openSession, busy: busy, onToggle: toggle, pickerFor: pickerFor, setPickerFor: setPickerFor, groups: groups, newGroupName: newGroupName, setNewGroupName: setNewGroupName, onAssign: assign }, row.id)))] })), grouped.map(({ name, rows }) => {
+                                            const isCollapsed = collapsed.has(name);
+                                            return (_jsxs("div", { className: css.sessionGroup, children: [_jsxs("button", { type: "button", className: css.groupHead, onClick: () => {
+                                                            setCollapsed((current) => {
+                                                                const next = new Set(current);
+                                                                if (next.has(name))
+                                                                    next.delete(name);
+                                                                else
+                                                                    next.add(name);
+                                                                return next;
+                                                            });
+                                                        }, children: [_jsx("span", { className: clsx(css.groupChevron, isCollapsed && css.groupChevronClosed), "aria-hidden": true, children: "\u25BE" }), name, " \u00B7 ", String(rows.length)] }), !isCollapsed && rows.map((row) => (_jsx(SessionRow, { row: row, t: t, listById: listById, openSession: openSession, busy: busy, onToggle: toggle, pickerFor: pickerFor, setPickerFor: setPickerFor, groups: groups, newGroupName: newGroupName, setNewGroupName: setNewGroupName, onAssign: assign }, row.id)))] }, name));
+                                        })] })), _jsx("div", { className: css.note, children: t('a2a.note') }), (needle === '' ? remote : remote.filter(row => row.team.toLowerCase().includes(needle) || row.name.toLowerCase().includes(needle) || (row.origin ?? '').toLowerCase().includes(needle) || (row.workspace ?? '').toLowerCase().includes(needle))).length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: css.sectionTitle, children: t('a2a.remote') }), Object.entries((needle === '' ? remote : remote.filter(row => row.team.toLowerCase().includes(needle) || row.name.toLowerCase().includes(needle) || (row.origin ?? '').toLowerCase().includes(needle) || (row.workspace ?? '').toLowerCase().includes(needle)))
+                                    .reduce((byOrigin, row) => {
+                                    const key = row.origin ?? '';
+                                    byOrigin[key] = [...(byOrigin[key] ?? []), row];
+                                    return byOrigin;
+                                }, {})).map(([origin, rows]) => (_jsxs("div", { className: css.sessionGroup, children: [_jsxs("button", { type: "button", className: css.groupHead, onClick: () => {
+                                                setCollapsed((current) => {
+                                                    const next = new Set(current);
+                                                    if (next.has('remote:' + origin))
+                                                        next.delete('remote:' + origin);
+                                                    else
+                                                        next.add('remote:' + origin);
+                                                    return next;
+                                                });
+                                            }, children: [_jsx("span", { className: clsx(css.groupChevron, collapsed.has('remote:' + origin) && css.groupChevronClosed), "aria-hidden": true, children: "\u25BE" }), origin === '' ? t('a2a.remoteUnknownOrigin') : origin, " \u00B7 ", String(rows.length)] }), !collapsed.has('remote:' + origin) && rows.map((row) => (_jsx("div", { className: css.row, title: row.workspace ?? undefined, children: _jsxs("div", { className: css.facts, children: [_jsxs("span", { className: css.nameRow, children: [_jsx("span", { className: css.stateDot, "data-peer": true, "aria-hidden": true }), _jsx("span", { className: css.name, children: row.name === '' ? row.team : row.name }), row.workspace !== undefined ? _jsx("span", { className: css.groupTag, children: row.workspace }) : null] }), _jsx("span", { className: css.team, children: row.team })] }) }, row.team)))] }, origin)))] })), _jsx("div", { className: css.sectionTitle, children: t('a2a.peers') }), peers.length === 0
+                            ? _jsx("div", { className: css.empty, children: t('a2a.peersEmpty') })
+                            : (_jsx("div", { className: css.peerGrid, children: peers.map((peer) => (_jsxs("span", { className: css.peerChip, title: peer.url, children: [_jsx("span", { className: css.peerHost, children: peer.url.replace(/^https?:\/\//, '').replace(/\/.*$/, '') }), typeof peer.score === 'number' ? _jsx("span", { className: css.peerScore, children: String(Math.round(peer.score)) }) : null] }, peer.url))) })), _jsx("div", { className: css.sectionTitle, children: t('a2a.activity') }), inFlight.length > 0 && (_jsx("div", { className: css.inFlightList, "aria-label": t('a2a.inFlight'), children: inFlight.map((route) => (_jsxs("div", { className: clsx(css.inFlightRow, Date.now() - route.startedAt > 120_000 && css.inFlightStale), title: Date.now() - route.startedAt > 120_000 ? t('a2a.inFlightStale') : undefined, children: [_jsx("span", { className: css.inFlightPulse, "aria-hidden": true }), _jsx("span", { className: clsx(css.activityDir, 'out'), children: '→' }), _jsx("span", { className: css.activityTeam, title: route.team, children: route.team }), _jsx("span", { className: css.activityPeer, children: route.peer === 'local' ? '' : route.peer.replace(/^https?:\/\//, '').replace(/\/.*$/, '') }), _jsx("span", { className: css.activityTime, children: relativeTime(route.startedAt) })] }, `${route.team}-${String(route.startedAt)}`))) })), activity.length === 0
+                            ? _jsx("div", { className: css.empty, children: t('a2a.activityEmpty') })
+                            : (_jsx("div", { className: css.activityList, children: [...activity].reverse().slice(0, 10).map((entry, index) => {
+                                    // A same-host session team resolves to its session row;
+                                    // clicking the activity line jumps there (the linkage
+                                    // into an ongoing collaboration).
+                                    const target = sessions.find(row => row.team === entry.team);
+                                    const fresh = Date.now() - entry.ts < 5_000;
+                                    return (_jsxs("div", { className: clsx(css.activityRow, fresh && css.fresh), "data-ok": entry.ok, "data-jump": target !== undefined, title: target !== undefined ? t('a2a.jump') : undefined, onClick: () => { if (target !== undefined)
+                                            openSession(target.id); }, role: target !== undefined ? 'button' : undefined, children: [_jsx("span", { className: clsx(css.activityDir, entry.dir), children: entry.dir === 'in' ? '←' : '→' }), _jsx("span", { className: css.activityTeam, title: entry.team, children: entry.team }), _jsx("span", { className: css.activityPeer, title: entry.peer, children: entry.peer === '' ? '' : entry.peer.replace(/^https?:\/\//, '').replace(/\/.*$/, '') }), _jsx("span", { className: css.activityTime, children: relativeTime(entry.ts) })] }, `${String(entry.ts)}-${String(index)}`));
+                                }) }))] }))
+                : null] }));
+}

package/lib/client/index.js

@@ -0,0 +1,35 @@
+import { A2aControl } from "./A2aControl.js";
+import { en, zh } from "./locales.js";
+/** Dictionary namespace owned by this plugin (network control copy). */
+const NS = 'a2aNet';
+/** Services required by the browser half: the slot system, the sessions
+ * flow used to wake cold rows, and the locale dictionaries. */
+export const inject = ['slots', 'sessions', 'locale'];
+/** Registers the network control's dictionaries and its sidebar seat.
+ * @param ctx - Client root context.
+ */
+export function apply(ctx) {
+    ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'a2a-net: dictionaries');
+    // The network control renders only on a host that serves the session-node
+    // state route (a2a host half + session nodes composed); the probe keeps
+    // the seat quiet everywhere else.
+    void fetch('/__dsh_a2a/state', { cache: 'no-store' })
+        .then(response => (response.ok ? response.json() : undefined))
+        .then((info) => {
+        if (info?.nodes !== true)
+            return;
+        ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({
+            name: 'sidebar.footer.action',
+            id: 'a2a',
+            order: 10,
+            locale: NS,
+            // Wake = the standard session-open flow: the host materializes the
+            // session's agent and the a2a host half's persisted intent remounts
+            // the node, so the cold row flips live on the next poll.
+            inject: () => ({
+                openSession: (id) => { ctx.sessions.open(id); },
+            }),
+        }, A2aControl));
+    })
+        .catch(() => { });
+}

package/lib/client/locales.js

@@ -0,0 +1,55 @@
+/** Locale dictionaries for the A2A network sidebar control (namespace `a2aNet`). */
+/** Simplified Chinese dictionary. */
+export const zh = {
+    'a2a.label': 'A2A 网络',
+    'a2a.title': 'A2A 网络面板',
+    'a2a.empty': '没有可加入的会话',
+    'a2a.join': '加入',
+    'a2a.leave': '退出',
+    'a2a.cold': '未加载（重启后待唤醒）',
+    'a2a.wake': '唤醒',
+    'a2a.note': '只有加入的会话才会被网络中的其他节点发现；点击会话行可跳转。',
+    'a2a.remote': '远程节点（按 host 分组）',
+    'a2a.remoteUnknownOrigin': '未知来源',
+    'a2a.peers': '对等节点',
+    'a2a.peersEmpty': '尚无已知对等节点（配 peers 种子入网）',
+    'a2a.activity': '路由活动',
+    'a2a.activityEmpty': '暂无路由记录',
+    'a2a.inFlight': '进行中的路由',
+    'a2a.inFlightStale': '等待回执超时（对端处理慢或回执丢失）；180 秒后自动解除并按已送达处理',
+    'a2a.jump': '点击跳转到该会话',
+    'a2a.search': '搜索会话（名称 / team / 摘要）',
+    'a2a.searchEmpty': '没有匹配的会话',
+    'a2a.group': '设置分组',
+    'a2a.groupDefault': '未分组',
+    'a2a.groupClear': '清除分组',
+    'a2a.groupNew': '新建分组…',
+    'a2a.groupNewGo': '创建并归入',
+};
+/** English dictionary. */
+export const en = {
+    'a2a.label': 'A2A network',
+    'a2a.title': 'A2A network panel',
+    'a2a.empty': 'No joinable sessions',
+    'a2a.join': 'Join',
+    'a2a.leave': 'Leave',
+    'a2a.cold': 'not loaded (waiting to wake after a restart)',
+    'a2a.wake': 'Wake',
+    'a2a.note': 'Only joined sessions are discoverable by other nodes; click a row to open the session.',
+    'a2a.remote': 'Remote teams (by host)',
+    'a2a.remoteUnknownOrigin': 'Unknown origin',
+    'a2a.peers': 'Peers',
+    'a2a.peersEmpty': 'No known peers yet (set peers seeds to join the mesh)',
+    'a2a.activity': 'Routing activity',
+    'a2a.activityEmpty': 'No routes yet',
+    'a2a.inFlight': 'Routes in flight',
+    'a2a.inFlightStale': 'Reply wait past 120s (slow or lost receipt); auto-releases as delivered at 180s',
+    'a2a.jump': 'Click to open this session',
+    'a2a.search': 'Search sessions (name / team / excerpt)',
+    'a2a.searchEmpty': 'No sessions match',
+    'a2a.group': 'Set group',
+    'a2a.groupDefault': 'Ungrouped',
+    'a2a.groupClear': 'Clear group',
+    'a2a.groupNew': 'New group…',
+    'a2a.groupNewGo': 'Create & assign',
+};