@roaming-ai/dsh-group-chat 0.2.0

package/src/client/components/NavPanel.tsx

@@ -0,0 +1,249 @@
+/**
+ * 左侧导航栏组件
+ * @module dsh-group-chat/client/components
+ */
+
+import type { ReactNode, KeyboardEvent as ReactKeyboardEvent } from 'react'
+import { Icon, P } from '../lib/ui.ts'
+import { groupById, sessById, sessStatus, SESS_STATUS_LABEL, type ClientSnapshot } from '../lib/model.ts'
+
+interface NavPanelProps {
+  snap: ClientSnapshot
+  search: string
+  setSearch: (val: string) => void
+  collapsedGroups: Set<string>
+  setCollapsedGroups: (fn: (prev: Set<string>) => Set<string>) => void
+  gid: string | null
+  sid: string | null
+  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
+  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
+}
+
+export function NavPanel(props: NavPanelProps): ReactNode {
+  const { snap, search, setSearch, collapsedGroups, setCollapsedGroups, gid, sid, setGid, setSid, setPartsSel, renameDraft, setRenameDraft, confirmDel, setConfirmDel, mutate, navOpen } = props
+
+  const commitRename = async (): Promise<void> => {
+    if (!renameDraft) return
+    const d = renameDraft
+    setRenameDraft(null)
+    const value = String(d.value || '').trim()
+    if (!value) return
+    if (d.kind === 'group') await mutate({ op: 'renameGroup', groupId: d.id, name: value })
+    else await mutate({ op: 'renameSession', sessionId: d.id, name: value })
+  }
+
+  const renameKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      void commitRename()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      setRenameDraft(null)
+    }
+  }
+
+  const doDelete = async (): Promise<void> => {
+    if (!confirmDel) return
+    const d = confirmDel
+    setConfirmDel(null)
+    if (d.kind === 'group') await mutate({ op: 'deleteGroup', groupId: d.id })
+    else await mutate({ op: 'deleteSession', sessionId: d.id })
+  }
+
+  const q = search.trim().toLowerCase()
+  const groupMatches = (g: ClientSnapshot['groups'][number]): { show: boolean, filterSessions: boolean } => {
+    if (!q) return { show: true, filterSessions: false }
+    if (g.name.toLowerCase().includes(q)) return { show: true, filterSessions: false }
+    const hitSessions = g.sessionIds.map((id) => sessById(snap, id)).filter((s) => s && s.name.toLowerCase().includes(q))
+    return { show: hitSessions.length > 0, filterSessions: true }
+  }
+
+  const group = gid ? groupById(snap, gid) : null
+
+  const treeNodes: ReactNode[] = []
+  for (const g of snap.groups) {
+    const match = groupMatches(g)
+    if (!match.show) continue
+    const expanded = q ? true : !collapsedGroups.has(g.id)
+    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 isRenameSess = renameDraft && renameDraft.kind === 'session' && renameDraft.id === s.id
+        const isConfirm = confirmDel && confirmDel.kind === 'session' && confirmDel.id === s.id
+        // 会话状态（对齐主 GUI StateDot：idle 不渲染点）
+        const st = sessStatus(snap.run, s.id)
+
+        groupChildren.push(
+          <div
+            key={s.id}
+            className={'dsgc-sess-row' + (isActive ? ' on' : '')}
+            role="button"
+            tabIndex={0}
+            onClick={() => { setGid(g.id); setSid(s.id); setPartsSel(null); setConfirmDel(null); setRenameDraft(null) }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                setGid(g.id); setSid(s.id); setPartsSel(null); setConfirmDel(null); setRenameDraft(null)
+              }
+            }}
+          >
+            {/* 固定宽度状态槽（对齐主 GUI：槽恒在、点按状态渲染——行间文案对齐） */}
+            <span className="dsgc-sess-status">
+              {st !== 'idle'
+                ? (
+                  <span role="img" title={SESS_STATUS_LABEL[st]} aria-label={SESS_STATUS_LABEL[st]}>
+                    <P.StateDot state={st} size={8} />
+                  </span>
+                )
+                : 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>
+          </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) }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              setGid(g.id); setPartsSel(null); setConfirmDel(null); setRenameDraft(null)
+            }
+          }}
+        >
+          <button
+            className={'dsgc-twist' + (expanded ? '' : ' closed')}
+            title={expanded ? '收起' : '展开'}
+            aria-label={expanded ? '收起' : '展开'}
+            onClick={(e) => {
+              e.stopPropagation()
+              setCollapsedGroups((prev) => {
+                const next = new Set(prev)
+                if (next.has(g.id)) next.delete(g.id)
+                else next.add(g.id)
+                return next
+              })
+            }}
+          >
+            {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() }}
+              />
+              )
+            : <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>
+        </div>
+        {expanded ? <div className="dsgc-sess-list">{groupChildren}</div> : null}
+      </div>,
+    )
+  }
+
+  return (
+    <div className={'dsgc-nav' + (navOpen ? '' : ' closed')} aria-hidden={navOpen ? undefined : 'true'}>
+      <P.Input
+        icon={Icon(P.IconSearchOutline16, 16)}
+        className="dsgc-search"
+        placeholder="搜索群组与会话…"
+        value={search}
+        onChange={(e: { target: { value: string } }) => setSearch(e.target.value)}
+      />
+      {treeNodes.length
+        ? <div className="dsgc-tree">{treeNodes}</div>
+        : <div className="dsgc-hint">{q ? '没有匹配「' + search.trim() + '」的群组或会话' : '暂无群组'}</div>}
+      <P.Button variant="outline" onClick={() => { void mutate({ op: 'createGroup' }) }}>
+        {Icon(P.IconPlusOutline16, 16)}新建群组
+      </P.Button>
+    </div>
+  )
+}

