npm - reviewflow - Versions diffs - 3.27.0 → 3.28.0 - Mend

reviewflow 3.27.0 → 3.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (625) hide show

package/dist/dashboard/setup.html ADDED Viewed

@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Reviewflow — Setup Wizard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body class="setup-body">
+  <main class="setup-shell" data-boot="pending">
+    <span class="setup-corner setup-corner--tl" aria-hidden="true"></span>
+    <span class="setup-corner setup-corner--tr" aria-hidden="true"></span>
+    <span class="setup-corner setup-corner--bl" aria-hidden="true"></span>
+    <span class="setup-corner setup-corner--br" aria-hidden="true"></span>
+    <header class="setup-header">
+      <div class="setup-boot" aria-hidden="true">
+        <span class="setup-boot-bar"></span>
+        <span class="setup-boot-bar"></span>
+        <span class="setup-boot-bar"></span>
+      </div>
+      <div class="setup-title-block">
+        <p class="setup-eyebrow">// REVIEWFLOW SETUP</p>
+        <h1 id="setup-heading" class="setup-heading">// SÉQUENCE DE DÉMARRAGE</h1>
+      </div>
+    </header>
+    <div id="setup-banners" class="setup-banners"></div>
+    <div id="setup-disconnect" class="setup-disconnect" hidden role="alert">
+      <span class="setup-banner-title">// CONNEXION PERDUE</span>
+      <span class="setup-disconnect-detail">Lecture dégradée via interrogation périodique de l'état.</span>
+      <a class="btn btn-secondary" href="/setup">Relancer le wizard</a>
+    </div>
+    <div id="setup-readonly" class="setup-readonly" hidden role="status"></div>
+    <div id="setup-avatar" class="setup-avatar" hidden>
+      <span class="setup-corner setup-corner--tl" aria-hidden="true"></span>
+      <span class="setup-corner setup-corner--tr" aria-hidden="true"></span>
+      <span class="setup-corner setup-corner--bl" aria-hidden="true"></span>
+      <span class="setup-corner setup-corner--br" aria-hidden="true"></span>
+      <canvas id="setup-avatar-canvas" class="setup-avatar-canvas" width="220" height="220" aria-hidden="true"></canvas>
+      <div class="setup-avatar-side">
+        <div id="setup-avatar-status" class="setup-avatar-status">// ÉTAT — INITIALISATION</div>
+        <div id="setup-avatar-form" class="setup-avatar-form"></div>
+      </div>
+    </div>
+    <ol id="setup-steps" class="setup-steps" aria-label="Étapes de configuration"></ol>
+    <div id="setup-live" class="setup-visually-hidden" role="status" aria-live="polite" aria-atomic="true"></div>
+  </main>
+  <script type="module">
+    import {
+      buildStepRowsModel,
+      buildBannerModel,
+      renderStepRow,
+      renderBanner,
+      buildAriaAnnouncement,
+    } from './modules/setupWizard.js';
+    import {
+      connectSetupWizardStream,
+      pollingStateToEvents,
+      buildMultiTabViewState,
+      prefersReducedMotion,
+    } from './modules/setupWizardStream.js';
+    import {
+      buildFormModel,
+      renderForm,
+      buildInputPayload,
+    } from './modules/setupWizardForms.js';
+    import {
+      avatarStateFromEvents,
+      shouldUseAvatar,
+    } from './modules/setupWizardAvatar.js';
+    import { mountSetupWizardAvatar } from './modules/setupWizardAvatarRenderer.js';
+    const stepsContainer = document.getElementById('setup-steps');
+    const bannersContainer = document.getElementById('setup-banners');
+    const disconnectBanner = document.getElementById('setup-disconnect');
+    const readOnlyBanner = document.getElementById('setup-readonly');
+    const liveRegion = document.getElementById('setup-live');
+    const shell = document.querySelector('.setup-shell');
+    const headingElement = document.getElementById('setup-heading');
+    const avatarContainer = document.getElementById('setup-avatar');
+    const avatarCanvas = document.getElementById('setup-avatar-canvas');
+    const avatarStatusSlot = document.getElementById('setup-avatar-status');
+    const avatarFormSlot = document.getElementById('setup-avatar-form');
+    const reducedMotion = prefersReducedMotion(
+      typeof window.matchMedia === 'function'
+        ? window.matchMedia('(prefers-reduced-motion: reduce)')
+        : null,
+    );
+    if (reducedMotion) {
+      shell.setAttribute('data-reduced-motion', 'true');
+    }
+    const canvasSupported =
+      typeof document.createElement('canvas').getContext === 'function' &&
+      document.createElement('canvas').getContext('2d') !== null;
+    const useAvatar = shouldUseAvatar({ canvasSupported, reducedMotion });
+    let avatar = null;
+    let lastAnnouncedKey = '';
+    let activeRunId = null;
+    let activeRunReadOnly = false;
+    function announce(rows) {
+      const active = rows.find((row) => row.status === 'in_progress')
+        ?? [...rows].reverse().find((row) => row.status !== 'pending');
+      if (!active) {
+        return;
+      }
+      const key = `${active.id}:${active.status}`;
+      if (key === lastAnnouncedKey) {
+        return;
+      }
+      lastAnnouncedKey = key;
+      liveRegion.textContent = buildAriaAnnouncement(active);
+    }
+    function applyResumeHeading(banners) {
+      const resume = banners.find((banner) => banner.kind === 'resume');
+      if (resume && resume.position !== null && resume.total !== null) {
+        headingElement.textContent = `// REPRISE — Étape ${resume.position}/${resume.total}`;
+      }
+    }
+    function latestAwaitingInput(events) {
+      const last = events[events.length - 1];
+      return last && last.status === 'awaiting_input' ? last : null;
+    }
+    async function submitForm(form, model) {
+      const errorSlot = form.querySelector('.setup-form-error');
+      const raw = 'fixedValue' in model ? model.fixedValue : readFormValue(form, model.kind);
+      const result = buildInputPayload(model.kind, activeRunId, raw, model.options);
+      if (!result.ok) {
+        showFormError(errorSlot, result.error);
+        return;
+      }
+      try {
+        const response = await fetch('/api/setup/input', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(result.body),
+        });
+        if (!response.ok) {
+          const payload = await response.json().catch(() => ({}));
+          showFormError(errorSlot, payload.error === 'no-active-run'
+            ? '// SESSION EXPIRÉE — relancez le wizard'
+            : '// ENTRÉE REFUSÉE par le serveur');
+        }
+      } catch {
+        showFormError(errorSlot, '// ENVOI IMPOSSIBLE — vérifiez la connexion');
+      }
+    }
+    function readFormValue(form, kind) {
+      if (kind === 'text') {
+        const input = form.querySelector('.setup-form-input');
+        return input ? input.value : '';
+      }
+      if (kind === 'multiSelect') {
+        return [...form.querySelectorAll('.setup-form-checkbox:checked')].map((box) => box.value);
+      }
+      return '';
+    }
+    function showFormError(slot, message) {
+      if (!slot) {
+        return;
+      }
+      slot.textContent = message;
+      slot.hidden = false;
+    }
+    function bindForm(form, model) {
+      form.addEventListener('submit', (formEvent) => {
+        formEvent.preventDefault();
+        submitForm(form, model);
+      });
+      for (const button of form.querySelectorAll('[data-confirm-value]')) {
+        button.addEventListener('click', () => {
+          submitForm(form, { ...model, fixedValue: button.dataset.confirmValue === 'true' });
+        });
+      }
+      for (const button of form.querySelectorAll('[data-choice-value]')) {
+        button.addEventListener('click', () => {
+          submitForm(form, { ...model, fixedValue: button.dataset.choiceValue });
+        });
+      }
+    }
+    function renderActiveForm(events) {
+      if (activeRunReadOnly || activeRunId === null) {
+        return;
+      }
+      const awaiting = latestAwaitingInput(events);
+      const model = buildFormModel(awaiting);
+      if (model === null) {
+        return;
+      }
+      const row = stepsContainer.querySelector(`[data-step-id="${model.stepId}"] .setup-step-body`);
+      if (!row) {
+        return;
+      }
+      row.insertAdjacentHTML('beforeend', renderForm(model));
+      const form = row.querySelector('.setup-form');
+      if (form) {
+        bindForm(form, model);
+      }
+    }
+    function renderAvatarForm(events) {
+      const awaiting = latestAwaitingInput(events);
+      const model = activeRunReadOnly || activeRunId === null ? null : buildFormModel(awaiting);
+      if (model === null) {
+        avatarFormSlot.innerHTML = '';
+        return;
+      }
+      avatarFormSlot.innerHTML = renderForm(model);
+      const form = avatarFormSlot.querySelector('.setup-form');
+      if (form) {
+        bindForm(form, model);
+      }
+    }
+    function render(events) {
+      const rows = buildStepRowsModel(events);
+      const banners = buildBannerModel(events);
+      stepsContainer.innerHTML = rows.map(renderStepRow).join('');
+      bannersContainer.innerHTML = banners.map(renderBanner).join('');
+      applyResumeHeading(banners);
+      renderActiveForm(events);
+      announce(rows);
+    }
+    function renderAvatar(events) {
+      const rows = buildStepRowsModel(events);
+      const banners = buildBannerModel(events);
+      const state = avatarStateFromEvents(events);
+      if (avatar) {
+        avatar.setState(state);
+      }
+      avatarStatusSlot.textContent = `// ÉTAT — ${state.toUpperCase()}`;
+      bannersContainer.innerHTML = banners.map(renderBanner).join('');
+      applyResumeHeading(banners);
+      renderAvatarForm(events);
+      announce(rows);
+    }
+    const renderEvents = useAvatar ? renderAvatar : render;
+    function showDisconnect() {
+      disconnectBanner.hidden = false;
+    }
+    function showReadOnly(notice) {
+      readOnlyBanner.hidden = false;
+      readOnlyBanner.textContent = notice;
+    }
+    async function pollOnce() {
+      try {
+        const response = await fetch('/api/setup/state');
+        if (!response.ok) {
+          return;
+        }
+        const payload = await response.json();
+        renderEvents(pollingStateToEvents(payload.state));
+      } catch {
+        /* polling is best-effort; the disconnect banner already informs the user */
+      }
+    }
+    function startPolling() {
+      showDisconnect();
+      pollOnce();
+      window.setInterval(pollOnce, 2000);
+    }
+    async function startRun() {
+      const response = await fetch('/api/setup/start', { method: 'POST' });
+      if (response.status === 409) {
+        const body = await response.json();
+        const viewState = buildMultiTabViewState({ isPrimaryTab: false, hasActiveRun: true });
+        if (viewState.notice) {
+          showReadOnly(viewState.notice);
+        }
+        subscribe(body.runId, true);
+        return;
+      }
+      const body = await response.json();
+      subscribe(body.runId, false);
+    }
+    function subscribe(runId, readOnly) {
+      activeRunId = runId;
+      activeRunReadOnly = readOnly;
+      shell.setAttribute('data-boot', 'ready');
+      connectSetupWizardStream({
+        runId,
+        onEvents: renderEvents,
+        onDisconnected: () => {
+          if (!readOnly) {
+            startPolling();
+          } else {
+            pollOnce();
+          }
+        },
+        onComplete: () => {
+          window.setTimeout(() => {
+            if (avatar) {
+              avatar.destroy();
+              avatar = null;
+            }
+            window.location.href = '/dashboard/';
+          }, reducedMotion ? 0 : 3000);
+        },
+      });
+    }
+    window.addEventListener('storage', (event) => {
+      if (event.key === 'reviewflow.setup.completed') {
+        if (avatar) {
+          avatar.destroy();
+          avatar = null;
+        }
+        window.location.href = '/dashboard/';
+      }
+    });
+    if (useAvatar) {
+      avatarContainer.hidden = false;
+      stepsContainer.hidden = true;
+      avatar = mountSetupWizardAvatar({ canvas: avatarCanvas, initialState: 'idle' });
+    }
+    renderEvents([]);
+    startRun();
+  </script>
+</body>
+</html>

