changeledger 0.7.0 → 0.9.0

package/src/viewer/public/styles.css

@@ -23,12 +23,34 @@
   --status-discarded: #9aa0aa;
   --status-muted: #8b929e;
   font-family: "Avenir Next", Avenir, ui-sans-serif, sans-serif;
+  color-scheme: dark;
 }
 
 * {
   box-sizing: border-box;
 }
 
+html,
+body {
+  scrollbar-width: thin;
+  scrollbar-color: #3a414e transparent;
+}
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track {
+  background: transparent;
+}
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb {
+  background: #3a414e;
+  border: 2px solid var(--bg);
+  border-radius: 999px;
+}
+
 body {
   margin: 0;
   background: var(--bg);
@@ -527,16 +549,31 @@ body {
   padding: 16px;
   overflow-x: auto;
   align-items: flex-start;
+}
+.board,
+.detail,
+.detail pre,
+.detail table {
   scrollbar-width: thin;
   scrollbar-color: #3a414e transparent;
 }
-.board::-webkit-scrollbar {
+.board::-webkit-scrollbar,
+.detail::-webkit-scrollbar,
+.detail pre::-webkit-scrollbar,
+.detail table::-webkit-scrollbar {
+  width: 8px;
   height: 8px;
 }
-.board::-webkit-scrollbar-track {
+.board::-webkit-scrollbar-track,
+.detail::-webkit-scrollbar-track,
+.detail pre::-webkit-scrollbar-track,
+.detail table::-webkit-scrollbar-track {
   background: transparent;
 }
-.board::-webkit-scrollbar-thumb {
+.board::-webkit-scrollbar-thumb,
+.detail::-webkit-scrollbar-thumb,
+.detail pre::-webkit-scrollbar-thumb,
+.detail table::-webkit-scrollbar-thumb {
   background: #3a414e;
   border: 2px solid var(--bg);
   border-radius: 999px;
@@ -545,10 +582,10 @@ body {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 12px;
-  width: clamp(238px, calc((100vw - 116px) / 7), 320px);
-  min-width: 238px;
-  max-width: 320px;
-  flex: 0 0 clamp(238px, calc((100vw - 116px) / 7), 320px);
+  width: clamp(190px, calc((100vw - 140px) / 6), 400px);
+  min-width: 190px;
+  max-width: 400px;
+  flex: 0 0 clamp(190px, calc((100vw - 140px) / 6), 400px);
 }
 .column-head {
   display: flex;
@@ -593,6 +630,8 @@ body {
   font-family: ui-monospace, monospace;
   color: var(--muted);
   font-size: 12px;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 .type-tag {
   font-size: 10px;
@@ -625,6 +664,7 @@ body {
 .card-title {
   font-weight: 600;
   line-height: 1.3;
+  overflow-wrap: anywhere;
 }
 .progress {
   margin-top: 9px;
@@ -640,6 +680,7 @@ body {
 }
 .card-meta {
   display: flex;
+  flex-wrap: wrap;
   gap: 10px;
   margin-top: 7px;
   font-size: 11px;
@@ -689,6 +730,13 @@ body {
   gap: 10px;
   margin-top: 15px;
 }
+.reopen-controls {
+  display: grid;
+  grid-template-columns: minmax(190px, 1fr) auto;
+  align-items: end;
+  gap: 10px;
+  margin-top: 15px;
+}
 .rejection-field {
   display: flex;
   flex-direction: column;
@@ -750,6 +798,7 @@ body {
 }
 .owner {
   font-weight: 600;
+  overflow-wrap: anywhere;
 }
 .card.archived {
   opacity: 0.55;
@@ -847,21 +896,107 @@ body {
 }
 
 /* Overlay + detail */
+.detail-open {
+  overflow: hidden;
+}
 .overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
   display: flex;
   justify-content: flex-end;
+  align-items: stretch;
   z-index: 20;
 }
 .detail {
-  width: min(720px, 92vw);
+  --detail-width: 960px;
+  container-type: inline-size;
+  position: relative;
+  width: min(var(--detail-width), calc(100vw - 48px));
   height: 100%;
   background: var(--bg);
   border-left: 1px solid var(--line);
   overflow-y: auto;
+  overflow-anchor: none;
   padding: 22px 26px 60px;
+  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.28);
+}
+.detail[data-detail-size="compact"] {
+  --detail-width: 720px;
+}
+.detail[data-detail-size="wide"] {
+  --detail-width: 960px;
+}
+.detail[data-detail-size="full"] {
+  --detail-width: 1280px;
+}
+.overlay[data-detail-mode="floating"] {
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+}
+.overlay[data-detail-mode="floating"] .detail {
+  width: min(var(--detail-width), calc(100vw - 56px));
+  height: min(92vh, calc(100vh - 56px));
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
+}
+.detail-toolbar {
+  position: sticky;
+  top: -22px;
+  z-index: 3;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  margin: -22px -26px 20px;
+  padding: 14px 26px 10px;
+  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
+  background: color-mix(in srgb, var(--bg) 92%, transparent);
+  backdrop-filter: blur(14px);
+}
+.detail-presentation {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: fit-content;
+}
+.detail-choice {
+  display: inline-flex;
+  padding: 3px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+}
+.detail-option {
+  min-height: 28px;
+  padding: 4px 9px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.detail-option[aria-pressed="true"] {
+  background: var(--panel-2);
+  color: var(--text);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, var(--line));
+}
+.detail-option:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.detail pre {
+  max-width: 100%;
+  overflow-x: auto;
+}
+.detail table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
 }
 .detail h1 {
   font-size: 22px;
@@ -909,19 +1044,27 @@ body {
   outline-offset: 3px;
 }
 .close {
-  position: absolute;
-  top: 16px;
-  right: 22px;
+  justify-self: end;
+}
+.detail-toolbar-close {
+  grid-column: 3;
 }
 
 .pipeline {
   display: flex;
-  flex-wrap: wrap;
+  min-width: 0;
+  flex-wrap: nowrap;
   gap: 6px;
-  margin: 16px 0;
+  margin: 0;
+  padding: 3px 2px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: thin;
 }
 .stage-chip {
+  flex: 0 0 auto;
   font-size: 12px;
+  font-family: inherit;
   padding: 5px 11px;
   border-radius: 999px;
   background: var(--panel);
@@ -937,6 +1080,7 @@ body {
 .stage {
   border-top: 1px solid var(--line);
   padding-top: 14px;
+  scroll-margin-top: 72px;
   margin-top: 18px;
 }
 .stage h2 {
@@ -1235,7 +1379,8 @@ body {
     width: 100%;
     flex: 0 0 auto;
   }
-  .validation-controls {
+  .validation-controls,
+  .reopen-controls {
     grid-template-columns: 1fr;
     align-items: stretch;
   }
@@ -1255,7 +1400,32 @@ body {
   }
   .detail {
     width: 100vw;
+    max-width: none;
+    height: 100vh;
+    max-height: none;
     padding: 18px 16px 60px;
+    border: 0;
+    border-radius: 0;
+  }
+  .overlay[data-detail-mode] {
+    align-items: stretch;
+    justify-content: stretch;
+    padding: 0;
+  }
+  .overlay[data-detail-mode] .detail {
+    width: 100vw;
+    height: 100vh;
+    max-height: none;
+    border: 0;
+    border-radius: 0;
+  }
+  .detail-toolbar {
+    top: -18px;
+    margin: -18px -16px 16px;
+    padding: 10px 16px 8px;
+  }
+  .detail-option {
+    padding-inline: 7px;
   }
   .grid th,
   .grid td {
@@ -1263,6 +1433,27 @@ body {
   }
 }
 
+/* Detail toolbar stacks its stage navigation onto its own row whenever the
+   detail panel itself lacks room, independent of the surrounding viewport —
+   this also covers the "Compact" width preset, not just narrow screens. */
+@container (max-width: 680px) {
+  .detail-toolbar {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px;
+  }
+  .detail-toolbar-close {
+    grid-column: 2;
+    grid-row: 1;
+  }
+  .pipeline {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+  .stage {
+    scroll-margin-top: 126px;
+  }
+}
+
 /* config editor tabs and form (113924) */
 .config-section {
   border-bottom: 1px solid var(--line);

package/src/viewer/public/view-parts.js

@@ -36,6 +36,58 @@ export function closeButton(label = 'Close detail', extraClass = '') {
   </button>`;
 }
 
+export function detailPresentationControls(mode = 'side', size = 'wide') {
+  const options = (values, selected, attr) =>
+    values.map(
+      ([value, label]) => html`<button
+        type="button"
+        class="detail-option"
+        data-detail-setting=${attr}
+        data-detail-value=${value}
+        aria-pressed=${String(selected === value)}
+      >${label}</button>`,
+    );
+  return html`<div class="detail-presentation" aria-label="Detail presentation">
+    <div class="detail-choice" role="group" aria-label="Layout">
+      ${options(
+        [
+          ['side', 'Side panel'],
+          ['floating', 'Floating modal'],
+        ],
+        mode,
+        'mode',
+      )}
+    </div>
+    <div class="detail-choice" role="group" aria-label="Width">
+      ${options(
+        [
+          ['compact', 'Compact'],
+          ['wide', 'Wide'],
+          ['full', 'Full'],
+        ],
+        size,
+        'size',
+      )}
+    </div>
+  </div>`;
+}
+
+export function detailToolbar(mode = 'side', size = 'wide', stages = []) {
+  const navigation = stages.length
+    ? html`<nav class="pipeline" aria-label="Change sections">
+      ${stages.map(
+        (stage) =>
+          html`<button type="button" class="stage-chip" data-go=${`stage-${stage.key}`}>${stage.heading}</button>`,
+      )}
+    </nav>`
+    : nothing;
+  return html`<div class="detail-toolbar" aria-label="Detail tools">
+    ${detailPresentationControls(mode, size)}
+    ${navigation}
+    ${closeButton('Close detail', 'detail-toolbar-close')}
+  </div>`;
+}
+
 export function validationPanel() {
   return html`<section class="validation-actions" aria-labelledby="validation-title">
     <div class="validation-copy">

package/templates/contract/agent-contexts/implementation.md

@@ -0,0 +1,18 @@
+# Implementation Delegate
+
+This is a self-contained delegated context. It replaces the ChangeLedger core
+for this role; do not run `changeledger context` or load another ChangeLedger
+context.
+
+Implement only the bounded assignment in the delegation prompt and follow the
+selected change's Specification and Plan exactly. With `tdd=on`, write the
+failing test for each assigned criterion, make it pass, then refactor.
+
+Modify only the files assigned in the delegation prompt. You share the worktree:
+do not revert or overwrite others' work; stop and report any overlap instead of
+resolving it silently. Do not change Git state, mutate the ledger or delegate
+any part of the work. Lifecycle, tasks, Log, review and integration remain the
+orchestrator's responsibility.
+
+Return the files changed, criteria covered, tests run and their results, plus
+any overlap or uncertainty. The orchestrator integrates and records the work.

package/templates/contract/agent-contexts/investigation.md

@@ -0,0 +1,14 @@
+# Investigation Delegate
+
+This is a self-contained delegated context. It replaces the ChangeLedger core
+for this role; do not run `changeledger context` or load another ChangeLedger
+context.
+
+Answer only the investigation question and ownership boundary in the delegation
+prompt. This role is read-only: do not modify files, Git state or the ledger, and
+do not delegate any part of the work.
+
+Inspect the smallest useful surface. Return concrete findings and evidence such
+as file:line references, constraints, risks and a root-cause statement when
+applicable. State what could not be determined. Do not implement fixes or create
+ChangeLedger artifacts.

package/templates/contract/agent-contexts/review.md

@@ -0,0 +1,22 @@
+# Independent Review Delegate
+
+This is a self-contained delegated context. It replaces the ChangeLedger core
+for this role; do not run `changeledger context` or load another ChangeLedger
+context.
+
+Review with clean context and do not trust the implementer's summary. This role
+is read-only: do not modify files, Git state or the ledger, do not record the
+verdict, and do not delegate any part of the work.
+
+Inspect the selected change, every `CRn`, every Plan task, tests, the actual diff
+and absence of TODO/FIXME, dead code or unrelated residue. Confirm tasks are
+true rather than merely checked off and that implementation did not drift from
+the authorized document.
+
+Deep security, SAST and lint belong to dedicated tools. You may run them
+read-only and report their evidence; ChangeLedger does not reimplement them.
+
+Return per-criterion PASS/FAIL evidence and one recommended outcome: pass,
+fail-retry with a reason for a fixable defect inside scope, or fail-block with a
+reason when correction needs scope or product judgment. The orchestrator alone
+records the verdict.

package/templates/contract/agent-prompts/implementation.md

@@ -0,0 +1,38 @@
+# Delegation skeleton — role: implementation
+
+Fill every `{{placeholder}}` before handing this prompt to the subagent. Delete
+guidance in parentheses. The delegate writes code within a bounded ownership; the
+orchestrator keeps the ledger and integration.
+
+---
+
+You are an IMPLEMENTATION delegate. Do not delegate any part of this to another
+agent; execute it yourself.
+
+Why this is delegated: {{reason}} (why a separate agent, e.g. a disjoint write
+set that parallelizes safely, a sufficient cheaper model for well-specified
+execution).
+
+Your prompt identifies you as a ChangeLedger delegate. As your only ChangeLedger
+load, run `changeledger agent-context implementation {{change_id}}` and read it
+through its END sentinel; do not load the orchestrator core. It supplies the
+selected change with its acceptance criteria and Plan.
+
+Files you own: {{files}} (the only paths you may modify).
+
+Boundaries — expressed by effect, not by tool name: modify only the files under
+your ownership above; do not revert or overwrite anyone else's work; if you find
+your change overlaps another change's surface, stop and report it instead of
+resolving it silently. Do not mutate the ledger — status, task, log, review and
+graduation transitions are the orchestrator's; you implement and report.
+
+Expected output: {{expected_output}} (the code plus the tests that prove the
+cited criteria, red-green; state which criteria you covered).
+
+Difficulty or risk that set the model choice: {{difficulty_or_risk}}.
+
+Return to the orchestrator only what changed and how it was verified — the files
+touched, the tests run and their result, and any overlap you hit.
+
+Integration criterion: {{integration}} (how the orchestrator merges/verifies your
+work, e.g. it re-runs the full gate and records the ledger transitions).

package/templates/contract/agent-prompts/investigation.md

@@ -0,0 +1,41 @@
+# Delegation skeleton — role: investigation
+
+Fill every `{{placeholder}}` before handing this prompt to the subagent. Delete
+guidance in parentheses. This is a read-only inquiry: the delegate answers a
+question, it does not change anything.
+
+---
+
+You are an INVESTIGATION delegate. Do not delegate any part of this to another
+agent; execute it yourself.
+
+Why this is delegated: {{reason}} (why a separate agent, e.g. protect main
+context, parallelize an independent question, bring a stronger model to hard
+analysis).
+
+Question you own: {{question}} (the single question or area to investigate;
+state it concretely).
+
+Your prompt identifies you as a ChangeLedger delegate. As your only ChangeLedger
+load, run `changeledger agent-context investigation {{change_id}}` and read it
+through its END sentinel; do not load the orchestrator core. There may be no
+change yet: work without a change id. If the optional id below is empty, omit it
+from the command.
+
+Optional selected change: {{change_id}} (leave empty when investigating before a
+change exists).
+
+Boundaries — expressed by effect, not by tool name: do not modify any file, do
+not change Git state, and do not mutate the ledger (no status, task, log, review
+or graduation). Inspect and read only.
+
+Expected output: {{expected_output}} (what the answer must contain, e.g. a
+file:line map, a root-cause statement, a constraints/risks list).
+
+Difficulty or risk that set the model choice: {{difficulty_or_risk}}.
+
+Return to the orchestrator only findings/data — no narrative, no fixes. State
+clearly what you could not determine.
+
+Integration criterion: {{integration}} (how the orchestrator will use the answer,
+e.g. it feeds the Investigation stage of the change).

package/templates/contract/agent-prompts/review.md

@@ -0,0 +1,36 @@
+# Delegation skeleton — role: review
+
+Fill every `{{placeholder}}` before handing this prompt to the subagent. Delete
+guidance in parentheses. The reviewer is a fresh, clean-context, read-only check;
+the orchestrator alone records the verdict.
+
+---
+
+You are an INDEPENDENT REVIEW delegate with clean context. Do not delegate any
+part of this to another agent; execute it yourself.
+
+Why this is delegated: {{reason}} (independence is a correctness requirement, not
+an optimization — a fresh reviewer that does not trust the implementer's summary).
+
+Your prompt identifies you as a ChangeLedger delegate. As your only ChangeLedger
+load, run `changeledger agent-context review {{change_id}}` and read it through
+its END sentinel; do not load the orchestrator core. Use the inspection
+checklist that agent-context gives you.
+
+Change under review: {{change_id}}.
+
+Boundaries — expressed by effect, not by tool name: do not modify any file, do
+not change Git state, and do not mutate the ledger. You inspect and report only;
+you never record the verdict — the orchestrator does that.
+
+Expected output: {{expected_output}} (per-criterion PASS/FAIL with concrete
+evidence, plus any drift or residue found).
+
+Difficulty or risk that set the model choice: {{difficulty_or_risk}}.
+
+Return to the orchestrator a single recommended verdict — one of pass, fail-retry
+with a reason, or fail-block with a reason — with the evidence behind it. The
+orchestrator records it.
+
+Integration criterion: {{integration}} (how the orchestrator acts on the verdict,
+e.g. it records pass and moves the change to in-validation).

package/templates/contract/budgets.yml

@@ -0,0 +1,16 @@
+{
+  "base": {
+    "core": { "target": { "lines": 125, "bytes": 7500 }, "hard": { "lines": 140, "bytes": 9000 } },
+    "spec": { "target": { "lines": 280, "bytes": 12000 }, "hard": { "lines": 310, "bytes": 13500 } },
+    "implement": { "target": { "lines": 185, "bytes": 8500 }, "hard": { "lines": 205, "bytes": 10000 } },
+    "review": { "target": { "lines": 70, "bytes": 3500 }, "hard": { "lines": 85, "bytes": 4500 } },
+    "release": { "target": { "lines": 45, "bytes": 2500 }, "hard": { "lines": 60, "bytes": 3500 } }
+  },
+  "agent": { "target": { "lines": 45, "bytes": 2000 }, "hard": { "lines": 60, "bytes": 3000 } }
+  ,"overlays": {
+    "blocked": { "target": { "lines": 70, "bytes": 3000 }, "hard": { "lines": 84, "bytes": 3600 } },
+    "in-validation": { "target": { "lines": 45, "bytes": 1700 }, "hard": { "lines": 54, "bytes": 2040 } },
+    "done": { "target": { "lines": 90, "bytes": 3500 }, "hard": { "lines": 108, "bytes": 4200 } },
+    "discarded": { "target": { "lines": 40, "bytes": 1300 }, "hard": { "lines": 48, "bytes": 1560 } }
+  }
+}

package/templates/contract/close.md

@@ -20,24 +20,35 @@ tags: []
 Choose exactly one explicit graduation mode. A positional slug without a mode
 is an error, so words such as `skip` or `skip-*` can never silently become specs.
 
-- For a new spec, run `changeledger graduate <id> <spec-slug> --new`. This creates
-  a seed from the change's Specification or Proposal but leaves graduation
-  pending. Rewrite it as concise durable current truth and remove the explicit
-  scaffold marker. Then run `changeledger graduate <id> <spec-slug> --into` to
-  finalize it. `--into` refuses an unrefined marked scaffold.
-- For an existing spec, the agent edits its body first, then runs
+For a new spec, follow this ordered recipe — `--new` alone does not finish it:
+
+1. `changeledger graduate <id> <spec-slug> --new` creates a seed from the
+   change's Specification or Proposal but leaves graduation pending; it does not
+   set `reviewed: true`.
+2. Rewrite the seed as concise durable current truth and remove the explicit
+   scaffold marker.
+3. `changeledger graduate <id> <spec-slug> --into` finalizes it; `--into`
+   refuses an unrefined marked scaffold and sets `reviewed: true`.
+
+Alternatives to the two-step:
+
+- For an existing spec, edit its body first, then run
   `changeledger graduate <id> <spec-slug> --into`. It refreshes `updated`, records
-  the link and does not overwrite the body.
+  the link, does not overwrite the body and sets `reviewed: true`.
 - `changeledger graduate <id> --skip [reason]` records that no persistent truth
-  changed.
+  changed and sets `reviewed: true`.
 - `changeledger graduate --pending` lists accepted changes whose decision is
   unresolved.
 
-Finalization with `--into` and skip both set `reviewed: true` on the change;
-`--new` does not. The boolean means the persistent-truth question was settled,
-not necessarily that a spec was created.
-The graduation link remains derivable from the Log marker `graduado a spec`,
-which carries the spec link, rather than from the boolean flag.
+`reviewed: true` means the persistent-truth question was settled, not necessarily
+that a spec was created. The graduation link remains derivable from the Log
+marker `graduado a spec`, which carries the spec link, rather than from the flag.
+
+After `--into` or `--skip`, create one final closure commit that coalesces any
+pending `in-review → in-validation → done` ledger updates with the graduation
+decision and durable spec edit. Do not create separate commits whose only
+content is one of those transitions. If no lifecycle state is pending, the
+graduation or skip itself remains the meaningful closure evidence.
 
 Operational inspection and visibility:
 
@@ -47,4 +58,4 @@ Operational inspection and visibility:
 
 Use Mermaid where it communicates persistent relationships better than prose.
 After closure, share a brief retrospective. New work needs a newly authorized
-change; `done` never reopens.
+change; graduated, skipped, archived or released work never reopens.