@roaming-ai/dsh-group-chat 0.3.0 → 0.3.2

package/src/client/components/AsidePanel.tsx

@@ -1,28 +1,34 @@
 /**
- * 右侧成员与工作区栏组件
+ * 右侧成员与工作区栏组件。工作区目录编辑态（草稿、文件浏览器）为栏内自有状态。
  * @module dsh-group-chat/client/components
  */
 
-import type { ReactNode } from 'react'
+import { useState, type ReactNode } from 'react'
 import { Icon, P } from '../lib/ui.ts'
-import { roleById, type ClientSnapshot, type ModelsResponse, type RoleDraft, type SnapshotRole } from '../lib/model.ts'
+import { api } from '../lib/api.ts'
+import { roleById, type ClientSnapshot, type SnapshotRole } from '../lib/model.ts'
+import type { BrowseResult } from '../../core/types.ts'
 
 interface AsidePanelProps {
   snap: ClientSnapshot
   group: ClientSnapshot['groups'][number]
   asideOpen: boolean
-  wsDraft: string | null
-  setWsDraft: (val: string | null) => void
-  fileBrowser: { open: boolean, loading: boolean, list: import('../../core/types.ts').BrowseResult | null, error: string } | null
-  setFileBrowser: (val: { open: boolean, loading: boolean, list: import('../../core/types.ts').BrowseResult | null, error: string } | null) => void
   mutate: (args: Record<string, unknown>) => Promise<unknown>
-  openRoleEditor: (role: SnapshotRole | null) => Promise<void>
-  openBrowser: (path: string | undefined) => Promise<void>
-  selectCurrentDir: () => void
+  openRoleEditor: (role: SnapshotRole | null) => void
+}
+
+/** 文件浏览器态（栏内自有）。 */
+interface FileBrowserState {
+  open: boolean
+  loading: boolean
+  list: BrowseResult | null
+  error: string
 }
 
 export function AsidePanel(props: AsidePanelProps): ReactNode {
-  const { snap, group, asideOpen, wsDraft, setWsDraft, fileBrowser, setFileBrowser, mutate, openRoleEditor, openBrowser, selectCurrentDir } = props
+  const { snap, group, asideOpen, mutate, openRoleEditor } = props
+  const [wsDraft, setWsDraft] = useState<string | null>(null)
+  const [fileBrowser, setFileBrowser] = useState<FileBrowserState | null>(null)
 
   const commitWsDir = (): void => {
     if (wsDraft !== null && group && wsDraft !== (group.workspaceDir || '')) {
@@ -31,6 +37,25 @@ export function AsidePanel(props: AsidePanelProps): ReactNode {
     setWsDraft(null)
   }
 
+  const openBrowser = async (path: string | undefined): Promise<void> => {
+    setFileBrowser({ open: true, loading: true, list: null, error: '' })
+    try {
+      const res = await api.action({ kind: 'browse', path: path || '' }) as BrowseResult
+      if (res && res.ok) setFileBrowser({ open: true, loading: false, list: res, error: '' })
+      else setFileBrowser({ open: true, loading: false, list: null, error: (res && res.error) || '浏览失败' })
+    } catch (e) {
+      setFileBrowser({ open: true, loading: false, list: null, error: String((e && (e as Error).message) || e) })
+    }
+  }
+
+  const selectCurrentDir = (): void => {
+    if (!fileBrowser || !fileBrowser.list || !group) return
+    const path = fileBrowser.list.path!
+    void mutate({ op: 'setWorkspaceDir', groupId: group.id, path })
+    setWsDraft(null)
+    setFileBrowser(null)
+  }
+
   return (
     <div className={'dsgc-aside' + (asideOpen ? '' : ' closed')} aria-hidden={asideOpen ? undefined : 'true'}>
       <div className="dsgc-sec">
@@ -38,7 +63,7 @@ export function AsidePanel(props: AsidePanelProps): ReactNode {
           群成员
           <span className="dsgc-secspacer" />
           <span className="dsgc-seccount">{group.roleIds.length ? group.roleIds.length + ' 个' : ''}</span>
-          <P.Button variant="ghost" size="sm" onClick={() => { void openRoleEditor(null) }} aria-label="添加角色">
+          <P.Button variant="ghost" size="sm" onClick={() => { openRoleEditor(null) }} aria-label="添加角色">
             {Icon(P.IconPlusOutline16, 14)}添加
           </P.Button>
         </div>
@@ -54,8 +79,8 @@ export function AsidePanel(props: AsidePanelProps): ReactNode {
                     className={'dsgc-role' + (r.enabled ? '' : ' off')}
                     role="button"
                     tabIndex={0}
-                    onClick={() => { void openRoleEditor(r) }}
-                    onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); void openRoleEditor(r) } }}
+                    onClick={() => { openRoleEditor(r) }}
+                    onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); openRoleEditor(r) } }}
                     title="点击编辑角色"
                   >
                     <div className="dsgc-rolehead">
