@orbit-work/ui 0.1.0

package/src/components/domain/tasks/ScheduledTaskDetailView/ScheduledTaskDetailViewSource.test.mjs

@@ -0,0 +1,115 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const detailSource = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const listSource = await readFile(new URL("../ScheduledTasksSpaceView/index.tsx", import.meta.url), "utf8")
+const cardSource = await readFile(new URL("../ScheduledTaskCardView/index.tsx", import.meta.url), "utf8")
+const css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+/** cron 族的状态章三处：卡片 .cjc-dot / 详情 .cd-stat / 运行记录 .rdot。 */
+const STATUS_BADGES = [".cjc-dot", ".cd-stat", ".rdot", ".wcron .dot"]
+
+test("scheduled task list and detail own the same page panel", () => {
+  assert.match(listSource, /<div className="page cron-space">/)
+  assert.match(detailSource, /<div className="page cron-space">/)
+})
+
+test("W3-4 · §4 R1：cron 族状态章一律 tint 底 + on-tint 字，禁实底、禁 -bg alpha 档", () => {
+  for (const base of STATUS_BADGES) {
+    const rules = [...css.matchAll(new RegExp(`\\${base}(\\.[\\w-]+)? \\{[^}]*\\}`, "g"))].map((m) => m[0])
+    assert.ok(rules.length > 0, `找不到 ${base} 的规则`)
+    for (const rule of rules) {
+      assert.doesNotMatch(rule, /var\(--ow-(info|success|warning|error)-bg\)/, `${base} 仍在吃 -bg alpha 档：${rule}`)
+      assert.doesNotMatch(
+        rule,
+        /background: var\(--ow-(info|success|warning|error)(-fill)?\)/,
+        `${base} 仍是实底：${rule}`,
+      )
+      // 功能色只许以 -tint（底）/ -on-tint（字）两种形态出现
+      for (const [, token] of rule.matchAll(/var\(--ow-(?:info|success|warning|error)([\w-]*)\)/g)) {
+        assert.ok(["-tint", "-on-tint"].includes(token), `${base} 出现非 tint 档功能色 --ow-*${token}：${rule}`)
+      }
+    }
+  }
+})
+
+test("W3-4：22px / 20px 圆形按 Terry 待裁口径保留，本轮只统一颜色语法", () => {
+  const cjc = css.match(/\.cjc-dot \{[^}]*\}/)
+  assert.ok(cjc)
+  assert.match(cjc[0], /width: 22px; height: 22px; border-radius: var\(--ow-radius-pill\)/)
+  const rdot = css.match(/\.rdot \{[^}]*\}/)
+  assert.ok(rdot)
+  assert.match(rdot[0], /width: 20px; height: 20px; border-radius: var\(--ow-radius-pill\)/)
+  assert.match(css, /Terry 待裁口径/)
+})
+
+test("W3-4 R1：每一档状态都有文字编码——none 档的空 label 由兜底文案接住", () => {
+  assert.match(cardSource, /const STATUS_FALLBACK_LABEL: Record<ScheduledTaskCardStatus\["key"\], string>/)
+  for (const label of ["运行中", "上次成功", "上次失败", "已暂停", "从未运行"]) {
+    assert.ok(cardSource.includes(`"${label}"`), `缺少兜底状态文案：${label}`)
+  }
+  assert.match(cardSource, /const statusLabel = task\.status\.label \|\| STATUS_FALLBACK_LABEL\[task\.status\.key\]/)
+  assert.match(cardSource, /<span className=\{`cjc-stat \$\{task\.status\.key\}`\}>\{statusLabel\}<\/span>/)
+  // 详情页状态章有中性基线，未列举的 statusKey（waiting）不会退成裸文字
+  const cdBase = css.match(/\.cd-stat \{[^}]*\}/)
+  assert.ok(cdBase)
+  assert.match(cdBase[0], /background: var\(--ow-surface-2\); color: var\(--ow-text-2\)/)
+})
+
+test("W3-4：状态文字档不再落 --ow-text-3（浅档 2.29:1 不过 4.5:1）", () => {
+  for (const rule of [/\.cjc-stat\.paused \{[^}]*\}/, /\.cjc-stat\.none \{[^}]*\}/, /\.rstat \{[^}]*\}/]) {
+    const m = css.match(rule)
+    assert.ok(m, `找不到规则 ${rule}`)
+    assert.doesNotMatch(m[0], /--ow-text-3/)
+  }
+})
+
+// ── W5 残留清扫：「加载更多」不再 unstyled ＋ 手接共享 .btn 段 ──
+
+test("§6：分页钮走 Button 正规变体（ghost·sm），状态全集由原语自带", () => {
+  assert.match(
+    detailSource,
+    /<Button variant="ghost" size="sm" disabled=\{loadingMoreRuns\} onClick=\{onLoadMoreRuns\}>/,
+  )
+  assert.doesNotMatch(detailSource, /variant="unstyled" className="btn"/)
+})
+
+// ── R2 修补 ──
+
+// 判据 HARD#9：时间戳必须 mono ＋ tabular-nums。同一个 nextRunLabel 在页头 .ch-s 里
+// 已经是 mono，摘要卡这格漏传就成了同一读数同屏两种字体。
+test("§7 读数：「下次执行」时间戳走 mono", () => {
+  assert.match(detailSource, /<DetailField label="下次执行" value=\{task\.nextRunLabel\} mono \/>/)
+})
+
+// W3 卡骨架收口口径：容器 14 · 1px --ow-border · r12（--ow-radius-card）· 零影。
+test("卡骨架：.cd-summary 收 14 内距 ＋ --ow-radius-card ＋ 1px --ow-border", () => {
+  assert.match(css, /\.cron-space \.cd-summary \{[^}]*border-radius: var\(--ow-radius-card\);[^}]*padding: 14px;/s)
+  assert.doesNotMatch(css, /\.cd-summary \{[^}]*border-radius: var\(--ow-radius-xl\)/s)
+  assert.doesNotMatch(css, /\.cd-summary \{[^}]*padding: 22px/s)
+})
+
+// 贴地的运行记录列表走卡/列表档，不借模态语义 token。
+test("语义 token 归档：.run-list 走 --ow-radius-card，不借 --ow-radius-modal", () => {
+  assert.match(css, /\.cron-space \.run-list \{[^}]*border-radius: var\(--ow-radius-card\);/s)
+  assert.doesNotMatch(css, /\.run-list \{[^}]*border-radius: var\(--ow-radius-modal\)/s)
+})
+
+// 死码：.cron-detail 宿主全仓零渲染方（组件挂的是 .cron-detail__head，是另一个类）。
+test("死码清除：.cron-detail .run-list 副本退场", () => {
+  assert.doesNotMatch(css, /\.cron-detail \.run-list/)
+})
+
+// 空挂钩：.cd-empty 全仓无任何 CSS 规则。
+test("空挂钩清除：EmptyState 不再挂 .cd-empty", () => {
+  assert.doesNotMatch(detailSource, /className="cd-empty"/)
+  assert.doesNotMatch(css, /\.cd-empty/)
+})
+
+// 18/22/26/28 不在 --ow-space-* 刻度上。
+test("§7 间距刻度：cd-grid / cd-prompt / cd-section 归 --ow-space-*", () => {
+  assert.doesNotMatch(css, /\.cd-grid \{[^}]*gap: 18px 28px;/s)
+  assert.doesNotMatch(css, /\.cd-prompt \{[^}]*margin-top: 18px;/s)
+  assert.doesNotMatch(css, /\.cd-section \{ margin-top: 26px; \}/)
+})

