@viberaven/cli 1.1.9 → 1.1.10

package/dist/cli.js

@@ -51,6 +51,10 @@ function renderLocalUiHtml() {
       --line-strong: #d0d5dd;
       --orange: #ff7a00;
       --orange-soft: #fff2e5;
+      --purple: #7c3aed;
+      --purple-soft: #f3edff;
+      --purple-line: #ddd0ff;
+      --mint-panel: #f6fffb;
       --green: #24b26b;
       --green-soft: #e9f8f1;
       --red: #e11d1d;
@@ -58,7 +62,8 @@ function renderLocalUiHtml() {
       --black-button: #071018;
       --radius: 8px;
       color-scheme: light;
-      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
+      font-family: "Geist", "Satoshi", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
     * { box-sizing: border-box; }
     html, body { min-height: 100%; }
@@ -66,8 +71,11 @@ function renderLocalUiHtml() {
       margin: 0;
       background: var(--canvas);
       color: var(--ink);
-      min-height: 100dvh;
+      height: 100dvh;
       letter-spacing: 0;
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      overflow: hidden;
     }
     button, input, textarea {
       font: inherit;
@@ -92,57 +100,54 @@ function renderLocalUiHtml() {
     }
     button.primary:hover { background: #111a22; }
     .topbar {
-      height: 58px;
+      height: 68px;
       border-bottom: 1px solid var(--line);
       background: rgba(251, 251, 250, 0.96);
       display: grid;
-      grid-template-columns: minmax(260px, 1fr) minmax(220px, 300px) auto;
+      grid-template-columns: minmax(340px, 1fr) minmax(240px, 310px) auto;
       gap: 18px;
       align-items: center;
-      padding: 0 20px;
+      padding: 0 26px;
       position: sticky;
       top: 0;
+      z-index: 2;
+      box-shadow: 0 1px 0 rgba(17, 20, 23, 0.02);
     }
     .brand-lockup {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 14px;
       min-width: 0;
     }
     .brand-lockup strong {
-      font-size: 20px;
+      font-size: 28px;
       line-height: 1;
       white-space: nowrap;
     }
     .raven-mark {
-      width: 36px;
-      height: 30px;
-      display: inline-block;
-      border-radius: 65% 35% 50% 45%;
-      background: var(--black-button);
-      position: relative;
-      transform: skewX(-18deg) rotate(-8deg);
+      width: 58px;
+      height: 46px;
+      display: inline-grid;
+      place-items: center;
+      flex: 0 0 auto;
+      overflow: visible;
     }
-    .raven-mark::after {
-      content: "";
-      position: absolute;
-      right: -7px;
-      bottom: 4px;
-      width: 18px;
-      height: 5px;
-      border-radius: 999px;
-      background: var(--orange);
-      transform: rotate(-28deg);
+    .raven-mark img {
+      width: 54px;
+      height: 54px;
+      object-fit: contain;
+      display: block;
+      transform: translateY(1px);
     }
     .tagline {
-      border: 1px solid var(--line);
-      border-radius: 7px;
-      padding: 8px 12px;
-      color: var(--ink);
-      font-size: 13px;
-      font-weight: 650;
+      border: 1px solid #eef0f4;
+      border-radius: 10px;
+      padding: 9px 18px;
+      color: var(--muted-strong);
+      font-size: 14px;
+      font-weight: 600;
       white-space: nowrap;
-      background: var(--surface);
+      background: #f4f6f8;
     }
     .project-picker {
       display: flex;
@@ -156,16 +161,23 @@ function renderLocalUiHtml() {
       background: var(--surface);
       color: var(--ink);
       border-radius: var(--radius);
-      padding: 9px 12px;
+      padding: 9px 14px;
+      cursor: pointer;
+    }
+    .project-picker:hover {
+      border-color: #cdd5df;
+      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
     }
     .project-picker::before {
       content: "";
-      width: 15px;
-      height: 12px;
+      width: 18px;
+      height: 13px;
       border: 1.6px solid currentColor;
-      border-radius: 2px;
+      border-radius: 3px;
       display: inline-block;
-      box-shadow: inset 0 4px 0 rgba(17, 20, 23, 0.06);
+      clip-path: polygon(0 28%, 36% 28%, 43% 8%, 100% 8%, 100% 100%, 0 100%);
+      background: linear-gradient(180deg, rgba(17, 20, 23, 0.03), rgba(17, 20, 23, 0.08));
+      flex: 0 0 auto;
     }
     .project-picker::after {
       content: "";
@@ -186,14 +198,35 @@ function renderLocalUiHtml() {
     .top-actions {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 12px;
       justify-content: flex-end;
     }
+    .top-divider {
+      width: 1px;
+      height: 30px;
+      background: var(--line);
+      margin: 0 4px 0 6px;
+      flex: 0 0 auto;
+    }
     .status-button {
       display: inline-flex;
       align-items: center;
       gap: 9px;
       white-space: nowrap;
+      min-height: 44px;
+      padding-inline: 16px;
+    }
+    .live-status {
+      min-height: 44px;
+      display: inline-flex;
+      align-items: center;
+      gap: 9px;
+      white-space: nowrap;
+      border: 1px solid var(--line);
+      background: var(--surface);
+      border-radius: var(--radius);
+      padding: 9px 16px;
+      color: var(--ink);
     }
     .dot {
       width: 8px;
@@ -206,53 +239,96 @@ function renderLocalUiHtml() {
     .dot.warn { background: var(--orange); }
     .dot.bad { background: var(--red); }
     .icon-button {
-      width: 38px;
-      height: 38px;
+      width: 44px;
+      height: 44px;
       padding: 0;
       display: grid;
       place-items: center;
-      color: var(--muted-strong);
+      color: #344054;
+      border: 1px solid var(--line);
+      background: var(--surface);
+      border-radius: 999px;
     }
+    .icon-button:hover { background: var(--surface-soft); }
     .icon-button::before {
-      content: "";
-      width: 17px;
-      height: 17px;
-      border: 2px solid currentColor;
-      border-radius: 999px;
-      box-shadow: 0 -8px 0 -6px currentColor, 0 8px 0 -6px currentColor, -8px 0 0 -6px currentColor, 8px 0 0 -6px currentColor;
+      content: none;
+    }
+    .icon-button svg {
+      width: 22px;
+      height: 22px;
+      display: block;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.9;
+      stroke-linecap: round;
+      stroke-linejoin: round;
     }
     .verify-button {
-      min-width: 132px;
+      min-width: 128px;
+      height: 44px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
       font-size: 15px;
+      border-radius: 9px;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 18px rgba(7, 16, 24, 0.12);
+    }
+    .verify-button svg {
+      width: 19px;
+      height: 19px;
+      display: block;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.8;
+      stroke-linecap: round;
+      stroke-linejoin: round;
     }
     .shell {
       display: grid;
-      grid-template-columns: 296px minmax(560px, 1fr) 360px;
-      min-height: calc(100dvh - 96px);
+      grid-template-columns: 360px minmax(600px, 1fr) 520px;
+      min-height: 0;
+      height: 100%;
+      overflow: hidden;
     }
     .rail {
       border-right: 1px solid var(--line);
-      padding: 18px 18px 26px;
+      padding: 36px 28px 28px;
       background: var(--canvas);
       overflow: auto;
+      min-height: 0;
     }
     .rail-title {
-      margin: 0 0 10px;
-      color: var(--muted-strong);
-      font-size: 12px;
-      font-weight: 700;
-      text-transform: uppercase;
+      margin: 0 0 16px;
+      color: var(--ink);
+      font-size: 16px;
+      font-weight: 750;
+      text-transform: none;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .rail-title::before {
+      content: "";
+      width: 17px;
+      height: 15px;
+      display: inline-block;
+      background:
+        linear-gradient(var(--muted) 0 0) 8px 2px / 9px 1.5px no-repeat,
+        linear-gradient(var(--muted) 0 0) 8px 7px / 9px 1.5px no-repeat,
+        linear-gradient(var(--muted) 0 0) 8px 12px / 9px 1.5px no-repeat,
+        radial-gradient(circle, var(--muted) 1.7px, transparent 2px) 0 0 / 7px 5px repeat-y;
     }
     .search-box {
-      height: 38px;
+      height: 44px;
       border: 1px solid var(--line);
       background: var(--surface);
-      border-radius: var(--radius);
+      border-radius: 9px;
       display: flex;
       align-items: center;
       gap: 9px;
       padding: 0 10px;
-      margin-bottom: 12px;
+      margin-bottom: 18px;
     }
     .search-box:focus-within {
       border-color: var(--orange);
@@ -288,52 +364,47 @@ function renderLocalUiHtml() {
     }
     .provider-list {
       display: grid;
-      gap: 8px;
+      gap: 10px;
     }
     .provider-button {
       width: 100%;
-      min-height: 58px;
+      min-height: 64px;
       display: grid;
-      grid-template-columns: 34px minmax(0, 1fr) 8px 12px;
-      gap: 10px;
+      grid-template-columns: 42px minmax(0, 1fr) 8px;
+      gap: 14px;
       align-items: center;
       text-align: left;
-      padding: 10px 10px;
+      padding: 11px 14px;
       background: var(--surface);
       border-color: var(--line);
+      border-radius: 10px;
+      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02);
     }
     .provider-button.is-selected {
       border-color: var(--orange);
-      box-shadow: inset 0 0 0 1px rgba(255, 122, 0, 0.08);
-    }
-    .provider-button::after {
-      content: "";
-      width: 7px;
-      height: 7px;
-      border-right: 1.5px solid var(--muted-strong);
-      border-bottom: 1.5px solid var(--muted-strong);
-      transform: rotate(-45deg);
+      background: #fffaf5;
+      box-shadow: 0 8px 22px rgba(255, 122, 0, 0.08);
     }
     .provider-icon {
-      width: 32px;
-      height: 32px;
+      width: 42px;
+      height: 42px;
       display: grid;
       place-items: center;
       border: 1px solid var(--line);
-      border-radius: 7px;
+      border-radius: 9px;
       background: var(--surface);
       color: var(--ink);
       overflow: hidden;
     }
     .provider-icon svg, .provider-icon img {
-      width: 22px;
-      height: 22px;
+      width: 30px;
+      height: 30px;
       display: block;
     }
     .provider-name { min-width: 0; }
     .provider-name strong {
       display: block;
-      font-size: 13px;
+      font-size: 14px;
       line-height: 1.2;
       white-space: nowrap;
       overflow: hidden;
@@ -341,7 +412,7 @@ function renderLocalUiHtml() {
     }
     .state {
       display: inline-flex;
-      margin-top: 5px;
+      margin-top: 6px;
       font-size: 12px;
       line-height: 1;
       color: var(--muted);
@@ -360,11 +431,12 @@ function renderLocalUiHtml() {
     .provider-dot[data-state="repo_evidence_found"], .provider-dot[data-state="live_verified"] { background: var(--green); }
     .provider-dot[data-state="blocked"], .provider-dot[data-state="error"] { background: var(--red); }
     .run-local-card {
-      margin-top: 14px;
+      margin-top: 20px;
       border: 1px solid var(--line);
-      border-radius: var(--radius);
+      border-radius: 10px;
       background: var(--surface);
-      padding: 14px;
+      padding: 18px;
+      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02);
     }
     .run-local-card h2 {
       margin: 0 0 6px;
@@ -385,7 +457,7 @@ function renderLocalUiHtml() {
       color: #ffffff;
       border-radius: 7px;
       padding: 11px 12px;
-      font: 13px/1.2 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+      font: 13px/1.2 var(--mono);
       overflow: hidden;
     }
     .command-pill span {
@@ -394,39 +466,40 @@ function renderLocalUiHtml() {
       white-space: nowrap;
     }
     .main {
-      padding: 26px 28px 34px;
+      padding: 42px 48px 40px;
       overflow: auto;
       background: var(--canvas);
+      min-height: 0;
     }
     .provider-header {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-columns: minmax(0, 1fr);
       gap: 18px;
       align-items: center;
-      margin-bottom: 18px;
+      margin-bottom: 26px;
     }
     .provider-heading {
       display: flex;
-      gap: 16px;
+      gap: 20px;
       align-items: center;
       min-width: 0;
     }
     .provider-heading .provider-icon {
-      width: 44px;
-      height: 44px;
+      width: 58px;
+      height: 58px;
       border: 0;
       background: transparent;
     }
     .provider-heading h1 {
       margin: 0;
-      font-size: 22px;
+      font-size: 34px;
       line-height: 1.15;
-      font-weight: 750;
+      font-weight: 780;
     }
     .provider-heading p {
-      margin: 5px 0 0;
+      margin: 8px 0 0;
       color: var(--muted-strong);
-      font-size: 13px;
+      font-size: 16px;
       line-height: 1.35;
     }
     .secondary-action {
@@ -441,178 +514,346 @@ function renderLocalUiHtml() {
     }
     .path-list {
       display: grid;
-      gap: 0;
+      gap: 14px;
       position: relative;
-      padding-left: 34px;
+      padding-left: 72px;
     }
     .path-list::before {
       content: "";
       position: absolute;
-      left: 14px;
-      top: 26px;
-      bottom: 26px;
+      left: 27px;
+      top: -16px;
+      bottom: 30px;
       width: 1px;
-      background: var(--line-strong);
+      background: repeating-linear-gradient(to bottom, #f5b16b 0 9px, transparent 9px 18px);
     }
     .path-row {
+      width: 100%;
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 12px;
       background: var(--surface);
-      padding: 13px 16px;
+      padding: 22px 24px;
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      gap: 14px;
+      grid-template-columns: 48px minmax(0, 1fr) auto 18px;
+      gap: 18px;
+      align-items: center;
+      text-align: left;
       position: relative;
-      margin-bottom: 10px;
+      margin-bottom: 0;
+      min-height: 90px;
+      box-shadow: 0 12px 28px rgba(16, 24, 40, 0.035);
     }
     .path-row::before {
-      content: "";
+      content: attr(data-step);
       position: absolute;
-      left: -31px;
-      top: 18px;
-      width: 22px;
-      height: 22px;
+      left: -72px;
+      top: 22px;
+      width: 40px;
+      height: 40px;
       border: 1px solid var(--line-strong);
       border-radius: 999px;
       background: var(--surface);
-    }
-    .path-row::after {
-      content: "";
-      position: absolute;
-      left: -23px;
-      top: 26px;
-      width: 6px;
-      height: 6px;
-      border-radius: 999px;
-      background: var(--muted);
+      display: grid;
+      place-items: center;
+      color: #344054;
+      font-size: 15px;
+      font-weight: 800;
     }
     .path-row.is-focused {
-      border-color: var(--line-strong);
-      box-shadow: 0 10px 22px rgba(17, 20, 23, 0.04);
+      border-color: #ffb36b;
+      box-shadow: 0 14px 30px rgba(255, 122, 0, 0.09);
     }
     .path-row.is-focused::before {
       border-color: var(--orange);
       background: var(--orange-soft);
+      color: var(--orange);
+    }
+    .path-icon {
+      width: 44px;
+      height: 44px;
+      border-radius: 10px;
+      background: var(--surface-soft);
+      color: #344054;
+      display: grid;
+      place-items: center;
+    }
+    .path-row.is-focused .path-icon {
+      color: var(--orange);
+      background: var(--orange-soft);
+    }
+    .path-icon svg {
+      width: 23px;
+      height: 23px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
     }
-    .path-row.is-focused::after { background: var(--orange); }
     .path-row strong {
-      font-size: 14px;
+      font-size: 15px;
       line-height: 1.25;
     }
     .path-row p {
-      margin: 5px 0 0;
+      margin: 6px 0 0;
       color: var(--muted-strong);
-      font-size: 13px;
+      font-size: 14px;
       line-height: 1.4;
     }
     .path-state {
-      align-self: start;
-      border: 1px solid currentColor;
+      align-self: center;
+      border: 0;
       border-radius: 999px;
-      padding: 5px 10px;
+      padding: 7px 13px;
       font-size: 12px;
       line-height: 1;
       color: var(--muted);
       white-space: nowrap;
-      background: var(--surface);
+      background: var(--surface-soft);
+    }
+    .path-arrow {
+      color: var(--muted);
+      display: grid;
+      place-items: center;
+    }
+    .path-arrow svg {
+      width: 18px;
+      height: 18px;
+      stroke: currentColor;
+      stroke-width: 2;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
     }
     .path-state[data-state="ready"] { background: var(--green-soft); }
     .path-state[data-state="needs_fix"], .path-state[data-state="needs_connect"] { background: var(--orange-soft); }
     .path-state[data-state="blocked"] { background: var(--red-soft); }
     .next-fix {
-      margin: 8px 0 0 34px;
+      margin: 36px 0 0 0;
       border: 1px solid var(--line);
-      border-radius: var(--radius);
+      border-radius: 14px;
       background: var(--surface);
-      padding: 16px;
+      padding: 28px;
+      box-shadow: 0 12px 30px rgba(16, 24, 40, 0.035);
     }
     .next-fix h2 {
-      margin: 0 0 14px;
-      font-size: 14px;
+      margin: 0 0 4px;
+      font-size: 18px;
       line-height: 1.2;
+      display: flex;
+      align-items: center;
+      gap: 12px;
     }
-    .fix-grid {
-      display: grid;
-      gap: 0;
+    .next-fix h2::before {
+      content: "";
+      width: 18px;
+      height: 18px;
+      display: inline-block;
+      background: var(--purple);
+      clip-path: polygon(45% 0, 82% 0, 62% 38%, 94% 38%, 32% 100%, 45% 56%, 10% 56%);
     }
-    .fix-section {
-      display: grid;
-      grid-template-columns: 34px minmax(0, 1fr);
-      gap: 12px;
-      padding: 13px 0;
-      border-top: 1px solid var(--line);
+    .next-fix-subtitle {
+      margin: 0 0 22px;
+      color: var(--muted-strong);
+      font-size: 14px;
     }
-    .fix-section:first-child { border-top: 0; padding-top: 0; }
-    .fix-section:last-child { padding-bottom: 0; }
-    .fix-symbol {
-      width: 26px;
-      height: 26px;
-      border-radius: 999px;
-      border: 1px solid var(--line);
+    .next-action-row {
+      display: grid;
+      grid-template-columns: 44px minmax(0, 1fr) auto;
+      gap: 16px;
+      align-items: center;
+      border: 1px solid var(--purple-line);
+      border-radius: 10px;
+      padding: 18px;
+      background: linear-gradient(100deg, #fbf8ff 0%, #ffffff 58%, #f9f7ff 100%);
+    }
+    .next-action-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 9px;
       display: grid;
       place-items: center;
-      color: var(--muted-strong);
-      background: var(--surface-soft);
-      font-size: 12px;
-      font-weight: 800;
+      color: var(--purple);
+      background: var(--purple-soft);
     }
-    .fix-section h3 {
+    .next-action-icon svg {
+      width: 22px;
+      height: 22px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    .next-action-row h3 {
       margin: 0 0 6px;
-      font-size: 13px;
+      font-size: 14px;
       line-height: 1.2;
     }
-    .fix-section p {
+    .next-action-row p {
       margin: 0;
       color: var(--muted-strong);
       font-size: 13px;
       line-height: 1.45;
     }
+    .open-guide-button {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      border: 0;
+      background: var(--purple);
+      color: #ffffff;
+      border-radius: 8px;
+      padding: 10px 14px;
+      font-size: 13px;
+      font-weight: 750;
+      white-space: nowrap;
+    }
+    .open-guide-button:hover {
+      background: #6d28d9;
+      color: #ffffff;
+    }
     .drawer {
       border-left: 1px solid var(--line);
-      padding: 24px 18px;
-      background: var(--surface);
+      padding: 30px 38px 28px 30px;
+      background: var(--canvas);
       overflow: auto;
+      min-height: 0;
+      display: grid;
+      align-content: start;
+      gap: 24px;
+    }
+    .prompt-panel, .quick-panel {
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      background: var(--surface);
+      padding: 20px 24px;
+      box-shadow: 0 12px 30px rgba(16, 24, 40, 0.04);
+    }
+    .panel-heading {
+      display: flex;
+      align-items: start;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+    .panel-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .panel-glyph {
+      color: #344054;
+      display: grid;
+      place-items: center;
+      width: 26px;
+      height: 26px;
+    }
+    .panel-glyph svg {
+      width: 24px;
+      height: 24px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.9;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    .copy-small {
+      min-height: 36px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      border-radius: 9px;
+      padding: 8px 12px;
+      color: var(--muted-strong);
+      font-weight: 650;
     }
     .drawer h2 {
       margin: 0;
-      font-size: 17px;
+      font-size: 18px;
       line-height: 1.2;
     }
     .drawer p {
-      margin: 8px 0 16px;
+      margin: 8px 0 0;
       color: var(--muted-strong);
-      font-size: 13px;
+      font-size: 14px;
       line-height: 1.4;
     }
     .prompt-box {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+      width: 1px;
+      height: 1px;
+    }
+    .prompt-card {
       width: 100%;
-      min-height: 330px;
-      resize: vertical;
       border: 1px solid var(--line);
-      border-radius: var(--radius);
-      padding: 14px;
-      background: var(--surface);
-      color: var(--muted-strong);
-      font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+      border-radius: 10px;
+      padding: 22px;
+      background: linear-gradient(135deg, var(--mint-panel), #ffffff 74%);
+      color: #1f2937;
+      font: 13px/1.55 var(--mono);
+      min-height: 220px;
+      white-space: pre-wrap;
+    }
+    .prompt-line {
+      display: grid;
+      grid-template-columns: 20px minmax(0, 1fr);
+      gap: 10px;
+      margin: 7px 0;
+    }
+    .prompt-check {
+      color: var(--green);
+      display: grid;
+      place-items: start center;
+      padding-top: 3px;
+    }
+    .prompt-check svg {
+      width: 14px;
+      height: 14px;
     }
     .drawer-actions {
       display: grid;
-      gap: 9px;
-      margin-top: 12px;
+      gap: 10px;
+      margin-top: 18px;
     }
     .drawer-actions button {
       min-height: 42px;
       font-weight: 650;
+      position: relative;
+      display: grid;
+      grid-template-columns: 24px minmax(0, 1fr) 14px;
+      gap: 10px;
+      align-items: center;
+      text-align: left;
+      border-radius: 9px;
+      padding: 10px 12px;
     }
-    .tip {
-      margin-top: 16px;
-      border: 1px solid var(--line);
-      border-radius: var(--radius);
-      padding: 12px;
+    .drawer-actions button::after {
+      content: "";
+      width: 8px;
+      height: 8px;
+      justify-self: end;
+      border-right: 1.5px solid var(--muted);
+      border-bottom: 1.5px solid var(--muted);
+      transform: rotate(-45deg);
+    }
+    .action-icon {
+      width: 24px;
+      height: 24px;
       color: var(--muted-strong);
-      font-size: 13px;
-      line-height: 1.4;
-      background: var(--surface);
+      display: grid;
+      place-items: center;
+    }
+    .action-icon svg {
+      width: 19px;
+      height: 19px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.8;
+      stroke-linecap: round;
+      stroke-linejoin: round;
     }
     .empty {
       color: var(--muted);
@@ -623,6 +864,16 @@ function renderLocalUiHtml() {
       font-size: 13px;
       line-height: 1.45;
     }
+    .tip {
+      margin-top: 14px;
+      border: 1px solid var(--line);
+      border-radius: 9px;
+      padding: 12px;
+      color: var(--muted-strong);
+      background: var(--surface-soft);
+      font-size: 13px;
+      line-height: 1.4;
+    }
     .status-footer {
       min-height: 38px;
       border-top: 1px solid var(--line);
@@ -647,7 +898,7 @@ function renderLocalUiHtml() {
       padding: 7px 12px;
       background: var(--surface);
       color: var(--ink);
-      font: 13px/1 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+      font: 13px/1 var(--mono);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -662,6 +913,207 @@ function renderLocalUiHtml() {
       white-space: nowrap;
     }
     .gate-status[data-status="clear"] { color: var(--green); }
+    .action-panel-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 9;
+      background: rgba(17, 20, 23, 0.28);
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      align-items: stretch;
+      justify-content: flex-end;
+      transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 180ms ease;
+    }
+    .action-panel-backdrop.is-open {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+    .action-panel {
+      width: min(620px, 100%);
+      height: 100%;
+      background: var(--canvas);
+      border-left: 1px solid var(--line);
+      box-shadow: -24px 0 60px rgba(16, 24, 40, 0.16);
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      transform: translateX(28px);
+      opacity: 0.98;
+      transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
+    }
+    .action-panel-backdrop.is-open .action-panel {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    .action-panel-header {
+      padding: 24px 28px;
+      border-bottom: 1px solid var(--line);
+      background: var(--surface);
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 16px;
+      align-items: start;
+    }
+    .action-panel-header h2 {
+      margin: 0;
+      font-size: 23px;
+      line-height: 1.15;
+    }
+    .action-panel-header p {
+      margin: 8px 0 0;
+      color: var(--muted-strong);
+      line-height: 1.45;
+    }
+    .panel-close {
+      width: 38px;
+      height: 38px;
+      border-radius: 999px;
+      display: grid;
+      place-items: center;
+      padding: 0;
+    }
+    .panel-close::before,
+    .panel-close::after {
+      content: "";
+      width: 15px;
+      height: 1.8px;
+      background: currentColor;
+      grid-area: 1 / 1;
+      border-radius: 999px;
+    }
+    .panel-close::before { transform: rotate(45deg); }
+    .panel-close::after { transform: rotate(-45deg); }
+    .action-panel-body {
+      overflow: auto;
+      padding: 24px 28px 30px;
+      display: grid;
+      gap: 14px;
+      align-content: start;
+    }
+    .guide-card {
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      background: var(--surface);
+      padding: 18px;
+      box-shadow: 0 10px 22px rgba(16, 24, 40, 0.035);
+      animation: panelCardIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation-delay: calc(var(--panel-index, 0) * 38ms);
+    }
+    .guide-card h3 {
+      margin: 0 0 8px;
+      font-size: 15px;
+    }
+    .guide-card p {
+      margin: 0;
+      color: var(--muted-strong);
+      line-height: 1.5;
+    }
+    .guide-card code {
+      display: inline-flex;
+      max-width: 100%;
+      margin-top: 10px;
+      border: 1px solid var(--line);
+      border-radius: 7px;
+      padding: 8px 10px;
+      background: var(--surface-soft);
+      color: var(--ink);
+      font: 12px/1.35 var(--mono);
+      white-space: pre-wrap;
+    }
+    .guide-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 14px;
+    }
+    .guide-actions button {
+      min-height: 38px;
+      font-weight: 700;
+    }
+    .guide-actions .primary-action {
+      border-color: var(--black-button);
+      background: var(--black-button);
+      color: #ffffff;
+    }
+    .guide-actions .primary-action:hover {
+      background: #111a22;
+      color: #ffffff;
+    }
+    .guide-actions .verify-action {
+      border-color: var(--purple);
+      background: var(--purple);
+      color: #ffffff;
+    }
+    .guide-actions .verify-action:hover {
+      background: #6d28d9;
+      color: #ffffff;
+    }
+    .task-card {
+      display: grid;
+      grid-template-columns: 34px minmax(0, 1fr);
+      gap: 14px;
+    }
+    .task-number {
+      width: 34px;
+      height: 34px;
+      border-radius: 999px;
+      display: grid;
+      place-items: center;
+      color: var(--orange);
+      background: var(--orange-soft);
+      font-weight: 800;
+      font-size: 13px;
+    }
+    .provider-pill-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 12px;
+    }
+    .provider-pill {
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      background: var(--surface-soft);
+      padding: 7px 10px;
+      color: var(--muted-strong);
+      font-size: 12px;
+      font-weight: 700;
+    }
+    .report-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .report-metric {
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      background: var(--surface);
+      padding: 14px;
+    }
+    .report-metric span {
+      display: block;
+      color: var(--muted);
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+    .report-metric strong {
+      font-size: 18px;
+    }
+    .panel-pre {
+      margin: 0;
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      background: #fff;
+      padding: 16px;
+      color: #1f2937;
+      white-space: pre-wrap;
+      font: 13px/1.55 var(--mono);
+    }
+    @keyframes panelCardIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
     @media (max-width: 1240px) {
       .topbar { grid-template-columns: minmax(220px, 1fr) auto; }
       .project-picker { display: none; }
@@ -669,6 +1121,12 @@ function renderLocalUiHtml() {
       .drawer { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
     }
     @media (max-width: 820px) {
+      body {
+        height: auto;
+        min-height: 100dvh;
+        overflow: auto;
+        display: block;
+      }
       .topbar {
         height: auto;
         min-height: 58px;
@@ -680,9 +1138,10 @@ function renderLocalUiHtml() {
       .top-actions {
         width: 100%;
         display: grid;
-        grid-template-columns: 1fr 38px 1fr;
+        grid-template-columns: minmax(118px, 1fr) auto 42px minmax(118px, 1fr);
       }
-      .shell { grid-template-columns: 1fr; min-height: auto; }
+      .verify-button { min-width: 118px; }
+      .shell { grid-template-columns: 1fr; min-height: auto; height: auto; overflow: visible; }
       .rail { border-right: 0; border-bottom: 1px solid var(--line); max-height: 330px; }
       .main { padding: 20px 14px 28px; }
       .provider-header { grid-template-columns: 1fr; }
@@ -696,15 +1155,29 @@ function renderLocalUiHtml() {
 <body>
   <header class="topbar">
     <div class="brand-lockup" aria-label="VibeRaven">
-      <span class="raven-mark" aria-hidden="true"></span>
+      <span class="raven-mark" aria-hidden="true">
+        <img src="/assets/extension-icon.png" alt="" />
+      </span>
       <strong>VibeRaven</strong>
       <span class="tagline">From AI demo to production</span>
     </div>
-    <div id="project-picker" class="project-picker" aria-label="Current project"><span>Loading project...</span></div>
+    <button id="project-picker" class="project-picker" type="button" aria-label="Current project"><span>Loading project...</span></button>
     <div class="top-actions">
-      <button id="scan" class="status-button" type="button"><span class="dot ok" aria-hidden="true"></span>Local scan</button>
-      <span id="settings" class="icon-button" title="Settings unavailable locally" aria-label="Settings unavailable locally" aria-disabled="true"></span>
-      <button id="verify" class="primary verify-button" type="button">Verify</button>
+      <span class="live-status"><span class="dot ok" aria-hidden="true"></span>Connected</span>
+      <span class="top-divider" aria-hidden="true"></span>
+      <button id="settings" class="icon-button" title="Settings" aria-label="Settings" type="button">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z"/>
+          <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.05.05a2 2 0 0 1-2.83 2.83l-.05-.05a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.04 1.56V21a2 2 0 0 1-4 0v-.08a1.7 1.7 0 0 0-1.04-1.56 1.7 1.7 0 0 0-1.87.34l-.05.05a2 2 0 0 1-2.83-2.83l.05-.05A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.56-1.04H3a2 2 0 0 1 0-4h.08A1.7 1.7 0 0 0 4.6 8.9a1.7 1.7 0 0 0-.34-1.87l-.05-.05a2 2 0 0 1 2.83-2.83l.05.05a1.7 1.7 0 0 0 1.87.34A1.7 1.7 0 0 0 10 3.08V3a2 2 0 0 1 4 0v.08a1.7 1.7 0 0 0 1.04 1.56 1.7 1.7 0 0 0 1.87-.34l.05-.05a2 2 0 0 1 2.83 2.83l-.05.05A1.7 1.7 0 0 0 19.4 8.9a1.7 1.7 0 0 0 1.56 1.04H21a2 2 0 0 1 0 4h-.08A1.7 1.7 0 0 0 19.4 15Z"/>
+        </svg>
+      </button>
+      <button id="verify" class="primary verify-button" type="button">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 3.2 19 6v5.3c0 4.4-2.7 7.4-7 9.5-4.3-2.1-7-5.1-7-9.5V6Z"/>
+          <path d="m9.2 12.1 2 2 4-4.3"/>
+        </svg>
+        <span>Verify now</span>
+      </button>
     </div>
   </header>
   <div class="shell">
@@ -712,9 +1185,9 @@ function renderLocalUiHtml() {
       <p class="rail-title">Providers</p>
       <label class="search-box"><span aria-hidden="true"></span><input id="provider-search" placeholder="Search providers..." aria-label="Search providers" /></label>
       <div id="providers" class="provider-list"></div>
-      <section class="run-local-card" aria-label="Run VibeRaven locally">
-        <h2>Run VibeRaven locally</h2>
-        <p>Verify your project from the terminal.</p>
+      <section class="run-local-card" aria-label="Run VibeRaven">
+        <h2>Run VibeRaven</h2>
+        <p>Check your project from the terminal.</p>
         <div class="command-pill"><span>$ npx -y viberaven</span></div>
       </section>
     </aside>
@@ -722,34 +1195,66 @@ function renderLocalUiHtml() {
       <section id="provider-header" class="provider-header"></section>
       <section id="path"></section>
       <section class="next-fix">
-        <h2>Next fix</h2>
+        <h2>Next action</h2>
         <div id="next-fix"></div>
       </section>
     </main>
-    <aside class="drawer" aria-label="Agent prompt">
-      <h2>Agent prompt</h2>
-      <p>Use this prompt with your coding agent.</p>
-      <textarea id="prompt" class="prompt-box" readonly></textarea>
-      <div class="drawer-actions">
-        <button id="copy" class="primary" type="button">Copy prompt</button>
-        <button id="tasklist" type="button">Open tasklist</button>
-        <button id="drawer-verify" type="button">Run verify</button>
-      </div>
-      <div class="tip">Tip: re-run Verify after applying a fix to confirm the gate state.</div>
+    <aside class="drawer" aria-label="Agent prompt and quick actions">
+      <section class="prompt-panel" aria-label="Agent prompt">
+        <div class="panel-heading">
+          <div class="panel-title">
+            <span class="panel-glyph" aria-hidden="true">
+              <svg viewBox="0 0 24 24"><path d="M4 6h16"/><path d="M4 12h10"/><path d="M4 18h7"/><path d="M17 12l3 3-3 3"/><path d="M14 15h6"/></svg>
+            </span>
+            <div>
+              <h2>Agent prompt</h2>
+              <p>Run this with your coding agent.</p>
+            </div>
+          </div>
+          <button id="copy" class="copy-small" type="button" aria-label="Copy prompt">
+            <span class="action-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
+            Copy
+          </button>
+        </div>
+        <div id="prompt-preview" class="prompt-card"></div>
+        <textarea id="prompt" class="prompt-box" readonly></textarea>
+      </section>
+      <section class="quick-panel" aria-label="Quick actions">
+        <div class="panel-title">
+          <span class="action-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m13 2-8 12h7l-1 8 8-12h-7l1-8Z"/></svg></span>
+          <h2>Quick actions</h2>
+        </div>
+        <div class="drawer-actions">
+          <button id="tasklist" type="button"><span class="action-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg></span><span>Open tasklist</span></button>
+          <button id="drawer-verify" type="button" aria-label="Run verify"><span class="action-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m10 8 6 4-6 4Z"/></svg></span><span>Run verify</span></button>
+        </div>
+        <div class="tip" hidden></div>
+      </section>
     </aside>
   </div>
   <footer class="status-footer">
     <div class="footer-left">
       <strong>VibeRaven CLI</strong>
-      <span id="footer-project">Local project</span>
-      <span id="footer-command" class="footer-command">npx -y viberaven</span>
     </div>
     <div class="footer-right">
+      <span>Need help?</span>
       <span id="footer-gate" class="gate-status" data-status="not_clear"><span class="dot bad" aria-hidden="true"></span>Gate not clear</span>
     </div>
   </footer>
+  <div id="action-panel-backdrop" class="action-panel-backdrop" aria-hidden="true">
+    <section class="action-panel" role="dialog" aria-modal="true" aria-labelledby="action-panel-title">
+      <header class="action-panel-header">
+        <div>
+          <h2 id="action-panel-title">Guide</h2>
+          <p id="action-panel-subtitle"></p>
+        </div>
+        <button id="action-panel-close" class="panel-close" type="button" aria-label="Close panel"></button>
+      </header>
+      <div id="action-panel-body" class="action-panel-body"></div>
+    </section>
+  </div>
   <script>
-    const state = { data: null, selectedProviderId: null, providerQuery: '' };
+    const state = { data: null, selectedProviderId: null, selectedPathItemId: null, providerQuery: '', busyAction: '' };
     const localToken = new URLSearchParams(window.location.search).get('vr_token') || '';
     const labels = {
       not_detected: 'Not detected',
@@ -769,6 +1274,183 @@ function renderLocalUiHtml() {
     function selectedProvider() {
       return state.data.providers.find((provider) => provider.id === state.selectedProviderId) || state.data.providers[0];
     }
+    function selectedPathItem(provider) {
+      return provider.launchPath.find((item) => item.id === state.selectedPathItemId)
+        || (provider.nextFix && provider.launchPath.find((item) => item.id === provider.nextFix.launchPathItemId))
+        || provider.launchPath[0];
+    }
+    function providerPrompt(provider, item) {
+      const nextFix = provider.nextFix;
+      if (nextFix && item.id === nextFix.launchPathItemId) return nextFix.prompt;
+      return [
+        'Work on the ' + provider.label + ' launch path for ' + (state.data.project.name || 'this project') + '.',
+        '',
+        'Focused check: ' + item.title,
+        '',
+        'Requirements:',
+        '- Understand why it matters: ' + item.whyItMatters,
+        '- Make the repo-owned change: ' + item.whatToChange,
+        '- Keep changes local/repo-only and do not add secret values.',
+        '- Re-run npx -y viberaven --verify when done.',
+        '',
+        'Return the exact files changed and the verification result.'
+      ].join('\\n');
+    }
+    function setTip(message, kind) {
+      const tip = document.querySelector('.tip');
+      tip.hidden = !message;
+      tip.textContent = message || '';
+      tip.dataset.kind = kind || 'info';
+    }
+    function escapeHtml(value) {
+      return String(value == null ? '' : value)
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+    }
+    function openPanel(title, subtitle, html) {
+      document.getElementById('action-panel-title').textContent = title;
+      document.getElementById('action-panel-subtitle').textContent = subtitle || '';
+      document.getElementById('action-panel-body').innerHTML = html;
+      const backdrop = document.getElementById('action-panel-backdrop');
+      backdrop.classList.add('is-open');
+      backdrop.setAttribute('aria-hidden', 'false');
+    }
+    function closePanel() {
+      const backdrop = document.getElementById('action-panel-backdrop');
+      backdrop.classList.remove('is-open');
+      backdrop.setAttribute('aria-hidden', 'true');
+    }
+    function guideSteps(provider, item) {
+      if (provider.id === 'supabase' && item.id === 'rls-policies') {
+        return [
+          { title: 'Open Supabase policies', body: 'In Supabase, open Authentication and Database policies for the project tables that store user data.', code: 'https://supabase.com/dashboard/project/_/auth/policies', openUrl: 'https://supabase.com/dashboard/project/_/auth/policies' },
+          { title: 'Enable RLS in a migration', body: 'Keep proof in the repo. Add SQL that enables row level security for each public table.', code: 'alter table public.your_table enable row level security;' },
+          { title: 'Scope rows to the owner', body: 'Add policies that only allow authenticated users to read or write their own records. Avoid permissive USING (true) policies.', code: "create policy \\"Users manage own rows\\" on public.your_table\\nfor all to authenticated\\nusing (auth.uid() = user_id)\\nwith check (auth.uid() = user_id);" },
+          { title: 'Run verify', body: 'Refresh the evidence map after the repo change. VibeRaven does not need secret values.', code: 'npx -y viberaven --verify', verify: true }
+        ];
+      }
+      if (provider.id === 'supabase' && item.id === 'production-env') {
+        return [
+          { title: 'Open .env.example', body: 'Add names only. Never paste real Supabase keys into repo files.', code: 'NEXT_PUBLIC_SUPABASE_URL=\\nNEXT_PUBLIC_SUPABASE_ANON_KEY=\\nSERVER_ONLY_SUPABASE_ADMIN_KEY=<server-only, never expose to browser>', file: '.env.example' },
+          { title: 'Document the boundary', body: 'Make it obvious which key can be public and which must stay server-only.', code: 'The server-only Supabase admin key must not be used in client components.' },
+          { title: 'Run verify', body: 'Refresh evidence after the placeholders are committed.', code: 'npx -y viberaven --verify', verify: true }
+        ];
+      }
+      if (provider.id === 'stripe') {
+        return [
+          { title: 'Open env example', body: 'Add payment env names only. Keep server keys out of client code.', code: 'STRIPE_SERVER_KEY=<server-only>\\nSTRIPE_WEBHOOK_SIGNING_SECRET=<server-only>\\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=', file: '.env.example' },
+          { title: 'Copy webhook target', body: 'Use a stable production webhook route and verify signatures before changing subscription state.', code: '/api/stripe/webhook' },
+          { title: 'Run verify', body: 'VibeRaven checks repo evidence and does not need live secret values.', code: 'npx -y viberaven --verify', verify: true }
+        ];
+      }
+      if (provider.id === 'vercel') {
+        return [
+          { title: 'Open env example', body: 'Document the env names your app expects in production without values.', code: '.env.example', file: '.env.example' },
+          { title: 'Confirm deploy command', body: 'Make package scripts and deployment config agree on build and test commands.', code: 'npm run build' },
+          { title: 'Run verify', body: 'Refresh the launch map after repo evidence changes.', code: 'npx -y viberaven --verify', verify: true }
+        ];
+      }
+      return [
+        { title: item.title, body: item.whyItMatters, code: item.whatToChange },
+        { title: 'Keep the proof in the repo', body: 'Provider setup can still require manual work, but VibeRaven needs safe local evidence for the coding agent.', code: item.verifyWith },
+        { title: 'Run verify', body: 'Run verify after the repo-owned fix. No production secrets are required.', code: 'npx -y viberaven --verify', verify: true }
+      ];
+    }
+    function renderGuideHtml(provider, item) {
+      const cards = guideSteps(provider, item).map((step, index) => {
+        const actions = [
+          step.code ? '<button type="button" data-copy="' + escapeHtml(step.code) + '">Copy</button>' : '',
+          step.file ? '<button type="button" data-open-file="' + escapeHtml(step.file) + '">Open file</button>' : '',
+          step.openUrl ? '<button type="button" data-open-url="' + escapeHtml(step.openUrl) + '">Open</button>' : '',
+          step.verify ? '<button class="verify-action" type="button" data-run-verify="true">Run verify</button>' : ''
+        ].filter(Boolean).join('');
+        return '<article class="guide-card task-card" style="--panel-index:' + index + '"><span class="task-number">' + (index + 1) + '</span><div><h3>' + escapeHtml(step.title) + '</h3><p>' + escapeHtml(step.body) + '</p>' + (step.code ? '<code>' + escapeHtml(step.code) + '</code>' : '') + '<div class="guide-actions">' + actions + '</div></div></article>';
+      }).join('');
+      return cards + '<article class="guide-card" style="--panel-index:8"><h3>Use with your coding agent</h3><p>The prompt on the right is scoped to this provider check. Copy it after selecting the row you want to fix.</p><div class="guide-actions"><button class="primary-action" type="button" data-copy-prompt="true">Copy focused prompt</button><button class="verify-action" type="button" data-run-verify="true">Run verify</button></div></article>';
+    }
+    function projectFiles() {
+      return (state.data && state.data.project && state.data.project.files) || [];
+    }
+    function fileByPath(path) {
+      return projectFiles().find((file) => file.path === path);
+    }
+    function bestEnvFile() {
+      return fileByPath('.env.local')?.exists ? '.env.local'
+        : fileByPath('.env')?.exists ? '.env'
+          : '.env.example';
+    }
+    function projectFileCards() {
+      return projectFiles().map((file, index) => {
+        const stateLabel = file.exists ? 'Found' : 'Missing';
+        const action = file.exists
+          ? '<button type="button" data-open-file="' + escapeHtml(file.path) + '">Open</button>'
+          : '<button type="button" data-copy="' + escapeHtml(file.path) + '">Copy path</button>';
+        return '<article class="guide-card" style="--panel-index:' + index + '"><h3>' + escapeHtml(file.label) + '</h3><p>' + escapeHtml(file.path) + ' - ' + stateLabel + '</p><div class="guide-actions">' + action + '</div></article>';
+      }).join('');
+    }
+    function taskSteps(provider, item) {
+      if (provider.id === 'supabase' && item.id === 'production-env') {
+        const envFile = bestEnvFile();
+        return [
+          { title: 'Open ' + envFile, body: 'Put the required variable names where your app already keeps environment configuration.', file: envFile },
+          { title: 'Copy Supabase placeholders', body: 'Paste names only. Add real values in your normal local environment, not into committed source.', code: 'NEXT_PUBLIC_SUPABASE_URL=\\nNEXT_PUBLIC_SUPABASE_ANON_KEY=\\nSERVER_ONLY_SUPABASE_ADMIN_KEY=<server-only, never expose to browser>' },
+          { title: 'Run verify', body: 'Refresh VibeRaven after the file is saved.', verify: true }
+        ];
+      }
+      if (provider.id === 'supabase' && item.id === 'rls-policies') {
+        return [
+          { title: 'Open Supabase policies', body: 'Use Supabase to inspect the affected tables and policy names.', openUrl: 'https://supabase.com/dashboard/project/_/auth/policies' },
+          { title: 'Open migrations folder', body: 'Keep the durable SQL proof in your repo so Codex or Claude Code can edit it.', file: 'supabase/migrations' },
+          { title: 'Copy RLS policy template', body: 'Adapt table and owner column names before saving.', code: "alter table public.your_table enable row level security;\\n\\ncreate policy \\"Users manage own rows\\" on public.your_table\\nfor all to authenticated\\nusing (auth.uid() = user_id)\\nwith check (auth.uid() = user_id);" },
+          { title: 'Run verify', body: 'Refresh VibeRaven after the migration is saved.', verify: true }
+        ];
+      }
+      if (provider.id === 'stripe') {
+        const envFile = bestEnvFile();
+        return [
+          { title: 'Open ' + envFile, body: 'Add payment variable names where your app already expects environment values.', file: envFile },
+          { title: 'Copy payment placeholders', body: 'Keep server keys server-side. Use real values only in your local/provider environment.', code: 'STRIPE_SERVER_KEY=<server-only>\\nSTRIPE_WEBHOOK_SIGNING_SECRET=<server-only>\\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=' },
+          { title: 'Run verify', body: 'Refresh VibeRaven after the repo evidence is saved.', verify: true }
+        ];
+      }
+      return [
+        { title: 'Open the likely file', body: 'Start where this project stores launch evidence.', file: bestEnvFile() },
+        { title: 'Copy the focused change', body: item.whatToChange, code: item.whatToChange },
+        { title: 'Run verify', body: 'Refresh VibeRaven after the change is saved.', verify: true }
+      ];
+    }
+    function renderTasklistHtml() {
+      const provider = selectedProvider();
+      const item = selectedPathItem(provider);
+      const cards = taskSteps(provider, item).map((step, index) => {
+        const actions = [
+          step.code ? '<button type="button" data-copy="' + escapeHtml(step.code) + '">Copy</button>' : '',
+          step.file ? '<button type="button" data-open-file="' + escapeHtml(step.file) + '">Open file</button>' : '',
+          step.openUrl ? '<button type="button" data-open-url="' + escapeHtml(step.openUrl) + '">Open</button>' : '',
+          step.verify ? '<button class="verify-action" type="button" data-run-verify="true">Run verify</button>' : ''
+        ].filter(Boolean).join('');
+        return '<article class="guide-card task-card" style="--panel-index:' + index + '"><span class="task-number">' + (index + 1) + '</span><div><h3>' + escapeHtml(step.title) + '</h3><p>' + escapeHtml(step.body) + '</p>' + (step.code ? '<code>' + escapeHtml(step.code) + '</code>' : '') + '<div class="guide-actions">' + actions + '</div></div></article>';
+      }).join('');
+      const providerPills = state.data.providers.map((candidate) => '<span class="provider-pill">' + escapeHtml(candidate.label) + ': ' + escapeHtml(labels[candidate.state] || candidate.state) + '</span>').join('');
+      return '<article class="guide-card" style="--panel-index:0"><h3>Current focus</h3><p>' + escapeHtml(provider.label + ' - ' + item.title) + '</p><div class="provider-pill-row">' + providerPills + '</div></article>' + cards;
+    }
+    async function openTasklistPanel() {
+      setTip('Loading tasklist...');
+      await fetch('/api/tasklist?vr_token=' + encodeURIComponent(localToken));
+      openPanel('Tasklist', 'Focused steps from repo evidence. No secrets are needed.', renderTasklistHtml());
+      setTip('Tasklist loaded inside VibeRaven.');
+    }
+    function openSettingsPanel() {
+      const project = state.data.project;
+      openPanel('Settings', 'Project files and editor shortcuts.', '<article class="guide-card"><h3>Project folder</h3><p>' + escapeHtml(project.workspacePath) + '</p><div class="guide-actions"><button type="button" data-open-file=".">Open folder</button></div></article>' + projectFileCards() + '<article class="guide-card"><h3>Commands</h3><code>npx -y viberaven\\nnpx -y viberaven --verify\\nnpx -y viberaven --agent-mode</code></article>');
+    }
+    function openProjectPanel() {
+      const project = state.data.project;
+      openPanel('Project', project.name, '<article class="guide-card"><h3>Working folder</h3><p>' + escapeHtml(project.workspacePath) + '</p><div class="guide-actions"><button class="primary-action" type="button" data-open-file=".">Open folder</button><button type="button" data-run-verify="true">Run verify</button></div></article>' + projectFileCards());
+    }
     function gateLabel(status) {
       return status === 'clear' ? 'Gate clear' : 'Gate not clear';
     }
@@ -778,8 +1460,46 @@ function renderLocalUiHtml() {
       if (provider.state === 'needs_repo_fix' || provider.state === 'connect_live' || provider.state === 'requires_user_action') return 'needs_repo_fix';
       return provider.state;
     }
-    function setPrompt(provider) {
-      document.getElementById('prompt').value = provider.nextFix ? provider.nextFix.prompt : '';
+    function pathIconHtml(index) {
+      const icons = [
+        '<svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="7" ry="3"/><path d="M5 5v6c0 1.7 3.1 3 7 3s7-1.3 7-3V5"/><path d="M5 11v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6"/></svg>',
+        '<svg viewBox="0 0 24 24"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9Z"/><path d="m4 7.5 8 4.5 8-4.5"/><path d="M12 12v9"/></svg>',
+        '<svg viewBox="0 0 24 24"><path d="m14 10-4 4"/><path d="M16.5 7.5a3.5 3.5 0 0 1 0 5l-1.5 1.5a3.5 3.5 0 0 1-5 0"/><path d="M7.5 16.5a3.5 3.5 0 0 1 0-5L9 10a3.5 3.5 0 0 1 5 0"/></svg>',
+        '<svg viewBox="0 0 24 24"><path d="m12 3 8 4-8 4-8-4Z"/><path d="m4 12 8 4 8-4"/><path d="m4 17 8 4 8-4"/></svg>'
+      ];
+      return icons[index % icons.length];
+    }
+    function renderPromptPreview(prompt) {
+      const preview = document.getElementById('prompt-preview');
+      preview.textContent = '';
+      const lines = prompt ? prompt.split('\\n') : [];
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) {
+          preview.append(document.createTextNode('\\n'));
+          continue;
+        }
+        if (trimmed.startsWith('- ')) {
+          const row = document.createElement('div');
+          row.className = 'prompt-line';
+          const check = document.createElement('span');
+          check.className = 'prompt-check';
+          check.innerHTML = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3.5 8.5 2.5 2.5 6-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+          const copy = document.createElement('span');
+          copy.textContent = trimmed.slice(2);
+          row.append(check, copy);
+          preview.append(row);
+          continue;
+        }
+        const block = document.createElement('div');
+        block.textContent = line;
+        preview.append(block);
+      }
+    }
+    function setPrompt(provider, item) {
+      const prompt = item ? providerPrompt(provider, item) : (provider.nextFix ? provider.nextFix.prompt : '');
+      document.getElementById('prompt').value = prompt;
+      renderPromptPreview(prompt);
     }
     function renderProviders() {
       const container = document.getElementById('providers');
@@ -801,6 +1521,8 @@ function renderLocalUiHtml() {
         button.type = 'button';
         button.addEventListener('click', () => {
           state.selectedProviderId = provider.id;
+          state.selectedPathItemId = null;
+          setTip('');
           render();
         });
         const icon = document.createElement('span');
@@ -832,82 +1554,92 @@ function renderLocalUiHtml() {
       icon.innerHTML = provider.iconHtml;
       const copy = document.createElement('div');
       const title = document.createElement('h1');
-      title.textContent = provider.label + ' launch path';
+      title.textContent = 'Your launch path';
       const meta = document.createElement('p');
-      meta.textContent = 'What must be true before this app can ship.';
+      meta.textContent = "We'll guide you through what matters most.";
       copy.append(title, meta);
       heading.append(icon, copy);
-      const guide = document.createElement('span');
-      guide.className = 'secondary-action';
-      guide.setAttribute('aria-disabled', 'true');
-      guide.textContent = 'Provider guide unavailable locally';
-      header.append(heading, guide);
+      header.append(heading);
     }
     function renderPath(provider) {
       const path = document.getElementById('path');
       path.textContent = '';
       const list = document.createElement('div');
       list.className = 'path-list';
-      for (const item of provider.launchPath) {
-        const row = document.createElement('article');
-        row.className = 'path-row' + (provider.nextFix && provider.nextFix.launchPathItemId === item.id ? ' is-focused' : '');
+      provider.launchPath.forEach((item, index) => {
+        const row = document.createElement('button');
+        const isFocused = selectedPathItem(provider).id === item.id;
+        row.className = 'path-row' + (isFocused ? ' is-focused' : '');
+        row.type = 'button';
+        row.dataset.step = String(index + 1);
+        row.setAttribute('aria-label', 'Open ' + item.title + ' guidance');
+        row.addEventListener('click', () => {
+          state.selectedPathItemId = item.id;
+          setTip('Opened guidance for ' + item.title + '. Copy the prompt or use Open guide for the focused steps.');
+          render();
+        });
+        const icon = document.createElement('span');
+        icon.className = 'path-icon';
+        icon.innerHTML = pathIconHtml(index);
         const body = document.createElement('div');
         const title = document.createElement('strong');
         title.textContent = item.title;
         const copy = document.createElement('p');
-        copy.textContent = item.whyItMatters;
+        copy.textContent = item.whatToChange || item.whyItMatters;
         body.append(title, copy);
         const status = document.createElement('span');
         status.className = 'path-state';
         status.dataset.state = item.state;
-        status.textContent = labels[item.state] || item.state;
-        row.append(body, status);
+        status.textContent = item.state === 'not_checked' ? 'Pending' : (labels[item.state] || item.state);
+        const arrow = document.createElement('span');
+        arrow.className = 'path-arrow';
+        arrow.innerHTML = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>';
+        row.append(icon, body, status, arrow);
         list.append(row);
-      }
+      });
       path.append(list);
     }
     function renderNextFix(provider) {
       const container = document.getElementById('next-fix');
       container.textContent = '';
-      if (!provider.nextFix) {
+      const item = selectedPathItem(provider);
+      if (!item) {
         const empty = document.createElement('div');
         empty.className = 'empty';
-        empty.textContent = 'No repo-code gap is focused for this provider. Run scan or verify to refresh VibeRaven evidence.';
+        empty.textContent = 'No launch-path guidance is available for this provider yet. Run scan or verify to refresh VibeRaven evidence.';
         container.append(empty);
-        setPrompt(provider);
+        setPrompt(provider, item);
         return;
       }
-      const grid = document.createElement('div');
-      grid.className = 'fix-grid';
-      const sections = [
-        ['1', 'Why it matters', provider.nextFix.whyItMatters],
-        ['2', 'What to change', provider.nextFix.whatToChange],
-        ['3', 'Verify with VibeRaven', provider.nextFix.verifyWith]
-      ];
-      for (const [symbol, heading, copy] of sections) {
-        const section = document.createElement('article');
-        section.className = 'fix-section';
-        const marker = document.createElement('span');
-        marker.className = 'fix-symbol';
-        marker.textContent = symbol;
-        const body = document.createElement('div');
-        const h = document.createElement('h3');
-        h.textContent = heading;
-        const p = document.createElement('p');
-        p.textContent = copy;
-        body.append(h, p);
-        section.append(marker, body);
-        grid.append(section);
-      }
-      container.append(grid);
-      setPrompt(provider);
+      const subtitle = document.createElement('p');
+      subtitle.className = 'next-fix-subtitle';
+      subtitle.textContent = provider.nextFix && item.id === provider.nextFix.launchPathItemId ? 'Start here to move forward.' : 'Manual guidance for the selected launch check.';
+      const row = document.createElement('article');
+      row.className = 'next-action-row';
+      const icon = document.createElement('span');
+      icon.className = 'next-action-icon';
+      icon.innerHTML = pathIconHtml(Math.max(0, provider.launchPath.findIndex((candidate) => candidate.id === item.id)));
+      const body = document.createElement('div');
+      const h = document.createElement('h3');
+      h.textContent = 'Fix ' + item.title.toLowerCase();
+      const p = document.createElement('p');
+      p.textContent = item.whatToChange;
+      body.append(h, p);
+      const guide = document.createElement('button');
+      guide.className = 'open-guide-button';
+      guide.type = 'button';
+      guide.textContent = 'Open guide';
+      guide.addEventListener('click', () => {
+        openPanel(provider.label + ' guide', item.title + ' guidance for this project.', renderGuideHtml(provider, item));
+        setTip('Opened in-app guide for ' + item.title + '.');
+      });
+      row.append(icon, body, guide);
+      container.append(subtitle, row);
+      setPrompt(provider, item);
     }
     function renderChrome() {
       const projectName = state.data.project.name;
-      const command = state.data.command || 'npx -y viberaven';
       document.querySelector('#project-picker span').textContent = projectName;
-      document.getElementById('footer-project').textContent = projectName;
-      document.getElementById('footer-command').textContent = command;
       const gate = document.getElementById('footer-gate');
       gate.dataset.status = state.data.project.gateStatus;
       gate.textContent = '';
@@ -944,20 +1676,62 @@ function renderLocalUiHtml() {
       }
       state.data = payload.state || payload;
       state.selectedProviderId = state.data.selectedProviderId;
+      state.selectedPathItemId = null;
+      setTip(path === '/api/verify' ? 'Verify finished. The launch map has been refreshed.' : 'Scan finished. The launch map has been refreshed.');
       render();
     }
     document.getElementById('provider-search').addEventListener('input', (event) => {
       state.providerQuery = event.target.value.toLowerCase();
       renderProviders();
     });
-    document.getElementById('scan').addEventListener('click', () => postAndRefresh('/api/scan'));
-    document.getElementById('verify').addEventListener('click', () => postAndRefresh('/api/verify'));
-    document.getElementById('drawer-verify').addEventListener('click', () => postAndRefresh('/api/verify'));
-    document.getElementById('tasklist').addEventListener('click', () => window.open('/api/tasklist?vr_token=' + encodeURIComponent(localToken), '_blank', 'noopener,noreferrer'));
+    document.getElementById('project-picker').addEventListener('click', openProjectPanel);
+    document.getElementById('verify').addEventListener('click', () => {
+      setTip('Running verify...');
+      postAndRefresh('/api/verify');
+    });
+    document.getElementById('drawer-verify').addEventListener('click', () => {
+      setTip('Running verify...');
+      postAndRefresh('/api/verify');
+    });
+    document.getElementById('tasklist').addEventListener('click', () => {
+      openTasklistPanel().catch((error) => setTip(error instanceof Error ? error.message : String(error), 'error'));
+    });
+    document.getElementById('settings').addEventListener('click', openSettingsPanel);
+    document.getElementById('action-panel-close').addEventListener('click', closePanel);
+    document.getElementById('action-panel-backdrop').addEventListener('click', (event) => {
+      if (event.target.id === 'action-panel-backdrop') closePanel();
+    });
+    document.getElementById('action-panel-body').addEventListener('click', async (event) => {
+      const target = event.target.closest('button');
+      if (!target) return;
+      if (target.dataset.copy) {
+        await navigator.clipboard.writeText(target.dataset.copy);
+        setTip('Copied guide snippet.');
+      }
+      if (target.dataset.openUrl) {
+        window.open(target.dataset.openUrl, '_blank', 'noopener,noreferrer');
+        setTip('Opened provider page.');
+      }
+      if (target.dataset.openFile) {
+        const base = state.data.project.workspacePath.replaceAll('\\\\', '/').replace(/\\/$/, '');
+        const rel = target.dataset.openFile.replace(/^[/\\\\]+/, '');
+        window.open('vscode://file/' + encodeURI(base + '/' + rel), '_blank', 'noopener,noreferrer');
+        setTip('Opened ' + rel + ' in your editor if the editor protocol is enabled.');
+      }
+      if (target.dataset.copyPrompt) {
+        await navigator.clipboard.writeText(document.getElementById('prompt').value || '');
+        setTip('Copied focused prompt.');
+      }
+      if (target.dataset.runVerify) {
+        setTip('Running verify...');
+        postAndRefresh('/api/verify');
+      }
+    });
     document.getElementById('copy').addEventListener('click', async () => {
       const prompt = document.getElementById('prompt').value;
       if (!prompt) return;
       await navigator.clipboard.writeText(prompt);
+      setTip('Prompt copied. Paste it into your coding agent for the selected launch check.');
     });
     refresh().catch((error) => {
       const tip = document.querySelector('.tip');
@@ -969,9 +1743,139 @@ function renderLocalUiHtml() {
 }
 
 // src/version.ts
-var VERSION = "1.1.9";
+var VERSION = "1.1.10";
 
 // src/publicLocalCli.ts
+function brandSvg(title, fill, path) {
+  return `<svg viewBox="0 0 24 24" role="img" aria-label="${title} logo" fill="${fill}"><title>${title}</title><path d="${path}"/></svg>`;
+}
+var PUBLIC_PROVIDER_CATALOG = [
+  {
+    id: "supabase",
+    label: "Supabase",
+    area: "database",
+    stateWhenDetected: "needs_repo_fix",
+    aliases: ["supabase", "rls", "row level security", "row-level security", "migration", "database"],
+    iconHtml: brandSvg("Supabase", "#3FCF8E", "M11.9 1.036c-.015-.986-1.26-1.41-1.874-.637L.764 12.05C-.33 13.427.65 15.455 2.409 15.455h9.579l.113 7.51c.014.985 1.259 1.408 1.873.636l9.262-11.653c1.093-1.375.113-3.403-1.645-3.403h-9.642z"),
+    rows: [
+      { id: "schema-migrations", title: "Schema and migrations", whyItMatters: "Production data shape needs repo-owned evidence before real users write to it.", whatToChange: "Add or update migration files that prove the production schema and indexes.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["schema", "migration", "database"] },
+      { id: "rls-policies", title: "RLS policies", whyItMatters: "User data must be protected by row ownership rules before launch.", whatToChange: "Add policy SQL that enables RLS and restricts reads and writes to the authenticated owner.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["rls", "policy", "row"] },
+      { id: "auth-callbacks", title: "Auth callbacks", whyItMatters: "Authentication breaks when production callback URLs are missing or local-only.", whatToChange: "Document production site URL and redirect URL evidence without secrets.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["auth", "callback", "redirect"] },
+      { id: "production-env", title: "Production env", whyItMatters: "Production database URLs and keys must be explicit and safely scoped.", whatToChange: "Add safe env placeholders for URL, anon key, and server-only service-role boundaries.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["env", "secret", "url"] }
+    ]
+  },
+  {
+    id: "vercel",
+    label: "Vercel",
+    area: "deployment",
+    stateWhenDetected: "repo_evidence_found",
+    aliases: ["vercel", "deployment", "deploy", "hosting", "preview"],
+    iconHtml: brandSvg("Vercel", "#000000", "m12 1.608 12 20.784H0Z"),
+    rows: [
+      { id: "preview-gate", title: "Preview deployment gate", whyItMatters: "Every production change should have a reproducible preview path.", whatToChange: "Add repo evidence for preview deploys, build command, and required checks.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["preview", "deploy", "ci"] },
+      { id: "production-env", title: "Production env", whyItMatters: "Production runtime variables must be named without leaking values.", whatToChange: "Document required production env names in repo evidence.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["env", "secret"] },
+      { id: "domain-routing", title: "Domain and routing", whyItMatters: "The launch URL needs canonical HTTPS and predictable routes.", whatToChange: "Add evidence for the production domain, redirects, and framework routing assumptions.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["domain", "route"] }
+    ]
+  },
+  {
+    id: "stripe",
+    label: "Stripe",
+    area: "payments",
+    stateWhenDetected: "connect_live",
+    aliases: ["stripe", "payment", "checkout", "subscription", "webhook"],
+    iconHtml: brandSvg("Stripe", "#635BFF", "M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z"),
+    rows: [
+      { id: "checkout-route", title: "Checkout route", whyItMatters: "Money movement needs a trusted server-side path.", whatToChange: "Add checkout or subscription route evidence with stable price env names.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["checkout", "price"] },
+      { id: "webhook-authenticity", title: "Webhook authenticity", whyItMatters: "Payment state must be reconciled from trusted server events.", whatToChange: "Add webhook route evidence with authenticity checks and idempotency.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["webhook", "authenticity"] },
+      { id: "customer-portal", title: "Customer portal", whyItMatters: "Users need a way to manage subscription state without support.", whatToChange: "Add repo evidence for customer portal or account payment routes.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["portal", "customer"] }
+    ]
+  },
+  {
+    id: "github",
+    label: "GitHub",
+    area: "testing",
+    stateWhenDetected: "repo_evidence_found",
+    aliases: ["github", "actions", "workflow", "pull request", "ci"],
+    iconHtml: brandSvg("GitHub", "#181717", "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"),
+    rows: [
+      { id: "required-checks", title: "Required checks", whyItMatters: "Unsafe changes should not merge without automated proof.", whatToChange: "Add workflow evidence for tests, typecheck, build, or public export verification.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["actions", "workflow", "ci"] },
+      { id: "branch-protection", title: "Branch protection", whyItMatters: "CI is advisory unless merge rules require it.", whatToChange: "Document required checks or owner review expectations in repo evidence.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["branch", "review"] }
+    ]
+  },
+  {
+    id: "sentry",
+    label: "Sentry",
+    area: "monitoring",
+    stateWhenDetected: "blocked",
+    aliases: ["sentry", "error", "monitoring", "trace", "dsn"],
+    iconHtml: brandSvg("Sentry", "#362D59", "M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z"),
+    rows: [
+      { id: "runtime-capture", title: "Runtime capture", whyItMatters: "Production errors need a destination before users report them.", whatToChange: "Add Sentry DSN env evidence and runtime initialization proof.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["dsn", "error"] },
+      { id: "release-context", title: "Release context", whyItMatters: "Errors need commit and release metadata to be actionable.", whatToChange: "Add release, environment, or source-map evidence.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["release", "source map"] }
+    ]
+  },
+  {
+    id: "clerk",
+    label: "Clerk",
+    area: "auth",
+    stateWhenDetected: "connect_live",
+    aliases: ["clerk", "auth", "session", "middleware"],
+    iconHtml: brandSvg("Clerk", "#6C47FF", "m21.47 20.829-2.881-2.881a.572.572 0 0 0-.7-.084 6.854 6.854 0 0 1-7.081 0 .576.576 0 0 0-.7.084l-2.881 2.881a.576.576 0 0 0-.103.69.57.57 0 0 0 .166.186 12 12 0 0 0 14.113 0 .58.58 0 0 0 .239-.423.576.576 0 0 0-.172-.453Zm.002-17.668-2.88 2.88a.569.569 0 0 1-.701.084A6.857 6.857 0 0 0 8.724 8.08a6.862 6.862 0 0 0-1.222 3.692 6.86 6.86 0 0 0 .978 3.764.573.573 0 0 1-.083.699l-2.881 2.88a.567.567 0 0 1-.864-.063A11.993 11.993 0 0 1 6.771 2.7a11.99 11.99 0 0 1 14.637-.405.566.566 0 0 1 .232.418.57.57 0 0 1-.168.448Zm-7.118 12.261a3.427 3.427 0 1 0 0-6.854 3.427 3.427 0 0 0 0 6.854Z"),
+    rows: [
+      { id: "session-boundary", title: "Session boundary", whyItMatters: "Protected routes need server-side identity checks.", whatToChange: "Add evidence for session middleware and protected API boundaries.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["session", "middleware"] },
+      { id: "callback-urls", title: "Callback URLs", whyItMatters: "Auth flows fail when production redirects are missing.", whatToChange: "Document production callback and redirect env names.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["callback", "redirect"] }
+    ]
+  },
+  {
+    id: "posthog",
+    label: "PostHog",
+    area: "analytics",
+    stateWhenDetected: "connect_live",
+    aliases: ["posthog", "analytics", "event", "funnel"],
+    iconHtml: brandSvg("PostHog", "#000000", "M9.854 14.5 5 9.647.854 5.5A.5.5 0 0 0 0 5.854V8.44a.5.5 0 0 0 .146.353L5 13.647l.147.146L9.854 18.5l.146.147v-.049c.065.03.134.049.207.049h2.586a.5.5 0 0 0 .353-.854L9.854 14.5zm0-5-4-4a.487.487 0 0 0-.409-.144.515.515 0 0 0-.356.21.493.493 0 0 0-.089.288V8.44a.5.5 0 0 0 .147.353l9 9a.5.5 0 0 0 .853-.354v-2.585a.5.5 0 0 0-.146-.354l-5-5zm1-4a.5.5 0 0 0-.854.354V8.44a.5.5 0 0 0 .147.353l4 4a.5.5 0 0 0 .853-.354V9.854a.5.5 0 0 0-.146-.354l-4-4zm12.647 11.515a3.863 3.863 0 0 1-2.232-1.1l-4.708-4.707a.5.5 0 0 0-.854.354v6.585a.5.5 0 0 0 .5.5H23.5a.5.5 0 0 0 .5-.5v-.6c0-.276-.225-.497-.499-.532zm-5.394.032a.8.8 0 1 1 0-1.6.8.8 0 0 1 0 1.6zM.854 15.5a.5.5 0 0 0-.854.354v2.293a.5.5 0 0 0 .5.5h2.293c.222 0 .39-.135.462-.309a.493.493 0 0 0-.109-.545L.854 15.5zM5 14.647.854 10.5a.5.5 0 0 0-.854.353v2.586a.5.5 0 0 0 .146.353L4.854 18.5l.146.147h2.793a.5.5 0 0 0 .353-.854L5 14.647z"),
+    rows: [
+      { id: "event-taxonomy", title: "Event taxonomy", whyItMatters: "Analytics should answer launch questions, not just count views.", whatToChange: "Add named events for account creation, activation, and conversion points.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["event", "taxonomy"] },
+      { id: "privacy-boundary", title: "Capture boundary", whyItMatters: "Session capture can expose sensitive fields if unchecked.", whatToChange: "Add masking, opt-out, or capture-boundary evidence.", verifyWith: "Run npx -y viberaven --verify.", keywords: ["privacy", "capture"] }
+    ]
+  }
+];
+function haystack(value) {
+  return JSON.stringify(value ?? {}).toLowerCase();
+}
+function gapMatchesProvider(gap, provider) {
+  const text = [gap.id, gap.title, gap.detail, gap.category, gap.primaryMapCategory].join(" ").toLowerCase();
+  return provider.aliases.some((alias) => text.includes(alias));
+}
+function artifactHasEvidenceForProvider(artifact, provider) {
+  if (!artifact) return false;
+  const text = haystack({
+    stackWiring: artifact.stackWiring,
+    providerRegistry: artifact.providerRegistry,
+    missionGraph: artifact.missionGraph
+  });
+  return provider.aliases.some((alias) => text.includes(alias));
+}
+function gapForProvider(artifact, provider) {
+  return artifact?.gaps.find((gap) => gapMatchesProvider(gap, provider));
+}
+function pathState(providerState, rowId, focusedRowId) {
+  if (focusedRowId === rowId) {
+    if (providerState === "blocked") return "blocked";
+    if (providerState === "connect_live") return "needs_connect";
+    return "needs_fix";
+  }
+  if (providerState === "repo_evidence_found") return "ready";
+  return "not_checked";
+}
+function rowForGap(provider, gap) {
+  if (!gap) return provider.id === "supabase" ? provider.rows[1] ?? provider.rows[0] : provider.rows[0];
+  const text = [gap.id, gap.title, gap.detail, gap.category, gap.primaryMapCategory].join(" ").toLowerCase();
+  const scored = provider.rows.map((row) => ({
+    row,
+    score: row.keywords.reduce((total, keyword) => text.includes(keyword.toLowerCase()) ? total + keyword.length : total, 0)
+  })).sort((left, right) => right.score - left.score);
+  return scored[0]?.score ? scored[0].row : provider.rows[0];
+}
 function send(res, status, body, contentType) {
   res.writeHead(status, {
     "content-type": contentType,
@@ -1107,6 +2011,62 @@ function tasklist(artifact) {
   return `${lines.join("\n").trim()}
 `;
 }
+function escapeHtml(value) {
+  return String(value ?? "").replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function reportHtml(artifact) {
+  const gaps = artifact.gaps.length ? artifact.gaps.map(
+    (gap) => `<article class="gap">
+            <div><strong>${escapeHtml(gap.title)}</strong><span>${escapeHtml(gap.severity)}</span></div>
+            <p>${escapeHtml(gap.detail)}</p>
+            <code>${escapeHtml(gap.id)}</code>
+          </article>`
+  ).join("") : '<p class="empty">No local repo-evidence gaps found.</p>';
+  const areas = artifact.missionGraph.areas.map(
+    (area) => `<li><span>${escapeHtml(area.label)}</span><strong>${escapeHtml(area.readinessPercent)}%</strong></li>`
+  ).join("");
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>VibeRaven Local Report</title>
+  <style>
+    body { margin: 0; background: #fbfbfa; color: #111417; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    main { max-width: 920px; margin: 0 auto; padding: 42px 24px; }
+    h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.1; }
+    .meta { color: #475467; margin: 0 0 28px; }
+    .summary, .gap, .areas { border: 1px solid #e4e7ec; background: #fff; border-radius: 12px; box-shadow: 0 12px 28px rgba(16, 24, 40, 0.035); }
+    .summary { padding: 22px; margin-bottom: 20px; }
+    .status { display: inline-flex; gap: 8px; align-items: center; padding: 7px 11px; border-radius: 999px; background: #fff2e5; color: #ff7a00; font-weight: 700; }
+    .status[data-clear="true"] { background: #e9f8f1; color: #24b26b; }
+    .areas { list-style: none; padding: 8px 18px; margin: 0 0 22px; }
+    .areas li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #eef0f4; }
+    .areas li:last-child { border-bottom: 0; }
+    .gap { padding: 18px; margin: 12px 0; }
+    .gap div { display: flex; justify-content: space-between; gap: 16px; }
+    .gap span { color: #ff7a00; font-size: 13px; font-weight: 700; }
+    .gap p { color: #475467; line-height: 1.45; }
+    code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
+    .empty { border: 1px dashed #d0d5dd; border-radius: 10px; padding: 16px; background: #fff; color: #475467; }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>VibeRaven Local Report</h1>
+    <p class="meta">${escapeHtml(artifact.workspacePath)} \xB7 ${escapeHtml(artifact.scannedAt)}</p>
+    <section class="summary">
+      <p class="status" data-clear="${artifact.verificationSummary.status === "clear"}">${escapeHtml(artifact.verificationSummary.status)}</p>
+      <h2>${escapeHtml(artifact.scoreLabel)}</h2>
+      <p>${escapeHtml(artifact.summary)}</p>
+    </section>
+    <ul class="areas">${areas}</ul>
+    <h2>Open gaps</h2>
+    ${gaps}
+  </main>
+</body>
+</html>`;
+}
 async function writeArtifacts(workspacePath, artifact) {
   const out = (0, import_node_path.join)(workspacePath, ".viberaven");
   await (0, import_promises.mkdir)(out, { recursive: true });
@@ -1153,37 +2113,91 @@ async function loadArtifact(workspacePath) {
     return void 0;
   }
 }
+function projectFiles(workspacePath) {
+  return [
+    { label: "Environment", path: ".env", exists: (0, import_node_fs.existsSync)((0, import_node_path.join)(workspacePath, ".env")) },
+    { label: "Local environment", path: ".env.local", exists: (0, import_node_fs.existsSync)((0, import_node_path.join)(workspacePath, ".env.local")) },
+    { label: "Env example", path: ".env.example", exists: (0, import_node_fs.existsSync)((0, import_node_path.join)(workspacePath, ".env.example")) },
+    { label: "Package manifest", path: "package.json", exists: (0, import_node_fs.existsSync)((0, import_node_path.join)(workspacePath, "package.json")) },
+    { label: "Vercel config", path: "vercel.json", exists: (0, import_node_fs.existsSync)((0, import_node_path.join)(workspacePath, "vercel.json")) },
+    { label: "Supabase migrations", path: "supabase/migrations", exists: (0, import_node_fs.existsSync)((0, import_node_path.join)(workspacePath, "supabase", "migrations")) }
+  ];
+}
 function localState(cwd, artifact) {
   const firstGap = artifact?.gaps[0];
-  const provider = {
-    id: "local-readiness",
-    label: "Local readiness",
-    area: "appFlow",
-    state: firstGap ? "needs_repo_fix" : artifact ? "repo_evidence_found" : "not_detected",
-    iconHtml: '<span aria-hidden="true">VR</span>',
-    launchPath: [
-      {
-        id: "local-repo-evidence",
-        title: firstGap?.title ?? "Local repo evidence",
-        whyItMatters: firstGap?.detail ?? "The public CLI checks deterministic local repo evidence.",
-        whatToChange: firstGap ? "Fix the listed repo evidence gap, then run viberaven --verify." : "Keep local repo evidence current as the app changes.",
-        verifyWith: "Run viberaven --verify.",
-        keywords: ["local", "source", "verify"],
-        area: "appFlow",
-        state: firstGap ? "needs_fix" : artifact ? "ready" : "not_checked"
-      }
-    ],
-    nextFix: firstGap ? {
-      gapId: firstGap.id,
-      launchPathItemId: "local-repo-evidence",
-      launchPathTitle: firstGap.title,
-      currentIssue: firstGap.detail,
-      whyItMatters: firstGap.detail,
-      whatToChange: "Edit repo-controlled evidence for this local readiness gap.",
-      verifyWith: "Run viberaven --verify.",
-      prompt: `Fix VibeRaven local gap ${firstGap.id}: ${firstGap.detail}`
-    } : void 0
-  };
+  const providers = PUBLIC_PROVIDER_CATALOG.map((seed) => {
+    const assignedGap = gapForProvider(artifact, seed);
+    const focusedGap = assignedGap ?? (seed.id === "supabase" ? firstGap : void 0);
+    const focusedRow = rowForGap(seed, focusedGap);
+    const hasEvidence = artifactHasEvidenceForProvider(artifact, seed);
+    const providerState = focusedGap ? seed.id === "sentry" ? "blocked" : "needs_repo_fix" : hasEvidence ? "repo_evidence_found" : artifact ? seed.stateWhenDetected : seed.stateWhenDetected;
+    const launchPath = seed.rows.map((row) => ({
+      id: row.id,
+      title: row.title,
+      whyItMatters: row.whyItMatters,
+      whatToChange: row.whatToChange,
+      verifyWith: row.verifyWith,
+      keywords: row.keywords,
+      area: seed.area,
+      state: pathState(providerState, row.id, focusedGap ? focusedRow.id : void 0)
+    }));
+    const defaultNextFix = !artifact && seed.id === "supabase" ? {
+      gapId: "LOCAL-SCAN-001",
+      launchPathItemId: focusedRow.id,
+      launchPathTitle: focusedRow.title,
+      currentIssue: "VibeRaven has not checked this project yet.",
+      whyItMatters: "The launch console needs repo evidence before it can focus the correct provider risk.",
+      whatToChange: "Click Verify so VibeRaven can map package, env, deployment, test, and provider evidence.",
+      verifyWith: "Click Verify or run npx -y viberaven --verify.",
+      prompt: [
+        `Run VibeRaven evidence discovery for ${(0, import_node_path.basename)(cwd) || cwd}.`,
+        "",
+        "Requirements:",
+        "- Inspect package, env example, deployment, test, auth, data, payment, and monitoring evidence.",
+        "- Identify the first repo-owned launch gap.",
+        "- Keep all findings local and do not add secret values.",
+        "- Re-run npx -y viberaven --verify after the first repo-code fix.",
+        "",
+        "Return the first concrete fix to make this app safer to ship."
+      ].join("\n")
+    } : void 0;
+    if (defaultNextFix) {
+      const focused = launchPath.find((item) => item.id === defaultNextFix.launchPathItemId);
+      if (focused) focused.state = "needs_fix";
+    }
+    const provider = {
+      id: seed.id,
+      label: seed.label,
+      area: seed.area,
+      state: providerState,
+      iconHtml: seed.iconHtml,
+      launchPath,
+      nextFix: focusedGap ? {
+        gapId: focusedGap.id,
+        launchPathItemId: focusedRow.id,
+        launchPathTitle: focusedRow.title,
+        currentIssue: focusedGap.detail,
+        whyItMatters: focusedRow.whyItMatters,
+        whatToChange: focusedRow.whatToChange,
+        verifyWith: focusedRow.verifyWith,
+        prompt: [
+          `Fix the ${seed.label} launch path for ${(0, import_node_path.basename)(cwd) || cwd}.`,
+          "",
+          `Current VibeRaven gap: ${focusedGap.id} - ${focusedGap.detail}`,
+          "",
+          "Requirements:",
+          `- Address ${focusedRow.title}.`,
+          `- ${focusedRow.whatToChange}`,
+          "- Keep changes repo-only and do not add secret values.",
+          "- Re-run npx -y viberaven --verify when done.",
+          "",
+          "Return a concise summary of what changed."
+        ].join("\n")
+      } : defaultNextFix
+    };
+    return provider;
+  });
+  const selectedProvider = providers.find((provider) => provider.nextFix) ?? providers.find((provider) => provider.id === "supabase") ?? providers[0];
   return {
     version: 1,
     generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -1193,15 +2207,29 @@ function localState(cwd, artifact) {
       score: artifact?.score,
       scoreLabel: artifact?.scoreLabel,
       summary: artifact?.summary,
-      gateStatus: artifact?.verificationSummary.status ?? "not_checked"
+      gateStatus: artifact?.verificationSummary.status ?? "not_checked",
+      files: projectFiles(cwd)
     },
-    providers: [provider],
-    selectedProviderId: provider.id,
-    command: "viberaven --verify"
+    providers,
+    selectedProviderId: selectedProvider.id,
+    command: "npx -y viberaven"
   };
 }
 async function route(req, res, options) {
   const url = new URL(req.url ?? "/", "http://127.0.0.1");
+  if (req.method === "GET" && (url.pathname === "/assets/extension-icon.png" || url.pathname === "/favicon.ico")) {
+    try {
+      const icon = await (0, import_promises.readFile)((0, import_node_path.join)(__dirname, "extension-icon.png"));
+      res.writeHead(200, {
+        "content-type": "image/png",
+        "cache-control": "public, max-age=31536000, immutable"
+      });
+      res.end(icon);
+    } catch {
+      sendJson(res, 404, { error: "Asset not found" });
+    }
+    return;
+  }
   if (req.method === "GET" && url.pathname === "/") {
     send(res, 200, renderLocalUiHtml(), "text/html; charset=utf-8");
     return;
@@ -1227,6 +2255,14 @@ async function route(req, res, options) {
     send(res, 200, tasklist(artifact), "text/plain; charset=utf-8");
     return;
   }
+  if (req.method === "GET" && url.pathname === "/api/report") {
+    let artifact = await loadArtifact(options.cwd);
+    if (!artifact) {
+      artifact = await runLocalScan(options.cwd);
+    }
+    send(res, 200, reportHtml(artifact), "text/html; charset=utf-8");
+    return;
+  }
   if (req.method === "POST" && (url.pathname === "/api/scan" || url.pathname === "/api/verify")) {
     const artifact = await runLocalScan(options.cwd);
     sendJson(res, 200, { ...localState(options.cwd, artifact), exitCode: artifact.verificationSummary.status === "clear" ? 0 : 1 });