@orbit-work/ui 0.1.0

package/src/components/domain/skills/SkillImportDialogView/index.tsx

@@ -0,0 +1,147 @@
+"use client"
+
+import { cn } from "../../../../lib/utils"
+import { Dialog } from "../../../composite/Dialog"
+import { Folder, Paperclip, Skill } from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+import { EmptyState } from "../../../primitives/EmptyState"
+
+/**
+ * SkillImportDialogView / SkillImportResultDialogView —— 技能导入两幕。
+ *
+ * 立面全部落在 `Dialog` 基座上（§5：`--ow-scrim` 遮罩 + `--ow-shadow-modal` + 1px 边框，
+ * 圆角 `--ow-radius-modal`，z 取 `--ow-z-modal`；Escape 关闭、Tab 焦点圈闭环）——
+ * 原先这里自造 modal-host（`bg-ow-bg-overlay` + `backdrop-blur`、`rounded-2xl`、
+ * `shadow-ow-shadow-3`、`bg-ow-primary/10` 透明度调色）已整体退役。
+ * 结果列表的读数（成功/失败/跳过计数）走 mono + tabular-nums（§7）；
+ * 三种结果状态 R1 双编码——色是第二编码，「成功/失败/跳过」文字与形位各占一样。
+ * R3 中性件——不带信标元素。
+ */
+
+export type SkillImportItemStatus = "success" | "failed" | "skipped"
+
+export interface SkillImportResultItemView {
+  sourceName: string
+  name?: string
+  status: SkillImportItemStatus
+  reason?: string
+}
+
+export interface SkillImportDialogViewProps {
+  onClose: () => void
+  onInstallArchive: () => void
+  onInstallDirectory: () => void
+}
+
+export interface SkillImportResultDialogViewProps {
+  summary: { success: number; failed: number; skipped: number }
+  items: SkillImportResultItemView[]
+  onClose: () => void
+}
+
+/** 读数位：mono + tabular-nums。 */
+function Reading({ value }: { value: number }) {
+  return (
+    <span className="font-[family-name:var(--ow-font-mono)] tabular-nums text-[color:var(--ow-text-2)]">{value}</span>
+  )
+}
+
+export function SkillImportDialogView(props: SkillImportDialogViewProps): React.ReactElement {
+  return (
+    <Dialog
+      open
+      width={520}
+      icon={<Skill />}
+      iconTone="info"
+      title="导入技能"
+      subtitle="支持 .zip、.tar.gz 和 .tgz 技能包，或批量扫描本地文件夹。"
+      onClose={props.onClose}
+      actions={null}
+    >
+      <EmptyState
+        markSize={36}
+        message="技能根目录必须包含 SKILL.md；选择文件夹时会批量导入其中的技能。"
+        action={
+          <div className="flex items-center gap-3">
+            <Button variant="secondary" icon={<Paperclip />} onClick={props.onInstallArchive}>
+              选择压缩包
+            </Button>
+            <Button variant="secondary" icon={<Folder />} onClick={props.onInstallDirectory}>
+              选择文件夹
+            </Button>
+          </div>
+        }
+      />
+    </Dialog>
+  )
+}
+
+export function SkillImportResultDialogView(props: SkillImportResultDialogViewProps): React.ReactElement {
+  return (
+    <Dialog
+      open
+      width={520}
+      icon={<Skill />}
+      iconTone="info"
+      title="导入结果"
+      subtitle={
+        <>
+          成功 <Reading value={props.summary.success} /> 个，失败 <Reading value={props.summary.failed} /> 个，跳过{" "}
+          <Reading value={props.summary.skipped} /> 个
+        </>
+      }
+      onClose={props.onClose}
+      actions={
+        <Button variant="primary" onClick={props.onClose}>
+          完成
+        </Button>
+      }
+    >
+      <div
+        data-ow-part="result-list"
+        className="max-h-96 overflow-y-auto flex flex-col gap-2 [border-radius:var(--ow-radius-card)]"
+      >
+        {props.items.map((item, index) => (
+          <div
+            key={`${item.sourceName}-${index}`}
+            data-ow-part="result-item"
+            data-ow-state={item.status}
+            className="flex flex-col gap-1 p-3 bg-ow-surface-2 [border-radius:var(--ow-radius-control)]"
+          >
+            <span
+              data-ow-part="status"
+              className={cn(
+                "text-ow-fs-caption font-semibold leading-[1.3] font-[family-name:var(--ow-font-sans)]",
+                item.status === "success" && "text-[color:var(--ow-success-on-tint)]",
+                item.status === "failed" && "text-[color:var(--ow-error-on-tint)]",
+                item.status === "skipped" && "text-ow-text-3",
+              )}
+            >
+              {skillImportStatusLabel(item.status)}
+            </span>
+            <span
+              data-ow-part="name"
+              className="text-ow-text font-medium text-ow-fs-body leading-[1.4] font-[family-name:var(--ow-font-sans)]"
+            >
+              {item.name ?? item.sourceName}
+            </span>
+            {item.reason && (
+              <span
+                data-ow-part="reason"
+                className="text-ow-text-3 font-normal text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-mono)] break-all line-clamp-2"
+              >
+                {item.reason}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </Dialog>
+  )
+}
+
+function skillImportStatusLabel(status: SkillImportItemStatus): string {
+  if (status === "success") return "成功"
+  if (status === "failed") return "失败"
+  return "跳过"
+}

package/src/components/domain/skills/ToolDetailModalView/ToolDetailModalView.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Doc, Search } from "../../../composite/Icons"
+import { ToolDetailModalView } from "./index"
+
+const meta = {
+  title: "Skills/ToolDetailModalView",
+  component: ToolDetailModalView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ToolDetailModalView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleInput = (
+  <div style={{ fontSize: 13, fontFamily: "var(--ow-font-mono)", padding: 12 }}>
+    <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>file_path:</div>
+    <div style={{ marginBottom: 12, color: "var(--ow-text)" }}>src/components/Button.tsx</div>
+    <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>limit:</div>
+    <div style={{ color: "var(--ow-text)" }}>100</div>
+  </div>
+)
+
+const sampleOutput = (
+  <pre style={{ margin: 0, fontSize: 12, fontFamily: "var(--ow-font-mono)", padding: 12, whiteSpace: "pre-wrap" }}>
+    {`export function Button({ children, ...props }) {
+  return (
+    <button className="btn" {...props}>
+      {children}
+    </button>
+  )
+}`}
+  </pre>
+)
+
+export const Running: Story = {
+  args: {
+    icon: <Doc />,
+    label: "Read",
+    preview: "src/components/Button.tsx",
+    status: "running",
+    input: sampleInput,
+    onClose: () => console.log("close"),
+  },
+}
+
+export const Success: Story = {
+  args: {
+    icon: <Doc />,
+    label: "Read",
+    preview: "src/components/Button.tsx",
+    status: "success",
+    input: sampleInput,
+    output: sampleOutput,
+    onClose: () => console.log("close"),
+  },
+}
+
+export const Error: Story = {
+  args: {
+    icon: <Doc />,
+    label: "Write",
+    preview: "config.json",
+    status: "error",
+    input: (
+      <div style={{ fontSize: 13, padding: 12 }}>
+        <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>content:</div>
+        <div style={{ color: "var(--ow-text)" }}>{'{ "debug": true }'}</div>
+      </div>
+    ),
+    output: <div style={{ padding: 12, color: "var(--ow-error)" }}>Error: Permission denied</div>,
+    onClose: () => console.log("close"),
+  },
+}
+
+export const WithArtifacts: Story = {
+  args: {
+    icon: <Search />,
+    label: "WebFetch",
+    preview: "https://example.com",
+    status: "success",
+    input: (
+      <div style={{ fontSize: 13, padding: 12 }}>
+        <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>url:</div>
+        <div style={{ color: "var(--ow-text)" }}>https://example.com</div>
+      </div>
+    ),
+    output: (
+      <div style={{ padding: 12 }}>
+        <div style={{ marginBottom: 8, fontWeight: 600 }}>页面内容摘要</div>
+        <div style={{ fontSize: 13, color: "var(--ow-text-2)" }}>这是一个示例页面的内容摘要...</div>
+      </div>
+    ),
+    artifacts: [
+      {
+        id: "1",
+        type: "image",
+        url: "https://via.placeholder.com/300x200",
+        name: "screenshot.png",
+        mimeType: "image/png",
+      },
+      {
+        id: "2",
+        type: "image",
+        url: "https://via.placeholder.com/300x200/ff0000",
+        name: "logo.jpg",
+        ref: "logo-ref",
+        mimeType: "image/jpeg",
+      },
+    ],
+    onClose: () => console.log("close"),
+  },
+}
+
+export const NoInput: Story = {
+  args: {
+    icon: <Doc />,
+    label: "Execute",
+    status: "success",
+    output: (
+      <pre style={{ margin: 0, fontSize: 12, fontFamily: "var(--ow-font-mono)", padding: 12 }}>
+        Task completed successfully.
+      </pre>
+    ),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const NoOutput: Story = {
+  args: {
+    icon: <Doc />,
+    label: "Initialize",
+    status: "success",
+    input: (
+      <div style={{ fontSize: 13, padding: 12 }}>
+        <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>project_name:</div>
+        <div style={{ color: "var(--ow-text)" }}>my-app</div>
+      </div>
+    ),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const LongPreview: Story = {
+  args: {
+    icon: <Doc />,
+    label: "Bash",
+    preview: 'find . -name "*.tsx" -type f | xargs grep -l "useState" | wc -l',
+    status: "success",
+    input: (
+      <div style={{ fontSize: 13, padding: 12, fontFamily: "var(--ow-font-mono)" }}>
+        find . -name "*.tsx" -type f | xargs grep -l "useState" | wc -l
+      </div>
+    ),
+    output: <pre style={{ margin: 0, fontSize: 12, fontFamily: "var(--ow-font-mono)", padding: 12 }}>42</pre>,
+    onClose: () => console.log("close"),
+  },
+}

package/src/components/domain/skills/ToolDetailModalView/ToolDetailModalViewSource.test.mjs

@@ -0,0 +1,99 @@
+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 css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+/** 只看 .artifact 产物卡这一段，别把整份样式表都算进来。
+ *  段尾原来锚在 `.prod-list {` 上，A9-B3 把产物列表族撤了（归口 chat/ArtifactCard），
+ *  改锚它后面第一条活规则 `.token-plan-card {`；锚点丢失时 indexOf 会给 -1、
+ *  slice 一路吃到文件尾，断言就变成对整份样式表生效，所以这里显式校验锚点存在。 */
+const artifactCssEnd = css.indexOf(".token-plan-card {")
+assert.ok(artifactCssEnd > 0, "产物卡段尾锚点 .token-plan-card 不见了，请更新锚点")
+const artifactCss = css.slice(css.indexOf(".artifact {"), artifactCssEnd)
+
+test("W3-4 R1：产物类型章不再是蓝实底——中性井底 + 中性字，类型由 mono 字标说", () => {
+  const gly = artifactCss.match(/\.artifact__cap \.gly \{[^}]*\}/)
+  assert.ok(gly, "找不到 .artifact__cap .gly 规则")
+  assert.match(gly[0], /background: var\(--ow-surface-2\)/)
+  assert.match(gly[0], /color: var\(--ow-text\)/)
+  // 功能色实底 / on-fill 白字全部退役
+  assert.doesNotMatch(gly[0], /--ow-(info|success|warning|error)(-fill)?\)/)
+  assert.doesNotMatch(gly[0], /--ow-on-fill/)
+  // mono 字标仍在，IMG/VID 是类型的文字编码
+  assert.match(gly[0], /var\(--ow-font-mono\)/)
+  assert.ok(source.includes('{artifact.type === "image" ? "IMG" : "VID"}'))
+})
+
+test("R1 双编码：模态状态走 Chip 的点色 + 文字，运行中另加小转子形差", () => {
+  assert.ok(source.includes("dot={STATUS_TONE[status]}"))
+  assert.ok(source.includes("label={STATUS_LABELS[status]}"))
+  assert.ok(source.includes('{ running: "运行中", error: "失败", success: "完成" }'))
+  // W-R2：转子本体收到 primitives/Spinner（§9 唯一转子帧），本件只消费
+  assert.ok(source.includes('status === "running" ? <Spinner size="sm" /> : undefined'))
+})
+
+test("R2/R3：模态与产物卡两段都不落荧黄", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-data-today/)
+  assert.doesNotMatch(artifactCss, /--ow-beacon|--ow-accent-dot|--ow-data-today/)
+})
+
+// ── W5 残留清扫：产物卡收敛到「一张卡骨架」＋ 递减短迹签名 ──
+
+test("§7 度量：产物类型章 26 → 28（章位度量表）", () => {
+  const gly = artifactCss.match(/\.artifact__cap \.gly \{[^}]*\}/)?.[0] ?? ""
+  assert.match(gly, /width: 28px; height: 28px;/)
+  assert.doesNotMatch(gly, /26px/)
+})
+
+test("判断表「卡片：五套骨架 → 一张骨架」：产物卡走 14 内距 / 8 字段槽 / 1px 边 / 零影", () => {
+  const card = artifactCss.match(/^\.artifact \{[^}]*padding: 14px;[^}]*\}/m)?.[0] ?? ""
+  assert.match(card, /padding: 14px;/)
+  assert.match(card, /gap: var\(--ow-space-2, 8px\);/)
+  assert.match(card, /border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);/)
+  assert.match(card, /border-radius: var\(--ow-radius-card\);/)
+  assert.match(card, /background: var\(--ow-surface\);/)
+  assert.doesNotMatch(artifactCss, /box-shadow/)
+  // 大图不再当卡面：降为卡内一个字段，自带 1px 立边与 radius-sm
+  const img = artifactCss.match(/^\.artifact__img \{[^}]*\}/m)?.[0] ?? ""
+  assert.doesNotMatch(img, /aspect-ratio: 4 \/ 5;/)
+  assert.match(img, /border-radius: var\(--ow-radius-sm\);/)
+  // 底部 cap 条那根分隔线随之退场（卡内层次靠 8 槽，不靠线）
+  const cap = artifactCss.match(/^\.artifact__cap \{[^}]*\}/m)?.[0] ?? ""
+  assert.doesNotMatch(cap, /border-top/)
+})
+
+test("递减短迹＝交付物统一签名：两个消费方都挂 ArtifactTrail（几何取锁定件，不重画）", async () => {
+  const toolCall = await readFile(new URL("../../desktop/DesktopToolCallView/index.tsx", import.meta.url), "utf8")
+  for (const [name, text] of [
+    ["ToolDetailModalView", source],
+    ["DesktopToolCallView", toolCall],
+  ]) {
+    assert.match(text, /import \{ ArtifactTrail \} from "\.\.\/\.\.\/chat\/ArtifactCard"/, `${name} 要引锁定件的短迹`)
+    assert.match(text, /className=\{`artifact artifact--\$\{artifact\.type\}`\}[\s\S]*?<ArtifactTrail \/>/, name)
+  }
+})
+
+// ── R2 修补 ──
+
+// 既定态：页签只有底线式一套（Tabs 的 variant 保留 @deprecated 兼容）。
+// 本处是全仓唯一一处生产代码还在传 segmented（其余都在 Tabs.stories 的废弃演示里）。
+test('页签不再传废弃的 variant="segmented"', () => {
+  assert.doesNotMatch(source, /variant="segmented"/)
+})
+
+// 同一套「壳 ＋ 底线式页签」骨架只留一条横线，且交给页签行（Tabs 的基线由容器给）。
+test("横线只有一条：head 不再自画 border-bottom，基线交给 body 的 border-top", () => {
+  const head = css.match(/\.tool-modal__head \{[^}]*\}/)
+  assert.ok(head, "找不到 .tool-modal__head 规则")
+  assert.doesNotMatch(head[0], /border-bottom/)
+  assert.match(css, /\.tool-modal__body,\s*\.md-modal__body \{[^}]*border-top:/s)
+})
+
+// 图标当 children 传会落进 Button 的 label 槽拿不到尺寸（0×0），这里只是恰好有一条
+// 局部 svg 尺寸规则兜住——同一写法在有/无局部 CSS 的两处后果不同，属脆弱模式。
+test("关闭钮图标走 Button 的 icon 槽", () => {
+  assert.match(source, /icon=\{<Close \/>\}/)
+  assert.doesNotMatch(source, /className="tool-modal__x"[\s\S]{0,120}>\s*<Close \/>/)
+})

