@wowyuarm/dsh-agent-team 0.1.0 → 0.1.1

package/packages/client-agent-team/lib/types/client/TeamAgentsPanel.d.ts

@@ -1,4 +1,4 @@
-import type { AgentTeamAddMemberRequest } from '@wowyuarm/dsh-agent-team/types';
+import type { AgentTeamAddMemberRequest, AgentTeamClientMemberStatus } from '@wowyuarm/dsh-agent-team/types';
 import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client';
 import type { TeamSidebarProps } from './slots.ts';
 interface TeamAgentsPanelProps {
@@ -8,13 +8,17 @@ interface TeamAgentsPanelProps {
     readonly loadChannels: TeamSidebarProps['loadChannels'];
     readonly addMember: TeamSidebarProps['addMember'];
     readonly updateMember: TeamSidebarProps['updateMember'];
+    readonly recoverMember: TeamSidebarProps['recoverMember'];
+    readonly restartMember: TeamSidebarProps['restartMember'];
     readonly joinChannel: TeamSidebarProps['joinChannel'];
     readonly removeChannelMember: TeamSidebarProps['removeChannelMember'];
     readonly loadModels: TeamSidebarProps['loadModels'];
+    /** The Member Session currently embedded in the conversation seat, if any. */
+    readonly memberSessionId?: AgentTeamClientMemberStatus['member']['sessionId'];
     readonly openMemberSession: TeamSidebarProps['openMemberSession'];
     readonly onCreatingChange: (request: AgentTeamAddMemberRequest, creating: boolean) => void;
     readonly t: TeamSidebarProps['t'];
 }
-export declare function TeamAgentsPanel({ workspaceId, loadMembers, subscribeChanges, loadChannels, addMember, updateMember, joinChannel, removeChannelMember, loadModels, openMemberSession, onCreatingChange, t }: TeamAgentsPanelProps): import("react").JSX.Element;
+export declare function TeamAgentsPanel({ workspaceId, loadMembers, subscribeChanges, loadChannels, addMember, updateMember, recoverMember, restartMember, joinChannel, removeChannelMember, loadModels, memberSessionId, openMemberSession, onCreatingChange, t }: TeamAgentsPanelProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=TeamAgentsPanel.d.ts.map

package/packages/client-agent-team/lib/types/client/TeamAgentsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeamAgentsPanel.d.ts","sourceRoot":"","sources":["../../../src/client/TeamAgentsPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,yBAAyB,EAM1B,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAGzE,OAAO,KAAK,EAA0B,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAQ1E,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAA;IACjC,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAA;IACrD,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;IAC/D,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;IACvD,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACjD,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;IACvD,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAA;IACrD,QAAQ,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAA;IACrE,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IACnD,QAAQ,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,CAAA;IACjE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1F,QAAQ,CAAC,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAA;CAClC;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC,EAAE,EAAE,oBAAoB,+BA8JhO"}
+{"version":3,"file":"TeamAgentsPanel.d.ts","sourceRoot":"","sources":["../../../src/client/TeamAgentsPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,yBAAyB,EAEzB,2BAA2B,EAM5B,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAGzE,OAAO,KAAK,EAAiD,gBAAgB,EAAE,MAAM,YAAY,CAAA;AASjG,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAA;IACjC,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAA;IACrD,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;IAC/D,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;IACvD,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACjD,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;IACvD,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACzD,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACzD,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAA;IACrD,QAAQ,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAA;IACrE,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IACnD,8EAA8E;IAC9E,QAAQ,CAAC,eAAe,CAAC,EAAE,2BAA2B,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAA;IAC7E,QAAQ,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,CAAA;IACjE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1F,QAAQ,CAAC,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAA;CAClC;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,mBAAmB,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC,EAAE,EAAE,oBAAoB,+BAmK/Q"}

package/packages/client-agent-team/lib/types/client/TeamAgentsPanel.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, IconChevronDownOutline14, IconEditOutline16, IconPlusOutline16, Input, Menu, Modal, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Button, IconChevronDownOutline14, IconEditOutline16, IconPlayOutline16, IconPlusOutline16, IconRefreshOutline14, Input, Menu, Modal, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
 import { TeamMemberAvatar } from "./TeamMemberAvatar.js";
 import { TeamRowMenu } from "./TeamRowMenu.js";
 import { TeamSidebarSection } from "./TeamSidebarSection.js";
+import { MultiMenuField } from "./multi-menu-field.js";
 import { useChannelMembership } from "./team-membership.js";
 import createCss from './create.module.css';
 import css from './sidebar.module.css';
-export function TeamAgentsPanel({ workspaceId, loadMembers, subscribeChanges, loadChannels, addMember, updateMember, joinChannel, removeChannelMember, loadModels, openMemberSession, onCreatingChange, t }) {
+export function TeamAgentsPanel({ workspaceId, loadMembers, subscribeChanges, loadChannels, addMember, updateMember, recoverMember, restartMember, joinChannel, removeChannelMember, loadModels, memberSessionId, openMemberSession, onCreatingChange, t }) {
     const [members, setMembers] = useState([]);
     const [channels, setChannels] = useState([]);
     const [channelRefs, setChannelRefs] = useState([]);
@@ -16,6 +17,7 @@ export function TeamAgentsPanel({ workspaceId, loadMembers, subscribeChanges, lo
     const [formOpen, setFormOpen] = useState(false);
     const [handle, setHandle] = useState('');
     const [description, setDescription] = useState('');
+    const [model, setModel] = useState(undefined);
     const [creating, setCreating] = useState(false);
     const [retryRequest, setRetryRequest] = useState();
     const triggerRef = useRef(null);
@@ -68,6 +70,7 @@ export function TeamAgentsPanel({ workspaceId, loadMembers, subscribeChanges, lo
                 });
                 setHandle('');
                 setDescription('');
+                setModel(undefined);
                 setChannelRefs([]);
                 setFormOpen(false);
                 if (result.value.status.presence === 'unavailable') {
@@ -95,12 +98,11 @@ export function TeamAgentsPanel({ workspaceId, loadMembers, subscribeChanges, lo
         event.preventDefault();
         const normalizedHandle = handle.trim();
         const normalizedDescription = description.trim();
-        if (normalizedHandle.length === 0 || normalizedDescription.length === 0 || creating)
-            return;
-        if (channelRefs.length === 0)
+        if (normalizedHandle.length === 0 || creating)
             return;
         const sameRequest = retryRequest !== undefined && retryRequest.workspaceId === workspaceId
             && retryRequest.handle === normalizedHandle && retryRequest.description === normalizedDescription
+            && sameModel(retryRequest.model, model)
             && retryRequest.channelRefs.length === channelRefs.length && retryRequest.channelRefs.every(ref => channelRefs.includes(ref));
         void provision(sameRequest ? retryRequest : {
             requestId: crypto.randomUUID(),
@@ -109,47 +111,66 @@ export function TeamAgentsPanel({ workspaceId, loadMembers, subscribeChanges, lo
             description: normalizedDescription,
             presetId: 'team-member',
             channelRefs,
+            ...(model === undefined ? {} : { model }),
         });
     };
-    return (_jsxs("div", { className: css.panel, children: [_jsx(Modal, { open: formOpen, onClose: closeForm, title: t('addAgent'), closeLabel: t('close'), contentClassName: createCss.dialogContent, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", disabled: creating, onClick: closeForm, children: t('cancel') }), _jsx(Button, { type: "submit", form: "team-agent-create-form", variant: "primary", disabled: creating || handle.trim().length === 0 || description.trim().length === 0 || channelRefs.length === 0, children: creating ? t('creatingAgent') : t('createAgent') })] }), children: _jsxs("form", { id: "team-agent-create-form", className: createCss.form, onSubmit: submit, children: [_jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('agentName') }), _jsx(Input, { className: createCss.input, value: handle, onChange: event => { setHandle(event.target.value); setRetryRequest(undefined); }, disabled: creating, autoFocus: true })] }), _jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('agentDescription') }), _jsx(Input, { className: createCss.input, value: description, onChange: event => { setDescription(event.target.value); setRetryRequest(undefined); }, disabled: creating })] }), _jsxs("fieldset", { className: createCss.field, children: [_jsx("legend", { children: t('initialChannels') }), channels.length === 0 ? _jsx("span", { children: t('noChannelsForAgent') }) : channels.map(channel => _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: channelRefs.includes(channel.channelRef), disabled: creating, onChange: event => {
-                                                setChannelRefs(current => event.target.checked ? [...current, channel.channelRef] : current.filter(ref => ref !== channel.channelRef));
-                                                setRetryRequest(undefined);
-                                            } }), " ", channel.name] }, channel.channelRef))] }), formOpen && error !== undefined && _jsx("p", { className: createCss.error, role: "alert", children: error })] }) }), _jsxs(TeamSidebarSection, { title: t('agents'), actions: (_jsx(Tooltip, { label: t('addAgent'), delayMs: 500, children: _jsx("button", { ref: triggerRef, type: "button", className: css.iconButton, "aria-label": t('addAgent'), onClick: () => { setError(undefined); setFormOpen(true); }, children: _jsx(IconPlusOutline16, { size: 14 }) }) })), children: [loading && members.length === 0 && _jsx("p", { className: css.emptyState, children: t('loadingAgents') }), !loading && members.length === 0 && _jsx("p", { className: css.emptyState, children: t('emptyAgents') }), _jsx("div", { className: css.agentList, children: members.map(status => (_jsx(AgentRow, { status: status, channels: channels, loadChannels: loadChannels, updateMember: updateMember, joinChannel: joinChannel, removeChannelMember: removeChannelMember, loadModels: loadModels, openMemberSession: openMemberSession, onUpdated: () => { void refresh(); }, t: t }, status.member.memberId))) })] }), !formOpen && error !== undefined && (_jsxs("div", { className: css.retryError, role: "alert", children: [_jsx("span", { children: error }), retryRequest !== undefined && _jsx("button", { type: "button", className: css.textButton, disabled: creating, onClick: () => { setFormOpen(true); }, children: t('retry') })] }))] }));
+    return (_jsxs("div", { className: css.panel, children: [_jsx(Modal, { open: formOpen, onClose: closeForm, title: t('addAgent'), closeLabel: t('close'), contentClassName: createCss.dialogContent, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", disabled: creating, onClick: closeForm, children: t('cancel') }), _jsx(Button, { type: "submit", form: "team-agent-create-form", variant: "primary", disabled: creating || handle.trim().length === 0, children: creating ? t('creatingAgent') : t('createAgent') })] }), children: _jsxs("form", { id: "team-agent-create-form", className: createCss.form, onSubmit: submit, children: [_jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('agentName') }), _jsx(Input, { className: createCss.input, value: handle, onChange: event => { setHandle(event.target.value); setRetryRequest(undefined); }, disabled: creating, autoFocus: true })] }), _jsxs("label", { className: createCss.field, children: [_jsxs("span", { children: [t('agentDescription'), t('optionalSuffix')] }), _jsx(Input, { className: createCss.input, value: description, placeholder: t('agentDescriptionPlaceholder'), onChange: event => { setDescription(event.target.value); setRetryRequest(undefined); }, disabled: creating })] }), _jsx(ModelPickerField, { model: model, onModelChange: choice => { setModel(choice); setRetryRequest(undefined); }, loadModels: loadModels, disabled: creating, t: t }), _jsx(MultiMenuField, { label: `${t('initialChannels')}${t('optionalSuffix')}`, disabled: creating, options: channels.map(channel => ({ id: channel.channelRef, label: channel.name })), selected: channelRefs, onToggle: ref => {
+                                setChannelRefs(current => current.includes(ref) ? current.filter(item => item !== ref) : [...current, ref]);
+                                setRetryRequest(undefined);
+                            }, emptyText: t('noChannelsForAgent'), triggerEmptyLabel: t('channelsPickerEmpty'), formatCount: count => t('channelsPickerCount', { count }) }), formOpen && error !== undefined && _jsx("p", { className: createCss.error, role: "alert", children: error })] }) }), _jsxs(TeamSidebarSection, { title: t('agents'), actions: (_jsx(Tooltip, { label: t('addAgent'), delayMs: 500, children: _jsx("button", { ref: triggerRef, type: "button", className: css.iconButton, "aria-label": t('addAgent'), onClick: () => { setError(undefined); setFormOpen(true); }, children: _jsx(IconPlusOutline16, { size: 14 }) }) })), children: [loading && members.length === 0 && _jsx("p", { className: css.emptyState, children: t('loadingAgents') }), !loading && members.length === 0 && _jsx("p", { className: css.emptyState, children: t('emptyAgents') }), _jsx("div", { className: css.agentList, children: members.map(status => (_jsx(AgentRow, { status: status, ...(memberSessionId === undefined ? {} : { current: status.member.sessionId === memberSessionId }), channels: channels, loadChannels: loadChannels, updateMember: updateMember, recoverMember: recoverMember, restartMember: restartMember, joinChannel: joinChannel, removeChannelMember: removeChannelMember, loadModels: loadModels, openMemberSession: openMemberSession, onUpdated: () => { void refresh(); }, t: t }, status.member.memberId))) })] }), !formOpen && error !== undefined && (_jsxs("div", { className: css.retryError, role: "alert", children: [_jsx("span", { children: error }), retryRequest !== undefined && _jsx("button", { type: "button", className: css.textButton, disabled: creating, onClick: () => { setFormOpen(true); }, children: t('retry') })] }))] }));
 }
 /**
  * One sidebar Agent row: the select button opens the Member's own Session
  * conversation page, the avatar carries identity plus the presence badge, and
  * the row menu opens the editor.
  */
