@roaming-ai/dsh-group-chat 0.2.2 → 0.3.1

package/src/client/components/NavPanel.tsx

@@ -1,12 +1,16 @@
 /**
- * 左侧导航栏组件
+ * 左侧导航栏组件（群组 → 会话目录树；群组行与会话行共用重命名/删除三件套）。
  * @module dsh-group-chat/client/components
  */
 
 import type { ReactNode, KeyboardEvent as ReactKeyboardEvent } from 'react'
 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
@@ -18,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
 
@@ -57,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 }
@@ -66,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) {
@@ -75,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 不渲染点）
@@ -94,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)
               }
             }}
           >
@@ -113,62 +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() }}
-                />
-                )
-              : <span className="dsgc-sess-name">{s.name}</span>}
-            <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>
+              ? <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>
+                )}
+            <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)
             }
           }}
         >
@@ -189,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/ThinkRow.tsx

@@ -6,6 +6,7 @@
 import { useState, type ReactNode } from 'react'
 import { P } from '../lib/ui.ts'
 import { firstLine, latestLine } from '../lib/model.ts'
+import { ClipWell, Fold } from './Fold.tsx'
 
 export function ThinkRow(props: { text: string, running?: boolean }): ReactNode {
   const text = props.text || ''
@@ -24,9 +25,12 @@ export function ThinkRow(props: { text: string, running?: boolean }): ReactNode
         expandOnRowClick
         onToggle={() => { setExpanded((v) => !v) }}
         collapsedContent={text ? <span className="dsgc-thinksummary">{summary}</span> : null}
-      >
-        <div className="dsgc-thinkbody">{text}</div>
-      </P.DisclosureRow>
+      />
+      <Fold open={expanded}>
+        <ClipWell maxHeight={320} watch={text}>
+          <div className="dsgc-thinkbody">{text}</div>
+        </ClipWell>
+      </Fold>
     </div>
   )
 }

package/src/client/components/ToolRow.tsx

@@ -5,11 +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 = ''
@@ -43,9 +44,12 @@ export function ToolRow(props: { c: ToolCallView }): ReactNode {
             {statusText + (dur ? ' · ' + dur : '')}
           </span>
         }
-      >
-        <div className="dsgc-toolbody">{c.output || '（无输出）'}</div>
-      </P.DisclosureRow>
+      />
+      <Fold open={expanded}>
+        <ClipWell maxHeight={260} watch={c.output}>
+          <div className="dsgc-toolbody">{c.output || '（无输出）'}</div>
+        </ClipWell>
+      </Fold>
     </div>
   )
 }

package/src/client/hooks/useComposer.ts

@@ -3,8 +3,9 @@
  * @module dsh-group-chat/client/hooks
  */
 
-import { useCallback, useEffect, type ClipboardEvent as ReactClipboardEvent, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, type ClipboardEvent as ReactClipboardEvent, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react'
 import { execCommand, queryAtCaret, serializeInput, chipHtml, fileChipHtml } from '../utils/utils.ts'
+import { readComposerDraft, writeComposerDraft } from '../lib/composer-draft.ts'
 import type { AtToken } from '../../shared/file-mention-grammar.ts'
 import type { SnapshotRole } from '../lib/model.ts'
 
@@ -44,12 +45,18 @@ export function useComposerInput(
   setInput: (val: string) => void,
   setMention: (val: AtToken | null) => void,
   setMentionIdx: (val: number) => void,
+  sessionId?: string | null,
 ) {
-  /** 从 DOM 同步 input 状态（序列化） */
+  const sessionIdRef = useRef(sessionId)
+  sessionIdRef.current = sessionId
+
+  /** 从 DOM 同步 input 状态（序列化），并写入当前会话草稿槽。 */
   const syncFromDOM = useCallback((): void => {
     const el = inputRef.current
     if (!el) return
-    setInput(serializeInput(el))
+    const text = serializeInput(el)
+    setInput(text)
+    writeComposerDraft(sessionIdRef.current, el.innerHTML, text)
   }, [inputRef, setInput])
 
   const onInputCE = useCallback((): void => {
@@ -84,20 +91,50 @@ export function useComposerInput(
   }
 }
 
+/**
+ * 按会话恢复草稿：切会话时先把当前 HTML 写入旧槽，再灌入新槽；
+ * 面板重挂载（主会话⇄群聊）时 editor 是新节点，从模块缓存灌回。
+ */
+export function useComposerDraft(
+  sessionId: string | null | undefined,
+  inputRef: React.RefObject<HTMLDivElement>,
+  setInput: (val: string) => void,
+  setMention: (val: AtToken | null) => void,
+): void {
+  const prevIdRef = useRef<string | null>(null)
+  useLayoutEffect(() => {
+    const el = inputRef.current
+    const prev = prevIdRef.current
+    const next = sessionId || null
+    if (el && prev && prev !== next) writeComposerDraft(prev, el.innerHTML, serializeInput(el))
+    prevIdRef.current = next
+    if (!next) return
+    const draft = readComposerDraft(next)
+    if (el) el.innerHTML = draft.html
+    setInput(draft.text)
+    setMention(null)
+    return () => {
+      const node = inputRef.current
+      const id = prevIdRef.current
+      if (node && id) writeComposerDraft(id, node.innerHTML, serializeInput(node))
+    }
+  }, [sessionId, inputRef, setInput, setMention])
+}
+
 export function useMentionChip(
   inputRef: React.RefObject<HTMLDivElement>,
   setMention: (val: AtToken | null) => void,
   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) {
@@ -120,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)
@@ -139,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

@@ -5,6 +5,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { api } from '../lib/api.ts'
+import { readComposerDraft } from '../lib/composer-draft.ts'
 import type { ClientSnapshot, ModelsResponse, RoleDraft } from '../lib/model.ts'
 import type { AtToken } from '../../shared/file-mention-grammar.ts'
 
@@ -22,8 +23,8 @@ export interface ActionOk {
 
 /**
  * 面板切换缓存（模块级，跨挂载存活）：main 为 keyed 槽，主会话⇄群聊切换会
- * 整体卸载重挂面板组件；缓存最近快照与选中项让重挂载瞬时恢复上次视图，
- * 挂载后的 state 拉取 / SSE 首帧再行校正（本机回路往返仅数毫秒）。
+ * 整体卸载重挂面板组件；缓存最近快照、选中项与按会话分槽的未发送草稿，
+ * 让重挂载瞬时恢复上次视图。挂载后的 state 拉取 / SSE 首帧再行校正。
  */
 let cachedSnap: ClientSnapshot | null = null
 let cachedGid: string | null = null
@@ -69,23 +70,18 @@ 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)
   
-  // 输入与 @提及
-  const [input, setInput] = useState('')
+  // 输入与 @提及（文本初值取当前选中会话草稿，HTML 由 useComposerDraft 灌回）
+  const [input, setInput] = useState(() => readComposerDraft(cachedSid).text)
   const [mention, setMention] = useState<AtToken | null>(null)
   const [mentionIdx, setMentionIdx] = useState(0)
   
@@ -173,16 +169,10 @@ export function useGroupChatState() {
     setConfirmClear,
     roleDraft,
     setRoleDraft,
-    roleFormError,
-    setRoleFormError,
     models,
     setModels,
     modelsError,
     setModelsError,
-    fileBrowser,
-    setFileBrowser,
-    wsDraft,
-    setWsDraft,
     partsSel,
     setPartsSel,
     rounds,