@viberaven/cli 1.3.1 → 1.3.5

package/dist/cli.js

@@ -319,6 +319,9 @@ function isSecretFileName(fileName) {
   if (SECRET_FILE_NAMES.has(fileName.toLowerCase())) {
     return true;
   }
+  if (SOURCE_CODE_FILE_EXT.test(fileName)) {
+    return false;
+  }
   return SECRET_PATTERNS.some((pattern) => pattern.test(fileName));
 }
 function isLikelyBinary(buffer) {
@@ -381,7 +384,7 @@ function gitignoreGlobToRegex(pattern) {
 function escapeRegex(value) {
   return value.replace(/[|\\{}()[\]^$+?.]/g, "\\$&");
 }
-var import_node_fs2, import_node_path2, ALWAYS_SKIP, SECRET_PATTERNS, SECRET_FILE_NAMES, HIGH_SIGNAL_FILES, STACK_SIGNAL_PATHS, DEFAULT_OPTIONS;
+var import_node_fs2, import_node_path2, ALWAYS_SKIP, SECRET_PATTERNS, SECRET_FILE_NAMES, SOURCE_CODE_FILE_EXT, HIGH_SIGNAL_FILES, STACK_SIGNAL_PATHS, DEFAULT_OPTIONS;
 var init_fileScanner = __esm({
   "../../src/station/fileScanner.ts"() {
     "use strict";
@@ -430,6 +433,7 @@ var init_fileScanner = __esm({
       "kubeconfig",
       "dockerconfigjson"
     ]);
+    SOURCE_CODE_FILE_EXT = /\.(?:cjs|cts|jsx?|mjs|mts|tsx?)$/i;
     HIGH_SIGNAL_FILES = [
       "package.json",
       "tsconfig.json",
@@ -11554,7 +11558,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = "1.3.1";
+    VERSION = "1.3.5";
   }
 });
 
@@ -15844,7 +15848,10 @@ const demo = {
   modelMenuOpen: false,
   reasoningMenuOpen: false,
   contextMenuOpen: false,
+  scopeMenuOpen: false,
+  contextTrayOpen: false,
   accessMenuOpen: false,
+  inspectorExpanded: false,
   pickerChatIndex: 0,
   chatContexts: [{ providerId: null, releaseId: null, cliId: 'codex', modelId: 'gpt-5.5', reasoning: 'High', context: 'Production', accessMode: 'approve', messages: [], activeTask: null }],
   activeRecentChatId: null,
@@ -16006,6 +16013,7 @@ const githubStats = {
 };
 
 let lastRenderedModal = demo.activeModal;
+let stableModalRender = false;
 const chatScrollCache = {};
 let chatTaskTimer = null;
 
@@ -16226,9 +16234,9 @@ function ProviderMcpPanel(provider) {
   const capabilities = Array.isArray(mcp.capabilities) && mcp.capabilities.length ? mcp.capabilities : ['provider context', 'repo-aware chat'];
   const connectButton = connected
     ? ''
-    : '<button type="button" class="vr-mcp-connect-btn" data-action="connect-mcp" data-provider-id="' + escapeHtml(provider.id || '') + '">Connect MCP</button>';
+    : '<button type="button" class="vr-mcp-connect-btn" data-action="connect-mcp" data-provider-id="' + escapeHtml(provider.id || '') + '">Connect</button>';
   return '<section class="vr-provider-mcp-panel ' + (connected ? 'is-connected' : 'is-disconnected') + '">' +
-    '<header><span>' + Icon('agent') + '</span><div><strong>' + escapeHtml(connected ? 'MCP connected' : 'Connect MCP') + '</strong><em>' + escapeHtml(connected ? (mcp.source || 'local MCP config') : (mcp.connectCommand || 'Add this provider MCP server in your local MCP config.')) + '</em></div>' + connectButton + '</header>' +
+    '<header><span>' + Icon('code') + '</span><div><strong>' + escapeHtml(connected ? 'Connected' : 'Not connected') + '</strong></div>' + connectButton + '</header>' +
     '<div>' + capabilities.map((item) => '<small>' + escapeHtml(item) + '</small>').join('') + '</div>' +
     '</section>';
 }
@@ -16350,14 +16358,24 @@ function formatDiffPreHtml(diffText) {
 
 function releaseChangelogHtml() {
   const log = demo.releaseChangelog || {};
-  if (log.loading) return '<p>Loading changelog\u2026</p>';
+  if (log.loading) return '<p class="vr-changelog-empty">Loading changelog...</p>';
   if (log.error) return '<p class="vr-release-error">' + escapeHtml(log.error) + '</p>';
-  if (Array.isArray(log.entries) && log.entries.length) {
-    return '<ul class="vr-changelog-list">' + log.entries.map(function(entry) {
-      return '<li><strong>' + escapeHtml(entry.short || entry.sha || '') + '</strong> ' + escapeHtml(entry.subject || '') + '<em>' + escapeHtml((entry.author || 'unknown') + ' \xB7 ' + (entry.when || '')) + '</em></li>';
-    }).join('') + '</ul>';
+  const entries = Array.isArray(log.entries) ? log.entries : [];
+  if (entries.length) {
+    const visible = entries.slice(0, 6);
+    const hidden = entries.slice(6);
+    const rangeLabel = (log.fromLabel || 'previous') + ' to ' + (log.toLabel || 'selected');
+    const entryHtml = function(entry, compact) {
+      const meta = (entry.author || 'unknown') + (entry.when ? ' - ' + entry.when : '');
+      return '<li class="' + (compact ? 'is-compact' : '') + '"><strong>' + escapeHtml(entry.short || entry.sha || '') + '</strong><span>' + escapeHtml(entry.subject || '') + '</span><em>' + escapeHtml(meta) + '</em></li>';
+    };
+    return '<div class="vr-changelog-summary"><span>Release changes</span><strong>' + String(entries.length) + ' commit' + (entries.length === 1 ? '' : 's') + '</strong><em>' + escapeHtml(rangeLabel) + '</em></div>' +
+      '<ul class="vr-changelog-list is-preview">' + visible.map(function(entry) { return entryHtml(entry, false); }).join('') + '</ul>' +
+      (hidden.length
+        ? '<details class="vr-changelog-more"><summary>Show ' + String(hidden.length) + ' older commit' + (hidden.length === 1 ? '' : 's') + '</summary><ul class="vr-changelog-list is-condensed">' + hidden.map(function(entry) { return entryHtml(entry, true); }).join('') + '</ul></details>'
+        : '');
   }
-  return '<p>No commits between ' + escapeHtml(log.fromLabel || 'previous') + ' and ' + escapeHtml(log.toLabel || 'selected') + '.</p>';
+  return '<p class="vr-changelog-empty">No commits between ' + escapeHtml(log.fromLabel || 'previous') + ' and ' + escapeHtml(log.toLabel || 'selected') + '.</p>';
 }
 
 async function runReleaseCompare() {
@@ -16835,6 +16853,8 @@ function Icon(name) {
     refresh: '<path d="M20 12a8 8 0 0 1-14.5 4.7"/><path d="M4 17h5v-5"/><path d="M4 12A8 8 0 0 1 18.5 7.3"/><path d="M20 7h-5v5"/>',
     prompt: '<path d="M4 5h16v14H4V5Z"/><path d="m8 10 3 2-3 2M13 15h4"/>',
     external: '<path d="M7 7h10v10"/><path d="M7 17 17 7"/><path d="M5 5v14h14"/>',
+    expand: '<path d="M8 3H3v5M16 3h5v5M3 16v5h5M21 16v5h-5"/><path d="M3 8l6-6M21 8l-6-6M3 16l6 6M21 16l-6 6"/>',
+    collapse: '<path d="M9 3v6H3M15 3v6h6M9 21v-6H3M15 21v-6h6"/><path d="M3 9l6-6M21 9l-6-6M3 15l6 6M21 15l-6 6"/>',
     x: '<path d="M6 6l12 12M18 6 6 18"/>',
     clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
     cloud: '<path d="M17.5 18H8a5 5 0 1 1 1.3-9.8A6 6 0 0 1 20 12.5 3.5 3.5 0 0 1 17.5 18Z"/>',
@@ -16843,6 +16863,7 @@ function Icon(name) {
     play: '<path d="M8 5v14l11-7-11-7Z"/>',
     code: '<path d="m8 9-4 3 4 3M16 9l4 3-4 3M14 5l-4 14"/>',
     arrowUp: '<path d="M12 19V5"/><path d="m6 11 6-6 6 6"/>',
+    pause: '<path d="M9 6v12M15 6v12"/>',
     stop: '<rect x="6" y="6" width="12" height="12" rx="2.5"/>',
     chevronRight: '<path d="m9 6 6 6-6 6"/>',
   };
@@ -17430,7 +17451,7 @@ function resetLaunchPreview() {
   demo.verified = false;
   demo.providerPickerOpen = false;
   demo.activeModal = null;
-  demo.activeStudioTab = 'chat';
+  if (newChatTarget || isRecentChatDrop) demo.activeStudioTab = 'chat';
   demo.selectedCliId = 'codex';
   demo.cliConnected = true;
   demo.studioExpanded = false;
@@ -17594,8 +17615,9 @@ function VersionTimeline() {
 }
 
 function ModalShell(kind, body) {
-  return '<section class="vr-modal-backdrop" data-modal-backdrop="' + escapeHtml(kind) + '" aria-label="Preview detail modal">' +
-    '<div class="vr-modal-card vr-modal-' + escapeHtml(kind) + '" role="dialog" aria-modal="true">' +
+  const stableClass = stableModalRender ? ' is-stable-render' : '';
+  return '<section class="vr-modal-backdrop' + stableClass + '" data-modal-backdrop="' + escapeHtml(kind) + '" aria-label="Preview detail modal">' +
+    '<div class="vr-modal-card vr-modal-' + escapeHtml(kind) + stableClass + '" role="dialog" aria-modal="true">' +
       '<button class="vr-modal-close" type="button" data-action="close-modal" aria-label="Close">' + Icon('x') + '</button>' +
       body +
     '</div>' +
@@ -17903,19 +17925,28 @@ function resetCliConnectFlow(options) {
   }
 }
 
-async function runStudioShellCommand(command, label) {
+async function runStudioShellCommand(command, label, cliId) {
   const trimmed = String(command || '').trim();
   if (!trimmed) return;
   appendTerminalLines(['$ ' + trimmed]);
   if (label) demo.cliTerminalTitle = label;
   render();
   try {
+    const requestedCliId = typeof cliId === 'string' && (cliId === 'codex' || cliId === 'claude' || cliId === 'gemini') ? cliId : undefined;
     const response = await fetch('/api/cli-agents/run-command', {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ command: trimmed }),
+      body: JSON.stringify({ command: trimmed, ...(requestedCliId ? { cliId: requestedCliId } : {}) }),
     });
-    const payload = response.ok ? await response.json() : null;
+    const payload = await response.json().catch(() => null);
+    if (!response.ok) {
+      appendTerminalLines([
+        String(payload?.message || payload?.error || 'Command could not run from Studio terminal.'),
+        ''
+      ]);
+      render();
+      return;
+    }
     appendTerminalLines([
       String(payload?.output || payload?.message || 'Command finished.'),
       ''
@@ -18387,11 +18418,12 @@ function ModelPicker(index) {
   const selectedModel = selectedModelLabel(index);
   const scoped = demo.pickerChatIndex === index;
   const access = accessModes.find((mode) => mode.id === chat.accessMode) || accessModes[1];
+  const accessButtonLabel = access.id === 'approve' ? 'Approve for me' : access.id === 'ask' ? 'Ask approval' : 'Full access';
   return '<div class="vr-model-picker">' +
     '<button type="button" data-action="toggle-reasoning" data-chat-index="' + String(index) + '"><span>Reasoning</span><strong>' + escapeHtml(chat.reasoning) + '</strong><i></i></button>' +
     '<button type="button" data-action="toggle-models" data-chat-index="' + String(index) + '"><span>Model</span><strong>' + escapeHtml(selectedModel) + '</strong><i></i></button>' +
     '<button type="button" data-action="toggle-context" data-chat-index="' + String(index) + '"><span>Context</span><strong>' + escapeHtml(chat.context) + '</strong><i></i></button>' +
-    '<button type="button" data-action="toggle-access" data-chat-index="' + String(index) + '"><span>Access</span><strong>' + escapeHtml(access.label) + '</strong><i></i></button>' +
+    '<button type="button" data-action="toggle-access" data-chat-index="' + String(index) + '"><span>Access</span><strong>' + escapeHtml(accessButtonLabel) + '</strong><i></i></button>' +
     (scoped && demo.reasoningMenuOpen ? '<div class="vr-model-menu is-reasoning" role="menu"><p>Reasoning</p>' + reasoningLevels.map((level) =>
       '<button type="button" data-reasoning="' + escapeHtml(level) + '" data-chat-index="' + String(index) + '">' + escapeHtml(level) + (chat.reasoning === level ? '<b></b>' : '') + '</button>'
     ).join('') + '</div>' : '') +
@@ -18411,7 +18443,7 @@ function ChatBlockersSummary(cards) {
   const blockers = Array.isArray(cards.blockers) ? cards.blockers : [];
   const count = typeof cards.blockerCount === 'number' ? cards.blockerCount : blockers.length;
   if (!blockers.length) return '';
-  return '<section><header><strong>Blockers Summary</strong><b>' + String(count) + ' blocking</b></header>' +
+  return '<section class="vr-chat-blockers-card"><header><strong>Blockers Summary</strong><b>' + String(count) + ' blocking</b></header>' +
     blockers.map((blocker) =>
       '<span><i data-tone="' + escapeHtml(blocker.tone || 'neutral') + '"></i><em>' + escapeHtml(blocker.title || 'Launch blocker') +
       (blocker.detail ? '<small>' + escapeHtml(blocker.detail) + '</small>' : '') +
@@ -18966,27 +18998,54 @@ function ChatMissionStatusStrip() {
       (provider.iconHtml || '<img src="' + providerAssetSrc(provider) + '" alt="" />') +
     '</span>'
   ).join('');
+  const versionDots = releases.slice(0, 4).map((release) =>
+    '<span class="vr-chat-version-dot ' + (release.id === demo.selectedReleaseId ? 'is-selected' : '') + '" draggable="true" data-release="' + escapeHtml(release.id) + '" data-tone="' + escapeHtml(release.tone || 'planned') + '" title="' + escapeHtml(release.label + ' \xB7 ' + release.meta) + '">' +
+      '<small>' + escapeHtml(String(release.label || '').replace(/^v/i, '')) + '</small>' +
+    '</span>'
+  ).join('');
   return '<div class="vr-chat-status-strip">' +
     '<button class="vr-chat-gate-chip is-' + tone + '" type="button" data-action="notifications" title="Open launch signals"><i></i>' + escapeHtml(label) + '</button>' +
     (dots ? '<span class="vr-chat-provider-dots" title="Detected providers \u2014 drag one into the chat">' + dots + '</span>' : '') +
+    (versionDots ? '<span class="vr-chat-version-dots" title="Recent versions \u2014 drag one into the chat">' + versionDots + '</span>' : '') +
     '</div>';
 }
 
 function ChatQuickActions(index) {
   const buttons = quickActionButtonSpec(index);
-  const plus = '<button type="button" class="vr-chat-plus' + (demo.quickActionsOpen ? ' is-open' : '') + '" data-action="toggle-quick-actions" data-chat-index="' + String(index) + '" title="' + (demo.quickActionsOpen ? 'Hide quick actions' : 'Quick actions') + '" aria-label="Quick actions">' + Icon(demo.quickActionsOpen ? 'x' : 'plus') + '</button>';
-  if (!demo.quickActionsOpen) {
-    const primary = buttons.find((button) => button.action === 'start-agent-fix') || buttons[0];
-    return '<div class="vr-chat-inline-actions is-collapsed">' + plus +
-      '<button type="button" class="is-primary" data-chat-index="' + String(index) + '" data-action="' + escapeHtml(primary.action) + '"' + (primary.hint ? ' title="' + escapeHtml(primary.hint) + '"' : '') + '>' +
-        Icon(primary.icon) + '<span>' + escapeHtml(primary.label) + '</span></button>' +
-      '</div>';
-  }
-  return '<div class="vr-chat-inline-actions">' + plus +
-    buttons.map((button) =>
+  const primary = buttons.find((button) => button.action === 'start-agent-fix') || buttons[0];
+  const scoped = demo.pickerChatIndex === index;
+  const expanded = scoped && demo.quickActionsOpen
+    ? '<div class="vr-chat-command-popover">' + buttons.map((button) =>
       '<button type="button" class="' + (button.primary ? 'is-primary' : button.muted ? 'is-muted' : '') + '" data-chat-index="' + String(index) + '" data-action="' + escapeHtml(button.action) + '"' + (button.hint ? ' title="' + escapeHtml(button.hint) + '"' : '') + '>' +
         Icon(button.icon) + '<span>' + escapeHtml(button.label) + '</span></button>'
-    ).join('') +
+    ).join('') + '</div>'
+    : '';
+  return '<div class="vr-chat-inline-actions">' +
+    '<button type="button" data-action="add-context" data-chat-index="' + String(index) + '">' + Icon('plus') + '<span>Add context</span></button>' +
+    '<button type="button" data-action="prompt" data-chat-index="' + String(index) + '">' + Icon('prompt') + '<span>Mention</span></button>' +
+    '<span class="vr-chat-command-trigger"><button type="button" data-action="toggle-quick-actions" data-chat-index="' + String(index) + '" title="' + escapeHtml(primary.hint || 'Open commands') + '">' + Icon('code') + '<span>Commands</span></button>' +
+      expanded +
+    '</span>' +
+    '</div>';
+}
+
+function ChatComposerScope(index) {
+  const chat = chatContext(index);
+  const scoped = demo.pickerChatIndex === index;
+  const menu = scoped && demo.scopeMenuOpen
+    ? '<div class="vr-scope-menu" role="menu"><p>Context</p>' + contextLevels.map((level) =>
+      '<button type="button" data-context="' + escapeHtml(level) + '" data-chat-index="' + String(index) + '">' +
+        Icon(level === 'Security' ? 'shield' : level === 'Release' ? 'branch' : level === 'Provider' ? 'cube' : 'spark') +
+        '<span>' + escapeHtml(level) + '</span>' + (chat.context === level ? '<b></b>' : '') +
+      '</button>'
+    ).join('') + '</div>'
+    : '';
+  return '<div class="vr-composer-scope-wrap">' +
+    '<button type="button" class="vr-composer-scope" data-action="toggle-scope-menu" data-chat-index="' + String(index) + '">' +
+      Icon(chat.context === 'Security' ? 'shield' : chat.context === 'Release' ? 'branch' : chat.context === 'Provider' ? 'cube' : 'spark') +
+      '<strong>' + escapeHtml(chat.context || 'Production') + '</strong><i></i>' +
+    '</button>' +
+    menu +
     '</div>';
 }
 
@@ -19014,6 +19073,7 @@ function ContextDropZone(index, showAttached) {
   const context = chatContext(index);
   const provider = show && context.providerId ? providers.find((item) => item.id === context.providerId) : null;
   const release = show && context.releaseId ? releases.find((item) => item.id === context.releaseId) : null;
+  if (!provider && !release && !demo.dropActive) return '';
   return '<div class="vr-provider-drop-zone ' + (demo.dropActive ? 'is-active' : '') + ((provider || release) ? ' has-provider' : '') + '" data-chat-drop="true" data-chat-index="' + String(index) + '">' +
     '<span class="vr-provider-drop-label">' + (provider || release ? 'Context attached' : 'Drop provider or version here to add context') + '</span>' +
     (provider ? contextChipHtml({
@@ -19035,6 +19095,65 @@ function ContextDropZone(index, showAttached) {
     '</div>';
 }
 
+function ContextTray(index) {
+  if (!(demo.pickerChatIndex === index && demo.contextTrayOpen)) return '';
+  const providerItems = orderedProviders().filter((provider) => provider.state !== 'not_detected').slice(0, 6);
+  const releaseItems = releases.slice(0, 4);
+  const providersHtml = providerItems.map((provider) =>
+    '<button type="button" draggable="true" data-provider="' + escapeHtml(provider.id) + '" data-context-provider="' + escapeHtml(provider.id) + '" data-chat-index="' + String(index) + '">' +
+      '<span>' + (provider.iconHtml || '<img src="' + providerAssetSrc(provider) + '" alt="" />') + '</span>' +
+      '<strong>' + escapeHtml(provider.name) + '</strong>' +
+      '<em>' + escapeHtml(stackSlots[provider.id] || provider.area) + '</em>' +
+    '</button>'
+  ).join('');
+  const releasesHtml = releaseItems.map((release) =>
+    '<button type="button" draggable="true" data-release="' + escapeHtml(release.id) + '" data-context-release="' + escapeHtml(release.id) + '" data-chat-index="' + String(index) + '">' +
+      '<span>' + Icon('branch') + '</span>' +
+      '<strong>' + escapeHtml(release.label) + '</strong>' +
+      '<em>' + escapeHtml(release.meta || release.branch) + '</em>' +
+    '</button>'
+  ).join('');
+  return '<div class="vr-context-tray">' +
+    '<header><strong>Add context</strong><button type="button" data-action="close-context-tray" data-chat-index="' + String(index) + '" aria-label="Close context tray">' + Icon('x') + '</button></header>' +
+    '<section><p>Providers</p><div>' + (providersHtml || '<span class="vr-context-tray-empty">No providers detected yet.</span>') + '</div></section>' +
+    '<section><p>Versions</p><div>' + (releasesHtml || '<span class="vr-context-tray-empty">No versions detected yet.</span>') + '</div></section>' +
+    '</div>';
+}
+
+function ChatEnvironmentConnectCard() {
+  const slots = [
+    { label: 'GitHub', providerId: 'github', icon: 'github', action: 'provider' },
+    { label: 'Database', providerId: 'supabase', icon: 'supabase', action: 'provider' },
+    { label: 'Sentry', providerId: 'sentry', icon: 'sentry', action: 'provider' },
+    { label: 'Deployment', providerId: 'vercel', icon: 'vercel', action: 'provider' },
+    { label: 'Payments', providerId: 'stripe', icon: 'stripe', action: 'provider' },
+    { label: 'More', providerId: '', icon: '', action: 'more' },
+  ];
+  const slotHtml = slots.map((slot) => {
+    const provider = slot.providerId ? providers.find((item) => item.id === slot.providerId) : null;
+    const mcp = provider ? providerMcp(provider) : null;
+    const connected = Boolean(mcp && mcp.status === 'connected');
+    const icon = provider
+      ? (provider.iconHtml || '<img src="' + providerAssetSrc(provider) + '" alt="" />')
+      : Icon('plus');
+    const status = connected ? 'Connected' : slot.action === 'more' ? 'Browse' : 'Connect';
+    const attrs = slot.action === 'more'
+      ? 'data-action="add-provider"'
+      : connected
+        ? 'data-provider="' + escapeHtml(slot.providerId) + '"'
+        : 'data-action="connect-mcp" data-provider-id="' + escapeHtml(slot.providerId) + '"';
+    return '<button type="button" class="vr-env-connect-option ' + (connected ? 'is-connected' : 'is-disconnected') + '" ' + attrs + '>' +
+      '<span>' + icon + '</span>' +
+      '<strong>' + escapeHtml(slot.label) + '</strong>' +
+      '<b>' + escapeHtml(status) + '</b>' +
+    '</button>';
+  }).join('');
+  return '<section class="vr-env-connect-card">' +
+    '<header><strong>Connect your environment</strong></header>' +
+    '<div>' + slotHtml + '</div>' +
+  '</section>';
+}
+
 function StudioChatLane(index) {
   const provider = providers.find((item) => item.id === demo.selectedProviderId) || providers[0];
   const chat = chatContext(index);
@@ -19055,11 +19174,11 @@ function StudioChatLane(index) {
   const sendLabel = laneWorking ? 'Stop connected agent' : 'Send mission to connected agent';
   const gateNotClear = Boolean(currentState.gate && currentState.gate.status && currentState.gate.status !== 'clear');
   const introBlocker = missionCards && Array.isArray(missionCards.blockers) && missionCards.blockers.length ? missionCards.blockers[0] : null;
-  const introBody = gateNotClear && introBlocker
-    ? '<p><strong>Start here:</strong> ' + escapeHtml(introBlocker.title) + '</p><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>'
-    : '<p>Start a production mission. Drag a provider or version into this chat, or ask what blocks launch.</p>';
+  const introBody = '<p>I\\'m ready to help you debug production issues.<br><strong>Start here:</strong> ' + escapeHtml(gateNotClear && introBlocker ? introBlocker.title : 'connect your code and observability sources.') + '</p>' +
+    (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"><div><span><img src="' + mascotUrl() + '" alt="" /></span><p><strong>VibeRaven Agent</strong><em>Ready</em></p></div>' + introBody + '</section>')
+    ? 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>')
     : '';
   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>' : '') +
@@ -19071,9 +19190,14 @@ function StudioChatLane(index) {
       renderChatMessages(chat, index) +
     '</div>' +
     '<footer class="vr-chat-command-bar">' +
-      ChatQuickActions(index) +
       (laneHasTask ? ChatTaskAnimation(index, true) : '') +
-      '<div class="vr-chat-composer" data-chat-drop="true" data-chat-index="' + String(index) + '"><textarea class="vr-chat-input" data-chat-input="' + String(index) + '" rows="2" placeholder="Ask VibeRaven anything about this deployment...">' + escapeHtml(chat.draft || '') + '</textarea>' + ContextDropZone(index, true) + ModelPicker(index) + '<button class="vr-chat-send ' + (laneWorking ? 'is-stop' : '') + '" type="button" data-action="' + sendAction + '" data-chat-index="' + String(index) + '" aria-label="' + sendLabel + '">' + Icon(sendIcon) + '</button></div>' +
+      '<div class="vr-chat-composer" data-chat-drop="true" data-chat-index="' + String(index) + '">' +
+        '<div class="vr-composer-top">' + ChatComposerScope(index) + '</div>' +
+        '<textarea class="vr-chat-input" data-chat-input="' + String(index) + '" rows="2" placeholder="Ask VibeRaven anything about this deployment...">' + escapeHtml(chat.draft || '') + '</textarea>' +
+        ContextTray(index) +
+        ContextDropZone(index, true) +
+        '<div class="vr-composer-bottom">' + ChatQuickActions(index) + '<div class="vr-composer-controls">' + ModelPicker(index) + '<button class="vr-chat-send ' + (laneWorking ? 'is-stop' : '') + '" type="button" data-action="' + sendAction + '" data-chat-index="' + String(index) + '" aria-label="' + sendLabel + '">' + Icon(sendIcon) + '</button></div></div>' +
+      '</div>' +
     '</footer>' +
     '</article>';
 }
@@ -19189,16 +19313,42 @@ function buildArchGraph(data, gaps) {
     edges.push({ from: id, to: archAreaTarget(provider.area) });
   });
 
-  try {
-    const saved = JSON.parse(window.localStorage.getItem('vrArchLayout') || '{}');
-    Object.keys(saved).forEach((id) => {
-      if (pos[id] && saved[id] && Number.isFinite(saved[id].x) && Number.isFinite(saved[id].y)) {
-        pos[id] = { x: saved[id].x, y: saved[id].y };
-      }
+  return { nodes, edges, pos, healthGaps, zones: { modulesY: modules.length ? modulesY : 0, providersY } };
+}
+
+function compactArchGraph(graph) {
+  const pos = {};
+  const columnGap = 204;
+  const rowGap = 74;
+  const left = 16;
+  const place = (id, x, y) => { pos[id] = { x, y }; };
+  const existing = (ids) => ids.filter((id) => graph.nodes.some((node) => node.id === id));
+  const placeGrid = (ids, y, columns) => {
+    ids.forEach((id, index) => {
+      place(id, left + (index % columns) * columnGap, y + Math.floor(index / columns) * rowGap);
     });
-  } catch { /* corrupted layout \u2014 use defaults */ }
+    return y + Math.max(1, Math.ceil(ids.length / columns)) * rowGap;
+  };
 
-  return { nodes, edges, pos, healthGaps, zones: { modulesY: modules.length ? modulesY : 0, providersY } };
+  let y = 42;
+  y = placeGrid(existing(['user', 'pages', 'api', 'data']), y, 2);
+  const secondaryCore = existing(['webhooks', 'jobs']);
+  if (secondaryCore.length) y = placeGrid(secondaryCore, y + 6, 2);
+
+  const modulesY = graph.nodes.some((node) => node.id.indexOf('mod:') === 0) ? y + 18 : 0;
+  if (modulesY) {
+    y = placeGrid(graph.nodes.filter((node) => node.id.indexOf('mod:') === 0).map((node) => node.id), modulesY, 2);
+  }
+
+  const providersY = y + 18;
+  placeGrid(graph.nodes.filter((node) => node.id.indexOf('prov:') === 0).map((node) => node.id), providersY, 2);
+
+  return {
+    ...graph,
+    pos,
+    zones: { modulesY, providersY },
+    compact: true,
+  };
 }
 
 function archEdgePath(pos, edge) {
@@ -19342,6 +19492,7 @@ function ArchDrawer(map, graph) {
 
 function StudioArchitectureView() {
   const map = demo.architectureMap || {};
+  const inspectorMap = demo.activeStudioTab === 'architecture' && !demo.inspectorExpanded;
   let body;
   if (map.loading) {
     body = '<p class="vr-arch-empty">Reading architecture evidence\u2026</p>';
@@ -19349,8 +19500,9 @@ function StudioArchitectureView() {
     body = '<p class="vr-arch-empty">' + escapeHtml(map.error) + '</p>';
   } else if (map.data) {
     if (!demo.archGraph) demo.archGraph = buildArchGraph(map.data, map.gaps || []);
-    const graph = demo.archGraph;
-    const width = Math.max(1120, Math.max.apply(null, Object.values(graph.pos).map((p) => p.x)) + ARCH_NODE_W + 32);
+    const graph = inspectorMap ? compactArchGraph(demo.archGraph) : demo.archGraph;
+    const minWidth = inspectorMap ? 408 : 1120;
+    const width = Math.max(minWidth, Math.max.apply(null, Object.values(graph.pos).map((p) => p.x)) + ARCH_NODE_W + 32);
     const height = Math.max(360, Math.max.apply(null, Object.values(graph.pos).map((p) => p.y)) + ARCH_NODE_H + 32);
     const edgesSvg = '<svg class="vr-arch-edges" width="' + width + '" height="' + height + '" viewBox="0 0 ' + width + ' ' + height + '">' +
       graph.edges.map((edge) => '<path data-arch-edge="' + escapeHtml(edge.from + ':' + edge.to) + '" d="' + archEdgePath(graph.pos, edge) + '" />').join('') +
@@ -19369,7 +19521,7 @@ function StudioArchitectureView() {
       const badge = node.gapCount
         ? '<span class="vr-arch-node-badge is-' + escapeHtml(node.health) + '" title="' + node.gapCount + ' open gap' + (node.gapCount === 1 ? '' : 's') + '">' + node.gapCount + '</span>'
         : '';
-      return '<div class="vr-arch-node is-' + node.kind + (node.health ? ' has-health-' + escapeHtml(node.health) : '') + '" data-arch-node="' + escapeHtml(node.id) + '"' + action + ' style="transform:translate(' + p.x + 'px,' + p.y + 'px)">' +
+      return '<div class="vr-arch-node is-' + node.kind + (node.health ? ' has-health-' + escapeHtml(node.health) : '') + (demo.archDrawer === node.id ? ' is-selected' : '') + '" data-arch-node="' + escapeHtml(node.id) + '"' + action + ' style="transform:translate(' + p.x + 'px,' + p.y + 'px)">' +
         icon + '<div><strong>' + escapeHtml(node.label) + '</strong><em>' + escapeHtml(node.sub) + '</em></div>' + ask + badge +
         '</div>';
     }).join('');
@@ -19379,7 +19531,7 @@ function StudioArchitectureView() {
       (zones.modulesY ? '<span class="vr-arch-zone" style="left:16px;top:' + (zones.modulesY - 20) + 'px">Modules</span>' : '') +
       '<span class="vr-arch-zone" style="left:16px;top:' + (zones.providersY - 24) + 'px">Providers</span>' +
       '<i class="vr-arch-divider" style="top:' + (zones.providersY - 30) + 'px"></i>' +
-      '<span class="vr-arch-hint">Drag to arrange \xB7 click a node to inspect \xB7 \u2726 sends it to the agent</span>';
+      '<span class="vr-arch-hint">Click a node to inspect \xB7 use zoom to scan \xB7 \u2726 sends it to the agent</span>';
     const zoom = demo.archZoom || 1;
     const zoomControls = '<div class="vr-arch-zoom">' +
       '<button type="button" data-action="arch-zoom" data-dir="out" aria-label="Zoom out">\u2212</button>' +
@@ -19392,8 +19544,8 @@ function StudioArchitectureView() {
   } else {
     body = '<p class="vr-arch-empty">No architecture map yet. Run a scan and it is written automatically.</p>';
   }
-  return '<section class="vr-studio-architecture" aria-label="Architecture map">' +
-    '<header><strong>Architecture Map</strong><span>Live from repo evidence \u2014 drag nodes, click a provider, or send a boundary to the agent.</span></header>' +
+  return '<section class="vr-studio-architecture ' + (inspectorMap ? 'is-inspector-map' : '') + '" aria-label="Architecture map">' +
+    '<header><strong>Architecture Map</strong><span>Live from repo evidence \u2014 click nodes, inspect providers, or send a boundary to the agent.</span></header>' +
     '<div class="vr-arch-body ' + (map.data ? 'is-graph' : '') + '">' + body + '</div>' +
     '<footer>' +
       '<button type="button" data-action="arch-reset-layout">' + Icon('refresh') + 'Reset layout</button>' +
@@ -19422,16 +19574,131 @@ function loadArchitectureMap() {
 }
 
 function StudioDock() {
-  const view = demo.activeStudioTab === 'terminal' ? StudioTerminalView() : demo.activeStudioTab === 'diff' ? StudioDiffView() : demo.activeStudioTab === 'architecture' ? StudioArchitectureView() : StudioChatView();
   return '<section class="vr-studio-dock ' + (demo.agentFixing ? 'is-running' : '') + (demo.verified ? ' is-verified' : '') + '" aria-label="VibeRaven Studio agent workspace">' +
     '<div class="vr-studio-head">' +
       '<div><h2>VibeRaven Chat</h2></div>' +
       '<div class="vr-studio-head-actions"><button class="vr-studio-add-chat" type="button" data-action="split-chat" aria-label="Open a side-by-side chat">' + Icon('plus') + 'Split chat</button><div class="vr-studio-tabs">' + StudioTabButton('chat', 'Chat') + StudioTabButton('architecture', 'Architecture') + StudioTabButton('terminal', 'Terminal') + StudioTabButton('diff', 'Diff') + '</div></div>' +
     '</div>' +
-    '<div class="vr-studio-body">' + view + '</div>' +
+    '<div class="vr-studio-body">' + StudioChatView() + '</div>' +
     '</section>';
 }
 
+function RailLauncherButton(kind, icon, title, caption, attrs) {
+  return '<button class="vr-rail-launcher is-' + escapeHtml(kind) + '" type="button" ' + attrs + '>' +
+    Icon(icon) +
+    '<span><strong>' + escapeHtml(title) + '</strong><em>' + escapeHtml(caption) + '</em></span>' +
+    '<b></b>' +
+    '</button>';
+}
+
+function RailLaunchers() {
+  const activeProviders = orderedProviders().filter((provider) => provider.state !== 'not_detected').length;
+  const release = releases[0];
+  return '<nav class="vr-rail-launchers" aria-label="Studio context">' +
+    RailLauncherButton('architecture', 'branch', 'Architecture', 'Open right inspector', 'data-studio-tab="architecture"') +
+    RailLauncherButton('providers', 'cube', 'Providers', String(activeProviders || providers.length) + ' slots', 'data-studio-tab="providers"') +
+    RailLauncherButton('versions', 'clock', 'Versions', release ? release.label : 'local history', 'data-studio-tab="versions"') +
+    RailLauncherButton('worktree', 'repo', 'Worktree', 'Branches and changes', 'data-studio-tab="worktree"') +
+    '</nav>';
+}
+
+function InspectorProviderView() {
+  const boardProviders = orderedProviders();
+  const activeCount = boardProviders.filter((provider) => provider.state !== 'not_detected').length;
+  return '<section class="vr-inspector-card vr-provider-inspector">' +
+    '<header class="vr-inspector-hero">' +
+      '<div><p>Provider Control</p><h3>Production slots</h3><em>' + String(activeCount || boardProviders.length) + ' provider contexts ready for chat and proof checks.</em></div>' +
+      '<img src="' + mascotAssets.verified + '" alt="" />' +
+    '</header>' +
+    '<div class="vr-inspector-provider-grid">' + boardProviders.map((provider) =>
+      '<button class="vr-inspector-provider-row" type="button" draggable="true" data-provider="' + escapeHtml(provider.id) + '">' +
+        ProviderToken(provider) +
+        '<span><small>' + escapeHtml(stackSlots[provider.id] || provider.area) + '</small><strong>' + escapeHtml(provider.name) + '</strong><em>' + escapeHtml(provider.status) + '</em></span>' +
+        providerMcpChip(provider) +
+      '</button>'
+    ).join('') + '</div>' +
+    '<footer class="vr-inspector-footer"><button type="button" data-action="add-provider">' + Icon('plus') + 'Add provider</button><button type="button" data-action="provider-proof">' + Icon('agent') + 'Ask agent</button></footer>' +
+  '</section>';
+}
+
+function InspectorVersionsView() {
+  const selected = releases.find((item) => item.id === demo.selectedReleaseId) || releases[0];
+  const pair = releaseComparePair();
+  const entries = Array.isArray(demo.releaseChangelog?.entries) ? demo.releaseChangelog.entries.slice(0, 8) : [];
+  const changelog = demo.releaseChangelog?.loading
+    ? '<p class="vr-inspector-empty">Loading changelog...</p>'
+    : demo.releaseChangelog?.error
+      ? '<p class="vr-release-error">' + escapeHtml(demo.releaseChangelog.error) + '</p>'
+      : entries.length
+        ? '<div class="vr-inspector-changelog">' + entries.map((entry) =>
+          '<button type="button" data-action="diff-to-chat"><strong>' + escapeHtml(entry.short || entry.sha || '') + '</strong><span>' + escapeHtml(entry.subject || '') + '</span><em>' + escapeHtml((entry.author || 'unknown') + ' \xB7 ' + (entry.when || '')) + '</em></button>'
+        ).join('') + '</div>'
+        : '<p class="vr-inspector-empty">Open changelog to load commits between ' + escapeHtml(pair.fromLabel) + ' and ' + escapeHtml(pair.toLabel) + '.</p>';
+  return '<section class="vr-inspector-card vr-version-inspector">' +
+    '<header class="vr-inspector-hero">' +
+      '<div><p>Version Control</p><h3>' + escapeHtml(selected.label) + '</h3><em>' + escapeHtml(selected.meta + ' \xB7 ' + selected.branch) + '</em></div>' +
+      '<img src="' + mascotAssets.idle + '" alt="" />' +
+    '</header>' +
+    '<button class="vr-inspector-compare" type="button" data-action="compare">' + Icon('refresh') + '<span>Compare release</span><strong>' + escapeHtml(pair.fromLabel) + ' \u2192 ' + escapeHtml(pair.toLabel) + '</strong></button>' +
+    '<section class="vr-inspector-section"><header><strong>Recent versions</strong><button type="button" data-action="changelog">Load changelog</button></header>' +
+      '<div class="vr-inspector-release-list">' + releases.slice(0, 5).map((release) =>
+        '<button class="' + (release.id === selected.id ? 'is-selected' : '') + '" type="button" draggable="true" data-release="' + escapeHtml(release.id) + '">' +
+          '<span><strong>' + escapeHtml(release.label) + '</strong><em>' + escapeHtml(release.summary || release.meta) + '</em></span><small>' + escapeHtml(release.branch) + '</small>' +
+        '</button>'
+      ).join('') + '</div>' +
+    '</section>' +
+    '<section class="vr-inspector-section"><header><strong>Changelog</strong><button type="button" data-action="ask-release-agent" data-release="' + escapeHtml(selected.id) + '">Ask agent</button></header>' + changelog + '</section>' +
+    '<footer class="vr-inspector-footer"><button type="button" data-action="show-release-diff">' + Icon('code') + 'View diff</button><button type="button" data-action="rollback-release">' + Icon('refresh') + 'Rollback</button></footer>' +
+  '</section>';
+}
+
+function InspectorWorktreeView() {
+  const tree = demo.worktree || { branches: [], loading: true };
+  const defaultBranch = tree.defaultBranch || 'main';
+  const branches = Array.isArray(tree.branches) ? tree.branches : [];
+  return '<section class="vr-inspector-card vr-worktree-inspector">' +
+    '<header class="vr-inspector-hero">' +
+      '<div><p>Worktree</p><h3>' + escapeHtml(tree.currentBranch || defaultBranch) + '</h3><em>' + (tree.loading ? 'Reading branches...' : String(branches.length || 0) + ' branches detected') + '</em></div>' +
+      '<img src="' + mascotAssets.idle + '" alt="" />' +
+    '</header>' +
+    (tree.dirtyCount > 0 ? '<section class="vr-inspector-warning"><i></i><span><strong>' + tree.dirtyCount + ' uncommitted change' + (tree.dirtyCount === 1 ? '' : 's') + '</strong><em>Commit or review before merging.</em></span><button type="button" data-action="worktree-commit">Commit</button></section>' : '') +
+    '<section class="vr-inspector-section"><header><strong>Branches</strong><button type="button" data-action="worktree-review" data-branch="' + escapeHtml(defaultBranch) + '">Health report</button></header>' +
+      '<div class="vr-inspector-branch-list">' + (branches.length ? branches.slice(0, 8).map((branch) => {
+        const drift = branch.current ? 'current' : ((branch.ahead ? branch.ahead + ' ahead' : '') + (branch.ahead && branch.behind ? ' \xB7 ' : '') + (branch.behind ? branch.behind + ' behind' : '') || 'in sync');
+        return '<div class="' + (branch.current ? 'is-current' : '') + '"><span><strong>' + escapeHtml(branch.name) + '</strong><em>' + escapeHtml(drift + (branch.when ? ' \xB7 ' + branch.when : '')) + '</em></span><div><button type="button" data-action="worktree-review" data-branch="' + escapeHtml(branch.name) + '">Review</button><button type="button" data-action="worktree-diff" data-branch="' + escapeHtml(branch.name) + '">Diff</button></div></div>';
+      }).join('') : '<p class="vr-inspector-empty">' + (tree.loading ? 'Reading branches...' : 'No branches detected.') + '</p>') + '</div>' +
+    '</section>' +
+  '</section>';
+}
+
+function StudioInspectorPanel() {
+  if (demo.activeStudioTab === 'chat') return '';
+  const labels = {
+    architecture: ['Architecture Map', 'Repo structure and provider boundaries'],
+    providers: ['Providers', 'Production slots and MCP context'],
+    versions: ['Versions', 'Release comparison and changelog'],
+    worktree: ['Worktree', 'Branches and local changes'],
+    terminal: ['Terminal', 'Connect and test local CLIs'],
+    diff: ['Diff', 'Release and code changes'],
+  };
+  const label = labels[demo.activeStudioTab] || ['Inspector', 'Context panel'];
+  const view = demo.activeStudioTab === 'terminal'
+    ? StudioTerminalView()
+    : demo.activeStudioTab === 'diff'
+      ? StudioDiffView()
+      : demo.activeStudioTab === 'providers'
+        ? InspectorProviderView()
+        : demo.activeStudioTab === 'versions'
+          ? InspectorVersionsView()
+          : demo.activeStudioTab === 'worktree'
+            ? InspectorWorktreeView()
+            : StudioArchitectureView();
+  return '<aside class="vr-inspector-panel ' + (demo.inspectorExpanded ? 'is-expanded' : '') + '" aria-label="' + escapeHtml(label[0]) + '">' +
+    '<header class="vr-inspector-head"><div><strong>' + escapeHtml(label[0]) + '</strong><span>' + escapeHtml(label[1]) + '</span></div><button type="button" data-action="toggle-inspector-size" aria-label="' + (demo.inspectorExpanded ? 'Shrink inspector' : 'Expand inspector') + '">' + Icon(demo.inspectorExpanded ? 'collapse' : 'expand') + '</button><button type="button" data-studio-tab="chat" aria-label="Close inspector">' + Icon('x') + '</button></header>' +
+    '<div class="vr-inspector-body">' + view + '</div>' +
+    '</aside>';
+}
+
 function QuickActionRow(action) {
   return '<button class="vr-quick-action" type="button" data-action="' + escapeHtml(action.id) + '">' + Icon(action.icon) + '<span><strong>' + escapeHtml(action.title) + '</strong><em>' + escapeHtml(action.caption) + '</em></span></button>';
 }
@@ -19606,10 +19873,14 @@ function LaunchFlowPage() {
 }
 
 function VibeShell() {
+  const inspectorOpen = demo.activeStudioTab !== 'chat';
   return '<main class="vr-composed-shell">' +
       StudioTopBar() +
-      '<div class="vr-composition-body">' + RecentChatRail() + '<section class="vr-main-canvas">' + LaunchFlowPage() + '</section>' + AgentActionPanel() + '</div>' +
-      '<div class="vr-bottom-inventory">' + ProviderGrid() + VersionTimeline() + '</div>' +
+      '<div class="vr-composition-body ' + (inspectorOpen ? 'has-inspector' : '') + (demo.inspectorExpanded ? ' inspector-expanded' : '') + '">' +
+        '<aside class="vr-left-context-rail" aria-label="Chat and context shortcuts">' + RailLaunchers() + RecentChatRail() + '</aside>' +
+        '<section class="vr-main-canvas">' + LaunchFlowPage() + '</section>' +
+        StudioInspectorPanel() +
+      '</div>' +
       BottomTipBar() +
     '</main>' +
     ActiveModal();
@@ -19677,9 +19948,21 @@ function refreshPickerMenus() {
   });
 }
 
+function closeComposerPopovers() {
+  demo.quickActionsOpen = false;
+  demo.contextTrayOpen = false;
+  demo.scopeMenuOpen = false;
+  demo.modelMenuOpen = false;
+  demo.reasoningMenuOpen = false;
+  demo.contextMenuOpen = false;
+  demo.accessMenuOpen = false;
+  demo.dropActive = false;
+}
+
 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(() => {
     if (opts.scrollToBottom != null) {
@@ -19753,6 +20036,13 @@ app.addEventListener('click', async (event) => {
       demo.archVisited = true;
       loadArchitectureMap();
     }
+    if (demo.activeStudioTab === 'worktree') {
+      loadWorktree();
+    }
+    if (demo.activeStudioTab === 'versions') {
+      runReleaseChangelog(false);
+      return;
+    }
     demo.notice = 'Studio switched to ' + studioTab.textContent.trim() + '.';
     render();
     return;
@@ -19789,8 +20079,6 @@ app.addEventListener('click', async (event) => {
     return;
   }
 
-  if (archClickSuppressed && event.target.closest('[data-arch-node]')) return;
-
   const archZoomButton = event.target.closest('[data-action="arch-zoom"]');
   if (archZoomButton) {
     const dir = archZoomButton.getAttribute('data-dir');
@@ -19833,7 +20121,11 @@ app.addEventListener('click', async (event) => {
 
   const toggleQuickActionsButton = event.target.closest('[data-action="toggle-quick-actions"]');
   if (toggleQuickActionsButton) {
-    demo.quickActionsOpen = !demo.quickActionsOpen;
+    const chatIndex = Number(toggleQuickActionsButton.getAttribute('data-chat-index') || '0');
+    const samePicker = demo.pickerChatIndex === chatIndex && demo.quickActionsOpen;
+    closeComposerPopovers();
+    demo.pickerChatIndex = chatIndex;
+    demo.quickActionsOpen = !samePicker;
     render();
     return;
   }
@@ -19873,7 +20165,9 @@ app.addEventListener('click', async (event) => {
 
   const openWorktreeButton = event.target.closest('[data-action="open-worktree"]');
   if (openWorktreeButton) {
-    demo.activeModal = 'worktree';
+    demo.activeStudioTab = 'worktree';
+    loadWorktree();
+    demo.notice = 'Worktree opened in the inspector.';
     render();
     return;
   }
@@ -20032,7 +20326,7 @@ app.addEventListener('click', async (event) => {
       const shellInput = app.querySelector('[data-terminal-shell-input]');
       const command = String((shellInput && 'value' in shellInput ? shellInput.value : demo.cliTerminalDraft) || '').trim();
       demo.cliTerminalDraft = command;
-      await runStudioShellCommand(command);
+      await runStudioShellCommand(command, undefined, terminalTargetId());
       if (shellInput && 'value' in shellInput) shellInput.value = '';
       demo.cliTerminalDraft = '';
       return;
@@ -20173,6 +20467,9 @@ app.addEventListener('click', async (event) => {
     demo.reasoningMenuOpen = false;
     demo.modelMenuOpen = false;
     demo.contextMenuOpen = false;
+    demo.scopeMenuOpen = false;
+    demo.contextTrayOpen = false;
+    demo.quickActionsOpen = false;
     demo.accessMenuOpen = false;
     demo.activeStudioTab = 'chat';
     demo.pickerChatIndex = chatIndex;
@@ -20190,13 +20487,16 @@ app.addEventListener('click', async (event) => {
     chat.context = contextButton.getAttribute('data-context');
     demo.selectedContext = chat.context;
     demo.contextMenuOpen = false;
+    demo.scopeMenuOpen = false;
+    demo.contextTrayOpen = false;
+    demo.quickActionsOpen = false;
     demo.modelMenuOpen = false;
     demo.reasoningMenuOpen = false;
     demo.accessMenuOpen = false;
     demo.activeStudioTab = 'chat';
     demo.pickerChatIndex = chatIndex;
     demo.notice = chat.context + ' context selected for this chat.';
-    refreshPickerMenus();
+    render();
     refreshBottomTip();
     return;
   }
@@ -20211,6 +20511,9 @@ app.addEventListener('click', async (event) => {
     demo.selectedAccessMode = selected.id;
     demo.accessMenuOpen = false;
     demo.contextMenuOpen = false;
+    demo.scopeMenuOpen = false;
+    demo.contextTrayOpen = false;
+    demo.quickActionsOpen = false;
     demo.modelMenuOpen = false;
     demo.reasoningMenuOpen = false;
     demo.activeStudioTab = 'chat';
@@ -20252,6 +20555,40 @@ app.addEventListener('click', async (event) => {
     return;
   }
 
+  const contextProviderButton = event.target.closest('[data-context-provider]');
+  if (contextProviderButton) {
+    const chatIndex = Number(contextProviderButton.getAttribute('data-chat-index') || String(demo.pickerChatIndex || 0));
+    const providerId = contextProviderButton.getAttribute('data-context-provider');
+    const provider = providers.find((item) => item.id === providerId);
+    const chat = chatContext(chatIndex);
+    chat.providerId = providerId;
+    demo.selectedProviderId = providerId;
+    demo.pickerChatIndex = chatIndex;
+    demo.contextTrayOpen = false;
+    demo.dropActive = false;
+    demo.notice = provider ? provider.name + ' context attached to chat.' : 'Provider context attached.';
+    if (chatIndex === 0) syncPrimaryContext();
+    render();
+    return;
+  }
+
+  const contextReleaseButton = event.target.closest('[data-context-release]');
+  if (contextReleaseButton) {
+    const chatIndex = Number(contextReleaseButton.getAttribute('data-chat-index') || String(demo.pickerChatIndex || 0));
+    const releaseId = contextReleaseButton.getAttribute('data-context-release');
+    const release = releases.find((item) => item.id === releaseId);
+    const chat = chatContext(chatIndex);
+    chat.releaseId = releaseId;
+    demo.selectedReleaseId = releaseId;
+    demo.pickerChatIndex = chatIndex;
+    demo.contextTrayOpen = false;
+    demo.dropActive = false;
+    demo.notice = release ? release.label + ' attached to chat.' : 'Version context attached.';
+    if (chatIndex === 0) syncPrimaryContext();
+    render();
+    return;
+  }
+
   const providerButton = event.target.closest('[data-provider]');
   if (providerButton) {
     demo.selectedProviderId = providerButton.getAttribute('data-provider');
@@ -20269,7 +20606,7 @@ app.addEventListener('click', async (event) => {
   if (releaseButton) {
     demo.selectedReleaseId = releaseButton.getAttribute('data-release');
     demo.activeNavId = 'versions';
-    demo.activeModal = 'release';
+    if (demo.activeStudioTab !== 'versions') demo.activeModal = 'release';
     demo.notice = 'Release ' + demo.selectedReleaseId + ' selected. Compare changes before verification.';
     runReleaseChangelog(false);
     return;
@@ -20360,7 +20697,7 @@ app.addEventListener('click', async (event) => {
     const shellInput = app.querySelector('[data-terminal-shell-input]');
     const command = String((shellInput && 'value' in shellInput ? shellInput.value : demo.cliTerminalDraft) || '').trim();
     demo.cliTerminalDraft = command;
-    await runStudioShellCommand(command);
+    await runStudioShellCommand(command, undefined, terminalTargetId());
     if (shellInput && 'value' in shellInput) shellInput.value = '';
     demo.cliTerminalDraft = '';
     return;
@@ -20411,11 +20748,9 @@ app.addEventListener('click', async (event) => {
     const chatIndex = Number(actionButton.getAttribute('data-chat-index') || '0');
     const samePicker = demo.pickerChatIndex === chatIndex && demo.modelMenuOpen;
     demo.activeStudioTab = 'chat';
+    closeComposerPopovers();
     demo.pickerChatIndex = chatIndex;
     demo.modelMenuOpen = !samePicker;
-    demo.reasoningMenuOpen = false;
-    demo.contextMenuOpen = false;
-    demo.accessMenuOpen = false;
     refreshPickerMenus();
     return;
   }
@@ -20424,24 +20759,31 @@ app.addEventListener('click', async (event) => {
     const chatIndex = Number(actionButton.getAttribute('data-chat-index') || '0');
     const samePicker = demo.pickerChatIndex === chatIndex && demo.reasoningMenuOpen;
     demo.activeStudioTab = 'chat';
+    closeComposerPopovers();
     demo.pickerChatIndex = chatIndex;
     demo.reasoningMenuOpen = !samePicker;
-    demo.modelMenuOpen = false;
-    demo.contextMenuOpen = false;
-    demo.accessMenuOpen = false;
     refreshPickerMenus();
     return;
   }
+  if (action === 'toggle-scope-menu') {
+    event.preventDefault();
+    const chatIndex = Number(actionButton.getAttribute('data-chat-index') || '0');
+    const samePicker = demo.pickerChatIndex === chatIndex && demo.scopeMenuOpen;
+    demo.activeStudioTab = 'chat';
+    closeComposerPopovers();
+    demo.pickerChatIndex = chatIndex;
+    demo.scopeMenuOpen = !samePicker;
+    render();
+    return;
+  }
   if (action === 'toggle-context') {
     event.preventDefault();
     const chatIndex = Number(actionButton.getAttribute('data-chat-index') || '0');
     const samePicker = demo.pickerChatIndex === chatIndex && demo.contextMenuOpen;
     demo.activeStudioTab = 'chat';
+    closeComposerPopovers();
     demo.pickerChatIndex = chatIndex;
     demo.contextMenuOpen = !samePicker;
-    demo.modelMenuOpen = false;
-    demo.reasoningMenuOpen = false;
-    demo.accessMenuOpen = false;
     refreshPickerMenus();
     return;
   }
@@ -20450,11 +20792,9 @@ app.addEventListener('click', async (event) => {
     const chatIndex = Number(actionButton.getAttribute('data-chat-index') || '0');
     const samePicker = demo.pickerChatIndex === chatIndex && demo.accessMenuOpen;
     demo.activeStudioTab = 'chat';
+    closeComposerPopovers();
     demo.pickerChatIndex = chatIndex;
     demo.accessMenuOpen = !samePicker;
-    demo.modelMenuOpen = false;
-    demo.reasoningMenuOpen = false;
-    demo.contextMenuOpen = false;
     refreshPickerMenus();
     return;
   }
@@ -20546,6 +20886,11 @@ app.addEventListener('click', async (event) => {
     render();
     return;
   }
+  if (action === 'toggle-inspector-size') {
+    demo.inspectorExpanded = !demo.inspectorExpanded;
+    render();
+    return;
+  }
   if (action === 'add-chat') {
     demo.activeStudioTab = 'chat';
     demo.activeChatCount = 1;
@@ -20699,13 +21044,21 @@ app.addEventListener('click', async (event) => {
     return;
   }
   if (action === 'add-context') {
-    demo.dropActive = true;
-    demo.notice = 'Drag a provider or version into the chat composer to attach context.';
+    const chatIndex = Number(actionButton.getAttribute('data-chat-index') || String(actionChatIndex));
+    const samePicker = demo.pickerChatIndex === chatIndex && demo.contextTrayOpen;
+    demo.activeStudioTab = 'chat';
+    closeComposerPopovers();
+    demo.pickerChatIndex = chatIndex;
+    demo.contextTrayOpen = !samePicker;
+    demo.dropActive = demo.contextTrayOpen;
+    demo.notice = demo.contextTrayOpen ? 'Choose a provider or version to attach, or drag it into the chat.' : 'Context tray closed.';
+    render();
+    return;
+  }
+  if (action === 'close-context-tray') {
+    demo.contextTrayOpen = false;
+    demo.dropActive = false;
     render();
-    window.setTimeout(() => {
-      demo.dropActive = false;
-      render();
-    }, 1200);
     return;
   }
   if (action === 'terminal-tab') {
@@ -20719,7 +21072,12 @@ app.addEventListener('click', async (event) => {
     return;
   }
   if (action === 'changelog') {
-    runReleaseChangelog(true);
+    if (demo.activeStudioTab === 'versions') {
+      runReleaseChangelog(false);
+    } else {
+      demo.activeStudioTab = 'versions';
+      runReleaseChangelog(false);
+    }
     return;
   }
   if (action === 'rollback-release') {
@@ -20735,7 +21093,8 @@ app.addEventListener('click', async (event) => {
   };
   if (actionMessages[action]) {
     if (action === 'all-releases') {
-      demo.activeModal = 'release';
+      demo.activeStudioTab = 'versions';
+      demo.activeModal = null;
       runReleaseChangelog(false);
       return;
     }
@@ -20782,7 +21141,7 @@ app.addEventListener('keydown', (event) => {
     const command = String(shellInput.value || '').trim();
     if (!command) return;
     demo.cliTerminalDraft = command;
-    runStudioShellCommand(command).then(() => {
+    runStudioShellCommand(command, undefined, terminalTargetId()).then(() => {
       shellInput.value = '';
       demo.cliTerminalDraft = '';
     });
@@ -20794,47 +21153,6 @@ app.addEventListener('keydown', (event) => {
   sendChatInput(input.getAttribute('data-chat-input') || '0');
 });
 
-let archClickSuppressed = false;
-let archDrag = null;
-
-app.addEventListener('pointerdown', (event) => {
-  const node = event.target.closest('[data-arch-node]');
-  if (!node || event.target.closest('button')) return;
-  const graph = demo.archGraph;
-  if (!graph) return;
-  const id = node.getAttribute('data-arch-node');
-  const pos = graph.pos[id];
-  if (!pos) return;
-  archDrag = { id, node, startX: event.clientX, startY: event.clientY, origX: pos.x, origY: pos.y, moved: false };
-  if (typeof node.setPointerCapture === 'function' && event.pointerId !== undefined) {
-    try { node.setPointerCapture(event.pointerId); } catch { /* older engines */ }
-  }
-});
-
-app.addEventListener('pointermove', (event) => {
-  if (!archDrag || !demo.archGraph) return;
-  const zoomFactor = demo.archZoom || 1;
-  const dx = (event.clientX - archDrag.startX) / zoomFactor;
-  const dy = (event.clientY - archDrag.startY) / zoomFactor;
-  if (Math.abs(dx) + Math.abs(dy) > 4) archDrag.moved = true;
-  const pos = demo.archGraph.pos[archDrag.id];
-  if (!pos) return;
-  pos.x = Math.max(0, archDrag.origX + dx);
-  pos.y = Math.max(0, archDrag.origY + dy);
-  archDrag.node.style.transform = 'translate(' + pos.x + 'px,' + pos.y + 'px)';
-  updateArchEdges();
-});
-
-app.addEventListener('pointerup', () => {
-  if (archDrag && archDrag.moved) {
-    archClickSuppressed = true;
-    window.setTimeout(() => { archClickSuppressed = false; }, 0);
-    if (demo.archGraph) {
-      try { window.localStorage.setItem('vrArchLayout', JSON.stringify(demo.archGraph.pos)); } catch { /* storage full or blocked */ }
-    }
-  }
-  archDrag = null;
-});
 
 app.addEventListener('dragstart', (event) => {
   const providerButton = event.target.closest('[data-provider]');
@@ -20960,7 +21278,10 @@ app.addEventListener('drop', (event) => {
     if (chatIndex === 0) syncPrimaryContext();
     demo.notice = release ? 'Version ' + release.label + ' attached to chat ' + String(chatIndex + 1) + '. Ask for compare, rollback, or provider changes.' : 'Version context attached.';
   }
-  demo.activeStudioTab = 'chat';
+  if (newChatTarget || isRecentChatDrop) demo.activeStudioTab = 'chat';
+  demo.contextTrayOpen = false;
+  demo.quickActionsOpen = false;
+  demo.scopeMenuOpen = false;
   demo.dropActive = false;
   demo.dragKind = null;
   demo.dragProviderId = null;
@@ -20987,6 +21308,11 @@ window.addEventListener('keydown', (event) => {
     demo.activeModal = null;
     demo.notice = 'Panel closed. Continue from the launch flow.';
     render();
+    return;
+  }
+  if (event.key === 'Escape' && (demo.quickActionsOpen || demo.contextTrayOpen || demo.scopeMenuOpen || demo.modelMenuOpen || demo.reasoningMenuOpen || demo.contextMenuOpen || demo.accessMenuOpen)) {
+    closeComposerPopovers();
+    render();
   }
 });
 
@@ -22136,7 +22462,11 @@ a i[data-icon] {
 .vr-recent-chat[draggable="true"],
 .vr-provider-card[draggable="true"],
 .vr-release-card[draggable="true"],
-.vr-release-row[draggable="true"] {
+.vr-release-row[draggable="true"],
+.vr-inspector-provider-row[draggable="true"],
+.vr-inspector-release-list button[draggable="true"],
+.vr-chat-provider-dot[draggable="true"],
+.vr-chat-version-dot[draggable="true"] {
   position: relative;
   cursor: grab;
   user-select: none;
@@ -22146,13 +22476,21 @@ a i[data-icon] {
 .vr-recent-chat[draggable="true"]:active,
 .vr-provider-card[draggable="true"]:active,
 .vr-release-card[draggable="true"]:active,
-.vr-release-row[draggable="true"]:active {
+.vr-release-row[draggable="true"]:active,
+.vr-inspector-provider-row[draggable="true"]:active,
+.vr-inspector-release-list button[draggable="true"]:active,
+.vr-chat-provider-dot[draggable="true"]:active,
+.vr-chat-version-dot[draggable="true"]:active {
   cursor: grabbing;
 }
 .vr-recent-chat.is-being-dragged,
 .vr-provider-card.is-being-dragged,
 .vr-release-card.is-being-dragged,
-.vr-release-row.is-being-dragged {
+.vr-release-row.is-being-dragged,
+.vr-inspector-provider-row.is-being-dragged,
+.vr-inspector-release-list button.is-being-dragged,
+.vr-chat-provider-dot.is-being-dragged,
+.vr-chat-version-dot.is-being-dragged {
   opacity: 0.94;
   transform: scale(1.018) translateY(-4px);
   border-color: rgba(216, 180, 254, 0.82);
@@ -22167,6 +22505,10 @@ a i[data-icon] {
 .vr-provider-card.is-being-dragged::before,
 .vr-release-card.is-being-dragged::before,
 .vr-release-row.is-being-dragged::before,
+.vr-inspector-provider-row.is-being-dragged::before,
+.vr-inspector-release-list button.is-being-dragged::before,
+.vr-chat-provider-dot.is-being-dragged::before,
+.vr-chat-version-dot.is-being-dragged::before,
 .vr-recent-chat.is-being-dragged::before {
   content: "Dragging to chat";
   position: absolute;
@@ -22185,7 +22527,9 @@ a i[data-icon] {
   white-space: nowrap;
 }
 .vr-release-card.is-being-dragged::before,
-.vr-release-row.is-being-dragged::before {
+.vr-release-row.is-being-dragged::before,
+.vr-inspector-release-list button.is-being-dragged::before,
+.vr-chat-version-dot.is-being-dragged::before {
   content: "Dragging version";
 }
 .vr-recent-chat.is-being-dragged::before {
@@ -23559,7 +23903,7 @@ body:has(.vr-app.is-dragging) {
   color: #fecaca;
 }
 .vr-chat-mission-summary i[data-tone="danger"]::before {
-  content: "\xD7";
+  content: "\xC3\u2014";
 }
 .vr-chat-mission-summary i[data-tone="step"] {
   border: 1px solid rgba(148, 163, 184, 0.28);
@@ -26527,6 +26871,11 @@ body:has(.vr-app.is-dragging) {
   animation: vrModalPop 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
 }
 
+.vr-modal-backdrop.is-stable-render,
+.vr-modal-card.is-stable-render {
+  animation: none;
+}
+
 .vr-modal-card *,
 .vr-modal-card *::before,
 .vr-modal-card *::after {
@@ -27187,73 +27536,166 @@ body:has(.vr-app.is-dragging) {
 
 .vr-changelog-list {
   list-style: none;
-  margin: 16px 0 0;
+  margin: 10px 0 0;
   padding: 0;
   display: grid;
-  gap: 10px;
+  gap: 8px;
 }
 
-.vr-changelog-list li {
-  padding: 10px 12px;
+.vr-changelog-summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 4px 12px;
+  margin: 0 0 10px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
   border-radius: 12px;
-  background: rgba(15, 23, 42, 0.55);
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  color: #e2e8f0;
-  line-height: 1.45;
+  background: rgba(15, 23, 42, 0.38);
+  padding: 10px 12px;
 }
 
-.vr-changelog-list em {
-  display: block;
-  margin-top: 4px;
+.vr-changelog-summary span {
+  color: #a78bfa;
+  font-size: 11px;
+  font-weight: 760;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.vr-changelog-summary strong {
+  justify-self: end;
+  color: #f8fafc;
+  font-size: 13px;
+}
+
+.vr-changelog-summary em {
+  grid-column: 1 / -1;
   color: #94a3b8;
   font-style: normal;
   font-size: 12px;
 }
 
-.vr-release-error {
-  color: #fca5a5;
+.vr-changelog-list li {
+  display: grid;
+  grid-template-columns: 82px minmax(0, 1fr);
+  gap: 3px 10px;
+  align-items: start;
+  padding: 9px 11px;
+  border-radius: 10px;
+  background: rgba(15, 23, 42, 0.38);
+  border: 1px solid rgba(148, 163, 184, 0.13);
+  color: #e2e8f0;
+  line-height: 1.35;
 }
 
-.vr-modal-agent-head {
-  position: relative;
-  min-height: 210px;
-  display: grid;
-  grid-template-columns: 180px minmax(0, 1fr) 240px;
-  align-items: center;
-  gap: 28px;
-  border: 1px solid rgba(96, 122, 177, 0.24);
-  border-radius: 18px;
-  background:
-    radial-gradient(circle at 16% 38%, rgba(124, 58, 237, 0.26), transparent 28%),
-    linear-gradient(90deg, rgba(8, 17, 34, 0.82), rgba(13, 20, 43, 0.42));
-  padding: 18px;
-  overflow: hidden;
+.vr-changelog-list li strong {
+  color: #e9d5ff;
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  font-weight: 760;
 }
 
-.vr-modal-guide-head,
-.vr-modal-prompt-head {
-  position: relative;
-  min-height: 190px;
-  display: grid;
-  grid-template-columns: 170px minmax(0, 1fr) 240px;
-  align-items: center;
-  gap: 28px;
-  border: 1px solid rgba(96, 122, 177, 0.24);
-  border-radius: 18px;
-  background:
-    radial-gradient(circle at 14% 40%, rgba(124, 58, 237, 0.2), transparent 30%),
-    linear-gradient(90deg, rgba(8, 17, 34, 0.82), rgba(13, 20, 43, 0.42));
-  padding: 18px;
+.vr-changelog-list li span {
+  min-width: 0;
   overflow: hidden;
+  color: #f1f5f9;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.vr-modal-agent-avatar {
-  width: 198px;
-  height: 198px;
-  object-fit: contain;
-  filter: saturate(1.32) contrast(1.04) drop-shadow(0 0 38px rgba(124, 58, 237, 0.78));
-  animation: vrMascotIdle 3200ms cubic-bezier(0.23, 1, 0.32, 1) infinite;
-}
+.vr-changelog-list em {
+  grid-column: 2;
+  color: #94a3b8;
+  font-style: normal;
+  font-size: 11.5px;
+}
+
+.vr-changelog-more {
+  margin-top: 10px;
+}
+
+.vr-changelog-more summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 34px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.025);
+  color: #c4b5fd;
+  font-size: 12px;
+  font-weight: 720;
+  cursor: pointer;
+  list-style: none;
+}
+
+.vr-changelog-more summary::-webkit-details-marker {
+  display: none;
+}
+
+.vr-changelog-more[open] .vr-changelog-list {
+  max-height: 260px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.vr-changelog-list.is-condensed li,
+.vr-changelog-list li.is-compact {
+  padding-block: 7px;
+}
+
+.vr-changelog-empty {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.vr-release-error {
+  color: #fca5a5;
+}
+
+.vr-modal-agent-head {
+  position: relative;
+  min-height: 210px;
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr) 240px;
+  align-items: center;
+  gap: 28px;
+  border: 1px solid rgba(96, 122, 177, 0.24);
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at 16% 38%, rgba(124, 58, 237, 0.26), transparent 28%),
+    linear-gradient(90deg, rgba(8, 17, 34, 0.82), rgba(13, 20, 43, 0.42));
+  padding: 18px;
+  overflow: hidden;
+}
+
+.vr-modal-guide-head,
+.vr-modal-prompt-head {
+  position: relative;
+  min-height: 190px;
+  display: grid;
+  grid-template-columns: 170px minmax(0, 1fr) 240px;
+  align-items: center;
+  gap: 28px;
+  border: 1px solid rgba(96, 122, 177, 0.24);
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at 14% 40%, rgba(124, 58, 237, 0.2), transparent 30%),
+    linear-gradient(90deg, rgba(8, 17, 34, 0.82), rgba(13, 20, 43, 0.42));
+  padding: 18px;
+  overflow: hidden;
+}
+
+.vr-modal-agent-avatar {
+  width: 198px;
+  height: 198px;
+  object-fit: contain;
+  filter: saturate(1.32) contrast(1.04) drop-shadow(0 0 38px rgba(124, 58, 237, 0.78));
+  animation: vrMascotIdle 3200ms cubic-bezier(0.23, 1, 0.32, 1) infinite;
+}
 
 .vr-modal-agent-head em {
   color: #dbeafe;
@@ -28261,39 +28703,75 @@ body:has(.vr-app.is-dragging) {
   border-color: rgba(239, 68, 68, 0.45);
 }
 .vr-chat-gate-chip.is-blocker i { background: var(--vr-red); }
-.vr-chat-provider-dots {
+.vr-chat-provider-dots,
+.vr-chat-version-dots {
   display: inline-flex;
   align-items: center;
 }
-.vr-chat-provider-dot {
+.vr-chat-version-dots {
+  margin-left: 10px;
+  padding-left: 10px;
+  border-left: 1px solid rgba(148, 163, 184, 0.14);
+}
+.vr-chat-provider-dot,
+.vr-chat-version-dot {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-left: -6px;
+  width: 30px;
+  height: 30px;
+  margin-left: -7px;
   border: 1px solid var(--vr-border);
   border-radius: 50%;
   background: rgba(12, 13, 16, 0.92);
   cursor: grab;
   transition: transform 0.12s ease, border-color 0.12s ease;
 }
-.vr-chat-provider-dot:first-child {
+.vr-chat-provider-dot:first-child,
+.vr-chat-version-dot:first-child {
   margin-left: 0;
 }
-.vr-chat-provider-dot:hover {
+.vr-chat-provider-dot:hover,
+.vr-chat-version-dot:hover {
   transform: translateY(-2px);
   border-color: rgba(124, 58, 237, 0.6);
   z-index: 1;
 }
 .vr-chat-provider-dot svg,
 .vr-chat-provider-dot img {
-  width: 13px;
-  height: 13px;
+  width: 17px;
+  height: 17px;
 }
 .vr-chat-provider-dot[data-provider-tone='green'] { border-color: rgba(34, 197, 94, 0.4); }
 .vr-chat-provider-dot[data-provider-tone='orange'] { border-color: rgba(249, 115, 22, 0.4); }
 .vr-chat-provider-dot[data-provider-tone='red'] { border-color: rgba(239, 68, 68, 0.45); }
+.vr-chat-version-dot {
+  width: auto;
+  min-width: 76px;
+  padding: 0 10px;
+  border-radius: 9px;
+  background: rgba(18, 22, 33, 0.94);
+  color: #c4b5fd;
+}
+.vr-chat-version-dot small {
+  display: block;
+  max-width: none;
+  overflow: visible;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.vr-chat-version-dot[data-tone='current'],
+.vr-chat-version-dot.is-selected {
+  border-color: rgba(34, 197, 94, 0.46);
+  color: #86efac;
+}
+.vr-chat-version-dot[data-tone='prod'] {
+  border-color: rgba(124, 58, 237, 0.46);
+}
 
 /* --- Provider detail panel: professional pass --- */
 .vr-provider-detail-panel[data-provider-tone='green'] {
@@ -28730,7 +29208,7 @@ body:has(.vr-app.is-dragging) {
 }
 
 /* ==========================================================================
-   Clarity pass \u2014 purple budget + text strength.
+   Clarity pass \xE2\u20AC\u201D purple budget + text strength.
    Rule: purple marks interactive/brand only. Surfaces are neutral dark.
    Green/orange/red are reserved for status.
    ========================================================================== */
@@ -28756,6 +29234,235 @@ body:has(.vr-app.is-dragging) {
   color: var(--vr-muted);
 }
 
+/* Transcript cards: stronger mission input and richer agent output without adding noise. */
+.vr-story-node.is-user .vr-chat-message.is-user {
+  position: relative;
+  min-height: 96px;
+  padding: 18px 22px 18px 92px;
+  overflow: hidden;
+  border-left: 1px solid rgba(124, 58, 237, 0.78);
+  border-color: rgba(124, 58, 237, 0.38);
+  border-radius: 16px;
+  background:
+    radial-gradient(circle at 94% 18%, rgba(124, 58, 237, 0.14), transparent 170px),
+    linear-gradient(135deg, rgba(19, 18, 33, 0.96), rgba(13, 15, 22, 0.94));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
+}
+
+.vr-story-node.is-user .vr-chat-message.is-user::after {
+  content: "";
+  position: absolute;
+  left: 22px;
+  top: 22px;
+  width: 46px;
+  height: 46px;
+  border: 1px solid rgba(168, 85, 247, 0.42);
+  border-radius: 14px;
+  background:
+    radial-gradient(circle at 50% 50%, rgba(216, 180, 254, 0.55) 0 3px, transparent 4px),
+    radial-gradient(circle at 28% 30%, rgba(168, 85, 247, 0.35), transparent 18px),
+    rgba(124, 58, 237, 0.13);
+  box-shadow: 0 0 28px rgba(124, 58, 237, 0.16);
+}
+
+.vr-story-node.is-user .vr-chat-message.is-user::before {
+  margin: 0 0 9px;
+  color: #a78bfa;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.vr-story-node.is-user .vr-chat-message.is-user > p {
+  color: #f8fafc;
+  font-size: 18px;
+  font-weight: 740;
+  line-height: 1.28;
+}
+
+.vr-chat-agent-response {
+  position: relative;
+  width: min(980px, 100%);
+  padding: 16px 18px;
+  overflow: hidden;
+  border: 1px solid rgba(34, 197, 94, 0.32);
+  border-radius: 16px;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.12), transparent 210px),
+    linear-gradient(135deg, rgba(7, 30, 28, 0.9), rgba(13, 16, 24, 0.94));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.vr-chat-agent-response.is-error {
+  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));
+}
+
+.vr-chat-agent-response > div:first-child {
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 10px;
+}
+
+.vr-chat-agent-response > div:first-child > span {
+  width: 44px;
+  height: 44px;
+  border: 1px solid rgba(34, 197, 94, 0.28);
+  border-radius: 999px;
+  background: rgba(6, 78, 59, 0.22);
+}
+
+.vr-chat-agent-response.is-error > div:first-child > span {
+  border-color: rgba(239, 68, 68, 0.35);
+  background: rgba(127, 29, 29, 0.18);
+}
+
+.vr-chat-agent-response > div:first-child img {
+  width: 54px;
+  height: 54px;
+  transform: translateY(7px);
+}
+
+.vr-chat-agent-response > div:first-child p strong {
+  display: inline-block;
+  color: #f8fafc;
+  font-size: 18px;
+  font-weight: 760;
+}
+
+.vr-chat-agent-response > div:first-child p em {
+  color: #94a3b8;
+}
+
+.vr-chat-agent-response .vr-agent-response-meta {
+  margin: 0 0 10px 56px;
+  gap: 10px;
+}
+
+.vr-chat-agent-response .vr-agent-thinking-label {
+  border-color: rgba(34, 197, 94, 0.35);
+  background: rgba(16, 185, 129, 0.11);
+  color: #6ee7b7;
+}
+
+.vr-chat-agent-response.is-error .vr-agent-thinking-label {
+  border-color: rgba(249, 115, 22, 0.38);
+  background: rgba(249, 115, 22, 0.1);
+  color: #fdba74;
+}
+
+.vr-chat-agent-response .vr-agent-cli-chip {
+  border-color: rgba(34, 197, 94, 0.28);
+  background: rgba(6, 78, 59, 0.14);
+  color: #a7f3d0;
+}
+
+.vr-chat-agent-response .vr-agent-context-line,
+.vr-chat-agent-response .vr-agent-response-stack {
+  margin-left: 56px;
+}
+
+.vr-chat-agent-response .vr-agent-answer-body {
+  margin-top: 4px;
+}
+
+.vr-chat-agent-response .vr-agent-answer-body > p:first-child {
+  color: #dbeafe;
+  font-size: 15px;
+}
+
+.vr-chat-mission-summary .vr-chat-blockers-card {
+  gap: 12px;
+  border-color: rgba(239, 68, 68, 0.35);
+  background:
+    radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.1), transparent 180px),
+    rgba(14, 17, 24, 0.86);
+  padding: 16px;
+}
+
+.vr-chat-blockers-card header {
+  padding-bottom: 4px;
+}
+
+.vr-chat-blockers-card header strong {
+  font-size: 18px;
+  font-weight: 760;
+}
+
+.vr-chat-blockers-card header b {
+  border: 1px solid rgba(239, 68, 68, 0.38);
+  border-radius: 999px;
+  background: rgba(239, 68, 68, 0.1);
+  color: #fca5a5;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 720;
+}
+
+.vr-chat-mission-summary .vr-chat-blockers-card > span {
+  position: relative;
+  min-height: 84px;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 12px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 12px;
+  background: rgba(15, 23, 42, 0.46);
+  padding: 14px 14px 36px;
+}
+
+.vr-chat-mission-summary .vr-chat-blockers-card > span:hover {
+  border-color: rgba(239, 68, 68, 0.42);
+  background: rgba(30, 41, 59, 0.48);
+}
+
+.vr-chat-blockers-card > span i {
+  width: 30px;
+  height: 30px;
+  background: rgba(239, 68, 68, 0.12);
+}
+
+.vr-chat-blockers-card > span em {
+  color: #f8fafc;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.35;
+  white-space: normal;
+}
+
+.vr-chat-blockers-card > span small {
+  margin-top: 7px;
+  color: #aeb8c8;
+  font-size: 12.5px;
+  font-weight: 480;
+  line-height: 1.4;
+  white-space: normal;
+}
+
+.vr-chat-blockers-card > span b {
+  position: absolute;
+  right: 14px;
+  bottom: 12px;
+  border: 1px solid rgba(168, 85, 247, 0.24);
+  border-radius: 999px;
+  background: rgba(124, 58, 237, 0.1);
+  color: #c4b5fd;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 720;
+}
+
+@media (min-width: 1260px) {
+  .vr-chat-mission-summary .vr-chat-blockers-card {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .vr-chat-blockers-card header {
+    grid-column: 1 / -1;
+  }
+}
+
 /* Story rail: neutral line and dots; purple only marks the user's input. */
 .vr-story-node::before {
   background: linear-gradient(180deg, rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0.04));
@@ -28800,7 +29507,7 @@ body:has(.vr-app.is-dragging) {
   background: rgba(10, 14, 24, 0.85);
 }
 
-/* Composer: neutral until focused \u2014 then purple earns its place. */
+/* Composer: neutral until focused \xE2\u20AC\u201D then purple earns its place. */
 .vr-chat-composer {
   border-color: rgba(148, 163, 184, 0.2);
 }
@@ -28893,8 +29600,160 @@ body:has(.vr-app.is-dragging) {
   height: 14px;
 }
 
-/* Gate chip is a button now \u2014 keep the pill look. */
-button.vr-chat-gate-chip {
+.vr-chat-intro-message {
+  width: min(780px, 100%);
+  max-width: min(780px, 100%);
+}
+
+.vr-chat-intro-message > div:first-child > p {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vr-chat-intro-message > div:first-child > p strong {
+  font-size: 14px;
+}
+
+.vr-chat-intro-message > div:first-child > p b {
+  margin: 0;
+  border-color: rgba(168, 85, 247, 0.35);
+  background: rgba(124, 58, 237, 0.22);
+  color: #d8b4fe;
+  padding: 3px 8px;
+  font-size: 11px;
+}
+
+.vr-chat-intro-message > div:first-child > p em.is-ready {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #86efac;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.vr-chat-intro-message > div:first-child > p em.is-ready::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #22c55e;
+}
+
+.vr-chat-intro-message > p {
+  padding-left: 48px;
+  color: #dbe3ee;
+}
+
+.vr-chat-intro-message > p strong {
+  color: #f8fafc;
+}
+
+.vr-env-connect-card {
+  width: min(690px, calc(100% - 48px));
+  margin: 20px 0 0 48px;
+  display: grid;
+  gap: 12px;
+  border: 1px solid rgba(168, 85, 247, 0.32);
+  border-radius: 16px;
+  background:
+    radial-gradient(circle at 76% 12%, rgba(124, 58, 237, 0.11), transparent 150px),
+    linear-gradient(180deg, rgba(22, 24, 33, 0.82), rgba(15, 17, 24, 0.9));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    0 14px 42px rgba(0, 0, 0, 0.24);
+  padding: 18px;
+}
+
+.vr-env-connect-card header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.vr-env-connect-card header strong {
+  color: #f8fafc;
+  font-size: 16px;
+  font-weight: 760;
+}
+
+.vr-env-connect-card > div {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.vr-env-connect-option {
+  min-width: 0;
+  min-height: 48px;
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 9px;
+  border: 1px solid rgba(148, 163, 184, 0.13);
+  border-radius: 10px;
+  background: rgba(8, 12, 20, 0.34);
+  color: #f4f4f5;
+  padding: 9px 10px;
+  text-align: left;
+}
+
+.vr-env-connect-option:hover {
+  border-color: rgba(168, 85, 247, 0.38);
+  background: rgba(124, 58, 237, 0.085);
+}
+
+.vr-env-connect-option > span {
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  color: #d8b4fe;
+}
+
+.vr-env-connect-option > span img,
+.vr-env-connect-option > span svg {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+}
+
+.vr-env-connect-option strong {
+  min-width: 0;
+  overflow: hidden;
+  color: #f8fafc;
+  font-size: 13.5px;
+  font-weight: 720;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr-env-connect-option b {
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.09);
+  color: #cbd5e1;
+  padding: 4px 9px;
+  font-size: 11px;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.vr-env-connect-option.is-disconnected b {
+  background: rgba(124, 58, 237, 0.16);
+  color: #d8b4fe;
+}
+
+.vr-env-connect-option.is-connected b {
+  background: rgba(34, 197, 94, 0.12);
+  color: #86efac;
+}
+
+/* Gate chip is a button now \xE2\u20AC\u201D keep the pill look. */
+button.vr-chat-gate-chip {
   cursor: pointer;
   background: rgba(12, 13, 16, 0.7);
   font: inherit;
@@ -28939,14 +29798,28 @@ button.vr-chat-gate-chip {
   border-radius: 12px;
   background: rgba(14, 17, 26, 0.96);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-  cursor: grab;
+  cursor: pointer;
   user-select: none;
-  touch-action: none;
+  touch-action: manipulation;
+  transition:
+    border-color 150ms ease,
+    background 150ms ease,
+    box-shadow 150ms ease,
+    transform 150ms ease;
 }
 .vr-arch-node:active {
-  cursor: grabbing;
   border-color: rgba(124, 58, 237, 0.6);
 }
+.vr-arch-node:hover,
+.vr-arch-node.is-selected {
+  border-color: rgba(168, 85, 247, 0.58);
+  background:
+    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.16), transparent 34px),
+    rgba(16, 19, 29, 0.98);
+  box-shadow:
+    0 0 0 1px rgba(168, 85, 247, 0.14),
+    0 12px 30px rgba(0, 0, 0, 0.38);
+}
 .vr-arch-node strong {
   display: block;
   font-size: 13px;
@@ -29130,9 +30003,15 @@ button.vr-chat-gate-chip {
 }
 
 /* --- Release modal symmetry --- */
+.vr-modal-release {
+  width: min(820px, calc(100vw - 48px));
+}
 .vr-modal-two-col {
   align-items: stretch;
 }
+.vr-modal-release .vr-modal-two-col {
+  grid-template-columns: minmax(0, 1.18fr) minmax(220px, 0.82fr);
+}
 .vr-modal-two-col > section {
   display: flex;
   flex-direction: column;
@@ -29158,6 +30037,14 @@ button.vr-chat-gate-chip {
 .vr-modal-two-col dd {
   margin: 0;
   text-align: right;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 860px) {
+  .vr-modal-release .vr-modal-two-col {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* --- Architecture graph: zones and guidance --- */
@@ -29681,7 +30568,7 @@ div.vr-branch-row {
 }
 
 /* ==========================================================================
-   Professional pass v2 \u2014 flat, aligned, quiet.
+   Professional pass v2 \xE2\u20AC\u201D flat, aligned, quiet.
    ========================================================================== */
 
 /* Provider modal: flat header, no glow toys. */
@@ -29982,7 +30869,7 @@ div.vr-branch-row {
 }
 
 /* ==========================================================================
-   Global calm pass \u2014 flat surfaces, one quiet accent, breathing room.
+   Global calm pass \xE2\u20AC\u201D flat surfaces, one quiet accent, breathing room.
    ========================================================================== */
 
 /* Flat canvas: no ambient color washes. */
@@ -30049,170 +30936,1973 @@ body {
   }
 }
 
-/* Provider popup checks: identical geometry for every row state. */
-.vr-modal-checks li,
-.vr-modal-checks li.pending,
-.vr-modal-checks li.active,
-.vr-modal-checks li.running,
-.vr-modal-checks li.done {
-  display: grid;
-  grid-template-columns: 30px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 12px;
-  min-height: 52px;
-  margin: 0 0 6px;
-  padding: 6px 14px;
-}
-.vr-modal-checks li > span,
-.vr-modal-checks li.pending > span,
-.vr-modal-checks li.active > span,
-.vr-modal-checks li.running > span,
-.vr-modal-checks li.done > span {
-  width: 20px;
-  height: 20px;
-  justify-self: center;
+/* Provider popup checks: identical geometry for every row state. */
+.vr-modal-checks li,
+.vr-modal-checks li.pending,
+.vr-modal-checks li.active,
+.vr-modal-checks li.running,
+.vr-modal-checks li.done {
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 52px;
+  margin: 0 0 6px;
+  padding: 6px 14px;
+}
+.vr-modal-checks li > span,
+.vr-modal-checks li.pending > span,
+.vr-modal-checks li.active > span,
+.vr-modal-checks li.running > span,
+.vr-modal-checks li.done > span {
+  width: 20px;
+  height: 20px;
+  justify-self: center;
+}
+.vr-modal-health-line {
+  flex-wrap: wrap;
+  align-items: center;
+  line-height: 1.4;
+  font-size: 12.5px;
+}
+.vr-modal-health-line .vr-modal-pill {
+  flex-shrink: 0;
+}
+.vr-mcp-connect-btn {
+  border: 1px solid rgba(124, 58, 237, 0.5);
+  border-radius: 999px;
+  background: rgba(124, 58, 237, 0.1);
+  color: var(--vr-text);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 14px;
+  cursor: pointer;
+}
+
+/* Provider modal: calm cockpit treatment. */
+.vr-modal-provider {
+  width: min(860px, calc(100vw - 48px));
+}
+.vr-modal-provider .vr-modal-mascot {
+  display: none;
+}
+.vr-modal-provider-head {
+  grid-template-columns: 48px minmax(0, 1fr);
+  min-height: 0;
+  border-color: rgba(148, 163, 184, 0.14);
+  background: rgba(255, 255, 255, 0.018);
+}
+.vr-modal-provider-head h2 {
+  font-size: 22px;
+}
+.vr-modal-provider-head .vr-status-badge {
+  margin-left: 8px;
+}
+.vr-provider-mcp-panel,
+.vr-provider-mcp-panel.is-connected,
+.vr-provider-mcp-panel.is-disconnected {
+  border-color: rgba(148, 163, 184, 0.14);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.018);
+  box-shadow: none;
+}
+.vr-provider-mcp-panel header {
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+}
+.vr-provider-mcp-panel header > span {
+  width: 32px;
+  height: 32px;
+  border-color: rgba(148, 163, 184, 0.18);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.025);
+  color: #aeb9ca;
+}
+.vr-provider-mcp-panel.is-connected header > span {
+  border-color: rgba(34, 197, 94, 0.24);
+  background: rgba(34, 197, 94, 0.06);
+  color: #86efac;
+}
+.vr-provider-mcp-panel header small {
+  display: block;
+  margin-bottom: 2px;
+  color: #8f9bad;
+  font-size: 10.5px;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.vr-provider-mcp-panel header strong {
+  color: #f4f4f5;
+  font-size: 13.5px;
+}
+.vr-provider-mcp-panel header em {
+  margin-top: 2px;
+  color: #9ca3af;
+  font-size: 12px;
+}
+.vr-provider-mcp-panel > div small {
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.025);
+  color: #aeb9ca;
+}
+.vr-mcp-connect-btn {
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.025);
+  color: #e5e7eb;
+}
+.vr-mcp-connect-btn:hover {
+  border-color: rgba(168, 85, 247, 0.45);
+  background: rgba(124, 58, 237, 0.1);
+}
+.vr-composer-controls .vr-model-picker > button:nth-child(4) {
+  min-width: 158px;
+  max-width: 178px;
+}
+.vr-composer-controls .vr-model-picker > button:nth-child(4) strong {
+  max-width: 132px;
+}
+
+/* Quickstart */
+.vr-qs-steps {
+  display: grid;
+  gap: 8px;
+  margin-top: 16px;
+}
+.vr-qs-step {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  padding: 13px 16px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.02);
+}
+.vr-qs-step.is-done {
+  opacity: 0.72;
+}
+.vr-qs-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 50%;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--vr-muted);
+}
+.vr-qs-step.is-done .vr-qs-num {
+  border-color: rgba(34, 197, 94, 0.5);
+  color: var(--vr-green);
+}
+.vr-qs-num svg { width: 13px; height: 13px; }
+.vr-qs-step strong { display: block; font-size: 14px; }
+.vr-qs-step em { display: block; font-size: 12px; font-style: normal; color: var(--vr-muted); }
+.vr-qs-step > b {
+  font-size: 11px;
+  font-weight: 650;
+  color: var(--vr-green);
+  border: 1px solid rgba(34, 197, 94, 0.4);
+  border-radius: 999px;
+  padding: 3px 11px;
+}
+.vr-qs-step > button {
+  border: 1px solid rgba(124, 58, 237, 0.55);
+  border-radius: 999px;
+  background: rgba(124, 58, 237, 0.12);
+  color: var(--vr-text);
+  font-size: 12.5px;
+  font-weight: 650;
+  padding: 7px 16px;
+  cursor: pointer;
+}
+.vr-qs-step > button:hover { background: rgba(124, 58, 237, 0.2); }
+.vr-qs-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 16px;
+}
+.vr-qs-foot button {
+  border: 0;
+  background: transparent;
+  color: var(--vr-muted);
+  font-size: 12px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.vr-qs-foot span { font-size: 12px; color: var(--vr-muted); }
+
+/* --- Claude-style composer: one + button, actions on demand, air. --- */
+.vr-chat-plus {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--vr-muted);
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
+}
+.vr-chat-plus:hover {
+  border-color: rgba(124, 58, 237, 0.55);
+  color: var(--vr-text);
+}
+.vr-chat-plus.is-open {
+  border-color: rgba(124, 58, 237, 0.55);
+  color: var(--vr-text);
+  transform: rotate(0deg);
+}
+.vr-chat-plus svg {
+  width: 14px;
+  height: 14px;
+}
+.vr-chat-inline-actions.is-collapsed {
+  overflow: visible;
+  padding: 6px 0 10px;
+}
+.vr-chat-inline-actions {
+  align-items: center;
+}
+
+/* Breathing room in the chat lane. */
+.vr-chat-transcript {
+  padding: 14px 16px 10px;
+}
+.vr-chat-command-bar {
+  gap: 8px;
+  padding: 10px 14px 14px;
+}
+.vr-chat-command-bar > .vr-chat-composer {
+  border-radius: 18px;
+  padding: 14px 16px;
+}
+
+/* --- Clean chat canvas correction: sidebars are commands, inspector opens on demand. --- */
+.vr-composed-shell {
+  grid-template-rows: 52px minmax(0, 1fr);
+}
+
+.vr-bottom-tip-bar {
+  display: none;
+}
+
+.vr-composition-body,
+.vr-composition-body.has-inspector {
+  grid-template-columns: 248px minmax(0, 1fr);
+  gap: 10px;
+  padding: 10px;
+}
+
+.vr-composition-body.has-inspector {
+  grid-template-columns: 248px minmax(0, 1fr) clamp(460px, 31vw, 620px);
+}
+
+.vr-composition-body.has-inspector.inspector-expanded {
+  grid-template-columns: 248px minmax(760px, 0.95fr) minmax(640px, 0.8fr);
+}
+
+.vr-left-context-rail {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.vr-left-context-rail .vr-releases-panel,
+.vr-context-rail,
+.vr-agent-panel,
+.vr-providers-panel {
+  display: none;
+}
+
+.vr-left-context-rail .vr-recent-rail {
+  border-color: rgba(148, 163, 184, 0.12);
+  background: rgba(17, 19, 23, 0.72);
+}
+
+.vr-rail-launchers {
+  display: grid;
+  gap: 7px;
+  border: 1px solid rgba(148, 163, 184, 0.12);
+  border-radius: 12px;
+  background: rgba(17, 19, 23, 0.72);
+  padding: 8px;
+}
+
+.vr-rail-launcher {
+  min-width: 0;
+  min-height: 44px;
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) 10px;
+  align-items: center;
+  gap: 9px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: #f4f4f5;
+  padding: 7px 8px;
+  text-align: left;
+}
+
+.vr-rail-launcher:hover {
+  border-color: rgba(148, 163, 184, 0.18);
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.vr-rail-launcher i[data-icon] {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  color: #cbd5e1;
+}
+
+.vr-rail-launcher i[data-icon] svg {
+  width: 14px;
+  height: 14px;
+}
+
+.vr-rail-launcher strong,
+.vr-rail-launcher em {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr-rail-launcher strong {
+  font-size: 12.5px;
+  line-height: 1.2;
+}
+
+.vr-rail-launcher em {
+  color: var(--vr-muted);
+  font-size: 11px;
+  font-style: normal;
+  line-height: 1.25;
+}
+
+.vr-rail-launcher b {
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid #717987;
+  border-bottom: 1.5px solid #717987;
+  transform: rotate(-45deg);
+}
+
+.vr-main-canvas,
+.vr-studio-dock {
+  min-height: 0;
+}
+
+.vr-studio-dock {
+  border-color: rgba(148, 163, 184, 0.1);
+  background: rgba(15, 17, 21, 0.58);
+  padding: 8px;
+}
+
+.vr-studio-head {
+  padding: 4px 4px 0;
+}
+
+.vr-studio-body {
+  min-height: 0;
+}
+
+.vr-studio-chat {
+  border-color: rgba(148, 163, 184, 0.09);
+  background: rgba(12, 14, 18, 0.54);
+}
+
+.vr-studio-chat:not(.is-split) .vr-chat-transcript {
+  padding: clamp(18px, 3vh, 34px) clamp(24px, 5vw, 76px) 24px;
+}
+
+.vr-studio-chat:not(.is-split) .vr-chat-message,
+.vr-studio-chat:not(.is-split) .vr-chat-mission-summary {
+  max-width: min(920px, 100%);
+}
+
+.vr-studio-chat:not(.is-split) .vr-chat-message.is-agent {
+  max-width: min(900px, 100%);
+}
+
+.vr-studio-chat:not(.is-split) .vr-chat-command-bar {
+  padding: 8px clamp(20px, 5vw, 70px) 12px;
+}
+
+.vr-studio-chat:not(.is-split) .vr-chat-command-bar > .vr-chat-composer {
+  min-height: 112px;
+  border-radius: 18px;
+  border-color: rgba(148, 163, 184, 0.16);
+  background: #202124;
+}
+
+.vr-inspector-panel {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 13px;
+  background: rgba(17, 19, 23, 0.86);
+  overflow: hidden;
+}
+
+.vr-inspector-head {
+  min-height: 52px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 32px 32px;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+  padding: 8px 10px 8px 14px;
+}
+
+.vr-inspector-head strong,
+.vr-inspector-head span {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr-inspector-head strong {
+  font-size: 13.5px;
+}
+
+.vr-inspector-head span {
+  color: var(--vr-muted);
+  font-size: 11.5px;
+}
+
+.vr-inspector-head button {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  color: #cbd5e1;
+}
+
+.vr-inspector-body {
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+  scrollbar-width: thin;
+}
+
+.vr-inspector-body .vr-studio-architecture,
+.vr-inspector-body .vr-studio-terminal,
+.vr-inspector-body .vr-studio-diff {
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.vr-inspector-body .vr-studio-architecture > header {
+  grid-template-columns: 1fr;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid rgba(148, 163, 184, 0.12);
+  border-radius: 12px;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.12), transparent 32%),
+    rgba(255, 255, 255, 0.025);
+}
+
+.vr-inspector-body .vr-studio-architecture > header strong {
+  font-size: 17px;
+}
+
+.vr-inspector-body .vr-arch-body {
+  border-radius: 12px;
+  border-color: rgba(148, 163, 184, 0.12);
+  background-color: rgba(9, 12, 18, 0.78);
+}
+
+.vr-inspector-body .vr-studio-architecture > footer {
+  justify-content: start;
+  overflow-x: auto;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map {
+  padding: 0;
+  gap: 10px;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map > header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  padding: 12px 14px;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map > header span {
+  max-width: 40ch;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-body {
+  min-height: 0;
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-viewport {
+  inset: 0;
+  overflow: auto;
+  padding: 0;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-canvas {
+  transform-origin: 0 0;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-node {
+  width: 168px;
+  height: 54px;
+  border-radius: 11px;
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-node strong {
+  font-size: 12px;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-node em {
+  font-size: 10px;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-hint {
+  display: none;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-zone {
+  color: rgba(196, 181, 253, 0.66);
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map .vr-arch-zoom {
+  left: 12px;
+  right: auto;
+  bottom: 12px;
+  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map > footer {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  overflow: visible;
+}
+
+.vr-inspector-body .vr-studio-architecture.is-inspector-map > footer button {
+  justify-content: center;
+  min-width: 0;
+  padding-inline: 10px;
+}
+
+.vr-inspector-card {
+  min-height: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.vr-inspector-hero {
+  position: relative;
+  min-height: 112px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 88px;
+  align-items: center;
+  gap: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 13px;
+  background:
+    radial-gradient(circle at 90% 42%, rgba(124, 58, 237, 0.22), transparent 34%),
+    linear-gradient(180deg, rgba(30, 33, 42, 0.78), rgba(18, 20, 27, 0.82));
+  padding: 14px 16px;
+}
+
+.vr-inspector-hero p,
+.vr-inspector-hero h3,
+.vr-inspector-hero em {
+  margin: 0;
+}
+
+.vr-inspector-hero p {
+  color: #b794f6;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.vr-inspector-hero h3 {
+  margin-top: 5px;
+  font-size: 24px;
+  line-height: 1.05;
+}
+
+.vr-inspector-hero em {
+  display: block;
+  margin-top: 7px;
+  color: #cbd5e1;
+  font-size: 12.5px;
+  font-style: normal;
+  line-height: 1.35;
+}
+
+.vr-inspector-hero img {
+  width: 86px;
+  height: 86px;
+  object-fit: contain;
+  object-position: bottom;
+  filter: saturate(1.16) drop-shadow(0 0 20px rgba(124, 58, 237, 0.42));
+}
+
+.vr-inspector-provider-grid,
+.vr-inspector-release-list,
+.vr-inspector-branch-list,
+.vr-inspector-changelog {
+  display: grid;
+  gap: 8px;
+}
+
+.vr-inspector-provider-row,
+.vr-inspector-release-list button,
+.vr-inspector-branch-list > div,
+.vr-inspector-changelog button {
+  min-width: 0;
+  display: grid;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.13);
+  border-radius: 11px;
+  background: rgba(255, 255, 255, 0.025);
+  color: #f4f4f5;
+  padding: 10px 12px;
+  text-align: left;
+}
+
+.vr-inspector-provider-row {
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+}
+
+.vr-inspector-provider-row:hover,
+.vr-inspector-release-list button:hover,
+.vr-inspector-branch-list > div:hover,
+.vr-inspector-changelog button:hover {
+  border-color: rgba(168, 85, 247, 0.32);
+  background: rgba(124, 58, 237, 0.055);
+}
+
+.vr-inspector-provider-row span,
+.vr-inspector-release-list span,
+.vr-inspector-branch-list span {
+  min-width: 0;
+}
+
+.vr-inspector-provider-row strong,
+.vr-inspector-provider-row em,
+.vr-inspector-provider-row small,
+.vr-inspector-release-list strong,
+.vr-inspector-release-list em,
+.vr-inspector-release-list small,
+.vr-inspector-branch-list strong,
+.vr-inspector-branch-list em,
+.vr-inspector-changelog strong,
+.vr-inspector-changelog span,
+.vr-inspector-changelog em {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr-inspector-provider-row small {
+  color: #a78bfa;
+  font-size: 10px;
+  font-weight: 760;
+}
+
+.vr-inspector-provider-row strong,
+.vr-inspector-release-list strong,
+.vr-inspector-branch-list strong {
+  font-size: 13px;
+}
+
+.vr-inspector-provider-row em,
+.vr-inspector-release-list em,
+.vr-inspector-release-list small,
+.vr-inspector-branch-list em,
+.vr-inspector-changelog em {
+  color: var(--vr-muted);
+  font-size: 11px;
+  font-style: normal;
+}
+
+.vr-inspector-section {
+  display: grid;
+  gap: 8px;
+  border: 1px solid rgba(148, 163, 184, 0.12);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.018);
+  padding: 10px;
+}
+
+.vr-inspector-section > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.vr-inspector-section > header strong {
+  font-size: 12px;
+}
+
+.vr-inspector-section > header button,
+.vr-inspector-footer button,
+.vr-inspector-branch-list button {
+  min-height: 30px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.03);
+  color: #f4f4f5;
+  padding: 0 10px;
+  font-size: 11.5px;
+  font-weight: 650;
+}
+
+.vr-inspector-release-list button {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.vr-inspector-release-list button.is-selected {
+  border-color: rgba(168, 85, 247, 0.48);
+  background: rgba(124, 58, 237, 0.1);
+}
+
+.vr-inspector-compare {
+  min-height: 58px;
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0 10px;
+  border: 1px solid rgba(168, 85, 247, 0.42);
+  border-radius: 13px;
+  background: rgba(124, 58, 237, 0.095);
+  color: #f4f4f5;
+  padding: 10px 13px;
+  text-align: left;
+}
+
+.vr-inspector-compare i {
+  grid-row: 1 / span 2;
+}
+
+.vr-inspector-compare span {
+  color: #c4b5fd;
+  font-size: 12px;
+  font-weight: 760;
+}
+
+.vr-inspector-compare strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+}
+
+.vr-inspector-changelog {
+  max-height: 320px;
+  overflow: auto;
+  padding-right: 2px;
+  scrollbar-width: thin;
+}
+
+.vr-inspector-changelog button {
+  grid-template-columns: 74px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+}
+
+.vr-inspector-changelog em {
+  grid-column: 2;
+}
+
+.vr-inspector-branch-list > div {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.vr-inspector-branch-list > div.is-current {
+  border-color: rgba(34, 197, 94, 0.3);
+}
+
+.vr-inspector-branch-list > div > div {
+  display: inline-flex;
+  gap: 6px;
+}
+
+.vr-inspector-warning {
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid rgba(249, 115, 22, 0.32);
+  border-radius: 12px;
+  background: rgba(249, 115, 22, 0.07);
+  padding: 10px 12px;
+}
+
+.vr-inspector-warning > i {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--vr-orange);
+}
+
+.vr-inspector-warning strong,
+.vr-inspector-warning em {
+  display: block;
+}
+
+.vr-inspector-warning em {
+  color: var(--vr-muted);
+  font-size: 11px;
+  font-style: normal;
+}
+
+.vr-inspector-footer {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.vr-inspector-footer button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.vr-inspector-empty {
+  margin: 0;
+  color: var(--vr-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+@media (max-width: 1180px) {
+  .vr-composition-body,
+  .vr-composition-body.has-inspector {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "main"
+      "inspector"
+      "left";
+  }
+  .vr-left-context-rail {
+    grid-area: left;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(220px, 360px);
+  }
+  .vr-inspector-panel {
+    grid-area: inspector;
+    height: min(560px, 72dvh);
+  }
+}
+
+@media (max-width: 760px) {
+  .vr-composed-shell {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+  .vr-main-canvas {
+    height: 72dvh;
+    min-height: 560px;
+  }
+  .vr-studio-head-actions {
+    gap: 6px;
+  }
+  .vr-studio-tabs button {
+    padding: 0 10px;
+  }
+  .vr-studio-chat:not(.is-split) .vr-chat-command-bar {
+    padding: 8px;
+  }
+  .vr-studio-chat:not(.is-split) .vr-chat-command-bar > .vr-chat-composer {
+    min-height: 112px;
+  }
+}
+
+/* --- Premium composer surface --- */
+.vr-chat-command-bar {
+  border-top: 0;
+  background: linear-gradient(180deg, rgba(10, 12, 17, 0), rgba(10, 12, 17, 0.86) 24%);
+}
+
+.vr-chat-command-bar > .vr-chat-composer {
+  position: relative;
+  min-height: 182px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(58px, 1fr) auto auto auto;
+  gap: 14px;
+  align-items: stretch;
+  overflow: visible;
+  border: 1px solid rgba(168, 85, 247, 0.66);
+  border-radius: 22px;
+  background:
+    radial-gradient(circle at 94% 84%, rgba(168, 85, 247, 0.24), transparent 110px),
+    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.16), transparent 210px),
+    linear-gradient(180deg, rgba(22, 25, 35, 0.96), rgba(13, 16, 24, 0.98));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
+    0 0 0 1px rgba(124, 58, 237, 0.1),
+    0 18px 60px rgba(0, 0, 0, 0.38);
+  padding: 18px 20px;
+}
+
+.vr-chat-command-bar > .vr-chat-composer::before {
+  content: "";
+  position: absolute;
+  left: 24px;
+  right: 24px;
+  top: 70px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.18), transparent);
+  pointer-events: none;
+}
+
+.vr-composer-top,
+.vr-composer-bottom,
+.vr-composer-controls {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.vr-composer-top {
+  justify-content: flex-start;
+}
+
+.vr-composer-scope-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.vr-composer-scope {
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid rgba(168, 85, 247, 0.32);
+  border-radius: 10px;
+  background: rgba(124, 58, 237, 0.11);
+  color: #f8fafc;
+  padding: 0 13px;
+  font-size: 13px;
+  font-weight: 740;
+  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
+}
+
+.vr-composer-scope:hover {
+  border-color: rgba(196, 181, 253, 0.52);
+  background: rgba(124, 58, 237, 0.16);
+  transform: translateY(-1px);
+}
+
+.vr-composer-scope i[data-icon] {
+  width: 18px;
+  height: 18px;
+  color: #c4b5fd;
+}
+
+.vr-composer-scope i[data-icon] svg {
+  width: 18px;
+  height: 18px;
+}
+
+.vr-composer-scope > i:not([data-icon]) {
+  width: 8px;
+  height: 8px;
+  border-right: 1.5px solid #9ca3af;
+  border-bottom: 1.5px solid #9ca3af;
+  transform: rotate(45deg) translateY(-2px);
+  margin-left: 4px;
+}
+
+.vr-scope-menu {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 8px);
+  z-index: 22;
+  width: 212px;
+  display: grid;
+  gap: 3px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 12px;
+  background: rgba(16, 18, 24, 0.98);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
+  padding: 8px;
+}
+
+.vr-scope-menu p {
+  margin: 0 0 4px;
+  padding: 0 4px;
+  color: #9ca3af;
+  font-size: 11px;
+  font-weight: 720;
+}
+
+.vr-scope-menu button {
+  min-height: 36px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 14px;
+  align-items: center;
+  gap: 9px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: #e5e7eb;
+  padding: 0 9px;
+  text-align: left;
+}
+
+.vr-scope-menu button:hover {
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.vr-scope-menu button i[data-icon],
+.vr-scope-menu button svg {
+  width: 15px;
+  height: 15px;
+  color: #c4b5fd;
+}
+
+.vr-scope-menu button b {
+  width: 8px;
+  height: 14px;
+  border: solid #d8b4fe;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.vr-chat-command-bar .vr-chat-input {
+  grid-column: 1;
+  grid-row: 2;
+  min-height: 64px;
+  padding: 0 4px;
+  color: #f8fafc;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.55;
+}
+
+.vr-chat-command-bar .vr-chat-input::placeholder {
+  color: #9ca3af;
+}
+
+.vr-composer-bottom {
+  grid-column: 1;
+  grid-row: 5;
+  align-self: end;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.vr-chat-command-bar > .vr-chat-composer > .vr-provider-drop-zone {
+  grid-row: 4;
+  grid-column: 1;
+  align-self: start;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.vr-chat-command-bar > .vr-chat-composer > .vr-provider-drop-zone:not(.has-provider):not(.is-active) {
+  display: none;
+  min-height: 0;
+}
+
+.vr-chat-command-bar > .vr-chat-composer > .vr-provider-drop-zone.has-provider {
+  min-height: 34px;
+}
+
+.vr-chat-command-bar > .vr-chat-composer > .vr-provider-drop-zone .vr-context-chip {
+  flex: 0 1 auto;
+  max-width: min(240px, 48%);
+}
+
+.vr-chat-inline-actions {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  overflow: visible;
+}
+
+.vr-chat-command-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  overflow: visible;
+}
+
+.vr-chat-inline-actions > button,
+.vr-chat-command-trigger > button {
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 10px;
+  background: rgba(12, 15, 22, 0.62);
+  color: #cbd5e1;
+  padding: 0 13px;
+  font-size: 13px;
+  font-weight: 680;
+}
+
+.vr-chat-inline-actions > button:hover,
+.vr-chat-command-trigger > button:hover {
+  border-color: rgba(168, 85, 247, 0.32);
+  background: rgba(124, 58, 237, 0.09);
+  color: #f8fafc;
+}
+
+.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 {
+  width: 16px;
+  height: 16px;
+}
+
+.vr-chat-command-popover {
+  position: absolute;
+  right: -12px;
+  bottom: calc(100% + 8px);
+  z-index: 8;
+  width: min(292px, 78vw);
+  display: grid;
+  gap: 4px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 12px;
+  background: rgba(14, 17, 24, 0.98);
+  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46);
+  padding: 8px;
+}
+
+.vr-chat-command-popover button {
+  min-height: 34px;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #d1d5db;
+  padding: 0 10px;
+  text-align: left;
+  font-size: 12.5px;
+  font-weight: 650;
+}
+
+.vr-chat-command-popover button.is-primary {
+  border-color: transparent;
+  background: transparent;
+  color: #f3e8ff;
+}
+
+.vr-chat-command-popover button.is-muted {
+  color: #9ca3af;
+}
+
+.vr-chat-command-popover button:hover {
+  border-color: rgba(148, 163, 184, 0.16);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.vr-context-tray {
+  grid-row: 3;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  border-radius: 14px;
+  background: rgba(12, 15, 22, 0.78);
+  padding: 10px;
+}
+
+.vr-context-tray header {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.vr-context-tray header strong {
+  color: #f8fafc;
+  font-size: 13px;
+}
+
+.vr-context-tray header button {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 8px;
+  background: transparent;
+  color: #9ca3af;
+}
+
+.vr-context-tray section {
+  min-width: 0;
+  display: grid;
+  gap: 7px;
+}
+
+.vr-context-tray section p {
+  margin: 0;
+  color: #9ca3af;
+  font-size: 11px;
+  font-weight: 720;
+}
+
+.vr-context-tray section > div {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.vr-context-tray section button {
+  min-width: 0;
+  min-height: 40px;
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0 8px;
+  border: 1px solid rgba(148, 163, 184, 0.13);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.025);
+  color: #e5e7eb;
+  padding: 8px 9px;
+  text-align: left;
+}
+
+.vr-context-tray section button:hover {
+  border-color: rgba(168, 85, 247, 0.36);
+  background: rgba(124, 58, 237, 0.08);
+}
+
+.vr-context-tray section button span {
+  grid-row: 1 / 3;
+  display: grid;
+  place-items: center;
+}
+
+.vr-context-tray section button span img,
+.vr-context-tray section button span svg {
+  width: 18px;
+  height: 18px;
+}
+
+.vr-context-tray section button strong,
+.vr-context-tray section button em {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr-context-tray section button strong {
+  font-size: 12px;
+}
+
+.vr-context-tray section button em {
+  color: #9ca3af;
+  font-size: 10.5px;
+  font-style: normal;
+}
+
+.vr-context-tray-empty {
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+.vr-composer-controls {
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.vr-composer-controls .vr-provider-drop-zone {
+  max-width: 300px;
+}
+
+.vr-composer-controls .vr-provider-drop-zone:not(.has-provider):not(.is-active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+.vr-composer-controls .vr-provider-drop-zone > .vr-provider-drop-label {
+  border-radius: 12px;
+}
+
+.vr-composer-controls .vr-model-picker {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  border: 1px solid rgba(148, 163, 184, 0.13);
+  border-radius: 14px;
+  background: rgba(15, 18, 27, 0.74);
+  overflow: visible;
+}
+
+.vr-composer-controls .vr-model-picker > button {
+  height: 46px;
+  min-width: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #d1d5db;
+  padding: 0 13px;
+}
+
+.vr-composer-controls .vr-model-picker > button + button {
+  border-left: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.vr-composer-controls .vr-model-picker > button span {
+  display: none;
+}
+
+.vr-composer-controls .vr-model-picker > button strong {
+  max-width: 150px;
+  color: #e5e7eb;
+  font-size: 12.5px;
+  font-weight: 650;
+}
+
+.vr-composer-controls .vr-model-picker > button:first-child,
+.vr-composer-controls .vr-model-picker > button:nth-child(3) {
+  display: none;
+}
+
+.vr-composer-controls .vr-model-picker > button:nth-child(2) {
+  min-width: 132px;
+}
+
+.vr-composer-controls .vr-model-picker > button:nth-child(4) {
+  max-width: 128px;
+}
+
+.vr-composer-controls .vr-model-picker > button:nth-child(4) strong {
+  max-width: 92px;
+}
+
+.vr-composer-controls .vr-model-picker > button i {
+  margin-left: 0;
+}
+
+.vr-composer-controls .vr-model-menu {
+  bottom: 54px;
+  right: 0;
+}
+
+.vr-composer-controls .vr-chat-send {
+  flex: 0 0 46px;
+  width: 46px;
+  height: 46px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(216, 180, 254, 0.48);
+  border-radius: 12px;
+  background: linear-gradient(135deg, #9f4df6, #7c3aed);
+  color: #f8fafc;
+  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 12px 28px rgba(0, 0, 0, 0.34);
+}
+
+.vr-composer-controls .vr-chat-send:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.16), 0 16px 32px rgba(0, 0, 0, 0.38);
+}
+
+.vr-composer-controls .vr-chat-send.is-stop {
+  border-color: rgba(248, 113, 113, 0.44);
+  background: rgba(239, 68, 68, 0.16);
+  color: #fecaca;
+  box-shadow: none;
+}
+
+.vr-composer-controls .vr-chat-send svg {
+  width: 19px;
+  height: 19px;
+  stroke-width: 2.2;
+}
+
+.vr-composer-controls .vr-chat-send.is-stop svg {
+  width: 17px;
+  height: 17px;
+}
+
+/* --- Compact chat chrome: keep the cockpit full-height without stealing transcript space. --- */
+.vr-composed-shell {
+  grid-template-rows: 42px minmax(0, 1fr);
+}
+
+.vr-studio-topbar {
+  min-height: 42px;
+  padding: 0 8px;
+}
+
+.vr-topbar-brand {
+  gap: 7px;
+}
+
+.vr-topbar-brand span {
+  width: 26px;
+  height: 26px;
+}
+
+.vr-topbar-brand strong {
+  font-size: 18px;
+}
+
+.vr-left-context-rail {
+  gap: 8px;
+}
+
+.vr-rail-launchers {
+  gap: 4px;
+  padding: 6px;
+}
+
+.vr-rail-launcher {
+  min-height: 38px;
+  grid-template-columns: 24px minmax(0, 1fr) 8px;
+  gap: 8px;
+  padding: 5px 6px;
+}
+
+.vr-rail-launcher i[data-icon] {
+  width: 22px;
+  height: 22px;
+  border-radius: 7px;
+}
+
+.vr-rail-launcher strong {
+  font-size: 12px;
+}
+
+.vr-rail-launcher em {
+  font-size: 10.5px;
+}
+
+.vr-recent-rail {
+  padding: 8px;
+}
+
+.vr-new-chat-button {
+  min-height: 38px;
+}
+
+.vr-recent-chat {
+  min-height: 46px;
+  padding: 8px;
+}
+
+.vr-composition-body,
+.vr-composition-body.has-inspector {
+  padding: 8px;
+  gap: 8px;
+}
+
+.vr-main-canvas {
+  padding: 6px;
+}
+
+.vr-studio-head {
+  min-height: 34px;
+  padding: 2px 2px 0;
+}
+
+.vr-studio-head h1 {
+  font-size: 17px;
+}
+
+.vr-studio-tabs button,
+.vr-studio-head-actions > button {
+  min-height: 32px;
+}
+
+.vr-cli-panel {
+  min-height: 42px;
+  padding: 6px;
+}
+
+.vr-studio-chat:not(.is-split) .vr-chat-transcript {
+  padding: clamp(12px, 2vh, 22px) clamp(20px, 4vw, 64px) 16px;
+}
+
+.vr-chat-intro-message {
+  margin-top: 0;
+}
+
+.vr-env-connect-card {
+  margin-top: 18px;
+}
+
+.vr-studio-chat:not(.is-split) .vr-chat-command-bar {
+  padding: 6px clamp(18px, 4vw, 62px) 8px;
+}
+
+.vr-studio-chat:not(.is-split) .vr-chat-command-bar > .vr-chat-composer,
+.vr-chat-command-bar > .vr-chat-composer {
+  min-height: 132px;
+  grid-template-rows: auto minmax(38px, 1fr) auto auto auto;
+  gap: 9px;
+  border-radius: 16px;
+  padding: 12px 14px;
+}
+
+.vr-chat-command-bar > .vr-chat-composer::before {
+  left: 18px;
+  right: 18px;
+  top: 54px;
+}
+
+.vr-composer-scope {
+  height: 34px;
+  gap: 8px;
+  padding: 0 10px;
+  font-size: 12.5px;
+}
+
+.vr-composer-scope i[data-icon],
+.vr-composer-scope i[data-icon] svg {
+  width: 15px;
+  height: 15px;
+}
+
+.vr-chat-command-bar .vr-chat-input {
+  min-height: 42px;
+  font-size: 14.5px;
+  line-height: 1.42;
+}
+
+.vr-chat-inline-actions {
+  gap: 6px;
+}
+
+.vr-chat-inline-actions > button,
+.vr-chat-command-trigger > button {
+  height: 34px;
+  gap: 7px;
+  border-radius: 9px;
+  padding: 0 10px;
+  font-size: 12.5px;
+}
+
+.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 {
+  width: 14px;
+  height: 14px;
+}
+
+.vr-composer-controls {
+  gap: 8px;
+}
+
+.vr-composer-controls .vr-model-picker {
+  border-radius: 12px;
+}
+
+.vr-composer-controls .vr-model-picker > button {
+  height: 38px;
+  padding: 0 11px;
+}
+
+.vr-composer-controls .vr-model-picker > button:nth-child(2) {
+  min-width: 116px;
+}
+
+.vr-composer-controls .vr-model-picker > button:nth-child(4) {
+  max-width: 150px;
+}
+
+.vr-composer-controls .vr-model-picker > button:nth-child(4) strong {
+  max-width: 120px;
+}
+
+.vr-composer-controls .vr-chat-send {
+  flex-basis: 40px;
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 10px 24px rgba(0, 0, 0, 0.32);
+}
+
+.vr-composer-controls .vr-chat-send svg {
+  width: 17px;
+  height: 17px;
+}
+
+/* --- Density and transcript repair pass --- */
+.vr-composed-shell {
+  grid-template-rows: 38px minmax(0, 1fr);
+}
+
+.vr-studio-topbar {
+  min-height: 38px;
+  padding: 0 6px;
+}
+
+.vr-topbar-brand span {
+  width: 22px;
+  height: 22px;
+}
+
+.vr-topbar-brand strong {
+  font-size: 16px;
+}
+
+.vr-composition-body,
+.vr-composition-body.has-inspector {
+  padding: 6px;
+  gap: 6px;
+}
+
+.vr-main-canvas {
+  padding: 4px;
+}
+
+.vr-studio-head {
+  min-height: 30px;
+  padding: 0;
+}
+
+.vr-studio-head h1 {
+  font-size: 16px;
+}
+
+.vr-studio-tabs button,
+.vr-studio-head-actions > button {
+  min-height: 30px;
+  padding-inline: 10px;
+}
+
+.vr-cli-panel {
+  min-height: 36px;
+  padding: 5px;
+}
+
+.vr-studio-chat:not(.is-split) .vr-chat-transcript {
+  gap: 10px;
+  padding: 10px clamp(18px, 4vw, 54px) 12px;
+}
+
+.vr-story-node {
+  column-gap: 12px;
+}
+
+.vr-story-dot {
+  width: 24px;
+  height: 24px;
+}
+
+.vr-story-node.is-user .vr-chat-message.is-user {
+  min-height: 66px;
+  padding: 12px 16px 12px 56px;
+  border-color: rgba(124, 58, 237, 0.28);
+  border-radius: 13px;
+  background:
+    radial-gradient(circle at 96% 16%, rgba(124, 58, 237, 0.08), transparent 140px),
+    rgba(16, 18, 27, 0.88);
+}
+
+.vr-story-node.is-user .vr-chat-message.is-user::after {
+  left: 20px;
+  top: 22px;
+  width: 16px;
+  height: 16px;
+  border-color: rgba(168, 85, 247, 0.55);
+  border-radius: 999px;
+  background: radial-gradient(circle at 50% 50%, #a78bfa 0 3px, rgba(124, 58, 237, 0.18) 4px 100%);
+  box-shadow: 0 0 16px rgba(124, 58, 237, 0.2);
+}
+
+.vr-story-node.is-user .vr-chat-message.is-user::before {
+  margin-bottom: 6px;
+  font-size: 10px;
+}
+
+.vr-story-node.is-user .vr-chat-message.is-user > p {
+  font-size: 15px;
+  font-weight: 720;
+}
+
+.vr-chat-agent-response {
+  width: min(820px, 100%);
+  padding: 12px 14px;
+  border-radius: 13px;
+}
+
+.vr-chat-agent-response > div:first-child {
+  gap: 9px;
+  padding-bottom: 7px;
 }
-.vr-modal-health-line {
-  flex-wrap: wrap;
-  align-items: center;
-  line-height: 1.4;
-  font-size: 12.5px;
+
+.vr-chat-agent-response > div:first-child > span {
+  width: 34px;
+  height: 34px;
 }
-.vr-modal-health-line .vr-modal-pill {
-  flex-shrink: 0;
+
+.vr-chat-agent-response > div:first-child img {
+  width: 43px;
+  height: 43px;
+  transform: translateY(6px);
 }
-.vr-mcp-connect-btn {
-  border: 1px solid rgba(124, 58, 237, 0.5);
-  border-radius: 999px;
-  background: rgba(124, 58, 237, 0.1);
-  color: var(--vr-text);
-  font-size: 12px;
-  font-weight: 600;
-  padding: 6px 14px;
-  cursor: pointer;
+
+.vr-chat-agent-response > div:first-child p strong {
+  font-size: 15px;
 }
 
-/* Quickstart */
-.vr-qs-steps {
-  display: grid;
+.vr-chat-agent-response .vr-agent-response-meta {
+  margin: 0 0 8px 43px;
   gap: 8px;
-  margin-top: 16px;
 }
-.vr-qs-step {
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 14px;
-  padding: 13px 16px;
-  border: 1px solid rgba(148, 163, 184, 0.14);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.02);
+
+.vr-chat-agent-response .vr-agent-context-line,
+.vr-chat-agent-response .vr-agent-response-stack {
+  margin-left: 43px;
 }
-.vr-qs-step.is-done {
-  opacity: 0.72;
+
+.vr-chat-agent-response .vr-agent-answer-body > p:first-child {
+  font-size: 13.5px;
 }
-.vr-qs-num {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border: 1px solid rgba(148, 163, 184, 0.3);
-  border-radius: 50%;
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--vr-muted);
+
+.vr-chat-mission-summary {
+  width: min(720px, 100%);
+  padding-left: 43px;
 }
-.vr-qs-step.is-done .vr-qs-num {
-  border-color: rgba(34, 197, 94, 0.5);
-  color: var(--vr-green);
+
+.vr-chat-mission-summary .vr-chat-blockers-card {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
+  gap: 8px;
+  overflow: hidden;
+  padding: 12px;
+  box-sizing: border-box;
 }
-.vr-qs-num svg { width: 13px; height: 13px; }
-.vr-qs-step strong { display: block; font-size: 14px; }
-.vr-qs-step em { display: block; font-size: 12px; font-style: normal; color: var(--vr-muted); }
-.vr-qs-step > b {
+
+.vr-chat-blockers-card header {
+  grid-column: 1 / -1;
+  padding-bottom: 2px;
+}
+
+.vr-chat-blockers-card header strong {
+  font-size: 15px;
+}
+
+.vr-chat-blockers-card header b {
+  padding: 3px 8px;
   font-size: 11px;
-  font-weight: 650;
-  color: var(--vr-green);
-  border: 1px solid rgba(34, 197, 94, 0.4);
-  border-radius: 999px;
-  padding: 3px 11px;
 }
-.vr-qs-step > button {
-  border: 1px solid rgba(124, 58, 237, 0.55);
-  border-radius: 999px;
-  background: rgba(124, 58, 237, 0.12);
-  color: var(--vr-text);
-  font-size: 12.5px;
-  font-weight: 650;
-  padding: 7px 16px;
-  cursor: pointer;
+
+.vr-chat-mission-summary .vr-chat-blockers-card > span {
+  min-height: 62px;
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 8px;
+  padding: 10px 10px 28px;
+  box-sizing: border-box;
 }
-.vr-qs-step > button:hover { background: rgba(124, 58, 237, 0.2); }
-.vr-qs-foot {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-top: 16px;
+
+.vr-chat-blockers-card > span i {
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
 }
-.vr-qs-foot button {
-  border: 0;
-  background: transparent;
-  color: var(--vr-muted);
+
+.vr-chat-blockers-card > span em {
   font-size: 12px;
-  text-decoration: underline;
-  cursor: pointer;
+  line-height: 1.28;
 }
-.vr-qs-foot span { font-size: 12px; color: var(--vr-muted); }
 
-/* --- Claude-style composer: one + button, actions on demand, air. --- */
-.vr-chat-plus {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  border: 1px solid rgba(148, 163, 184, 0.25);
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--vr-muted);
-  cursor: pointer;
-  transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
+.vr-chat-blockers-card > span small {
+  margin-top: 4px;
+  font-size: 11px;
+  line-height: 1.3;
 }
-.vr-chat-plus:hover {
-  border-color: rgba(124, 58, 237, 0.55);
-  color: var(--vr-text);
+
+.vr-chat-blockers-card > span b {
+  right: 10px;
+  bottom: 8px;
+  padding: 2px 7px;
+  font-size: 10px;
 }
-.vr-chat-plus.is-open {
-  border-color: rgba(124, 58, 237, 0.55);
-  color: var(--vr-text);
-  transform: rotate(0deg);
+
+.vr-chat-command-bar > .vr-chat-composer,
+.vr-studio-chat:not(.is-split) .vr-chat-command-bar > .vr-chat-composer {
+  min-height: 118px;
+  padding: 10px 12px;
 }
-.vr-chat-plus svg {
-  width: 14px;
-  height: 14px;
+
+.vr-composer-controls .vr-chat-send {
+  flex-basis: 38px;
+  width: 38px;
+  height: 38px;
 }
-.vr-chat-inline-actions.is-collapsed {
-  overflow: visible;
-  padding: 6px 0 10px;
+
+.vr-composer-controls .vr-chat-send.is-stop {
+  border-color: rgba(216, 180, 254, 0.52);
+  background: linear-gradient(135deg, #9b5cf6, #6d28d9);
+  color: #f5f3ff;
+  box-shadow:
+    0 0 0 4px rgba(124, 58, 237, 0.13),
+    0 14px 34px rgba(88, 28, 135, 0.34);
 }
-.vr-chat-inline-actions {
+
+.vr-composer-controls .vr-chat-send.is-stop svg {
+  width: 17px;
+  height: 17px;
+  display: block;
+  stroke-width: 2.35;
+}
+
+.vr-composer-controls .vr-chat-send.is-stop svg rect {
+  x: 6.75px;
+  y: 6.75px;
+  width: 10.5px;
+  height: 10.5px;
+  rx: 2.25px;
+  fill: currentColor;
+  stroke: none;
+}
+
+/* --- Worktree commit action polish --- */
+.vr-branch-row.is-dirty {
+  border-color: rgba(249, 115, 22, 0.22);
+  background:
+    linear-gradient(90deg, rgba(249, 115, 22, 0.09), rgba(124, 58, 237, 0.035)),
+    rgba(255, 255, 255, 0.02);
+}
+
+.vr-branch-row.is-dirty b {
+  display: inline-flex;
   align-items: center;
+  justify-content: center;
+  min-width: 66px;
+  min-height: 24px;
+  padding: 0 12px;
+  border-color: rgba(216, 180, 254, 0.34);
+  background: rgba(124, 58, 237, 0.15);
+  color: #ddd6fe;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
-/* Breathing room in the chat lane. */
-.vr-chat-transcript {
-  padding: 14px 16px 10px;
+.vr-branch-row.is-dirty:hover b {
+  border-color: rgba(216, 180, 254, 0.52);
+  background: rgba(124, 58, 237, 0.22);
 }
-.vr-chat-command-bar {
-  gap: 8px;
-  padding: 10px 14px 14px;
+
+.vr-inspector-warning button,
+.vr-wt-dirty button {
+  min-height: 32px;
+  border-color: rgba(216, 180, 254, 0.34);
+  border-radius: 10px;
+  background: rgba(124, 58, 237, 0.14);
+  color: #ede9fe;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
-.vr-chat-command-bar > .vr-chat-composer {
-  border-radius: 18px;
-  padding: 14px 16px;
+
+.vr-inspector-warning button:hover,
+.vr-wt-dirty button:hover {
+  border-color: rgba(216, 180, 254, 0.52);
+  background: rgba(124, 58, 237, 0.22);
+}
+
+@media (max-width: 760px) {
+  .vr-chat-command-bar > .vr-chat-composer {
+    min-height: 156px;
+    padding: 14px;
+  }
+  .vr-composer-bottom,
+  .vr-composer-controls {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .vr-chat-inline-actions {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .vr-context-tray {
+    grid-template-columns: 1fr;
+  }
+  .vr-context-tray section > div {
+    grid-template-columns: 1fr;
+  }
+  .vr-chat-inline-actions > button {
+    justify-content: center;
+    padding: 0 8px;
+  }
+  .vr-composer-controls .vr-model-picker {
+    width: 100%;
+  }
+  .vr-composer-controls .vr-model-picker > button:nth-child(2) {
+    flex: 1;
+  }
+  .vr-composer-controls .vr-chat-send {
+    align-self: flex-end;
+  }
+  .vr-env-connect-card {
+    width: 100%;
+    margin-left: 0;
+    padding: 16px;
+  }
+  .vr-chat-intro-message {
+    width: 100%;
+    max-width: 100%;
+  }
+  .vr-env-connect-card > div {
+    grid-template-columns: 1fr;
+  }
+  .vr-env-connect-steps {
+    grid-template-columns: 1fr;
+  }
+  .vr-chat-intro-message > p {
+    padding-left: 0;
+  }
 }
 `;
   }
@@ -30230,9 +32920,9 @@ function renderLocalUiHtml(state) {
     <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" sizes="64x64" href="/report/assets/viberaven-favicon.png" />
-    <link rel="shortcut icon" type="image/png" href="/report/assets/viberaven-favicon.png" />
-    <link rel="apple-touch-icon" href="/report/assets/viberaven-mascot.png" />
+    <link rel="icon" type="image/png" href="/report/assets/viberaven-mascot.png?v=mascot" />
+    <link rel="shortcut icon" type="image/png" href="/report/assets/viberaven-mascot.png?v=mascot" />
+    <link rel="apple-touch-icon" href="/report/assets/viberaven-mascot.png?v=mascot" />
     <style>${localUiCss}</style>
   </head>
   <body>
@@ -30251,6 +32941,25 @@ var init_appHtml = __esm({
 });
 
 // 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) {
@@ -31685,13 +34394,25 @@ async function handleRequest(request, response, options) {
       return;
     }
     const command = isRecord4(body) ? stringField(body.command, 400) : void 0;
+    const requestedCliId = isRecord4(body) && (body.cliId === "codex" || body.cliId === "claude" || body.cliId === "gemini") ? body.cliId : void 0;
     if (!command) {
       sendText(response, 400, "Missing command");
       return;
     }
-    const result = await runShellCommand(command, options.cwd, 12e4);
+    const approvedCommand = resolveApprovedShellCommand(command, requestedCliId);
+    if (!approvedCommand) {
+      sendJsonStatus(response, 403, {
+        ok: false,
+        message: "Studio shell is restricted to agent setup commands (install/sign-in) only."
+      });
+      return;
+    }
+    const result = await runShellCommand(approvedCommand.command, options.cwd, 12e4);
     sendJson(response, {
-      command,
+      ok: true,
+      command: approvedCommand.command,
+      cliId: approvedCommand.cliId,
+      step: approvedCommand.step,
       exitCode: result.exitCode,
       output: result.output,
       message: result.exitCode === 0 ? "Command finished." : "Command finished with a non-zero exit code."