@echomem/mcp 1.4.44 → 1.4.45

package/dist/setup-page/styles-foundation.js

@@ -105,6 +105,89 @@ export const SETUP_PAGE_STYLES_FOUNDATION = String.raw `    :root {
       font-size: 16px;
       text-align: center;
     }
+    body.scanMode {
+      background: var(--echo-paper-canvas);
+    }
+    body.scanMode main {
+      width: 100%;
+      min-height: 100vh;
+      margin: 0;
+      padding: clamp(32px, 7vw, 96px);
+      display: grid;
+      place-items: center;
+    }
+    body.scanMode main > header {
+      display: none;
+    }
+    body.scanMode #app {
+      width: min(900px, 100%);
+      min-height: min(62vh, 620px);
+      display: grid;
+      place-items: center;
+    }
+    .scanLoader {
+      width: min(720px, 100%);
+      border-top: 1px solid #c9cbc6;
+      border-right: 1px solid #c9cbc6;
+      border-bottom: 1px solid #c9cbc6;
+      border-left: 5px solid var(--echo-ink-primary);
+      border-radius: 2px;
+      background: var(--echo-paper-white);
+      padding: clamp(30px, 6vw, 58px);
+      text-align: left;
+    }
+    .scanEyebrow {
+      margin: 0 0 22px;
+      color: var(--echo-ink-faint);
+      font-family: var(--echo-font-mono);
+      font-size: 14px;
+      font-weight: 700;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+    }
+    .scanLoader h2 {
+      margin: 0;
+      color: var(--echo-ink-text);
+      font-size: clamp(42px, 5vw, 72px);
+      line-height: 1;
+    }
+    .scanProgress {
+      width: min(520px, 100%);
+      height: 6px;
+      margin: 38px 0 0;
+      overflow: hidden;
+      border-radius: 0;
+      background: #e2e3e9;
+    }
+    .scanProgressFill {
+      display: block;
+      height: 100%;
+      min-width: 10px;
+      border-radius: 0;
+      background: var(--echo-ink-primary);
+      /* Matched to the 700ms report poll so the fill glides between updates instead of
+         stepping and then sitting still for the rest of the interval. */
+      transition: width 700ms linear;
+    }
+    .scanCaption {
+      margin: 20px 0 0;
+      color: var(--echo-ink-faint);
+      font-family: var(--echo-font-mono);
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.45;
+    }
+    body.cityMode {
+      background: var(--echo-paper-canvas);
+    }
+    body.cityMode main {
+      width: 100%;
+      padding: 0;
+      margin: 0;
+    }
+    body.cityMode main > header {
+      display: none;
+    }
     body.extractMode main > header {
       display: none;
     }
@@ -127,6 +210,12 @@ export const SETUP_PAGE_STYLES_FOUNDATION = String.raw `    :root {
     body.readyMode {
       background: #f5f3ed;
     }
+    body.cityMode #app {
+      display: block;
+      min-height: 100vh;
+      color: var(--echo-ink-text);
+      text-align: left;
+    }
     body.extractMode #app {
       width: 100%;
       display: grid;

package/dist/setup-page/styles-mvp.js

@@ -1,13 +1,15 @@
 // Final MVP onboarding layer. It deliberately mirrors the public Echo pricing,
