mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-17 20:09:05 +02:00
feat(ui): single-source design tokens, visual regression suite, and theme retune (#9134)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - Its UI is the operator's daily surface: task lists, boards, budgets, agent status — all built on shadcn components and Tailwind > - Visual values (colors, spacing, type sizes, radii) were hardcoded at ~1,600 call sites: the same "small gray label" was 9/10/11px depending on the file, charts disagreed with chips about status colors, two toggle-switch implementations coexisted in two greens, and there was no visual regression coverage > - This made the UI drift-prone and made any restyle a hundreds-of-files project, which discourages design iteration > - This pull request extracts visual values into a single token layer in `ui/src/index.css`, adds a Storybook visual regression suite backed by external immutable baseline archives, and then applies a deliberate retune reviewed change-by-change on screenshot diffs > - The benefit is that Paperclip's look becomes a config surface: retheming is a token edit reviewed as a snapshot diff, drift is blocked by a token gate, and future UI PRs can prove exactly what changed visually without committing hundreds of PNGs ## Linked Issues or Issue Description No existing public issue covers this work (searched "design tokens", "visual regression", "design system" across issues and PRs). Related in spirit: Refs #8982 (theming a hardcoded panel — a one-off instance of the same problem class this PR addresses systematically). **Problem (feature-request form):** UI visual values are hardcoded per call site with no source of truth and no regression coverage; consistency depends on reviewer memory, and restyling requires mass file edits. **Proposed solution (this PR):** a single token layer + enforcement gate + externally stored visual snapshot suite, then an intentional restyle on top of that foundation. ## What Changed - **Token extraction (zero visual change, machine-verified during development):** committed codemods (`scripts/codemod-*.mjs`) moved ~1,600 hardcoded color/type/spacing/radius/shadow/misc values into named tokens in a non-inline `:root` block of `ui/src/index.css`. - **Visual regression suite:** `pnpm test:storybook-visual` covers 255 stories × light/dark = 510 Playwright screenshots at `maxDiffPixels: 0`, plus new primitive-coverage stories and deterministic-render fixes. - **External visual baselines:** committed PNG snapshots were removed. `tests/storybook-visual/baseline-manifest.json` pins an immutable archive URL/hash/size/count, and `scripts/storybook-visual-baseline.mjs` handles `download`, `verify`, `pack`, and trusted maintainer `upload` flows. - **Opt-in visual CI artifacts:** added a `Storybook Visual` workflow that runs on manual dispatch or PRs labeled `storybook-visual`, downloads/verifies the baseline, runs Playwright, and uploads Playwright report/test-result artifacts for review. Normal PR runs do not mutate baseline objects. - **Token gate:** `pnpm check:token-gates` — zero hex literals, zero arbitrary bracket values, zero raw font-sizes in `ui/src/components/**` and `ui/src/pages/**`, with a documented inline allowlist for legitimate opt-outs. - **Theme retune (intentional, snapshot-reviewed):** new base theme values; radius ladder derived from a single `--radius` knob; micro-type cluster collapsed to a named ladder (`--text-nano/micro/compact` + Tailwind `text-xs`/`text-sm`); letter-spacing collapsed to named steps. - **One status-color vocabulary:** charts, quota/budget bar fills, RUNNING/live chips, and liveness indicators all use the canonical `--status-*` hues. Light-mode legibility fixes for red alert surfaces that used dark-tuned text classes. - **One switch:** `ToggleSwitch` restyled to the registry capsule form, second hand-rolled implementation removed, and all call sites unified. - **Docs:** `DESIGN.md` is the design contract; `doc/design/` holds audit reports, decision logs, and updated guidance for external baseline review/update workflows. - Dead code removed (`agentStatusBadge` duplicate map), byte-identical contrast constants consolidated, semantic renames (`--project-seed`/`--project-none`, `--liveness-blue`). ## Verification - `pnpm check:token-gates` — 3/3 gates CLEAN during the design-system run - `pnpm typecheck` && `pnpm --filter @paperclipai/ui build` — green during the design-system run - `node --test scripts/__tests__/storybook-visual-baseline.test.mjs` — pass after external-baseline rework - `pnpm exec tsc --noEmit --pretty false --module NodeNext --moduleResolution NodeNext --target ES2022 --types node,@playwright/test tests/storybook-visual/playwright.config.ts tests/storybook-visual/storybook-visual.spec.ts` — pass after external-baseline rework - `git diff --check origin/pr/9134..HEAD` — pass after external-baseline rework - `find tests/storybook-visual -type f -name '*.png' -print | wc -l` — `0` - `node scripts/storybook-visual-baseline.mjs verify` — intentionally fails closed until the first trusted maintainer publishes the baseline archive and updates `baseline-manifest.json` ## Risks - **Large but shallow:** the PR still touches many UI files due to mechanical token extraction and retune work, but committed PNG snapshot churn has been removed from the branch. - **Baseline publication required before the visual suite can pass in clean clones:** the manifest currently has placeholder archive metadata. A trusted maintainer must publish the first immutable archive, then update `baseline-manifest.json`. - **Rendering platform variance:** the external baseline should be captured in the documented Linux/Chromium environment. Future CI runs verify against the pinned archive and fail closed on checksum/count mismatch. - **Visual CI is opt-in while stabilizing:** add the `storybook-visual` label or dispatch the workflow manually to produce downloadable Playwright report/test-result artifacts. - **Scheduled follow-ups, deliberately out of scope:** Tailwind palette classes map to semantic tokens in a dedicated pass; card/pill component consolidation; ESLint ratchet. Tracked in `doc/design/DECISION-SHEET.md`. ## Model Used Claude Fable 5 (Anthropic, `claude-fable-5`, Mythos-class tier) with extended thinking, running in Claude Code with tool use; mechanical phases delegated to Claude Sonnet subagents. Follow-up external-baseline rework assisted by OpenAI Codex (`gpt-5` coding agent with repository, terminal, and GitHub tool use). All bulk rewrites executed via deterministic, idempotent scripts committed in `scripts/`; intentional visual changes were human-reviewed on screenshot contact sheets. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run targeted local verification and documented the intentional baseline-publication failure above - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green *(pending new CI run after this rework)* - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups *(pending review)* - [x] I will address all Greptile and reviewer comments before requesting merge 🤖 Generated with [Claude Code](https://claude.com/claude-code) and OpenAI Codex --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Dotta <bippadotta@protonmail.com> Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
270 files changed
+6946
-1538
No files matched your search
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { TranscriptEntry } from "../../adapters";
|
||||
import { MarkdownBody, type MarkdownExternalReferenceMap } from "../MarkdownBody";
|
||||
import { cn, formatTokens } from "../../lib/utils";
|
||||
import { runningLabelText } from "../../lib/status-colors";
|
||||
import {
|
||||
Check,
|
||||
ChevronDown,
|
||||
@@ -673,7 +674,7 @@ function TranscriptMessageBlock({
|
||||
return (
|
||||
<div>
|
||||
{!isAssistant && (
|
||||
<div className="mb-1.5 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<div className="mb-1.5 flex items-center gap-2 text-(length:--text-micro) font-semibold uppercase tracking-(--tracking-caps) text-muted-foreground">
|
||||
<User className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} />
|
||||
<span>User</span>
|
||||
</div>
|
||||
@@ -688,7 +689,7 @@ function TranscriptMessageBlock({
|
||||
{block.text}
|
||||
</MarkdownBody>
|
||||
{block.streaming && (
|
||||
<div className="mt-2 inline-flex items-center gap-1 text-[10px] font-medium italic text-muted-foreground">
|
||||
<div className="mt-2 inline-flex items-center gap-1 text-(length:--text-nano) font-medium italic text-muted-foreground">
|
||||
<span className="relative flex h-1.5 w-1.5">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-70" />
|
||||
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
|
||||
@@ -715,7 +716,7 @@ function TranscriptThinkingBlock({
|
||||
<MarkdownBody
|
||||
className={cn(
|
||||
"italic text-foreground/70 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
|
||||
density === "compact" ? "text-[11px] leading-5" : "text-sm leading-6",
|
||||
density === "compact" ? "text-(length:--text-micro) leading-5" : "text-sm leading-6",
|
||||
className,
|
||||
)}
|
||||
externalReferences={externalReferences}
|
||||
@@ -743,7 +744,7 @@ function TranscriptToolCard({
|
||||
: "Completed";
|
||||
const statusTone =
|
||||
block.status === "running"
|
||||
? "text-cyan-700 dark:text-cyan-300"
|
||||
? "text-blue-700 dark:text-blue-300"
|
||||
: block.status === "error"
|
||||
? "text-red-700 dark:text-red-300"
|
||||
: "text-emerald-700 dark:text-emerald-300";
|
||||
@@ -757,7 +758,7 @@ function TranscriptToolCard({
|
||||
? "text-red-600 dark:text-red-300"
|
||||
: block.status === "completed"
|
||||
? "text-emerald-600 dark:text-emerald-300"
|
||||
: "text-cyan-600 dark:text-cyan-300",
|
||||
: "text-blue-600 dark:text-blue-300",
|
||||
);
|
||||
const summary = block.status === "running"
|
||||
? summarizeToolInput(block.name, block.input, density)
|
||||
@@ -777,10 +778,10 @@ function TranscriptToolCard({
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<span className="text-(length:--text-micro) font-semibold uppercase tracking-(--tracking-caps) text-muted-foreground">
|
||||
{block.name}
|
||||
</span>
|
||||
<span className={cn("text-[10px] font-semibold uppercase tracking-[0.14em]", statusTone)}>
|
||||
<span className={cn("text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-eyebrow)", statusTone)}>
|
||||
{statusLabel}
|
||||
</span>
|
||||
</div>
|
||||
@@ -802,19 +803,19 @@ function TranscriptToolCard({
|
||||
<div className={detailsClass}>
|
||||
<div className={cn("grid gap-3", compact ? "grid-cols-1" : "lg:grid-cols-2")}>
|
||||
<div>
|
||||
<div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<div className="mb-1 text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-caps) text-muted-foreground">
|
||||
Input
|
||||
</div>
|
||||
<pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] text-foreground/80">
|
||||
<pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-(length:--text-micro) text-foreground/80">
|
||||
{formatToolPayload(block.input) || "<empty>"}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<div className="mb-1 text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-caps) text-muted-foreground">
|
||||
Result
|
||||
</div>
|
||||
<pre className={cn(
|
||||
"overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px]",
|
||||
"overflow-x-auto whitespace-pre-wrap break-words font-mono text-(length:--text-micro)",
|
||||
block.status === "error" ? "text-red-700 dark:text-red-300" : "text-foreground/80",
|
||||
)}>
|
||||
{block.result ? formatToolPayload(block.result) : "Waiting for result..."}
|
||||
@@ -856,7 +857,7 @@ function TranscriptCommandGroup({
|
||||
? summarizeToolInput("command_execution", runningItem.input, density)
|
||||
: null;
|
||||
const statusTone = isRunning
|
||||
? "text-cyan-700 dark:text-cyan-300"
|
||||
? "text-blue-700 dark:text-blue-300"
|
||||
: "text-foreground/70";
|
||||
|
||||
return (
|
||||
@@ -884,7 +885,7 @@ function TranscriptCommandGroup({
|
||||
"inline-flex h-6 w-6 items-center justify-center rounded-full border shadow-sm",
|
||||
index > 0 && "-ml-1.5",
|
||||
isRunning
|
||||
? "border-cyan-500/25 bg-cyan-500/[0.08] text-cyan-600 dark:text-cyan-300"
|
||||
? "border-blue-500/25 bg-blue-500/[0.08] text-blue-600 dark:text-blue-300"
|
||||
: "border-border/70 bg-background text-foreground/55",
|
||||
isRunning && "animate-pulse",
|
||||
)}
|
||||
@@ -894,7 +895,7 @@ function TranscriptCommandGroup({
|
||||
))}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-[11px] font-semibold uppercase leading-none tracking-[0.1em] text-muted-foreground/70">
|
||||
<div className="text-(length:--text-micro) font-semibold uppercase leading-none tracking-(--tracking-label) text-muted-foreground/70">
|
||||
{title}
|
||||
</div>
|
||||
{subtitle && (
|
||||
@@ -933,18 +934,18 @@ function TranscriptCommandGroup({
|
||||
item.status === "error"
|
||||
? "border-red-500/25 bg-red-500/[0.08] text-red-600 dark:text-red-300"
|
||||
: item.status === "running"
|
||||
? "border-cyan-500/25 bg-cyan-500/[0.08] text-cyan-600 dark:text-cyan-300"
|
||||
? "border-blue-500/25 bg-blue-500/[0.08] text-blue-600 dark:text-blue-300"
|
||||
: "border-border/70 bg-background text-foreground/55",
|
||||
)}>
|
||||
<TerminalSquare className="h-3 w-3" />
|
||||
</span>
|
||||
<span className={cn("font-mono break-all", compact ? "text-[11px]" : "text-xs")}>
|
||||
<span className={cn("font-mono break-all", compact ? "text-(length:--text-micro)" : "text-xs")}>
|
||||
{summarizeToolInput("command_execution", item.input, density)}
|
||||
</span>
|
||||
</div>
|
||||
{item.result && (
|
||||
<pre className={cn(
|
||||
"overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px]",
|
||||
"overflow-x-auto whitespace-pre-wrap break-words font-mono text-(length:--text-micro)",
|
||||
item.status === "error" ? "text-red-700 dark:text-red-300" : "text-foreground/80",
|
||||
)}>
|
||||
{formatToolPayload(item.result)}
|
||||
@@ -984,7 +985,7 @@ function TranscriptToolGroup({
|
||||
? summarizeToolInput(runningItem.name, runningItem.input, density)
|
||||
: null;
|
||||
const statusTone = isRunning
|
||||
? "text-cyan-700 dark:text-cyan-300"
|
||||
? "text-blue-700 dark:text-blue-300"
|
||||
: "text-foreground/70";
|
||||
|
||||
return (
|
||||
@@ -1007,7 +1008,7 @@ function TranscriptToolGroup({
|
||||
"inline-flex h-6 w-6 items-center justify-center rounded-full border shadow-sm",
|
||||
index > 0 && "-ml-1.5",
|
||||
isItemRunning
|
||||
? "border-cyan-500/25 bg-cyan-500/[0.08] text-cyan-600 dark:text-cyan-300"
|
||||
? "border-blue-500/25 bg-blue-500/[0.08] text-blue-600 dark:text-blue-300"
|
||||
: isItemError
|
||||
? "border-red-500/25 bg-red-500/[0.08] text-red-600 dark:text-red-300"
|
||||
: "border-border/70 bg-background text-foreground/55",
|
||||
@@ -1020,7 +1021,7 @@ function TranscriptToolGroup({
|
||||
})}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className={cn("font-semibold uppercase leading-none tracking-[0.1em]", compact ? "text-[10px]" : "text-[11px]", "text-muted-foreground/70")}>
|
||||
<div className={cn("font-semibold uppercase leading-none tracking-(--tracking-label)", compact ? "text-(length:--text-nano)" : "text-(length:--text-micro)", "text-muted-foreground/70")}>
|
||||
{title}
|
||||
</div>
|
||||
{subtitle && (
|
||||
@@ -1048,16 +1049,17 @@ function TranscriptToolGroup({
|
||||
item.status === "error"
|
||||
? "border-red-500/25 bg-red-500/[0.08] text-red-600 dark:text-red-300"
|
||||
: item.status === "running"
|
||||
? "border-cyan-500/25 bg-cyan-500/[0.08] text-cyan-600 dark:text-cyan-300"
|
||||
? "border-blue-500/25 bg-blue-500/[0.08] text-blue-600 dark:text-blue-300"
|
||||
: "border-border/70 bg-background text-foreground/55",
|
||||
)}>
|
||||
<Wrench className="h-3 w-3" />
|
||||
</span>
|
||||
<span className={cn("text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground")}>
|
||||
<span className={cn("text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-eyebrow) text-muted-foreground")}>
|
||||
{humanizeLabel(item.name)}
|
||||
</span>
|
||||
<span className={cn("text-[10px] font-semibold uppercase tracking-[0.14em]",
|
||||
item.status === "running" ? "text-cyan-700 dark:text-cyan-300"
|
||||
<span className={cn("text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-eyebrow)",
|
||||
// Gallery feedback r1: running label uses brand blue, not cyan.
|
||||
item.status === "running" ? runningLabelText
|
||||
: item.status === "error" ? "text-red-700 dark:text-red-300"
|
||||
: "text-emerald-700 dark:text-emerald-300"
|
||||
)}>
|
||||
@@ -1066,16 +1068,16 @@ function TranscriptToolGroup({
|
||||
</div>
|
||||
<div className={cn("grid gap-2 pl-7", compact ? "grid-cols-1" : "lg:grid-cols-2")}>
|
||||
<div>
|
||||
<div className="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Input</div>
|
||||
<pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] text-foreground/80">
|
||||
<div className="mb-0.5 text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-caps) text-muted-foreground">Input</div>
|
||||
<pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-(length:--text-micro) text-foreground/80">
|
||||
{formatToolPayload(item.input) || "<empty>"}
|
||||
</pre>
|
||||
</div>
|
||||
{item.result && (
|
||||
<div>
|
||||
<div className="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Result</div>
|
||||
<div className="mb-0.5 text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-caps) text-muted-foreground">Result</div>
|
||||
<pre className={cn(
|
||||
"overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px]",
|
||||
"overflow-x-auto whitespace-pre-wrap break-words font-mono text-(length:--text-micro)",
|
||||
item.status === "error" ? "text-red-700 dark:text-red-300" : "text-foreground/80",
|
||||
)}>
|
||||
{formatToolPayload(item.result)}
|
||||
@@ -1104,8 +1106,8 @@ function TranscriptActivityRow({
|
||||
<Check className="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-300" />
|
||||
) : (
|
||||
<span className="relative mt-1 flex h-2.5 w-2.5 shrink-0">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-cyan-400 opacity-70" />
|
||||
<span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-cyan-500" />
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-70" />
|
||||
<span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-blue-500" />
|
||||
</span>
|
||||
)}
|
||||
<div className={cn(
|
||||
@@ -1145,29 +1147,29 @@ function TranscriptEventRow({
|
||||
) : block.tone === "warn" ? (
|
||||
<TerminalSquare className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
||||
) : (
|
||||
<span className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-current/50" />
|
||||
<span className="mt-(--sz-7px) h-1.5 w-1.5 shrink-0 rounded-full bg-current/50" />
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
{block.label === "result" && block.tone !== "error" ? (
|
||||
<MarkdownBody
|
||||
className={cn(
|
||||
"[&>*:first-child]:mt-0 [&>*:last-child]:mb-0 text-sky-700 dark:text-sky-300",
|
||||
compact ? "text-[11px] leading-5" : "text-xs leading-5",
|
||||
compact ? "text-(length:--text-micro) leading-5" : "text-xs leading-5",
|
||||
)}
|
||||
externalReferences={externalReferences}
|
||||
>
|
||||
{block.text}
|
||||
</MarkdownBody>
|
||||
) : (
|
||||
<div className={cn("whitespace-pre-wrap break-words", compact ? "text-[11px]" : "text-xs")}>
|
||||
<span className="text-[10px] font-semibold uppercase tracking-[0.1em] text-muted-foreground/70">
|
||||
<div className={cn("whitespace-pre-wrap break-words", compact ? "text-(length:--text-micro)" : "text-xs")}>
|
||||
<span className="text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-label) text-muted-foreground/70">
|
||||
{block.label}
|
||||
</span>
|
||||
{block.text ? <span className="ml-2">{block.text}</span> : null}
|
||||
</div>
|
||||
)}
|
||||
{block.detail && (
|
||||
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] text-foreground/75">
|
||||
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words font-mono text-(length:--text-micro) text-foreground/75">
|
||||
{block.detail}
|
||||
</pre>
|
||||
)}
|
||||
@@ -1207,11 +1209,11 @@ function TranscriptDiffGroup({
|
||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen((v) => !v); } }}
|
||||
>
|
||||
<GitCompare className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} />
|
||||
<span className={cn("text-[11px] font-semibold uppercase tracking-[0.14em] text-blue-700 dark:text-blue-300")}>
|
||||
<span className={cn("text-(length:--text-micro) font-semibold uppercase tracking-(--tracking-eyebrow) text-blue-700 dark:text-blue-300")}>
|
||||
{shortFile}
|
||||
</span>
|
||||
{hasChanges && (
|
||||
<span className="text-[10px] tabular-nums">
|
||||
<span className="text-(length:--text-nano) tabular-nums">
|
||||
<span className="text-emerald-600 dark:text-emerald-400">+{addCount}</span>
|
||||
{" "}
|
||||
<span className="text-red-600 dark:text-red-400">-{removeCount}</span>
|
||||
@@ -1222,7 +1224,7 @@ function TranscriptDiffGroup({
|
||||
{open && (
|
||||
<pre className={cn(
|
||||
"mt-2 overflow-x-auto whitespace-pre-wrap break-words font-mono pl-5",
|
||||
compact ? "text-[11px]" : "text-xs",
|
||||
compact ? "text-(length:--text-micro)" : "text-xs",
|
||||
)}>
|
||||
{block.hunks.map((hunk, i) => {
|
||||
const key = `${i}-${hunk.changeType}`;
|
||||
@@ -1292,13 +1294,13 @@ function TranscriptStderrGroup({
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen((v) => !v); } }}
|
||||
>
|
||||
<span className={cn("text-[10px] font-semibold uppercase tracking-[0.14em]")}>
|
||||
<span className={cn("text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-eyebrow)")}>
|
||||
{block.lines.length} log {block.lines.length === 1 ? "line" : "lines"}
|
||||
</span>
|
||||
{open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
|
||||
</div>
|
||||
{open && (
|
||||
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] text-amber-700/80 dark:text-amber-300/80 pl-5">
|
||||
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words font-mono text-(length:--text-micro) text-amber-700/80 dark:text-amber-300/80 pl-5">
|
||||
{block.lines.map((line, i) => (
|
||||
<span key={`${line.ts}-${i}`}>
|
||||
<span className="select-none text-amber-500/50 dark:text-amber-400/40">{i > 0 ? "\n" : ""}</span>
|
||||
@@ -1329,13 +1331,13 @@ function TranscriptSystemGroup({
|
||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen((v) => !v); } }}
|
||||
>
|
||||
<TerminalSquare className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="text-[10px] font-semibold uppercase tracking-[0.14em]">
|
||||
<span className="text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-eyebrow)">
|
||||
{block.lines.length} system {block.lines.length === 1 ? "message" : "messages"}
|
||||
</span>
|
||||
{open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
|
||||
</div>
|
||||
{open && (
|
||||
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] text-blue-700/80 dark:text-blue-300/80 pl-5">
|
||||
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words font-mono text-(length:--text-micro) text-blue-700/80 dark:text-blue-300/80 pl-5">
|
||||
{block.lines.map((line, i) => (
|
||||
<span key={`${line.ts}-${i}`}>
|
||||
<span className="select-none text-blue-500/40 dark:text-blue-400/30">{i > 0 ? "\n" : ""}</span>
|
||||
@@ -1362,7 +1364,7 @@ function TranscriptStdoutRow({
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<span className="text-(length:--text-nano) font-semibold uppercase tracking-(--tracking-caps) text-muted-foreground">
|
||||
stdout
|
||||
</span>
|
||||
<button
|
||||
@@ -1377,7 +1379,7 @@ function TranscriptStdoutRow({
|
||||
{open && (
|
||||
<pre className={cn(
|
||||
"mt-2 overflow-x-auto whitespace-pre-wrap break-words font-mono text-foreground/80",
|
||||
density === "compact" ? "text-[11px]" : "text-xs",
|
||||
density === "compact" ? "text-(length:--text-micro)" : "text-xs",
|
||||
)}>
|
||||
{block.text}
|
||||
</pre>
|
||||
@@ -1474,17 +1476,17 @@ function RawTranscriptView({
|
||||
const bottomSpacer = shouldVirtualize ? Math.max(0, entries.length - range.end) * RAW_ESTIMATED_ROW_HEIGHT : 0;
|
||||
|
||||
return (
|
||||
<div ref={listRef} className={cn("font-mono", compact ? "space-y-1 text-[11px]" : "space-y-1.5 text-xs")}>
|
||||
<div ref={listRef} className={cn("font-mono", compact ? "space-y-1 text-(length:--text-micro)" : "space-y-1.5 text-xs")}>
|
||||
{topSpacer > 0 && <div aria-hidden="true" style={{ height: topSpacer }} />}
|
||||
{visibleEntries.map((entry, idx) => (
|
||||
<div
|
||||
key={`${entry.kind}-${entry.ts}-${range.start + idx}`}
|
||||
className={cn(
|
||||
"grid gap-x-3",
|
||||
"grid-cols-[auto_1fr]",
|
||||
"grid-cols-(--gtc-16)",
|
||||
)}
|
||||
>
|
||||
<span className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<span className="text-(length:--text-nano) uppercase tracking-(--tracking-caps) text-muted-foreground">
|
||||
{entry.kind}
|
||||
</span>
|
||||
<pre className="min-w-0 whitespace-pre-wrap break-words text-foreground/80">
|
||||
|
||||
Reference in new issue
Block a user