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

package/src/client/components/MessageFlow.tsx

@@ -4,9 +4,12 @@
  */
 
 import type { ReactNode, CSSProperties } from 'react'
+import { WINDOW_SIZE } from '../../core/constraints.ts'
 import { Icon, P } from '../lib/ui.ts'
 import { Bubble } from './Bubble.tsx'
+import { ConstraintList } from './ConstraintList.tsx'
 import { ThinkRow } from './ThinkRow.tsx'
+import { resolveFailedRole } from '../../core/errors.ts'
 import { roleById, type ClientSnapshot } from '../lib/model.ts'
 import { MD_LABELS } from '../lib/model.ts'
 
@@ -16,68 +19,56 @@ interface MessageFlowProps {
   busyNow: boolean
   msgById: Record<string, ClientSnapshot['messages'][number]>
   action: (payload: Record<string, unknown>) => Promise<unknown>
+  onRetrySpeak: (messageId: string) => void
 }
 
 export function MessageFlow(props: MessageFlowProps): ReactNode {
-  const { snap, sess, busyNow, msgById, action } = props
+  const { snap, sess, busyNow, msgById, action, onRetrySpeak } = 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)}
+  const replaceId = busyNow ? snap.run.replaceMessageId : null
+  const replaceMsg = replaceId ? msgById[replaceId] : null
+  const liveRoleId = snap.run.currentRoleId || (replaceMsg && (replaceMsg.failedRoleId || replaceMsg.speaker)) || null
+  const lr = busyNow && liveRoleId ? roleById(snap, liveRoleId) : null
+
+  const live = lr
+    ? (
+      <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-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>
+          <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>
+              : null}
           </div>
-        </div>,
+        </div>
+      </div>
       )
-    }
-  }
-  
-  // 命令确认卡片
+    : null
+
   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(
+  const confirm = pc
+    ? (
       <div key="__confirm" className="dsgc-confirm">
         <div className="dsgc-confirmtitle">
           {Icon(P.IconWarningOutline16, 14)}
@@ -89,9 +80,41 @@ export function MessageFlow(props: MessageFlowProps): ReactNode {
           <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>,
-    )
+      </div>
+      )
+    : null
+
+  let livePlaced = false
+
+  if (sess) {
+    const ids = sess.messageIds
+    const memo = sess.constraints && sess.constraints.length
+      ? <ConstraintList key={sess.id + '-constraints'} items={sess.constraints} />
+      : null
+    // 折点 = 最近 WINDOW_SIZE 条之前。消息都还在窗口内时卡放流顶。
+    const foldAt = memo && ids.length > WINDOW_SIZE ? ids.length - WINDOW_SIZE : 0
+    if (memo && foldAt === 0) bubbles.push(memo)
+    for (let i = 0; i < ids.length; i++) {
+      if (memo && foldAt > 0 && i === foldAt) bubbles.push(memo)
+      const m = msgById[ids[i]]
+      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) {
+        if (live) bubbles.push(live)
+        if (confirm) bubbles.push(confirm)
+        livePlaced = true
+        continue
+      }
+      bubbles.push(<Bubble key={m.id} m={m} role={role} busy={!!snap.run.running} onRetry={onRetrySpeak} />)
+    }
   }
 
+  if (live && !livePlaced) bubbles.push(live)
+  if (confirm && !livePlaced) bubbles.push(confirm)
+
   return <>{bubbles}</>
 }

package/src/client/components/MsgActions.tsx

