changeledger 0.6.4 → 0.8.0

package/src/viewer/public/app.js

@@ -19,6 +19,7 @@ import {
   normalizeRepoState,
   restoreViewerState,
   selectProject,
+  setDetailPresentation,
   setOwnerFilter,
   setRepo,
   setSortKey,
@@ -36,7 +37,7 @@ import { boardStatuses, isVisible, passesTombstones } from './state.js';
 import { html, render as litRender, nothing } from './templates.js';
 import {
   card,
-  closeButton,
+  detailToolbar,
   sortIndicator,
   specBody,
   stageBlock,
@@ -50,6 +51,8 @@ export { cssIdent, esc, makeMermaidExpandable, safeHtml } from './security.js';
 export { boardStatuses, isVisible, passesTombstones } from './state.js';
 export {
   card,
+  detailPresentationControls,
+  detailToolbar,
   sortIndicator,
   stageBlock,
   statusSummary,
@@ -312,6 +315,73 @@ export async function runValidationSubmission({ root, request, onSuccess }) {
   return true;
 }
 
+export function reopenPanel(status) {
+  if (status !== 'done') return nothing;
+  return html`<section class="validation-actions" aria-labelledby="reopen-title">
+    <div class="validation-copy">
+      <span class="validation-kicker">Lifecycle correction</span>
+      <h2 id="reopen-title">Reopen completed change</h2>
+      <p>Return this change to active work while preserving why its completion was reconsidered.</p>
+    </div>
+    <div class="reopen-controls">
+      <div class="rejection-field">
+        <label for="reopen-reason">Reason for reopening</label>
+        <input
+          id="reopen-reason"
+          data-reopen-reason
+          type="text"
+          placeholder="What requires more work?"
+        />
+        <p class="validation-error" role="alert" hidden></p>
+      </div>
+      <button type="button" class="button button-danger" data-reopen>Reopen change</button>
+    </div>
+  </section>`;
+}
+
+export function bindReopenAction({ root, request, onSuccess }) {
+  const button = root.querySelector('[data-reopen]');
+  if (!button) return;
+  button.onclick = async () => {
+    const input = root.querySelector('[data-reopen-reason]');
+    const reason = input?.value.trim();
+    if (!reason) {
+      showValidationError(root, 'A reopening reason is required.');
+      input?.focus();
+      return false;
+    }
+    return runValidationSubmission({
+      root,
+      request: () => request(reason),
+      onSuccess,
+    });
+  };
+}
+
+export function applyDetailPresentation(root = document) {
+  const overlay = root.querySelector('#overlay');
+  const detail = root.querySelector('#detail');
+  if (!overlay || !detail) return;
+  overlay.dataset.detailMode = state.detailMode;
+  detail.dataset.detailSize = state.detailSize;
+}
+
+export function bindDetailPresentation(root = document) {
+  root.querySelectorAll('[data-detail-setting]').forEach((button) => {
+    button.onclick = () => {
+      const setting = button.dataset.detailSetting;
+      setDetailPresentation(
+        setting === 'mode' ? button.dataset.detailValue : state.detailMode,
+        setting === 'size' ? button.dataset.detailValue : state.detailSize,
+      );
+      applyDetailPresentation(root);
+      root.querySelectorAll(`[data-detail-setting="${setting}"]`).forEach((option) => {
+        option.setAttribute('aria-pressed', String(option === button));
+      });
+    };
+  });
+}
+
 async function submitValidation(id, status, reason) {
   const root = $('#detail');
   await runValidationSubmission({
@@ -325,6 +395,28 @@ async function submitValidation(id, status, reason) {
   });
 }
 
+export function resetDetailScroll(
+  detail,
+  schedule = globalThis.requestAnimationFrame?.bind(globalThis),
+) {
+  const reset = () => {
+    detail.scrollTo?.({ top: 0, left: 0, behavior: 'instant' });
+    detail.scrollTop = 0;
+  };
+  reset();
+  schedule?.(reset);
+}
+
+export function scrollToStage(stage) {
+  stage.scrollIntoView({ behavior: 'auto', block: 'start' });
+}
+
+function renderOpenedDetail(content) {
+  const detail = $('#detail');
+  litRender(content, detail);
+  resetDetailScroll(detail);
+}
+
 function openDetail(id) {
   const c = state.repo.changes.find((x) => String(x.id) === String(id));
   if (!c) return;
@@ -334,14 +426,11 @@ function openDetail(id) {
       ? html`<span class="pill ext" data-extdep=${d} style="cursor:pointer">depends on ${d}</span>`
       : html`<span class="pill" data-dep=${d} style="cursor:pointer">depends on #${d}</span>`;
   });
-  const pipeline = c.stages.map(
-    (s) => html`<span class="stage-chip" data-go=${`stage-${s.key}`}>${s.heading}</span>`,
-  );
   const stages = c.stages.map((s) => stageBlock(c, s));
 
-  litRender(
+  renderOpenedDetail(
     html`
-    ${closeButton()}
+    ${detailToolbar(state.detailMode, state.detailSize, c.stages)}
     <h1>${c.title}</h1>
     <div class="detail-meta">
       <span class="pill">#${c.id}</span>
@@ -352,16 +441,18 @@ function openDetail(id) {
       ${deps}
     </div>
     ${c.status === 'in-validation' ? validationPanel() : nothing}
-    <div class="pipeline">${pipeline}</div>
+    ${reopenPanel(c.status)}
     ${stages}
     <div id="git-section"></div>`,
-    $('#detail'),
   );
 
   resetValidationState($('#detail'));
 
   const overlay = $('#overlay');
   overlay.classList.remove('hidden');
+  document.documentElement.classList.add('detail-open');
+  applyDetailPresentation();
+  bindDetailPresentation();
   $('#detail').querySelector('.close').onclick = closeDetail;
   const accept = $('#detail').querySelector('[data-validation="pass"]');
   if (accept) accept.onclick = () => submitValidation(c.id, 'done');
@@ -378,14 +469,22 @@ function openDetail(id) {
       submitValidation(c.id, 'in-progress', reason);
     };
   }
+  bindReopenAction({
+    root: $('#detail'),
+    request: (reason) => postStatus(state.currentProject, c.id, 'in-progress', reason),
+    onSuccess: async () => {
+      invalidateCache();
+      await load();
+      openDetail(c.id);
+    },
+  });
   overlay.onclick = (e) => {
     if (e.target === overlay) closeDetail();
   };
   $('#detail')
     .querySelectorAll('[data-go]')
     .forEach((el) => {
-      el.onclick = () =>
-        $(`#${el.dataset.go}`).scrollIntoView({ behavior: 'smooth', block: 'start' });
+      el.onclick = () => scrollToStage($(`#${el.dataset.go}`));
     });
   $('#detail')
     .querySelectorAll('[data-dep]')
@@ -441,6 +540,7 @@ async function loadGitRefs(id) {
 
 function closeDetail() {
   $('#overlay').classList.add('hidden');
+  document.documentElement.classList.remove('detail-open');
 }
 
 let diagramLightbox = null;
@@ -584,9 +684,9 @@ function renderSpecs() {
 }
 
 function openSpec(s) {
-  litRender(
+  renderOpenedDetail(
     html`
-    ${closeButton()}
+    ${detailToolbar(state.detailMode, state.detailSize)}
     <h1>${s.title}</h1>
     <div class="detail-meta">
       <span class="pill">spec</span>
@@ -594,10 +694,12 @@ function openSpec(s) {
       ${(s.tags || []).map((t) => html`<span class="pill">${t}</span>`)}
     </div>
     ${specBody(s.body)}`,
-    $('#detail'),
   );
   const overlay = $('#overlay');
   overlay.classList.remove('hidden');
+  document.documentElement.classList.add('detail-open');
+  applyDetailPresentation();
+  bindDetailPresentation();
   const detail = $('#detail');
   detail.querySelector('.close').onclick = closeDetail;
   overlay.onclick = (e) => {

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/close.md

@@ -39,6 +39,12 @@ 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.
 
+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:
 
 - `changeledger list [--status S] [--type T] [--json]`
@@ -47,4 +53,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.