-// login, plan, and import surfaces instead of introducing another local-only design system.
+// login, and report surfaces instead of introducing another local-only design system.
 export const SETUP_PAGE_STYLES_MVP = String.raw `
     body.readyMode,
+    body.scanMode,
     body.extractMode {
       background:
         radial-gradient(circle, rgba(26,58,143,0.12) 0 1.2px, transparent 1.5px) 0 0 / 22px 22px,
         var(--echo-paper-canvas);
     }
-    body.readyMode main main,
+    body.readyMode main,
+    body.scanMode main,
     body.extractMode main {
       width: 100%;
       min-height: 100vh;
@@ -17,17 +19,19 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     }
     main > header { display: none; }
     #app.state { color: transparent; }
-    body.readyMode #app #app,
+    body.readyMode #app,
+    body.scanMode #app,
     body.extractMode #app {
       width: 100%;
       min-height: calc(100vh - clamp(56px, 10vw, 128px));
     }
-    body.readyMode #app:has(> .setupJourney) #app:has(> .setupJourney),
+    body.readyMode #app:has(> .setupJourney),
+    body.scanMode #app:has(> .setupJourney),
     body.extractMode #app:has(> .setupJourney) {
       padding-top: 0 !important;
     }
 
-    /* One calm map across access, account/Stripe, import, and first value. */
+    /* One calm map across local scan, account/Stripe, import, and first value. */
     .setupJourney {
       width: min(760px, 100%);
       flex: 0 0 auto;
@@ -36,7 +40,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     }
     .setupJourney ol {
       display: grid;
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+      grid-template-columns: repeat(5, minmax(0, 1fr));
       gap: 0;
       margin: 0;
       padding: 0;
@@ -95,6 +99,11 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       box-shadow: 0 0 0 4px rgba(26,58,143,0.09);
       color: white;
     }
+    body.cityMode .setupJourney {
+      margin-top: 12px;
+      margin-bottom: 8px;
+      padding-inline: 18px;
+    }
     #setupJourneySlot {
       width: 100%;
       flex: 0 0 auto;
@@ -142,6 +151,21 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       text-align: center;
     }
     .mvpConsentTrustLine strong { color: var(--echo-ink-text); }
+    .mvpReportPreview { overflow: hidden; border: 1px solid rgba(26,58,143,0.18); border-radius: 18px; background: rgba(255,255,255,0.84); box-shadow: 0 16px 36px -26px rgba(26,58,143,0.42); }
+    .mvpReportPreview header { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid rgba(26,58,143,0.10); background: color-mix(in srgb, var(--echo-paper-white) 66%, var(--echo-note-blue) 34%); padding: 13px 15px; }
+    .mvpReportPreview header span,
+    .mvpReportPreview header small,
+    .mvpReportPreview header strong,
+    .mvpPreviewRow span,
+    .mvpPreviewRow small,
+    .mvpPreviewRow strong { display: block; }
+    .mvpReportPreview header small { color: var(--echo-ink-primary); font: 800 9px/1 var(--echo-font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
+    .mvpReportPreview header strong { margin-top: 5px; color: var(--echo-ink-text); font-size: 15px; }
+    .mvpPreviewRow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 15px; }
+    .mvpPreviewRow + .mvpPreviewRow { border-top: 1px solid rgba(26,58,143,0.08); }
+    .mvpPreviewRow .setupGlyph { width: 19px; height: 19px; color: #2c8f68; }
+    .mvpPreviewRow strong { color: var(--echo-ink-text); font-size: 13px; }
+    .mvpPreviewRow small { margin-top: 2px; color: var(--echo-ink-mute); font-size: 11px; line-height: 1.35; }
     .mvpTrustCard { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid rgba(44,143,104,0.28); border-radius: 15px; background: color-mix(in srgb, var(--echo-paper-white) 62%, var(--echo-note-mint) 38%); padding: 13px 15px; }
     .mvpTrustIcon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(44,143,104,0.13); color: #257b59; }
     .mvpTrustIcon .setupGlyph { width: 21px; height: 21px; }
@@ -513,6 +537,125 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       font-weight: 750;
     }
 
+    /* Reading --------------------------------------------------------------- */
+    .scanLoading {
+      display: flex !important;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    .scanLoading .mvpReading {
+      margin-block: auto;
+    }
+    .mvpReading {
+      display: flex;
+      width: min(460px, 100%);
+      flex-direction: column;
+      align-items: center;
+      color: var(--echo-ink-text);
+      text-align: center;
+    }
+    .mvpReadingMascot {
+      display: block;
+      width: 150px;
+      height: 150px;
+      margin: 0 auto 18px;
+      object-fit: contain;
+      filter: none;
+    }
+    .mvpReading h2 {
+      margin: 0;
+      color: var(--echo-ink-primary);
+      font: 650 38px/1.05 var(--echo-font-script), cursive;
+    }
+    .mvpReadingCount {
+      min-height: 18px;
+      margin: 13px 0 0;
+      color: var(--echo-ink-mute);
+      font: 650 13px/1.4 var(--echo-font-mono);
+    }
+    .mvpReadingCount[hidden] {
+      display: block;
+      visibility: hidden;
+    }
+    .mvpReadingEta {
+      min-height: 17px;
+      margin: 5px 0 0;
+      color: var(--echo-ink-faint);
+      font: 600 12px/1.4 var(--echo-font-mono);
+      font-variant-numeric: tabular-nums;
+    }
+    .mvpReadingProgress {
+      width: min(260px, 100%);
+      height: 3px;
+      margin: 8px 0 0;
+      background: rgba(26,58,143,0.12);
+    }
+    .discoveryLoader {
+      width: 100%;
+      min-height: min(62vh, 620px);
+      display: grid;
+      place-items: center;
+    }
+    .discoverySpinner span {
+      display: block;
+      width: 26px;
+      height: 26px;
+      border: 3px solid rgba(26,58,143,0.16);
+      border-top-color: var(--echo-ink-primary);
+      border-radius: 50%;
+      animation: localAuthSpin 700ms linear infinite;
+    }
+    .extractionStartStage {
+      display: flex !important;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    .extractionStartStage .discoverySpinner {
+      display: grid;
+      flex: 1 1 auto;
+      place-items: center;
+    }
+    .reportMessageStage {
+      display: flex !important;
+      justify-content: center;
+      color: var(--echo-ink-text);
+    }
+    .reportMessage {
+      width: min(620px, 100%);
+      padding-top: clamp(48px, 10vh, 112px);
+    }
+    .reportMessage h2 {
+      margin: 0;
+      font-size: clamp(42px, 5vw, 58px);
+      font-weight: 650;
+      line-height: 1;
+      letter-spacing: -0.045em;
+    }
+    .reportMessage p {
+      margin: 16px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: 16px;
+      line-height: 1.55;
+    }
+    .reportMessage code {
+      color: var(--echo-ink-primary);
+      font-family: var(--echo-font-mono);
+    }
+    .reportTechnical {
+      width: fit-content;
+      margin-top: 22px;
+      color: var(--echo-ink-faint);
+      font: 650 11px/1.5 var(--echo-font-mono);
+    }
+    .reportTechnical summary {
+      cursor: pointer;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+    .reportTechnical code { display: block; margin-top: 8px; }
+
     /* Pricing copied from the public Echo habitat -------------------------- */
     .planGateStage {
       display: flex !important;
@@ -1432,7 +1575,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       box-shadow: 0 6px 0 color-mix(in srgb, var(--echo-ink-primary) 77%, black);
     }
 
-    /* Extraction ------------------------------------------------------------- */
+    /* Extraction: let the existing animated plate carry the page ----------- */
     .exHero {
       width: min(1180px, 100%);
       min-height: calc(100vh - clamp(56px, 10vw, 128px));
@@ -1442,8 +1585,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       box-shadow: none;
     }
     .exHero.exHeroActive {
-      width: min(720px, 100%);
-      grid-template-columns: minmax(0, 1fr);
+      grid-template-columns: minmax(320px, 0.72fr) minmax(460px, 1.28fr);
       align-items: center;
     }
     .exHeroActive #exText { padding: clamp(20px, 4vw, 44px); }
@@ -1468,6 +1610,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       -webkit-text-fill-color: var(--echo-ink-primary);
       font-weight: 650;
     }
+    .exHeroActive .exPlate { min-height: min(72vh, 720px); }
     .exHeroActive .exMeter {
       margin-top: 28px;
       border: 0;
@@ -1592,9 +1735,11 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       .checkoutCommitment,
       .checkoutActions { grid-template-columns: 1fr; }
       .exHero.exHeroActive { grid-template-columns: 1fr; }
-      }
+      .exHeroActive .exPlate { min-height: 440px; }
+    }
     @media (max-width: 560px) {
       body.readyMode main,
+      body.scanMode main,
       body.extractMode main { padding: 22px 14px 38px; }
       .setupJourney { margin-bottom: 24px; }
       .mvpConsentFooter { align-items: stretch; flex-direction: column; }

package/dist/setup-page/styles-website-alignment.js

@@ -88,6 +88,171 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
       box-shadow: none;
     }
 
+    /* Local scan -------------------------------------------------------------- */
+    body.scanMode {
+      background:
+        radial-gradient(circle, rgba(26,58,143,0.075) 0 1px, transparent 1.35px) 0 0 / 18px 18px,
+        radial-gradient(circle, rgba(78,205,196,0.07) 0 1px, transparent 1.35px) 9px 9px / 22px 22px,
+        var(--echo-paper-canvas);
+    }
+    body.scanMode main {
+      padding: clamp(32px, 6vw, 72px) clamp(18px, 5vw, 58px);
+    }
+    body.scanMode #app {
+      width: min(860px, 100%);
+      min-height: min(72vh, 680px);
+    }
+    .scanLoader {
+      position: relative;
+      overflow: visible;
+      width: min(760px, 100%);
+      border: 1.5px solid rgba(26,58,143,0.20);
+      border-radius: var(--echo-radius-panel);
+      background: rgba(255,255,255,0.92);
+      padding: clamp(26px, 5vw, 48px);
+      box-shadow: var(--echo-shadow-pop);
+    }
+    .scanLoader::before {
+      content: "";
+      position: absolute;
+      top: -11px;
+      left: 50%;
+      z-index: 2;
+      width: 88px;
+      height: 25px;
+      border: 1px solid rgba(43,42,38,0.07);
+      background: color-mix(in srgb, var(--echo-note-cream) 72%, white 28%);
+      box-shadow: 0 1px 2px rgba(43,42,38,0.07);
+      opacity: 0.82;
+      transform: translateX(-50%) rotate(-1deg);
+    }
+    .scanLoaderLead {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: center;
+      gap: clamp(20px, 4vw, 34px);
+    }
+    .scanMascot {
+      display: grid;
+      place-items: center;
+      width: clamp(108px, 14vw, 132px);
+      aspect-ratio: 1;
+      flex: 0 0 auto;
+      border: 1px solid rgba(26,58,143,0.11);
+      border-radius: 20px;
+      background: color-mix(in srgb, var(--echo-paper-white) 64%, var(--echo-note-cream) 36%);
+      box-shadow: var(--echo-shadow-paper);
+      overflow: hidden;
+      transform: rotate(-1.5deg);
+    }
+    .scanMascotFrames {
+      position: relative;
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .scanMascotFrame {
+      position: absolute;
+      inset: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      opacity: 0;
+      filter: drop-shadow(0 12px 14px rgba(26,58,143,0.16));
+      animation: scanMascotFrame 4.2s linear infinite;
+    }
+    /* Keep the ready pose mounted underneath every animated frame. This prevents
+       a transparent flash at loop boundaries or while a later PNG is decoding. */
+    .scanMascotFrame:nth-child(1) {
+      opacity: 1;
+      animation: none;
+    }
+    .scanMascotFrame:nth-child(2) { animation-delay: 0.6s; }
+    .scanMascotFrame:nth-child(3) { animation-delay: 1.2s; }
+    .scanMascotFrame:nth-child(4) { animation-delay: 1.8s; }
+    .scanMascotFrame:nth-child(5) { animation-delay: 2.4s; }
+    .scanMascotFrame:nth-child(6) { animation-delay: 3s; }
+    .scanMascotFrame:nth-child(7) { animation-delay: 3.6s; }
+    @keyframes scanMascotFrame {
+      0%, 14.4% { opacity: 1; }
+      14.5%, 100% { opacity: 0; }
+    }
+    .scanLoaderCopy { min-width: 0; }
+    .scanEyebrow {
+      width: fit-content;
+      margin: 0 0 15px;
+      border: 1px solid rgba(26,58,143,0.13);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.72);
+      padding: 6px 11px;
+      box-shadow: var(--echo-shadow-glass);
+      color: color-mix(in srgb, var(--echo-ink-primary) 70%, var(--echo-ink-accent) 30%);
+      font-size: 11px;
+      letter-spacing: 0.11em;
+    }
+    .scanLoader h2.siteHeadline {
+      max-width: 560px;
+      font-size: clamp(40px, 6vw, 64px);
+      line-height: 0.98;
+    }
+    .scanIntro {
+      max-width: 520px;
+      margin: 18px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 1.55;
+    }
+    .scanProgressCard {
+      margin-top: clamp(26px, 5vw, 38px);
+      border: 1px solid rgba(26,58,143,0.10);
+      border-radius: var(--echo-radius-card);
+      background: color-mix(in srgb, var(--echo-paper-white) 68%, var(--echo-note-blue) 32%);
+      padding: 17px 18px 15px;
+      box-shadow: var(--echo-shadow-paper);
+    }
+    .scanProgress {
+      width: 100%;
+      height: 10px;
+      margin: 0;
+      border-radius: 999px;
+      background: rgba(255,255,255,0.78);
+      box-shadow: inset 0 1px 3px rgba(20,24,34,0.10);
+    }
+    .scanProgressFill {
+      min-width: 10px;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--echo-ink-primary), color-mix(in srgb, var(--echo-ink-primary) 72%, var(--echo-ink-accent) 28%));
+      box-shadow: 0 0 0 1px rgba(26,58,143,0.08), 0 3px 9px rgba(26,58,143,0.20);
+    }
+    .scanCaption {
+      margin: 12px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 1.5;
+    }
+    .scanPrivacy {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 15px 2px 0;
+      color: var(--echo-ink-faint);
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 1.45;
+    }
+    .scanPrivacy > span {
+      width: 8px;
+      height: 8px;
+      flex: 0 0 auto;
+      border-radius: 50%;
+      background: var(--echo-ink-accent-deep);
+      box-shadow: 0 0 0 4px rgba(78,205,196,0.13);
+    }
+
     /* Permission and skip states ------------------------------------------------ */
     .localConsent {
       overflow: visible;
@@ -789,6 +954,38 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
       .skipStage {
         border-radius: 18px;
       }
+      body.scanMode main {
+        padding: 34px 14px 52px;
+      }
+      body.scanMode #app {
+        min-height: calc(100vh - 86px);
+      }
+      .scanLoader {
+        border-radius: 18px;
+        padding: 28px 20px 22px;
+      }
+      .scanLoaderLead {
+        grid-template-columns: 1fr;
+        gap: 18px;
+      }
+      .scanMascot {
+        width: 88px;
+        border-radius: 16px;
+      }
+      .scanLoader h2.siteHeadline {
+        font-size: clamp(38px, 12vw, 52px);
+      }
+      .scanIntro {
+        margin-top: 14px;
+        font-size: 14px;
+      }
+      .scanProgressCard {
+        margin-top: 24px;
+        padding: 15px 14px 13px;
+      }
+      .scanPrivacy {
+        align-items: flex-start;
+      }
       .consentLead,
       .skippedEcho {
         border-radius: 16px 16px 0 0;
@@ -847,5 +1044,12 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
         transition: none;
         transform: none;
       }
+      .scanMascotFrame {
+        animation: none;
+        opacity: 0;
+      }
+      .scanMascotFrame:first-child {
+        opacity: 1;
+      }
     }
 `;

