Draw the tree the branch list can only spell out
The Branches panel says which lines exist. It cannot say where they parted or how much story each one is, because those are the two numbers `GET /branches` already answers and a list has nowhere to put them. A ⌗ See the tree button opens a map: one horizontal lane per branch, running from the moment it left its parent to the moment it ends, joined to the parent by an elbow at the fork. The horizontal axis is the story's own clock, so two lanes at the same x are at the same moment and a short branch reads as short. This is a branch map, not the per-node map SP7 refused, and that is the whole reason it was cheap. Lanes are bounded by branch count, not node count, so the 600-node windowing problem never arrives. It reads the single request the rail already made and nothing else. `branches.js` holds the tree maths and `BranchMap.jsx` the drawing. Play.jsx gives up its private copies of branchLabel and orderBranches: the panel and the map now label and order a branch through the same functions, so a branch cannot be called two things by the two views. The three operations stay in BranchPanel and are passed down, and `run` answers whether it worked so neither view clears a half-typed name on a refusal. Three things came out of driving it, none of which a test could have seen. `clientWidth` counts the canvas padding the ResizeObserver leaves out, so the first paint drew an svg 24px wider than its box — and the observer's initial observation never arrived here, so dropping the seed left the map never drawing at all. Both are needed and the seed subtracts the padding. Only the name was being clipped, not the meta line under it, so a late fork ran its text off the right edge; both are clipped now, and a lane starting in the right third hangs its labels back over the fork, where its own band guarantees nothing to collide with. And the delete rule lived in the server and in the map but not in the list, which offered Delete on a branch the head was forked from and answered with a toast from the server's 400. `headLineage` is the client's copy of that rule and both views use it; the server stays the authority. `tools/tree_fixture.py` is the counterpart to `tools/branch_fixture.py` — four branches at three fork depths, one forked off a fork. With no frontend test runner it is the whole of the map's coverage, and it exists to be looked at. Nothing in the backend changed; the 440 tests pass unmoved. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DfMCsN1KBLsTqMkj5hSgrY
This commit is contained in:
parththakkar106
co-authored by
Claude Opus 5
Claude Opus 5
parent
ff190d2453
commit
c8e081e9d6
@@ -2174,6 +2174,157 @@ button.primary.compact { padding: 3px 12px; font-size: 0.76rem; margin-left: aut
|
||||
}
|
||||
.chat-composer button { flex: none; height: 40px; }
|
||||
|
||||
/* ---------- The story tree, drawn (branch map overlay) ---------- */
|
||||
|
||||
.branch-map-open {
|
||||
align-self: flex-start;
|
||||
padding: 5px 12px;
|
||||
font-size: 0.74rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent);
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-bright);
|
||||
}
|
||||
.branch-map-open:hover { color: var(--accent-bright); border-color: var(--accent-dim); }
|
||||
|
||||
/* The overlay is deliberately wider and shorter than .modal: a tree is read
|
||||
across, and the number of branches decides the height. */
|
||||
.branch-map-overlay { z-index: 60; }
|
||||
.branch-map {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(1080px, calc(100vw - 40px));
|
||||
max-height: min(760px, calc(100vh - 60px));
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border-bright);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(212, 169, 78, 0.06);
|
||||
}
|
||||
.branch-map-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
padding: 18px 22px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.branch-map-header h2 {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.15rem;
|
||||
color: var(--accent-bright);
|
||||
}
|
||||
.branch-map-scale {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.branch-map-close {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
padding: 2px 8px;
|
||||
color: var(--text-dim);
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.branch-map-close:hover { color: var(--accent-bright); border-color: var(--border); }
|
||||
|
||||
.branch-map-canvas {
|
||||
flex: 1;
|
||||
min-height: 120px;
|
||||
/* Height comes from the branch count, so a deep tree scrolls rather than the
|
||||
diagram shrinking until nobody can read it. Width never scrolls — the map
|
||||
is scaled to fit, which is the whole point of drawing it to one clock. */
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 4px 12px 8px;
|
||||
}
|
||||
.branch-map-svg { display: block; }
|
||||
|
||||
.bm-tick line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 6; }
|
||||
.bm-tick text {
|
||||
fill: var(--text-dim);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.bm-lane { cursor: pointer; }
|
||||
.bm-hit { fill: transparent; }
|
||||
.bm-lane:hover .bm-hit { fill: rgba(212, 169, 78, 0.035); }
|
||||
.bm-lane.picked .bm-hit { fill: rgba(212, 169, 78, 0.07); }
|
||||
.bm-lane:focus { outline: none; }
|
||||
.bm-lane:focus-visible .bm-hit { fill: rgba(212, 169, 78, 0.12); }
|
||||
|
||||
.bm-line {
|
||||
stroke: var(--border-bright);
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.bm-fork {
|
||||
fill: none;
|
||||
stroke: var(--border-bright);
|
||||
stroke-width: 2;
|
||||
}
|
||||
.bm-fork-dot, .bm-tip { fill: var(--border-bright); }
|
||||
|
||||
.bm-lane:hover .bm-line, .bm-lane.picked .bm-line { stroke: var(--accent-dim); }
|
||||
.bm-lane:hover .bm-fork, .bm-lane.picked .bm-fork { stroke: var(--accent-dim); }
|
||||
.bm-lane:hover .bm-tip, .bm-lane.picked .bm-tip { fill: var(--accent); }
|
||||
|
||||
/* The line being read: brighter, and its tip carries the glow so where you
|
||||
are standing is findable before a word is read. */
|
||||
.bm-lane.here .bm-line { stroke: var(--accent); }
|
||||
.bm-lane.here .bm-fork { stroke: var(--accent-dim); }
|
||||
.bm-lane.here .bm-tip {
|
||||
fill: var(--accent-bright);
|
||||
filter: drop-shadow(0 0 6px var(--accent-glow));
|
||||
}
|
||||
.bm-lane.here .bm-name { fill: var(--accent-bright); }
|
||||
|
||||
.bm-name {
|
||||
fill: var(--text);
|
||||
font-family: var(--font-story);
|
||||
font-size: 15px;
|
||||
}
|
||||
.bm-meta {
|
||||
fill: var(--text-dim);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 10.5px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.branch-map-hint {
|
||||
margin: 0;
|
||||
padding: 0 22px 10px;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.branch-map-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 14px 22px 18px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.branch-map-detail.here { background: rgba(212, 169, 78, 0.05); }
|
||||
.bmd-head { display: flex; align-items: center; gap: 8px; }
|
||||
.branch-map-detail .branch-name { font-size: 1.05rem; }
|
||||
.branch-map-detail.here .branch-name { color: var(--accent-bright); }
|
||||
.branch-map-detail .branch-tools button, .branch-map-detail .branch-confirm button {
|
||||
padding: 4px 11px;
|
||||
font-size: 0.74rem;
|
||||
color: var(--text-dim);
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.branch-map-detail .branch-tools button:hover:not(:disabled),
|
||||
.branch-map-detail .branch-confirm button:hover:not(:disabled) {
|
||||
color: var(--accent-bright);
|
||||
border-color: var(--border-bright);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.enter, .skeleton-card, .sk, .toast, .thinking i,
|
||||
.story .action, .page {
|
||||
@@ -2369,4 +2520,20 @@ button.primary.compact { padding: 3px 12px; font-size: 0.76rem; margin-left: aut
|
||||
/* Full-width textarea; Send wraps beneath it and sits at the right edge. */
|
||||
.chat-composer textarea { flex: 1 1 100%; max-height: 140px; }
|
||||
.chat-composer button { margin-left: auto; }
|
||||
|
||||
/* ---------- The branch map ---------- */
|
||||
/* A phone has no room for a dialog inset from the edges, and the tree is the
|
||||
one thing on this screen that wants every pixel across. */
|
||||
.branch-map {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
max-height: 100dvh;
|
||||
height: 100dvh;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.branch-map-header { padding: 14px 16px 10px; flex-wrap: wrap; }
|
||||
.branch-map-canvas { padding: 4px 6px 8px; }
|
||||
.branch-map-detail { padding: 12px 16px 16px; }
|
||||
.branch-map-hint { padding: 0 16px 10px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user