@roaming-ai/dsh-group-chat 0.2.0

package/src/client/components/ChatPanel.tsx

@@ -0,0 +1,214 @@
+/**
+ * 中央会话面板组件
+ * @module dsh-group-chat/client/components
+ */
+
+import type { ReactNode } from 'react'
+import { Icon, P } from '../lib/ui.ts'
+import { MessageFlow } from './MessageFlow.tsx'
+import { Composer } from './Composer.tsx'
+import type { ClientSnapshot, SnapshotRole } from '../lib/model.ts'
+import type { AtToken } from '../../shared/file-mention-grammar.ts'
+
+interface ChatPanelProps {
+  snap: ClientSnapshot
+  sess: ClientSnapshot['sessions'][number] | null
+  group: ClientSnapshot['groups'][number]
+  enabledRoles: SnapshotRole[]
+  participants: string[]
+  mentionedRoles: SnapshotRole[]
+  busyNow: boolean
+  input: string
+  mention: AtToken | null
+  mentionCandidates: SnapshotRole[]
+  mentionIdxC: number
+  fileCandidates: Array<{ path: string, isDir: boolean }>
+  fileSearchError: string | null
+  fileSearchLoading: boolean
+  rounds: number
+  err: string
+  atBottom: boolean
+  topicDraft: string | null
+  msgById: Record<string, ClientSnapshot['messages'][number]>
+  navOpen: boolean
+  asideOpen: boolean
+  inputRef: React.RefObject<HTMLDivElement>
+  scrollRef: React.RefObject<HTMLDivElement>
+  setTopicDraft: (val: string | null) => void
+  setConfirmClear: (val: boolean) => void
+  setMentionIdx: (val: number) => void
+  setRounds: (val: number) => void
+  setNavOpen: (val: boolean) => void
+  setAsideOpen: (val: boolean) => void
+  togglePart: (rid: string) => void
+  onMsgsScroll: () => void
+  onInputCE: () => void
+  onInputKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void
+  onPasteCE: (e: React.ClipboardEvent<HTMLDivElement>) => void
+  onDropCE: (e: React.DragEvent<HTMLDivElement>) => void
+  onDragOverCE: (e: React.DragEvent<HTMLDivElement>) => void
+  insertChip: (role: SnapshotRole) => void
+  insertFileChip: (path: string, kind: 'file' | 'directory') => void
+  sendMsg: () => Promise<void>
+  stopRun: () => Promise<void>
+  action: (payload: Record<string, unknown>) => Promise<unknown>
+  mutate: (args: Record<string, unknown>) => Promise<unknown>
+  setMention: (val: AtToken | null) => void
+}
+
+export function ChatPanel(props: ChatPanelProps): ReactNode {
+  const {
+    snap,
+    sess,
+    group,
+    enabledRoles,
+    participants,
+    mentionedRoles,
+    busyNow,
+    input,
+    mention,
+    mentionCandidates,
+    mentionIdxC,
+    fileCandidates,
+    fileSearchError,
+    fileSearchLoading,
+    rounds,
+    err,
+    atBottom,
+    topicDraft,
+    msgById,
+    navOpen,
+    asideOpen,
+    inputRef,
+    scrollRef,
+    setTopicDraft,
+    setConfirmClear,
+    setMentionIdx,
+    setRounds,
+    setNavOpen,
+    setAsideOpen,
+    togglePart,
+    onMsgsScroll,
+    onInputCE,
+    onInputKeyDown,
+    onPasteCE,
+    onDropCE,
+    onDragOverCE,
+    insertChip,
+    insertFileChip,
+    sendMsg,
+    stopRun,
+    action,
+    mutate,
+    setMention,
+  } = props
+
+  const commitTopic = (): void => {
+    if (topicDraft !== null && sess && topicDraft !== sess.topic) void mutate({ op: 'setTopic', sessionId: sess.id, topic: topicDraft })
+    setTopicDraft(null)
+  }
+
+  const bubbles = (
+    <MessageFlow
+      snap={snap}
+      sess={sess}
+      busyNow={busyNow}
+      msgById={msgById}
+      action={action}
+    />
+  )
+
+  return (
+    <section className="dsgc-chat">
+      {/* 接缝收合钮 */}
+      <button
+        type="button"
+        className={'dsgc-seambtn left' + (navOpen ? '' : ' closed')}
+        aria-label={navOpen ? '收起群组导航栏' : '展开群组导航栏'}
+        title={navOpen ? '收起群组导航栏' : '展开群组导航栏'}
+        aria-expanded={navOpen}
+        onClick={() => { setNavOpen(!navOpen) }}
+      >
+        {Icon(P.IconChevronLeftOutline14, 16)}
+      </button>
+      <button
+        type="button"
+        className={'dsgc-seambtn right' + (asideOpen ? '' : ' closed')}
+        aria-label={asideOpen ? '收起成员与工作区栏' : '展开成员与工作区栏'}
+        title={asideOpen ? '收起成员与工作区栏' : '展开成员与工作区栏'}
+        aria-expanded={asideOpen}
+        onClick={() => { setAsideOpen(!asideOpen) }}
+      >
+        {Icon(P.IconChevronRightOutline14, 16)}
+      </button>
+      
+      <div className="dsgc-chathead">
+        {sess ? <span className="dsgc-sess-title" title={'当前会话：' + sess.name}>{sess.name}</span> : null}
+        <input
+          className="dsgc-topic"
+          value={topicDraft === null ? (sess ? sess.topic : '') : topicDraft}
+          placeholder="设置本会话主题（可选）…"
+          onChange={(e) => { setTopicDraft(e.target.value) }}
+          onBlur={commitTopic}
+          onKeyDown={(e) => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur() }}
+        />
+        <P.Button variant="ghost" size="sm" className="dsgc-clearbtn" title="清空当前会话的消息记录" onClick={() => { if (sess) setConfirmClear(true) }}>
+          清空
+        </P.Button>
+      </div>
+      
+      <div className="dsgc-msgs" ref={scrollRef} onScroll={onMsgsScroll}>
+        {sess && sess.messageIds.length > 0
+          ? bubbles
+          : (
+            <div className="dsgc-empty">
+              {Icon(P.IconSparkle16, 20)}
+              <div className="dsgc-emptytitle">{sess && sess.topic ? '「' + sess.topic + '」' : '会话已就绪'}</div>
+              <div className="dsgc-hint">
+                {enabledRoles.length
+                  ? '发送消息开始讨论；@成员 点名让其优先回应；留空直接发送可让角色自由讨论——每轮全体参与角色按顺序各发言一次，可用右下角轮数控制（1–10 轮）'
+                  : '先在右侧添加角色（每个角色可绑定不同模型），再回到这里发起讨论。'}
+              </div>
+            </div>
+            )}
+      </div>
+      
+      <Composer
+        snap={snap}
+        sess={sess}
+        group={group}
+        enabledRoles={enabledRoles}
+        participants={participants}
+        mentionedRoles={mentionedRoles}
+        busyNow={busyNow}
+        input={input}
+        mention={mention}
+        mentionCandidates={mentionCandidates}
+        mentionIdxC={mentionIdxC}
+        fileCandidates={fileCandidates}
+        fileSearchError={fileSearchError}
+        fileSearchLoading={fileSearchLoading}
+        rounds={rounds}
+        err={err}
+        atBottom={atBottom}
+        bubblesLength={sess?.messageIds.length || 0}
+        inputRef={inputRef}
+        scrollRef={scrollRef}
+        setMentionIdx={setMentionIdx}
+        setRounds={setRounds}
+        togglePart={togglePart}
+        onInputCE={onInputCE}
+        onInputKeyDown={onInputKeyDown}
+        onPasteCE={onPasteCE}
+        onDropCE={onDropCE}
+        onDragOverCE={onDragOverCE}
+        insertChip={insertChip}
+        insertFileChip={insertFileChip}
+        sendMsg={sendMsg}
+        stopRun={stopRun}
+        mutate={mutate}
+        setMention={setMention}
+      />
+    </section>
+  )
+}

