@wowyuarm/dsh-agent-team 0.1.0

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

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { TeamRowMenu } from "./TeamRowMenu.js";
+import { TeamSidebarSection } from "./TeamSidebarSection.js";
+import { useChannelMembership } from "./team-membership.js";
+import createCss from './create.module.css';
+import css from './sidebar.module.css';
+export function TeamChannelsPanel(props) {
+    const { workspaceId, loadMembers, loadChannels, subscribeChanges, createChannel, updateChannel, creatingAgents, selectedChannelRef, selectChannel, t } = props;
+    const [view, setView] = useState();
+    const [members, setMembers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState();
+    const [formOpen, setFormOpen] = useState(false);
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [selected, setSelected] = useState(new Set());
+    const [mutating, setMutating] = useState(false);
+    const [pendingCreate, setPendingCreate] = useState();
+    const previousCreatingKey = useRef(creatingAgents.map(request => request.requestId).join(','));
+    const triggerRef = useRef(null);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        const [channelResult, memberResult] = await Promise.all([
+            loadChannels({ workspaceId, limit: 1 }),
+            loadMembers({ workspaceId }),
+        ]);
+        if (channelResult.ok && memberResult.ok) {
+            setView(channelResult.value);
+            const visibleMembers = memberResult.value.filter(status => status.member.state !== 'inactive');
+            setMembers(visibleMembers);
+            const selectable = new Set(visibleMembers.filter(status => status.presence !== 'unavailable')
+                .map(status => status.member.memberId));
+            setSelected(current => new Set([...current].filter(memberId => selectable.has(memberId))));
+            setError(undefined);
+        }
+        else if (!channelResult.ok) {
+            setError(channelResult.error.message);
+        }
+        else if (!memberResult.ok) {
+            setError(memberResult.error.message);
+        }
+        setLoading(false);
+    }, [loadChannels, loadMembers, workspaceId]);
+    useEffect(() => { void refresh(); }, [refresh]);
+    useEffect(() => subscribeChanges({ kind: 'workspace', workspaceId }, update => {
+        if (update.type === 'failed') {
+            setError(update.message);
+            return;
+        }
+        void refresh();
+    }), [subscribeChanges, refresh, workspaceId]);
+    const creatingKey = creatingAgents.map(request => request.requestId).join(',');
+    useEffect(() => {
+        if (previousCreatingKey.current === creatingKey)
+            return;
+        previousCreatingKey.current = creatingKey;
+        void refresh();
+    }, [creatingKey, refresh]);
+    const membership = useMemo(() => {
+        const byChannel = new Map();
+        for (const item of view?.members ?? []) {
+            const ids = byChannel.get(item.channelRef) ?? new Set();
+            ids.add(item.memberId);
+            byChannel.set(item.channelRef, ids);
+        }
+        return byChannel;
+    }, [view]);
+    const closeForm = () => {
+        if (mutating)
+            return;
+        setFormOpen(false);
+        queueMicrotask(() => { triggerRef.current?.focus(); });
+    };
+    const submit = async (event) => {
+        event.preventDefault();
+        if (mutating || name.trim() === '' || description.trim() === '')
+            return;
+        const payload = { workspaceId, name: name.trim(), description: description.trim(), memberIds: [...selected] };
+        const samePending = pendingCreate !== undefined && pendingCreate.workspaceId === payload.workspaceId
+            && pendingCreate.name === payload.name && pendingCreate.description === payload.description
+            && JSON.stringify(pendingCreate.memberIds) === JSON.stringify(payload.memberIds);
+        const request = samePending ? pendingCreate : {
+            requestId: crypto.randomUUID(), ...payload,
+        };
+        setPendingCreate(request);
+        setMutating(true);
+        setError(undefined);
+        try {
+            const result = await createChannel(request);
+            if (result.ok) {
+                setPendingCreate(undefined);
+                setName('');
+                setDescription('');
+                setSelected(new Set());
+                setFormOpen(false);
+                await refresh();
+                queueMicrotask(() => { triggerRef.current?.focus(); });
+            }
+            else {
+                setError(result.error.message);
+            }
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : String(cause));
+        }
+        finally {
+            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 => {
+                            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 })] }));
+}
+/**
+ * One sidebar Channel row: the select button keeps the `#` identity while the
+ * row menu carries the entry point; editing covers display facts and membership.
+ */
+function ChannelRow({ channel, members, joinedIds, selected, updateChannel, joinChannel, removeChannelMember, onCommitted, selectChannel, t }) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [editing, setEditing] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs("article", { className: css.channelRow, "data-menu-open": menuOpen || undefined, "aria-current": selected ? 'page' : undefined, children: [_jsx("button", { type: "button", className: css.channelSelect, "aria-label": `# ${channel.name}`, onClick: () => { selectChannel(channel.channelRef); }, children: _jsxs("strong", { className: css.channelName, children: ["# ", channel.name] }) }), _jsx("span", { className: css.rowMenu, children: _jsx(TeamRowMenu, { label: t('actionsChannel', { name: channel.name }), items: [{ id: 'edit', label: t('editChannel'), icon: _jsx(IconEditOutline16, {}) }], onSelect: () => { setEditing(true); }, onOpenChange: setMenuOpen }) })] }), editing && (_jsx(ChannelEditorDialog, { channel: channel, members: members, joinedIds: joinedIds, updateChannel: updateChannel, joinChannel: joinChannel, removeChannelMember: removeChannelMember, onCommitted: onCommitted, onClose: () => { setEditing(false); }, t: t }))] }));
+}
+/**
+ * Channel editor: name and description commit through one durable update;
+ * Channel membership below keeps its own immediate add/remove flow.
+ */
+function ChannelEditorDialog({ channel, members, joinedIds, updateChannel, joinChannel, removeChannelMember, onCommitted, onClose, t }) {
+    const [name, setName] = useState(channel.name);
+    const [description, setDescription] = useState(channel.description);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState();
+    const pendingRequest = useRef();
+    const membership = useChannelMembership({ joinChannel, removeChannelMember }, change => change.memberId, async () => { await onCommitted(); });
+    const dirty = name.trim() !== channel.name || description.trim() !== channel.description;
+    const submit = async (event) => {
+        event.preventDefault();
+        const normalizedName = name.trim();
+        const normalizedDescription = description.trim();
+        if (saving || !dirty || normalizedName === '' || normalizedDescription === '')
+            return;
+        const samePending = pendingRequest.current !== undefined && pendingRequest.current.channelRef === channel.channelRef
+            && pendingRequest.current.name === normalizedName && pendingRequest.current.description === normalizedDescription;
+        const request = samePending ? pendingRequest.current : {
+            requestId: crypto.randomUUID(),
+            workspaceId: channel.workspaceId,
+            channelRef: channel.channelRef,
+            name: normalizedName,
+            description: normalizedDescription,
+        };
+        pendingRequest.current = request;
+        setSaving(true);
+        setError(undefined);
+        try {
+            const result = await updateChannel(request);
+            if (result.ok) {
+                pendingRequest.current = undefined;
+                await onCommitted();
+                onClose();
+            }
+            else {
+                setError(result.error.message);
+            }
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : String(cause));
+        }
+        finally {
+            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 => {
+                            const joined = joinedIds.has(status.member.memberId);
+                            const rowPending = membership.pending.has(status.member.memberId);
+                            const disabled = rowPending || (!joined && status.presence === 'unavailable');
+                            const rowError = membership.errors.get(status.member.memberId);
+                            return _jsxs("div", { className: css.editMemberRow, children: [_jsx(TeamPresenceDot, { status: status, t: t }), _jsxs("span", { className: css.editMemberCopy, children: [_jsxs("strong", { children: ["@", status.member.handle] }), _jsx("small", { children: status.member.description })] }), _jsx(Button, { size: "sm", variant: "outline", disabled: disabled, onClick: () => { void membership.change({ workspaceId: channel.workspaceId, channelRef: channel.channelRef, memberId: status.member.memberId, joined }); }, children: rowPending ? t('membershipUpdating') : joined ? t('removeFromChannel') : t('addToChannel') }), rowError !== undefined && _jsx("p", { className: css.rowError, role: "alert", children: rowError })] }, status.member.memberId);
+                        })] }), error !== undefined && _jsx("p", { className: createCss.error, role: "alert", children: error })] }) }));
+}

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