package/dist/setup-page/styles.js

@@ -1,11 +1,15 @@
 import { SETUP_PAGE_STYLES_FOUNDATION } from "./styles-foundation.js";
+import { SETUP_PAGE_STYLES_CITY_REPORT } from "./styles-city-report.js";
 import { SETUP_PAGE_STYLES_EXTRACTION } from "./styles-extraction.js";
+import { SETUP_PAGE_STYLES_CONTEXT_AUDIT } from "./styles-context-audit.js";
 import { SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT } from "./styles-website-alignment.js";
 import { SETUP_PAGE_STYLES_MVP } from "./styles-mvp.js";
 // Kept as one emitted style tag so the local HTML page remains self-contained.
 export const SETUP_PAGE_STYLES = [
     SETUP_PAGE_STYLES_FOUNDATION,
+    SETUP_PAGE_STYLES_CITY_REPORT,
     SETUP_PAGE_STYLES_EXTRACTION,
+    SETUP_PAGE_STYLES_CONTEXT_AUDIT,
     SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT,
     SETUP_PAGE_STYLES_MVP,
 ].join("\n");

package/dist/setup-page.js

@@ -1,17 +1,17 @@
 import { renderSetupPageDocument } from "./setup-page/document.js";
 import { renderSetupPreviewBootstrap } from "./setup-preview.js";
-export { SETUP_PREVIEW_STATES } from "./setup-preview.js";
+export { SETUP_PREVIEW_REPORT, SETUP_PREVIEW_STATES } from "./setup-preview.js";
 /**
  * Setup page entry point. The implementation is split by product phase under ./setup-page/:
- * core utilities, post-auth extraction, and lifecycle polling.
+ * core utilities, local report, post-auth extraction, and lifecycle polling.
  */
 export function renderSetupPage(options = {}) {
     const previewState = options.previewState ?? null;
     const startupScript = previewState
         ? renderSetupPreviewBootstrap(previewState)
         : `
-        init().catch(function (error) {
-          renderDiscoveryCheckIssue(error && error.message ? error.message : "The local setup page could not start.");
+        init().catch(function () {
+          renderReportIssue("SETUP_INITIALIZATION_FAILED", "The local setup page could not start. Close this tab and run echomem-mcp init again.");
         });`;
     return renderSetupPageDocument({ previewState, startupScript });
 }