package/src/components/domain/skills/ToolDetailModalView/index.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import { type ReactNode, useState } from "react"
+import { Dialog } from "../../../composite/Dialog"
+import { Close } from "../../../composite/Icons"
+import { Button, EmptyState } from "../../../primitives"
+import { Chip, type ChipDotTone } from "../../../primitives/Chip"
+import { Spinner } from "../../../primitives/Spinner"
+import { Tabs } from "../../../primitives/Tabs"
+import { ArtifactTrail } from "../../chat/ArtifactCard"
+
+/**
+ * ToolDetailModalView —— 工具调用详情模态。
+ *
+ * 立面落在 `Dialog` 基座的裸壳档（bare）上：`--ow-scrim` 遮罩 + `--ow-shadow-modal`
+ * + 1px 边框 + `--ow-radius-modal`(16)，z 取 `--ow-z-modal`，Escape 关闭、Tab 焦点圈闭环
+ * （原先自造的 `.ow-modal-host` + `.tool-modal` 立面与自造关闭钮已退役）。
+ * 状态走 `Chip` 胶囊：R1 双编码——点色是第二编码，「运行中/完成/失败」文字与状态点
+ * 形差（运行中另加 <20px 小转子）各占一样；不引荧黄、不占极（R2/R3）。
+ * 工具名与产物 MIME 是读数，一律 mono。
+ * W3-4：产物类型章（.artifact__cap .gly 的 IMG/VID）原为 --ow-info-fill 蓝实底 + 白字，
+ * 蓝色不表达任何状态、只是装饰，却抢走卡内唯一的彩色权重；已归位中性章
+ * （--ow-surface-2 井底 + --ow-text 字），类型仍由 mono 字标明说。
+ */
+export type ToolDetailStatus = "running" | "error" | "success"
+
+export interface ToolArtifactView {
+  id: string
+  type: string
+  url: string
+  name?: string
+  ref?: string
+  mimeType?: string
+}
+
+export interface ToolDetailModalViewProps {
+  icon: ReactNode
+  label: string
+  preview?: string | null
+  status: ToolDetailStatus
+  input?: ReactNode
+  output?: ReactNode
+  artifacts?: ToolArtifactView[]
+  onClose: () => void
+}
+
+const STATUS_LABELS: Record<ToolDetailStatus, string> = { running: "运行中", error: "失败", success: "完成" }
+/** 运行中＝neutral（--ow-progress-fill，§4 让形口径：状态极不落在中性件上）。 */
+const STATUS_TONE: Record<ToolDetailStatus, ChipDotTone> = {
+  running: "neutral",
+  error: "error",
+  success: "success",
+}
+
+export function ToolDetailModalView({
+  icon,
+  label,
+  preview,
+  status,
+  input,
+  output,
+  artifacts = [],
+  onClose,
+}: ToolDetailModalViewProps): React.ReactElement {
+  const hasInput = input != null
+  const hasOutput = output != null || artifacts.length > 0
+  const [tab, setTab] = useState<"input" | "output">(hasInput ? "input" : "output")
+  return (
+    /* W3 终验：视图自带页头关闭钮，关掉 Dialog 基座的默认关闭钮，避免双关闭钮 + 顶部空带。 */
+    <Dialog
+      open
+      width="min(760px, 92vw)"
+      padded={false}
+      closable={false}
+      onClose={onClose}
+      ariaLabel={`工具详情 ${label}`}
+    >
+      <div className="tool-modal">
+        <div className="tool-modal__head">
+          <span className="tool-modal__icon">{icon}</span>
+          <div className="tool-modal__title">
+            <div className="tool-modal__name">{label}</div>
+            {preview && <div className="tool-modal__preview">{preview}</div>}
+          </div>
+          <Chip
+            className="tool-modal__status"
+            dot={STATUS_TONE[status]}
+            icon={status === "running" ? <Spinner size="sm" /> : undefined}
+            label={STATUS_LABELS[status]}
+          />
+          {/* 图标走 Button 的 icon 槽（icon-only 由原语补 16 尺寸与 28 方）。原来当 children 传，
+              只因 desktop-surfaces.css 恰好有一条 .tool-modal__x svg 尺寸规则才没渲成 0×0
+              ——同一写法在有/无局部 CSS 的两处后果不同，属脆弱模式。 */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="tool-modal__x"
+            onClick={onClose}
+            aria-label="关闭"
+            icon={<Close />}
+          />
+        </div>
+        <Tabs
+          items={[
+            { key: "input", label: "输入", disabled: !hasInput },
+            { key: "output", label: "输出", disabled: !hasOutput },
+          ]}
+          activeKey={tab}
+          onChange={(key) => setTab(key as "input" | "output")}
+          size="sm"
+        />
+        <div className="tool-modal__body">
+          {/* W3 终验 G5：两处空态走 EmptyState 紧凑档（弹层内），.tool-modal__empty 灰字规则退役。 */}
+          {tab === "input" && (input ?? <EmptyState size="sm" message="无输入参数" />)}
+          {tab === "output" &&
+            (hasOutput ? (
+              <>
+                {output}
+                <ToolArtifacts artifacts={artifacts} />
+              </>
+            ) : (
+              <EmptyState size="sm" message="无输出内容" />
+            ))}
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+function ToolArtifacts({ artifacts }: { artifacts: ToolArtifactView[] }): React.ReactElement | null {
+  if (artifacts.length === 0) return null
+  return (
+    <div className="tool-artifacts">
+      {artifacts.map((artifact) => (
+        <a
+          key={artifact.id}
+          className={`artifact artifact--${artifact.type}`}
+          href={artifact.url}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {/* 递减短迹＝Orbitwork 交付物的统一签名（锁定件 chat/ArtifactCard 的 ArtifactTrail，
+              4 颗 6/5/4/3px、色 --ow-text-3、不占荧黄配额、无常驻动画）。 */}
+          <ArtifactTrail />
+          {artifact.type === "image" ? (
+            <img className="artifact__img" src={artifact.url} alt="" />
+          ) : (
+            <div className="artifact__img artifact__img--empty" />
+          )}
+          <div className="artifact__cap">
+            <span className="gly">{artifact.type === "image" ? "IMG" : "VID"}</span>
+            <span className="nm">{artifact.name || artifact.ref}</span>
+            <span className="by">{artifact.mimeType}</span>
+            <span className="open">打开</span>
+          </div>
+        </a>
+      ))}
+    </div>
+  )
+}

package/src/components/domain/skills/index.ts

@@ -0,0 +1,7 @@
+export * from "./McpServerListView/index"
+export * from "./SkillAvatarView/index"
+export * from "./SkillCardView/index"
+export * from "./SkillDetailPanelView/index"
+export * from "./SkillDetailView/index"
+export * from "./SkillImportDialogView/index"
+export * from "./ToolDetailModalView/index"