@@ -0,0 +1,15 @@
+import type { AgentTeamClientMemberStatus, AgentTeamMemberId } from '@wowyuarm/dsh-agent-team/types';
+import type { TeamConversationProps } from './slots.ts';
+export declare function TeamComposer({ members, recipients, draft, pending, confirmation, error, onDraftChange, onRecipientsChange, onSubmit, t }: {
+    readonly members: readonly AgentTeamClientMemberStatus[];
+    readonly recipients: ReadonlySet<AgentTeamMemberId>;
+    readonly draft: string;
+    readonly pending: boolean;
+    readonly confirmation?: string;
+    readonly error?: string;
+    readonly onDraftChange: (draft: string) => void;
+    readonly onRecipientsChange: (recipients: ReadonlySet<AgentTeamMemberId>) => void;
+    readonly onSubmit: () => void;
+    readonly t: TeamConversationProps['t'];
+}): import("react").JSX.Element;
+//# sourceMappingURL=TeamComposer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TeamComposer.d.ts","sourceRoot":"","sources":["../../../src/client/TeamComposer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,2BAA2B,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEpG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAoCvD,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE;IACzI,QAAQ,CAAC,OAAO,EAAE,SAAS,2BAA2B,EAAE,CAAA;IACxD,QAAQ,CAAC,UAAU,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAA;IACnD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,kBAAkB,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACjF,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAA;CACvC,+BAkKA"}

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

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { IconSendOutline16, useAnchoredMaxHeight, useDismissOnOutsidePointer } from '@deepseek-ai/dsh-client-ui-primitives';
+import { TeamPresenceDot } from "./TeamPresenceDot.js";
+import css from './composer.module.css';
+function findMention(draft, caret) {
+    const beforeCaret = draft.slice(0, caret);
+    if (beforeCaret.length === 0 || /\s/u.test(beforeCaret.at(-1) ?? ''))
+        return undefined;
+    let tokenStart = beforeCaret.length;
+    while (tokenStart > 0 && !/\s/u.test(beforeCaret[tokenStart - 1]))
+        tokenStart -= 1;
+    const at = beforeCaret.lastIndexOf('@');
+    if (at < tokenStart)
+        return undefined;
+    if (at > 0 && /[\p{L}\p{N}_]/u.test(beforeCaret[at - 1]))
+        return undefined;
+    return { start: at, end: caret, query: beforeCaret.slice(at + 1) };
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function containsMention(draft, handle) {
+    return new RegExp(`(?:^|[^\\p{L}\\p{N}_])@${escapeRegExp(handle)}(?=$|[^\\p{L}\\p{N}_])`, 'u').test(draft);
+}
+function mentionCandidates(members, query) {
+    const normalized = query.toLocaleLowerCase();
+    return members.filter(status => status.presence !== 'unavailable'
+        && status.member.state !== 'inactive'
+        && status.member.handle.toLocaleLowerCase().startsWith(normalized));
+}
+export function TeamComposer({ members, recipients, draft, pending, confirmation, error, onDraftChange, onRecipientsChange, onSubmit, t }) {
+    const inputRef = useRef(null);
+    const rootRef = useRef(null);
+    const menuRef = useRef(null);
+    const composingRef = useRef(false);
+    const [mention, setMention] = useState();
+    const [highlight, setHighlight] = useState(0);
+    const candidates = mention === undefined ? [] : mentionCandidates(members, mention.query);
+    const menuOpen = mention !== undefined && candidates.length > 0;
+    const activeCandidate = candidates[highlight];
+    const listId = 'team-mention-suggestions';
+    const menuMaxHeight = useAnchoredMaxHeight(menuRef, 320, menuOpen ? draft : null);
+    useDismissOnOutsidePointer(rootRef, menuOpen, open => { if (!open)
+        setMention(undefined); });
+    useLayoutEffect(() => {
+        const input = inputRef.current;
+        if (input === null)
+            return;
+        input.style.height = 'auto';
+        input.style.height = `${Math.min(input.scrollHeight, 180)}px`;
+    }, [draft]);
+    useEffect(() => {
+        if (mention === undefined || candidates.length === 0) {
+            setHighlight(0);
+            return;
+        }
+        setHighlight(current => Math.min(current, candidates.length - 1));
+    }, [mention, candidates.length]);
+    const pruneRecipients = (nextDraft) => {
+        const knownMembers = new Map(members.map(status => [status.member.memberId, status.member]));
+        const next = new Set([...recipients].filter(memberId => {
+            const member = knownMembers.get(memberId);
+            return member !== undefined && containsMention(nextDraft, member.handle);
+        }));
+        if (next.size !== recipients.size)
+            onRecipientsChange(next);
+    };
+    const updateMention = (nextDraft, caret) => {
+        const match = findMention(nextDraft, caret);
+        setMention(match);
+        if (match === undefined)
+            setHighlight(0);
+    };
+    const onChange = (event) => {
+        const nextDraft = event.target.value;
+        onDraftChange(nextDraft);
+        pruneRecipients(nextDraft);
+        updateMention(nextDraft, event.target.selectionStart ?? nextDraft.length);
+    };
+    const selectMention = (member) => {
+        if (mention === undefined)
+            return;
+        const inserted = `@${member.member.handle} `;
+        const nextDraft = `${draft.slice(0, mention.start)}${inserted}${draft.slice(mention.end)}`;
+        const nextCaret = mention.start + inserted.length;
+        const nextRecipients = new Set(recipients).add(member.member.memberId);
+        onDraftChange(nextDraft);
+        onRecipientsChange(nextRecipients);
+        setMention(undefined);
+        setHighlight(0);
+        requestAnimationFrame(() => {
+            const input = inputRef.current;
+            if (input === null)
+                return;
+            input.focus({ preventScroll: true });
+            input.setSelectionRange(nextCaret, nextCaret);
+        });
+    };
+    const onKeyDown = (event) => {
+        const composing = composingRef.current || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
+        if (menuOpen && event.key === 'ArrowDown') {
+            event.preventDefault();
+            setHighlight(current => (current + 1) % candidates.length);
+            return;
+        }
+        if (menuOpen && event.key === 'ArrowUp') {
+            event.preventDefault();
+            setHighlight(current => (current - 1 + candidates.length) % candidates.length);
+            return;
+        }
+        if (event.key === 'Escape' && menuOpen) {
+            event.preventDefault();
+            setMention(undefined);
+            return;
+        }
+        // Tab accepts the highlighted candidate; Shift+Tab keeps default focus reversal.
+        if (menuOpen && event.key === 'Tab' && !event.shiftKey) {
+            event.preventDefault();
+            if (activeCandidate !== undefined)
+                selectMention(activeCandidate);
+            return;
+        }
+        if (event.key !== 'Enter' || event.shiftKey || composing || event.repeat)
+            return;
+        if (menuOpen && activeCandidate !== undefined) {
+            event.preventDefault();
+            selectMention(activeCandidate);
+            return;
+        }
+        event.preventDefault();
+        if (!pending && draft.trim() !== '')
+            onSubmit();
+    };
+    return _jsxs("form", { ref: rootRef, className: css.root, onSubmit: event => {
+            event.preventDefault();
+            if (!pending && draft.trim() !== '')
+                onSubmit();
+        }, children: [_jsxs("div", { className: css.card, "data-team-composer": true, children: [confirmation !== undefined && _jsx("p", { className: css.confirmation, role: "status", children: confirmation }), _jsxs("div", { className: css.inputArea, children: [menuOpen && _jsx("div", { id: listId, ref: menuRef, className: css.mentionMenu, role: "listbox", "aria-label": t('mentionSuggestions'), style: { maxHeight: menuMaxHeight }, children: candidates.map((status, index) => {
+                                    const optionId = `${listId}-${status.member.memberId}`;
+                                    const selected = index === highlight;
+                                    return _jsxs("button", { id: optionId, type: "button", role: "option", "aria-selected": selected, className: css.mentionOption, onMouseDown: event => { event.preventDefault(); }, onClick: () => { selectMention(status); }, children: [_jsx(TeamPresenceDot, { status: status, t: t }), _jsxs("span", { className: css.mentionName, children: ["@", status.member.handle] }), _jsx("span", { className: css.mentionDescription, children: status.member.description })] }, status.member.memberId);
+                                }) }), _jsx("textarea", { ref: inputRef, "aria-label": t('messageDraft'), "aria-autocomplete": "list", "aria-controls": menuOpen ? listId : undefined, "aria-activedescendant": menuOpen && activeCandidate !== undefined ? `${listId}-${activeCandidate.member.memberId}` : undefined, "aria-expanded": menuOpen, value: draft, disabled: pending, placeholder: t('messagePlaceholder'), rows: 1, onChange: onChange, onKeyDown: onKeyDown, onSelect: event => { updateMention(event.currentTarget.value, event.currentTarget.selectionStart ?? event.currentTarget.value.length); }, onCompositionStart: () => { composingRef.current = true; }, onCompositionEnd: () => { setTimeout(() => { composingRef.current = false; }, 10); } })] }), recipients.size > 0 && _jsx("p", { className: css.notifyRow, "data-team-notify": true, children: t('composerNotify', { ids: [...recipients].sort().map(memberId => `@${members.find(candidate => candidate.member.memberId === memberId)?.member.handle ?? memberId}`).join(', ') }) }), _jsx("div", { className: css.toolbar, children: _jsx("button", { type: "submit", className: css.sendButton, "aria-label": pending ? t('sendingMessage') : t('sendMessage'), disabled: pending || draft.trim() === '', children: _jsx(IconSendOutline16, { size: 16 }) }) })] }), error !== undefined && _jsx("p", { className: css.error, role: "alert", children: error })] });
+}

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

@@ -0,0 +1,3 @@
+import type { TeamConversationProps } from './slots.ts';
+export declare function TeamConversation({ t, useWorkspaces, navigation, loadChannels, readThread, loadThreadHistory, subscribeChanges, loadMembers, sendMessage, joinChannel, removeChannelMember, reply, changeTask, selectThread, backToWorkspace, backToChannels }: TeamConversationProps): import("react").JSX.Element;
+//# sourceMappingURL=TeamConversation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TeamConversation.d.ts","sourceRoot":"","sources":["../../../src/client/TeamConversation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAKvD,wBAAgB,gBAAgB,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,qBAAqB,+BAoBpR"}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { TeamChannelPage } from "./TeamChannelPage.js";
+import { TeamThreadPage } from "./TeamThreadPage.js";
+import css from './conversation.module.css';
+export function TeamConversation({ t, useWorkspaces, navigation, loadChannels, readThread, loadThreadHistory, subscribeChanges, loadMembers, sendMessage, joinChannel, removeChannelMember, reply, changeTask, selectThread, backToWorkspace, backToChannels }) {
+    const navigationState = useSyncExternalStore(navigation.subscribe, navigation.getSnapshot, navigation.getSnapshot);
+    const workspaces = useWorkspaces(state => state.items);
+    const current = workspaces.find(workspace => workspace.workspaceId === navigationState.workspaceId);
+    if (current !== undefined && navigationState.taskRef !== undefined && navigationState.threadRef !== undefined) {
+        return _jsx(TeamThreadPage, { workspaceId: current.workspaceId, taskRef: navigationState.taskRef, threadRef: navigationState.threadRef, backToWorkspace: backToWorkspace, ...(navigationState.channelRef === undefined ? {} : { channelRef: navigationState.channelRef }), ...(navigationState.taskNumber === undefined ? {} : { taskNumber: navigationState.taskNumber }), readThread: readThread, loadChannels: loadChannels, loadThreadHistory: loadThreadHistory, subscribeChanges: subscribeChanges, loadMembers: loadMembers, reply: reply, changeTask: changeTask, t: t }, navigationState.threadRef);
+    }
+    if (current !== undefined && navigationState.channelRef !== undefined) {
+        return _jsx(TeamChannelPage, { workspaceId: current.workspaceId, channelRef: navigationState.channelRef, loadChannels: loadChannels, subscribeChanges: subscribeChanges, loadMembers: loadMembers, sendMessage: sendMessage, joinChannel: joinChannel, removeChannelMember: removeChannelMember, selectThread: selectThread, backToChannels: backToChannels, t: t }, navigationState.channelRef);
+    }
+    const welcome = current === undefined
+        ? { eyebrow: t('teamMode'), title: t('team'), body: t('empty') }
+        : { eyebrow: current.title, title: t('channels'), body: t('selectChannelHint') };
+    return _jsx("main", { className: css.welcomeSurface, "data-team-conversation": true, children: _jsxs("div", { className: css.welcome, children: [_jsx("span", { className: css.welcomeEyebrow, children: welcome.eyebrow }), _jsx("h1", { children: welcome.title }), _jsx("p", { children: welcome.body })] }) });
+}

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

@@ -0,0 +1,3 @@
+import type { TeamFooterProps } from './slots.ts';
+export declare function TeamFooterAction({ wide, navigation, enterTeam, leaveTeam, t }: TeamFooterProps): import("react").JSX.Element;
+//# sourceMappingURL=TeamFooterAction.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TeamFooterAction.d.ts","sourceRoot":"","sources":["../../../src/client/TeamFooterAction.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAGjD,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,eAAe,+BAgC9F"}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useSyncExternalStore } from 'react';
+import { IconAgentPresetOutline16, IconChevronLeftOutline14, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
+import css from './team.module.css';
+export function TeamFooterAction({ wide, navigation, enterTeam, leaveTeam, t }) {
+    const state = useSyncExternalStore(navigation.subscribe, navigation.getSnapshot, navigation.getSnapshot);
+    const inTeam = state.mode === 'team';
+    const label = inTeam ? t('backToConversations') : t('team');
+    useLayoutEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        if (inTeam) {
+            document.documentElement.dataset.agentTeamMode = 'team';
+            return () => { delete document.documentElement.dataset.agentTeamMode; };
+        }
+        delete document.documentElement.dataset.agentTeamMode;
+    }, [inTeam]);
+    return (_jsx(_Fragment, { children: _jsx("div", { className: wide ? css.footerStack : `${css.footerStack} ${css.railStack}`, children: _jsx(Tooltip, { label: label, delayMs: 500, disabled: wide, children: _jsxs("button", { type: "button", className: wide ? css.footerAction : `${css.footerAction} ${css.rail}`, "aria-label": label, "data-team-action": inTeam ? 'leave' : 'enter', onClick: inTeam ? leaveTeam : enterTeam, children: [inTeam ? _jsx(IconChevronLeftOutline14, { size: wide ? 16 : 18 }) : _jsx(IconAgentPresetOutline16, { size: wide ? 16 : 18 }), wide && _jsx("span", { children: label })] }) }) }) }));
+}

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