package/src/client/components/Composer.tsx

@@ -0,0 +1,238 @@
+/**
+ * 消息输入编辑器组件
+ * @module dsh-group-chat/client/components
+ */
+
+import type { ReactNode, KeyboardEvent as ReactKeyboardEvent, ClipboardEvent as ReactClipboardEvent, DragEvent as ReactDragEvent } from 'react'
+import { Icon, P } from '../lib/ui.ts'
+import { PermissionSelect } from './PermissionSelect.tsx'
+import { escapeRegExp, type ClientSnapshot, type SnapshotRole } from '../lib/model.ts'
+import type { AtToken } from '../../shared/file-mention-grammar.ts'
+
+interface ComposerProps {
+  snap: ClientSnapshot
+  sess: ClientSnapshot['sessions'][number] | null
+  group: ClientSnapshot['groups'][number]
+  enabledRoles: SnapshotRole[]
+  participants: string[]
+  mentionedRoles: SnapshotRole[]
+  busyNow: boolean
+  input: string
+  mention: AtToken | null
+  mentionCandidates: SnapshotRole[]
+  mentionIdxC: number
+  fileCandidates: Array<{ path: string, isDir: boolean }>
+  fileSearchError: string | null
+  fileSearchLoading: boolean
+  rounds: number
+  err: string
+  atBottom: boolean
+  bubblesLength: number
+  inputRef: React.RefObject<HTMLDivElement>
+  scrollRef: React.RefObject<HTMLDivElement>
+  setMentionIdx: (val: number) => void
+  setRounds: (val: number) => void
+  togglePart: (rid: string) => void
+  onInputCE: () => void
+  onInputKeyDown: (e: ReactKeyboardEvent<HTMLDivElement>) => void
+  onPasteCE: (e: ReactClipboardEvent<HTMLDivElement>) => void
+  onDropCE: (e: ReactDragEvent<HTMLDivElement>) => void
+  onDragOverCE: (e: ReactDragEvent<HTMLDivElement>) => void
+  insertChip: (role: SnapshotRole) => void
+  insertFileChip: (path: string, kind: 'file' | 'directory') => void
+  sendMsg: () => Promise<void>
+  stopRun: () => Promise<void>
+  mutate: (args: Record<string, unknown>) => Promise<unknown>
+  setMention: (val: AtToken | null) => void
+}
+
+export function Composer(props: ComposerProps): ReactNode {
+  const {
+    snap,
+    sess,
+    group,
+    enabledRoles,
+    participants,
+    mentionedRoles,
+    busyNow,
+    input,
+    mention,
+    mentionCandidates,
+    mentionIdxC,
+    fileCandidates,
+    fileSearchError,
+    fileSearchLoading,
+    rounds,
+    err,
+    atBottom,
+    bubblesLength,
+    inputRef,
+    scrollRef,
+    setMentionIdx,
+    setRounds,
+    togglePart,
+    onInputCE,
+    onInputKeyDown,
+    onPasteCE,
+    onDropCE,
+    onDragOverCE,
+    insertChip,
+    insertFileChip,
+    sendMsg,
+    stopRun,
+    mutate,
+    setMention,
+  } = props
+
+  return (
+    <div className="dsgc-composer">
+      {!atBottom && bubblesLength
+        ? (
+          <div className="dsgc-tobottom">
+            <button
+              type="button"
+              className="dsgc-tobtn"
+              onClick={() => { const el = scrollRef.current; if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' }) }}
+            >
+              {Icon(P.IconChevronDownOutline14, 14)}回到底部
+            </button>
+          </div>
+          )
+        : null}
+      {err ? <div className="dsgc-err">{err}</div> : null}
+      <div className="dsgc-parts">
+        <span className="dsgc-partslabel">参与角色</span>
+        {mentionedRoles.length
+          ? <span className="dsgc-partslabel">已 @ {mentionedRoles.map((r) => r.name).join('、')}（本轮仅被点名成员发言）</span>
+          : enabledRoles.length
+            ? enabledRoles.map((r) => (
+              <button
+                key={r.id}
+                type="button"
+                className={'dsgc-partchip' + (participants.includes(r.id) ? ' on' : '')}
+                onClick={() => togglePart(r.id)}
+                disabled={busyNow}
+                title={busyNow ? '对话进行中，暂停调整' : '点击切换本轮是否参与'}
+              >
+                <span className="dsgc-chipdot" style={{ background: r.color || '#888' }} />
+                {r.name}
+              </button>
+              ))
+            : <span className="dsgc-hint">还没有启用的角色，请在右侧添加</span>}
+      </div>
+      <div className="dsgc-card">
+        <div className="dsgc-mentionwrap">
+          {mention !== null && mention.query === '' && mentionCandidates.length > 0
+            ? (
+              <div className="dsgc-mention" role="listbox">
+                {mentionCandidates.map((r, i) => (
+                  <button
+                    key={r.id}
+                    type="button"
+                    className={'dsgc-mentionitem' + (i === mentionIdxC ? ' on' : '')}
+                    role="option"
+                    aria-selected={i === mentionIdxC ? 'true' : 'false'}
+                    onMouseDown={(e) => { e.preventDefault() }}
+                    onClick={() => { insertChip(r) }}
+                    onMouseEnter={() => setMentionIdx(i)}
+                  >
+                    <span className="dsgc-chipdot" style={{ background: r.color || '#888' }} />
+                    <span className="dsgc-mentionname">{r.name}</span>
+                    <span className="dsgc-mentionmodel">{r.provider} / {r.model}</span>
+                  </button>
+                ))}
+                <span className="dsgc-mentionhint">↑↓ 选择 · Enter/Tab 插入</span>
+              </div>
+              )
+            : mention !== null && mention.query !== ''
+              ? (
+                <div className="dsgc-mention dsgc-mention-file" role="listbox">
+                  {fileCandidates.length
+                    ? fileCandidates.map((item, i) => (
+                      <button
+                        key={item.path}
+                        type="button"
+                        className={'dsgc-mentionitem' + (i === mentionIdxC ? ' on' : '')}
+                        role="option"
+                        aria-selected={i === mentionIdxC ? 'true' : 'false'}
+                        onMouseDown={(e) => { e.preventDefault() }}
+                        onClick={() => {
+                          insertFileChip(item.path, item.isDir ? 'directory' : 'file')
+                        }}
+                        onMouseEnter={() => setMentionIdx(i)}
+                      >
+                        <span className={'dsgc-fileglyph' + (item.isDir ? ' dir' : ' file')} aria-hidden="true">
+                          {item.isDir
+                            ? <P.FileTypeIcon kind="folder" size={16} />
+                            : <P.FileTypeIcon path={item.path} size={16} />}
+                        </span>
+                        <span className="dsgc-mentionname">{item.path}</span>
+                        {item.isDir ? <span className="dsgc-filedrill">{Icon(P.IconChevronRightOutline14, 12)}</span> : null}
+                      </button>
+                    ))
+                    : fileSearchLoading
+                      ? <div className="dsgc-mentionitem dsgc-hint">检索中…</div>
+                      : fileSearchError
+                        ? <div className="dsgc-mentionitem dsgc-hint">{fileSearchError}</div>
+                        : <div className="dsgc-mentionitem dsgc-hint">无匹配文件</div>}
+                  <span className="dsgc-mentionhint">
+                    {fileSearchLoading && fileCandidates.length
+                      ? '检索中…'
+                      : fileCandidates.some((f) => f.isDir)
+                        ? '↑↓ 选择 · Enter 插入 · Tab 进入目录 · Esc 关闭'
+                        : '↑↓ 选择 · Enter 插入 · Esc 关闭'}
+                  </span>
+                </div>
+                )
+              : null}
+          {!input.trim()
+            ? <div className="dsgc-ph" aria-hidden="true">发消息给全群，@成员 点名让其回应（留空则让角色自由讨论）…</div>
+            : null}
+          <div
+            className="dsgc-edit"
+            ref={inputRef}
+            contentEditable
+            suppressContentEditableWarning
+            role="textbox"
+            aria-multiline="true"
+            aria-label="群聊消息输入框"
+            onInput={onInputCE}
+            onKeyDown={onInputKeyDown}
+            onPaste={onPasteCE}
+            onDrop={onDropCE}
+            onDragOver={onDragOverCE}
+            onBlur={() => { setMention(null) }}
+          />
+        </div>
+        <div className="dsgc-sendrow">
+          <PermissionSelect
+            tier={group.permissionTier}
+            onSelect={(tier) => { void mutate({ op: 'setPermissionTier', groupId: group.id, tier }) }}
+          />
+          <span style={{ flex: 1 }} />
+          <div className="dsgc-rounds" title="自由讨论的轮数（1–10）：一轮 = 全体参与角色按顺序各发言一次">
+            <button type="button" className="dsgc-roundbtn" aria-label="减少轮数" disabled={rounds <= 1} onClick={() => { setRounds(Math.max(1, rounds - 1)) }}>
+              {Icon(P.IconChevronLeftOutline14, 12)}
+            </button>
+            <span className="dsgc-roundnum" title="轮数">{rounds}</span>
+            <button type="button" className="dsgc-roundbtn" aria-label="增加轮数" disabled={rounds >= 10} onClick={() => { setRounds(Math.min(10, rounds + 1)) }}>
+              {Icon(P.IconChevronRightOutline14, 12)}
+            </button>
+            <span style={{ padding: '0 6px 0 2px' }}>轮</span>
+          </div>
+          {busyNow
+            ? (
+              <P.Button variant="outline" className="dsgc-stopbtn" onClick={() => { void stopRun() }}>
+                {Icon(P.IconStopFill16, 16)}停止
+              </P.Button>
+              )
+            : (
+              <P.Button variant="primary" onClick={() => { void sendMsg() }} disabled={(!participants.length && !mentionedRoles.length) || !sess}>
+                {Icon(P.IconSendOutline16, 16)}发送
+              </P.Button>
+              )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/components/Glyph.tsx

@@ -0,0 +1,27 @@
+/**
+ * 侧边栏入口图标。
+ *
+ * 整行命中层携带 “newSession” 类名：任务看板等 DOM 注入式面板用
+ * [class*="newSession"] 识别“侧边栏导航点击”并自动收起自己，与点击
+ * “新建会话”行为一致——类名不可哈希化。
+ * @module dsh-group-chat/client/glyph
+ */
+
+import type { ReactNode } from 'react'
+
+export function Glyph(props: { size?: number }): ReactNode {
+  const size = (props && props.size) || 18
+  return (
+    <span className="dsgc-entryOverlay newSession">
+      <span className="dsgc-entryIcon">
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx={9} cy={7} r={4} />
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        </svg>
+      </span>
+    </span>
+  )
+}

package/src/client/components/GroupChatSettingsSection.tsx

@@ -0,0 +1,74 @@
+/**
+ * 设置页：启停开关（settings.section 插槽）。写 host 的 group-chat 设置
+ * 命名空间（settings.yaml 持久化）。
+ * @module dsh-group-chat/client/settings
+ */
+
+import { useEffect, useState, type ReactNode } from 'react'
+import type { SettingsScope } from '@deepseek-ai/dsh-client-ui-settings/client'
+import { P } from '../lib/ui.ts'
+
+/** Host 侧注册的设置命名空间 shape。 */
+interface GroupChatSettings {
+  enabled?: boolean
+}
+
+export function GroupChatSettingsSection(props: { settingsScope: SettingsScope<GroupChatSettings> }): ReactNode {
+  const scope = props.settingsScope
+  const [snap, setSnap] = useState<ReturnType<SettingsScope<GroupChatSettings>['getSnapshot']> | null>(null)
+  const [pending, setPending] = useState(false)
+
+  useEffect(() => {
+    let live = true
+    const read = (): void => {
+      if (!live) return
+      try {
+        setSnap(scope.getSnapshot())
+      } catch { /* ignore */ }
+    }
+    read()
+    const off = scope.subscribe(read)
+    return () => {
+      live = false
+      off()
+    }
+  }, [])
+
+  const ready = snap !== null && snap.status === 'ready'
+  const writable = ready ? snap.writable !== false : false
+  const enabled = ready ? (snap.value && snap.value.enabled) !== false : true
+
+  const toggle = async (): Promise<void> => {
+    if (!writable || pending) return
+    setPending(true)
+    try {
+      await scope.set('enabled', !enabled)
+    } catch (e) {
+      console.error('[dsh-group-chat] settings write failed', e)
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return (
+    <div className="dgcs-page">
+      <div className="dgcs-head">
+        <h3 className="dgcs-title">模型群聊</h3>
+        <p className="dgcs-desc">多模型角色群组对话面板：每个角色绑定不同的 provider/model；群组内多会话目录树管理，群内共享对话记录与工作区目录；消息以 markdown 渲染、支持思考折叠；输入框支持 @成员 / @文件。数据持久化于 ~/.dsh/storages/group-chat/，重启 dsh web 后恢复。</p>
+      </div>
+      <div className="dgcs-card">
+        <div className="dgcs-cardtext">
+          <div className="dgcs-cardtitle">{enabled ? '已启用' : '已停用'}</div>
+          <div className="dgcs-cardhint">{writable ? (enabled ? '关闭后侧边栏将不再显示「群聊」入口，进行中的对话会被中止。' : '开启后侧边栏显示「群聊」入口。') : '当前设置不可写（可能被配置文件覆盖）。'}</div>
+        </div>
+        <P.Switch
+          checked={enabled}
+          onChange={() => { void toggle() }}
+          disabled={!writable || pending}
+          label="模型群聊启停"
+          title={pending ? '正在写入…' : enabled ? '点击停用' : '点击启用'}
+        />
+      </div>
+    </div>
+  )
+}

package/src/client/components/MessageFlow.tsx

@@ -0,0 +1,97 @@
+/**
+ * 消息流显示组件
+ * @module dsh-group-chat/client/components
+ */
+
+import type { ReactNode, CSSProperties } from 'react'
+import { Icon, P } from '../lib/ui.ts'
+import { Bubble } from './Bubble.tsx'
+import { ThinkRow } from './ThinkRow.tsx'
+import { roleById, type ClientSnapshot } from '../lib/model.ts'
+import { MD_LABELS } from '../lib/model.ts'
+
+interface MessageFlowProps {
+  snap: ClientSnapshot
+  sess: ClientSnapshot['sessions'][number] | null
+  busyNow: boolean
+  msgById: Record<string, ClientSnapshot['messages'][number]>
+  action: (payload: Record<string, unknown>) => Promise<unknown>
+}
+
+export function MessageFlow(props: MessageFlowProps): ReactNode {
+  const { snap, sess, busyNow, msgById, action } = props
+
+  const bubbles: ReactNode[] = []
+  
+  if (sess) {
+    for (const mid of sess.messageIds) {
+      const m = msgById[mid]
+      if (!m) continue
+      // 角色在父级解析：Bubble 按值 memo（不依赖 snap identity），流式帧
+      // 不再触发已完成消息的全量重渲（每帧仅 live 行与派生列表变化）
+      const role = m.speaker !== 'user' && m.speaker !== 'system' ? roleById(snap, m.speaker) : null
+      bubbles.push(<Bubble key={m.id} m={m} role={role} />)
+    }
+  }
+  
+  // 流式尾巴
+  if (busyNow && snap.run.currentRoleId) {
+    const lr = roleById(snap, snap.run.currentRoleId)
+    if (lr) {
+      bubbles.push(
+        <div key="__live" className="dsgc-msg live">
+          <div
+            className="dsgc-avatar"
+            style={{ border: '2px solid ' + (lr.color || '#888'), '--role-color': lr.color || '#888' } as CSSProperties}
+          >
+            {lr.name.slice(0, 1)}
+          </div>
+          <div className="dsgc-msgbody">
+            <div className="dsgc-msghead">
+              <span className="dsgc-msgname">{lr.name}</span>
+              <span className="dsgc-msgmodel">{lr.provider} / {lr.model}</span>
+              <span className="dsgc-msgtime dsgc-typing">深度求索...</span>
+            </div>
+            <div className="dsgc-msgtext live">
+              {snap.run.partialReasoning ? <ThinkRow text={snap.run.partialReasoning} running /> : null}
+              {snap.run.partial ? <P.MarkdownText text={snap.run.partial} streaming labels={MD_LABELS} /> : null}
+              {/* 首 delta 前的「思考中」占位（深度思考模型首字节可能等数秒到数十秒，
+                  空白气泡会被感知为卡死）；delta 到达后被真实思考行/正文自然替换 */}
+              {!snap.run.partial && !snap.run.partialReasoning
+                ? (
+                  <div className="dsgc-pending">
+                    {Icon(P.IconThinkOutline14, 14)}
+                    <span>思考中</span>
+                    <span className="dsgc-pendingdots" aria-hidden="true"><i /><i /><i /></span>
+                  </div>
+                )
+                : null}
+            </div>
+          </div>
+        </div>,
+      )
+    }
+  }
+  
+  // 命令确认卡片
+  const pc = busyNow && snap.run.pendingConfirm && sess && snap.run.sessionId === sess.id ? snap.run.pendingConfirm : null
+  if (pc) {
+    const lr = roleById(snap, snap.run.currentRoleId)
+    bubbles.push(
+      <div key="__confirm" className="dsgc-confirm">
+        <div className="dsgc-confirmtitle">
+          {Icon(P.IconWarningOutline16, 14)}
+          {(lr ? lr.name : '角色') + ' 请求执行命令（工作区内）'}
+        </div>
+        <div className="dsgc-confirmcmd">{String((pc.args && pc.args.command) || '')}</div>
+        <div className="dsgc-hint">允许后将在工作区目录执行；拒绝后角色将继续纯文本讨论</div>
+        <div className="dsgc-confirmops">
+          <P.Button variant="primary" size="sm" onClick={() => { void action({ kind: 'confirmCommand', toolCallId: pc.toolCallId, allow: true }) }}>允许</P.Button>
+          <P.Button variant="outline" size="sm" onClick={() => { void action({ kind: 'confirmCommand', toolCallId: pc.toolCallId, allow: false }) }}>拒绝</P.Button>
+        </div>
+      </div>,
+    )
+  }
+
+  return <>{bubbles}</>
+}