@orbit-work/ui 0.1.0

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

@@ -0,0 +1,374 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { SkillAvatarView, skillGlyph } from "../SkillAvatarView"
+import { SkillCardView } from "./index"
+
+const meta = {
+  title: "Skills/SkillCardView",
+  component: SkillCardView,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SkillCardView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultAvatar = <SkillAvatarView className="gly" glyph={skillGlyph("code-review", "代码走查")} />
+
+/**
+ * 卡内头像统一走 SkillAvatarView。R2·T2 起**在目录卡里**章色由卡钉档（中性
+ * `--ow-surface-2` ＋ `--ow-text-2`，原型 4569–4570），`skillGlyph` 的身份色轮转只在
+ * 卡外的场合（会话菜单 / 命令面板 / 详情面）还生效——这里看到的就是卡内的中性档。
+ */
+const iconAvatar = (id: string, name: string) => <SkillAvatarView className="gly" glyph={skillGlyph(id, name)} />
+
+export const NotInstalled: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    installed: false,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("install"),
+  },
+}
+
+export const Installed: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    installed: true,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("use"),
+  },
+}
+
+export const Installing: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    installed: false,
+    installing: true,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("install"),
+  },
+}
+
+export const Outdated: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    version: "1.0.0",
+    installed: true,
+    outdated: true,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("update"),
+  },
+}
+
+export const Updating: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    version: "1.0.0",
+    installed: true,
+    outdated: true,
+    installing: true,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("update"),
+  },
+}
+
+export const WithVersion: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    version: "2.1.0",
+    installed: true,
+    showVersion: true,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("use"),
+  },
+}
+
+export const WithVersionOutdated: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    version: "1.5.2",
+    installed: true,
+    outdated: true,
+    showVersion: true,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("update"),
+  },
+}
+
+export const ActionDisabled: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    installed: false,
+    actionDisabled: true,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("install"),
+  },
+}
+
+export const CustomActionLabel: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    installed: true,
+    actionLabel: "Configure",
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("configure"),
+  },
+}
+
+export const CustomActionVariant: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    installed: true,
+    actionVariant: "unstyled",
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("use"),
+  },
+}
+
+export const NoDescription: Story = {
+  args: {
+    name: "Simple Skill",
+    avatar: iconAvatar("skill-4", "技能"),
+    installed: false,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("install"),
+  },
+}
+
+export const LongName: Story = {
+  args: {
+    name: "Advanced Code Review and Static Analysis Tool",
+    desc: "Comprehensive code review with security scanning",
+    avatar: defaultAvatar,
+    installed: false,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("install"),
+  },
+}
+
+export const LongDescription: Story = {
+  args: {
+    name: "代码走查",
+    desc: "Automatically review pull requests, suggest improvements, detect code smells, check for security vulnerabilities, verify test coverage, and ensure code style consistency across your entire codebase",
+    avatar: defaultAvatar,
+    installed: true,
+    onOpen: () => console.log("open"),
+    onAction: () => console.log("use"),
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
+      <SkillCardView
+        name="Not Installed"
+        desc="This skill is not installed yet"
+        avatar={iconAvatar("skill-2", "技能")}
+        installed={false}
+        onOpen={() => console.log("open")}
+        onAction={() => console.log("install")}
+      />
+      <SkillCardView
+        name="Installing"
+        desc="Currently being installed"
+        avatar={iconAvatar("skill-8", "技能")}
+        installed={false}
+        installing={true}
+        onOpen={() => console.log("open")}
+        onAction={() => console.log("install")}
+      />
+      <SkillCardView
+        name="Installed"
+        desc="Ready to use"
+        avatar={iconAvatar("skill-0", "技能")}
+        installed={true}
+        onOpen={() => console.log("open")}
+        onAction={() => console.log("use")}
+      />
+      <SkillCardView
+        name="Update Available"
+        desc="A new version is available"
+        avatar={iconAvatar("skill-0", "技能")}
+        version="1.0.0"
+        installed={true}
+        outdated={true}
+        showVersion={true}
+        onOpen={() => console.log("open")}
+        onAction={() => console.log("update")}
+      />
+      <SkillCardView
+        name="Updating"
+        desc="Installing new version"
+        avatar={iconAvatar("skill-4", "技能")}
+        version="1.0.0"
+        installed={true}
+        outdated={true}
+        installing={true}
+        onOpen={() => console.log("open")}
+        onAction={() => console.log("update")}
+      />
+    </div>
+  ),
+}
+
+export const SkillLibrary: Story = {
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 16 }}>
+      <SkillCardView
+        name="代码走查"
+        desc="AI-powered code review and suggestions"
+        avatar={iconAvatar("skill-4", "技能")}
+        installed={true}
+        version="2.1.0"
+        showVersion={true}
+        onOpen={() => console.log("open review")}
+        onAction={() => console.log("use review")}
+      />
+      <SkillCardView
+        name="测试生成"
+        desc="Generate unit tests automatically"
+        avatar={iconAvatar("skill-5", "技能")}
+        installed={false}
+        onOpen={() => console.log("open test")}
+        onAction={() => console.log("install test")}
+      />
+      <SkillCardView
+        name="文档助手"
+        desc="Generate API docs and comments"
+        avatar={iconAvatar("skill-5", "技能")}
+        installed={true}
+        outdated={true}
+        version="1.5.0"
+        showVersion={true}
+        onOpen={() => console.log("open docs")}
+        onAction={() => console.log("update docs")}
+      />
+      <SkillCardView
+        name="重构助手"
+        desc="Smart code refactoring suggestions"
+        avatar={iconAvatar("skill-4", "技能")}
+        installed={true}
+        onOpen={() => console.log("open refactor")}
+        onAction={() => console.log("use refactor")}
+      />
+      <SkillCardView
+        name="安全扫描"
+        desc="Detect security vulnerabilities"
+        avatar={iconAvatar("skill-3", "技能")}
+        installed={false}
+        installing={true}
+        onOpen={() => console.log("open security")}
+        onAction={() => console.log("install security")}
+      />
+      <SkillCardView
+        name="Performance"
+        desc="Analyze and optimize performance"
+        avatar={iconAvatar("skill-4", "技能")}
+        installed={false}
+        onOpen={() => console.log("open perf")}
+        onAction={() => console.log("install perf")}
+      />
+    </div>
+  ),
+}
+
+/** 卡脚结构化元信息：Chip 胶囊，计数位 mono + tabular-nums（读数口径由壳统一给）。 */
+export const WithMetaItems: Story = {
+  args: {
+    name: "代码走查",
+    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
+    avatar: defaultAvatar,
+    version: "1.2.0",
+    showVersion: true,
+    installed: false,
+    metaItems: [
+      { key: "cat", label: "开发工具" },
+      { key: "uses", label: "使用", count: "3.2k" },
+      { key: "tools", label: "工具", count: 7 },
+    ],
+    onOpen: () => {},
+    onAction: () => {},
+  },
+}
+
+/**
+ * 状态签一览（R2·T2）：`installed / outdated / installing` 三个布尔在件内映射成
+ * `StatusTag` 的 `installed / update / installing` 三档（原型 4562–4570 `statusOf`：
+ * 安装中最优先，没装就不出签，装了再看有没有更新），`mine` 出归属签「我的」。
+ * 一张卡至多一枚状态签 ＋ 一枚归属签，归属签在左。
+ */
+export const StatusTags: Story = {
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 14 }}>
+      <SkillCardView
+        name="深度研究"
+        desc="搜索、去重并交叉验证来源，产出带引用的结构化报告。"
+        avatar={iconAvatar("deep-research", "深")}
+        version="1.4.2"
+        showVersion
+        installed
+        metaItems={[{ key: "updated", label: "3 天前" }]}
+        onOpen={() => console.log("open")}
+        onAction={() => console.log("use")}
+      />
+      <SkillCardView
+        name="文档助手"
+        desc="创建、改写并排版专业文档，保留原有结构与样式。"
+        avatar={iconAvatar("doc-writer", "文")}
+        version="2.0.0"
+        showVersion
+        installed
+        outdated
+        metaItems={[{ key: "updated", label: "2 周前" }]}
+        onOpen={() => console.log("open")}
+        onAction={() => console.log("update")}
+      />
+      <SkillCardView
+        name="演示生成"
+        desc="把一段结论整理成可讲的页面顺序与讲稿。"
+        avatar={iconAvatar("slides", "演")}
+        version="0.6.3"
+        showVersion
+        installed={false}
+        installing
+        metaItems={[{ key: "updated", label: "上个月" }]}
+        onOpen={() => console.log("open")}
+        onAction={() => console.log("install")}
+      />
+      <SkillCardView
+        name="周报格式"
+        desc="按我们组的模板整理周报：进展、阻塞、下周计划。"
+        avatar={iconAvatar("my-weekly", "周")}
+        version="0.3.0"
+        showVersion
+        installed
+        mine
+        metaItems={[{ key: "updated", label: "今天" }]}
+        onOpen={() => console.log("open")}
+        onAction={() => console.log("use")}
+      />
+    </div>
+  ),
+}