@@ -0,0 +1,13 @@
+import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client';
+import type { TeamConversationProps } from './slots.ts';
+interface TeamInboxPanelProps {
+    readonly workspaceId: WorkspaceId;
+    readonly loadInbox: TeamConversationProps['loadInbox'];
+    readonly loadChannels: TeamConversationProps['loadChannels'];
+    readonly loadChanges: TeamConversationProps['loadChanges'];
+    readonly selectThread: TeamConversationProps['selectThread'];
+    readonly t: TeamConversationProps['t'];
+}
+export declare function TeamInboxPanel({ workspaceId, loadInbox, loadChannels, loadChanges, selectThread, t }: TeamInboxPanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TeamInboxPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TeamInboxPanel.d.ts","sourceRoot":"","sources":["../../../src/client/TeamInboxPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAEzE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAIvD,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAA;IACjC,QAAQ,CAAC,SAAS,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAA;IACtD,QAAQ,CAAC,YAAY,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAA;IAC5D,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAA;IAC1D,QAAQ,CAAC,YAAY,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAA;IAC5D,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAA;CACvC;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC,EAAE,EAAE,mBAAmB,+BAkGzH"}

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '@deepseek-ai/dsh-client-ui-primitives';
+import { formatTaskStatus } from "./team-formatters.js";
+import css from './inbox.module.css';
+export function TeamInboxPanel({ workspaceId, loadInbox, loadChannels, loadChanges, selectThread, t }) {
+    const [inbox, setInbox] = useState();
+    const [view, setView] = useState();
+    const [error, setError] = useState();
+    const [loading, setLoading] = useState(true);
+    const active = useRef(false);
+    const refreshSequence = useRef(0);
+    const refresh = async (clearError = false) => {
+        const sequence = refreshSequence.current + 1;
+        refreshSequence.current = sequence;
+        if (clearError)
+            setError(undefined);
+        try {
+            const [nextInbox, nextView] = await Promise.all([
+                loadInbox({ workspaceId }),
+                loadChannels({ workspaceId, topLevelOnly: true, includeActivities: false, limit: 100 }),
+            ]);
+            if (!active.current || sequence !== refreshSequence.current)
+                return;
+            if (!nextInbox.ok) {
+                setError(nextInbox.error.message);
+                return;
+            }
+            if (!nextView.ok) {
+                setError(nextView.error.message);
+                return;
+            }
+            setInbox(nextInbox.value);
+            setView(nextView.value);
+            setError(undefined);
+        }
+        catch (cause) {
+            if (active.current && sequence === refreshSequence.current)
+                setError(cause instanceof Error ? cause.message : String(cause));
+        }
+        finally {
+            if (active.current && sequence === refreshSequence.current)
+                setLoading(false);
+        }
+    };
+    useEffect(() => {
+        let listening = true;
+        active.current = true;
+        setInbox(undefined);
+        setView(undefined);
+        setError(undefined);
+        setLoading(true);
+        void refresh();
+        void (async () => {
+            let version = 0;
+            while (listening) {
+                try {
+                    const changed = await loadChanges({ afterVersion: version });
+                    if (!listening)
+                        return;
+                    if (!changed.ok) {
+                        setError(changed.error.message);
+                        return;
+                    }
+                    if (changed.value.version > version) {
+                        version = changed.value.version;
+                        await refresh();
+                    }
+                }
+                catch (cause) {
+                    if (listening)
+                        setError(cause instanceof Error ? cause.message : String(cause));
+                    return;
+                }
+            }
+        })();
+        return () => {
+            listening = false;
+            active.current = false;
+            refreshSequence.current += 1;
+        };
+    }, [workspaceId]);
+    const channels = useMemo(() => new Map(view?.channels.map(channel => [channel.channelRef, channel]) ?? []), [view]);
+    const taskNumbers = useMemo(() => new Map(view?.taskNumbers.map(item => [item.taskRef, item.taskNumber]) ?? []), [view]);
+    return _jsxs("main", { className: css.surface, "data-team-inbox": true, children: [_jsxs("header", { className: css.header, children: [_jsxs("div", { children: [_jsx("h1", { children: t('inbox') }), inbox !== undefined && _jsx("p", { children: inbox.totalUnreadCount === 0 ? t('inboxEmpty') : t('inboxUnreadCount', { count: inbox.totalUnreadCount }) })] }), inbox !== undefined && inbox.totalDirectCount > 0 && _jsx("span", { className: css.directTotal, children: t('inboxDirectCount', { count: inbox.totalDirectCount }) })] }), _jsxs("section", { className: css.list, "aria-label": t('inbox'), children: [loading && inbox === undefined && error === undefined && _jsx("p", { className: css.state, children: t('loadingInbox') }), !loading && inbox?.items.length === 0 && error === undefined && _jsx("p", { className: css.state, children: t('inboxEmpty') }), error !== undefined && _jsxs("div", { className: css.error, role: "alert", children: [_jsx("span", { children: error }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => { void refresh(true); }, children: t('retry') })] }), inbox?.items.map(item => {
+                        const channel = channels.get(item.channelRef);
+                        const taskNumber = taskNumbers.get(item.task.taskRef);
+                        return _jsxs("button", { type: "button", className: css.item, onClick: () => { selectThread(item.task.taskRef, item.thread.threadRef, item.channelRef, taskNumber); }, children: [_jsx("span", { className: css.priority, "data-direct": item.directCount > 0, "aria-hidden": "true" }), _jsxs("span", { className: css.copy, children: [_jsx("strong", { children: taskNumber === undefined ? t('task') : `Task #${taskNumber}` }), _jsxs("small", { children: [channel === undefined ? t('channelUnknown') : `# ${channel.name}`, " \u00B7 ", formatTaskStatus(item.task.status, t)] })] }), _jsxs("span", { className: css.count, "aria-label": `${t('inboxUnreadCount', { count: item.unreadCount })}${item.directCount > 0 ? `, ${t('inboxDirectCount', { count: item.directCount })}` : ''}`, children: [t('inboxUnreadCount', { count: item.unreadCount }), item.directCount > 0 && _jsxs(_Fragment, { children: [" \u00B7 ", t('inboxDirectCount', { count: item.directCount })] })] })] }, item.thread.threadRef);
+                    })] })] });
+}

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

