changeledger 0.4.0 → 0.6.0

package/src/viewer/public/app.js

@@ -1,8 +1,11 @@
 import {
+  getConfigMigrationPreview,
   getGitRefs,
-  getProjectConfig,
+  getProjectConfigStructured,
   getProjects,
   getRepo,
+  patchProjectConfigApi,
+  postConfigMigrationApply,
   postProjectConfig,
   postProjectPath,
   postProjectRemove,
@@ -255,11 +258,11 @@ async function moveStatus(id, status, reason) {
     const res = await postStatus(state.currentProject, id, status, reason);
     const out = await res.json();
     if (!res.ok) {
-      alert(out.error || 'status change failed');
+      showToast(out.error || 'status change failed');
       return;
     }
   } catch (e) {
-    alert(e.message);
+    showToast(e.message);
     return;
   }
   invalidateCache();
@@ -485,7 +488,7 @@ export function createDiagramLightbox({ overlay, canvas, closeButton }) {
 async function gotoChange(proj, changeId) {
   const match = state.projectsList.find((p) => p.id === proj || p.name === proj);
   if (!match?.alive) {
-    alert(`Project "${proj}" is not registered or its path is gone.`);
+    showToast(`Project "${proj}" is not registered or its path is gone.`);
     return;
   }
   if (match.id !== state.currentProject) {
@@ -595,11 +598,41 @@ 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);
+}
+
+/**
+ * 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'];
@@ -636,8 +669,316 @@ export function restoreInitialViewerShell(root = document, getStorage = () => wi
 
 let managedProject = null;
 let managedConfig = null;
+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;
+let dialogSequence = 0;
+
+export function showToast(message, { type = 'error', duration = 4000 } = {}) {
+  const container = document.getElementById('toast-container');
+  if (!container) return;
+  const el = document.createElement('div');
+  el.className = `toast toast-${type}`;
+  el.textContent = message;
+  el.setAttribute('role', 'alert');
+  container.appendChild(el);
+  setTimeout(() => el.remove(), duration);
+}
+
+export function setConfirmImpl(impl) {
+  _confirmImpl = impl;
+}
+
+// Prompt dialog — returns the entered string or null (cancel). Mockable via _promptImpl.
+let _promptImpl = null;
+export function setPromptImpl(impl) {
+  _promptImpl = impl;
+}
+
+export function showPrompt(message, { placeholder = '' } = {}) {
+  if (_promptImpl !== null) return Promise.resolve(_promptImpl(message));
+  return new Promise((resolve) => {
+    const id = `cl-prompt-${++dialogSequence}`;
+    const dialog = document.createElement('dialog');
+    dialog.className = 'cl-confirm-dialog';
+    dialog.setAttribute('aria-labelledby', `${id}-title`);
+    dialog.innerHTML = `
+      <p id="${id}-title" class="cl-confirm-message"></p>
+      <label for="${id}-input" class="cl-prompt-label">Confirmation value</label>
+      <input id="${id}-input" class="cl-prompt-input" type="text" autocomplete="off" />
+      <div class="cl-confirm-actions">
+        <button type="button" class="button cl-confirm-yes">Confirm</button>
+        <button type="button" class="button secondary cl-confirm-no">Cancel</button>
+      </div>`;
+    dialog.querySelector('.cl-confirm-message').textContent = message;
+    const input = dialog.querySelector('.cl-prompt-input');
+    if (placeholder) input.placeholder = placeholder;
+    document.body.appendChild(dialog);
+    const done = (result) => {
+      dialog.close();
+      dialog.remove();
+      resolve(result);
+    };
+    dialog.querySelector('.cl-confirm-yes').onclick = () => done(input.value);
+    dialog.querySelector('.cl-confirm-no').onclick = () => done(null);
+    dialog.addEventListener('cancel', () => done(null));
+    dialog.addEventListener('click', (e) => {
+      if (e.target === dialog) done(null);
+    });
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') done(input.value);
+    });
+    dialog.showModal();
+    input.focus();
+  });
+}
+
+export function showConfirm(message) {
+  if (_confirmImpl) return Promise.resolve(_confirmImpl(message));
+  return new Promise((resolve) => {
+    const id = `cl-confirm-${++dialogSequence}`;
+    const dialog = document.createElement('dialog');
+    dialog.className = 'cl-confirm-dialog';
+    dialog.setAttribute('aria-labelledby', `${id}-title`);
+    dialog.innerHTML = `
+      <p id="${id}-title" class="cl-confirm-message"></p>
+      <div class="cl-confirm-actions">
+        <button type="button" class="button cl-confirm-yes">Confirm</button>
+        <button type="button" class="button secondary cl-confirm-no">Cancel</button>
+      </div>`;
+    dialog.querySelector('.cl-confirm-message').textContent = message;
+    document.body.appendChild(dialog);
+    const done = (result) => {
+      dialog.close();
+      dialog.remove();
+      resolve(result);
+    };
+    dialog.querySelector('.cl-confirm-yes').onclick = () => done(true);
+    dialog.querySelector('.cl-confirm-no').onclick = () => done(false);
+    dialog.addEventListener('cancel', () => done(false));
+    dialog.addEventListener('click', (e) => {
+      if (e.target === dialog) done(false);
+    });
+    dialog.showModal();
+  });
+}
 
-export function projectsViewTemplate(projects, selected, config, localOnly) {
+function configSectionTemplate(config, mode, preview) {
+  if (!config) return nothing;
+  if (config.error) {
+    return html`<div class="config-section">
+      <p class="project-error" role="alert" aria-live="assertive">${config.error}</p>
+    </div>`;
+  }
+
+  const schema = config.schemaVersion ?? 0;
+  const futureSch = schema > SUPPORTED_SCHEMA_VERSION;
+  const outdated = schema < SUPPORTED_SCHEMA_VERSION;
+
+  return html`<div class="config-section">
+    ${
+      !futureSch
+        ? html`<div class="config-tabs" role="tablist" aria-label="Config editor mode">
+            <button
+              type="button"
+              role="tab"
+              class=${`config-tab${mode === 'form' ? ' active' : ''}`}
+              aria-selected=${mode === 'form'}
+              data-config-mode="form"
+            >Form</button>
+            <button
+              type="button"
+              role="tab"
+              class=${`config-tab${mode === 'raw' ? ' active' : ''}`}
+              aria-selected=${mode === 'raw'}
+              data-config-mode="raw"
+            >Raw YAML</button>
+          </div>`
+        : nothing
+    }
+
+    ${
+      futureSch
+        ? html`<div class="config-future-schema">
+            <p class="config-schema-badge">Schema ${schema}</p>
+            <p>Update ChangeLedger to edit config schema ${schema}.</p>
+          </div>
+          ${rawReadonlyTemplate(config)}`
+        : 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>
+              ${
+                preview?.already_current
+                  ? html`<p class="config-migration-ok">Migration already applied.</p>`
+                  : preview?.error
+                    ? html`<p class="project-error" role="alert" aria-live="assertive">${preview.error}</p>
+                        <div class="project-actions">
+                          <button class="button secondary" type="button" data-preview-migration>Retry preview</button>
+                        </div>`
+                    : preview
+                      ? html`<div class="config-migration-preview">
+                          <p class="config-migration-summary">${preview.summary}</p>
+                          <p><strong>Changes:</strong></p>
+                          <ul>${preview.changes?.map((c) => html`<li>${c}</li>`)}</ul>
+                          <pre class="config-migration-yaml">${preview.yaml}</pre>
+                          <div class="project-actions">
+                            <button class="button" type="button" data-apply-migration>Apply migration</button>
+                          </div>
+                        </div>`
+                      : html`<div class="project-actions">
+                          <button class="button secondary" type="button" data-preview-migration>Preview migration</button>
+                        </div>`
+              }
+              <p class="config-section-note">You can still inspect the current config in Raw YAML.</p>
+              ${rawEditorTemplate(config)}
+            </div>`
+          : mode === 'form'
+            ? formEditorTemplate(config)
+            : rawEditorTemplate(config)
+    }
+  </div>`;
+}
+
+// Raw editor with Save button (for editable schemas)
+function rawEditorTemplate(config) {
+  return 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" role="alert" aria-live="assertive" ?hidden=${!config?.rawError}>${config?.rawError ?? ''}</p>
+    <div class="project-actions"><button class="button" type="submit">Save configuration</button></div>
+  </form>`;
+}
+
+// Raw viewer without Save (future schema — strictly read-only)
+function rawReadonlyTemplate(config) {
+  return html`<div class="config-form config-form-readonly">
+    <div class="config-label"><label for="project-config-ro">.changeledger/config.yml</label></div>
+    <textarea id="project-config-ro" spellcheck="false" readonly .value=${config?.content ?? ''}></textarea>
+    <p class="config-note">Editing disabled for schema ${config.schemaVersion ?? '?'}. Update ChangeLedger to enable editing.</p>
+  </div>`;
+}
+
+function formEditorTemplate(config) {
+  const cfg = config.config ?? {};
+  const types = cfg.types ?? {};
+  const impacts = cfg.release?.impacts ?? {};
+  const readiness = cfg.readiness ?? {};
+  const allStatuses = cfg.statuses ?? [];
+  const stages = cfg.stages ?? [];
+
+  return html`<form class="config-form config-form-structured" data-config-form>
+    <div class="config-label">
+      <label>.changeledger/config.yml (Form)</label>
+      <button type="button" class="text-button" data-reload-config>Reload</button>
+    </div>
+
+    <fieldset class="config-group">
+      <legend>General</legend>
+      <label>Project name
+        <input name="project_name" .value=${cfg.project_name ?? ''} />
+      </label>
+      <label>Language
+        <input name="language" .value=${cfg.language ?? 'en'} />
+      </label>
+      <label class="config-checkbox">
+        <input type="checkbox" name="tdd" ?checked=${cfg.tdd !== false} />
+        TDD mode (require test-grade criteria)
+      </label>
+    </fieldset>
+
+    <fieldset class="config-group">
+      <legend>Paths</legend>
+      <p class="config-note">Changing paths only updates the config — existing files are not moved.</p>
+      <label>Changes directory
+        <input name="changes_dir" .value=${cfg.changes_dir ?? '.changeledger/changes'} />
+      </label>
+      <label>Specs directory
+        <input name="specs_dir" .value=${cfg.specs_dir ?? '.changeledger/specs'} />
+      </label>
+    </fieldset>
+
+    <fieldset class="config-group">
+      <legend>Lifecycle statuses</legend>
+      <label>Status order (one per line)
+        <textarea name="statuses" rows="8">${allStatuses.join('\n')}</textarea>
+      </label>
+      <p class="config-note">Canonical statuses are required. Custom statuses may be added and reordered.</p>
+    </fieldset>
+
+    <fieldset class="config-group">
+      <legend>Lifecycle stages</legend>
+      <label>Canonical stage order (one per line)
+        <textarea name="stages" rows="6">${stages.join('\n')}</textarea>
+      </label>
+      <p class="config-note">Stages used by a change type cannot be removed until that type is updated.</p>
+    </fieldset>
+
+    <fieldset class="config-group">
+      <legend>Change types</legend>
+      ${Object.entries(types).map(
+        ([typeName, typeDef]) => html`
+            <fieldset class="config-type-row">
+              <legend>${typeName}</legend>
+              <label>Active stages (one per line)
+                <textarea name=${`stages_${typeName}`} rows="3">${(typeDef?.stages ?? []).join('\n')}</textarea>
+              </label>
+              <label>Review policy
+                <select name=${`review_required_${typeName}`}>
+                  <option value="" ?selected=${!Object.hasOwn(typeDef ?? {}, 'review_required')}>Not configured</option>
+                  <option value="true" ?selected=${typeDef?.review_required === true}>Required</option>
+                  <option value="false" ?selected=${typeDef?.review_required === false}>Not required</option>
+                </select>
+              </label>
+              <label>SemVer impact
+                <select name=${`impact_${typeName}`}>
+                  <option value="" ?selected=${!Object.hasOwn(impacts, typeName)}>Not configured</option>
+                  ${['none', 'patch', 'minor', 'major'].map(
+                    (v) =>
+                      html`<option value=${v} ?selected=${impacts[typeName] === v}>${v}</option>`,
+                  )}
+                </select>
+              </label>
+            </fieldset>
+          `,
+      )}
+    </fieldset>
+
+    <fieldset class="config-group">
+      <legend>Definition of Ready</legend>
+      <label>Target patterns (one per line)
+        <textarea name="target_patterns" rows="3">${(readiness.target_patterns ?? []).join('\n')}</textarea>
+      </label>
+      <label>Verification patterns (one per line)
+        <textarea name="verification_patterns" rows="3">${(readiness.verification_patterns ?? []).join('\n')}</textarea>
+      </label>
+    </fieldset>
+
+    <fieldset class="config-group config-group-internal">
+      <legend>Internal</legend>
+      <p><span class="config-readonly-label">schema_version</span><span class="config-readonly-value">${cfg.schema_version ?? 0}</span></p>
+      <p><span class="config-readonly-label">project_id</span><span class="config-readonly-value mono">${cfg.project_id ?? ''}</span></p>
+    </fieldset>
+
+    <p class="project-error" role="alert" aria-live="assertive" ?hidden=${!config?.formError}>${config?.formError ?? ''}</p>
+    <div class="project-actions">
+      <button class="button" type="submit">Save configuration</button>
+    </div>
+  </form>`;
+}
+
+export function projectsViewTemplate(
+  projects,
+  selected,
+  config,
+  localOnly,
+  preview = migrationPreview,
+) {
   const project = projects.find((item) => item.id === selected);
   return html`<div class="projects-shell">
     <div class="projects-list">
@@ -680,12 +1021,7 @@ export function projectsViewTemplate(projects, selected, config, localOnly) {
               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>`
+                  : configSectionTemplate(config, configMode, preview)
                 : html`<div class="missing-config"><h3>Configuration unavailable</h3><p>Repair the registered path to edit this project.</p></div>`
             }
             ${
@@ -700,9 +1036,11 @@ export function projectsViewTemplate(projects, selected, config, localOnly) {
 
 async function openManagedProject(id, { reload = false } = {}) {
   managedProject = id;
+  configDirty = false;
   const project = state.projectsList.find((item) => item.id === id);
   if (!project?.alive) {
     managedConfig = null;
+    migrationPreview = null;
     renderProjects();
     return;
   }
@@ -711,9 +1049,17 @@ async function openManagedProject(id, { reload = false } = {}) {
     return;
   }
   managedConfig = { id, loading: true };
+  migrationPreview = null;
   renderProjects();
   try {
-    managedConfig = { id, ...(await getProjectConfig(id)) };
+    const structured = await getProjectConfigStructured(id);
+    managedConfig = { id, ...structured };
+    // Default to form for current schema, raw for future schema
+    if (structured.schemaVersion > SUPPORTED_SCHEMA_VERSION) {
+      configMode = 'raw';
+    } else {
+      configMode = 'form';
+    }
   } catch (error) {
     managedConfig = { id, content: '', revision: '', error: error.message };
   }
@@ -740,15 +1086,20 @@ export async function projectMutation(root, request, onSuccess) {
     if (error) {
       error.textContent = failure.message;
       error.hidden = false;
-    } else alert(failure.message);
+    } else showToast(failure.message);
   } finally {
     setProjectFormPending(root, false);
   }
 }
 
-export function requestUnregisterConfirmation(project, ask = prompt) {
-  return ask(
+export function requestUnregisterConfirmation(project, ask = null) {
+  if (ask !== null)
+    return ask(
+      `Type "${project.name}" to unregister this project. No repository files will be deleted.`,
+    );
+  return showPrompt(
     `Type "${project.name}" to unregister this project. No repository files will be deleted.`,
+    { placeholder: project.name },
   );
 }
 
@@ -768,6 +1119,92 @@ async function refreshProjectRegistry() {
   select.style.display = projects.length > 1 ? '' : 'none';
 }
 
+const listFromControl = (control) =>
+  (control?.value ?? '')
+    .split('\n')
+    .map((value) => value.trim())
+    .filter(Boolean);
+
+const sameList = (left = [], right = []) =>
+  left.length === right.length && left.every((value, index) => value === right[index]);
+
+export function collectFormPatch(formEl, currentConfig) {
+  const patch = {};
+  const els = formEl.elements;
+
+  if (els.project_name && els.project_name.value !== (currentConfig.project_name ?? '')) {
+    patch.project_name = els.project_name.value;
+  }
+  if (els.language && els.language.value !== (currentConfig.language ?? 'en')) {
+    patch.language = els.language.value;
+  }
+  if (els.tdd && els.tdd.checked !== (currentConfig.tdd !== false)) patch.tdd = els.tdd.checked;
+  if (
+    els.changes_dir &&
+    els.changes_dir.value !== (currentConfig.changes_dir ?? '.changeledger/changes')
+  ) {
+    patch.changes_dir = els.changes_dir.value;
+  }
+  if (els.specs_dir && els.specs_dir.value !== (currentConfig.specs_dir ?? '.changeledger/specs')) {
+    patch.specs_dir = els.specs_dir.value;
+  }
+
+  const statuses = listFromControl(els.statuses);
+  if (els.statuses && !sameList(statuses, currentConfig.statuses ?? [])) patch.statuses = statuses;
+  const stages = listFromControl(els.stages);
+  if (els.stages && !sameList(stages, currentConfig.stages ?? [])) patch.stages = stages;
+
+  // Type fields are tri-state: an empty select means the key is not configured.
+  const types = currentConfig.types ?? {};
+  const existingImpacts = currentConfig.release?.impacts ?? {};
+  const typePatch = {};
+  const impacts = {};
+  for (const typeName of Object.keys(types)) {
+    const currentType = types[typeName] ?? {};
+    const typeStages = listFromControl(els[`stages_${typeName}`]);
+    if (els[`stages_${typeName}`] && !sameList(typeStages, currentType.stages ?? [])) {
+      typePatch[typeName] = { ...(typePatch[typeName] ?? {}), stages: typeStages };
+    }
+
+    const rrEl = els[`review_required_${typeName}`];
+    const currentReview = Object.hasOwn(currentType, 'review_required')
+      ? String(currentType.review_required)
+      : '';
+    if (rrEl && rrEl.value !== currentReview) {
+      typePatch[typeName] = {
+        ...(typePatch[typeName] ?? {}),
+        review_required: rrEl.value === '' ? null : rrEl.value === 'true',
+      };
+    }
+
+    const impactEl = els[`impact_${typeName}`];
+    const currentImpact = Object.hasOwn(existingImpacts, typeName) ? existingImpacts[typeName] : '';
+    if (impactEl && impactEl.value !== currentImpact) {
+      impacts[typeName] = impactEl.value === '' ? null : impactEl.value;
+    }
+  }
+  if (Object.keys(typePatch).length) patch.types = typePatch;
+  if (Object.keys(impacts).length) patch.release = { impacts };
+
+  // readiness patterns
+  if (els.target_patterns !== undefined) {
+    const targetPatterns = listFromControl(els.target_patterns);
+    const verifyPatterns = listFromControl(els.verification_patterns);
+    const currentReadiness = currentConfig.readiness ?? {};
+    if (
+      !sameList(targetPatterns, currentReadiness.target_patterns ?? []) ||
+      !sameList(verifyPatterns, currentReadiness.verification_patterns ?? [])
+    ) {
+      patch.readiness = {
+        target_patterns: targetPatterns,
+        verification_patterns: verifyPatterns,
+      };
+    }
+  }
+
+  return patch;
+}
+
 function renderProjects() {
   const root = $('#projects');
   litRender(
@@ -775,18 +1212,77 @@ function renderProjects() {
     root,
   );
   bindProjectViewActions(root, {
-    select: (id) => openManagedProject(id),
-    reload: () => openManagedProject(managedProject, { reload: true }),
-    save: (content, configForm) =>
+    select: async (id) => {
+      if (configDirty) {
+        const ok = await showConfirm('You have unsaved changes. Switch project and discard them?');
+        if (!ok) return;
+      }
+      openManagedProject(id);
+    },
+    reload: async () => {
+      if (configDirty) {
+        const ok = await showConfirm('Reload will discard your unsaved changes. Continue?');
+        if (!ok) return;
+      }
+      openManagedProject(managedProject, { reload: true });
+    },
+    markDirty: () => {
+      configDirty = true;
+    },
+    switchMode: async (mode) => {
+      if (configDirty && mode !== configMode) {
+        const ok = await showConfirm('You have unsaved changes. Switch mode and discard them?');
+        if (!ok) return;
+      }
+      configMode = mode;
+      configDirty = false;
+      renderProjects();
+    },
+    saveRaw: (content, configForm) =>
       projectMutation(
         configForm,
         () => postProjectConfig(managedProject, content, managedConfig.revision),
         async (body) => {
-          managedConfig = { id: managedProject, content, revision: body.revision };
+          configDirty = false;
+          managedConfig = { ...managedConfig, content, revision: body.revision };
           await refreshProjectRegistry();
           renderProjects();
         },
       ),
+    saveForm: (formEl, configForm) =>
+      projectMutation(
+        configForm,
+        () => {
+          const patch = collectFormPatch(formEl, managedConfig.config ?? {});
+          return patchProjectConfigApi(managedProject, patch, managedConfig.revision);
+        },
+        async (_body) => {
+          configDirty = false;
+          await openManagedProject(managedProject, { reload: true });
+        },
+      ),
+    previewMigration: async () => {
+      try {
+        const result = await getConfigMigrationPreview(managedProject, managedConfig.revision);
+        migrationPreview = result;
+      } catch (e) {
+        migrationPreview = { error: e.message };
+      }
+      renderProjects();
+    },
+    applyMigration: async () => {
+      const ok = await showConfirm(
+        'Apply the config migration? This will update .changeledger/config.yml.',
+      );
+      if (!ok) return;
+      try {
+        await postConfigMigrationApply(managedProject, managedConfig.revision);
+        await openManagedProject(managedProject, { reload: true });
+      } catch (e) {
+        migrationPreview = { error: e.message };
+        renderProjects();
+      }
+    },
     repair: (projectPath, pathForm) =>
       projectMutation(
         pathForm,
@@ -796,13 +1292,13 @@ function renderProjects() {
           await openManagedProject(managedProject, { reload: true });
         },
       ),
-    unregister: (editor) => {
+    unregister: async (editor) => {
       const project = state.projectsList.find((item) => item.id === managedProject);
-      const confirm = requestUnregisterConfirmation(project);
-      if (confirm === null) return;
+      const answer = await requestUnregisterConfirmation(project);
+      if (answer === null) return;
       projectMutation(
         editor,
-        () => postProjectRemove(managedProject, confirm),
+        () => postProjectRemove(managedProject, answer),
         async () => {
           managedProject = null;
           managedConfig = null;
@@ -819,14 +1315,39 @@ export function bindProjectViewActions(root, handlers) {
   root.querySelectorAll('[data-manage-project]').forEach((button) => {
     button.onclick = () => handlers.select(button.dataset.manageProject);
   });
+
+  root.querySelectorAll('[data-config-mode]').forEach((button) => {
+    button.onclick = () => handlers.switchMode(button.dataset.configMode);
+  });
+
   const reload = root.querySelector('[data-reload-config]');
   if (reload) reload.onclick = () => handlers.reload();
-  const configForm = root.querySelector('.config-form');
-  if (configForm)
-    configForm.onsubmit = (event) => {
+
+  const rawForm = root.querySelector('.config-form:not([data-config-form])');
+  if (rawForm) {
+    rawForm.onsubmit = (event) => {
       event.preventDefault();
-      handlers.save(configForm.querySelector('textarea').value, configForm);
+      handlers.saveRaw(rawForm.querySelector('textarea').value, rawForm);
     };
+    rawForm.querySelector('textarea')?.addEventListener('input', () => handlers.markDirty?.());
+  }
+
+  const formEditor = root.querySelector('[data-config-form]');
+  if (formEditor) {
+    formEditor.onsubmit = (event) => {
+      event.preventDefault();
+      handlers.saveForm(formEditor, formEditor);
+    };
+    formEditor.addEventListener('input', () => handlers.markDirty?.());
+    formEditor.addEventListener('change', () => handlers.markDirty?.());
+  }
+
+  const previewBtn = root.querySelector('[data-preview-migration]');
+  if (previewBtn) previewBtn.onclick = () => handlers.previewMigration();
+
+  const applyBtn = root.querySelector('[data-apply-migration]');
+  if (applyBtn) applyBtn.onclick = () => handlers.applyMigration();
+
   const pathForm = root.querySelector('.project-path-form');
   if (pathForm)
     pathForm.onsubmit = (event) => {
@@ -950,8 +1471,17 @@ function bootstrap() {
   $('#view-specs').onclick = () => activateView('specs');
   $('#view-metrics').onclick = () => activateView('metrics');
   $('#view-projects').onclick = () => activateView('projects');
-  $('#project').onchange = (e) => {
-    selectProject(e.target.value);
+  $('#project').onchange = async (e) => {
+    const nextProject = e.target.value;
+    if (state.currentView === 'projects' && configDirty && nextProject !== state.currentProject) {
+      const ok = await showConfirm('You have unsaved changes. Switch project and discard them?');
+      if (!ok) {
+        e.target.value = state.currentProject;
+        return;
+      }
+      configDirty = false;
+    }
+    selectProject(nextProject);
     load();
   };
   document.onkeydown = (e) => {