@orbit-work/ui 0.1.0

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

@@ -0,0 +1,465 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { cn } from "../../../../lib/utils"
+import { ChevDown, ChevRight, Share } from "../../../composite/Icons"
+import { ProgressBar } from "../../../primitives/ProgressBar"
+import { FileIcon } from "../../files/FileIcon"
+
+/**
+ * RichContent 族 —— 转录流里的富内容块（DS 2.0 聊天层，蓝图批次③ 合并件：
+ * RichDetail / RichLink / RichList / ProductList / NoteCard / TaskRef 六件收敛为三件）。
+ *
+ * - `RichCard`：卡形态三档 —— `note`（标题＋副文＋可选链接）· `detail`（可折叠详情）·
+ *   `task`（任务引用：字形＋标题＋进度＋ mono 读数脚注）。
+ * - `RichLink`：正文里的外链行，链接口径照 ui-status-links 卡＝info 蓝＋下划线 offset 3px，
+ *   直接套 `.ow-link` 工具类（旧共享 CSS 的 `.rich-link` 走 `--ow-fg-link`，浅档解析为 navy，
+ *   不是链接蓝——新件不再沿用）。
+ * - `RichList`：文本列表（ol/ul）与资源行列表（旧 ProductList）同一件，`variant` 分档。
+ *
+ * R3 中性件：全族不带信标、不用荧黄；进度只走 `--ow-progress-fill`（墨/月白）。
+ * 立面 §5 贴地档：0 影＋1px `--ow-border`；圆角 §7（卡 12 / 行 8）。
+ * 读数（步数、耗时、体积、扩展名）一律 mono＋tabular-nums（§7）。
+ * 状态 §6：可点卡与行有 hover/press/focus-visible（2px 环＋2px 缝）/ disabled 逐 token。
+ * 动效 §9：只过渡底色与边框，120ms＋`--ow-ease-beacon`，禁位移缩放。
+ */
+
+/* ───────────────────────────── 共享配方 ───────────────────────────── */
+
+/** 贴地卡面：1px 边 + 卡圆角 + surface 底，0 影（§5）。 */
+const richSurfaceClass = [
+  "box-border w-full border border-[color:var(--ow-border)] bg-[var(--ow-surface)]",
+  "[border-radius:var(--ow-radius-card)]",
+].join(" ")
+
+/** 可点面的状态全集（§6）：hover→press→focus-visible→disabled，禁位移。 */
+const richInteractiveClass = [
+  "text-left cursor-pointer",
+  "transition-[background-color,border-color,color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+  "hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+  // R2 复审修：环宽/缝原写死 2px，改走焦点环三件套的唯一出口 .ow-focus-ring
+  // （utilities.css 消费 --ow-focus-ring-w / --ow-focus-ring / --ow-focus-ring-offset）。
+  "ow-focus-ring",
+  "disabled:cursor-not-allowed disabled:bg-[var(--ow-disabled-bg)] disabled:text-[color:var(--ow-disabled-text)]",
+  "disabled:border-[color:var(--ow-disabled-border)]",
+].join(" ")
+
+/** 读数：mono + tabular-nums（§7）。 */
+const richReadoutClass = "font-[family-name:var(--ow-font-mono)] tabular-nums"
+
+/* ───────────────────────────── RichLink ───────────────────────────── */
+
+export interface RichLinkProps {
+  href: string
+  /** 链接文案；缺省用 href */
+  children?: ReactNode
+  /** 外链：新窗口打开并显示外链图标 */
+  external?: boolean
+  onClick?: () => void
+  className?: string
+  title?: string
+}
+
+/**
+ * RichLink —— 正文外链行。着色/下划线全部来自 `.ow-link`（--ow-link 蓝、offset 3px、
+ * hover 加粗到 2px、focus-visible 2px 环），组件本身不复写颜色。
+ */
+export function RichLink({ href, children, external = true, onClick, className, title }: RichLinkProps) {
+  return (
+    <a
+      data-slot="rich-link"
+      data-ow-part="link"
+      href={href}
+      title={title}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noreferrer" : undefined}
+      onClick={onClick}
+      className={cn(
+        "ow-link inline-flex w-fit items-center gap-1.5 py-0.5",
+        "text-[length:var(--ow-fs-ui)] font-medium",
+        className,
+      )}
+    >
+      <span className="min-w-0 truncate">{children ?? href}</span>
+      {external && <Share aria-hidden="true" style={{ width: 14, height: 14, flexShrink: 0 }} />}
+    </a>
+  )
+}
+
+/* ───────────────────────────── RichList ───────────────────────────── */
+
+export interface RichResourceItem {
+  /** 资源名，行内主文 */
+  title: ReactNode
+  /** 副文（类型/大小/时间等读数）；数字读数走 mono */
+  meta?: ReactNode
+  href?: string
+  onClick?: () => void
+  /** 文件名，决定 FileIcon 的扩展名标签；缺省取 title 的字符串值 */
+  name?: string
+  kind?: string
+}
+
+interface RichListBaseProps {
+  className?: string
+  /** 可访问名；资源档渲染成 list 时用 */
+  "aria-label"?: string
+}
+
+export interface RichTextListProps extends RichListBaseProps {
+  variant?: "text"
+  /** 有序列表（ol），缺省无序（ul） */
+  ordered?: boolean
+  items: ReactNode[]
+}
+
+export interface RichResourceListProps extends RichListBaseProps {
+  variant: "resource"
+  items: RichResourceItem[]
+}
+
+export type RichListProps = RichTextListProps | RichResourceListProps
+
+/**
+ * RichList —— 转录流列表。`text` 档＝普通 ol/ul 文本列表；`resource` 档＝资源行列表
+ * （旧 ProductList/`.prod`）：文件字形（单色＋扩展名 mono 标签，§7 禁多彩）＋主文＋副文＋外链图标。
+ */
+export function RichList(props: RichListProps) {
+  if (props.variant === "resource") {
+    const { items, className, "aria-label": ariaLabel } = props
+    return (
+      <ul
+        data-slot="rich-list"
+        data-ow-variant="resource"
+        aria-label={ariaLabel}
+        className={cn("m-0 flex list-none flex-col gap-2.5 p-0", className)}
+      >
+        {items.map((item, index) => (
+          <li key={index} className="min-w-0">
+            <RichResourceRow item={item} />
+          </li>
+        ))}
+      </ul>
+    )
+  }
+
+  const { items, ordered = false, className, "aria-label": ariaLabel } = props
+  const List = ordered ? "ol" : "ul"
+  return (
+    <List
+      data-slot="rich-list"
+      data-ow-variant="text"
+      aria-label={ariaLabel}
+      className={cn(
+        "my-1.5 pl-5",
+        ordered ? "list-decimal" : "list-disc",
+        "text-[length:var(--ow-fs-ui)] leading-[1.65] text-[color:var(--ow-text)]",
+        className,
+      )}
+    >
+      {items.map((item, index) => (
+        <li key={index} className="my-[3px]">
+          {item}
+        </li>
+      ))}
+    </List>
+  )
+}
+
+function RichResourceRow({ item }: { item: RichResourceItem }) {
+  const label = typeof item.title === "string" ? item.title : undefined
+  const content = (
+    <>
+      <span
+        data-ow-part="glyph"
+        aria-hidden="true"
+        className="inline-flex shrink-0 items-center justify-center text-[color:var(--ow-text-3)]"
+      >
+        <FileIcon name={item.name ?? label ?? ""} kind={item.kind} width={20} height={20} />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span
+          data-ow-part="title"
+          className="block truncate text-[length:var(--ow-fs-ui)] font-medium leading-[1.3] text-[color:var(--ow-text)]"
+        >
+          {item.title}
+        </span>
+        {item.meta != null && (
+          <span
+            data-ow-part="meta"
+            className={cn(
+              "mt-[3px] block truncate text-[length:var(--ow-fs-body-sm)] leading-[1.2]",
+              "text-[color:var(--ow-text-3)]",
+              richReadoutClass,
+            )}
+          >
+            {item.meta}
+          </span>
+        )}
+      </span>
+      {item.href && (
+        <Share
+          aria-hidden="true"
+          className="text-[color:var(--ow-text-3)]"
+          style={{ width: 16, height: 16, flexShrink: 0 }}
+        />
+      )}
+    </>
+  )
+
+  const rowClass = cn(
+    "flex w-full items-center gap-3 p-3.5 no-underline",
+    "border border-[color:var(--ow-border)] bg-[var(--ow-surface)] [border-radius:var(--ow-radius-action)]",
+    richInteractiveClass,
+  )
+
+  if (item.href) {
+    return (
+      <a
+        data-slot="rich-list-row"
+        href={item.href}
+        target="_blank"
+        rel="noreferrer"
+        onClick={item.onClick}
+        className={rowClass}
+      >
+        {content}
+      </a>
+    )
+  }
+  if (item.onClick) {
+    return (
+      <button data-slot="rich-list-row" type="button" onClick={item.onClick} className={rowClass}>
+        {content}
+      </button>
+    )
+  }
+  return (
+    <span data-slot="rich-list-row" className={cn(rowClass, "cursor-default hover:bg-[var(--ow-surface)]")}>
+      {content}
+    </span>
+  )
+}
+
+/* ───────────────────────────── RichCard ───────────────────────────── */
+
+export type RichCardVariant = "note" | "detail" | "task"
+
+export interface RichCardProps {
+  variant?: RichCardVariant
+  /** 卡标题 */
+  title: ReactNode
+  /** note 档副文 / task 档的次要说明 */
+  meta?: ReactNode
+  /** note 档尾链接 */
+  href?: string
+  /** note 档尾链接文案，缺省「打开」 */
+  linkLabel?: ReactNode
+  /** detail 档展开内容 / note 档附加内容 */
+  children?: ReactNode
+  /** detail 档默认展开 */
+  defaultOpen?: boolean
+  /** task 档：进度 0–100 */
+  progress?: number
+  /** task 档：左侧字形文案（两三个字符，如 TSK） */
+  glyph?: ReactNode
+  /** task 档：脚注左（如「4/7 步」） */
+  footnote?: ReactNode
+  /** task 档：脚注右读数（如耗时/花费），mono */
+  readout?: ReactNode
+  /** task 档：整卡可点 */
+  onClick?: () => void
+  disabled?: boolean
+  className?: string
+}
+
+/**
+ * RichCard —— 转录流卡形态三档（合并旧 NoteCard/`.rich-card` · RichDetail/`.rich-detail` ·
+ * TaskRef/`.taskref`）。`detail` 档用原生 `<details>`，键盘与读屏行为由浏览器承担。
+ */
+export function RichCard({
+  variant = "note",
+  title,
+  meta,
+  href,
+  linkLabel = "打开",
+  children,
+  defaultOpen = false,
+  progress,
+  glyph = "TSK",
+  footnote,
+  readout,
+  onClick,
+  disabled = false,
+  className,
+}: RichCardProps) {
+  if (variant === "detail") {
+    return (
+      <details
+        data-slot="rich-card"
+        data-ow-variant="detail"
+        open={defaultOpen}
+        className={cn("group my-2 [&>summary]:list-none [&>summary::-webkit-details-marker]:hidden", className)}
+      >
+        <summary
+          data-ow-part="summary"
+          className={cn(
+            "inline-flex cursor-pointer items-center gap-[7px] [border-radius:var(--ow-radius-menu)] px-1 py-[5px]",
+            "text-[length:var(--ow-fs-ui)] leading-none text-[color:var(--ow-text-3)]",
+            "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)] hover:text-[color:var(--ow-text-2)]",
+            "ow-focus-ring",
+          )}
+        >
+          <span>{title}</span>
+          <ChevDown
+            aria-hidden="true"
+            className="transition-transform duration-[var(--ow-dur-2)] ease-[var(--ow-ease-beacon)] group-open:rotate-180"
+            style={{ width: 14, height: 14 }}
+          />
+        </summary>
+        <div
+          data-ow-part="body"
+          className={cn(
+            "mt-2 flex flex-col gap-1 pl-1",
+            "text-[length:var(--ow-fs-ui)] leading-[1.55] text-[color:var(--ow-text-2)]",
+          )}
+        >
+          {children}
+        </div>
+      </details>
+    )
+  }
+
+  if (variant === "task") {
+    const clamped = progress == null ? undefined : Math.min(100, Math.max(0, progress))
+    const body = (
+      <>
+        <span className="flex items-center gap-2.5">
+          <span
+            data-ow-part="glyph"
+            aria-hidden="true"
+            className={cn(
+              "inline-flex h-7 w-7 shrink-0 items-center justify-center [border-radius:var(--ow-radius-tag)]",
+              "bg-[var(--ow-surface-2)] text-[color:var(--ow-text-2)]",
+              "text-[length:var(--ow-fs-ui)] font-semibold leading-none font-[family-name:var(--ow-font-sans)]",
+            )}
+          >
+            {glyph}
+          </span>
+          <span
+            data-ow-part="title"
+            className="min-w-0 flex-1 truncate text-[length:var(--ow-fs-ui)] font-semibold leading-[1.2] text-[color:var(--ow-text)]"
+          >
+            {title}
+          </span>
+          {onClick && (
+            <ChevRight
+              aria-hidden="true"
+              className="text-[color:var(--ow-text-3)]"
+              style={{ width: 15, height: 15, flexShrink: 0 }}
+            />
+          )}
+        </span>
+        {clamped != null && (
+          <ProgressBar
+            className="mt-3 mb-2"
+            size="sm"
+            value={clamped}
+            aria-label={typeof title === "string" ? `${title} 进度` : "任务进度"}
+          />
+        )}
+        {(footnote != null || readout != null || meta != null) && (
+          <span
+            data-ow-part="footer"
+            className="flex items-center justify-between gap-2 text-[length:var(--ow-fs-ui)] leading-none text-[color:var(--ow-text-3)]"
+          >
+            {/* R2 复审修：footnote 是「n/N 步」这类读数，原来是 sans，与右侧耗时（mono）
+                一行两种字。读数一律 mono ＋ tabular-nums（§7，本件头注释也明列步数）。
+                回退位的 meta 是人话短句，不是读数，仍走 sans。 */}
+            <span className={cn("min-w-0 truncate", footnote != null && richReadoutClass)}>{footnote ?? meta}</span>
+            {readout != null && (
+              <span data-ow-part="readout" className={cn("shrink-0 text-[color:var(--ow-text-2)]", richReadoutClass)}>
+                {readout}
+              </span>
+            )}
+          </span>
+        )}
+      </>
+    )
+
+    const taskClass = cn(richSurfaceClass, "my-2 block max-w-[460px] p-3.5", className)
+    if (onClick) {
+      return (
+        <button
+          data-slot="rich-card"
+          data-ow-variant="task"
+          type="button"
+          disabled={disabled}
+          onClick={onClick}
+          className={cn(taskClass, richInteractiveClass)}
+        >
+          {body}
+        </button>
+      )
+    }
+    return (
+      <div data-slot="rich-card" data-ow-variant="task" className={taskClass}>
+        {body}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-slot="rich-card"
+      data-ow-variant="note"
+      className={cn(richSurfaceClass, "my-2 max-w-[460px] p-3.5", className)}
+    >
+      <div
+        data-ow-part="title"
+        className="text-[length:var(--ow-fs-ui)] font-semibold leading-[1.35] text-[color:var(--ow-text)]"
+      >
+        {title}
+      </div>
+      {meta != null && (
+        <div
+          data-ow-part="meta"
+          className="mt-1 text-[length:var(--ow-fs-body-sm)] leading-[1.45] text-[color:var(--ow-text-3)]"
+        >
+          {meta}
+        </div>
+      )}
+      {children}
+      {href && (
+        <RichLink href={href} className="mt-2">
+          {linkLabel}
+        </RichLink>
+      )}
+    </div>
+  )
+}
+
+/* ───────────────────── 旧件薄兼容导出（迁移期） ───────────────────── */
+
+/** @deprecated 用 `<RichCard variant="detail">`。 */
+export function RichDetail(props: Omit<RichCardProps, "variant">) {
+  return <RichCard {...props} variant="detail" />
+}
+
+/** @deprecated 用 `<RichCard variant="note">`。 */
+export function NoteCard(props: Omit<RichCardProps, "variant">) {
+  return <RichCard {...props} variant="note" />
+}
+
+/** @deprecated 用 `<RichCard variant="task">`。 */
+export function TaskRef(props: Omit<RichCardProps, "variant">) {
+  return <RichCard {...props} variant="task" />
+}
+
+/** @deprecated 用 `<RichList variant="resource">`。 */
+export function ProductList({ items, className, ...rest }: Omit<RichResourceListProps, "variant">) {
+  return <RichList variant="resource" items={items} className={className} {...rest} />
+}
+
+/** @deprecated 旧 ProductList 的行数据类型，改用 `RichResourceItem`。 */
+export type ProductListItem = RichResourceItem

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

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { TranscriptSpine } from "../TranscriptSpine"
+import { SubAgentThread } from "./index"
+
+const meta = {
+  title: "Chat/SubAgentThread",
+  component: SubAgentThread,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SubAgentThread>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 规格卡演示形态：运行中=--ow-beacon-idle 1.5px 空环、排队=--ow-pending 实点，一律无彩＋文字标签。 */
+export const SpecCard: Story = {
+  args: {
+    processes: [
+      { name: "竞品定价梳理", status: "running", duration: "3m12s" },
+      { name: "门店样本回收", status: "running", duration: "1m47s" },
+      { name: "汇总对照草稿", status: "queued" },
+    ],
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 420 }}>
+      <SubAgentThread {...args} />
+    </div>
+  ),
+}
+
+/** 运行/完成/排队混排：已完成=--ow-text-3 实点＋「已完成」，不引入 success 色——列表无彩是硬规则。 */
+export const MixedStatuses: Story = {
+  args: {
+    processes: [
+      { name: "竞品定价梳理", status: "done", duration: "6m03s" },
+      { name: "门店样本回收", status: "running", duration: "4m21s" },
+      { name: "渠道毛利测算", status: "running", duration: "0m38s" },
+      { name: "汇总对照草稿", status: "queued" },
+    ],
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 420 }}>
+      <SubAgentThread {...args} />
+    </div>
+  ),
+}
+
+/** 全部完成：整列灰阶实点，耗时读数 mono·tabular-nums 右对齐。 */
+export const AllDone: Story = {
+  args: {
+    processes: [
+      { name: "竞品定价梳理", status: "done", duration: "6m03s" },
+      { name: "门店样本回收", status: "done", duration: "5m12s" },
+      { name: "汇总对照草稿", status: "done", duration: "1m40s" },
+    ],
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 420 }}>
+      <SubAgentThread {...args} />
+    </div>
+  ),
+}
+
+/** 单行运行中：最小形态。 */
+export const SingleRunning: Story = {
+  args: {
+    processes: [{ name: "门店样本回收", status: "running", duration: "0m12s" }],
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 420 }}>
+      <SubAgentThread {...args} />
+    </div>
+  ),
+}
+
+/** 铁律 1 对照：主会话 transcript 内子 agent 不单独造形——就是 TranscriptSpine 工具调用同款行（name="subagent"）。 */
+export const InTranscriptRule: Story = {
+  args: {
+    processes: [
+      { name: "竞品定价梳理", status: "running", duration: "3m12s" },
+      { name: "门店样本回收", status: "running", duration: "1m47s" },
+      { name: "汇总对照草稿", status: "queued" },
+    ],
+  },
+  render: (args) => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10, maxWidth: 560 }}>
+      <div style={{ fontSize: 10, color: "var(--ow-text-3)" }}>主会话 transcript 内 —— 工具调用同款行</div>
+      <div
+        style={{
+          background: "var(--ow-surface)",
+          border: "1px solid var(--ow-border)",
+          borderRadius: "var(--ow-radius-lg)",
+          padding: "12px 14px",
+        }}
+      >
+        <TranscriptSpine
+          turns={[
+            {
+              role: "agent",
+              summary: "拆出两个子任务并行推进",
+              steps: 5,
+              duration: "进行中",
+              collapsed: false,
+              tools: [
+                { name: "web_search", target: "高端零售 定价策略 案例", duration: "1.2s" },
+                { name: "subagent", target: "竞品定价梳理", duration: "运行中 · 3m12s" },
+                { name: "subagent", target: "门店样本回收", duration: "运行中 · 1m47s" },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <div style={{ fontSize: 10, color: "var(--ow-text-3)" }}>右侧工作区 —— 进程列表（一律无彩）</div>
+      <SubAgentThread {...args} />
+    </div>
+  ),
+}

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

@@ -0,0 +1,104 @@
+import type { CSSProperties } from "react"
+
+export type SubAgentProcessStatus = "running" | "queued" | "done"
+
+export type SubAgentProcess = {
+  name: string
+  status: SubAgentProcessStatus
+  /** mono 耗时读数（tabular-nums，右对齐），缺省显示 "—" */
+  duration?: string
+}
+
+export type SubAgentThreadProps = {
+  processes: SubAgentProcess[]
+  className?: string
+}
+
+/**
+ * 并行子 agent 进程列表（右侧工作区）。两条铁律：
+ * 1. 主会话内不单独造形——transcript 里子 agent 就是工具调用同款行（由 TranscriptSpine
+ *    的 tools 明细承担，name="subagent"），本组件不负责。
+ * 2. 进程列表一律无彩：运行中=var(--ow-beacon-idle) 1.5px 空环、排队=var(--ow-pending)
+ *    实点、已完成=var(--ow-text-3) 实点，状态必伴文字标签（R1 双编码）。
+ *    荧黄只属聚焦的那一件事，列表永不点亮；不引入 info 蓝/success 色。
+ * 行高 31px，1px --ow-border 分隔；容器=surface 卡（1px border，radius 12）。
+ */
+export function SubAgentThread({ processes, className = "" }: SubAgentThreadProps) {
+  return (
+    <div data-slot="sub-agent-thread" className={className} style={listStyle}>
+      {processes.map((proc, i) => (
+        <div
+          key={i}
+          data-ow-part="row"
+          data-status={proc.status}
+          style={i === 0 ? rowStyle : { ...rowStyle, borderTop: "1px solid var(--ow-border)" }}
+        >
+          <span data-ow-part="name" style={nameStyle}>
+            {proc.name}
+          </span>
+          <span data-ow-part="dot" aria-hidden="true" style={dotStyles[proc.status]} />
+          <span data-ow-part="status" style={statusStyle}>
+            {STATUS_LABEL[proc.status]}
+          </span>
+          <span data-ow-part="duration" style={durationStyle}>
+            {proc.duration ?? "—"}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const STATUS_LABEL: Record<SubAgentProcessStatus, string> = {
+  running: "运行中",
+  queued: "排队",
+  done: "已完成",
+}
+
+const listStyle: CSSProperties = {
+  background: "var(--ow-surface)",
+  border: "1px solid var(--ow-border)",
+  borderRadius: "var(--ow-radius-lg)",
+  padding: "2px 14px",
+  fontFamily: "var(--ow-font-body)",
+}
+
+const rowStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  height: 31,
+}
+
+const nameStyle: CSSProperties = {
+  fontSize: 12.5,
+  color: "var(--ow-text)",
+  flex: 1,
+}
+
+const dotBase: CSSProperties = {
+  width: 7,
+  height: 7,
+  borderRadius: "50%",
+  flex: "none",
+}
+
+const dotStyles: Record<SubAgentProcessStatus, CSSProperties> = {
+  running: { ...dotBase, border: "1.5px solid var(--ow-beacon-idle)" },
+  queued: { ...dotBase, background: "var(--ow-pending)" },
+  done: { ...dotBase, background: "var(--ow-text-3)" },
+}
+
+const statusStyle: CSSProperties = {
+  fontSize: 10.5,
+  color: "var(--ow-text-2)",
+}
+
+const durationStyle: CSSProperties = {
+  fontFamily: "var(--ow-font-mono)",
+  fontSize: 10.5,
+  color: "var(--ow-text-2)",
+  width: 46,
+  textAlign: "right",
+  fontVariantNumeric: "tabular-nums",
+}