@issuegraph/editor 0.3.0 → 0.10.0

package/dist/workspace/render.js

@@ -48,15 +48,19 @@
  * forked token set here and no second palette: the theme is the viewer's, and
  * `styles.ts` writes structure against its custom properties.
  */
-import { KEY_ATTRIBUTE, element, normalizeDocument, renderMarkup, renderViewer, resolveTheme, themeCss, viewerStylesheet, } from '@issuegraph/viewer';
+import { KEY_ATTRIBUTE, element, glyphAndLabel, hiddenGlyph, identity, labelFrom, normalizeDocument, renderMarkup, provenanceClause, renderViewer, resolveTheme, themeCss, treatmentFor, viewerStylesheet, } from '@issuegraph/viewer';
 import { auditStylesheet } from "../audit/styles.js";
+import { IDLE_CREATE_DRAFT } from "../create/draft.js";
+import { KIND_KEYS } from "../create/keys.js";
+import { OVERLAY_TREATMENTS, treatmentForState } from "../overlay/grammar.js";
 import { edgeOverlayStylesheet } from "../overlay/styles.js";
 import { AUDIT_SEVERITY_ATTRIBUTE, auditFilterKeeps, auditOverlay, heaviestRow, renderAuditHeader, } from "../audit/surface.js";
 import { INITIAL_SCALE_STATE } from "../scale/commands.js";
 import { renderScaleLadder } from "../scale/render.js";
 import { scaleLadderStylesheet } from "../scale/styles.js";
-import { inspectorView } from "./inspector.js";
+import { inspectorView, } from "./inspector.js";
 import { railWindow } from "./rail.js";
+import { diffIsEmpty, diffWithin } from "./recovery.js";
 import { INITIAL_SELECTION, selectedEdgeId, selectedKey, } from "./selection.js";
 import { workspaceStylesheet } from "./styles.js";
 /** The four fixed positions. A closed union, which is what keeps `zone` safe. */
@@ -145,6 +149,224 @@ function markRail(root, severityOf) {
     }
     return markSpec(root);
 }
