@nanmicoder/dsh-agent-teams 0.1.9 → 0.1.10

package/README.md

@@ -22,6 +22,10 @@ Ask in natural language. The plugin provides the team protocol, ten coordination
   <img src="./assets/ui.png" width="100%" alt="DeepSeek Harness conversation with the AgentTeams live activity panel, members, tasks, dependencies, and reports">
 </p>
 
+## Releases
+
+Read the [latest release notes](https://github.com/NanmiCoder/dsh-agent-teams/releases/latest) or browse the [complete release history](https://github.com/NanmiCoder/dsh-agent-teams/releases). The same Markdown notes are included in the npm package under `release-notes/`.
+
 ## Why AgentTeams?
 
 | Capability | What it changes |
@@ -91,10 +95,11 @@ command), describe the goal, and press Enter.
 /agent-teams research the pricing pages of three competitors
 ```
 
-The line is claimed by the command pipeline and never reaches the model as
-plain text — the handler queues one deterministic activation message as an
-ordinary follow-up turn, so the captain protocol starts immediately. The
-invocation is durably logged (`command/run` / `command/done`).
+The command pipeline claims the line, then preserves that exact input as an
+ordinary user follow-up so it remains visible in the main chat. The gesture
+boundary adds the deterministic activation directive at pre-step, so the
+captain protocol still starts immediately. The invocation is also durably
+logged (`command/run` / `command/done`).
 
 Surfaces without command adjudication (for example the headless CLI) get the
 same deterministic activation through a gesture boundary: any genuine user

package/README_ZH.md

@@ -22,6 +22,10 @@
   <img src="./assets/ui.png" width="100%" alt="DeepSeek Harness 对话与 AgentTeams 实时活动面板，展示成员、任务依赖和回报">
 </p>
 
+## 版本更新
+
+查看[最新版本说明](https://github.com/NanmiCoder/dsh-agent-teams/releases/latest)，或浏览[完整发布历史](https://github.com/NanmiCoder/dsh-agent-teams/releases)。同一份 Markdown 说明也会随 npm 包发布到 `release-notes/` 目录。
+
 ## 为什么需要 AgentTeams？
 
 | 能力 | 带来的变化 |
@@ -88,7 +92,7 @@ dsh web
 /agent-teams 调研三家竞品的定价页
 ```
 
-这一行会被命令管线认领，**不会**以纯文本形式发给模型——处理器会以一条确定性激活消息排队一个普通跟进回合，队长协议立即启动。调用会持久化记录（`command/run` / `command/done`）。
+这一行被命令管线认领后，会按用户提交的原文作为普通用户消息送入主会话，因此聊天记录中仍能看到完整的 `/agent-teams …`。手势边界会在 pre-step 注入确定性激活指令，队长协议仍会立即启动。调用也会持久化记录（`command/run` / `command/done`）。
 
 没有命令裁决的表面（例如 headless CLI）也享有同等的确定性激活：任何以 `/agent-teams` 开头的真实用户消息，都会为其余文本激活该协议；句子中间出现的字样仍是普通文本。
 

package/lib/client/ActivityPanel.js

@@ -2,25 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /**
  * AgentTeams activity panel: the top-right floater monitoring every team.
  *
- * Modeled on the Claude Code desktop SessionActivityPanel: a fixed glass
- * panel at the top-right corner. On wide viewports it cooperatively makes the
- * conversation column yield space; narrow viewports keep overlay mode. It
+ * Modeled on the Claude Code desktop SessionActivityPanel: a shell-overlay
+ * panel that docks at the conversation's top-right edge by default, can be
+ * dragged into a floating window, resized, and folded into an activity badge.
+ * On wide viewports the docked panel makes the conversation column yield
+ * space; narrow viewports keep a simple inset overlay. It
  * polls the host `/plugins/dsh-agent-teams/state` route for
  * server-side snapshots (durable files + live subagent activity), with a
  * collapsed badge that auto-expands once when activity appears. Archived
  * teams stay available for the owning conversation after live work ends.
  *
- * The floater mounts through a body portal (no top-right slot exists in the
- * web shell); it is not a conversation node — the in-conversation panel was
- * removed in favor of this always-available monitor.
+ * The floater mounts in ui-layout's additive `shell.overlay`; it is not a
+ * conversation node — the in-conversation panel was removed in favor of this
+ * always-available monitor.
  * @module dsh-agent-teams/client/activity
  */
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
-import { IconBranchOutline16, IconCloseOutline16, } from '@deepseek-ai/dsh-client-ui-primitives';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { IconBranchOutline16, IconChevronDownOutline14, IconPanelLeftOutline16, } from '@deepseek-ai/dsh-client-ui-primitives';
 import { activityPanelExpandedForSession, compactDagLayout, COMPACT_DAG_NODE_HEIGHT, COMPACT_DAG_NODE_WIDTH, dependencyFocusTaskId, relatedTaskIds, usesParallelTaskGrid, } from "./activity-model.js";
 import { getActivityMonitorTargetsSnapshot, getActivitySnapshotsSnapshot, startActivityPolling, subscribeActivityMonitorTargets, subscribeActivitySnapshots, } from "./activity-monitor.js";
 import { ACTION_ART, LEAD_ART, memberArtUrl } from "./artwork.js";
 import { OPEN_PANEL_EVENT } from "./AgentTeamsCard.js";