package/dist/dashboard/styles.css CHANGED Viewed

@@ -6019,3 +6019,347 @@ input:focus-visible,
     justify-content: flex-end;
   }
 }
+/* SPEC-184 — Setup Wizard HUD (Iteration A). Reuses existing tokens only. */
+.setup-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  background: var(--accent-ghost);
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  text-decoration: none;
+}
+.setup-cta:hover {
+  border-color: var(--accent-hover);
+  color: var(--accent-hover);
+}
+.setup-cta-label {
+  letter-spacing: 0.08em;
+}
+.setup-cta-action {
+  color: var(--ink-0);
+}
+.setup-body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--bg-0);
+  color: var(--ink-0);
+  font-family: var(--font-mono);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 3rem 1.5rem;
+}
+.setup-shell {
+  position: relative;
+  width: 100%;
+  max-width: 720px;
+  background: var(--bg-1);
+  border: 1px solid var(--bg-3);
+  border-radius: 8px;
+  padding: 2rem;
+}
+.setup-corner {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-color: var(--accent);
+  border-style: solid;
+  border-width: 0;
+  opacity: 0.7;
+}
+.setup-corner--tl { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; }
+.setup-corner--tr { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; }
+.setup-corner--bl { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; }
+.setup-corner--br { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }
+.setup-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.setup-eyebrow {
+  margin: 0;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  color: var(--accent);
+}
+.setup-heading {
+  margin: 0.2rem 0 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--ink-0);
+}
+.setup-boot {
+  display: flex;
+  gap: 4px;
+  align-items: flex-end;
+  height: 28px;
+}
+.setup-boot-bar {
+  width: 4px;
+  height: 8px;
+  background: var(--accent);
+  animation: setup-boot-rise 1.2s ease-in-out infinite;
+}
+.setup-boot-bar:nth-child(2) { animation-delay: 0.2s; }
+.setup-boot-bar:nth-child(3) { animation-delay: 0.4s; }
+@keyframes setup-boot-rise {
+  0%, 100% { height: 8px; opacity: 0.5; }
+  50% { height: 24px; opacity: 1; }
+}
+.setup-shell[data-boot="ready"] .setup-boot-bar {
+  animation: none;
+  height: 20px;
+}
+.setup-banners,
+.setup-disconnect,
+.setup-readonly {
+  margin-bottom: 1rem;
+}
+.setup-banner,
+.setup-disconnect,
+.setup-readonly {
+  border: 1px solid var(--bg-3);
+  border-radius: 4px;
+  padding: 0.7rem 1rem;
+  font-size: 13px;
+  color: var(--ink-0);
+  background: var(--bg-2);
+}
+.setup-banner-title {
+  color: var(--accent);
+  letter-spacing: 0.08em;
+}
+.setup-banner--resume { border-color: var(--info); }
+.setup-banner--done { border-color: var(--success); color: var(--success); }
+.setup-banner--warning { border-color: var(--warning); }
+.setup-disconnect { border-color: var(--danger); display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
+.setup-readonly { border-color: var(--info); color: var(--info); }
+.setup-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+.setup-step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.8rem;
+  padding: 0.8rem 1rem;
+  border: 1px solid var(--bg-3);
+  border-radius: 4px;
+  background: var(--bg-2);
+}
+.setup-step-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: var(--ink-2);
+}
+.setup-step-dot--pending { background: var(--ink-2); }
+.setup-step-dot--in-progress { background: var(--accent); animation: setup-glow-pulse 1.4s ease-in-out infinite; }
+.setup-step-dot--succeeded { background: var(--success); }
+.setup-step-dot--skipped { background: var(--info); }
+.setup-step-dot--blocked { background: var(--danger); }
+.setup-step-dot--warning { background: var(--warning); }
+.setup-step-dot--awaiting-input { background: var(--info); }
+@keyframes setup-glow-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 var(--accent-ghost); opacity: 1; }
+  50% { box-shadow: 0 0 0 5px transparent; opacity: 0.55; }
+}
+.setup-step-body { flex: 1; }
+.setup-step-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+}
+.setup-step-label {
+  color: var(--accent);
+  font-size: 13px;
+  letter-spacing: 0.06em;
+}
+.setup-step-status {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  color: var(--ink-2);
+}
+.setup-step-status[data-status="succeeded"] { color: var(--success); }
+.setup-step-status[data-status="blocked"] { color: var(--danger); }
+.setup-step-status[data-status="warning"] { color: var(--warning); }
+.setup-step-status[data-status="in_progress"] { color: var(--accent); }
+.setup-step-message {
+  margin-top: 0.3rem;
+  font-size: 12px;
+  color: var(--ink-1);
+}
+.setup-step-remediation {
+  margin-top: 0.3rem;
+  font-size: 12px;
+  color: var(--danger);
+}
+.setup-form {
+  position: relative;
+  margin-top: 0.6rem;
+  padding: 0.7rem 0.8rem;
+  border: 1px solid var(--accent);
+  background: radial-gradient(circle at top left, var(--accent-ghost), transparent 60%), var(--bg-2);
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+.setup-form-label {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.setup-form-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+.setup-form-input {
+  flex: 1 1 14rem;
+  min-width: 0;
+  padding: 0.45rem 0.6rem;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--ink-0);
+  background: var(--bg-1);
+  border: 1px solid var(--bg-4);
+}
+.setup-form-input:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+.setup-form-choices,
+.setup-form-checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.setup-form-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--ink-1);
+}
+.setup-form-error {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--danger);
+}
+.setup-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.setup-avatar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 1rem;
+  padding: 1.5rem;
+  border: 1px solid var(--bg-3);
+  border-radius: 4px;
+  background: radial-gradient(circle at center, var(--accent-ghost), transparent 70%), var(--bg-2);
+}
+.setup-avatar-canvas {
+  flex: 0 0 auto;
+  width: 220px;
+  height: 220px;
+  display: block;
+}
+.setup-avatar-side {
+  flex: 1 1 16rem;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.setup-avatar-status {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+}
+.setup-avatar-form:empty {
+  display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .setup-boot-bar,
+  .setup-step-dot--in-progress {
+    animation: none;
+  }
+}