@orbit-work/ui 0.1.0

package/src/components/domain/chat/Chatbot/index.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react"
+import { Transcript } from "../Transcript"
+
+export type ChatbotProps = {
+  /** Optional top area for title, agent identity, or conversation actions. */
+  header?: ReactNode
+  /** Conversation messages and rich response content. */
+  children?: ReactNode
+  /** Empty-state content shown when there are no messages. */
+  empty?: ReactNode
+  /** ChatSender or another conversation input. */
+  sender?: ReactNode
+  className?: string
+  maxWidth?: number | string
+}
+
+/**
+ * @deprecated DS2 已把会话壳并入 `Transcript`（蓝图批次③：Chatbot +
+ * ConversationView → Transcript 壳）。本件只作薄兼容层，转成脊线贯穿的
+ * `Transcript`；新代码直接用 `Transcript`。
+ */
+export function Chatbot({ header, children, empty, sender, className = "", maxWidth = 720 }: ChatbotProps) {
+  return (
+    <Transcript
+      header={header}
+      empty={empty}
+      sender={sender}
+      maxWidth={maxWidth}
+      /* W5 终扫修：原来还挂一个 `ow-chatbot` 类，全仓无任何样式消费（死钩子），已删。
+         R2 复审修：壳上那道 420px 最小高也已清——非设计值、不在任何度量表上，且会话壳的高度
+         本就归宿主（Transcript 是填充父容器的壳）。要撑高请由调用点传 className。 */
+      className={className}
+    >
+      {children}
+    </Transcript>
+  )
+}

package/src/components/domain/chat/Composer/Composer.stories.tsx

