voyageai-cli 1.27.0 → 1.29.0

package/src/playground/index.html

@@ -992,8 +992,9 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 
 .explore-card-icon {
-  font-size: 28px;
   margin-bottom: 8px;
+  color: var(--accent, #00D4AA);
+  opacity: 0.85;
 }
 .explore-card-title {
   font-size: 16px;
@@ -1056,7 +1057,7 @@ select:focus { outline: none; border-color: var(--accent); }
   padding: 24px 28px 16px;
   border-bottom: 1px solid var(--border);
 }
-.explore-modal-icon { font-size: 32px; }
+.explore-modal-icon { color: var(--accent, #00D4AA); }
 .explore-modal-title {
   font-size: 18px;
   font-weight: 600;
@@ -1778,6 +1779,43 @@ select:focus { outline: none; border-color: var(--accent); }
   margin-bottom: 8px;
 }
 .about-text { font-size: 14px; line-height: 1.8; color: var(--text); }
+.about-changelog { font-size: 13px; line-height: 1.6; }
+.about-changelog details {
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  padding: 0;
+}
+.about-changelog details:last-child { border-bottom: none; }
+.about-changelog summary {
+  padding: 10px 0;
+  cursor: pointer;
+  color: var(--text);
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.about-changelog summary::before {
+  content: '';
+  display: inline-block;
+  width: 5px; height: 5px;
+  border-right: 1.5px solid var(--accent, #00D4AA);
+  border-bottom: 1.5px solid var(--accent, #00D4AA);
+  transform: rotate(-45deg);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+.about-changelog details[open] > summary::before {
+  transform: rotate(45deg);
+}
+.about-changelog summary::-webkit-details-marker { display: none; }
+.about-changelog summary:hover { color: var(--accent-text); }
+.about-changelog p {
+  margin: 0 0 10px 13px;
+  color: var(--text-muted);
+  font-size: 12.5px;
+  line-height: 1.6;
+}
+[data-theme="light"] .about-changelog details { border-color: rgba(0,0,0,0.08); }
 .about-text a { color: var(--blue); text-decoration: none; }
 .about-text a:hover { text-decoration: underline; }
 .about-disclaimer {
@@ -3030,6 +3068,24 @@ select:focus { outline: none; border-color: var(--accent); }
   font-size: 10px; color: var(--text-muted); margin-top: 4px;
   display: flex; gap: 8px;
 }
+/* Collapsible examples section */
+.wf-library-section { padding: 0; margin-top: 4px; }
+.wf-library-section-toggle {
+  display: flex; align-items: center; gap: 6px;
+  width: 100%; padding: 8px 12px; border: none; background: none;
+  color: var(--text-muted); font-size: 11px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer;
+  transition: color 0.15s;
+}
+.wf-library-section-toggle:hover { color: var(--text); }
+.wf-library-section-toggle .arrow {
+  font-size: 8px; transition: transform 0.2s; display: inline-block;
+}
+.wf-library-section-toggle.open .arrow { transform: rotate(90deg); }
+.wf-library-category {
+  font-size: 10px; font-weight: 600; color: var(--text-muted);
+  padding: 8px 12px 2px; text-transform: uppercase; letter-spacing: 0.5px;
+}
 .wf-canvas-area {
   flex: 1; position: relative; overflow: hidden;
   background: var(--bg);
@@ -3060,9 +3116,263 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 .wf-canvas-toolbar .wf-run-btn:hover { opacity: 0.9; }
 .wf-canvas-toolbar .wf-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.wf-canvas-toolbar .wf-new-btn {
+  width: auto; padding: 0 12px; gap: 4px;
+  font-weight: 600; font-size: 12px;
+  background: var(--bg-card); border: 1px solid var(--accent);
+  color: var(--accent);
+}
+.wf-canvas-toolbar .wf-new-btn:hover { background: var(--accent); color: #fff; }
+.wf-canvas-toolbar .wf-edit-btn {
+  width: auto; padding: 0 12px; gap: 4px;
+  font-weight: 600; font-size: 12px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  color: var(--text-muted);
+}
+.wf-canvas-toolbar .wf-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
+.wf-canvas-toolbar .wf-edit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.wf-canvas-toolbar .wf-edit-btn:disabled:hover { border-color: var(--border); color: var(--text-muted); }
 .wf-toolbar-sep {
   width: 1px; height: 20px; background: var(--border); margin: 0 2px;
 }
+/* Library / Palette tabs */
+.wf-library-tabs {
+  display: flex; gap: 2px; width: 100%;
+  background: var(--bg-input); border-radius: 6px; padding: 2px;
+}
+.wf-lib-tab {
+  flex: 1; padding: 5px 0; border: none; border-radius: 4px;
+  background: transparent; color: var(--text-muted); cursor: pointer;
+  font-size: 11px; font-weight: 600; font-family: var(--font);
+  transition: background 0.15s, color 0.15s; text-align: center;
+}
+.wf-lib-tab.active { background: var(--accent); color: #fff; }
+.wf-lib-tab:hover:not(.active) { color: var(--text); }
+/* Palette items */
+.wf-palette-category { margin-bottom: 8px; }
+.wf-palette-category-title {
+  font-size: 10px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.5px; color: var(--text-muted);
+  padding: 4px 12px; margin-bottom: 2px;
+}
+.wf-palette-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 12px; border-radius: 6px; cursor: grab;
+  font-size: 12px; color: var(--text); transition: background 0.15s;
+}
+.wf-palette-item:hover { background: var(--bg-card); }
+.wf-palette-item:active { cursor: grabbing; }
+.wf-palette-icon { width: 20px; text-align: center; display: flex; align-items: center; justify-content: center; }
+.wf-palette-label { font-weight: 500; }
+
+/* ── Workflow Store ── */
+.wf-store-overlay {
+  position: absolute; inset: 0; background: var(--bg); z-index: 50;
+  display: flex; flex-direction: column;
+  opacity: 0; transform: scale(0.98); pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.wf-store-overlay.open {
+  opacity: 1; transform: scale(1); pointer-events: all;
+}
+.wf-store-overlay::before {
+  content: ''; position: absolute; top: -150px; left: 50%; transform: translateX(-50%);
+  width: 700px; height: 500px;
+  background: radial-gradient(ellipse, rgba(0,212,170,.05) 0%, rgba(64,224,255,.02) 40%, transparent 70%);
+  pointer-events: none; z-index: 0;
+}
+.wf-store-header {
+  padding: 14px 20px; border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; flex-shrink: 0;
+}
+.wf-store-back {
+  display: flex; align-items: center; gap: 6px; background: none; border: none;
+  color: var(--text-muted); font-family: var(--font); font-size: 13px; cursor: pointer;
+  padding: 6px 10px; border-radius: 6px; transition: all 0.15s;
+}
+.wf-store-back:hover { background: var(--bg-surface); color: var(--accent); }
+.wf-store-title-area { display: flex; align-items: center; gap: 8px; flex: 1; }
+.wf-store-title { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
+.wf-store-badge { font-family: var(--mono); font-size: 9px; padding: 3px 8px; background: rgba(0,212,170,.15); border: 1px solid rgba(0,212,170,.2); border-radius: 100px; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }
+.wf-store-search-wrap { position: relative; width: 220px; }
+.wf-store-search {
+  width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
+  padding: 8px 12px 8px 30px; font-family: var(--font); font-size: 13px; color: var(--text); outline: none;
+  transition: border-color 0.15s;
+}
+.wf-store-search:focus { border-color: var(--accent); }
+.wf-store-search::placeholder { color: var(--text-muted); }
+.wf-store-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; pointer-events: none; }
+.wf-store-sort {
+  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
+  padding: 8px 10px; font-family: var(--font); font-size: 12px; color: var(--text-muted); outline: none; cursor: pointer;
+}
+.wf-store-body { flex: 1; overflow-y: auto; position: relative; z-index: 1; }
+.wf-store-body::-webkit-scrollbar { width: 6px; }
+.wf-store-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+.wf-store-inner { max-width: 1100px; margin: 0 auto; padding: 20px 24px 40px; }
+.wf-store-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 20px; }
+.wf-store-chip {
+  padding: 6px 14px; background: none; border: 1px solid var(--border); border-radius: 100px;
+  font-family: var(--font); font-size: 12px; color: var(--text-muted); cursor: pointer;
+  transition: all 0.15s; white-space: nowrap;
+}
+.wf-store-chip:hover { border-color: var(--text-dim); color: var(--text-dim); }
+.wf-store-chip.active { background: rgba(0,212,170,.15); border-color: rgba(0,212,170,.3); color: var(--accent); }
+.wf-store-section-label {
+  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
+  text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;
+  display: flex; align-items: center; gap: 8px;
+}
+.wf-store-count { background: var(--bg-surface); padding: 2px 7px; border-radius: 100px; font-size: 10px; }
+/* Featured cards */
+.wf-store-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
+.wf-store-featured-card {
+  border-radius: 14px; padding: 22px 20px 18px; position: relative; overflow: hidden;
+  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; min-height: 150px;
+  display: flex; flex-direction: column; justify-content: flex-end;
+}
+.wf-store-featured-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px -8px rgba(0,0,0,.5); }
+.wf-store-featured-card::before {
+  content: ''; position: absolute; inset: 0;
+  background: linear-gradient(180deg, transparent 15%, rgba(0,0,0,.65) 100%); z-index: 1;
+}
+.wf-store-featured-content { position: relative; z-index: 2; }
+.wf-store-featured-content h3 { font-family: var(--mono); font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #fff; }
+.wf-store-featured-content p { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.wf-store-featured-icon { position: absolute; top: 14px; left: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
+.wf-store-featured-icon svg { width: 20px; height: 20px; color: #fff; }
+.wf-store-featured-dl { position: absolute; top: 12px; right: 14px; z-index: 2; font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.5); }
+.wf-store-featured-author { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.55); }
+.wf-store-featured-avatar { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; font-weight: 700; overflow: hidden; }
+.wf-store-featured-avatar img { width: 100%; height: 100%; object-fit: cover; }
+/* Workflow cards grid */
+.wf-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
+.wf-store-card {
+  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px;
+  padding: 16px; cursor: pointer; transition: all 0.15s; position: relative; overflow: hidden;
+}
+.wf-store-card:hover { border-color: var(--text-dim); background: var(--bg-card); transform: translateY(-1px); }
+.wf-store-card-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity 0.15s; }
+.wf-store-card:hover .wf-store-card-bar { opacity: 1; }
+.wf-store-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
+.wf-store-card-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.wf-store-card-icon svg { width: 16px; height: 16px; }
+.wf-store-card-name-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.wf-store-card-name { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); }
+.wf-store-card-badges { display: flex; gap: 4px; }
+.wf-store-badge-official { font-family: var(--mono); font-size: 9px; padding: 2px 7px; border-radius: 100px; background: rgba(0,212,170,.1); color: var(--accent); border: 1px solid rgba(0,212,170,.15); white-space: nowrap; }
+.wf-store-badge-installed { font-family: var(--mono); font-size: 9px; padding: 2px 7px; border-radius: 100px; background: rgba(16,185,129,.1); color: #10B981; border: 1px solid rgba(16,185,129,.15); white-space: nowrap; }
+.wf-store-card-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.wf-store-card-author { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
+.wf-store-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.wf-store-card-cat { font-family: var(--mono); font-size: 10px; padding: 2px 8px; background: var(--bg-card); border-radius: 100px; color: var(--text-muted); }
+.wf-store-card-dots { display: flex; gap: 2px; }
+.wf-store-card-dot { width: 7px; height: 7px; border-radius: 50%; opacity: 0.65; }
+.wf-store-card-complexity { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
+.wf-store-card-downloads { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
+.wf-store-empty { text-align: center; padding: 40px 0; color: var(--text-muted); }
+.wf-store-empty p { font-family: var(--mono); font-size: 13px; }
+/* Detail modal */
+.wf-store-detail-bg {
+  position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
+  z-index: 200; display: flex; align-items: center; justify-content: center;
+  animation: wfStoreDetailFadeIn 0.12s ease-out; padding: 20px;
+}
+@keyframes wfStoreDetailFadeIn { from { opacity: 0; } }
+@keyframes wfStoreDetailSlideIn { from { transform: translateY(20px); opacity: 0; } }
+.wf-store-detail-panel {
+  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 18px;
+  width: 100%; max-width: 580px; max-height: 82vh; overflow-y: auto;
+  animation: wfStoreDetailSlideIn 0.18s ease-out;
+}
+.wf-store-detail-panel::-webkit-scrollbar { width: 4px; }
+.wf-store-detail-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+.wf-store-detail-hero { padding: 28px 28px 20px; border-radius: 18px 18px 0 0; position: relative; }
+.wf-store-detail-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, var(--bg-surface) 100%); border-radius: 18px 18px 0 0; }
+.wf-store-detail-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
+.wf-store-detail-hero-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.wf-store-detail-hero-icon svg { width: 26px; height: 26px; color: #fff; }
+.wf-store-detail-close {
+  position: absolute; top: 14px; right: 14px; z-index: 2; width: 28px; height: 28px;
+  border-radius: 50%; background: rgba(0,0,0,.35); border: none; color: #fff; font-size: 16px;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+}
+.wf-store-detail-close:hover { background: rgba(0,0,0,.55); }
+.wf-store-detail-name { font-family: var(--mono); font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; }
+.wf-store-detail-pkg { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.45); }
+.wf-store-detail-body { padding: 0 28px 28px; }
+.wf-store-detail-desc { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px; }
+.wf-store-detail-section { margin-bottom: 16px; }
+.wf-store-detail-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
+.wf-store-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+.wf-store-detail-stat { background: var(--bg-card); border-radius: 8px; padding: 12px; text-align: center; }
+.wf-store-detail-stat-val { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--text); }
+.wf-store-detail-stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
+.wf-store-detail-tools { display: flex; gap: 5px; flex-wrap: wrap; }
+.wf-store-detail-tool { padding: 4px 10px; border-radius: 100px; font-size: 11px; font-family: var(--mono); border: 1px solid; }
+.wf-store-detail-tags { display: flex; gap: 5px; flex-wrap: wrap; }
+.wf-store-detail-tag { padding: 4px 10px; background: var(--bg-card); border-radius: 100px; font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
+.wf-store-detail-install { margin-top: 20px; padding: 16px; background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border); }
+.wf-store-detail-cmd {
+  font-family: var(--mono); font-size: 12px; color: var(--accent); background: var(--bg);
+  padding: 10px 14px; border-radius: 6px; margin-top: 6px; display: flex; align-items: center;
+  justify-content: space-between; cursor: pointer; border: 1px solid var(--border);
+  transition: border-color 0.15s; overflow-x: auto; white-space: nowrap; gap: 10px;
+}
+.wf-store-detail-cmd:hover { border-color: var(--accent); }
+.wf-store-detail-cmd-hint { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
+.wf-store-detail-author { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
+.wf-store-detail-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-muted); font-weight: 700; overflow: hidden; flex-shrink: 0; }
+.wf-store-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.wf-store-detail-author-name { font-size: 13px; color: var(--text-dim); }
+.wf-store-detail-author-name a { color: var(--accent); text-decoration: none; }
+.wf-store-detail-author-name a:hover { text-decoration: underline; }
+.wf-store-detail-inputs-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--mono); }
+.wf-store-detail-inputs-table th { text-align: left; padding: 6px 10px; color: var(--text-muted); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
+.wf-store-detail-inputs-table td { padding: 6px 10px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
+.wf-store-detail-screenshots { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
+.wf-store-detail-screenshots img { height: 180px; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; }
+.wf-store-detail-actions { display: flex; gap: 8px; margin-top: 16px; }
+.wf-store-detail-btn {
+  flex: 1; padding: 10px; border-radius: 8px; font-family: var(--mono); font-size: 12px;
+  font-weight: 700; cursor: pointer; border: none; transition: all 0.15s; text-align: center;
+}
+.wf-store-detail-btn-primary { background: var(--accent); color: var(--bg); }
+.wf-store-detail-btn-primary:hover { filter: brightness(1.1); }
+.wf-store-detail-btn-secondary { background: var(--bg-card); color: var(--text-dim); border: 1px solid var(--border); }
+.wf-store-detail-btn-secondary:hover { background: var(--border); color: var(--text); }
+.wf-store-detail-btn-installed { background: rgba(16,185,129,.1); color: #10B981; border: 1px solid rgba(16,185,129,.2); cursor: default; }
+/* Store button in library header */
+.wf-store-btn {
+  width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent;
+  background: none; color: var(--text-muted); font-size: 14px; cursor: pointer;
+  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
+  flex-shrink: 0;
+}
+.wf-store-btn:hover { background: var(--bg-card); color: var(--accent); border-color: rgba(0,212,170,.15); }
+.wf-store-btn.active { color: var(--accent); }
+@media (max-width: 700px) {
+  .wf-store-featured-grid { grid-template-columns: 1fr; }
+  .wf-store-grid { grid-template-columns: 1fr; }
+}
+
+/* Builder port styles */
+.wf-port-builder { cursor: crosshair; transition: r 0.15s; pointer-events: all !important; }
+.wf-port-builder:hover { r: 9; filter: brightness(1.4); }
+.wf-inspector-delete-btn {
+  width: 100%; padding: 8px 0; border: none; border-radius: 6px;
+  background: var(--error); color: #fff; cursor: pointer;
+  font-size: 12px; font-weight: 600; margin-top: 12px;
+  transition: opacity 0.15s;
+}
+.wf-inspector-delete-btn:hover { opacity: 0.85; }
+.wf-validation-errors {
+  background: rgba(255,105,96,0.08); border: 1px solid var(--error);
+  border-radius: 6px; padding: 10px 12px; margin-bottom: 12px;
+  font-size: 11px; color: var(--error);
+}
+.wf-validation-errors ul { margin: 4px 0 0 16px; }
 /* Dry-run plan overlay */
 .wf-dryrun-overlay {
   position: absolute; top: 0; left: 0; right: 0; bottom: 0;
@@ -3107,7 +3417,7 @@ select:focus { outline: none; border-color: var(--accent); }
   background: var(--bg-card); border: 1px solid var(--border);
   display: flex; align-items: center; gap: 10px; font-size: 12px;
 }
-.wf-dryrun-step-icon { font-size: 16px; flex-shrink: 0; }
+.wf-dryrun-step-icon { flex-shrink: 0; display: flex; align-items: center; }
 .wf-dryrun-step-info { flex: 1; min-width: 0; }
 .wf-dryrun-step-name { font-weight: 600; color: var(--text); }
 .wf-dryrun-step-tool { color: var(--text-muted); font-size: 11px; }
@@ -3195,8 +3505,61 @@ select:focus { outline: none; border-color: var(--accent); }
   transition: color 0.15s, border-color 0.15s;
 }
 .wf-output-expand-btn:hover { color: var(--text); border-color: var(--text-muted); }
+/* Input modal (pre-execution) */
+.wf-input-modal-backdrop {
+  position: fixed; inset: 0; z-index: 9999;
+  background: rgba(0,0,0,0.55); display: flex;
+  align-items: center; justify-content: center;
+}
+.wf-input-modal {
+  background: var(--bg-surface, var(--bg)); border: 1px solid var(--border);
+  border-radius: 10px; width: 440px; max-width: 90vw;
+  max-height: 80vh; display: flex; flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+}
+.wf-input-modal-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 20px; border-bottom: 1px solid var(--border);
+}
+.wf-input-modal-title { font-weight: 700; font-size: 14px; color: var(--text); }
+.wf-input-modal-body {
+  flex: 1; overflow-y: auto; padding: 16px 20px;
+}
+.wf-input-modal-field { margin-bottom: 14px; }
+.wf-input-modal-label {
+  font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px;
+}
+.wf-input-modal-desc {
+  font-size: 11px; color: var(--text-muted); margin-bottom: 4px; line-height: 1.3;
+}
+.wf-input-modal-input {
+  width: 100%; box-sizing: border-box; padding: 6px 10px;
+  border: 1px solid var(--border); border-radius: 6px;
+  background: var(--bg); color: var(--text); font-size: 13px;
+  font-family: inherit; outline: none;
+  transition: border-color 0.15s;
+}
+.wf-input-modal-input:focus { border-color: var(--accent, #6c63ff); }
+.wf-input-modal-input.error { border-color: #e74c3c; }
+.wf-input-modal-error { font-size: 11px; color: #e74c3c; margin-top: 3px; display: none; }
+.wf-input-modal-footer {
+  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
+  padding: 12px 20px; border-top: 1px solid var(--border);
+}
+.wf-input-modal-cancel {
+  padding: 6px 16px; border: 1px solid var(--border); border-radius: 6px;
+  background: transparent; color: var(--text); font-size: 12px; cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+.wf-input-modal-cancel:hover { background: var(--bg); border-color: var(--text-muted); }
+.wf-input-modal-run {
+  padding: 6px 16px; border: none; border-radius: 6px;
+  background: var(--accent, #6c63ff); color: #fff; font-size: 12px;
+  font-weight: 600; cursor: pointer; transition: filter 0.15s;
+}
+.wf-input-modal-run:hover { filter: brightness(1.15); }
 #wf-canvas {
-  width: 100%; height: 100%; display: block;
+  width: 100%; height: 100%; display: block; position: relative; z-index: 1;
 }
 /* SVG node styles */
 .wf-node { cursor: pointer; }
@@ -3211,8 +3574,8 @@ select:focus { outline: none; border-color: var(--accent); }
   pointer-events: none; text-anchor: middle; dominant-baseline: central;
 }
 .wf-node-icon {
-  font-size: 16px; pointer-events: none;
-  text-anchor: middle; dominant-baseline: central;
+  pointer-events: none;
+  color: #fff;
 }
 .wf-node-badge {
   font-size: 10px; fill: rgba(255,255,255,0.7);
@@ -3267,6 +3630,8 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 @keyframes wf-flow { to { stroke-dashoffset: -12; } }
 .wf-edge--complete { stroke: var(--accent, #6c63ff); opacity: 0.6; stroke-dasharray: none; }
+.wf-edge--else { stroke-dasharray: 6 4; opacity: 0.4; }
+.wf-edge--skipped { opacity: 0.12; stroke-dasharray: 4 4; }
 /* Inspector */
 .wf-inspector {
   flex-shrink: 0; position: relative;
@@ -3374,7 +3739,7 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 /* Workflow visualizer light mode */
 [data-theme="light"] .wf-node-label { fill: #001E2B; }
-[data-theme="light"] .wf-node-icon { fill: #001E2B; }
+[data-theme="light"] .wf-node-icon { color: #001E2B; }
 [data-theme="light"] .wf-node-badge { fill: rgba(0,30,43,0.55); }
 [data-theme="light"] .wf-node-time { fill: rgba(0,30,43,0.5); }
 [data-theme="light"] .wf-node-condition { fill: #944F01; }
@@ -3396,6 +3761,8 @@ select:focus { outline: none; border-color: var(--accent); }
 [data-theme="light"] .wf-exec-status { box-shadow: 0 2px 8px rgba(0,30,43,0.08); }
 [data-theme="light"] .wf-run-btn { background: var(--accent); }
 [data-theme="light"] .wf-output-modal { box-shadow: 0 8px 32px rgba(0,30,43,0.15); }
+[data-theme="light"] .wf-input-modal { box-shadow: 0 8px 32px rgba(0,30,43,0.15); }
+[data-theme="light"] .wf-input-modal-backdrop { background: rgba(0,0,0,0.3); }
 @keyframes wf-pulse-light {
   0%, 100% { filter: drop-shadow(0 0 4px rgba(0,158,128,0.3)); }
   50% { filter: drop-shadow(0 0 12px rgba(0,158,128,0.6)); }
@@ -3406,207 +3773,1060 @@ select:focus { outline: none; border-color: var(--accent); }
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
   text-align: center; color: var(--text-muted); pointer-events: none;
 }
-.wf-canvas-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
+.wf-canvas-empty-icon { margin-bottom: 16px; opacity: 0.15; }
+.wf-canvas-empty-icon img { width: 200px; height: 200px; filter: invert(1); }
+[data-theme="light"] .wf-canvas-empty-icon img { filter: none; opacity: 0.1; }
 .wf-canvas-empty-text { font-size: 14px; }
-</style>
-</head>
-<body>
+/* Persistent watermark behind workflows */
+.wf-canvas-watermark {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  pointer-events: none; z-index: 0; opacity: 0.04;
+}
+.wf-canvas-watermark img { width: 300px; height: 300px; filter: invert(1); }
+[data-theme="light"] .wf-canvas-watermark img { filter: none; }
 
-<!-- LeafyGreen Icon Sprites (mongodb.design) -->
-<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
-  <symbol id="lg-lightning" viewBox="0 0 16 16">
-    <path d="M9.22274 1.99296C9.22274 1.49561 8.56293 1.31233 8.30107 1.73667L4.07384 8.58696C3.87133 8.91513 4.10921 9.33717 4.49748 9.33717H6.77682L6.77682 14.0066C6.77682 14.504 7.43627 14.6879 7.69813 14.2635L11.9262 7.4118C12.1288 7.08363 11.8903 6.66244 11.5021 6.66244H9.22274V1.99296Z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-arrows" viewBox="0 0 16 16">
-    <path d="M5 8.57279V13.4272C5 13.9565 4.39241 14.2015 4.0721 13.8014L2.12898 11.3742C1.95701 11.1594 1.95701 10.8406 2.12898 10.6258L4.0721 8.19856C4.39241 7.79846 5 8.04351 5 8.57279Z" fill="currentColor"/>
-    <path d="M5 10H12.5C12.7761 10 13 10.2239 13 10.5V11.5C13 11.7761 12.7761 12 12.5 12H5V10Z" fill="currentColor"/>
-    <path d="M11 7.42721V2.57279C11 2.04351 11.6076 1.79846 11.9279 2.19856L13.871 4.62577C14.043 4.84058 14.043 5.15942 13.871 5.37423L11.9279 7.80144C11.6076 8.20154 11 7.95649 11 7.42721Z" fill="currentColor"/>
-    <path d="M3 4.5C3 4.22386 3.22386 4 3.5 4H11V6H3.5C3.22386 6 3 5.77614 3 5.5V4.5Z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-search" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.3234 9.81874C4.07618 11.5715 6.75062 11.8398 8.78588 10.6244L12.93 14.7685C13.4377 15.2762 14.2608 15.2762 14.7685 14.7685C15.2762 14.2608 15.2762 13.4377 14.7685 12.93L10.6244 8.78588C11.8398 6.75062 11.5715 4.07619 9.81873 2.32341C7.74896 0.253628 4.39318 0.253628 2.3234 2.32341C0.253624 4.39319 0.253624 7.74896 2.3234 9.81874ZM7.98026 4.16188C9.03467 5.2163 9.03467 6.92585 7.98026 7.98026C6.92584 9.03468 5.2163 9.03468 4.16188 7.98026C3.10746 6.92585 3.10746 5.2163 4.16188 4.16188C5.2163 3.10747 6.92584 3.10747 7.98026 4.16188Z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-gauge" viewBox="0 0 16 16">
-    <path d="M1.041 10.2514C0.996713 10.6632 1.33666 11 1.75088 11H4.2449C4.65912 11 4.98569 10.6591 5.08798 10.2577C5.22027 9.73864 5.49013 9.25966 5.87533 8.87446C6.43906 8.31073 7.20364 7.99403 8.00088 7.99403C8.27011 7.99403 8.53562 8.03015 8.79093 8.0997L11.7818 5.10887C10.6623 4.39046 9.35172 4 8.00088 4C6.14436 4 4.36388 4.7375 3.05113 6.05025C1.91604 7.18534 1.21104 8.67012 1.041 10.2514Z" fill="currentColor"/>
-    <path d="M13.2967 6.42237L10.455 9.26409C10.6678 9.56493 10.8231 9.90191 10.9138 10.2577C11.0161 10.6591 11.3426 11 11.7568 11L14.2509 11C14.6651 11 15.005 10.6632 14.9608 10.2514C14.8087 8.83759 14.229 7.50093 13.2967 6.42237Z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-bulb" viewBox="0 0 16 16">
-    <path d="M12.3311 8.5C12.7565 7.76457 13 6.91072 13 6C13 3.23858 10.7614 1 8 1C5.23858 1 3 3.23858 3 6C3 6.94628 3.26287 7.83117 3.71958 8.58561L5.40749 11.501C5.58628 11.8099 5.91607 12 6.27291 12H6.5V6C6.5 5.17157 7.17157 4.5 8 4.5C8.82843 4.5 9.5 5.17157 9.5 6V12H9.72368C10.0793 12 10.4082 11.8111 10.5874 11.5039L12.34 8.5H12.3311Z" fill="currentColor"/>
-    <path d="M7.5 6V12H8.5V6C8.5 5.72386 8.27614 5.5 8 5.5C7.72386 5.5 7.5 5.72386 7.5 6Z" fill="currentColor"/>
-    <path d="M10 14V13H6V14C6 14.5523 6.44772 15 7 15H9C9.55228 15 10 14.5523 10 14Z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-info" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9 4C9 4.55228 8.55228 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4ZM8 6C8.55228 6 9 6.44772 9 7V11H9.5C9.77614 11 10 11.2239 10 11.5C10 11.7761 9.77614 12 9.5 12H6.5C6.22386 12 6 11.7761 6 11.5C6 11.2239 6.22386 11 6.5 11H7V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8Z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-image" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM4 4V9.586L5.793 7.793C6.183 7.403 6.817 7.403 7.207 7.793L8.5 9.086L10.293 7.293C10.683 6.903 11.317 6.903 11.707 7.293L12 7.586V4H4ZM12 10.414L10.5 8.914L8.207 11.207C7.817 11.597 7.183 11.597 6.793 11.207L5.5 9.914L4 11.414V12H12V10.414ZM10 5.5C10 6.328 10.672 7 11.5 7C11.776 7 12 6.776 12 6.5V5C12 4.724 11.776 4.5 11.5 4.5H10.5C10.224 4.5 10 4.724 10 5V5.5Z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-config" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1.5A.5.5 0 0 1 7 1h2a.5.5 0 0 1 .5.5v1.05a5 5 0 0 1 1.37.57l.74-.74a.5.5 0 0 1 .7 0l1.42 1.42a.5.5 0 0 1 0 .7l-.74.74c.25.43.44.89.57 1.37H14.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1.05a5 5 0 0 1-.57 1.37l.74.74a.5.5 0 0 1 0 .7l-1.42 1.42a.5.5 0 0 1-.7 0l-.74-.74a5 5 0 0 1-1.37.57V14.5a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5v-1.05a5 5 0 0 1-1.37-.57l-.74.74a.5.5 0 0 1-.7 0L2.27 12.2a.5.5 0 0 1 0-.7l.74-.74a5 5 0 0 1-.57-1.37H1.5A.5.5 0 0 1 1 9V7a.5.5 0 0 1 .5-.5h1.05c.13-.48.32-.94.57-1.37l-.74-.74a.5.5 0 0 1 0-.7L3.8 2.27a.5.5 0 0 1 .7 0l.74.74A5 5 0 0 1 6.6 2.44V1.5zM8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-code" viewBox="0 0 16 16">
-    <path fill="currentColor" d="M5.854 4.146a.5.5 0 0 1 0 .708L2.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm4.292 0a.5.5 0 0 0 0 .708L13.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/>
-  </symbol>
-  <symbol id="lg-palette" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C8.55228 15 9 14.5523 9 14V12.5C9 11.6716 9.67157 11 10.5 11H12C13.6569 11 15 9.65685 15 8C15 4.13401 11.866 1 8 1ZM4.5 9C5.32843 9 6 8.32843 6 7.5C6 6.67157 5.32843 6 4.5 6C3.67157 6 3 6.67157 3 7.5C3 8.32843 3.67157 9 4.5 9ZM7 5.5C7 6.32843 6.32843 7 5.5 7C4.67157 7 4 6.32843 4 5.5C4 4.67157 4.67157 4 5.5 4C6.32843 4 7 4.67157 7 5.5ZM9.5 6C10.3284 6 11 5.32843 11 4.5C11 3.67157 10.3284 3 9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6ZM13 7.5C13 8.32843 12.3284 9 11.5 9C10.6716 9 10 8.32843 10 7.5C10 6.67157 10.6716 6 11.5 6C12.3284 6 13 6.67157 13 7.5Z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-cube" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.35 1.18a.75.75 0 0 0-.7 0l-6 3.25A.75.75 0 0 0 1.25 5v6a.75.75 0 0 0 .4.66l6 3.25a.75.75 0 0 0 .7 0l6-3.25a.75.75 0 0 0 .4-.66V5a.75.75 0 0 0-.4-.66l-6-3.16zM8 3.2 3.47 5.65 8 7.82l4.53-2.17L8 3.2zM2.75 6.8v3.82L7.25 12.8V8.97L2.75 6.8zm5.5 6 4.5-2.18V6.8L8.25 8.97V12.8z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-chat" viewBox="0 0 16 16">
-    <path d="M2 2h12v9H5l-3 3V2z" fill="none" stroke="currentColor" stroke-width="1.5"/>
-  </symbol>
-  <symbol id="lg-shield" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.35 1.18a.75.75 0 0 0-.7 0l-5 2.7A.75.75 0 0 0 2.25 4.5V8c0 2.9 2.1 5.5 5.5 6.95a.75.75 0 0 0 .5 0C11.65 13.5 13.75 10.9 13.75 8V4.5a.75.75 0 0 0-.4-.62l-5-2.7zM8 3.2 3.75 5.5V8c0 2.2 1.6 4.2 4.25 5.45C10.65 12.2 12.25 10.2 12.25 8V5.5L8 3.2z" fill="currentColor"/>
-  </symbol>
-  <symbol id="lg-pulse" viewBox="0 0 16 16">
-    <path d="M1 8h3l2-5 2 10 2-5h5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-  </symbol>
-</svg>
+/* ── Home Page Styles ── */
 
-<div class="app-shell">
+/* Home Header */
+.home-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 32px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
 
-<!-- Sidebar -->
-<aside class="sidebar">
-  <div class="sidebar-drag-region">
-    <img class="sidebar-logo" id="sidebarLogo" src="/icons/dark/64.png" alt="Vai">
-    <span class="sidebar-title">Vai</span>
-    <button class="sidebar-settings-btn" data-tab="settings" title="Settings"><svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-config"/></svg></button>
-  </div>
-  <nav class="sidebar-nav">
-    <div class="sidebar-nav-group" role="tablist" aria-label="Tools">
-      <div class="sidebar-nav-label" id="nav-tools-label">Tools</div>
-      <button class="tab-btn active" data-tab="embed" role="tab" aria-selected="true" aria-controls="tab-embed" id="tab-btn-embed"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-lightning"/></svg></span><span>Embed</span></button>
-      <button class="tab-btn" data-tab="compare" role="tab" aria-selected="false" aria-controls="tab-compare" id="tab-btn-compare"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-arrows"/></svg></span><span>Compare</span></button>
-      <button class="tab-btn" data-tab="search" role="tab" aria-selected="false" aria-controls="tab-search" id="tab-btn-search"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-search"/></svg></span><span>Search</span></button>
-      <button class="tab-btn" data-tab="multimodal" role="tab" aria-selected="false" aria-controls="tab-multimodal" id="tab-btn-multimodal"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-image"/></svg></span><span>Multimodal</span></button>
-      <button class="tab-btn" data-tab="generate" role="tab" aria-selected="false" aria-controls="tab-generate" id="tab-btn-generate"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-code"/></svg></span><span>Generate</span></button>
-      <button class="tab-btn" data-tab="chat" role="tab" aria-selected="false" aria-controls="tab-chat" id="tab-btn-chat"><span class="tab-btn-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 2h12v9H5l-3 3V2z" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span><span>Chat</span></button>
-      <button class="tab-btn" data-tab="workflows" role="tab" aria-selected="false" aria-controls="tab-workflows" id="tab-btn-workflows"><span class="tab-btn-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16"><circle cx="3" cy="8" r="2" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="13" cy="4" r="2" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="13" cy="12" r="2" fill="none" stroke="currentColor" stroke-width="1.3"/><line x1="5" y1="7" x2="11" y2="4.5" stroke="currentColor" stroke-width="1.3"/><line x1="5" y1="9" x2="11" y2="11.5" stroke="currentColor" stroke-width="1.3"/></svg></span><span>Workflows</span></button>
-    </div>
-    <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="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" 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" 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>
-    </div>
-  </nav>
-  <div class="sidebar-footer">
-    <div style="display:flex;align-items:center;gap:8px;justify-content:space-between;">
-      <div style="display:flex;align-items:center;gap:5px;">
-        <div class="status-dot" id="statusDot"></div>
-        <span class="status-label" id="statusLabel">Checking...</span>
-      </div>
-      <button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode">🌙</button>
-    </div>
-    <div style="display:flex;align-items:center;justify-content:space-between;">
-      <div id="appVersionLabel" style="font-size:10px;color:var(--text-muted);"></div>
-      <div style="display:flex;align-items:center;gap:6px;">
-        <a class="sidebar-docs-link" href="https://docs.vaicli.com" target="_blank" rel="noopener" title="Documentation (F1)">
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/><path d="M6 8h4M6 10.5h4"/></svg>
-          <span>Docs</span>
-        </a>
-        <button class="sidebar-bug-link" id="bugButton" title="Report a Bug">
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="9" r="4.5"/><path d="M5.5 5.5L3 3M10.5 5.5L13 3M3 9H1M15 9h-2M5.5 12.5L4 15M10.5 12.5L12 15"/></svg>
-          <span class="sidebar-bug-label">Bug</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</aside>
+.home-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 
-<!-- Content -->
-<div class="content-area">
-  <div class="content-drag-region"></div>
-  <div class="update-banner" id="updateBanner">
-    <span class="update-banner-icon">🚀</span>
-    <span class="update-banner-text" id="updateBannerText">
-      <strong>Vai <span id="updateVersion"></span></strong> is available.
-      You're on <span id="currentVersion"></span>.
-    </span>
-    <div class="update-progress" id="updateProgress" style="display:none;">
-      <div class="update-progress-bar"><div class="update-progress-fill" id="updateProgressFill"></div></div>
-      <span class="update-progress-label" id="updateProgressLabel">0%</span>
-    </div>
-    <button class="update-banner-btn" id="updateDownloadBtn">Download &amp; Install</button>
-    <button class="update-banner-btn" id="updateInstallBtn" style="display:none;">Restart &amp; Update</button>
-    <button class="update-banner-dismiss" id="updateDismissBtn" title="Dismiss">×</button>
-  </div>
-  <div class="main">
+.home-logo {
+  width: 32px;
+  height: 32px;
+}
 
-<!-- ========== EMBED TAB ========== -->
-<div class="tab-panel active" id="tab-embed" role="tabpanel" aria-labelledby="tab-btn-embed" tabindex="0">
-  <div class="page-header">
-    <h2 class="page-header-title">Embed</h2>
-    <p class="page-header-subtitle">Generate vector embeddings for text</p>
-    <p class="page-header-hint">Paste or type text below, choose a model, and hit Embed to see the raw vectors and token usage.</p>
-    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/embeddings/embed" target="_blank" rel="noopener" title="Embed 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>
-  <div class="card">
-    <div class="card-title">Input Text</div>
-    <textarea id="embedInput" rows="5" placeholder="Enter text to embed..." aria-label="Text to embed">MongoDB Atlas provides powerful vector search capabilities for AI applications.</textarea>
-  </div>
+.home-header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: -0.01em;
+}
 
-  <div class="options-row">
-    <div class="option-group">
-      <span class="option-label">Model</span>
-      <select id="embedModel"></select>
-    </div>
-    <div class="option-group">
-      <span class="option-label">Input Type</span>
-      <select id="embedInputType">
-        <option value="">None</option>
-        <option value="query">Query</option>
-        <option value="document">Document</option>
-      </select>
-    </div>
-    <div class="option-group">
-      <span class="option-label">Dimensions</span>
-      <select id="embedDimensions">
-        <option value="">Default</option>
-        <option value="256">256</option>
-        <option value="512">512</option>
-        <option value="1024">1024</option>
-        <option value="2048">2048</option>
-      </select>
-    </div>
-    <div class="option-group">
-      <span class="option-label">Output Type</span>
-      <select id="embedOutputDtype">
-        <option value="float">float (32-bit)</option>
-        <option value="int8">int8 (4× smaller)</option>
-        <option value="uint8">uint8 (4× smaller)</option>
-        <option value="binary">binary (32× smaller)</option>
-        <option value="ubinary">ubinary (32× smaller)</option>
-      </select>
-    </div>
-    <button class="btn" id="embedBtn" onclick="doEmbed()">⚡ Embed</button>
-  </div>
+.home-version-badge {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+}
 
-  <div class="error-msg" id="embedError"></div>
+.home-header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 
-  <div class="result-section" id="embedResult">
-    <div class="card">
-      <div class="card-title">Result</div>
-      <div id="embedStats"></div>
-      <div class="vector-preview" id="embedVector"></div>
-      <div style="margin-top:8px;">
-        <button class="btn btn-secondary btn-small" onclick="copyVector()">📋 Copy Full Vector</button>
-      </div>
-      <div class="card-title" style="margin-top:16px;">Vector Heatmap</div>
-      <div class="heatmap" id="embedHeatmap"></div>
-    </div>
-  </div>
-</div>
+.home-settings-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
 
-<!-- ========== COMPARE TAB ========== -->
-<div class="tab-panel" id="tab-compare" role="tabpanel" aria-labelledby="tab-btn-compare" tabindex="0">
-  <div class="page-header">
-    <h2 class="page-header-title">Compare</h2>
-    <p class="page-header-subtitle">Visualize similarity between text pairs</p>
-    <p class="page-header-hint">Enter two texts and compare their embeddings: see cosine similarity, a heatmap of vector dimensions, and a visual diff.</p>
-    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/embeddings/similarity" target="_blank" rel="noopener" title="Similarity 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>
+.home-settings-btn:hover {
+  background: var(--bg-card);
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+.home-settings-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* API Key Warning Banner */
+.home-api-warning {
+  margin: 16px 32px;
+  background: linear-gradient(135deg, rgba(255, 201, 16, 0.1), rgba(255, 105, 96, 0.1));
+  border: 1px solid rgba(255, 201, 16, 0.3);
+  border-radius: 12px;
+  padding: 16px;
+  animation: slideDown 0.3s ease-out;
+}
+
+.home-api-warning-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--warning);
+}
+
+.home-api-warning svg {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.home-api-warning button {
+  margin-left: auto;
+  background: none;
+  border: 1px solid var(--warning);
+  color: var(--warning);
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.home-api-warning button:hover {
+  background: var(--warning);
+  color: var(--bg);
+}
+
+/* Home Content */
+.home-content {
+  padding: 32px;
+  max-width: 1200px;
+  margin: 0 auto;
+  overflow-y: auto;
+  height: calc(100vh - 120px);
+}
+
+/* Announcements Banner */
+.home-announcements {
+  margin-bottom: 48px;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.home-announcements-carousel {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--bg-card), var(--bg-surface));
+  border: 1px solid var(--border);
+}
+
+.home-announcement-card {
+  display: none;
+  padding: 32px;
+  text-align: center;
+  position: relative;
+}
+
+.home-announcement-card.active {
+  display: block;
+  animation: fadeIn 0.5s ease-out;
+}
+
+.home-announcement-card .badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #00ED64, #00C2FF);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.home-announcement-card h3 {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--accent-text);
+  margin-bottom: 12px;
+}
+
+.home-announcement-card p {
+  color: var(--text-dim);
+  line-height: 1.6;
+  margin-bottom: 24px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.home-announcement-card .cta {
+  background: linear-gradient(135deg, #00ED64, #00C2FF);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.home-announcement-card .cta:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(0, 237, 100, 0.3);
+}
+
+.home-announcement-dismiss {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.home-announcement-dismiss:hover {
+  background: var(--bg-card);
+  color: var(--text);
+}
+
+.home-announcements-dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.home-announcement-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--border);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.home-announcement-dot.active {
+  background: linear-gradient(135deg, #00ED64, #00C2FF);
+}
+
+/* Section Headers */
+.home-section {
+  margin-bottom: 48px;
+}
+
+.home-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.home-section-header h3 {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--accent-text);
+}
+
+.home-section-header a,
+.home-marketplace-cta {
+  color: var(--blue);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.home-marketplace-cta {
+  background: linear-gradient(135deg, #00ED64, #00C2FF);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.home-marketplace-cta:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(0, 237, 100, 0.3);
+}
+
+.home-section-header a:hover {
+  color: var(--accent);
+}
+
+/* Release Notes Timeline */
+.home-releases-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.home-release-item {
+  display: flex;
+  gap: 16px;
+  padding: 24px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  border-left: 4px solid transparent;
+  border-left-color: #00ED64;
+  background: linear-gradient(90deg, transparent, var(--bg-card) 4px);
+  transition: all 0.2s;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.home-release-item:hover {
+  background: var(--bg-surface);
+  border-color: var(--accent);
+}
+
+.home-release-version {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent-text);
+  margin-bottom: 4px;
+}
+
+.home-release-date {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+.home-release-highlights {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.home-release-highlights li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+
+.home-release-highlights li:before {
+  content: "•";
+  color: var(--accent);
+  font-weight: bold;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+/* Subsections */
+.home-subsection {
+  margin-bottom: 32px;
+}
+
+.home-subsection h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 16px;
+}
+
+.home-subsection-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+/* Workflow Carousels */
+.home-workflows-carousel {
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+  scroll-snap-type: x mandatory;
+}
+
+.home-workflows-carousel::-webkit-scrollbar {
+  height: 6px;
+}
+
+.home-workflows-carousel::-webkit-scrollbar-track {
+  background: var(--bg-surface);
+  border-radius: 3px;
+}
+
+.home-workflows-carousel::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+.home-workflow-card {
+  flex: 0 0 280px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 20px;
+  scroll-snap-align: start;
+  transition: all 0.2s;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.home-workflow-card:hover {
+  background: var(--bg-surface);
+  border-color: var(--accent);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.1);
+}
+
+.home-workflow-card h5 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent-text);
+  margin-bottom: 8px;
+}
+
+.home-workflow-card p {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  margin-bottom: 12px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.home-workflow-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.home-workflow-domain {
+  background: rgba(0, 237, 100, 0.1);
+  color: var(--accent);
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.home-workflow-author {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.home-workflow-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.home-workflow-btn {
+  flex: 1;
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.home-workflow-btn:hover {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
+
+/* Domain Pills */
+.home-domain-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.home-domain-pill {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.home-domain-pill:hover {
+  background: linear-gradient(135deg, #00ED64, #00C2FF);
+  color: white;
+  border-color: transparent;
+  transform: translateY(-1px);
+}
+
+/* Sort Tabs */
+.home-sort-tabs {
+  display: flex;
+  gap: 2px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.home-sort-tab {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.home-sort-tab.active {
+  background: var(--accent);
+  color: white;
+}
+
+.home-sort-tab:hover:not(.active) {
+  background: var(--bg-card);
+  color: var(--text);
+}
+
+/* Community Grid */
+.home-community-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.home-community-empty {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 48px;
+  color: var(--text-muted);
+}
+
+.home-community-empty h4 {
+  font-size: 16px;
+  margin-bottom: 8px;
+  color: var(--text);
+}
+
+/* Quick Actions */
+.home-quick-actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.home-quick-action {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 24px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+  color: var(--text);
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.home-quick-action:hover {
+  background: var(--bg-surface);
+  border-color: var(--accent);
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0, 212, 170, 0.1);
+  color: var(--text);
+}
+
+.home-quick-action svg {
+  width: 24px;
+  height: 24px;
+  color: var(--accent);
+}
+
+.home-quick-action span {
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Footer */
+.home-footer {
+  margin-top: 64px;
+  padding-top: 32px;
+  border-top: 1px solid var(--border);
+  text-align: center;
+}
+
+.home-footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.home-footer-links a {
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: 12px;
+  transition: color 0.2s;
+}
+
+.home-footer-links a:hover {
+  color: var(--accent);
+}
+
+.home-footer-branding {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .home-content {
+    padding: 24px;
+  }
+  
+  .home-quick-actions {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  }
+  
+  .home-community-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .home-header {
+    padding: 16px 24px 12px;
+  }
+  
+  .home-content {
+    padding: 16px;
+  }
+  
+  .home-section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  
+  .home-footer-links {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+</style>
+</head>
+<body>
+
+<!-- Lucide Icons (lucide.dev) — stroke-based, 16×16 -->
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
+  <!-- Zap (Embed) -->
+  <symbol id="lg-lightning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
+  </symbol>
+  <!-- Arrow Left Right (Compare) -->
+  <symbol id="lg-arrows" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/>
+  </symbol>
+  <!-- Search -->
+  <symbol id="lg-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+  </symbol>
+  <!-- Gauge (Benchmark) -->
+  <symbol id="lg-gauge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>
+  </symbol>
+  <!-- Lightbulb (Explore) -->
+  <symbol id="lg-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>
+  </symbol>
+  <!-- Info (About) -->
+  <symbol id="lg-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>
+  </symbol>
+  <!-- Image (Multimodal) -->
+  <symbol id="lg-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
+  </symbol>
+  <!-- Settings (Config) -->
+  <symbol id="lg-config" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>
+  </symbol>
+  <!-- Code (Generate) -->
+  <symbol id="lg-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
+  </symbol>
+  <!-- Palette (Theme) -->
+  <symbol id="lg-palette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>
+  </symbol>
+  <!-- Box (Cube) -->
+  <symbol id="lg-cube" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
+  </symbol>
+  <!-- Message Square (Chat) -->
+  <symbol id="lg-chat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+  </symbol>
+  <!-- Shield -->
+  <symbol id="lg-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 .5-.87l7-4a1 1 0 0 1 1 0l7 4A1 1 0 0 1 20 6z"/>
+  </symbol>
+  <!-- Activity (Pulse) -->
+  <symbol id="lg-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36-3.18-19.64A2 2 0 0 0 10.12 1h-.24a2 2 0 0 0-1.94 1.55L5.18 12H2"/>
+  </symbol>
+</svg>
+
+<div class="app-shell">
+
+<!-- Sidebar -->
+<aside class="sidebar">
+  <div class="sidebar-drag-region">
+    <img class="sidebar-logo" id="sidebarLogo" src="/icons/dark/64.png" alt="Vai">
+    <span class="sidebar-title">Vai</span>
+    <button class="sidebar-settings-btn" data-tab="settings" title="Settings"><svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-config"/></svg></button>
+  </div>
+  <nav class="sidebar-nav">
+    <div class="sidebar-nav-group" role="tablist" aria-label="Tools">
+      <div class="sidebar-nav-label" id="nav-tools-label">Tools</div>
+      <button class="tab-btn active" data-tab="home" role="tab" aria-selected="true" aria-controls="tab-home" id="tab-btn-home"><span class="tab-btn-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></span><span>Home</span></button>
+      <button class="tab-btn" data-tab="embed" role="tab" aria-selected="false" aria-controls="tab-embed" id="tab-btn-embed"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-lightning"/></svg></span><span>Embed</span></button>
+      <button class="tab-btn" data-tab="compare" role="tab" aria-selected="false" aria-controls="tab-compare" id="tab-btn-compare"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-arrows"/></svg></span><span>Compare</span></button>
+      <button class="tab-btn" data-tab="search" role="tab" aria-selected="false" aria-controls="tab-search" id="tab-btn-search"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-search"/></svg></span><span>Search</span></button>
+      <button class="tab-btn" data-tab="multimodal" role="tab" aria-selected="false" aria-controls="tab-multimodal" id="tab-btn-multimodal"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-image"/></svg></span><span>Multimodal</span></button>
+      <button class="tab-btn" data-tab="generate" role="tab" aria-selected="false" aria-controls="tab-generate" id="tab-btn-generate"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-code"/></svg></span><span>Generate</span></button>
+      <button class="tab-btn" data-tab="chat" role="tab" aria-selected="false" aria-controls="tab-chat" id="tab-btn-chat"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-chat"/></svg></span><span>Chat</span></button>
+      <button class="tab-btn" data-tab="workflows" role="tab" aria-selected="false" aria-controls="tab-workflows" id="tab-btn-workflows"><span class="tab-btn-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="3"/><circle cx="19" cy="6" r="3"/><circle cx="19" cy="18" r="3"/><line x1="7.7" y1="10.7" x2="16.3" y2="7.3"/><line x1="7.7" y1="13.3" x2="16.3" y2="16.7"/></svg></span><span>Workflows</span></button>
+    </div>
+    <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="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" 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" 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>
+    </div>
+  </nav>
+  <div class="sidebar-footer">
+    <div style="display:flex;align-items:center;gap:8px;justify-content:space-between;">
+      <div style="display:flex;align-items:center;gap:5px;">
+        <div class="status-dot" id="statusDot"></div>
+        <span class="status-label" id="statusLabel">Checking...</span>
+      </div>
+      <button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode">🌙</button>
+    </div>
+    <div style="display:flex;align-items:center;justify-content:space-between;">
+      <div id="appVersionLabel" style="font-size:10px;color:var(--text-muted);"></div>
+      <div style="display:flex;align-items:center;gap:6px;">
+        <a class="sidebar-docs-link" href="https://docs.vaicli.com" target="_blank" rel="noopener" title="Documentation (F1)">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/><path d="M6 8h4M6 10.5h4"/></svg>
+          <span>Docs</span>
+        </a>
+        <button class="sidebar-bug-link" id="bugButton" title="Report a Bug">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="9" r="4.5"/><path d="M5.5 5.5L3 3M10.5 5.5L13 3M3 9H1M15 9h-2M5.5 12.5L4 15M10.5 12.5L12 15"/></svg>
+          <span class="sidebar-bug-label">Bug</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</aside>
+
+<!-- Content -->
+<div class="content-area">
+  <div class="content-drag-region"></div>
+  <div class="update-banner" id="updateBanner">
+    <span class="update-banner-icon">🚀</span>
+    <span class="update-banner-text" id="updateBannerText">
+      <strong>Vai <span id="updateVersion"></span></strong> is available.
+      You're on <span id="currentVersion"></span>.
+    </span>
+    <div class="update-progress" id="updateProgress" style="display:none;">
+      <div class="update-progress-bar"><div class="update-progress-fill" id="updateProgressFill"></div></div>
+      <span class="update-progress-label" id="updateProgressLabel">0%</span>
+    </div>
+    <button class="update-banner-btn" id="updateDownloadBtn">Download &amp; Install</button>
+    <button class="update-banner-btn" id="updateInstallBtn" style="display:none;">Restart &amp; Update</button>
+    <button class="update-banner-dismiss" id="updateDismissBtn" title="Dismiss">×</button>
+  </div>
+  <div class="main">
+
+<!-- ========== HOME TAB ========== -->
+<div class="tab-panel active" id="tab-home" role="tabpanel" aria-labelledby="tab-btn-home" tabindex="0">
+  <!-- Header Bar -->
+  <div class="home-header">
+    <div class="home-header-left">
+      <img class="home-logo" id="homeLogo" src="/icons/V.png" alt="Vai" onerror="this.src='/icons/dark/64.png'">
+      <span class="home-header-title">Voyage AI Playground</span>
+      <span class="home-version-badge" id="homeVersionBadge">v1.0.0</span>
+    </div>
+    <div class="home-header-right">
+      <button class="home-settings-btn" onclick="switchTab('settings')" title="Settings">
+        <svg width="20" height="20" viewBox="0 0 24 24"><use href="#lg-config"/></svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- API Key Warning Banner (hidden by default) -->
+  <div class="home-api-warning" id="homeApiWarning" style="display: none;">
+    <div class="home-api-warning-content">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+        <triangle cx="12" cy="12" r="10"/>
+        <line x1="12" y1="8" x2="12" y2="12"/>
+        <line x1="12" y1="16" x2="12.01" y2="16"/>
+      </svg>
+      <span>Set up your Voyage AI API key to get started</span>
+      <button onclick="switchTab('settings')">Settings →</button>
+    </div>
+  </div>
+
+  <div class="home-content">
+    <!-- Announcements Banner -->
+    <div class="home-announcements" id="homeAnnouncements" style="display: none;">
+      <div class="home-announcements-carousel" id="announcementsCarousel">
+        <!-- Cards will be inserted here -->
+      </div>
+      <div class="home-announcements-dots" id="announcementsDots">
+        <!-- Dots will be inserted here -->
+      </div>
+    </div>
+
+    <!-- What's New (Release Notes) -->
+    <div class="home-section" id="homeReleases">
+      <div class="home-section-header">
+        <h3>What's New</h3>
+        <a href="https://github.com/mrlynn/voyageai-cli/releases" target="_blank" rel="noopener">View All →</a>
+      </div>
+      <div class="home-releases-timeline" id="releasesTimeline">
+        <!-- Release items will be inserted here -->
+      </div>
+    </div>
+
+    <!-- Marketplace Spotlight -->
+    <div class="home-section">
+      <div class="home-section-header">
+        <h3>Marketplace Spotlight</h3>
+        <button class="home-marketplace-cta" onclick="switchTab('workflows')">
+          Explore the Marketplace →
+        </button>
+      </div>
+      
+      <!-- Featured Workflows -->
+      <div class="home-subsection">
+        <h4>Featured Workflows</h4>
+        <div class="home-workflows-carousel" id="featuredWorkflows">
+          <!-- Workflow cards will be inserted here -->
+        </div>
+      </div>
+
+      <!-- Browse by Domain -->
+      <div class="home-subsection">
+        <h4>Browse by Domain</h4>
+        <div class="home-domain-pills">
+          <button class="home-domain-pill" onclick="filterAndSwitchWorkflows('Healthcare')">Healthcare</button>
+          <button class="home-domain-pill" onclick="filterAndSwitchWorkflows('Finance')">Finance</button>
+          <button class="home-domain-pill" onclick="filterAndSwitchWorkflows('Legal')">Legal</button>
+          <button class="home-domain-pill" onclick="filterAndSwitchWorkflows('DevOps')">DevOps</button>
+          <button class="home-domain-pill" onclick="filterAndSwitchWorkflows('Education')">Education</button>
+          <button class="home-domain-pill" onclick="filterAndSwitchWorkflows('E-Commerce')">E-Commerce</button>
+          <button class="home-domain-pill" onclick="filterAndSwitchWorkflows('Marketing')">Marketing</button>
+        </div>
+      </div>
+
+      <!-- Community Workflows -->
+      <div class="home-subsection">
+        <div class="home-subsection-header">
+          <h4>Community Workflows</h4>
+          <div class="home-sort-tabs">
+            <button class="home-sort-tab active" data-sort="trending" onclick="sortCommunityWorkflows('trending')">Trending</button>
+            <button class="home-sort-tab" data-sort="newest" onclick="sortCommunityWorkflows('newest')">Newest</button>
+            <button class="home-sort-tab" data-sort="installs" onclick="sortCommunityWorkflows('installs')">Most Installed</button>
+          </div>
+        </div>
+        <div class="home-community-grid" id="communityWorkflows">
+          <!-- Community workflow cards will be inserted here -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div class="home-section">
+      <div class="home-section-header">
+        <h3>Quick Actions</h3>
+      </div>
+      <div class="home-quick-actions">
+        <button class="home-quick-action" onclick="switchTab('embed')" title="Generate embeddings for text">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+            <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
+          </svg>
+          <span>New Embedding</span>
+        </button>
+        <button class="home-quick-action" onclick="switchTab('compare')" title="Compare model similarities">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+            <path d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6"/>
+            <circle cx="12" cy="12" r="3"/>
+          </svg>
+          <span>Compare Models</span>
+        </button>
+        <button class="home-quick-action" onclick="switchTab('search')" title="Search through vectors">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="m21 21-4.35-4.35"/>
+          </svg>
+          <span>Search Vectors</span>
+        </button>
+        <button class="home-quick-action" onclick="switchTab('workflows')" title="View installed workflows">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+            <circle cx="5" cy="12" r="3"/>
+            <circle cx="19" cy="6" r="3"/>
+            <circle cx="19" cy="18" r="3"/>
+            <line x1="7.7" y1="10.7" x2="16.3" y2="7.3"/>
+            <line x1="7.7" y1="13.3" x2="16.3" y2="16.7"/>
+          </svg>
+          <span>My Workflows</span>
+        </button>
+        <button class="home-quick-action" onclick="publishWorkflow()" title="Publish a new workflow">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="17,8 12,3 7,8"/>
+            <line x1="12" y1="3" x2="12" y2="15"/>
+          </svg>
+          <span>Publish Workflow</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="home-footer">
+      <div class="home-footer-links">
+        <a href="https://docs.vaicli.com" target="_blank" rel="noopener">Documentation</a>
+        <a href="https://github.com/mrlynn/voyageai-cli" target="_blank" rel="noopener">GitHub</a>
+        <a href="#" onclick="reportBug()">Report Bug</a>
+        <!-- <a href="#" target="_blank" rel="noopener">Community / Discord</a> -->
+      </div>
+      <div class="home-footer-branding">
+        <span>Built with Voyage AI + MongoDB Atlas</span>
+        <span id="homeFooterVersion">Version 1.0.0 • © 2026 VAI</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ========== EMBED TAB ========== -->
+<div class="tab-panel" id="tab-embed" role="tabpanel" aria-labelledby="tab-btn-embed" tabindex="0">
+  <div class="page-header">
+    <h2 class="page-header-title">Embed</h2>
+    <p class="page-header-subtitle">Generate vector embeddings for text</p>
+    <p class="page-header-hint">Paste or type text below, choose a model, and hit Embed to see the raw vectors and token usage.</p>
+    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/embeddings/embed" target="_blank" rel="noopener" title="Embed 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>
+  <div class="card">
+    <div class="card-title">Input Text</div>
+    <textarea id="embedInput" rows="5" placeholder="Enter text to embed..." aria-label="Text to embed">MongoDB Atlas provides powerful vector search capabilities for AI applications.</textarea>
+  </div>
+
+  <div class="options-row">
+    <div class="option-group">
+      <span class="option-label">Model</span>
+      <select id="embedModel"></select>
+    </div>
+    <div class="option-group">
+      <span class="option-label">Input Type</span>
+      <select id="embedInputType">
+        <option value="">None</option>
+        <option value="query">Query</option>
+        <option value="document">Document</option>
+      </select>
+    </div>
+    <div class="option-group">
+      <span class="option-label">Dimensions</span>
+      <select id="embedDimensions">
+        <option value="">Default</option>
+        <option value="256">256</option>
+        <option value="512">512</option>
+        <option value="1024">1024</option>
+        <option value="2048">2048</option>
+      </select>
+    </div>
+    <div class="option-group">
+      <span class="option-label">Output Type</span>
+      <select id="embedOutputDtype">
+        <option value="float">float (32-bit)</option>
+        <option value="int8">int8 (4× smaller)</option>
+        <option value="uint8">uint8 (4× smaller)</option>
+        <option value="binary">binary (32× smaller)</option>
+        <option value="ubinary">ubinary (32× smaller)</option>
+      </select>
+    </div>
+    <button class="btn" id="embedBtn" onclick="doEmbed()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>Embed</button>
+  </div>
+
+  <div class="error-msg" id="embedError"></div>
+
+  <div class="result-section" id="embedResult">
+    <div class="card">
+      <div class="card-title">Result</div>
+      <div id="embedStats"></div>
+      <div class="vector-preview" id="embedVector"></div>
+      <div style="margin-top:8px;">
+        <button class="btn btn-secondary btn-small" onclick="copyVector()"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M9 9V6a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-3M3 15a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"/></svg>Copy Full Vector</button>
+      </div>
+      <div class="card-title" style="margin-top:16px;">Vector Heatmap</div>
+      <div class="heatmap" id="embedHeatmap"></div>
+    </div>
+  </div>
+</div>
+
+<!-- ========== COMPARE TAB ========== -->
+<div class="tab-panel" id="tab-compare" role="tabpanel" aria-labelledby="tab-btn-compare" tabindex="0">
+  <div class="page-header">
+    <h2 class="page-header-title">Compare</h2>
+    <p class="page-header-subtitle">Visualize similarity between text pairs</p>
+    <p class="page-header-hint">Enter two texts and compare their embeddings: see cosine similarity, a heatmap of vector dimensions, and a visual diff.</p>
+    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/embeddings/similarity" target="_blank" rel="noopener" title="Similarity 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>
   <div class="compare-grid">
     <div class="card">
@@ -3634,7 +4854,7 @@ select:focus { outline: none; border-color: var(--accent); }
         <option value="2048">2048</option>
       </select>
     </div>
-    <button class="btn" id="compareBtn" onclick="doCompare()">⚖️ Compare</button>
+    <button class="btn" id="compareBtn" onclick="doCompare()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4"/></svg>Compare</button>
   </div>
 
   <div class="error-msg" id="compareError"></div>
@@ -3696,8 +4916,8 @@ Semantic search understands meaning beyond keyword matching</textarea>
         <option value="10">10</option>
       </select>
     </div>
-    <button class="btn" id="searchBtn" onclick="doSearch(false)">🔍 Search</button>
-    <button class="btn btn-secondary" id="searchRerankBtn" onclick="doSearch(true)">🔍+ Rerank</button>
+    <button class="btn" id="searchBtn" onclick="doSearch(false)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/></svg>Search</button>
+    <button class="btn btn-secondary" id="searchRerankBtn" onclick="doSearch(true)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M3 6h18M7 12h10M10 18h4"/></svg>Rerank</button>
   </div>
 
   <div class="error-msg" id="searchError"></div>
@@ -3756,7 +4976,7 @@ Semantic search understands meaning beyond keyword matching</textarea>
         <option value="2048">2048</option>
       </select>
     </div>
-    <button class="btn" id="mmCompareBtn" onclick="doMultimodalCompare()">🔮 Compare</button>
+    <button class="btn" id="mmCompareBtn" onclick="doMultimodalCompare()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4"/></svg>Compare</button>
   </div>
 
   <div class="error-msg" id="mmError"></div>
@@ -3794,20 +5014,20 @@ Semantic search understands meaning beyond keyword matching</textarea>
     <div class="card" style="margin-top:12px;">
       <div class="card-title">Search Query</div>
       <div class="mm-search-mode" id="mmSearchMode">
-        <button class="active" data-mode="text" onclick="setMmSearchMode('text')">📝 Text Query</button>
-        <button data-mode="image" onclick="setMmSearchMode('image')">🖼️ Image Query</button>
+        <button class="active" data-mode="text" onclick="setMmSearchMode('text')"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M17 6.1H3M21 12.1H3M15.1 18H3"/></svg>Text Query</button>
+        <button data-mode="image" onclick="setMmSearchMode('image')"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>Image Query</button>
       </div>
       <div id="mmSearchTextWrap">
         <div class="mm-search-row">
           <input type="text" id="mmSearchQuery" placeholder="Enter a search query...">
-          <button class="btn" id="mmSearchBtn" onclick="doMultimodalSearch()">🔮 Search Corpus</button>
+          <button class="btn" id="mmSearchBtn" onclick="doMultimodalSearch()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/></svg>Search Corpus</button>
         </div>
       </div>
       <div id="mmSearchImageWrap" style="display:none;">
         <p style="font-size:13px;color:var(--text-dim);margin-bottom:8px;">Click an image in the corpus above to use it as the search query, then:</p>
         <div style="display:flex;gap:8px;align-items:center;">
           <span id="mmSearchImageLabel" style="font-size:13px;color:var(--text-muted);">No image selected</span>
-          <button class="btn" id="mmSearchImgBtn" onclick="doMultimodalSearch()">🔮 Search Corpus</button>
+          <button class="btn" id="mmSearchImgBtn" onclick="doMultimodalSearch()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/></svg>Search Corpus</button>
         </div>
       </div>
     </div>
@@ -3834,12 +5054,12 @@ Semantic search understands meaning beyond keyword matching</textarea>
 
   <!-- Sub-panel switcher -->
   <div class="bench-panels">
-    <button class="bench-panel-btn active" data-bench="latency">⚡ Latency</button>
-    <button class="bench-panel-btn" data-bench="ranking">🏆 Ranking</button>
-    <button class="bench-panel-btn" data-bench="competitors">⚔️ vs Competitors</button>
-    <button class="bench-panel-btn" data-bench="quantization">⚗️ Quantization</button>
-    <button class="bench-panel-btn" data-bench="cost">💰 Cost</button>
-    <button class="bench-panel-btn" data-bench="history">📊 History</button>
+    <button class="bench-panel-btn active" data-bench="latency"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>Latency</button>
+    <button class="bench-panel-btn" data-bench="ranking"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>Ranking</button>
+    <button class="bench-panel-btn" data-bench="competitors"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M16 3h5v5M8 3H3v5M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3M21 3l-7.828 7.828A4 4 0 0 0 12 13.7V22"/></svg>vs Competitors</button>
+    <button class="bench-panel-btn" data-bench="quantization"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2M8.5 2h7M7 16h10"/></svg>Quantization</button>
+    <button class="bench-panel-btn" data-bench="cost"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Cost</button>
+    <button class="bench-panel-btn" data-bench="history"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>History</button>
   </div>
 
   <!-- ── Latency Panel ── -->
@@ -3861,7 +5081,7 @@ Semantic search understands meaning beyond keyword matching</textarea>
             <option value="10">10</option>
           </select>
         </div>
-        <button class="btn" id="benchLatencyBtn" onclick="doBenchLatency()">⚡ Run Benchmark</button>
+        <button class="btn" id="benchLatencyBtn" onclick="doBenchLatency()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>Run Benchmark</button>
       </div>
     </div>
 
@@ -3915,7 +5135,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
             <option value="8">8</option>
           </select>
         </div>
-        <button class="btn" id="benchRankBtn" onclick="doBenchRanking()">🏆 Compare Rankings</button>
+        <button class="btn" id="benchRankBtn" onclick="doBenchRanking()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>Compare Rankings</button>
       </div>
     </div>
 
@@ -3991,7 +5211,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
 
     <!-- Cost Comparison -->
     <div class="card" style="margin-top:16px;">
-      <div class="card-title">💰 Cost per Million Tokens</div>
+      <div class="card-title"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Cost per Million Tokens</div>
       <p style="color:var(--text-dim);font-size:13px;margin-bottom:16px;">
         Voyage AI offers significant cost savings, especially with asymmetric retrieval strategies.
       </p>
@@ -4152,7 +5372,7 @@ Approximate nearest neighbor algorithms like HNSW enable fast similarity search
 Reranking models rescore initial search results to improve relevance ordering.</textarea>
       </div>
       <div style="margin-top:12px;">
-        <button class="btn" id="quantBtn" onclick="doBenchQuantization()">⚗️ Run Quantization Benchmark</button>
+        <button class="btn" id="quantBtn" onclick="doBenchQuantization()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2M8.5 2h7M7 16h10"/></svg>Run Quantization Benchmark</button>
       </div>
     </div>
 
@@ -4180,7 +5400,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <!-- ── Cost Panel ── -->
   <div class="bench-view" id="bench-cost">
     <div class="card">
-      <div class="card-title">💰 RAG Cost Calculator <button class="cost-help-btn" id="costHelpBtn" title="How the math works">?</button></div>
+      <div class="card-title"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>RAG Cost Calculator <button class="cost-help-btn" id="costHelpBtn" title="How the math works">?</button></div>
 
       <!-- Mode toggle -->
       <div style="margin-bottom: 20px;">
@@ -4301,7 +5521,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <div class="history-empty">No benchmarks recorded yet. Run a latency benchmark to start tracking.</div>
       </div>
       <div style="margin-top:12px;text-align:right;">
-        <button class="btn btn-secondary btn-small" onclick="clearHistory()">🗑 Clear History</button>
+        <button class="btn btn-secondary btn-small" onclick="clearHistory()"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>Clear History</button>
       </div>
     </div>
   </div>
@@ -4318,7 +5538,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <span id="chatStatusDb">No database</span>
       </div>
       <button class="chat-config-toggle" id="chatOpenSettings" onclick="openChatSettings()" title="Configure in Settings">
-        <svg width="14" height="14" viewBox="0 0 16 16"><use href="#lg-config"/></svg>
+        <svg width="14" height="14" viewBox="0 0 24 24"><use href="#lg-config"/></svg>
         Configure
       </button>
     </div>
@@ -4342,11 +5562,18 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <div class="wf-container">
     <div class="wf-library">
       <div class="wf-library-header">
-        <span>Workflows</span>
+        <div class="wf-library-tabs" style="flex:1;">
+          <button class="wf-lib-tab active" data-lib-tab="library" onclick="wfSwitchLibTab('library')">Library</button>
+          <button class="wf-lib-tab" data-lib-tab="palette" onclick="wfSwitchLibTab('palette')">Palette</button>
+        </div>
+        <button class="wf-store-btn" id="wfStoreBtn" onclick="wfStoreOpen()" title="Browse Workflow Store">
+          <svg width="16" height="16" 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="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+        </button>
       </div>
       <div class="wf-library-list" id="wfLibraryList">
         <div style="padding: 16px; color: var(--text-muted); font-size: 12px;">Loading...</div>
       </div>
+      <div class="wf-palette-list" id="wfPaletteList" style="display:none; flex:1; overflow-y:auto; padding:8px;"></div>
       <div class="wf-library-footer">
         <button class="wf-load-file-btn" onclick="wfLoadFromFile()" title="Load workflow JSON from file">
           <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 14h10M8 2v9M5 8l3 3 3-3"/></svg>
@@ -4357,6 +5584,9 @@ Reranking models rescore initial search results to improve relevance ordering.</
     </div>
     <div class="wf-canvas-area">
       <div class="wf-canvas-toolbar" id="wfToolbar">
+        <button class="wf-new-btn" onclick="wfNewWorkflow()" title="Create new workflow">+ New</button>
+        <button class="wf-edit-btn" id="wfEditBtn" onclick="wfEditWorkflow()" disabled title="Edit current workflow">&#9998; Edit</button>
+        <span class="wf-toolbar-sep"></span>
         <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>
@@ -4377,10 +5607,35 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <span class="wf-exec-status-time" id="wfExecStatusTime"></span>
       </div>
       <div class="wf-canvas-empty" id="wfCanvasEmpty">
-        <div class="wf-canvas-empty-icon">&#9881;</div>
+        <div class="wf-canvas-empty-icon"><img src="/icons/watermark.png" alt="Vai"></div>
         <div class="wf-canvas-empty-text">Select a workflow from the library</div>
       </div>
-      <svg id="wf-canvas" xmlns="http://www.w3.org/2000/svg"></svg>
+      <div class="wf-canvas-watermark" id="wfCanvasWatermark"><img src="/icons/watermark.png" alt=""></div>
+      <svg id="wf-canvas" xmlns="http://www.w3.org/2000/svg" ondragover="event.preventDefault()" ondrop="wfCanvasDrop(event)"></svg>
+      <!-- Workflow Store Overlay -->
+      <div class="wf-store-overlay" id="wfStoreOverlay">
+        <div class="wf-store-header">
+          <button class="wf-store-back" onclick="wfStoreClose()">← Library</button>
+          <div class="wf-store-title-area">
+            <span class="wf-store-title">Workflow Store</span>
+            <span class="wf-store-badge">@vaicli</span>
+          </div>
+          <div class="wf-store-search-wrap">
+            <span class="wf-store-search-icon">⌕</span>
+            <input class="wf-store-search" id="wfStoreSearch" placeholder="Search..." oninput="wfStoreRender()">
+          </div>
+          <select class="wf-store-sort" id="wfStoreSort" onchange="wfStoreRender()">
+            <option value="downloads">Popular</option>
+            <option value="name">Name A–Z</option>
+            <option value="complexity">Complex</option>
+          </select>
+        </div>
+        <div class="wf-store-body">
+          <div class="wf-store-inner" id="wfStoreContent">
+            <div style="padding:40px;text-align:center;color:var(--text-muted);">Loading catalog...</div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="wf-inspector collapsed" id="wfInspector">
       <button class="wf-inspector-toggle" id="wfInspectorToggle" onclick="wfToggleInspector()" title="Toggle inspector">&lsaquo;</button>
@@ -4411,6 +5666,21 @@ Reranking models rescore initial search results to improve relevance ordering.</
   </div>
 </div>
 
+<!-- ── Workflow Input Modal (pre-execution) ── -->
+<div class="wf-input-modal-backdrop" id="wfInputModalBackdrop" style="display:none;" onclick="wfCloseInputModal()">
+  <div class="wf-input-modal" onclick="event.stopPropagation()">
+    <div class="wf-input-modal-header">
+      <span class="wf-input-modal-title" id="wfInputModalTitle">Workflow Inputs</span>
+      <button class="wf-output-modal-btn close" onclick="wfCloseInputModal()" title="Close">&times;</button>
+    </div>
+    <div class="wf-input-modal-body" id="wfInputModalBody"></div>
+    <div class="wf-input-modal-footer">
+      <button class="wf-input-modal-cancel" onclick="wfCloseInputModal()">Cancel</button>
+      <button class="wf-input-modal-run" onclick="wfInputModalSubmit()">Run Workflow</button>
+    </div>
+  </div>
+</div>
+
 <!-- ========== ABOUT TAB ========== -->
 <div class="tab-panel" id="tab-about" role="tabpanel" aria-labelledby="tab-btn-about" tabindex="0">
   <div class="about-container">
@@ -4421,9 +5691,9 @@ Reranking models rescore initial search results to improve relevance ordering.</
           <div class="about-name">Michael Lynn</div>
           <div class="about-role">Principal Staff Developer Advocate · MongoDB</div>
           <div class="about-links">
-            <a href="https://github.com/mrlynn" target="_blank" rel="noopener">🔗 GitHub</a>
-            <a href="https://mlynn.org" target="_blank" rel="noopener">🌐 mlynn.org</a>
-            <a href="https://www.npmjs.com/package/voyageai-cli" target="_blank" rel="noopener">📦 npm</a>
+            <a href="https://github.com/mrlynn" target="_blank" rel="noopener"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>GitHub</a>
+            <a href="https://mlynn.org" target="_blank" rel="noopener"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><circle cx="12" cy="12" r="10"/><path d="M2 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"/></svg>mlynn.org</a>
+            <a href="https://www.npmjs.com/package/voyageai-cli" target="_blank" rel="noopener"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16zM3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>npm</a>
           </div>
         </div>
       </div>
@@ -4490,13 +5760,39 @@ Reranking models rescore initial search results to improve relevance ordering.</
     <div class="card" style="margin-top:16px;">
       <div class="about-section" style="padding-bottom:0;">
         <div class="about-section-title">What's New</div>
-        <div class="about-text" style="font-size:13px;">
-          <strong>v1.26</strong> — Agent workflows with thinking panel &amp; markdown rendering, multi-step tool orchestration<br>
-          <strong>v1.25</strong> — Code generation &amp; project scaffolding tabs<br>
-          <strong>v1.24</strong> — MCP server install/uninstall/status commands, Electron app v1.5<br>
-          <strong>v1.23</strong> — MCP server (expose vai tools to AI agents), HTTP transport, bearer auth, 71+ MCP tests<br>
-          <strong>v1.22</strong> — RAG chat with smart source labels, configurable system prompts, streaming responses<br>
-          <strong>v1.2</strong> — Multimodal tab, 4 new Explore concepts, auto-update, hidden easter egg 🕹️
+        <div class="about-changelog">
+          <details open>
+            <summary><strong>v1.28</strong> — Lucide icon overhaul</summary>
+            <p>Replaced all emoji and filled LeafyGreen icons with clean, stroke-based Lucide SVGs across the entire app — tabs, workflow nodes, action buttons, benchmark page, explore cards, settings, and more. Added reusable icon helper and path library.</p>
+          </details>
+          <details>
+            <summary><strong>v1.27</strong> — Workflow builder improvements</summary>
+            <p>Workflow palette with drag-and-drop node creation, edge drawing, dry-run preview, and builder mode toggle. New workflow node types: query, rerank, search, ingest.</p>
+          </details>
+          <details>
+            <summary><strong>v1.26</strong> — Agent workflows</summary>
+            <p>Agent workflows with thinking panel &amp; markdown rendering, multi-step tool orchestration, interactive DAG visualization with execution animation.</p>
+          </details>
+          <details>
+            <summary><strong>v1.25</strong> — Code generation &amp; scaffolding</summary>
+            <p>Generate embedding/search code snippets and scaffold full project directories with best-practice structure, ready-to-run RAG pipelines.</p>
+          </details>
+          <details>
+            <summary><strong>v1.24</strong> — MCP server management</summary>
+            <p>MCP server install/uninstall/status commands. Electron app v1.5 with signed macOS builds.</p>
+          </details>
+          <details>
+            <summary><strong>v1.23</strong> — MCP server</summary>
+            <p>Expose vai tools to AI agents via MCP protocol. HTTP transport, bearer auth, 71+ MCP tests.</p>
+          </details>
+          <details>
+            <summary><strong>v1.22</strong> — RAG chat</summary>
+            <p>RAG chat with smart source labels, configurable system prompts, streaming responses.</p>
+          </details>
+          <details>
+            <summary><strong>v1.2</strong> — Multimodal &amp; more</summary>
+            <p>Multimodal tab, 4 new Explore concepts, auto-update, hidden easter egg <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg></p>
+          </details>
         </div>
       </div>
     </div>
@@ -4519,11 +5815,11 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <!-- Mode Toggle -->
   <div class="subtabs" role="tablist">
     <button class="subtab active" id="genModeCode" onclick="setGenerateMode('code')" role="tab" aria-selected="true">
-      <svg viewBox="0 0 16 16"><path fill="currentColor" d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
       Generate Code
     </button>
     <button class="subtab" id="genModeScaffold" onclick="setGenerateMode('scaffold')" role="tab" aria-selected="false">
-      <svg viewBox="0 0 16 16"><path fill="currentColor" d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path fill="currentColor" d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 13h4"/><path d="M10 17h4"/><path d="M10 9h1"/></svg>
       Scaffold Project
     </button>
   </div>
@@ -4665,7 +5961,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
         </div>
         <div id="scaffoldWebButtons" style="display:none;">
           <button class="btn btn-primary" onclick="downloadScaffoldZip()" id="scaffoldDownloadBtn">
-            <svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:6px;"><path fill="currentColor" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill="currentColor" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
             Download ZIP
           </button>
         </div>
@@ -4722,31 +6018,31 @@ Reranking models rescore initial search results to improve relevance ordering.</
     <nav class="settings-nav">
       <div class="settings-nav-header">Settings</div>
       <button class="settings-nav-item active" data-settings-section="general">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-config"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-config"/></svg>
         <span>General</span>
       </button>
       <button class="settings-nav-item" data-settings-section="appearance">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-palette"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-palette"/></svg>
         <span>Appearance</span>
       </button>
       <button class="settings-nav-item" data-settings-section="models">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-cube"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-cube"/></svg>
         <span>Models</span>
       </button>
       <button class="settings-nav-item" data-settings-section="chat">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-chat"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-chat"/></svg>
         <span>Chat</span>
       </button>
       <button class="settings-nav-item" data-settings-section="benchmark">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-gauge"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-gauge"/></svg>
         <span>Benchmark</span>
       </button>
       <button class="settings-nav-item" data-settings-section="privacy">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-shield"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-shield"/></svg>
         <span>Data &amp; Privacy</span>
       </button>
       <button class="settings-nav-item" data-settings-section="health">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-pulse"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-pulse"/></svg>
         <span>Health Check</span>
       </button>
     </nav>
@@ -4768,12 +6064,12 @@ Reranking models rescore initial search results to improve relevance ordering.</
           <div class="settings-row">
             <div class="settings-label">
               <span class="settings-label-text">API Key <span class="settings-origin" data-origin-key="apiKey"></span></span>
-              <span class="settings-label-hint">Encrypted via OS keychain · <a href="https://dash.voyageai.com" target="_blank" class="settings-key-link">🔑 Get a key</a></span>
+              <span class="settings-label-hint">Encrypted via OS keychain · <a href="https://dash.voyageai.com" target="_blank" class="settings-key-link"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:2px;"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>Get a key</a></span>
             </div>
             <div class="settings-control" style="min-width:260px;">
               <div class="settings-api-field">
                 <input type="password" id="settingsApiKey" placeholder="pa-..." autocomplete="off" spellcheck="false">
-                <button type="button" id="settingsApiKeyToggle" title="Show/hide key">👁</button>
+                <button type="button" id="settingsApiKeyToggle" title="Show/hide key"><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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg></button>
                 <button type="button" id="settingsApiKeySave" class="save-btn" title="Save key">Save</button>
               </div>
             </div>
@@ -4801,6 +6097,26 @@ Reranking models rescore initial search results to improve relevance ordering.</
               </select>
             </div>
           </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Default Tab</span>
+              <span class="settings-label-hint">Which tab to open when the app starts</span>
+            </div>
+            <div class="settings-control">
+              <select class="settings-select" id="settingsDefaultTab">
+                <option value="home" selected>Home</option>
+                <option value="embed">Embed</option>
+                <option value="compare">Compare</option>
+                <option value="search">Search</option>
+                <option value="multimodal">Multimodal</option>
+                <option value="generate">Generate</option>
+                <option value="chat">Chat</option>
+                <option value="workflows">Workflows</option>
+                <option value="benchmark">Benchmark</option>
+                <option value="explore">Explore</option>
+              </select>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -4927,7 +6243,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
                 title="Show/hide API key"
                 style="padding:8px 12px;min-width:auto"
               >
-                👁️
+                <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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
               </button>
               <button
                 class="btn"
@@ -4936,7 +6252,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
                 title="Save API key"
                 style="padding:8px 12px;min-width:auto"
               >
-                💾
+                <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="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>
               </button>
             </div>
           </div>
@@ -5289,78 +6605,452 @@ async function init() {
   populateModelSelects();
   buildExploreCards();
 
+  // Apply default tab setting
+  const settings = JSON.parse(localStorage.getItem('vai-settings') || '{}');
+  const defaultTab = settings.defaultTab || 'home';
+  switchTab(defaultTab);
+
   // Telemetry
   initTelemetryToggle();
   sendTelemetry('app_launch');
 }
 
-// ── Tabs ──
-function setupTabs() {
-  const tabBtns = document.querySelectorAll('.tab-btn');
-  const tabList = Array.from(tabBtns);
+// ── Tabs ──
+function setupTabs() {
+  const tabBtns = document.querySelectorAll('.tab-btn');
+  const tabList = Array.from(tabBtns);
+  
+  tabBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      switchTab(btn.dataset.tab);
+    });
+    
+    // Keyboard navigation for accessibility
+    btn.addEventListener('keydown', (e) => {
+      const currentIndex = tabList.indexOf(btn);
+      let nextIndex = -1;
+      
+      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        nextIndex = (currentIndex + 1) % tabList.length;
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+        e.preventDefault();
+        nextIndex = (currentIndex - 1 + tabList.length) % tabList.length;
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        nextIndex = 0;
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        nextIndex = tabList.length - 1;
+      }
+      
+      if (nextIndex >= 0) {
+        tabList[nextIndex].focus();
+        switchTab(tabList[nextIndex].dataset.tab);
+      }
+    });
+  });
+
+  // Settings cog in header
+  const settingsCog = document.querySelector('.sidebar-settings-btn');
+  if (settingsCog) {
+    settingsCog.addEventListener('click', () => {
+      switchTab(settingsCog.dataset.tab);
+    });
+  }
+}
+
+function switchTab(tab) {
+  document.querySelectorAll('.tab-btn').forEach(b => {
+    const isActive = b.dataset.tab === tab;
+    b.classList.toggle('active', isActive);
+    // Update ARIA attributes for accessibility
+    b.setAttribute('aria-selected', isActive ? 'true' : 'false');
+    b.setAttribute('tabindex', isActive ? '0' : '-1');
+  });
+  document.querySelectorAll('.tab-panel').forEach(p => {
+    const isActive = p.id === 'tab-' + tab;
+    p.classList.toggle('active', isActive);
+    // Hide inactive panels from screen readers
+    p.setAttribute('aria-hidden', isActive ? 'false' : 'true');
+  });
+  // Sync settings cog highlight
+  const settingsBtn = document.querySelector('.sidebar-settings-btn');
+  if (settingsBtn) settingsBtn.classList.toggle('active', tab === 'settings');
+  // Track tab views
+  sendTelemetry('tab_view', { tab });
+  
+  // Initialize Home page if switching to it
+  if (tab === 'home') {
+    homeInit();
+  }
+}
+// Expose globally so Electron main process can call it
+window.switchTab = switchTab;
+
+// ── Home Page ──
+
+let homeData = {
+  announcements: null,
+  releases: null,
+  featuredWorkflows: null,
+  communityWorkflows: null,
+  currentAnnouncementIndex: 0,
+  sortMode: 'trending'
+};
+
+async function homeInit() {
+  // Only initialize once per session
+  if (homeData.announcements !== null) return;
+  
+  try {
+    // Load version info
+    await updateHomeVersionInfo();
+
+    // Check API key status and show warning if needed
+    checkApiKeyStatus();
+    
+    // Load announcements and releases first (fast, local data)
+    await Promise.all([
+      loadAnnouncements(),
+      loadReleases(),
+    ]);
+    
+    // Render available sections immediately
+    renderAnnouncements();
+    renderReleases();
+
+    // Load marketplace data in background (slower, network-dependent)
+    loadMarketplaceData().then(() => {
+      renderFeaturedWorkflows();
+      renderCommunityWorkflows();
+    }).catch(() => {});
+    
+  } catch (err) {
+    console.error('Failed to initialize Home page:', err);
+  }
+}
+
+async function updateHomeVersionInfo() {
+  let version = window.appVersion;
+
+  // If version not set yet, try to fetch from Electron
+  if (!version && window.vai && window.vai.getVersion) {
+    try {
+      const v = await window.vai.getVersion();
+      if (v) {
+        version = typeof v === 'object' ? v.app : v;
+        window.appVersion = version;
+      }
+    } catch (e) {
+      console.warn('Failed to get version:', e);
+    }
+  }
+
+  // Fallback for web mode: try to get from CLI package.json via API
+  if (!version) {
+    try {
+      const res = await fetch('/api/version');
+      if (res.ok) {
+        const data = await res.json();
+        version = data.version || data.app;
+        if (version) window.appVersion = version;
+      }
+    } catch (e) {
+      // Ignore fetch errors in web mode
+    }
+  }
+
+  version = version || 'dev';
+  document.getElementById('homeVersionBadge').textContent = `v${version}`;
+  const footerEl = document.getElementById('homeFooterVersion');
+  if (footerEl) footerEl.textContent = `Version ${version} • © 2026 VAI`;
+}
+
+async function checkApiKeyStatus() {
+  try {
+    const res = await fetch('/api/config');
+    const data = await res.json();
+    const warningEl = document.getElementById('homeApiWarning');
+    
+    if (!data.hasKey) {
+      warningEl.style.display = 'block';
+    } else {
+      warningEl.style.display = 'none';
+    }
+  } catch {
+    // If config check fails, assume no API key
+    document.getElementById('homeApiWarning').style.display = 'block';
+  }
+}
+
+async function loadAnnouncements() {
+  try {
+    const res = await fetch('/api/home/announcements');
+    const data = await res.json();
+    
+    // Filter out dismissed announcements
+    const dismissed = JSON.parse(localStorage.getItem('vai-dismissed-announcements') || '[]');
+    homeData.announcements = data.announcements.filter(a => !dismissed.includes(a.id));
+    
+  } catch (err) {
+    console.error('Failed to load announcements:', err);
+    homeData.announcements = [];
+  }
+}
+
+async function loadReleases() {
+  try {
+    // Try cache first
+    const cached = localStorage.getItem('vai-releases-cache');
+    if (cached) {
+      const { data, timestamp } = JSON.parse(cached);
+      // Use cache if less than 30 minutes old AND it has real data (not fallback)
+      const hasRealData = data && data.length > 0 && !data[0].version?.includes('1.0.0');
+      if (hasRealData && Date.now() - timestamp < 30 * 60 * 1000) {
+        homeData.releases = data;
+        return;
+      }
+    }
+
+    const res = await fetch('/api/home/releases');
+    const data = await res.json();
+    homeData.releases = data.releases;
+
+    // Only cache if we got real data (not fallback)
+    const hasRealData = data.releases && data.releases.length > 0 && !data.releases[0].version?.includes('1.0.0');
+    if (hasRealData) {
+      localStorage.setItem('vai-releases-cache', JSON.stringify({
+        data: data.releases,
+        timestamp: Date.now()
+      }));
+    } else {
+      // Clear stale cache if we got fallback data
+      localStorage.removeItem('vai-releases-cache');
+    }
+
+  } catch (err) {
+    console.error('Failed to load releases:', err);
+    homeData.releases = [];
+  }
+}
+
+async function loadMarketplaceData() {
+  try {
+    const res = await fetch('/api/workflows/catalog');
+    const data = await res.json();
+    
+    // Extract featured and community workflows
+    homeData.featuredWorkflows = data.workflows.filter(w => w.featured).slice(0, 4);
+    homeData.communityWorkflows = data.workflows.filter(w => !w.featured);
+    
+  } catch (err) {
+    console.error('Failed to load marketplace data:', err);
+    homeData.featuredWorkflows = [];
+    homeData.communityWorkflows = [];
+  }
+}
+
+function renderAnnouncements() {
+  const container = document.getElementById('homeAnnouncements');
+  const carousel = document.getElementById('announcementsCarousel');
+  const dots = document.getElementById('announcementsDots');
+  
+  if (!homeData.announcements.length) {
+    container.style.display = 'none';
+    return;
+  }
+  
+  // Render cards
+  carousel.innerHTML = homeData.announcements.map((ann, i) => `
+    <div class="home-announcement-card${i === 0 ? ' active' : ''}" data-id="${ann.id}">
+      <button class="home-announcement-dismiss" onclick="dismissAnnouncement('${ann.id}')">×</button>
+      ${ann.badge ? `<div class="badge">${ann.badge}</div>` : ''}
+      <h3>${ann.title}</h3>
+      <p>${ann.description}</p>
+      ${ann.cta ? `<button class="cta" onclick="${ann.cta.action === 'navigate' ? `switchTab('${ann.cta.target.slice(1)}')` : 'void(0)'}">${ann.cta.label}</button>` : ''}
+    </div>
+  `).join('');
+  
+  // Render dots
+  if (homeData.announcements.length > 1) {
+    dots.innerHTML = homeData.announcements.map((_, i) => 
+      `<div class="home-announcement-dot${i === 0 ? ' active' : ''}" onclick="showAnnouncement(${i})"></div>`
+    ).join('');
+    
+    // Start rotation
+    startAnnouncementRotation();
+  }
+  
+  container.style.display = 'block';
+}
+
+function showAnnouncement(index) {
+  homeData.currentAnnouncementIndex = index;
+  
+  // Update cards
+  document.querySelectorAll('.home-announcement-card').forEach((card, i) => {
+    card.classList.toggle('active', i === index);
+  });
+  
+  // Update dots
+  document.querySelectorAll('.home-announcement-dot').forEach((dot, i) => {
+    dot.classList.toggle('active', i === index);
+  });
+}
+
+function startAnnouncementRotation() {
+  setInterval(() => {
+    if (homeData.announcements.length > 1) {
+      homeData.currentAnnouncementIndex = (homeData.currentAnnouncementIndex + 1) % homeData.announcements.length;
+      showAnnouncement(homeData.currentAnnouncementIndex);
+    }
+  }, 5000); // Rotate every 5 seconds
+}
+
+function dismissAnnouncement(id) {
+  const dismissed = JSON.parse(localStorage.getItem('vai-dismissed-announcements') || '[]');
+  dismissed.push(id);
+  localStorage.setItem('vai-dismissed-announcements', JSON.stringify(dismissed));
+  
+  // Remove from current data and re-render
+  homeData.announcements = homeData.announcements.filter(a => a.id !== id);
+  renderAnnouncements();
+}
+
+function renderReleases() {
+  const container = document.getElementById('releasesTimeline');
+  
+  const releases = homeData.releases.slice(0, 1); // Show only the latest release
+  container.innerHTML = releases.map(release => `
+    <div class="home-release-item">
+      <div>
+        <div class="home-release-version">${release.version}</div>
+        <div class="home-release-date">${new Date(release.date).toLocaleDateString()}</div>
+        <ul class="home-release-highlights">
+          ${release.highlights.map(highlight => `<li>${highlight}</li>`).join('')}
+        </ul>
+      </div>
+    </div>
+  `).join('');
+}
+
+function renderFeaturedWorkflows() {
+  const container = document.getElementById('featuredWorkflows');
+  
+  if (!homeData.featuredWorkflows.length) {
+    container.innerHTML = '<div class="home-community-empty"><h4>Coming Soon</h4><p>Featured workflows launching soon</p></div>';
+    return;
+  }
+  
+  container.innerHTML = homeData.featuredWorkflows.map(workflow => `
+    <div class="home-workflow-card">
+      <h5>${workflow.name || 'Untitled'}</h5>
+      <p>${workflow.description || 'No description available'}</p>
+      <div class="home-workflow-meta">
+        <div class="home-workflow-domain">${workflow.category || 'utility'}</div>
+        <div class="home-workflow-author">by ${workflow.author?.name || 'unknown'}</div>
+      </div>
+      <div class="home-workflow-actions">
+        <button class="home-workflow-btn" onclick="installWorkflow('${workflow.packageName}')">Install</button>
+        <button class="home-workflow-btn" onclick="viewWorkflowDetails('${workflow.packageName}')">Details</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function renderCommunityWorkflows() {
+  const container = document.getElementById('communityWorkflows');
+  
+  if (!homeData.communityWorkflows.length) {
+    container.innerHTML = '<div class="home-community-empty"><h4>Be the First!</h4><p>Publish a workflow to get started</p></div>';
+    return;
+  }
+  
+  let workflows = [...homeData.communityWorkflows];
+
+  // Sort based on current mode
+  switch (homeData.sortMode) {
+    case 'trending':
+      // Use downloads as proxy for trending
+      workflows.sort((a, b) => (b.downloads || 0) - (a.downloads || 0));
+      break;
+    case 'newest':
+      // Sort by name alphabetically as fallback (no publish date available)
+      workflows.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+      break;
+    case 'installs':
+      workflows.sort((a, b) => (b.downloads || 0) - (a.downloads || 0));
+      break;
+  }
+  
+  container.innerHTML = workflows.slice(0, 6).map(workflow => `
+    <div class="home-workflow-card">
+      <h5>${workflow.name || 'Untitled'}</h5>
+      <p>${workflow.description || 'No description available'}</p>
+      <div class="home-workflow-meta">
+        <div class="home-workflow-domain">${workflow.category || 'utility'}</div>
+        <div class="home-workflow-author">by ${workflow.author?.name || 'unknown'}</div>
+      </div>
+      <div class="home-workflow-actions">
+        <button class="home-workflow-btn" onclick="installWorkflow('${workflow.packageName}')">Install</button>
+        <button class="home-workflow-btn" onclick="viewWorkflowDetails('${workflow.packageName}')">Details</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function sortCommunityWorkflows(mode) {
+  homeData.sortMode = mode;
   
-  tabBtns.forEach(btn => {
-    btn.addEventListener('click', () => {
-      switchTab(btn.dataset.tab);
-    });
-    
-    // Keyboard navigation for accessibility
-    btn.addEventListener('keydown', (e) => {
-      const currentIndex = tabList.indexOf(btn);
-      let nextIndex = -1;
-      
-      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
-        e.preventDefault();
-        nextIndex = (currentIndex + 1) % tabList.length;
-      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
-        e.preventDefault();
-        nextIndex = (currentIndex - 1 + tabList.length) % tabList.length;
-      } else if (e.key === 'Home') {
-        e.preventDefault();
-        nextIndex = 0;
-      } else if (e.key === 'End') {
-        e.preventDefault();
-        nextIndex = tabList.length - 1;
-      }
-      
-      if (nextIndex >= 0) {
-        tabList[nextIndex].focus();
-        switchTab(tabList[nextIndex].dataset.tab);
-      }
-    });
+  // Update tab appearance
+  document.querySelectorAll('.home-sort-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.sort === mode);
   });
+  
+  renderCommunityWorkflows();
+}
 
-  // Settings cog in header
-  const settingsCog = document.querySelector('.sidebar-settings-btn');
-  if (settingsCog) {
-    settingsCog.addEventListener('click', () => {
-      switchTab(settingsCog.dataset.tab);
-    });
+function filterAndSwitchWorkflows(domain) {
+  // Switch to workflows tab with domain filter
+  switchTab('workflows');
+  // TODO: Apply domain filter when workflows tab supports it
+  console.log('Filtering workflows by domain:', domain);
+}
+
+function installWorkflow(packageName) {
+  // Use the workflow store install function
+  wfStoreInstall(packageName, null);
+}
+
+function viewWorkflowDetails(packageName) {
+  // Find the workflow by packageName and show its details
+  const allWorkflows = [...(homeData.featuredWorkflows || []), ...(homeData.communityWorkflows || [])];
+  const wf = allWorkflows.find(w => w.packageName === packageName);
+  if (wf) {
+    // Use the workflow store detail modal
+    wfStoreShowDetail(wf.name);
+  } else {
+    // Fallback: switch to workflows tab
+    switchTab('workflows');
   }
 }
 
-function switchTab(tab) {
-  document.querySelectorAll('.tab-btn').forEach(b => {
-    const isActive = b.dataset.tab === tab;
-    b.classList.toggle('active', isActive);
-    // Update ARIA attributes for accessibility
-    b.setAttribute('aria-selected', isActive ? 'true' : 'false');
-    b.setAttribute('tabindex', isActive ? '0' : '-1');
-  });
-  document.querySelectorAll('.tab-panel').forEach(p => {
-    const isActive = p.id === 'tab-' + tab;
-    p.classList.toggle('active', isActive);
-    // Hide inactive panels from screen readers
-    p.setAttribute('aria-hidden', isActive ? 'false' : 'true');
-  });
-  // Sync settings cog highlight
-  const settingsBtn = document.querySelector('.sidebar-settings-btn');
-  if (settingsBtn) settingsBtn.classList.toggle('active', tab === 'settings');
-  // Track tab views
-  sendTelemetry('tab_view', { tab });
+function publishWorkflow() {
+  // TODO: Open workflow publishing flow
+  console.log('Opening workflow publisher');
+  switchTab('workflows');
+}
+
+function reportBug() {
+  // Open bug report (reuse existing functionality if available)
+  const bugButton = document.getElementById('bugButton');
+  if (bugButton) {
+    bugButton.click();
+  } else {
+    window.open('https://github.com/mrlynn/voyageai-cli/issues/new', '_blank');
+  }
 }
-// Expose globally so Electron main process can call it
-window.switchTab = switchTab;
 
 // ── Config ──
 async function loadConfig() {
@@ -5952,12 +7642,12 @@ async function downloadScaffoldZip() {
     // Show success
     btn.innerHTML = '<span style="margin-right:6px;">✓</span> Downloaded!';
     setTimeout(() => {
-      btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:6px;"><path fill="currentColor" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill="currentColor" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg> Download ZIP';
+      btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Download ZIP';
       btn.disabled = false;
     }, 2000);
   } catch (err) {
     alert('Error: ' + err.message);
-    btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:6px;"><path fill="currentColor" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill="currentColor" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg> Download ZIP';
+    btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Download ZIP';
     btn.disabled = false;
   }
 }
@@ -6053,37 +7743,73 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 // ── Explore: icons and tab mappings per concept ──
+// Lucide SVG icon helper — returns an inline <svg> string
+function lucideIcon(d, size = 16) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
+}
+
+// Lucide path constants for concept/button icons
+const LI = {
+  zap:        'M13 2 3 14h9l-1 8 10-12h-9l1-8z',
+  search:     'M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z',
+  trophy:     'M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2z',
+  bot:        'M12 8V4H8M8 2h8M2 14a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zM6 14v4M10 14v4M14 14v4M18 14v4',
+  ruler:      'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z M15 5l4 4',
+  target:     'M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0M12 12m-6 0a6 6 0 1 0 12 0 6 6 0 1 0-12 0M12 12m-2 0a2 2 0 1 0 4 0 2 2 0 1 0-4 0',
+  tag:        'M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42zM7.5 7.5m-.5 0a.5.5 0 1 0 1 0 .5.5 0 1 0-1 0',
+  brain:      'M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2zM14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2z',
+  key:        'M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4zM16.5 7.5m-.5 0a.5.5 0 1 0 1 0 .5.5 0 1 0-1 0',
+  globe:      'M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0M2 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',
+  package:    'M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16zM3.27 6.96 12 12.01l8.73-5.05M12 22.08V12',
+  timer:      'M10 2h4M12 14l3-3M12 22a8 8 0 1 0 0-16 8 8 0 0 0 0 16z',
+  flask:      'M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2M8.5 2h7M7 16h10',
+  puzzle:     'M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 2c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.878.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.968 1.02z',
+  link:       'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+  barChart:   'M12 20V10M18 20V4M6 20v-4',
+  microscope: 'M6 18h8M3 22h18M14 22a7 7 0 1 0 0-14h-1M9 14h2M9 12a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2z',
+  image:      'M3 3h18a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM21 15l-5-5L5 21',
+  shuffle:    'M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22M18 2l4 4-4 4M2 6h1.9c1.5 0 2.9.9 3.6 2.2M22 18l-4 4-4-4M19 14h3',
+  circle:     'M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0',
+  fileTxt:    'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7zM14 2v4a2 2 0 0 0 2 2h4M10 13h4M10 17h4M10 9h1',
+  scale:      'M16 3h5v5M8 3H3v5M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3M21 3l-7.828 7.828A4 4 0 0 0 12 13.7V22',
+  laptop:     'M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9M2 20h20M12 12h.01',
+  blocks:     'M2 12h10v10H2zM14 4l6 3.5v7L14 18l-6-3.5v-7zM12 2l10 6',
+  refresh:    'M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16',
+  sparkle:    'M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z',
+  download:   'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3',
+  copy:       'M9 9V6a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-3M3 15a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z',
+  filter:     'M3 6h18M7 12h10M10 18h4',
+};
+
 const CONCEPT_META = {
-  embeddings:          { icon: '🧮', tab: 'embed' },
-  reranking:           { icon: '🏆', tab: 'search' },
-  'vector-search':     { icon: '🔎', tab: 'search' },
-  rag:                 { icon: '🤖', tab: 'search' },
-  'cosine-similarity': { icon: '📐', tab: 'compare' },
-  'two-stage-retrieval': { icon: '🎯', tab: 'search' },
-  'input-type':        { icon: '🏷️', tab: 'embed' },
-  models:              { icon: '🧠', tab: 'embed' },
-  'api-keys':          { icon: '🔑', tab: 'embed' },
-  'api-access':        { icon: '🌐', tab: 'embed' },
-  'batch-processing':  { icon: '📦', tab: 'embed' },
-  benchmarking:        { icon: '⏱', tab: 'benchmark' },
-  quantization:        { icon: '⚗️', tab: 'benchmark' },
-  'mixture-of-experts': { icon: '🧩', tab: 'embed' },
-  'shared-embedding-space': { icon: '🔗', tab: 'compare' },
-  'rteb-benchmarks':   { icon: '📊', tab: 'benchmark' },
-  'voyage-4-nano':     { icon: '🔬', tab: 'embed' },
-  'rerank-eval':       { icon: '📐', tab: 'benchmark' },
-  'multimodal-embeddings': { icon: '🖼️', tab: 'multimodal' },
-  'cross-modal-search':    { icon: '🔀', tab: 'multimodal' },
-  'modality-gap':          { icon: '🕳️', tab: 'multimodal' },
-  'multimodal-rag':        { icon: '📄', tab: 'multimodal' },
-  'provider-comparison':   { icon: '⚖️', tab: 'explore' },
-  // Code generation & scaffolding
-  'code-generation':   { icon: '💻', tab: 'explore' },
-  scaffolding:         { icon: '🏗️', tab: 'explore' },
-  'eval-comparison':   { icon: '📊', tab: 'benchmark' },
-  // MongoDB Auto-Embedding
-  'auto-embedding':        { icon: '⚡', tab: 'explore' },
-  'vai-vs-auto-embedding': { icon: '🔄', tab: 'explore' },
+  embeddings:          { icon: LI.zap,        tab: 'embed' },
+  reranking:           { icon: LI.trophy,     tab: 'search' },
+  'vector-search':     { icon: LI.search,     tab: 'search' },
+  rag:                 { icon: LI.bot,        tab: 'search' },
+  'cosine-similarity': { icon: LI.ruler,      tab: 'compare' },
+  'two-stage-retrieval': { icon: LI.target,   tab: 'search' },
+  'input-type':        { icon: LI.tag,        tab: 'embed' },
+  models:              { icon: LI.brain,      tab: 'embed' },
+  'api-keys':          { icon: LI.key,        tab: 'embed' },
+  'api-access':        { icon: LI.globe,      tab: 'embed' },
+  'batch-processing':  { icon: LI.package,    tab: 'embed' },
+  benchmarking:        { icon: LI.timer,      tab: 'benchmark' },
+  quantization:        { icon: LI.flask,      tab: 'benchmark' },
+  'mixture-of-experts': { icon: LI.puzzle,    tab: 'embed' },
+  'shared-embedding-space': { icon: LI.link,  tab: 'compare' },
+  'rteb-benchmarks':   { icon: LI.barChart,   tab: 'benchmark' },
+  'voyage-4-nano':     { icon: LI.microscope, tab: 'embed' },
+  'rerank-eval':       { icon: LI.ruler,      tab: 'benchmark' },
+  'multimodal-embeddings': { icon: LI.image,  tab: 'multimodal' },
+  'cross-modal-search':    { icon: LI.shuffle, tab: 'multimodal' },
+  'modality-gap':          { icon: LI.circle,  tab: 'multimodal' },
+  'multimodal-rag':        { icon: LI.fileTxt, tab: 'multimodal' },
+  'provider-comparison':   { icon: LI.scale,   tab: 'explore' },
+  'code-generation':   { icon: LI.laptop,     tab: 'explore' },
+  scaffolding:         { icon: LI.blocks,     tab: 'explore' },
+  'eval-comparison':   { icon: LI.barChart,   tab: 'benchmark' },
+  'auto-embedding':        { icon: LI.zap,    tab: 'explore' },
+  'vai-vs-auto-embedding': { icon: LI.refresh, tab: 'explore' },
 };
 
 let exploreConcepts = {};
@@ -6109,13 +7835,13 @@ function buildExploreCards() {
   grid.innerHTML = '';
 
   for (const [key, concept] of Object.entries(exploreConcepts)) {
-    const meta = CONCEPT_META[key] || { icon: '📚', tab: 'embed' };
+    const meta = CONCEPT_META[key] || { icon: LI.package, tab: 'embed' };
     const card = document.createElement('div');
     card.className = 'explore-card';
     card.dataset.key = key;
 
     card.innerHTML = `
-      <div class="explore-card-icon">${meta.icon}</div>
+      <div class="explore-card-icon">${lucideIcon(meta.icon, 28)}</div>
       <div class="explore-card-title">${escapeHtml(concept.title)}</div>
       <div class="explore-card-summary">${escapeHtml(concept.summary)}</div>
     `;
@@ -6142,12 +7868,12 @@ let exploreModalPreviousFocus = null;
 function openExploreModal(key) {
   const concept = exploreConcepts[key];
   if (!concept) return;
-  const meta = CONCEPT_META[key] || { icon: '📚', tab: 'embed' };
+  const meta = CONCEPT_META[key] || { icon: LI.package, tab: 'embed' };
 
   // Save the currently focused element to restore when modal closes
   exploreModalPreviousFocus = document.activeElement;
 
-  document.getElementById('exploreModalIcon').textContent = meta.icon;
+  document.getElementById('exploreModalIcon').innerHTML = lucideIcon(meta.icon, 32);
   document.getElementById('exploreModalTitle').textContent = concept.title;
   document.getElementById('exploreModalSummary').textContent = concept.summary;
 
@@ -7250,6 +8976,15 @@ function initSettings() {
     timeoutSel.addEventListener('change', () => saveSetting('timeout', timeoutSel.value));
   }
 
+  // Default Tab
+  const defaultTabSel = document.getElementById('settingsDefaultTab');
+  if (defaultTabSel) {
+    defaultTabSel.value = s.defaultTab || 'home';
+    defaultTabSel.addEventListener('change', () => {
+      saveSetting('defaultTab', defaultTabSel.value);
+    });
+  }
+
   // Benchmark iterations
   const benchIterSel = document.getElementById('settingsBenchIter');
   if (benchIterSel) {
@@ -9790,19 +11525,33 @@ const WF_NODE_META = {
   search:      { icon: '\u{1F50E}', label: 'Vector Search',   color: '#40E0FF', category: 'retrieval' },
   rerank:      { icon: '\u{1F3C6}', label: 'Rerank',          color: '#40E0FF', category: 'retrieval' },
   ingest:      { icon: '\u{1F4E5}', label: 'Ingest',          color: '#40E0FF', category: 'retrieval' },
-  embed:       { icon: '\u{1F4D0}', label: 'Embed',           color: '#B388FF', category: 'embedding' },
-  similarity:  { icon: '\u{1F517}', label: 'Similarity',      color: '#B388FF', category: 'embedding' },
-  collections: { icon: '\u{1F5C4}', label: 'Collections',     color: '#00D4AA', category: 'management' },
-  models:      { icon: '\u{1F4CB}', label: 'Models',          color: '#00D4AA', category: 'management' },
-  estimate:    { icon: '\u{1F4B0}', label: 'Cost Estimate',   color: '#FFB74D', category: 'utility' },
-  explain:     { icon: '\u{1F4D6}', label: 'Explain',         color: '#FFB74D', category: 'utility' },
-  topics:      { icon: '\u{1F5C2}', label: 'Topics',          color: '#FFB74D', category: 'utility' },
-  merge:       { icon: '\u{1F500}', label: 'Merge',           color: '#90A4AE', category: 'control' },
-  filter:      { icon: '\u{1F9F9}', label: 'Filter',          color: '#90A4AE', category: 'control' },
-  transform:   { icon: '\u{1F504}', label: 'Transform',       color: '#90A4AE', category: 'control' },
-  generate:    { icon: '\u2728',    label: 'Generate',        color: '#69F0AE', category: 'generation' },
+  embed:       { icon: 'M13 2 3 14h9l-1 8 10-12h-9l1-8z', label: 'Embed',           color: '#B388FF', category: 'embedding' },
+  similarity:  { icon: 'M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4', label: 'Similarity',      color: '#B388FF', category: 'embedding' },
+  collections: { 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 2z', label: 'Collections',     color: '#00D4AA', category: 'management' },
+  models:      { icon: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2M9 5h6M9 14l2 2 4-4', label: 'Models',          color: '#00D4AA', category: 'management' },
+  estimate:    { icon: 'M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6', label: 'Cost Estimate',   color: '#FFB74D', category: 'utility' },
+  explain:     { icon: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z', label: 'Explain',         color: '#FFB74D', category: 'utility' },
+  topics:      { icon: 'M12 6V2M8 18H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4M12 18v4M8 22h8', label: 'Topics',          color: '#FFB74D', category: 'utility' },
+  merge:       { icon: 'M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9v6M18 15l-6-6-6 6', label: 'Merge',           color: '#90A4AE', category: 'control' },
+  filter:      { icon: 'M22 3H2l8 9.46V19l4 2v-8.54L22 3z', label: 'Filter',          color: '#90A4AE', category: 'control' },
+  transform:   { icon: 'M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16', label: 'Transform',       color: '#90A4AE', category: 'control' },
+  generate:    { icon: 'M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z', label: 'Generate', color: '#69F0AE', category: 'generation' },
+  query:       { icon: 'M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', label: 'Query',           color: '#64B5F6', category: 'retrieval' },
+  rerank:      { icon: 'M3 6h18M7 12h10M10 18h4', label: 'Rerank',          color: '#CE93D8', category: 'retrieval' },
+  search:      { icon: 'M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', label: 'Search',          color: '#64B5F6', category: 'retrieval' },
+  ingest:      { icon: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3', label: 'Ingest',          color: '#4DB6AC', category: 'management' },
+  // Phase 1-3: New workflow nodes
+  conditional: { icon: 'M12 3l9 9-9 9-9-9z', label: 'Conditional', color: '#90A4AE', category: 'control', shape: 'diamond' },
+  loop:        { icon: 'M17 1l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3', label: 'Loop', color: '#90A4AE', category: 'control' },
+  template:    { icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8', label: 'Template', color: '#90A4AE', category: 'control' },
+  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' },
 };
 
+// Fallback icon (gear) for unknown workflow node types
+const WF_FALLBACK_ICON = 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2zM12 12m-3 0a3 3 0 1 0 6 0 3 3 0 1 0-6 0';
+
 const WF_NODE_W = 180;
 const WF_NODE_H = 64;
 const WF_LAYER_GAP = 260;
@@ -9812,6 +11561,7 @@ const WF_PORT_R = 5; // Port circle radius
 
 let wfState = {
   workflows: [],
+  examples: [],
   activeWorkflow: null,
   selectedNodeId: null,
   executionState: {},
@@ -9825,14 +11575,26 @@ let wfState = {
   isPanning: false,
   panStart: { x: 0, y: 0 },
   executing: false,
+  // Builder state
+  builderMode: false,
+  draggingEdge: null,
+  dragNode: null,
+  dirtyFlag: false,
 };
 
 // ── Library ──
 async function wfLoadLibrary() {
   try {
-    const res = await fetch('/api/workflows');
-    const data = await res.json();
-    wfState.workflows = data.workflows || [];
+    const [wfRes, exRes] = await Promise.all([
+      fetch('/api/workflows'),
+      fetch('/api/workflows/examples'),
+    ]);
+    const wfData = await wfRes.json();
+    const exData = await exRes.json();
+    wfState.workflows = wfData.workflows || [];
+    wfState.official = wfData.official || [];
+    wfState.community = wfData.community || [];
+    wfState.examples = exData.examples || [];
     wfRenderLibrary();
   } catch (err) {
     const list = document.getElementById('wfLibraryList');
@@ -9843,19 +11605,213 @@ async function wfLoadLibrary() {
 function wfRenderLibrary() {
   const list = document.getElementById('wfLibraryList');
   if (!list) return;
-  if (wfState.workflows.length === 0) {
+  if (wfState.workflows.length === 0 && (!wfState.examples || wfState.examples.length === 0)) {
     list.innerHTML = '<div style="padding:16px;color:var(--text-muted);font-size:12px;">No workflows found</div>';
     return;
   }
-  list.innerHTML = wfState.workflows.map(w => {
-    // w.name is the file stem (e.g., "multi-collection-search")
-    // w.description comes from the workflow JSON's description field
+
+  // Built-in templates
+  let html = wfState.workflows.map(w => {
     const displayName = w.name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
     return `<div class="wf-library-item" data-wf-name="${w.name}" onclick="wfSelectWorkflow('${w.name}')">
       <div class="wf-library-item-name">${displayName}</div>
       <div class="wf-library-item-desc">${w.description || ''}</div>
     </div>`;
   }).join('');
+
+  // Collapsible examples section
+  const examples = wfState.examples || [];
+  if (examples.length > 0) {
+    html += `<div class="wf-library-section">
+      <button class="wf-library-section-toggle" onclick="wfToggleExamples(this)">
+        <span class="arrow">&#9654;</span> Examples (${examples.length})
+      </button>
+      <div class="wf-examples-content" style="display:none;">`;
+
+    const categories = ['Retrieval', 'RAG', 'Ingestion', 'Analysis', 'Other'];
+    for (const cat of categories) {
+      const items = examples.filter(e => e.category === cat);
+      if (items.length === 0) continue;
+      html += `<div class="wf-library-category">${cat}</div>`;
+      html += items.map(w => {
+        const displayName = w.name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        return `<div class="wf-library-item" data-wf-name="${w.name}" onclick="wfSelectWorkflow('${w.name}')">
+          <div class="wf-library-item-name">${displayName}</div>
+          <div class="wf-library-item-desc">${w.description || ''}</div>
+        </div>`;
+      }).join('');
+    }
+    html += '</div></div>';
+  }
+
+  // Official catalog section
+  const official = wfState.official || [];
+  html += `<div class="wf-library-section">
+    <div class="wf-library-category" style="display:flex;align-items:center;justify-content:space-between;">
+      <span>Official Catalog (@vaicli) (${official.length})</span>
+    </div>`;
+  if (official.length === 0) {
+    html += '<div style="padding:8px 12px;color:var(--text-muted);font-size:11px;">No official workflows installed.</div>';
+  } else {
+    html += official.map(w => {
+      const displayName = w.name.replace(/^@vaicli\/vai-workflow-/, '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+      const authorLine = w.author ? `<span style="color:var(--text-muted);font-size:10px;">by ${w.author}${w.version ? ' · v' + w.version : ''}</span>` : '';
+      const tagLine = (w.tags || []).length ? `<div style="margin-top:2px;font-size:10px;color:var(--text-muted);">${w.tags.join(' · ')}</div>` : '';
+      return `<div class="wf-library-item" data-wf-name="${w.name}" onclick="wfSelectWorkflow('${w.name}')">
+        <div class="wf-library-item-name">✓ ${displayName}</div>
+        <div class="wf-library-item-desc">${w.description || ''}</div>
+        ${authorLine}${tagLine}
+      </div>`;
+    }).join('');
+  }
+  html += '</div>';
+
+  // Community workflows section
+  const community = wfState.community || [];
+  html += `<div class="wf-library-section">
+    <div class="wf-library-category" style="display:flex;align-items:center;justify-content:space-between;">
+      <span>Community (${community.length})</span>
+      <button onclick="wfLoadLibrary()" title="Refresh" style="background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:12px;display:flex;align-items:center;"><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="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg></button>
+    </div>`;
+  if (community.length === 0) {
+    html += '<div style="padding:8px 12px;color:var(--text-muted);font-size:11px;">No community workflows installed.<br><code style="font-size:10px;">vai workflow install &lt;name&gt;</code></div>';
+  } else {
+    html += community.map(w => {
+      const displayName = w.name.replace(/^vai-workflow-/, '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+      const authorLine = w.author ? `<span style="color:var(--text-muted);font-size:10px;">by ${w.author}${w.version ? ' · v' + w.version : ''}</span>` : '';
+      const tagLine = (w.tags || []).length ? `<div style="margin-top:2px;font-size:10px;color:var(--text-muted);">${w.tags.join(' · ')}</div>` : '';
+      return `<div class="wf-library-item" data-wf-name="${w.name}" onclick="wfSelectWorkflow('${w.name}')">
+        <div class="wf-library-item-name">🌐 ${displayName}</div>
+        <div class="wf-library-item-desc">${w.description || ''}</div>
+        ${authorLine}${tagLine}
+      </div>`;
+    }).join('');
+  }
+  html += '</div>';
+
+  // Install from npm button
+  html += `<div style="padding:8px 12px;">
+    <button onclick="wfShowInstallDialog()" style="background:none;border:1px dashed var(--border);color:var(--accent);cursor:pointer;padding:6px 12px;border-radius:6px;font-size:11px;width:100%;text-align:center;">+ Install from npm</button>
+  </div>`;
+
+  list.innerHTML = html;
+}
+
+// ── Install Dialog ──
+function wfShowInstallDialog() {
+  let modal = document.getElementById('wfInstallModal');
+  if (!modal) {
+    modal = document.createElement('div');
+    modal.id = 'wfInstallModal';
+    modal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:9999;';
+    modal.innerHTML = `
+      <div style="background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:24px;width:480px;max-height:70vh;display:flex;flex-direction:column;">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+          <h3 style="margin:0;font-size:16px;">Install Workflow Package</h3>
+          <button onclick="wfCloseInstallDialog()" style="background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;">✕</button>
+        </div>
+        <div style="display:flex;gap:8px;margin-bottom:12px;">
+          <input id="wfInstallSearch" type="text" placeholder="Search vai workflows on npm..." style="flex:1;padding:8px 12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;" onkeydown="if(event.key==='Enter')wfSearchNpm()">
+          <button onclick="wfSearchNpm()" style="padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;">Search</button>
+        </div>
+        <div id="wfInstallResults" style="overflow-y:auto;flex:1;min-height:100px;"></div>
+      </div>`;
+    document.body.appendChild(modal);
+    modal.addEventListener('click', (e) => { if (e.target === modal) wfCloseInstallDialog(); });
+  }
+  modal.style.display = 'flex';
+  document.getElementById('wfInstallSearch').value = '';
+  document.getElementById('wfInstallResults').innerHTML = '<div style="padding:16px;color:var(--text-muted);font-size:12px;text-align:center;">Search for vai-workflow packages on npm</div>';
+  document.getElementById('wfInstallSearch').focus();
+}
+
+function wfCloseInstallDialog() {
+  const modal = document.getElementById('wfInstallModal');
+  if (modal) modal.style.display = 'none';
+}
+
+async function wfSearchNpm() {
+  const query = document.getElementById('wfInstallSearch').value.trim();
+  const results = document.getElementById('wfInstallResults');
+  if (!query) return;
+  results.innerHTML = '<div style="padding:16px;color:var(--text-muted);font-size:12px;text-align:center;">Searching...</div>';
+  try {
+    const res = await fetch('/api/workflows/community/search?q=' + encodeURIComponent(query) + '&limit=10');
+    const data = await res.json();
+    if (!data.results || data.results.length === 0) {
+      results.innerHTML = '<div style="padding:16px;color:var(--text-muted);font-size:12px;text-align:center;">No packages found</div>';
+      return;
+    }
+    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>`;
+      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>
+        <div style="margin-left:12px;flex-shrink:0;">${btn}</div>
+      </div>`;
+    }).join('');
+  } catch (err) {
+    results.innerHTML = `<div style="padding:16px;color:#f44;font-size:12px;text-align:center;">Search failed: ${err.message}</div>`;
+  }
+}
+
+async function wfInstallPkg(name) {
+  const results = document.getElementById('wfInstallResults');
+  // Find the clicked button and show installing state
+  const btns = results.querySelectorAll('button');
+  let clickedBtn = null;
+  btns.forEach(b => {
+    if (b.textContent === 'Install' && !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)) {
+        clickedBtn = b;
+        b.textContent = 'Installing...';
+        b.disabled = true;
+        b.style.opacity = '0.7';
+      }
+    }
+  });
+
+  try {
+    const res = await fetch('/api/workflows/community/install', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name })
+    });
+    const text = await res.text();
+    let data;
+    try { data = JSON.parse(text); } catch { data = { error: text || 'Empty response' }; }
+    if (data.success) {
+      if (clickedBtn) { clickedBtn.textContent = '✓ Installed'; clickedBtn.style.opacity = '1'; }
+      await wfLoadLibrary();
+      await wfSearchNpm();
+    } else {
+      const errMsg = data.error || 'Unknown error';
+      if (clickedBtn) { clickedBtn.textContent = 'Install'; clickedBtn.disabled = false; clickedBtn.style.opacity = '1'; }
+      console.error('Install failed:', errMsg);
+      alert('Install failed: ' + errMsg);
+    }
+  } catch (err) {
+    if (clickedBtn) { clickedBtn.textContent = 'Install'; clickedBtn.disabled = false; clickedBtn.style.opacity = '1'; }
+    console.error('Install error:', err);
+    alert('Install failed: ' + err.message);
+  }
+}
+
+function wfToggleExamples(btn) {
+  const content = btn.nextElementSibling;
+  const isOpen = content.style.display !== 'none';
+  content.style.display = isOpen ? 'none' : '';
+  btn.classList.toggle('open', !isOpen);
 }
 
 async function wfSelectWorkflow(name) {
@@ -9868,12 +11824,14 @@ async function wfSelectWorkflow(name) {
     const res = await fetch('/api/workflows/' + encodeURIComponent(name));
     const data = await res.json();
     wfState.activeWorkflow = data.definition;
+    wfState.builderMode = false;
     wfState.selectedNodeId = null;
     wfState.executionState = {};
     wfState.executionResults = {};
     wfSetToolbarEnabled(true);
     document.getElementById('wfCanvasEmpty').style.display = 'none';
     await wfRenderWorkflow(data.definition);
+    wfSwitchLibTab('library');
     wfOpenInspector();
     wfUpdateInspector();
   } catch (err) {
@@ -9992,6 +11950,19 @@ async function wfRenderWorkflow(definition) {
     });
   }
 
+  // Build conditional branch maps for edge styling
+  const elseBranchEdges = new Set(); // "fromId->toId" for else branches
+  if (definition.steps) {
+    for (const step of definition.steps) {
+      if (step.tool === 'conditional' && step.inputs) {
+        const elseSteps = step.inputs.else || [];
+        for (const eId of elseSteps) {
+          elseBranchEdges.add(`${step.id}->${eId}`);
+        }
+      }
+    }
+  }
+
   // Draw edges first (behind nodes)
   const edgeGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
   edgeGroup.classList.add('wf-edge-group');
@@ -10002,6 +11973,15 @@ async function wfRenderWorkflow(definition) {
       const depId = rawDepId.replace(/^!/, '');
       if (positions[depId] && positions[stepId]) {
         const edge = wfDrawEdge(depId, stepId, positions);
+        // Mark else-branch edges with dashed style
+        const edgeKey = `${depId}->${stepId}`;
+        if (elseBranchEdges.has(edgeKey)) {
+          edge.querySelector('.wf-edge')?.classList.add('wf-edge--else');
+        }
+        // Mark edges to skipped nodes
+        if (wfState.executionState[stepId] === 'skipped') {
+          edge.querySelector('.wf-edge')?.classList.add('wf-edge--skipped');
+        }
         edgeGroup.appendChild(edge);
       }
     });
@@ -10024,7 +12004,7 @@ async function wfRenderWorkflow(definition) {
 }
 
 function wfDrawNode(step, x, y, state, hasDeps, hasDependents) {
-  const meta = WF_NODE_META[step.tool] || { icon: '\u2699', label: step.tool, color: '#666', category: 'unknown' };
+  const meta = WF_NODE_META[step.tool] || { icon: WF_FALLBACK_ICON, label: step.tool, color: '#666', category: 'unknown' };
   const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
   g.classList.add('wf-node');
   if (state !== 'idle') g.classList.add('wf-node--' + state);
@@ -10036,46 +12016,121 @@ function wfDrawNode(step, x, y, state, hasDeps, hasDependents) {
     wfSelectNode(step.id);
   });
 
-  // Background rect
-  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-  rect.setAttribute('width', WF_NODE_W);
-  rect.setAttribute('height', WF_NODE_H);
-  rect.setAttribute('fill', meta.color);
-  rect.setAttribute('stroke', meta.color);
-  rect.setAttribute('opacity', '0.85');
-  g.appendChild(rect);
-
-  // Input port (left side): only if this node has dependencies
-  if (hasDeps) {
+  // Builder: node drag
+  if (wfState.builderMode) {
+    g.style.cursor = 'move';
+    g.addEventListener('mousedown', (e) => {
+      // Don't drag if clicking a port
+      if (e.target.classList.contains('wf-port')) return;
+      e.stopPropagation();
+      const svg = document.getElementById('wf-canvas');
+      const rect = svg.getBoundingClientRect();
+      const startSvgX = (e.clientX - rect.left) / wfState.zoom + wfState.panX;
+      const startSvgY = (e.clientY - rect.top) / wfState.zoom + wfState.panY;
+      const pos = wfState.nodePositions[step.id];
+      if (!pos) return;
+      const offX = startSvgX - pos.x;
+      const offY = startSvgY - pos.y;
+      wfState.dragNode = step.id;
+
+      function onMove(ev) {
+        const mx = (ev.clientX - rect.left) / wfState.zoom + wfState.panX;
+        const my = (ev.clientY - rect.top) / wfState.zoom + wfState.panY;
+        wfState.nodePositions[step.id] = { x: mx - offX, y: my - offY };
+        wfRefreshNodes();
+      }
+      function onUp() {
+        wfState.dragNode = null;
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+      }
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    });
+  }
+
+  // Background shape: diamond for conditional, rounded rect for others
+  if (meta.shape === 'diamond') {
+    const diamond = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+    const cx = WF_NODE_W / 2, cy = WF_NODE_H / 2;
+    const rx = WF_NODE_W / 2 + 8, ry = WF_NODE_H / 2 + 4;
+    diamond.setAttribute('points', `${cx},${cy - ry} ${cx + rx},${cy} ${cx},${cy + ry} ${cx - rx},${cy}`);
+    diamond.setAttribute('fill', meta.color);
+    diamond.setAttribute('stroke', meta.color);
+    diamond.setAttribute('opacity', '0.85');
+    g.appendChild(diamond);
+  } else {
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('width', WF_NODE_W);
+    rect.setAttribute('height', WF_NODE_H);
+    rect.setAttribute('rx', '6');
+    rect.setAttribute('ry', '6');
+    rect.setAttribute('fill', meta.color);
+    rect.setAttribute('stroke', meta.color);
+    rect.setAttribute('opacity', '0.85');
+    g.appendChild(rect);
+  }
+
+  // Input port (left side): show in builder mode always, otherwise only if has deps
+  const showInPort = wfState.builderMode || hasDeps;
+  if (showInPort) {
     const inPort = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
     inPort.classList.add('wf-port', 'wf-port-in');
+    if (wfState.builderMode) inPort.classList.add('wf-port-builder');
     inPort.setAttribute('cx', 0);
     inPort.setAttribute('cy', WF_NODE_H / 2);
-    inPort.setAttribute('r', WF_PORT_R);
+    inPort.setAttribute('r', wfState.builderMode ? 7 : WF_PORT_R);
     inPort.setAttribute('stroke', meta.color);
     inPort.setAttribute('stroke-width', '2');
+    inPort.setAttribute('pointer-events', 'all');
+    if (wfState.builderMode) {
+      inPort.addEventListener('mouseup', () => {
+        if (wfState.draggingEdge) wfEdgeDropOnInput(step.id);
+      });
+    }
     g.appendChild(inPort);
   }
 
-  // Output port (right side): only if other nodes depend on this one
-  if (hasDependents) {
+  // Output port (right side): show in builder mode always, otherwise only if has dependents
+  const showOutPort = wfState.builderMode || hasDependents;
+  if (showOutPort) {
     const outPort = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
     outPort.classList.add('wf-port', 'wf-port-out');
+    if (wfState.builderMode) outPort.classList.add('wf-port-builder');
     outPort.setAttribute('cx', WF_NODE_W);
     outPort.setAttribute('cy', WF_NODE_H / 2);
-    outPort.setAttribute('r', WF_PORT_R);
+    outPort.setAttribute('r', wfState.builderMode ? 7 : WF_PORT_R);
     outPort.setAttribute('fill', meta.color);
     outPort.setAttribute('stroke-width', '2');
+    outPort.setAttribute('pointer-events', 'all');
+    if (wfState.builderMode) {
+      outPort.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+        const pos = wfState.nodePositions[step.id];
+        if (!pos) return;
+        wfEdgeDragStart(step.id, pos.x + WF_NODE_W, pos.y + WF_NODE_H / 2);
+      });
+    }
     g.appendChild(outPort);
   }
 
-  // Icon
-  const icon = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-  icon.classList.add('wf-node-icon');
-  icon.setAttribute('x', 22);
-  icon.setAttribute('y', WF_NODE_H / 2);
-  icon.textContent = meta.icon;
-  g.appendChild(icon);
+  // Icon (Lucide SVG)
+  const iconG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  iconG.classList.add('wf-node-icon');
+  const iconSize = 18;
+  const ix = 22 - iconSize / 2;
+  const iy = WF_NODE_H / 2 - iconSize / 2;
+  iconG.setAttribute('transform', `translate(${ix},${iy}) scale(${iconSize / 24})`);
+  const fullD = meta.icon || WF_FALLBACK_ICON;
+  const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  iconPath.setAttribute('d', fullD);
+  iconPath.setAttribute('fill', 'none');
+  iconPath.setAttribute('stroke', 'currentColor');
+  iconPath.setAttribute('stroke-width', '1.75');
+  iconPath.setAttribute('stroke-linecap', 'round');
+  iconPath.setAttribute('stroke-linejoin', 'round');
+  iconG.appendChild(iconPath);
+  g.appendChild(iconG);
 
   // Label (step name, truncated)
   const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
@@ -10242,44 +12297,69 @@ function wfUpdateInspector() {
     header.textContent = def.name || 'Workflow';
     let html = '';
 
-    // Description
-    if (def.description) {
+    if (wfState.builderMode) {
+      // Builder: editable workflow fields
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">Name</div>
+        <input class="wf-inspector-input" value="${escapeHtml(def.name || '')}" onchange="wfEditWorkflowField('name', this.value); document.getElementById('wfInspectorHeader').textContent = this.value || 'Workflow';">
+      </div>`;
       html += `<div class="wf-inspector-section">
         <div class="wf-inspector-section-title">Description</div>
-        <div style="font-size:12px;color:var(--text);line-height:1.4;">${escapeHtml(def.description)}</div>
+        <textarea class="wf-inspector-input" rows="2" style="resize:vertical;" onchange="wfEditWorkflowField('description', this.value)">${escapeHtml(def.description || '')}</textarea>
       </div>`;
-    }
-
-    // Inputs
-    if (def.inputs && Object.keys(def.inputs).length > 0) {
-      html += '<div class="wf-inspector-section"><div class="wf-inspector-section-title">Inputs</div>';
-      for (const [key, spec] of Object.entries(def.inputs)) {
-        const req = spec.required ? ' <span style="color:#e74c3c">*</span>' : '';
-        const defVal = spec.default !== undefined ? ` (default: ${spec.default})` : '';
-        html += `<div style="margin-bottom:8px;">
-          <div style="font-size:12px;font-weight:600;color:var(--text);">${escapeHtml(key)}${req}</div>
-          <div style="font-size:11px;color:var(--text-muted);">${escapeHtml(spec.description || spec.type || '')}${defVal}</div>
-          <input class="wf-inspector-input" id="wf-input-${key}" placeholder="${escapeHtml(key)}" value="${spec.default !== undefined ? spec.default : ''}">
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">Steps</div>
+        <div style="font-size:12px;color:var(--text);">${def.steps.length} step${def.steps.length !== 1 ? 's' : ''}</div>
+      </div>`;
+      if (def.steps.length > 0) {
+        html += `<div class="wf-inspector-section">
+          <div class="wf-inspector-section-title">Output Mapping</div>
+          <textarea class="wf-inspector-input" rows="3" style="resize:vertical;font-family:monospace;font-size:11px;" onchange="try { wfEditWorkflowField('output', JSON.parse(this.value)); } catch(e) {}">${escapeHtml(JSON.stringify(def.output || {}, null, 2))}</textarea>
+        </div>`;
+      }
+      html += `<div class="wf-inspector-section" style="margin-top:8px;">
+        <div style="font-size:10px;color:var(--text-muted);">Add steps from the Palette tab, then drag between ports to connect them.</div>
+      </div>`;
+    } else {
+      // Read-only: Description
+      if (def.description) {
+        html += `<div class="wf-inspector-section">
+          <div class="wf-inspector-section-title">Description</div>
+          <div style="font-size:12px;color:var(--text);line-height:1.4;">${escapeHtml(def.description)}</div>
         </div>`;
       }
-      html += '</div>';
-    }
 
-    // Steps summary
-    html += `<div class="wf-inspector-section">
-      <div class="wf-inspector-section-title">Steps</div>
-      <div style="font-size:12px;color:var(--text);">${def.steps.length} step${def.steps.length !== 1 ? 's' : ''}${wfState.layers ? ' in ' + wfState.layers.length + ' layer' + (wfState.layers.length !== 1 ? 's' : '') : ''}</div>
-    </div>`;
+      // Read-only: Inputs
+      if (def.inputs && Object.keys(def.inputs).length > 0) {
+        html += '<div class="wf-inspector-section"><div class="wf-inspector-section-title">Inputs</div>';
+        for (const [key, spec] of Object.entries(def.inputs)) {
+          const req = spec.required ? ' <span style="color:#e74c3c">*</span>' : '';
+          const defVal = spec.default !== undefined ? ` (default: ${spec.default})` : '';
+          html += `<div style="margin-bottom:8px;">
+            <div style="font-size:12px;font-weight:600;color:var(--text);">${escapeHtml(key)}${req}</div>
+            <div style="font-size:11px;color:var(--text-muted);">${escapeHtml(spec.description || spec.type || '')}${defVal}</div>
+            <input class="wf-inspector-input" id="wf-input-${key}" placeholder="${escapeHtml(key)}" value="${spec.default !== undefined ? spec.default : ''}">
+          </div>`;
+        }
+        html += '</div>';
+      }
 
-    // Output mapping
-    if (def.output) {
+      // Steps summary
       html += `<div class="wf-inspector-section">
-        <div class="wf-inspector-section-title">Output</div>
-        <div class="wf-inspector-code">${escapeHtml(JSON.stringify(def.output, null, 2))}</div>
+        <div class="wf-inspector-section-title">Steps</div>
+        <div style="font-size:12px;color:var(--text);">${def.steps.length} step${def.steps.length !== 1 ? 's' : ''}${wfState.layers ? ' in ' + wfState.layers.length + ' layer' + (wfState.layers.length !== 1 ? 's' : '') : ''}</div>
       </div>`;
+
+      // Output mapping
+      if (def.output) {
+        html += `<div class="wf-inspector-section">
+          <div class="wf-inspector-section-title">Output</div>
+          <div class="wf-inspector-code">${escapeHtml(JSON.stringify(def.output, null, 2))}</div>
+        </div>`;
+      }
     }
 
-    // Execution result
+    // Execution result (shown in both modes)
     if (wfState.executionResults._done) {
       const r = wfState.executionResults._done;
       const doneJson = JSON.stringify(r.output, null, 2);
@@ -10305,54 +12385,109 @@ function wfUpdateInspector() {
     return;
   }
 
-  const meta = WF_NODE_META[step.tool] || { icon: '\u2699', label: step.tool, color: '#666' };
+  const meta = WF_NODE_META[step.tool] || { icon: WF_FALLBACK_ICON, label: step.tool, color: '#666' };
   header.textContent = step.name || step.id;
 
   let html = '';
 
-  // Tool badge
+  // Tool badge (always shown)
   html += `<div class="wf-inspector-section">
     <div class="wf-inspector-section-title">Tool</div>
-    <span class="wf-tool-badge" style="background:${meta.color}">${meta.icon} ${meta.label}</span>
-  </div>`;
-
-  // Step ID
-  html += `<div class="wf-inspector-section">
-    <div class="wf-inspector-section-title">ID</div>
-    <div style="font-size:12px;color:var(--text);font-family:monospace;">${escapeHtml(step.id)}</div>
+    <span class="wf-tool-badge" style="background:${meta.color}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="${meta.icon || WF_FALLBACK_ICON}"/></svg>${meta.label}</span>
   </div>`;
 
-  // Inputs
-  if (step.inputs) {
+  if (wfState.builderMode) {
+    // Builder: editable step fields
+    const sid = escapeHtml(step.id);
     html += `<div class="wf-inspector-section">
-      <div class="wf-inspector-section-title">Inputs</div>`;
-    for (const [key, val] of Object.entries(step.inputs)) {
-      const display = typeof val === 'string' ? val : JSON.stringify(val);
-      html += `<div class="wf-inspector-field">
-        <span class="wf-inspector-field-label">${escapeHtml(key)}</span>
-        <span class="wf-inspector-field-value" style="font-family:monospace;font-size:11px;">${escapeHtml(display)}</span>
-      </div>`;
+      <div class="wf-inspector-section-title">Step ID</div>
+      <input class="wf-inspector-input" value="${sid}" style="font-family:monospace;" onchange="wfEditStepId('${sid}', this.value)">
+    </div>`;
+    html += `<div class="wf-inspector-section">
+      <div class="wf-inspector-section-title">Name</div>
+      <input class="wf-inspector-input" value="${escapeHtml(step.name || '')}" onchange="wfEditStepField('${sid}', 'name', this.value)">
+    </div>`;
+
+    // Inputs from WF_INPUT_DEFS
+    const inputDefs = WF_INPUT_DEFS[step.tool] || [];
+    if (inputDefs.length > 0) {
+      html += `<div class="wf-inspector-section"><div class="wf-inspector-section-title">Inputs</div>`;
+      for (const d of inputDefs) {
+        const val = step.inputs?.[d.key] ?? '';
+        const display = typeof val === 'string' ? val : JSON.stringify(val);
+        const req = d.required ? ' <span style="color:#e74c3c;font-size:10px;">required</span>' : '';
+        html += `<div style="margin-bottom:8px;">
+          <div style="font-size:11px;font-weight:600;color:var(--text);">${escapeHtml(d.key)}${req}</div>`;
+
+        if (d.type === 'textarea' || d.type === 'json') {
+          html += `<textarea class="wf-inspector-input" rows="2" style="resize:vertical;font-family:monospace;font-size:11px;" placeholder="${escapeHtml(d.placeholder || '')}" onchange="wfEditStepInput('${sid}','${d.key}',this.value)">${escapeHtml(display)}</textarea>`;
+        } else if (d.type === 'select' && d.options) {
+          html += `<select class="wf-inspector-input" onchange="wfEditStepInput('${sid}','${d.key}',this.value)">
+            <option value="">--</option>`;
+          for (const opt of d.options) {
+            html += `<option value="${escapeHtml(opt)}" ${val === opt ? 'selected' : ''}>${escapeHtml(opt)}</option>`;
+          }
+          html += `</select>`;
+        } else if (d.type === 'number') {
+          html += `<input class="wf-inspector-input" type="number" value="${escapeHtml(String(val))}" placeholder="${escapeHtml(d.placeholder || '')}" onchange="wfEditStepInput('${sid}','${d.key}',this.value)">`;
+        } else {
+          html += `<input class="wf-inspector-input" value="${escapeHtml(display)}" placeholder="${escapeHtml(d.placeholder || '')}" onchange="wfEditStepInput('${sid}','${d.key}',this.value)">`;
+        }
+        html += `</div>`;
+      }
+      html += '</div>';
     }
-    html += '</div>';
-  }
 
-  // Condition
-  if (step.condition) {
+    // Condition
     html += `<div class="wf-inspector-section">
-      <div class="wf-inspector-section-title">Condition \u26A1</div>
-      <div class="wf-inspector-code">${escapeHtml(step.condition)}</div>
+      <div class="wf-inspector-section-title">Condition <span style="font-size:10px;color:var(--text-muted)">(optional)</span></div>
+      <input class="wf-inspector-input" value="${escapeHtml(step.condition || '')}" placeholder="e.g. results.length > 0" onchange="wfEditStepField('${sid}', 'condition', this.value || undefined)">
+    </div>`;
+
+    // continueOnError toggle
+    html += `<div class="wf-inspector-section" style="display:flex;align-items:center;gap:8px;">
+      <input type="checkbox" id="wf-coe-${sid}" ${step.continueOnError ? 'checked' : ''} onchange="wfEditStepField('${sid}', 'continueOnError', this.checked)">
+      <label for="wf-coe-${sid}" style="font-size:11px;color:var(--text);cursor:pointer;">Continue on error</label>
     </div>`;
-  }
 
-  // ForEach
-  if (step.forEach) {
+    // Delete button
+    html += `<button class="wf-inspector-delete-btn" onclick="if(confirm('Delete step ${sid}?')) wfDeleteStep('${sid}')">Delete Step</button>`;
+  } else {
+    // Read-only step view
     html += `<div class="wf-inspector-section">
-      <div class="wf-inspector-section-title">ForEach</div>
-      <div class="wf-inspector-code">${escapeHtml(JSON.stringify(step.forEach, null, 2))}</div>
+      <div class="wf-inspector-section-title">ID</div>
+      <div style="font-size:12px;color:var(--text);font-family:monospace;">${escapeHtml(step.id)}</div>
     </div>`;
+
+    if (step.inputs) {
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">Inputs</div>`;
+      for (const [key, val] of Object.entries(step.inputs)) {
+        const display = typeof val === 'string' ? val : JSON.stringify(val);
+        html += `<div class="wf-inspector-field">
+          <span class="wf-inspector-field-label">${escapeHtml(key)}</span>
+          <span class="wf-inspector-field-value" style="font-family:monospace;font-size:11px;">${escapeHtml(display)}</span>
+        </div>`;
+      }
+      html += '</div>';
+    }
+
+    if (step.condition) {
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">Condition \u26A1</div>
+        <div class="wf-inspector-code">${escapeHtml(step.condition)}</div>
+      </div>`;
+    }
+
+    if (step.forEach) {
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">ForEach</div>
+        <div class="wf-inspector-code">${escapeHtml(JSON.stringify(step.forEach, null, 2))}</div>
+      </div>`;
+    }
   }
 
-  // Execution result for this step
+  // Execution result for this step (shown in both modes)
   const result = wfState.executionResults[step.id];
   const state = wfState.executionState[step.id];
   if (state === 'completed' && result) {
@@ -10416,6 +12551,7 @@ function wfSetToolbarEnabled(enabled) {
   document.getElementById('wfRunBtn').disabled = !enabled;
   document.getElementById('wfDryRunBtn').disabled = !enabled;
   document.getElementById('wfExportBtn').disabled = !enabled;
+  document.getElementById('wfEditBtn').disabled = !enabled;
 }
 
 // ── Export workflow JSON ──
@@ -10461,9 +12597,9 @@ function wfDryRun() {
       const step = stepMap[stepId];
       if (!step) return;
       totalSteps++;
-      const meta = WF_NODE_META[step.tool] || { icon: '\u2699', label: step.tool, color: '#666' };
+      const meta = WF_NODE_META[step.tool] || { icon: WF_FALLBACK_ICON, label: step.tool, color: '#666' };
       layersHtml += '<div class="wf-dryrun-step">';
-      layersHtml += '<span class="wf-dryrun-step-icon">' + meta.icon + '</span>';
+      layersHtml += '<span class="wf-dryrun-step-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="' + (meta.icon || WF_FALLBACK_ICON) + '"/></svg></span>';
       layersHtml += '<div class="wf-dryrun-step-info">';
       layersHtml += '<div class="wf-dryrun-step-name">' + escapeHtml(step.name || step.id) + '</div>';
       layersHtml += '<div class="wf-dryrun-step-tool">' + escapeHtml(meta.label) + ' (' + escapeHtml(step.id) + ')</div>';
@@ -10601,27 +12737,128 @@ function wfStopExecution(reason) {
   wfUpdateInspector();
 }
 
-async function wfExecute() {
+// ── Input Modal (pre-execution) ──
+
+function wfShowInputModal() {
+  const def = wfState.activeWorkflow;
+  if (!def || !def.inputs) return;
+  const entries = Object.entries(def.inputs);
+  if (entries.length === 0) { wfExecuteWithInputs({}); return; }
+
+  document.getElementById('wfInputModalTitle').textContent = (def.name || 'Workflow') + ' Inputs';
+  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
+    const inspectorEl = document.getElementById('wf-input-' + key);
+    let prefill = inspectorEl ? inspectorEl.value : '';
+    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">
+      <div class="wf-input-modal-label">${escapeHtml(key)}${req}</div>
+      ${desc}
+      <input class="wf-input-modal-input" id="wf-modal-input-${key}" placeholder="${escapeHtml(placeholder)}" value="${escapeHtml(prefill)}" data-key="${escapeHtml(key)}" data-type="${spec.type || 'string'}" data-required="${!!spec.required}">
+      <div class="wf-input-modal-error" id="wf-modal-err-${key}">This field is required</div>
+    </div>`;
+  }
+  document.getElementById('wfInputModalBody').innerHTML = html;
+  document.getElementById('wfInputModalBackdrop').style.display = '';
+
+  // Focus first empty required field, or first field
+  const firstEmpty = entries.find(([k, s]) => {
+    const el = document.getElementById('wf-modal-input-' + k);
+    return s.required && el && !el.value;
+  });
+  const focusKey = firstEmpty ? firstEmpty[0] : entries[0][0];
+  const focusEl = document.getElementById('wf-modal-input-' + focusKey);
+  if (focusEl) setTimeout(() => focusEl.focus(), 50);
+}
+
+function wfCloseInputModal() {
+  document.getElementById('wfInputModalBackdrop').style.display = 'none';
+}
+
+function wfInputModalSubmit() {
+  const def = wfState.activeWorkflow;
+  if (!def || !def.inputs) return;
+
+  const inputs = {};
+  let hasError = false;
+
+  for (const [key, spec] of Object.entries(def.inputs)) {
+    const el = document.getElementById('wf-modal-input-' + key);
+    const errEl = document.getElementById('wf-modal-err-' + key);
+    if (!el) continue;
+
+    let val = el.value.trim();
+
+    // Clear previous error
+    el.classList.remove('error');
+    if (errEl) errEl.style.display = 'none';
+
+    // Required check
+    if (!val && spec.required && spec.default === undefined) {
+      el.classList.add('error');
+      if (errEl) { errEl.textContent = 'This field is required'; errEl.style.display = ''; }
+      hasError = true;
+      continue;
+    }
+
+    // Use default if empty
+    if (!val && spec.default !== undefined) val = String(spec.default);
+
+    // Type validation
+    if (spec.type === 'number' && val && isNaN(Number(val))) {
+      el.classList.add('error');
+      if (errEl) { errEl.textContent = 'Must be a number'; errEl.style.display = ''; }
+      hasError = true;
+      continue;
+    }
+
+    // Coerce
+    if (spec.type === 'number' && val) val = Number(val);
+    if (val !== undefined && val !== '') inputs[key] = val;
+  }
+
+  if (hasError) return;
+
+  // Also update inspector fields to keep them in sync
+  for (const [key, val] of Object.entries(inputs)) {
+    const inspEl = document.getElementById('wf-input-' + key);
+    if (inspEl) inspEl.value = typeof val === 'number' ? String(val) : val;
+  }
+
+  wfCloseInputModal();
+  wfExecuteWithInputs(inputs);
+}
+
+// Keyboard handler for input modal
+document.addEventListener('keydown', (e) => {
+  const backdrop = document.getElementById('wfInputModalBackdrop');
+  if (!backdrop || backdrop.style.display === 'none') return;
+  if (e.key === 'Escape') { wfCloseInputModal(); e.preventDefault(); }
+  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { wfInputModalSubmit(); e.preventDefault(); }
+});
+
+async function wfExecute() {
+  const def = wfState.activeWorkflow;
+  if (!def || wfState.executing) return;
+
+  // If workflow has inputs, show the input modal instead of executing directly
+  if (def.inputs && Object.keys(def.inputs).length > 0) {
+    wfShowInputModal();
+    return;
+  }
+
+  // No inputs needed, execute directly
+  wfExecuteWithInputs({});
+}
+
+async function wfExecuteWithInputs(inputs) {
   const def = wfState.activeWorkflow;
   if (!def || wfState.executing) return;
 
-  // Collect inputs
-  const inputs = {};
-  if (def.inputs) {
-    for (const [key, spec] of Object.entries(def.inputs)) {
-      const el = document.getElementById('wf-input-' + key);
-      let val = el ? el.value : (spec.default !== undefined ? spec.default : undefined);
-      if (val === '' && spec.default !== undefined) val = spec.default;
-      if (val === '' && spec.required) {
-        alert('Input "' + key + '" is required');
-        return;
-      }
-      // Type coerce
-      if (spec.type === 'number' && val !== undefined && val !== '') val = Number(val);
-      if (val !== undefined && val !== '') inputs[key] = val;
-    }
-  }
-
   wfState.executing = true;
   wfState.executionResults = {};
   wfAbortController = new AbortController();
@@ -10907,7 +13144,7 @@ function wfInitPan() {
   // Scroll wheel zoom, centered on cursor position
   svg.addEventListener('wheel', (e) => {
     e.preventDefault();
-    const factor = e.deltaY < 0 ? 1.08 : 1 / 1.08;
+    const factor = e.deltaY < 0 ? 1.03 : 1 / 1.03;
     const oldZoom = wfState.zoom;
     const newZoom = Math.max(0.2, Math.min(5, oldZoom * factor));
     // Zoom toward cursor: keep the SVG point under the mouse fixed
@@ -10928,6 +13165,452 @@ function wfInitPan() {
   });
 }
 
+// ── Builder: Input Definitions ──
+const WF_INPUT_DEFS = {
+  query:       [{ key: 'query', type: 'text', required: true, placeholder: 'Search query' }, { key: 'collection', type: 'text', required: false, placeholder: 'Collection name' }, { key: 'db', type: 'text', required: false, placeholder: 'Database name' }, { key: 'limit', type: 'number', required: false, placeholder: '5' }, { key: 'filter', type: 'json', required: false, placeholder: '{}' }],
+  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'] }],
+  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'] }],
+  estimate:    [{ key: 'docs', type: 'number', required: true, placeholder: '1000' }, { key: 'queries', type: 'number', required: false, placeholder: '0' }, { key: 'months', type: 'number', required: false, placeholder: '12' }],
+  explain:     [{ key: 'topic', type: 'text', required: true }],
+  topics:      [{ key: 'search', type: 'text', required: false }],
+  merge:       [{ key: 'sources', type: 'json', required: true, placeholder: '["step1.output","step2.output"]' }, { key: 'strategy', type: 'select', required: false, options: ['concat','interleave','unique'] }],
+  filter:      [{ key: 'input', type: 'text', required: true, placeholder: '{{ step.output }}' }, { key: 'condition', type: 'text', required: true, placeholder: 'item.score > 0.5' }],
+  transform:   [{ key: 'input', type: 'text', required: true, placeholder: '{{ step.output }}' }, { key: 'expression', type: 'text', required: true, placeholder: 'item.text' }],
+  generate:    [{ key: 'prompt', type: 'textarea', required: true, placeholder: 'Generate a summary of...' }, { key: 'context', type: 'text', required: false, placeholder: '{{ step.output }}' }],
+  conditional: [{ key: 'condition', type: 'text', required: true, placeholder: '{{ step.output.results.length > 0 }}' }, { key: 'then', type: 'json', required: true, placeholder: '["step_a"]' }, { key: 'else', type: 'json', required: false, placeholder: '["step_b"]' }],
+  loop:        [{ key: 'items', type: 'text', required: true, placeholder: '{{ step.output.results }}' }, { key: 'as', type: 'text', required: true, placeholder: 'item' }, { key: 'step', type: 'json', required: true, placeholder: '{"tool":"template","inputs":{"text":"{{ item }}"}}' }, { key: 'maxIterations', type: 'number', required: false, placeholder: '100' }],
+  template:    [{ key: 'text', type: 'textarea', required: true, placeholder: 'Compose text with {{ step.output }} references' }],
+  chunk:       [{ key: 'text', type: 'textarea', required: true, placeholder: '{{ step.output.text }}' }, { key: 'strategy', type: 'select', required: false, options: ['fixed','sentence','paragraph','recursive','markdown'] }, { key: 'size', type: 'number', required: false, placeholder: '512' }, { key: 'overlap', type: 'number', required: false, placeholder: '50' }, { key: 'source', type: 'text', required: false, placeholder: 'document.md' }],
+  aggregate:   [{ key: 'pipeline', type: 'json', required: true, placeholder: '[{"$group":{"_id":"$field","count":{"$sum":1}}}]' }, { key: 'collection', type: 'text', required: false }, { key: 'db', type: 'text', required: false }],
+  http:        [{ key: 'url', type: 'text', required: true, placeholder: 'https://api.example.com/data' }, { key: 'method', type: 'select', required: false, options: ['GET','POST','PUT','PATCH','DELETE'] }, { key: 'headers', type: 'json', required: false, placeholder: '{"Authorization":"Bearer ..."}' }, { key: 'body', type: 'json', required: false, placeholder: '{}' }, { key: 'timeout', type: 'number', required: false, placeholder: '30000' }],
+};
+
+const WF_CATEGORY_ORDER = ['retrieval', 'embedding', 'processing', 'control', 'generation', 'integration', 'management', 'utility'];
+const WF_CATEGORY_LABELS = { retrieval: 'Retrieval', embedding: 'Embedding', management: 'Management', utility: 'Utility', control: 'Control Flow', generation: 'Generation', processing: 'Processing', integration: 'Integration' };
+
+// ── Builder: Library/Palette tab toggle ──
+function wfSwitchLibTab(tab) {
+  const libraryList = document.getElementById('wfLibraryList');
+  const paletteList = document.getElementById('wfPaletteList');
+  document.querySelectorAll('.wf-lib-tab').forEach(b => b.classList.toggle('active', b.dataset.libTab === tab));
+  if (libraryList) libraryList.style.display = tab === 'library' ? '' : 'none';
+  if (paletteList) paletteList.style.display = tab === 'palette' ? '' : 'none';
+  if (tab === 'palette') wfRenderPalette();
+}
+
+// ── Builder: Palette rendering ──
+function wfRenderPalette() {
+  const container = document.getElementById('wfPaletteList');
+  if (!container) return;
+  const grouped = {};
+  for (const [tool, meta] of Object.entries(WF_NODE_META)) {
+    const cat = meta.category || 'unknown';
+    if (!grouped[cat]) grouped[cat] = [];
+    grouped[cat].push({ tool, ...meta });
+  }
+  let html = '';
+  for (const cat of WF_CATEGORY_ORDER) {
+    const items = grouped[cat];
+    if (!items) continue;
+    html += `<div class="wf-palette-category"><div class="wf-palette-category-title">${WF_CATEGORY_LABELS[cat] || cat}</div>`;
+    for (const item of items) {
+      html += `<div class="wf-palette-item" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','${item.tool}')" onclick="wfAddNodeFromPalette('${item.tool}')">
+        <span class="wf-palette-icon" style="color:${item.color}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="${item.icon || WF_FALLBACK_ICON}"/></svg></span>
+        <span class="wf-palette-label">${item.label}</span>
+      </div>`;
+    }
+    html += '</div>';
+  }
+  container.innerHTML = html;
+}
+
+// ── Builder: New Workflow ──
+function wfNewWorkflow() {
+  wfState.activeWorkflow = {
+    name: 'Untitled Workflow',
+    description: '',
+    steps: [],
+    inputs: {},
+    defaults: {},
+    output: {}
+  };
+  wfState.builderMode = true;
+  wfState.dirtyFlag = false;
+  wfState.selectedNodeId = null;
+  wfState.executionState = {};
+  wfState.executionResults = {};
+  wfState.nodePositions = {};
+  wfState.layers = [];
+  wfState.graph = {};
+  wfState.zoom = 1;
+  wfState.panX = 0;
+  wfState.panY = 0;
+  wfState.draggingEdge = null;
+  wfState.dragNode = null;
+
+  // Clear canvas
+  const svg = document.getElementById('wf-canvas');
+  if (svg) svg.querySelectorAll('.wf-node, .wf-edge-group').forEach(el => el.remove());
+  document.getElementById('wfCanvasEmpty').style.display = 'none';
+  svg.style.display = '';
+
+  // Enable toolbar buttons
+  document.getElementById('wfDryRunBtn').disabled = false;
+  document.getElementById('wfRunBtn').disabled = false;
+  document.getElementById('wfExportBtn').disabled = false;
+
+  // Switch to palette tab
+  wfSwitchLibTab('palette');
+
+  // Open inspector for workflow-level editing
+  wfOpenInspector();
+  wfUpdateInspector();
+
+  // Set viewBox
+  wfApplyViewBox();
+}
+
+// ── Builder: Edit current workflow ──
+function wfEditWorkflow() {
+  if (!wfState.activeWorkflow) return;
+  wfState.builderMode = true;
+  wfState.dirtyFlag = false;
+  wfState.selectedNodeId = null;
+  wfState.draggingEdge = null;
+  wfState.dragNode = null;
+
+  // Re-render nodes with builder ports and drag handles
+  wfRefreshNodes();
+
+  // Switch to palette tab and open inspector for workflow-level editing
+  wfSwitchLibTab('palette');
+  wfOpenInspector();
+  wfUpdateInspector();
+}
+
+// ── Builder: Add node from palette ──
+function wfAddNodeFromPalette(tool) {
+  if (!wfState.activeWorkflow) wfNewWorkflow();
+  wfState.builderMode = true;
+  const def = wfState.activeWorkflow;
+
+  // Generate unique step ID
+  let baseId = tool;
+  let id = baseId;
+  let counter = 2;
+  const existingIds = new Set(def.steps.map(s => s.id));
+  while (existingIds.has(id)) { id = baseId + '_' + counter; counter++; }
+
+  // Build default inputs
+  const inputDefs = WF_INPUT_DEFS[tool] || [];
+  const inputs = {};
+  for (const d of inputDefs) {
+    if (d.required) inputs[d.key] = '';
+  }
+
+  const meta = WF_NODE_META[tool] || {};
+  const step = {
+    id,
+    name: meta.label || tool,
+    tool,
+    inputs,
+  };
+  def.steps.push(step);
+
+  // Position: place to the right of all existing nodes
+  let maxX = WF_PAD;
+  for (const pos of Object.values(wfState.nodePositions)) {
+    if (pos.x + WF_NODE_W + WF_LAYER_GAP > maxX) maxX = pos.x + WF_NODE_W + WF_LAYER_GAP;
+  }
+  let y = WF_PAD;
+  // Stack vertically if there are nodes in the same column
+  const nodesAtX = Object.values(wfState.nodePositions).filter(p => Math.abs(p.x - maxX) < 20);
+  if (nodesAtX.length > 0) {
+    y = Math.max(...nodesAtX.map(p => p.y)) + WF_NODE_H + WF_NODE_GAP;
+  }
+  wfState.nodePositions[id] = { x: maxX, y };
+
+  // Rebuild graph
+  wfBuildGraph();
+  wfRefreshNodes();
+  wfSelectNode(id);
+  wfState.dirtyFlag = true;
+}
+
+// ── Builder: Build graph from step inputs (template references) ──
+function wfBuildGraph() {
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+  const graph = {};
+  const stepIds = new Set(def.steps.map(s => s.id));
+  for (const step of def.steps) {
+    const deps = new Set();
+    // Scan all input values for {{ stepId.xxx }} references
+    for (const val of Object.values(step.inputs || {})) {
+      const str = typeof val === 'string' ? val : JSON.stringify(val);
+      const matches = str.matchAll(/\{\{\s*([a-zA-Z_][a-zA-Z0-9_]*)\./g);
+      for (const m of matches) {
+        if (stepIds.has(m[1]) && m[1] !== step.id) deps.add(m[1]);
+      }
+    }
+    graph[step.id] = Array.from(deps);
+  }
+  wfState.graph = graph;
+}
+
+// ── Builder: Canvas drop (from palette drag) ──
+function wfCanvasDrop(e) {
+  e.preventDefault();
+  const tool = e.dataTransfer.getData('text/plain');
+  if (!tool || !WF_NODE_META[tool]) return;
+  if (!wfState.activeWorkflow) wfNewWorkflow();
+  wfState.builderMode = true;
+  const def = wfState.activeWorkflow;
+
+  // Generate unique ID
+  let id = tool;
+  let counter = 2;
+  const existingIds = new Set(def.steps.map(s => s.id));
+  while (existingIds.has(id)) { id = tool + '_' + counter; counter++; }
+
+  // Inputs
+  const inputDefs = WF_INPUT_DEFS[tool] || [];
+  const inputs = {};
+  for (const d of inputDefs) { if (d.required) inputs[d.key] = ''; }
+
+  const meta = WF_NODE_META[tool] || {};
+  const step = { id, name: meta.label || tool, tool, inputs };
+  def.steps.push(step);
+
+  // Convert drop coordinates to SVG space
+  const svg = document.getElementById('wf-canvas');
+  const rect = svg.getBoundingClientRect();
+  const svgX = (e.clientX - rect.left) / wfState.zoom + wfState.panX;
+  const svgY = (e.clientY - rect.top) / wfState.zoom + wfState.panY;
+  wfState.nodePositions[id] = { x: svgX, y: svgY };
+
+  wfBuildGraph();
+  wfRefreshNodes();
+  wfSelectNode(id);
+  wfState.dirtyFlag = true;
+}
+
+// ── Builder: Mutation helpers ──
+function wfEditStepField(stepId, field, value) {
+  const step = wfState.activeWorkflow?.steps.find(s => s.id === stepId);
+  if (!step) return;
+  step[field] = value;
+  wfState.dirtyFlag = true;
+  if (field === 'name') wfRefreshNodes();
+}
+
+function wfEditStepInput(stepId, key, value) {
+  const step = wfState.activeWorkflow?.steps.find(s => s.id === stepId);
+  if (!step) return;
+  if (!step.inputs) step.inputs = {};
+  step.inputs[key] = value;
+  wfState.dirtyFlag = true;
+  // Rebuild graph in case template refs changed
+  wfBuildGraph();
+  wfRefreshNodes();
+}
+
+function wfEditStepId(oldId, newId) {
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+  newId = newId.trim().replace(/[^a-zA-Z0-9_]/g, '_');
+  if (!newId || newId === oldId) return;
+  if (def.steps.some(s => s.id === newId)) return; // duplicate
+
+  const step = def.steps.find(s => s.id === oldId);
+  if (!step) return;
+  step.id = newId;
+
+  // Update position map
+  if (wfState.nodePositions[oldId]) {
+    wfState.nodePositions[newId] = wfState.nodePositions[oldId];
+    delete wfState.nodePositions[oldId];
+  }
+  // Update template references in other steps
+  for (const s of def.steps) {
+    for (const [k, v] of Object.entries(s.inputs || {})) {
+      if (typeof v === 'string' && v.includes('{{ ' + oldId + '.')) {
+        s.inputs[k] = v.replaceAll('{{ ' + oldId + '.', '{{ ' + newId + '.');
+      }
+    }
+  }
+  if (wfState.selectedNodeId === oldId) wfState.selectedNodeId = newId;
+  wfState.dirtyFlag = true;
+  wfBuildGraph();
+  wfRefreshNodes();
+  wfUpdateInspector();
+}
+
+function wfDeleteStep(stepId) {
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+  def.steps = def.steps.filter(s => s.id !== stepId);
+  delete wfState.nodePositions[stepId];
+  if (wfState.selectedNodeId === stepId) wfState.selectedNodeId = null;
+  wfState.dirtyFlag = true;
+  wfBuildGraph();
+  wfRefreshNodes();
+  wfUpdateInspector();
+}
+
+function wfEditWorkflowField(field, value) {
+  if (!wfState.activeWorkflow) return;
+  wfState.activeWorkflow[field] = value;
+  wfState.dirtyFlag = true;
+}
+
+// ── Builder: Validate ──
+async function wfValidateBuilder() {
+  const def = wfState.activeWorkflow;
+  if (!def) return null;
+  try {
+    const res = await fetch('/api/workflows/validate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(def),
+    });
+    return await res.json();
+  } catch (err) {
+    return { valid: false, errors: [err.message] };
+  }
+}
+
+// ── Builder: Edge drag ──
+function wfEdgeDragStart(fromId, fromX, fromY) {
+  const svg = document.getElementById('wf-canvas');
+  if (!svg) return;
+  wfState.draggingEdge = { fromId, fromX, fromY };
+
+  // Create temp edge (dashed bezier), pointer-events: none so it doesn't block port hit-testing
+  const tempPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  tempPath.setAttribute('id', 'wf-temp-edge');
+  tempPath.setAttribute('fill', 'none');
+  tempPath.setAttribute('stroke', 'var(--accent)');
+  tempPath.setAttribute('stroke-width', '2');
+  tempPath.setAttribute('stroke-dasharray', '6 4');
+  tempPath.setAttribute('pointer-events', 'none');
+  tempPath.setAttribute('d', `M${fromX},${fromY} L${fromX},${fromY}`);
+  svg.appendChild(tempPath);
+
+  function onMove(e) {
+    const rect = svg.getBoundingClientRect();
+    const mx = (e.clientX - rect.left) / wfState.zoom + wfState.panX;
+    const my = (e.clientY - rect.top) / wfState.zoom + wfState.panY;
+    const dx = Math.abs(mx - fromX) * 0.5;
+    tempPath.setAttribute('d', `M${fromX},${fromY} C${fromX + dx},${fromY} ${mx - dx},${my} ${mx},${my}`);
+  }
+
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+    const el = document.getElementById('wf-temp-edge');
+    if (el) el.remove();
+    wfState.draggingEdge = null;
+  }
+
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+
+function wfEdgeDropOnInput(toId) {
+  if (!wfState.draggingEdge) return;
+  const fromId = wfState.draggingEdge.fromId;
+  if (fromId === toId) return; // no self-connections
+
+  // Add template reference to the target step's first empty required input
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+  const targetStep = def.steps.find(s => s.id === toId);
+  if (!targetStep) return;
+
+  const inputDefs = WF_INPUT_DEFS[targetStep.tool] || [];
+  let connected = false;
+
+  // Try to fill the first empty required input with a template reference
+  for (const d of inputDefs) {
+    if (!targetStep.inputs) targetStep.inputs = {};
+    const current = targetStep.inputs[d.key];
+    if (!current || current === '') {
+      targetStep.inputs[d.key] = `{{ ${fromId}.output }}`;
+      connected = true;
+      break;
+    }
+  }
+
+  // If no empty required input, try first empty optional input
+  if (!connected) {
+    for (const d of inputDefs) {
+      const current = targetStep.inputs?.[d.key];
+      if (!current || current === '') {
+        if (!targetStep.inputs) targetStep.inputs = {};
+        targetStep.inputs[d.key] = `{{ ${fromId}.output }}`;
+        connected = true;
+        break;
+      }
+    }
+  }
+
+  if (connected) {
+    wfState.dirtyFlag = true;
+    wfBuildGraph();
+    wfRelayout();
+    wfRefreshNodes();
+    if (wfState.selectedNodeId === toId) wfUpdateInspector();
+  }
+
+  // Clean up drag state
+  wfState.draggingEdge = null;
+  const el = document.getElementById('wf-temp-edge');
+  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);
+  }
+}
+
 // ── Docs shortcut (F1) ──
 const DOCS_URLS = {
   embed:      'https://docs.vaicli.com/docs/commands/embeddings/embed',
@@ -10956,6 +13639,22 @@ document.addEventListener('keydown', (e) => {
 document.addEventListener('keydown', (e) => {
   const activeTab = document.querySelector('.tab-btn.active');
   if (!activeTab || activeTab.dataset.tab !== 'workflows') return;
+
+  // Ctrl/Cmd+S to save/export in builder mode (works even in inputs)
+  if ((e.ctrlKey || e.metaKey) && e.key === 's' && wfState.builderMode) {
+    e.preventDefault();
+    wfExportJson();
+    return;
+  }
+
+  // Delete/Backspace to remove selected node in builder mode
+  if ((e.key === 'Delete' || e.key === 'Backspace') && wfState.builderMode && wfState.selectedNodeId) {
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+    e.preventDefault();
+    wfDeleteStep(wfState.selectedNodeId);
+    return;
+  }
+
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
 
   const PAN_STEP = 40;
@@ -10970,6 +13669,382 @@ document.addEventListener('keydown', (e) => {
 });
 
 // ── Init ──
+// ── Workflow Store ──
+const WF_STORE_TOOL_COLORS = {
+  query:'#00D4AA',search:'#40E0FF',rerank:'#0EA5E9',embed:'#8B5CF6',similarity:'#A78BFA',
+  ingest:'#10B981',collections:'#F59E0B',models:'#EF4444',explain:'#EC4899',estimate:'#F97316',
+  merge:'#6366F1',filter:'#14B8A6',transform:'#D946EF',generate:'#F472B6'
+};
+const WF_STORE_CATEGORIES = [
+  { id:'all', label:'All', icon:'◈' }, { id:'retrieval', label:'Retrieval', icon:'⊕' },
+  { id:'analysis', label:'Analysis', icon:'◉' }, { id:'domain-specific', label:'Domain', icon:'◆' },
+  { id:'ingestion', label:'Ingestion', icon:'⊞' }, { id:'utility', label:'Utility', icon:'⊡' },
+  { id:'integration', label:'Integration', icon:'⊗' },
+];
+// Hardcoded fallback data matching the spec's 20 workflows
+const WF_STORE_FALLBACK = [
+  { name:'model-shootout', packageName:'@vaicli/vai-workflow-model-shootout', description:'Compare voyage-4-large, voyage-4, and voyage-4-lite side-by-side on your data.', category:'utility', tags:['benchmarking','model-comparison','cost','shared-space'], tools:['query','estimate','similarity','generate'], steps:7, tier:'official', downloads:3241, featured:true, installed:false, gradient:'linear-gradient(135deg, #0D9488, #06B6D4)' },
+  { name:'asymmetric-search', packageName:'@vaicli/vai-workflow-asymmetric-search', description:'The canonical shared embedding space demo. Embed with voyage-4-large, query with voyage-4-lite. ~83% cost reduction.', category:'retrieval', tags:['asymmetric','shared-space','cost-savings'], tools:['embed','search','rerank'], steps:3, tier:'official', downloads:4812, featured:true, installed:false, gradient:'linear-gradient(135deg, #00D4AA, #40E0FF)' },
+  { name:'cost-optimizer', packageName:'@vaicli/vai-workflow-cost-optimizer', description:'Quantify the exact cost savings of asymmetric retrieval on your collection.', category:'utility', tags:['cost','optimization','asymmetric'], tools:['query','estimate','similarity','generate'], steps:6, tier:'official', downloads:2918, featured:true, installed:false, gradient:'linear-gradient(135deg, #F59E0B, #EF4444)' },
+  { name:'question-decomposition', packageName:'@vaicli/vai-workflow-question-decomposition', description:'Break complex questions into focused sub-queries, search each in parallel, merge and rerank.', category:'retrieval', tags:['decomposition','fan-out','synthesis'], tools:['generate','query','merge','rerank'], steps:6, tier:'official', downloads:1876, installed:false, gradient:'linear-gradient(135deg, #8B5CF6, #EC4899)' },
+  { name:'contract-clause-finder', packageName:'@vaicli/vai-workflow-contract-clause-finder', description:'Search legal documents for specific clause types using voyage-law-2.', category:'domain-specific', tags:['legal','contracts','voyage-law-2'], tools:['query','rerank','generate'], steps:3, tier:'official', downloads:1543, installed:false, gradient:'linear-gradient(135deg, #1E40AF, #7C3AED)' },
+  { name:'knowledge-base-bootstrap', packageName:'@vaicli/vai-workflow-knowledge-base-bootstrap', description:'End-to-end onboarding: ingest documents, verify, test a query, and generate a status report.', category:'integration', tags:['onboarding','bootstrap','end-to-end'], tools:['ingest','collections','query','generate'], steps:4, tier:'official', downloads:3654, installed:false, gradient:'linear-gradient(135deg, #059669, #10B981)' },
+  { name:'embedding-drift-detector', packageName:'@vaicli/vai-workflow-embedding-drift-detector', description:'Monitor embedding quality over time. Re-embed sample documents and compare against stored vectors.', category:'analysis', tags:['monitoring','drift','operations'], tools:['search','embed','similarity','generate'], steps:5, tier:'official', downloads:987, installed:false, gradient:'linear-gradient(135deg, #DC2626, #F97316)' },
+  { name:'multilingual-search', packageName:'@vaicli/vai-workflow-multilingual-search', description:'Translate your query into multiple languages, search each in parallel, merge and rerank.', category:'retrieval', tags:['multilingual','translation','cross-lingual'], tools:['generate','query','merge','rerank'], steps:5, tier:'official', downloads:1234, installed:false, gradient:'linear-gradient(135deg, #0EA5E9, #6366F1)' },
+  { name:'financial-risk-scanner', packageName:'@vaicli/vai-workflow-financial-risk-scanner', description:'Scan financial documents for risk signals using voyage-finance-2.', category:'domain-specific', tags:['finance','risk','voyage-finance-2'], tools:['query','rerank','filter','generate'], steps:4, tier:'official', downloads:1102, installed:false, gradient:'linear-gradient(135deg, #B45309, #D97706)' },
+  { name:'doc-freshness', packageName:'@vaicli/vai-workflow-doc-freshness', description:'Audit your knowledge base for stale content. Gathers metadata from 5 tools in parallel.', category:'utility', tags:['freshness','maintenance','monitoring'], tools:['collections','models','search','explain','estimate','generate'], steps:6, tier:'official', downloads:1456, installed:false, gradient:'linear-gradient(135deg, #4338CA, #7C3AED)' },
+  { name:'incremental-sync', packageName:'@vaicli/vai-workflow-incremental-sync', description:'Smart ingestion with deduplication. Checks similarity before storing.', category:'ingestion', tags:['dedup','sync','conditional'], tools:['search','similarity','ingest','filter','generate'], steps:5, tier:'official', downloads:2103, installed:false, gradient:'linear-gradient(135deg, #15803D, #4ADE80)' },
+  { name:'rag-ab-test', packageName:'@vaicli/vai-workflow-rag-ab-test', description:'Run the same query through two RAG configurations side-by-side.', category:'integration', tags:['ab-test','comparison','evaluation'], tools:['query','generate'], steps:5, tier:'official', downloads:1678, installed:false, gradient:'linear-gradient(135deg, #BE185D, #F472B6)' },
+  { name:'hybrid-precision-search', packageName:'@vaicli/vai-workflow-hybrid-precision-search', description:'Three retrieval strategies in parallel — lite, large, and filtered — merged and reranked.', category:'retrieval', tags:['hybrid','parallel','precision'], tools:['query','search','merge','rerank'], steps:5, tier:'official', downloads:1890, installed:false, gradient:'linear-gradient(135deg, #0891B2, #22D3EE)' },
+  { name:'code-migration-helper', packageName:'@vaicli/vai-workflow-code-migration-helper', description:'Find similar code patterns across your codebase using voyage-code-3.', category:'domain-specific', tags:['code','migration','voyage-code-3'], tools:['query','rerank','generate'], steps:3, tier:'official', downloads:932, installed:false, gradient:'linear-gradient(135deg, #475569, #94A3B8)' },
+  { name:'meeting-action-items', packageName:'@vaicli/vai-workflow-meeting-action-items', description:'Ingest meeting notes and extract structured action items with owners, deadlines, and context.', category:'domain-specific', tags:['meetings','action-items','productivity'], tools:['ingest','query','generate'], steps:3, tier:'official', downloads:2567, installed:false, gradient:'linear-gradient(135deg, #7C2D12, #EA580C)' },
+  { name:'collection-overlap-audit', packageName:'@vaicli/vai-workflow-collection-overlap-audit', description:'Detect duplicate content across two collections.', category:'analysis', tags:['dedup','overlap','audit'], tools:['search','similarity','merge','filter','generate'], steps:5, tier:'official', downloads:678, installed:false, gradient:'linear-gradient(135deg, #6D28D9, #A78BFA)' },
+  { name:'query-quality-scorer', packageName:'@vaicli/vai-workflow-query-quality-scorer', description:'Evaluate retrieval quality without ground truth labels.', category:'analysis', tags:['evaluation','quality','scoring'], tools:['query','similarity','transform','generate'], steps:4, tier:'official', downloads:823, installed:false, gradient:'linear-gradient(135deg, #9333EA, #C084FC)' },
+  { name:'clinical-protocol-match', packageName:'@vaicli/vai-workflow-clinical-protocol-match', description:'Match clinical presentations to treatment protocols.', category:'domain-specific', tags:['clinical','healthcare','protocols'], tools:['query','rerank','generate'], steps:3, tier:'official', downloads:712, installed:false, gradient:'linear-gradient(135deg, #0F766E, #2DD4BF)' },
+  { name:'batch-quality-gate', packageName:'@vaicli/vai-workflow-batch-quality-gate', description:'Quality-filtered ingestion. Only ingest content that meets your similarity threshold.', category:'ingestion', tags:['quality','gate','filtering'], tools:['search','embed','similarity','ingest','filter','generate'], steps:5, tier:'official', downloads:543, installed:false, gradient:'linear-gradient(135deg, #166534, #86EFAC)' },
+  { name:'index-health-check', packageName:'@vaicli/vai-workflow-index-health-check', description:'Diagnostic pipeline for your vector index.', category:'utility', tags:['diagnostics','health','index'], tools:['collections','search','query','estimate','generate'], steps:5, tier:'official', downloads:1345, installed:false, gradient:'linear-gradient(135deg, #1D4ED8, #60A5FA)' },
+];
+
+// Inject branding into fallback data (matches DEFAULT_BRANDING in catalog API)
+const _WF_FALLBACK_BRANDING = {
+  'model-shootout':           { icon:'trophy',        color:'#0D9488',  iconPath:'M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2z' },
+  'asymmetric-search':        { icon:'split',         color:'#00D4AA',  iconPath:'M16 3h5v5M8 3H3v5M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3M21 3l-7.828 7.828A4 4 0 0 0 12 13.7V22' },
+  'cost-optimizer':           { icon:'dollar-sign',   color:'#F59E0B',  iconPath:'M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6' },
+  'question-decomposition':   { icon:'sparkle',       color:'#8B5CF6',  iconPath:'M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z' },
+  'contract-clause-finder':   { icon:'file-search',   color:'#1E40AF',  iconPath:'M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7zM9.5 12.5a2.5 2.5 0 1 0 5 0 2.5 2.5 0 1 0-5 0M13.3 14.3 15 16' },
+  'knowledge-base-bootstrap': { icon:'database',      color:'#059669',  iconPath:'M21 5c0 1.1-3.134 3-9 3S3 6.1 3 5M21 5c0-1.1-3.134-3-9-3S3 3.9 3 5M21 5v14c0 1.1-3.134 3-9 3s-9-1.9-9-3V5M21 12c0 1.1-3.134 3-9 3s-9-1.9-9-3' },
+  'embedding-drift-detector': { icon:'activity',      color:'#DC2626',  iconPath:'M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36-3.18-19.64A2 2 0 0 0 10.12 1h-.24a2 2 0 0 0-1.94 1.55L5.18 12H2' },
+  'multilingual-search':      { icon:'globe',         color:'#0EA5E9',  iconPath:'M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0M2 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' },
+  'financial-risk-scanner':   { icon:'shield-alert',  color:'#B45309',  iconPath:'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 .5-.87l7-4a1 1 0 0 1 1 0l7 4A1 1 0 0 1 20 6zM12 8v4M12 16h.01' },
+  'doc-freshness':            { icon:'timer',         color:'#4338CA',  iconPath:'M10 2h4M12 14l3-3M12 22a8 8 0 1 0 0-16 8 8 0 0 0 0 16z' },
+  'incremental-sync':         { icon:'refresh-cw',    color:'#15803D',  iconPath:'M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16' },
+  'rag-ab-test':              { icon:'flask-conical', color:'#BE185D',  iconPath:'M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2M8.5 2h7M7 16h10' },
+  'hybrid-precision-search':  { icon:'target',        color:'#0891B2',  iconPath:'M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0M12 12m-6 0a6 6 0 1 0 12 0 6 6 0 1 0-12 0M12 12m-2 0a2 2 0 1 0 4 0 2 2 0 1 0-4 0' },
+  'code-migration-helper':    { icon:'code',          color:'#475569',  iconPath:'M16 18l6-6-6-6M8 6l-6 6 6 6' },
+  'meeting-action-items':     { icon:'clipboard-list',color:'#7C2D12',  iconPath:'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M9 2h6a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM12 11h4M12 16h4M8 11h.01M8 16h.01' },
+  'collection-overlap-audit': { icon:'layers',        color:'#6D28D9',  iconPath:'M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.84zM2 12l8.58 3.91a2 2 0 0 0 1.66 0L22 12M2 17l8.58 3.91a2 2 0 0 0 1.66 0L22 17' },
+  'query-quality-scorer':     { icon:'microscope',    color:'#9333EA',  iconPath:'M6 18h8M3 22h18M14 22a7 7 0 1 0 0-14h-1M9 14h2M9 12a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2z' },
+  'clinical-protocol-match':  { icon:'heart-pulse',   color:'#0F766E',  iconPath:'M19.5 12.572l-7.5 7.428-7.5-7.428A5 5 0 0 1 7.5 5c1.8 0 3.3.9 4.5 2.7C13.2 5.9 14.7 5 16.5 5a5 5 0 0 1 3 9.572zM12 6l-1 4h4l-1 4' },
+  'batch-quality-gate':       { icon:'check-circle',  color:'#166534',  iconPath:'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3' },
+  'index-health-check':       { icon:'bar-chart-3',   color:'#1D4ED8',  iconPath:'M12 20V10M18 20V4M6 20v-4' },
+};
+WF_STORE_FALLBACK.forEach(wf => { wf.branding = _WF_FALLBACK_BRANDING[wf.name] || { icon:'zap', color:'#64748B', iconPath:'M13 2 3 14h9l-1 8 10-12h-9l1-8z' }; });
+
+let _wfStoreCatalog = null;
+let _wfStoreCat = 'all';
+
+function wfStoreOpen() {
+  const overlay = document.getElementById('wfStoreOverlay');
+  if (!overlay) return;
+  overlay.classList.add('open');
+  document.getElementById('wfStoreBtn').classList.add('active');
+  if (!_wfStoreCatalog) wfStoreFetchCatalog();
+}
+
+function wfStoreClose() {
+  const overlay = document.getElementById('wfStoreOverlay');
+  if (overlay) overlay.classList.remove('open');
+  document.getElementById('wfStoreBtn').classList.remove('active');
+  // Close detail modal if open
+  const detail = document.getElementById('wfStoreDetail');
+  if (detail) detail.remove();
+}
+
+// Store icons map (populated from API response or used from inline fallback)
+let _wfStoreIcons = {};
+
+// Render a branding icon as inline SVG
+function wfBrandingIcon(wf, size = 16) {
+  const b = wf.branding || {};
+  const iconPath = b.iconPath || _wfStoreIcons[b.icon] || '';
+  if (!iconPath) return '';
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="${iconPath}"/></svg>`;
+}
+
+async function wfStoreFetchCatalog() {
+  try {
+    const res = await fetch('/api/workflows/catalog');
+    const data = await res.json();
+    if (data.icons) _wfStoreIcons = data.icons;
+    if (data.workflows && data.workflows.length > 0) {
+      _wfStoreCatalog = data.workflows;
+    } else {
+      _wfStoreCatalog = WF_STORE_FALLBACK;
+    }
+  } catch {
+    _wfStoreCatalog = WF_STORE_FALLBACK;
+  }
+  wfStoreRender();
+}
+
+function wfStoreRender() {
+  const container = document.getElementById('wfStoreContent');
+  if (!container || !_wfStoreCatalog) return;
+  const search = (document.getElementById('wfStoreSearch')?.value || '').toLowerCase();
+  const sort = document.getElementById('wfStoreSort')?.value || 'downloads';
+
+  const filtered = _wfStoreCatalog.filter(wf => {
+    const mc = _wfStoreCat === 'all' || wf.category === _wfStoreCat;
+    const ms = !search || wf.name.includes(search) || (wf.description||'').toLowerCase().includes(search)
+      || (wf.tags||[]).some(t => t.includes(search)) || (wf.tools||[]).some(t => t.includes(search));
+    return mc && ms;
+  }).sort((a, b) => sort === 'downloads' ? (b.downloads||0) - (a.downloads||0) : sort === 'name' ? a.name.localeCompare(b.name) : (b.steps||0) - (a.steps||0));
+
+  const featured = _wfStoreCatalog.filter(w => w.featured);
+  const showFeat = _wfStoreCat === 'all' && !search;
+
+  let html = '';
+  // Category chips
+  html += '<div class="wf-store-chips">';
+  WF_STORE_CATEGORIES.forEach(c => {
+    html += `<button class="wf-store-chip ${_wfStoreCat===c.id?'active':''}" onclick="_wfStoreCat='${c.id}';wfStoreRender()">${c.icon} ${c.label}</button>`;
+  });
+  html += '</div>';
+
+  // Featured section
+  if (showFeat && featured.length > 0) {
+    html += '<div class="wf-store-section-label">Featured</div>';
+    html += '<div class="wf-store-featured-grid">';
+    featured.forEach(wf => {
+      const featAuthor = wf.author && wf.author.name && wf.author.name !== 'unknown' ? wf.author : null;
+      const featAvatarHtml = featAuthor ? (featAuthor.avatar
+        ? `<div class="wf-store-featured-avatar"><img src="${featAuthor.avatar}" onerror="this.parentNode.textContent='${featAuthor.name.charAt(0).toUpperCase()}'"></div>`
+        : `<div class="wf-store-featured-avatar">${featAuthor.name.charAt(0).toUpperCase()}</div>`) : '';
+      const featAuthorHtml = featAuthor ? `<div class="wf-store-featured-author">${featAvatarHtml} by ${featAuthor.name}</div>` : '';
+      const featIconHtml = wfBrandingIcon(wf, 20) ? `<div class="wf-store-featured-icon">${wfBrandingIcon(wf, 20)}</div>` : '';
+      html += `<div class="wf-store-featured-card" style="background:${wf.gradient}" onclick="wfStoreShowDetail('${wf.name}')">
+        ${featIconHtml}
+        <div class="wf-store-featured-dl">↓ ${(wf.downloads||0).toLocaleString()}</div>
+        <div class="wf-store-featured-content"><h3>${wf.name}</h3><p>${wf.description||''}</p>${featAuthorHtml}</div>
+      </div>`;
+    });
+    html += '</div>';
+  }
+
+  // Grid label
+  const label = _wfStoreCat === 'all' ? 'All Workflows' : (WF_STORE_CATEGORIES.find(c=>c.id===_wfStoreCat)?.label || _wfStoreCat);
+  html += `<div class="wf-store-section-label">${label} <span class="wf-store-count">${filtered.length}</span></div>`;
+
+  if (filtered.length === 0) {
+    html += '<div class="wf-store-empty"><p>No workflows match your search</p></div>';
+  } else {
+    html += '<div class="wf-store-grid">';
+    filtered.forEach(wf => {
+      const dots = (wf.tools||[]).slice(0,5).map(t =>
+        `<div class="wf-store-card-dot" style="background:${WF_STORE_TOOL_COLORS[t]||'#666'}"></div>`
+      ).join('') + ((wf.tools||[]).length > 5 ? `<span style="font-family:var(--mono);font-size:9px;color:var(--text-muted);margin-left:2px">+${wf.tools.length-5}</span>` : '');
+      const badges = (wf.installed ? '<span class="wf-store-badge-installed">installed</span>' : '') +
+        `<span class="wf-store-badge-official">${wf.tier==='official' ? '✓ OFFICIAL' : 'COMMUNITY'}</span>`;
+      const cardIconColor = (wf.branding && wf.branding.color) || '#64748B';
+      const cardIconSvg = wfBrandingIcon(wf, 16);
+      const cardIconHtml = cardIconSvg
+        ? `<div class="wf-store-card-icon" style="background:${cardIconColor}18;color:${cardIconColor}">${cardIconSvg}</div>`
+        : '';
+      html += `<div class="wf-store-card" onclick="wfStoreShowDetail('${wf.name}')">
+        <div class="wf-store-card-bar" style="background:${wf.gradient}"></div>
+        <div class="wf-store-card-top">
+          <div class="wf-store-card-name-wrap">${cardIconHtml}<span class="wf-store-card-name">${wf.name}</span></div>
+          <div class="wf-store-card-badges">${badges}</div>
+        </div>
+        <div class="wf-store-card-desc">${wf.description||''}</div>
+        ${wf.author && wf.author.name && wf.author.name !== 'unknown' ? `<div class="wf-store-card-author">by ${wf.author.name}</div>` : ''}
+        <div class="wf-store-card-meta">
+          <span class="wf-store-card-cat">${wf.category||'utility'}</span>
+          <div class="wf-store-card-dots">${dots}</div>
+          <span class="wf-store-card-complexity">${wf.steps||0}s·${wf.toolCount||(Array.isArray(wf.tools)?wf.tools.length:0)}t</span>
+          <span class="wf-store-card-downloads">↓ ${(wf.downloads||0).toLocaleString()}</span>
+        </div>
+      </div>`;
+    });
+    html += '</div>';
+  }
+
+  container.innerHTML = html;
+}
+
+function wfStoreShowDetail(name) {
+  const wf = (_wfStoreCatalog || []).find(w => w.name === name);
+  if (!wf) return;
+  // Remove existing detail
+  const existing = document.getElementById('wfStoreDetail');
+  if (existing) existing.remove();
+
+  const ic = `vai workflow install ${wf.packageName}`;
+  const rc = `vai workflow run ${wf.packageName}`;
+
+  // Escape for use in HTML attributes (single-quoted onclick handlers)
+  const icEsc = ic.replace(/'/g, "\\'");
+  const rcEsc = rc.replace(/'/g, "\\'");
+
+  const toolsHtml = (wf.tools||[]).map(t => {
+    const c = WF_STORE_TOOL_COLORS[t] || '#666';
+    return `<span class="wf-store-detail-tool" style="color:${c};border-color:${c}44;background:${c}11">${t}</span>`;
+  }).join('');
+
+  const tagsHtml = `<span class="wf-store-detail-tag">${wf.category||'utility'}</span>` +
+    (wf.tags||[]).map(t => `<span class="wf-store-detail-tag">${t}</span>`).join('');
+
+  const installBtn = wf.installed
+    ? '<button class="wf-store-detail-btn wf-store-detail-btn-installed">✓ Installed</button>'
+    : `<button class="wf-store-detail-btn wf-store-detail-btn-primary" onclick="wfStoreInstall('${wf.packageName}',this)">Install</button>`;
+
+  const modal = document.createElement('div');
+  modal.id = 'wfStoreDetail';
+  modal.className = 'wf-store-detail-bg';
+  modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
+  modal.innerHTML = `<div class="wf-store-detail-panel" onclick="event.stopPropagation()">
+    <div class="wf-store-detail-hero" style="background:${wf.gradient}">
+      <button class="wf-store-detail-close" onclick="document.getElementById('wfStoreDetail').remove()">×</button>
+      <div class="wf-store-detail-hero-inner">
+        ${wfBrandingIcon(wf, 26) ? `<div class="wf-store-detail-hero-icon">${wfBrandingIcon(wf, 26)}</div>` : ''}
+        <div>
+          <div class="wf-store-detail-name">${wf.name}</div>
+          <div class="wf-store-detail-pkg">${wf.packageName}</div>
+        </div>
+      </div>
+    </div>
+    <div class="wf-store-detail-body">
+      ${(() => {
+        const a = wf.author && wf.author.name && wf.author.name !== 'unknown' ? wf.author : null;
+        if (!a) return '';
+        const avatarInner = a.avatar
+          ? `<img src="${a.avatar}" onerror="this.parentNode.textContent='${a.name.charAt(0).toUpperCase()}'">` 
+          : a.name.charAt(0).toUpperCase();
+        const nameHtml = a.url
+          ? `<a href="${a.url}" target="_blank" rel="noopener">${a.name}</a>`
+          : a.name;
+        return `<div class="wf-store-detail-author"><div class="wf-store-detail-avatar">${avatarInner}</div><div class="wf-store-detail-author-name">${nameHtml}</div></div>`;
+      })()}
+      <p class="wf-store-detail-desc">${wf.description||''}</p>
+      ${wf.assets && wf.assets.screenshots && wf.assets.screenshots.length > 0 ? `
+      <div class="wf-store-detail-section">
+        <div class="wf-store-detail-label">Screenshots</div>
+        <div class="wf-store-detail-screenshots">${wf.assets.screenshots.map(s => `<img src="${s}" alt="Screenshot">`).join('')}</div>
+      </div>` : ''}
+      <div class="wf-store-detail-section">
+        <div class="wf-store-detail-label">Stats</div>
+        <div class="wf-store-detail-stats">
+          <div class="wf-store-detail-stat"><div class="wf-store-detail-stat-val">${wf.steps||0}</div><div class="wf-store-detail-stat-lbl">Steps</div></div>
+          <div class="wf-store-detail-stat"><div class="wf-store-detail-stat-val">${wf.toolCount||(Array.isArray(wf.tools)?wf.tools.length:0)}</div><div class="wf-store-detail-stat-lbl">Tools</div></div>
+          <div class="wf-store-detail-stat"><div class="wf-store-detail-stat-val">${(wf.downloads||0).toLocaleString()}</div><div class="wf-store-detail-stat-lbl">Downloads</div></div>
+        </div>
+      </div>
+      <div class="wf-store-detail-section">
+        <div class="wf-store-detail-label">Tools</div>
+        <div class="wf-store-detail-tools">${toolsHtml}</div>
+      </div>
+      <div class="wf-store-detail-section">
+        <div class="wf-store-detail-label">Tags</div>
+        <div class="wf-store-detail-tags">${tagsHtml}</div>
+      </div>
+      ${wf.inputs && wf.inputs.length > 0 ? `
+      <div class="wf-store-detail-section">
+        <div class="wf-store-detail-label">Input Parameters</div>
+        <table class="wf-store-detail-inputs-table">
+          <thead><tr><th>Name</th><th>Type</th><th>Required / Default</th></tr></thead>
+          <tbody>${wf.inputs.map(inp => `<tr><td>${inp.name}</td><td>${inp.type}</td><td>${inp.required ? 'required' : inp.default !== undefined ? 'default: ' + inp.default : 'optional'}</td></tr>`).join('')}</tbody>
+        </table>
+      </div>` : ''}
+      <div class="wf-store-detail-install">
+        <div class="wf-store-detail-label">Install</div>
+        <div class="wf-store-detail-cmd" onclick="navigator.clipboard.writeText('${icEsc}');this.querySelector('.wf-store-detail-cmd-hint').textContent='✓ copied';setTimeout(()=>this.querySelector('.wf-store-detail-cmd-hint').textContent='copy',2000)">
+          <span>$ ${ic}</span><span class="wf-store-detail-cmd-hint">copy</span>
+        </div>
+        <div class="wf-store-detail-label" style="margin-top:12px">Run</div>
+        <div class="wf-store-detail-cmd" style="color:var(--text-dim)" onclick="navigator.clipboard.writeText('${rcEsc}');this.querySelector('.wf-store-detail-cmd-hint').textContent='✓ copied';setTimeout(()=>this.querySelector('.wf-store-detail-cmd-hint').textContent='copy',2000)">
+          <span>$ ${rc}</span><span class="wf-store-detail-cmd-hint">copy</span>
+        </div>
+      </div>
+      <div class="wf-store-detail-actions">
+        ${installBtn}
+        <button class="wf-store-detail-btn wf-store-detail-btn-secondary" onclick="wfStoreRun('${wf.name}')">Run</button>
+        <button class="wf-store-detail-btn wf-store-detail-btn-secondary" onclick="wfStoreCanvas('${wf.name}')">Canvas</button>
+      </div>
+    </div>
+  </div>`;
+  document.body.appendChild(modal);
+}
+
+async function wfStoreInstall(packageName, btn) {
+  if (btn) { btn.textContent = 'Installing...'; btn.disabled = true; }
+  try {
+    const res = await fetch('/api/workflows/community/install', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: packageName })
+    });
+    const text = await res.text();
+    let data;
+    try { data = JSON.parse(text); } catch { data = { error: text || 'Empty response (status ' + res.status + ')' }; }
+    console.log('[Store Install]', packageName, data);
+    if (data.success) {
+      if (btn) { btn.textContent = '✓ Installed'; btn.className = 'wf-store-detail-btn wf-store-detail-btn-installed'; btn.disabled = true; }
+      // Update catalog state
+      const wf = (_wfStoreCatalog||[]).find(w => w.packageName === packageName);
+      if (wf) wf.installed = true;
+      wfStoreRender();
+      await wfLoadLibrary(); // Refresh library panel
+    } else {
+      const errMsg = data.error || 'Unknown error';
+      console.error('[Store Install Error]', errMsg);
+      if (btn) { btn.textContent = 'Failed'; btn.title = errMsg; setTimeout(() => { btn.textContent = 'Install'; btn.disabled = false; btn.title = ''; }, 4000); }
+    }
+  } catch (err) {
+    console.error('[Store Install Exception]', err);
+    if (btn) { btn.textContent = 'Failed'; btn.title = err.message; setTimeout(() => { btn.textContent = 'Install'; btn.disabled = false; btn.title = ''; }, 4000); }
+  }
+}
+
+async function wfStoreRun(name) {
+  const detail = document.getElementById('wfStoreDetail');
+  if (detail) detail.remove();
+  wfStoreClose();
+
+  // Find the workflow in catalog
+  const wf = (_wfStoreCatalog||[]).find(w => w.name === name);
+  if (!wf) {
+    alert('Workflow not found: ' + name);
+    return;
+  }
+
+  // Check if installed
+  if (!wf.installed) {
+    const doInstall = confirm(`"${wf.name}" is not installed. Install it now?`);
+    if (doInstall) {
+      await wfStoreInstall(wf.packageName, null);
+      // Refresh catalog to update installed status
+      await wfStoreFetchCatalog();
+      // Check again
+      const updated = (_wfStoreCatalog||[]).find(w => w.name === name);
+      if (!updated || !updated.installed) {
+        alert('Installation may have failed. Please try again.');
+        return;
+      }
+    } else {
+      return;
+    }
+  }
+
+  // Switch to workflows tab and load the workflow
+  switchTab('workflows');
+  // Use the full package name for resolution
+  wfSelectWorkflow(wf.packageName);
+}
+
+function wfStoreCanvas(name) {
+  wfStoreRun(name); // Same behavior — load the workflow into canvas
+}
+
+// Escape key handler for store
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    const detail = document.getElementById('wfStoreDetail');
+    if (detail) { detail.remove(); return; }
+    const overlay = document.getElementById('wfStoreOverlay');
+    if (overlay && overlay.classList.contains('open')) { wfStoreClose(); }
+  }
+});
+
 function wfInit() {
   wfLoadLibrary();
   wfInitPan();