package/src/client/components/PermissionSelect.tsx

@@ -0,0 +1,159 @@
+/**
+ * 群组权限档位选择器（对齐主会话 composer 左下角的 /permission 选择器）：
+ * 触发芯片（盾形图标 + 档位名 + chevron）+ Menu 上弹三档 + 完全权限风险
+ * 确认弹窗（与主会话同款 RiskConfirmation 原语与文案）。
+ * @module dsh-group-chat/client/permission-select
+ */
+
+import { useEffect, useState, type ReactNode } from 'react'
+import { Icon, P } from '../lib/ui.ts'
+import type { PermissionTier } from '../../core/types.ts'
+import { asPermissionTier, PERMISSION_TIERS } from '../../core/types.ts'
+
+export interface PermissionSelectProps {
+  tier: PermissionTier
+  onSelect: (tier: PermissionTier) => void
+}
+
+/** 档位展示名（与主会话中文标签一致）。 */
+const TIER_LABELS: Record<PermissionTier, string> = {
+  view_only: '仅可查看',
+  workspace_write: '工作区内修改',
+  full_access: '完全权限',
+}
+
+/** 档位悬停说明（群聊语境下的真实约束）。 */
+const TIER_DESCRIPTIONS: Record<PermissionTier, string> = {
+  view_only: '角色只能读取工作区文件，不能执行命令',
+  workspace_write: '角色可执行命令（cwd 固定在工作区），每条命令需你在会话中确认',
+  full_access: '角色可免确认直接执行命令，存在风险',
+}
+
+/** 完全权限风险确认文案（与主会话逐字一致）。 */
+const CONFIRM_TEXT = {
+  title: '确认启用完全权限？',
+  description: '启用完全权限后，智能体将减少确认步骤，并且可以直接执行更多操作，包括敏感操作、文件修改或外部命令。仅建议在你信任当前任务时使用。',
+  acknowledge: '我已了解风险，并愿意继续',
+  cancel: '取消',
+  enable: '启用完全权限',
+} as const
+
+// ---- 盾形图标（路径取自主会话 PermissionSelect 的设计稿字形） ----
+
+const SHIELD_OUTLINE = 'M8.20554 0.899994L14.7901 3.36857V7.01026C14.7901 12 11.0466 14.2103 8.20554 15.3C5.36446 14.2103 1.62012 12 1.62012 7.01026V3.36857L8.20554 0.899994Z'
+
+function GlyphViewOnly(): ReactNode {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={SHIELD_OUTLINE} stroke="currentColor" strokeWidth="1.31831" strokeLinejoin="round" />
+      <path d="M12.1654 5.7552L8.9447 9.41475C8.73044 9.65816 8.53628 9.8804 8.35774 10.0423C8.1713 10.2114 7.94235 10.3717 7.64016 10.4254C7.48207 10.4535 7.32 10.4552 7.16151 10.4294C6.85843 10.3801 6.62728 10.2223 6.43836 10.0559C6.25752 9.89653 6.06037 9.67732 5.84264 9.43705L4.72925 8.20897L5.63557 7.38707L6.74897 8.61594C6.98603 8.87755 7.12974 9.03533 7.24673 9.13839C7.31033 9.19443 7.34485 9.21476 7.35823 9.22122C7.38068 9.22484 7.40352 9.22515 7.42593 9.22122C7.40522 9.22502 7.42893 9.23294 7.53583 9.136C7.65132 9.03126 7.79316 8.87139 8.02643 8.60638L11.2479 4.94763L12.1654 5.7552Z" fill="currentColor" />
+    </svg>
+  )
+}
+
+function GlyphWorkspaceWrite(): ReactNode {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M8.08887 0.251709C8.20479 0.23085 8.32486 0.241168 8.43652 0.282959L15.0215 2.75171C15.2787 2.84819 15.4492 3.09414 15.4492 3.3689V7.0105C15.4492 7.10986 15.4441 7.2081 15.4414 7.30542C15.0285 7.07175 14.5905 6.87695 14.1309 6.73022V3.82495L8.20508 1.60327L2.2793 3.82495V7.0105C2.27936 9.7171 3.4745 11.5379 5.02734 12.7947C5.01025 12.9942 5 13.1962 5 13.4001C5.00001 13.7617 5.02722 14.1169 5.08008 14.4636C2.91555 13.0393 0.961014 10.752 0.960938 7.0105V3.3689C0.960938 3.09417 1.13146 2.84821 1.38867 2.75171L7.97461 0.282959L8.08887 0.251709Z" fill="currentColor" />
+      <path d="M11.3525 5.64688V6.85688H5V5.64688H11.3525Z" fill="currentColor" />
+      <path d="M9.5824 8.29376V9.50376H5V8.29376H9.5824Z" fill="currentColor" />
+      <path d="M14.6647 15.6852H10.0338C10.3878 15.3751 10.7567 15.0517 11.0772 14.7706C11.2531 14.6164 11.4144 14.4746 11.5511 14.3547H14.6647V15.6852Z" fill="currentColor" />
+      <path d="M8.14852 14.1308L7.33925 15.4976C7.22458 15.6912 7.42245 15.9194 7.63037 15.8333L9.09785 15.2254L15.0399 10.0719L14.0905 8.97733L8.14852 14.1308Z" fill="currentColor" />
+    </svg>
+  )
+}
+
+function GlyphFullAccess(): ReactNode {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={SHIELD_OUTLINE} stroke="currentColor" strokeWidth="1.31831" strokeLinejoin="round" />
+      <path d="M9.10094 4.5V8.75939H7.59888V4.5H9.10094Z" fill="currentColor" />
+      <path d="M9.10094 9.8114V11.5H7.59888V9.8114Z" fill="currentColor" />
+    </svg>
+  )
+}
+
+const TIER_GLYPHS: Record<PermissionTier, () => ReactNode> = {
+  view_only: GlyphViewOnly,
+  workspace_write: GlyphWorkspaceWrite,
+  full_access: GlyphFullAccess,
+}
+
+export function PermissionSelect(props: PermissionSelectProps): ReactNode {
+  const [open, setOpen] = useState(false)
+  const [confirming, setConfirming] = useState(false)
+  const [acknowledged, setAcknowledged] = useState(false)
+  // 版本错位兜底：旧 host 快照无 permissionTier（或值非法）时按最安全的仅可查看呈现，
+  // 不让面板整体崩溃
+  const tier = asPermissionTier(props.tier) ?? 'view_only'
+
+  // 档位被外部改回（如迁移/其他端变更）时收起弹层与确认态
+  useEffect(() => {
+    setOpen(false)
+    setAcknowledged(false)
+    setConfirming(false)
+  }, [tier])
+
+  const choose = (id: string): void => {
+    setOpen(false)
+    if (id === tier) return
+    if (id === 'full_access') {
+      setAcknowledged(false)
+      setConfirming(true)
+      return
+    }
+    props.onSelect(id as PermissionTier)
+  }
+  const closeConfirm = (): void => {
+    setAcknowledged(false)
+    setConfirming(false)
+  }
+  const confirmFullAccess = (): void => {
+    if (!acknowledged) return
+    closeConfirm()
+    props.onSelect('full_access')
+  }
+
+  const items = PERMISSION_TIERS.map((t) => ({ id: t, label: TIER_LABELS[t], icon: TIER_GLYPHS[t]() }))
+  const Glyph = TIER_GLYPHS[tier] ?? GlyphViewOnly
+
+  return (
+    <>
+      <P.Menu
+        open={open}
+        items={items}
+        selectedId={tier}
+        onSelect={choose}
+        onClose={() => { setOpen(false) }}
+        side="top"
+        anchor={(
+          <button
+            type="button"
+            className="dsgc-permtrigger"
+            aria-label={'权限模式：' + TIER_LABELS[tier]}
+            title={TIER_DESCRIPTIONS[tier]}
+            disabled={confirming}
+            onClick={() => { setOpen(!open) }}
+          >
+            <span className="dsgc-permicon" aria-hidden>{Glyph()}</span>
+            <span className="dsgc-permlabel">{TIER_LABELS[tier]}</span>
+            <span className={'dsgc-permchevron' + (open ? ' open' : '')} aria-hidden>{Icon(P.IconChevronDownOutline14, 14)}</span>
+          </button>
+        )}
+      />
+      <P.RiskConfirmation
+        open={confirming}
+        title={CONFIRM_TEXT.title}
+        description={CONFIRM_TEXT.description}
+        acknowledgeLabel={CONFIRM_TEXT.acknowledge}
+        cancelLabel={CONFIRM_TEXT.cancel}
+        closeLabel="关闭"
+        confirmLabel={CONFIRM_TEXT.enable}
+        acknowledged={acknowledged}
+        onAcknowledgedChange={setAcknowledged}
+        onCancel={closeConfirm}
+        onConfirm={confirmFullAccess}
+      />
+    </>
+  )
+}

