changeledger 0.8.0 → 0.10.0

package/src/viewer/public/app-state.js

@@ -7,8 +7,9 @@ const VALID_DETAIL_SIZES = new Set(['compact', 'wide', 'full']);
 let storage = null;
 
 const emptyProjectFilters = () => ({
-  type: 'all',
-  owner: 'all',
+  types: [],
+  owners: [],
+  includeUnassigned: false,
   statuses: [],
   showArchived: false,
   showDiscarded: false,
@@ -21,6 +22,9 @@ export const state = {
     text: '',
     type: 'all',
     owner: 'all',
+    types: new Set(),
+    owners: new Set(),
+    includeUnassigned: false,
     statuses: new Set(),
     showArchived: false,
     showDiscarded: false,
@@ -39,8 +43,9 @@ export const state = {
 
 function currentProjectFilters() {
   return {
-    type: state.filters.type,
-    owner: state.filters.owner,
+    types: [...state.filters.types],
+    owners: [...state.filters.owners],
+    includeUnassigned: state.filters.includeUnassigned,
     statuses: [...state.filters.statuses],
     showArchived: state.filters.showArchived,
     showDiscarded: state.filters.showDiscarded,
@@ -53,8 +58,23 @@ function saveCurrentProjectFilters() {
 
 function applyProjectFilters(id) {
   const filters = state.projectFilters[id] ?? emptyProjectFilters();
-  state.filters.type = typeof filters.type === 'string' ? filters.type : 'all';
-  state.filters.owner = typeof filters.owner === 'string' ? filters.owner : 'all';
+  state.filters.types = new Set(
+    Array.isArray(filters.types)
+      ? filters.types.filter((value) => typeof value === 'string')
+      : typeof filters.type === 'string' && filters.type !== 'all'
+        ? [filters.type]
+        : [],
+  );
+  state.filters.type = state.filters.types.size === 1 ? [...state.filters.types][0] : 'all';
+  state.filters.owners = new Set(
+    Array.isArray(filters.owners)
+      ? filters.owners.filter((value) => typeof value === 'string')
+      : typeof filters.owner === 'string' && filters.owner !== 'all'
+        ? [filters.owner]
+        : [],
+  );
+  state.filters.owner = state.filters.owners.size === 1 ? [...state.filters.owners][0] : 'all';
+  state.filters.includeUnassigned = filters.includeUnassigned === true;
   state.filters.statuses = new Set(
     Array.isArray(filters.statuses)
       ? filters.statuses.filter((value) => typeof value === 'string')
@@ -144,9 +164,13 @@ export function normalizeRepoState(repo) {
   }
   if (state.sortDir !== 1 && state.sortDir !== -1) state.sortDir = 1;
   if (!repo.types.includes(state.filters.type)) state.filters.type = 'all';
+  state.filters.types = new Set(
+    [...state.filters.types].filter((type) => repo.types.includes(type)),
+  );
   const owners = new Set(repo.changes.map((change) => change.owner).filter(Boolean));
   if (state.filters.owner !== 'all' && !owners.has(state.filters.owner))
     state.filters.owner = 'all';
+  state.filters.owners = new Set([...state.filters.owners].filter((owner) => owners.has(owner)));
   const statuses = new Set(repo.statuses);
   state.filters.statuses = new Set(
     [...state.filters.statuses].filter((status) => statuses.has(status)),
@@ -168,16 +192,48 @@ export function setTextFilter(text) {
   persistViewerState();
 }
 
+export function toggleTypeFilter(type) {
+  if (state.filters.types.has(type)) state.filters.types.delete(type);
+  else state.filters.types.add(type);
+  state.filters.type = state.filters.types.size === 1 ? [...state.filters.types][0] : 'all';
+  persistViewerState();
+}
+
 export function setTypeFilter(type) {
+  state.filters.types = new Set(type === 'all' ? [] : [type]);
   state.filters.type = type;
   persistViewerState();
 }
 
+export function toggleOwnerFilter(owner) {
+  if (state.filters.owners.has(owner)) state.filters.owners.delete(owner);
+  else state.filters.owners.add(owner);
+  state.filters.owner = state.filters.owners.size === 1 ? [...state.filters.owners][0] : 'all';
+  persistViewerState();
+}
+
 export function setOwnerFilter(owner) {
+  state.filters.owners = new Set(owner === 'all' ? [] : [owner]);
   state.filters.owner = owner;
   persistViewerState();
 }
 
+export function toggleUnassignedOwner() {
+  state.filters.includeUnassigned = !state.filters.includeUnassigned;
+  persistViewerState();
+}
+
+export function clearTypeFilters() {
+  state.filters.types.clear();
+  persistViewerState();
+}
+
+export function clearOwnerFilters() {
+  state.filters.owners.clear();
+  state.filters.includeUnassigned = false;
+  persistViewerState();
+}
+
 export function toggleStatusFilter(status) {
   if (state.filters.statuses.has(status)) state.filters.statuses.delete(status);
   else state.filters.statuses.add(status);

package/src/viewer/public/app.js

@@ -13,24 +13,27 @@ import {
   searchAllProjects,
 } from './api.js';
 import {
+  clearOwnerFilters,
   clearStatusFilters,
+  clearTypeFilters,
   initializeProjects,
   invalidateCache,
   normalizeRepoState,
   restoreViewerState,
   selectProject,
   setDetailPresentation,
-  setOwnerFilter,
   setRepo,
   setSortKey,
   setTextFilter,
-  setTypeFilter,
   setView,
   state,
   toggleGlobalMode,
+  toggleOwnerFilter,
   toggleShowArchived,
   toggleShowDiscarded,
   toggleStatusFilter,
+  toggleTypeFilter,
+  toggleUnassignedOwner,
 } from './app-state.js';
 import { cssIdent, initMermaid, makeMermaidExpandable, renderMermaid } from './security.js';
 import { boardStatuses, isVisible, passesTombstones } from './state.js';
@@ -45,7 +48,7 @@ import {
   tableRow,
   validationPanel,
 } from './view-parts.js';
-import { graphSvg, metricsHtml, specsListHtml } from './view-renderers.js';
+import { graphSvg, metricsHtml, sortSpecsByUpdated, specsListHtml } from './view-renderers.js';
 
 export { cssIdent, esc, makeMermaidExpandable, safeHtml } from './security.js';
 export { boardStatuses, isVisible, passesTombstones } from './state.js';
@@ -115,27 +118,87 @@ export function showNoProjects(root = document) {
 
 // Rebuilt on each project load (types/statuses can differ per project).
 function hydrateFilters() {
-  litRender(
-    html`<option value="all">All types</option>
-      ${state.repo.types.map((t) => html`<option value=${t}>${t}</option>`)}`,
-    $('#type-filter'),
-  );
-  $('#type-filter').value = state.filters.type;
   $('#lang').textContent = state.repo.language;
-
   const owners = [...new Set(state.repo.changes.map((c) => c.owner).filter(Boolean))].sort();
-  litRender(
-    html`<option value="all">All owners</option>
-      ${owners.map((o) => html`<option value=${o}>${o}</option>`)}`,
+  renderChoiceFilter(
+    $('#type-filter'),
+    'Type',
+    state.repo.types,
+    state.filters.types,
+    toggleTypeFilter,
+    clearTypeFilters,
+  );
+  renderChoiceFilter(
     $('#owner-filter'),
+    'Owner',
+    owners,
+    state.filters.owners,
+    toggleOwnerFilter,
+    clearOwnerFilters,
+    true,
   );
-  if (state.filters.owner !== 'all' && !owners.includes(state.filters.owner)) setOwnerFilter('all');
-  $('#owner-filter').value = state.filters.owner;
-  $('#owner-filter').style.display = owners.length ? '' : 'none';
-
   renderStatusFilter();
 }
 
+export function choiceFilterSummary(label, selected, includeUnassigned = false) {
+  const count = selected.size + Number(includeUnassigned);
+  if (count === 1 && includeUnassigned) return 'Unassigned';
+  return count
+    ? count === 1
+      ? [...selected][0]
+      : `${count} selected`
+    : `All ${label.toLowerCase()}s`;
+}
+
+function renderChoiceFilter(host, label, choices, selected, toggle, clear, owners = false) {
+  const summary = choiceFilterSummary(label, selected, owners && state.filters.includeUnassigned);
+  litRender(
+    html`<details class="filter-menu">
+      <summary class="filter-trigger">
+        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.25h12M4.25 8h7.5M6.5 12.75h3"></path></svg>
+        <span data-choice-summary>${summary}</span>
+        <svg class="filter-chevron" viewBox="0 0 16 16" aria-hidden="true"><path d="m4.5 6.25 3.5 3.5 3.5-3.5"></path></svg>
+      </summary>
+      <div class="filter-popover">
+        <div class="filter-heading"><span>${label}</span><button type="button" data-clear>Clear</button></div>
+        <div class="filter-options">
+          ${choices.map((choice) => html`<label class="check-option"><input type="checkbox" data-choice=${choice} .checked=${selected.has(choice)} /><span class="check-box" aria-hidden="true"></span><span>${choice}</span></label>`)}
+          ${owners ? html`<label class="check-option"><input type="checkbox" data-unassigned .checked=${state.filters.includeUnassigned} /><span class="check-box" aria-hidden="true"></span><span>Unassigned</span></label>` : nothing}
+        </div>
+      </div>
+    </details>`,
+    host,
+  );
+  const syncSummary = () => {
+    host.querySelector('[data-choice-summary]').textContent = choiceFilterSummary(
+      label,
+      selected,
+      owners && state.filters.includeUnassigned,
+    );
+  };
+  host.querySelectorAll('[data-choice]').forEach((input) => {
+    input.onchange = () => {
+      toggle(input.dataset.choice);
+      syncSummary();
+      render();
+    };
+  });
+  if (owners)
+    host.querySelector('[data-unassigned]').onchange = () => {
+      toggleUnassignedOwner();
+      syncSummary();
+      render();
+    };
+  host.querySelector('[data-clear]').onclick = () => {
+    clear();
+    host.querySelectorAll('[data-choice], [data-unassigned]').forEach((input) => {
+      input.checked = false;
+    });
+    syncSummary();
+    render();
+  };
+}
+
 function renderStatusFilter() {
   const sf = $('#status-filter');
   litRender(
@@ -672,8 +735,10 @@ function sortVal(c, key) {
 /* Specs view */
 function renderSpecs() {
   const q = state.filters.text.toLowerCase();
-  const specs = (state.repo.specs || []).filter(
-    (s) => !q || `${s.title} ${(s.tags || []).join(' ')} ${s.body}`.toLowerCase().includes(q),
+  const specs = sortSpecsByUpdated(
+    (state.repo.specs || []).filter(
+      (s) => !q || `${s.title} ${(s.tags || []).join(' ')} ${s.body}`.toLowerCase().includes(q),
+    ),
   );
   litRender(specsListHtml(specs, fmtDateTime), $('#specs'));
   $('#specs')
@@ -739,8 +804,32 @@ export function handleSpecBodyClick(event, _openSpecByName) {
 
 const VIEWS = ['board', 'table', 'graph', 'specs', 'metrics', 'projects'];
 
-function renderMetrics() {
-  litRender(metricsHtml(state.repo.metrics || {}), $('#metrics'));
+// The shared metrics module is dynamic-imported once and cached: the client
+// computes metrics itself, over the filtered set, instead of duplicating
+// `computeMetrics` (20260711-155721 CR2). Served read-only from the CLI's own
+// `src/metrics.mjs` by the router.
+let sharedMetricsModule;
+function loadMetricsModule() {
+  sharedMetricsModule ??= import('/shared/metrics.mjs');
+  return sharedMetricsModule;
+}
+
+// `computeMetrics` speaks the CLI's native change shape (`{ frontmatter,
+// stages }`); `state.repo.changes` is already flattened for board/table
+// rendering. Adapt back rather than reshaping the shared module's contract,
+// which the server also relies on unchanged.
+function toMetricsChange(c) {
+  return {
+    frontmatter: { id: c.id, type: c.type, status: c.status, owner: c.owner, created: c.created },
+    stages: c.stages,
+  };
+}
+
+async function renderMetrics() {
+  const changes = visibleChanges();
+  const { computeMetrics } = await loadMetricsModule();
+  const metrics = computeMetrics(changes.map(toMetricsChange), { now: new Date().toISOString() });
+  litRender(metricsHtml(metrics, changes.length), $('#metrics'));
 }
 
 export function syncViewerShell(root = document, renderContent = true) {
@@ -775,7 +864,6 @@ let configMode = 'form'; // 'form' | 'raw'
 let configDirty = false; // true when form/raw has unsaved edits
 let migrationPreview = null; // null | { summary, changes, yaml } | { already_current }
 
-const SUPPORTED_SCHEMA_VERSION = 1;
 // Confirm dialog — uses native <dialog> for proper focus-trap, ESC and backdrop.
 // _confirmImpl is replaceable in tests (JSDOM lacks showModal).
 let _confirmImpl = null;
@@ -879,8 +967,9 @@ function configSectionTemplate(config, mode, preview) {
   }
 
   const schema = config.schemaVersion ?? 0;
-  const futureSch = schema > SUPPORTED_SCHEMA_VERSION;
-  const outdated = schema < SUPPORTED_SCHEMA_VERSION;
+  const supported = config.supported;
+  const futureSch = schema > supported;
+  const outdated = schema < supported;
 
   return html`<div class="config-section">
     ${
@@ -914,7 +1003,7 @@ function configSectionTemplate(config, mode, preview) {
         : outdated
           ? html`<div class="config-migration-card">
               <h3>Migration required</h3>
-              <p>Config schema ${schema} is outdated. Preview and apply the migration to schema ${SUPPORTED_SCHEMA_VERSION} to enable the Form editor.</p>
+              <p>Config schema ${schema} is outdated. Preview and apply the migration to schema ${supported} to enable the Form editor.</p>
               ${
                 preview?.already_current
                   ? html`<p class="config-migration-ok">Migration already applied.</p>`
@@ -1157,7 +1246,7 @@ async function openManagedProject(id, { reload = false } = {}) {
     const structured = await getProjectConfigStructured(id);
     managedConfig = { id, ...structured };
     // Default to form for current schema, raw for future schema
-    if (structured.schemaVersion > SUPPORTED_SCHEMA_VERSION) {
+    if (structured.schemaVersion > structured.supported) {
       configMode = 'raw';
     } else {
       configMode = 'form';
@@ -1556,16 +1645,13 @@ function bootstrap() {
     if (active) enterGlobal();
     else activateView(state.currentView);
   };
-  $('#type-filter').onchange = (e) => {
-    setTypeFilter(e.target.value);
-    render();
-  };
-  $('#owner-filter').onchange = (e) => {
-    setOwnerFilter(e.target.value);
-    render();
-  };
   document.addEventListener('pointerdown', (event) => {
-    closeStatusMenuOnOutsideClick($('#status-filter .filter-menu'), event.target);
+    closeFilterMenusOnOutsideClick(
+      ['#type-filter', '#owner-filter', '#status-filter'].map((selector) =>
+        $(`${selector} .filter-menu`),
+      ),
+      event.target,
+    );
   });
   $('#view-board').onclick = () => activateView('board');
   $('#view-table').onclick = () => activateView('table');
@@ -1592,12 +1678,25 @@ function bootstrap() {
 
   loadProjects();
   setInterval(load, 5000);
+
+  // The topbar wraps to multiple rows at content-dependent widths, so the
+  // CSS fallback constant cannot bound the projects panels; track the real
+  // rendered height instead.
+  const topbar = document.querySelector('.topbar');
+  if (topbar && typeof ResizeObserver === 'function') {
+    const syncHeaderHeight = () =>
+      document.documentElement.style.setProperty('--header-height', `${topbar.offsetHeight}px`);
+    new ResizeObserver(syncHeaderHeight).observe(topbar);
+    syncHeaderHeight();
+  }
 }
 
-export function closeStatusMenuOnOutsideClick(menu, target) {
-  if (!menu?.open || menu.contains(target)) return false;
-  menu.open = false;
-  return true;
+export function closeFilterMenusOnOutsideClick(menus, target) {
+  return menus.reduce((closed, menu) => {
+    if (!menu?.open || menu.contains(target)) return closed;
+    menu.open = false;
+    return true;
+  }, false);
 }
 
 // Only a real browser page with the app shell bootstraps; importing the module

package/src/viewer/public/index.html

@@ -26,8 +26,8 @@
       <select id="project" class="filter" title="Project"></select>
       <input id="search" class="search" type="search" placeholder="Search anything…" />
       <button type="button" id="toggle-global" class="chip" title="Search across all projects">Global</button>
-      <select id="type-filter" class="filter"></select>
-      <select id="owner-filter" class="filter"></select>
+      <div id="type-filter"></div>
+      <div id="owner-filter"></div>
       <div id="status-filter"></div>
       <div class="spacer"></div>
       <div class="tabs">

package/src/viewer/public/state.js

@@ -22,8 +22,12 @@ function haystack(c) {
 // predicate so the rule is testable.
 export function isVisible(c, f) {
   if (!passesTombstones(c, f)) return false;
-  if (f.type !== 'all' && c.type !== f.type) return false;
-  if (f.owner !== 'all' && c.owner !== f.owner) return false;
+  const types = f.types ?? new Set(f.type && f.type !== 'all' ? [f.type] : []);
+  const owners = f.owners ?? new Set(f.owner && f.owner !== 'all' ? [f.owner] : []);
+  if (types.size && !types.has(c.type)) return false;
+  if (owners.size || f.includeUnassigned) {
+    if (c.owner ? !owners.has(c.owner) : !f.includeUnassigned) return false;
+  }
   if (f.statuses.size && !f.statuses.has(c.status)) return false;
   const q = f.text.toLowerCase();
   if (!q) return true;

package/src/viewer/public/styles.css

@@ -22,6 +22,8 @@
   --status-done: #3fb950;
   --status-discarded: #9aa0aa;
   --status-muted: #8b929e;
+  /* fallback only: app.js keeps this synced to the real .topbar height */
+  --header-height: 55px;
   font-family: "Avenir Next", Avenir, ui-sans-serif, sans-serif;
   color-scheme: dark;
 }
@@ -115,17 +117,20 @@ body {
 /* Project management */
 .projects-view {
   padding: 18px;
+  height: calc(100dvh - var(--header-height));
+  box-sizing: border-box;
 }
 .projects-shell {
   display: grid;
   grid-template-columns: minmax(320px, 0.8fr) minmax(460px, 1.2fr);
   gap: 16px;
-  max-width: 1500px;
-  margin: 0 auto;
+  height: 100%;
 }
 .projects-list,
 .project-editor {
   min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: var(--panel);
@@ -303,8 +308,16 @@ body {
   cursor: wait;
 }
 @media (max-width: 900px) {
+  .projects-view {
+    height: auto;
+  }
   .projects-shell {
     grid-template-columns: 1fr;
+    height: auto;
+  }
+  .projects-list,
+  .project-editor {
+    overflow-y: visible;
   }
   .project-row {
     grid-template-columns: 10px minmax(0, 1fr) auto;
@@ -894,6 +907,49 @@ body {
   font-size: 13px;
   border-bottom: 1px solid var(--line);
 }
+.muted {
+  color: var(--muted);
+}
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 18px;
+}
+@media (max-width: 1100px) {
+  .metrics-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.metrics-panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 4px 18px 16px;
+  min-width: 0;
+}
+.metrics-panel .metrics-h:first-child {
+  margin-top: 14px;
+}
+.throughput-svg {
+  width: 100%;
+  height: auto;
+}
+.tp-rect {
+  fill: var(--accent, #4a9eff);
+}
+.tp-value {
+  font-size: 11px;
+  fill: var(--text);
+}
+.tp-date {
+  font-size: 10px;
+  fill: var(--muted);
+}
+.tp-axis {
+  stroke: var(--line);
+  stroke-width: 1;
+}
 
 /* Overlay + detail */
 .detail-open {
@@ -1321,10 +1377,10 @@ body {
 /* Specs view */
 .specs-view {
   padding: 16px;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 10px;
-  max-width: 760px;
+  align-items: start;
 }
 .spec-card {
   background: var(--panel);
@@ -1340,6 +1396,21 @@ body {
   font-weight: 600;
   margin-bottom: 6px;
 }
+.spec-excerpt {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 0.9em;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+@media (max-width: 680px) {
+  .specs-view {
+    grid-template-columns: 1fr;
+  }
+}
 .empty {
   color: var(--muted);
   padding: 8px;