Menghuan1918
b554665bde
The native port is finished off with the readability work the earlier rounds left open, plus the cleanup of everything the shadcn era or the older canvas left behind. - Geometry: node height is now composed from named parts (chrome, two title lines, meta row) and per-node extras, so a teammate card that carries a task line no longer gets clipped by the old fixed 68px budget; the layout spec follows the new model and GRAPH_ROW_STRIDE stays exported for it. - Readability: row rhythm (28-32px), three ink levels for title/meta/owner, truncation with title hints, current-row and hover expressed as an accent bar plus a hover fill (no shadows), phase frames and edges back on the l1/l2 hairlines, control cluster uniformly 28px, drawer durations on tabular figures, kill action revealed on hover/focus without shifting the row, no horizontal overflow at 360px. - Task window: the markdown body is pulled onto the page scale (12px body, 12/13px headings, tightened list indent and paragraph spacing) while the shared MarkdownText/markdownTextProps contract is untouched. - Cleanup: dead stylesheet rules, unused TSX exports and helpers, stale comments that still described the retired Variant-D canvas, zero-reference i18n keys across the dictionaries, and the Tailwind/shadcn/Variant-D narrative in the design doc, AGENTS.md and the plugin guide (kept as one short "why it was rolled back" section). Verified here: typecheck and lint clean; 133 files / 1413 tests; build with no radix-ui or --tw- strings in lib/client.js (988.9 KiB); the 70-assertion real-browser contract at 70/70 with the 20 reference screenshots regenerated; mount e2e 7/7.
68 lines
2.4 KiB
CSS
68 lines
2.4 KiB
CSS
/**
|
|
* Graph-only styles of the workflow graph (TasksGraph.tsx) — the two pieces
|
|
* tasks-graph.module.css does not carry:
|
|
*
|
|
* - the card title, clamped to TWO lines (the card reserve in
|
|
* tasks-graph-layout.ts is sized for exactly that clamp and for the token's
|
|
* 18px title line: a single ellipsized line left too few CJK characters to
|
|
* tell two siblings apart), and
|
|
* - the hydration hint drawn over an empty canvas.
|
|
*
|
|
* Everything else the graph wears (the dotted canvas, the bezier edges, the
|
|
* node cards, the control cluster) stays in tasks-graph.module.css — one source
|
|
* of truth per rule.
|
|
*
|
|
* Skin contract: colors resolve to `--dsw-alias-*`, type to `--dsw-font-*` —
|
|
* tokens only, no literal, no palette class, no shadow on a static panel.
|
|
*/
|
|
|
|
/* Card line 1 of an agent / run node. `-webkit-box` + `-webkit-line-clamp` is
|
|
* the only way to cap WRAPPED text with an ellipsis, and `overflow-wrap:
|
|
* anywhere` keeps an unbroken run id from forcing one wide line. The recipe
|
|
* mirrors the tree row title in tasks-graph.module.css (12px strong) so only
|
|
* the truncation differs; the untruncated text stays in the element's `title`.
|
|
* The clamp count and the token's 18px line are PAIRED with the layout's
|
|
* `NODE_TITLE_LINES` / `NODE_TITLE_LINE_H`: the card reserves that block, so
|
|
* changing either side alone leaves the card taller or shorter than its box. */
|
|
.nodeTitle {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
overflow-wrap: anywhere;
|
|
font: var(--dsw-font-xxs-strong-12);
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
/* The fold aggregate carries a count, not a name: it recedes one rung in both
|
|
* weight and ink (the plain-ink node title). */
|
|
.nodeTitlePlain {
|
|
font: var(--dsw-font-xxs-12);
|
|
color: var(--dsw-alias-label-secondary);
|
|
}
|
|
|
|
/* The graph twin of the tree's loading row: centred over the canvas and
|
|
* click-transparent, so pan / zoom / node clicks stay live underneath. It sits
|
|
* above the transformed node layer (z-index auto) and below the control
|
|
* cluster (z-index 6). */
|
|
.loading {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
pointer-events: none;
|
|
font: var(--dsw-font-xxs-12);
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|
|
|
|
/* The hint's glyph is decoration: the copy line carries the message. */
|
|
.loadingGlyph {
|
|
display: inline-flex;
|
|
flex: none;
|
|
}
|