@orbit-work/ui 0.1.1 → 0.1.2

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

@@ -1,465 +0,0 @@
-"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

@@ -1,119 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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",
-}