package/src/components/domain/skills/SkillCardView/SkillCardViewSource.test.mjs

@@ -0,0 +1,35 @@
+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")
+
+/* R2·T2：技能卡的状态签接线。宿主（SkillsCenter → SkillCard.tsx:65–87）本来就在传
+   installed / outdated / installing 三个布尔，件里映射一下就出签，宿主零改动。 */
+
+test("三个布尔映射成 StatusTag 的三档（原型 4562–4570 statusOf）", () => {
+  // 安装中最优先 → 没装就不出签 → 装了再看有没有更新。
+  assert.match(
+    source,
+    /const status: StatusTagPreset \| undefined = installing\s*\n\s*\? "installing"\s*\n\s*: !installed\s*\n\s*\? undefined\s*\n\s*: outdated\s*\n\s*\? "update"\s*\n\s*: "installed"/,
+  )
+  assert.match(source, /status=\{status\}/)
+})
+
+test("归属签「我的」走同一件 StatusTag，不另起一套写法", () => {
+  assert.match(source, /import \{ StatusTag, type StatusTagPreset \} from "\.\.\/\.\.\/\.\.\/composite\/StatusTag"/)
+  assert.match(source, /mine\?: boolean/)
+  assert.match(source, /badge=\{mine \? <StatusTag status="mine" \/> : undefined\}/)
+})
+
+test("状态签只走 status 一条路：不再同时传 updateAvailable", () => {
+  // 壳里的去重条款已在 Q3 撤掉（「有更新」签与「更新」钮照原型并存），
+  // 这里若还传 updateAvailable，一张卡会出两枚「有更新」。
+  assert.doesNotMatch(source, /updateAvailable=/)
+})
+
+test("状态签是唯一形：件内不自造 span/Tag/Chip 状态块", () => {
+  assert.doesNotMatch(source, /connector-update-tag/)
+  assert.doesNotMatch(source, /<Chip\b/)
+  assert.doesNotMatch(source, /<Tag\b/)
+})

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

