@tfdesign/b-end 1.0.13 → 1.0.15

package/src/_b_end_runtime/page-patterns/ChatHomePagePattern.jsx

@@ -262,7 +262,7 @@ export default function ChatHomePagePattern() {
           </div>
         </div>
 
-        {/* ③ 卡片网格（随页面整体滚动，左右 40px） */}
+        {/* ③ 卡片网格（当前直接坐浅灰页面底，所以统一使用白底 Card 做内容承载） */}
         <div
           className="shrink-0"
           style={{ padding: '0 40px 32px' }}

package/src/_b_end_runtime/page-patterns/CopilotPagePattern.jsx

@@ -91,7 +91,7 @@ function TopBar({ copilotOpen, onToggleCopilot }) {
 function TopBarLead({ copilotOpen, onToggleCopilot }) {
   return (
     <>
-      <Button variant="outline-black" iconOnly icon={<Icon name="arrow-left-stroked" />} aria-label="返回" />
+      <Button variant="outline-black" iconOnly icon={<Icon name="arrow-left-stroked" />} tooltip="返回" aria-label="返回" />
 
       <span
         className="font-semibold text-base leading-[22px] whitespace-nowrap"
@@ -158,7 +158,7 @@ function TopBarActions() {
       </div>
 
       <div className="flex items-center gap-2">
-        <Button variant="ghost-black" iconOnly icon={<Icon name="dots-horizontal-stroked" />} aria-label="更多" />
+        <Button variant="ghost-black" iconOnly icon={<Icon name="dots-horizontal-stroked" />} tooltip="更多" aria-label="更多" />
         <Button variant="outline-black">次操作</Button>
         <Button variant="primary" icon={<Icon name="plus-stroked" />}>主操作</Button>
       </div>
@@ -191,9 +191,9 @@ function CopilotPanel({ onClose }) {
           </span>
         </div>
         <div className="flex items-center gap-0.5 shrink-0">
-          <Button variant="ghost-black" iconOnly icon={<Icon name="message-plus-square-stroked" />} aria-label="新建会话" />
-          <Button variant="ghost-black" iconOnly icon={<Icon name="clock-stroked" />} aria-label="历史记录" />
-          <Button variant="ghost-black" iconOnly icon={<Icon name="layout-left-stroked" />} aria-label="收起面板" onClick={onClose} />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="message-plus-square-stroked" />} tooltip="新建会话" aria-label="新建会话" />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="clock-stroked" />} tooltip="历史记录" aria-label="历史记录" />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="layout-left-stroked" />} tooltip="收起面板" aria-label="收起面板" onClick={onClose} />
         </div>
       </div>
 
@@ -362,7 +362,7 @@ function ContentCard() {
 
           <Button variant="ghost-black">流程单测</Button>
           <Button variant="ghost-black">批量测试</Button>
-          <Button variant="ghost-black" iconOnly icon={<Icon name="git-branch-02-stroked" />} aria-label="对比" />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="git-branch-02-stroked" />} tooltip="对比" aria-label="对比" />
         </div>
       </div>
 

package/src/_b_end_runtime/page-patterns/CustomerServiceWorkspaceFramePattern.jsx

@@ -57,6 +57,14 @@ const WORKSPACE_THREAD_CONTENT = {
       { id: 'pending-1-a2', kind: 'agent', text: '我已备注您正在到店等位，并同步门店优先处理；若核销仍失败，会为您申请等位补偿或原路退款。', time: ts('14:07', '02') },
       { id: 'pending-1-u5', kind: 'user', text: '好的，麻烦快一点，我这边还在等叫号。', time: ts('14:07', '18') },
       { id: 'pending-1-a3', kind: 'agent', text: '没问题，我会持续跟进西单店反馈。若 5 分钟内未解决，我会直接帮您升级商家值班人员处理。', time: ts('14:07', '36') },
+      { id: 'pending-1-u6', kind: 'user', text: '门店刚刚还是说系统里没刷出来，我这边还要继续等吗？', time: ts('14:08', '04') },
+      { id: 'pending-1-a4', kind: 'agent', text: '我已再次催门店值班经理人工核验，建议您先保留当前排队小票，我这边同步加急处理中。', time: ts('14:08', '22') },
+      { id: 'pending-1-u7', kind: 'user', text: '如果最后还是不行，退款会退多久？', time: ts('14:08', '46') },
+      { id: 'pending-1-a5', kind: 'agent', text: '若最终无法核销，我会优先为您走原路退款，通常 1-3 个工作日到账，具体以支付渠道为准。', time: ts('14:09', '05') },
+      { id: 'pending-1-u8', kind: 'user', text: '那补偿大概多久能确认下来？', time: ts('14:09', '28') },
+      { id: 'pending-1-a6', kind: 'agent', text: '若门店确认是核销异常导致等待，我会直接在本会话同步补偿方案，通常当场或当天内即可确认。', time: ts('14:09', '47') },
+      { id: 'pending-1-u9', kind: 'user', text: '好，那你先按这个方案帮我备注，我这边继续等等。', time: ts('14:10', '11') },
+      { id: 'pending-1-a7', kind: 'agent', text: '好的，已补充备注“到店等待中，优先核销；若失败按补偿/退款方案处理”，有进展我马上告诉您。', time: ts('14:10', '34') },
     ],
   },
   'pending-2': {
@@ -75,6 +83,16 @@ const WORKSPACE_THREAD_CONTENT = {
       { id: 'pending-2-a2', kind: 'agent', text: '我会帮您向商家发起加急催发，并要求在 2 小时内反馈是否能按时寄出。', time: ts('12:50', '01') },
       { id: 'pending-2-u3', kind: 'user', text: '如果今天发不了可以直接退款吗？', time: ts('12:51', '16') },
       { id: 'pending-2-a3', kind: 'agent', text: '可以。如果商家确认今日无法发出，我会协助您走未按约发货退款流程，并同步保留催发记录。', time: ts('12:51', '45') },
+      { id: 'pending-2-u4', kind: 'user', text: '商家那边现在有新的回复吗？', time: ts('12:52', '08') },
+      { id: 'pending-2-a4', kind: 'agent', text: '刚收到仓库侧反馈，当前包裹已完成分拣，正在等待承运商揽收并回传物流单号。', time: ts('12:52', '34') },
+      { id: 'pending-2-u5', kind: 'user', text: '如果两小时内还是发不出来，就直接帮我走退款吧。', time: ts('12:53', '01') },
+      { id: 'pending-2-a5', kind: 'agent', text: '可以，我已备注您的优先诉求：若超时未揽收，将按未按约发货为您优先发起退款申请。', time: ts('12:53', '26') },
+      { id: 'pending-2-u6', kind: 'user', text: '我明早出门前一定要确认，不然就来不及用了。', time: ts('12:53', '52') },
+      { id: 'pending-2-a6', kind: 'agent', text: '理解，我会在今晚 18 点前再次核对是否已揽收，并把结果同步给您，避免您空等。', time: ts('12:54', '18') },
+      { id: 'pending-2-u7', kind: 'user', text: '能帮我备注优先联系仓库吗？', time: ts('12:54', '41') },
+      { id: 'pending-2-a7', kind: 'agent', text: '已经备注“优先联系仓库核对实际出库进度”，并补充了您明早急用的场景说明。', time: ts('12:55', '03') },
+      { id: 'pending-2-u8', kind: 'user', text: '好的，那我等你消息。', time: ts('12:55', '26') },
+      { id: 'pending-2-a8', kind: 'agent', text: '好的，有新进展我会第一时间在本会话回复您，不需要您重复催问。', time: ts('12:55', '44') },
     ],
   },
   'pending-3': {
@@ -93,6 +111,17 @@ const WORKSPACE_THREAD_CONTENT = {
       { id: 'pending-3-a2', kind: 'agent', text: '我会先为您登记权益补偿，若原券无法恢复，会补发一张同面额可用券到您的账号。', time: ts('12:37', '01') },
       { id: 'pending-3-u3', kind: 'user', text: '那我今天还能下单吗？', time: ts('12:38', '12') },
       { id: 'pending-3-a3', kind: 'agent', text: '可以，我会在登记中备注“活动期内核销异常”，补偿券会按当前活动权益处理。', time: ts('12:38', '40') },
+      { id: 'pending-3-u4', kind: 'user', text: '补发券一般多久会到账号里？', time: ts('12:39', '02') },
+      { id: 'pending-3-a4', kind: 'agent', text: '若走补发方案，通常会在核验完成后当天内到账；若活动高峰期，最晚不超过 24 小时。', time: ts('12:39', '27') },
+      { id: 'pending-3-u5', kind: 'user', text: '如果我今天就想下单，还有别的处理办法吗？', time: ts('12:39', '51') },
+      { id: 'pending-3-a5', kind: 'agent', text: '我可以先为您登记“活动期核销异常”标记，优先争取按照原活动权益补发同等券后再下单使用。', time: ts('12:40', '18') },
+      { id: 'pending-3-u6', kind: 'user', text: '这次活动今晚就结束，我怕到时候补偿也变少。', time: ts('12:40', '44') },
+      { id: 'pending-3-a6', kind: 'agent', text: '已理解，我会在登记里注明“按活动结束前权益补偿”，避免后续按普通券面额降级处理。', time: ts('12:41', '10') },
+      { id: 'pending-3-u7', kind: 'user', text: '如果原券恢复了，是不是我就直接还能用原来的？', time: ts('12:41', '36') },
+      { id: 'pending-3-a7', kind: 'agent', text: '是的，若系统先恢复原券状态，您可以直接继续使用原券；补发流程会自动撤销，不会重复占用权益。', time: ts('12:42', '04') },
+      { id: 'pending-3-u8', kind: 'user', text: '好，那我先等等你这边结果。', time: ts('12:42', '29') },
+      { id: 'pending-3-a8', kind: 'agent', text: '好的，我会持续盯进度，有恢复结果或补发方案落地会第一时间同步您。', time: ts('12:42', '52') },
+      { id: 'pending-3-a9', kind: 'agent', text: '如果 30 分钟内仍未恢复，我会直接升级活动运营侧加急核查。', time: ts('12:43', '16') },
     ],
   },
   'managed-1': {
@@ -181,8 +210,8 @@ function getConversationItems(sections) {
   return (sections || []).flatMap((section) => section.items || []);
 }
 
-function findConversationItem(itemId) {
-  return getConversationItems(WORKSPACE_CONVERSATION_SECTIONS).find((item) => item.id === itemId);
+function findConversationItem(itemId, sections = WORKSPACE_CONVERSATION_SECTIONS) {
+  return getConversationItems(sections).find((item) => item.id === itemId);
 }
 
 function getPrimaryTagLabel(item, fallback = '') {
@@ -198,6 +227,7 @@ function buildThreadContext(item) {
   return {
     id: resolvedItem?.id || DEFAULT_CONVERSATION_ID,
     title: resolvedItem?.title || '当前会话',
+    tags: Array.isArray(resolvedItem?.tags) ? resolvedItem.tags : [],
     tagLabel: content.tagLabel || getPrimaryTagLabel(resolvedItem),
     userId: resolvedItem?.orderId || '未知会话',
     channel: content.channel || '抖音',
@@ -209,6 +239,33 @@ function buildThreadContext(item) {
   };
 }
 
+function buildConversationCardPreviewMessages(messages = []) {
+  return messages
+    .filter((message) => message?.kind !== 'system')
+    .map((message) => ({
+      id: `${message.id}-preview`,
+      role: message.kind === 'user'
+        ? 'user'
+        : (message.kind === 'bot' ? 'bot' : 'agent'),
+      text: message.text,
+    }));
+}
+
+function buildWorkspaceConversationSections(sections = WORKSPACE_CONVERSATION_SECTIONS) {
+  return sections.map((section) => ({
+    ...section,
+    items: (section.items || []).map((item) => {
+      const threadContent = WORKSPACE_THREAD_CONTENT[item.id] || {};
+      return {
+        ...item,
+        messages: buildConversationCardPreviewMessages(threadContent.messages || []),
+        status: 'replied',
+        draftText: '',
+      };
+    }),
+  }));
+}
+
 /**
  * CustomerServiceWorkspaceFramePattern — 客服工作台框架
  *
@@ -225,9 +282,13 @@ export default function CustomerServiceWorkspaceFramePattern() {
   const [mainPanelWidth, setMainPanelWidth] = useState(0);
   const [infoPanelWidth, setInfoPanelWidth] = useState(INFO_PANEL_DEFAULT_WIDTH);
   const [activeConversationId, setActiveConversationId] = useState(DEFAULT_CONVERSATION_ID);
+  const workspaceSections = useMemo(
+    () => buildWorkspaceConversationSections(WORKSPACE_CONVERSATION_SECTIONS),
+    [],
+  );
   const activeConversationItem = useMemo(
-    () => findConversationItem(activeConversationId) || findConversationItem(DEFAULT_CONVERSATION_ID),
-    [activeConversationId],
+    () => findConversationItem(activeConversationId, workspaceSections) || findConversationItem(DEFAULT_CONVERSATION_ID, workspaceSections),
+    [activeConversationId, workspaceSections],
   );
   const activeThread = useMemo(
     () => buildThreadContext(activeConversationItem),
@@ -323,7 +384,7 @@ export default function CustomerServiceWorkspaceFramePattern() {
   const leftPanel = (
     <ConversationList
       title="会话列表"
-      sections={WORKSPACE_CONVERSATION_SECTIONS}
+      sections={workspaceSections}
       defaultActiveTab="all"
       activeItemId={activeThread.id}
       onItemClick={(item) => setActiveConversationId(item.id)}

package/src/_b_end_runtime/page-patterns/IMConversationPattern.jsx

@@ -142,6 +142,26 @@ function groupConversation(items) {
   }, []);
 }
 
+function isPrimaryStatusTag(tag) {
+  return ['red', 'green', 'orange', 'blue'].includes(tag?.variant);
+}
+
+function sortThreadHeaderTags(tags) {
+  if (!Array.isArray(tags) || tags.length <= 1) return Array.isArray(tags) ? tags : [];
+
+  const statusTags = [];
+  const secondaryTags = [];
+  tags.forEach((tag) => {
+    if (isPrimaryStatusTag(tag)) {
+      statusTags.push(tag);
+      return;
+    }
+    secondaryTags.push(tag);
+  });
+
+  return [...statusTags, ...secondaryTags];
+}
+
 /**
  * @param {{
  *  asCard?: boolean,
@@ -154,6 +174,7 @@ function groupConversation(items) {
  *  thread?: {
  *    id?: string,
  *    title?: string,
+ *    tags?: Array<{ label:string, variant?:string, iconName?:string }>,
  *    tagLabel?: string,
  *    userId?: string,
  *    channel?: string,
@@ -302,6 +323,10 @@ function IMThreadHeader({ thread }) {
   const [overflowOpen, setOverflowOpen] = useState(false);
   const [overflowPosition, setOverflowPosition] = useState({ top: 0, right: 0 });
   const hiddenActions = THREAD_ACTIONS.slice(visibleActionCount);
+  const rawHeaderTags = Array.isArray(thread.tags) && thread.tags.length > 0
+    ? thread.tags
+    : (thread.tagLabel ? [{ label: thread.tagLabel, variant: 'white' }] : []);
+  const headerTags = sortThreadHeaderTags(rawHeaderTags);
 
   useEffect(() => {
     const headerEl = headerRef.current;
@@ -405,11 +430,20 @@ function IMThreadHeader({ thread }) {
             <h2 className="m-0 truncate text-sm leading-5 text-foreground [font-weight:var(--font-semibold)]">
               {thread.title}
             </h2>
-            {thread.tagLabel ? (
-              <Tag variant="white" size="m" radius="md" fontWeight="bold">
-                {thread.tagLabel}
+            {headerTags.map((tag, index) => (
+              <Tag
+                key={`${tag.label}-${index}`}
+                variant={tag.variant || 'grey'}
+                size="m"
+                radius="md"
+                fontWeight="regular"
+                showIcon={Boolean(tag.iconName)}
+                iconName={tag.iconName}
+                className="shrink-0"
+              >
+                {tag.label}
               </Tag>
-            ) : null}
+            ))}
           </div>
 
           <div className="flex min-w-0 items-center gap-2 text-xs leading-4 text-foreground-muted">
@@ -453,19 +487,18 @@ function IMThreadHeader({ thread }) {
 
 function ThreadActionButton({ action, ariaExpanded, onClick, ref }) {
   return (
-    <Tooltip content={action.label} placement="top" triggerClassName="inline-flex shrink-0">
-      <Button
-        ref={ref}
-        type="button"
-        variant="ghost-black"
-        size="md"
-        iconOnly
-        aria-label={action.label}
-        aria-expanded={ariaExpanded}
-        onClick={onClick}
-        icon={<Icon name={action.iconName} size="sm" aria-hidden="true" />}
-      />
-    </Tooltip>
+    <Button
+      ref={ref}
+      type="button"
+      variant="ghost-black"
+      size="md"
+      iconOnly
+      tooltip={action.label}
+      aria-label={action.label}
+      aria-expanded={ariaExpanded}
+      onClick={onClick}
+      icon={<Icon name={action.iconName} size="sm" aria-hidden="true" />}
+    />
   );
 }
 

package/src/_b_end_runtime/page-patterns/TabTopBarListPage.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import Avatar from '../components/Avatar';
 import Button from '../components/Button';
+import Card from '../components/Card';
 import Icon from '../components/Icon';
 import Tabs from '../components/Tabs';
 import Tag from '../components/Tag';
@@ -279,6 +280,7 @@ export default function TabTopBarListPage({ onCreateQA }) {
             variant="ghost-black"
             iconOnly
             icon={<Icon name="dots-horizontal-stroked" />}
+            tooltip="更多操作"
             aria-label="更多操作"
           />
           <Button variant="outline-black">知识测试</Button>
@@ -316,7 +318,7 @@ export default function TabTopBarListPage({ onCreateQA }) {
               style={{ gap: '12px' }}
             >
               {activeTab.data.map((item) => (
-                <KnowledgeCard
+                <KnowledgeInfoCard
                   key={item.id}
                   item={item}
                   typeLabel={activeTab.typeLabel}
@@ -339,86 +341,33 @@ export default function TabTopBarListPage({ onCreateQA }) {
   );
 }
 
-/* ── 单张知识卡片 ──
- * 三态背景：默认浅灰填充 / hover 加深 / 选中浅绿；选中态额外用 1px brand-500 内描边强提示。
- * 用 mouseenter/leave 切 inline background，避免 Tailwind hover: 与 inline style 优先级冲突。 */
-function KnowledgeCard({ item, typeLabel, selected, onClick }) {
+/* ── 知识列表卡片 ──
+ * 页面示例3的列表卡片必须引用 Card type="info3"。
+ * 选中/未选中/hover 三态由 Card 信息卡片3统一承载，页面只负责业务数据映射。 */
+function KnowledgeInfoCard({ item, typeLabel, selected, onClick }) {
   const creator = getTeamMemberByName(item.creator) || getTeamMemberByIndex(0);
-  const baseBg = selected
-    ? 'var(--color-brand-50, #ECFFF9)'
-    : 'var(--color-blueGrey-50, #F4F7FB)';
-  const hoverBg = selected
-    ? 'var(--color-brand-50, #ECFFF9)'
-    : 'var(--color-blueGrey-100, #E4EAF2)';
 
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      onMouseEnter={(e) => { e.currentTarget.style.background = hoverBg; }}
-      onMouseLeave={(e) => { e.currentTarget.style.background = baseBg; }}
-      className="min-w-0 text-left cursor-pointer focus-visible:outline-none"
-      style={{
-        border: selected
-          ? '1px solid var(--color-brand-500, #00B384)'
-          : '1px solid var(--color-border-default, #E4E7EC)',
-        borderRadius: '12px',
-        padding: '16px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        background: baseBg,
-        transition: 'background 150ms ease, border-color 150ms ease',
-      }}
-    >
-      <div className="flex items-start justify-between gap-2">
-        <p
-          className="[font-weight:var(--font-semibold)] text-blueGrey-900 m-0"
-          style={{
-            fontSize: '16px',
-            lineHeight: '24px',
-            display: '-webkit-box',
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
-          }}
-        >
-          {item.question}
-        </p>
-        <Tag variant={STATUS_TAG_VARIANT[item.status] || 'grey'} style={{ flexShrink: 0 }}>
-          {item.status}
-        </Tag>
-      </div>
-
-      <p
-        className="text-blueGrey-600 m-0"
-        style={{
-          fontSize: '14px',
-          lineHeight: '22px',
-          display: '-webkit-box',
-          WebkitLineClamp: 2,
-          WebkitBoxOrient: 'vertical',
-          overflow: 'hidden',
-        }}
-      >
-        {item.answer}
-      </p>
-
-      <div className="flex items-center text-blueGrey-500" style={{ fontSize: '12px', gap: '12px' }}>
-        <span className="inline-flex items-center" style={{ gap: '4px' }}>
-          <Icon name="tag-01-stroked" size="xs" />
-          {typeLabel}
-        </span>
-        <span className="inline-flex items-center" style={{ gap: '4px' }}>
-          <Icon name="clock-stroked" size="xs" />
-          {item.updatedAt}
-        </span>
-        <span className="inline-flex items-center" style={{ gap: '4px' }}>
-          <Avatar size="xxs" type="image" src={creator?.avatarSrc} alt={`${item.creator}头像`} />
-          {item.creator}
-        </span>
-      </div>
-    </button>
+    <Card
+      type="info3"
+      color="grey"
+      title={item.question}
+      description={item.answer}
+      status={item.status}
+      statusVariant={STATUS_TAG_VARIANT[item.status] || 'grey'}
+      selected={selected}
+      onAction={onClick}
+      actionAriaLabel={`查看${item.question}详情`}
+      metaItems={[
+        { iconName: 'tag-01-stroked', value: typeLabel },
+        { iconName: 'clock-stroked', value: item.updatedAt },
+        {
+          avatarSrc: creator?.avatarSrc,
+          avatarAlt: `${item.creator}头像`,
+          value: item.creator,
+        },
+      ]}
+    />
   );
 }
 
@@ -468,6 +417,7 @@ function DetailPanel({ card, typeLabel, open }) {
                 variant="ghost-black"
                 iconOnly
                 icon={<Icon name="dots-horizontal-stroked" />}
+                tooltip="更多操作"
                 aria-label="更多操作"
               />
               <Button

package/src/_b_end_runtime/patterns.js

@@ -47,15 +47,19 @@ export const PATTERNS = [
       '【顶部工具】指标区右侧按钮仅用于平台框架级入口，例如全局设置、平台公告、平台数据统计等；最多展示 3 个按钮，超出时应按平台级优先级裁切；按钮必须复用 `Button iconOnly` 并提供 `tooltip` / `aria-label`，不要放置页面内局部操作或业务表单操作。',
       '【工作区层级】Workspace 外层只负责横向布局、覆盖层级与拖拽，不承担可见圆角；左侧板块自身为 `bg-white/50 + border-white + rounded-xl`，右侧主面板自身为白色 `surface + border-white + rounded-xl`，两者高度一致、宽度不同，并通过主面板 `margin-left: -32px` 形成“右侧白板覆盖在左侧灰板上”的叠压视觉，而不是中间留缝的并排关系。',
       '【可见圆角】最终可见的 6 个角统一为 16px：左侧板块左上 / 左下两个角露出；右侧主白卡四角露出；左侧板块右上 / 右下两个角必须被右侧主白卡完整覆盖。主面板覆盖量必须大于圆角半径（推荐 32px = 2 × 16px），防止主面板左上 / 左下圆角切角处露出左侧板块的右边界或描边，避免出现“残缺一块”的视觉。',
+      '【框架级能力不可删减】当 AI 生成页面使用客服工作台框架时，必须完整保留框架级交互能力：左侧列表 / 卡片容器宽度拖拽、左侧与右侧主白卡之间的覆盖式拖拽、右侧 InfoDisplayPanel 整体宽度拖拽、InfoDisplayPanel 内部栏间拖拽、响应式最小宽度保护、自动折叠、动态分栏和上下文同步。禁止只复刻截图外观却删除拖拽条、键盘微调、宽度下限、自动适配或 tab 拆分逻辑。',
       '【左右拖拽】左侧区域与右侧主白卡之间必须提供纵向拖拽热区，默认热区 8px；拖拽热区覆盖在主面板左边缘上，不占用布局宽度、不制造中间空隙；拖动时调整左侧区域宽度并让右侧主面板 `flex-1 min-w-0` 自动占满剩余空间；左侧默认宽度 432px（400px 可视会话列表 + 32px 主面板覆盖区）；拖拽最小宽度优先由左侧业务组件最小可用宽度决定，例如 ConversationList 默认列表纯头像锁定 88px 时，左侧板块最小宽度为 `max(100px 框架兜底, 88px + 32px 覆盖区) = 120px`；ConversationList 卡片列表最小内容宽度为 333px，左侧板块最小宽度为 365px；右侧纯白主容器最小宽度 380px，左侧最大可拖宽度需按 `工作区宽度 + 32px 覆盖量 - 380px` 动态计算；拖拽条需支持键盘左右方向键微调。',
-      '【左侧插槽】左侧半透明容器默认承载平台业务组件 `ConversationList`，用于会话 / 工单 / 托管队列切换；左侧内容区必须扣除右侧 32px 覆盖安全区，避免被主白卡裁切；`ConversationList` 展开态四周内容间距固定 16px。嵌入时 `ConversationList` 必须设置 `resizable={false}`、保留 `collapsible` 与 `autoCollapseOnNarrow`、`style={{ width: "100%", height: "100%" }}`，并在外层框架接入 `onLayoutWidthRequest` 与 `onVariantChange`：默认列表传 `leftContentMinWidth={88}`，卡片列表切换为 `leftContentMinWidth={333}`。框架统一管理宽度拖拽，但拖拽下限跟随子组件能力；点击会话列表左上角收起按钮时，外层左侧半透明容器必须同步吸附缩窄到 120px，不允许只把 ConversationList 缩到头像列而外层仍保留大片空白。',
-      '【左侧选中项 = 右侧上下文源】客服工作台框架内左侧 `ConversationList` 默认必须存在一个当前选中项；它不是单纯的导航高亮，而是整个右侧主白卡的上下文源。切换左侧会话 / 工单 / 托管项时，右侧纯白容器里的 IM 对话区和 InfoDisplayPanel 信息区都必须同步切换到同一个当前处理对象，禁止出现“左侧已切到 B 会话，但右侧聊天仍是 A、信息区还是 C”的上下文错位。预览实现必须以 `activeConversationId` 作为单一事实源：左侧列表头像、标题、单号与右侧 IM Header 的头像、标题、会话 ID、渠道、沟通时长和消息脚本必须一一对应，不能只更新高亮而复用固定聊天剧本。',
+      '【左侧插槽】左侧半透明容器默认承载平台业务组件 `ConversationList`，用于会话 / 工单 / 托管队列切换；左侧内容区必须扣除右侧 32px 覆盖安全区，避免被主白卡裁切；`ConversationList` 展开态四周内容间距固定 16px。嵌入时 `ConversationList` 必须设置 `resizable={false}`、保留 `collapsible` 与 `autoCollapseOnNarrow`、`style={{ width: "100%", height: "100%" }}`，并在外层框架接入 `onLayoutWidthRequest` 与 `onVariantChange`：默认列表传 `leftContentMinWidth={88}`，卡片列表切换为 `leftContentMinWidth={333}`。框架统一管理宽度拖拽，但拖拽下限跟随子组件能力；点击会话列表左上角收起按钮时，外层左侧半透明容器必须同步吸附缩窄到 120px，不允许只把 ConversationList 缩到头像列而外层仍保留大片空白。收起后的纯头像列表项高度必须固定为 68px，包含 `h-[68px] min-h-[68px] shrink-0` 级别约束；选中态头像胶囊也不得被父级 flex 均分或可用高度不足压扁。',
+      '【左侧选中项 = 右侧上下文源】客服工作台框架内左侧 `ConversationList` 默认必须存在一个当前选中项；它不是单纯的导航高亮，而是整个右侧主白卡的上下文源。切换左侧会话 / 工单 / 托管项时，右侧纯白容器里的 IM 对话区和 InfoDisplayPanel 信息区都必须同步切换到同一个当前处理对象，禁止出现“左侧已切到 B 会话，但右侧聊天仍是 A、信息区还是 C”的上下文错位。预览实现必须以 `activeConversationId` 作为单一事实源：左侧列表头像、标题、单号、标签数组与右侧 IM Header 的头像、标题、标签数组、会话 ID、渠道、沟通时长和消息脚本必须一一对应，不能只更新高亮而复用固定聊天剧本。右侧标题右侧的标签必须复用左侧当前选中 item.tags 的 label / variant / iconName，禁止只传单个 tagLabel 或统一渲染成白色标签；标签排序必须遵循状态优先：red / green / orange / blue 这类带颜色的会话状态标签默认排在最左侧，grey 辅助标签排在其后；灰色辅助标签 mock 文案必须控制在 4 个字以内。',
+      '【左侧卡片消息流 = 右侧完整气泡流缩小版】当 `ConversationList variant="card"` 展示选中会话卡片时，卡片内的消息区不是“只看几条摘要”的精简预览，而是右侧 IMConversationPattern 当前会话完整气泡消息流的缩小版窗口。若右侧聊天区存在 20 条可展示气泡消息，左侧卡片消息区也必须通过固定高度 + `overflow-y-auto` 的内部滚动查看这同一批 20 条气泡；禁止按条数截断、禁止只保留最后几条。左侧每条气泡的文案内容、发送方角色、气泡颜色语义必须与右侧聊天区对应消息完全一致：用户消息统一使用右侧用户气泡的浅灰语义，bot 回复统一使用 AI 渐变语义，人工客服回复统一使用右侧客服气泡的浅青语义。允许因为卡片更小而降低字号、压缩内边距、隐藏头像/时间或继续省略 system 提示，但禁止改写文案、调换角色、改颜色，或让左侧显示右侧不存在的消息。',
       '【左侧卡片列表】`ConversationList variant="card"` 嵌入左栏时，卡片列数必须基于左侧内容区实际宽度动态判断：`<=580px` 为 1 列，`>580px` 为 2 列，`>950px` 为 3 列；外层拖拽变宽 / 变窄时卡片栅格必须实时跟随，不能固定按默认 400px 宽度生成单列。',
       '【右侧主白卡默认内容】右侧主白卡默认采用左右分栏：左侧嵌入 IMConversationPattern 作为当前会话处理区，右侧嵌入 InfoDisplayPanel 作为用户信息、历史工单、工单日志、视频信息等辅助信息区；外层主白卡只负责容器、裁切、间距和分栏，不再额外套大白卡。',
       '【右侧布局规则】右侧主白卡内默认 `p-4 + gap-4`，左侧 IM 对话区使用 `flex-1 min-w-0` 吃剩余空间，右侧 InfoDisplayPanel 为独立信息栏；框架 mainMinWidth 建议不低于 720px，避免 IM 对话与信息面板互相挤压。IMConversationPattern 和 InfoDisplayPanel 都必须 `height: 100%` 填满主白卡高度，并由各自组件自管内部滚动。',
       '【右侧纯白卡语义】右侧纯白色主卡定义的是“当前处理对象的完整工作区”，不是两个彼此独立的小组件容器。IMConversationPattern 负责当前线程消息往返，InfoDisplayPanel 负责同一对象的辅助信息、历史工单、日志、视频信息、用户信息等；两者必须共享同一个当前会话 / 工单 / 线程上下文。',
       '【状态同步原则】当业务接真实数据、URL 或埋点时，应以左侧当前选中对象 id 作为单一事实源（single source of truth），再派生右侧聊天流和信息面板内容；不要让 IMConversationPattern 和 InfoDisplayPanel 各自维护独立当前对象状态。',
       '【右侧信息栏整体拖拽】在客服工作台框架模版里，右侧 InfoDisplayPanel 必须支持整体宽度拖拽，拖拽热区位于信息栏左边界，默认热区 8px；拖拽时改变的是右侧信息栏整体宽度，左侧 IM 聊天区自动占满剩余空间，而不是改由 InfoDisplayPanel 本体处理页面级宽度。推荐默认宽度约 380px，最小宽度 320px，并保证左侧 IM 区至少保留 360px 可读宽度；同时保留 InfoDisplayPanel 内部相邻栏之间的原生拖拽能力。',
+      '【InfoDisplayPanel 动态 tab 拆分】右侧信息展示区必须保留 InfoDisplayPanel 的动态 tab1 / tab2 / tab3 栏拆分能力：业务只有 1 个分类时降级为单栏标题 + 内容；业务有 2 个分类时最多支持拆成 2 栏；业务有 3 个及以上分类且宽度达到三栏门槛时支持拆成 3 栏。tab 数量、名称、顺序和内容必须来自当前会话 / 工单上下文的业务数据，不允许固定写死 3 个静态按钮，也不允许用多个 Card 或 div 手搓三栏替代。',
+      '【拖拽与拆分保留验收】客服工作台生成页必须同时满足：拖动左侧列表边界时 ConversationList 默认列表 / 卡片列表容器实时适配；拖动右侧 InfoDisplayPanel 左边界时信息栏整体宽度变化且 IM 区自动吃剩余空间；拆出 InfoDisplayPanel tab 后，栏间分隔线可继续调节相邻栏宽，且每栏不小于 200px。任一能力缺失都视为没有正确使用客服工作台框架。',
       '【右侧插槽】如业务需要替换右侧主内容，可放 ChatConversationPattern、Table、表单详情或工单处理面板；但客服接待类页面优先保持“IM 对话 + InfoDisplayPanel”的组合，不要用多个普通 Card 临时拼出右侧信息区。',
       '【AI 选型】当 prompt 出现“客服工作台框架 / 客服工作台 / 客服在线工作台 / 在线客服工作台 / 在线 Agent / Agent 工作台 / 基础模式 / 托管模式 / 客服名称在线状态 / 顶部指标工具条”等客服工作台信号时，优先选本页面模板；但本模板右侧主内容仍必须包含 IMConversationPattern 聊天区和 InfoDisplayPanel 信息区。如果只是全局左侧导航，选 NavBar；如果只是会话队列，选 ConversationList；如果只是单条消息，选 ChatMessage / ChatBubble。',
       '【容器语义】本模板自身已经包含浅灰页面底与右侧主白卡，生成页面时不要外层再套 `Card color="grey"`、`bg-surface rounded-xl` 或大白卡 section，否则会形成“灰底 + 大白卡 + 框架”的错误嵌套。',
@@ -89,7 +93,7 @@ export default function CustomerServicePage() {
     /* 该模板本身贴浏览器边缘展示（无外圈圆角），预览容器无需再额外 padding */
     previewPadding: 0,
     components: [
-      'nav-bar', 'form-title', 'tag-bar', 'tabs', 'button', 'icon', 'input', 'select',
+      'nav-bar', 'form-title', 'tag-bar', 'tabs', 'button', 'icon', 'input', 'select', 'card',
       'date-picker', 'tag-input', 'checkbox', 'table', 'tag', 'modal', 'sheet', 'empty', 'full-screen-page',
     ],
     rules: [
@@ -114,9 +118,10 @@ export default function CustomerServicePage() {
       '【全宽撑满铁律（左右大空白专项）】**白卡必须撑满浏览器全宽，main 的 padding 只能是 p-4（16px）**：⛔ 严禁用 `p-2` / `px-6` / `px-8` 当 main 外框间距（常见误区：把白卡内部 padding p-6 错用到 main）；⛔ 严禁在 main 内套 `<div className="max-w-* mx-auto">` 居中容器——这是左右大空白的主因；⛔ 严禁根容器 / main 加 `max-w-screen-xl` / `max-w-7xl` 等收窄值；白卡 div 自身不加 `mx-*` 外边距，靠 `flex-1` 或 `shrink-0 w-[Npx]` 控制宽度。三层间距金字塔：浏览器边→白卡边缘 16px（main p-4）、白卡间距 8px（gap-2）、白卡内 padding 24px（p-6）。详见 LAYOUT_RULES §1.2 / §6.1。',
       '【白卡纯白无描边铁律】**最外层大白卡容器必须是"纯白底 + 12px 圆角 + 无 border + 无 shadow"**：⛔ 严禁在背景为 `var(--color-surface)` 的最外层 div / Card 上加 `border` / `outline` / `ring` / `borderColor` / `border-border-default` 等任何描边；白卡的层级感**唯一靠"灰底 vs 白卡的明度差 + 12px 圆角"**承担，加 border 会让明度差被划线覆盖、视觉权重变硬、气息感丢失。✅ **保留**：白卡**内部**所有 TFDS 组件自带的描边（Input / Select / TagInput / Tag / Tabs line / Table 行线 / 内嵌 grey Card 等——这些是控件功能边界，不是卡片层级边界）。判别口诀：背景色 `--color-surface`（白）→ **禁止** border；背景色 `--color-blueGrey-200`（灰，页面外框）→ **允许** border。详见 GLOBAL_DESIGN_RULES § 5.5。',
       '【Copilot详情页补充】当页面既不是纯入口页，也不是纯消息流页，而是“左侧/中部展示上下文结果，右侧或顶部继续让 AI 协助处理”的混合协作场景，可使用 `CopilotPagePattern`。它适用于“带上下文结果面板的 AI 协同详情页”，但仍不应被误写成纯白卡列表管理页。',
-      '【Tabs 硬约束】主工作区内凡多块互斥内容的面板切换**必须**用基础组件 `<Tabs />`；**卡片内**小模块切换、**内容区顶部**布局级切换**默认优先** `variant="segment"`（分段器）；所有 4 种 Tabs 变体在白卡/内容区/表单分段/筛选维度/Playground 面板内默认尺寸统一为 **SM**（省略 size 或 `size="sm"`），⛔ 禁止内容区默认 `size="md"` / `size="lg"`；只有平台顶部 header / 页面级顶导 Tabs 可按场景使用 MD/LG。禁止 `Button` 排一行或 `Tag` 冒充切换器',
+      '【Tabs 硬约束】主工作区内凡多块互斥内容的面板切换**必须**用基础组件 `<Tabs />`；**卡片内**小模块切换、**内容区顶部**布局级切换**默认优先** `variant="segment"`（分段器）；所有 4 种 Tabs 变体在白卡/内容区/表单分段/筛选维度/Playground 面板内默认尺寸统一为 **SM**（省略 size 或 `size="sm"`），⛔ 禁止内容区默认 `size="md"` / `size="lg"`；只有平台顶部 header / 页面级顶导 Tabs 可按场景使用 MD/LG。Tabs 默认内置横向滚动，父级必须 `min-w-0 max-w-full`，禁止 `w-fit` / `min-w-max` / 固定大宽度导致 Tabs 撑破卡片、侧栏或页面；禁止 `Button` 排一行或 `Tag` 冒充切换器',
       '【模板独立】每个"列表示例"对应一个独立 .jsx 文件（如 VariableManagementPage / McpManagementPage），业务接入直接复制单文件即可',
       '【示例映射（选型入口）】页面示例0=StrategyListPage（树形可展开列表+版本子行+分页）；页面示例1=VariableManagementPage（单白卡：标题/筛选/表格）；页面示例2=McpManagementPage（双白卡：左侧可拖拽辅助大卡 + 右侧弹性主白卡列表，是“横向大卡默认支持宽度拖拽”的标准示例）；页面示例3=TabTopBarListPage（TopBar 胶囊场景切换 + 一级 Tab + 操作组；白卡内“列表+详情面板”联动）；页面示例4=NoAccessPage（空状态+主行动：申请权限）；页面示例5=ConstructionPage（空状态：功能建设中）',
+      '【页面示例3·信息卡片3】TabTopBarListPage 的左侧知识列表条目必须引用业务组件 `Card type="info3"`（信息卡片3），不得在页面内手写重复卡片样式。信息卡片3适用于知识库知识列表、规则列表、策略列表等密集信息场景，结构固定为“标题 + 右上状态 Tag + 描述 + 底部元信息”，圆角固定 12px（rounded-lg）。页面示例3只负责传入 question/answer/status/typeLabel/updatedAt/creator 与 selected/onAction；页面示例3的列表卡片处于白色工作区内，必须显式使用 `color="grey"` 灰色卡片样式；信息卡片3的背景色、描边和 hover 规则必须与其它 Card 分类一致，统一遵守 `color=white/grey` 的背景反衬规则；整卡选中 UI 由 Card 的 `selected` 统一控制，语义是“原本同一条灰色描边变为绿色描边”，禁止新增 ring / outline / 外扩描边，也不允许改写卡片背景色。点击已选卡片收起详情、点击其它卡片切换详情的交互状态仍由页面模板维护。',
       '【关键词→示例】“策略管理/策略列表/版本子行/引用次数/渠道”→示例0；“变量管理/字段变量/流程引用”→示例1；“MCP/工具管理/分类树筛选/左侧标签树”→示例2；“知识库/QA对/文档知识/案例库/右侧详情面板/TopBar胶囊Tab”→示例3；“无权限/申请权限/无访问权限”→示例4；“建设中/敬请期待/开发中”→示例5',
       '【NavBar】通过 navItems 自定义菜单项（id / label / iconName），通过 selectedItemId 高亮当前菜单；菜单 id 与右侧模板一一对应',
       '【列表页结构】标题栏 → 筛选栏 → 表格，垂直 16px 间距，与白卡四边各 24px 边距',
@@ -208,7 +213,7 @@ export default function MyPage({ defaultSelectedItemId = 'example-1' }) {
       '【框架不动】外框灰底 + 左侧 `NavBar` 固定不变；右侧内容区必须 `flex-1 min-w-0 min-h-0 overflow-y-auto overflow-x-hidden`，由右侧内容区作为唯一滚动容器承载整体页面滚动；Hero、ChatInput、筛选行、卡片网格要一起被滑动，禁止只让下方卡片列表单独 `overflow-y-auto`。',
       '【Hero 区】居中欢迎标题 + 最大宽 680px 的 ChatInput 直接坐浅灰底；Hero 主标题使用 `text-4xl leading-10`；默认使用 `ChatInput variant="default"` 作为入口主输入；标准节奏为 `padding: 84px 40px 80px`，标题区较旧版整体上移 36px。标题区副标题与 ChatInput 之间必须保留 48px 间距（比普通标题说明节奏额外增加 24px），保证输入框不贴近标题区。AI 渐变只用于输入框内部 / AI 标识，不作为整块 Hero 白底。',
       '【筛选与分类】分类切换必须用 `Tabs size="sm"`；筛选行 `padding: 16px 40px`，左 Tabs、右搜索。模板/助手搜索框是辅助筛选入口，不是页面主输入，必须固定宽度并自动对齐到页面右侧：可用外层 `<div className="ml-auto shrink-0" style={{ flex: "0 0 240px", width: "240px", minWidth: "240px", maxWidth: "240px" }}>` 包裹 `Input`，也可直接给 `Input` 传 `style={{ flex: "0 0 240px", "--size-input-width": "240px" }}`；`Input` 的 `style` 作用于根容器。Tabs 外层使用 `flex shrink-0` 保持左侧胶囊 Tabs 可见。筛选行容器禁止使用 `flex-wrap`、`justify-between`、`space-y-*`、`flex-col`；禁止让筛选搜索框 `flex-1`、`w-full`、撑满 Tabs 右侧剩余空间，或换到 Tabs 下方单独占一行。',
-      '【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；卡片使用 `Card color="white"`；列表区域作为普通内容块跟随右侧页面整体滚动，使用 `shrink-0` + `padding: 0 40px 40px`，禁止在卡片列表自身设置 `overflow-y-auto` 造成只有卡片区滚动。',
+      '【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；当前列表直接坐浅灰页面底，所以卡片统一使用 `Card color="white"`。通用铁律是：纯白容器里必须改用 `color="grey"`，灰色/浅灰/其他非纯白容器里必须使用 `color="white"`，且这条规则对所有 Card 分类都生效；列表区域作为普通内容块跟随右侧页面整体滚动，使用 `shrink-0` + `padding: 0 40px 40px`，禁止在卡片列表自身设置 `overflow-y-auto` 造成只有卡片区滚动。',
       '【内容可扩展】Tab 项数量和卡片数据替换为业务真实数据；卡片 stats/tags 按业务维度自定义',
     ],
     code: `import NavBar from './components/NavBar';
@@ -284,7 +289,7 @@ export default function ChatHomePage() {
             </div>
           </div>
 
-          {/* 卡片列表：随右侧页面整体滚动，卡片自身是白卡，外层不包白卡 */}
+          {/* 卡片列表：当前直接坐浅灰页面底，所以卡片统一使用白底 Card；若未来改成纯白容器，必须同步切换为 grey 灰底卡 */}
           <div className="shrink-0" style={{ padding: '0 40px 40px' }}>
             <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))' }}>
               {/* 👉 替换为业务卡片数据 */}
@@ -337,14 +342,14 @@ export default function ChatHomePage() {
     id: 'chat-conversation-page',
     name: 'AI 对话页',
     description:
-      '独立的 AI 助手会话详情页：顶导栏（返回 + 标题 + 操作按钮组）+ 800px 居中消息流 + 底部吸底 ChatInput。所有消息（用户 / AI）一律用 ChatMessage 渲染（用户走 role="user"，AI 走 header=true）。支持 phase 切换：默认 chat 阶段展示端到端 mock 对话，点「新会话」清空回到 welcome 欢迎屏（CATCAT 头像 + 推荐 chip）。关键词驱动完整任务流：「整理 / 分析 / 生成」→ 任务规划卡 → 用户点开始 → 流式执行流（每 600ms 推一步） → 同条消息更新为总结+产物+追问。',
+      '独立的 AI 助手会话详情页：顶导栏（返回 + 标题 + 操作按钮组）+ 800px 居中消息流 + 底部吸底 ChatInput。所有消息（用户 / AI）一律用 ChatMessage 渲染（用户走 role="user"，AI 走 header=true）。支持 phase 切换：默认 welcome 阶段直接展示新对话页（CATCAT 头像 + 推荐 chip）；点「新会话」后也回到该欢迎屏。若外部显式传入 initialMessages，则可直接打开已有会话。底部输入框真实发送后自动编排完整 AI 输出链路：用户气泡 → AI 深度思考 → 人工澄清确认卡片 → AI 自动执行流加载/完成 → AI 结论 + 最终产物 + 追问；追问继续追加在同一会话流，并自动继承上一轮账号、环境、Mock、结论和产物上下文。',
     keywords: [
       'AI 对话页', 'AI 会话页', 'AI 对话详情页', 'AI 会话详情', 'AI 助手会话',
       '任务协作页', '资料整理页', '策略分析页', '内容生成追问页', '多轮追问页',
       '消息流', '对话流', '消息列表', '会话面板',
       '吸底 ChatInput', '底部输入', '800px 居中消息流',
       '欢迎屏 CATCAT', '推荐 chip', '新会话',
-      '流式执行', '任务规划卡', '执行流消息', '产物卡 + 追问',
+      '流式执行', '自动编排', '人工澄清确认卡片', '任务规划卡', '执行流消息', '产物卡 + 追问',
       // 错误信号词
       '围绕单一任务持续协作', '持续推进', '消息为主',
       '手搓 AI 对话页', '自制消息流', 'div 模拟聊天',
@@ -356,32 +361,38 @@ export default function ChatHomePage() {
     rules: [
       '【五模板定位】本模板只用于“AI 任务会话 / AI 助手会话”的持续协作页：用户第一步是继续追问、确认规划、查看流式执行、查看 AI 产物卡或 follow-up。若用户还没开始任务，用 `ChatHomePagePattern`；若右侧主产物/主编辑区才是页面主角，AI 只是侧助，用 `CopilotPagePattern`；若是真人客服/私信/站内信回复，用 `IMConversationPattern`；若是管理一批会话/任务列表，用 `BasePageFramePattern`。',
       '【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `chat-conversation`：消息流和底部输入是主工作流，滚动归属消息流；底部 `ChatInput` 固定吸底，不随消息滚动。',
-      '【组件选型门禁】所有消息必须用 `ChatMessage`：用户消息用 `role="user"`，AI 消息用 `header` 并按需要组合 `thinking` / `plan` / `taskGroups` / `resultText` / `resultArtifacts` / `followUps`；底部输入必须用 `ChatInput`；顶部和消息操作用 `Button` + `Icon`；欢迎/空会话态可用 `Empty` 或模板内欢迎屏。禁止用 `ChatBubble`、Card 或裸 div 模拟 AI 消息。',
+      '【组件选型门禁】所有消息必须用 `ChatMessage`：用户消息用 `role="user"`，AI 消息用 `header` 并按需要组合 `thinking` / `plan` / `taskGroups` / `resultText` / `resultArtifacts` / `followUps`；底部输入必须用 `ChatInput`；顶部和消息操作用 `Button` + `Icon`；空会话必须使用模板内置的「新建会话页」，不要退回 `Empty`、空白消息区或自制欢迎卡。禁止用 `ChatBubble`、Card 或裸 div 模拟 AI 消息。',
       '【整体框架】外框灰底（color-blueGrey-200）；不带左侧 NavBar，整页就是一个独立会话工作区；不嵌中间白卡，顶导栏 / 消息区 / ChatInput 三层都直接坐灰底上；业务页面根容器不额外加外圈圆角或描边',
       '【顶导栏】shrink-0，左侧 ghost-black 返回箭头 + 会话标题（truncate），右侧按权重递增：share-07 / 会话详情 outline-black / 更多 dots / 新会话 primary（主操作唯一固定最右）',
+      '【顶导栏图标按钮】顶导栏内所有仅图标操作必须使用 `Button iconOnly tooltip="操作文案"`，hover/focus 时展示 Tooltip，且 tooltip 为字符串时由 Button 自动补 `aria-label`；禁止只传 `aria-label` 或只放 Icon 让用户猜操作。',
       '【布局结构】flex h-full flex-col：① 顶导栏 shrink-0 ② 中部消息区 flex-1 + min-h-0 + overflow-y-auto 独立内滚 ③ ChatInput shrink-0 吸底；不要给中部加白卡背景',
       '【宽度规格】对话流和 ChatInput 都用 800px + mx-auto 居中；对话流相对 ChatInput 左右各缩进 12px（消息区 padding "0 20px"，ChatInput padding "0 8px"），让消息看起来比输入框窄一圈',
       '【消息组件统一】所有消息（用户 / AI）一律用 ChatMessage 渲染。用户消息 role="user" + userContent / userAttachments；AI 消息 header=true + 任意组合 thinking / leadText / plan / taskGroups / resultText / resultArtifacts / followUps。禁止用 ChatBubble 渲染 AI 回复',
       '【消息间距】flex-col gap-2（8px），符合现代 AI 对话的紧凑节奏',
       '【操作栏 historyMode】只有最后一条消息 historyMode=false（常显），其余消息 historyMode=true（hover 才显示，占位高度始终保留）；待用户处理的交互卡片（plan / confirms）未操作时整条消息不显示操作栏，处理后才变成历史消息走 historyMode 规则',
-      '【流式执行流】用 useStreamingTaskGroups(taskGroups, { intervalMs: 600 }) 把最终态 taskGroups 转成"按 600ms 节奏一步步推出"的切片：当前组 status=processing 带扫光，每过一格推一个 step，本组 step 出齐后切到下一组首步；流式期间整条 AI 消息不显示操作栏（actions=null）',
-      '【任务规划链路】关键词触发 → AI 推送 ai-task-plan 消息（leadText "我开始规划啦..." + 任务规划卡）→ 卡片有「取消」+「开始执行任务」两个按钮 → 用户点「开始执行任务」：1) 卡片变 confirmed 置灰 2) 追加用户消息「开始执行任务」3) 追加流式执行流消息（stream=true，无操作栏） 4) totalSteps×600ms 后更新同条消息：stream=false + taskGroups 全部 completed + 补上总结 resultText / resultArtifacts / followUps',
-      '【取消链路】用户点任务规划卡的「取消」：1) 卡片变 confirmed 置灰 2) 追加用户消息「取消」 3) 600ms 后追加 AI 短答寒暄（"已取消任务，还有其他问题随时找我～"）',
-      '【追问交互】followUps 字符串数组在父组件 wrap 成 { items, onSelect: onSend } 形式，点击 chip 必须等价于立即发送该文本：先追加一条右侧 user 气泡，再由 AI 追加对应的新答复 / 产物 / 下一组 followUps；不要只回填输入框等待用户二次发送',
-      '【自动滚底】用 ResizeObserver 监听消息列表 firstElementChild 的高度变化，任何高度增长都 scrollTo({ top: scrollHeight, behavior: smooth })；覆盖新消息追加 / 流式 step / 折叠展开 三种触发场景，比单独 useEffect([messages]) 更稳',
-      '【欢迎屏】点「新会话」→ phase 切到 welcome：清空 messages，中部居中展示 CATCAT 头像（66px 渐变描边圆 + 蓝色投影 + 32px catcat.svg）+「OLA AI」标题 + 欢迎语 + 3 条推荐 chip（白底 0.6 透明 + inset 1px 白边 + 右箭头）；ChatInput 仍 shrink-0 吸底（位置和 chat 阶段保持一致），placeholder 改成"需要我为你做什么…"；用户在欢迎屏发送或点 chip → phase 自动切回 chat 走完整链路',
-      '【关键词路由】① 含「整理 / 分析 / 生成 / 梳理 / 输出 / 汇总」→ 任务规划卡链路（待用户点开始/取消） ② 含「停止 / 取消」→ AI 短答「已停止当前任务，需要时再叫我。」 ③ 其他 → AI 短答从备选句池随机一句，避免机械化',
+      '【流式执行流】用 useStreamingTaskGroups(taskGroups, { intervalMs: 600 }) 把最终态 taskGroups 转成"按 600ms 节奏一步步推出"的切片：当前组 status=processing 带扫光，每过一格推一个 step，本组 step 出齐后切到下一组首步；流式期间整条 AI 消息不显示操作栏（actions=null），完成后同一条消息更新为 stream=false + taskGroups 全部 completed + resultText / resultArtifacts / followUps。',
+      '【自动编排链路（强约束）】底部 ChatInput 或 followUps 发送任意有效文本后，必须立即追加右侧 user 气泡，并自动按时间推进：1) AI 深度思考中 2) AI 深度思考完成并说明已理解上下文 3) 若出现卡片型节点则按“统一人工闸门”规则判断是否暂停 4) 展示 AI 自动执行流加载状态（ai-flow stream=true）5) 执行流加载完成（stream=false + completed）6) 展示 AI 结论、最终产物 resultArtifacts 和下一组追问 followUps。禁止只回复一条静态短文本。',
+      '【统一人工闸门（强约束）】任务规划卡、澄清确认卡片、配置表单等卡片型节点，只要右下角存在可操作按钮，尤其是黑色主按钮（如“确认执行 / 确认提交 / 确认并继续 / 开始执行任务”），就必须暂停后续模拟链路；只有用户真实点击该主按钮后，才能恢复并继续执行下一段流程。不得在按钮未点击前自动跳过到执行流或最终结果。',
+      '【内容型卡片不暂停】如果卡片型节点仅用于展示内容，没有右下角可操作按钮，或没有可触发继续执行的主按钮，则该节点视为 AI 自动输出内容的一部分，不需要停下来等待人工确认，应继续自动推进后续链路。',
+      '【人工澄清确认卡片】AI 对话页的人工澄清确认必须复用 `ChatMessage` 的 `confirms` 能力，默认使用 `mode="form-card"`（澄清确认卡片2）样式：灰色外层确认容器 + 白色表单面板 + 业务场景 / 处理渠道 / 补充说明三段纵向表单 + 右下角黑色主按钮。不得在本模板中改回 option-card 单选列表或手写 Card/div 模拟澄清卡片；当 confirms 卡片存在右下角主按钮时，必须进入人工闸门暂停；当 confirms 仅展示信息且无按钮时，可自动继续后续执行。',
+      '【同会话上下文继承规则】同一会话内用户继续追问时，系统规则必须自动带上上一轮上下文：账号 account、环境 environment、Mock 数据说明 mock、上一轮结论 conclusion、上一轮产物 artifacts；这些上下文不需要用户重复输入，也不能因为点击 followUps 或底部继续输入而丢失。实现上建议维护 conversationContextRef / conversationContext 状态，每轮完成时回写本轮结论和产物，下一轮 thinking 与执行 payload 从该上下文读取。',
+      '【追问交互】followUps 字符串数组在父组件 wrap 成 { items, onSelect: onSend } 形式，点击 chip 必须等价于立即发送该文本：先追加一条右侧 user 气泡，再进入同一套自动编排链路（深度思考 → 卡片节点按是否有按钮决定暂停/自动继续 → 执行流 → 结论/产物/追问）；不要只回填输入框等待用户二次发送，不要新开会话或替换历史消息。',
+      '【自动滚底与最新锚点】用 ResizeObserver 监听消息列表 firstElementChild 的高度变化，并在消息列表底部放置 latestAnchorRef；任何高度增长、阶段推进、流式 step、折叠展开都必须 `scrollIntoView({ block: "end", behavior: "smooth" })` 或 scrollTo bottom，保证 AI 输出过程中最新 thinking / confirm / execution / result 始终出现在可视会话流区域。',
+      '【新建会话页 = 空对话唯一标准态】只要当前会话没有消息（初次进入空会话、外部传入 `messages=[]`、或用户点击「新会话」清空消息），都必须展示统一的新建会话页：中部居中展示 CATCAT 头像（66px 渐变描边圆 + 蓝色投影 + 32px catcat.svg）+「OLA AI」标题 + 欢迎语 + 3 条推荐 chip（白底 0.6 透明 + inset 1px 白边 + 右箭头）；底部 `ChatInput` 仍 shrink-0 吸底，placeholder 固定为"需要我为你做什么…"；禁止出现空白消息区、默认 mock 对话残留或与图示不一致的空状态。',
+      '【关键词路由】① 含「整理 / 分析 / 生成 / 梳理 / 输出 / 汇总」→ 自动编排任务链路 ② 命中 followUps 文案 → 自动编排追问链路，并输出对应结论/产物/下一组追问 ③ 含「停止 / 取消」→ AI 短答「已停止当前任务，需要时再叫我。」并停止后续定时器 ④ 其他有效输入 → 仍进入自动编排链路，基于通用 mock 输出结果，避免对话页退化成普通问答短答。',
       '【任务规划卡 defaultConfirmed】历史消息（mock 中的已处理卡片）通过 plan.defaultConfirmed=true 让卡片初始就处于禁用置灰态；TaskPlanCard 内部用 useState(plan.defaultConfirmed === true) 初始化 confirmed，并用 useEffect 同步 props 变化',
     ],
-    code: `// 见 ChatConversationPattern.jsx —— 完整可交互的会话页骨架（含欢迎屏 / 流式执行 / 取消链路）
+    code: `// 见 ChatConversationPattern.jsx —— 完整可交互的会话页骨架（含欢迎屏 / 自动编排 / 流式执行 / 追问上下文继承）
 // 关键拼装（全部消息走 ChatMessage，无 ChatBubble）：
 //   用户消息:    <ChatMessage role="user" userContent={[{type:"text",value:"..."}, {type:"entity",label:"..."}]} userAttachments={[...]} />
-//   AI 思考+卡:  <ChatMessage header thinking={...} leadText="我开始规划啦..." plan={{...DEFAULT_CHAT_PLAN, defaultConfirmed:true, onPrimaryAction, onSecondaryAction}} />
-//   AI 流式:     <StreamingChatMessage taskGroups={DEFAULT_CHAT_TASK_GROUPS} />  // 内部 useStreamingTaskGroups
+//   AI 思考:     <ChatMessage header thinking={{state:"thinking"|"completed", ...}} />
+//   澄清确认:    <ChatMessage header leadText="请确认..." confirms={[...DEFAULT_CHAT_FORM_CONFIRM]} />  // mode="form-card"（澄清确认卡片2）
+//   AI 流式:     <StreamingChatMessage taskGroups={DEFAULT_CHAT_TASK_GROUPS} />  // 内部 useStreamingTaskGroups，stream=true 时展示加载态
 //   AI 完整态:   <ChatMessage header taskGroups={...} resultText={...} resultArtifacts={...} followUps={{items, onSelect:onSend}} actions={{historyMode:false}} />
-//   底部输入:    <ChatInput onSend={handleSend} />  // handleSend 路由：任务/停止/兜底短答
+//   底部输入:    <ChatInput onSend={handleSend} />  // handleSend 路由：用户气泡 → thinking → confirms → ai-flow → resultArtifacts → followUps
+//   上下文继承:  conversationContextRef 每轮回写 account/environment/mock/conclusion/artifacts，下一轮追问自动读取
 // phase 切换: 'chat'（默认）<-> 'welcome'（点新会话）
-// 自动滚底: ResizeObserver 监听内容高度变化，任意增长 → scrollTo bottom smooth`,
+// 自动滚底: ResizeObserver + latestAnchorRef，任意增长 / 阶段推进 / 流式输出 → scrollIntoView bottom smooth`,
   },
   {
     id: 'im-conversation-page',