@@ -0,0 +1,227 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Clock, Doc, Shield } from "../../../composite/Icons"
+import { Button, Chip } from "../../../primitives"
+import { Composer } from "./index"
+import { ComposerAuthorization } from "./parts/ComposerAuthorization"
+import { ComposerMentions } from "./parts/ComposerMentions"
+import { ComposerProjectPicker } from "./parts/ComposerProjectPicker"
+import { ComposerQueue } from "./parts/ComposerQueue"
+import { ComposerVoiceInput } from "./parts/ComposerVoiceInput"
+
+const meta = {
+  title: "Chat/Composer",
+  component: Composer,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 40, background: "var(--ow-bg)", maxWidth: 720 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Composer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const PROJECTS = [
+  { id: "orbit-fe", name: "orbit-fe", label: "orbit-fe", description: "前端主仓" },
+  { id: "design", name: "design", label: "design", description: "品牌与设计系统" },
+]
+
+/** 空态：什么都没输入，发送钮停在 disabled。 */
+export const Empty: Story = {
+  args: {
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    onSend: (text) => console.log("Send:", text),
+  },
+}
+
+/** 输入中：有内容，发送钮进 primary（行动极正规通道）。 */
+export const Typing: Story = {
+  render: () => {
+    const [value, setValue] = useState("帮我看下这周还有哪些待办没做完")
+    return (
+      <Composer
+        value={value}
+        onChange={setValue}
+        onSend={(text) => {
+          console.log("Send:", text)
+          setValue("")
+        }}
+      />
+    )
+  },
+}
+
+/** 带附件与上下文引用。 */
+export const WithAttachmentsAndContext: Story = {
+  args: {
+    defaultValue: "照这张图改一下首页",
+    attachments: (
+      <>
+        <Chip icon={<Doc />} label="screenshot.png" description="248 KB" onRemove={() => {}} removeLabel="移除附件" />
+        <Chip icon={<Doc />} label="需求说明.md" onRemove={() => {}} removeLabel="移除附件" />
+      </>
+    ),
+    context: <Chip icon={<Doc />} label="orbit-fe/src/app" onRemove={() => {}} removeLabel="移除引用" />,
+    mentions: (
+      <ComposerMentions
+        mentions={[
+          { id: "1", kind: "skill", name: "code-review" },
+          { id: "2", kind: "agent", name: "github" },
+        ]}
+        onRemove={(mention) => console.log("remove", mention)}
+      />
+    ),
+  },
+}
+
+/** 带队列：排队消息与队列通知都落在固定的队列区。 */
+export const WithQueue: Story = {
+  args: {
+    defaultValue: "顺便把 CI 也修一下",
+    queue: (
+      <ComposerQueue
+        label="排队中"
+        notices={[{ id: "paused", text: "上一条还没跑完，队列已暂停", tone: "warning" }]}
+        items={[
+          { id: "1", text: "把设置页的暗档对比度过一遍", icon: <Clock />, kind: "follow-up" },
+          {
+            id: "2",
+            text: "顺手补一版变更说明",
+            icon: <Clock />,
+            kind: "follow-up",
+            status: "submitting",
+            statusLabel: "发送中",
+          },
+        ]}
+      />
+    ),
+  },
+}
+
+/** 生成中：状态点＋「生成中」固定在工具条首位，发送钮变停止。 */
+export const Generating: Story = {
+  args: {
+    generating: true,
+    placeholder: "今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器",
+    onStop: () => console.log("Stop"),
+  },
+}
+
+/** 处理中：空环＋「处理中」，发送钮走原语的 <20px 小转子。 */
+export const Busy: Story = {
+  args: {
+    submitState: "busy",
+    defaultValue: "停止中…",
+  },
+}
+
+/** 授权态：页脚右侧的授权模式选择。 */
+export const WithAuthorization: Story = {
+  render: () => {
+    const [mode, setMode] = useState("ask")
+    return (
+      <Composer
+        defaultValue="把这个分支合进 main"
+        authorization={
+          <ComposerAuthorization
+            value={mode}
+            onChange={setMode}
+            options={[
+              { value: "ask", label: "每次询问", description: "改动前都要你点头", icon: <Shield /> },
+              { value: "auto", label: "自动执行", description: "只在当前项目内生效", icon: <Shield /> },
+            ]}
+          />
+        }
+        contextUsage={<span className="font-[family-name:var(--ow-font-mono)] tabular-nums">45K / 200K</span>}
+      />
+    )
+  },
+}
+
+/** 语音态：录音时频谱撑开工具条，麦克风按钮进选中态。 */
+export const Voice: Story = {
+  args: {
+    voice: <ComposerVoiceInput active listening levels={[0.2, 0.6, 0.4, 0.9, 0.3, 0.7, 0.5, 0.8, 0.2, 0.6]} />,
+    placeholder: "正在听…",
+  },
+}
+
+/** 禁用：逐 token 的 disabled，不是整块压透明度。 */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: "会话已结束",
+  },
+}
+
+/** 满配：队列 + 附件 + 上下文 + 项目 + 授权 + 用量读数。 */
+export const FullyLoaded: Story = {
+  render: () => {
+    const [value, setValue] = useState("把这周的进展整理成一段周报")
+    const [project, setProject] = useState("orbit-fe")
+    const [auth, setAuth] = useState("ask")
+    return (
+      <Composer
+        value={value}
+        onChange={setValue}
+        queue={<ComposerQueue items={[{ id: "1", text: "顺便把变更说明补上", icon: <Clock /> }]} />}
+        attachments={<Chip icon={<Doc />} label="周报模板.md" onRemove={() => {}} removeLabel="移除附件" />}
+        mentions={<ComposerMentions mentions={[{ id: "1", kind: "skill", name: "weekly" }]} />}
+        project={
+          <ComposerProjectPicker
+            value={project}
+            options={PROJECTS}
+            onChange={(option) => setProject(option.id)}
+            onCreate={(name) => console.log("create", name)}
+          />
+        }
+        footerStart={<span>内容由 AI 生成，请仔细核实回答内容。</span>}
+        authorization={
+          <ComposerAuthorization
+            value={auth}
+            onChange={setAuth}
+            options={[
+              { value: "ask", label: "每次询问", icon: <Shield /> },
+              { value: "auto", label: "自动执行", icon: <Shield /> },
+            ]}
+          />
+        }
+        contextUsage={<span className="font-[family-name:var(--ow-font-mono)] tabular-nums">45K / 200K</span>}
+        voice={<ComposerVoiceInput />}
+        onSend={(text) => {
+          console.log("Send:", text)
+          setValue("")
+        }}
+      />
+    )
+  },
+}
+
+/** 自定义工具条：整条工具条交给调用方，状态极的位置仍然搬不走。 */
+export const CustomToolbar: Story = {
+  args: {
+    generating: true,
+    toolbarStart: (
+      <Button variant="ghost" size="sm" icon={<Doc />}>
+        引用文件
+      </Button>
+    ),
+    toolbarEnd: (
+      <Button variant="ghost" size="sm">
+        深度思考
+      </Button>
+    ),
+    onStop: () => console.log("Stop"),
+  },
+}
+
+/** 长文本：超过 maxHeight 后输入区内部滚动。 */
+export const LongText: Story = {
+  args: {
+    defaultValue: "这是一段很长的文本\n".repeat(12),
+    maxHeight: 150,
+  },
+}