@@ -0,0 +1,88 @@
+import type { ReactNode } from "react"
+import { StatusTag, type StatusTagPreset } from "../../../composite/StatusTag"
+import { type DesktopCatalogCardMetaItem, DesktopCatalogCardView } from "../../desktop/DesktopCatalogView"
+
+/**
+ * SkillCardView —— 技能卡（DesktopCatalogView 壳的技能配方）。
+ *
+ * 骨架、立面、hover/press/focus 与三态动作钮全部由 `DesktopCatalogCardView` 提供；
+ * 本件只负责技能域的文案与动作态推导（安装/更新/使用/进行中）。
+ * 卡脚元信息走 `metaItems`，由壳拼成一条 mono + tabular-nums 的文字带。A4-B2 后
+ * `showVersion` 的语义是「版本号出不出现在**卡脚那条带的头一段**」——版本胶囊已从名称行撤走，
+ * 名称行只留名字与状态签。R3 中性件——不带信标元素。
+ *
+ * R2·T2 起本件还负责**状态签**：`installed / outdated / installing` 三个布尔映射成
+ * `StatusTag` 的 `installed / update / installing`（原型 4562–4570 `statusOf`），
+ * `mine` 出归属签「我的」。宿主（`SkillCard.tsx:65–87`）本来就在传前三个布尔，
+ * 零改动即出签。字形章的色档由目录卡钉成中性，本件不管色。
+ */
+export interface SkillCardViewProps {
+  name: string
+  desc?: string
+  avatar: ReactNode
+  version?: string
+  outdated?: boolean
+  installed: boolean
+  installing?: boolean
+  actionDisabled?: boolean
+  showVersion?: boolean
+  actionLabel?: string
+  actionVariant?: "secondary" | "unstyled"
+  /**
+   * 归属签「我的」（原型 4646）。宿主的 `DisplayableSkill` 一期还没有 owner 字段，
+   * 缺省不出签；目录接口补上后只要多传一个布尔，见交接单。
+   */
+  mine?: boolean
+  /** 卡脚元信息（用量/评分/分类计数等）；读数自动 mono */
+  metaItems?: DesktopCatalogCardMetaItem[]
+  onOpen: () => void
+  onAction: () => void
+}
+
+export function SkillCardView({
+  name,
+  desc,
+  avatar,
+  version,
+  outdated,
+  installed,
+  installing = false,
+  showVersion = false,
+  actionLabel,
+  actionVariant = "secondary",
+  actionDisabled,
+  mine,
+  metaItems,
+  onOpen,
+  onAction,
+}: SkillCardViewProps): React.ReactElement {
+  const label =
+    actionLabel ?? (installing ? (outdated ? "更新中…" : "安装中…") : outdated ? "更新" : installed ? "使用" : "安装")
+  // 状态签映射（R2·T2，原型 4562–4570 `statusOf`）：安装中最优先，没装就不出签，
+  // 装了再看有没有更新。这三档与卡脚动作钮说的是两件事（现状 vs 能做什么），并存不矛盾。
+  // 只走 `status` 一条路，不再同时传 `updateAvailable`——否则一张卡会出两枚「有更新」。
+  const status: StatusTagPreset | undefined = installing
+    ? "installing"
+    : !installed
+      ? undefined
+      : outdated
+        ? "update"
+        : "installed"
+  return (
+    <DesktopCatalogCardView
+      avatar={avatar}
+      name={name}
+      version={showVersion ? version : undefined}
+      status={status}
+      badge={mine ? <StatusTag status="mine" /> : undefined}
+      description={desc}
+      metaItems={metaItems}
+      actionLabel={label}
+      actionVariant={actionVariant}
+      actionState={outdated ? "update" : installed ? "installed" : "default"}
+      actionDisabled={installing || actionDisabled}
+      onOpen={onOpen}
+      onAction={onAction}
+    />
+  )
+}

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Tag } from "../../../composite/Tag"
+import { Button } from "../../../primitives"
+import { Chip } from "../../../primitives/Chip"
+import { SkillAvatarView, skillGlyph } from "../SkillAvatarView"
+import { SkillDetailPanelView } from "./index"
+
+/**
+ * SkillDetailPanelView —— 技能详情面板。
+ * 「详细说明」这一节承担 §6 容器三态：载（小转子）· 空（EmptyState 母题）· 错（InlineMessage）。
+ */
+const meta = {
+  title: "Skills/SkillDetailPanelView",
+  component: SkillDetailPanelView,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SkillDetailPanelView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const avatar = <SkillAvatarView className="g" glyph={skillGlyph("code-review", "代码走查")} />
+
+/** 授权态用 Chip 胶囊：点色是第二编码，文字把状态说清（R1）。 */
+const authorized = <Chip dot="success" label="已授权，可以直接用" />
+const notAuthorized = <Chip dot="pending" label="已安装，还没授权" />
+
+const doc = `## 它能做什么
+
+- 读这次改动，挑出会出问题的地方
+- 按项目里已有的写法给建议，不硬套风格
+- 顺手把提交说明起个头
+
+## 怎么用
+
+在对话里 @ 这个技能，或者直接敲 \`/review\`。`
+
+const base = {
+  avatar,
+  name: "代码走查",
+  author: "Orbitwork 官方",
+  version: "1.0.0",
+  badge: <Tag variant="success">官方</Tag>,
+  brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+  authorization: authorized,
+  backLabel: "返回插件 · 技能",
+  onBack: () => {},
+  actions: <Button variant="primary">安装</Button>,
+}
+
+/** 常态：三节齐备。 */
+export const Complete: Story = {
+  args: { ...base, docContent: doc, loading: false },
+}
+
+/** 载：<20px 小转子（1.5px 描边 + 90° 缺口 · linear 0.9s · 色随所在文字）+ 一句话。 */
+export const Loading: Story = {
+  args: {
+    ...base,
+    loading: true,
+    actions: (
+      <Button variant="primary" disabled>
+        安装
+      </Button>
+    ),
+  },
+}
+
+/** 空：EmptyState 原语——信标 mono 母题 + 一句 text-2，禁插画禁 emoji。 */
+export const EmptyDoc: Story = {
+  args: { ...base, loading: false, emptyText: "这个技能还没写说明" },
+}
+
+/** 错：人话一句 + mono 技术详情（可折叠）+ 重试钮。 */
+export const DocError: Story = {
+  args: {
+    ...base,
+    loading: false,
+    error: "说明没读出来，可能是服务暂时不通",
+    errorDetail: "GET /v1/skills/code-review/doc → 504\nrequest-id: 9c41ad72-8e3f-4b20-a1d6-5f0c7e2b93aa",
+    onRetry: () => {},
+  },
+}
+
+/** 未授权：状态点换成 pending 中性灰，文字同步换说法。 */
+export const NotAuthorized: Story = {
+  args: { ...base, authorization: notAuthorized, docContent: doc, loading: false },
+}
+
+/** 无作者、无徽标的最简档。 */
+export const Minimal: Story = {
+  args: {
+    ...base,
+    author: undefined,
+    version: undefined,
+    badge: undefined,
+    brief: undefined,
+    authorization: undefined,
+    docContent: doc,
+    loading: false,
+  },
+}
+
+/** 长简介：text-wrap: pretty + 保留换行，最宽 680。 */
+export const LongBrief: Story = {
+  args: {
+    ...base,
+    loading: false,
+    docContent: doc,
+    brief:
+      "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。它会先把这次改动的范围理清楚，再逐个文件看：哪些是重构、哪些是新逻辑、哪些只是格式变动；然后只在真正可能出问题的地方说话，其余保持安静。",
+  },
+}