+import { DEFAULT_PANEL_LAYOUT, PANEL_LAYOUT_STORAGE_KEY, compactPanelForBounds, dockPanelLayout, floatPanelLayout, movePanelLayout, panelMaximumHeight, panelUsesAutoHeight, parsePanelLayout, resizePanelLayout, resolvePanelGeometry, } from "./panel-geometry.js";
 import css from './ActivityPanel.module.css';
 /** Grace before the panel collapses once no team remains. */
 const AUTOCLOSE_GRACE_MS = 2000;
@@ -30,8 +33,22 @@ const AUTOCLOSE_GRACE_MS = 2000;
  * right after load. New activity after this window auto-expands as usual.
  */
 const AUTO_OPEN_SETTLE_MS = 4000;
-/** Root marker shared with the panel CSS while the portal is expanded. */
+/** Root marker shared with the panel CSS while the shell overlay is expanded. */
 const PANEL_OPEN_ATTRIBUTE = 'data-agent-teams-panel-open';
+/** Shared width concession consumed by the conversation root CSS. */
+const PANEL_SHIFT_PROPERTY = '--agent-teams-panel-shift';
+const PANEL_CONVERSATION_GAP = 14;
+const MOVE_THRESHOLD = 4;
+function initialPanelLayout() {
+    if (typeof window === 'undefined')
+        return DEFAULT_PANEL_LAYOUT;
+    return parsePanelLayout(window.localStorage.getItem(PANEL_LAYOUT_STORAGE_KEY));
+}
+function initialPanelBounds() {
+    if (typeof window === 'undefined')
+        return { width: 1440, height: 900, anchorRight: 1440 };
+    return { width: window.innerWidth, height: window.innerHeight, anchorRight: window.innerWidth };
+}
 /** Initial-letter fallback for unmatched roles. */
 function memberInitial(name) {
     return name.trim().slice(0, 1).toUpperCase() || '?';
@@ -82,7 +99,7 @@ function WorkGlyph({ active }) {
 }
 /** Collapsed badge: an always-visible corner pill while any team exists. */
 function CollapsedBadge({ count, busy, onClick }) {
-    return (_jsxs("button", { type: "button", className: css.badge, "data-busy": busy, onClick: onClick, "aria-label": `AgentTeams 活动，${count} 个团队`, children: [_jsx("span", { className: css.badgeDot, "data-busy": busy, "aria-hidden": true }), _jsx("span", { className: css.badgeCount, children: count })] }));
+    return (_jsxs("button", { type: "button", className: css.badge, "data-agent-teams-collapsed": true, "data-busy": busy, onClick: onClick, "aria-label": `AgentTeams 活动，${count} 个团队`, children: [_jsx("span", { className: css.badgeDot, "data-busy": busy, "aria-hidden": true }), _jsx("span", { className: css.badgeCount, children: count })] }));
 }
 function memberStateLabel(member, tasks, historic) {
     const owned = tasks.filter((task) => task.assignee === member.name);
@@ -265,6 +282,14 @@ export function ActivityPanel({ sessionsList, openSession }) {
     const [autoOpened, setAutoOpened] = useState(false);
     const [wasActive, setWasActive] = useState(false);
     const [historic, setHistoric] = useState(new Map());
+    const [layout, setLayout] = useState(initialPanelLayout);
+    const [bounds, setBounds] = useState(initialPanelBounds);
+    const [interaction, setInteraction] = useState(null);
+    const panelRef = useRef(null);
+    const boundsRef = useRef(bounds);
+    const gestureRef = useRef(null);
+    const frameRef = useRef(null);
+    const pendingLayoutRef = useRef(null);
     const current = useSyncExternalStore(sessionsList.subscribe, sessionsList.getSnapshot).current;
     const monitorTargets = useSyncExternalStore(subscribeActivityMonitorTargets, getActivityMonitorTargetsSnapshot);
     const { teams, archivedTeams } = useSyncExternalStore(subscribeActivitySnapshots, getActivitySnapshotsSnapshot);
@@ -273,7 +298,60 @@ export function ActivityPanel({ sessionsList, openSession }) {
     useEffect(() => { currentRef.current = current; }, [current]);
     const mountedAtRef = useRef(performance.now());
     const expanded = activityPanelExpandedForSession(open, openOwner, current);
-    // This portal survives conversation route changes. Gate expansion by its
+    const geometry = useMemo(() => resolvePanelGeometry(layout, bounds), [layout, bounds]);
+    const compact = compactPanelForBounds(bounds);
+    const commitLayout = useCallback((next) => {
+        setLayout(next);
+    }, []);
+    useEffect(() => {
+        window.localStorage.setItem(PANEL_LAYOUT_STORAGE_KEY, JSON.stringify(layout));
+    }, [layout]);
+    // The slot sits inside AppFrame, so all geometry is measured against the
+    // shell overlay rather than the browser viewport. The conversation's real
+    // right edge is the dock anchor and naturally follows sidebar/details
+    // concessions without importing their hashed implementation classes.
+    useLayoutEffect(() => {
+        const overlay = document.querySelector('[data-shell-overlay]');
+        if (overlay === null)
+            return;
+        const conversation = document.querySelector("[data-phase='active']");
+        let frame = null;
+        const measure = () => {
+            frame = null;
+            const overlayRect = overlay.getBoundingClientRect();
+            const conversationRect = conversation?.getBoundingClientRect();
+            const next = {
+                width: overlayRect.width,
+                height: overlayRect.height,
+                anchorRight: conversationRect === undefined
+                    ? overlayRect.width
+                    : Math.min(Math.max(conversationRect.right - overlayRect.left, 0), overlayRect.width),
+            };
+            const previous = boundsRef.current;
+            if (previous.width === next.width
+                && previous.height === next.height
+                && previous.anchorRight === next.anchorRight)
+                return;
+            boundsRef.current = next;
+            setBounds(next);
+        };
+        const scheduleMeasure = () => {
+            frame ??= requestAnimationFrame(measure);
+        };
+        measure();
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleMeasure);
+        observer?.observe(overlay);
+        if (conversation !== null)
+            observer?.observe(conversation);
+        window.addEventListener('resize', scheduleMeasure);
+        return () => {
+            if (frame !== null)
+                cancelAnimationFrame(frame);
+            observer?.disconnect();
+            window.removeEventListener('resize', scheduleMeasure);
+        };
+    }, [current]);
+    // This shell overlay survives conversation route changes. Gate expansion by its
     // owning session during render, then clear stale state before paint. This
     // removes the old panel immediately instead of waiting for the no-team
     // autoclose grace period on the destination page.
@@ -285,17 +363,25 @@ export function ActivityPanel({ sessionsList, openSession }) {
         setWasActive(false);
         setAutoOpened(false);
     }, [current, openOwner]);
-    // The activity panel is a body portal, so announce its open state on body.
-    // CSS can then make the conversation column yield space without knowing the
-    // host shell's hashed module class names. Narrow viewports keep overlay mode.
+    // Only the wide docked mode asks the conversation column to yield. Floating
+    // and compact modes are intentionally true overlays. The width is written as
+    // one shared variable so the panel and the concession cannot drift apart.
     useLayoutEffect(() => {
         const root = document.documentElement;
-        if (expanded)
+        const shouldYield = expanded && geometry.mode === 'docked' && !compact;
+        if (shouldYield) {
             root.setAttribute(PANEL_OPEN_ATTRIBUTE, '');
-        else
+            root.style.setProperty(PANEL_SHIFT_PROPERTY, `${geometry.width + PANEL_CONVERSATION_GAP + 18}px`);
+        }
+        else {
             root.removeAttribute(PANEL_OPEN_ATTRIBUTE);
-        return () => { root.removeAttribute(PANEL_OPEN_ATTRIBUTE); };
-    }, [expanded]);
+            root.style.removeProperty(PANEL_SHIFT_PROPERTY);
+        }
+        return () => {
+            root.removeAttribute(PANEL_OPEN_ATTRIBUTE);
+            root.style.removeProperty(PANEL_SHIFT_PROPERTY);
+        };
+    }, [compact, expanded, geometry.mode, geometry.width]);
     useEffect(() => {
         // Installing the plugin alone must not touch the state route. A successful
         // AgentTeams conversation card registers the demand that reaches here.
@@ -365,6 +451,123 @@ export function ActivityPanel({ sessionsList, openSession }) {
     }, [visibleCount, autoOpened, wasActive]);
     const busy = useMemo(() => visibleTeams.some((team) => team.members.some((member) => member.activity === 'working')), [visibleTeams]);
     const hasTeams = visibleCount > 0;
+    // Auto-height panels do not store their live content height. Capture the
+    // rendered box when a pointer gesture starts so movement and a first manual
+    // resize clamp against what the user actually sees.
+    const panelGeometryForGesture = useCallback(() => {
+        const measuredHeight = panelRef.current?.getBoundingClientRect().height;
+        if (measuredHeight === undefined || measuredHeight <= 0)
+            return geometry;
+        return { ...geometry, height: measuredHeight };
+    }, [geometry]);
+    const flushScheduledLayout = useCallback(() => {
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        const pending = pendingLayoutRef.current;
+        pendingLayoutRef.current = null;
+        if (pending !== null)
+            commitLayout(pending);
+    }, [commitLayout]);
+    const scheduleLayout = useCallback((next) => {
+        pendingLayoutRef.current = next;
+        frameRef.current ??= requestAnimationFrame(() => {
+            frameRef.current = null;
+            const pending = pendingLayoutRef.current;
+            pendingLayoutRef.current = null;
+            if (pending !== null)
+                commitLayout(pending);
+        });
+    }, [commitLayout]);
+    useEffect(() => () => {
+        if (frameRef.current !== null)
+            cancelAnimationFrame(frameRef.current);
+    }, []);
+    const beginMove = useCallback((event) => {
+        if (compact || event.button !== 0 || event.target.closest('button') !== null)
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        gestureRef.current = {
+            kind: 'move',
+            pointerId: event.pointerId,
+            originX: event.clientX,
+            originY: event.clientY,
+            start: panelGeometryForGesture(),
+            activated: false,
+        };
+    }, [compact, panelGeometryForGesture]);
+    const beginResize = useCallback((edge, event) => {
+        if (compact || event.button !== 0 || (geometry.mode === 'docked' && edge !== 'left'))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        gestureRef.current = {
+            kind: 'resize',
+            edge,
+            pointerId: event.pointerId,
+            originX: event.clientX,
+            originY: event.clientY,
+            start: panelGeometryForGesture(),
+            activated: true,
+        };
+        setInteraction('resizing');
+    }, [compact, geometry.mode, panelGeometryForGesture]);
+    const updateGesture = useCallback((event) => {
+        const gesture = gestureRef.current;
+        if (gesture === null || gesture.pointerId !== event.pointerId
+            || !event.currentTarget.hasPointerCapture(event.pointerId))
+            return;
+        const dx = event.clientX - gesture.originX;
+        const dy = event.clientY - gesture.originY;
+        const activeBounds = boundsRef.current;
+        if (gesture.kind === 'move') {
+            if (!gesture.activated && Math.hypot(dx, dy) < MOVE_THRESHOLD)
+                return;
+            if (!gesture.activated) {
+                gesture.activated = true;
+                setInteraction('dragging');
+            }
+            scheduleLayout(movePanelLayout(floatPanelLayout(gesture.start, activeBounds), dx, dy, activeBounds));
+            return;
+        }
+        scheduleLayout(resizePanelLayout(gesture.start, gesture.edge ?? 'left', dx, dy, activeBounds));
+    }, [scheduleLayout]);
+    const endGesture = useCallback((event) => {
+        const gesture = gestureRef.current;
+        if (gesture === null || gesture.pointerId !== event.pointerId)
+            return;
+        updateGesture(event);
+        flushScheduledLayout();
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        gestureRef.current = null;
+        setInteraction(null);
+    }, [flushScheduledLayout, updateGesture]);
+    const cancelGesture = useCallback((event) => {
+        const gesture = gestureRef.current;
+        if (gesture === null || gesture.pointerId !== event.pointerId)
+            return;
+        flushScheduledLayout();
+        gestureRef.current = null;
+        setInteraction(null);
+    }, [flushScheduledLayout]);
+    const toggleDock = useCallback(() => {
+        const liveGeometry = panelGeometryForGesture();
+        commitLayout(liveGeometry.mode === 'docked'
+            ? floatPanelLayout(liveGeometry, boundsRef.current)
+            : dockPanelLayout(liveGeometry, boundsRef.current));
+    }, [commitLayout, panelGeometryForGesture]);
+    const autoHeight = panelUsesAutoHeight(geometry, bounds);
+    const panelStyle = {
+        width: geometry.width,
+        height: autoHeight ? 'auto' : geometry.height,
+        maxHeight: panelMaximumHeight(geometry, bounds),
+        transform: `translate3d(${geometry.x}px, ${geometry.y}px, 0)`,
+    };
     if (!hasTeams && !expanded)
         return null;
     return (_jsxs(_Fragment, { children: [!expanded && (_jsx(CollapsedBadge, { count: visibleCount, busy: busy, onClick: () => {
@@ -372,13 +575,13 @@ export function ActivityPanel({ sessionsList, openSession }) {
                         return;
                     setOpenOwner(current);
                     setOpen(true);
-                } })), expanded && (_jsxs("aside", { className: css.panel, "data-agent-teams-activity": true, children: [_jsxs("header", { className: css.panelHead, children: [_jsxs("span", { className: css.panelTitle, children: ["AgentTeams \u6D3B\u52A8", _jsx("span", { className: css.panelDot, "data-busy": busy, "aria-hidden": true })] }), _jsx("button", { type: "button", className: css.closeButton, onClick: () => {
-                                    setOpen(false);
-                                    setOpenOwner(undefined);
-                                }, "aria-label": "\u5173\u95ED", children: _jsx(IconCloseOutline16, {}) })] }), _jsx("div", { className: css.teams, children: visibleCount === 0
+                } })), expanded && (_jsxs("aside", { ref: panelRef, className: css.panel, style: panelStyle, "data-agent-teams-activity": true, "data-panel-mode": geometry.mode, "data-height-mode": autoHeight ? 'auto' : 'manual', "data-compact": compact || undefined, "data-dragging": interaction === 'dragging' || undefined, "data-resizing": interaction === 'resizing' || undefined, "aria-label": "AgentTeams \u6D3B\u52A8\u9762\u677F", children: [_jsxs("header", { className: css.panelHead, onPointerDown: beginMove, onPointerMove: updateGesture, onPointerUp: endGesture, onPointerCancel: cancelGesture, "data-drag-handle": !compact || undefined, children: [_jsxs("span", { className: css.panelTitle, children: ["AgentTeams \u6D3B\u52A8", _jsx("span", { className: css.panelDot, "data-busy": busy, "aria-hidden": true })] }), _jsxs("span", { className: css.panelControls, children: [!compact && (_jsx("button", { type: "button", className: css.iconButton, "data-control": "dock", "data-mode": geometry.mode, onClick: toggleDock, "aria-label": geometry.mode === 'docked' ? '切换为浮动面板' : '停靠到右侧', title: geometry.mode === 'docked' ? '切换为浮动面板' : '停靠到右侧', children: _jsx(IconPanelLeftOutline16, {}) })), _jsx("button", { type: "button", className: css.iconButton, "data-control": "collapse", onClick: () => {
+                                            setOpen(false);
+                                            setOpenOwner(undefined);
+                                        }, "aria-label": "\u6536\u8D77\u6D3B\u52A8\u9762\u677F", title: "\u6536\u8D77\u6D3B\u52A8\u9762\u677F", children: _jsx(IconChevronDownOutline14, {}) })] })] }), _jsx("div", { className: css.teams, children: visibleCount === 0
                             ? _jsx("span", { className: css.emptyHint, children: "\u6682\u65E0\u56E2\u961F\u6D3B\u52A8" })
                             : (_jsxs(_Fragment, { children: [visibleTeams.map((team) => (_jsx(TeamSection, { team: team, onNavigate: navigateToSession }, team.teamId))), visibleArchived.map((team) => (_jsx("div", { "data-team-id": team.teamId, "data-historic": true, className: css.archivedWrap, children: _jsx(TeamSection, { team: team, onNavigate: navigateToSession, historic: true }) }, `${team.captainSessionId}:${team.teamId}`))), visibleHistoric.map(({ data: team, owner }) => {
                                         const teamKey = `${owner}:${team.teamId}`;
                                         return (_jsx(TeamSection, { team: historicCardTeam(team, owner), onNavigate: navigateToSession, historic: true }, teamKey));
-                                    })] })) })] }))] }));
+                                    })] })) }), !compact && (_jsx("div", { className: css.resizeHandle, "data-resize-edge": "left", onPointerDown: (event) => { beginResize('left', event); }, onPointerMove: updateGesture, onPointerUp: endGesture, onPointerCancel: cancelGesture, "aria-hidden": true })), !compact && geometry.mode === 'floating' && (_jsxs(_Fragment, { children: [_jsx("div", { className: css.resizeHandle, "data-resize-edge": "bottom", onPointerDown: (event) => { beginResize('bottom', event); }, onPointerMove: updateGesture, onPointerUp: endGesture, onPointerCancel: cancelGesture, "aria-hidden": true }), _jsx("div", { className: css.resizeHandle, "data-resize-edge": "corner", onPointerDown: (event) => { beginResize('corner', event); }, onPointerMove: updateGesture, onPointerUp: endGesture, onPointerCancel: cancelGesture, "aria-hidden": true })] }))] }))] }));
 }