@@ -94,7 +119,7 @@ export function AsidePanel(props: AsidePanelProps): ReactNode {
                           className="dsgc-opbtn"
                           title="编辑角色"
                           aria-label="编辑角色"
-                          onClick={(e) => { e.stopPropagation(); void openRoleEditor(r) }}
+                          onClick={(e) => { e.stopPropagation(); openRoleEditor(r) }}
                         >
                           {Icon(P.IconEditOutline16, 14)}
                         </button>

package/src/client/components/ChatPanel.tsx

@@ -171,7 +171,7 @@ export function ChatPanel(props: ChatPanelProps): ReactNode {
               <div className="dsgc-emptytitle">{sess && sess.topic ? '「' + sess.topic + '」' : '会话已就绪'}</div>
               <div className="dsgc-hint">
                 {enabledRoles.length
-                  ? '发送消息开始讨论；@成员 点名让其优先回应；留空直接发送可让角色自由讨论——每轮全体参与角色按顺序各发言一次，可用右下角轮数控制（1–10 轮）'
+                  ? '发送消息开始讨论；@成员 点名让其优先回应——每轮全体参与角色按顺序各发言一次，可用右下角轮数控制（1–10 轮）'
                   : '先在右侧添加角色（每个角色可绑定不同模型），再回到这里发起讨论。'}
               </div>
             </div>

package/src/client/components/Composer.tsx

@@ -192,7 +192,7 @@ export function Composer(props: ComposerProps): ReactNode {
                 )
               : null}
           {!input.trim()
-            ? <div className="dsgc-ph" aria-hidden="true">发消息给全群，@成员 点名让其回应（留空则让角色自由讨论）…</div>
+            ? <div className="dsgc-ph" aria-hidden="true">发消息给全群，@成员 点名让其回应…</div>
             : null}
           <div
             className="dsgc-edit"
@@ -233,7 +233,7 @@ export function Composer(props: ComposerProps): ReactNode {
               </P.Button>
               )
             : (
-              <P.Button variant="primary" onClick={() => { void sendMsg() }} disabled={(!participants.length && !mentionedRoles.length) || !sess}>
+              <P.Button variant="primary" onClick={() => { void sendMsg() }} disabled={!input.trim() || (!participants.length && !mentionedRoles.length) || !sess}>
                 {Icon(P.IconSendOutline16, 16)}发送
               </P.Button>
               )}

package/src/client/components/ConstraintList.tsx

@@ -5,14 +5,9 @@
 
 import { useState, type ReactNode } from 'react'
 import type { SessionConstraint } from '../../core/types.ts'
+import { KIND_LABEL } from '../../core/constraints.ts'
 import { ClipWell, Fold } from './Fold.tsx'
 
-const KIND_LABEL: Record<SessionConstraint['kind'], string> = {
-  decided: '已定',
-  rejected: '否决',
-  open: '未决',
-}
-
 interface ConstraintListProps {
   items: SessionConstraint[]
 }

