@orbit-work/ui 0.1.0

package/src/components/composite/AskQuestionCardView/AskQuestionCardView.stories.tsx

@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { AskQuestionCardView } from "./index"
+
+const meta = {
+  title: "Composite/AskQuestionCardView",
+  component: AskQuestionCardView,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AskQuestionCardView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const PendingSingleQuestion: Story = {
+  args: {
+    prompt: "Orbitwork 需要了解一些细节",
+    status: "pending",
+    questionCount: 1,
+  },
+}
+
+export const PendingMultipleQuestions: Story = {
+  args: {
+    prompt: "Orbitwork 需要了解一些细节",
+    status: "pending",
+    questionCount: 3,
+  },
+}
+
+export const PendingManyQuestions: Story = {
+  args: {
+    prompt: "请回答以下问题以便更好地实现功能",
+    status: "pending",
+    questionCount: 5,
+  },
+}
+
+export const Skipped: Story = {
+  args: {
+    prompt: "",
+    status: "skipped",
+  },
+}
+
+export const SubmittedNoRecap: Story = {
+  args: {
+    prompt: "",
+    status: "submitted",
+    recap: [],
+  },
+}
+
+export const SubmittedWithRecap: Story = {
+  args: {
+    prompt: "",
+    status: "submitted",
+    recap: [
+      { q: "你希望使用哪种设计风格？", a: "现代简约风格" },
+      { q: "需要支持深色模式吗？", a: "是的，需要支持" },
+      { q: "目标用户群体是？", a: "专业开发者" },
+    ],
+  },
+}
+
+export const SubmittedLongAnswers: Story = {
+  args: {
+    prompt: "",
+    status: "submitted",
+    recap: [
+      {
+        q: "请描述你的项目需求",
+        a: "我需要构建一个企业级的项目管理系统，包含任务跟踪、团队协作、文档管理等核心功能。系统需要支持多租户架构，并且要有完善的权限控制。",
+      },
+      {
+        q: "技术栈偏好？",
+        a: "React + TypeScript + Node.js，使用 PostgreSQL 数据库，部署在 AWS 上",
+      },
+    ],
+  },
+}
+
+export const SubmittedSingleItem: Story = {
+  args: {
+    prompt: "",
+    status: "submitted",
+    recap: [{ q: "选择 UI 框架", a: "Ant Design" }],
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, width: 600 }}>
+      <AskQuestionCardView prompt="Orbitwork 需要了解一些细节" status="pending" questionCount={3} />
+      <AskQuestionCardView
+        prompt=""
+        status="submitted"
+        recap={[
+          { q: "使用什么框架？", a: "React" },
+          { q: "是否需要 TypeScript？", a: "是的" },
+        ]}
+      />
+      <AskQuestionCardView prompt="" status="skipped" />
+    </div>
+  ),
+}
+
+export const ConversationFlow: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24, width: 600 }}>
+      <div style={{ padding: 16, background: "var(--ow-surface)", borderRadius: 8 }}>
+        <p style={{ margin: 0, fontSize: 14, color: "var(--ow-text-2)" }}>用户：帮我创建一个博客系统</p>
+      </div>
+      <AskQuestionCardView prompt="Orbitwork 需要了解一些细节以便更好地实现" status="pending" questionCount={4} />
+      <div
+        style={{
+          padding: 16,
+          background: "var(--ow-surface-2)",
+          borderRadius: 8,
+          border: "1px solid var(--ow-border)",
+        }}
+      >
+        <p style={{ margin: 0, fontSize: 13, color: "var(--ow-text-3)" }}>↓ 用户在输入框中回答问题</p>
+      </div>
+    </div>
+  ),
+}
+
+// ── DS2 P5-5：按钮组走 Button 原语（传 onAnswer/onSkip 时取代行尾箭头）────────
+export const PendingWithActions: Story = {
+  args: {
+    prompt: "Orbitwork 需要了解一些细节",
+    status: "pending",
+    questionCount: 3,
+    onAnswer: () => console.log("answer"),
+    onSkip: () => console.log("skip"),
+  },
+}
+
+export const PendingAnswerOnly: Story = {
+  args: {
+    prompt: "还差一个信息就能开工",
+    status: "pending",
+    questionCount: 1,
+    onAnswer: () => console.log("answer"),
+  },
+}
+
+// 无回调时保持原样：行尾静态箭头指向下方输入区
+export const PendingArrowFallback: Story = {
+  args: {
+    prompt: "Orbitwork 需要了解一些细节",
+    status: "pending",
+    questionCount: 12,
+  },
+}
+
+// ── §6 三态成行对照 ──────────────────────────────────────────────────────────
+export const StateMatrix: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <AskQuestionCardView prompt="Orbitwork 需要了解一些细节" status="pending" questionCount={3} />
+      <AskQuestionCardView
+        prompt="Orbitwork 需要了解一些细节"
+        status="submitted"
+        recap={[
+          { q: "这个页面给谁用？", a: "内部运营同事，每天开一次。" },
+          { q: "有没有现成的数据源？", a: "有，走内部的 metrics 接口。" },
+        ]}
+      />
+      <AskQuestionCardView prompt="Orbitwork 需要了解一些细节" status="skipped" />
+    </div>
+  ),
+}

