changeledger 0.3.0 → 0.5.0

package/src/viewer/public/app.js

@@ -1,7 +1,20 @@
-import { getGitRefs, getProjects, getRepo, postStatus, searchAllProjects } from './api.js';
+import {
+  getGitRefs,
+  getProjectConfig,
+  getProjects,
+  getRepo,
+  postProjectConfig,
+  postProjectPath,
+  postProjectRemove,
+  postStatus,
+  searchAllProjects,
+} from './api.js';
 import {
   clearStatusFilters,
+  initializeProjects,
   invalidateCache,
+  normalizeRepoState,
+  restoreViewerState,
   selectProject,
   setOwnerFilter,
   setRepo,
@@ -47,8 +60,9 @@ const $ = (sel) => document.querySelector(sel);
 initMermaid();
 
 async function loadProjects() {
-  const { projects, current } = await getProjects();
+  const { projects, current, localOnly } = await getProjects();
   state.projectsList = projects;
+  state.localOnly = localOnly;
   const sel = $('#project');
   litRender(
     projects.map(
@@ -57,7 +71,7 @@ async function loadProjects() {
     ),
     sel,
   );
-  state.currentProject = current ?? projects.find((p) => p.alive)?.id ?? null;
+  initializeProjects(projects, current);
   if (state.currentProject) sel.value = state.currentProject;
   sel.style.display = projects.length > 1 ? '' : 'none';
   await load();
@@ -65,23 +79,34 @@ async function loadProjects() {
 
 async function load() {
   if (!state.currentProject) {
-    litRender(
-      html`<p class="empty" style="padding:20px">No projects registered. Run <code>changeledger init</code> in a repo.</p>`,
-      $('#board'),
-    );
+    if (state.currentView === 'projects') {
+      syncViewerShell();
+      return;
+    }
+    showNoProjects();
     return;
   }
   try {
     const text = await getRepo(state.currentProject);
     if (text === state.lastJson) return;
     setRepo(text);
+    normalizeRepoState(state.repo);
     hydrateFilters();
-    render();
+    syncViewerShell();
   } catch (e) {
     litRender(html`<p style="color:var(--bug);padding:20px">${e.message}</p>`, $('#board'));
   }
 }
 
+export function showNoProjects(root = document) {
+  setView('board');
+  litRender(
+    html`<p class="empty" style="padding:20px">No projects registered. Run <code>changeledger init</code> in a repo.</p>`,
+    root.querySelector('#board'),
+  );
+  syncViewerShell(root, false);
+}
+
 // Rebuilt on each project load (types/statuses can differ per project).
 function hydrateFilters() {
   litRender(
@@ -176,6 +201,7 @@ function render() {
   else if (state.currentView === 'table') renderTable();
   else if (state.currentView === 'specs') renderSpecs();
   else if (state.currentView === 'metrics') renderMetrics();
+  else if (state.currentView === 'projects') renderProjects();
   else renderBoard();
 }
 
@@ -569,19 +595,279 @@ function openSpec(s) {
   );
   const overlay = $('#overlay');
   overlay.classList.remove('hidden');
-  $('#detail').querySelector('.close').onclick = closeDetail;
+  const detail = $('#detail');
+  detail.querySelector('.close').onclick = closeDetail;
   overlay.onclick = (e) => {
     if (e.target === overlay) closeDetail();
   };
-  renderExpandableMermaid($('#detail'));
+  detail.onclick = (e) => handleSpecBodyClick(e, (href) => openSpecByName(href, state, openSpec));
+  renderExpandableMermaid(detail);
 }
 
-const VIEWS = ['board', 'table', 'graph', 'specs', 'metrics'];
+/**
+ * Normalizes a spec href and opens the matching spec.
+ * Exported for testing: accepts `repoState` and `_openSpec` to avoid DOM coupling.
+ */
+export function openSpecByName(href, repoState = state, _openSpec = openSpec) {
+  const name = href.replace(/^\.\//, '').replace(/\.md$/, '');
+  const found = (repoState.repo?.specs ?? []).find((s) => s.name.replace(/\.md$/, '') === name);
+  if (found) _openSpec(found);
+}
+
+/**
+ * Click handler for the spec body container.
+ * Exported for testing: accepts `_openSpecByName` callback to avoid DOM coupling.
+ * Intercepts relative *.md links only; lets external links through unchanged.
+ */
+export function handleSpecBodyClick(event, _openSpecByName) {
+  const anchor = event.target.closest('a');
+  if (!anchor) return;
+  const href = anchor.getAttribute('href');
+  if (!href) return;
+  // Let external links (with scheme or absolute path) through unchanged.
+  if (/^[a-z][a-z\d+\-.]*:/i.test(href) || href.startsWith('/')) return;
+  // Only intercept relative *.md links.
+  if (!href.endsWith('.md')) return;
+  event.preventDefault();
+  _openSpecByName(href);
+}
+
+const VIEWS = ['board', 'table', 'graph', 'specs', 'metrics', 'projects'];
 
 function renderMetrics() {
   litRender(metricsHtml(state.repo.metrics || {}), $('#metrics'));
 }
 
+export function syncViewerShell(root = document, renderContent = true) {
+  root.querySelector('#search').value = state.filters.text;
+  root.querySelector('#toggle-global').classList.toggle('active', state.globalMode);
+  for (const name of VIEWS) {
+    root.querySelector(`#view-${name}`).classList.toggle('active', name === state.currentView);
+    root
+      .querySelector(`#${name}`)
+      .classList.toggle('hidden', state.globalMode || name !== state.currentView);
+  }
+  root.querySelector('#global').classList.toggle('hidden', !state.globalMode);
+  if (!renderContent) return;
+  if (state.globalMode) renderGlobal();
+  else render();
+}
+
+export function restoreInitialViewerShell(root = document, getStorage = () => window.localStorage) {
+  let browserStorage = null;
+  try {
+    browserStorage = getStorage();
+  } catch {
+    // Storage access itself may be forbidden (opaque origins/privacy policy).
+  }
+  restoreViewerState(browserStorage);
+  syncViewerShell(root, false);
+}
+
+let managedProject = null;
+let managedConfig = null;
+
+export function projectsViewTemplate(projects, selected, config, localOnly) {
+  const project = projects.find((item) => item.id === selected);
+  return html`<div class="projects-shell">
+    <div class="projects-list">
+      <div class="projects-heading">
+        <div><span class="eyebrow">Registry</span><h1>Projects</h1></div>
+        <span class="count">${projects.length}</span>
+      </div>
+      ${
+        projects.length
+          ? html`<div class="project-rows">${projects.map(
+              (
+                item,
+              ) => html`<button type="button" class=${`project-row${item.id === selected ? ' active' : ''}`} data-manage-project=${item.id}>
+              <span class=${`health-dot ${item.alive ? 'available' : 'missing'}`} aria-hidden="true"></span>
+              <span class="project-summary"><strong>${item.name}</strong><small>${item.path}</small></span>
+              <span class="mono project-id">${item.id}</span>
+              <span class=${`project-health ${item.alive ? 'available' : 'missing'}`}>${item.alive ? 'Available' : 'Missing'}</span>
+            </button>`,
+            )}</div>`
+          : html`<p class="empty">No projects registered.</p>`
+      }
+    </div>
+    <div class="project-editor">
+      ${
+        !project
+          ? html`<div class="project-placeholder"><span class="eyebrow">Configuration</span><h2>Select a project</h2><p>Inspect its registry entry and edit its ChangeLedger configuration.</p></div>`
+          : html`<div class="project-editor-head">
+              <div><span class="eyebrow">${project.id}</span><h2>${project.name}</h2><p>${project.path}</p></div>
+              <span class=${`project-health ${project.alive ? 'available' : 'missing'}`}>${project.alive ? 'Available' : 'Missing'}</span>
+            </div>
+            ${
+              !localOnly
+                ? html`<form class="project-path-form">
+                  <label for="project-path">Registered path</label>
+                  <div><input id="project-path" name="path" .value=${project.path} /><button class="button secondary" type="submit">Repair path</button></div>
+                </form>`
+                : nothing
+            }
+            ${
+              project.alive
+                ? config?.loading
+                  ? html`<p class="empty">Loading configuration…</p>`
+                  : html`<form class="config-form">
+                    <div class="config-label"><label for="project-config">.changeledger/config.yml</label><button type="button" class="text-button" data-reload-config>Reload</button></div>
+                    <textarea id="project-config" spellcheck="false" .value=${config?.content ?? ''}></textarea>
+                    <p class="project-error" ?hidden=${!config?.error}>${config?.error ?? ''}</p>
+                    <div class="project-actions"><button class="button" type="submit">Save configuration</button></div>
+                  </form>`
+                : html`<div class="missing-config"><h3>Configuration unavailable</h3><p>Repair the registered path to edit this project.</p></div>`
+            }
+            ${
+              !localOnly
+                ? html`<div class="danger-zone"><div><strong>Unregister project</strong><p>Removes this local registry entry. Repository files are never deleted.</p></div><button type="button" class="button danger" data-unregister>Unregister</button></div>`
+                : nothing
+            }`
+      }
+    </div>
+  </div>`;
+}
+
+async function openManagedProject(id, { reload = false } = {}) {
+  managedProject = id;
+  const project = state.projectsList.find((item) => item.id === id);
+  if (!project?.alive) {
+    managedConfig = null;
+    renderProjects();
+    return;
+  }
+  if (!reload && managedConfig?.id === id && !managedConfig.error) {
+    renderProjects();
+    return;
+  }
+  managedConfig = { id, loading: true };
+  renderProjects();
+  try {
+    managedConfig = { id, ...(await getProjectConfig(id)) };
+  } catch (error) {
+    managedConfig = { id, content: '', revision: '', error: error.message };
+  }
+  renderProjects();
+}
+
+export function setProjectFormPending(root, pending) {
+  root.querySelectorAll('button, input, textarea').forEach((control) => {
+    control.disabled = pending;
+  });
+  root.classList.toggle('is-pending', pending);
+}
+
+export async function projectMutation(root, request, onSuccess) {
+  setProjectFormPending(root, true);
+  const error = root.querySelector('.project-error');
+  if (error) error.hidden = true;
+  try {
+    const response = await request();
+    const body = await response.json();
+    if (!response.ok) throw new Error(body.error || 'Project update failed.');
+    await onSuccess(body);
+  } catch (failure) {
+    if (error) {
+      error.textContent = failure.message;
+      error.hidden = false;
+    } else alert(failure.message);
+  } finally {
+    setProjectFormPending(root, false);
+  }
+}
+
+export function requestUnregisterConfirmation(project, ask = prompt) {
+  return ask(
+    `Type "${project.name}" to unregister this project. No repository files will be deleted.`,
+  );
+}
+
+async function refreshProjectRegistry() {
+  const { projects, current, localOnly } = await getProjects();
+  state.localOnly = localOnly;
+  initializeProjects(projects, current);
+  const select = $('#project');
+  litRender(
+    projects.map(
+      (item) =>
+        html`<option value=${item.id} ?disabled=${!item.alive}>${item.name}${item.alive ? '' : ' (missing)'}</option>`,
+    ),
+    select,
+  );
+  if (state.currentProject) select.value = state.currentProject;
+  select.style.display = projects.length > 1 ? '' : 'none';
+}
+
+function renderProjects() {
+  const root = $('#projects');
+  litRender(
+    projectsViewTemplate(state.projectsList, managedProject, managedConfig, state.localOnly),
+    root,
+  );
+  bindProjectViewActions(root, {
+    select: (id) => openManagedProject(id),
+    reload: () => openManagedProject(managedProject, { reload: true }),
+    save: (content, configForm) =>
+      projectMutation(
+        configForm,
+        () => postProjectConfig(managedProject, content, managedConfig.revision),
+        async (body) => {
+          managedConfig = { id: managedProject, content, revision: body.revision };
+          await refreshProjectRegistry();
+          renderProjects();
+        },
+      ),
+    repair: (projectPath, pathForm) =>
+      projectMutation(
+        pathForm,
+        () => postProjectPath(managedProject, projectPath),
+        async () => {
+          await refreshProjectRegistry();
+          await openManagedProject(managedProject, { reload: true });
+        },
+      ),
+    unregister: (editor) => {
+      const project = state.projectsList.find((item) => item.id === managedProject);
+      const confirm = requestUnregisterConfirmation(project);
+      if (confirm === null) return;
+      projectMutation(
+        editor,
+        () => postProjectRemove(managedProject, confirm),
+        async () => {
+          managedProject = null;
+          managedConfig = null;
+          await refreshProjectRegistry();
+          if (state.currentProject) await load();
+          renderProjects();
+        },
+      );
+    },
+  });
+}
+
+export function bindProjectViewActions(root, handlers) {
+  root.querySelectorAll('[data-manage-project]').forEach((button) => {
+    button.onclick = () => handlers.select(button.dataset.manageProject);
+  });
+  const reload = root.querySelector('[data-reload-config]');
+  if (reload) reload.onclick = () => handlers.reload();
+  const configForm = root.querySelector('.config-form');
+  if (configForm)
+    configForm.onsubmit = (event) => {
+      event.preventDefault();
+      handlers.save(configForm.querySelector('textarea').value, configForm);
+    };
+  const pathForm = root.querySelector('.project-path-form');
+  if (pathForm)
+    pathForm.onsubmit = (event) => {
+      event.preventDefault();
+      handlers.repair(pathForm.elements.path.value, pathForm);
+    };
+  const unregister = root.querySelector('[data-unregister]');
+  if (unregister)
+    unregister.onclick = () => handlers.unregister(root.querySelector('.project-editor'));
+}
+
 function activateView(v) {
   setView(v);
   $('#toggle-global').classList.remove('active');
@@ -660,6 +946,7 @@ const fmtDate = (iso) => {
 // Wire the DOM and start polling. Guarded below so importing this module (tests)
 // has no side effects; only a real browser page bootstraps.
 function bootstrap() {
+  restoreInitialViewerShell();
   diagramLightbox = createDiagramLightbox({
     overlay: $('#diagram-overlay'),
     canvas: $('#diagram-canvas'),
@@ -692,6 +979,7 @@ function bootstrap() {
   $('#view-graph').onclick = () => activateView('graph');
   $('#view-specs').onclick = () => activateView('specs');
   $('#view-metrics').onclick = () => activateView('metrics');
+  $('#view-projects').onclick = () => activateView('projects');
   $('#project').onchange = (e) => {
     selectProject(e.target.value);
     load();

package/src/viewer/public/index.html

@@ -36,6 +36,7 @@
         <button type="button" id="view-graph" class="tab">Graph</button>
         <button type="button" id="view-specs" class="tab">Specs</button>
         <button type="button" id="view-metrics" class="tab">Metrics</button>
+        <button type="button" id="view-projects" class="tab">Projects</button>
       </div>
     </header>
 
@@ -45,6 +46,7 @@
     <section id="specs" class="specs-view hidden"></section>
     <section id="global" class="global-view hidden"></section>
     <section id="metrics" class="metrics-view hidden"></section>
+    <section id="projects" class="projects-view hidden"></section>
 
     <div id="overlay" class="overlay hidden">
       <div id="detail" class="detail"></div>

package/src/viewer/public/styles.css

@@ -90,6 +90,208 @@ body {
   gap: 4px;
 }
 
+/* Project management */
+.projects-view {
+  padding: 18px;
+}
+.projects-shell {
+  display: grid;
+  grid-template-columns: minmax(320px, 0.8fr) minmax(460px, 1.2fr);
+  gap: 16px;
+  max-width: 1500px;
+  margin: 0 auto;
+}
+.projects-list,
+.project-editor {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--panel);
+}
+.projects-heading,
+.project-editor-head,
+.danger-zone {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.projects-heading,
+.project-editor-head {
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--line);
+}
+.projects-heading h1,
+.project-editor-head h2,
+.project-placeholder h2 {
+  margin: 2px 0 0;
+}
+.project-editor-head p,
+.project-placeholder p,
+.danger-zone p,
+.missing-config p {
+  margin: 4px 0 0;
+  color: var(--muted);
+}
+.eyebrow {
+  color: var(--accent);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.project-rows {
+  padding: 8px;
+}
+.project-row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 12px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+.project-row:hover,
+.project-row.active {
+  border-color: var(--line);
+  background: var(--panel-2);
+}
+.health-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--muted);
+}
+.health-dot.available {
+  background: var(--done);
+}
+.health-dot.missing {
+  background: var(--blocked);
+}
+.project-summary {
+  min-width: 0;
+  display: grid;
+}
+.project-summary small {
+  overflow: hidden;
+  color: var(--muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.project-health {
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.project-health.available {
+  color: var(--done);
+  background: rgba(63, 185, 80, 0.1);
+}
+.project-health.missing {
+  color: var(--blocked);
+  background: rgba(248, 81, 73, 0.1);
+}
+.project-placeholder,
+.missing-config {
+  padding: 28px 20px;
+}
+.project-path-form,
+.config-form {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--line);
+}
+.project-path-form label,
+.config-label label {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+.project-path-form > div {
+  display: flex;
+  gap: 8px;
+  margin-top: 7px;
+}
+.project-path-form input {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+}
+.config-label {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 7px;
+}
+.config-form textarea {
+  width: 100%;
+  min-height: 430px;
+  resize: vertical;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: #0b0d11;
+  color: #d9e1ea;
+  font:
+    12px / 1.55 ui-monospace,
+    monospace;
+  tab-size: 2;
+}
+.project-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+.project-error {
+  margin: 8px 0 0;
+  color: #ff8078;
+  font-size: 12px;
+}
+.text-button {
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+}
+.danger-zone {
+  margin: 20px;
+  padding: 14px;
+  border: 1px solid rgba(248, 81, 73, 0.35);
+  border-radius: 10px;
+}
+.danger-zone p {
+  font-size: 12px;
+}
+.button.danger {
+  border-color: var(--bug);
+  color: #ff8078;
+}
+.is-pending {
+  opacity: 0.65;
+  cursor: wait;
+}
+@media (max-width: 900px) {
+  .projects-shell {
+    grid-template-columns: 1fr;
+  }
+  .project-row {
+    grid-template-columns: 10px minmax(0, 1fr) auto;
+  }
+  .project-id {
+    display: none;
+  }
+}
+
 .chip {
   font-size: 12px;
   padding: 5px 10px;

package/src/viewer/server/router.mjs

@@ -4,7 +4,16 @@ import path from 'node:path';
 import { gitRefs } from '../../git.mjs';
 import { publicDir } from '../../paths.mjs';
 import { loadRepoAsync } from '../../repo.mjs';
-import { changeStatus, resolveProjects, searchProjects, serialize } from '../domain.mjs';
+import {
+  changeStatus,
+  readProjectConfig,
+  repairProjectPath,
+  resolveProjects,
+  saveProjectConfig,
+  searchProjects,
+  serialize,
+  unregisterProject,
+} from '../domain.mjs';
 import { isAuthorizedWrite, isLocalHost } from './security.mjs';
 
 const require = createRequire(import.meta.url);
@@ -78,7 +87,12 @@ export function createRequestListener(cwd, localOnly, token) {
       const route = url.pathname;
       const params = url.searchParams;
 
-      if (req.method === 'POST' && route === '/api/status') {
+      if (
+        req.method === 'POST' &&
+        ['/api/status', '/api/project-config', '/api/project-path', '/api/project-remove'].includes(
+          route,
+        )
+      ) {
         if (!isAuthorizedWrite(req, token)) {
           send(res, 403, MIME['.json'], JSON.stringify({ error: 'unauthorized write' }));
           req.destroy();
@@ -97,22 +111,47 @@ export function createRequestListener(cwd, localOnly, token) {
         });
         req.on('end', () => {
           if (aborted) return;
-          let payload;
           try {
-            payload = JSON.parse(raw || '{}');
-          } catch {
-            send(res, 400, MIME['.json'], JSON.stringify({ error: 'invalid JSON body' }));
-            return;
+            let payload;
+            try {
+              payload = JSON.parse(raw || '{}');
+            } catch {
+              send(res, 400, MIME['.json'], JSON.stringify({ error: 'invalid JSON body' }));
+              return;
+            }
+            const { projects } = resolveProjects(cwd, localOnly);
+            const options = { localOnly };
+            const result =
+              route === '/api/status'
+                ? changeStatus(projects, payload)
+                : route === '/api/project-config'
+                  ? saveProjectConfig(projects, payload, options)
+                  : route === '/api/project-path'
+                    ? repairProjectPath(projects, payload, options)
+                    : unregisterProject(projects, payload, options);
+            const { code, body } = result;
+            send(res, code, MIME['.json'], JSON.stringify(body));
+          } catch (error) {
+            process.stderr.write(`[changeledger-viewer] ${error.message}\n`);
+            send(res, 500, MIME['.json'], JSON.stringify({ error: 'Internal server error' }));
           }
-          const { projects } = resolveProjects(cwd, localOnly);
-          const { code, body } = changeStatus(projects, payload);
-          send(res, code, MIME['.json'], JSON.stringify(body));
         });
         return;
       }
 
       if (route === '/api/projects') {
-        send(res, 200, MIME['.json'], JSON.stringify(resolveProjects(cwd, localOnly)));
+        send(
+          res,
+          200,
+          MIME['.json'],
+          JSON.stringify({ ...resolveProjects(cwd, localOnly), localOnly }),
+        );
+        return;
+      }
+      if (route === '/api/project-config') {
+        const { projects } = resolveProjects(cwd, localOnly);
+        const { code, body } = readProjectConfig(projects, params.get('project'));
+        send(res, code, MIME['.json'], JSON.stringify(body));
         return;
       }
       if (route === '/api/git') {