@orbit-work/ui 0.1.0

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

@@ -0,0 +1,115 @@
+"use client"
+
+import { useState } from "react"
+import { cn } from "../../../lib/utils"
+import { Button, Field } from "../../primitives"
+import { Dialog } from "../Dialog"
+import { Check } from "../Icons"
+
+export type MessageFeedbackReasonCode =
+  | "misunderstanding"
+  | "wrong_context"
+  | "unclear"
+  | "code_error"
+  | "unprofessional"
+  | "code_format"
+  | "other"
+
+export interface MessageFeedbackSubmission {
+  reasons: MessageFeedbackReasonCode[]
+  detail: string
+}
+
+export interface MessageFeedbackDialogProps {
+  onClose: () => void
+  onSubmit: (submission: MessageFeedbackSubmission) => void
+  /** 产品名（品牌文案「帮助改进 {productName}」）；缺省 "Orbitwork" */
+  productName?: string
+}
+
+const FEEDBACK_REASONS: Array<{ code: MessageFeedbackReasonCode; label: string }> = [
+  { code: "misunderstanding", label: "理解错误" },
+  { code: "wrong_context", label: "上下文错误" },
+  { code: "unclear", label: "回答不清晰" },
+  { code: "code_error", label: "代码错误" },
+  { code: "unprofessional", label: "回答不专业" },
+  { code: "code_format", label: "代码格式错误" },
+  { code: "other", label: "其他" },
+]
+
+/** 消息负反馈 —— 坐在统一 Dialog 基座上（遮罩/立面/z/焦点由基座提供）。 */
+export function MessageFeedbackDialog({ onClose, onSubmit, productName = "Orbitwork" }: MessageFeedbackDialogProps) {
+  const [selected, setSelected] = useState<Set<MessageFeedbackReasonCode>>(new Set())
+  const [detail, setDetail] = useState("")
+
+  const toggleReason = (code: MessageFeedbackReasonCode) => {
+    setSelected((current) => {
+      const next = new Set(current)
+      if (next.has(code)) next.delete(code)
+      else next.add(code)
+      return next
+    })
+  }
+
+  const submit = () => {
+    if (selected.size === 0) return
+    onSubmit({ reasons: [...selected], detail: detail.trim() })
+  }
+
+  return (
+    <Dialog
+      open
+      width={500}
+      title="请选择不满意的原因"
+      onClose={onClose}
+      actions={
+        <Button variant="primary" size="lg" className="w-full" disabled={selected.size === 0} onClick={submit}>
+          提交反馈
+        </Button>
+      }
+    >
+      {/* 字段缝走 space 档（4/6/8/12/16/20/24）；原为 gap-[18px]，18 不在档上。 */}
+      <div className="flex flex-col gap-5">
+        <div data-ow-part="reasons" className="flex flex-wrap gap-2.5" role="group" aria-label="不满意的原因">
+          {FEEDBACK_REASONS.map(({ code, label }) => {
+            const on = selected.has(code)
+            return (
+              <Button
+                key={code}
+                type="button"
+                variant="secondary"
+                size="md"
+                aria-pressed={on}
+                data-ow-state={on ? "on" : undefined}
+                /* 选中＝无彩极色 --ow-control-on（§6，不借行动极 primary）＋勾形，颜色不单独承担状态（R1）。 */
+                icon={on ? <Check aria-hidden="true" /> : undefined}
+                /* W3 验收修：原来 7 颗都被 [border-radius:var(--ow-radius-pill)] 拉成 999 胶囊。
+                   §7 形状表——999 只留给带状态点/计数的 chip 与真圆形元素；这 7 颗是坐在
+                   Button 基座上的多选切换钮（有勾形＋aria-pressed，无点无计数），落按钮 8px
+                   档，即 Button size=md 自带的 --ow-radius-action，不再覆写圆角。 */
+                className={cn(
+                  on &&
+                    "bg-[var(--ow-control-on)] text-[color:var(--ow-control-on-glyph)] border-[color:var(--ow-control-on)] hover:bg-[var(--ow-control-on)] active:bg-[var(--ow-control-on)]",
+                )}
+                onClick={() => toggleReason(code)}
+              >
+                {label}
+              </Button>
+            )
+          })}
+        </div>
+        <Field
+          multiline
+          placeholder="分享详细信息（可选）"
+          value={detail}
+          onChange={setDetail}
+          rows={3}
+          maxLength={2000}
+        />
+        <p className="m-0 text-[color:var(--ow-text-3)] font-normal text-ow-fs-ui leading-[1.5] font-[family-name:var(--ow-font-sans)]">
+          你的对话内容将与反馈一同提交，以帮助改进 {productName}
+        </p>
+      </div>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ModelCatalogErrorState } from "./index"
+
+const meta = {
+  title: "Composite/ModelCatalogErrorState",
+  component: ModelCatalogErrorState,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ModelCatalogErrorState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const CustomMessage: Story = {
+  args: {
+    message: "无法连接到模型服务",
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const NetworkTimeout: Story = {
+  args: {
+    message: "网络连接超时，请稍后重试",
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const Retrying: Story = {
+  args: {
+    message: "请检查网络连接后重试",
+    retrying: true,
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const RetryingCustomMessage: Story = {
+  args: {
+    message: "服务暂时不可用",
+    retrying: true,
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const Compact: Story = {
+  args: {
+    compact: true,
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const CompactWithMessage: Story = {
+  args: {
+    message: "加载失败",
+    compact: true,
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const CompactRetrying: Story = {
+  args: {
+    message: "连接超时",
+    compact: true,
+    retrying: true,
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const LongMessage: Story = {
+  args: {
+    message:
+      "模型服务暂时不可用，可能是由于网络问题或服务维护。请检查网络连接后重试，如果问题持续存在，请联系技术支持。",
+    onRetry: () => console.log("retry"),
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 600 }}>
+      <div>
+        <h3 style={{ margin: "0 0 12px", fontSize: 14, color: "var(--ow-text-2)" }}>Default</h3>
+        <ModelCatalogErrorState onRetry={() => console.log("retry default")} />
+      </div>
+      <div>
+        <h3 style={{ margin: "0 0 12px", fontSize: 14, color: "var(--ow-text-2)" }}>Retrying</h3>
+        <ModelCatalogErrorState message="网络连接超时" retrying onRetry={() => console.log("retry retrying")} />
+      </div>
+      <div>
+        <h3 style={{ margin: "0 0 12px", fontSize: 14, color: "var(--ow-text-2)" }}>Compact</h3>
+        <ModelCatalogErrorState message="加载失败" compact onRetry={() => console.log("retry compact")} />
+      </div>
+    </div>
+  ),
+}

package/src/components/composite/ModelCatalogErrorState/ModelCatalogRetrySource.test.mjs

@@ -0,0 +1,86 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const errorStateSource = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const settingsSource = await readFile(new URL("../ModelsSettingsSectionView/index.tsx", import.meta.url), "utf8")
+const composerSource = await readFile(
+  new URL("../../../../../../apps/desktop/src/renderer/features/chat/Composer.tsx", import.meta.url),
+  "utf8",
+)
+const styles = await readFile(new URL("../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("model catalog failure state exposes an accessible retry action", () => {
+  // role="alert" 由 InlineMessage variant="error" 提供（primitives/InlineMessage）
+  assert.match(errorStateSource, /<InlineMessage/)
+  assert.match(errorStateSource, /variant="error"/)
+  assert.match(errorStateSource, /title="模型列表加载失败"/)
+  assert.match(errorStateSource, /onClick=\{onRetry\}/)
+  assert.match(errorStateSource, /disabled=\{retrying\}/)
+  assert.ok(errorStateSource.includes('retrying ? "重试中…" : "重试"'))
+})
+
+test("settings and composer reuse the shared model catalog failure state", () => {
+  assert.match(settingsSource, /<ModelCatalogErrorState/)
+  assert.match(composerSource, /<ModelCatalogErrorState/)
+  assert.match(composerSource, /onRetry=\{\(\) => \{\s*void retryModelCatalog\(\)\s*\}\}/)
+})
+
+// ── W5 终扫：V1「图标 tile」母题与现调底色退役 ─────────────────────────────
+test("失败态坐 InlineMessage tint 三件套，不再自造图标底板与现调底色", () => {
+  assert.match(errorStateSource, /import \{ InlineMessage \} from "\.\.\/\.\.\/primitives\/InlineMessage"/)
+  // 36/28px 圆角方块图标底板整槽撤掉
+  assert.doesNotMatch(errorStateSource, /model-catalog-error__icon/)
+  assert.doesNotMatch(errorStateSource, /model-catalog-error__copy|model-catalog-error__title/)
+  assert.doesNotMatch(styles, /model-catalog-error__icon/)
+  // 底色不再现调，交给 --ow-error-tint 族
+  assert.doesNotMatch(styles, /\.model-catalog-error[^\n]*color-mix/)
+  // 288 列宽是量度覆写；13px 内距的硬编码已随骨架一起退役
+  // R2 L2-2-2：288 死宽撤——宽度由容器（设置内容列 720）决定，不再自锁一列。
+  assert.match(styles, /\.model-catalog-error \{ width: 100%; \}/)
+  assert.doesNotMatch(styles, /\.model-catalog-error \{[^}]*max-width: 288px/)
+  assert.doesNotMatch(styles, /\.model-catalog-error \{[^}]*padding: 13px/)
+})
+
+test("model catalog error stays within the model list and truncates technical details", () => {
+  // 人话一句走正文字体，技术详情另起 __detail 行走 mono（§6）
+  assert.match(errorStateSource, /className="model-catalog-error__message">请检查网络连接后重试<\/span>/)
+  assert.match(errorStateSource, /className="model-catalog-error__detail" title=\{detail\}\s*>\s*\{detail\}/)
+  assert.match(styles, /\.cpop--model \{[^}]*max-width: calc\(100vw - 16px\);/s)
+  assert.match(
+    styles,
+    /\.model-catalog-error--compact \{[^}]*width: 100%;[^}]*margin: (?:2px 0 6px|var\(--ow-space-05,\s*2px\) 0 var\(--ow-space-15,\s*6px\));/s,
+  )
+  // DS2 §6 错误容器：detail 走 mono、最多 2 行截断（-webkit-line-clamp:2 + overflow-wrap:anywhere），
+  // 弃 V1 单行 nowrap+ellipsis 形态。
+  assert.match(
+    styles,
+    /\.model-catalog-error__detail \{[^}]*-webkit-line-clamp: 2;[^}]*width: 100%;[^}]*max-width: 100%;[^}]*min-width: 0;[^}]*overflow: hidden;[^}]*overflow-wrap: anywhere;[^}]*var\(--ow-font-mono\)/s,
+  )
+  // 人话那行不再被当技术详情排版：走 --ow-font-sans
+  assert.match(styles, /\.model-catalog-error__message \{[^}]*var\(--ow-font-sans\)/s)
+  assert.doesNotMatch(styles, /\.model-catalog-error__message \{[^}]*var\(--ow-font-mono\)/s)
+  assert.doesNotMatch(styles, /\.model-catalog-error__message \{[^}]*white-space: nowrap;/s)
+})
+
+// ── W5 终扫：设置屏行高覆写退役（§7 行高 40/32 两档）───────────────────────
+// R3（2026-09-04，Terry 意见 5）作废 A2-B2「一条设置一张卡」（原型 2423）：四行回到
+// `.set-row` 分隔线行——行与行之间的 1px --ow-border 由 ListRow 的 divider 机制画，
+// 故调用点不再关 divider；容器换成 gap-0 让那条线连成一条（gap 一开线就断成四段）。
+// 行高仍不在调用点覆写。R2 找茬 L1-1-7：段内第四行是「思考强度」（原型模板 L2517–2530）。
+test("模型设置四行是 .set-row 分隔线行（R3），不在调用点覆写上下内距", () => {
+  const settingsCode = settingsSource.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\{\/\*[\s\S]*?\*\/\}/g, "")
+  assert.doesNotMatch(settingsCode, /py-3\.5/)
+  assert.doesNotMatch(settingsCode, /className="px-0/)
+  assert.doesNotMatch(settingsCode, /className="set-card"/)
+  const rowProps = settingsCode
+    .split("<ListRow")
+    .slice(1)
+    .map((chunk) => chunk.split("action=")[0])
+  assert.equal(rowProps.length, 4)
+  for (const props of rowProps) {
+    assert.match(props, /className="set-row"/)
+    assert.doesNotMatch(props, /divider=/)
+  }
+  assert.match(settingsCode, /<div className="flex flex-col gap-0">/)
+})

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

@@ -0,0 +1,59 @@
+import { Button } from "../../primitives"
+import { InlineMessage } from "../../primitives/InlineMessage"
+import { Refresh } from "../Icons"
+
+export interface ModelCatalogErrorStateProps {
+  message?: string | null
+  retrying?: boolean
+  compact?: boolean
+  onRetry: () => void
+}
+
+/**
+ * ModelCatalogErrorState — 模型目录加载失败态（Desktop 各面共用）。
+ *
+ * W5 终扫：原来是自造骨架——36×36（compact 28×28）圆角方块图标底板 ＋
+ * `color-mix(in srgb, var(--ow-error) 10%, transparent)` 现调底色 ＋ 13px 内距。
+ * 图标底板是 V1「图标 tile」母题，2.0 统一卡片骨架不带这个槽；同类容器错误态
+ * 已有 primitives/InlineMessage 原语（NoPlanPanelView 就是这么改的），故整件坐进
+ * `variant="error"`：tint 三件套表面（--ow-error-tint / -tint-border / -on-tint）、
+ * 16 图标不带底板、内距 10/14。重试钮走 action 槽。
+ * 本件是「加载失败」，不是权益空态，故不套 EmptyState 母题（R-B 在案裁决只约束
+ * 「权益不可用」）。
+ */
+export function ModelCatalogErrorState({
+  message,
+  retrying = false,
+  compact = false,
+  onRetry,
+}: ModelCatalogErrorStateProps) {
+  // §6：人话一句恒在（正文字体），宿主传进来的服务端串作技术详情另起一行走 mono。
+  const detail = message?.trim() || undefined
+  return (
+    <InlineMessage
+      className={`model-catalog-error${compact ? " model-catalog-error--compact" : ""}`}
+      variant="error"
+      title="模型列表加载失败"
+      action={
+        <Button
+          variant={compact ? "text" : "secondary"}
+          size="sm"
+          icon={<Refresh />}
+          onClick={onRetry}
+          disabled={retrying}
+          aria-busy={retrying}
+        >
+          {retrying ? "重试中…" : "重试"}
+        </Button>
+      }
+    >
+      <span className="model-catalog-error__message">请检查网络连接后重试</span>
+      {/* §6 错误容器：技术详情 mono ＋ 最多 2 行截断，超出用 title 兜全文 */}
+      {detail && (
+        <span className="model-catalog-error__detail" title={detail}>
+          {detail}
+        </span>
+      )}
+    </InlineMessage>
+  )
+}

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

@@ -0,0 +1,224 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ModelModalityFlow } from "./index"
+
+const meta = {
+  title: "Composite/ModelModalityFlow",
+  component: ModelModalityFlow,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ModelModalityFlow>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TextToText: Story = {
+  args: {
+    inputModalities: ["text"],
+    outputModalities: ["text"],
+  },
+}
+
+export const TextImageToText: Story = {
+  args: {
+    inputModalities: ["text", "image"],
+    outputModalities: ["text"],
+  },
+}
+
+export const TextToImage: Story = {
+  args: {
+    inputModalities: ["text"],
+    outputModalities: ["image"],
+  },
+}
+
+export const TextToAudio: Story = {
+  args: {
+    inputModalities: ["text"],
+    outputModalities: ["audio"],
+  },
+}
+
+export const AudioToText: Story = {
+  args: {
+    inputModalities: ["audio"],
+    outputModalities: ["text"],
+  },
+}
+
+export const TextToVideo: Story = {
+  args: {
+    inputModalities: ["text"],
+    outputModalities: ["video"],
+  },
+}
+
+export const MultimodalInput: Story = {
+  args: {
+    inputModalities: ["text", "image", "audio"],
+    outputModalities: ["text"],
+  },
+}
+
+export const MultimodalOutput: Story = {
+  args: {
+    inputModalities: ["text"],
+    outputModalities: ["text", "image", "audio"],
+  },
+}
+
+export const AllModalities: Story = {
+  args: {
+    inputModalities: ["text", "image", "video", "audio"],
+    outputModalities: ["text", "image", "video", "audio"],
+  },
+}
+
+export const OnlyInput: Story = {
+  args: {
+    inputModalities: ["text", "image"],
+    outputModalities: [],
+  },
+}
+
+export const OnlyOutput: Story = {
+  args: {
+    inputModalities: [],
+    outputModalities: ["text", "image"],
+  },
+}
+
+export const NoModalities: Story = {
+  args: {
+    inputModalities: [],
+    outputModalities: [],
+  },
+}
+
+export const UndefinedModalities: Story = {
+  args: {
+    inputModalities: undefined,
+    outputModalities: undefined,
+  },
+}
+
+export const WithPrefixes: Story = {
+  args: {
+    inputModalities: ["modality_text", "model_modality_image"],
+    outputModalities: ["content_modality_text", "input_audio"],
+  },
+}
+
+export const MixedCase: Story = {
+  args: {
+    inputModalities: ["TEXT", "Image", "AUDIO"],
+    outputModalities: ["Text"],
+  },
+}
+
+export const DuplicateModalities: Story = {
+  args: {
+    inputModalities: ["text", "text", "image", "image"],
+    outputModalities: ["text", "text"],
+  },
+}
+
+export const WithCustomClassName: Story = {
+  args: {
+    inputModalities: ["text", "image"],
+    outputModalities: ["text"],
+    className: "custom-modality-flow",
+  },
+}
+
+export const InModelCard: Story = {
+  render: () => (
+    <div
+      style={{
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border-strong)",
+        borderRadius: 8,
+        padding: 12,
+        width: 280,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
+        <span style={{ font: "500 14px/1.4 var(--ow-font-sans)", color: "var(--ow-text)" }}>Claude Opus</span>
+        <ModelModalityFlow inputModalities={["text", "image"]} outputModalities={["text"]} />
+      </div>
+      <div style={{ font: "400 12px/1.5 var(--ow-font-sans)", color: "var(--ow-text-3)" }}>
+        最强推理能力，支持多模态输入
+      </div>
+    </div>
+  ),
+}
+
+export const MultipleFlows: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <span style={{ fontSize: 14, color: "var(--ow-text-2)", minWidth: 120 }}>GPT-4 Vision:</span>
+        <ModelModalityFlow inputModalities={["text", "image"]} outputModalities={["text"]} />
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <span style={{ fontSize: 14, color: "var(--ow-text-2)", minWidth: 120 }}>DALL-E 3:</span>
+        <ModelModalityFlow inputModalities={["text"]} outputModalities={["image"]} />
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <span style={{ fontSize: 14, color: "var(--ow-text-2)", minWidth: 120 }}>Whisper:</span>
+        <ModelModalityFlow inputModalities={["audio"]} outputModalities={["text"]} />
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <span style={{ fontSize: 14, color: "var(--ow-text-2)", minWidth: 120 }}>TTS-1:</span>
+        <ModelModalityFlow inputModalities={["text"]} outputModalities={["audio"]} />
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <span style={{ fontSize: 14, color: "var(--ow-text-2)", minWidth: 120 }}>Sora:</span>
+        <ModelModalityFlow inputModalities={["text"]} outputModalities={["video"]} />
+      </div>
+    </div>
+  ),
+}
+
+export const InTable: Story = {
+  render: () => (
+    <table style={{ borderCollapse: "collapse", width: "100%", fontSize: 14 }}>
+      <thead>
+        <tr style={{ borderBottom: "1px solid var(--ow-border-strong)" }}>
+          <th style={{ padding: "8px 12px", textAlign: "left", color: "var(--ow-text-2)", fontWeight: 500 }}>Model</th>
+          <th style={{ padding: "8px 12px", textAlign: "left", color: "var(--ow-text-2)", fontWeight: 500 }}>
+            Capabilities
+          </th>
+          <th style={{ padding: "8px 12px", textAlign: "left", color: "var(--ow-text-2)", fontWeight: 500 }}>
+            Multiplier
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr style={{ borderBottom: "1px solid var(--ow-border-strong)" }}>
+          <td style={{ padding: "8px 12px", color: "var(--ow-text)" }}>Claude Opus</td>
+          <td style={{ padding: "8px 12px" }}>
+            <ModelModalityFlow inputModalities={["text", "image"]} outputModalities={["text"]} />
+          </td>
+          <td style={{ padding: "8px 12px", color: "var(--ow-text-3)" }}>×3.0</td>
+        </tr>
+        <tr style={{ borderBottom: "1px solid var(--ow-border-strong)" }}>
+          <td style={{ padding: "8px 12px", color: "var(--ow-text)" }}>DALL-E 3</td>
+          <td style={{ padding: "8px 12px" }}>
+            <ModelModalityFlow inputModalities={["text"]} outputModalities={["image"]} />
+          </td>
+          <td style={{ padding: "8px 12px", color: "var(--ow-text-3)" }}>×2.5</td>
+        </tr>
+        <tr>
+          <td style={{ padding: "8px 12px", color: "var(--ow-text)" }}>Whisper</td>
+          <td style={{ padding: "8px 12px" }}>
+            <ModelModalityFlow inputModalities={["audio"]} outputModalities={["text"]} />
+          </td>
+          <td style={{ padding: "8px 12px", color: "var(--ow-text-3)" }}>×1.0</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+}

package/src/components/composite/ModelModalityFlow/ModelModalityFlowSource.test.mjs

@@ -0,0 +1,56 @@
+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 icons = await readFile(new URL("../Icons/index.tsx", import.meta.url), "utf8")
+
+// W2 §7 分类芯片口径：分类不是状态，不该占四个功能色极。V1 的 text 蓝 / image 绿 /
+// video 橙 / audio 紫统一收到 info tint，靠类别图标区分。
+test("modality chips share one info tint instead of four category hues", () => {
+  assert.match(source, /bg-\[var\(--ow-mention-bg\)\] text-\[color:var\(--ow-mention-text\)\]/)
+  assert.doesNotMatch(source, /text-ow-info bg-ow-info-bg/)
+  assert.doesNotMatch(source, /bg-ow-success-bg/)
+  assert.doesNotMatch(source, /bg-ow-warning-bg/)
+  assert.doesNotMatch(source, /mark-violet/)
+  // audio 那条拼色（任意值里带逗号，实际编译不出底色）随之删除
+  assert.doesNotMatch(source, /color-mix/)
+})
+
+test("modality chip uses the tag radius and every category reads as an icon", () => {
+  assert.match(source, /rounded-\[var\(--ow-radius-tag\)\]/)
+  assert.doesNotMatch(source, /rounded-md/)
+  // text 不再是字母 "T"
+  assert.doesNotMatch(source, /modality === "text"\) return "T"/)
+  assert.match(source, /modality === "text"\) return <ModalityText/)
+})
+
+// W-R2 图标语系收编：四枚 glyph 不再就地手写 16 视框 / 1.6 描边，
+// 迁进 composite/Icons（24 视框 / 1.75 描边），本件只做 import。
+test("modality glyphs live in the shared Icons family, not inline in this file", () => {
+  assert.match(source, /import \{ ModalityAudio, ModalityImage, ModalityText, ModalityVideo \} from "\.\.\/Icons"/)
+  assert.doesNotMatch(source, /<svg/)
+  assert.doesNotMatch(source, /stroke-width:1\.6/)
+  assert.doesNotMatch(source, /viewBox="0 0 16 16"/)
+  for (const name of ["ModalityText", "ModalityImage", "ModalityVideo", "ModalityAudio"]) {
+    assert.match(icons, new RegExp(`export const ${name} = \\(p: IconProps\\) => \\(`))
+  }
+})
+
+test("filled glyph parts are declared per path, not guessed by :last-child", () => {
+  assert.doesNotMatch(source, /path:last-child/)
+  assert.doesNotMatch(icons, /path:last-child/)
+  // image 圆点 / video 三角 / audio 喇叭各自显式 fill（Icons 侧 fill="none" 在 svg 根，
+  // 实心件只需在自己那条 path 上写 fill）
+  const modalityBlock = icons.slice(icons.indexOf("export const ModalityText"), icons.indexOf("export const Keyboard"))
+  const fills = modalityBlock.match(/fill="currentColor"/g) ?? []
+  assert.equal(fills.length, 3, "image dot / video triangle / audio speaker each declare their own fill")
+})
+
+test("every modality still normalizes, labels and renders", () => {
+  for (const modality of ["text", "image", "video", "audio"]) {
+    assert.ok(source.includes(`"${modality}"`), `${modality} still handled`)
+  }
+  assert.match(source, /export type ModelModality = "text" \| "image" \| "video" \| "audio"/)
+  assert.match(source, /data-variant=\{modality\}/)
+})