package/src/client/components/RoleDrawer.tsx

@@ -0,0 +1,186 @@
+/**
+ * 角色编辑抽屉（右侧滑出，不遮挡会话流阅读）。
+ * @module dsh-group-chat/client/drawer
+ */
+
+import { useEffect, 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'
+
+export interface RoleDrawerProps {
+  draft: RoleDraft
+  set: (draft: RoleDraft) => void
+  models: ModelsResponse | null
+  modelsError: string | null
+  onRetryModels: () => void
+  onSave: () => void
+  onCancel: () => void
+  formError: string
+}
+
+export function RoleDrawer(props: RoleDrawerProps): ReactNode {
+  const { draft, set } = props
+  const models = props.models
+  const providers = (models && models.providers) || []
+  const modelsOf = (models && models.modelsByProvider && models.modelsByProvider[draft.provider]) || []
+  const [closing, setClosing] = useState(false)
+  const [effortsInfo, setEffortsInfo] = useState<EffortsResponse | null>(null)
+  const close = (): void => {
+    if (closing) return
+    setClosing(true)
+    window.setTimeout(() => props.onCancel(), 140)
+  }
+  const onProvider = (e: { target: { value: string } }): void => {
+    const p = e.target.value
+    const list = (models && models.modelsByProvider && models.modelsByProvider[p]) || []
+    // 换模型路线后旧推理级别失效，重置为默认
+    set(Object.assign({}, draft, { provider: p, model: list.length ? list[0].id : '', reasoningEffort: 'default' }))
+  }
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent): void => { if (e.key === 'Escape') close() }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [])
+  // 推理级别选项：跟随抽屉内 provider/model 变化重新查询（Host 60s 缓存）
+  useEffect(() => {
+    let live = true
+    setEffortsInfo(null)
+    if (!draft.provider || !draft.model) return
+    api.action({ kind: 'efforts', provider: draft.provider, model: draft.model }).then((res) => {
+      if (!live) return
+      const r = res as EffortsResponse
+      if (r && r.ok) setEffortsInfo({ ok: true, efforts: r.efforts || [], defaultEffort: r.defaultEffort })
+      else setEffortsInfo({ ok: false, efforts: [], defaultEffort: undefined, error: (r && r.error) || '查询失败' })
+    }).catch((e: unknown) => { if (live) setEffortsInfo({ ok: false, efforts: [], defaultEffort: undefined, error: String((e && (e as Error).message) || e) }) })
+    return () => { live = false }
+  }, [draft.provider, draft.model])
+  return (
+    <div className={'dsgc-drawer' + (closing ? ' closing' : '')} role="dialog" aria-modal="false" aria-label={draft.id ? '编辑角色' : '添加角色'}>
+      <div className="dsgc-drawerhead">
+        {Icon(P.IconUserOutline16, 16)}
+        <span className="dsgc-drawertitle">{draft.id ? '编辑角色' : '添加角色'}</span>
+        <P.Button variant="ghost" size="sm" onClick={close} aria-label="关闭">{Icon(P.IconCloseOutline16, 16)}</P.Button>
+      </div>
+      <div className="dsgc-drawerbody">
+        <div className="dsgc-form">
+          <div className="dsgc-field">
+            <label>名称</label>
+            <input
+              className="dsgc-input"
+              value={draft.name}
+              autoFocus={!draft.id}
+              onChange={(e) => { set(Object.assign({}, draft, { name: e.target.value })) }}
+              placeholder="例如：产品经理"
+            />
+          </div>
+          <div className="dsgc-field">
+            <label>标识色</label>
+            <div className="dsgc-palette">
+              {PALETTE.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  className={'dsgc-dot' + (draft.color === c ? ' on' : '')}
+                  style={{ background: c }}
+                  onClick={() => { set(Object.assign({}, draft, { color: c })) }}
+                  aria-label={'选择标识色 ' + c}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="dsgc-field">
+            <label>人设 / 角色设定</label>
+            <textarea
+              className="dsgc-textarea"
+              rows={4}
+              value={draft.persona}
+              onChange={(e) => { set(Object.assign({}, draft, { persona: e.target.value })) }}
+              placeholder="性格、立场、说话风格、专业背景……"
+            />
+          </div>
+          <div className="dsgc-field">
+            <label>模型提供方</label>
+            {providers.length
+              ? (
+                <select className="dsgc-select" value={draft.provider} onChange={onProvider}>
+                  <option value="">选择提供方…</option>
+                  {providers.map((p) => <option key={p.id} value={p.id}>{p.name || p.id}</option>)}
+                </select>
+                )
+              : (
+                <div className="dsgc-selhint">
+                  {(props.modelsError ? '模型目录加载失败：' + props.modelsError : '暂无可用 provider') + ' '}
+                  <P.Button variant="outline" size="sm" onClick={props.onRetryModels}>重试</P.Button>
+                </div>
+                )}
+          </div>
+          <div className="dsgc-field">
+            <label>模型</label>
+            {modelsOf.length
+              ? (
+                <select
+                  className="dsgc-select"
+                  value={draft.model}
+                  onChange={(e) => { set(Object.assign({}, draft, { model: e.target.value, reasoningEffort: 'default' })) }}
+                >
+                  {modelsOf.map((m) => <option key={m.id} value={m.id}>{m.name || m.id}</option>)}
+                </select>
+                )
+              : <div className="dsgc-selhint">请先选择有可用模型的提供方</div>}
+          </div>
+          <div className="dsgc-field">
+            <label>温度（可选）</label>
+            <input
+              className="dsgc-input"
+              type="number"
+              step="0.1"
+              min="0"
+              max="2"
+              value={draft.temperature == null ? '' : String(draft.temperature)}
+              onChange={(e) => { set(Object.assign({}, draft, { temperature: e.target.value === '' ? undefined : Number(e.target.value) })) }}
+            />
+          </div>
+          <div className="dsgc-field">
+            <label>深度思考</label>
+            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+              <P.Switch checked={draft.thinking === true} onChange={(v: boolean) => { set(Object.assign({}, draft, { thinking: v })) }} label="深度思考" />
+              <span className="dsgc-hint">开启后角色发言前先思考（支持思考的模型）</span>
+            </div>
+          </div>
+          {draft.thinking === true
+            ? (
+              <div className="dsgc-field">
+                <label>推理级别</label>
+                {effortsInfo === null
+                  ? <div className="dsgc-selhint">查询推理级别…</div>
+                  : !effortsInfo.ok
+                    ? <div className="dsgc-selhint">推理级别查询失败：{effortsInfo.error}（若刚更新插件，请重启 dsh web 使 host 半生效）</div>
+                    : (effortsInfo.efforts || []).length
+                      ? (
+                        <select
+                          className="dsgc-select"
+                          value={draft.reasoningEffort && draft.reasoningEffort !== 'default' ? draft.reasoningEffort : 'default'}
+                          onChange={(e) => { set(Object.assign({}, draft, { reasoningEffort: e.target.value })) }}
+                          title="取自当前模型设置中的推理选项；默认 = 使用该模型的默认推理级别"
+                        >
+                          <option value="default">
+                            默认{effortsInfo.defaultEffort ? '（当前默认：' + ((effortsInfo.efforts || []).find((x) => x.id === effortsInfo.defaultEffort) || { name: '' }).name + '）' : ''}
+                          </option>
+                          {(effortsInfo.efforts || []).map((e) => <option key={e.id} value={e.id} title={e.description || ''}>{e.name || e.id}</option>)}
+                        </select>
+                        )
+                      : <div className="dsgc-selhint">当前模型未提供推理等级，将使用默认</div>}
+              </div>
+              )
+            : null}
+          {props.formError ? <div className="dsgc-formerr">{props.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>
+      </div>
+    </div>
+  )
+}

package/src/client/components/ThinkRow.tsx

@@ -0,0 +1,32 @@
+/**
+ * 思考折叠行（对标宿主 ReasoningRow：折叠摘要 / 展开全文）。
+ * @module dsh-group-chat/client/ThinkRow
+ */
+
+import { useState, type ReactNode } from 'react'
+import { P } from '../lib/ui.ts'
+import { firstLine, latestLine } from '../lib/model.ts'
+
+export function ThinkRow(props: { text: string, running?: boolean }): ReactNode {
+  const text = props.text || ''
+  const running = !!props.running
+  const [expanded, setExpanded] = useState(false)
+  const plain = (line: string): string => line.replace(/^(\s*#{1,6}\s+|\s*[-*+]\s+|\s*>\s*)+/, '').replace(/[*`_~]/g, '').replace(/\s+/g, ' ').trim()
+  const summary = plain(running ? latestLine(text) : firstLine(text))
+  return (
+    <div className="dsgc-think">
+      <P.DisclosureRow
+        rowClassName="dsgc-thinkrow"
+        icon={<P.IconThinkOutline14 size={14} />}
+        title="思考"
+        open={expanded}
+        expandable
+        expandOnRowClick
+        onToggle={() => { setExpanded((v) => !v) }}
+        collapsedContent={text ? <span className="dsgc-thinksummary">{summary}</span> : null}
+      >
+        <div className="dsgc-thinkbody">{text}</div>
+      </P.DisclosureRow>
+    </div>
+  )
+}

package/src/client/components/ToolRow.tsx

@@ -0,0 +1,51 @@
+/**
+ * 工具调用折叠行（对标思考折叠：摘要行 / 展开输出）。
+ * @module dsh-group-chat/client/ToolRow
+ */
+
+import { useState, type ReactNode } from 'react'
+import { Icon, P, pickPrimitive } from '../lib/ui.ts'
+import type { ToolCallView } from '../lib/model.ts'
+
+const TOOL_ICONS: Record<string, string> = { read_file: 'IconBrowseOutline16', list_dir: 'IconFolderOpenOutline16', run_command: 'IconCodeOutline16' }
+
+export function ToolRow(props: { c: ToolCallView }): ReactNode {
+  const c = props.c
+  const [expanded, setExpanded] = useState(false)
+  let brief = ''
+  try {
+    brief = JSON.stringify(c.args) || ''
+  } catch {
+    brief = ''
+  }
+  if (brief.length > 40) brief = brief.slice(0, 40) + '…'
+  const IconOf = pickPrimitive(TOOL_ICONS[c.tool] || 'IconCodeOutline16')
+  const statusText = c.status === 'ok' ? '成功' : c.status === 'denied' ? '用户拒绝' : '失败'
+  const StatusIcon = c.status === 'ok' ? P.IconCheckOutline14 : c.status === 'denied' ? P.IconCloseOutline16 : P.IconWarningOutline16
+  const dur = c.durationMs ? (c.durationMs >= 1000 ? (c.durationMs / 1000).toFixed(1) + 's' : c.durationMs + 'ms') : ''
+  return (
+    <div className="dsgc-tool">
+      <P.DisclosureRow
+        rowClassName="dsgc-toolrow"
+        icon={<IconOf size={14} />}
+        title={c.tool + (brief ? ' ' + brief : '')}
+        open={expanded}
+        expandable
+        expandOnRowClick
+        onToggle={() => { setExpanded((v) => !v) }}
+        collapsedContent={
+          <span className="dsgc-toolsummary">
+            {Icon(StatusIcon, 12, {
+              verticalAlign: '-2px',
+              marginRight: 4,
+              color: c.status === 'ok' ? 'var(--dsw-alias-label-tertiary,inherit)' : 'var(--dsw-alias-state-error-primary,#e5484d)',
+            })}
+            {statusText + (dur ? ' · ' + dur : '')}
+          </span>
+        }
+      >
+        <div className="dsgc-toolbody">{c.output || '（无输出）'}</div>
+      </P.DisclosureRow>
+    </div>
+  )
+}