+/**
+ * A row's right-hand slot: exactly one of `selected`, a remove control, or the
+ * inbound marker.
+ *
+ * THE ORDER IS THE FRAME'S AND IT IS ALSO THE SAFE ONE. A selected row's SLOT
+ * says so and offers nothing else, which matters because `selected` is the
+ * state that FILTERS this panel: the reader is looking at one edge on purpose,
+ * and a destructive control is not what the slot is for at that moment.
+ *
+ * THE SLOT, NOT THE ROW — §17b's flip sits beside it on exactly that row. The
+ * reasoning above is specific to a DESTRUCTIVE control; a flip is the
+ * corrective act §17b asks for, so it is admitted where a `✕` is not.
+ * {@link relationshipSpec} draws it as the slot's peer and says why there.
+ *
+ * AN INBOUND ROW GETS NO REMOVE CONTROL, and that is a fact about the format
+ * rather than caution. An incoming edge's field is declared in the OTHER
+ * issue's body, so this panel's subject cannot declare it away; a `✕` there
+ * would publish an edit that either does nothing or edits a document the
+ * reader is not looking at. The reference implementation encodes the same rule
+ * as `removable: false`, and frame 17a puts the word `inbound` in the slot the
+ * other rows spend on `✕`.
+ *
+ * THE KEYBOARD'S `⌫` IS NOT A SECOND RULE. `create/keys.ts` acts on the
+ * SELECTED edge because a selection is the only edge a keyboard has named; that
+ * is this rule with the selection as the subject, not an exception to it.
+ *
+ * `selected` IS THE PACKAGE'S OWN WORD, taken from `treatmentForState` rather
+ * than from the words object. Write-state names are already authored here —
+ * `writing…`, `failed`, `invalid` — and a `selected` on `WorkspaceWords` would
+ * be a second spelling of one the overlay grammar publishes on the canvas.
+ */
+function rowSlot(relationship, selected, words) {
+    if (relationship.edgeId === selected) {
+        return element('span', { class: 'ig-relationship-state', 'data-ig-state': 'selected' }, [treatmentForState('selected').label]);
+    }
+    if (relationship.direction === 'incoming') {
+        return element('span', { class: 'ig-relationship-inbound' }, [words.inbound]);
+    }
+    // THE GLYPH IS HIDDEN AND THE NAME IS AN ATTRIBUTE. `glyphAndLabel` draws a
+    // VISIBLE word beside its glyph, which is right for the kind and wrong here:
+    // the frame's slot is a bare `✕`. So the mark is layer 1's `hiddenGlyph` —
+    // the published half of that same pairing, rather than its class and its
+    // `aria-hidden` written out again here, which is exactly the local copy
+    // `glyphAndLabel`'s own header calls the failure it exists to prevent. `✕`
+    // announces as whatever a screen reader's character table calls it, which
+    // describes the mark and not the act, so the host's word becomes the
+    // button's accessible name. On the BUTTON, never on a span around it:
+    // `parts.ts` records that a plain span takes the generic role, on which ARIA
+    // prohibits naming, so the name would be dropped without a warning.
+    return element('button', {
+        type: 'button',
+        class: 'ig-relationship-remove',
+        'data-ig-command': 'delete',
+        // ITS OWN ROW'S EDGE, WHICH IS THE WHOLE POINT OF THE ATTRIBUTE HERE.
+        // `reduceHost`'s delete arm read the selection and ignored the target
+        // while the only delete control lived inside `if (edgeId !== null)`; a
+        // control repeated per row makes that wrong in both directions — a no-op
+        // with an issue selected, and a delete of the WRONG edge with a
+        // different row's edge selected.
+        'data-ig-target': relationship.edgeId,
+        'aria-label': words.remove,
+    }, [hiddenGlyph('\u2715')]);
+}
+/**
+ * §17b's flip, on the selected row.
+ *
+ * ## It is drawn where the sentence is, and only where the reducer can act
+ *
+ * Frame 17b draws a directed relationship as a statement with `⇅ flip` at the
+ * end of the same line, and the row already IS that statement: with an edge
+ * selected the panel filters to one relationship and
+ * {@link relationshipDescription}'s no-subject arm words it forward with both
+ * references in stored order. So the control joins the row rather than opening
+ * a second card above it — a card would need a sentence of its own, and the
+ * panel would then state one relationship twice, one element apart, which is
+ * the encoding ambiguity §17b exists to remove.
+ *
+ * ONLY ON THE SELECTED ROW, and that is a fact about the REDUCER rather than
+ * restraint. `reduceHost`'s `flip` arm takes its edge from
+ * `selectedEdgeId(state.selection)` and ignores `data-ig-target` — deliberately,
+ * because a flip is one operation about the edge the reader is looking at. A
+ * control on an unselected row would publish a command the reducer would answer
+ * about a different edge, or, with an issue selected, about none; the panel's
+ * standing rule is that a control which cannot complete the act it advertises
+ * is not drawn.
+ *
+ * THAT GUARANTEE IS THE MOUNT'S, AND A STANDALONE HOST OWES THE SAME STEP. This
+ * surface is handed a `ViewerDocument` and the reducer a `GraphDocument`, so
+ * "the selected edge exists" is only true while the two agree. `mountWorkspace`
+ * makes them agree by running `reconcileHost` against the landed document
+ * before every render, which clears a selection naming an edge that is gone and
+ * moves one naming an edge hidden behind an unsettled write. A host wiring the
+ * published attributes itself must do the same, or it can draw a flip whose
+ * press the reducer answers with nothing.
+ *
+ * ## A symmetric kind gets no control, and the absence is the finding
+ *
+ * `serialize-with` and `together-with` state one fact whichever way round they
+ * are stored, so a control to reverse them claims something the format does not
+ * say — and the store would refuse the edit as `symmetric-edge` anyway.
+ * `picker/view.ts` already answers `null` there; this agrees with it rather
+ * than contradicting it from the next zone over.
+ *
+ * ONE ORACLE FOR THAT QUESTION. The directedness is read off the SAME
+ * {@link EdgeTreatment} `relationshipDescription` already reads to word the
+ * row, which is what `labelFrom` itself branches on. Importing
+ * `isSymmetricEdgeField` here instead would put two answers to one question at
+ * one call site, in a package whose objection everywhere else is "not a wrong
+ * answer, a second answer". `render.test.ts` pins the two to agree across the
+ * whole vocabulary, so the shorter reach is safe in both directions.
+ *
+ * ## It publishes and wires nothing
+ *
+ * `data-ig-command="flip"` and no target: the attribute the reducer does not
+ * read would advertise a per-row flip it does not implement. On a `button`,
+ * because a span has no tab stop and no native activation — the control §17b
+ * names most error-prone is the last one that should be pointer-only.
+ */
+function flipControl(relationship, selected, words) {
+    if (relationship.edgeId !== selected)
+        return null;
+    if (treatmentFor(relationship.field).symmetric)
+        return null;
+    return element('button', { type: 'button', class: 'ig-relationship-flip', 'data-ig-command': 'flip' }, [words.flip]);
+}
+/**
+ * The host's sentence for a refusal, wherever the panel states one.
+ *
+ * SHARED FOR THE REASON THE HEAD BELOW IS. A refusal reaches the reader in two
+ * shapes — a capsule standing in for a relationship that does not exist, and a
+ * reason attached to one that does — and a second element built at the second
+ * site would be free to take a different class and lose the rule that styles
+ * it, on the half that ships later.
+ */
+function refusalReason(code, words) {
+    return element('span', { class: 'ig-relationship-reason' }, [words.refusals[code]]);
+}
+/**
+ * What a relationship READS as: the kind's glyph and word, and the reference at
+ * the other end. No control, no wrapper — only the description.
+ *
+ * ONE DESCRIPTION FOR THE ROW AND FOR THE CAPSULE. They state the same thing
+ * about the same edge, and they briefly stated it twice — including deriving
+ * `outgoing` from the same two values in both places, which is the shape this
+ * package calls a second answer rather than a repetition.
+ *
+ * SPLIT FROM THE CONTROL THAT WRAPS IT, rather than parameterised with a
+ * "draw a button?" flag, because the two callers do not differ in a DETAIL of
+ * one element: one of them draws no control at all. A flag would leave the
+ * element that IS the control deciding whether to be one, and every attribute
+ * on it conditional on that. The description is the shared fact; who wraps it
+ * is the caller's, exactly as the slot beside it and the border around it
+ * already are.
+ *
+ * ## It draws the OTHER end, and words the kind from the subject's end
+ *
+ * The row used to draw three bare tokens — the field's machine name, then both
+ * endpoints — one of which is the issue whose panel this is. So the reader read
+ * their own subject back on every row and had to work out which of the two
+ * references was the other one, from a token that stated no direction at all
+ * while `data-direction` sat unread on the same element.
+ *
+ * WITH NO ISSUE SUBJECT THERE IS NO "OTHER END", and both are drawn. That is an
+ * edge selection: the panel is showing one relationship rather than one issue's
+ * relationships, so the head reads as the edge is stored, `from` before `to`,
+ * and the kind takes its plain forward wording. Picking one end there would
+ * mean picking arbitrarily and then wording the sentence around the choice.
+ */
+function relationshipDescription(relationship, subject) {
+    const treatment = treatmentFor(relationship.field);
+    const outgoing = subject === null || relationship.from === subject;
+    // THE ROLE TRAVELS WITH THE REFERENCE, and it is not decoration. §17b's rule
+    // is that direction is STATED, never inferred — and with no issue subject
+    // both ends are drawn, so without a role the only thing saying which is which
+    // is their ORDER. That is inference, by the reader and by any host restyling
+    // the row. `directionSpec` published exactly this pair of roles before §17b's
+    // statement became the row; dropping them would have moved the statement and
+    // quietly lost the half that made it a statement.
+    //
+    // OMITTED, NOT FALSIFIED, WHERE THERE IS NO PAIR. With an issue subject the
+    // row draws one reference — the other end — and it is worded relative to the
+    // subject by `labelFrom`, so a `from`/`to` on it would name an end of the
+    // stored pair while the words name an end of the reader's sentence, and those
+    // are not always the same one.
+    const reference = (ref, role) => element('span', { class: 'ig-relationship-ref', 'data-ig-role': role }, [ref]);
+    return [
+        element('span', { class: 'ig-relationship-kind' }, 
+        // LAYER 1's PAIRING, not a second one. The glyph is one of the four
+        // channels the colour-blind-safety claim rests on and is
+        // `aria-hidden` because it announces as a character description;
+        // the word beside it is what a reader hears. A local copy of that
+        // arrangement is free to drop the second half.
+        glyphAndLabel(treatment.glyph, labelFrom(treatment, outgoing))),
+        ...(subject === null
+            ? [reference(relationship.from, 'from'), reference(relationship.to, 'to')]
+            : [reference(outgoing ? relationship.to : relationship.from)]),
+    ];
+}
+/**
+ * A relationship's head on a row that HAS one: the description, inside the
+ * control that selects the edge.
+ *
+ * ONLY WHERE THE EDGE IS IN THE DOCUMENT. `select-edge` reduces to a selection,
+ * and the next render's `reconcileHost` drops a selection naming an edge the
+ * landed document does not carry — so on a phantom this control would close the
+ * inspector instead of inspecting anything. That is the rule the panel's own
+ * header already states about `+ add`: a control that cannot complete the act
+ * it advertises is not drawn. {@link refusalCapsule} draws the description
+ * bare for exactly that reason.
+ */
+function relationshipHead(relationship, subject) {
+    return element('button', {
+        type: 'button',
+        class: 'ig-relationship-select',
+        'data-ig-command': 'select-edge',
+        'data-ig-target': relationship.edgeId,
+    }, relationshipDescription(relationship, subject));
+}
 /**
  * One relationship, as a row the reader can actually operate.
  *
@@ -153,67 +375,730 @@ function markRail(root, severityOf) {
  * reachable by pointer and by nothing else — and a host wiring the published
  * attributes cannot fix that without rebuilding the semantics this package
  * should have supplied. Every other command in the package is already on a
- * button; `refusalSpec`'s capsule is the same `li` + `button` shape.
+ * button; {@link refusalCapsule}'s capsule is the same `li` + `button` shape.
  *
  * The `li` keeps the hue and the direction, because those describe the
  * relationship rather than the action.
+ *
+ * ## A REFUSAL CAN LAND ON A ROW THAT STAYS
+ *
+ * `refused` is the code when the store refused an edit ABOUT this relationship
+ * and the relationship is still there — a create of an edge that already
+ * exists, a retype to the kind it already has, a flip of a symmetric kind. The
+ * reason joins the row and the row keeps its remove control, because the edge
+ * it names is real and removable; only a refusal about an edge that does not
+ * exist replaces the row, and {@link WorkspaceRefusal.phantom} is which. It is
+ * published as `data-ig-code` here for the same reason the capsule publishes
+ * it: a host styles or counts refusals off the store's vocabulary rather than
+ * by matching a sentence.
  */
