@viberaven/cli 1.4.0 → 1.4.2

package/dist/cli.js

@@ -11558,7 +11558,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = "1.4.0";
+    VERSION = "1.4.2";
   }
 });
 
@@ -14872,6 +14872,8 @@ var init_providerLogos = __esm({
       aws: '<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><path fill="#FF9900" d="M6.763 10.582c4.95-2.283 10.563-2.283 15.475 0 .532.243.848.741.848 1.256 0 .532-.323 1.026-.85 1.256-4.912 2.283-10.525 2.283-15.474 0-.528-.23-.851-.724-.851-.279 0-.544.098-.754.243-4.95 2.283-10.563 2.283-15.475 0-.532-.243-.848-.741-.848-1.256 0-.532.323-1.026.85-1.256.228-.098.492-.196.754-.196.279 0 .544.098.754.243Z"/><path fill="#FF9900" d="M12 3.65c-2.772 0-5.027 1.147-5.027 2.553S9.228 8.756 12 8.756s5.027-1.147 5.027-2.553S14.772 3.65 12 3.65Z"/></svg>',
       sentry: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 22 20H2L12 3Zm0 5.1L6.8 17h2.1l3.1-5.3 3.1 5.3h2.1L12 8.1Z"/></svg>',
       posthog: '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#1D4AFF" d="M5.2 6.1h8.2c3 0 5.3 2 5.3 5.1 0 3.2-2.3 5.2-5.3 5.2H5.2V6.1Z"/><path fill="#F54E00" d="M4.1 4h4.2a2.35 2.35 0 0 1 0 4.7H4.1V4Z"/><circle cx="13.7" cy="11.75" r="1.1" fill="#F9BD2B"/><path fill="#F54E00" d="m16.5 9.35 2-1.15.85 1.3-2.15 1.3-.7-1.45Zm.38 4.78 2.42.86-.78 1.6-2.4-1.02.76-1.44Z"/></svg>',
+      resend: '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#FFFFFF" d="M14.679 0c4.648 0 7.413 2.765 7.413 6.434s-2.765 6.434-7.413 6.434H12.33L24 24h-8.245l-8.88-8.44c-.636-.588-.93-1.273-.93-1.86 0-.831.587-1.565 1.713-1.883l4.574-1.224c1.737-.465 2.936-1.81 2.936-3.572 0-2.153-1.761-3.4-3.939-3.4H0V0z"/></svg>',
+      upstash: '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#00E9A3" d="M13.8027 0C11.193 0 8.583.9952 6.5918 2.9863c-3.9823 3.9823-3.9823 10.4396 0 14.4219 1.9911 1.9911 5.2198 1.9911 7.211 0 1.991-1.9911 1.991-5.2198 0-7.211L12 12c.9956.9956.9956 2.6098 0 3.6055-.9956.9955-2.6099.9955-3.6055 0-2.9866-2.9868-2.9866-7.8297 0-10.8164 2.9868-2.9868 7.8297-2.9868 10.8164 0l1.8028-1.8028C19.0225.9952 16.4125 0 13.8027 0zM12 12c-.9956-.9956-.9956-2.6098 0-3.6055.9956-.9955 2.6098-.9955 3.6055 0 2.9867 2.9868 2.9867 7.8297 0 10.8164-2.9867 2.9868-7.8297 2.9868-10.8164 0l-1.8028 1.8028c3.9823 3.9822 10.4396 3.9822 14.4219 0 3.9823-3.9824 3.9823-10.4396 0-14.4219-.9956-.9956-2.3006-1.4922-3.6055-1.4922-1.3048 0-2.6099.4966-3.6054 1.4922-1.9912 1.9912-1.9912 5.2198 0 7.211z"/></svg>',
       playwright: '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#2EAD33" d="M8.4 8.2 5.4 17.2h2.3l.8-2.8h2.7l.8 2.8h2.3L11.6 8.2H8.4Zm1.1 4.8.8-2.4.8 2.4H9.5Z"/><path fill="#E2574C" d="M15.6 8.2 12.6 17.2h2.3l.8-2.8h2.7l.8 2.8h2.3L18.8 8.2h-3.2Zm1.1 4.8.8-2.4.8 2.4h-1.6Z"/><ellipse fill="#2EAD33" cx="9.5" cy="13.1" rx="1.1" ry="1.4"/><ellipse fill="#E2574C" cx="16.5" cy="13.1" rx="1.1" ry="1.4"/></svg>',
       logrocket: '<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5" fill="#764ABC"/><path fill="#FFFFFF" d="M12 7.4c2.7 0 4.9 2.2 4.9 4.9s-2.2 4.9-4.9 4.9-4.9-2.2-4.9-4.9 4.9-4.9 4.9-4.9Zm0 1.9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-3.2 7.4h6.4v1.5H8.8v-1.5Z"/></svg>',
       figma: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.5 3h3.5v6H8.5a3 3 0 1 1 0-6Zm3.5 6h3.5a3 3 0 1 0 0-6H12v6Zm0 0h3.5a3 3 0 1 1 0 6H12V9Zm-3.5 0H12v6H8.5a3 3 0 1 1 0-6ZM8.5 15H12v2.5A3.5 3.5 0 1 1 8.5 15Z"/></svg>',
@@ -16029,10 +16031,10 @@ const providerMarkAssets = {
 };
 
 const mascotAssets = {
-  idle: '/report/assets/viberaven-mascot.png?v=raven-cards-2',
-  fixing: '/report/assets/viberaven-mascot.png?v=raven-cards-2',
-  verified: '/report/assets/viberaven-mascot.png?v=raven-cards-2',
-  alert: '/report/assets/viberaven-mascot.png?v=raven-cards-2',
+  idle: '/manga/raven-mark.png?v=manga1',
+  fixing: '/manga/raven-mark.png?v=manga1',
+  verified: '/manga/raven-mark.png?v=manga1',
+  alert: '/manga/raven-mark.png?v=manga1',
 };
 
 const providerDashboardUrls = {
@@ -16268,10 +16270,22 @@ function providerAssetSrc(provider) {
   return providerMarkAssets[provider.id] || providerAssets[provider.id] || providerAssets.supabase;
 }
 
+function providerIconMarkup(provider) {
+  const iconHtml = provider && provider.iconHtml ? String(provider.iconHtml) : '';
+  if (iconHtml.trim()) return iconHtml;
+  // Fallback must still be the PROVIDER icon, never the raven card-art. Build the real logo
+  // from the provider id so a cold/offline boot shows Supabase/Vercel/etc, not a generic raven.
+  const id = provider && provider.id ? String(provider.id).toLowerCase().replace(/[^a-z0-9]/g, '') : '';
+  if (id) {
+    const color = String(areaEnergy(provider.area) || '#e8c15a').replace('#', '');
+    return '<img class="provider-logo__img" src="https://cdn.simpleicons.org/' + id + '/' + color + '" alt="" decoding="async" data-provider-logo-key="' + id + '" />';
+  }
+  return '<img src="' + providerAssetSrc(provider) + '" alt="" />';
+}
+
 function ProviderToken(provider, extraClass) {
   const className = 'vr-provider-token' + (extraClass ? ' ' + extraClass : '');
-  const iconHtml = provider && provider.iconHtml ? String(provider.iconHtml) : '';
-  return '<span class="' + className + '">' + (iconHtml.trim() ? iconHtml : '<img src="' + providerAssetSrc(provider) + '" alt="" />') + '</span>';
+  return '<span class="' + className + '">' + providerIconMarkup(provider) + '</span>';
 }
 
 function areaEnergy(area) {
@@ -16294,26 +16308,53 @@ function gradeMark(tier) {
   return '&#9679;';
 }
 
+// Full manga card art (shipped in assets/manga/cards). Providers with baked
+// art render the image as the whole face + a holographic foil overlay; the
+// rest fall back to the CSS-built card anatomy below.
+const MANGA_CARD_ARTS = { supabase: 1, vercel: 1, github: 1, posthog: 1, stripe: 1, resend: 1, sentry: 1, upstash: 1, clerk: 1, authjs: 1 };
+function cardArtSrc(provider) {
+  const id = provider && provider.id ? String(provider.id).toLowerCase().replace(/[^a-z0-9]/g, '') : '';
+  // ?v bump busts stale browser cache when a card art is redrawn
+  return MANGA_CARD_ARTS[id] ? '/manga/cards/' + id + '.webp?v=5' : '';
+}
+
 function TradingCard(provider, variant, options) {
   const opts = options || {};
   const size = variant === 'dealt' ? 'is-dealt' : variant === 'map' ? 'is-map' : 'is-hand';
   const grade = provider.grade || { value: null, tier: 'facedown', label: 'FACE DOWN' };
   const foil = escapeHtml(provider.id);
   const placedClass = opts.placed ? ' is-placed' : '';
+  const tagOpen = opts.asDiv ? 'div' : 'button type="button"';
+  const tagClose = opts.asDiv ? 'div' : 'button';
   if (grade.tier === 'facedown' && !opts.forceFace) {
-    return '<' + (opts.asDiv ? 'div' : 'button type="button"') + ' class="vr-tcard is-back ' + size + placedClass + '"' +
+    return '<' + tagOpen + ' class="vr-tcard is-back ' + size + placedClass + '"' +
       (opts.asDiv ? '' : ' data-action="deal-provider" data-provider="' + foil + '" aria-label="Flip ' + escapeHtml(provider.name) + ' \u2014 run its first checks" title="' + escapeHtml(provider.name) + ' \xB7 face down \u2014 click to flip"') +
       (opts.style ? ' style="' + opts.style + '"' : '') + '>' +
       '<span class="vr-tcard-backart"><img src="' + mascotAssets.idle + '" alt="" /></span>' +
       '<span class="vr-tcard-backname">' + escapeHtml(provider.name) + '</span>' +
-      '</' + (opts.asDiv ? 'div' : 'button') + '>';
+      '</' + tagClose + '>';
   }
   const flawless = grade.tier === 'flawless';
-  return '<' + (opts.asDiv ? 'div' : 'button type="button"') + ' class="vr-tcard ' + size + placedClass + (flawless ? ' is-flawless' : '') + '" data-foil="' + foil + '"' +
+  const artSrc = cardArtSrc(provider);
+  if (artSrc) {
+    // full-art face: the image IS the card; holo foil + glare ride on top,
+    // grade chip and RAVEN GRADE strip overlay the corners.
+    return '<' + tagOpen + ' class="vr-tcard has-art ' + size + placedClass + (flawless ? ' is-flawless' : '') + '" data-foil="' + foil + '"' +
+      (opts.asDiv ? '' : ' data-action="deal-provider" data-provider="' + foil + '" aria-label="Deal ' + escapeHtml(provider.name) + ' \u2014 checks run instantly in chat" title="' + escapeHtml(provider.name) + ' \xB7 ' + escapeHtml(grade.label) + '"') +
+      (opts.style ? ' style="' + opts.style + '"' : '') + '>' +
+      '<img class="vr-tcard-artfull" src="' + artSrc + '" alt="' + escapeHtml(provider.name) + '" draggable="false" />' +
+      '<span class="vr-tcard-holofoil" aria-hidden="true"></span>' +
+      '<span class="vr-tcard-glare" aria-hidden="true"></span>' +
+      (opts.placed ? '<span class="vr-tcard-unplace" data-action="unplace-card" data-unplace="' + foil + '" title="Remove from the table" role="button" aria-label="Remove from the table">&#10005;</span>' : '') +
+      '<span class="vr-tcard-hp is-onart"><span class="vr-tcard-energy" style="--vr-energy:' + areaEnergy(provider.area) + '"></span><i>' + (grade.value == null ? '?' : grade.value) + '</i></span>' +
+      '<span class="vr-tcard-gradebar">' + (flawless ? '&#10038; ' : '') + 'RAVEN GRADE &middot; ' + escapeHtml(grade.label) + '</span>' +
+      '</' + tagClose + '>';
+  }
+  return '<' + tagOpen + ' class="vr-tcard ' + size + placedClass + (flawless ? ' is-flawless' : '') + '" data-foil="' + foil + '"' +
     (opts.asDiv ? '' : ' data-action="deal-provider" data-provider="' + foil + '" aria-label="Deal ' + escapeHtml(provider.name) + ' \u2014 checks run instantly in chat" title="' + escapeHtml(provider.name) + ' \xB7 ' + escapeHtml(grade.label) + '"') +
     (opts.style ? ' style="' + opts.style + '"' : '') + '>' +
     '<span class="vr-tcard-sheen" aria-hidden="true"></span>' +
-    (opts.placed ? '<span class="vr-tcard-unplace" data-action="unplace-card" data-unplace="' + foil + '" title="Return to your hand" aria-hidden="true">&#10005;</span>' : '') +
+    (opts.placed ? '<span class="vr-tcard-unplace" data-action="unplace-card" data-unplace="' + foil + '" title="Remove from the table" role="button" aria-label="Remove from the table">&#10005;</span>' : '') +
     '<span class="vr-tcard-inner">' +
       '<span class="vr-tcard-head"><b>' + escapeHtml(provider.name) + '</b><span class="vr-tcard-hp"><span class="vr-tcard-energy" style="--vr-energy:' + areaEnergy(provider.area) + '" title="' + escapeHtml(String(provider.area || '')) + '"></span><i>' + (grade.value == null ? '?' : grade.value) + '</i></span></span>' +
       '<span class="vr-tcard-artwin"><span class="vr-tcard-holo" aria-hidden="true"></span>' + ProviderToken(provider, 'is-tcard') + '</span>' +
@@ -16426,6 +16467,15 @@ function dealProviderCard(providerId) {
   chat.messages.push(message);
   demo.notice = provider.name + ' dealt into chat \u2014 checks running.';
   render({ scrollToBottom: chatIndex });
+  const dealtAt = Date.now();
+  window.requestAnimationFrame(animateDealtCardIntoChat);
+  // The local check returns almost instantly; hold the results render until the
+  // deal animation has played, so it is actually visible (otherwise the full
+  // re-render replaces the animating card before you see it).
+  const renderAfterDeal = () => {
+    const wait = Math.max(0, 720 - (Date.now() - dealtAt));
+    window.setTimeout(() => render(), wait);
+  };
   fetch('/api/provider-check', {
     method: 'POST',
     headers: { 'content-type': 'application/json' },
@@ -16441,12 +16491,12 @@ function dealProviderCard(providerId) {
       message.done = true;
       const idx = providers.findIndex((item) => item.id === providerId);
       if (idx >= 0 && payload.provider) providers[idx] = normalizeProvider(payload.provider);
-      render();
+      renderAfterDeal();
     })
     .catch(() => {
       message.error = 'Could not reach the local server \u2014 is the Studio still running?';
       message.done = true;
-      render();
+      renderAfterDeal();
     });
 }
 
@@ -17501,6 +17551,17 @@ function runChatTask(kind, promptOverride) {
   clearChatTaskTimer();
   const chatIndex = Math.max(0, Math.min(demo.pickerChatIndex || 0, demo.activeChatCount - 1));
   const chat = chatContext(chatIndex);
+  // Product contract: installed is NOT enough \u2014 force Test connection before
+  // real agent control. If the selected CLI has not passed a connection probe,
+  // route to the Terminal setup instead of spawning it.
+  if (chat.cliId && chat.cliId !== 'terminal' && !cliAgentReady(chat.cliId)) {
+    const agentLabel = (cliAgents.find((item) => item.id === chat.cliId)?.label) || chat.cliId;
+    demo.pickerChatIndex = chatIndex;
+    demo.notice = 'Connect ' + agentLabel + ' first \u2014 run Test connection in the Terminal tab, then send your mission.';
+    selectTerminalCli(chat.cliId);
+    render();
+    return;
+  }
   const mission = resolveQuickActionMission(kind, chatIndex, promptOverride);
   const meta = taskMeta(kind, chatIndex);
   const attachedProviderId = chat.providerId || null;
@@ -17531,6 +17592,7 @@ function runChatTask(kind, promptOverride) {
     error: '',
     providerId: taskProviderId,
     releaseId: taskReleaseId,
+    startedAt: Date.now(),
   };
   if (chatIndex === 0) rememberRecentChat(label, provider, release, chat);
   chat.providerId = null;
@@ -17541,6 +17603,7 @@ function runChatTask(kind, promptOverride) {
   demo.activeStepId = kind === 'verify' ? 'verify' : kind === 'provider' ? 'provider' : 'agent';
   demo.notice = meta.notice;
   render({ scrollToBottom: chatIndex });
+  startTaskElapsedTimer();
   const finish = (message, isError, cardsPayload) => {
     const taskContext = chat.activeTask || {};
     const responseText = isError
@@ -18229,10 +18292,20 @@ function QuickstartModal() {
 
 function DiscoveryModal() {
   const found = providers.filter((provider) => provider.state !== 'not_detected');
-  const rankFor = (tier) => tier === 'flawless' ? ['legendary', 'LEGENDARY'] : tier === 'clear' ? ['epic', 'EPIC'] : ['rare', 'RARE'];
-  const cards = found.map((provider, index) => {
+  const hashRank = (id) => { let h = 0; for (let i = 0; i < id.length; i += 1) h = (h * 31 + id.charCodeAt(i)) >>> 0; return h; };
+  const rankFor = (provider) => {
     const tier = provider.grade ? provider.grade.tier : 'review';
-    const rank = rankFor(tier);
+    if (tier === 'flawless') return ['legendary', 'LEGENDARY'];
+    if (tier === 'clear') return ['epic', 'EPIC'];
+    // ungraded providers still deal a real pack spread (common..legendary)
+    const r = hashRank(provider.id) % 12;
+    if (r === 0) return ['legendary', 'LEGENDARY'];
+    if (r < 4) return ['epic', 'EPIC'];
+    if (r < 10) return ['rare', 'RARE'];
+    return ['common', 'COMMON'];
+  };
+  const cards = found.map((provider, index) => {
+    const rank = rankFor(provider);
     return '<div class="vr-discover-card' + (demo.flippedCards['disc:' + provider.id] ? ' is-flipped' : '') + '" data-flip-card data-flip-id="disc:' + escapeHtml(provider.id) + '" data-rank="' + rank[0] + '" style="--vr-i:' + String(index) + '">' +
       '<span class="vr-flip-inner">' +
         '<span class="vr-flip-back vr-tcard is-back is-dealt" data-action="flip-discover" role="button" tabindex="0" aria-label="Flip to reveal ' + escapeHtml(provider.name) + '">' +
@@ -18715,18 +18788,40 @@ function ChatMissionCards(cards, chatIndex, options, usedActions) {
   return html;
 }
 
+let taskElapsedTimer = null;
+function formatElapsed(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  return Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0');
+}
+function anyLaneWorking() {
+  return (demo.chatContexts || []).some((c) => c && c.activeTask && c.activeTask.phase === 'working' && c.activeTask.startedAt);
+}
+// Live heartbeat: while the agent runs, tick the elapsed clock every second so it never looks frozen.
+function startTaskElapsedTimer() {
+  if (taskElapsedTimer) return;
+  taskElapsedTimer = window.setInterval(() => {
+    if (!anyLaneWorking()) { window.clearInterval(taskElapsedTimer); taskElapsedTimer = null; return; }
+    document.querySelectorAll('[data-task-elapsed]').forEach((el) => {
+      const start = Number(el.getAttribute('data-task-elapsed')) || 0;
+      if (start) el.textContent = formatElapsed(Date.now() - start);
+    });
+  }, 1000);
+}
+
 function ChatTaskAnimation(chatIndex, compact) {
   const chat = chatContext(chatIndex);
   const task = chat.activeTask;
   if (!task || task.phase !== 'working') return '';
   const meta = taskMeta(task.kind);
   const statusText = task.kind === 'verify' ? 'Verifying...' : task.kind === 'diff' ? 'Reviewing...' : task.kind === 'explain' ? 'Explaining...' : 'Working...';
-  const thoughtText = 'reading launch context';
+  const thoughtText = 'reading your repo';
+  const started = task.startedAt || Date.now();
+  const elapsedHtml = '<span class="vr-task-elapsed" data-task-elapsed="' + started + '">' + formatElapsed(Date.now() - started) + '</span>';
   const compactClass = compact ? ' is-compact' : '';
   const rail = compact ? '' : '<div class="vr-task-rail" aria-hidden="true"><span></span></div>';
-  const detail = compact ? '' : '<p>' + escapeHtml(meta.line) + '</p>';
+  const detail = compact ? '' : '<p>' + escapeHtml(meta.line) + ' On a large repo this can take a minute.</p>';
   return '<section class="vr-chat-agent-task is-working' + compactClass + '" data-task="' + escapeHtml(task.kind) + '">' +
-    '<header><span class="vr-task-glyph" aria-hidden="true"></span><div><strong>' + escapeHtml(statusText) + '</strong><em>(' + escapeHtml(thoughtText) + ')</em></div><b>' + escapeHtml(meta.title) + '</b></header>' +
+    '<header><span class="vr-task-glyph" aria-hidden="true"></span><div><strong>' + escapeHtml(statusText) + '</strong><em>(' + escapeHtml(thoughtText) + ')</em></div>' + elapsedHtml + '<b>' + escapeHtml(meta.title) + '</b></header>' +
     rail +
     detail +
     '</section>';
@@ -18740,16 +18835,19 @@ function formatAgentOutput(value) {
     .filter((line) => !/^(OpenAI Codex v|workdir:|model:|provider:|approval:|sandbox:|reasoning effort:|reasoning summaries:|session id:|--------$|user$)/.test(line.trim()))
     .join('\\n')
     .trim();
-  if (/IneligibleTierError|UNSUPPORTED_CLIENT|no longer supported for Gemini Code Assist/i.test(clean)) {
+  // CLI-failure rewrites only apply to SHORT error output. A long real answer that merely
+  // mentions "auth"/"sign in" (e.g. a production auth review) must never be mistaken for one.
+  const compact = clean.length < 800;
+  if (compact && /IneligibleTierError|UNSUPPORTED_CLIENT|no longer supported for Gemini Code Assist/i.test(clean)) {
     return 'Gemini CLI is installed, but this account/client is not eligible for the current Gemini Code Assist CLI. Connect a supported Gemini CLI account, then retry this chat.';
   }
-  if (/not running in a trusted directory|--skip-trust|GEMINI_CLI_TRUST_WORKSPACE/i.test(clean)) {
+  if (compact && /not running in a trusted directory|--skip-trust|GEMINI_CLI_TRUST_WORKSPACE/i.test(clean)) {
     return 'Gemini CLI needs this project trusted for headless chat. VibeRaven now passes the trust flag for Gemini runs; retry after your Gemini account is eligible.';
   }
-  if (/command not found|not recognized as an internal or external command|ENOENT/i.test(clean)) {
+  if (compact && /command not found|not recognized as an internal or external command|ENOENT/i.test(clean)) {
     return 'The selected CLI is not available on PATH. Install it or sign in, then reconnect it from the chat header.';
   }
-  if (/authentication|not logged in|login required|sign in/i.test(clean)) {
+  if (compact && /not logged in|login required|not authenticated|authentication failed|unauthorized|please (run|sign|log)|run (codex|gemini|claude)[^\\n]{0,40}login/i.test(clean)) {
     return 'The selected CLI needs sign-in before VibeRaven can use it. Sign in with the CLI, then retry this mission.';
   }
   const missionIndex = clean.indexOf('User mission:');
@@ -19008,6 +19106,21 @@ function agentErrorPresentation(text) {
   return { headline: raw, raw: '' };
 }
 
+function looksLikeRawTranscript(text) {
+  const nonEmpty = String(text || '').split('\\n').filter((line) => line.trim());
+  if (nonEmpty.length < 24) return false;
+  let grepLike = 0;
+  let structured = 0;
+  nonEmpty.forEach((line) => {
+    const t = line.trim();
+    if (/:\\d+:\\s/.test(t) || /\\.(json|jsonl|ts|tsx|js|md|txt):\\d+/.test(t)) grepLike++;
+    if (/^#{1,3}\\s+/.test(t) || /^\\*\\*[^*]+\\*\\*/.test(t)) structured++;
+  });
+  if (grepLike >= 8) return true;
+  if (nonEmpty.length > 60 && structured <= 1) return true;
+  return false;
+}
+
 function renderAgentAnswerHtml(rawText, chatIndex, cards, isError, usedActions) {
   const tick = String.fromCharCode(96);
   const fence = tick + tick + tick;
@@ -19022,6 +19135,16 @@ function renderAgentAnswerHtml(rawText, chatIndex, cards, isError, usedActions)
       '</div>';
     }
   }
+  if (looksLikeRawTranscript(text)) {
+    const headline = isError
+      ? 'The agent explored your repo but did not finish with a clean summary.'
+      : 'The agent returned raw work instead of a summary.';
+    return '<div class="vr-agent-answer-body vr-agent-answer-raw">' +
+      '<p class="vr-agent-raw-headline">' + escapeHtml(headline) + '</p>' +
+      '<p class="vr-agent-raw-sub">Open the agent work below for the raw detail, or use Retry for a clean answer.</p>' +
+      agentWorkLogHtml(text) +
+    '</div>';
+  }
   const split = splitAgentTelemetry(text);
   const workLog = split.work ? agentWorkLogHtml(split.work) : '';
   let visibleText = dedupeAgentMarkdownBody(split.answer, cards);
@@ -19218,8 +19341,9 @@ function ChatAgentResponse(meta, responseText, isError, providerId, releaseId, k
     : '';
   return '<section class="vr-chat-message is-agent vr-chat-agent-response vr-hud-card is-' + statusTone + ' ' + (isError ? 'is-error' : 'is-ready') + '">' +
     '<header class="vr-hud-strip">' +
-      '<span class="vr-hud-avatar"><img src="' + mascotUrl() + '" alt="" /></span>' +
+      '<span class="vr-hud-avatar is-raven"><img src="/manga/emblem.png" alt="" /></span>' +
       '<strong>VibeRaven</strong>' +
+      '<span class="vr-hud-aibadge">AI AGENT</span>' +
       '<span class="vr-hud-status is-' + statusTone + '"><i></i>' + statusWord + '</span>' +
       via +
       '<b>Just now</b>' +
@@ -19273,7 +19397,7 @@ function ProviderCardMessage(message) {
   const provider = providers.find((item) => item.id === message.providerId);
   if (!provider) return '';
   const grade = message.grade || provider.grade || { value: null, tier: 'facedown', label: 'FACE DOWN' };
-  const rows = message.rows === null
+  const rows = !Array.isArray(message.rows)
     ? '<div class="vr-card-row is-running"><span>&#9676;</span> running checks&hellip;</div>'
     : message.rows.map((row) => {
         const ready = row.state === 'ready';
@@ -19362,8 +19486,8 @@ function renderChatMessages(chat, index) {
     }
     const meta = message.kind ? taskMeta(message.kind) : { title: 'VibeRaven Agent' };
     const messageId = String(index) + '-' + String(messageIndex);
-    return storyNode('is-agent' + (message.isError ? ' is-error' : ''),
-      Icon(storyIconFor(message.kind)),
+    return storyNode('is-agent has-raven' + (message.isError ? ' is-error' : ''),
+      '<img class="vr-raven-coin" src="/manga/emblem.png" alt="" />',
       ChatAgentResponse(meta, message.text, Boolean(message.isError), message.providerId, message.releaseId, message.kind, index, messageId, message.cards, { showPlan: demo.fixPlanExpandedChatIndex === index }));
   }).join('');
   return html;
@@ -19563,7 +19687,7 @@ function StudioChatLane(index) {
     (gateNotClear && introBlocker ? '<button class="vr-start-here-cta" type="button" data-action="start-agent-fix" data-chat-index="' + String(index) + '">' + Icon('bolt') + '<span>Fix it with the connected agent</span></button>' : '') +
     ChatEnvironmentConnectCard();
   const staticIntro = fresh
-    ? storyNode('is-agent is-intro', Icon('spark'), '<section class="vr-chat-message is-agent vr-chat-intro-message"><div><span><img src="' + mascotUrl() + '" alt="" /></span><p><strong>VibeRaven Agent</strong><b>Agent</b><em class="is-ready">Ready</em></p></div>' + introBody + '</section>')
+    ? storyNode('is-agent is-intro has-raven', '<img class="vr-raven-coin" src="/manga/emblem.png" alt="" />', '<section class="vr-chat-message is-agent vr-chat-intro-message"><div><span class="vr-intro-raven"><img src="/manga/emblem.png" alt="" /></span><p><strong>VibeRaven Agent</strong><b>Agent</b><em class="is-ready">Ready</em></p></div>' + introBody + '</section>')
     : '';
   return '<article class="vr-chat-lane ' + (secondary ? 'is-secondary' : 'is-primary') + '" data-chat-index="' + String(index) + '">' +
     (secondary ? '<button class="vr-chat-close" type="button" data-action="close-chat" data-chat-index="' + String(index) + '" aria-label="Close chat">' + Icon('x') + '</button>' : '') +
@@ -19735,23 +19859,32 @@ function worstProviderId() {
   return worst ? worst.id : null;
 }
 
+// Top-left plaque = the live table STATS (real repo/provider data), replacing
+// the old crimson ribbon. Compact stat cells so it fits the header row.
 function TablePlaque() {
   const gate = (currentState && currentState.gate) || {};
-  const stamp = gate.status === 'clear'
+  const gateClear = gate.status === 'clear';
+  const stamp = gateClear
     ? '<span class="vr-stamp is-mini is-clear">RAVEN &middot; CLEAR</span>'
     : gate.status === 'not_clear'
       ? '<span class="vr-stamp is-mini is-notyet">NOT YET</span>'
       : '<span class="vr-stamp is-mini is-idle">NOT SCANNED</span>';
   const detected = providers.filter((item) => item.state !== 'not_detected');
-  const flawless = detected.filter((item) => item.grade && item.grade.tier === 'flawless').length;
   const review = detected.filter((item) => item.grade && item.grade.tier === 'review').length;
   const graded = detected.filter((item) => item.grade && typeof item.grade.value === 'number');
   const avg = graded.length ? graded.reduce((sum, item) => sum + item.grade.value, 0) / graded.length : 0;
-  return '<div class="vr-table-ribbon" aria-hidden="true">' +
-    '<strong>' + escapeHtml(projectName()).toUpperCase() + '</strong>' + stamp +
-    '<span class="vr-ribbon-meter" title="Table grade \u2014 the average raven grade of your cards"><i style="width:' + Math.max(3, Math.round(avg * 10)) + '%"></i></span>' +
-    '<b>' + (graded.length ? avg.toFixed(1) : '&#8212;') + '</b>' +
-    '<em>' + String(detected.length) + ' in play &middot; ' + String(flawless) + ' flawless &middot; ' + String(review) + ' to review</em>' +
+  const dirty = (demo.worktree && Number(demo.worktree.dirtyCount)) || 0;
+  const cells = [
+    { label: 'Providers', value: String(detected.length), tone: 'gold' },
+    { label: 'Grade', value: graded.length ? avg.toFixed(1) : '&#8212;', tone: 'gold' },
+    { label: 'Review', value: String(review), tone: review > 0 ? 'orange' : 'muted' },
+    { label: 'Uncommitted', value: String(dirty), tone: dirty > 0 ? 'orange' : 'green' },
+  ];
+  return '<div class="vr-table-ribbon">' +
+    '<div class="vr-ribbon-brand"><strong>' + escapeHtml(projectName()).toUpperCase() + '</strong>' + stamp + '</div>' +
+    '<div class="vr-ribbon-stats">' +
+      cells.map((c) => '<span class="vr-ribbon-stat is-' + c.tone + '"><b>' + c.value + '</b><i>' + escapeHtml(c.label) + '</i></span>').join('') +
+    '</div>' +
     '</div>';
 }
 
@@ -20567,7 +20700,7 @@ function TableRail() {
     ['worktree', 'repo', 'Worktree'],
   ];
   return '<aside class="vr-left-context-rail is-table-rail" aria-label="Studio navigation">' +
-    '<span class="vr-rail-raven" title="VibeRaven"><img src="' + mascotAssets.idle + '" alt="VibeRaven" /></span>' +
+    '<span class="vr-rail-raven is-emblem" title="VibeRaven"><img src="/manga/emblem.png" alt="VibeRaven" /></span>' +
     '<button class="vr-rail-icon is-new" type="button" data-action="new-chat" title="New chat">' + Icon('plus') + '</button>' +
     '<button class="vr-rail-icon' + (demo.chatsFlyoutOpen ? ' is-active' : '') + '" type="button" data-action="toggle-chats-flyout" title="Recent chats">' + Icon('prompt') + '</button>' +
     '<span class="vr-rail-sep" aria-hidden="true"></span>' +
@@ -20664,12 +20797,118 @@ function closeComposerPopovers() {
   demo.dropActive = false;
 }
 
+// anime.js entrance for the region map: stagger the nodes in when the view opens.
+// The nodes are positioned with inline transform:translate(x,y), so we animate
+// OPACITY ONLY (never transform) and clear the inline value on complete. Gated by
+// a flag that resets when the view leaves, so it plays once per open, not on every
+// full re-render.
+let regionMapAnimated = false;
+function animateRegionMapOnce() {
+  const nodes = app.querySelectorAll('.vr-studio-architecture.is-region-map .vr-arch-node');
+  if (!nodes.length) { regionMapAnimated = false; return; }
+  if (regionMapAnimated || !window.anime || typeof window.anime.animate !== 'function') return;
+  regionMapAnimated = true;
+  const clear = () => nodes.forEach((n) => { n.style.opacity = ''; });
+  try {
+    window.anime.animate(nodes, {
+      opacity: [0, 1],
+      duration: 460,
+      delay: window.anime.stagger(34),
+      ease: 'out(2)',
+      onComplete: clear,
+    });
+  } catch (err) { clear(); }
+}
+
+// Release timeline (Versions view): stagger the version cards in when it opens.
+// The cards carry a --vr-rot rotation transform, so we animate OPACITY ONLY
+// (translate/scale would clobber the rotation) and clear it on complete. Gated
+// once per open like the region map.
+let releaseTimelineAnimated = false;
+function animateReleaseTimelineOnce() {
+  const spread = app.querySelector('.vr-version-spread');
+  if (!spread) { releaseTimelineAnimated = false; return; }
+  if (releaseTimelineAnimated || !window.anime || typeof window.anime.animate !== 'function') return;
+  const cards = app.querySelectorAll('.vr-version-spread .vr-vcard');
+  if (!cards.length) return;
+  releaseTimelineAnimated = true;
+  const clear = () => cards.forEach((c) => { c.style.opacity = ''; });
+  try {
+    window.anime.animate(cards, {
+      opacity: [0, 1],
+      duration: 440,
+      delay: window.anime.stagger(50),
+      ease: 'out(2)',
+      onComplete: clear,
+    });
+  } catch (err) { clear(); }
+}
+
+// Chat view: stagger the existing message rows in when the chat first shows, so
+// there is visible motion on the default view (opening / refreshing / switching
+// to chat). Story nodes have no positioning transform, so translateY is safe;
+// cleared on complete. Gated once per chat-view open (a new deal animates its own
+// card separately). Reset when leaving chat or when the transcript is empty.
+let chatEntranceAnimated = false;
+function animateChatEntranceOnce() {
+  if (demo.activeStudioTab !== 'chat') { chatEntranceAnimated = false; return; }
+  const nodes = app.querySelectorAll('.vr-chat-transcript .vr-story-node');
+  if (!nodes.length) { chatEntranceAnimated = false; return; }
+  if (chatEntranceAnimated || !window.anime || typeof window.anime.animate !== 'function') return;
+  chatEntranceAnimated = true;
+  const clear = () => nodes.forEach((n) => { n.style.opacity = ''; n.style.transform = ''; });
+  try {
+    window.anime.animate(nodes, {
+      opacity: [0, 1],
+      translateY: [14, 0],
+      duration: 440,
+      delay: window.anime.stagger(60),
+      ease: 'out(2)',
+      onComplete: clear,
+    });
+  } catch (err) { clear(); }
+}
+
+// Card dealt into chat: fade + scale + lift the newest provider-card message in.
+// Called only from dealProviderCard (not the generic render) so it plays once on
+// deal, not on the later check-complete re-render.
+function animateDealtCardIntoChat() {
+  if (!window.anime || typeof window.anime.animate !== 'function') return;
+  const cards = app.querySelectorAll('.vr-card-message');
+  const el = cards[cards.length - 1];
+  if (!el) return;
+  const clear = () => {
+    el.style.opacity = '';
+    el.style.transform = '';
+    el.style.scale = '';
+    el.style.rotate = '';
+    el.style.translate = '';
+    el.style.transformOrigin = '';
+  };
+  try {
+    el.style.transformOrigin = '18% 60%';
+    window.anime.animate(el, {
+      opacity: [0, 1],
+      scale: [0.55, 1],
+      translateY: [46, 0],
+      translateX: [-30, 0],
+      rotate: [-7, 0],
+      duration: 720,
+      ease: 'out(3)',
+      onComplete: clear,
+    });
+  } catch (err) { clear(); }
+}
+
 function render(options) {
   const opts = options || {};
   const scrollState = opts.preserveScroll === false ? null : readChatScrollState();
   stableModalRender = Boolean(demo.activeModal && demo.activeModal === lastRenderedModal);
   app.innerHTML = VibeShell();
   window.requestAnimationFrame(() => {
+    animateRegionMapOnce();
+    animateReleaseTimelineOnce();
+    animateChatEntranceOnce();
     if (opts.scrollToBottom != null) {
       restoreChatScrollState({}, { scrollToBottom: opts.scrollToBottom });
     } else if (scrollState) {
@@ -22085,6 +22324,7 @@ app.addEventListener('pointerdown', (event) => {
     offsetX: event.clientX - rect.left,
     offsetY: event.clientY - rect.top,
     width: rect.width,
+    height: rect.height,
     moved: false,
   };
 });
@@ -22098,7 +22338,9 @@ app.addEventListener('pointermove', (event) => {
     tableDragState.moved = true;
     const ghost = tableDragState.el.cloneNode(true);
     ghost.classList.add('vr-drag-ghost');
+    ghost.classList.remove('is-placed', 'is-hand');
     ghost.style.width = tableDragState.width + 'px';
+    ghost.style.height = tableDragState.height + 'px';
     document.body.appendChild(ghost);
     tableDragState.ghost = ghost;
     tableDragState.el.classList.add('is-drag-source');
@@ -22438,8 +22680,18 @@ app.addEventListener('scroll', (event) => {
 }, true);
 
 loadRecentChats();
+// Persistence: on refresh/reopen, restore the most recent chat so work is never lost.
+try {
+  const lastChat = recentChats[0];
+  if (lastChat && Array.isArray(lastChat.messages) && lastChat.messages.length) {
+    demo.activeRecentChatId = lastChat.id;
+    demo.activeChatCount = 1;
+    demo.chatContexts = [restoreRecentChat(lastChat)];
+    syncDemoFromChatContext(demo.chatContexts[0]);
+  }
+} catch { /* restore is best-effort */ }
 try {
-  if (!window.localStorage.getItem('vrOnboarded') && !currentState.empty && !demo.activeModal && window.location.search.indexOf('shot') < 0) {
+  if (!window.localStorage.getItem('vrOnboarded') && !demo.activeRecentChatId && !currentState.empty && !demo.activeModal && window.location.search.indexOf('shot') < 0) {
     demo.activeModal = 'quickstart';
   } else if (
     !window.localStorage.getItem('vrPackOpened') && !currentState.empty && !demo.activeModal &&
@@ -22497,28 +22749,30 @@ var init_appCss = __esm({
   "src/local-ui/static/appCss.ts"() {
     "use strict";
     localUiCss = `
+@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
 :root {
-  --vr-bg: #170709;
-  --vr-bg-2: #241012;
-  --vr-panel: rgba(40, 16, 18, 0.78);
-  --vr-panel-2: rgba(52, 22, 24, 0.7);
+  --vr-bg: #0b0b0d;
+  --vr-bg-2: #141418;
+  --vr-panel: rgba(20, 20, 24, 0.8);
+  --vr-panel-2: rgba(30, 30, 35, 0.72);
   --vr-border: rgba(232, 193, 90, 0.26);
   --vr-border-strong: rgba(232, 193, 90, 0.55);
-  --vr-text: #f7f2e9;
-  --vr-muted: #c49585;
+  --vr-text: #f4f1e8;
+  --vr-muted: #a89a86;
   --vr-purple: #e8c15a;
   --vr-purple-2: #ffd76e;
   --vr-blue: #8fa7ff;
   --vr-green: #22c55e;
   --vr-red: #ef4444;
   --vr-orange: #ffb84d;
-  --vr-glow-purple: 0 12px 32px rgba(0, 0, 0, 0.38);
-  --vr-glow-green: 0 12px 32px rgba(0, 0, 0, 0.38);
+  --vr-glow-purple: 0 12px 32px rgba(0, 0, 0, 0.5);
+  --vr-glow-green: 0 12px 32px rgba(0, 0, 0, 0.5);
   --vr-accent: #e8c15a;
   --vr-gold: #e8c15a;
   --vr-gold-bright: #ffe9ad;
-  --vr-plate: rgba(12, 6, 5, 0.85);
+  --vr-plate: rgba(10, 10, 12, 0.85);
   --vr-foil: linear-gradient(135deg, #fff3c4, #c98f2e 35%, #ffe9a8 55%, #8a5a1a 82%, #ffd76e);
+  --mg-display: 'Anton', 'Arial Narrow', sans-serif;
 }
 
 * { box-sizing: border-box; }
@@ -22527,6 +22781,8 @@ body {
   margin: 0;
   overflow: hidden;
   background: var(--vr-bg);
+  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1.4px);
+  background-size: 6px 6px;
   color: var(--vr-text);
   font-family: Geist, Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 14px;
@@ -22581,7 +22837,7 @@ a i[data-icon] {
   place-items: center;
   border: 1px solid rgba(148, 163, 184, 0.16);
   border-radius: 8px;
-  background: rgba(40, 14, 16, 0.72);
+  background: rgba(24, 22, 28, 0.72);
   color: #ffe9ad;
 }
 .vr-context-icon-chip.is-input {
@@ -22618,7 +22874,7 @@ a i[data-icon] {
 .vr-bottom-tip-bar {
   border: 1px solid var(--vr-border);
   background:
-    linear-gradient(180deg, rgba(40, 14, 16, 0.68), rgba(22, 7, 9, 0.7)),
+    linear-gradient(180deg, rgba(24, 22, 28, 0.68), rgba(13, 12, 16, 0.7)),
     var(--vr-panel);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
 }
@@ -22659,7 +22915,7 @@ a i[data-icon] {
   background:
     radial-gradient(circle at 42% 26%, rgba(34, 197, 94, 0.16), transparent 36%),
     radial-gradient(circle at 68% 76%, rgba(232, 193, 90, 0.5), transparent 54%),
-    linear-gradient(145deg, rgba(40, 14, 16, 0.98), rgba(22, 7, 9, 0.8));
+    linear-gradient(145deg, rgba(24, 22, 28, 0.98), rgba(13, 12, 16, 0.8));
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.08),
     0 0 28px rgba(0, 0, 0, 0);
@@ -22857,7 +23113,7 @@ a i[data-icon] {
   border-radius: 7px;
   background:
     radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.16), transparent 34%),
-    rgba(40, 14, 16, 0.78);
+    rgba(24, 22, 28, 0.78);
 }
 
 .vr-inline-brand-mark img {
@@ -22870,7 +23126,7 @@ a i[data-icon] {
 .vr-workspace-switcher > span {
   width: 28px;
   height: 28px;
-  border: 2px solid rgba(22, 7, 9, 0.9);
+  border: 2px solid rgba(13, 12, 16, 0.9);
   border-radius: 999px;
   background:
     radial-gradient(circle at 35% 28%, #f8fafc, transparent 10%),
@@ -22899,7 +23155,7 @@ a i[data-icon] {
   border-radius: 9px;
   background:
     linear-gradient(180deg, rgba(148, 163, 184, 0.050), rgba(14, 165, 233, 0.04)),
-    rgba(22, 7, 9, 0.34);
+    rgba(13, 12, 16, 0.34);
   padding: 7px 8px;
 }
 
@@ -23051,7 +23307,7 @@ a i[data-icon] {
   border-width: 0 0 1px;
   border-radius: 0;
   padding: 0 14px;
-  background: rgba(22, 7, 9, 0.52);
+  background: rgba(13, 12, 16, 0.52);
 }
 .vr-topbar-brand {
   display: inline-grid;
@@ -23366,7 +23622,7 @@ a i[data-icon] {
   border-width: 0 0 1px;
   border-radius: 0;
   padding: 0 28px;
-  background: rgba(22, 7, 9, 0.5);
+  background: rgba(13, 12, 16, 0.5);
 }
 
 .vr-project-id {
@@ -23762,7 +24018,7 @@ body:has(.vr-app.is-dragging) {
 .vr-new-chat-button kbd {
   border: 1px solid rgba(226, 232, 240, 0.12);
   border-radius: 6px;
-  background: rgba(22, 7, 9, 0.5);
+  background: rgba(13, 12, 16, 0.5);
   color: #cbd5e1;
   padding: 2px 6px;
   font: 10px/1.2 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
@@ -24115,7 +24371,7 @@ body:has(.vr-app.is-dragging) {
   margin: 8px 0 0;
   padding: 8px 10px;
   border-radius: 8px;
-  background: rgba(22, 7, 9, 0.72);
+  background: rgba(13, 12, 16, 0.72);
   overflow: auto;
 }
 .vr-cli-setup-step pre code {
@@ -24653,10 +24909,26 @@ body:has(.vr-app.is-dragging) {
   min-height: 32px;
   padding: 0 12px;
 }
-.vr-studio-chat:not(.is-split) .vr-chat-command-bar {
-  padding: 6px 0 0;
+/* Align the composer column with the chat messages. The transcript is a centered
+   max-width column (min(1440px, 100% - 64px)) with 54px side padding, and messages
+   are inset a further ~40px by the agent-avatar gutter. Match all of that here so
+   the composer lines up with the message cards at every viewport width. Higher
+   specificity (.vr-chat-lane) than the responsive command-bar padding passes. */
+.vr-studio-chat:not(.is-split) .vr-chat-lane .vr-chat-command-bar {
+  width: min(1440px, calc(100% - 64px));
+  max-width: min(1440px, calc(100% - 64px));
+  margin-inline: auto;
+  justify-self: center;
+  padding: 6px 54px 10px 94px;
   align-self: end;
 }
+/* Size the composer to the same width as the chat messages and left-align it, so
+   both edges line up with the cards (which are min(1120px, 100%)). */
+.vr-studio-chat:not(.is-split) .vr-chat-lane .vr-chat-command-bar > .vr-chat-composer {
+  width: min(1120px, 100%);
+  max-width: min(1120px, 100%);
+  justify-self: start;
+}
 .vr-studio-chat:not(.is-split) .vr-chat-command-bar > .vr-chat-composer {
   min-height: 92px;
   border-color: rgba(226, 232, 240, 0.16);
@@ -24711,7 +24983,7 @@ body:has(.vr-app.is-dragging) {
   height: 39px;
   object-fit: contain;
   transform: translateY(4px);
-  filter: drop-shadow(0 0 10px rgba(40, 14, 16, 0.75));
+  filter: drop-shadow(0 0 10px rgba(24, 22, 28, 0.75));
 }
 .vr-chat-transcript > header strong,
 .vr-chat-transcript > header em {
@@ -25093,7 +25365,7 @@ body:has(.vr-app.is-dragging) {
   margin: 0;
   padding: 8px 10px;
   border-radius: 8px;
-  background: rgba(22, 7, 9, 0.72);
+  background: rgba(13, 12, 16, 0.72);
   overflow: auto;
 }
 .vr-cli-connect-expand pre code {
@@ -25161,7 +25433,7 @@ body:has(.vr-app.is-dragging) {
   margin: 0;
   padding: 14px 16px;
   border-radius: 12px;
-  background: rgba(22, 7, 9, 0.82);
+  background: rgba(13, 12, 16, 0.82);
   border: 1px solid rgba(226, 232, 240, 0.1);
 }
 .vr-studio-terminal-log code {
@@ -25186,7 +25458,7 @@ body:has(.vr-app.is-dragging) {
   padding: 6px 12px;
   border-radius: 999px;
   border: 1px solid rgba(226, 232, 240, 0.14);
-  background: rgba(40, 14, 16, 0.72);
+  background: rgba(24, 22, 28, 0.72);
   color: #e2e8f0;
   font-size: 12px;
   cursor: pointer;
@@ -25336,10 +25608,17 @@ body:has(.vr-app.is-dragging) {
   position: relative;
   z-index: 1;
   display: grid;
-  grid-template-columns: 18px auto minmax(0, 1fr);
+  grid-template-columns: 18px auto auto minmax(0, 1fr);
   align-items: center;
   gap: 8px;
 }
+.vr-task-elapsed {
+  font-family: var(--vr-hud-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--vr-gold);
+  letter-spacing: 0.04em;
+}
 .vr-task-glyph {
   position: relative;
   width: 14px;
@@ -25453,6 +25732,11 @@ body:has(.vr-app.is-dragging) {
   display: inline;
   margin-left: 4px;
 }
+/* compact header only has 3 columns; the redundant title (<b>) would wrap to a
+   clipped second row ("...nges"), so drop it \u2014 the status word already says it. */
+.vr-chat-command-bar > .vr-chat-agent-task.is-compact header b {
+  display: none;
+}
 .vr-chat-agent-response {
   max-width: min(920px, 82%);
   display: grid;
@@ -25519,7 +25803,7 @@ body:has(.vr-app.is-dragging) {
   border-radius: 12px;
   background:
     radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.050), transparent 42%),
-    rgba(40, 14, 16, 0.62);
+    rgba(24, 22, 28, 0.62);
   padding: 10px 12px;
   min-width: 0;
 }
@@ -25551,7 +25835,7 @@ body:has(.vr-app.is-dragging) {
   border-color: rgba(34, 197, 94, 0.28);
   background:
     radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.12), transparent 42%),
-    rgba(40, 14, 16, 0.62);
+    rgba(24, 22, 28, 0.62);
 }
 .vr-agent-gate-strip[data-tone="clear"] svg {
   color: #86efac;
@@ -25560,7 +25844,7 @@ body:has(.vr-app.is-dragging) {
   border-color: rgba(248, 113, 113, 0.28);
   background:
     radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.1), transparent 42%),
-    rgba(40, 14, 16, 0.62);
+    rgba(24, 22, 28, 0.62);
 }
 .vr-agent-gate-strip[data-tone="blocked"] svg {
   color: #fca5a5;
@@ -25570,7 +25854,7 @@ body:has(.vr-app.is-dragging) {
   border-radius: 12px;
   background:
     radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.050), transparent 42%),
-    rgba(40, 14, 16, 0.55);
+    rgba(24, 22, 28, 0.55);
   padding: 12px 14px;
   display: grid;
   gap: 8px;
@@ -25656,7 +25940,7 @@ body:has(.vr-app.is-dragging) {
 .vr-agent-answer-body code {
   border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 6px;
-  background: rgba(40, 14, 16, 0.72);
+  background: rgba(24, 22, 28, 0.72);
   padding: 1px 6px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
@@ -26030,7 +26314,7 @@ body:has(.vr-app.is-dragging) {
   width: fit-content;
   border: 1px solid rgba(148, 163, 184, 0.22);
   border-radius: 999px;
-  background: rgba(40, 14, 16, 0.86);
+  background: rgba(24, 22, 28, 0.86);
   color: #e2e8f0;
   padding: 7px 12px;
 }
@@ -26141,7 +26425,7 @@ body:has(.vr-app.is-dragging) {
 .vr-provider-drop-zone > .vr-provider-drop-label {
   border: 1px dashed rgba(148, 163, 184, 0.22);
   border-radius: 999px;
-  background: rgba(22, 7, 9, 0.2);
+  background: rgba(13, 12, 16, 0.2);
   padding: 5px 10px;
 }
 .vr-provider-drop-zone.is-active > .vr-provider-drop-label {
@@ -26879,7 +27163,7 @@ body:has(.vr-app.is-dragging) {
   place-items: center;
   border: 1px solid rgba(120, 145, 190, 0.18);
   border-radius: 10px;
-  background: rgba(22, 7, 9, 0.44);
+  background: rgba(13, 12, 16, 0.44);
   color: var(--vr-text);
   transition:
     transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
@@ -27076,7 +27360,7 @@ body:has(.vr-app.is-dragging) {
 .vr-provider-card:hover .vr-provider-proof-chip,
 .vr-provider-card.is-selected .vr-provider-proof-chip {
   border-color: rgba(248, 250, 252, 0.22);
-  background: rgba(22, 7, 9, 0.72);
+  background: rgba(13, 12, 16, 0.72);
 }
 .vr-provider-proof-chip svg {
   width: 13px;
@@ -27405,7 +27689,7 @@ body:has(.vr-app.is-dragging) {
   border: 1px solid rgba(120, 145, 190, 0.15);
   border-radius: 9px;
   background:
-    linear-gradient(180deg, rgba(40, 14, 16, 0.64), rgba(8, 13, 24, 0.7));
+    linear-gradient(180deg, rgba(24, 22, 28, 0.64), rgba(8, 13, 24, 0.7));
   color: var(--vr-text);
   padding: 8px 10px;
   text-align: left;
@@ -27652,7 +27936,7 @@ body:has(.vr-app.is-dragging) {
   border-radius: 999px;
   background:
     radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.22), transparent 46%),
-    rgba(40, 14, 16, 0.78);
+    rgba(24, 22, 28, 0.78);
   box-shadow: 0 0 14px rgba(34, 197, 94, 0.2);
 }
 .vr-agent-will span i::before {
@@ -27801,7 +28085,7 @@ body:has(.vr-app.is-dragging) {
   gap: 7px;
   border: 1px solid rgba(120, 145, 190, 0.2);
   border-radius: 9px;
-  background: rgba(22, 7, 9, 0.38);
+  background: rgba(13, 12, 16, 0.38);
   color: #dbeafe;
   padding: 0 10px;
   text-decoration: none;
@@ -27912,9 +28196,13 @@ body:has(.vr-app.is-dragging) {
     radial-gradient(circle at 72% 16%, rgba(34, 197, 94, 0.12), transparent 24%),
     linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px),
-    rgba(1, 4, 13, 0.78);
+    rgba(1, 4, 13, 0.86);
   background-size: auto, auto, 42px 42px, 42px 42px, auto;
-  backdrop-filter: blur(18px);
+  /* NOTE: no backdrop-filter here. A full-viewport backdrop-filter: blur()
+     renders as SOLID BLACK on many real Windows GPU/driver combos (Intel/ANGLE),
+     blacking out the whole Studio whenever a modal (e.g. the welcome modal) is
+     open. Headless/software raster hides the bug. The dark base layer above
+     gives the same focus without the GPU hazard. Do not re-add blur here. */
   animation: vrModalFade 180ms ease-out both;
 }
 
@@ -27933,7 +28221,7 @@ body:has(.vr-app.is-dragging) {
     radial-gradient(circle at 80% 15%, rgba(148, 163, 184, 0.050), transparent 27%),
     radial-gradient(circle at 19% 8%, rgba(56, 189, 248, 0.12), transparent 24%),
     radial-gradient(circle at 74% 70%, rgba(34, 197, 94, 0.08), transparent 28%),
-    linear-gradient(180deg, rgba(13, 20, 43, 0.98), rgba(22, 7, 9, 0.995));
+    linear-gradient(180deg, rgba(13, 20, 43, 0.98), rgba(13, 12, 16, 0.995));
   box-shadow:
     0 0 0 1px rgba(255, 233, 173, 0.12),
     0 0 70px rgba(0, 0, 0, 0),
@@ -27959,7 +28247,7 @@ body:has(.vr-app.is-dragging) {
 }
 
 .vr-modal-card::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(22, 7, 9, 0.92);
+  border: 3px solid rgba(13, 12, 16, 0.92);
   border-radius: 999px;
   background: rgba(148, 163, 184, 0.4);
 }
@@ -28043,7 +28331,7 @@ body:has(.vr-app.is-dragging) {
   border: 1px solid rgba(96, 122, 177, 0.24);
   border-radius: 18px;
   background:
-    linear-gradient(90deg, rgba(148, 163, 184, 0.050), rgba(8, 17, 34, 0.48) 46%, rgba(40, 14, 16, 0.08)),
+    linear-gradient(90deg, rgba(148, 163, 184, 0.050), rgba(8, 17, 34, 0.48) 46%, rgba(24, 22, 28, 0.08)),
     radial-gradient(circle at 86% 42%, rgba(148, 163, 184, 0.050), transparent 32%);
   padding: 22px 34px 22px 22px;
   padding-right: 34px;
@@ -28318,7 +28606,7 @@ body:has(.vr-app.is-dragging) {
 .vr-modal-checks li.pending > span,
 .vr-modal-tasklist li.pending > span {
   border-color: rgba(96, 122, 177, 0.7);
-  background: rgba(40, 14, 16, 0.5);
+  background: rgba(24, 22, 28, 0.5);
   box-shadow: none;
 }
 
@@ -28411,7 +28699,7 @@ body:has(.vr-app.is-dragging) {
   border: 1px solid rgba(96, 122, 177, 0.28);
   border-radius: 16px;
   background:
-    linear-gradient(180deg, rgba(40, 14, 16, 0.86), rgba(7, 16, 33, 0.94));
+    linear-gradient(180deg, rgba(24, 22, 28, 0.86), rgba(7, 16, 33, 0.94));
   padding: 18px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
@@ -28621,7 +28909,7 @@ body:has(.vr-app.is-dragging) {
   margin: 0 0 10px;
   border: 1px solid rgba(148, 163, 184, 0.14);
   border-radius: 12px;
-  background: rgba(40, 14, 16, 0.38);
+  background: rgba(24, 22, 28, 0.38);
   padding: 10px 12px;
 }
 
@@ -28653,7 +28941,7 @@ body:has(.vr-app.is-dragging) {
   align-items: start;
   padding: 9px 11px;
   border-radius: 10px;
-  background: rgba(40, 14, 16, 0.38);
+  background: rgba(24, 22, 28, 0.38);
   border: 1px solid rgba(148, 163, 184, 0.13);
   color: #e2e8f0;
   line-height: 1.35;
@@ -28859,7 +29147,7 @@ body:has(.vr-app.is-dragging) {
   border-radius: 12px;
   background:
     radial-gradient(circle at 0% 50%, rgba(148, 163, 184, 0.050), transparent 36%),
-    rgba(22, 7, 9, 0.5);
+    rgba(13, 12, 16, 0.5);
   color: var(--vr-text);
   padding: 0 16px;
   text-align: left;
@@ -28901,7 +29189,7 @@ body:has(.vr-app.is-dragging) {
   border-radius: 14px;
   background:
     radial-gradient(circle at 86% 0%, rgba(148, 163, 184, 0.050), transparent 34%),
-    linear-gradient(180deg, rgba(40, 14, 16, 0.96), rgba(22, 7, 9, 0.96));
+    linear-gradient(180deg, rgba(24, 22, 28, 0.96), rgba(13, 12, 16, 0.96));
   padding: 18px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
@@ -30346,7 +30634,7 @@ body:has(.vr-app.is-dragging) {
   border-color: rgba(239, 68, 68, 0.38);
   background:
     radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.12), transparent 210px),
-    linear-gradient(135deg, rgba(31, 14, 18, 0.9), rgba(13, 16, 24, 0.94));
+    linear-gradient(135deg, rgba(20, 19, 24, 0.9), rgba(13, 16, 24, 0.94));
 }
 
 .vr-chat-agent-response > div:first-child {
@@ -31812,13 +32100,19 @@ div.vr-branch-row {
    painted once as body background layers (no extra composited layers).
    PERF: tiles stay >= 22px and no backdrop-filter, ever. */
 body {
-  background-color: var(--vr-bg);
+  /* manga skin: clean ink base. The full-bleed speed-line art was removed \u2014
+     it read as disconnected wallpaper behind the chat. Just a fine screentone
+     dot grid + a faint gold glow at the top edge. */
+  background-color: #0a0a0d;
   background-image:
-    radial-gradient(circle, rgba(255, 210, 110, 0.05) 1.2px, transparent 1.5px),
-    radial-gradient(ellipse 65% 50% at 22% 0%, rgba(255, 80, 70, 0.2), transparent 65%),
-    radial-gradient(ellipse 50% 45% at 90% 38%, rgba(255, 170, 60, 0.14), transparent 65%),
-    radial-gradient(ellipse 55% 40% at 55% 108%, rgba(200, 40, 50, 0.14), transparent 65%);
-  background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%;
+    radial-gradient(circle, rgba(255, 255, 255, 0.035) 1.2px, transparent 1.5px),
+    radial-gradient(ellipse 72% 46% at 50% -6%, rgba(232, 193, 90, 0.05), transparent 62%);
+  background-size: 24px 24px, 100% 100%;
+  background-position: 0 0, center;
+  background-repeat: repeat, no-repeat;
+  /* scroll, not fixed: body never scrolls (overflow:hidden) so it looks
+     identical, and fixed-attachment on the large art stalls headless capture. */
+  background-attachment: scroll, scroll, scroll;
 }
 
 /* Glow buttons become solid, quiet primaries. */
@@ -33795,7 +34089,7 @@ body {
    ========================================================================== */
 :root {
   --vr-hud-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
-  --vr-hud-surface: rgba(23, 7, 9, 0.92);
+  --vr-hud-surface: rgba(13, 12, 16, 0.92);
   --vr-hud-line: rgba(232, 193, 90, 0.16);
 }
 
@@ -33911,6 +34205,20 @@ body {
   word-break: break-word;
 }
 
+/* Raw transcript guard: agent dumped grep/tool output instead of a clean answer.
+   Show a themed headline + collapse the raw lines into the work log. */
+.vr-agent-answer-raw { display: flex; flex-direction: column; gap: 6px; }
+.vr-agent-raw-headline {
+  margin: 0;
+  font-weight: 700;
+  color: var(--vr-gold-bright);
+}
+.vr-agent-raw-sub {
+  margin: 0 0 4px;
+  font-size: 12px;
+  color: var(--vr-muted);
+}
+
 /* Retire legacy state styling: the frame never changes with state.
    Only the three non-rail sides \u2014 border-left stays the signal color. */
 .vr-chat-agent-response.is-ready,
@@ -34824,7 +35132,7 @@ button.vr-chat-gate-chip.vr-stamp i { display: none; }
    Provider dots and version chips are untouched by design.
    ========================================================================== */
 :root {
-  --vr-display: "Bahnschrift SemiCondensed", "Bahnschrift", "Avenir Next Condensed", "Arial Narrow", "Segoe UI", sans-serif;
+  --vr-display: "Anton", "Bahnschrift SemiCondensed", "Bahnschrift", "Avenir Next Condensed", "Arial Narrow", "Segoe UI", sans-serif;
   --vr-ink: rgba(232, 193, 90, 0.6);
 }
 
@@ -34903,13 +35211,15 @@ button.vr-chat-gate-chip.vr-stamp i { display: none; }
    HUD layer: full conversion \u2014 the display voice and flat tags everywhere.
    ========================================================================== */
 
-/* Every button in the shell speaks the display voice (stamps stay mono). */
+/* Buttons default to the READABLE sans (was condensed display caps \u2014 the #1
+   readability complaint). Marquee buttons (tabs, big CTAs) opt back into Anton
+   via their own higher-specificity rules in the readability pass. */
 .vr-composed-shell button:not(.vr-stamp),
 .vr-modal-card button:not(.vr-stamp),
 .vr-composed-shell .vr-agent-inline-action {
-  font-family: var(--vr-display);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  font-family: var(--vr-hud-sans, 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
+  text-transform: none;
+  letter-spacing: 0.01em;
 }
 
 /* Kill the pill: every badge/chip/tag becomes a flat mono tag.
@@ -35288,7 +35598,7 @@ button.vr-tcard { appearance: none; }
   border: 2.5px solid #a8743a;
   background:
     radial-gradient(circle at 50% 42%, rgba(232, 193, 90, 0.12), transparent 60%),
-    repeating-linear-gradient(45deg, #241012, #241012 7px, #2e1517 7px, #2e1517 14px);
+    repeating-linear-gradient(45deg, #141418, #141418 7px, #1b1b22 7px, #1b1b22 14px);
   align-items: center;
   justify-content: center;
   gap: 6px;
@@ -35343,10 +35653,10 @@ button.vr-tcard { appearance: none; }
 }
 
 .vr-tcard[data-foil='sentry'] {
-  background: linear-gradient(160deg, #ffe3ea, #c2405e 30%, #ffd4de 52%, #7a1c30 78%, #ffd76e);
+  background: linear-gradient(160deg, #ffe3ea, #c2405e 30%, #ffd4de 52%, #343040 78%, #ffd76e);
 }
 .vr-tcard[data-foil='sentry'] .vr-tcard-artwin {
-  background: radial-gradient(circle at 50% 42%, #5a2033, #170a10 78%);
+  background: radial-gradient(circle at 50% 42%, #2b2732, #170a10 78%);
 }
 .vr-tcard[data-foil='sentry'] .vr-tcard-artwin .vr-provider-token.is-tcard {
   filter: drop-shadow(0 0 9px #ff8fa8);
@@ -35494,7 +35804,7 @@ button.vr-tcard { appearance: none; }
   place-items: center;
   border: 1.5px solid var(--vr-border);
   border-radius: 10px;
-  background: rgba(23, 7, 9, 0.55);
+  background: rgba(13, 12, 16, 0.55);
   color: var(--vr-muted);
   cursor: pointer;
   transition: border-color 100ms ease, color 100ms ease, transform 100ms ease;
@@ -35557,7 +35867,7 @@ button.vr-tcard { appearance: none; }
   padding: 12px;
   border: 2.5px solid var(--vr-gold);
   border-radius: 50%;
-  background: radial-gradient(circle at 40% 35%, #3a1216, #170709);
+  background: radial-gradient(circle at 40% 35%, #17171c, #0b0b0d);
   box-shadow: 0 0 16px rgba(232, 193, 90, 0.3);
   transition: transform 120ms ease, box-shadow 120ms ease;
 }
@@ -35583,7 +35893,7 @@ button.vr-tcard { appearance: none; }
   border: none;
   border-radius: 0;
   background:
-    radial-gradient(ellipse 65% 50% at 25% 0%, rgba(255, 80, 70, 0.2), transparent 65%),
+    radial-gradient(ellipse 65% 50% at 25% 0%, rgba(232, 193, 90, 0.2), transparent 65%),
     radial-gradient(ellipse 50% 45% at 88% 75%, rgba(255, 170, 60, 0.14), transparent 65%),
     var(--vr-bg);
 }
@@ -35663,11 +35973,11 @@ button.vr-tcard { appearance: none; }
   inset: 8px 12px 6px 4px;
   border-radius: 30px;
   background:
-    radial-gradient(ellipse 85% 75% at 50% 42%, rgba(66, 20, 24, 0.92), rgba(34, 10, 12, 0.96) 78%),
-    #1c080a;
+    radial-gradient(ellipse 85% 75% at 50% 42%, rgba(24, 24, 30, 0.92), rgba(12, 12, 16, 0.96) 78%),
+    #0e0e12;
   border: 2px solid rgba(232, 193, 90, 0.32);
   box-shadow:
-    inset 0 0 0 7px rgba(52, 24, 14, 0.95),
+    inset 0 0 0 7px rgba(26, 24, 30, 0.95),
     inset 0 0 0 9px rgba(232, 193, 90, 0.14),
     inset 0 0 90px rgba(0, 0, 0, 0.55),
     0 24px 60px rgba(0, 0, 0, 0.55);
@@ -35871,7 +36181,7 @@ button.vr-tcard { appearance: none; }
   padding: 10px 14px;
   border: 1.5px solid rgba(255, 184, 77, 0.55);
   border-radius: 10px;
-  background: rgba(60, 34, 8, 0.5);
+  background: rgba(34, 30, 24, 0.5);
   color: var(--vr-text);
   font-size: 12.5px;
 }
@@ -36059,7 +36369,7 @@ button.vr-tcard { appearance: none; }
 /* chats flyout: opaque, above the table views, clicks land on it */
 .vr-left-context-rail.is-table-rail { z-index: 60; }
 .vr-chats-flyout {
-  background: #1c080a;
+  background: #0e0e12;
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(232, 193, 90, 0.12);
   z-index: 90;
 }
@@ -36107,7 +36417,7 @@ button.vr-tcard { appearance: none; }
   background:
     linear-gradient(160deg, rgba(232, 193, 90, 0.12), transparent 45%),
     var(--vr-plate);
-  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1.5px rgba(20, 8, 6, 0.9), inset 0 0 0 2.5px rgba(232, 193, 90, 0.2);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1.5px rgba(15, 14, 18, 0.9), inset 0 0 0 2.5px rgba(232, 193, 90, 0.2);
   padding: 10px 12px;
 }
 .vr-studio-architecture.is-region-map .vr-arch-node:not(.is-card) strong {
@@ -36117,7 +36427,7 @@ button.vr-tcard { appearance: none; }
 }
 .vr-studio-architecture.is-region-map .vr-arch-node:not(.is-card):hover {
   border-color: var(--vr-gold);
-  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 16px rgba(232, 193, 90, 0.25), inset 0 0 0 1.5px rgba(20, 8, 6, 0.9), inset 0 0 0 2.5px rgba(232, 193, 90, 0.3);
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 16px rgba(232, 193, 90, 0.25), inset 0 0 0 1.5px rgba(15, 14, 18, 0.9), inset 0 0 0 2.5px rgba(232, 193, 90, 0.3);
 }
 /* chat messages wear the card chrome */
 .vr-chat-message.is-agent.vr-hud-card,
@@ -36253,7 +36563,7 @@ button.vr-tcard { appearance: none; }
   background-size: 7px 7px;
 }
 .vr-qs-card[data-step='1'] .vr-qs-art { background: radial-gradient(circle at 50% 42%, #1f5a35, #08170e 78%); }
-.vr-qs-card[data-step='3'] .vr-qs-art { background: radial-gradient(circle at 50% 42%, #5a1c22, #170608 78%); }
+.vr-qs-card[data-step='3'] .vr-qs-art { background: radial-gradient(circle at 50% 42%, #2b2732, #170608 78%); }
 .vr-qs-card[data-step='4'] .vr-qs-art { background: radial-gradient(circle at 50% 42%, #1c3a5a, #060e17 78%); }
 .vr-qs-glyph { position: relative; }
 .vr-qs-glyph i[data-icon] { width: 30px; height: 30px; color: #ffe9ad; filter: drop-shadow(0 0 9px rgba(255, 233, 173, 0.8)); }
@@ -36440,10 +36750,10 @@ button.vr-tcard { appearance: none; }
    ========================================================================== */
 .vr-studio-architecture.is-region-map {
   background:
-    radial-gradient(ellipse 85% 75% at 50% 42%, rgba(66, 20, 24, 0.92), rgba(34, 10, 12, 0.96) 78%),
-    #1c080a;
+    radial-gradient(ellipse 85% 75% at 50% 42%, rgba(24, 24, 30, 0.92), rgba(12, 12, 16, 0.96) 78%),
+    #0e0e12;
   box-shadow:
-    inset 0 0 0 7px rgba(52, 24, 14, 0.95),
+    inset 0 0 0 7px rgba(26, 24, 30, 0.95),
     inset 0 0 0 9px rgba(232, 193, 90, 0.14),
     inset 0 0 90px rgba(0, 0, 0, 0.55);
   border-radius: 22px;
@@ -36649,7 +36959,7 @@ button.vr-tcard { appearance: none; }
   width: min(460px, 92%);
   border: 2px solid var(--vr-border-strong);
   border-radius: 14px;
-  background: #1c080a;
+  background: #0e0e12;
   box-shadow: 0 22px 48px rgba(0, 0, 0, 0.7), 0 0 24px rgba(232, 193, 90, 0.15);
   overflow: hidden;
 }
@@ -36790,32 +37100,54 @@ button.vr-tcard { appearance: none; }
   z-index: 25;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 14px;
   margin: 0;
-  padding: 4px 14px;
-  border: 1.5px solid rgba(232, 193, 90, 0.24);
-  border-radius: 999px;
-  background: rgba(20, 7, 8, 0.62);
-  pointer-events: none;
+  padding: 5px 8px 5px 4px;
+  border: 0;
+  background: none;
   white-space: nowrap;
   max-width: 100%;
   overflow: hidden;
 }
+.vr-ribbon-brand { display: flex; align-items: center; gap: 8px; }
 .vr-table-ribbon strong {
-  font-family: var(--vr-display);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 2px;
-  color: var(--vr-gold-bright);
+  font-family: var(--mg-display);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 1.5px;
+  color: var(--vr-text);
+}
+/* the stats row that replaced the old crimson ribbon text */
+.vr-ribbon-stats { display: flex; align-items: stretch; gap: 0; }
+.vr-ribbon-stat {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 2px 13px;
+  border-left: 1px solid var(--vr-border);
+}
+.vr-ribbon-stat:first-child { border-left: 0; }
+.vr-ribbon-stat b {
+  font-family: var(--mg-display);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--vr-text);
 }
-.vr-table-ribbon em {
+.vr-ribbon-stat i {
   font-style: normal;
+  margin-top: 3px;
   font-family: var(--vr-hud-mono);
-  font-size: 8px;
-  letter-spacing: 1.4px;
-  color: var(--vr-muted);
+  font-size: 8.5px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
+  color: var(--vr-muted);
 }
+.vr-ribbon-stat.is-gold b { color: var(--vr-gold-bright); }
+.vr-ribbon-stat.is-green b { color: var(--vr-green); }
+.vr-ribbon-stat.is-orange b { color: var(--vr-orange); }
+.vr-ribbon-stat.is-muted b { color: rgba(244, 241, 232, 0.55); }
 .vr-chat-lane.is-primary .vr-chat-transcript { padding-top: 16px; }
 
 /* -- the card dock: a SLIM strip on the table rim, like a real card game.
@@ -37396,6 +37728,29 @@ button.vr-tcard { appearance: none; }
 .vr-discover-card.is-flipped[data-rank='legendary'] .vr-flip-face .vr-tcard { animation: vr-reveal-legendary 1100ms ease-out 240ms both; }
 .vr-discover-card.is-flipped[data-rank='epic'] .vr-flip-face .vr-tcard { animation: vr-reveal-epic 1100ms ease-out 240ms both; }
 .vr-discover-card.is-flipped[data-rank='rare'] .vr-flip-face .vr-tcard { animation: vr-reveal-rare 1100ms ease-out 240ms both; }
+/* --- pack-opening polish --- */
+/* contain the collector raven so it never overlaps the first card + separate the header */
+.vr-modal-discover .vr-qs-head {
+  align-items: center;
+  gap: 16px;
+  margin: 0 0 16px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid rgba(255, 215, 110, 0.14);
+}
+.vr-modal-discover .vr-qs-raven { width: 72px; height: 72px; }
+/* COMMON tier (silver) so the pack reads like a real spread, not all-RARE */
+.vr-discover-card[data-rank='common'] .vr-discover-rank { color: #cbd5e1; text-shadow: 0 0 6px rgba(148, 163, 184, 0.55); }
+@keyframes vr-reveal-common {
+  0% { box-shadow: 0 0 0 rgba(148, 163, 184, 0); }
+  35% { box-shadow: 0 0 24px rgba(203, 213, 225, 0.55), 0 0 48px rgba(148, 163, 184, 0.28); }
+  100% { box-shadow: 0 0 8px rgba(148, 163, 184, 0.22); }
+}
+.vr-discover-card.is-flipped[data-rank='common'] .vr-flip-face .vr-tcard { animation: vr-reveal-common 1000ms ease-out 240ms both; }
+/* Hearthstone-style: a rare pull jumps forward as it flips (not on stable re-renders) */
+.vr-modal-card:not(.is-stable-render) .vr-discover-card.is-flipped[data-rank='legendary'] { animation: vr-pop-hi 720ms cubic-bezier(0.2, 1.5, 0.3, 1) 180ms both; z-index: 5; }
+.vr-modal-card:not(.is-stable-render) .vr-discover-card.is-flipped[data-rank='epic'] { animation: vr-pop-mid 660ms cubic-bezier(0.2, 1.45, 0.3, 1) 180ms both; z-index: 4; }
+@keyframes vr-pop-hi { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.16); } }
+@keyframes vr-pop-mid { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.1); } }
 .vr-discover-take {
   border-color: var(--vr-gold-bright) !important;
   background: var(--vr-gold-bright) !important;
@@ -37413,7 +37768,7 @@ button.vr-tcard { appearance: none; }
   background:
     radial-gradient(circle at 50% 42%, rgba(232, 193, 90, 0.35), rgba(232, 193, 90, 0.08) 32%, transparent 44%),
     repeating-radial-gradient(circle at 50% 42%, rgba(232, 193, 90, 0.1) 0 2px, transparent 2px 10px),
-    radial-gradient(ellipse at 50% 44%, #3a1216, #1c080a 82%);
+    radial-gradient(ellipse at 50% 44%, #17171c, #0e0e12 82%);
 }
 .vr-qs-back img { width: 54px; height: 54px; opacity: 0.9; }
 .vr-qs-back b {
@@ -37514,8 +37869,8 @@ button.vr-tcard { appearance: none; }
   background:
     radial-gradient(circle at 50% 44%, rgba(232, 193, 90, 0.42), rgba(232, 193, 90, 0.1) 36%, transparent 50%),
     repeating-radial-gradient(circle at 50% 44%, rgba(232, 193, 90, 0.1) 0 2px, transparent 2px 11px),
-    conic-gradient(from 210deg at 50% 46%, #240c0f, #451519 22%, #2a0d10 48%, #3f1317 74%, #240c0f),
-    #1c080a;
+    conic-gradient(from 210deg at 50% 46%, #17171d, #232329 22%, #18181f 48%, #20202a 74%, #17171d),
+    #0e0e12;
 }
 .vr-tcard.is-back::after {
   content: '';
@@ -37572,117 +37927,2295 @@ button.vr-tcard { appearance: none; }
   margin: 0;
 }
 .vr-discover-grid { gap: 40px 14px; padding-bottom: 30px; }
-`;
-  }
-});
 
-// src/local-ui/static/appHtml.ts
-function escapeJsonForHtml(value) {
-  return JSON.stringify(value).replace(/</g, "\\u003c");
+/* ==========================================================================
+   manga ink pass \u2014 the display voice becomes Anton. The HUD layer above set
+   headings to Bahnschrift (a generic condensed); this final override swaps the
+   marquee surfaces to the real loaded poster face so the Studio reads manga,
+   not "condensed sans." Buttons and small labels stay Bahnschrift for
+   legibility \u2014 Anton at 11px all-caps turns to mud.
+   ========================================================================== */
+.vr-composed-shell h1,
+.vr-composed-shell h2,
+.vr-composed-shell h3,
+.vr-modal-card h2,
+.vr-modal-card h3,
+.vr-quickstrike header,
+.vr-rail-launcher strong,
+.vr-arch-node > div strong,
+.vr-studio-architecture.is-region-map .vr-arch-node:not(.is-card) strong,
+.vr-card-portrait strong {
+  font-family: var(--mg-display);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  font-weight: 400;
+  /* faint gold ink bleed so the poster type sits on the felt, not above it */
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
 }
-function renderLocalUiHtml(state) {
-  return `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#050816" />
-    <title>VibeRaven</title>
-    <link rel="icon" type="image/png" href="/report/assets/viberaven-favicon.png?v=raven-cards-3" />
-    <link rel="shortcut icon" type="image/png" href="/report/assets/viberaven-favicon.png?v=raven-cards-3" />
-    <link rel="apple-touch-icon" href="/report/assets/viberaven-favicon.png?v=raven-cards-3" />
-    <link rel="preload" as="image" href="/report/assets/viberaven-mascot.png?v=raven-cards-2" />
-    <style>${localUiCss}</style>
-  </head>
-  <body>
-    <div id="vr-app" class="vr-app" aria-label="VibeRaven"></div>
-    <script id="vr-state" type="application/json">${escapeJsonForHtml(state)}</script>
-    <script>${localUiClientJs}</script>
-  </body>
-</html>`;
+/* Anton has no bold \u2014 its native weight already reads heavy. Give the big
+   section headers a touch more air so the caps don't crowd. */
+.vr-composed-shell h1 { letter-spacing: 0.02em; }
+
+/* ==========================================================================
+   manga chat: the VibeRaven voice wears the fierce raven emblem (refs 1 & 3
+   put the raven bust beside the agent output). The coin frames the raven's
+   face out of the transparent emblem; a gold ring seats it as an avatar.
+   ========================================================================== */
+.vr-story-node.has-raven .vr-story-dot {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  overflow: hidden;
+  border: 1.5px solid var(--vr-border-strong);
+  background: radial-gradient(circle at 50% 40%, #1a1a1f, #0a0a0d);
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 12px rgba(232, 193, 90, 0.18);
+}
+.vr-raven-coin {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* frame the raven's face (right side of the emblem art), not the sign */
+  object-position: 74% 40%;
+  transform: scale(1.55);
+}
+.vr-story-node.is-error.has-raven .vr-story-dot { border-color: rgba(239, 68, 68, 0.6); }
+/* the intro card's inline raven badge */
+.vr-chat-intro-message .vr-intro-raven {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 1.5px solid var(--vr-border-strong);
+  background: radial-gradient(circle at 50% 40%, #1a1a1f, #0a0a0d);
+}
+.vr-chat-intro-message .vr-intro-raven img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 74% 40%;
+  transform: scale(1.55);
 }
-var init_appHtml = __esm({
-  "src/local-ui/static/appHtml.ts"() {
-    "use strict";
-    init_appClient();
-    init_appCss();
-  }
-});
 
-// src/local-ui/server.ts
-function normalizeShellCommand(value) {
-  return value.trim().replace(/\s+/g, " ");
+/* ==========================================================================
+   manga card frame \u2014 match the gold-on-black provider-card asset (refs 3 & 4).
+   Additive over the round-6/7 trading-card anatomy: ink-black inner (kills the
+   last crimson tint at #140a0c), a gold halftone burst behind the glyph, a
+   gold inset double-frame line, and Anton on the card name. Brand-colored
+   glyphs stay (the binder mockup keeps provider colors on the gold frame).
+   ========================================================================== */
+.vr-tcard:not(.is-back) .vr-tcard-inner {
+  background: #0c0c10;
+  /* the second, inner gold line \u2014 reads as the ornate double frame */
+  box-shadow: inset 0 0 0 1px rgba(232, 193, 90, 0.28);
+}
+.vr-tcard:not(.is-back) .vr-tcard-artwin {
+  border-color: rgba(232, 193, 90, 0.32);
+  /* gold burst radiating from behind the provider glyph */
+  background:
+    radial-gradient(circle at 50% 46%, rgba(232, 193, 90, 0.22), rgba(232, 193, 90, 0.05) 42%, transparent 68%),
+    #08080b;
 }
-function resolveApprovedShellCommand(command, requestedCliId) {
-  const normalized = normalizeShellCommand(command);
-  const candidateIds = requestedCliId ? [requestedCliId] : ["codex", "claude", "gemini"];
-  for (const cliId of candidateIds) {
-    const setup = CLI_AGENT_SETUP[cliId];
-    const install = normalizeShellCommand(setup.installCommand);
-    if (normalized === install) {
-      return { cliId, step: "install", command: setup.installCommand };
-    }
-    const signIn = normalizeShellCommand(setup.signInCommand);
-    if (normalized === signIn) {
-      return { cliId, step: "sign-in", command: setup.signInCommand };
-    }
-  }
-  return null;
+/* fine gold sunburst rays over the halftone \u2014 the asset's signature shimmer */
+.vr-tcard:not(.is-back) .vr-tcard-artwin::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    repeating-conic-gradient(from 0deg at 50% 46%,
+      rgba(232, 193, 90, 0.10) 0deg 2deg, transparent 2deg 10deg);
+  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 70%);
+  mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 70%);
+  pointer-events: none;
+  z-index: 0;
 }
-async function connectProviderMcp(cwd, providerId) {
-  const recipe = MCP_SERVER_RECIPES[providerId];
-  if (!recipe) {
-    return { ok: false, message: `No known MCP server for ${providerId} yet. Add one manually to .mcp.json.` };
-  }
-  const configPath = (0, import_node_path30.join)(cwd, ".mcp.json");
-  let config = {};
-  try {
-    const raw = await (0, import_promises23.readFile)(configPath, "utf8");
-    const parsed = JSON.parse(raw.replace(/^\uFEFF/, ""));
-    if (isRecord4(parsed)) config = parsed;
-  } catch {
-  }
-  const servers = isRecord4(config.mcpServers) ? { ...config.mcpServers } : {};
-  if (servers[providerId]) {
-    return { ok: true, message: `${providerId} MCP server already configured in .mcp.json.`, path: ".mcp.json" };
-  }
-  servers[providerId] = recipe.entry;
-  const next = { ...config, mcpServers: servers };
-  await (0, import_promises23.writeFile)(configPath, `${JSON.stringify(next, null, 2)}
-`, "utf8");
-  const suffix = recipe.note ? ` ${recipe.note}` : "";
-  return { ok: true, message: `Added ${providerId} MCP server to .mcp.json.${suffix}`, path: ".mcp.json" };
+.vr-tcard:not(.is-back) .vr-tcard-artwin .vr-provider-token.is-tcard { z-index: 1; }
+/* card name speaks the poster face */
+.vr-tcard-head b {
+  font-family: var(--mg-display);
+  font-weight: 400;
+  letter-spacing: 0.03em;
+  color: var(--vr-gold-bright);
 }
-async function defaultScanRunner(flags, positional) {
-  const cli = await Promise.resolve().then(() => (init_cli(), cli_exports));
-  return cli.runScanCommand(flags, positional);
+/* corner ticks: four gold L-brackets tucked into the frame corners */
+.vr-tcard:not(.is-back) .vr-tcard-inner::before {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  pointer-events: none;
+  z-index: 3;
+  background:
+    linear-gradient(var(--vr-gold-bright), var(--vr-gold-bright)) left top,
+    linear-gradient(var(--vr-gold-bright), var(--vr-gold-bright)) left top,
+    linear-gradient(var(--vr-gold-bright), var(--vr-gold-bright)) right top,
+    linear-gradient(var(--vr-gold-bright), var(--vr-gold-bright)) right top,
+    linear-gradient(var(--vr-gold-bright), var(--vr-gold-bright)) left bottom,
+    linear-gradient(var(--vr-gold-bright), var(--vr-gold-bright)) left bottom,
+    linear-gradient(var(--vr-gold-bright), var(--vr-gold-bright)) right bottom,
+    linear-gradient(var(--vr-gold-bright), var(--vr-gold-bright)) right bottom;
+  background-repeat: no-repeat;
+  background-size: 10px 2px, 2px 10px;
+  opacity: 0.9;
+}
+
+/* THE collector redesign: the frame is always GOLD FOIL (like the binder
+   mockup + the gold-on-black provider-card asset). Provider colour lives only
+   in the art-window burst and the glyph glow \u2014 not the frame. This is what
+   turns the cards from "casino colored rectangle" into "premium graded slab". */
+.vr-tcard[data-foil]:not(.is-back) {
+  background: var(--vr-foil);
 }
-async function readPackageJson(cwd) {
-  try {
-    const raw = await (0, import_promises23.readFile)((0, import_node_path30.join)(cwd, "package.json"), "utf8");
-    const parsed = JSON.parse(raw.replace(/^\uFEFF/, ""));
-    return isRecord4(parsed) ? parsed : {};
-  } catch {
-    return {};
-  }
+.vr-tcard:not(.is-back) {
+  border-radius: 12px;
+  box-shadow:
+    0 10px 24px rgba(0, 0, 0, 0.6),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
+    inset 0 0 0 2px rgba(255, 233, 173, 0.35);
 }
-function dependencyNames(packageJson) {
-  const names = /* @__PURE__ */ new Set();
-  for (const key of ["dependencies", "devDependencies", "peerDependencies", "optionalDependencies"]) {
-    const value = packageJson[key];
-    if (!isRecord4(value)) continue;
-    Object.keys(value).forEach((name) => names.add(name.toLowerCase()));
-  }
-  return names;
+.vr-tcard:not(.is-back):hover {
+  box-shadow:
+    0 16px 32px rgba(0, 0, 0, 0.65),
+    0 0 20px rgba(232, 193, 90, 0.4),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
+    inset 0 0 0 2px rgba(255, 233, 173, 0.5);
 }
-async function listProjectFiles(cwd, maxFiles = 1800) {
-  const skipped = /* @__PURE__ */ new Set([".git", "node_modules", ".next", "dist", "build", "coverage", ".turbo", ".viberaven"]);
-  const files = [];
-  async function walk(dir, prefix = "") {
-    if (files.length >= maxFiles) return;
-    let entries;
-    try {
-      entries = await (0, import_promises23.readdir)(dir, { withFileTypes: true });
+/* the RAVEN GRADE line reads like a graded-slab label bar */
+.vr-tcard-grade {
+  color: #241207;
+  background: linear-gradient(180deg, #f6eed9, #e2d0a8);
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-weight: 700;
+}
+
+/* ==========================================================================
+   manga hero watermark \u2014 the empty chat void gets a faint raven emblem
+   bleeding in from the right, like the faded raven behind the mockup chat.
+   Fills dead space and carries the manga presence without hurting readability.
+   ========================================================================== */
+.vr-chat-lane.is-primary { position: relative; }
+/* keep the messages above any lane background */
+.vr-chat-lane.is-primary > * { position: relative; z-index: 1; }
+
+/* ==========================================================================
+   manga agent message \u2014 the screenshot-5 styling on REAL answers: a fierce
+   raven avatar, an "AI AGENT" badge, and a faded raven bleeding behind the
+   message (like the eye behind the mockup chat). No fake data.
+   ========================================================================== */
+.vr-chat-agent-response { position: relative; overflow: hidden; }
+.vr-chat-agent-response::before {
+  content: '';
+  position: absolute;
+  right: -70px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 340px;
+  height: 340px;
+  background: url('/manga/emblem.png') no-repeat center / contain;
+  opacity: 0.06;
+  pointer-events: none;
+  z-index: 0;
+}
+.vr-chat-agent-response > * { position: relative; z-index: 1; }
+.vr-hud-avatar.is-raven {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 1.5px solid var(--vr-border-strong);
+  background: radial-gradient(circle at 50% 40%, #1a1a1f, #0a0a0d);
+  box-shadow: 0 0 12px rgba(232, 193, 90, 0.18);
+  flex: none;
+}
+.vr-hud-avatar.is-raven img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 74% 40%;
+  transform: scale(1.55);
+}
+.vr-hud-aibadge {
+  font-family: var(--vr-hud-mono);
+  font-size: 8.5px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--vr-gold-bright);
+  padding: 2px 7px;
+  border-radius: 5px;
+  background: rgba(232, 193, 90, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(232, 193, 90, 0.4);
+}
+
+/* ==========================================================================
+   full-art provider cards + holographic foil (the "shiny Pok\xE9mon" effect).
+   The card art (assets/manga/cards/<id>.webp) is the whole face; an
+   iridescent foil + a specular glare sweep ride on top and light up on hover.
+   ========================================================================== */
+.vr-tcard.has-art {
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  border-radius: 11px;
+  background: #000;
+  box-shadow:
+    0 10px 24px rgba(0, 0, 0, 0.6),
+    inset 0 0 0 1px rgba(255, 233, 173, 0.3);
+}
+.vr-tcard.has-art .vr-tcard-artfull {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 11px;
+}
+/* iridescent holo foil \u2014 always faintly present, blooms on hover */
+.vr-tcard-holofoil {
+  position: absolute;
+  inset: 0;
+  border-radius: 11px;
+  pointer-events: none;
+  z-index: 2;
+  background: repeating-linear-gradient(115deg,
+    rgba(255, 110, 150, 0.16) 0 7px,
+    rgba(120, 200, 255, 0.16) 7px 14px,
+    rgba(150, 255, 190, 0.16) 14px 21px,
+    rgba(255, 240, 150, 0.16) 21px 28px);
+  background-size: 220% 220%;
+  mix-blend-mode: color-dodge;
+  opacity: 0.16;
+  transition: opacity 220ms ease;
+}
+/* gold sparkle glints over the foil */
+.vr-tcard-holofoil::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 11px;
+  background:
+    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.55), transparent 9%),
+    radial-gradient(circle at 72% 58%, rgba(255, 233, 173, 0.5), transparent 8%),
+    radial-gradient(circle at 52% 86%, rgba(255, 255, 255, 0.4), transparent 7%);
+  mix-blend-mode: screen;
+  opacity: 0.28;
+}
+/* specular glare bar that sweeps across on hover */
+.vr-tcard-glare {
+  position: absolute;
+  inset: 0;
+  border-radius: 11px;
+  pointer-events: none;
+  z-index: 3;
+  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.3) 48%, rgba(255, 240, 200, 0.22) 54%, transparent 64%);
+  background-size: 250% 250%;
+  background-position: 120% 0%;
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+.vr-tcard.has-art:hover { transform: translateY(-6px) scale(1.04); }
+.vr-tcard.has-art:hover .vr-tcard-holofoil { opacity: 0.5; animation: vr-holo-shift 2.6s linear infinite; }
+.vr-tcard.has-art:hover .vr-tcard-glare { opacity: 1; animation: vr-glare-sweep 1.1s ease; }
+.vr-tcard.has-art.is-flawless { box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6), 0 0 22px rgba(232, 193, 90, 0.5), inset 0 0 0 1px rgba(255, 233, 173, 0.55); }
+.vr-tcard.has-art.is-flawless .vr-tcard-holofoil { opacity: 0.34; }
+@keyframes vr-holo-shift { 0% { background-position: 0% 0%; } 100% { background-position: 220% 220%; } }
+@keyframes vr-glare-sweep { 0% { background-position: 120% 0%; } 100% { background-position: -40% 0%; } }
+/* grade medallion \u2014 a clean gold-ringed ink coin that suits the ornate art
+   (was a pill with a colored energy dot that looked tacked-on). */
+.vr-tcard.has-art .vr-tcard-hp.is-onart {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  z-index: 4;
+  display: grid;
+  place-items: center;
+  width: 21px;
+  height: 21px;
+  padding: 0;
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 34%, #2b2721, #0b0a0e);
+  box-shadow: inset 0 0 0 1.5px rgba(255, 233, 173, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+.vr-tcard.has-art .vr-tcard-hp.is-onart .vr-tcard-energy { display: none; }
+.vr-tcard.has-art .vr-tcard-hp.is-onart i {
+  font-family: var(--mg-display);
+  font-style: normal;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--vr-gold-bright);
+}
+.vr-tcard.is-hand.has-art .vr-tcard-hp.is-onart { width: 17px; height: 17px; top: 5px; right: 5px; }
+.vr-tcard.is-hand.has-art .vr-tcard-hp.is-onart i { font-size: 9.5px; }
+/* the baked art already carries the RAVEN GRADE band; hide the overlay strip */
+.vr-tcard.has-art .vr-tcard-gradebar { display: none; }
+
+/* the agent message already carries the raven in its header (.vr-hud-avatar)
+   and the intro carries .vr-intro-raven \u2014 so the timeline story-dot drops back
+   to a small plain node instead of a second, redundant raven coin. */
+.vr-story-node.has-raven .vr-story-dot {
+  width: 12px;
+  height: 12px;
+  margin-top: 16px;
+  border-color: rgba(232, 193, 90, 0.5);
+  background: radial-gradient(circle, var(--vr-gold) 0 2px, rgba(12, 13, 16, 0.96) 3px);
+  box-shadow: 0 0 8px rgba(232, 193, 90, 0.25);
+}
+.vr-story-node.has-raven .vr-story-dot .vr-raven-coin { display: none; }
+
+/* ==========================================================================
+   manga comic panels \u2014 the real restructure. The chat panels were generic
+   rounded-dark rectangles (why it "looked the same"). Now: hard notched
+   corners (comic-panel cut), a bold gold spine on the left, faint gold
+   halftone screentone inside, and a gold tab behind the header label.
+   Applies to the MISSION cards and the VibeRaven agent answers.
+   ========================================================================== */
+.vr-chat-message.is-user.is-mission,
+.vr-chat-agent-response {
+  position: relative;
+  border: 1.5px solid var(--vr-border-strong) !important;
+  border-left-width: 3px !important;
+  border-radius: 4px !important;
+  /* two opposite corners cut = comic panel */
+  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)) !important;
+  background-color: rgba(13, 12, 16, 0.94) !important;
+  background-image:
+    radial-gradient(rgba(232, 193, 90, 0.055) 1px, transparent 1.4px),
+    linear-gradient(160deg, rgba(232, 193, 90, 0.05), transparent 34%) !important;
+  background-size: 9px 9px, auto !important;
+}
+/* MISSION panels lean cool-gold, agent panels get the warmer gold spine */
+.vr-chat-message.is-user.is-mission { border-left-color: var(--vr-gold) !important; }
+.vr-chat-agent-response.is-blocked { border-left-color: var(--vr-red) !important; }
+.vr-chat-agent-response.is-nominal { border-left-color: var(--vr-green) !important; }
+
+/* header labels become inked tabs: MISSION / VIBERAVEN sit on a gold underline */
+.vr-chat-message.is-user.is-mission .vr-hud-strip strong,
+.vr-chat-message.is-user.is-mission > header strong,
+.vr-chat-agent-response .vr-hud-strip strong {
+  position: relative;
+}
+.vr-chat-agent-response .vr-hud-strip {
+  border-bottom: 1px solid rgba(232, 193, 90, 0.16);
+  padding-bottom: 7px;
+  margin-bottom: 2px;
+}
+/* a small gold corner bracket on the top-left of each panel */
+.vr-chat-message.is-user.is-mission::after,
+.vr-chat-agent-response::after {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 7px;
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid rgba(232, 193, 90, 0.55);
+  border-top: 2px solid rgba(232, 193, 90, 0.55);
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* ==========================================================================
+   composer = a comic panel too (was a soft rounded "old-school" box). Same
+   notched frame + halftone as the chat messages so the column is of-a-piece.
+   ========================================================================== */
+.vr-chat-lane .vr-chat-command-bar > .vr-chat-composer,
+.vr-studio-chat:not(.is-split) .vr-chat-lane.is-primary .vr-chat-command-bar > .vr-chat-composer {
+  border: 1.5px solid var(--vr-border-strong) !important;
+  border-radius: 5px !important;
+  /* NO clip-path: the model/command/access menus are descendants and a notch
+     here clipped them when they popped up (looked "corrupted"). */
+  background-color: rgba(13, 12, 16, 0.96) !important;
+  background-image: radial-gradient(rgba(232, 193, 90, 0.045) 1px, transparent 1.4px) !important;
+  background-size: 9px 9px !important;
+  box-shadow: 0 0 24px rgba(232, 193, 90, 0.07) !important;
+  overflow: visible !important;
+}
+.vr-chat-lane .vr-chat-command-bar > .vr-chat-composer:focus-within {
+  border-color: var(--vr-gold) !important;
+  box-shadow: 0 0 26px rgba(232, 193, 90, 0.16) !important;
+}
+
+/* ==========================================================================
+   the OTHER views join the manga theme: worktree branch cards, the commit
+   banner, and the region-map nodes all become comic panels (notched corners,
+   gold frame, halftone). A faded raven bleeds in from the right of the table
+   views like the warrior in the reference mockup.
+   ========================================================================== */
+.vr-bcard {
+  position: relative;
+  border: 1.5px solid var(--vr-border-strong) !important;
+  border-radius: 4px !important;
+  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
+  background-color: rgba(13, 12, 16, 0.95) !important;
+  background-image: radial-gradient(rgba(232, 193, 90, 0.05) 1px, transparent 1.4px) !important;
+  background-size: 9px 9px !important;
+}
+.vr-bcard.is-current {
+  border-color: var(--vr-gold) !important;
+  box-shadow: 0 0 18px rgba(232, 193, 90, 0.18);
+}
+.vr-table-warning {
+  position: relative;
+  border: 1.5px solid var(--vr-border-strong) !important;
+  border-left: 3px solid var(--vr-gold) !important;
+  border-radius: 4px !important;
+  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
+  background-color: rgba(13, 12, 16, 0.95) !important;
+  background-image:
+    radial-gradient(rgba(232, 193, 90, 0.05) 1px, transparent 1.4px),
+    linear-gradient(160deg, rgba(232, 193, 90, 0.06), transparent 40%) !important;
+  background-size: 9px 9px, auto !important;
+}
+/* region-map + architecture nodes get the comic-panel notch + halftone */
+.vr-arch-node:not(.is-card) {
+  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
+  background-image: radial-gradient(rgba(232, 193, 90, 0.05) 1px, transparent 1.4px) !important;
+  background-size: 8px 8px !important;
+}
+/* the raven bleeds in from the right of the worktree/versions/region views */
+.vr-table-view,
+.vr-studio-architecture { position: relative; }
+.vr-table-view::after,
+.vr-studio-architecture.is-region-map::after {
+  content: '';
+  position: absolute;
+  right: -40px;
+  bottom: -20px;
+  width: 460px;
+  height: 460px;
+  background: url('/manga/emblem.png') no-repeat right bottom / contain;
+  opacity: 0.06;
+  pointer-events: none;
+  z-index: 0;
+}
+/* rail logo is the fierce raven, framed to its face */
+.vr-rail-raven.is-emblem {
+  border-radius: 9px;
+  overflow: hidden;
+  border: 1px solid var(--vr-border-strong);
+  background: radial-gradient(circle at 50% 40%, #1a1a1f, #0a0a0d);
+}
+.vr-rail-raven.is-emblem img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 74% 40%;
+  transform: scale(1.5);
+}
+
+/* ==========================================================================
+   MANGA THEME PASS \u2014 dropdowns/menus, readability, world background, top bar,
+   modal, chrome. One append block; wins by source order. No !important.
+   ========================================================================== */
+
+/* ----- Area 1: dropdowns & popup menus (kill the white selected row) ----- */
+.vr-model-picker > button {
+  border: 1px solid var(--vr-border);
+  border-radius: 5px;
+  background-color: rgba(13, 12, 16, 0.95);
+  color: var(--vr-text);
+}
+.vr-model-picker > button span { color: var(--vr-muted); }
+.vr-model-picker > button strong { color: var(--vr-gold-bright); }
+.vr-model-picker > button i { border-color: var(--vr-gold); }
+.vr-model-picker > button:hover { border-color: var(--vr-border-strong); background-color: rgba(20, 18, 12, 0.96); }
+
+.vr-model-menu,
+.vr-scope-menu,
+.vr-chat-command-popover {
+  border: 1px solid var(--vr-border-strong);
+  border-left: 3px solid var(--vr-gold);
+  border-radius: 5px;
+  background-color: rgba(10, 10, 13, 0.99);
+  background-image: radial-gradient(rgba(232, 193, 90, 0.045) 1px, transparent 1.4px);
+  background-size: 9px 9px;
+  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.5);
+  color: var(--vr-text);
+  overflow: hidden;
+}
+.vr-model-menu p,
+.vr-scope-menu p {
+  font-family: var(--mg-display);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vr-gold);
+}
+.vr-model-menu button,
+.vr-scope-menu button,
+.vr-chat-command-popover button { border-radius: 3px; color: rgba(244, 241, 232, 0.9); }
+.vr-model-menu button strong { color: rgba(244, 241, 232, 0.95); }
+.vr-model-menu button em { color: var(--vr-muted); font-size: 11.5px; }
+.vr-chat-command-popover button.is-primary { color: var(--vr-gold-bright); }
+.vr-chat-command-popover button.is-muted { color: var(--vr-muted); }
+.vr-model-menu button:hover,
+.vr-scope-menu button:hover,
+.vr-chat-command-popover button:hover {
+  background: rgba(232, 193, 90, 0.12);
+  box-shadow: inset 3px 0 0 var(--vr-gold);
+  color: var(--vr-gold-bright);
+}
+/* selected row: gold-tinted ink + spine (JS marks the active row with a <b>) */
+.vr-model-menu button[aria-selected="true"],
+.vr-model-menu button.is-active,
+.vr-model-menu button:has(> b),
+.vr-scope-menu button:has(> b) {
+  background: rgba(232, 193, 90, 0.16);
+  box-shadow: inset 3px 0 0 var(--vr-gold);
+}
+.vr-model-menu button[aria-selected="true"] strong,
+.vr-model-menu button:has(> b) strong { color: var(--vr-gold-bright); }
+.vr-model-menu button b,
+.vr-scope-menu button b { border-color: var(--vr-gold-bright); }
+/* themed menu scrollbars */
+.vr-model-menu::-webkit-scrollbar,
+.vr-scope-menu::-webkit-scrollbar,
+.vr-chat-command-popover::-webkit-scrollbar { width: 8px; }
+.vr-model-menu::-webkit-scrollbar-thumb,
+.vr-scope-menu::-webkit-scrollbar-thumb,
+.vr-chat-command-popover::-webkit-scrollbar-thumb { background: var(--vr-border-strong); border: 2px solid rgba(13, 12, 16, 0.97); }
+
+.vr-chat-inline-actions > button,
+.vr-chat-command-trigger > button {
+  border: 1px solid var(--vr-border);
+  border-radius: 5px;
+  background: rgba(13, 12, 16, 0.7);
+  color: rgba(244, 241, 232, 0.82);
+}
+.vr-chat-inline-actions > button:hover,
+.vr-chat-command-trigger > button:hover {
+  border-color: var(--vr-border-strong);
+  background: rgba(20, 18, 12, 0.85);
+  color: var(--vr-gold-bright);
+}
+
+/* ----- Area 2: readability ----- */
+.vr-chat-command-bar .vr-chat-input { color: var(--vr-text); }
+.vr-chat-command-bar .vr-chat-input::placeholder { color: var(--vr-muted); }
+.vr-chat-inline-actions button.is-primary {
+  background: var(--vr-gold);
+  color: #241207;
+  border-color: var(--vr-gold-bright);
+  font-weight: 720;
+}
+.vr-chat-inline-actions button.is-muted { opacity: 1; color: var(--vr-muted); font-weight: 650; }
+.vr-cli-os-fallback { color: var(--vr-muted); text-decoration-color: var(--vr-border-strong); }
+.vr-cli-os-fallback:hover { color: var(--vr-gold-bright); }
+
+/* ----- Area 4b: primary CTAs -> gold (after Area 1 so filled-gold wins) ----- */
+.vr-agent-followups button.is-primary,
+.vr-agent-inline-action.is-primary,
+.vr-chat-command-popover button.is-primary,
+.vr-cli-action-button.is-primary,
+.vr-studio-architecture > footer button.is-primary,
+.vr-arch-drawer footer button.is-primary,
+.vr-wt-actions button.is-primary,
+.vr-approve-all,
+.vr-new-chat-button,
+.vr-provider-ask-agent {
+  background: var(--vr-gold);
+  border-color: var(--vr-gold-bright);
+  color: #0a0b0e;
+  font-family: var(--mg-display);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.vr-agent-followups button.is-primary:hover,
+.vr-agent-inline-action.is-primary:hover,
+.vr-chat-command-popover button.is-primary:hover,
+.vr-approve-all:hover,
+.vr-new-chat-button:hover,
+.vr-provider-ask-agent:hover { background: var(--vr-gold-bright); border-color: var(--vr-gold-bright); color: #0a0b0e; }
+.vr-composer-controls .vr-chat-send:not(.is-stop),
+.vr-chat-command-bar > .vr-chat-composer > .vr-chat-send:not(.is-stop) {
+  background: var(--vr-gold);
+  border-color: var(--vr-gold-bright);
+  color: #0a0b0e;
+}
+.vr-composer-controls .vr-chat-send:not(.is-stop):hover,
+.vr-chat-command-bar > .vr-chat-composer > .vr-chat-send:not(.is-stop):hover { background: var(--vr-gold-bright); border-color: var(--vr-gold-bright); }
+
+/* ----- Area 3: world background (inked drafting table, lit from above) ----- */
+body {
+  background-color: #08080a;
+  background-image:
+    radial-gradient(rgba(232, 193, 90, 0.05) 1px, transparent 1.6px),
+    repeating-linear-gradient(52deg, rgba(232, 193, 90, 0.045) 0 1px, transparent 1px 8px),
+    repeating-linear-gradient(-52deg, rgba(232, 193, 90, 0.04) 0 1px, transparent 1px 9px),
+    radial-gradient(ellipse 70% 42% at 50% -8%, rgba(232, 193, 90, 0.07), transparent 60%),
+    radial-gradient(120% 120% at 50% 40%, transparent 58%, rgba(0, 0, 0, 0.55) 100%),
+    linear-gradient(180deg, #101015 0%, #0b0b0e 46%, #08080a 100%);
+  background-size: 9px 9px, 900px 900px, 900px 900px, 100% 100%, 100% 100%, 100% 100%;
+  background-position: 0 0, top right, bottom left, center top, center, center;
+  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
+  background-attachment: scroll;
+}
+.vr-composed-shell {
+  background:
+    radial-gradient(ellipse 60% 30% at 50% -4%, rgba(232, 193, 90, 0.06), transparent 60%),
+    radial-gradient(circle at 45% 9%, rgba(232, 193, 90, 0.035), transparent 30%),
+    rgba(11, 12, 15, 0.965);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 233, 173, 0.06),
+    inset 0 0 0 1px rgba(232, 193, 90, 0.05),
+    0 24px 60px rgba(0, 0, 0, 0.55);
+}
+.vr-studio-topbar {
+  background:
+    linear-gradient(180deg, rgba(232, 193, 90, 0.05), transparent 70%),
+    rgba(13, 12, 16, 0.62);
+}
+
+/* ----- Area 4a: top tab bar (CHAT/ARCHITECTURE/TERMINAL/DIFF) ----- */
+.vr-studio-tabs {
+  border: 1px solid var(--vr-border);
+  border-radius: 4px;
+  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
+  background: rgba(13, 12, 16, 0.85);
+  overflow: hidden;
+}
+.vr-studio-tabs button {
+  font-family: var(--mg-display);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(244, 241, 232, 0.7);
+}
+.vr-studio-tabs button:hover { color: var(--vr-gold-bright); background: rgba(232, 193, 90, 0.08); }
+.vr-studio-tabs button.is-active {
+  background: var(--vr-gold);
+  color: #0a0b0e;
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px rgba(255, 233, 173, 0.5);
+}
+
+/* ----- Area 4c: modal (ink+gold, not navy/cyan) ----- */
+.vr-modal-card {
+  border-radius: 4px;
+  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
+  background:
+    radial-gradient(ellipse 70% 40% at 50% -4%, rgba(232, 193, 90, 0.06), transparent 60%),
+    radial-gradient(rgba(232, 193, 90, 0.04) 1px, transparent 1.4px),
+    linear-gradient(180deg, rgba(16, 15, 12, 0.99), rgba(13, 12, 16, 0.995));
+  background-size: 100% 100%, 11px 11px, 100%;
+}
+.vr-modal-card::before { background: linear-gradient(135deg, rgba(232, 193, 90, 0.08), transparent 28%); }
+.vr-modal-card::after { background: linear-gradient(90deg, transparent, rgba(232, 193, 90, 0.05), rgba(232, 193, 90, 0.2), transparent); opacity: 0.3; }
+.vr-modal-backdrop { background: radial-gradient(ellipse 60% 40% at 50% 8%, rgba(232, 193, 90, 0.07), transparent 45%), rgba(4, 5, 8, 0.8); }
+.vr-modal-card::-webkit-scrollbar-thumb { border: 3px solid rgba(13, 12, 16, 0.92); background: rgba(232, 193, 90, 0.4); }
+
+/* ----- Area 4d: chrome buttons, terminal input, connect rows ----- */
+.vr-studio-add-chat,
+.vr-studio-actions > button:not(.vr-glow-button) {
+  border: 1px solid var(--vr-border);
+  border-radius: 5px;
+  background: rgba(13, 12, 16, 0.7);
+  color: rgba(244, 241, 232, 0.88);
+}
+.vr-studio-add-chat:hover,
+.vr-studio-actions > button:not(.vr-glow-button):hover { border-color: var(--vr-border-strong); background: rgba(232, 193, 90, 0.08); color: var(--vr-gold-bright); }
+.vr-terminal-compose textarea {
+  border: 1px solid var(--vr-border);
+  border-radius: 4px;
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
+  background: rgba(13, 12, 16, 0.72);
+  color: rgba(244, 241, 232, 0.92);
+  font-family: var(--vr-hud-mono);
+}
+.vr-terminal-compose textarea::placeholder { color: var(--vr-muted); }
+.vr-terminal-compose textarea:focus { border-color: var(--vr-gold); box-shadow: 0 0 18px rgba(232, 193, 90, 0.14); }
+.vr-env-connect-option {
+  border: 1px solid var(--vr-border);
+  border-radius: 4px;
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+  background: rgba(13, 12, 16, 0.6);
+  color: rgba(244, 241, 232, 0.9);
+}
+.vr-env-connect-option:hover { border-color: var(--vr-border-strong); background: rgba(232, 193, 90, 0.07); }
+.vr-env-connect-option b {
+  border-radius: 3px;
+  background: rgba(232, 193, 90, 0.1);
+  color: var(--vr-gold-bright);
+  font-family: var(--vr-hud-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ----- Area 4e: focus ring ----- */
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--vr-gold);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(232, 193, 90, 0.16);
+}
+
+/* ----- Area 5: raven watermarks fade away from text (readability) ----- */
+.vr-chat-agent-response::before {
+  opacity: 0.05;
+  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
+  mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
+}
+.vr-table-view > *,
+.vr-studio-architecture.is-region-map > * { position: relative; z-index: 1; }
+.vr-table-view::after,
+.vr-studio-architecture.is-region-map::after {
+  opacity: 0.05;
+  -webkit-mask-image: radial-gradient(circle at right bottom, #000 28%, transparent 72%);
+  mask-image: radial-gradient(circle at right bottom, #000 28%, transparent 72%);
+}
+
+/* ----- placed cards get an always-visible X to clear them off the table.
+   NB: has-art cards have overflow:hidden, so the X must sit INSIDE the card
+   corner (top-left, away from the grade coin) or it gets clipped. ----- */
+.vr-tcard.is-placed .vr-tcard-unplace,
+.vr-vcard.is-mini.is-placed .vr-tcard-unplace {
+  opacity: 1;
+  width: 21px;
+  height: 21px;
+  top: 5px;
+  left: 5px;
+  right: auto;
+  z-index: 6;
+  background: rgba(6, 6, 8, 0.92);
+  border: 1.5px solid var(--vr-gold);
+  color: var(--vr-gold-bright);
+  font-size: 11px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
+  transition: transform 0.1s ease, background 0.1s ease, color 0.1s ease;
+}
+.vr-tcard.is-placed:hover .vr-tcard-unplace,
+.vr-vcard.is-mini.is-placed:hover .vr-tcard-unplace { opacity: 1; }
+.vr-tcard.is-placed .vr-tcard-unplace:hover,
+.vr-vcard.is-mini.is-placed .vr-tcard-unplace:hover {
+  background: var(--vr-red);
+  border-color: var(--vr-red);
+  color: #fff;
+  transform: scale(1.12);
+}
+
+
+/* ==========================================================================
+   MANGA B&W CONTRAST PASS \u2014 appended AFTER "MANGA THEME PASS" so it wins by
+   source order. Direction: blacker blacks, whiter/cream ink, crisp near-white
+   hairlines, screentone dots for grey; gold pulled back to an ACCENT only
+   (spines, selected rails, small marks). Semantic red kept for errors.
+   De-duplicated + conflict-resolved (higher contrast wins). No !important
+   except where an existing same-file !important rule must be overridden.
+   ========================================================================== */
+
+/* ---------- (1) B&W CONTRAST BASE ---------- */
+
+/* Retone root tokens: fixes the majority of muted labels + gold-alpha edges
+   in one place. --vr-muted lifted off the dim tan; borders become near-white
+   ink hairlines; gold moves to an explicit accent hook. */
+:root {
+  --vr-bg: #050506;
+  --vr-bg-2: #0e0e11;
+  --vr-text: #f7f4ec;
+  --vr-muted: #c4bcaf;
+  --vr-border: rgba(238, 232, 220, 0.16);
+  --vr-border-strong: rgba(238, 232, 220, 0.34);
+  --vr-panel: rgba(9, 9, 11, 0.92);
+  --vr-panel-2: rgba(14, 14, 17, 0.9);
+  --vr-hud-surface: rgba(6, 6, 8, 0.94);
+  --vr-hud-line: rgba(238, 232, 220, 0.14);
+  --vr-accent-line: rgba(232, 193, 90, 0.55);
+}
+
+/* World background: drop the gold cross-hatch haze for black paper + faint
+   neutral screentone + vignette. */
+body {
+  background-color: #050506;
+  background-image:
+    radial-gradient(rgba(244, 241, 232, 0.028) 1px, transparent 1.5px),
+    radial-gradient(ellipse 68% 40% at 50% -8%, rgba(255, 255, 255, 0.035), transparent 62%),
+    radial-gradient(130% 120% at 50% 42%, transparent 56%, rgba(0, 0, 0, 0.72) 100%),
+    linear-gradient(180deg, #0c0c0f 0%, #08080a 48%, #050506 100%);
+  background-size: 8px 8px, 100% 100%, 100% 100%, 100% 100%;
+  background-position: 0 0, center top, center, center;
+  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
+}
+
+/* Composed shell: near-flat true-black with one white top hairline. */
+.vr-composed-shell {
+  background:
+    radial-gradient(ellipse 62% 26% at 50% -3%, rgba(255, 255, 255, 0.04), transparent 60%),
+    rgba(7, 7, 9, 0.975);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    inset 0 0 0 1px rgba(238, 232, 220, 0.05),
+    0 24px 60px rgba(0, 0, 0, 0.62);
+}
+
+/* Studio topbar: neutral top-light + single thin gold underline accent. */
+.vr-studio-topbar {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 70%),
+    rgba(6, 6, 9, 0.72);
+  border-bottom: 1px solid var(--vr-border);
+  box-shadow: inset 0 -1px 0 var(--vr-accent-line);
+}
+
+/* Persistent top-bar readout (was #64748b cold slate, ~3.4:1). */
+.vr-topbar-spacer { color: var(--vr-muted); font-weight: 780; }
+
+/* Studio tabs: active tab reads as inked-white paper with a gold underline
+   mark, not a gold slab; idle-tab contrast raised. */
+.vr-studio-tabs button { color: rgba(244, 241, 232, 0.82); }
+.vr-studio-tabs button.is-active {
+  background: rgba(244, 241, 232, 0.1);
+  color: #f7f4ec;
+  box-shadow: inset 0 -2px 0 var(--vr-gold), inset 0 0 0 1px rgba(238, 232, 220, 0.14);
+}
+.vr-studio-tabs button:hover { color: #ffe9ad; background: rgba(255, 255, 255, 0.05); }
+
+/* Dropdown / popup menus: clean black sheet (kills the gold halftone),
+   gold only on the left spine + hover/selected rail; item + label contrast up. */
+.vr-model-menu,
+.vr-scope-menu,
+.vr-chat-command-popover {
+  background-color: rgba(5, 5, 7, 0.99);
+  background-image: none;
+  border-color: var(--vr-border-strong);
+  border-left: 3px solid var(--vr-gold);
+}
+.vr-model-menu button,
+.vr-scope-menu button,
+.vr-chat-command-popover button { color: #f0ece2; }
+.vr-model-menu button em { color: #c4bcae; }
+.vr-model-menu button:hover,
+.vr-scope-menu button:hover,
+.vr-chat-command-popover button:hover {
+  background: rgba(255, 255, 255, 0.06);
+  box-shadow: inset 3px 0 0 var(--vr-gold);
+  color: #ffe9ad;
+}
+
+/* HUD strip (telemetry line): raise the faded cool-grey meta to readable ink. */
+.vr-hud-strip { color: #c9c1b4; border-bottom-color: rgba(238, 232, 220, 0.12); }
+.vr-hud-strip strong { color: #f7f4ec; }
+.vr-hud-strip em { color: #c9c1b4; }
+.vr-hud-strip b { color: var(--vr-muted); font-weight: 600; } /* merged: was #b0a89b / rgba(156,163,175,.72) */
+
+/* HUD card chassis: white-ruled black panel; the ONE spot of color is the
+   left rail (semantic status). */
+.vr-hud-card {
+  background: rgba(6, 6, 8, 0.94);
+  border-color: rgba(238, 232, 220, 0.16);
+  border-left-color: rgba(238, 232, 220, 0.45);
+}
+.vr-hud-card.is-nominal { border-left-color: var(--vr-green); }
+.vr-hud-card.is-blocked { border-left-color: var(--vr-red); }
+.vr-hud-card.is-working { border-left-color: var(--vr-orange); }
+.vr-hud-card.is-mission { border-left-color: var(--vr-gold); }
+
+/* HUD gate row + severity: lift the primary line to full-opacity ink,
+   metadata to solid grey. */
+.vr-hud-gate { background: rgba(255, 255, 255, 0.02); border-color: rgba(238, 232, 220, 0.14); }
+.vr-hud-gate header { border-bottom-color: rgba(238, 232, 220, 0.12); }
+.vr-hud-gate-row { border-bottom-color: rgba(238, 232, 220, 0.09); }
+.vr-hud-gate-row em { color: #f3efe6; }
+.vr-hud-gate-row em small { color: #c4bcae; }
+.vr-hud-gate-row b { color: #b6ae9f; }
+.vr-hud-sev.is-info { color: #b6ae9f; }
+.vr-hud-gate-foot {
+  border-top-color: rgba(238, 232, 220, 0.12);
+  background: rgba(255, 255, 255, 0.025);
+  color: #f4f1e8;
+}
+.vr-hud-gate-foot b { color: #bcb4a6; }
+.vr-hud-gate-foot:hover { background: rgba(255, 255, 255, 0.05); }
+.vr-hud-raw { color: #bcb4a6; }
+.vr-agent-raw-sub { color: #c4bcae; }
+
+/* ---------- (2) VERSIONS / WORKTREE / SHUFFLE ---------- */
+
+/* Table view container + header: solid ink base so cream text pops; header
+   is cream Anton with a hairline rule, gold reserved for the spine accents. */
+.vr-table-view { background: #0b0b0d !important; }
+.vr-table-view-head { border-bottom: 1.5px solid var(--vr-border-strong) !important; }
+.vr-table-view-head strong { color: var(--vr-text) !important; -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.35); }
+.vr-table-view-head span { color: var(--vr-muted) !important; }
+
+/* Big version card: ink plate + white hairline + comic notch (large panel \u2014
+   notch is safe here); gold only as border tint on current. NOTE: base rules
+   at ~13450-13492 use !important, so these must too. */
+.vr-vcard {
+  border: 1.5px solid var(--vr-border-strong) !important;
+  border-radius: 4px !important;
+  background: rgba(10, 10, 12, 0.96) !important;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55) !important;
+  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+}
+.vr-vcard::before {
+  inset: 4px !important;
+  border-radius: 3px !important;
+  background-color: rgba(11, 11, 13, 0.9) !important;
+  background-image: radial-gradient(rgba(232, 193, 90, 0.05) 1px, transparent 1.4px) !important;
+  background-size: 9px 9px !important;
+}
+.vr-vcard:not(.is-current) { filter: none !important; opacity: 0.9; }
+.vr-vcard.is-current {
+  border-color: var(--vr-gold) !important;
+  border-left: 3px solid var(--vr-gold) !important; /* thin gold spine = "chosen" */
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(232, 193, 90, 0.16) !important;
+}
+.vr-vcard-top b,
+.vr-vpile-card b { color: var(--vr-text) !important; font-family: var(--vr-display) !important; letter-spacing: 0.5px; }
+/* merged .vr-vcard-meta: prefer --vr-muted (brightest) + the larger 8.5px */
+.vr-vcard-meta { color: var(--vr-muted) !important; font-size: 8.5px !important; letter-spacing: 0.8px; opacity: 0.95; }
+.vr-vcard-branch { color: #cfc6b6 !important; font-size: 8.5px !important; }
+
+/* Version pile (bottom-left floating pile): thin hairline + gold spine, not a
+   thick foil frame. */
+.vr-vpile-card {
+  border: 1px solid var(--vr-border-strong) !important;
+  border-left: 3px solid var(--vr-gold) !important;
+  background: rgba(11, 11, 13, 0.96) !important;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5) !important;
+}
+.vr-vpile-card.is-top {
+  border-color: var(--vr-gold) !important;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(232, 193, 90, 0.15) !important;
+}
+.vr-vpile-card:not(.is-top) { opacity: 0.8; }
+.vr-vpile-card em { color: #cfc6b6 !important; }
+.vr-version-pile-label { color: var(--vr-muted) !important; letter-spacing: 1.8px; }
+
+/* SHUFFLE button: crisp ink pill + gold hairline; hover = thin gold-tint, not
+   a solid gold slab. */
+.vr-pile-shuffle {
+  border: 1.5px solid var(--vr-border-strong) !important;
+  border-radius: 4px !important;
+  background: rgba(11, 11, 13, 0.95) !important;
+  color: var(--vr-text) !important;
+  font-family: var(--vr-hud-mono) !important;
+  font-size: 8.5px !important;
+  font-weight: 700;
+  letter-spacing: 1.4px;
+  padding: 4px 10px !important;
+}
+.vr-pile-shuffle:hover {
+  background: rgba(232, 193, 90, 0.12) !important;
+  border-color: var(--vr-gold) !important;
+  color: var(--vr-gold-bright) !important;
+}
+
+/* Worktree branch card (bcard): gold spine + readable title/sub. */
+.vr-bcard { border-left: 3px solid var(--vr-gold) !important; }
+.vr-bcard b { color: var(--vr-text) !important; font-size: 13.5px !important; }
+.vr-bcard em { color: #cfc6b6 !important; font-size: 9px !important; }
+.vr-bcard-actions button {
+  border: 1.5px solid var(--vr-border-strong) !important;
+  color: var(--vr-text) !important;
+  background: rgba(11, 11, 13, 0.6) !important;
+  letter-spacing: 1px;
+}
+.vr-bcard-actions button:hover {
+  background: rgba(232, 193, 90, 0.12) !important;
+  border-color: var(--vr-gold) !important;
+  color: var(--vr-gold-bright) !important;
+}
+
+/* Worktree uncommitted-changes warning: readable body, orange COMMIT button. */
+.vr-table-warning { color: var(--vr-text) !important; font-size: 13px !important; }
+.vr-table-warning button { color: var(--vr-orange) !important; font-size: 9.5px !important; letter-spacing: 1.2px; }
+.vr-table-warning button:hover { background: var(--vr-orange) !important; color: #0b0b0d !important; }
+
+/* Empty-state + add-version footer button. */
+.vr-table-empty { color: #cfc6b6 !important; font-size: 11.5px !important; }
+.vr-table-foot button { color: var(--vr-text) !important; border-color: var(--vr-border-strong) !important; }
+.vr-table-foot button:hover { background: rgba(232, 193, 90, 0.1) !important; color: var(--vr-gold-bright) !important; }
+
+/* ---------- (3) CLEAR STAMP FIX (region-map node badge clipped) ---------- */
+/* The comic-notch clip-path on .vr-arch-node:not(.is-card) clips its
+   corner-mounted .vr-arch-node-badge, cutting "CLEAR" -> "CLEA.". Per the
+   manga rule (never notch anything whose badge reaches a corner), drop the
+   notch on these nodes and keep the ink/halftone look via a hairline. */
+.vr-arch-node:not(.is-card) {
+  clip-path: none;
+  overflow: visible;
+  border: 1.5px solid var(--vr-border-strong);
+  background-image: radial-gradient(rgba(232, 193, 90, 0.05) 1px, transparent 1.4px);
+  background-size: 8px 8px;
+}
+.vr-studio-architecture.is-region-map .vr-arch-node:not(.is-card) .vr-arch-node-badge.vr-stamp.is-mini {
+  overflow: visible;
+  z-index: 3;
+  background: var(--vr-bg);
+}
+
+/* ---------- (4) WELCOME MODAL QUICKSTART CARDS (flip bleed-through) ---------- */
+/* On a DONE card (is-flipped, e.g. SCAN "SETUP \xB7 WON") the back-face mascot +
+   FLIP label bled through because both faces trusted only backface-visibility.
+   Hide the inactive face explicitly (opacity+visibility) and give the flip a
+   fixed height so the four cards stay aligned. Make the back opaque. */
+.vr-qs-card.is-hero { position: relative; }
+.vr-qs-card.is-hero [data-flip-card],
+.vr-qs-card.is-hero .vr-flip-inner { height: 100%; }
+.vr-qs-card.is-hero .vr-flip-inner { min-height: 318px; }
+.vr-qs-card .vr-flip-face,
+.vr-qs-card .vr-flip-back {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  transition: opacity 200ms ease, visibility 200ms ease;
+}
+.vr-qs-card:not(.is-flipped) .vr-flip-face { opacity: 0; visibility: hidden; }
+.vr-qs-card.is-flipped .vr-flip-face { opacity: 1; visibility: visible; }
+.vr-qs-card.is-flipped .vr-flip-back { opacity: 0; visibility: hidden; }
+.vr-qs-card:not(.is-flipped) .vr-flip-back { opacity: 1; visibility: visible; }
+.vr-qs-card .vr-qs-back { background-color: #0e0e12; }
+.vr-qs-card.is-hero .vr-qs-card-inner { position: relative; z-index: 1; }
+
+/* ---------- (5) READABILITY (retone off-palette / low-contrast text) ---------- */
+
+/* Agent answer body / structured sections: warm near-white cream on the
+   highest-traffic reading surface (was cool blue-greys). */
+.vr-agent-answer-body,
+.vr-agent-answer-text { color: #f2efe6; }
+.vr-agent-answer-body p { color: #eae6db; }
+.vr-agent-list li,
+.vr-chat-message p { color: var(--vr-text); } /* merged: cream token wins over #eae6db/#e7e7e9 */
+.vr-agent-answer-body .vr-agent-empty { color: #bcb4a6; }
+
+/* Inline code / pill chips: near-white on true-black chip + white hairline,
+   gold only as the faint left tick (was gold body text). */
+.vr-agent-answer-body code {
+  background: rgba(4, 4, 6, 0.85);
+  border-color: rgba(238, 232, 220, 0.16);
+  border-left: 2px solid var(--vr-gold);
+  color: #f4f1e8;
+}
+.vr-chat-message b {
+  border-color: rgba(238, 232, 220, 0.24);
+  background: rgba(255, 255, 255, 0.05);
+  color: #f4f1e8;
+}
+
+/* Chat sub-caption / notes / inline em: readable neutral cream-grey. */
+.vr-chat-message em,
+.vr-chat-copy { color: #c6bfb2; }
+.vr-chat-note { color: #cfc8ba; }
+
+/* Chat bubbles (agent/system telemetry): true-black glass + white hairline +
+   warm-white text (was #1d1e22 grey slab w/ blue-grey borders). */
+.vr-chat-bubble {
+  background: rgba(7, 7, 9, 0.92);
+  border-color: rgba(238, 232, 220, 0.16);
+}
+.vr-chat-bubble.is-system { background: rgba(4, 4, 6, 0.9); border-color: rgba(238, 232, 220, 0.14); }
+.vr-chat-bubble span { color: #e9e2d5; }
+.vr-chat-bubble p,
+.vr-chat-bubble ul { color: #f5f1e8; }
+
+/* Terminal output: warm near-white body color (was cold #cbd5e1). */
+.vr-terminal-line { color: #ece7db; }
+
+/* Region-map / architecture captions + hints (cold slate -> warm muted). */
+.vr-arch-zone { color: rgba(232, 214, 176, 0.82); font-weight: 800; }
+.vr-arch-hint { color: var(--vr-muted); }
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-zone { color: rgba(244, 241, 232, 0.86); }
+
+/* Card / hero TYPE eyebrows (were 6-7.5px at 0.5-0.55 alpha, illegible). */
+.vr-tcard-type { color: rgba(244, 241, 232, 0.9); font-size: 8px; letter-spacing: 1px; }
+.vr-qs-type {
+  color: rgba(244, 241, 232, 0.9);
+  font-size: 9px;
+  position: relative;   /* merged w/ Bug-2 stacking so SETUP\xB7WON sits above art */
+  z-index: 2;
+  margin-top: 2px;
+  white-space: nowrap;
+}
+
+/* Misc muted secondary lines / captions (cold slate -> warm muted). */
+.vr-context-chip-label .muted { color: var(--vr-muted); font-weight: 550; }
+.vr-recent-chat em,
+.vr-recent-chat small { color: var(--vr-muted); }
+.vr-provider-drop-zone { color: var(--vr-muted); }
+.vr-chat-agent-task header em { color: var(--vr-muted); }
+.vr-provider-mcp-panel em { color: var(--vr-muted); }
+
+/* Icon-only close/secondary button: readable at rest, gold on hover. */
+.vr-context-chip-remove { color: var(--vr-muted); }
+.vr-context-chip-remove:hover { color: var(--vr-gold-bright); }
+
+/* ==========================================================================
+   LIVE TABLE STATS strip \u2014 real repo/provider metrics on the table (the
+   "Active Users" KPI idea, sourced from real data). Manga stat cards: ink
+   plate, white hairline, gold top-tick accent, big Anton number, mono label.
+   ========================================================================== */
+.vr-stat-strip {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+  margin: 0 0 16px;
+}
+@media (max-width: 1080px) { .vr-stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+.vr-stat-card {
+  position: relative;
+  padding: 11px 13px 10px;
+  border: 1px solid var(--vr-border-strong);
+  border-top: 2px solid rgba(238, 232, 220, 0.28);
+  border-radius: 4px;
+  background:
+    radial-gradient(rgba(232, 193, 90, 0.045) 1px, transparent 1.4px),
+    rgba(9, 9, 11, 0.94);
+  background-size: 9px 9px, auto;
+  overflow: hidden;
+}
+.vr-stat-card::after {
+  content: '';
+  position: absolute;
+  left: 0; top: 0;
+  width: 26px; height: 2px;
+  background: var(--vr-gold);
+}
+.vr-stat-card b {
+  display: block;
+  font-family: var(--mg-display);
+  font-weight: 400;
+  font-size: 27px;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  color: var(--vr-text);
+}
+.vr-stat-card.is-word b { font-size: 18px; padding: 4px 0 3px; }
+.vr-stat-card span {
+  display: block;
+  margin-top: 5px;
+  font-family: var(--vr-hud-mono);
+  font-size: 8.5px;
+  font-weight: 650;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--vr-muted);
+}
+.vr-stat-card.is-gold b { color: var(--vr-gold-bright); }
+.vr-stat-card.is-green b { color: var(--vr-green); }
+.vr-stat-card.is-orange b { color: var(--vr-orange); }
+.vr-stat-card.is-muted b { color: rgba(244, 241, 232, 0.6); }
+.vr-stat-card.is-green::after { background: var(--vr-green); }
+.vr-stat-card.is-orange::after { background: var(--vr-orange); }
+
+/* ==========================================================================
+   FINAL FIXES \u2014 hand spread + hover, worktree tag clip, placed-card readability
+   ========================================================================== */
+/* Hand: cards stick together more (was -34 = too spread) so the fan reads as a
+   held hand, with a clean hover lift on a high z so it never hides behind a
+   neighbour. */
+.vr-hand-fan .vr-tcard { margin-left: -46px; }
+.vr-hand-fan .vr-tcard:first-child { margin-left: 0; }
+/* Stable hover: lift STRAIGHT up with almost no scale. A big scale grows the
+   card footprint and flickers against the overlapping neighbours (the "buggy"
+   hover). Keep the same width, just rise + straighten; smooth + GPU-hinted. */
+.vr-hand-fan .vr-tcard {
+  transition: transform 130ms ease, box-shadow 130ms ease;
+  will-change: transform;
+}
+.vr-hand-fan .vr-tcard:hover {
+  transform: rotate(0deg) translateY(-26px) scale(1.02);
+  z-index: 30;
+}
+
+/* Worktree branch cards: drop the comic-notch that was slicing the
+   "YOU ARE HERE" tag on the current branch (same clip bug as the region-map
+   stamp). Keep the ink+gold-spine look via border only. */
+.vr-bcard { clip-path: none; overflow: visible; }
+.vr-bcard .vr-stamp.is-mini { z-index: 4; }
+
+/* Placed-card X sits above the holo foil so it is always clickable. */
+.vr-tcard.is-placed .vr-tcard-holofoil,
+.vr-tcard.is-placed .vr-tcard-glare { pointer-events: none; }
+
+/* Placed PROVIDER card X: top-left (grade coin is top-right), small + clean. */
+.vr-tcard.is-placed .vr-tcard-unplace {
+  width: 17px;
+  height: 17px;
+  top: 5px;
+  left: 5px;
+  right: auto;
+  font-size: 9px;
+}
+/* Placed VERSION card X: top-RIGHT (the V1.x label sits top-left), small. */
+.vr-vcard.is-mini.is-placed .vr-tcard-unplace {
+  opacity: 1;
+  width: 17px;
+  height: 17px;
+  top: 5px;
+  right: 5px;
+  left: auto;
+  font-size: 9px;
+  background: rgba(6, 6, 8, 0.92);
+  border: 1.5px solid var(--vr-gold);
+  color: var(--vr-gold-bright);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
+}
+.vr-vcard.is-mini.is-placed .vr-tcard-unplace:hover { background: var(--vr-red); border-color: var(--vr-red); color: #fff; }
+
+/* Placed-card HOVER must KEEP the translate(-50%,-50%) centering \u2014 the has-art
+   hover rule was replacing it, so the card JUMPED off-position (the "buggy
+   hover"). Gentle lift, keep centered, no snap. */
+.vr-tcard.is-placed:hover,
+.vr-tcard.is-placed.has-art:hover {
+  transform: translate(-50%, -50%) rotate(0deg) scale(1.05) !important;
+  z-index: 40;
+}
+
+/* ==========================================================================
+   MANGA READABILITY + CARD-VIBE PASS
+   Appended after the FINAL FIXES block (>16354) so it wins by source order.
+   (1) Typography: 3-tier hierarchy \u2014 Anton=headline only, mono=legible floor,
+       sans=running/secondary UI. (2) Manga card-vibe: faint margin-only ink,
+       gold halftone + card/raven/poster watermarks that NEVER sit behind text.
+   !important is used ONLY where an existing same-file !important forces it.
+   ========================================================================== */
+
+/* -------------------------------------------------------------------------
+   (1) TYPOGRAPHY
+   ------------------------------------------------------------------------- */
+
+/* 1a. Small mono-telemetry label FLOOR \u2014 lift every sub-9.5px cap to legible.
+   (.vr-tcard-type/-grade base 7-8px; .vr-bcard em / .vr-vpile-card em carry
+   an existing 9px !important, so those need !important to reach the floor.) */
+.vr-tcard-type,
+.vr-tcard-grade,
+.vr-tcard.is-back .vr-tcard-backname,
+.vr-qs-local,
+.vr-bcard em,
+.vr-vpile-card em,
+.vr-addpick-list button em {
+  font-size: 9.5px !important;      /* was 6\u20139px; beats 16104/16079 !important */
+  line-height: 1.25;
+  font-weight: 620;                 /* thin mono needs weight on black paper */
+}
+.vr-tcard.is-dealt .vr-tcard-type,
+.vr-tcard.is-dealt .vr-tcard-grade { font-size: 10px !important; }
+
+/* 1b. Letter-spacing CAP on tiny caps \u2014 extreme 1.4\u20132px tracking smears words.
+   (Cap to ~0.07em. .vr-hud-strip / chip .muted already retoned at 15992+,
+   so only their tracking is nudged, not restated.) */
+.vr-tcard-type,
+.vr-tcard-grade,
+.vr-tcard.is-back .vr-tcard-backname,
+.vr-qs-local,
+.vr-pile-shuffle,
+.vr-bcard-actions button,
+.vr-table-warning button {
+  letter-spacing: 0.07em;
+}
+.vr-hud-strip { letter-spacing: 0.04em; }
+
+/* 1c. Anton DEMOTION \u2014 pull the condensed poster face off running UI text.
+   Menu labels + action-button captions move to the readable sans stack. */
+.vr-scope-menu p,
+.vr-studio-add-chat,
+.vr-provider-ask-agent,
+.vr-new-chat-button,
+.vr-agent-followups button.is-primary,
+.vr-chat-command-popover button.is-primary,
+.vr-cli-action-button.is-primary {
+  font-family: var(--vr-hud-sans, 'Geist', 'Inter', system-ui, sans-serif);
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+.vr-scope-menu p { font-size: 10px; }
+
+/* 1d. Studio tab bar \u2014 Anton stays (display scale) but sized up + opened for
+   scannable CHAT / ARCHITECTURE / TERMINAL / DIFF. */
+.vr-studio-tabs button {
+  font-size: 13px;
+  letter-spacing: 0.06em;
+  font-weight: 400;                 /* Anton is already heavy */
+}
+
+/* 1e. HUD telemetry strip \u2014 bigger, weightier instrument line. */
+.vr-hud-strip { font-size: 10px; color: #d2cabc; }
+.vr-hud-strip strong { font-weight: 720; color: #f7f4ec; }
+.vr-hud-strip em,
+.vr-hud-strip b { font-weight: 600; }
+
+/* 1f. Context chips \u2014 cream sans label, drop the cold-grey muted qualifier. */
+.vr-context-chip-label {
+  font-size: 12px;
+  font-weight: 620;
+  letter-spacing: 0.01em;
+}
+.vr-context-chip-label .muted {
+  color: var(--vr-muted);
+  font-weight: 560;
+}
+
+/* 1g. Region-map / architecture node badges + zone/hint \u2014 weight up, cap track. */
+.vr-arch-node-badge {
+  font-size: 10.5px;
+  font-weight: 780;
+  letter-spacing: 0.02em;
+}
+.vr-arch-zone { font-size: 10px; letter-spacing: 0.06em; }
+.vr-arch-hint { font-size: 11px; letter-spacing: 0.01em; line-height: 1.4; }
+
+/* 1h. Model/scope picker button \u2014 selected model reads clean, non-condensed. */
+.vr-model-picker > button strong {
+  font-family: var(--vr-hud-sans, 'Geist', 'Inter', system-ui, sans-serif);
+  font-size: 12px;
+  font-weight: 680;
+  letter-spacing: 0.01em;
+}
+.vr-model-picker > button span {
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  color: var(--vr-muted);
+}
+
+/* 1i. Dropdown menu rows \u2014 readable item body + sub-caption, sans not condensed. */
+.vr-model-menu button,
+.vr-scope-menu button,
+.vr-chat-command-popover button {
+  font-size: 12.5px;
+  letter-spacing: 0.005em;
+}
+.vr-model-menu button strong { font-weight: 660; }
+.vr-model-menu button em { font-size: 11px; font-style: normal; color: var(--vr-muted); }
+
+/* 1j. Stat-card label under the big Anton KPI number \u2014 size up the smear. */
+.vr-stat-card span {
+  font-size: 9.5px;
+  letter-spacing: 0.08em;
+  font-weight: 620;
+  color: #ccc4b6;
+}
+
+/* 1k. Version card meta / branch / pile label \u2014 floor size + cap tracking.
+   (Overrides the contrast-pass 8.5px !important at 16063-64 and the pile
+   letter-spacing at 16080, so font-size/letter-spacing need !important.) */
+.vr-vcard-meta,
+.vr-vcard-branch {
+  font-size: 9.5px !important;      /* was 8.5px !important */
+  letter-spacing: 0.05em !important;
+}
+.vr-version-pile-label {
+  font-size: 9.5px !important;
+  letter-spacing: 0.08em !important; /* was 1.8px */
+  font-weight: 640;
+}
+
+/* 1l. SHUFFLE / worktree / table-foot action captions \u2014 legible click labels. */
+.vr-pile-shuffle,
+.vr-bcard-actions button,
+.vr-table-warning button,
+.vr-table-foot button {
+  font-size: 10px;
+  letter-spacing: 0.07em;
+  font-weight: 680;
+}
+
+/* 1m. Highest-traffic reading surfaces \u2014 comfortable body size + leading. */
+.vr-agent-answer-body,
+.vr-agent-answer-body p,
+.vr-chat-message p,
+.vr-chat-bubble p {
+  font-size: 13.5px;
+  line-height: 1.55;
+  letter-spacing: 0.003em;
+}
+.vr-terminal-line { font-size: 12.5px; line-height: 1.5; }
+
+/* 1n. Empty-state / drop-zone / note / recent-chat meta \u2014 lift learn-the-UI text. */
+.vr-table-empty { font-size: 12.5px; line-height: 1.45; }
+.vr-provider-drop-zone { font-size: 12px; letter-spacing: 0.01em; }
+.vr-chat-note { font-size: 12px; line-height: 1.45; }
+.vr-recent-chat em,
+.vr-recent-chat small { font-size: 11px; font-style: normal; }
+
+/* 1o. Env-connect code chip + terminal compose \u2014 legible mono command hints. */
+.vr-env-connect-option b {
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  font-weight: 640;
+}
+.vr-terminal-compose textarea {
+  font-size: 13px;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+/* -------------------------------------------------------------------------
+   (2) MANGA CARD-VIBE BACKGROUND \u2014 all margin/corner-masked, never behind text
+   ------------------------------------------------------------------------- */
+
+/* Keep app chrome above the fixed texture layers so opaque panels occlude them. */
+.vr-app { position: relative; z-index: 1; }
+.vr-composed-shell { position: relative; z-index: 1; }
+
+/* 2a. Fixed full-viewport ink-splatter, painted ONLY in the outer page gutter.
+   The .vr-composed-shell (opaque near-black, margin:10px 12px) sits on top and
+   blocks it wherever real content lives; screen-blend keeps it light ink. */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: url('/manga/bg.webp') no-repeat center center / cover;
+  /* opacity + mask only \u2014 no mix-blend/filter (those are GPU-heavy on a
+     fixed full-viewport layer and stall headless capture). The art is already
+     ink-on-black so it reads as faint ink in the gutter at this opacity. */
+  opacity: 0.09;
+  -webkit-mask-image: radial-gradient(ellipse 74% 70% at 50% 46%, transparent 60%, #000 92%);
+  mask-image: radial-gradient(ellipse 74% 70% at 50% 46%, transparent 60%, #000 92%);
+}
+
+/* 2b. Corner-weighted fine GOLD halftone screentone (manga-card dot vibe),
+   masked to two opposite corners only so the chat/panel mid-screen stays clean. */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image: radial-gradient(rgba(232, 193, 90, 0.10) 0.9px, transparent 1.3px);
+  background-size: 5px 5px;
+  opacity: 0.5;
+  -webkit-mask-image:
+    radial-gradient(circle at 100% 0%, #000 0%, transparent 34%),
+    radial-gradient(circle at 0% 100%, #000 0%, transparent 34%);
+  mask-image:
+    radial-gradient(circle at 100% 0%, #000 0%, transparent 34%),
+    radial-gradient(circle at 0% 100%, #000 0%, transparent 34%);
+  -webkit-mask-composite: source-over;
+  mask-composite: add;
+}
+
+/* 2c. Ghost provider card tucked into the shell's top-left gutter, behind the
+   translucent topbar/rail only. Lives inside overflow:hidden (clipped to shell),
+   blurred + rotated like a card left on the table, faded before the chat column.
+   RISK NOTE: .vr-composed-shell::after is reused as the drop overlay while
+   dragging (.vr-app.is-dragging-*), which harmlessly hides this watermark
+   during an active drag; it returns on drop. Idle state is unaffected. */
+.vr-composed-shell .vr-studio-body::after {
+  content: '';
+  position: absolute;
+  left: -70px;
+  top: -40px;
+  width: 300px;
+  height: 420px;
+  z-index: 0;
+  pointer-events: none;
+  background: url('/manga/cards/supabase.webp') no-repeat center / contain;
+  opacity: 0.05;
+  transform: rotate(-13deg);
+  filter: grayscale(0.6) contrast(0.95) blur(0.4px);
+  -webkit-mask-image: linear-gradient(135deg, #000 12%, transparent 62%);
+  mask-image: linear-gradient(135deg, #000 12%, transparent 62%);
+}
+
+/* 2d. Existing raven emblem watermark (base at 15577, opacity 0.06, no mask):
+   add a corner-fade mask + push below content so it never creeps under rows.
+   !important here re-targets the already-textured pseudo across states. */
+.vr-table-view::after,
+.vr-studio-architecture.is-region-map::after {
+  z-index: 0 !important;
+  opacity: 0.07 !important;
+  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 58%) !important;
+  mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 58%) !important;
+}
+.vr-table-view > *,
+.vr-studio-architecture.is-region-map > * { position: relative; z-index: 1; }
+
+/* 2e. Poster ghost low in the left gutter of the studio body \u2014 far-corner masked
+   + blurred so it never reaches the readable center/right columns. */
+.vr-composed-shell .vr-studio-body { position: relative; }
+.vr-composed-shell .vr-studio-body::before {
+  content: '';
+  position: absolute;
+  left: -30px;
+  bottom: -30px;
+  width: 280px;
+  height: 360px;
+  z-index: 0;
+  pointer-events: none;
+  background: url('/manga/poster.webp') no-repeat left bottom / contain;
+  opacity: 0.045;
+  filter: grayscale(0.7) contrast(1.05) blur(0.6px);
+  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 0%, transparent 55%);
+  mask-image: radial-gradient(circle at 0% 100%, #000 0%, transparent 55%);
+}
+
+/* 2f. CONTRAST GUARD \u2014 the three translucent panels are rgba(18,20,24,.78),
+   22% transparent, so texture could faintly show under text. Bump the ink base
+   more opaque; margins keep the vibe, text stays crisp. (background-color only,
+   later source order beats the shorthand at 1737 without !important.) */
+.vr-studio-chat,
+.vr-studio-terminal,
+.vr-studio-diff { background-color: rgba(14, 15, 19, 0.9); }
+
+/* ============================================================================
+   MANGA READABILITY \u2014 FINAL ENFORCEMENT PASS (appended after all prior
+   override chains: MANGA THEME PASS / B&W CONTRAST / FINAL FIXES / READABILITY).
+   Wins by source order. Two groups:
+     (1) READABLE FONTS \u2014 strict 3-tier type system, no coloured/gradient
+         button text, condensed Anton pulled off all running/clickable UI.
+     (2) MENTION + WELCOME/HANDOFF MANGA THEME \u2014 re-skin the old blue-slate
+         PromptModal + quickstart to ink/gold manga.
+   !important is used ONLY where an existing same-file !important forces it
+   (documented inline). Readability always wins over theme where they overlap.
+   RISK NOTES: clip-path notches added to modal/menu panels can clip focus
+   rings / drop-shadows on the notched corner \u2014 acceptable (decorative corner
+   only, ~12-18px, no interactive target sits there). No overflow:hidden added,
+   so popovers/tooltips are unaffected.
+   ========================================================================= */
+
+/* ---------------------------------------------------------------------------
+   GROUP 1 \u2014 READABLE FONTS
+   --------------------------------------------------------------------------- */
+
+/* 1.0 \u2014 Foundation: guarantee one clean non-condensed sans stack for TIER 2.
+   Every rule below that says var(--vr-hud-sans) resolves to this. */
+:root {
+  --vr-hud-sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* 1.1 \u2014 Composer action bar (ADD CONTEXT / MENTION / COMMANDS / WORST CARD /
+   ADD CARD): the exact pills the user screenshotted. Clean sans, normal-case,
+   comfortable size, single cream colour. Neutralise any inherited condensed
+   face and any -webkit-text-fill on the label span. */
+.vr-chat-inline-actions > button,
+.vr-chat-command-trigger > button,
+.vr-chat-inline-actions button {
+  font-family: var(--vr-hud-sans);
+  font-size: 12.5px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  color: var(--vr-text);
+}
+.vr-chat-inline-actions > button span,
+.vr-chat-command-trigger > button span {
+  font-family: var(--vr-hud-sans);
+  font-weight: 650;
+  letter-spacing: 0.02em;
+  color: var(--vr-text);
+  -webkit-text-fill-color: currentColor;
+  background: none;
+}
+
+/* 1.2 \u2014 Composer action icons: kill MENTION multicolour / ADD CARD purple.
+   Pin all glyphs to the same muted cream as the label so each pill is one
+   legible colour. (Worst-card icon keeps a gold accent \u2014 see 1.3.) */
+.vr-chat-inline-actions > button i[data-icon],
+.vr-chat-inline-actions > button svg,
+.vr-chat-command-trigger > button i[data-icon],
+.vr-chat-command-trigger > button svg {
+  color: var(--vr-muted);
+  stroke: var(--vr-muted);
+}
+
+/* 1.3 \u2014 WORST CARD pill: remove the gold TEXT (overrides 14663-14664). Label
+   goes cream like its siblings; gold survives only as border + icon accent. */
+.vr-chat-inline-actions > button.is-worst-card,
+.vr-chat-inline-actions > button.is-worst-card span {
+  color: var(--vr-text);
+}
+.vr-chat-inline-actions > button.is-worst-card {
+  border-color: rgba(232, 193, 90, 0.42);
+}
+.vr-chat-inline-actions > button.is-worst-card i[data-icon],
+.vr-chat-inline-actions > button.is-worst-card svg {
+  color: var(--vr-gold);
+  stroke: var(--vr-gold);
+}
+
+/* 1.4 \u2014 is-primary composer pills (gold fill): dark ink text, not gold text. */
+.vr-chat-inline-actions button.is-primary,
+.vr-chat-inline-actions button.is-primary span {
+  color: #1a1206;
+}
+
+/* 1.5 \u2014 Hover on composer buttons: emphasis via border + bright ink, not by
+   flipping the whole label. Gold-bright label on hover is legible on the
+   darkened background and matches the menu hover language elsewhere. */
+.vr-chat-inline-actions button:hover,
+.vr-chat-inline-actions > button:hover,
+.vr-chat-command-trigger > button:hover {
+  color: var(--vr-gold-bright);
+  border-color: var(--vr-gold);
+  background: rgba(20, 18, 12, 0.85);
+}
+.vr-chat-inline-actions > button:hover span { color: var(--vr-gold-bright); }
+.vr-chat-inline-actions > button:hover i[data-icon],
+.vr-chat-inline-actions > button:hover svg {
+  color: var(--vr-gold-bright);
+  stroke: var(--vr-gold-bright);
+}
+
+/* 1.6 \u2014 ADD CARD shelf chip + is-gold variant. Base 8.5px/1.4px mono (14503)
+   is NOT !important, so plain declarations win by source order \u2014 no
+   !important needed. Readable sans, >=11px, tight tracking; gold stays as the
+   FILL with dark ink text. */
+.vr-shelf-chip {
+  font-family: var(--vr-hud-sans);
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  color: var(--vr-text);
+}
+.vr-shelf-chip.is-gold { color: #1a1206; }
+
+/* 1.7 \u2014 Quick-action tiles (left rail). Sans, readable weight/size, single
+   cream colour; icon a quiet accent. */
+.vr-quick-action,
+.vr-quick-action strong,
+.vr-quick-action em {
+  font-family: var(--vr-hud-sans);
+  letter-spacing: 0.01em;
+  text-transform: none;
+  color: var(--vr-text);
+}
+.vr-quick-action strong { font-size: 12.5px; font-weight: 660; }
+.vr-quick-action em { font-size: 11px; font-weight: 500; color: var(--vr-muted); }
+.vr-quick-action i, .vr-quick-action svg { color: var(--vr-muted); stroke: var(--vr-muted); }
+
+/* 1.8 \u2014 Dropdown menu rows (model / scope / command popover). Sans, comfortable
+   size, cream text. Section HEADERS (.vr-model-menu p / .vr-scope-menu p) stay
+   Anton gold \u2014 that is a valid TIER-1 eyebrow, restyled in 1.9 / GROUP 2. */
+.vr-model-menu button,
+.vr-scope-menu button,
+.vr-chat-command-popover button {
+  font-family: var(--vr-hud-sans);
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+  text-transform: none;
+  color: var(--vr-text);
+}
+.vr-model-menu button strong,
+.vr-scope-menu button strong { font-family: var(--vr-hud-sans); font-weight: 660; }
+.vr-model-menu button em,
+.vr-scope-menu button em {
+  font-family: var(--vr-hud-sans);
+  font-style: normal;
+  font-weight: 500;
+  color: var(--vr-muted);
+}
+
+/* 1.9 \u2014 Quickstrike command menu: clickable rows go sans/cream; header stays a
+   small tracked eyebrow. */
+.vr-quickstrike button {
+  font-family: var(--vr-hud-sans);
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: none;
+  color: var(--vr-text);
+}
+.vr-quickstrike header {
+  font-size: 11px;
+  letter-spacing: 0.06em;
+}
+
+/* 1.10 \u2014 Model/scope picker trigger (selected-model label). */
+.vr-model-picker > button strong {
+  font-family: var(--vr-hud-sans);
+  font-size: 12px;
+  font-weight: 660;
+  letter-spacing: 0.01em;
+  color: var(--vr-text);
+}
+.vr-model-picker > button span {
+  font-family: var(--vr-hud-sans);
+  font-size: 10.5px;
+  letter-spacing: 0.02em;
+  color: var(--vr-muted);
+}
+
+/* 1.11 \u2014 Primary gold CTAs that were switched to Anton (15704+): pull them to
+   bold sans, dark ink on gold. Gold is fill/accent, never text colour. */
+.vr-new-chat-button,
+.vr-provider-ask-agent,
+.vr-approve-all,
+.vr-chat-command-popover button.is-primary,
+.vr-agent-followups button.is-primary,
+.vr-agent-inline-action.is-primary,
+.vr-cli-action-button.is-primary,
+.vr-studio-add-chat,
+.vr-studio-architecture > footer button.is-primary,
+.vr-arch-drawer footer button.is-primary,
+.vr-wt-actions button.is-primary {
+  font-family: var(--vr-hud-sans);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  color: #1a1206;
+}
+
+/* 1.12 \u2014 Studio tab bar (CHAT / ARCHITECTURE / TERMINAL / DIFF): legitimate
+   TIER-1 marquee. Keep Anton, but lock size/tracking legible; active tab keeps
+   dark ink on gold. */
+.vr-studio-tabs button {
+  font-family: var(--mg-display);
+  font-size: 13.5px;
+  letter-spacing: 0.06em;
+  font-weight: 400;
+}
+.vr-studio-tabs button.is-active { color: #0a0b0e; }
+
+/* 1.13 \u2014 Context chips + provider drop-label in the composer. */
+.vr-context-chip-label,
+.vr-provider-drop-label {
+  font-family: var(--vr-hud-sans);
+  font-size: 12px;
+  font-weight: 620;
+  letter-spacing: 0.01em;
+  text-transform: none;
+  color: var(--vr-text);
+}
+.vr-context-chip-label .muted { font-weight: 520; color: var(--vr-muted); }
+
+/* 1.14 \u2014 Stat-card LABEL beneath the Anton KPI number. The number
+   (.vr-stat-card b) keeps Anton untouched; only the micro-label is lifted. */
+.vr-stat-card span {
+  font-family: var(--vr-hud-sans);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #ccc4b6;
+}
+
+/* 1.15 \u2014 Ribbon stat qualifier + table-ribbon brand value. */
+.vr-ribbon-stat i {
+  font-family: var(--vr-hud-sans);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--vr-muted);
+}
+.vr-table-ribbon > b {
+  font-family: var(--vr-hud-sans);
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--vr-gold-bright);
+}
+
+/* 1.16 \u2014 Version card meta / branch / pile labels. These carry same-file
+   !important (16062/16064/16065/16081) on color/size/family, so !important is
+   required here to win on family + tracking. Size floors from 16386 are left
+   intact (readability floor already >=9.5px). */
+.vr-vcard-meta,
+.vr-vcard-branch,
+.vr-version-pile-label {
+  font-family: var(--vr-hud-sans) !important;
+  letter-spacing: 0.03em !important;
+  text-transform: none;
+}
+.vr-vpile-card b {
+  font-family: var(--vr-hud-sans) !important;   /* beats 16062 !important */
+  letter-spacing: 0.01em;
+}
+
+/* 1.17 \u2014 Shuffle / worktree / table-foot / back-card / addpick action captions:
+   every click label a plain readable word, not a condensed cap. */
+.vr-pile-shuffle,
+.vr-bcard-actions button,
+.vr-table-warning button,
+.vr-table-foot button,
+.vr-addpick-list button strong {
+  font-family: var(--vr-hud-sans);
+  font-size: 11px;
+  font-weight: 640;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  color: var(--vr-text);
+}
+
+/* 1.18 \u2014 Global guard: no gradient/clipped text may re-enter any button/label.
+   (No same-file !important on -webkit-text-fill-color, so none needed here.) */
+.vr-chat-inline-actions button,
+.vr-chat-command-trigger button,
+.vr-quick-action,
+.vr-quick-action strong,
+.vr-quick-action em,
+.vr-shelf-chip,
+.vr-studio-tabs button,
+.vr-model-menu button,
+.vr-scope-menu button,
+.vr-chat-command-popover button {
+  -webkit-text-fill-color: currentColor;
+  -webkit-background-clip: border-box;
+  background-clip: border-box;
+}
+
+/* ---------------------------------------------------------------------------
+   GROUP 2 \u2014 MENTION + WELCOME/HANDOFF MANGA THEME
+   The composer "Mention" button (data-action="prompt") opens the PromptModal,
+   so re-theming the PromptModal fixes both the "mention screen" and the Scoped
+   Handoff / Agent Mission modal. Also sweeps the leftover blue-slate theme off
+   Guide/Plan/Notifications and finishes the quickstart cards.
+   RISK NOTE: clip-path notch on modal panels clips the far corner only; no
+   text or control sits there.
+   --------------------------------------------------------------------------- */
+
+/* 2.1 \u2014 Modal header shell (Agent Mission / Guide): navy gradient + slate
+   border -> ink panel, gold left spine, gold halftone. */
+.vr-modal-prompt-head,
+.vr-modal-guide-head {
+  border: 1px solid var(--vr-border-strong);
+  border-left: 3px solid var(--vr-gold);
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
+  background-color: rgba(9, 9, 11, 0.94);
+  background-image:
+    radial-gradient(circle at 12% 30%, rgba(232, 193, 90, 0.07), transparent 40%),
+    radial-gradient(rgba(232, 193, 90, 0.05) 1px, transparent 1.4px);
+  background-size: auto, 9px 9px;
+  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.55);
+}
+
+/* 2.2 \u2014 Header eyebrow: gold token, small Anton poster eyebrow. */
+.vr-modal-prompt-head p,
+.vr-modal-guide-head p {
+  color: var(--vr-gold);
+  font-family: var(--mg-display);
+  font-weight: 400;
+  font-size: 12px;
+  letter-spacing: 0.14em;
+}
+
+/* 2.3 \u2014 Header title: Anton poster caps, cream ink. */
+.vr-modal-prompt-head h2,
+.vr-modal-guide-head h2 {
+  font-family: var(--mg-display);
+  font-weight: 400;
+  font-size: 40px;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  color: var(--vr-text);
+}
+
+/* 2.4 \u2014 Header sub-copy: ice-blue -> readable cream sans. */
+.vr-modal-prompt-head em,
+.vr-modal-guide-head em {
+  font-family: var(--vr-hud-sans);
+  color: var(--vr-muted);
+  font-size: 14px;
+  font-style: normal;
+  line-height: 1.5;
+}
+
+/* 2.5 \u2014 Header side aside (Scope / One gap): slate glass -> ink + gold hairline. */
+.vr-modal-prompt-head aside,
+.vr-modal-guide-head aside {
+  border: 1px solid var(--vr-border-strong);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.28);
+}
+.vr-modal-prompt-head aside > i,
+.vr-modal-guide-head aside > i {
+  background: rgba(232, 193, 90, 0.10);
+  color: var(--vr-gold-bright);
+  border-radius: 0;
+}
+.vr-modal-prompt-head aside > span,
+.vr-modal-guide-head aside > span {
+  color: var(--vr-gold);
+  font-family: var(--vr-hud-sans);
+  letter-spacing: 0.06em;
+}
+.vr-modal-prompt-head aside > strong,
+.vr-modal-guide-head aside > strong { color: var(--vr-text); }
+
+/* 2.6 \u2014 Scoped-handoff mission <pre> card: navy border + ice-blue mono ->
+   ink card, gold spine, cream mono. */
+.vr-modal-prompt-card {
+  border: 1px solid var(--vr-border);
+  border-left: 3px solid var(--vr-gold);
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
+  background:
+    radial-gradient(circle at 88% 0%, rgba(232, 193, 90, 0.05), transparent 34%),
+    rgba(9, 9, 11, 0.94);
+}
+.vr-modal-prompt-card pre {
+  color: var(--vr-text);
+  font-family: var(--vr-hud-mono);
+  font-size: 12.5px;
+  line-height: 1.7;
+}
+
+/* 2.7 \u2014 Flow/signal list panels: navy -> ink + gold halftone. */
+.vr-modal-flow-list,
+.vr-modal-signal-list {
+  border: 1px solid var(--vr-border-strong);
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+  background:
+    radial-gradient(rgba(232, 193, 90, 0.04) 1px, transparent 1.4px) 0 0 / 9px 9px,
+    rgba(9, 9, 11, 0.94);
+}
+
+/* 2.8 \u2014 Flow-list step rows: slate borders + purple glow + cold-blue caption
+   -> ink rows, gold-tinted hover spine, readable sans. */
+.vr-modal-flow-list button {
+  border: 1px solid var(--vr-border);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.25);
+}
+.vr-modal-flow-list button:hover {
+  border-color: var(--vr-gold);
+  box-shadow: inset 3px 0 0 var(--vr-gold);
+  background: rgba(232, 193, 90, 0.10);
+}
+.vr-modal-flow-list button > span {
+  border: 2px solid var(--vr-gold);
+  color: var(--vr-gold-bright);
+}
+.vr-modal-flow-list strong { font-family: var(--vr-hud-sans); color: var(--vr-text); }
+.vr-modal-flow-list em {
+  font-family: var(--vr-hud-sans);
+  color: var(--vr-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+/* 2.9 \u2014 Composer scope/mention popup panel: reinforce ink + gold spine +
+   comic-notch so it reads as part of the manga card system. */
+.vr-scope-menu {
+  border-radius: 0;
+  border-left: 3px solid var(--vr-gold);
+  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
+  background-color: rgba(9, 9, 11, 0.96);
+  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.55);
+}
+
+/* 2.10 \u2014 Scope/mention popup section label: Anton gold eyebrow, legible size.
+   (Group 1 already forced the ROWS to sans; this only styles the <p> header.) */
+.vr-scope-menu p {
+  font-family: var(--mg-display);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  color: var(--vr-gold);
+}
+
+/* 2.11 \u2014 Scope/mention popup rows: gold-tinted hover + selected state.
+   (Font-family/size/colour already set sans in Group 1 \xA71.8 \u2014 here we only add
+   the hover/selected theming so the two passes don't fight.) */
+.vr-scope-menu button:hover {
+  background: rgba(232, 193, 90, 0.14);
+  box-shadow: inset 3px 0 0 var(--vr-gold);
+  color: var(--vr-gold-bright);
+}
+.vr-scope-menu button:has(> b) {
+  background: rgba(232, 193, 90, 0.18);
+  box-shadow: inset 3px 0 0 var(--vr-gold-bright);
+  color: var(--vr-gold-bright);
+}
+
+/* 2.12 \u2014 Welcome/quickstart title: condensed --vr-display -> Anton poster. */
+.vr-qs-head h2 {
+  font-family: var(--mg-display);
+  font-weight: 400;
+  font-size: 32px;
+  letter-spacing: 0.02em;
+  color: var(--vr-text);
+}
+
+/* 2.13 \u2014 Welcome sub-copy + LOCAL badge. The 9.5px floor at 16386 keeps
+   .vr-qs-local legible; here we only recolor to gold (no size restated, so we
+   don't fight that !important). */
+.vr-qs-head p {
+  font-family: var(--vr-hud-sans);
+  font-size: 13px;
+  color: var(--vr-muted);
+}
+.vr-qs-local {
+  color: var(--vr-gold);
+  font-weight: 660;
+}
+
+/* 2.14 \u2014 Welcome hero cards: rounded flat -> gold clipped-frame collector card. */
+.vr-qs-card.is-hero {
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
+  background: linear-gradient(160deg, var(--vr-gold), rgba(232, 193, 90, 0.35));
+  padding: 2px;
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
+}
+.vr-qs-card.is-hero .vr-qs-card-inner {
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
+  background:
+    radial-gradient(rgba(232, 193, 90, 0.05) 1px, transparent 1.4px) 0 0 / 8px 8px,
+    rgba(9, 9, 11, 0.96);
+}
+
+/* 2.15 \u2014 Welcome hero card title: Anton only on the title; body/labels go sans. */
+.vr-qs-card.is-hero .vr-qs-card-top strong {
+  font-family: var(--mg-display);
+  font-weight: 400;
+  font-size: 15px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--vr-text);
+}
+.vr-qs-card.is-hero .vr-qs-card em,
+.vr-qs-card.is-hero .vr-qs-type {
+  font-family: var(--vr-hud-sans);
+  color: var(--vr-muted);
+}
+.vr-qs-card.is-hero button {
+  font-family: var(--vr-hud-sans);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  color: var(--vr-gold-bright);
+  border-color: var(--vr-gold);
+}
+
+/* ==========================================================================
+   FINAL POLISH \u2014 drag ghost, active tab, low-quality chat cards
+   ========================================================================== */
+/* Drag ghost: a clean floating card preview. It was a clone that KEPT the
+   placed/hand card's position:absolute + translate(-50%,-50%) / rotation /
+   negative margin, so it rendered as a corrupted half-card. Reset to a plain
+   fixed, upright (slightly tilted) card sized to the source. */
+.vr-drag-ghost {
+  position: fixed !important;
+  margin: 0 !important;
+  transform: rotate(-4deg) !important;
+  transform-origin: top left;
+  z-index: 100000 !important;
+  pointer-events: none !important;
+  opacity: 0.96;
+  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.78);
+  transition: none !important;
+}
+.vr-drag-ghost .vr-tcard-unplace { display: none !important; }
+.vr-drag-ghost .vr-tcard-holofoil,
+.vr-drag-ghost .vr-tcard-glare { animation: none !important; opacity: 0.2 !important; }
+
+/* Active tab: was dark #0a0b0e text on a near-transparent wash = an unreadable
+   "black mark". Gold-bright text on a subtle wash + gold underline reads clean. */
+.vr-studio-tabs button.is-active {
+  color: var(--vr-gold-bright) !important;
+  background: rgba(244, 241, 232, 0.05);
+  box-shadow: inset 0 -2px 0 var(--vr-gold), inset 0 0 0 1px rgba(232, 193, 90, 0.26);
+  border-radius: 4px;
+}
+
+/* ==========================================================================
+   VERSION CARDS \u2014 richer "release card" (was small/plain crimson-inner).
+   Gold ornate frame + comic notch + halftone + BIG Anton version number,
+   matching the premium provider-card language. No full-art (releases have no
+   art), so the version number IS the hero.
+   ========================================================================== */
+.vr-vcard {
+  border: 1.5px solid var(--vr-border-strong) !important;
+  border-radius: 5px !important;
+  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+  background: rgba(9, 9, 11, 0.97) !important;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(232, 193, 90, 0.16) !important;
+  overflow: hidden !important;
+}
+.vr-vcard::before {
+  inset: 0 !important;
+  border-radius: 0 !important;
+  background-color: transparent !important;
+  background-image:
+    radial-gradient(rgba(232, 193, 90, 0.05) 1px, transparent 1.4px),
+    radial-gradient(ellipse 78% 46% at 50% 0%, rgba(232, 193, 90, 0.07), transparent 60%) !important;
+  background-size: 9px 9px, 100% 100% !important;
+  background-repeat: repeat, no-repeat !important;
+  opacity: 1 !important;
+}
+.vr-vcard:not(.is-current) { filter: none !important; opacity: 0.92; }
+.vr-vcard.is-current {
+  border-color: var(--vr-gold) !important;
+  border-left: 3px solid var(--vr-gold) !important;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 22px rgba(232, 193, 90, 0.24), inset 0 0 0 1px rgba(232, 193, 90, 0.2) !important;
+}
+.vr-vcard-top b {
+  font-family: var(--mg-display) !important;
+  font-size: 26px !important;
+  font-weight: 400 !important;
+  color: var(--vr-gold-bright) !important;
+  letter-spacing: 0.02em !important;
+}
+.vr-vcard.is-mini .vr-vcard-top b { font-size: 22px !important; }
+.vr-vcard-branch { color: var(--vr-muted) !important; }
+/* four gold corner ticks like the provider cards */
+.vr-vcard .vr-vcard-foot::after {
+  content: '';
+  position: absolute;
+  left: 8px; bottom: 8px; right: 8px;
+  height: 1px;
+  background: linear-gradient(90deg, var(--vr-gold), transparent 70%);
+  opacity: 0.5;
+}
+
+/* ==========================================================================
+   WELCOME FLIP-CARD BACK \u2014 flat manga halftone (was a gold spiral). Ink plate,
+   gold halftone screentone, a soft gold top-glow, the fierce raven mark, gold
+   FLIP label. Reads as a face-down manga card, not a casino spiral.
+   ========================================================================== */
+.vr-qs-back,
+.vr-tcard.is-back:not(.has-art) {
+  border: 1.5px solid var(--vr-border-strong) !important;
+  border-radius: 5px !important;
+  background:
+    radial-gradient(rgba(232, 193, 90, 0.06) 1px, transparent 1.4px) 0 0 / 9px 9px,
+    radial-gradient(ellipse 72% 52% at 50% 40%, rgba(232, 193, 90, 0.08), transparent 62%),
+    #0a0a0d !important;
+}
+.vr-qs-back::after,
+.vr-tcard.is-back:not(.has-art)::after {
+  content: '';
+  position: absolute;
+  inset: 5px;
+  border: 1px solid rgba(232, 193, 90, 0.22);
+  border-radius: 3px;
+  pointer-events: none;
+}
+.vr-qs-back img,
+.vr-tcard.is-back:not(.has-art) .vr-tcard-backart img {
+  width: 62px !important;
+  height: 62px !important;
+  opacity: 0.96 !important;
+  filter: drop-shadow(0 0 10px rgba(232, 193, 90, 0.22));
+}
+.vr-qs-back b,
+.vr-tcard.is-back:not(.has-art) .vr-tcard-backname {
+  color: var(--vr-gold-bright) !important;
+  font-family: var(--vr-hud-mono) !important;
+  letter-spacing: 0.16em !important;
+}
+
+/* Region map: keep the grade medallion in the top-right corner like the binder,
+   just scaled down to fit the small map cards so it stays tucked in the corner
+   instead of covering the provider name. */
+.vr-studio-architecture.is-region-map .vr-arch-node.is-card .vr-tcard-hp.is-onart {
+  top: 5px;
+  right: 5px;
+  bottom: auto;
+  transform: none;
+  width: 16px;
+  height: 16px;
+}
+.vr-studio-architecture.is-region-map .vr-arch-node.is-card .vr-tcard-hp.is-onart i {
+  font-size: 9px;
+}
+`;
+  }
+});
+
+// src/local-ui/static/appHtml.ts
+function escapeJsonForHtml(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+function renderLocalUiHtml(state) {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#0b0b0d" />
+    <title>VibeRaven</title>
+    <link rel="icon" type="image/png" href="/manga/favicon.png?v=manga1" />
+    <link rel="shortcut icon" type="image/png" href="/manga/favicon.png?v=manga1" />
+    <link rel="apple-touch-icon" href="/manga/favicon-180.png?v=manga1" />
+    <link rel="preload" as="image" href="/report/assets/viberaven-mascot.png?v=raven-cards-2" />
+    <style>${localUiCss}</style>
+  </head>
+  <body>
+    <div id="vr-app" class="vr-app" aria-label="VibeRaven"></div>
+    <script id="vr-state" type="application/json">${escapeJsonForHtml(state)}</script>
+    <script src="/vendor/anime.umd.min.js"></script>
+    <script>${localUiClientJs}</script>
+  </body>
+</html>`;
+}
+var init_appHtml = __esm({
+  "src/local-ui/static/appHtml.ts"() {
+    "use strict";
+    init_appClient();
+    init_appCss();
+  }
+});
+
+// src/local-ui/server.ts
+function normalizeShellCommand(value) {
+  return value.trim().replace(/\s+/g, " ");
+}
+function resolveApprovedShellCommand(command, requestedCliId) {
+  const normalized = normalizeShellCommand(command);
+  const candidateIds = requestedCliId ? [requestedCliId] : ["codex", "claude", "gemini"];
+  for (const cliId of candidateIds) {
+    const setup = CLI_AGENT_SETUP[cliId];
+    const install = normalizeShellCommand(setup.installCommand);
+    if (normalized === install) {
+      return { cliId, step: "install", command: setup.installCommand };
+    }
+    const signIn = normalizeShellCommand(setup.signInCommand);
+    if (normalized === signIn) {
+      return { cliId, step: "sign-in", command: setup.signInCommand };
+    }
+  }
+  return null;
+}
+async function connectProviderMcp(cwd, providerId) {
+  const recipe = MCP_SERVER_RECIPES[providerId];
+  if (!recipe) {
+    return { ok: false, message: `No known MCP server for ${providerId} yet. Add one manually to .mcp.json.` };
+  }
+  const configPath = (0, import_node_path30.join)(cwd, ".mcp.json");
+  let config = {};
+  try {
+    const raw = await (0, import_promises23.readFile)(configPath, "utf8");
+    const parsed = JSON.parse(raw.replace(/^\uFEFF/, ""));
+    if (isRecord4(parsed)) config = parsed;
+  } catch {
+  }
+  const servers = isRecord4(config.mcpServers) ? { ...config.mcpServers } : {};
+  if (servers[providerId]) {
+    return { ok: true, message: `${providerId} MCP server already configured in .mcp.json.`, path: ".mcp.json" };
+  }
+  servers[providerId] = recipe.entry;
+  const next = { ...config, mcpServers: servers };
+  await (0, import_promises23.writeFile)(configPath, `${JSON.stringify(next, null, 2)}
+`, "utf8");
+  const suffix = recipe.note ? ` ${recipe.note}` : "";
+  return { ok: true, message: `Added ${providerId} MCP server to .mcp.json.${suffix}`, path: ".mcp.json" };
+}
+async function defaultScanRunner(flags, positional) {
+  const cli = await Promise.resolve().then(() => (init_cli(), cli_exports));
+  return cli.runScanCommand(flags, positional);
+}
+async function readPackageJson(cwd) {
+  try {
+    const raw = await (0, import_promises23.readFile)((0, import_node_path30.join)(cwd, "package.json"), "utf8");
+    const parsed = JSON.parse(raw.replace(/^\uFEFF/, ""));
+    return isRecord4(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function dependencyNames(packageJson) {
+  const names = /* @__PURE__ */ new Set();
+  for (const key of ["dependencies", "devDependencies", "peerDependencies", "optionalDependencies"]) {
+    const value = packageJson[key];
+    if (!isRecord4(value)) continue;
+    Object.keys(value).forEach((name) => names.add(name.toLowerCase()));
+  }
+  return names;
+}
+async function listProjectFiles(cwd, maxFiles = 1800) {
+  const skipped = /* @__PURE__ */ new Set([".git", "node_modules", ".next", "dist", "build", "coverage", ".turbo", ".viberaven"]);
+  const files = [];
+  async function walk(dir, prefix = "") {
+    if (files.length >= maxFiles) return;
+    let entries;
+    try {
+      entries = await (0, import_promises23.readdir)(dir, { withFileTypes: true });
     } catch {
       return;
     }
@@ -38316,13 +40849,13 @@ function parseAgentChatRequest(value) {
 function taskKindExecutionBlock(taskKind) {
   switch (taskKind) {
     case "analyze":
-      return "Execution mode: analyze launch readiness. Read repo files and .viberaven artifacts; return concise findings with paths. Do not dump CLI install manuals or numbered manual runbooks.";
+      return "Execution mode: analyze launch readiness. Inspect the real application code \u2014 auth, protected routes, middleware, database/RLS, migrations, webhooks, and env usage. Return a short prose summary plus up to 3 concrete blockers, each with the real code file path. Do not read, grep, or cite the .viberaven/ folder; those are stale internal artifacts.";
     case "plan":
       return "Execution mode: build an ordered fix plan from repo evidence. If the top blocker is repo-code, apply that fix in the project before answering. Do not reply with only manual instructions when code edits are possible.";
     case "fix":
       return "Execution mode: apply one minimal scoped repo fix IN CODE NOW. Read existing files, edit the project, save changes, then summarize. Forbidden: telling the user what to do manually when you can patch the repo yourself.";
     case "verify":
-      return "Execution mode: verify launch readiness. Prefer `npx -y viberaven --verify` or read .viberaven/gate-result.json and agent-tasklist.md.";
+      return "Execution mode: verify launch readiness against the real code. Re-check the specific files you changed and run the project tests or build when available. Do not rely on .viberaven/ scan artifacts.";
     case "provider":
       return "Execution mode: provider proof or connect mission. Edit repo wiring when missing; separate dashboard-only steps from code changes; never claim live connection without proof.";
     case "diff":
@@ -38347,9 +40880,18 @@ function missionCardsContextBlock(state) {
   });
   return lines.length > 1 ? lines.join("\n") : void 0;
 }
+async function hasPriorReleases(cwd) {
+  try {
+    const tags = await runGit(cwd, ["tag", "--list"]);
+    return Boolean(tags.trim());
+  } catch {
+    return false;
+  }
+}
 async function buildAgentChatPrompt(request, cwd) {
   const state = await readState(cwd);
   const executionBlock = taskKindExecutionBlock(request.taskKind);
+  const priorReleases = await hasPriorReleases(cwd);
   const cardsBlock = missionCardsContextBlock(state);
   const providerState2 = request.provider?.id ? state.providers.find((provider2) => provider2.id === request.provider?.id) : state.providers.find((provider2) => provider2.name === request.provider?.name);
   const mcp = providerState2?.mcp;
@@ -38367,6 +40909,7 @@ async function buildAgentChatPrompt(request, cwd) {
     releaseDiffBlock,
     state.gate?.label ? `Project status: ${state.gate.label} (${state.gate.status ?? "unknown"})` : void 0,
     state.missionControl?.mainBlocker ? `Main blocker: ${state.missionControl.mainBlocker}` : void 0,
+    priorReleases ? "Deployment state: this project already has release tags, so it may already be in production. When asked about production readiness, prioritize what changed since the last release and the risk in the NEXT change over first-launch blockers." : void 0,
     executionBlock,
     cardsBlock,
     "",
@@ -38378,9 +40921,11 @@ async function buildAgentChatPrompt(request, cwd) {
     "- Return only the final user-facing answer. Do not echo this prompt, session metadata, logs, or command transcripts.",
     "- For fix/plan/provider repo gaps: edit files in this project before answering. Manual dashboard steps are only for gaps that cannot be solved in repo code.",
     "- Never paste long VibeRaven operator manuals, heal loops, or PowerShell command blocks unless the user explicitly asked how to run verify.",
+    "- Do not read, grep, cite, or paste the contents of the .viberaven/ folder. Those are stale internal scan artifacts, not source of truth. Reason from the real application code (auth, routes, middleware, migrations, webhooks, env usage).",
+    "- Keep the whole answer under ~15 lines. Never paste file contents, grep output, JSON, or command transcripts; summarize in prose and short bullets.",
     "",
     "Response format (markdown):",
-    "1. **Findings** \u2014 bullets with file paths or artifact names",
+    "1. **Findings** \u2014 up to 3 bullets, each naming the real code file and the risk",
     "2. **Changes made** \u2014 what you edited, or say none only if the blocker is dashboard-only",
     '3. **Files touched** \u2014 list paths (or "none")',
     "4. **Next step** \u2014 one verify action or one dashboard action (do not paste raw npx commands; the UI renders Verify buttons)",
@@ -38786,7 +41331,7 @@ async function sendReportArtifact(cwd, response) {
   <body>
     <main>
       <div class="brand">
-        <img src="/report/assets/viberaven-agent-icon.png" alt="" />
+        <img src="/report/assets/viberaven-mascot.png" alt="" />
         <div>
           <h1>Report preview is ready</h1>
           <p>${projectName} does not have a generated report artifact yet. The launch screen still gives you the provider map, agent handoff, and verification preview.</p>
@@ -38815,6 +41360,30 @@ async function sendExtensionIcon(cwd, response) {
     sendText(response, 404, "Icon not found");
   }
 }
+async function sendMangaAsset(pathname, response) {
+  const name = decodeURIComponent(pathname.replace(/^\/manga\//, ""));
+  if (name.includes("..") || !/^(cards\/)?[a-z0-9._-]+\.(png|webp|svg|jpg|jpeg)$/i.test(name)) {
+    sendText(response, 404, "Asset not found");
+    return;
+  }
+  const candidates = [
+    (0, import_node_path30.join)(__dirname, "manga", name),
+    // installed + dev: <pkg>/dist/manga
+    (0, import_node_path30.join)(__dirname, "..", "assets", "manga", name),
+    // fallback: <pkg>/assets/manga (source)
+    (0, import_node_path30.join)(__dirname, "..", "..", "assets", "manga", name)
+  ];
+  for (const candidate of candidates) {
+    try {
+      const body = await (0, import_promises23.readFile)(candidate);
+      response.setHeader("cache-control", "no-cache");
+      sendBinary(response, 200, contentTypeForAsset(candidate), body);
+      return;
+    } catch {
+    }
+  }
+  sendText(response, 404, "Asset not found");
+}
 function contentTypeForAsset(pathname) {
   switch ((0, import_node_path30.extname)(pathname).toLowerCase()) {
     case ".svg":
@@ -38866,7 +41435,12 @@ async function handleRequest(request, response, options) {
   }
   if (request.method === "GET" && url.pathname === "/") {
     const state = await readState(options.cwd);
-    response.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+    response.writeHead(200, {
+      "content-type": "text/html; charset=utf-8",
+      "cache-control": "no-store, no-cache, must-revalidate",
+      pragma: "no-cache",
+      expires: "0"
+    });
     response.end(renderLocalUiHtml(state));
     return;
   }
@@ -39199,6 +41773,27 @@ async function handleRequest(request, response, options) {
     await sendBundledReportAsset(url.pathname, response);
     return;
   }
+  if (request.method === "GET" && url.pathname.startsWith("/manga/")) {
+    await sendMangaAsset(url.pathname, response);
+    return;
+  }
+  if (request.method === "GET" && url.pathname === "/vendor/anime.umd.min.js") {
+    for (const candidate of [
+      (0, import_node_path30.join)(__dirname, "vendor", "anime.umd.min.js"),
+      (0, import_node_path30.join)(__dirname, "..", "assets", "vendor", "anime.umd.min.js"),
+      (0, import_node_path30.join)(__dirname, "..", "..", "assets", "vendor", "anime.umd.min.js")
+    ]) {
+      try {
+        const body = await (0, import_promises23.readFile)(candidate);
+        response.setHeader("cache-control", "public, max-age=604800, immutable");
+        sendBinary(response, 200, "text/javascript; charset=utf-8", body);
+        return;
+      } catch {
+      }
+    }
+    sendText(response, 404, "Asset not found");
+    return;
+  }
   if (request.method === "POST" && url.pathname === "/api/scan") {
     await options.scanRunner({ "agent-mode": true }, [options.cwd]);
     sendJson(response, await readState(options.cwd));