-function AgentRow({ status, channels, loadChannels, updateMember, joinChannel, removeChannelMember, loadModels, openMemberSession, onUpdated, t }) {
+function AgentRow({ status, current, channels, loadChannels, updateMember, recoverMember, restartMember, joinChannel, removeChannelMember, loadModels, openMemberSession, onUpdated, t }) {
     const [menuOpen, setMenuOpen] = useState(false);
     const [editing, setEditing] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.agentRow, "data-menu-open": menuOpen || undefined, children: [_jsxs("button", { type: "button", className: css.agentSelect, "aria-label": t('openAgentSession', { name: status.member.handle }), onClick: () => { openMemberSession(status.member.sessionId); }, children: [_jsx(TeamMemberAvatar, { status: status, t: t }), _jsxs("span", { className: css.agentCopy, children: [_jsx("strong", { children: status.member.handle }), _jsx("small", { children: status.member.description })] })] }), _jsx("span", { className: css.rowMenu, children: _jsx(TeamRowMenu, { label: t('actionsAgent', { name: status.member.handle }), items: [{ id: 'edit', label: t('editAgent'), icon: _jsx(IconEditOutline16, {}) }], onSelect: () => { setEditing(true); }, onOpenChange: setMenuOpen }) })] }), editing && (_jsx(AgentEditorDialog, { status: status, channels: channels, loadChannels: loadChannels, updateMember: updateMember, joinChannel: joinChannel, removeChannelMember: removeChannelMember, loadModels: loadModels, onCommitted: onUpdated, onClose: () => { setEditing(false); }, t: t }))] }));