package/src/components/composite/AskQuestionCardView/AskQuestionCardViewSource.test.mjs

@@ -0,0 +1,92 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const styles = await readFile(new URL("../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+
+test("submitted question recaps stack each question above its answer", () => {
+  assert.match(
+    styles,
+    /\.clarify__recap \.cr-row \{[^}]*display: flex;[^}]*flex-direction: column;[^}]*gap: var\(--ow-space-1, 4px\);/,
+  )
+  assert.match(
+    styles,
+    /\.clarify__recap \.cq,\s*\.clarify__recap \.ca \{[^}]*width: 100%;[^}]*min-width: 0;[^}]*overflow-wrap: anywhere;/,
+  )
+  assert.doesNotMatch(styles, /\.clarify__recap \.cq \{[^}]*min-width: 150px;/)
+  assert.doesNotMatch(styles, /\.clarify \{[^}]*container-type:/)
+})
+
+test("submitted answers are clamped to three lines", () => {
+  assert.match(
+    styles,
+    /\.clarify__recap \.ca \{[^}]*display: -webkit-box;[^}]*overflow: hidden;[^}]*-webkit-box-orient: vertical;[^}]*-webkit-line-clamp: 3;[^}]*line-clamp: 3;[^}]*text-overflow: ellipsis;/,
+  )
+})
+
+// ── DS2 P5-5 归口锁 ──────────────────────────────────────────────────────────
+test("ask-question cards sit on the ground: surface + 1px border + r12, no shadow", () => {
+  assert.match(
+    styles,
+    /\.io-leadin \{[^}]*background: var\(--ow-surface\);[^}]*border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);[^}]*border-radius: var\(--ow-radius-card\);/s,
+  )
+  assert.doesNotMatch(styles, /\.io-leadin \{[^}]*box-shadow:/s)
+  assert.match(
+    styles,
+    /\.clarify \{[^}]*background: var\(--ow-surface\); border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);[^}]*border-radius: var\(--ow-radius-card\);/s,
+  )
+  assert.doesNotMatch(styles, /\.clarify \{[^}]*box-shadow:/s)
+  assert.doesNotMatch(styles, /\.clarify--done \{ box-shadow: none; \}/)
+})
+
+test("pending action group goes through the Button primitive, arrow stays the no-action fallback", () => {
+  assert.match(source, /import \{ Button \} from ["']\.\.\/\.\.\/primitives["']/)
+  assert.match(source, /const hasActions = onAnswer != null \|\| onSkip != null/)
+  assert.match(source, /hasActions \? \([\s\S]*className="io-leadin__acts"/)
+  assert.match(source, /<Button variant="primary" size="sm" onClick=\{onAnswer\}>/)
+  assert.match(source, /<Button variant="ghost" size="sm" onClick=\{onSkip\}>/)
+  assert.match(source, /<ArrowDown className="io-arrow" \/>/)
+  assert.match(
+    styles,
+    /\.io-leadin__acts,\s*\.clarify__acts \{[^}]*display: flex;[^}]*gap: var\(--ow-space-2, 8px\); flex-shrink: 0;/s,
+  )
+})
+
+test("question count is a readout: mono + tabular-nums", () => {
+  assert.match(source, /<span className="ow-font-mono">\{questionCount\}<\/span>/)
+})
+
+// ── W5 终扫 ────────────────────────────────────────────────────────────────
+// §7 图标色只取 text/text-2/text-3，功能色只在状态语境；引导箭头不是状态，
+// 原来取 --ow-info，是卡上最抢眼的一笔。状态语义由左侧 info tint 图标位承担。
+test("lead-in arrow is a neutral text-3 glyph, not a functional-blue accent", () => {
+  assert.match(styles, /\.io-leadin \.io-arrow \{[^}]*color: var\(--ow-text-3\);/s)
+  assert.doesNotMatch(styles, /\.io-leadin \.io-arrow \{[^}]*color: var\(--ow-info\);/s)
+})
+
+// 统一卡骨架：容器 14px 内距。15/18px 是 V1 遗留裸值。
+test("clarify/lead-in container padding lands on the 14px card skeleton", () => {
+  assert.match(styles, /\.io-leadin \{[^}]*padding: var\(--ow-space-3, 12px\) 14px;/s)
+  assert.match(styles, /\.clarify__head \{[^}]*padding: var\(--ow-space-4, 16px\) 14px;/s)
+  assert.match(styles, /\.clarify__recap \{ padding: 0 14px var\(--ow-space-4, 16px\);/)
+  assert.match(styles, /\.clarify__acts \{ padding: 0 14px var\(--ow-space-4, 16px\); \}/)
+  for (const sel of [
+    /\.io-leadin \{[^}]*padding:[^;]*15px/s,
+    /\.clarify__head \{[^}]*padding:[^;]*18px/s,
+    /\.clarify__recap \{ padding: 0 18px/,
+    /\.clarify__acts \{ padding: 0 18px/,
+  ]) {
+    assert.doesNotMatch(styles, sel)
+  }
+})
+
+// 研发意图（9.2 批次）：skipped 图标底色改为随主题走的语义 token，别再钉 --ow-n-100。
+// DS2 侧同一条规则用 --ow-surface-2 / --ow-text-3 表达同一意图，断言两套语义名都放行。
+test("skipped question icon uses a theme-aware background", () => {
+  assert.match(
+    styles,
+    /\.clarify--skipped \.clarify__head \.ic \{[^}]*background: var\(--ow-(?:bg-3|surface-2)\);[^}]*color: var\(--ow-(?:fg-3|text-3)\);/,
+  )
+  assert.doesNotMatch(styles, /\.clarify--skipped \.clarify__head \.ic \{[^}]*background: var\(--ow-n-100\);/)
+})

package/src/components/composite/AskQuestionCardView/index.tsx

@@ -0,0 +1,119 @@
+import { Button } from "../../primitives"
+import { ArrowDown, Check, ClipboardList, Close } from "../Icons"
+
+export interface AskQuestionRecapItem {
+  q: string
+  a: string
+}
+
+export interface AskQuestionCardViewProps {
+  prompt: string
+  status?: "pending" | "submitted" | "skipped"
+  questionCount?: number
+  recap?: AskQuestionRecapItem[]
+  /** 待答态主动作；传入后行尾箭头换成 Button 原语按钮组（§6 交互态全由原语承担） */
+  onAnswer?: () => void
+  /** 待答态次动作：跳过提问 */
+  onSkip?: () => void
+  answerLabel?: string
+  skipLabel?: string
+}
+
+/**
+ * AskQuestionCardView — 转录内的「模型向你提问」卡（DS2 P5-5 归口）。
+ *
+ * 立面：贴地卡＝surface ＋ 1px --ow-border ＋ r12，0 影（样式在 desktop-surfaces.css
+ * 的 .io-leadin / .clarify 段）。三态 pending / submitted / skipped 各自成形：
+ * 图标形状＋文案先行，颜色只作第二编码（R1）。中性件，不引信标（R3）。
+ * 题数为读数，走 .ow-font-mono（mono ＋ tabular-nums，§7）。
+ */
+export function AskQuestionCardView({
+  prompt,
+  status = "pending",
+  questionCount = 1,
+  recap = [],
+  onAnswer,
+  onSkip,
+  answerLabel = "去回答",
+  skipLabel = "跳过",
+}: AskQuestionCardViewProps) {
+  if (status === "skipped") {
+    return (
+      <div className="clarify clarify--done clarify--skipped">
+        <div className="clarify__head">
+          <span className="ic">
+            <Close />
+          </span>
+          <div className="hd-meta">
+            <span className="t">已跳过提问</span>
+            <span className="s">你可以在下方输入框直接描述需求</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (status === "submitted") {
+    return (
+      <div className="clarify clarify--done">
+        <div className="clarify__head">
+          <span className="ic">
+            <Check />
+          </span>
+          <div className="hd-meta">
+            <span className="t">已确认需求</span>
+            <span className="s">Orbitwork 将据此制定计划</span>
+          </div>
+        </div>
+        {recap.length > 0 && (
+          <div className="clarify__recap">
+            {recap.map((row, index) => (
+              <div key={index} className="cr-row">
+                <span className="cq">{row.q}</span>
+                <span className="ca">{row.a}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const hasActions = onAnswer != null || onSkip != null
+
+  return (
+    <div className="io-leadin io-leadin--ask">
+      <span className="io-ic ask">
+        <ClipboardList />
+      </span>
+      <div className="io-meta">
+        <span className="t">{prompt}</span>
+        <span className="s">
+          {questionCount > 1 ? (
+            <>
+              请在下方对话框逐题回答 · 共 <span className="ow-font-mono">{questionCount}</span> 题
+            </>
+          ) : (
+            "请在下方对话框回答"
+          )}
+        </span>
+      </div>
+      {hasActions ? (
+        <div className="io-leadin__acts">
+          {onAnswer && (
+            <Button variant="primary" size="sm" onClick={onAnswer}>
+              {answerLabel}
+            </Button>
+          )}
+          {onSkip && (
+            <Button variant="ghost" size="sm" onClick={onSkip}>
+              {skipLabel}
+            </Button>
+          )}
+        </div>
+      ) : (
+        <ArrowDown className="io-arrow" />
+      )}
+    </div>
+  )
+}

package/src/components/composite/AssistantChannelCard/AssistantChannelCard.stories.tsx

@@ -0,0 +1,265 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { AssistantChannelCard } from "./index"
+
+const meta = {
+  title: "Composite/AssistantChannelCard",
+  component: AssistantChannelCard,
+  parameters: { layout: "padded" },
+  args: {
+    onConfigure: () => console.log("Configure clicked"),
+    onToggle: () => console.log("Toggle clicked"),
+  },
+} satisfies Meta<typeof AssistantChannelCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DingTalkDisconnected: Story = {
+  args: {
+    platform: "dingtalk",
+    connected: false,
+    enabled: false,
+  },
+}
+
+export const DingTalkConnectedEnabled: Story = {
+  args: {
+    platform: "dingtalk",
+    connected: true,
+    enabled: true,
+  },
+}
+
+export const DingTalkConnectedDisabled: Story = {
+  args: {
+    platform: "dingtalk",
+    connected: true,
+    enabled: false,
+  },
+}
+
+export const FeishuDisconnected: Story = {
+  args: {
+    platform: "feishu",
+    connected: false,
+    enabled: false,
+  },
+}
+
+export const FeishuConnectedEnabled: Story = {
+  args: {
+    platform: "feishu",
+    connected: true,
+    enabled: true,
+  },
+}
+
+export const FeishuConnectedDisabled: Story = {
+  args: {
+    platform: "feishu",
+    connected: true,
+    enabled: false,
+  },
+}
+
+export const WeComDisconnected: Story = {
+  args: {
+    platform: "wecom",
+    connected: false,
+    enabled: false,
+  },
+}
+
+export const WeComConnectedEnabled: Story = {
+  args: {
+    platform: "wecom",
+    connected: true,
+    enabled: true,
+  },
+}
+
+export const WeComConnectedDisabled: Story = {
+  args: {
+    platform: "wecom",
+    connected: true,
+    enabled: false,
+  },
+}
+
+export const LoadingState: Story = {
+  args: {
+    platform: "dingtalk",
+    connected: true,
+    enabled: true,
+    loading: true,
+  },
+}
+
+export const BusyState: Story = {
+  args: {
+    platform: "feishu",
+    connected: true,
+    enabled: true,
+    busy: true,
+  },
+}
+
+export const DisconnectedNoToggle: Story = {
+  args: {
+    platform: "dingtalk",
+    connected: false,
+    enabled: false,
+    onToggle: undefined,
+  },
+}
+
+export const ConnectedNoToggle: Story = {
+  args: {
+    platform: "wecom",
+    connected: true,
+    enabled: true,
+    onToggle: undefined,
+  },
+}
+
+export const LoadingAndBusy: Story = {
+  args: {
+    platform: "feishu",
+    connected: true,
+    enabled: false,
+    loading: true,
+    busy: true,
+  },
+}
+
+export const AllPlatformsDisconnected: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <AssistantChannelCard
+        platform="dingtalk"
+        connected={false}
+        enabled={false}
+        onConfigure={() => console.log("DingTalk configure")}
+      />
+      <AssistantChannelCard
+        platform="feishu"
+        connected={false}
+        enabled={false}
+        onConfigure={() => console.log("Feishu configure")}
+      />
+      <AssistantChannelCard
+        platform="wecom"
+        connected={false}
+        enabled={false}
+        onConfigure={() => console.log("WeCom configure")}
+      />
+    </div>
+  ),
+}
+
+export const AllPlatformsConnected: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <AssistantChannelCard
+        platform="dingtalk"
+        connected={true}
+        enabled={true}
+        onConfigure={() => console.log("DingTalk configure")}
+        onToggle={() => console.log("DingTalk toggle")}
+      />
+      <AssistantChannelCard
+        platform="feishu"
+        connected={true}
+        enabled={true}
+        onConfigure={() => console.log("Feishu configure")}
+        onToggle={() => console.log("Feishu toggle")}
+      />
+      <AssistantChannelCard
+        platform="wecom"
+        connected={true}
+        enabled={true}
+        onConfigure={() => console.log("WeCom configure")}
+        onToggle={() => console.log("WeCom toggle")}
+      />
+    </div>
+  ),
+}
+
+export const MixedStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <AssistantChannelCard
+        platform="dingtalk"
+        connected={true}
+        enabled={true}
+        onConfigure={() => console.log("DingTalk configure")}
+        onToggle={() => console.log("DingTalk toggle")}
+      />
+      <AssistantChannelCard
+        platform="feishu"
+        connected={true}
+        enabled={false}
+        onConfigure={() => console.log("Feishu configure")}
+        onToggle={() => console.log("Feishu toggle")}
+      />
+      <AssistantChannelCard
+        platform="wecom"
+        connected={false}
+        enabled={false}
+        onConfigure={() => console.log("WeCom configure")}
+      />
+    </div>
+  ),
+}
+
+export const LoadingScenarios: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <AssistantChannelCard
+        platform="dingtalk"
+        connected={false}
+        enabled={false}
+        loading={true}
+        onConfigure={() => console.log("DingTalk configure")}
+      />
+      <AssistantChannelCard
+        platform="feishu"
+        connected={true}
+        enabled={true}
+        busy={true}
+        onConfigure={() => console.log("Feishu configure")}
+        onToggle={() => console.log("Feishu toggle")}
+      />
+      <AssistantChannelCard
+        platform="wecom"
+        connected={true}
+        enabled={false}
+        loading={true}
+        busy={true}
+        onConfigure={() => console.log("WeCom configure")}
+        onToggle={() => console.log("WeCom toggle")}
+      />
+    </div>
+  ),
+}
+
+export const OnlyConfigureButton: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <AssistantChannelCard
+        platform="dingtalk"
+        connected={false}
+        enabled={false}
+        onConfigure={() => console.log("DingTalk configure")}
+        onToggle={undefined}
+      />
+      <AssistantChannelCard
+        platform="feishu"
+        connected={true}
+        enabled={true}
+        onConfigure={() => console.log("Feishu configure")}
+        onToggle={undefined}
+      />
+    </div>
+  ),
+}

package/src/components/composite/AssistantChannelCard/AssistantChannelCardSource.test.mjs

@@ -0,0 +1,45 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const styles = await readFile(new URL("../../../../styles/assistant-settings.css", import.meta.url), "utf8")
+
+test("channel card sits on the Card/Button/Switch bases, not hand-rolled chrome", () => {
+  assert.match(source, /import \{ Badge, Button, Card, Switch \} from "\.\.\/\.\.\/primitives"/)
+  assert.match(source, /<Card>/)
+  assert.match(source, /<Button variant="secondary"/)
+  // 加载态＝基座转子（R1 形编码），不是把钮灰掉。
+  assert.match(source, /loading=\{loading\}/)
+})
+
+test("card skeleton uses the unified slot grammar (container 14 / field 8)", () => {
+  // 容器 14 来自 Card 体槽（px-3.5）；卡内字段槽 8；头部图标槽 12（ListRow 家族口径）。
+  assert.match(source, /const HEAD_CLASS = "flex items-center gap-3 /)
+  assert.match(source, /const TITLE_ROW_CLASS = "assistant-card__title-row flex items-center gap-2 /)
+  assert.match(source, /const ACTIONS_CLASS = "assistant-actions shrink-0 flex items-center justify-end gap-2 /)
+  assert.match(source, /const MAIN_CLASS = "assistant-card__main flex-1 min-w-0 flex flex-col gap-1"/)
+})
+
+test("no bare literals in the component — type ramp and colors go through tokens", () => {
+  assert.match(source, /text-ow-fs-title-sm/)
+  assert.match(source, /text-ow-fs-caption/)
+  assert.match(source, /text-ow-text\b/)
+  assert.match(source, /text-ow-text-3/)
+  // 无裸 px / 裸字重 / 裸色（§2）。
+  assert.doesNotMatch(source, /\b1[0-9]px\b/)
+  assert.doesNotMatch(source, /font-\[?[0-9]{3}\]?/)
+  assert.doesNotMatch(source, /#[0-9a-fA-F]{3,8}\b/)
+  // §7 图标档 16/20/24：平台标落 24。
+  assert.match(source, /const ICON_CLASS = "assistant-card__icon shrink-0 w-6 h-6"/)
+})
+
+test("BEM hooks stay in the DOM but no longer carry geometry from the stylesheet", () => {
+  // apps/desktop e2e 用 .assistant-card__title 定位，钩子必须还在。
+  for (const hook of ["assistant-card__head", "assistant-card__title", "assistant-card__desc", "assistant-actions"]) {
+    assert.match(source, new RegExp(hook))
+  }
+  // 样式表里这些选择器已退场，否则非 layer 规则会压掉组件的 Tailwind utilities。
+  assert.doesNotMatch(styles, /^\.assistant-card__/m)
+  assert.doesNotMatch(styles, /^\.assistant-actions\b/m)
+})