@@ -0,0 +1,12 @@
+import type { AgentTeamClientMemberStatus } from '@wowyuarm/dsh-agent-team/types';
+import type { TeamSidebarProps } from './slots.ts';
+/**
+ * Sidebar Member avatar reusing the conversation identity language: the
+ * deterministic member hue and handle initial, with the presence indicator
+ * overlaid at the bottom-right so one glyph carries identity and state.
+ */
+export declare function TeamMemberAvatar({ status, t }: {
+    readonly status: AgentTeamClientMemberStatus;
+    readonly t: TeamSidebarProps['t'];
+}): import("react").JSX.Element;
+//# sourceMappingURL=TeamMemberAvatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TeamMemberAvatar.d.ts","sourceRoot":"","sources":["../../../src/client/TeamMemberAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAA;AACjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKlD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE;IAC9C,QAAQ,CAAC,MAAM,EAAE,2BAA2B,CAAA;IAC5C,QAAQ,CAAC,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAA;CAClC,+BAkBA"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StateDot, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
+import { memberHue } from "./team-formatters.js";
+import { presenceDotState, presenceLabel } from "./TeamPresenceDot.js";
+import css from './sidebar.module.css';
+/**
+ * Sidebar Member avatar reusing the conversation identity language: the
+ * deterministic member hue and handle initial, with the presence indicator
+ * overlaid at the bottom-right so one glyph carries identity and state.
+ */
+export function TeamMemberAvatar({ status, t }) {
+    const label = presenceLabel(status, t);
+    const state = presenceDotState(status.presence);
+    return (_jsx(Tooltip, { label: label, delayMs: 300, children: _jsxs("span", { className: css.agentAvatar, style: { '--team-avatar-hue': memberHue(status.member.memberId) }, role: "img", "aria-label": label, children: [status.member.handle.replace('@', '').slice(0, 1).toUpperCase(), _jsx("span", { className: css.agentAvatarBadge, "aria-hidden": "true", children: state === 'gray' ? _jsx("span", { className: css.unavailableDot }) : _jsx(StateDot, { state: state, size: 8 }) })] }) }));
+}

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