@@ -0,0 +1,85 @@
+/**
+ * 消息操作条：贴在气泡外下方。用户/角色消息悬停出「复制」；失败卡常驻「复制 / 重试」。
+ * @module dsh-group-chat/client/MsgActions
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { Icon, P } from '../lib/ui.ts'
+
+export interface MsgActionsProps {
+  copyText: string
+  onRetry?: () => void
+  retryDisabled?: boolean
+  retryTitle?: string
+  /** 失败卡：不依赖悬停，始终可见。 */
+  always?: boolean
+}
+
+async function writeClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+  } catch { /* fall through */ }
+  try {
+    const el = document.createElement('textarea')
+    el.value = text
+    el.setAttribute('readonly', '')
+    el.style.position = 'fixed'
+    el.style.left = '-9999px'
+    document.body.appendChild(el)
+    el.select()
+    const ok = document.execCommand('copy')
+    document.body.removeChild(el)
+    return ok
+  } catch {
+    return false
+  }
+}
+
+export function MsgActions(props: MsgActionsProps): ReactNode {
+  const { copyText, onRetry, retryDisabled, retryTitle, always } = props
+  const [copied, setCopied] = useState(false)
+  const copiedTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(() => () => { if (copiedTimer.current) clearTimeout(copiedTimer.current) }, [])
+
+  const copy = async (): Promise<void> => {
+    if (!copyText) return
+    const ok = await writeClipboard(copyText)
+    if (!ok) return
+    setCopied(true)
+    if (copiedTimer.current) clearTimeout(copiedTimer.current)
+    copiedTimer.current = setTimeout(() => { setCopied(false) }, 1400)
+  }
+
+  return (
+    <div className={'dsgc-msgops' + (always ? ' always' : '')} role="group" aria-label="消息操作">
+      <button
+        type="button"
+        className={'dsgc-msgop' + (copied ? ' done' : '')}
+        title={copied ? '已复制' : '复制'}
+        aria-label={copied ? '已复制' : '复制'}
+        onClick={(e) => { e.stopPropagation(); void copy() }}
+      >
+        {Icon(copied ? P.IconCheckOutline14 : P.IconCopyOutline16, 14)}
+        <span>{copied ? '已复制' : '复制'}</span>
+      </button>
+      {onRetry
+        ? (
+          <button
+            type="button"
+            className="dsgc-msgop retry"
+            title={retryTitle || '重试'}
+            aria-label={retryTitle || '重试'}
+            disabled={retryDisabled}
+            onClick={(e) => { e.stopPropagation(); if (!retryDisabled) onRetry() }}
+          >
+            {Icon(P.IconRefreshOutline14, 14)}
+            <span>重试</span>
+          </button>
+          )
+        : null}
+    </div>
+  )
+}

package/src/client/components/NavPanel.tsx

@@ -5,6 +5,7 @@
 
 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'
 
 interface NavPanelProps {
@@ -124,7 +125,11 @@ export function NavPanel(props: NavPanelProps): ReactNode {
                   onClick={(e) => { e.stopPropagation() }}
                 />
                 )
-              : <span className="dsgc-sess-name">{s.name}</span>}
+              : (
+                <HoverTip label={s.name} side="right" delayMs={500} className="dsgc-sess-name">
+                  {s.name}
+                </HoverTip>
+                )}
             <span className="dsgc-nodeops">
               <button
                 className="dsgc-opbtn"

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

@@ -6,6 +6,7 @@
 import { useState, type ReactNode } from 'react'
 import { Icon, P, pickPrimitive } from '../lib/ui.ts'
 import type { ToolCallView } from '../lib/model.ts'
+import { ClipWell, Fold } from './Fold.tsx'
 
 const TOOL_ICONS: Record<string, string> = { read_file: 'IconBrowseOutline16', list_dir: 'IconFolderOpenOutline16', run_command: 'IconCodeOutline16' }
 
@@ -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,6 +91,36 @@ 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,

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
@@ -84,8 +85,8 @@ export function useGroupChatState() {
   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)
   

package/src/client/lib/composer-draft.ts

@@ -0,0 +1,47 @@
+/**
+ * 未发送草稿：按会话 id 分槽，模块级跨挂载存活。
+ * 主会话⇄群聊会整页卸载 composer，contentEditable 的 HTML 必须自行记住。
+ * @module dsh-group-chat/client/composer-draft
+ */
+
+export interface ComposerDraft {
+  html: string
+  text: string
+}
+
+const LIMIT = 32
+const drafts = new Map<string, ComposerDraft>()
+
+const empty = (): ComposerDraft => ({ html: '', text: '' })
+
+/** 读指定会话草稿；命中则提到 LRU 最近端。 */
+export function readComposerDraft(sessionId: string | null | undefined): ComposerDraft {
+  if (!sessionId) return empty()
+  const hit = drafts.get(sessionId)
+  if (!hit) return empty()
+  drafts.delete(sessionId)
+  drafts.set(sessionId, hit)
+  return hit
+}
+
+/** 写入；空草稿删槽。超出上限淘汰最旧槽。 */
+export function writeComposerDraft(sessionId: string | null | undefined, html: string, text: string): void {
+  if (!sessionId) return
+  drafts.delete(sessionId)
+  if (!html && !text) return
+  drafts.set(sessionId, { html, text })
+  if (drafts.size > LIMIT) {
+    const oldest = drafts.keys().next().value
+    if (oldest !== undefined) drafts.delete(oldest)
+  }
+}
+
+/** 发送成功或明确丢弃时摘槽。 */
+export function clearComposerDraft(sessionId: string | null | undefined): void {
+  if (sessionId) drafts.delete(sessionId)
+}
+
+/** 测试用：清空全部槽位。 */
+export function resetComposerDrafts(): void {
+  drafts.clear()
+}