-function relationshipSpec(relationship) {
+function relationshipSpec(relationship, subject, selected, words, refused) {
     return element('li', {
         class: 'ig-relationship',
         'data-edge': relationship.field,
         // Omitted rather than falsified when the subject is not an issue: an edge
         // selection has no "my end", and `data-direction=""` would claim one.
         'data-direction': relationship.direction ?? undefined,
+        'data-ig-code': refused,
     }, [
-        element('button', {
-            type: 'button',
-            class: 'ig-relationship-select',
-            'data-ig-command': 'select-edge',
-            'data-ig-target': relationship.edgeId,
-        }, [
-            element('span', { class: 'ig-relationship-kind' }, [relationship.field]),
-            element('span', { class: 'ig-relationship-ref' }, [relationship.from]),
-            element('span', { class: 'ig-relationship-ref' }, [relationship.to]),
+        relationshipHead(relationship, subject),
+        refused === undefined ? null : refusalReason(refused, words),
+        rowSlot(relationship, selected, words),
+        // A PEER OF THE SLOT RATHER THAN A FOURTH OCCUPANT OF IT. The slot's
+        // three occupants are exclusive because two are statements and one is a
+        // destructive control, and a row is only ever one of those things; the
+        // flip is neither, and it coexists with the `selected` marker on the one
+        // row that draws both. Last, because frame 17b ends the statement's line
+        // with it.
+        flipControl(relationship, selected, words),
+    ]);
+}
+/**
+ * A refused relationship, drawn where the reader was building it.
+ *
+ * §17b's rule is that a refusal is shown IN PLACE and never snapped back, and
+ * until this the package had no surface that said so: the store marked the edge
+ * `invalid`, the canvas drew a ghost line, and the panel the reader had just
+ * used listed nothing about it. `would-cycle` is the case that matters — it is
+ * the one refusal this package family cannot detect for itself, so it arrives
+ * only after the reader has committed to the relationship.
+ *
+ * IT REPLACES THE ROW ONLY WHEN THERE IS NO RELATIONSHIP UNDER IT, and that
+ * qualification is the correction to an earlier "a refused edge is not a
+ * relationship: it is an edit that did not happen". Three of the store's codes
+ * refuse an edit ABOUT AN EDGE THAT EXISTS — `duplicate-edge`, `unchanged-kind`
+ * and `symmetric-edge` all mark a landed edge — so replacing the row for those
+ * deleted a real relationship from the panel, and with it the only control that
+ * could remove the edge the reader had just been told about.
+ * For an edge that genuinely does not exist the argument stands unchanged:
+ * listing it as an ordinary row would assert a relationship the document does
+ * not have, with a `select-edge` and a `✕` on it offering to remove something
+ * that was never added. {@link WorkspaceRefusal.phantom} is the question, and
+ * {@link relationshipEntries} is where it is asked. Either way the reader's
+ * POSITION is kept, because that is where they were working.
+ *
+ * THE SHAPE IS `scale/render.ts`'s CAPSULE — an `li` carrying a button and a
+ * stated reason — and the shape is all that is copied. That capsule's English
+ * is written inline in this package, which is a debt rather than a precedent;
+ * the reason here is the host's, keyed off the store's own code.
+ *
+ * IT NAMES THE EDGE AND OPERATES NOTHING. The capsule reused the row's head,
+ * which is a `select-edge` control — so a phantom that survived normalization
+ * (a `would-cycle` refusal reaches the panel as an edge, because the store
+ * draws a refused create precisely so a surface can mark it) published a live
+ * selector for an edge the LANDED document does not carry. Under
+ * `mountWorkspace` that click selected the phantom and the next render's
+ * `reconcileHost` dropped the selection again, so the one control on the
+ * capsule closed the inspector rather than inspecting anything. The
+ * description is drawn bare instead, on the rule
+ * {@link WorkspaceRefusal.phantom} already states in as many words: there is no
+ * relationship to operate. Its remove control was withheld for the same reason
+ * from the start; this is the half that was missed.
+ *
+ * `data-ig-code` IS THE STORE'S VOCABULARY VERBATIM, so a host that wants to
+ * style or count refusals reads the code rather than matching a sentence.
+ */
+function refusalCapsule(relationship, code, subject, words) {
+    return element('li', {
+        class: 'ig-relationship-refused',
+        'data-ig-code': code,
+        'data-edge': relationship?.field,
+    }, [
+        // THE RELATIONSHIP IS NAMED WHEN IT CAN BE, AND THE CAPSULE STANDS WHEN
+        // IT CANNOT. The refused edge normally reaches the document as the
+        // store's phantom — `edgeChangeFor` draws a refused create so the refusal
+        // has something to be about — but a host that projects only landed edges
+        // gives us a code and nothing to word, and a refusal the reader cannot
+        // see is worse than one drawn without its subject.
+        relationship === undefined
+            ? null
+            : element('span', { class: 'ig-relationship-name' }, relationshipDescription(relationship, subject)),
+        refusalReason(code, words),
+    ]);
+}
+/**
+ * Frame 17b's numbered kind list, and the control that withdraws from it.
+ *
+ * THE DIGITS ARE `create/keys.ts`'s OWN, through `KIND_KEYS`. Drawing
+ * `index + 1` over the kind order here would be a second construction of the
+ * keyboard's table — which is exactly what the mount's chooser did, agreeing
+ * with the key map only because both walked `EDGE_FIELDS`, with nothing
+ * pinning them to each other.
+ *
+ * THE WORD IS THE EDGE VOCABULARY'S, so an entry in this list and the row it
+ * will become read the same. A `kinds` record on `WorkspaceWords` would be a
+ * third spelling of a wording layer 1 already publishes twice over.
+ *
+ * IT IS NOT DRAWN AT THE TARGET STEP. `renderWorkspace` is markup-only and the
+ * target search is a live input over the reader's query, so that step stays the
+ * shell's. A host using this renderer without `mountWorkspace` can read,
+ * remove and BEGIN a relationship, and must supply its own target picker.
+ *
+ * `source` NAMES THE DRAFT WHEN IT IS NOT THIS PANEL'S OWN, and is `null` when
+ * it is — see {@link addStepSpec} for why the list is drawn either way. Written
+ * as the reference beside the host's phrase, which is `whyRankSpec`'s own shape
+ * for the same problem: the package names the issue and the host writes the
+ * English around it.
+ */
+function kindListSpec(words, source) {
+    return element('div', { class: 'ig-inspector-add' }, [
+        source === null
+            ? null
+            : element('p', { class: 'ig-inspector-source' }, [
+                `${words.relatingFrom} `,
+                element('span', { class: 'ig-id' }, [source]),
+            ]),
+        element('ul', { class: 'ig-kind-list' }, KIND_KEYS.map((entry) => {
+            const treatment = treatmentFor(entry.edgeKind);
+            return element('li', {}, [
+                element('button', {
+                    type: 'button',
+                    class: 'ig-kind-option',
+                    'data-ig-command': 'kind',
+                    'data-ig-value': entry.edgeKind,
+                    'data-edge': entry.edgeKind,
+                }, [
+                    element('span', { class: 'ig-kind-digit' }, [entry.key]),
+                    ...glyphAndLabel(treatment.glyph, treatment.label),
+                ]),
+            ]);
+        })),
+        element('button', { type: 'button', class: 'ig-inspector-cancel', 'data-ig-command': 'cancel' }, [words.cancel]),
+    ]);
+}
+/**
+ * §17a's "why rank" block: the heading, and one sentence explaining the
+ * position.
+ *
+ * THE SYMPTOM THIS PACKAGE WAS FILED FOR. `#122` names it exactly: the frame
+ * gives the inspector a `WHY RANK 2` heading and a sentence, "the shipped
+ * inspector shows raw tokens and no sentence, even though the package already
+ * carries the function that composes provenance". It did, and this composes it.
+ *
+ * THE PROVENANCE CLAUSE IS LAYER 1's, AND THAT IS THE POINT. `provenanceClause`
+ * is the same function the §16 rail row's provenance line is built from, so the
+ * row and the panel state one fact one way. Switching on `RankProvenance` here
+ * would be a second wording, free to drift from the row's the moment either is
+ * edited — which is what the issue means by "composed from the existing
+ * provenance model rather than a second implementation of it".
+ *
+ * A HOLD'S REASON IS RENDERED VERBATIM, exactly as layer 1's `holdLine` renders
+ * it: `ViewerHold.reason` is host-authored, and rewording it here would put
+ * this package in the business of explaining a hold whose vocabulary belongs to
+ * the reader that produced it.
+ *
+ * WHAT DOES NOT APPEAR: a rank on a held slot. `@issuegraph/derive` assigns
+ * `ready ? (rank += 1) : null`, so the two are exclusive and the heading says
+ * which one it is. Frame 17a draws `#512` at rank 2 *and* "Held until #488
+ * closes"; that state is unrepresentable, and PR #126 already ruled for §16
+ * that the model wins and the em dash stands.
+ */
+function whyRankSpec(why, words, holds) {
+    const held = why.rank === null;
+    return element('div', { class: 'ig-why-rank', 'data-held': held ? 'true' : 'false' }, [
+        element('h3', { class: 'ig-why-rank-heading' }, [
+            held ? words.whyHeld : `${words.whyRank} ${String(why.rank)}`,
+        ]),
+        element('p', { class: 'ig-why-rank-sentence' }, [
+            provenanceClause(why.provenance),
+            why.unitPartners.length === 0
+                ? null
+                : element('span', { class: 'ig-why-rank-unit' }, [
+                    `${words.workedAsOneUnit} `,
+                    element('span', { class: 'ig-id' }, [why.unitPartners.join(', ')]),
+                ]),
+        ]),
+        // THE HOLDS BELONG TO THE EXPLANATION, so they live inside this block
+        // rather than beside it. They were briefly stated twice — once worded into
+        // this sentence and once in the list below it — which is the panel telling
+        // a reader the same cause in two voices.
+        //
+        // The LIST is what survived, because it is the half that carries the
+        // holder as a control: `holdRow` publishes `select-issue` on the blocker,
+        // under rules about when that control is withheld which a sentence could
+        // not express. A reason inline would have discarded them.
+        holds.length === 0 ? null : element('ul', { class: 'ig-inspector-holds' }, holds),
+    ]);
+}
+/**
+ * §17a's workspace header: what backlog this is, how much of it is encoded,
+ * what is wrong with it, how fresh the read is, and the way into a first pass.
+ *
+ * IT IS UNCONDITIONAL NOW, AND THAT IS THE FIX. The zone used to be emitted
+ * only when an audit overlay existed — `overlay === null ? '' : zone('header',
+ * …)` — so the header WAS the audit header, and a workspace with no audit
+ * input had no header at all. §17a's header carries five facts and the audit
+ * count is one of them.
+ *
+ * WHAT IT DRAWS IS WHAT THE RAIL DOES NOT. §17a hoists the identity, the
+ * counts and the freshness stamp into a header spanning all three zones, and
+ * the rail below still draws the last two as layer 1's panel header — so this
+ * carries the three facts that appear NOWHERE else today: what backlog this
+ * is, what the audit found, and the way into a first pass.
+ *
+ * MOVING THE OTHER TWO IS ITS OWN CHANGE, not an omission here. Layer 1's panel
+ * header is one element carrying the stamp, the refresh control, the count
+ * chips AND the running-job NOW row; `SceneOptions.chrome` takes all of them or
+ * none. §17a's header replaces some and its rail does not obviously replace the
+ * NOW row, so which of them survives is a design ruling, and a half-made one
+ * would either state a fact twice or drop a control on the way past.
+ *
+ * EVERY FACT COMES FROM THE PORT THAT ALREADY CARRIES IT. `ViewerDocument.host`
+ * is commented "THE HOST-FACTS PORT", and #127 rejected deriving its numbers in
+ * terms: "Reporting is not deriving — the host's number is still what gets
+ * drawn." Counting the document here would give the header a second answer,
+ * free to disagree with the rail beside it.
+ *
+ * OMITTED WHEN ABSENT, NEVER DEFAULTED, for the reason the audit count already
+ * gives: a zero the reader can trust and a zero nobody computed are different
+ * facts, and a header that invents either is worse than one that says less.
+ */
+function headerMarkup(host, auditHeader) {
+    // A STRING, not a spec, because one member of this zone already is one: the
+    // audit header comes from its own leaf rendered, and it owns the filter
+    // toggle's `aria-pressed` and the count's own omitted-when-absent rule. The
+    // file's standing idiom applies — everything carrying a dynamic value goes
+    // through `renderMarkup`, and only already-rendered markup is concatenated.
+    const parts = [
+        host?.identity === undefined || host.identity === ''
+            ? ''
+            : renderMarkup(element('span', { class: 'ig-workspace-identity' }, [host.identity])),
+        auditHeader,
+        host?.firstPass === undefined || host.firstPass === ''
+            ? ''
+            : renderMarkup(element('button', { type: 'button', class: 'ig-workspace-firstpass', 'data-ig-command': 'first-pass' }, [host.firstPass])),
+    ];
+    return `<div class="ig-workspace-header">${parts.join('')}</div>`;
+}
+function panelScope(view) {
+    const { subject } = view;
+    switch (subject.kind) {
+        case 'none':
+            return { kind: 'none' };
+        case 'issue':
+            return {
+                kind: 'issue',
+                keys: new Set([subject.issue.key, ...(subject.whyRank?.unitPartners ?? [])]),
+            };
+        case 'edge':
+            return { kind: 'edge', edgeId: subject.relationship.edgeId };
+    }
+}
+/** Whether this panel is the one that states this record. */
+function statedHere(scope, record) {
+    switch (scope.kind) {
+        case 'none':
+            return false;
+        case 'issue':
+            return record.carrier !== null && scope.keys.has(record.carrier);
+        case 'edge':
+            return record.edgeId === scope.edgeId;
+    }
+}
+/**
+ * The three affordances, mapped to the commands that carry them out.
+ *
+ * `satisfies Record<OverlayAffordance, string>` IS THE POINT. A fourth
+ * affordance is a compile error here rather than a button that renders and does
+ * nothing, and the vocabulary it is total over cannot spell `merge` — §17b's
+ * one prohibition, encoded in a type rather than left to a reviewer.
+ */
+const AFFORDANCE_COMMANDS = Object.freeze({
+    'view-diff': 'view-diff',
+    retry: 'retry',
+    'discard-mine': 'discard',
+});
+/**
+ * The region a card's `view-diff` control discloses.
+ *
+ * Derived from the write's own identity so `aria-controls` can name it, and
+ * scoped by a prefix because a page may mount more than one workspace.
+ */
+function diffRegionId(mutationId) {
+    return `ig-recovery-diff-${mutationId}`;
+}
+/** One edge in a difference, named the way the relationship rows name one. */
+function diffEdgeSpec(edge) {
+    return element('li', { class: 'ig-recovery-edge', 'data-edge': edge.kind }, [
+        // OUTGOING, because a diff row names the edge as the document stores it —
+        // `from` then `to` — rather than from the point of view of a subject. There
+        // is no subject here: the list is about the document, not about one issue.
+        element('span', { class: 'ig-relationship-kind' }, [labelFrom(treatmentFor(edge.kind), true)]),
+        element('span', { class: 'ig-id' }, [edge.from]),
+        element('span', { class: 'ig-id' }, [edge.to]),
+    ]);
+}
+/** One side of a difference, or nothing when that side is empty. */
+function diffSideSpec(heading, edges) {
+    return edges.length === 0
+        ? null
+        : element('div', { class: 'ig-recovery-side' }, [
+            element('h5', { class: 'ig-recovery-side-name' }, [heading]),
+            element('ul', { class: 'ig-recovery-edges' }, edges.map(diffEdgeSpec)),
+        ]);
+}
+/**
+ * The held difference, drawn.
+ *
+ * NOTHING HERE COMBINES THE TWO SIDES. They are separate lists under separate
+ * headings, with no control that takes both — which is what "never auto-merge"
+ * looks like in markup rather than in a comment.
+ */
+function diffSpec(diff, words, id) {
+    if (diffIsEmpty(diff)) {
+        return element('p', { class: 'ig-recovery-diff-empty', id }, [words.diffEmpty]);
+    }
+    return element('div', { class: 'ig-recovery-diff', id }, [
+        diffSideSpec(words.upstreamOnly, diff.upstreamOnly),
+        diffSideSpec(words.mineOnly, diff.mineOnly),
+        diffSideSpec(words.mineRemoved, diff.mineRemoved),
+        diff.carrierReversed.length === 0
+            ? null
+            : element('div', { class: 'ig-recovery-side' }, [
+                element('h5', { class: 'ig-recovery-side-name' }, [words.carrierReversed]),
+                element('ul', { class: 'ig-recovery-edges' }, 
+                // BOTH DIRECTIONS, SIDE BY SIDE. Which end declares a symmetric
+                // relationship is the fact `edgeId` discards, so stating one
+                // direction here would be this package picking a winner.
+                diff.carrierReversed.flatMap((change) => [
+                    diffEdgeSpec(change.mine),
+                    diffEdgeSpec(change.upstream),
+                ])),
+            ]),
+        diff.issuesChanged.length === 0
+            ? null
+            : element('div', { class: 'ig-recovery-side' }, [
+                element('h5', { class: 'ig-recovery-side-name' }, [words.issuesChanged]),
+                element('ul', { class: 'ig-recovery-issues' }, diff.issuesChanged.map((change) => element('li', { class: 'ig-recovery-issue' }, [
+                    element('span', { class: 'ig-id' }, [change.ref]),
+                    // BOTH TITLES, NEVER ONE RECONCILED ONE. A single line here
+                    // would be this package choosing a winner, which is the whole
+                    // of what §17b forbids.
+                    element('span', { class: 'ig-recovery-was' }, [change.mine?.title ?? '']),
+                    element('span', { class: 'ig-recovery-now' }, [change.upstream?.title ?? '']),
+                ]))),
+            ]),
+    ]);
+}
+/**
+ * The label for one affordance on one card.
+ *
+ * KEYED OFF THE CARD'S KIND, not off the affordance alone: `retry` is two
+ * different operations and §17b gives them two different names.
+ */
+function affordanceWord(affordance, kind, words) {
+    switch (affordance) {
+        case 'view-diff':
+            return words.viewDiff;
+        case 'retry':
+            return kind === 'conflict' ? words.retryOnLatest : words.retry;
+        case 'discard-mine':
+            return words.discardMine;
+    }
+}
+/**
+ * One unsettled write the reader can act on.
+ *
+ * THE BUTTONS ARE THE GRAMMAR TABLE'S, NOT A LIST WRITTEN HERE.
+ * `OVERLAY_TREATMENTS[kind].affordances` is what the line already draws its
+ * state from, so the card and the edge cannot come to offer different things —
+ * and because `OverlayAffordance` has no `merge` member, no entry in that table
+ * can produce a merge button. That is what this construction buys, and it is
+ * worth being exact about what it does NOT buy: the behavioural guarantee that
+ * nothing merges lives one layer down, in a store that exposes no merge call
+ * and a `HostEffect` with no merge arm.
+ *
+ * EVERY BUTTON CARRIES `data-ig-target`. The mount turns an attribute-borne
+ * command into `{ kind: 'control', name, target }`, and the reducer's `retry`
+ * and `discard` arms return NO EFFECT when `target` is undefined. Without the
+ * attribute all three controls render, read correctly, and do nothing — while
+ * every assertion about the command names stays green.
+ */
+function recoveryCard(recovery, words, diffOpen, keys) {
+    const treatment = OVERLAY_TREATMENTS[recovery.kind];
+    const open = recovery.kind === 'conflict' && diffOpen === recovery.mutationId;
+    return element('li', {
+        class: 'ig-recovery',
+        // THE STORE'S OWN VOCABULARY, so a host styles or counts these off the
+        // state rather than by matching a sentence — `data-ig-code`'s rule.
+        'data-ig-state': recovery.kind,
+    }, [
+        element('h4', { class: 'ig-recovery-name' }, [
+            recovery.kind === 'conflict' ? words.conflict : words.failed,
         ]),
+        recovery.kind === 'failed'
+            ? element('p', { class: 'ig-recovery-reason' }, [recovery.reason])
+            : null,
+        // THE REFRESH ERROR SITS ABOVE THE CONTROLS, because it is the reason the
+        // control the reader last pressed did nothing.
+        recovery.kind === 'conflict' && recovery.refreshError !== null
+            ? element('p', { class: 'ig-recovery-refresh-error' }, [
+                `${words.retryFailed} `,
+                element('span', { class: 'ig-recovery-refresh-detail' }, [recovery.refreshError]),
+            ])
+            : null,
+        element('div', { class: 'ig-recovery-actions' }, treatment.affordances.map((affordance) => element('button', {
+            type: 'button',
+            class: 'ig-recovery-action',
+            'data-ig-command': AFFORDANCE_COMMANDS[affordance],
+            'data-ig-target': recovery.mutationId,
+            // A DISCLOSURE, NOT A TOGGLE BUTTON. `view-diff` shows and hides
+            // a region, so `aria-expanded` (with `aria-controls` naming it)
+            // is the pattern; `aria-pressed` announces a two-state button and
+            // tells a screen-reader user nothing about the region that
+            // appeared. The other two act once and carry neither.
+            'aria-expanded': affordance === 'view-diff' ? (open ? 'true' : 'false') : undefined,
+            // ONLY WHILE THE REGION EXISTS. The difference is rendered only
+            // when open, so naming it while shut pointed `aria-controls` at
+            // no element at all — which the test for this control already
+            // calls "worse than none at all", while checking only the open
+            // case where it does resolve. `aria-expanded="false"` is
+            // complete on its own; `aria-controls` is optional, and a
+            // dangling IDREF is invisible on screen and total for a
+            // screen-reader user. Found by the a11y baseline's
+            // reference rule on its first run.
+            'aria-controls': affordance === 'view-diff' && open ? diffRegionId(recovery.mutationId) : undefined,
+        }, [affordanceWord(affordance, recovery.kind, words)]))),
+        // NARROWED BY THE PANEL'S KEY SET, not by the carrier alone. A together
+        // unit's lead speaks for its partners, so a single key would drop a
+        // partner's conflicted edge from the one panel entitled to state it.
+        // `null` keys is the unplaced region, which is nobody's unit: nothing is
+        // narrowed away there.
+        open && recovery.kind === 'conflict'
+            ? diffSpec(keys === null ? recovery.diff : diffWithin(recovery.diff, keys), words, diffRegionId(recovery.mutationId))
+            : null,
+    ]);
+}
+/** The cards a panel states, or nothing when it states none. */
+function recoveryListSpec(recoveries, words, diffOpen, keys, heading) {
+    if (recoveries.length === 0)
+        return null;
+    return element('div', { class: 'ig-recovery-region' }, [
+        heading === null ? null : element('h3', { class: 'ig-inspector-heading' }, [heading]),
+        element('ul', { class: 'ig-recovery-list' }, recoveries.map((recovery) => recoveryCard(recovery, words, diffOpen, keys))),
     ]);
 }
-function inspectorSpec(view, words, known, leadOf) {
+/**
+ * The relationship list, with a refused edit drawn where the reader made it.
+ *
+ * ## A refusal about an edge that EXISTS keeps its row
+ *
+ * See {@link WorkspaceRefusal.phantom}. Four of the store's codes mark a landed
+ * edge, so the capsule replaces the row only when there is no relationship
+ * under it; otherwise the reason joins the row and the remove control stays.
+ *
+ * ## Whose refusal it is, is not a question asked here
+ *
+ * {@link statedHere} asks it, of the carrier the refusal arrived carrying —
+ * and that is the whole of the change this function used to be the wrong place
+ * for. `refusals` is one list for the whole surface, not one per panel, and
+ * this function used to filter it by asking whether the refused edge's
+ * IDENTITY named the panel's subject. That is a second derivation of the
+ * edit's subject, run against a subject derived by a different rule, and every
+ * way the two can come apart is a refusal drawn in the wrong place or in no
+ * place: on every panel when nothing matched, on none when the panel had been
+ * canonicalized onto a together unit's lead, on none again when the projection
+ * had hidden the edge and left the panel with no subject at all. The refusal
+ * names its own carrier now, so there is one derivation and nothing for a
+ * second one to disagree with.
+ *
+ * ## The list is the ledger's, and the LAST refusal on an edge is the one
+ *
+ * One row states one reason, and the reader can be refused twice on one
+ * relationship — `ProjectedEdge.writes` is a list because two edits touching
+ * one edge compose in the order the reader made them. The last is the one they
+ * just caused; the first is one they have read and moved past. That collapse
+ * is `Map`'s repeated-key rule over `refusals` IN ORDER, which is why the
+ * option is a list rather than a map a caller had already collapsed: a caller
+ * assembling one from two passes loses the chronology at the join, and reports
+ * a stale reason for an edge the reader has just been refused on again.
+ *
+ * ## A refusal with no row is still drawn
+ *
+ * The refused edge normally reaches the document — the store draws a refused
+ * create as a phantom precisely so a surface can mark it — but that depends on
+ * the host's projection, and a refusal that vanished because the host projects
+ * only landed edges is the "never silently dropped" half of §17b's rule failing
+ * quietly. So a refusal this panel states and no row carries is appended after
+ * the rest, as a capsule.
+ */
+function relationshipEntries(view, subject, selected, context) {
+    const scope = panelScope(view);
+    const stated = new Map();
+    for (const refusal of context.refusals) {
+        if (statedHere(scope, refusal))
+            stated.set(refusal.edgeId, refusal);
+    }
+    const listed = new Set();
+    const rows = view.relationships.map((relationship) => {
+        const refusal = stated.get(relationship.edgeId);
+        if (refusal === undefined) {
+            return relationshipSpec(relationship, subject, selected, context.words, undefined);
+        }
+        listed.add(relationship.edgeId);
+        return refusal.phantom
+            ? refusalCapsule(relationship, refusal.code, subject, context.words)
+            : relationshipSpec(relationship, subject, selected, context.words, refusal.code);
+    });
+    const orphaned = [...stated.values()]
+        .filter((refusal) => !listed.has(refusal.edgeId))
+        .map((refusal) => refusalCapsule(undefined, refusal.code, subject, context.words));
+    return [...rows, ...orphaned];
+}
+/**
+ * §17a's inspector panel.
+ *
+ * ## The heading and the clear control are the panel's, not the list's
+ *
+ * Both used to hang off the relationship list, and the clear control was drawn
+ * only while an EDGE selection was narrowing it — so a reader who had selected
+ * an issue had no way back to nothing selected, on a control whose own doc
+ * says it "returns to nothing selected" and whose command is `clear`. The
+ * condition it wanted was "is there a selection to clear", which is what it now
+ * asks. `INITIAL_SELECTION` resolves to `none`, so the control is absent
+ * exactly when pressing it would do nothing.
+ *
+ * ## The create step is drawn here, and the target step is not
+ *
+ * See {@link kindListSpec}. What the panel owns is `+ add` and the numbered
+ * kind list; the target search stays in the shell because it is a live input
+ * over the reader's query and this renderer returns markup.
+ *
+ * WITH AN EDGE SELECTED IT DRAWS NEITHER. That is not the create path being
+ * unavailable — it is the panel filtered to one relationship, where "add a
+ * relationship from the selected issue" has no subject: `reduceHost`'s `add`
+ * reads `selectedKey`, which answers `null` for an edge selection. A control
+ * that could not complete the act it advertises is the finding the audit
+ * header already records paying for once.
+ */
+function inspectorSpec(view, context) {
+    const { words } = context;
     const subject = view.subject;
+    // THE CANONICAL SUBJECT, NOT THE SELECTION'S KEY. `inspectorView` folds a
+    // together-unit member onto its slot's lead and lists the LEAD's
+    // relationships, so a row worded against the key the reader clicked would
+    // read every relationship from the wrong end on exactly the units where a
+    // partner was selected. Read off the view, which is what the list was built
+    // from.
+    const key = subject.kind === 'issue' ? subject.issue.key : null;
+    const selected = subject.kind === 'edge' ? subject.relationship.edgeId : null;
+    const entries = relationshipEntries(view, key, selected, context);
+    // THE SAME SCOPE THE RELATIONSHIP LIST USED, asked once here rather than
+    // recomputed per region: two calls could not disagree today, but a panel that
+    // decides its own reach twice is the shape `carrier` exists to have ended.
+    const scope = panelScope(view);
     return element('div', { class: 'ig-inspector', 'data-subject': subject.kind }, [
+        element('div', { class: 'ig-inspector-head' }, [
+            element('h2', { class: 'ig-inspector-name' }, [words.inspector]),
+            subject.kind === 'none'
+                ? null
+                : element('button', { type: 'button', class: 'ig-inspector-clear', 'data-ig-command': 'clear' }, [words.clearSelection]),
+        ]),
         subject.kind === 'none'
             ? element('p', { class: 'ig-inspector-empty' }, [words.nothingSelected])
             : null,
         subject.kind === 'issue'
             ? element('div', { class: 'ig-inspector-issue' }, [
-                element('h2', { class: 'ig-inspector-title' }, [subject.issue.title]),
-                element('span', { class: 'ig-inspector-key' }, [subject.issue.key]),
-                subject.position === null
-                    ? null
-                    : element('p', {
-                        class: 'ig-inspector-position',
-                        'data-ready': subject.position.ready ? 'true' : 'false',
-                    }, 
-                    // A HELD SLOT PRINTS THE VIEWER'S EM DASH, not a number. It has
-                    // no position in the sequence, and printing one would claim work
-                    // is queued that nothing can start.
-                    [subject.position.rank === null ? '—' : String(subject.position.rank)]),
-                subject.position === null || subject.position.holds.length === 0
+                element('h3', { class: 'ig-inspector-title' }, [subject.issue.title]),
+                // LAYER 1's CHIP, not a second spelling of it. `identity` links the
+                // qualified reference when the host gave a URL and prints it plain
+                // when it did not — the rule for which is exactly the knowledge this
+                // package must not carry a second copy of.
+                identity(subject.issue),
+                // THE RANK IS THE HEADING'S NOW, so there is no separate position
+                // line: it printed the number, or the em dash for a held slot, which
+                // is exactly what `WHY RANK n` and `WHY HELD` already say. Two
+                // elements for one fact is how they come to disagree.
+                subject.whyRank === null
                     ? null
-                    : element('ul', { class: 'ig-inspector-holds' }, subject.position.holds.map((hold) => holdRow(hold, known, (key) => leadOf.get(key) === leadOf.get(subject.issue.key)))),
+                    : whyRankSpec(subject.whyRank, words, subject.whyRank.holds.map((hold) => holdRow(hold, context.known, (subjectKey) => context.leadOf.get(subjectKey) === context.leadOf.get(subject.issue.key)))),
             ])
             : null,
         element('div', { class: 'ig-inspector-relationships', 'data-filtered': view.filtered ? 'true' : 'false' }, [
             element('h3', { class: 'ig-inspector-heading' }, [words.relationships]),
-            view.filtered
-                ? element('button', { type: 'button', class: 'ig-inspector-clear', 'data-ig-command': 'clear' }, [words.clearSelection])
+            // A STATED EMPTY, AND ONLY WHERE THERE IS A SUBJECT TO STATE IT ABOUT.
+            // With nothing selected the panel already says so once, in
+            // `nothingSelected`; adding "no relationships" under it would be the
+            // same absence reported twice, in two registers, on the render where
+            // the reader has asked nothing yet.
+            entries.length === 0 && subject.kind !== 'none'
+                ? element('p', { class: 'ig-inspector-none' }, [words.noRelationships])
                 : null,
-            view.relationships.length === 0
-                ? null
-                : element('ul', { class: 'ig-relationship-list' }, view.relationships.map((relationship) => relationshipSpec(relationship))),
+            entries.length === 0 ? null : element('ul', { class: 'ig-relationship-list' }, entries),
+            // THE STEPS ARE EXCLUSIVE, AND THE CHAIN IS THE SHELL'S OWN. `+ add`
+            // begins a draft; the numbered list is what a live draft with no kind
+            // yet looks like. Drawing `+ add` beside a live list would offer a
+            // reader mid-draft a control that RESETS the draft they are in —
+            // `create/draft.ts` makes `begin` clear the kind and the target
+            // deliberately.
+            // ASKED UNCONDITIONALLY, because the step belongs to the DRAFT and only
+            // `+ add` belongs to the subject. `subject.kind !== 'issue' ? null : …`
+            // was one guard doing both jobs, and it dropped a live draft's controls
+            // on a panel with no issue subject — which `reconcileHost` reaches by
+            // clearing a selection whose issue a write removed while leaving a
+            // draft begun from another issue standing.
+            addStepSpec(context, subject.kind === 'issue' ? subject.issue.key : null),
         ]),
+        // STATED WHERE THE READER MADE THE EDIT, by the same rule the refusals use
+        // — one `statedHere`, one carrier, no second derivation of whose panel this
+        // is. No heading: the cards carry their own state names, and a heading over
+        // a region that is usually absent is a heading a reader learns to skip.
+        recoveryListSpec(context.recoveries.filter((recovery) => statedHere(scope, recovery)), words.recovery, context.diffOpen, scope.kind === 'issue' ? scope.keys : null, null),
+        // THE WRITES WITH NOWHERE TO SIT, ON EVERY PANEL. A recovery whose carrier
+        // is `null` is about issues this backlog does not hold, so no panel is
+        // entitled to it — and the refusal path drops exactly these. Dropping a
+        // REFUSAL costs a sentence the reader can live without; dropping a RECOVERY
+        // takes away the only retry and discard they have, which is #137's
+        // Done-when 1 ("offers all three resolutions from the editor's own
+        // surface") failing on the state where it matters most. So they are drawn
+        // here, under a heading that says why they are not on a relationship.
+        // AND NEVER TWICE ON ONE PANEL. `statedHere`'s EDGE arm matches on
+        // `edgeId` and ignores the carrier, so an edge panel narrowed to a
+        // null-carrier recovery's own edge states it above AND here — two identical
+        // cards, two tab stops, and two buttons carrying one write's id.
+        recoveryListSpec(context.recoveries.filter((recovery) => recovery.carrier === null && !statedHere(scope, recovery)), words.recovery, context.diffOpen, null, words.recovery.unplaced),
     ]);
 }
+/**
+ * Which step of the create path the panel is showing.
+ *
+ * THE STEP FOLLOWS THE DRAFT, NOT THE SELECTION, and the draft's source is
+ * NAMED when it is not this panel's subject. The two can diverge: `pointed`
+ * diverts a click to the draft only once a kind has been chosen, so at the kind
+ * step a click anywhere else moves the selection and leaves the draft's source
+ * behind — and `R` on a together unit's non-lead member begins a draft from
+ * that member while `inspectorView` canonicalizes the panel onto the slot's
+ * LEAD, so the two disagree from the first keystroke. Unnamed, the panel showed
+ * "choose a kind" beneath the heading of one issue while the write would go out
+ * from another. Named, it says whose draft it is.
+ *
+ * WITHHOLDING THE LIST WAS THE FIRST ANSWER AND IT WAS WORSE. It left the
+ * reader a LIVE draft with no pointer route to it at all: the numbered choices
+ * were gone, the cancel that sits with them was gone, and the shell draws no
+ * chooser of its own at this step — `mount.ts`'s floating one is drawn only
+ * under a canvas drop, and its target search only once a kind is chosen. So the
+ * one control still on screen was `+ add`, which does not cancel a draft, it
+ * RESETS one, silently moving the source to whatever the reader happened to be
+ * looking at. "The shell's cancel still reaches it" was the reasoning, and the
+ * shell has no cancel to reach it with. A draft the reader cannot abandon with
+ * a pointer is the failure `create/keys.ts` names for the keyboard, and the
+ * cost of the alternative — one phrase naming an issue that is not the panel's
+ * subject — is the cost the shell's own chooser always paid, in the sentence it
+ * printed above its kinds.
+ *
+ * `+ add` IS NOT DRAWN BESIDE IT, on either panel. Two entries into one draft is
+ * the rule {@link WorkspaceOptions.drop} already states for the floating
+ * chooser, and here the second entry is the destructive one: `create/draft.ts`
+ * makes `begin` clear the kind and the target deliberately, so a reader
+ * mid-draft offered `+ add` is offered a reset wearing the label of a start.
+ * They restart by cancelling first, which is now a control they can see.
+ *
+ * IT IS ASKED FOR EVERY SUBJECT, INCLUDING NONE. `+ add` is the half that needs
+ * one — `reduceHost`'s `add` arm answers `null` for an edge selection and for
+ * none, so a control there could not complete — and the step is not. One guard
+ * over both dropped a live draft's controls on a panel with no issue subject,
+ * which `reconcileHost` reaches: it clears a selection whose issue a landed
+ * write removed while leaving a draft begun from a DIFFERENT issue standing,
+ * because that draft's own references are all still in the document.
+ *
+ * `null` AT THE TARGET STEP AND UNDER A LIVE DROP, which are two more different
+ * silences and both deliberate. The target step belongs to the shell, which
+ * owns the live input — and draws its own cancel beside it, naming the source
+ * in the same sentence. A drop means a chooser is already open at the pointer,
+ * with a cancel of its own, and a second copy of the same step in the column
+ * beside it would be two controls writing to one draft.
+ */
+function addStepSpec(context, subject) {
+    const { draft, drop, words } = context;
+    // THE ONE LIVE KIND STEP, WHEREVER IT WAS BEGUN. Asked of the draft alone, so
+    // there is exactly one panel state for it rather than one per subject — and
+    // so a panel with no issue subject at all still carries the cancel.
+    if (draft.source !== null && draft.kind === null && drop === null) {
+        return kindListSpec(words, draft.source === subject ? null : draft.source);
+    }
+    // `+ add` NEEDS A SUBJECT TO BEGIN FROM, and `reduceHost`'s `add` arm answers
+    // `null` for an edge selection and for none — so drawing it there would
+    // publish an act that cannot complete.
+    if (subject !== null && draft.source !== subject) {
+        return element('div', { class: 'ig-inspector-add' }, [
+            element('button', {
+                type: 'button',
+                class: 'ig-inspector-addbutton',
+                'data-ig-command': 'add',
+                // THE CANONICAL SUBJECT, PUBLISHED, for the reason the row's remove
+                // control publishes its own edge. `reduceHost`'s `add` arm read
+                // `selectedKey` — the RAW key — while everything around it is worded
+                // against the slot LEAD that `inspectorView` canonicalizes to, so
+                // selecting a together-unit PARTNER drew a panel titled with the lead
+                // and began a relationship from the partner. The act names its
+                // subject; the selection is the fallback for a control that names
+                // none.
+                'data-ig-target': subject,
+            }, [words.addRelationship]),
+        ]);
+    }
+    return null;
+}
 /**
  * One hold in the inspector, with its cause and its subject on the markup.
  *
@@ -259,7 +1144,12 @@ function holdRow(hold, known, inInspectedSlot) {
         'data-code': hold.code,
         'data-subject': hold.subject,
     }, [
-        hold.reason,
+        // THE RUNNER'S WORD, as the rail draws it: the same hold must not read
+        // `claimed …` in one zone and bare in the other.
+        hold.family === 'tracker' && hold.label !== undefined && hold.label !== ''
+            ? element('span', { class: 'ig-badge', 'data-hold': hold.label }, [hold.label])
+            : null,
+        hold.family === 'tracker' && hold.label !== undefined && hold.label !== '' ? ` ${hold.reason}` : hold.reason,
         hold.subject === undefined || !known.has(hold.subject) || inInspectedSlot(hold.subject)
             ? null
             : element('button', {
@@ -372,14 +1262,35 @@ export function renderWorkspace(input, options) {
     const inspector = inspectorView(document, selection);
     const markup = [
         `<div class="ig-workspace">`,
-        overlay === null ? '' : zone('header', renderAuditHeader(overlay, { filtered })),
+        zone('header', headerMarkup(document.host, overlay === null ? '' : renderAuditHeader(overlay, { filtered }))),
         zone('rail', [
             railSpacer(rail.before, 'before'),
             renderMarkup(markRail(railRender.scene.root, (key) => severityByKey.get(key))),
             railSpacer(rail.after, 'after'),
         ].join('')),
         zone('canvas', canvas.markup),
-        zone('inspector', renderMarkup(inspectorSpec(inspector, options.words, known, leadOf))),
+        zone('inspector', renderMarkup(inspectorSpec(inspector, {
+            words: options.words,
+            known,
+            leadOf,
+            draft: options.draft ?? IDLE_CREATE_DRAFT,
+            drop: options.drop ?? null,
+            // FORWARDED IN THE ORDER IT ARRIVED, and turned into an answer per
+            // edge inside `relationshipEntries` — after the panel has decided
+            // which of them are its to state. Collapsing here instead put the
+            // "one reason per row" rule one layer away from the filter that
+            // decides which reasons there are, and made the ORDER of this array
+            // load-bearing at a distance: a caller building it from two passes
+            // lost the ledger's chronology at the join, and the panel reported a
+            // refusal the reader had already read instead of the one they had
+            // just caused.
+            refusals: options.refusals ?? [],
+            // FORWARDED IN THE LEDGER'S ORDER too, for the reason above: the
+            // cards are drawn in the order the writes were made, so the one the
+            // reader just caused is the one nearest what they were doing.
+            recoveries: options.recoveries ?? [],
+            diffOpen: options.diffOpen ?? null,
+        }))),
         `</div>`,
     ].join('');
     return {