+    const resume = async () => {
+        await recoverMember({
+            requestId: crypto.randomUUID(),
+            workspaceId: status.member.workspaceId,
+            memberId: status.member.memberId,
+        });
+        await onUpdated();
+    };
+    const restart = async () => {
+        await restartMember({
+            requestId: crypto.randomUUID(),
+            workspaceId: status.member.workspaceId,
+            memberId: status.member.memberId,
+        });
+        await onUpdated();
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.agentRow, "data-menu-open": menuOpen || undefined, children: [_jsxs("button", { type: "button", className: css.agentSelect, "aria-label": t('openAgentSession', { name: status.member.handle }), "aria-current": current ? 'page' : undefined, onClick: () => { openMemberSession(status.member.sessionId); }, children: [_jsx(TeamMemberAvatar, { status: status, t: t }), _jsxs("span", { className: css.agentCopy, children: [_jsx("strong", { children: status.member.handle }), _jsx("small", { children: status.member.description })] })] }), _jsx("span", { className: css.rowMenu, children: _jsx(TeamRowMenu, { label: t('actionsAgent', { name: status.member.handle }), items: [
+                                { id: 'edit', label: t('editAgent'), icon: _jsx(IconEditOutline16, {}) },
+                                ...(status.presence === 'error' ? [{ id: 'resume', label: t('resumeAgent'), icon: _jsx(IconPlayOutline16, {}) }] : []),
+                                { id: 'restart', label: t('restartAgent'), icon: _jsx(IconRefreshOutline14, {}) },
+                            ], onSelect: (id) => {
+                                if (id === 'resume')
+                                    void resume();
+                                else if (id === 'restart')
+                                    void restart();
+                                else
+                                    setEditing(true);
+                            }, onOpenChange: setMenuOpen }) })] }), editing && (_jsx(AgentEditorDialog, { status: status, channels: channels, loadChannels: loadChannels, updateMember: updateMember, joinChannel: joinChannel, removeChannelMember: removeChannelMember, loadModels: loadModels, onCommitted: onUpdated, onClose: () => { setEditing(false); }, t: t }))] }));
 }
 /** Model option key inside one editor; opaque and resolved against the loaded groups. */
 function modelKey(provider, model) {
     return `${provider}\u0000${model}`;
 }
 /**
- * Agent editor: handle, description, and per-Member model selection commit
- * through one durable update; Channel membership below keeps its own
- * immediate add/remove flow.
+ * Shared provider/model dropdown for the create and edit forms. The option
+ * list rides the shared Menu primitive (one leading "follow Host default"
+ * row, then non-selectable provider headings) with a capped, internally
+ * scrolling card so growing model catalogs cannot stretch the dialog.
  */