package/src/client/components/MessageFlow.tsx

@@ -87,6 +87,8 @@ export function MessageFlow(props: MessageFlowProps): ReactNode {
   let livePlaced = false
 
   if (sess) {
+    // 循环不变量：本群角色表只过滤一次（流式期间每帧执行的热路径）
+    const groupRoles = snap.roles.filter((r) => r.groupId === sess.groupId)
     const ids = sess.messageIds
     const memo = sess.constraints && sess.constraints.length
       ? <ConstraintList key={sess.id + '-constraints'} items={sess.constraints} />
@@ -100,7 +102,6 @@ export function MessageFlow(props: MessageFlowProps): ReactNode {
       if (!m) continue
       // 角色在父级解析：Bubble 按值 memo（不依赖 snap identity），流式帧
       // 不再触发已完成消息的全量重渲（每帧仅 live 行与派生列表变化）
-      const groupRoles = snap.roles.filter((r) => r.groupId === sess.groupId)
       const role = resolveFailedRole(m, groupRoles) || (m.speaker !== 'user' && m.speaker !== 'system' ? roleById(snap, m.speaker) : null)
       // 原地重试：该槽位换成 live（确认卡紧随其后），不要钉在列表末尾
       if (replaceId && m.id === replaceId) {

package/src/client/components/NavPanel.tsx

@@ -1,5 +1,5 @@
 /**
- * 左侧导航栏组件
+ * 左侧导航栏组件（群组 → 会话目录树；群组行与会话行共用重命名/删除三件套）。
  * @module dsh-group-chat/client/components
  */
 
@@ -8,6 +8,9 @@ import { Icon, P } from '../lib/ui.ts'
 import { HoverTip } from './HoverTip.tsx'
 import { groupById, sessById, sessStatus, SESS_STATUS_LABEL, type ClientSnapshot } from '../lib/model.ts'
 
+/** 目录树节点编辑态形状（群组/会话共用）。 */
+type NodeEdit = { kind: 'group' | 'session', id: string, value: string }
+
 interface NavPanelProps {
   snap: ClientSnapshot
   search: string
@@ -19,14 +22,55 @@ interface NavPanelProps {
   setGid: (val: string) => void
   setSid: (val: string) => void
   setPartsSel: (val: string[] | null) => void
-  renameDraft: { kind: 'group' | 'session', id: string, value: string } | null
-  setRenameDraft: (val: { kind: 'group' | 'session', id: string, value: string } | null) => void
+  renameDraft: NodeEdit | null
+  setRenameDraft: (val: NodeEdit | null) => void
   confirmDel: { kind: 'group' | 'session', id: string } | null
   setConfirmDel: (val: { kind: 'group' | 'session', id: string } | null) => void
   mutate: (args: Record<string, unknown>) => Promise<unknown>
   navOpen: boolean
 }
 
+/** 内联重命名输入（群组行/会话行同款）。 */
+function RenameField(props: { draft: NodeEdit, set: (d: NodeEdit | null) => void, commit: () => void, keyDown: (e: ReactKeyboardEvent<HTMLInputElement>) => void }): ReactNode {
+  const { draft, set, commit, keyDown } = props
+  return (
+    <input
+      className="dsgc-rename"
+      value={draft.value}
+      autoFocus
+      onChange={(e) => { set({ kind: draft.kind, id: draft.id, value: e.target.value }) }}
+      onBlur={() => { commit() }}
+      onKeyDown={keyDown}
+      onClick={(e) => { e.stopPropagation() }}
+    />
+  )
+}
+
+/** 行尾操作钮：重命名 + 两次点击确认删除（群组行/会话行同款）。 */
+function NodeOps(props: { renameLabel: string, deleteLabel: string, deleteTitle: string, danger: boolean, onRename: () => void, onDelete: () => void }): ReactNode {
+  const { renameLabel, deleteLabel, deleteTitle, danger, onRename, onDelete } = props
+  return (
+    <span className="dsgc-nodeops">
+      <button
+        className="dsgc-opbtn"
+        title={renameLabel}
+        aria-label={renameLabel}
+        onClick={(e) => { e.stopPropagation(); onRename() }}
+      >
+        {Icon(P.IconEditOutline16, 14)}
+      </button>
+      <button
+        className={'dsgc-opbtn' + (danger ? ' danger' : '')}
+        title={deleteTitle}
+        aria-label={deleteLabel}
+        onClick={(e) => { e.stopPropagation(); onDelete() }}
+      >
+        {Icon(P.IconTrashOutline16, 14)}
+      </button>
+    </span>
+  )
+}
+
 export function NavPanel(props: NavPanelProps): ReactNode {
   const { snap, search, setSearch, collapsedGroups, setCollapsedGroups, gid, sid, setGid, setSid, setPartsSel, renameDraft, setRenameDraft, confirmDel, setConfirmDel, mutate, navOpen } = props
 
@@ -58,6 +102,22 @@ export function NavPanel(props: NavPanelProps): ReactNode {
     else await mutate({ op: 'deleteSession', sessionId: d.id })
   }
 
+  // 选中即清编辑态（四连调用收敛为一处）
+  const clearEdits = (): void => {
+    setPartsSel(null)
+    setConfirmDel(null)
+    setRenameDraft(null)
+  }
+  const pickGroup = (id: string): void => {
+    setGid(id)
+    clearEdits()
+  }
+  const pickSession = (gidToSet: string, sidToSet: string): void => {
+    setGid(gidToSet)
+    setSid(sidToSet)
+    clearEdits()
+  }
+
   const q = search.trim().toLowerCase()
   const groupMatches = (g: ClientSnapshot['groups'][number]): { show: boolean, filterSessions: boolean } => {
     if (!q) return { show: true, filterSessions: false }
@@ -67,6 +127,7 @@ export function NavPanel(props: NavPanelProps): ReactNode {
   }
 
   const group = gid ? groupById(snap, gid) : null
+  const selected = sid ? sessById(snap, sid) : null
 
   const treeNodes: ReactNode[] = []
   for (const g of snap.groups) {
@@ -76,14 +137,13 @@ export function NavPanel(props: NavPanelProps): ReactNode {
     const isRenameGroup = renameDraft && renameDraft.kind === 'group' && renameDraft.id === g.id
     const isConfirmGroup = confirmDel && confirmDel.kind === 'group' && confirmDel.id === g.id
     const groupChildren: ReactNode[] = []
-    
+
     if (expanded) {
       for (const sessionId of g.sessionIds) {
         const s = sessById(snap, sessionId)
         if (!s) continue
         if (match.filterSessions && !s.name.toLowerCase().includes(q)) continue
-        const sess = sid ? sessById(snap, sid) : null
-        const isActive = sess && s.id === sess.id && g.id === group?.id
+        const isActive = selected && s.id === selected.id && g.id === group?.id
         const isRenameSess = renameDraft && renameDraft.kind === 'session' && renameDraft.id === s.id
         const isConfirm = confirmDel && confirmDel.kind === 'session' && confirmDel.id === s.id
         // 会话状态（对齐主 GUI StateDot：idle 不渲染点）
@@ -95,11 +155,11 @@ export function NavPanel(props: NavPanelProps): ReactNode {
             className={'dsgc-sess-row' + (isActive ? ' on' : '')}
             role="button"
             tabIndex={0}
-            onClick={() => { setGid(g.id); setSid(s.id); setPartsSel(null); setConfirmDel(null); setRenameDraft(null) }}
+            onClick={() => { pickSession(g.id, s.id) }}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault()
-                setGid(g.id); setSid(s.id); setPartsSel(null); setConfirmDel(null); setRenameDraft(null)
+                pickSession(g.id, s.id)
               }
             }}
           >
@@ -114,66 +174,45 @@ export function NavPanel(props: NavPanelProps): ReactNode {
                 : null}
             </span>
             {isRenameSess
-              ? (
-                <input
-                  className="dsgc-rename"
-                  value={renameDraft!.value}
-                  autoFocus
-                  onChange={(e) => { setRenameDraft({ kind: 'session', id: s.id, value: e.target.value }) }}
-                  onBlur={() => { void commitRename() }}
-                  onKeyDown={renameKeyDown}
-                  onClick={(e) => { e.stopPropagation() }}
-                />
-                )
+              ? <RenameField draft={renameDraft!} set={setRenameDraft} commit={() => { void commitRename() }} keyDown={renameKeyDown} />
               : (
                 <HoverTip label={s.name} side="right" delayMs={500} className="dsgc-sess-name">
                   {s.name}
                 </HoverTip>
                 )}
-            <span className="dsgc-nodeops">
-              <button
-                className="dsgc-opbtn"
-                title="重命名会话"
-                aria-label="重命名会话"
-                onClick={(e) => { e.stopPropagation(); setRenameDraft({ kind: 'session', id: s.id, value: s.name }) }}
-              >
-                {Icon(P.IconEditOutline16, 14)}
-              </button>
-              <button
-                className={'dsgc-opbtn' + (isConfirm ? ' danger' : '')}
-                title={isConfirm ? '再次点击确认删除' : '删除会话'}
-                aria-label="删除会话"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (isConfirm) void doDelete()
-                  else setConfirmDel({ kind: 'session', id: s.id })
-                }}
-              >
-                {Icon(P.IconTrashOutline16, 14)}
-              </button>
-            </span>
+            <NodeOps
+              renameLabel="重命名会话"
+              deleteLabel="删除会话"
+              deleteTitle={isConfirm ? '再次点击确认删除' : '删除会话'}
+              danger={!!isConfirm}
+              onRename={() => { setRenameDraft({ kind: 'session', id: s.id, value: s.name }) }}
+              onDelete={() => {
+                if (isConfirm) void doDelete()
+                else setConfirmDel({ kind: 'session', id: s.id })
+              }}
+            />
           </div>,
         )
       }
-      
+
       groupChildren.push(
         <button key="__add" className="dsgc-addsess" onClick={() => { void mutate({ op: 'createSession', groupId: g.id }) }}>
           {Icon(P.IconPlusOutline16, 14)}新会话
         </button>,
       )
     }
-    
+
     treeNodes.push(
       <div key={g.id} className="dsgc-gnode">
         <div
           className={'dsgc-grow-row' + (g.id === group?.id ? ' on' : '')}
           role="button"
           tabIndex={0}
-          onClick={() => { setGid(g.id); setPartsSel(null); setConfirmDel(null); setRenameDraft(null) }}
+          onClick={() => { pickGroup(g.id) }}
           onKeyDown={(e) => {
             if (e.key === 'Enter' || e.key === ' ') {
               e.preventDefault()
-              setGid(g.id); setPartsSel(null); setConfirmDel(null); setRenameDraft(null)
+              pickGroup(g.id)
             }
           }}
         >
@@ -194,40 +233,19 @@ export function NavPanel(props: NavPanelProps): ReactNode {
             {Icon(P.IconChevronDownOutline14, 14)}
           </button>
           {isRenameGroup
-            ? (
-              <input
-                className="dsgc-rename"
-                value={renameDraft!.value}
-                autoFocus
-                onChange={(e) => { setRenameDraft({ kind: 'group', id: g.id, value: e.target.value }) }}
-                onBlur={() => { void commitRename() }}
-                onKeyDown={renameKeyDown}
-                onClick={(e) => { e.stopPropagation() }}
-              />
-              )
+            ? <RenameField draft={renameDraft!} set={setRenameDraft} commit={() => { void commitRename() }} keyDown={renameKeyDown} />
             : <span className="dsgc-gname">{g.name}</span>}
-          <span className="dsgc-nodeops">
-            <button
-              className="dsgc-opbtn"
-              title="重命名群组"
-              aria-label="重命名群组"
-              onClick={(e) => { e.stopPropagation(); setRenameDraft({ kind: 'group', id: g.id, value: g.name }) }}
-            >
-              {Icon(P.IconEditOutline16, 14)}
-            </button>
-            <button
-              className={'dsgc-opbtn' + (isConfirmGroup ? ' danger' : '')}
-              title={isConfirmGroup ? '再次点击确认删除' : '删除群组'}
-              aria-label="删除群组"
-              onClick={(e) => {
-                e.stopPropagation()
-                if (isConfirmGroup) void doDelete()
-                else setConfirmDel({ kind: 'group', id: g.id })
-              }}
-            >
-              {Icon(P.IconTrashOutline16, 14)}
-            </button>
-          </span>
+          <NodeOps
+            renameLabel="重命名群组"
+            deleteLabel="删除群组"
+            deleteTitle={isConfirmGroup ? '再次点击确认删除' : '删除群组'}
+            danger={!!isConfirmGroup}
+            onRename={() => { setRenameDraft({ kind: 'group', id: g.id, value: g.name }) }}
+            onDelete={() => {
+              if (isConfirmGroup) void doDelete()
+              else setConfirmDel({ kind: 'group', id: g.id })
+            }}
+          />
         </div>
         {expanded ? <div className="dsgc-sess-list">{groupChildren}</div> : null}
       </div>,

package/src/client/components/RoleDrawer.tsx

@@ -3,31 +3,38 @@
  * @module dsh-group-chat/client/drawer
  */
 
-import { useEffect, useState, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { Icon, P } from '../lib/ui.ts'
 import { api } from '../lib/api.ts'
 import { PALETTE, type EffortsResponse, type ModelsResponse, type RoleDraft } from '../lib/model.ts'
+import type { MutateResponse } from '../hooks/useGroupChatState.ts'
 
 export interface RoleDrawerProps {
   draft: RoleDraft
   set: (draft: RoleDraft) => void
+  /** 保存目标群组（upsertRole 落库）。 */
+  groupId: string
   models: ModelsResponse | null
   modelsError: string | null
   onRetryModels: () => void
-  onSave: () => void
+  mutate: (args: Record<string, unknown>) => Promise<unknown>
   onCancel: () => void
-  formError: string
 }
 
 export function RoleDrawer(props: RoleDrawerProps): ReactNode {
-  const { draft, set } = props
+  const { draft, set, groupId } = props
   const models = props.models
   const providers = (models && models.providers) || []
   const modelsOf = (models && models.modelsByProvider && models.modelsByProvider[draft.provider]) || []
   const [closing, setClosing] = useState(false)
+  // Esc 监听挂在空依赖上，闭包看的是首帧 closing（恒 false）——用 ref 挡住
+  // 退场动画窗口内的重复触发
+  const closingRef = useRef(false)
+  const [formError, setFormError] = useState('')
   const [effortsInfo, setEffortsInfo] = useState<EffortsResponse | null>(null)
   const close = (): void => {
-    if (closing) return
+    if (closingRef.current) return
+    closingRef.current = true
     setClosing(true)
     window.setTimeout(() => props.onCancel(), 140)
   }
@@ -37,6 +44,21 @@ export function RoleDrawer(props: RoleDrawerProps): ReactNode {
     // 换模型路线后旧推理级别失效，重置为默认
     set(Object.assign({}, draft, { provider: p, model: list.length ? list[0].id : '', reasoningEffort: 'default' }))
   }
+  /** 保存（校验在本地，落库经 mutate；失败文案与原实现逐字一致）。 */
+  const save = async (): Promise<void> => {
+    if (!draft.name.trim()) {
+      setFormError('角色名称不能为空')
+      return
+    }
+    if (!draft.provider || !draft.model) {
+      setFormError('请选择角色绑定的模型')
+      return
+    }
+    const res = await props.mutate({ op: 'upsertRole', groupId, role: draft }) as MutateResponse | null
+    if (res && res.ok && res.snapshot && !res.snapshot.error) {
+      props.onCancel()
+    }
+  }
   useEffect(() => {
     const onKey = (e: KeyboardEvent): void => { if (e.key === 'Escape') close() }
     document.addEventListener('keydown', onKey)
@@ -174,12 +196,12 @@ export function RoleDrawer(props: RoleDrawerProps): ReactNode {
               </div>
               )
             : null}
-          {props.formError ? <div className="dsgc-formerr">{props.formError}</div> : null}
+          {formError ? <div className="dsgc-formerr">{formError}</div> : null}
         </div>
       </div>
       <div className="dsgc-drawerfoot">
         <P.Button variant="outline" onClick={close}>取消</P.Button>
-        <P.Button variant="primary" onClick={props.onSave}>{draft.id ? '保存' : '添加'}</P.Button>
+        <P.Button variant="primary" onClick={() => { void save() }}>{draft.id ? '保存' : '添加'}</P.Button>
       </div>
     </div>
   )

package/src/client/components/ToolRow.tsx

@@ -5,12 +5,12 @@
 
 import { useState, type ReactNode } from 'react'
 import { Icon, P, pickPrimitive } from '../lib/ui.ts'
-import type { ToolCallView } from '../lib/model.ts'
+import type { ToolCallRecord } from '../../core/types.ts'
 import { ClipWell, Fold } from './Fold.tsx'
 
 const TOOL_ICONS: Record<string, string> = { read_file: 'IconBrowseOutline16', list_dir: 'IconFolderOpenOutline16', run_command: 'IconCodeOutline16' }
 
-export function ToolRow(props: { c: ToolCallView }): ReactNode {
+export function ToolRow(props: { c: ToolCallRecord }): ReactNode {
   const c = props.c
   const [expanded, setExpanded] = useState(false)
   let brief = ''

package/src/client/hooks/useComposer.ts

@@ -127,14 +127,14 @@ export function useMentionChip(
   setMentionIdx: (val: number) => void,
   syncFromDOM: () => void,
 ) {
-  /** 弹层候选 → 删掉光标前的 @词、插入原子芯片 + 尾随空格 */
-  const insertChip = useCallback((role: SnapshotRole): void => {
+  /** 弹层候选 → 删掉光标前的 @词、插入带 data-new 标记的芯片 + 尾随空格。 */
+  const insertChipHtml = useCallback((html: string): void => {
     const el = inputRef.current
     const sel = window.getSelection()
     if (!el || !sel) return
     if (!sel.anchorNode || !el.contains(sel.anchorNode)) return
     el.focus({ preventScroll: true })
-    
+
     // 1. 删除光标前的 @token（包括引号）
     const node = sel.anchorNode
     if (node.nodeType === Node.TEXT_NODE) {
@@ -157,12 +157,13 @@ export function useMentionChip(
         }
       }
     }
-    
-    // 2. 插入芯片
-    execCommand('insertHTML', chipHtml(role).replace('class="dsgc-chipin"', 'class="dsgc-chipin" data-new=""'))
+
+    // 2. 插入芯片（fresh 标记：部分浏览器把选区落进 contenteditable=false 芯片内部，
+    //    曾致空格丢失与光标不可见）
+    execCommand('insertHTML', html)
     const chip = el.querySelector<HTMLElement>('.dsgc-chipin[data-new]')
     if (!chip) return
-    
+
     // 3. 选区显式钉到芯片之后，再补尾随空格
     const after = document.createRange()
     after.setStartAfter(chip)
@@ -176,53 +177,13 @@ export function useMentionChip(
     syncFromDOM()
   }, [inputRef, setMention, setMentionIdx, syncFromDOM])
 
+  const insertChip = useCallback((role: SnapshotRole): void => {
+    insertChipHtml(chipHtml(role, true))
+  }, [insertChipHtml])
+
   const insertFileChip = useCallback((path: string, kind: 'file' | 'directory'): void => {
-    const el = inputRef.current
-    const sel = window.getSelection()
-    if (!el || !sel) return
-    if (!sel.anchorNode || !el.contains(sel.anchorNode)) return
-    el.focus({ preventScroll: true })
-    
-    // 1. 删除光标前的 @token（包括引号）
-    const node = sel.anchorNode
-    if (node.nodeType === Node.TEXT_NODE) {
-      const text = node.nodeValue || ''
-      const off = sel.anchorOffset
-      const before = text.slice(0, off)
-      // 匹配 @词 或 @"词
-      const m = /(?:^|\s)@("?)([^"\s@]*)$/.exec(before)
-      if (m) {
-        const prefixLen = m[1] ? 2 : 1  // @" 或 @
-        const queryLen = m[2].length
-        const start = off - prefixLen - queryLen
-        if (start >= 0) {
-          const range = document.createRange()
-          range.setStart(node, start)
-          range.setEnd(node, off)
-          sel.removeAllRanges()
-          sel.addRange(range)
-          execCommand('delete')
-        }
-      }
-    }
-    
-    // 2. 插入文件芯片
-    execCommand('insertHTML', fileChipHtml(path, kind).replace('class="dsgc-chipin dsgc-chipin-file"', 'class="dsgc-chipin dsgc-chipin-file" data-new=""'))
-    const chip = el.querySelector<HTMLElement>('.dsgc-chipin[data-new]')
-    if (!chip) return
-    
-    // 3. 选区显式钉到芯片之后，再补尾随空格
-    const after = document.createRange()
-    after.setStartAfter(chip)
-    after.collapse(true)
-    sel.removeAllRanges()
-    sel.addRange(after)
-    execCommand('insertText', ' ')
-    chip.removeAttribute('data-new')
-    setMention(null)
-    setMentionIdx(0)
-    syncFromDOM()
-  }, [inputRef, setMention, setMentionIdx, syncFromDOM])
+    insertChipHtml(fileChipHtml(path, kind, true))
+  }, [insertChipHtml])
 
   return { insertChip, insertFileChip }
 }

package/src/client/hooks/useGroupChatState.ts

@@ -70,17 +70,12 @@ export function useGroupChatState() {
   const [confirmDel, setConfirmDel] = useState<{ kind: 'group' | 'session', id: string } | null>(null)
   const [confirmClear, setConfirmClear] = useState(false)
   const [topicDraft, setTopicDraft] = useState<string | null>(null)
-  const [wsDraft, setWsDraft] = useState<string | null>(null)
-  
-  // 角色编辑
+
+  // 角色编辑（models 目录与保存/校验态在 RoleDrawer 内自理）
   const [roleDraft, setRoleDraft] = useState<RoleDraft | null>(null)
-  const [roleFormError, setRoleFormError] = useState('')
   const [models, setModels] = useState<ModelsResponse | null>(null)
   const [modelsError, setModelsError] = useState<string | null>(null)
   
-  // 文件浏览器
-  const [fileBrowser, setFileBrowser] = useState<{ open: boolean, loading: boolean, list: import('../../core/types.ts').BrowseResult | null, error: string } | null>(null)
-  
   // 参与角色选择
   const [partsSel, setPartsSel] = useState<string[] | null>(null)
   const [rounds, setRounds] = useState(1)
@@ -174,16 +169,10 @@ export function useGroupChatState() {
     setConfirmClear,
     roleDraft,
     setRoleDraft,
-    roleFormError,
-    setRoleFormError,
     models,
     setModels,
     modelsError,
     setModelsError,
-    fileBrowser,
-    setFileBrowser,
-    wsDraft,
-    setWsDraft,
     partsSel,
     setPartsSel,
     rounds,