changeledger 0.7.0 → 0.9.0

package/src/lifecycle.mjs

@@ -1,7 +1,7 @@
 // The change lifecycle as an explicit, testable graph — the single authority on
 // which status moves are legal. Shared by the CLI (`changeledger status`) and the viewer
 // so both decide validity the same way. The viewer layers an extra human-only
-// policy on top (approval plus final acceptance/rejection); it never relaxes
+// policy on top (approval plus final acceptance); it never relaxes
 // this graph.
 
 export const CANONICAL_STATUSES = [
@@ -20,7 +20,8 @@ export const CANONICAL_STATUSES = [
 // absent and therefore rejected. `in-review` is optional by type;
 // `in-validation` is the universal human gate before done. Review or validation
 // may route back to in-progress, while review may also block. `discarded` is a
-// terminal tombstone reachable only before either closing gate.
+// terminal tombstone reachable only before either closing gate. `done` has one
+// policy-gated provisional reopen edge; generic status commands do not own it.
 const TRANSITIONS = {
   draft: ['approved', 'discarded'],
   approved: ['in-progress', 'discarded'],
@@ -28,7 +29,7 @@ const TRANSITIONS = {
   'in-review': ['in-validation', 'in-progress', 'blocked'],
   'in-validation': ['done', 'in-progress'],
   blocked: ['in-progress', 'discarded'],
-  done: [],
+  done: ['in-progress'],
   discarded: [],
 };
 

package/src/metrics.mjs

@@ -42,8 +42,8 @@ function transitions(change) {
   return events;
 }
 
-// Time spent in each state: [{ state, ms }]. The final state runs until `now`
-// (or until it reached `done`).
+// Time spent in each state: [{ state, ms }]. A provisional `done` interval is
+// retained in the event stream but excluded from active-state duration.
 export function statusTimeline(change, now) {
   const events = transitions(change);
   if (!events.length) return [];
@@ -53,7 +53,7 @@ export function statusTimeline(change, now) {
     const endIso = events[i + 1]?.at ?? now;
     const end = Date.parse(endIso);
     if (Number.isNaN(start) || Number.isNaN(end)) continue;
-    // `done` is terminal — there is no meaningful dwell time in it.
+    // `done` is outside active work, including a provisional interval before reopen.
     if (events[i].state === 'done') continue;
     segs.push({ state: events[i].state, ms: Math.max(0, end - start) });
   }

package/src/viewer/domain.mjs

@@ -3,8 +3,13 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { parseDocument } from 'yaml';
 import { mutateFileAtomic } from '../atomic-write.mjs';
+import { parseChange } from '../change.mjs';
 import { checkRepo } from '../check.mjs';
-import { status as applyStatusCmd, validation as applyValidation } from '../commands/agent.mjs';
+import {
+  reopen as applyReopen,
+  status as applyStatusCmd,
+  validation as applyValidation,
+} from '../commands/agent.mjs';
 import { findChangeledgerDir, loadConfig, resolveRepoPath, resolveSpecsDir } from '../config.mjs';
 import {
   buildMigration,
@@ -14,7 +19,7 @@ import {
 import { computeMetrics } from '../metrics.mjs';
 import { nowUtc } from '../paths.mjs';
 import { listProjects, remove, update } from '../registry.mjs';
-import { loadRepo, loadRepoWithConfig } from '../repo.mjs';
+import { loadRepo, loadRepoWithConfig, resolveChange } from '../repo.mjs';
 import { parseYaml } from '../yaml.mjs';
 
 // Serializes a loaded repo into the flat shape the UI consumes.
@@ -115,24 +120,29 @@ export function changeStatus(projects, { project, id, status, reason }) {
   // the UI is bypassable.
   let current;
   try {
-    const change = loadRepo(proj.path).changes.find((c) => String(c.frontmatter.id) === String(id));
-    if (!change) return { code: 404, body: { error: `no change with id "${id}"` } };
-    current = change.frontmatter.status;
+    const { file } = resolveChange(proj.path, id);
+    current = parseChange(fs.readFileSync(file, 'utf8')).frontmatter.status;
   } catch (e) {
+    if (/^No change with id /.test(e.message)) {
+      return { code: 404, body: { error: `no change with id "${id}"` } };
+    }
     return { code: 400, body: { error: e.message } };
   }
   try {
     if (current === 'draft' && status === 'approved') {
-      applyStatusCmd(id, status, proj.path);
+      applyStatusCmd(id, status, proj.path, { actor: 'human' });
     } else if (current === 'in-validation' && status === 'done') {
       applyValidation(id, 'pass', {}, proj.path);
     } else if (current === 'in-validation' && status === 'in-progress') {
       applyValidation(id, 'fail', { reason }, proj.path);
+    } else if (current === 'done' && status === 'in-progress') {
+      applyReopen(id, reason, proj.path);
     } else {
       return {
         code: 403,
         body: {
-          error: 'the viewer only allows draft → approved and in-validation → done|in-progress',
+          error:
+            'the viewer only allows draft → approved, in-validation → done|in-progress, and eligible done → in-progress',
         },
       };
     }

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

@@ -2,11 +2,14 @@ export const VIEWER_STATE_KEY = 'changeledger.viewer-state.v1';
 
 const VALID_VIEWS = new Set(['board', 'table', 'graph', 'specs', 'metrics', 'projects']);
 const VALID_SORT_KEYS = new Set(['id', 'title', 'type', 'status', 'progress', 'deps']);
+const VALID_DETAIL_MODES = new Set(['side', 'floating']);
+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,
@@ -19,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,
@@ -31,12 +37,15 @@ export const state = {
   projectsList: [],
   localOnly: false,
   globalMode: false,
+  detailMode: 'side',
+  detailSize: 'wide',
 };
 
 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,
@@ -49,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')
@@ -71,6 +95,8 @@ export function serializeViewerState() {
     sortKey: state.sortKey,
     sortDir: state.sortDir,
     projects: state.projectFilters,
+    detailMode: state.detailMode,
+    detailSize: state.detailSize,
   };
 }
 
@@ -99,6 +125,8 @@ export function restoreViewerState(storageLike) {
   if (typeof snapshot.text === 'string') state.filters.text = snapshot.text;
   if (typeof snapshot.sortKey === 'string') state.sortKey = snapshot.sortKey;
   if (snapshot.sortDir === 1 || snapshot.sortDir === -1) state.sortDir = snapshot.sortDir;
+  state.detailMode = VALID_DETAIL_MODES.has(snapshot.detailMode) ? snapshot.detailMode : 'side';
+  state.detailSize = VALID_DETAIL_SIZES.has(snapshot.detailSize) ? snapshot.detailSize : 'wide';
   if (
     snapshot.projects &&
     typeof snapshot.projects === 'object' &&
@@ -136,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)),
@@ -160,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);
@@ -224,3 +288,10 @@ export function toggleGlobalMode() {
   persistViewerState();
   return state.globalMode;
 }
+
+export function setDetailPresentation(mode, size) {
+  if (VALID_DETAIL_MODES.has(mode)) state.detailMode = mode;
+  if (VALID_DETAIL_SIZES.has(size)) state.detailSize = size;
+  persistViewerState();
+  return { mode: state.detailMode, size: state.detailSize };
+}

package/src/viewer/public/app.js

@@ -13,30 +13,34 @@ import {
   searchAllProjects,
 } from './api.js';
 import {
+  clearOwnerFilters,
   clearStatusFilters,
+  clearTypeFilters,
   initializeProjects,
   invalidateCache,
   normalizeRepoState,
   restoreViewerState,
   selectProject,
-  setOwnerFilter,
+  setDetailPresentation,
   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';
 import { html, render as litRender, nothing } from './templates.js';
 import {
   card,
-  closeButton,
+  detailToolbar,
   sortIndicator,
   specBody,
   stageBlock,
@@ -50,6 +54,8 @@ export { cssIdent, esc, makeMermaidExpandable, safeHtml } from './security.js';
 export { boardStatuses, isVisible, passesTombstones } from './state.js';
 export {
   card,
+  detailPresentationControls,
+  detailToolbar,
   sortIndicator,
   stageBlock,
   statusSummary,
@@ -112,27 +118,74 @@ 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>${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,
+  );
+  host.querySelectorAll('[data-choice]').forEach((input) => {
+    input.onchange = () => {
+      toggle(input.dataset.choice);
+      render();
+    };
+  });
+  if (owners)
+    host.querySelector('[data-unassigned]').onchange = () => {
+      toggleUnassignedOwner();
+      render();
+    };
+  host.querySelector('[data-clear]').onclick = () => {
+    clear();
+    render();
+  };
+}
+
 function renderStatusFilter() {
   const sf = $('#status-filter');
   litRender(
@@ -312,6 +365,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 +445,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 +476,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 +491,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 +519,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 +590,7 @@ async function loadGitRefs(id) {
 
 function closeDetail() {
   $('#overlay').classList.add('hidden');
+  document.documentElement.classList.remove('detail-open');
 }
 
 let diagramLightbox = null;
@@ -584,9 +734,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 +744,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) => {
@@ -1454,16 +1606,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');
@@ -1492,10 +1641,12 @@ function bootstrap() {
   setInterval(load, 5000);
 }
 
-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;