package/src/client/lib/styles.ts

@@ -62,7 +62,32 @@ export const CSS = [
   '.dsgc-seambtn:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.15));color:var(--dsw-alias-label-primary,inherit);border-color:var(--dsw-alias-border-l3,rgba(128,128,128,.4))}',
   '.dsgc-seambtn.left{left:0;border-left:none;border-radius:0 8px 8px 0;box-shadow:3px 0 10px rgba(0,0,0,.07)}',
   '.dsgc-seambtn.right{right:0;border-right:none;border-radius:8px 0 0 8px;box-shadow:-3px 0 10px rgba(0,0,0,.07)}',
-  '.dsgc-chathead{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(128,128,128,.2))}',
+  '.dsgc-chathead{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(128,128,128,.2))}',
+  '.dsgc-chathead-row{display:flex;gap:10px;align-items:center;min-width:0}',
+  '.dsgc-constraints{align-self:center;box-sizing:border-box;width:76%;max-width:76%;display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px 12px;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));background:var(--dsw-alias-bg-layer-3,rgba(128,128,128,.06));border-radius:12px;animation:dsgc-fade-in .18s ease-out}',
+  '.dsgc-chead{display:flex;flex-direction:column;gap:2px;min-width:0}',
+  '.dsgc-ctitle{margin:0;font:inherit;font-size:12px;font-weight:600;line-height:1.5;color:var(--dsw-alias-label-primary,inherit)}',
+  '.dsgc-cdesc{margin:0;font-size:11.5px;line-height:1.5;color:var(--dsw-alias-label-tertiary,inherit)}',
+  '.dsgc-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .16s ease-in}',
+  '.dsgc-fold.open{grid-template-rows:1fr;transition:grid-template-rows .22s cubic-bezier(.16,1,.3,1)}',
+  '.dsgc-fold-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .12s ease-in}',
+  '.dsgc-fold.open .dsgc-fold-inner{opacity:1;transition:opacity .18s cubic-bezier(.16,1,.3,1)}',
+  '.dsgc-clip{--dsgc-clip-from:var(--dsw-alias-bg-layer-3,rgba(128,128,128,.18));position:relative;min-width:0}',
+  '.dsgc-clip::before,.dsgc-clip::after{content:"";position:absolute;left:0;right:0;height:14px;pointer-events:none;z-index:1;opacity:0;transition:opacity .12s}',
+  '.dsgc-clip::before{top:0;background:linear-gradient(to bottom,var(--dsgc-clip-from),transparent)}',
+  '.dsgc-clip::after{bottom:0;background:linear-gradient(to top,var(--dsgc-clip-from),transparent)}',
+  '.dsgc-clip.can-up::before,.dsgc-clip.can-down::after{opacity:1}',
+  '.dsgc-clip-scroll{min-width:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-bg-l2,rgba(128,128,128,.35)) transparent}',
+  '.dsgc-clist{display:flex;flex-direction:column;gap:2px;min-width:0}',
+  '.dsgc-constraint{display:flex;gap:8px;align-items:flex-start;min-width:0;font-size:11.5px;line-height:1.5}',
+  '.dsgc-ckind{flex:none;font-weight:500}',
+  '.dsgc-ckind.decided{color:var(--dsw-alias-label-secondary,inherit)}',
+  '.dsgc-ckind.rejected{color:var(--dsw-alias-state-error-primary,#e5484d)}',
+  '.dsgc-ckind.open{color:var(--dsw-alias-label-tertiary,inherit)}',
+  '.dsgc-ctext{min-width:0;color:var(--dsw-alias-label-primary,inherit);overflow-wrap:break-word}',
+  '.dsgc-cmore{align-self:flex-start;border:none;background:none;padding:0;font:inherit;font-size:11.5px;line-height:1.5;color:var(--dsw-alias-label-tertiary,inherit);cursor:pointer}',
+  '.dsgc-cmore:hover{color:var(--dsw-alias-label-secondary,inherit)}',
+  '.dsgc-cmore:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,var(--dsw-alias-state-business-primary,#4f6ef7));outline-offset:1px}',
   '.dsgc-sess-title{flex:none;font-weight:600;font-size:14px;color:var(--dsw-alias-label-primary,inherit);max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
   '.dsgc-topic{flex:1;background:transparent;border:none;border-bottom:1px solid transparent;padding:2px;min-height:20px;color:var(--dsw-alias-label-secondary,inherit);font:inherit;outline:none;min-width:0;transition:color .12s,border-color .12s}',
   '.dsgc-topic:hover{border-bottom-color:var(--dsw-alias-border-l2,rgba(128,128,128,.3))}',
@@ -99,7 +124,8 @@ export const CSS = [
   '.dsgc-think .dsgc-thinkrow{font-size:12px;color:var(--dsw-alias-label-secondary,inherit);border-radius:8px;padding:3px 8px;transition:background-color .12s}',
   '.dsgc-think .dsgc-thinkrow:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.1))}',
   '.dsgc-think .dsgc-thinksummary{color:var(--dsw-alias-label-tertiary,inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch;font-size:11.5px;margin-left:6px}',
-  '.dsgc-think .dsgc-thinkbody{font-size:12.5px;line-height:1.7;color:var(--dsw-alias-label-secondary,inherit);white-space:pre-wrap;word-break:break-word;border-left:2px solid var(--dsw-alias-border-l2,rgba(128,128,128,.25));margin:2px 0 4px;padding:2px 0 2px 10px;max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-bg-l2,rgba(128,128,128,.35)) transparent;animation:dsgc-think-in .2s ease-out}',
+  '.dsgc-think .dsgc-clip{margin:2px 0 4px;padding-left:10px;border-left:2px solid var(--dsw-alias-border-l2,rgba(128,128,128,.25))}',
+  '.dsgc-think .dsgc-thinkbody{font-size:12.5px;line-height:1.7;color:var(--dsw-alias-label-secondary,inherit);white-space:pre-wrap;word-break:break-word}',
   /* 首 delta 前的「思考中」占位行：ThinkRow 同语言（思考图标 + 次要色 12px 小字）
      + 三点交错呼吸动画——深度思考模型首字节可能等数秒到数十秒，空白气泡会被
      感知为卡死；delta 到达后被真实思考行/正文自然替换 */
@@ -111,17 +137,42 @@ export const CSS = [
   '.dsgc-pendingdots i:nth-child(3){animation-delay:.4s}',
   '@keyframes dsgc-dot-breathe{0%,100%{opacity:.25}50%{opacity:1}}',
   '.dsgc-sysmsg{align-self:center;font-size:11.5px;color:var(--dsw-alias-label-secondary,inherit);background:var(--dsw-alias-bg-module-platform,rgba(128,128,128,.1));border-radius:999px;padding:2px 10px;text-align:center;max-width:90%;animation:dsgc-sys-in .24s ease-out}',
+  /* 消息操作条：气泡外下方；角色左齐、自己右齐。占位常在，悬停显现；失败卡 always 常驻 */
+  '.dsgc-msgops{display:inline-flex;align-items:center;gap:2px;margin-top:2px;min-height:24px;visibility:hidden;opacity:0;transition:opacity .12s,visibility .12s}',
+  '.dsgc-msg:hover .dsgc-msgops,.dsgc-msg:focus-within .dsgc-msgops,.dsgc-msgops.always{visibility:visible;opacity:1}',
+  '@media (hover:none){.dsgc-msg .dsgc-msgops{visibility:visible;opacity:1}}',
+  '.dsgc-msg.mine .dsgc-msgops{justify-content:flex-end}',
+  '.dsgc-msgop{border:none;background:none;color:var(--dsw-alias-label-tertiary,inherit);cursor:pointer;padding:3px 6px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:11.5px;line-height:16px;transition:background-color .12s,color .12s}',
+  '.dsgc-msgop svg{flex:none}',
+  '.dsgc-msgop:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.15));color:var(--dsw-alias-label-primary,inherit)}',
+  '.dsgc-msgop:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,var(--dsw-alias-state-business-primary,#4f6ef7));outline-offset:1px}',
+  '.dsgc-msgop.done{color:var(--dsw-alias-state-success-primary,#30a46c)}',
+  '.dsgc-msgop.retry{color:var(--dsw-alias-state-error-primary,#e5484d)}',
+  '.dsgc-msgop.retry:hover:not(:disabled){background:color-mix(in srgb,var(--dsw-alias-state-error-primary,#e5484d) 10%,transparent);color:var(--dsw-alias-state-error-primary,#e5484d)}',
+  '.dsgc-msgop:disabled{opacity:.4;cursor:default}',
+  /* 失败卡：角色消息形态，人话标题 + 可展开原文；不用左侧色条，避免 craft-floor 禁令 */
+  '.dsgc-fail{background:color-mix(in srgb,var(--dsw-alias-state-error-primary,#e5484d) 8%,var(--dsw-alias-bg-layer-3,rgba(128,128,128,.06)));border:1px solid color-mix(in srgb,var(--dsw-alias-state-error-primary,#e5484d) 28%,var(--dsw-alias-border-l1,rgba(128,128,128,.15)));border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0;animation:dsgc-fade-in .18s ease-out}',
+  '.dsgc-failhead{display:flex;align-items:flex-start;gap:8px;min-width:0}',
+  '.dsgc-failicon{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--dsw-alias-state-error-primary,#e5484d);background:color-mix(in srgb,var(--dsw-alias-state-error-primary,#e5484d) 12%,transparent);margin-top:1px}',
+  '.dsgc-failcopy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}',
+  '.dsgc-failtitle{font-size:13px;font-weight:600;line-height:1.4;color:var(--dsw-alias-label-primary,inherit)}',
+  '.dsgc-faildetail{font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary,inherit);overflow-wrap:anywhere}',
+  '.dsgc-failmore{align-self:flex-start;border:none;background:none;padding:0;font:inherit;font-size:11.5px;line-height:1.5;color:var(--dsw-alias-label-tertiary,inherit);cursor:pointer}',
+  '.dsgc-failmore:hover{color:var(--dsw-alias-label-secondary,inherit)}',
+  '.dsgc-failmore:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,var(--dsw-alias-state-business-primary,#4f6ef7));outline-offset:1px}',
+  '.dsgc-fail .dsgc-clip{--dsgc-clip-from:var(--dsw-alias-bg-layer-2,rgba(128,128,128,.12));border-radius:8px}',
+  '.dsgc-failraw{margin:0;font-size:11.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;padding:8px 10px;border-radius:8px;background:var(--dsw-alias-bg-layer-2,transparent);color:var(--dsw-alias-label-secondary,inherit)}',
   /* ===== 工具调用行 / 确认卡片（对标思考折叠语言） ===== */
   '.dsgc-tool{margin:2px 0}',
   '.dsgc-tool .dsgc-toolrow{font-size:12px;color:var(--dsw-alias-label-secondary,inherit);border-radius:8px;padding:3px 8px;transition:background-color .12s}',
   '.dsgc-tool .dsgc-toolrow:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.1))}',
   '.dsgc-tool .dsgc-toolsummary{color:var(--dsw-alias-label-tertiary,inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40ch;font-size:11.5px;margin-left:6px}',
-  '.dsgc-tool .dsgc-toolbody{font-size:12px;line-height:1.6;color:var(--dsw-alias-label-secondary,inherit);white-space:pre-wrap;word-break:break-word;border-left:2px solid var(--dsw-alias-border-l2,rgba(128,128,128,.25));margin:2px 0 4px;padding:2px 0 2px 10px;max-height:260px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-bg-l2,rgba(128,128,128,.35)) transparent}',
+  '.dsgc-tool .dsgc-clip{margin:2px 0 4px;padding-left:10px;border-left:2px solid var(--dsw-alias-border-l2,rgba(128,128,128,.25))}',
+  '.dsgc-tool .dsgc-toolbody{font-size:12px;line-height:1.6;color:var(--dsw-alias-label-secondary,inherit);white-space:pre-wrap;word-break:break-word}',
   '.dsgc-confirm{border:1px solid var(--dsw-alias-state-business-primary,#4f6ef7);border-radius:12px;background:var(--dsw-alias-bg-layer-3,rgba(128,128,128,.06));padding:10px 12px;display:flex;flex-direction:column;gap:8px;max-width:76%;animation:dsgc-fade-in .18s ease-out}',
   '.dsgc-confirmtitle{font-size:12px;font-weight:600;color:var(--dsw-alias-label-primary,inherit);display:flex;align-items:center;gap:6px}',
   '.dsgc-confirmcmd{font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));border-radius:8px;padding:8px 10px;background:var(--dsw-alias-bg-layer-2,transparent);color:var(--dsw-alias-label-primary,inherit);max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-bg-l2,rgba(128,128,128,.35)) transparent}',
   '.dsgc-confirmops{display:flex;gap:8px;justify-content:flex-end}',
-  '.dsgc-sysmsg.err{color:var(--dsw-alias-state-error-primary,#e5484d)}',
   /* 清空确认弹窗内的说明列表 */
   '.dsgc-clearnotes{margin:0;padding-left:18px;font-size:13px;line-height:1.8;color:var(--dsw-alias-label-secondary,inherit);display:flex;flex-direction:column;gap:2px}',
   '.dsgc-err{font-size:12px;color:var(--dsw-alias-state-error-primary,#e5484d);animation:dsgc-fade-in .18s ease-out}',
@@ -152,8 +203,11 @@ export const CSS = [
   '.dsgc-card .dsgc-sendrow{padding:0 12px 10px}',
   '.dsgc-stopbtn{background:var(--dsw-alias-state-error-primary,#e5484d);border-color:transparent;color:#fff;font-weight:600}',
   '.dsgc-stopbtn:hover:not(:disabled){filter:brightness(1.08);color:#fff}',
-  '.dsgc-parts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;row-gap:4px;height:24px}',
-  '.dsgc-partslabel{font-size:12px;color:var(--dsw-alias-label-tertiary,inherit);flex:none}',
+  /* 标签固定在左；芯片在右侧独立换行，后续行与首行芯片左缘对齐（不折到「参与角色」下面）。
+     单行 24px；角色过多时随内容增高，避免固定高度把后续行溢出叠到下方输入卡上 */
+  '.dsgc-parts{display:flex;align-items:flex-start;gap:6px;min-height:24px}',
+  '.dsgc-partslabel{font-size:12px;line-height:24px;color:var(--dsw-alias-label-tertiary,inherit);flex:none}',
+  '.dsgc-partlist{display:flex;flex-wrap:wrap;align-items:center;gap:6px;row-gap:4px;flex:1;min-width:0}',
   '.dsgc-partchip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));background:transparent;color:var(--dsw-alias-label-secondary,inherit);border-radius:999px;padding:2px 10px;font-size:12px;line-height:1.5;cursor:pointer;transition:background-color .12s,color .12s,border-color .12s;font-family:inherit}',
   '.dsgc-partchip:hover{color:var(--dsw-alias-label-primary,inherit)}',
   '.dsgc-partchip.on{background:var(--dsw-alias-interactive-bg-active,rgba(128,128,128,.18));color:var(--dsw-alias-label-primary,inherit);border-color:var(--dsw-alias-border-l2,rgba(128,128,128,.3))}',
@@ -176,6 +230,12 @@ export const CSS = [
   '.dsgc-rounds .dsgc-roundbtn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.15));color:var(--dsw-alias-label-primary,inherit)}',
   '.dsgc-rounds .dsgc-roundbtn:disabled{opacity:.4;cursor:default}',
   '.dsgc-rounds .dsgc-roundnum{width:26px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;color:var(--dsw-alias-label-primary,inherit)}',
+  /* hover 气泡：对齐宿主 Tooltip.module.css，portal 到 body 以躲开 container-type */
+  '.dsgc-hovertip{position:fixed;z-index:100;width:max-content;max-width:50vw;padding:3px 7px;border-radius:8px;background:var(--dsw-alias-tooltip-bg,#1f1f1f);color:var(--dsw-static-neutral-bluish-00,#fff);font-size:13px;line-height:20px;white-space:pre-line;overflow-wrap:break-word;pointer-events:none;animation:dsgc-hovertip-in 150ms var(--ds-ease-in-out,ease)}',
+  '.dsgc-hovertip[data-side="right"]{transform:translateY(-50%)}',
+  '.dsgc-hovertip[data-side="top"]{transform:translate(-50%,-100%)}',
+  '.dsgc-hovertip[data-side="bottom"]{transform:translateX(-50%)}',
+  '@keyframes dsgc-hovertip-in{from{opacity:0}}',
   /* ===== @成员 / @文件弹层 ===== */
   '.dsgc-mentionwrap{position:relative}',
   '.dsgc-mention{animation:dsgc-pop-in .16s cubic-bezier(.16,1,.3,1);position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--dsw-alias-bg-layer-3,#fff);border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));border-radius:10px;box-shadow:var(--dsw-shadow-lv3,0 8px 24px rgba(0,0,0,.18));max-height:220px;overflow-y:auto;padding:4px;z-index:30;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-bg-l2,rgba(128,128,128,.35)) transparent}',
@@ -214,10 +274,12 @@ export const CSS = [
   '.dsgc-rolename{font-weight:600;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary,inherit)}',
   '.dsgc-role.off .dsgc-rolename{color:var(--dsw-alias-label-tertiary,inherit)}',
   '.dsgc-rolepersona{font-size:11.5px;color:var(--dsw-alias-label-tertiary,inherit);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0}',
-  '.dsgc-rolemodel{width:fit-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--dsw-alias-bg-module-platform,rgba(128,128,128,.12));border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;color:var(--dsw-alias-label-secondary,inherit)}',
-  '.dsgc-roleops{display:flex;gap:2px;flex:none;opacity:0;transition:opacity .12s}',
+  '.dsgc-rolemeta{display:flex;align-items:center;gap:6px;min-width:0;flex:1}',
+  '.dsgc-rolemodel{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--dsw-alias-bg-module-platform,rgba(128,128,128,.12));border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;color:var(--dsw-alias-label-secondary,inherit)}',
+  '.dsgc-rolethink{display:inline-flex;align-items:center;flex:none;color:var(--dsw-alias-label-tertiary,inherit)}',
+  '.dsgc-roleops{display:flex;gap:2px;flex:none;margin-left:auto;opacity:0;transition:opacity .12s}',
   '.dsgc-role:hover .dsgc-roleops,.dsgc-role:focus-within .dsgc-roleops{opacity:1}',
-  '.dsgc-rolemenu{display:flex;align-items:center;justify-content:space-between;gap:8px}',
+  '.dsgc-rolemenu{display:flex;align-items:center;gap:8px}',
   /* ===== 表单与控件（角色抽屉内） ===== */
   '.dsgc-field{display:flex;flex-direction:column;gap:5px}',
   '.dsgc-field>label{font-size:12px;font-weight:500;color:var(--dsw-alias-label-secondary,inherit)}',
@@ -239,7 +301,6 @@ export const CSS = [
   '@keyframes dsgc-drawer-out{to{transform:translateX(32px);opacity:0}}',
   '@keyframes dsgc-msg-in{from{opacity:0;transform:translateY(6px)}}',
   '@keyframes dsgc-sys-in{from{opacity:0;transform:scale(.96)}}',
-  '@keyframes dsgc-think-in{from{opacity:0;transform:translateY(-3px)}}',
   '@keyframes dsgc-pop-in{from{opacity:0;transform:translateY(4px)}}',
   '@keyframes dsgc-rise-in{from{opacity:0;transform:translate(-50%,6px)}}',
   '@keyframes dsgc-fade-in{from{opacity:0}}',
@@ -269,7 +330,7 @@ export const CSS = [
   '.dsgc-partchip:focus-visible,.dsgc-mentionitem:focus-visible,.dsgc-dot:focus-visible,.dsgc-opbtn:focus-visible,.dsgc-twist:focus-visible,.dsgc-addsess:focus-visible,.dsgc-grow-row:focus-visible,.dsgc-sess-row:focus-visible,.dsgc-rename:focus-visible,.dsgc-fbrow:focus-visible,.dsgc-role:focus-visible,.dsgc-roundbtn:focus-visible,.dsgc-tobtn:focus-visible,.dsgc-seambtn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,var(--dsw-alias-state-business-primary,#4f6ef7));outline-offset:1px}',
   /* ===== 窄容器：右栏覆盖式呈现 ===== */
   '@container (max-width: 880px){.dsgc-aside{position:absolute;top:0;right:0;bottom:0;z-index:15;width:min(304px,88%);box-shadow:-12px 0 32px rgba(0,0,0,.16);border-left:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease}.dsgc-aside.closed{width:min(304px,88%);padding-left:12px;padding-right:12px;border-left-width:1px;transform:translateX(calc(100% + 14px));opacity:0;transition:transform .26s ease-in,opacity .18s ease-in,visibility 0s .24s}.dsgc-seambtn.right:not(.closed){right:min(304px,88%)}}',
-  '@container (max-width: 640px){.dsgc-nav{width:200px}.dsgc-msgbody{max-width:88%}}',
+  '@container (max-width: 640px){.dsgc-nav{width:200px}.dsgc-msgbody{max-width:88%}.dsgc-constraints{width:88%;max-width:88%}}',
   /* ===== 侧边栏入口对齐（外壳将插槽内容包在 panelGlyph span 内，必须用后代 :has） ===== */
   '[class*="panelList"]:has(.dsgc-entryOverlay){margin-top:4px}',
   '[class*="panelRow"]:has(.dsgc-entryOverlay){position:relative;box-sizing:border-box;height:36px;min-height:36px;padding:0 10px;font-size:13px;transition:background-color .12s,color .12s}',
@@ -292,7 +353,7 @@ export const CSS = [
   '.dsgc-entryIcon svg{width:18px;height:18px;display:block}',
   '[data-sidebar-collapsed] .dsgc-entryOverlay,[class*="collapsed"] .dsgc-entryOverlay{justify-content:center;padding:0}',
   '[data-sidebar-collapsed] [class*="panelRow"]:has(.dsgc-entryOverlay),[class*="collapsed"] [class*="panelRow"]:has(.dsgc-entryOverlay){margin:0 auto}',
-  '@media (prefers-reduced-motion:reduce){.dsgc-dot,.dsgc-partchip,.dsgc-mentionitem,.dsgc-grow-row,.dsgc-sess-row,.dsgc-opbtn,.dsgc-addsess,.dsgc-topic,.dsgc-role,.dsgc-rename,.dsgc-input,.dsgc-select,.dsgc-textarea,.dsgc-fbrow,.dsgc-twist svg,.dsgc-roleops,.dsgc-roundbtn,.dsgc-permtrigger,.dsgc-permchevron,.dsgc-tobtn,.dsgc-seambtn,.dsgc-aside,.dsgc-aside.closed,.dsgc-nav,.dsgc-nav.closed,.dsgc-clearbtn,[class*="panelRow"]:has(.dsgc-entryOverlay){transition:none}.dsgc-dot:hover{transform:none}.dsgc-drawer,.dsgc-msg,.dsgc-sysmsg,.dsgc-mention,.dsgc-tobottom,.dsgc-err,.dsgc-empty,.dsgc-fb,.dsgc-think .dsgc-thinkbody,.dsgc-msg.live .dsgc-avatar,.dsgc-loading svg,.dsgc-pendingdots i,.dsgc-typing{animation:none}.dsgc-typing{background-position:0 0;background-size:100% 100%}}',
+  '@media (prefers-reduced-motion:reduce){.dsgc-dot,.dsgc-partchip,.dsgc-mentionitem,.dsgc-grow-row,.dsgc-sess-row,.dsgc-opbtn,.dsgc-addsess,.dsgc-topic,.dsgc-role,.dsgc-rename,.dsgc-input,.dsgc-select,.dsgc-textarea,.dsgc-fbrow,.dsgc-twist svg,.dsgc-roleops,.dsgc-roundbtn,.dsgc-permtrigger,.dsgc-permchevron,.dsgc-tobtn,.dsgc-seambtn,.dsgc-aside,.dsgc-aside.closed,.dsgc-nav,.dsgc-nav.closed,.dsgc-clearbtn,.dsgc-cmore,.dsgc-msgops,.dsgc-msgop,.dsgc-failmore,.dsgc-clip::before,.dsgc-clip::after,.dsgc-fold,.dsgc-fold-inner,.dsgc-fold.open,.dsgc-fold.open .dsgc-fold-inner,[class*="panelRow"]:has(.dsgc-entryOverlay){transition:none}.dsgc-dot:hover{transform:none}.dsgc-drawer,.dsgc-msg,.dsgc-sysmsg,.dsgc-mention,.dsgc-tobottom,.dsgc-err,.dsgc-empty,.dsgc-fb,.dsgc-msg.live .dsgc-avatar,.dsgc-loading svg,.dsgc-pendingdots i,.dsgc-typing,.dsgc-constraints,.dsgc-hovertip,.dsgc-fail{animation:none}.dsgc-typing{background-position:0 0;background-size:100% 100%}}',
   /* ===== 设置页（同一卡片语言） ===== */
   '.dgcs-page{display:flex;flex-direction:column;gap:14px;padding:4px 0}',
   '.dgcs-head{display:flex;flex-direction:column;gap:6px}',