package/src/components/domain/tasks/ScheduledTaskDetailView/index.tsx

@@ -0,0 +1,223 @@
+import type { ReactNode } from "react"
+import { BackButton } from "../../../composite/BackButton"
+import { BeaconSpinner } from "../../../composite/BeaconSpinner"
+import { Check, ChevDown, ChevRight, Close, Edit, Pause, Play, Trash } from "../../../composite/Icons"
+import { Button, EmptyState } from "../../../primitives"
+
+export type ScheduledTaskDetailStatusKey = "running" | "done" | "failed" | "paused" | "waiting" | string
+export type ScheduledTaskRunStatusKey = "running" | "done" | "failed" | ""
+
+export interface ScheduledTaskDetailModel {
+  name: string
+  scheduleLabel: string
+  nextRunLabel: string
+  statusKey: ScheduledTaskDetailStatusKey
+  statusLabel: string
+  modelName: string
+  projectName: string
+  notifyTargetLabel?: string
+  paused: boolean
+  promptPreview?: ReactNode
+}
+
+export interface ScheduledTaskRunViewModel {
+  id: string
+  turnLabel: string
+  statusKey: ScheduledTaskRunStatusKey
+  statusLabel: string
+  when: string
+  summary: string
+  sessionId?: string
+}
+
+export interface ScheduledTaskDetailViewProps {
+  task: ScheduledTaskDetailModel
+  runs: ScheduledTaskRunViewModel[]
+  runningNow?: boolean
+  hasMoreRuns?: boolean
+  loadingMoreRuns?: boolean
+  runPageError?: string | null
+  onBack: () => void
+  onRunNow: () => void
+  onEdit: () => void
+  onToggle: () => void
+  onDelete: () => void
+  onLoadMoreRuns: () => void
+  onOpenSession: (sessionId: string) => void
+}
+
+export function ScheduledTaskDetailView({
+  task,
+  runs,
+  runningNow = false,
+  hasMoreRuns = false,
+  loadingMoreRuns = false,
+  runPageError,
+  onBack,
+  onRunNow,
+  onEdit,
+  onToggle,
+  onDelete,
+  onLoadMoreRuns,
+  onOpenSession,
+}: ScheduledTaskDetailViewProps): React.ReactElement {
+  return (
+    <div className="page cron-space">
+      <div className="files__head cron-detail__head">
+        <div className="cron-head__title">
+          <BackButton label="返回定时任务" onClick={onBack} />
+          <div>
+            <div className="ch-t">{task.name}</div>
+            <div className="ch-s">
+              <span className="mono">{task.scheduleLabel}</span>
+              {" · "}
+              {task.statusLabel}
+              {" · 下次 "}
+              <span className="mono">{task.nextRunLabel}</span>
+            </div>
+          </div>
+        </div>
+        <div className="cron-head__actions">
+          <Button variant="primary" icon={runningNow ? undefined : <Play />} onClick={onRunNow} disabled={runningNow}>
+            {runningNow ? "执行中…" : "立即执行"}
+          </Button>
+          <Button variant="secondary" icon={<Edit />} onClick={onEdit}>
+            编辑
+          </Button>
+          <Button variant="secondary" icon={task.paused ? <Play /> : <Pause />} onClick={onToggle}>
+            {task.paused ? "启用" : "暂停"}
+          </Button>
+          <Button variant="danger" icon={<Trash />} onClick={onDelete}>
+            删除
+          </Button>
+        </div>
+      </div>
+
+      <div className="cron-scroll">
+        <div className="cd-summary">
+          <div className="cd-grid">
+            <DetailField label="重复频率" value={task.scheduleLabel} mono />
+            {/* 时间戳是 §7 读数：mono ＋ tabular-nums。同一个值在页头 .ch-s 里已经是 mono，
+                这里漏传就成了同一读数同屏两种字体（判据 HARD#9）。 */}
+            <DetailField label="下次执行" value={task.nextRunLabel} mono />
+            <div className="cd-field">
+              <div className="k">状态</div>
+              <div className="v">
+                <span className={`cd-stat ${task.statusKey}`}>
+                  {/* §9 旋转圈退役：状态 chip 里的 12px 自转环 → BeaconSpinner size=12
+                      （<20px 小转子，描边随 chip 文字色）；紧跟的 statusLabel 出文字编码。
+                      W3-4：.cd-stat 底统一 tint 档 + on-tint 字，未列举的 statusKey
+                      （如 waiting）落中性章基线，不再是一段裸文字。 */}
+                  {task.statusKey === "running" && <BeaconSpinner size={12} />}
+                  {task.statusLabel}
+                </span>
+              </div>
+            </div>
+            <DetailField label="执行模型" value={task.modelName} />
+            <DetailField label="所属项目" value={task.projectName} />
+            {task.notifyTargetLabel && <DetailField label="完成后通知" value={task.notifyTargetLabel} />}
+          </div>
+          {task.promptPreview && (
+            <div className="cd-prompt">
+              <div className="k">任务指令</div>
+              {task.promptPreview}
+            </div>
+          )}
+        </div>
+
+        <div className="cd-section">
+          <div className="cd-section__lbl">
+            运行记录<span className="cd-hint">点击某次运行可跳转到对应会话</span>
+          </div>
+          {runs.length === 0 ? (
+            /* A5-B3：运行记录这一段落原型走的是**卡片式空态**（1px --ow-border ＋ radius-lg
+               ＋ surface 底 ＋ 居中一句，无母题无钮；原型 template.dc.html L1841）——它替的是
+               一张列表卡的位置，所以要占住那块面，而不是在空气里摆一枚母题。
+               文案同步换成原型那句：说清「恢复之后会怎样」，不是「尚未运行」这种状态读数。 */
+            <EmptyState variant="card" message="还没跑过。恢复之后到点会自己开一段会话。" />
+          ) : (
+            <div className="run-list">
+              {runs.map((run) => (
+                <Button
+                  variant="unstyled"
+                  key={run.id}
+                  className={`run-row run-row--btn${run.statusKey === "running" ? " running" : ""}`}
+                  onClick={() => run.sessionId && onOpenSession(run.sessionId)}
+                >
+                  <div className="run-turn">
+                    <span className="ix">#{run.turnLabel}</span>
+                    <span className={`rdot ${run.statusKey}`}>
+                      {/* §9 旋转圈退役：运行记录行首的 .spin → BeaconSpinner size=13，
+                          与同槽 svg(12px) 齐平；右侧 .rstat 文案出 R1 文字编码。
+                          W3-4：圆形保留（Terry 待裁），底统一 tint 档 + on-tint 图形色。 */}
+                      {run.statusKey === "running" ? (
+                        <BeaconSpinner size={13} />
+                      ) : run.statusKey === "done" ? (
+                        <Check />
+                      ) : run.statusKey === "failed" ? (
+                        <Close />
+                      ) : null}
+                    </span>
+                  </div>
+                  <div className="run-meta">
+                    <div className="rwhen">
+                      {run.when}
+                      <span className={`rstat ${run.statusKey}`}>{run.statusLabel}</span>
+                    </div>
+                    <div className="rsum">{run.summary}</div>
+                  </div>
+                  <div className="run-right">
+                    <ChevRight className="rgo" />
+                  </div>
+                </Button>
+              ))}
+              {(hasMoreRuns || runPageError) && (
+                <div className="run-list__footer">
+                  {runPageError && (
+                    <div
+                      data-ow-part="error"
+                      className="text-ow-error font-normal text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-sans)]"
+                      role="alert"
+                    >
+                      加载运行记录失败：{runPageError}
+                    </div>
+                  )}
+                  {hasMoreRuns && (
+                    /* §6/§10：原来是 variant="unstyled" ＋ 手接共享 .btn 段——绕开 Button 变体
+                       就等于绕开 hover/press/focus-visible/disabled 全套状态。改 ghost 正规变体
+                       （中性文字钮，28 高在 §7 控件高表内，状态全集由原语自带）。 */
+                    <Button variant="ghost" size="sm" disabled={loadingMoreRuns} onClick={onLoadMoreRuns}>
+                      {loadingMoreRuns ? (
+                        <>
+                          {/* §9 旋转圈退役：分页「加载中」的 .spin → BeaconSpinner size=13。 */}
+                          <BeaconSpinner size={13} /> 加载中…
+                        </>
+                      ) : (
+                        <>
+                          <ChevDown /> 加载更多
+                        </>
+                      )}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DetailField({
+  label,
+  value,
+  mono = false,
+}: { label: string; value: string; mono?: boolean }): React.ReactElement {
+  return (
+    <div className="cd-field">
+      <div className="k">{label}</div>
+      <div className={`v${mono ? " mono" : ""}`}>{value}</div>
+    </div>
+  )
+}