package/src/components/domain/chat/Composer/ComposerSource.test.mjs

@@ -0,0 +1,175 @@
+import assert from "node:assert/strict"
+import { readFile, readdir } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const desktop = await readFile(new URL("../../desktop/DesktopComposer/index.tsx", import.meta.url), "utf8")
+const chatBarrel = await readFile(new URL("../index.ts", import.meta.url), "utf8")
+const chatEntries = await readdir(new URL("../", import.meta.url), { withFileTypes: true })
+
+const PARTS = [
+  "ComposerAudioSpectrum",
+  "ComposerAuthorization",
+  "ComposerMentions",
+  "ComposerMenu",
+  "ComposerMenuPopover",
+  "ComposerPopover",
+  "ComposerProjectPicker",
+  "ComposerQueue",
+  "ComposerVoiceInput",
+]
+
+test("十件簇合并：九个 Composer* 子件并入 Composer/parts，出口仍从组合器走", () => {
+  for (const part of PARTS) {
+    assert.ok(source.includes(`export * from "./parts/${part}"`), `${part} 未从组合器再导出`)
+    assert.ok(
+      !chatEntries.some((entry) => entry.isDirectory() && entry.name === part),
+      `${part}/ 旧目录仍在，应已并入 Composer/parts`,
+    )
+    assert.ok(!chatBarrel.includes(`"./${part}"`), `chat 桶仍在导出退役目录 ${part}`)
+  }
+  assert.ok(chatBarrel.includes('export * from "./Composer"'))
+})
+
+test("状态极位置固定，不做可配置插槽（品牌拍板）", () => {
+  // 状态点由组合器自渲染在工具条首位；没有任何 prop 能把它搬走或替换。
+  assert.ok(source.includes('data-ow-part="state"'))
+  assert.ok(source.includes('data-ow-part="state-dot"'))
+  assert.doesNotMatch(source, /\bstatePole\??:/)
+  assert.doesNotMatch(source, /\bstateSlot\??:/)
+  assert.doesNotMatch(source, /\bbeacon\??:\s*ReactNode/)
+  // R1 双编码：形（实心/空环）＋文字，颜色只是第二编码。
+  assert.ok(source.includes("bg-[var(--ow-progress-fill)]"))
+  assert.ok(source.includes('border border-[color:var(--ow-border-strong)]"'))
+  assert.ok(source.includes("生成中"))
+  assert.ok(source.includes("处理中"))
+})
+
+test("R2：组合器默认样式里 grep 不到荧黄", () => {
+  assert.doesNotMatch(source, /--ow-beacon/)
+  assert.doesNotMatch(source, /--ow-accent-dot/)
+  assert.doesNotMatch(source, /--ow-data-today/)
+})
+
+test("输入区走 Field 语法，三态边框挂整个 composer 壳（§6 输入类 · R3 无外环）", () => {
+  assert.match(source, /<Field\b[\s\S]*multiline[\s\S]*standalone=\{false\}/)
+  assert.ok(source.includes("border border-[color:var(--ow-composer-border,var(--ow-input-border))]"))
+  // 输入底＝surface-2 经 --ow-input-bg（§5 / ui-controls-inputs 卡）；--ow-composer-bg 为 §15 皮肤钩子。
+  assert.ok(source.includes("bg-[var(--ow-composer-bg,var(--ow-input-bg))]"))
+  assert.ok(source.includes("[&:hover:not(:focus-within)]:border-[color:var(--ow-input-border-hover)]"))
+  assert.ok(source.includes("focus-within:border-[color:var(--ow-input-border-focus)]"))
+  // R3（2026-09-04，Terry 意见 1）：输入类 focus 只换 1px 边框色，--ow-focus-shadow 的 2px
+  // 外环整枚撤（井本身就有 1px 边，再套一圈环读成两层框）。键盘环只属按钮与链接。
+  assert.doesNotMatch(source, /focus-within:\[box-shadow:/)
+  // disabled 逐 token，禁整块统一透明度。
+  assert.ok(source.includes("border-[color:var(--ow-disabled-border)] bg-[var(--ow-input-disabled-bg)]"))
+  assert.doesNotMatch(source, /opacity-\[?\.?\d/)
+})
+
+test("发送钮＝Button primary（行动极正规通道），stop/busy 另走形编码", () => {
+  assert.ok(source.includes('variant={resolvedSubmitState === "send" ? "primary" : "secondary"}'))
+  assert.ok(source.includes('loading={resolvedSubmitState === "busy"}'))
+  // 处理中的转子由原语出（§9 <20px 小转子），不得再手搓 animate-spin 环。
+  assert.doesNotMatch(source, /animate-spin/)
+})
+
+test("工具条/上下文/队列/语音/授权/提及/项目全部插槽化，位置由组合器定死", () => {
+  for (const slot of [
+    "queue",
+    "status",
+    "attachments",
+    "mentions",
+    "context",
+    "input",
+    "overlay",
+    "toolbarStart",
+    "toolbarEnd",
+    "voice",
+    "project",
+    "footerStart",
+    "footerEnd",
+    "authorization",
+    "contextUsage",
+  ]) {
+    assert.ok(source.includes(`  ${slot},`), `组合器缺插槽 ${slot}`)
+  }
+  assert.ok(source.includes('data-ow-part="queue"'))
+  assert.ok(source.includes('data-ow-part="context"'))
+})
+
+test("模式选择走 Menu 基座（-pop 档由原语承担），不再自绘 absolute 菜单", () => {
+  assert.match(source, /import \{ Menu \} from ['"](?:\.\.\/)+primitives\/Menu['"]/)
+  assert.ok(source.includes("<Menu"))
+  assert.doesNotMatch(source, /data-ow-part="mode-menu"/)
+  // 立面由 Menu 出，组合器不自己画弹层。
+  assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow-pop\)\]/)
+  assert.doesNotMatch(source, /bg-\[var\(--ow-popover-bg\)\]/)
+})
+
+test("Tailwind 任意值 var() 一律带类型标注（防 tailwind-merge 吞类）", () => {
+  for (const file of [source, desktop]) {
+    assert.doesNotMatch(file, /(?:text|border)-\[var\(--ow-/)
+    assert.doesNotMatch(file, /font-\[var\(--ow-font-/)
+  }
+})
+
+test("DesktopComposer 是 Composer 的桌面配方：具名位由组合器负责", () => {
+  assert.match(desktop, /import \{ Composer, type ComposerProps \} from ['"]\.\.\/\.\.\/chat\/Composer['"]/)
+  assert.ok(desktop.includes("voice={voiceControl}"))
+  assert.ok(desktop.includes("project={projectControl}"))
+  assert.ok(desktop.includes("authorization={authorizationControl}"))
+  assert.ok(desktop.includes("contextUsage={contextUsage}"))
+  // 配方不得再自己拼 footerEnd —— 页脚顺序是组合器的事。
+  assert.doesNotMatch(desktop, /footerEnd=/)
+  // 桌面自建 .cbtn 手搓钮退役，换 Button 正规变体（§6 状态由原语补齐）。
+  assert.doesNotMatch(desktop, /cbtn/)
+})
+
+/* ── R2 复审批 ───────────────────────────────────────────────── */
+
+// 「打进去 14px、发出来 13px」：输入面原走 --ow-fs-body(14)，而同屏转录正文
+// （UserTurn / AgentTurn）是 --ow-fs-ui(13)。两面同一句话不能两个字号。
+//
+// 「同一句话在两面不能两个字号」——A9-B2 曾把用户气泡先行提到 fs-body(14)，本条因此被拆成
+// 半条（只断言「输入面 ≡ agent 正文」）。R3（2026-09-04，Terry 意见 2）撤掉气泡后，用户原话
+// 与 agent 正文并档到 --ow-fs-ui(13)/1.7，输入面本就在这一档——三处归一，本条回到一句话。
+test("R3 §7：输入面 / agent 正文 / 用户原话三处同一档字（text-ow-fs-ui）", async () => {
+  const composer = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+  assert.match(composer, /data-ow-part="textarea"[\s\S]{0,400}?text-ow-fs-ui/)
+  assert.doesNotMatch(composer, /data-ow-part="textarea"[\s\S]{0,400}?text-ow-fs-body[^-]/)
+  const agentTurn = await readFile(new URL("../AgentTurn/index.tsx", import.meta.url), "utf8")
+  assert.match(agentTurn, /data-ow-part="body"[\s\S]{0,200}?text-ow-fs-ui/)
+  const userTurn = await readFile(new URL("../UserTurn/index.tsx", import.meta.url), "utf8")
+  assert.match(userTurn, /data-ow-part="quote"[\s\S]{0,400}?text-ow-fs-ui leading-\[1\.7\]/)
+  assert.doesNotMatch(userTurn, /data-ow-part="quote"[\s\S]{0,400}?text-ow-fs-body[^-]/)
+})
+
+/* ── A1-B5：井度量与工具行归位（原型模板 863–1063） ───────────── */
+
+test("A1-B5 §7 井度量：padding 12/10/8、纵向 gap 10、工具行 gap 6", () => {
+  assert.ok(source.includes('"relative min-h-20 px-2.5 pt-3 pb-2 flex flex-col gap-2.5"'))
+  assert.ok(source.includes('<div data-ow-part="bar" className="flex items-center gap-1.5 min-h-7">'))
+  assert.doesNotMatch(source, /data-ow-part="bar(-start|-end)?" className="[^"]*gap-1[^.\d]/)
+  // 材质三件（surface-2 底 ＋ 1px 边 ＋ radius-card ＝ 12）现状即原型，无影。
+  assert.ok(source.includes("[border-radius:var(--ow-radius-card)]"))
+  assert.doesNotMatch(source, /data-ow-part="surface"[\s\S]{0,600}?shadow-\[var\(--ow-shadow/)
+})
+
+// R2 · L1-3-2：技能钮走闪电字形，盾牌只留给授权模式（原型 template.dc.html:1462 vs :1508）
+test("技能钮＝Zap 闪电，Composer 本体不再引 Shield（盾牌专属授权控件）", () => {
+  assert.match(source, /icon=\{<Zap \/>\}[\s\S]{0,60}?技能/)
+  assert.doesNotMatch(source, /Shield/)
+})
+
+test("A1-B5 井外不留行：项目/授权/上下文用量三件收进井内工具行，页脚只剩兼容槽", () => {
+  const bar = source.slice(source.indexOf('data-ow-part="bar"'), source.indexOf('data-ow-part="footer"'))
+  // 左段：附件 → 技能 → 授权 → 项目（原型 L928-1062 同序）
+  assert.match(bar, /\{authorization\}\s*\n\s*\{project\}/)
+  // 右段：上下文用量排在模型档之前
+  assert.match(bar, /data-ow-part="bar-end"[\s\S]{0,160}?\{contextUsage\}\s*\n\s*\{toolbarEnd \?\?/)
+  // 页脚不再承载这三件
+  const footer = source.slice(source.indexOf('data-ow-part="footer"'))
+  assert.doesNotMatch(footer, /\{project\}|\{authorization\}|\{contextUsage\}/)
+  // 三槽都不传时整条页脚不渲染（免责句归每轮转录，不归输入井）
+  assert.ok(source.includes("const hasFooter = footerStart !== undefined || footerEnd !== undefined"))
+})