@@ -0,0 +1,5 @@
+import type { TeamFooterProps } from './slots.ts';
+type TeamMembersActionProps = Pick<TeamFooterProps, 'wide' | 'loadMemberGroups' | 't'>;
+export declare function TeamMembersAction({ wide, loadMemberGroups, t }: TeamMembersActionProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TeamMembersAction.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TeamMembersAction.d.ts","sourceRoot":"","sources":["../../../src/client/TeamMembersAction.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAKjD,KAAK,sBAAsB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,kBAAkB,GAAG,GAAG,CAAC,CAAA;AAEtF,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,EAAE,EAAE,sBAAsB,+BAuDtF"}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { IconUserOutline16, Modal, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
+import { TeamPresenceDot } from "./TeamPresenceDot.js";
+import membersCss from './members.module.css';
+import css from './team.module.css';
+export function TeamMembersAction({ wide, loadMemberGroups, t }) {
+    const [panelOpen, setPanelOpen] = useState(false);
+    const [groups, setGroups] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState();
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    useEffect(() => {
+        if (!panelOpen)
+            return;
+        queueMicrotask(() => { contentRef.current?.focus(); });
+    }, [panelOpen]);
+    const openMembers = () => {
+        setPanelOpen(true);
+        setLoading(true);
+        setError(undefined);
+        void loadMemberGroups().then(setGroups).catch(cause => {
+            setError(cause instanceof Error ? cause.message : String(cause));
+        }).finally(() => { setLoading(false); });
+    };
+    const closeMembers = () => {
+        setPanelOpen(false);
+        queueMicrotask(() => { triggerRef.current?.focus(); });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: t('members'), delayMs: 500, disabled: wide, children: _jsxs("button", { ref: triggerRef, type: "button", className: wide ? css.settingsAction : `${css.settingsAction} ${css.rail}`, "aria-label": t('members'), "aria-haspopup": "dialog", onClick: openMembers, children: [_jsx(IconUserOutline16, { size: wide ? 16 : 18 }), wide && _jsx("span", { children: t('members') })] }) }), _jsx(Modal, { open: panelOpen, onClose: closeMembers, title: t('members'), closeLabel: t('close'), contentClassName: membersCss.body, children: _jsxs("div", { ref: contentRef, className: membersCss.content, tabIndex: -1, children: [loading && _jsx("p", { className: membersCss.state, role: "status", children: t('loadingAgents') }), !loading && groups.length === 0 && error === undefined && _jsx("p", { className: membersCss.state, children: t('emptyAgents') }), !loading && groups.map(group => (_jsxs("section", { className: membersCss.group, "aria-labelledby": `team-members-${group.workspaceId}`, children: [_jsx("h3", { id: `team-members-${group.workspaceId}`, children: group.workspaceTitle }), group.members.map(status => (_jsxs("div", { className: membersCss.member, children: [_jsx(TeamPresenceDot, { status: status, t: t }), _jsxs("span", { className: membersCss.copy, children: [_jsxs("strong", { children: ["@", status.member.handle] }), _jsx("small", { children: status.member.description })] })] }, status.member.memberId)))] }, group.workspaceId))), error !== undefined && _jsx("p", { className: membersCss.error, role: "alert", children: error })] }) })] }));
+}