package/lib/client/activity-model.js

@@ -14,10 +14,10 @@ export function usesParallelTaskGrid(tasks) {
 /**
  * Whether an expanded activity panel still belongs to the current session.
  *
- * The panel is mounted through a body portal, so React does not remount it
- * when the conversation route changes. Ownership keeps an expanded panel
- * from leaking onto the new-session screen (or another conversation) while
- * its local open state is being reset.
+ * The panel is mounted in the root-scoped shell overlay, so React does not
+ * remount it when the conversation route changes. Ownership keeps an expanded
+ * panel from leaking onto the new-session screen (or another conversation)
+ * while its local open state is being reset.
  */
 export function activityPanelExpandedForSession(open, owner, current) {
     return open && owner !== undefined && owner === current;

package/lib/client/index.js

@@ -1,26 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createRoot } from 'react-dom/client';
 import { ActivityPanel } from "./ActivityPanel.js";
 import { AgentTeamsCard } from "./AgentTeamsCard.js";
 import { agentTeamsCardDefinition } from "./agent-teams-card-definition.js";
 /** Required services: conversation nodes, slots, and sessions navigation. */
 export const inject = ['conversationEvents', 'slots', 'sessions'];
+/** The replayed user message is the canonical transcript entry. */
+function HiddenAgentTeamsCommand() {
+    return null;
+}
 /**
- * Mount the floater through a body portal (the web shell has no top-right
- * slot) and register the in-conversation team card, whose "activity panel"
- * button re-activates the floater via a window event — the recovery path
- * for a closed floater or a re-opened session.
+ * Register the activity monitor in the shell's additive overlay and the
+ * in-conversation team card. The card's activity button re-opens a folded
+ * monitor via a window event — the recovery path for an old session.
  */
 export function apply(ctx) {
-    const host = document.createElement('div');
-    host.dataset.agentTeamsHost = '';
-    document.body.appendChild(host);
-    const root = createRoot(host);
-    root.render(_jsx(ActivityPanel, { sessionsList: ctx.sessions.list, openSession: (id) => { ctx.sessions.open(id); } }));
-    ctx.effect(() => () => {
-        root.unmount();
-        host.remove();
-    }, 'agent-teams: activity panel');
+    const Panel = () => _jsx(ActivityPanel, { sessionsList: ctx.sessions.list, openSession: (id) => { ctx.sessions.open(id); } });
+    ctx.slots.inject('shell.overlay', () => ctx.slots.register({
+        name: 'shell.overlay',
+        id: 'agent-teams-activity',
+        order: 80,
+        label: 'AgentTeams activity',
+    }, Panel));
+    // The host command is only the slash-menu/admission surface. Its input is
+    // replayed as the visible user message, so the generic result row would be
+    // a duplicate placed before that message by command lifecycle ordering.
+    ctx.slots.inject('conversation.chat.commandview', () => ctx.slots.register({
+        name: 'conversation.chat.commandview',
+        key: 'agent-teams',
+    }, HiddenAgentTeamsCommand));
     ctx.conversationEvents.register(agentTeamsCardDefinition);
     ctx.slots.inject('conversation.chat.node', () => ctx.slots.register({
         name: 'conversation.chat.node',

package/lib/client/panel-geometry.js

@@ -0,0 +1,143 @@
+/** Pure persisted geometry rules for the AgentTeams shell-overlay panel. */
+export const PANEL_LAYOUT_STORAGE_KEY = 'dsh-agent-teams:activity-panel:v1';
+export const PANEL_COMPACT_BREAKPOINT = 960;
+export const PANEL_DEFAULT_WIDTH = 388;
+export const PANEL_DEFAULT_HEIGHT = 640;
+export const PANEL_MIN_WIDTH = 320;
+export const PANEL_MAX_WIDTH = 640;
+export const PANEL_MIN_HEIGHT = 360;
+export const PANEL_DOCK_TOP = 64;
+export const PANEL_DOCK_RIGHT = 18;
+export const PANEL_DOCK_BOTTOM = 48;
+export const PANEL_FLOAT_MARGIN = 12;
+export const DEFAULT_PANEL_LAYOUT = Object.freeze({
+    mode: 'docked',
+    x: 0,
+    y: PANEL_DOCK_TOP,
+    width: PANEL_DEFAULT_WIDTH,
+    height: PANEL_DEFAULT_HEIGHT,
+    heightMode: 'auto',
+});
+function clamp(value, minimum, maximum) {
+    return Math.min(Math.max(value, minimum), maximum);
+}
+function finite(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+/** Decode one versioned localStorage value, rejecting partial/corrupt state. */
+export function parsePanelLayout(value) {
+    if (value === null)
+        return DEFAULT_PANEL_LAYOUT;
+    try {
+        const parsed = JSON.parse(value);
+        if (typeof parsed !== 'object' || parsed === null)
+            return DEFAULT_PANEL_LAYOUT;
+        const record = parsed;
+        if ((record.mode !== 'docked' && record.mode !== 'floating')
+            || !finite(record.x) || !finite(record.y)
+            || !finite(record.width) || !finite(record.height)) {
+            return DEFAULT_PANEL_LAYOUT;
+        }
+        return {
+            mode: record.mode,
+            x: record.x,
+            y: record.y,
+            width: record.width,
+            height: record.height,
+            // v1 values written before content-fit height existed have no mode.
+            // Treat them as automatic so the upgrade removes legacy blank space.
+            heightMode: record.mode === 'floating' && record.heightMode === 'manual' ? 'manual' : 'auto',
+        };
+    }
+    catch {
+        return DEFAULT_PANEL_LAYOUT;
+    }
+}
+/** Whether the panel should become a simple inset overlay with no gestures. */
+export function compactPanelForBounds(bounds) {
+    return bounds.width <= PANEL_COMPACT_BREAKPOINT;
+}
+/** Docked and compact panels always fit content; floating panels may be user-sized. */
+export function panelUsesAutoHeight(layout, bounds) {
+    return compactPanelForBounds(bounds) || layout.mode === 'docked' || layout.heightMode === 'auto';
+}
+/** CSS max-height ceiling that keeps an auto-height panel inside its shell. */
+export function panelMaximumHeight(layout, bounds) {
+    const bottomInset = compactPanelForBounds(bounds) || layout.mode === 'floating'
+        ? PANEL_FLOAT_MARGIN
+        : PANEL_DOCK_BOTTOM;
+    return Math.max(1, bounds.height - layout.y - bottomInset);
+}
+/** Resolve persisted state into a visible rectangle inside the current shell. */
+export function resolvePanelGeometry(layout, bounds) {
+    const boundsWidth = Math.max(1, bounds.width);
+    const boundsHeight = Math.max(1, bounds.height);
+    if (compactPanelForBounds(bounds)) {
+        return {
+            ...layout,
+            x: PANEL_FLOAT_MARGIN,
+            y: PANEL_FLOAT_MARGIN,
+            width: Math.max(1, boundsWidth - PANEL_FLOAT_MARGIN * 2),
+            height: Math.max(1, boundsHeight - PANEL_FLOAT_MARGIN * 2),
+        };
+    }
+    const maximumWidth = Math.max(1, Math.min(PANEL_MAX_WIDTH, boundsWidth - PANEL_FLOAT_MARGIN * 2));
+    const minimumWidth = Math.min(PANEL_MIN_WIDTH, maximumWidth);
+    const width = clamp(layout.width, minimumWidth, maximumWidth);
+    const maximumHeight = Math.max(1, boundsHeight - PANEL_FLOAT_MARGIN * 2);
+    const minimumHeight = Math.min(PANEL_MIN_HEIGHT, maximumHeight);
+    if (layout.mode === 'docked') {
+        const y = clamp(PANEL_DOCK_TOP, PANEL_FLOAT_MARGIN, Math.max(PANEL_FLOAT_MARGIN, boundsHeight - minimumHeight - PANEL_FLOAT_MARGIN));
+        const availableHeight = Math.max(1, boundsHeight - y - PANEL_DOCK_BOTTOM);
+        const height = clamp(availableHeight, Math.min(minimumHeight, availableHeight), maximumHeight);
+        const anchorRight = clamp(bounds.anchorRight, 0, boundsWidth);
+        const maximumX = Math.max(PANEL_FLOAT_MARGIN, boundsWidth - width - PANEL_FLOAT_MARGIN);
+        const x = clamp(anchorRight - PANEL_DOCK_RIGHT - width, PANEL_FLOAT_MARGIN, maximumX);
+        return { mode: 'docked', x, y, width, height, heightMode: layout.heightMode };
+    }
+    const height = clamp(layout.height, minimumHeight, maximumHeight);
+    return {
+        mode: 'floating',
+        x: clamp(layout.x, PANEL_FLOAT_MARGIN, Math.max(PANEL_FLOAT_MARGIN, boundsWidth - width - PANEL_FLOAT_MARGIN)),
+        y: clamp(layout.y, PANEL_FLOAT_MARGIN, Math.max(PANEL_FLOAT_MARGIN, boundsHeight - height - PANEL_FLOAT_MARGIN)),
+        width,
+        height,
+        heightMode: layout.heightMode,
+    };
+}
+/** Undock without a visual jump by adopting the panel's resolved rectangle. */
+export function floatPanelLayout(geometry, bounds) {
+    return resolvePanelGeometry({ ...geometry, mode: 'floating' }, bounds);
+}
+/** Return to the right dock, preserving width and restoring content-fit height. */
+export function dockPanelLayout(layout, bounds) {
+    return resolvePanelGeometry({ ...layout, mode: 'docked', heightMode: 'auto' }, bounds);
+}
+/** Translate a floating panel and clamp it back into the visible shell. */
+export function movePanelLayout(start, dx, dy, bounds) {
+    return resolvePanelGeometry({ ...start, mode: 'floating', x: start.x + dx, y: start.y + dy }, bounds);
+}
+/** Resize while keeping the edge opposite the active handle stationary. */
+export function resizePanelLayout(start, edge, dx, dy, bounds) {
+    if (start.mode === 'docked') {
+        if (edge !== 'left')
+            return resolvePanelGeometry(start, bounds);
+        return resolvePanelGeometry({ ...start, width: start.width - dx }, bounds);
+    }
+    const resolved = resolvePanelGeometry(start, bounds);
+    const minimumWidth = Math.min(PANEL_MIN_WIDTH, resolved.x + resolved.width - PANEL_FLOAT_MARGIN);
+    const minimumHeight = Math.min(PANEL_MIN_HEIGHT, bounds.height - resolved.y - PANEL_FLOAT_MARGIN);
+    if (edge === 'left') {
+        const right = resolved.x + resolved.width;
+        const maximumWidth = Math.max(1, Math.min(PANEL_MAX_WIDTH, right - PANEL_FLOAT_MARGIN));
+        const width = clamp(resolved.width - dx, Math.min(minimumWidth, maximumWidth), maximumWidth);
+        return { ...resolved, x: right - width, width };
+    }
+    const maximumHeight = Math.max(1, bounds.height - resolved.y - PANEL_FLOAT_MARGIN);
+    const height = clamp(resolved.height + dy, Math.min(minimumHeight, maximumHeight), maximumHeight);
+    if (edge === 'bottom')
+        return { ...resolved, height, heightMode: 'manual' };
+    const maximumWidth = Math.max(1, Math.min(PANEL_MAX_WIDTH, bounds.width - resolved.x - PANEL_FLOAT_MARGIN));
+    const width = clamp(resolved.width + dx, Math.min(minimumWidth, maximumWidth), maximumWidth);
+    return { ...resolved, width, height, heightMode: 'manual' };
+}