-function AgentEditorDialog({ status, channels, loadChannels, updateMember, joinChannel, removeChannelMember, loadModels, onCommitted, onClose, t }) {
-    const memberId = status.member.memberId;
-    const [handle, setHandle] = useState(status.member.handle);
-    const [description, setDescription] = useState(status.member.description);
-    const [model, setModel] = useState(status.member.model === undefined ? undefined : [status.member.model.provider, status.member.model.model]);
+function ModelPickerField({ model, onModelChange, loadModels, disabled, t }) {
     const [groups, setGroups] = useState();
     const [modelsError, setModelsError] = useState();
-    const [modelOpen, setModelOpen] = useState(false);
-    const [saving, setSaving] = useState(false);
-    const [error, setError] = useState();
-    const pendingRequest = useRef();
-    // Membership comes from a fresh projection at open time so stale checkbox
-    // state never flips a committed fact backwards.
-    const [memberships, setMemberships] = useState();
-    const [loadError, setLoadError] = useState();
+    const [open, setModelOpen] = useState(false);
+    const [effortOpen, setEffortOpen] = useState(false);
     useEffect(() => {
         let mounted = true;
         void loadModels().then(result => {
@@ -165,6 +186,56 @@ function AgentEditorDialog({ status, channels, loadChannels, updateMember, joinC
         });
         return () => { mounted = false; };
     }, [loadModels]);
+    const items = [{ id: '', label: t('modelFollowDefault') }];
+    const byKey = new Map();
+    for (const group of groups ?? []) {
+        items.push({ type: 'label', id: `model-group:${group.id}`, text: group.name });
+        for (const entry of group.models) {
+            const key = modelKey(group.id, entry.id);
+            byKey.set(key, { provider: group.id, id: entry.id, name: entry.name, efforts: entry.reasoning?.efforts ?? [] });
+            items.push({ id: key, label: entry.name });
+        }
+    }
+    const selectedModelKey = model === undefined ? '' : modelKey(model.provider, model.model);
+    const triggerLabel = model === undefined
+        ? t('modelFollowDefault')
+        : byKey.get(selectedModelKey)?.name ?? `${model.provider} / ${model.model}`;
+    // The effort sub-row only makes sense for a pinned model with adapter-exposed
+    // efforts; following the Host default inherits the operator's whole selection.
+    const efforts = model === undefined ? [] : byKey.get(selectedModelKey)?.efforts ?? [];
+    const effortItems = [{ id: '', label: t('effortFollowDefault') }, ...efforts.map(effort => ({ id: effort.id, label: effort.name }))];
+    const selectedEffort = model?.reasoningEffort ?? '';
+    const effortTriggerLabel = model === undefined || selectedEffort === ''
+        ? t('effortFollowDefault')
+        : efforts.find(effort => effort.id === selectedEffort)?.name ?? selectedEffort;
+    return _jsxs("div", { className: createCss.field, children: [_jsx("span", { children: t('memberModel') }), groups === undefined && modelsError === undefined && _jsx("small", { className: css.editHint, children: t('modelsLoading') }), modelsError !== undefined && _jsx("small", { className: css.editHint, children: t('modelsLoadFailed', { message: modelsError }) }), groups !== undefined && (_jsx(Menu, { open: open, portal: true, className: createCss.menuCap, items: items, selectedId: selectedModelKey, onSelect: key => {
+                    setModelOpen(false);
+                    const choice = byKey.get(key);
+                    onModelChange(choice === undefined ? undefined : { provider: choice.provider, model: choice.id });
+                }, onClose: () => { setModelOpen(false); }, anchor: _jsxs("button", { type: "button", className: createCss.selectTrigger, "aria-label": t('memberModel'), "aria-haspopup": "listbox", "aria-expanded": open, disabled: disabled, onClick: () => { setModelOpen(value => !value); }, children: [_jsx("span", { className: createCss.selectValue, children: triggerLabel }), _jsx("span", { className: `${createCss.chevron} ${open ? createCss.chevronOpen : ''}`, "aria-hidden": true, children: _jsx(IconChevronDownOutline14, {}) })] }) })), model !== undefined && efforts.length > 0 && (_jsx(Menu, { open: effortOpen, portal: true, className: createCss.menuCap, items: effortItems, selectedId: selectedEffort, onSelect: key => {
+                    setEffortOpen(false);
+                    onModelChange(key === ''
+                        ? { provider: model.provider, model: model.model }
+                        : { provider: model.provider, model: model.model, reasoningEffort: key });
+                }, onClose: () => { setEffortOpen(false); }, anchor: _jsxs("button", { type: "button", className: createCss.selectTrigger, "aria-label": t('reasoningEffort'), "aria-haspopup": "listbox", "aria-expanded": effortOpen, disabled: disabled, onClick: () => { setEffortOpen(value => !value); }, children: [_jsx("span", { className: createCss.selectValue, children: `${t('reasoningEffort')} · ${effortTriggerLabel}` }), _jsx("span", { className: `${createCss.chevron} ${effortOpen ? createCss.chevronOpen : ''}`, "aria-hidden": true, children: _jsx(IconChevronDownOutline14, {}) })] }) }))] });
+}
+/**
+ * Agent editor: handle, description, and per-Member model selection commit
+ * through one durable update; Channel membership below keeps its own
+ * immediate add/remove flow.
+ */
+function AgentEditorDialog({ status, channels, loadChannels, updateMember, joinChannel, removeChannelMember, loadModels, onCommitted, onClose, t }) {
+    const memberId = status.member.memberId;
+    const [handle, setHandle] = useState(status.member.handle);
+    const [description, setDescription] = useState(status.member.description);
+    const [model, setModel] = useState(status.member.model);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState();
+    const pendingRequest = useRef();
+    // Membership comes from a fresh projection at open time so stale checkbox
+    // state never flips a committed fact backwards.
+    const [memberships, setMemberships] = useState();
+    const [loadError, setLoadError] = useState();
     useEffect(() => {
         let mounted = true;
         void loadChannels({ workspaceId: status.member.workspaceId, topLevelOnly: true, includeActivities: false, limit: 1 }).then(result => {
@@ -190,43 +261,23 @@ function AgentEditorDialog({ status, channels, loadChannels, updateMember, joinC
     });
     // A successful join appends the durable fact; removal filters it out above.
     const joinedChannels = new Set((memberships ?? []).filter(item => item.memberId === memberId).map(item => item.channelRef));
-    // The provider-grouped option list rides the shared Menu primitive: one
-    // leading "follow Host default" row, then a non-selectable heading per
-    // provider group. Keys resolve back through the map, never by parsing.
-    const modelChoices = (() => {
-        const items = [{ id: '', label: t('modelFollowDefault') }];
-        const byKey = new Map();
-        for (const group of groups ?? []) {
-            items.push({ type: 'label', id: `model-group:${group.id}`, text: group.name });
-            for (const entry of group.models) {
-                const key = modelKey(group.id, entry.id);
-                byKey.set(key, { provider: group.id, id: entry.id, name: entry.name });
-                items.push({ id: key, label: entry.name });
-            }
-        }
-        return { items, byKey };
-    })();
-    const selectedModelKey = model === undefined ? '' : modelKey(model[0], model[1]);
-    const modelTriggerLabel = model === undefined
-        ? t('modelFollowDefault')
-        : modelChoices.byKey.get(selectedModelKey)?.name ?? `${model[0]} / ${model[1]}`;
     const dirty = handle.trim() !== status.member.handle || description.trim() !== status.member.description
-        || !sameModel(model, status.member.model === undefined ? undefined : [status.member.model.provider, status.member.model.model]);
+        || !sameModel(model, status.member.model);
     const submit = async (event) => {
         event.preventDefault();
         const normalizedHandle = handle.trim();
         const normalizedDescription = description.trim();
-        if (saving || !dirty || normalizedHandle.length === 0 || normalizedDescription.length === 0)
+        if (saving || !dirty || normalizedHandle.length === 0)
             return;
         const payload = {
             memberId,
             handle: normalizedHandle,
             description: normalizedDescription,
-            ...(model === undefined ? {} : { model: { provider: model[0], model: model[1] } }),
+            ...(model === undefined ? {} : { model }),
         };
         const samePending = pendingRequest.current !== undefined && pendingRequest.current.memberId === payload.memberId
             && pendingRequest.current.handle === payload.handle && pendingRequest.current.description === payload.description
-            && sameModel(pendingRequest.current.model === undefined ? undefined : [pendingRequest.current.model.provider, pendingRequest.current.model.model], model);
+            && sameModel(pendingRequest.current.model, model);
         const request = samePending ? pendingRequest.current : {
             requestId: crypto.randomUUID(),
             ...payload,
@@ -252,12 +303,7 @@ function AgentEditorDialog({ status, channels, loadChannels, updateMember, joinC
             setSaving(false);
         }
     };
-    return (_jsx(Modal, { open: true, onClose: onClose, title: t('editAgent'), description: `@${status.member.handle}`, closeLabel: t('close'), contentClassName: createCss.dialogContent, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", disabled: saving, onClick: onClose, children: t('cancel') }), _jsx(Button, { type: "submit", form: "team-agent-edit-form", variant: "primary", disabled: saving || !dirty || handle.trim().length === 0 || description.trim().length === 0, children: saving ? t('editSaving') : t('editSave') })] }), children: _jsxs("form", { id: "team-agent-edit-form", className: createCss.form, onSubmit: event => { void submit(event); }, children: [_jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('agentName') }), _jsx(Input, { className: createCss.input, value: handle, onChange: event => { setHandle(event.target.value); pendingRequest.current = undefined; }, disabled: saving, autoFocus: true })] }), _jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('agentDescription') }), _jsx(Input, { className: createCss.input, value: description, onChange: event => { setDescription(event.target.value); pendingRequest.current = undefined; }, disabled: saving })] }), _jsxs("div", { className: createCss.field, children: [_jsx("span", { children: t('memberModel') }), groups === undefined && modelsError === undefined && _jsx("small", { className: css.editHint, children: t('modelsLoading') }), modelsError !== undefined && _jsx("small", { className: css.editHint, children: t('modelsLoadFailed', { message: modelsError }) }), groups !== undefined && (_jsx(Menu, { open: modelOpen, portal: true, items: modelChoices.items, selectedId: selectedModelKey, onSelect: (key) => {
-                                setModelOpen(false);
-                                pendingRequest.current = undefined;
-                                const choice = modelChoices.byKey.get(key);
-                                setModel(choice === undefined ? undefined : [choice.provider, choice.id]);
-                            }, onClose: () => { setModelOpen(false); }, anchor: _jsxs("button", { type: "button", className: createCss.selectTrigger, "aria-label": t('memberModel'), "aria-haspopup": "listbox", "aria-expanded": modelOpen, disabled: saving, onClick: () => { setModelOpen(value => !value); }, children: [_jsx("span", { className: createCss.selectValue, children: modelTriggerLabel }), _jsx("span", { className: `${createCss.chevron} ${modelOpen ? createCss.chevronOpen : ''}`, "aria-hidden": true, children: _jsx(IconChevronDownOutline14, {}) })] }) }))] }), _jsxs("fieldset", { className: createCss.memberPicker, disabled: saving, children: [_jsx("legend", { children: t('channelMembersSection') }), channels.map(channel => {
+    return (_jsx(Modal, { open: true, onClose: onClose, title: t('editAgent'), description: `@${status.member.handle}`, closeLabel: t('close'), contentClassName: createCss.dialogContent, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", disabled: saving, onClick: onClose, children: t('cancel') }), _jsx(Button, { type: "submit", form: "team-agent-edit-form", variant: "primary", disabled: saving || !dirty || handle.trim().length === 0, children: saving ? t('editSaving') : t('editSave') })] }), children: _jsxs("form", { id: "team-agent-edit-form", className: createCss.form, onSubmit: event => { void submit(event); }, children: [_jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('agentName') }), _jsx(Input, { className: createCss.input, value: handle, onChange: event => { setHandle(event.target.value); pendingRequest.current = undefined; }, disabled: saving, autoFocus: true })] }), _jsxs("label", { className: createCss.field, children: [_jsxs("span", { children: [t('agentDescription'), t('optionalSuffix')] }), _jsx(Input, { className: createCss.input, value: description, placeholder: t('agentDescriptionPlaceholder'), onChange: event => { setDescription(event.target.value); pendingRequest.current = undefined; }, disabled: saving })] }), _jsx(ModelPickerField, { model: model, onModelChange: choice => { pendingRequest.current = undefined; setModel(choice); }, loadModels: loadModels, disabled: saving, t: t }), _jsxs("fieldset", { className: createCss.memberPicker, disabled: saving, children: [_jsx("legend", { children: t('channelMembersSection') }), channels.map(channel => {
                             const joined = joinedChannels.has(channel.channelRef);
                             const rowPending = membership.pending.has(channel.channelRef);
                             const disabled = rowPending || (!joined && status.presence === 'unavailable');
@@ -270,5 +316,5 @@ function sameModel(left, right) {
         return true;
     if (left === undefined || right === undefined)
         return false;
-    return left[0] === right[0] && left[1] === right[1];
+    return left.provider === right.provider && left.model === right.model && left.reasoningEffort === right.reasoningEffort;
 }

package/packages/client-agent-team/lib/types/client/TeamChannelPage.d.ts

@@ -1,12 +1,16 @@
 import type { AgentTeamChannelRef } from '@wowyuarm/dsh-agent-team/types';
 import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client';
 import type { TeamConversationProps } from './slots.ts';
+import type { TeamDraftStore } from './drafts.ts';
 interface TeamChannelPageProps {
     readonly workspaceId: WorkspaceId;
     readonly channelRef: AgentTeamChannelRef;
     readonly loadChannels: TeamConversationProps['loadChannels'];
     readonly subscribeChanges: TeamConversationProps['subscribeChanges'];
     readonly loadMembers: TeamConversationProps['loadMembers'];
+    readonly drafts: TeamDraftStore;
+    readonly getAttachment: TeamConversationProps['getAttachment'];
+    readonly putAttachment: TeamConversationProps['putAttachment'];
     readonly sendMessage: TeamConversationProps['sendMessage'];
     readonly joinChannel: TeamConversationProps['joinChannel'];
     readonly removeChannelMember: TeamConversationProps['removeChannelMember'];
@@ -14,6 +18,6 @@ interface TeamChannelPageProps {
     readonly backToChannels: TeamConversationProps['backToChannels'];
     readonly t: TeamConversationProps['t'];
 }
-export declare function TeamChannelPage({ workspaceId, channelRef, loadChannels, subscribeChanges, loadMembers, sendMessage, joinChannel, removeChannelMember, selectThread, backToChannels, t }: TeamChannelPageProps): import("react").JSX.Element;
+export declare function TeamChannelPage({ workspaceId, channelRef, loadChannels, subscribeChanges, loadMembers, drafts, putAttachment, getAttachment, sendMessage, joinChannel, removeChannelMember, selectThread, backToChannels, t }: TeamChannelPageProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=TeamChannelPage.d.ts.map

package/packages/client-agent-team/lib/types/client/TeamChannelPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeamChannelPage.d.ts","sourceRoot":"","sources":["../../../src/client/TeamChannelPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA+B,mBAAmB,EAAoF,MAAM,gCAAgC,CAAA;AACxL,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAEzE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAYvD,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAA;IACjC,QAAQ,CAAC,UAAU,EAAE,mBAAmB,CAAA;IACxC,QAAQ,CAAC,YAAY,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAA;IAC5D,QAAQ,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAA;IACpE,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAA;IAC1D,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAA;IAC1D,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAA;IAC1D,QAAQ,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,qBAAqB,CAAC,CAAA;IAC1E,QAAQ,CAAC,YAAY,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAA;IAC5D,QAAQ,CAAC,cAAc,EAAE,qBAAqB,CAAC,gBAAgB,CAAC,CAAA;IAChE,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAA;CACvC;AAmBD,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC,EAAE,EAAE,oBAAoB,+BA+P7M"}
+{"version":3,"file":"TeamChannelPage.d.ts","sourceRoot":"","sources":["../../../src/client/TeamChannelPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA+B,mBAAmB,EAAoF,MAAM,gCAAgC,CAAA;AACxL,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAEzE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAGvD,OAAO,KAAK,EAAgB,cAAc,EAAE,MAAM,aAAa,CAAA;AAa/D,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAA;IACjC,QAAQ,CAAC,UAAU,EAAE,mBAAmB,CAAA;IACxC,QAAQ,CAAC,YAAY,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAA;IAC5D,QAAQ,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAA;IACpE,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAA;IAC/B,QAAQ,CAAC,aAAa,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAA;IAC9D,QAAQ,CAAC,aAAa,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAA;IAC9D,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAA;IAC1D,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAA;IAC1D,QAAQ,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,qBAAqB,CAAC,CAAA;IAC1E,QAAQ,CAAC,YAAY,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAA;IAC5D,QAAQ,CAAC,cAAc,EAAE,qBAAqB,CAAC,gBAAgB,CAAC,CAAA;IAChE,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAA;CACvC;AAmBD,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC,EAAE,EAAE,oBAAoB,+BA8RnP"}

package/packages/client-agent-team/lib/types/client/TeamChannelPage.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { Button, IconChevronLeftOutline14, IconChevronRightOutline14, Modal, StateDot } from '@deepseek-ai/dsh-client-ui-primitives';
+import { bytesToBase64 } from "./attachment-preview.js";
 import { TeamComposer } from "./TeamComposer.js";
 import { TeamPresenceDot } from "./TeamPresenceDot.js";
 import { TeamMessage } from "./TeamMessage.js";
+import { TeamRunDivider } from "./TeamRunDivider.js";
 import { formatTaskStatus, taskStatusDot, mentionNamesOf } from "./team-formatters.js";
 import { useChannelMembership } from "./team-membership.js";
 import { useTimelineScroll } from "./timeline-scroll.js";
-import { chunkRunsWithDays } from "./team-separators.js";
+import { chunkRunsWithDays, isRunGap } from "./team-separators.js";
 import channelCss from './channel.module.css';
 import css from './conversation.module.css';
 import threadCss from './thread.module.css';
@@ -27,17 +29,20 @@ function mergeChannelView(current, fresh) {
         hasMore: fresh.hasMore || current.cursor < fresh.cursor,
     };
 }
-export function TeamChannelPage({ workspaceId, channelRef, loadChannels, subscribeChanges, loadMembers, sendMessage, joinChannel, removeChannelMember, selectThread, backToChannels, t }) {
+export function TeamChannelPage({ workspaceId, channelRef, loadChannels, subscribeChanges, loadMembers, drafts, putAttachment, getAttachment, sendMessage, joinChannel, removeChannelMember, selectThread, backToChannels, t }) {
     const [view, setView] = useState();
     const [members, setMembers] = useState([]);
-    const [draft, setDraft] = useState('');
     const [error, setError] = useState();
+    const [pendingFiles, setPendingFiles] = useState([]);
     const [statusMessage, setStatusMessage] = useState();
     const [loading, setLoading] = useState(true);
     const [pending, setPending] = useState(false);
     const [loadingOlder, setLoadingOlder] = useState(false);
-    const [recipients, setRecipients] = useState(new Set());
     const [managingMembers, setManagingMembers] = useState(false);
+    // The composer draft lives in the keyed draft cache: view switches unmount
+    // this page, and a refresh must not cost the half-written message either.
+    const draftKey = `channel:${channelRef}`;
+    const { draft, recipients } = useSyncExternalStore(drafts.subscribe, () => drafts.getSnapshot(draftKey));
     const manageTriggerRef = useRef(null);
     const memberListRef = useRef(null);
     const mountedRef = useRef(false);
@@ -112,7 +117,6 @@ export function TeamChannelPage({ workspaceId, channelRef, loadChannels, subscri
         setView(undefined);
         setError(undefined);
         setLoading(true);
-        setRecipients(new Set());
         setManagingMembers(false);
         void refresh();
         const disposers = [
@@ -179,19 +183,39 @@ export function TeamChannelPage({ workspaceId, channelRef, loadChannels, subscri
     // definitive outcomes (committed or rejected) start the next send fresh.
     const pendingSendId = useRef();
     const send = async () => {
+        console.log('DBG send entry pending=%s draft=%j files=%d', pending, draft, pendingFiles.length);
         if (pending || draft.trim() === '')
             return;
         const recipientIds = [...recipients].sort();
         const requestId = pendingSendId.current ?? crypto.randomUUID();
         pendingSendId.current = requestId;
-        const request = {
-            requestId, workspaceId,
-            channelRef, body: draft.trim(), recipients: recipientIds,
-        };
         setPending(true);
         setError(undefined);
         setStatusMessage(undefined);
         try {
+            // Upload chosen files first; any failure aborts the send with the
+            // existing error surface and keeps the chips for a retry.
+            const attachmentIds = [];
+            for (const file of pendingFiles) {
+                const uploaded = await putAttachment({
+                    requestId: crypto.randomUUID(),
+                    workspaceId,
+                    name: file.name,
+                    mediaType: file.type === '' ? undefined : file.type,
+                    bytesBase64: bytesToBase64(new Uint8Array(await file.arrayBuffer())),
+                });
+                if (!uploaded.ok) {
+                    pendingSendId.current = undefined;
+                    setError(uploaded.error.message);
+                    return;
+                }
+                attachmentIds.push(uploaded.value.attachmentId);
+            }
+            const request = {
+                requestId, workspaceId,
+                channelRef, body: draft.trim(), recipients: recipientIds,
+                ...(attachmentIds.length === 0 ? {} : { attachments: attachmentIds }),
+            };
             const result = await sendMessage(request);
             if (!result.ok) {
                 pendingSendId.current = undefined;
@@ -200,8 +224,8 @@ export function TeamChannelPage({ workspaceId, channelRef, loadChannels, subscri
             else if (result.value.kind === 'committed') {
                 pendingSendId.current = undefined;
                 await refresh();
-                setDraft('');
-                setRecipients(new Set());
+                drafts.clear(draftKey);
+                setPendingFiles([]);
                 setStatusMessage(undefined);
             }
             else if (result.value.kind === 'confirmation_required') {
@@ -233,11 +257,12 @@ export function TeamChannelPage({ workspaceId, channelRef, loadChannels, subscri
                                     const senderStatus = members.find(member => member.member.memberId === item.message.sender);
                                     const human = item.message.sender === view.humanMemberId;
                                     const sender = human ? t('human') : senderStatus?.member.handle ?? item.message.sender;
-                                    return _jsx(TeamMessage, { senderName: sender, memberId: item.message.sender, human: human, body: item.message.body, occurredAt: item.message.occurredAt, mentionNames: mentionNamesOf(item.mentions, mentionHandlesMap), grouped: index > 0, ...(senderStatus === undefined ? {} : { senderTitle: senderStatus.member.description }), children: item.message.topLevel && _jsxs("button", { type: "button", className: channelCss.taskFooter, "aria-label": t('openTask', { number: item.taskNumber }), onClick: () => { selectThread(item.task.taskRef, item.thread.threadRef, channelRef, item.taskNumber); }, children: [_jsx("span", { className: channelCss.taskDot, children: (() => {
-                                                        const dot = taskStatusDot(item.task.status);
-                                                        return dot === 'ongoing' || dot === 'warning' || dot === 'done'
-                                                            ? _jsx(StateDot, { size: 8, state: dot })
-                                                            : _jsx("span", { className: channelCss.taskDotQuiet, "data-variant": dot });
-                                                    })() }), _jsx("span", { className: channelCss.taskNumber, children: t('taskLabel', { number: item.taskNumber }) }), _jsx("span", { className: channelCss.taskStatus, children: formatTaskStatus(item.task.status, t) }), _jsx("span", { className: channelCss.taskCount, children: t('taskMessageCount', { count: item.messageCount }) }), _jsx("span", { className: channelCss.taskArrow, "aria-hidden": "true", children: _jsx(IconChevronRightOutline14, { size: 12 }) })] }) }, item.message.messageRef);
-                                }) }, `run-${block.items[0].message.messageRef}`))] }) }), channel !== undefined ? _jsx(TeamComposer, { members: channelMembers, recipients: recipients, draft: draft, pending: pending, ...(statusMessage === undefined ? {} : { confirmation: statusMessage }), ...(error === undefined ? {} : { error }), onDraftChange: next => { setDraft(next); setStatusMessage(undefined); }, onRecipientsChange: next => { setRecipients(next); setStatusMessage(undefined); }, onSubmit: () => { void send(); }, t: t }) : _jsx("div", {})] });
+                                    return _jsxs(Fragment, { children: [isRunGap(index > 0 ? block.items[index - 1].message.occurredAt : undefined, item.message.occurredAt)
+                                                && _jsx(TeamRunDivider, { occurredAt: item.message.occurredAt }), _jsx(TeamMessage, { senderName: sender, memberId: item.message.sender, human: human, body: item.message.body, attachments: item.message.attachments, loadAttachment: getAttachment, t: t, occurredAt: item.message.occurredAt, mentionNames: mentionNamesOf(item.mentions, mentionHandlesMap), grouped: index > 0, ...(senderStatus === undefined ? {} : { senderTitle: senderStatus.member.description }), children: item.message.topLevel && _jsxs("button", { type: "button", className: channelCss.taskFooter, "aria-label": t('openTask', { number: item.taskNumber }), onClick: () => { selectThread(item.task.taskRef, item.thread.threadRef, channelRef, item.taskNumber); }, children: [_jsx("span", { className: channelCss.taskDot, children: (() => {
+                                                                const dot = taskStatusDot(item.task.status);
+                                                                return dot === 'ongoing' || dot === 'warning' || dot === 'done'
+                                                                    ? _jsx(StateDot, { size: 8, state: dot })
+                                                                    : _jsx("span", { className: channelCss.taskDotQuiet, "data-variant": dot });
+                                                            })() }), _jsx("span", { className: channelCss.taskNumber, children: t('taskLabel', { number: item.taskNumber }) }), _jsx("span", { className: channelCss.taskStatus, children: formatTaskStatus(item.task.status, t) }), _jsx("span", { className: channelCss.taskCount, children: t('taskMessageCount', { count: item.messageCount }) }), _jsx("span", { className: channelCss.taskArrow, "aria-hidden": "true", children: _jsx(IconChevronRightOutline14, { size: 12 }) })] }) })] }, item.message.messageRef);
+                                }) }, `run-${block.items[0].message.messageRef}`))] }) }), channel !== undefined ? _jsx(TeamComposer, { members: channelMembers, recipients: recipients, draft: draft, pending: pending, ...(statusMessage === undefined ? {} : { confirmation: statusMessage }), ...(error === undefined ? {} : { error }), onDraftChange: next => { drafts.writeDraft(draftKey, next); setStatusMessage(undefined); }, onRecipientsChange: next => { drafts.writeRecipients(draftKey, next); setStatusMessage(undefined); }, onSubmit: () => { void send(); }, pendingFiles: pendingFiles, onFilesChange: setPendingFiles, t: t }, draftKey) : _jsx("div", {})] });
 }

package/packages/client-agent-team/lib/types/client/TeamChannelsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeamChannelsPanel.d.ts","sourceRoot":"","sources":["../../../src/client/TeamChannelsPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,yBAAyB,EAEzB,mBAAmB,EAOpB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAEzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAQlD,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAA;IACjC,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAA;IACrD,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;IACvD,wGAAwG;IACxG,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;IAC/D,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACzD,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACzD,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAA;IACrD,QAAQ,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAA;IACrE,QAAQ,CAAC,cAAc,EAAE,SAAS,yBAAyB,EAAE,CAAA;IAC7D,QAAQ,CAAC,kBAAkB,CAAC,EAAE,mBAAmB,CAAA;IACjD,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACzD,QAAQ,CAAC,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAA;CAClC;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAuL9D"}
+{"version":3,"file":"TeamChannelsPanel.d.ts","sourceRoot":"","sources":["../../../src/client/TeamChannelsPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,yBAAyB,EAEzB,mBAAmB,EAOpB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAEzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AASlD,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAA;IACjC,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAA;IACrD,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;IACvD,wGAAwG;IACxG,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;IAC/D,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACzD,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACzD,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAA;IACrD,QAAQ,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAA;IACrE,QAAQ,CAAC,cAAc,EAAE,SAAS,yBAAyB,EAAE,CAAA;IAC7D,QAAQ,CAAC,kBAAkB,CAAC,EAAE,mBAAmB,CAAA;IACjD,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACzD,QAAQ,CAAC,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAA;CAClC;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BA8K9D"}

package/packages/client-agent-team/lib/types/client/TeamChannelsPanel.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, IconEditOutline16, IconPlusOutline16, Input, Modal, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
 import { TeamPresenceDot } from "./TeamPresenceDot.js";
+import { MultiMenuField } from "./multi-menu-field.js";
 import { TeamRowMenu } from "./TeamRowMenu.js";
 import { TeamSidebarSection } from "./TeamSidebarSection.js";
 import { useChannelMembership } from "./team-membership.js";
@@ -76,7 +77,7 @@ export function TeamChannelsPanel(props) {
     };
     const submit = async (event) => {
         event.preventDefault();
-        if (mutating || name.trim() === '' || description.trim() === '')
+        if (mutating || name.trim() === '')
             return;
         const payload = { workspaceId, name: name.trim(), description: description.trim(), memberIds: [...selected] };
         const samePending = pendingCreate !== undefined && pendingCreate.workspaceId === payload.workspaceId
@@ -110,21 +111,25 @@ export function TeamChannelsPanel(props) {
             setMutating(false);
         }
     };
-    return (_jsxs("div", { className: css.panel, children: [_jsx(Modal, { open: formOpen, onClose: closeForm, title: t('addChannel'), closeLabel: t('close'), contentClassName: createCss.dialogContent, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", disabled: mutating, onClick: closeForm, children: t('cancel') }), _jsx(Button, { type: "submit", form: "team-channel-create-form", variant: "primary", disabled: mutating || name.trim() === '' || description.trim() === '', children: mutating ? t('creatingChannel') : t('createChannel') })] }), children: _jsxs("form", { id: "team-channel-create-form", className: createCss.form, onSubmit: event => { void submit(event); }, children: [_jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('channelName') }), _jsx(Input, { className: createCss.input, value: name, disabled: mutating, autoFocus: true, onChange: event => { setName(event.target.value); setPendingCreate(undefined); } })] }), _jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('channelDescription') }), _jsx(Input, { className: createCss.input, value: description, disabled: mutating, onChange: event => { setDescription(event.target.value); setPendingCreate(undefined); } })] }), _jsxs("fieldset", { className: createCss.memberPicker, disabled: mutating, children: [_jsx("legend", { children: t('initialMembers') }), creatingAgents.map(request => (_jsxs("label", { className: createCss.memberOption, children: [_jsx("input", { type: "checkbox", disabled: true, "aria-describedby": `creating-member-reason-${request.requestId}` }), _jsx("span", { className: createCss.unavailableDot, "aria-hidden": "true" }), _jsx("span", { children: request.handle }), _jsx("small", { id: `creating-member-reason-${request.requestId}`, children: t('memberCreatingReason') })] }, request.requestId))), members.map(status => {
-                                    const disabled = status.presence === 'unavailable';
-                                    const reasonId = `initial-member-reason-${status.member.memberId}`;
-                                    return (_jsxs("label", { className: createCss.memberOption, children: [_jsx("input", { type: "checkbox", disabled: disabled, "aria-describedby": disabled ? reasonId : undefined, checked: selected.has(status.member.memberId), onChange: event => {
-                                                    setSelected(current => {
-                                                        const next = new Set(current);
-                                                        if (event.target.checked)
-                                                            next.add(status.member.memberId);
-                                                        else
-                                                            next.delete(status.member.memberId);
-                                                        return next;
-                                                    });
-                                                    setPendingCreate(undefined);
-                                                } }), _jsx(TeamPresenceDot, { status: status, t: t }), _jsx("span", { children: status.member.handle }), disabled && _jsx("small", { id: reasonId, children: t('memberUnavailableReason') })] }, status.member.memberId));
-                                })] }), error !== undefined && _jsx("p", { className: createCss.error, role: "alert", children: error })] }) }), _jsxs(TeamSidebarSection, { title: t('channels'), actions: (_jsx(Tooltip, { label: t('addChannel'), delayMs: 500, children: _jsx("button", { ref: triggerRef, type: "button", className: css.iconButton, "aria-label": t('addChannel'), onClick: () => { setError(undefined); setFormOpen(true); }, children: _jsx(IconPlusOutline16, { size: 14 }) }) })), children: [loading && view === undefined && _jsx("p", { className: css.emptyState, children: t('loadingChannels') }), !loading && (view?.channels.length ?? 0) === 0 && _jsx("p", { className: css.emptyState, children: t('emptyChannels') }), _jsx("div", { className: css.channelList, children: view?.channels.map(channel => {
+    return (_jsxs("div", { className: css.panel, children: [_jsx(Modal, { open: formOpen, onClose: closeForm, title: t('addChannel'), closeLabel: t('close'), contentClassName: createCss.dialogContent, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", disabled: mutating, onClick: closeForm, children: t('cancel') }), _jsx(Button, { type: "submit", form: "team-channel-create-form", variant: "primary", disabled: mutating || name.trim() === '', children: mutating ? t('creatingChannel') : t('createChannel') })] }), children: _jsxs("form", { id: "team-channel-create-form", className: createCss.form, onSubmit: event => { void submit(event); }, children: [_jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('channelName') }), _jsx(Input, { className: createCss.input, value: name, disabled: mutating, autoFocus: true, onChange: event => { setName(event.target.value); setPendingCreate(undefined); } })] }), _jsxs("label", { className: createCss.field, children: [_jsxs("span", { children: [t('channelDescription'), t('optionalSuffix')] }), _jsx(Input, { className: createCss.input, value: description, placeholder: t('agentDescriptionPlaceholder'), disabled: mutating, onChange: event => { setDescription(event.target.value); setPendingCreate(undefined); } })] }), _jsx(MultiMenuField, { label: t('initialMembers'), disabled: mutating, options: [
+                                ...creatingAgents.map(request => ({ id: request.requestId, label: request.handle, disabled: true, hint: t('memberCreatingReason') })),
+                                ...members.map(status => ({
+                                    id: status.member.memberId,
+                                    label: status.member.handle,
+                                    ...(status.presence === 'unavailable' ? { disabled: true, hint: t('memberUnavailableReason') } : {}),
+                                    icon: _jsx(TeamPresenceDot, { status: status, t: t }),
+                                })),
+                            ], selected: [...selected], onToggle: id => {
+                                setSelected(current => {
+                                    const next = new Set(current);
+                                    if (next.has(id))
+                                        next.delete(id);
+                                    else
+                                        next.add(id);
+                                    return next;
+                                });
+                                setPendingCreate(undefined);
+                            }, triggerEmptyLabel: t('membersPickerEmpty'), formatCount: count => t('membersPickerCount', { count }) }), error !== undefined && _jsx("p", { className: createCss.error, role: "alert", children: error })] }) }), _jsxs(TeamSidebarSection, { title: t('channels'), actions: (_jsx(Tooltip, { label: t('addChannel'), delayMs: 500, children: _jsx("button", { ref: triggerRef, type: "button", className: css.iconButton, "aria-label": t('addChannel'), onClick: () => { setError(undefined); setFormOpen(true); }, children: _jsx(IconPlusOutline16, { size: 14 }) }) })), children: [loading && view === undefined && _jsx("p", { className: css.emptyState, children: t('loadingChannels') }), !loading && (view?.channels.length ?? 0) === 0 && _jsx("p", { className: css.emptyState, children: t('emptyChannels') }), _jsx("div", { className: css.channelList, children: view?.channels.map(channel => {
                             const joined = membership.get(channel.channelRef) ?? new Set();
                             return (_jsx(ChannelRow, { channel: channel, members: members, joinedIds: joined, selected: selectedChannelRef === channel.channelRef, updateChannel: updateChannel, joinChannel: props.joinChannel, removeChannelMember: props.removeChannelMember, onCommitted: () => { void refresh(); }, selectChannel: selectChannel, t: t }, channel.channelRef));
                         }) })] }), !formOpen && error !== undefined && _jsx("p", { className: css.error, role: "alert", children: error })] }));
@@ -154,7 +159,7 @@ function ChannelEditorDialog({ channel, members, joinedIds, updateChannel, joinC
         event.preventDefault();
         const normalizedName = name.trim();
         const normalizedDescription = description.trim();
-        if (saving || !dirty || normalizedName === '' || normalizedDescription === '')
+        if (saving || !dirty || normalizedName === '')
             return;
         const samePending = pendingRequest.current !== undefined && pendingRequest.current.channelRef === channel.channelRef
             && pendingRequest.current.name === normalizedName && pendingRequest.current.description === normalizedDescription;
@@ -186,7 +191,7 @@ function ChannelEditorDialog({ channel, members, joinedIds, updateChannel, joinC
             setSaving(false);
         }
     };
-    return (_jsx(Modal, { open: true, onClose: onClose, title: t('editChannel'), description: `# ${channel.name}`, closeLabel: t('close'), contentClassName: createCss.dialogContent, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", disabled: saving, onClick: onClose, children: t('cancel') }), _jsx(Button, { type: "submit", form: "team-channel-edit-form", variant: "primary", disabled: saving || !dirty || name.trim() === '' || description.trim() === '', children: saving ? t('editSaving') : t('editSave') })] }), children: _jsxs("form", { id: "team-channel-edit-form", className: createCss.form, onSubmit: event => { void submit(event); }, children: [_jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('channelName') }), _jsx(Input, { className: createCss.input, value: name, onChange: event => { setName(event.target.value); pendingRequest.current = undefined; }, disabled: saving, autoFocus: true })] }), _jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('channelDescription') }), _jsx(Input, { className: createCss.input, value: description, onChange: event => { setDescription(event.target.value); pendingRequest.current = undefined; }, disabled: saving })] }), _jsxs("fieldset", { className: createCss.memberPicker, disabled: saving, children: [_jsx("legend", { children: t('channelMembersSection') }), members.map(status => {
+    return (_jsx(Modal, { open: true, onClose: onClose, title: t('editChannel'), description: `# ${channel.name}`, closeLabel: t('close'), contentClassName: createCss.dialogContent, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", disabled: saving, onClick: onClose, children: t('cancel') }), _jsx(Button, { type: "submit", form: "team-channel-edit-form", variant: "primary", disabled: saving || !dirty || name.trim() === '', children: saving ? t('editSaving') : t('editSave') })] }), children: _jsxs("form", { id: "team-channel-edit-form", className: createCss.form, onSubmit: event => { void submit(event); }, children: [_jsxs("label", { className: createCss.field, children: [_jsx("span", { children: t('channelName') }), _jsx(Input, { className: createCss.input, value: name, onChange: event => { setName(event.target.value); pendingRequest.current = undefined; }, disabled: saving, autoFocus: true })] }), _jsxs("label", { className: createCss.field, children: [_jsxs("span", { children: [t('channelDescription'), t('optionalSuffix')] }), _jsx(Input, { className: createCss.input, value: description, placeholder: t('agentDescriptionPlaceholder'), onChange: event => { setDescription(event.target.value); pendingRequest.current = undefined; }, disabled: saving })] }), _jsxs("fieldset", { className: createCss.memberPicker, disabled: saving, children: [_jsx("legend", { children: t('channelMembersSection') }), members.map(status => {
                             const joined = joinedIds.has(status.member.memberId);
                             const rowPending = membership.pending.has(status.member.memberId);
                             const disabled = rowPending || (!joined && status.presence === 'unavailable');