voyageai-cli 1.30.1 → 1.30.3

package/src/playground/index.html

@@ -1089,6 +1089,494 @@ select:focus { outline: none; border-color: var(--accent); }
   display: none;
 }
 
+/* ── Models Tab ── */
+.models-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+.models-filter-pills {
+  display: flex;
+  gap: 6px;
+}
+.models-filter-pill {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.models-filter-pill:hover {
+  border-color: var(--accent);
+  color: var(--text);
+}
+.models-filter-pill.active {
+  background: rgba(0, 212, 170, 0.12);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.models-hero {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(135deg, rgba(0, 212, 170, 0.06), rgba(64, 224, 255, 0.06));
+  border: 1px solid rgba(0, 212, 170, 0.2);
+  margin-bottom: 24px;
+}
+.models-hero-shape {
+  position: absolute;
+  top: -30px;
+  right: -30px;
+  width: 200px;
+  height: 200px;
+  pointer-events: none;
+  z-index: 0;
+}
+.models-hero-content {
+  position: relative;
+  z-index: 1;
+}
+.models-hero-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #00D4AA, #40E0FF);
+  color: #001E2B;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+}
+.models-hero-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 8px;
+}
+.models-hero-desc {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.6;
+  max-width: 700px;
+  margin-bottom: 14px;
+}
+.models-hero-models {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.model-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 12px;
+  font-family: var(--mono);
+  color: var(--text);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.model-chip:hover {
+  border-color: var(--accent);
+  background: rgba(0, 212, 170, 0.06);
+}
+.model-chip-price {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+.models-group {
+  margin-bottom: 24px;
+}
+.models-group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.models-group-icon {
+  color: var(--accent);
+  opacity: 0.8;
+}
+.models-group-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+}
+.models-group-count {
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1px 8px;
+}
+.models-group-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 14px;
+}
+.model-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+  cursor: default;
+  transition: all 0.2s;
+  position: relative;
+  overflow: hidden;
+}
+.model-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 212, 170, 0.1);
+}
+.model-card.legacy {
+  opacity: 0.5;
+}
+.model-card.legacy:hover {
+  opacity: 0.7;
+}
+.model-card-nebula {
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 140px;
+  height: 140px;
+  pointer-events: none;
+  z-index: 0;
+}
+.model-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  position: relative;
+  z-index: 1;
+}
+.model-card-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  font-family: var(--mono);
+}
+.model-card-type-badge {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  font-weight: 600;
+}
+.model-card-type-badge.embedding {
+  background: rgba(0, 212, 170, 0.15);
+  color: #00D4AA;
+}
+.model-card-type-badge.reranking {
+  background: rgba(64, 224, 255, 0.15);
+  color: #40E0FF;
+}
+.model-card-type-badge.multimodal {
+  background: rgba(255, 170, 64, 0.15);
+  color: #FFAA40;
+}
+.model-card-shared-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  color: var(--blue, #40E0FF);
+  margin-bottom: 6px;
+  position: relative;
+  z-index: 1;
+}
+.model-card-rteb {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--accent);
+  font-family: var(--mono);
+  z-index: 1;
+}
+.model-card-desc {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-bottom: 12px;
+  position: relative;
+  z-index: 1;
+}
+.model-card-specs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px 16px;
+  font-size: 12px;
+  position: relative;
+  z-index: 1;
+}
+.model-card-spec {
+  display: flex;
+  justify-content: space-between;
+}
+.model-card-spec-label {
+  color: var(--text-muted);
+}
+.model-card-spec-value {
+  color: var(--text);
+  font-family: var(--mono);
+  font-weight: 500;
+}
+.model-card-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 12px;
+  position: relative;
+  z-index: 1;
+}
+.model-card-action {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font-family: var(--font);
+  transition: all 0.15s;
+}
+.model-card-action:hover {
+  background: rgba(0, 212, 170, 0.1);
+  border-color: var(--accent);
+}
+.models-rteb-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.models-rteb-label {
+  min-width: 160px;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.models-rteb-track {
+  flex: 1;
+  height: 24px;
+  background: var(--bg-surface);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.models-rteb-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.6s ease-out;
+}
+.models-rteb-score {
+  min-width: 50px;
+  text-align: right;
+  font-family: var(--mono);
+  font-weight: 600;
+  font-size: 13px;
+}
+
+/* ── Model Picker Overlay ── */
+.model-picker-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+.model-picker-overlay.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.model-picker {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  width: 480px;
+  max-width: 90vw;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+.model-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.model-picker-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+}
+.model-picker-context {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.model-picker-close {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 22px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+.model-picker-close:hover {
+  color: var(--text);
+}
+.model-picker-search {
+  padding: 12px 20px;
+}
+.model-picker-search input {
+  width: 100%;
+  background: var(--bg-input, var(--bg-surface));
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-family: var(--font);
+}
+.model-picker-recommendation {
+  padding: 0 20px 8px;
+  font-size: 12px;
+  color: var(--blue, #40E0FF);
+  display: none;
+}
+.model-picker-recommendation.visible {
+  display: block;
+}
+.model-picker-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 12px 12px;
+}
+.model-picker-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.1s;
+  border: 1px solid transparent;
+}
+.model-picker-item:hover,
+.model-picker-item:focus {
+  background: rgba(0, 212, 170, 0.06);
+  border-color: var(--border);
+  outline: none;
+}
+.model-picker-item.selected {
+  background: rgba(0, 212, 170, 0.1);
+  border-color: var(--accent);
+}
+.model-picker-item-radio {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border);
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 2px;
+  transition: all 0.15s;
+}
+.model-picker-item.selected .model-picker-item-radio {
+  border-color: var(--accent);
+  background: var(--accent);
+  box-shadow: inset 0 0 0 3px var(--bg-card);
+}
+.model-picker-item-info {
+  flex: 1;
+  min-width: 0;
+}
+.model-picker-item-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  font-family: var(--mono);
+}
+.model-picker-item-meta {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+.model-picker-item-tags {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+  flex-wrap: wrap;
+}
+.model-picker-item-tag {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: rgba(0, 212, 170, 0.08);
+  color: var(--accent);
+}
+.model-picker-item-shared {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: rgba(64, 224, 255, 0.1);
+  color: var(--blue, #40E0FF);
+}
+.model-picker-footer {
+  padding: 10px 20px;
+  border-top: 1px solid var(--border);
+  text-align: center;
+  font-size: 12px;
+}
+.model-picker-footer a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.model-picker-footer a:hover {
+  text-decoration: underline;
+}
+.model-picker-trigger {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 4px;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  margin-left: 4px;
+}
+.model-picker-trigger:hover {
+  color: var(--accent);
+  background: rgba(0, 212, 170, 0.08);
+  border-color: var(--accent);
+}
+[data-theme="light"] .model-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
 /* Explore modal */
 .explore-modal-overlay {
   position: fixed;
@@ -4029,24 +4517,39 @@ select:focus { outline: none; border-color: var(--accent); }
   cursor: help;
 }
 .wf-validation-bar {
-  position: fixed;
-  top: 44px;
-  left: 260px;
-  right: 0;
+  position: absolute;
+  top: 52px;
+  left: 12px;
+  right: 12px;
   height: 28px;
   background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+  border: 1px solid var(--border);
+  border-radius: 6px;
   display: none;
   align-items: center;
-  padding: 0 16px;
+  padding: 0 12px;
   font-size: 12px;
-  z-index: 50;
+  z-index: 9;
   cursor: pointer;
   transition: background-color 0.15s;
 }
 .wf-validation-bar:hover {
   background: var(--bg-card);
 }
+.wf-validation-bar .wf-validation-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 4px;
+  opacity: 0.6;
+  line-height: 1;
+}
+.wf-validation-bar .wf-validation-close:hover {
+  opacity: 1;
+}
 .wf-validation-bar.warning {
   color: #FFB74D;
   border-bottom-color: #FFB74D;
@@ -4200,6 +4703,54 @@ select:focus { outline: none; border-color: var(--accent); }
   border-radius: 6px; padding: 8px; overflow-x: auto;
   white-space: pre-wrap; color: var(--text); margin-top: 4px;
 }
+/* Output format selector and rich rendering */
+.wf-output-format-select {
+  font-size: 11px; padding: 2px 6px; border-radius: 4px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  color: var(--text); cursor: pointer; margin-left: 8px;
+}
+.wf-output-format-select:hover { border-color: var(--accent); }
+.wf-output-table {
+  width: 100%; border-collapse: collapse; font-size: 11px;
+  color: var(--text); margin-top: 8px;
+}
+.wf-output-table th {
+  text-align: left; padding: 6px 8px; font-weight: 600;
+  border-bottom: 1px solid var(--accent); color: var(--accent);
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
+}
+.wf-output-table td {
+  padding: 5px 8px; border-bottom: 1px solid var(--border);
+  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px;
+}
+.wf-output-table tr:hover td { background: rgba(0,212,170,0.05); }
+.wf-output-markdown {
+  font-size: 12px; line-height: 1.5; color: var(--text); padding: 8px;
+}
+.wf-output-markdown h2, .wf-output-markdown h3 {
+  color: var(--accent); margin-top: 12px; margin-bottom: 4px;
+}
+.wf-output-markdown table {
+  border-collapse: collapse; width: 100%; margin: 8px 0;
+}
+.wf-output-markdown th, .wf-output-markdown td {
+  border: 1px solid var(--border); padding: 4px 8px; font-size: 11px;
+}
+.wf-output-text-field { margin-bottom: 12px; }
+.wf-output-text-label {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  color: var(--accent); letter-spacing: 0.5px; margin-bottom: 2px;
+}
+.wf-output-text-value {
+  font-size: 12px; color: var(--text); line-height: 1.5; white-space: pre-wrap;
+}
+.wf-output-metric {
+  display: inline-block; margin-right: 16px; margin-bottom: 6px;
+}
+.wf-output-metric-val {
+  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px;
+  color: #40E0FF; font-weight: 600;
+}
 .wf-tool-badge {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 2px 8px; border-radius: 10px; font-size: 11px;
@@ -5754,6 +6305,7 @@ select:focus { outline: none; border-color: var(--accent); }
     <div class="sidebar-nav-divider"></div>
     <div class="sidebar-nav-group" role="tablist" aria-label="Learn">
       <div class="sidebar-nav-label" id="nav-learn-label">Learn</div>
+      <button class="tab-btn" data-tab="models" data-tooltip="Models" role="tab" aria-selected="false" aria-controls="tab-models" id="tab-btn-models"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-bot"/></svg></span><span>Models</span></button>
       <button class="tab-btn" data-tab="benchmark" data-tooltip="Benchmark" role="tab" aria-selected="false" aria-controls="tab-benchmark" id="tab-btn-benchmark"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-gauge"/></svg></span><span>Benchmark</span></button>
       <button class="tab-btn" data-tab="explore" data-tooltip="Explore" role="tab" aria-selected="false" aria-controls="tab-explore" id="tab-btn-explore"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-bulb"/></svg></span><span>Explore</span></button>
       <button class="tab-btn" data-tab="about" data-tooltip="About" role="tab" aria-selected="false" aria-controls="tab-about" id="tab-btn-about"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-info"/></svg></span><span>About</span></button>
@@ -6150,12 +6702,12 @@ Semantic search understands meaning beyond keyword matching</textarea>
 <div class="tab-panel" id="tab-multimodal" role="tabpanel" aria-labelledby="tab-btn-multimodal" tabindex="0">
   <div class="page-header">
     <h2 class="page-header-title">Multimodal</h2>
-    <p class="page-header-subtitle">Compare images and text in the same vector space</p>
-    <p class="page-header-hint">Voyage AI's multimodal models embed images and text into a unified vector space, so you can compare them directly with cosine similarity.</p>
+    <p class="page-header-subtitle">Compare images, video, and text in the same vector space</p>
+    <p class="page-header-hint">Voyage AI's multimodal models embed images, video, and text into a unified vector space, so you can compare them directly with cosine similarity.</p>
     <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/embeddings/embed" target="_blank" rel="noopener" title="Multimodal embedding documentation"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/></svg>Docs</a>
   </div>
 
-  <!-- Section A: Image ↔ Text Similarity -->
+  <!-- Section A: Image / Video ↔ Text Similarity -->
   <div class="mm-grid">
     <div class="card">
       <div class="card-title">Image</div>
@@ -6171,9 +6723,23 @@ Semantic search understands meaning beyond keyword matching</textarea>
         <button class="mm-clear-btn" onclick="clearMultimodalImage()">✕ Clear</button>
       </div>
     </div>
+    <div class="card">
+      <div class="card-title">Video</div>
+      <div class="mm-drop-zone" id="mmVideoDropZone">
+        <div class="mm-drop-icon">🎬</div>
+        <div class="mm-drop-text">Drop a video here or click to browse</div>
+        <div class="mm-drop-hint">MP4, WebM, MOV, max 20 MB</div>
+      </div>
+      <input type="file" id="mmVideoFileInput" accept="video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-matroska" style="display:none">
+      <div class="mm-preview" id="mmVideoPreview">
+        <video id="mmPreviewVideo" controls style="max-width:100%;max-height:240px;border-radius:8px;background:#000;"></video>
+        <div class="mm-file-info" id="mmVideoFileInfo"></div>
+        <button class="mm-clear-btn" onclick="clearMultimodalVideo()">✕ Clear</button>
+      </div>
+    </div>
     <div class="card">
       <div class="card-title">Text</div>
-      <textarea id="mmText" rows="8" placeholder="Describe what you see, or enter any text to compare against the image..."></textarea>
+      <textarea id="mmText" rows="8" placeholder="Describe what you see, or enter any text to compare against the media..."></textarea>
     </div>
   </div>
 
@@ -6474,9 +7040,9 @@ Reranking models rescore initial search results to improve relevance ordering.</
       <div style="margin-top:16px;padding:12px;background:var(--accent-glow);border-radius:8px;border-left:3px solid var(--accent);">
         <strong style="color:var(--accent);">💡 Pro Tip: Asymmetric Retrieval</strong>
         <p style="margin:8px 0 0 0;font-size:13px;color:var(--text);">
-          Embed your document corpus with <code style="background:var(--surface);padding:2px 6px;border-radius:4px;">voyage-3-lite</code> ($0.02/M) and 
-          query with <code style="background:var(--surface);padding:2px 6px;border-radius:4px;">voyage-3</code> ($0.06/M). 
-          Because all Voyage-3 models share the same embedding space, you get top-tier retrieval quality at a fraction of the cost.
+          Embed your document corpus with <code style="background:var(--surface);padding:2px 6px;border-radius:4px;">voyage-4-lite</code> ($0.02/M) and
+          query with <code style="background:var(--surface);padding:2px 6px;border-radius:4px;">voyage-4</code> ($0.06/M).
+          Because all Voyage 4 models share the same embedding space, you get top-tier retrieval quality at a fraction of the cost.
         </p>
       </div>
     </div>
@@ -6489,8 +7055,8 @@ Reranking models rescore initial search results to improve relevance ordering.</
           <div style="font-size:20px;margin-bottom:8px;">🔗</div>
           <div style="font-weight:600;margin-bottom:4px;">Shared Embedding Space</div>
           <div style="font-size:13px;color:var(--text-dim);">
-            All Voyage-3 models produce compatible embeddings. Mix <code>voyage-3-large</code> for queries 
-            with <code>voyage-3-lite</code> for documents — they work together seamlessly.
+            All Voyage 4 models produce compatible embeddings. Mix <code>voyage-4-large</code> for queries
+            with <code>voyage-4-lite</code> for documents, and they work together seamlessly.
           </div>
         </div>
         <div style="padding:16px;background:var(--surface);border-radius:8px;border:1px solid var(--border);">
@@ -6818,6 +7384,9 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <button onclick="wfZoom(1)" title="Zoom in">+</button>
         <button onclick="wfZoom(-1)" title="Zoom out">&minus;</button>
         <button onclick="wfFitToView()" title="Fit to view">&#8862;</button>
+        <button onclick="wfRelayout()" title="Auto-layout (reorder nodes to minimize crossings)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><line x1="10" y1="6.5" x2="14" y2="6.5"/><line x1="10" y1="17.5" x2="14" y2="17.5"/></svg>
+        </button>
         <button onclick="wfResetExecution()" title="Reset">&#8635;</button>
         <span class="wf-toolbar-sep"></span>
         <button class="wf-plan-btn" onclick="wfDryRun()" id="wfDryRunBtn" disabled title="Dry run: show execution plan">&#9881; Plan</button>
@@ -6837,6 +7406,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
       <!-- Draft validation status bar -->
       <div class="wf-validation-bar" id="wfValidationBar">
         <span id="wfValidationBarText"></span>
+        <button class="wf-validation-close" onclick="event.stopPropagation(); document.getElementById('wfValidationBar').style.display='none';" title="Dismiss">&times;</button>
       </div>
       <!-- Edge handles for collapsed panels -->
       <div class="wf-edge-handle wf-edge-handle--left" id="wfEdgeHandleLeft" onclick="wfToggleLibrary()" title="Expand library">&#x203A;</div>
@@ -7112,7 +7682,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
               <option value="voyage-4-large">voyage-4-large</option>
               <option value="voyage-4">voyage-4</option>
               <option value="voyage-4-lite">voyage-4-lite</option>
-              <option value="voyage-3-large">voyage-3-large</option>
+              <option value="voyage-code-3">voyage-code-3</option>
             </select>
           </label>
           <label>
@@ -7233,6 +7803,54 @@ Reranking models rescore initial search results to improve relevance ordering.</
   </div>
 </div>
 
+<!-- ========== MODELS TAB ========== -->
+<div class="tab-panel" id="tab-models" role="tabpanel" aria-labelledby="tab-btn-models" tabindex="0">
+  <div class="page-header">
+    <h2 class="page-header-title">Models</h2>
+    <p class="page-header-subtitle">Voyage AI model showcase</p>
+    <p class="page-header-hint">Explore all Voyage AI models, compare specs, and find the right model for your use case.</p>
+    <a class="page-header-docs" href="https://docs.voyageai.com/docs/embeddings" target="_blank" rel="noopener" title="Voyage AI model docs"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/></svg>Docs</a>
+  </div>
+
+  <!-- Search + Filter -->
+  <div class="models-toolbar">
+    <input type="text" id="modelsSearch" placeholder="Search models..." oninput="filterModels()" style="max-width:280px;" aria-label="Search models">
+    <div class="models-filter-pills" id="modelsFilterPills">
+      <button class="models-filter-pill active" data-filter="all" onclick="setModelFilter('all')">All</button>
+      <button class="models-filter-pill" data-filter="embedding" onclick="setModelFilter('embedding')">Embedding</button>
+      <button class="models-filter-pill" data-filter="reranking" onclick="setModelFilter('reranking')">Reranking</button>
+      <button class="models-filter-pill" data-filter="multimodal" onclick="setModelFilter('multimodal')">Multimodal</button>
+    </div>
+  </div>
+
+  <!-- Shared Embedding Space Hero -->
+  <div class="models-hero card" id="modelsHero">
+    <div class="models-hero-shape" id="modelsHeroShape"></div>
+    <div class="models-hero-content">
+      <div class="models-hero-badge">Voyage 4 Family</div>
+      <div class="models-hero-title">Shared Embedding Space</div>
+      <div class="models-hero-desc">
+        voyage-4-large, voyage-4, and voyage-4-lite produce compatible embeddings in the same vector space.
+        Index documents with the large model for best quality, then query with the lite model at a fraction of the cost.
+        No re-indexing required.
+      </div>
+      <div class="models-hero-models" id="modelsHeroModels"></div>
+    </div>
+  </div>
+
+  <!-- Model Groups (dynamically rendered) -->
+  <div id="modelsGroups"></div>
+
+  <!-- RTEB Benchmark Chart -->
+  <div class="card" id="modelsRtebCard" style="margin-top:24px;">
+    <div class="card-title">RTEB Retrieval Benchmark (NDCG@10)</div>
+    <p style="color:var(--text-dim);font-size:13px;margin-bottom:16px;">
+      Industry-standard benchmark for retrieval quality across 29 datasets. Higher is better.
+    </p>
+    <div id="modelsRtebChart"></div>
+  </div>
+</div>
+
 <!-- ========== EXPLORE TAB ========== -->
 <div class="tab-panel" id="tab-explore" role="tabpanel" aria-labelledby="tab-btn-explore" tabindex="0">
   <div class="page-header">
@@ -7263,9 +7881,30 @@ Reranking models rescore initial search results to improve relevance ordering.</
   </div>
 </div>
 
-<!-- Hidden global model select (used by JS for model sync) -->
-<select id="globalModel" style="display:none;"></select>
-
+<!-- Hidden global model select (used by JS for model sync) -->
+<select id="globalModel" style="display:none;"></select>
+
+<!-- ========== MODEL PICKER OVERLAY ========== -->
+<div class="model-picker-overlay" id="modelPickerOverlay" role="dialog" aria-modal="true" aria-labelledby="modelPickerTitle">
+  <div class="model-picker">
+    <div class="model-picker-header">
+      <div>
+        <div class="model-picker-title" id="modelPickerTitle">Choose a Model</div>
+        <div class="model-picker-context" id="modelPickerContext"></div>
+      </div>
+      <button class="model-picker-close" id="modelPickerClose" aria-label="Close">&times;</button>
+    </div>
+    <div class="model-picker-search">
+      <input type="text" id="modelPickerSearch" placeholder="Search models..." oninput="filterModelPicker()" aria-label="Search models">
+    </div>
+    <div class="model-picker-recommendation" id="modelPickerRecommendation"></div>
+    <div class="model-picker-list" id="modelPickerList" role="listbox"></div>
+    <div class="model-picker-footer">
+      <a href="#" onclick="event.preventDefault(); closeModelPicker(); switchTab('models');">View all models in catalog</a>
+    </div>
+  </div>
+</div>
+
 <!-- ========== SETTINGS TAB ========== -->
 <div class="tab-panel" id="tab-settings">
   <div class="settings-layout">
@@ -8063,6 +8702,7 @@ async function init() {
   await loadConfig();
   await Promise.all([loadModels(), loadConcepts()]);
   populateModelSelects();
+  enhanceModelSelects();
   buildExploreCards();
 
   // Apply default tab setting
@@ -8146,6 +8786,9 @@ function switchTab(tab) {
   if (tab === 'home') {
     homeInit();
   }
+  if (tab === 'models') {
+    modelsInit();
+  }
 }
 // Expose globally so Electron main process can call it
 window.switchTab = switchTab;
@@ -9541,6 +10184,393 @@ window.filterExplore = function() {
   });
 };
 
+// ── Models Tab ──
+let modelsTabData = {
+  catalog: null,
+  benchmarks: null,
+  currentFilter: 'all',
+  initialized: false
+};
+
+async function loadModelsCatalog() {
+  if (modelsTabData.catalog) return;
+  try {
+    const res = await fetch('/api/models/catalog');
+    const data = await res.json();
+    modelsTabData.catalog = data.models || [];
+    modelsTabData.benchmarks = data.benchmarks || [];
+  } catch {
+    modelsTabData.catalog = allModels;
+    modelsTabData.benchmarks = [];
+  }
+}
+
+function modelsInit() {
+  if (modelsTabData.initialized) return;
+  modelsTabData.initialized = true;
+  loadModelsCatalog().then(() => {
+    renderModelsHero();
+    renderModelsGroups();
+    renderModelsRtebChart();
+  });
+}
+
+function renderModelsHero() {
+  const heroModels = document.getElementById('modelsHeroModels');
+  const sharedModels = (modelsTabData.catalog || []).filter(
+    m => m.sharedSpace === 'voyage-4' && !m.legacy && !m.unreleased
+  );
+  heroModels.innerHTML = sharedModels.map(m =>
+    '<div class="model-chip" onclick="scrollToModelCard(\'' + m.name + '\')">' +
+      '<span>' + escapeHtml(m.name) + '</span>' +
+      '<span class="model-chip-price">' + escapeHtml(m.price) + '</span>' +
+    '</div>'
+  ).join('');
+
+  const shapeEl = document.getElementById('modelsHeroShape');
+  if (shapeEl && !shapeEl.innerHTML) {
+    shapeEl.innerHTML = generateNebulaSVG(200, 200, 900, {variant: 'rich', opacity: 0.08});
+  }
+}
+
+function getModelGroups(models) {
+  const groups = [
+    {
+      id: 'voyage-4',
+      title: 'Voyage 4 Flagship',
+      icon: LI.zap,
+      models: models.filter(m => m.family === 'voyage-4' && !m.legacy)
+    },
+    {
+      id: 'domain',
+      title: 'Domain-Specific',
+      icon: LI.target,
+      models: models.filter(m => !m.family && m.type === 'embedding' && !m.legacy && !m.multimodal)
+    },
+    {
+      id: 'multimodal',
+      title: 'Multimodal',
+      icon: LI.image,
+      models: models.filter(m => m.multimodal && !m.legacy)
+    },
+    {
+      id: 'reranking',
+      title: 'Reranking',
+      icon: LI.shuffle,
+      models: models.filter(m => m.type === 'reranking' && !m.legacy)
+    },
+    {
+      id: 'legacy',
+      title: 'Previous Generation',
+      icon: LI.timer,
+      models: models.filter(m => m.legacy === true)
+    }
+  ];
+  return groups.filter(g => g.models.length > 0);
+}
+
+function renderModelsGroups() {
+  const container = document.getElementById('modelsGroups');
+  const catalog = modelsTabData.catalog || [];
+  const groups = getModelGroups(catalog);
+
+  container.innerHTML = groups.map(function(group, gi) {
+    return '<div class="models-group" id="models-group-' + group.id + '">' +
+      '<div class="models-group-header">' +
+        '<span class="models-group-icon">' + lucideIcon(group.icon, 18) + '</span>' +
+        '<span class="models-group-title">' + escapeHtml(group.title) + '</span>' +
+        '<span class="models-group-count">' + group.models.length + '</span>' +
+      '</div>' +
+      '<div class="models-group-grid">' +
+        group.models.map(function(m, mi) { return renderModelCard(m, gi * 100 + mi); }).join('') +
+      '</div>' +
+    '</div>';
+  }).join('');
+}
+
+function renderModelCard(model, seedOffset) {
+  var typeClass = model.multimodal ? 'multimodal' :
+                  model.type === 'reranking' ? 'reranking' : 'embedding';
+  var typeLabel = model.multimodal ? 'Multimodal' :
+                  model.type === 'reranking' ? 'Reranker' : 'Embedding';
+
+  var specs = [];
+  if (model.context) specs.push({label: 'Context', value: model.context});
+  if (model.dimensions && model.dimensions !== '\u2014') {
+    var dimDefault = model.dimensions.split('(')[0].trim().split(',')[0];
+    specs.push({label: 'Dims', value: dimDefault});
+  }
+  specs.push({label: 'Price', value: model.price});
+  if (model.architecture) specs.push({label: 'Arch', value: model.architecture === 'moe' ? 'MoE' : 'Dense'});
+
+  var sharedBadge = model.sharedSpace ?
+    '<div class="model-card-shared-badge">' + lucideIcon(LI.link, 12) + ' Shared: ' + model.sharedSpace + '</div>' : '';
+
+  var rtebBadge = model.rtebScore ?
+    '<div class="model-card-rteb">' + model.rtebScore.toFixed(1) + '</div>' : '';
+
+  var tryActions = '';
+  if (model.multimodal) {
+    tryActions = '<button class="model-card-action" onclick="event.stopPropagation(); switchTab(\'multimodal\')">Try in Multimodal</button>';
+  } else if (model.type === 'reranking') {
+    tryActions = '<button class="model-card-action" onclick="event.stopPropagation(); switchTab(\'search\')">Try in Search</button>';
+  } else if (!model.legacy) {
+    tryActions = '<button class="model-card-action" onclick="event.stopPropagation(); switchTab(\'embed\')">Try in Embed</button>' +
+                 '<button class="model-card-action" onclick="event.stopPropagation(); switchTab(\'search\')">Try in Search</button>';
+  }
+
+  return '<div class="model-card ' + (model.legacy ? 'legacy' : '') + '" data-model="' + model.name + '" data-type="' + typeClass + '" id="model-card-' + model.name + '">' +
+    '<div class="model-card-nebula">' + generateNebulaSVG(140, 140, 500 + seedOffset, {variant: 'subtle', opacity: 0.05, sparkles: false}) + '</div>' +
+    rtebBadge +
+    '<div class="model-card-header">' +
+      '<span class="model-card-name">' + escapeHtml(model.name) + '</span>' +
+      '<span class="model-card-type-badge ' + typeClass + '">' + typeLabel + '</span>' +
+    '</div>' +
+    sharedBadge +
+    '<div class="model-card-desc">' + escapeHtml(model.bestFor) + '</div>' +
+    '<div class="model-card-specs">' +
+      specs.map(function(s) {
+        return '<div class="model-card-spec">' +
+          '<span class="model-card-spec-label">' + s.label + '</span>' +
+          '<span class="model-card-spec-value">' + escapeHtml(s.value) + '</span>' +
+        '</div>';
+      }).join('') +
+    '</div>' +
+    (tryActions ? '<div class="model-card-actions">' + tryActions + '</div>' : '') +
+  '</div>';
+}
+
+function renderModelsRtebChart() {
+  var chart = document.getElementById('modelsRtebChart');
+  var benchmarks = modelsTabData.benchmarks || [];
+  if (!benchmarks.length) {
+    chart.innerHTML = '<p style="color:var(--text-muted);font-size:13px;">Benchmark data unavailable.</p>';
+    return;
+  }
+  var maxScore = Math.max.apply(null, benchmarks.map(function(b) { return b.score; }));
+  var minDisplay = 55;
+
+  chart.innerHTML = benchmarks.map(function(b) {
+    var isVoyage = b.provider === 'Voyage AI';
+    var barPct = ((b.score - minDisplay) / (maxScore - minDisplay)) * 100;
+    var color = isVoyage ? 'var(--accent)' : '#555';
+    var labelColor = isVoyage ? 'var(--accent)' : 'var(--text-dim)';
+    var fontWeight = isVoyage ? '600' : '400';
+
+    return '<div class="models-rteb-bar">' +
+      '<span class="models-rteb-label" style="color:' + labelColor + ';font-weight:' + fontWeight + ';">' + escapeHtml(b.model) + '</span>' +
+      '<div class="models-rteb-track">' +
+        '<div class="models-rteb-fill" style="width:' + barPct.toFixed(1) + '%;background:' + color + ';' + (isVoyage ? '' : 'opacity:0.6;') + '"></div>' +
+      '</div>' +
+      '<span class="models-rteb-score" style="color:' + labelColor + ';">' + b.score.toFixed(2) + '</span>' +
+    '</div>';
+  }).join('');
+}
+
+function scrollToModelCard(name) {
+  var card = document.getElementById('model-card-' + name);
+  if (card) {
+    card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    card.style.outline = '2px solid var(--accent)';
+    setTimeout(function() { card.style.outline = ''; }, 2000);
+  }
+}
+
+window.filterModels = function() {
+  var q = document.getElementById('modelsSearch').value.toLowerCase().trim();
+  document.querySelectorAll('.model-card').forEach(function(card) {
+    if (!q) { card.style.display = ''; return; }
+    var text = card.textContent.toLowerCase();
+    card.style.display = text.includes(q) ? '' : 'none';
+  });
+  document.querySelectorAll('.models-group').forEach(function(group) {
+    var visible = group.querySelectorAll('.model-card:not([style*="display: none"])');
+    group.style.display = visible.length ? '' : 'none';
+  });
+};
+
+window.setModelFilter = function(filter) {
+  modelsTabData.currentFilter = filter;
+  document.querySelectorAll('.models-filter-pill').forEach(function(p) {
+    p.classList.toggle('active', p.dataset.filter === filter);
+  });
+  document.querySelectorAll('.model-card').forEach(function(card) {
+    if (filter === 'all') { card.style.display = ''; return; }
+    var cardType = card.dataset.type;
+    card.style.display = cardType === filter ? '' : 'none';
+  });
+  document.querySelectorAll('.models-group').forEach(function(group) {
+    var visible = group.querySelectorAll('.model-card:not([style*="display: none"])');
+    group.style.display = visible.length ? '' : 'none';
+  });
+};
+
+// ── Model Picker ──
+var modelPickerState = {
+  isOpen: false,
+  targetSelectId: null,
+  context: null,
+  selectedModel: null,
+  previousFocus: null,
+  modelType: 'embedding'
+};
+
+function openModelPicker(selectId, context) {
+  modelPickerState.isOpen = true;
+  modelPickerState.targetSelectId = selectId;
+  modelPickerState.context = context;
+  modelPickerState.previousFocus = document.activeElement;
+
+  var sel = document.getElementById(selectId);
+  modelPickerState.selectedModel = sel ? sel.value : null;
+  modelPickerState.modelType = selectId === 'searchRerankModel' ? 'reranking' : 'embedding';
+
+  var contextHints = {
+    embed: 'Choose an embedding model for vectorizing text.',
+    compare: 'Choose a model for similarity scoring.',
+    search: 'Choose an embedding model for document search.',
+    multimodal: 'Only multimodal models are available here.'
+  };
+  document.getElementById('modelPickerContext').textContent = contextHints[context] || '';
+
+  var rec = document.getElementById('modelPickerRecommendation');
+  var recommendations = {
+    embed: 'Tip: voyage-4 offers balanced quality and cost.',
+    compare: 'Tip: voyage-4-large gives highest accuracy comparisons.',
+    search: 'Tip: Use voyage-4-large for docs, voyage-4-lite for queries (shared space saves cost).',
+    multimodal: 'Tip: voyage-multimodal-3.5 supports text, images, and video.'
+  };
+  if (recommendations[context]) {
+    rec.textContent = recommendations[context];
+    rec.classList.add('visible');
+  } else {
+    rec.classList.remove('visible');
+  }
+
+  renderModelPickerList();
+  document.getElementById('modelPickerOverlay').classList.add('open');
+  setTimeout(function() {
+    document.getElementById('modelPickerSearch').focus();
+  }, 100);
+}
+
+function closeModelPicker() {
+  modelPickerState.isOpen = false;
+  document.getElementById('modelPickerOverlay').classList.remove('open');
+  document.getElementById('modelPickerSearch').value = '';
+  if (modelPickerState.previousFocus) {
+    modelPickerState.previousFocus.focus();
+    modelPickerState.previousFocus = null;
+  }
+}
+
+function selectModelFromPicker(name) {
+  var sel = document.getElementById(modelPickerState.targetSelectId);
+  if (sel) {
+    sel.value = name;
+    sel.dispatchEvent(new Event('change'));
+    localStorage.setItem('vai-playground-model', name);
+    if (modelPickerState.modelType === 'embedding') {
+      ['embedModel', 'compareModel', 'searchEmbedModel'].forEach(function(id) {
+        var otherSel = document.getElementById(id);
+        if (otherSel && otherSel !== sel) otherSel.value = name;
+      });
+    }
+  }
+  closeModelPicker();
+  sendTelemetry('model_picker_select', { model: name, context: modelPickerState.context });
+}
+
+function renderModelPickerList() {
+  var list = document.getElementById('modelPickerList');
+  var type = modelPickerState.modelType;
+  var context = modelPickerState.context;
+  var selected = modelPickerState.selectedModel;
+
+  var models;
+  if (context === 'multimodal') {
+    models = allModels.filter(function(m) { return m.multimodal; });
+  } else if (type === 'reranking') {
+    models = rerankModels;
+  } else {
+    models = embedModels;
+  }
+
+  list.innerHTML = models.map(function(m) {
+    var isSelected = m.name === selected;
+    var tags = [];
+    if (m.architecture === 'moe') tags.push({text: 'MoE', cls: 'model-picker-item-tag'});
+    if (m.sharedSpace) tags.push({text: 'Shared Space', cls: 'model-picker-item-shared'});
+    if (m.rtebScore) tags.push({text: 'RTEB ' + m.rtebScore, cls: 'model-picker-item-tag'});
+
+    var meta = [m.bestFor, m.context, m.price].filter(Boolean).join(' \u00b7 ');
+
+    return '<div class="model-picker-item ' + (isSelected ? 'selected' : '') + '" ' +
+      'role="option" aria-selected="' + isSelected + '" tabindex="0" ' +
+      'data-model="' + m.name + '" ' +
+      'onclick="selectModelFromPicker(\'' + m.name + '\')" ' +
+      'onkeydown="if(event.key===\'Enter\') selectModelFromPicker(\'' + m.name + '\')">' +
+      '<div class="model-picker-item-radio"></div>' +
+      '<div class="model-picker-item-info">' +
+        '<div class="model-picker-item-name">' + escapeHtml(m.name) + '</div>' +
+        '<div class="model-picker-item-meta">' + escapeHtml(meta) + '</div>' +
+        (tags.length ? '<div class="model-picker-item-tags">' +
+          tags.map(function(t) { return '<span class="' + t.cls + '">' + t.text + '</span>'; }).join('') +
+        '</div>' : '') +
+      '</div>' +
+    '</div>';
+  }).join('');
+}
+
+window.filterModelPicker = function() {
+  var q = document.getElementById('modelPickerSearch').value.toLowerCase().trim();
+  document.querySelectorAll('#modelPickerList .model-picker-item').forEach(function(item) {
+    if (!q) { item.style.display = ''; return; }
+    var text = item.textContent.toLowerCase();
+    item.style.display = text.includes(q) ? '' : 'none';
+  });
+};
+
+function enhanceModelSelects() {
+  var selectConfigs = [
+    { id: 'embedModel', context: 'embed' },
+    { id: 'compareModel', context: 'compare' },
+    { id: 'searchEmbedModel', context: 'search' },
+    { id: 'searchRerankModel', context: 'search' }
+  ];
+
+  selectConfigs.forEach(function(cfg) {
+    var sel = document.getElementById(cfg.id);
+    if (!sel || sel.dataset.pickerEnhanced) return;
+    sel.dataset.pickerEnhanced = 'true';
+
+    var pickerBtn = document.createElement('button');
+    pickerBtn.className = 'model-picker-trigger';
+    pickerBtn.type = 'button';
+    pickerBtn.title = 'Browse models';
+    pickerBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>';
+    pickerBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      openModelPicker(cfg.id, cfg.context);
+    });
+
+    sel.parentNode.insertBefore(pickerBtn, sel.nextSibling);
+  });
+}
+
+// Model picker close handlers
+document.getElementById('modelPickerClose').addEventListener('click', closeModelPicker);
+document.getElementById('modelPickerOverlay').addEventListener('click', function(e) {
+  if (e.target === document.getElementById('modelPickerOverlay')) closeModelPicker();
+});
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape' && modelPickerState.isOpen) {
+    e.preventDefault();
+    closeModelPicker();
+  }
+});
+
 // ── Benchmark: Sub-panel switching ──
 document.querySelectorAll('.bench-panel-btn').forEach(btn => {
   btn.addEventListener('click', () => {
@@ -11065,7 +12095,23 @@ function checkForAppUpdate() {
         downloadBtn.style.display = 'none';
         bannerText.style.display = 'none';
         progressWrap.style.display = 'flex';
+        // Timeout: if no progress after 30s, offer manual download
+        let gotProgress = false;
+        const dlTimeout = setTimeout(() => {
+          if (!gotProgress) {
+            progressWrap.style.display = 'none';
+            bannerText.innerHTML = 'Download stalled. <a href="#" onclick="window.vai.updates.openRelease(\'' + result.releaseUrl + '\');return false;" style="color:var(--accent);">Download manually</a>';
+            bannerText.style.display = '';
+          }
+        }, 30000);
+        // Listen for first progress event to cancel timeout
+        const unsub = window.vai.updates.onEvent((d) => {
+          if (d.event === 'download-progress') { gotProgress = true; clearTimeout(dlTimeout); unsub(); }
+          if (d.event === 'update-error') { clearTimeout(dlTimeout); unsub(); }
+          if (d.event === 'update-downloaded') { clearTimeout(dlTimeout); unsub(); }
+        });
         window.vai.updates.download().catch(() => {
+          clearTimeout(dlTimeout);
           // Fallback to manual download
           window.vai.updates.openRelease(result.releaseUrl);
         });
@@ -11344,6 +12390,7 @@ function initOnboarding() {
 
 // ── Multimodal Tab ──
 let mmImageData = null; // base64 data URL of the uploaded image
+let mmVideoData = null; // base64 data URL of the uploaded video
 let mmGalleryImages = []; // array of { dataUrl, name, size }
 let mmSearchMode = 'text';
 let mmSearchImageIndex = -1;
@@ -11414,6 +12461,59 @@ function initMultimodal() {
     }
   });
 
+  // Video drop zone — the hidden <input type="file"> lives inside the same
+  // card, so its programmatic .click() bubbles back up through the DOM and
+  // re-triggers the dropzone click handler, creating an infinite dialog loop.
+  // Fix: stopPropagation on the input so its click never reaches the dropzone,
+  // plus a re-trigger guard identical to the image dropzone.
+  const videoDropZone = document.getElementById('mmVideoDropZone');
+  const videoFileInput = document.getElementById('mmVideoFileInput');
+
+  videoFileInput.addEventListener('click', (e) => e.stopPropagation());
+
+  let videoDialogOpen = false;
+  videoDropZone.addEventListener('click', async () => {
+    if (videoDialogOpen) return;
+    videoDialogOpen = true;
+    try {
+      if (window.vai && window.vai.isElectron && window.vai.openVideoDialog) {
+        const result = await window.vai.openVideoDialog();
+        if (!result.canceled && result.dataUrl) {
+          handleMultimodalVideoFromData(result.dataUrl, result.name, result.size);
+        }
+      } else {
+        videoFileInput.click();
+      }
+    } finally {
+      setTimeout(() => { videoDialogOpen = false; }, 300);
+    }
+  });
+  videoFileInput.addEventListener('change', (e) => {
+    videoDialogOpen = false;
+    if (e.target.files && e.target.files[0]) handleMultimodalVideo(e.target.files[0]);
+    videoFileInput.value = '';
+  });
+
+  ['dragenter', 'dragover'].forEach(evt => {
+    videoDropZone.addEventListener(evt, (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      videoDropZone.classList.add('drag-active');
+    });
+  });
+  ['dragleave', 'drop'].forEach(evt => {
+    videoDropZone.addEventListener(evt, (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      videoDropZone.classList.remove('drag-active');
+    });
+  });
+  videoDropZone.addEventListener('drop', (e) => {
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      handleMultimodalVideo(e.dataTransfer.files[0]);
+    }
+  });
+
   // Gallery
   renderGalleryGrid();
 
@@ -11484,22 +12584,155 @@ window.clearMultimodalImage = function() {
   document.getElementById('mmFileInput').value = '';
 };
 
+async function handleMultimodalVideoFromData(dataUrl, name, size) {
+  mmVideoData = dataUrl;
+  const video = document.getElementById('mmPreviewVideo');
+  video.src = mmVideoData;
+
+  const info = document.getElementById('mmVideoFileInfo');
+  const sizeStr = size > 1024 * 1024
+    ? (size / (1024 * 1024)).toFixed(1) + ' MB'
+    : (size / 1024).toFixed(0) + ' KB';
+
+  document.getElementById('mmVideoDropZone').style.display = 'none';
+  document.getElementById('mmVideoPreview').classList.add('visible');
+  hideError('mmError');
+
+  // Estimate tokens from video metadata
+  const meta = await estimateVideoTokens(video);
+  if (meta) {
+    const durStr = meta.duration.toFixed(1) + 's';
+    const resStr = meta.width + '×' + meta.height;
+    info.textContent = `${name} · ${sizeStr} · ${resStr} · ${durStr} · ~${meta.tokens.toLocaleString()} tokens`;
+    if (meta.tokens > 32000) {
+      showError('mmError',
+        'This video is estimated at ~' + meta.tokens.toLocaleString() + ' tokens, which exceeds the 32,000 token context window. ' +
+        'Try a shorter clip, lower resolution, or smaller dimensions. ' +
+        '(' + resStr + ', ' + durStr + ')'
+      );
+    }
+  } else {
+    info.textContent = `${name} · ${sizeStr}`;
+  }
+}
+
+// Estimate video tokens: total pixels across all frames / 1120 pixels per token
+// The playground server downsamples video to 1fps before sending to Voyage AI,
+// so we estimate based on 1fps which matches what will actually be sent.
+function estimateVideoTokens(videoEl) {
+  return new Promise((resolve) => {
+    const checkMeta = () => {
+      const w = videoEl.videoWidth;
+      const h = videoEl.videoHeight;
+      const dur = videoEl.duration;
+      if (w && h && dur && isFinite(dur)) {
+        // Server downsamples to 1fps before API call
+        const assumedFps = 1;
+        const frames = Math.ceil(dur * assumedFps);
+        const totalPixels = w * h * frames;
+        const tokens = Math.ceil(totalPixels / 1120);
+        resolve({ width: w, height: h, duration: dur, frames, totalPixels, tokens });
+      } else {
+        resolve(null);
+      }
+    };
+    if (videoEl.readyState >= 1) {
+      checkMeta();
+    } else {
+      videoEl.addEventListener('loadedmetadata', checkMeta, { once: true });
+      // Timeout fallback
+      setTimeout(() => resolve(null), 3000);
+    }
+  });
+}
+
+function handleMultimodalVideo(file) {
+  const VALID_TYPES = ['video/mp4', 'video/webm', 'video/quicktime', 'video/x-msvideo', 'video/x-matroska'];
+  if (!VALID_TYPES.includes(file.type) && !file.name.match(/\.(mp4|webm|mov|avi|mkv)$/i)) {
+    showError('mmError', 'Unsupported video type. Use MP4, WebM, MOV, AVI, or MKV.');
+    return;
+  }
+  if (file.size > 20 * 1024 * 1024) {
+    showError('mmError', 'Video too large. Maximum size is 20 MB.');
+    return;
+  }
+  hideError('mmError');
+
+  const reader = new FileReader();
+  reader.onload = async (e) => {
+    mmVideoData = e.target.result;
+    const video = document.getElementById('mmPreviewVideo');
+    video.src = mmVideoData;
+
+    const info = document.getElementById('mmVideoFileInfo');
+    const sizeStr = file.size > 1024 * 1024
+      ? (file.size / (1024 * 1024)).toFixed(1) + ' MB'
+      : (file.size / 1024).toFixed(0) + ' KB';
+
+    document.getElementById('mmVideoDropZone').style.display = 'none';
+    document.getElementById('mmVideoPreview').classList.add('visible');
+
+    // Estimate tokens from video metadata and warn if likely to exceed limit
+    const meta = await estimateVideoTokens(video);
+    if (meta) {
+      const durStr = meta.duration.toFixed(1) + 's';
+      const resStr = meta.width + '×' + meta.height;
+      info.textContent = `${file.name} · ${sizeStr} · ${resStr} · ${durStr} · ~${meta.tokens.toLocaleString()} tokens`;
+      if (meta.tokens > 32000) {
+        showError('mmError',
+          'This video is estimated at ~' + meta.tokens.toLocaleString() + ' tokens, which exceeds the 32,000 token context window. ' +
+          'Try a shorter clip, lower resolution, or smaller dimensions. ' +
+          '(' + resStr + ', ' + durStr + ')'
+        );
+      }
+    } else {
+      info.textContent = `${file.name} · ${sizeStr}`;
+    }
+  };
+  reader.readAsDataURL(file);
+}
+
+window.clearMultimodalVideo = function() {
+  mmVideoData = null;
+  const video = document.getElementById('mmPreviewVideo');
+  video.pause();
+  video.src = '';
+  document.getElementById('mmVideoFileInfo').textContent = '';
+  document.getElementById('mmVideoPreview').classList.remove('visible');
+  document.getElementById('mmVideoDropZone').style.display = '';
+  document.getElementById('mmVideoFileInput').value = '';
+};
+
 window.doMultimodalCompare = async function() {
   hideError('mmError');
   sendTelemetry('api_call', { endpoint: 'multimodal-compare', model: document.getElementById('mmModel').value });
   const text = document.getElementById('mmText').value.trim();
-  if (!mmImageData) { showError('mmError', 'Upload an image first'); return; }
-  if (!text) { showError('mmError', 'Enter text to compare against the image'); return; }
+  const hasMedia = mmImageData || mmVideoData;
+  if (!hasMedia && !text) { showError('mmError', 'Upload an image or video, and enter text to compare'); return; }
+
+  // Need at least 2 inputs to compare
+  const mediaInputs = [];
+  if (mmImageData) {
+    mediaInputs.push({ content: [{ type: 'image_base64', image_base64: mmImageData }], label: 'Image' });
+  }
+  if (mmVideoData) {
+    mediaInputs.push({ content: [{ type: 'video_base64', video_base64: mmVideoData }], label: 'Video' });
+  }
+  if (text) {
+    mediaInputs.push({ content: [{ type: 'text', text: text }], label: 'Text' });
+  }
+
+  if (mediaInputs.length < 2) {
+    showError('mmError', 'Provide at least 2 inputs to compare (e.g., image + text, video + text, or image + video)');
+    return;
+  }
 
   setLoading('mmCompareBtn', true);
   try {
     const model = document.getElementById('mmModel').value;
     const dimsVal = document.getElementById('mmDimensions').value;
     const body = {
-      inputs: [
-        { content: [{ type: 'image_base64', image_base64: mmImageData }] },
-        { content: [{ type: 'text', text: text }] }
-      ],
+      inputs: mediaInputs.map(m => m.content ? { content: m.content } : m),
       model: model,
       input_type: 'document'
     };
@@ -11507,6 +12740,7 @@ window.doMultimodalCompare = async function() {
 
     const data = await apiPost('/api/multimodal-embed', body);
 
+    // Compare first two inputs (primary comparison)
     const vecA = data.data[0].embedding;
     const vecB = data.data[1].embedding;
     const cosine = cosineSim(vecA, vecB);
@@ -11528,29 +12762,46 @@ window.doMultimodalCompare = async function() {
 
     // Stats
     const usage = data.usage || {};
-    const statsEl = document.getElementById('mmStats');
-    statsEl.innerHTML = `
+    const pairLabel = mediaInputs[0].label + ' vs ' + mediaInputs[1].label;
+    let statsHtml = `
       <span class="stat"><span class="stat-label">Model</span><span class="stat-value">${data.model || model}</span></span>
+      <span class="stat"><span class="stat-label">Comparing</span><span class="stat-value">${pairLabel}</span></span>
       <span class="stat"><span class="stat-label">Dimensions</span><span class="stat-value">${vecA.length}</span></span>
-      <span class="stat"><span class="stat-label">Text Tokens</span><span class="stat-value">${usage.text_tokens || '—'}</span></span>
-      <span class="stat"><span class="stat-label">Image Pixels</span><span class="stat-value">${usage.image_pixels ? usage.image_pixels.toLocaleString() : '—'}</span></span>
-      <span class="stat"><span class="stat-label">Total Tokens</span><span class="stat-value">${usage.total_tokens || '—'}</span></span>
     `;
+    if (usage.text_tokens) statsHtml += `<span class="stat"><span class="stat-label">Text Tokens</span><span class="stat-value">${usage.text_tokens}</span></span>`;
+    if (usage.image_pixels) statsHtml += `<span class="stat"><span class="stat-label">Image Pixels</span><span class="stat-value">${usage.image_pixels.toLocaleString()}</span></span>`;
+    statsHtml += `<span class="stat"><span class="stat-label">Total Tokens</span><span class="stat-value">${usage.total_tokens || '—'}</span></span>`;
+
+    // If 3 inputs, show all pairwise similarities
+    if (mediaInputs.length === 3) {
+      const vecC = data.data[2].embedding;
+      const simAC = cosineSim(vecA, vecC);
+      const simBC = cosineSim(vecB, vecC);
+      statsHtml += `<br><span class="stat"><span class="stat-label">${mediaInputs[0].label} vs ${mediaInputs[2].label}</span><span class="stat-value">${simAC.toFixed(4)}</span></span>`;
+      statsHtml += `<span class="stat"><span class="stat-label">${mediaInputs[1].label} vs ${mediaInputs[2].label}</span><span class="stat-value">${simBC.toFixed(4)}</span></span>`;
+    }
+
+    document.getElementById('mmStats').innerHTML = statsHtml;
 
     // Insight note
     const noteEl = document.getElementById('mmNote');
     if (cosine > 0.7) {
-      noteEl.innerHTML = '💡 <strong>High similarity!</strong> The image and text are closely related in Voyage AI\'s multimodal embedding space. This means the text is a good semantic description of the image.';
+      noteEl.innerHTML = '💡 <strong>High similarity!</strong> The inputs are closely related in Voyage AI\'s multimodal embedding space.';
     } else if (cosine > 0.4) {
-      noteEl.innerHTML = '💡 <strong>Moderate similarity.</strong> The image and text share some semantic overlap. They may be related but not a direct match.';
+      noteEl.innerHTML = '💡 <strong>Moderate similarity.</strong> The inputs share some semantic overlap but are not a direct match.';
     } else {
-      noteEl.innerHTML = '💡 <strong>Low similarity.</strong> The image and text are semantically distant. Try a description that matches the image content more closely.';
+      noteEl.innerHTML = '💡 <strong>Low similarity.</strong> The inputs are semantically distant. Try content that is more closely related.';
     }
 
     document.getElementById('mmResult').classList.add('visible');
     CostTracker.addOperation('multimodal-compare', data.model || model, usage.total_tokens || 0);
   } catch (err) {
-    showError('mmError', err.message);
+    let msg = err.message;
+    // Provide actionable guidance for context window errors
+    if (msg.includes('context window') || msg.includes('exceed')) {
+      msg += ' Try reducing video resolution, trimming to a shorter clip, or using a smaller image.';
+    }
+    showError('mmError', msg);
   } finally {
     setLoading('mmCompareBtn', false);
   }
@@ -11754,7 +13005,11 @@ window.doMultimodalSearch = async function() {
     document.getElementById('mmSearchResult').classList.add('visible');
     CostTracker.addOperation('multimodal-search', model, data.usage?.total_tokens || 0);
   } catch (err) {
-    showError('mmSearchError', err.message);
+    let msg = err.message;
+    if (msg.includes('context window') || msg.includes('exceed')) {
+      msg += ' Try using smaller images or fewer corpus items per batch.';
+    }
+    showError('mmSearchError', msg);
   } finally {
     setLoading(btnId, false);
   }
@@ -13345,6 +14600,12 @@ const WF_NODE_META = {
   chunk:       { icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M9 15h6M9 11h6M9 19h4', label: 'Chunk', color: '#00D4AA', category: 'processing' },
   aggregate:   { icon: 'M22 3H2l8 9.46V19l4 2v-8.54L22 3z', label: 'Aggregate', color: '#00D4AA', category: 'processing' },
   http:        { icon: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z', label: 'HTTP Request', color: '#F5A623', category: 'integration' },
+  // Code search tools (voyage-code-3)
+  code_index:        { icon: 'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2zM12 11v6M9 14h6', label: 'Code Index', color: '#06B6D4', category: 'code' },
+  code_search:       { icon: 'M10 20l4-16M18 8l4 4-4 4M6 16l-4-4 4-4', label: 'Code Search', color: '#06B6D4', category: 'code' },
+  code_query:        { icon: 'M10 20l4-16M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', label: 'Code Query', color: '#06B6D4', category: 'code' },
+  code_find_similar: { icon: 'M16 3h5v5M8 3H3v5M3 16v5h5M21 16v5h-5M12 8v8M8 12h8', label: 'Find Similar', color: '#06B6D4', category: 'code' },
+  code_status:       { icon: 'M22 12h-4l-3 9L9 3l-3 9H2', label: 'Code Status', color: '#06B6D4', category: 'code' },
 };
 
 // Fallback icon (gear) for unknown workflow node types
@@ -13378,6 +14639,7 @@ let wfState = {
   draggingEdge: null,
   dragNode: null,
   dirtyFlag: false,
+  outputFormat: 'auto',
 };
 
 // ── Library ──
@@ -13559,6 +14821,16 @@ function wfCloseInstallDialog() {
   if (modal) modal.style.display = 'none';
 }
 
+function wfCompareVersions(a, b) {
+  const pa = (a || '0.0.0').split('.').map(Number);
+  const pb = (b || '0.0.0').split('.').map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((pa[i] || 0) > (pb[i] || 0)) return 1;
+    if ((pa[i] || 0) < (pb[i] || 0)) return -1;
+  }
+  return 0;
+}
+
 async function wfSearchNpm() {
   const query = document.getElementById('wfInstallSearch').value.trim();
   const results = document.getElementById('wfInstallResults');
@@ -13574,15 +14846,27 @@ async function wfSearchNpm() {
     results.innerHTML = data.results.map(r => {
       const isOfficial = r.name.startsWith('@vaicli/');
       const badge = isOfficial ? '<span style="background:var(--accent);color:#fff;font-size:9px;padding:1px 5px;border-radius:3px;margin-left:6px;">OFFICIAL</span>' : '';
-      const installed = [...(wfState.official||[]), ...(wfState.community||[])].some(w => w.name === r.name);
-      const btn = installed
-        ? '<button disabled style="padding:4px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text-muted);font-size:11px;cursor:default;">Installed</button>'
-        : `<button onclick="wfInstallPkg('${r.name.replace(/'/g,"\\'")}')" style="padding:4px 10px;background:var(--accent);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:11px;">Install</button>`;
+      const installedPkg = [...(wfState.official||[]), ...(wfState.community||[])].find(w => w.name === r.name);
+      const installed = !!installedPkg;
+      const installedVersion = installedPkg?.version;
+      const npmVersion = r.version;
+      const hasUpdate = installed && npmVersion && installedVersion && npmVersion !== installedVersion && wfCompareVersions(npmVersion, installedVersion) > 0;
+      let btn;
+      if (hasUpdate) {
+        btn = `<button onclick="wfInstallPkg('${r.name.replace(/'/g,"\\'")}')" style="padding:4px 10px;background:#F59E0B;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:11px;" title="Installed: v${installedVersion}">Update</button>`;
+      } else if (installed) {
+        btn = '<button disabled style="padding:4px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text-muted);font-size:11px;cursor:default;">Installed</button>';
+      } else {
+        btn = `<button onclick="wfInstallPkg('${r.name.replace(/'/g,"\\'")}')" style="padding:4px 10px;background:var(--accent);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:11px;">Install</button>`;
+      }
+      const versionInfo = hasUpdate
+        ? `v${installedVersion} → <span style="color:#F59E0B;font-weight:500;">v${npmVersion}</span>`
+        : `v${npmVersion || '?'}`;
       return `<div style="padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;">
         <div style="flex:1;min-width:0;">
           <div style="font-size:13px;font-weight:500;">${r.name}${badge}</div>
           <div style="font-size:11px;color:var(--text-muted);margin-top:2px;">${r.description || ''}</div>
-          <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">v${r.version || '?'}</div>
+          <div style="font-size:10px;color:var(--text-muted);margin-top:2px;">${versionInfo}</div>
         </div>
         <div style="margin-left:12px;flex-shrink:0;">${btn}</div>
       </div>`;
@@ -13598,7 +14882,7 @@ async function wfInstallPkg(name) {
   const btns = results.querySelectorAll('button');
   let clickedBtn = null;
   btns.forEach(b => {
-    if (b.textContent === 'Install' && !clickedBtn) {
+    if ((b.textContent === 'Install' || b.textContent === 'Update') && !clickedBtn) {
       // Find the button in the same row as the package name
       const row = b.closest('div[style*="border-bottom"]');
       if (row && row.textContent.includes(name)) {
@@ -13685,40 +14969,192 @@ function wfHandleFileLoad(event) {
         alert('Invalid workflow: missing "steps" array');
         return;
       }
-      // Validate via server
-      const valRes = await fetch('/api/workflows/validate', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ definition }),
-      });
-      const valData = await valRes.json();
-      if (!valData.valid) {
-        alert('Workflow validation failed:\n' + (valData.errors || []).join('\n'));
-        return;
+      // Validate via server
+      const valRes = await fetch('/api/workflows/validate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ definition }),
+      });
+      const valData = await valRes.json();
+      if (!valData.valid) {
+        alert('Workflow validation failed:\n' + (valData.errors || []).join('\n'));
+        return;
+      }
+      // Deselect any library item
+      document.querySelectorAll('.wf-library-item.active').forEach(el => el.classList.remove('active'));
+      // Load the workflow
+      wfState.activeWorkflow = definition;
+      wfState.selectedNodeId = null;
+      wfState.executionState = {};
+      wfState.executionResults = {};
+      wfSetToolbarEnabled(true);
+      document.getElementById('wfCanvasEmpty').style.display = 'none';
+      wfHideExecStatus();
+      await wfRenderWorkflow(definition);
+      wfOpenInspector();
+      wfUpdateInspector();
+    } catch (err) {
+      alert('Failed to parse workflow file: ' + err.message);
+    }
+  };
+  reader.readAsText(file);
+  // Reset file input so the same file can be re-loaded
+  event.target.value = '';
+}
+
+// ── DAG Layout + SVG Rendering ──
+/**
+ * Sugiyama-style DAG auto-layout: barycenter crossing minimization + neighbor-aware placement.
+ * Takes layers (from Kahn's topological sort) and graph (dependency map),
+ * reorders nodes within each layer to minimize edge crossings,
+ * then assigns Y coordinates so nodes sit near their connected neighbors.
+ *
+ * @param {string[][]} layers - layers[i] = [stepIds that can run in parallel]
+ * @param {Object} graph - { stepId: [depStepIds...] } (incoming edges)
+ * @returns {Object} positions - { stepId: { x, y } }
+ */
+function wfAutoLayout(layers, graph) {
+  if (!layers || layers.length === 0) return {};
+
+  // Build adjacency: forward (outgoing) and backward (incoming) neighbor lists
+  const incoming = {}; // stepId -> [ids in previous layers that connect to it]
+  const outgoing = {}; // stepId -> [ids in next layers it connects to]
+  const allIds = new Set(layers.flat());
+  for (const id of allIds) { incoming[id] = []; outgoing[id] = []; }
+
+  for (const [stepId, deps] of Object.entries(graph)) {
+    if (!deps || !Array.isArray(deps)) continue;
+    for (const rawDep of deps) {
+      const dep = rawDep.replace(/^!/, '');
+      if (allIds.has(dep) && allIds.has(stepId)) {
+        incoming[stepId].push(dep);
+        outgoing[dep].push(stepId);
+      }
+    }
+  }
+
+  // Index: which layer is each node in?
+  const layerOf = {};
+  layers.forEach((layer, li) => layer.forEach(id => { layerOf[id] = li; }));
+
+  // Work on mutable copies of each layer's ordering
+  const ordered = layers.map(l => [...l]);
+
+  // Barycenter crossing minimization (multi-pass, alternating direction)
+  // Barycenter = average position of a node's neighbors in the adjacent layer.
+  // Sorting by barycenter within each layer reduces crossings.
+  const NUM_PASSES = 4;
+
+  for (let pass = 0; pass < NUM_PASSES; pass++) {
+    if (pass % 2 === 0) {
+      // Forward pass: for each layer (left to right), sort by barycenter of incoming neighbors
+      for (let li = 1; li < ordered.length; li++) {
+        const prevOrder = {};
+        ordered[li - 1].forEach((id, idx) => { prevOrder[id] = idx; });
+
+        ordered[li].sort((a, b) => {
+          const baryA = wfBarycenter(a, incoming, prevOrder);
+          const baryB = wfBarycenter(b, incoming, prevOrder);
+          return baryA - baryB;
+        });
+      }
+    } else {
+      // Backward pass: for each layer (right to left), sort by barycenter of outgoing neighbors
+      for (let li = ordered.length - 2; li >= 0; li--) {
+        const nextOrder = {};
+        ordered[li + 1].forEach((id, idx) => { nextOrder[id] = idx; });
+
+        ordered[li].sort((a, b) => {
+          const baryA = wfBarycenter(a, outgoing, nextOrder);
+          const baryB = wfBarycenter(b, outgoing, nextOrder);
+          return baryA - baryB;
+        });
+      }
+    }
+  }
+
+  // Assign X coordinates (fixed per layer)
+  // Assign Y coordinates using neighbor-aware placement:
+  // First pass: assign evenly spaced Y (centered).
+  // Second pass: nudge each node toward the average Y of its neighbors.
+  const positions = {};
+  const maxLayerSize = Math.max(...ordered.map(l => l.length));
+  const totalH = maxLayerSize * (WF_NODE_H + WF_NODE_GAP);
+
+  // Initial even spacing (centered vertically)
+  ordered.forEach((layer, li) => {
+    const x = WF_PAD + li * WF_LAYER_GAP;
+    const layerH = layer.length * WF_NODE_H + (layer.length - 1) * WF_NODE_GAP;
+    const startY = WF_PAD + (totalH - layerH) / 2;
+    layer.forEach((stepId, ni) => {
+      positions[stepId] = { x, y: startY + ni * (WF_NODE_H + WF_NODE_GAP) };
+    });
+  });
+
+  // Neighbor-aware Y nudging (iterative relaxation)
+  // Pulls nodes toward the average Y of their connected neighbors while maintaining order and minimum gap.
+  const RELAX_PASSES = 3;
+  const RELAX_STRENGTH = 0.4; // How much to move toward neighbor average (0=none, 1=full)
+
+  for (let rp = 0; rp < RELAX_PASSES; rp++) {
+    for (let li = 0; li < ordered.length; li++) {
+      const layer = ordered[li];
+      if (layer.length <= 1) continue;
+
+      // Compute ideal Y for each node (average Y of all neighbors)
+      const idealY = {};
+      for (const id of layer) {
+        const neighbors = [...(incoming[id] || []), ...(outgoing[id] || [])];
+        if (neighbors.length === 0) { idealY[id] = positions[id].y; continue; }
+        const avgY = neighbors.reduce((sum, nid) => sum + (positions[nid]?.y || 0), 0) / neighbors.length;
+        idealY[id] = avgY;
+      }
+
+      // Nudge toward ideal, then enforce minimum gap and original order
+      for (const id of layer) {
+        const current = positions[id].y;
+        const target = idealY[id];
+        positions[id].y = current + (target - current) * RELAX_STRENGTH;
+      }
+
+      // Re-sort by Y to maintain the barycenter ordering, then enforce minimum gaps
+      const sortedLayer = [...layer].sort((a, b) => positions[a].y - positions[b].y);
+      const minGap = WF_NODE_H + WF_NODE_GAP;
+
+      // Push apart any overlaps (top-down)
+      for (let i = 1; i < sortedLayer.length; i++) {
+        const prev = positions[sortedLayer[i - 1]].y;
+        const curr = positions[sortedLayer[i]].y;
+        if (curr - prev < minGap) {
+          positions[sortedLayer[i]].y = prev + minGap;
+        }
+      }
+
+      // Re-center the layer vertically to keep it balanced
+      const layerTop = positions[sortedLayer[0]].y;
+      const layerBottom = positions[sortedLayer[sortedLayer.length - 1]].y + WF_NODE_H;
+      const layerMid = (layerTop + layerBottom) / 2;
+      const canvasMid = WF_PAD + totalH / 2;
+      const shift = canvasMid - layerMid;
+      for (const id of sortedLayer) {
+        positions[id].y += shift;
       }
-      // Deselect any library item
-      document.querySelectorAll('.wf-library-item.active').forEach(el => el.classList.remove('active'));
-      // Load the workflow
-      wfState.activeWorkflow = definition;
-      wfState.selectedNodeId = null;
-      wfState.executionState = {};
-      wfState.executionResults = {};
-      wfSetToolbarEnabled(true);
-      document.getElementById('wfCanvasEmpty').style.display = 'none';
-      wfHideExecStatus();
-      await wfRenderWorkflow(definition);
-      wfOpenInspector();
-      wfUpdateInspector();
-    } catch (err) {
-      alert('Failed to parse workflow file: ' + err.message);
     }
-  };
-  reader.readAsText(file);
-  // Reset file input so the same file can be re-loaded
-  event.target.value = '';
+  }
+
+  return positions;
+}
+
+/**
+ * Compute barycenter (average position) of a node's neighbors in an adjacent layer.
+ * If a node has no neighbors in the given orderMap, returns Infinity to push it to the end.
+ */
+function wfBarycenter(nodeId, neighborMap, orderMap) {
+  const neighbors = (neighborMap[nodeId] || []).filter(n => orderMap[n] !== undefined);
+  if (neighbors.length === 0) return Infinity;
+  return neighbors.reduce((sum, n) => sum + orderMap[n], 0) / neighbors.length;
 }
 
-// ── DAG Layout + SVG Rendering ──
 async function wfRenderWorkflow(definition) {
   const svg = document.getElementById('wf-canvas');
   // Clear previous nodes and edges (keep defs)
@@ -13747,23 +15183,8 @@ async function wfRenderWorkflow(definition) {
   const stepMap = {};
   definition.steps.forEach(s => { stepMap[s.id] = s; });
 
-  // Calculate positions
-  const positions = {};
-  const maxLayerSize = Math.max(...layers.map(l => l.length));
-  const totalW = layers.length * WF_LAYER_GAP;
-  const totalH = maxLayerSize * (WF_NODE_H + WF_NODE_GAP);
-
-  layers.forEach((layer, li) => {
-    const x = WF_PAD + li * WF_LAYER_GAP;
-    const layerH = layer.length * WF_NODE_H + (layer.length - 1) * WF_NODE_GAP;
-    const startY = WF_PAD + (totalH - layerH) / 2;
-    layer.forEach((stepId, ni) => {
-      positions[stepId] = {
-        x,
-        y: startY + ni * (WF_NODE_H + WF_NODE_GAP),
-      };
-    });
-  });
+  // Auto-layout: crossing minimization + neighbor-aware placement
+  const positions = wfAutoLayout(layers, graph);
   wfState.nodePositions = positions;
 
   // Build port-visibility maps: which nodes have input deps, which have dependents
@@ -14388,18 +15809,27 @@ function wfUpdateInspector() {
 
       // ── OUTPUT Accordion ──
       const outputExpanded = hasDone || accStates.output === true;
+      const fmtSelectorHtml = hasDone ? `<select class="wf-output-format-select" onchange="wfChangeOutputFormat(this.value)" onclick="event.stopPropagation()">
+          <option value="auto"${wfState.outputFormat === 'auto' ? ' selected' : ''}>Auto</option>
+          <option value="json"${wfState.outputFormat === 'json' ? ' selected' : ''}>JSON</option>
+          <option value="table"${wfState.outputFormat === 'table' ? ' selected' : ''}>Table</option>
+          <option value="markdown"${wfState.outputFormat === 'markdown' ? ' selected' : ''}>Markdown</option>
+          <option value="text"${wfState.outputFormat === 'text' ? ' selected' : ''}>Text</option>
+        </select>` : '';
       html += `<div class="wf-accordion-header ${outputExpanded ? 'expanded' : ''}" onclick="wfToggleAccordion('output', this)">
         <span class="wf-acc-left"><span class="wf-chevron">&#9654;</span> OUTPUT</span>
-        <span class="wf-acc-summary"></span>
+        <span class="wf-acc-summary">${fmtSelectorHtml}</span>
       </div>
       <div class="wf-accordion-body" data-acc="output" style="max-height:${outputExpanded ? 'none' : '0px'};">
-        <div class="wf-accordion-body-inner">`;
+        <div class="wf-accordion-body-inner" id="wfOutputContent">`;
       if (hasDone) {
         const r = wfState.executionResults._done;
-        const doneJson = JSON.stringify(r.output, null, 2);
-        html += `<div style="font-size:11px;color:var(--text-muted);margin-bottom:6px;">Completed in ${r.totalTimeMs}ms</div>
-          <div class="wf-inspector-code" style="max-height:200px;overflow:auto;color:#40E0FF;">${escapeHtml(doneJson)}</div>
-          <button class="wf-output-expand-btn" data-expand-step="_done">&#x2922; Expand</button>`;
+        const hints = r.formatters || {};
+        const fmt = wfState.outputFormat || 'auto';
+        const effectiveFmt = fmt === 'auto' ? wfAutoFormat(r.output) : fmt;
+        html += `<div style="font-size:11px;color:var(--text-muted);margin-bottom:6px;">Completed in ${r.totalTimeMs}ms</div>`;
+        html += wfRenderOutputAs(r.output, effectiveFmt, hints);
+        html += `<button class="wf-output-expand-btn" data-expand-step="_done">&#x2922; Expand</button>`;
       } else if (def.output) {
         html += `<div class="wf-inspector-code" style="color:#40E0FF;">${escapeHtml(JSON.stringify(def.output, null, 2))}</div>`;
       } else {
@@ -14531,11 +15961,23 @@ function wfUpdateInspector() {
   if (state === 'completed' && result) {
     const outputJson = result.output ? JSON.stringify(result.output, null, 2) : '';
     const stepTitle = step.name || step.id;
+    const stepShape = result.output ? wfDetectOutputShape(result.output) : null;
+    const showStepFmtToggle = stepShape && (stepShape.type === 'array' || stepShape.type === 'comparison');
+    const stepFmtToggle = showStepFmtToggle ?
+      `<div style="margin-bottom:4px;"><select class="wf-output-format-select" style="width:auto;margin:0;" onchange="wfChangeStepFormat('${escapeHtml(step.id)}', this.value)">
+        <option value="json">JSON</option>
+        <option value="table" selected>Table</option>
+        <option value="text">Text</option>
+      </select></div>` : '';
+    const stepResultContent = showStepFmtToggle
+      ? wfRenderOutputAs(result.output, 'table', {})
+      : (outputJson ? '<div class="wf-inspector-code" style="max-height:120px;overflow:auto;">' + escapeHtml(outputJson) + '</div>' : '');
     html += `<div class="wf-inspector-section">
       <div class="wf-inspector-section-title">Result</div>
       <div class="wf-inspector-result success">
         <div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">${result.timeMs}ms${result.summary ? ', ' + result.summary : ''}</div>
-        ${outputJson ? '<div class="wf-inspector-code" style="max-height:120px;overflow:auto;">' + escapeHtml(outputJson) + '</div>' : ''}
+        ${stepFmtToggle}
+        <div id="wf-step-result-${escapeHtml(step.id)}">${stepResultContent}</div>
       </div>
       ${outputJson ? '<button class="wf-output-expand-btn" data-expand-step="' + escapeHtml(step.id) + '">&#x2922; Expand</button>' : ''}
     </div>`;
@@ -14571,17 +16013,274 @@ function wfBindExpandButtons(container) {
       if (stepId === '_done') {
         title = 'Workflow Output';
         content = JSON.stringify(result.output, null, 2);
+        // Rich modal rendering for workflow output
+        const hints = result.formatters || {};
+        const fmt = wfState.outputFormat || hints.default || 'auto';
+        const effectiveFmt = fmt === 'auto' ? wfAutoFormat(result.output) : fmt;
+        wfOpenOutputModal(title, content, effectiveFmt, result.output, hints);
+        return;
       } else {
         const def = wfState.activeWorkflow;
         const step = def ? def.steps.find(s => s.id === stepId) : null;
         title = (step ? step.name || step.id : stepId) + ' Output';
         content = JSON.stringify(result.output, null, 2);
+        // Rich modal for step outputs with array/comparison shapes
+        const stepShape = result.output ? wfDetectOutputShape(result.output) : null;
+        if (stepShape && (stepShape.type === 'array' || stepShape.type === 'comparison')) {
+          wfOpenOutputModal(title, content, 'table', result.output, {});
+          return;
+        }
       }
       wfOpenOutputModal(title, content);
     });
   });
 }
 
+// ── Output Format Rendering ──
+
+function wfStringify(val) {
+  if (val == null) return '';
+  if (typeof val === 'number') return val % 1 === 0 ? String(val) : val.toFixed(4);
+  if (typeof val === 'boolean') return val ? 'true' : 'false';
+  if (typeof val === 'object') {
+    const s = JSON.stringify(val);
+    return s.length > 80 ? s.slice(0, 77) + '...' : s;
+  }
+  return String(val);
+}
+
+function wfDetectOutputShape(output) {
+  if (output == null || typeof output !== 'object') return { type: 'scalar', value: output };
+  const keys = Object.keys(output);
+  for (const key of keys) {
+    const val = output[key];
+    if (Array.isArray(val) && val.length > 0 && typeof val[0] === 'object' && val[0] !== null) {
+      return { type: 'array', arrayKey: key, columns: Object.keys(val[0]), totalRows: val.length };
+    }
+  }
+  const objKeys = keys.filter(k => output[k] != null && typeof output[k] === 'object' && !Array.isArray(output[k]));
+  if (objKeys.length >= 2) {
+    return { type: 'comparison', objectKeys: objKeys, metricKeys: keys.filter(k => !objKeys.includes(k)) };
+  }
+  const textKeys = keys.filter(k => typeof output[k] === 'string' && output[k].length > 100);
+  if (textKeys.length > 0) {
+    return { type: 'text', textKeys, metricKeys: keys.filter(k => !textKeys.includes(k)) };
+  }
+  return { type: 'metrics', keys };
+}
+
+function wfAutoFormat(output) {
+  const shape = wfDetectOutputShape(output);
+  if (shape.type === 'array' || shape.type === 'comparison') return 'table';
+  return 'text';
+}
+
+function wfRenderOutputAs(output, format, hints) {
+  hints = hints || {};
+  if (!output) return '<div class="wf-inspector-code" style="color:#40E0FF;">(no output)</div>';
+  switch (format) {
+    case 'json':
+      return '<div class="wf-inspector-code" style="max-height:200px;overflow:auto;color:#40E0FF;">' + escapeHtml(JSON.stringify(output, null, 2)) + '</div>';
+    case 'table':
+      return wfRenderTable(output, hints);
+    case 'markdown':
+      return '<div class="wf-output-markdown">' + renderMarkdown(wfOutputToMarkdown(output, hints)) + '</div>';
+    case 'text':
+      return wfRenderText(output, hints);
+    default:
+      return '<div class="wf-inspector-code" style="max-height:200px;overflow:auto;color:#40E0FF;">' + escapeHtml(JSON.stringify(output, null, 2)) + '</div>';
+  }
+}
+
+function wfRenderTable(output, hints) {
+  const shape = wfDetectOutputShape(output);
+  let html = '';
+
+  if (shape.type === 'array') {
+    const key = hints.arrayField || shape.arrayKey;
+    const data = output[key] || [];
+    if (data.length === 0) return '<div style="color:var(--text-muted);font-size:12px;">(empty results)</div>';
+    const columns = hints.columns || shape.columns;
+
+    // Show non-array metrics above
+    const metricKeys = Object.keys(output).filter(k => k !== key && !Array.isArray(output[k]));
+    if (metricKeys.length > 0) {
+      html += '<div style="margin-bottom:8px;">';
+      metricKeys.forEach(k => {
+        html += '<div class="wf-output-metric"><div class="wf-output-text-label">' + escapeHtml(k) + '</div><div class="wf-output-metric-val">' + escapeHtml(wfStringify(output[k])) + '</div></div>';
+      });
+      html += '</div>';
+    }
+
+    html += '<table class="wf-output-table"><thead><tr>';
+    columns.forEach(c => { html += '<th>' + escapeHtml(c) + '</th>'; });
+    html += '</tr></thead><tbody>';
+    data.forEach(row => {
+      html += '<tr>';
+      columns.forEach(c => { html += '<td>' + escapeHtml(wfStringify(row[c])) + '</td>'; });
+      html += '</tr>';
+    });
+    html += '</tbody></table>';
+    return html;
+  }
+
+  if (shape.type === 'comparison') {
+    const keys = shape.objectKeys;
+    const allFields = new Set();
+    keys.forEach(k => { if (output[k]) Object.keys(output[k]).forEach(f => allFields.add(f)); });
+
+    // Show non-object metrics above
+    const metricKeys = (shape.metricKeys || []).filter(k => output[k] != null);
+    if (metricKeys.length > 0) {
+      html += '<div style="margin-bottom:8px;">';
+      metricKeys.forEach(k => {
+        html += '<div class="wf-output-metric"><div class="wf-output-text-label">' + escapeHtml(k) + '</div><div class="wf-output-metric-val">' + escapeHtml(wfStringify(output[k])) + '</div></div>';
+      });
+      html += '</div>';
+    }
+
+    html += '<table class="wf-output-table"><thead><tr><th></th>';
+    keys.forEach(k => { html += '<th>' + escapeHtml(String(k)) + '</th>'; });
+    html += '</tr></thead><tbody>';
+    allFields.forEach(f => {
+      html += '<tr><td style="font-weight:600;">' + escapeHtml(f) + '</td>';
+      keys.forEach(k => { html += '<td>' + escapeHtml(wfStringify(output[k] && output[k][f])) + '</td>'; });
+      html += '</tr>';
+    });
+    html += '</tbody></table>';
+    return html;
+  }
+
+  // Fallback: key-value table
+  html += '<table class="wf-output-table"><thead><tr><th>Field</th><th>Value</th></tr></thead><tbody>';
+  Object.entries(output).forEach(function(entry) {
+    html += '<tr><td>' + escapeHtml(entry[0]) + '</td><td>' + escapeHtml(wfStringify(entry[1])) + '</td></tr>';
+  });
+  html += '</tbody></table>';
+  return html;
+}
+
+function wfRenderText(output, hints) {
+  const shape = wfDetectOutputShape(output);
+  if (shape.type === 'scalar') return '<div style="font-size:12px;color:var(--text);">' + escapeHtml(String(output || '')) + '</div>';
+  let html = '';
+  if (hints.title) {
+    html += '<div style="font-weight:600;font-size:13px;color:var(--accent);margin-bottom:8px;">' + escapeHtml(hints.title) + '</div>';
+  }
+
+  // Metrics
+  const metricKeys = Object.keys(output).filter(k =>
+    output[k] != null && (typeof output[k] !== 'object' || typeof output[k] === 'boolean') &&
+    (typeof output[k] !== 'string' || output[k].length <= 100)
+  );
+  if (metricKeys.length > 0) {
+    html += '<div style="margin-bottom:10px;">';
+    metricKeys.forEach(k => {
+      html += '<div class="wf-output-metric"><div class="wf-output-text-label">' + escapeHtml(k) + '</div><div class="wf-output-metric-val">' + escapeHtml(wfStringify(output[k])) + '</div></div>';
+    });
+    html += '</div>';
+  }
+
+  // Object fields (comparison-like)
+  Object.keys(output).forEach(k => {
+    const v = output[k];
+    if (v != null && typeof v === 'object' && !Array.isArray(v)) {
+      html += '<div class="wf-output-text-field"><div class="wf-output-text-label">' + escapeHtml(k) + '</div>';
+      Object.entries(v).forEach(function(entry) {
+        html += '<div style="font-size:12px;margin-left:8px;"><span style="color:var(--text-muted);">' + escapeHtml(entry[0]) + ':</span> <span style="color:#40E0FF;">' + escapeHtml(wfStringify(entry[1])) + '</span></div>';
+      });
+      html += '</div>';
+    }
+  });
+
+  // Text fields
+  Object.keys(output).forEach(k => {
+    if (typeof output[k] === 'string' && output[k].length > 100) {
+      html += '<div class="wf-output-text-field"><div class="wf-output-text-label">' + escapeHtml(k) + '</div><div class="wf-output-text-value">' + escapeHtml(output[k]) + '</div></div>';
+    }
+  });
+
+  // Arrays
+  Object.keys(output).forEach(k => {
+    if (Array.isArray(output[k])) {
+      html += '<div class="wf-output-text-field"><div class="wf-output-text-label">' + escapeHtml(k) + ' (' + output[k].length + ' items)</div>';
+      html += '<div class="wf-inspector-code" style="max-height:100px;overflow:auto;">' + escapeHtml(JSON.stringify(output[k], null, 2)) + '</div></div>';
+    }
+  });
+
+  return html || '<div class="wf-inspector-code" style="color:#40E0FF;">' + escapeHtml(JSON.stringify(output, null, 2)) + '</div>';
+}
+
+function wfOutputToMarkdown(output, hints) {
+  let md = '';
+  if (hints.title) md += '## ' + hints.title + '\n\n';
+  else md += '## Workflow Output\n\n';
+  Object.entries(output).forEach(function(entry) {
+    const k = entry[0], v = entry[1];
+    if (v == null) return;
+    if (typeof v !== 'object' || typeof v === 'boolean') {
+      if (typeof v !== 'string' || v.length <= 100) {
+        md += '- **' + k + ':** ' + wfStringify(v) + '\n';
+      }
+    }
+  });
+  md += '\n';
+  // Arrays as tables
+  Object.entries(output).forEach(function(entry) {
+    const k = entry[0], v = entry[1];
+    if (!Array.isArray(v) || v.length === 0 || typeof v[0] !== 'object') return;
+    const cols = hints.columns || Object.keys(v[0]);
+    md += '### ' + k + '\n\n| ' + cols.join(' | ') + ' |\n| ' + cols.map(function() { return '---'; }).join(' | ') + ' |\n';
+    v.forEach(function(row) { md += '| ' + cols.map(function(c) { return wfStringify(row[c]); }).join(' | ') + ' |\n'; });
+    md += '\n';
+  });
+  // Comparison objects
+  const objKeys = Object.keys(output).filter(function(k) { return output[k] != null && typeof output[k] === 'object' && !Array.isArray(output[k]); });
+  if (objKeys.length >= 2) {
+    const allFields = new Set();
+    objKeys.forEach(function(k) { Object.keys(output[k]).forEach(function(f) { allFields.add(f); }); });
+    md += '| | ' + objKeys.join(' | ') + ' |\n| --- | ' + objKeys.map(function() { return '---'; }).join(' | ') + ' |\n';
+    allFields.forEach(function(f) {
+      md += '| **' + f + '** | ' + objKeys.map(function(k) { return wfStringify(output[k][f]); }).join(' | ') + ' |\n';
+    });
+    md += '\n';
+  }
+  // Long text
+  Object.entries(output).forEach(function(entry) {
+    if (typeof entry[1] === 'string' && entry[1].length > 100) {
+      md += '### ' + entry[0] + '\n\n' + entry[1] + '\n\n';
+    }
+  });
+  return md;
+}
+
+function wfChangeOutputFormat(format) {
+  wfState.outputFormat = format;
+  const r = wfState.executionResults._done;
+  if (!r) return;
+  const hints = r.formatters || {};
+  const effectiveFormat = format === 'auto' ? wfAutoFormat(r.output) : format;
+  const container = document.getElementById('wfOutputContent');
+  if (!container) return;
+  let html = '<div style="font-size:11px;color:var(--text-muted);margin-bottom:6px;">Completed in ' + r.totalTimeMs + 'ms</div>';
+  html += wfRenderOutputAs(r.output, effectiveFormat, hints);
+  html += '<button class="wf-output-expand-btn" data-expand-step="_done">&#x2922; Expand</button>';
+  container.innerHTML = html;
+  wfBindExpandButtons(container);
+}
+
+function wfChangeStepFormat(stepId, format) {
+  const result = wfState.executionResults[stepId];
+  if (!result || !result.output) return;
+  const container = document.getElementById('wf-step-result-' + stepId);
+  if (!container) return;
+  if (format === 'json') {
+    container.innerHTML = '<div class="wf-inspector-code" style="max-height:120px;overflow:auto;">' + escapeHtml(JSON.stringify(result.output, null, 2)) + '</div>';
+  } else {
+    container.innerHTML = wfRenderOutputAs(result.output, format, {});
+  }
+}
+
 // escapeHtml is already defined globally — reuse it
 
 // ── Toolbar helpers ──
@@ -14783,6 +16482,31 @@ function wfStopExecution(reason) {
   wfUpdateInspector();
 }
 
+// ── Workflow Input Cache (localStorage) ──
+
+function wfSlugify(name) {
+  return String(name).toLowerCase().replace(/[\s_]+/g, '-').replace(/[^a-z0-9-]/g, '').replace(/-+/g, '-').replace(/^-|-$/g, '');
+}
+
+function wfGetInputCache(workflowName) {
+  try {
+    const slug = wfSlugify(workflowName);
+    if (!slug) return {};
+    const raw = localStorage.getItem('vai-workflow-inputs-' + slug);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) ? parsed : {};
+  } catch { return {}; }
+}
+
+function wfSaveInputCache(workflowName, inputs) {
+  try {
+    const slug = wfSlugify(workflowName);
+    if (!slug || !inputs) return;
+    localStorage.setItem('vai-workflow-inputs-' + slug, JSON.stringify(inputs));
+  } catch { /* localStorage may be full or disabled */ }
+}
+
 // ── Input Modal (pre-execution) ──
 
 function wfShowInputModal() {
@@ -14792,13 +16516,15 @@ function wfShowInputModal() {
   if (entries.length === 0) { wfExecuteWithInputs({}); return; }
 
   document.getElementById('wfInputModalTitle').textContent = (def.name || 'Workflow') + ' Inputs';
+  const cached = wfGetInputCache(def.name || '');
   let html = '';
   for (const [key, spec] of entries) {
     const req = spec.required ? ' <span style="color:#e74c3c">*</span>' : '';
     const desc = spec.description ? `<div class="wf-input-modal-desc">${escapeHtml(spec.description)}</div>` : '';
-    // Pre-fill from inspector fields if available, then from defaults
+    // Pre-fill priority: 1) inspector field, 2) cached from last run, 3) spec default
     const inspectorEl = document.getElementById('wf-input-' + key);
     let prefill = inspectorEl ? inspectorEl.value : '';
+    if (!prefill && key in cached) prefill = String(cached[key]);
     if (!prefill && spec.default !== undefined) prefill = String(spec.default);
     const placeholder = spec.type === 'number' ? 'number' : (spec.type || 'string');
     html += `<div class="wf-input-modal-field">
@@ -14869,6 +16595,9 @@ function wfInputModalSubmit() {
 
   if (hasError) return;
 
+  // Cache inputs for next run
+  wfSaveInputCache(def.name || '', inputs);
+
   // Also update inspector fields to keep them in sync
   for (const [key, val] of Object.entries(inputs)) {
     const inspEl = document.getElementById('wf-input-' + key);
@@ -14897,10 +16626,131 @@ async function wfExecute() {
     return;
   }
 
+  // Check for empty required step inputs and prompt the user
+  const missing = wfFindMissingStepInputs(def);
+  if (missing.length > 0) {
+    wfShowStepInputModal(missing);
+    return;
+  }
+
   // No inputs needed, execute directly
   wfExecuteWithInputs({});
 }
 
+/**
+ * Scan all steps for required inputs that are empty (and not filled by template refs).
+ * Returns array of { stepId, stepName, tool, key, placeholder, type } for each missing input.
+ */
+function wfFindMissingStepInputs(def) {
+  const missing = [];
+  for (const step of (def.steps || [])) {
+    const inputDefs = WF_INPUT_DEFS[step.tool] || [];
+    for (const d of inputDefs) {
+      if (!d.required) continue;
+      const val = step.inputs?.[d.key];
+      // Skip if already filled (non-empty string, or any non-string value)
+      if (val !== undefined && val !== null && val !== '') continue;
+      missing.push({
+        stepId: step.id,
+        stepName: step.name || step.id,
+        tool: step.tool,
+        key: d.key,
+        placeholder: d.placeholder || '',
+        type: d.type || 'text',
+      });
+    }
+  }
+  return missing;
+}
+
+/**
+ * Show a modal prompting the user for missing required step inputs before execution.
+ * Reuses the existing input modal UI.
+ */
+function wfShowStepInputModal(missing) {
+  document.getElementById('wfInputModalTitle').textContent = 'Required Inputs';
+  let html = '';
+  let lastStepId = '';
+
+  for (const m of missing) {
+    // Group header per step
+    if (m.stepId !== lastStepId) {
+      const meta = WF_NODE_META[m.tool] || {};
+      html += `<div style="margin-top:${lastStepId ? '16' : '0'}px;margin-bottom:8px;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);display:flex;align-items:center;gap:6px;">
+        <span style="color:${meta.color || 'var(--text-muted)'}">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${meta.icon || WF_FALLBACK_ICON}"/></svg>
+        </span>
+        ${escapeHtml(m.stepName)}
+      </div>`;
+      lastStepId = m.stepId;
+    }
+
+    const inputId = 'wf-stepin-' + m.stepId + '-' + m.key;
+    html += `<div class="wf-input-modal-field">
+      <div class="wf-input-modal-label">${escapeHtml(m.key)} <span style="color:#e74c3c">*</span></div>
+      <input class="wf-input-modal-input" id="${inputId}" placeholder="${escapeHtml(m.placeholder)}" data-step-id="${escapeHtml(m.stepId)}" data-key="${escapeHtml(m.key)}" data-type="${m.type}">
+      <div class="wf-input-modal-error" id="${inputId}-err">This field is required</div>
+    </div>`;
+  }
+
+  document.getElementById('wfInputModalBody').innerHTML = html;
+
+  // Swap the footer button handler temporarily
+  const runBtn = document.querySelector('.wf-input-modal-run');
+  runBtn.textContent = 'Run Workflow';
+  runBtn.onclick = () => wfStepInputModalSubmit(missing);
+
+  document.getElementById('wfInputModalBackdrop').style.display = '';
+
+  // Focus first input
+  const firstId = 'wf-stepin-' + missing[0].stepId + '-' + missing[0].key;
+  const firstEl = document.getElementById(firstId);
+  if (firstEl) setTimeout(() => firstEl.focus(), 50);
+}
+
+function wfStepInputModalSubmit(missing) {
+  let hasError = false;
+
+  for (const m of missing) {
+    const inputId = 'wf-stepin-' + m.stepId + '-' + m.key;
+    const el = document.getElementById(inputId);
+    const errEl = document.getElementById(inputId + '-err');
+    if (!el) continue;
+
+    el.classList.remove('error');
+    if (errEl) errEl.style.display = 'none';
+
+    const val = el.value.trim();
+    if (!val) {
+      el.classList.add('error');
+      if (errEl) { errEl.textContent = 'This field is required'; errEl.style.display = ''; }
+      hasError = true;
+      continue;
+    }
+
+    // Write the value into the step definition
+    const def = wfState.activeWorkflow;
+    const step = def.steps.find(s => s.id === m.stepId);
+    if (step) {
+      if (!step.inputs) step.inputs = {};
+      step.inputs[m.key] = val;
+    }
+  }
+
+  if (hasError) return;
+
+  // Restore the default modal handler
+  const runBtn = document.querySelector('.wf-input-modal-run');
+  runBtn.onclick = () => wfInputModalSubmit();
+
+  wfCloseInputModal();
+
+  // Refresh inspector if a step is selected
+  if (wfState.selectedNodeId) wfUpdateInspector();
+
+  wfExecuteWithInputs({});
+}
+
 async function wfExecuteWithInputs(inputs) {
   const def = wfState.activeWorkflow;
   if (!def || wfState.executing) return;
@@ -14972,6 +16822,16 @@ async function wfExecuteWithInputs(inputs) {
               timeMs: data.timeMs,
               summary: data.summary || '',
             };
+            // Update cost tracker with usage data from this step
+            if (data._usage && Array.isArray(data._usage)) {
+              data._usage.forEach(u => {
+                if (u.op === 'llm') {
+                  CostTracker.addLLMOperation('wf-' + u.op, u.model, u.inputTokens || 0, u.outputTokens || 0);
+                } else {
+                  CostTracker.addOperation('wf-' + u.op, u.model, u.tokens || 0);
+                }
+              });
+            }
             wfRefreshNodes();
             if (wfState.selectedNodeId === data.stepId) wfUpdateInspector();
           } else if (currentEvent === 'step_skip') {
@@ -14988,6 +16848,7 @@ async function wfExecuteWithInputs(inputs) {
             if (wfState.selectedNodeId === data.stepId) wfUpdateInspector();
           } else if (currentEvent === 'done') {
             wfState.executionResults._done = data;
+            wfState.outputFormat = 'auto';
             if (!wfState.selectedNodeId) wfUpdateInspector();
           } else if (currentEvent === 'error') {
             hasError = true;
@@ -15074,10 +16935,49 @@ function wfResetExecution() {
   wfUpdateInspector();
 }
 
+async function wfRelayout() {
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+
+  // If layers/graph aren't populated yet (e.g. builder mode), fetch them
+  if (!wfState.layers || !wfState.graph || wfState.layers.length === 0) {
+    try {
+      const res = await fetch('/api/workflows/plan', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ definition: def }),
+      });
+      const data = await res.json();
+      if (data.layers) wfState.layers = data.layers;
+      if (data.graph) wfState.graph = data.graph;
+    } catch (err) {
+      console.warn('Relayout: failed to fetch plan:', err.message);
+      return;
+    }
+  }
+
+  if (!wfState.layers || wfState.layers.length === 0) return;
+
+  const positions = wfAutoLayout(wfState.layers, wfState.graph || {});
+
+  // Preserve positions for orphan nodes not in any layer (builder mode)
+  if (def.steps) {
+    for (const step of def.steps) {
+      if (!positions[step.id] && wfState.nodePositions[step.id]) {
+        positions[step.id] = wfState.nodePositions[step.id];
+      }
+    }
+  }
+
+  wfState.nodePositions = positions;
+  wfRefreshNodes();
+  wfFitToView();
+}
+
 // ── Output Modal ──
 let wfOutputModalData = '';
 
-function wfOpenOutputModal(title, content) {
+function wfOpenOutputModal(title, content, format, outputObj, hints) {
   wfOutputModalData = content;
   const backdrop = document.getElementById('wfOutputModalBackdrop');
   const titleEl = document.getElementById('wfOutputModalTitle');
@@ -15085,8 +16985,14 @@ function wfOpenOutputModal(title, content) {
   const copyLabel = document.getElementById('wfOutputCopyLabel');
   if (!backdrop || !bodyEl) return;
   titleEl.textContent = title || 'Output';
-  bodyEl.textContent = content;
   copyLabel.textContent = 'Copy';
+
+  // Rich rendering if format + output object provided
+  if (format && outputObj && format !== 'json') {
+    bodyEl.innerHTML = wfRenderOutputAs(outputObj, format, hints || {});
+  } else {
+    bodyEl.textContent = content;
+  }
   backdrop.style.display = 'flex';
 }
 
@@ -15325,7 +17231,7 @@ const WF_INPUT_DEFS = {
   search:      [{ key: 'query', type: 'text', required: true, placeholder: 'Search query' }, { key: 'collection', type: 'text', required: false }, { key: 'db', type: 'text', required: false }, { key: 'limit', type: 'number', required: false, placeholder: '10' }, { key: 'filter', type: 'json', required: false, placeholder: '{}' }],
   rerank:      [{ key: 'query', type: 'text', required: true }, { key: 'documents', type: 'json', required: true, placeholder: '["doc1","doc2"]' }, { key: 'model', type: 'text', required: false, placeholder: 'rerank-2.5' }],
   ingest:      [{ key: 'text', type: 'textarea', required: true }, { key: 'collection', type: 'text', required: false }, { key: 'db', type: 'text', required: false }, { key: 'source', type: 'text', required: false }, { key: 'chunkSize', type: 'number', required: false, placeholder: '512' }, { key: 'chunkStrategy', type: 'select', required: false, options: ['fixed','sentence','paragraph','recursive','markdown'] }],
-  embed:       [{ key: 'text', type: 'text', required: true, placeholder: 'Text to embed' }, { key: 'model', type: 'text', required: false, placeholder: 'voyage-3-large' }, { key: 'inputType', type: 'select', required: false, options: ['document','query'] }],
+  embed:       [{ key: 'text', type: 'text', required: true, placeholder: 'Text to embed' }, { key: 'model', type: 'text', required: false, placeholder: 'voyage-4-large' }, { key: 'inputType', type: 'select', required: false, options: ['document','query'] }],
   similarity:  [{ key: 'text1', type: 'text', required: true }, { key: 'text2', type: 'text', required: true }, { key: 'model', type: 'text', required: false }],
   collections: [{ key: 'db', type: 'text', required: false }],
   models:      [{ key: 'category', type: 'select', required: false, options: ['embedding','rerank','all'] }],
@@ -16111,10 +18017,9 @@ function wfEdgeDropOnInput(toId) {
   if (connected) {
     wfState.dirtyFlag = true;
     wfBuildGraph();
-    wfRelayout();
     wfRefreshNodes();
     if (wfState.selectedNodeId === toId) wfUpdateInspector();
-    
+
     // Trigger draft validation immediately on edge connection
     wfTriggerDraftValidation(0);
   }
@@ -16125,42 +18030,9 @@ function wfEdgeDropOnInput(toId) {
   if (el) el.remove();
 }
 
-// ── Builder: Relayout via topological sort ──
-async function wfRelayout() {
-  const def = wfState.activeWorkflow;
-  if (!def || def.steps.length === 0) return;
-
-  try {
-    const res = await fetch('/api/workflows/plan', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(def),
-    });
-    const data = await res.json();
-    if (data.layers && data.layers.length > 0) {
-      wfState.layers = data.layers;
-      // Reposition nodes based on layers
-      const positions = {};
-      data.layers.forEach((layer, li) => {
-        layer.forEach((stepId, ni) => {
-          positions[stepId] = {
-            x: WF_PAD + li * WF_LAYER_GAP,
-            y: WF_PAD + ni * (WF_NODE_H + WF_NODE_GAP),
-          };
-        });
-      });
-      // Keep orphan nodes (not in any layer) at their current position
-      for (const step of def.steps) {
-        if (!positions[step.id] && wfState.nodePositions[step.id]) {
-          positions[step.id] = wfState.nodePositions[step.id];
-        }
-      }
-      wfState.nodePositions = positions;
-    }
-  } catch (err) {
-    console.warn('Relayout failed:', err.message);
-  }
-}
+/// ── Builder: Relayout via auto-layout algorithm ──
+// (delegates to wfRelayout defined earlier, which uses wfAutoLayout for
+// barycenter crossing minimization + neighbor-aware placement)
 
 // ── Docs shortcut (F1) ──
 const DOCS_URLS = {
@@ -16212,6 +18084,7 @@ document.addEventListener('keydown', (e) => {
   if (e.key === '+' || e.key === '=') { wfZoom(1); e.preventDefault(); }
   else if (e.key === '-') { wfZoom(-1); e.preventDefault(); }
   else if (e.key === '0') { wfFitToView(); e.preventDefault(); }
+  else if (e.key === 'l' || e.key === 'L') { wfRelayout(); e.preventDefault(); }
   else if (e.key === 'Escape') { wfDeselectNode(); e.preventDefault(); }
   else if (e.key === 'ArrowLeft')  { wfState.panX -= PAN_STEP / wfState.zoom; wfApplyViewBox(); e.preventDefault(); }
   else if (e.key === 'ArrowRight') { wfState.panX += PAN_STEP / wfState.zoom; wfApplyViewBox(); e.preventDefault(); }
@@ -18184,6 +20057,7 @@ const staticCommandRegistry = [
   { id: 'nav-generate', label: 'Generate', description: 'Code generation and templates', category: 'navigation', keywords: ['code', 'template', 'scaffold'], icon: '💻', shortcut: '⌘6', priority: 1, execute: () => switchTab('generate') },
   { id: 'nav-chat', label: 'Chat', description: 'Chat with your knowledge base', category: 'navigation', keywords: ['conversation', 'ask', 'rag', 'talk'], icon: '💬', shortcut: '⌘7', priority: 1, execute: () => switchTab('chat') },
   { id: 'nav-workflows', label: 'Workflows', description: 'Visual workflow canvas', category: 'navigation', keywords: ['pipeline', 'dag', 'canvas'], icon: '🔄', shortcut: '⌘8', priority: 1, execute: () => switchTab('workflows') },
+  { id: 'nav-models', label: 'Models', description: 'Voyage AI model catalog and specs', category: 'navigation', keywords: ['model', 'voyage', 'catalog', 'specs', 'embedding', 'rerank', 'pricing'], icon: '🤖', priority: 1, execute: () => switchTab('models') },
   { id: 'nav-benchmark', label: 'Benchmark', description: 'Model comparison on your data', category: 'navigation', keywords: ['performance', 'test', 'evaluate', 'benchmark'], icon: '📊', shortcut: '⌘9', priority: 1, execute: () => switchTab('benchmark') },
   { id: 'nav-explore', label: 'Explore', description: 'Embedding space visualization', category: 'navigation', keywords: ['pca', 'tsne', 'visualize', 'scatter'], icon: '🎯', shortcut: '⌘0', priority: 1, execute: () => switchTab('explore') },
   { id: 'nav-about', label: 'About', description: 'Version and project information', category: 'navigation', keywords: ['version', 'info', 'credits'], icon: 'ℹ️', priority: 5, execute: () => switchTab('about') },
@@ -18239,7 +20113,7 @@ const staticCommandRegistry = [
   { id: 'explain-reranking', label: 'Learn: Reranking', description: 'Two-stage retrieval with rerankers', category: 'explainer', keywords: ['reranking', 'two-stage', 'retrieval', 'precision'], icon: '📚', priority: 7, execute: () => switchTab('explore') },
   { id: 'explain-vector-search', label: 'Learn: Vector Search', description: 'MongoDB Atlas Vector Search', category: 'explainer', keywords: ['vector', 'search', 'atlas', 'similarity', 'knn'], icon: '📚', priority: 7, execute: () => switchTab('explore') },
   { id: 'explain-rag', label: 'Learn: RAG Pipelines', description: 'Retrieval-Augmented Generation', category: 'explainer', keywords: ['rag', 'retrieval', 'augmented', 'generation', 'pipeline'], icon: '📚', priority: 7, execute: () => switchTab('explore') },
-  { id: 'explain-models', label: 'Learn: Voyage AI Models', description: 'Choosing the right model', category: 'explainer', keywords: ['models', 'voyage-4', 'large', 'lite', 'domain'], icon: '📚', priority: 7, execute: () => switchTab('explore') },
+  { id: 'explain-models', label: 'Learn: Voyage AI Models', description: 'Choosing the right model', category: 'explainer', keywords: ['models', 'voyage-4', 'large', 'lite', 'domain'], icon: '📚', priority: 7, execute: () => switchTab('models') },
   { id: 'explain-quantization', label: 'Learn: Quantization', description: 'Reduce storage costs with lower-precision embeddings', category: 'explainer', keywords: ['quantization', 'int8', 'ubinary', 'compression', 'storage'], icon: '📚', priority: 7, execute: () => switchTab('explore') }
 ];