voyageai-cli 1.28.0 → 1.29.0

package/src/playground/index.html

@@ -1779,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 {
@@ -3127,6 +3164,199 @@ select:focus { outline: none; border-color: var(--accent); }
 .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); }
@@ -3400,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;
@@ -3550,8 +3782,682 @@ select:focus { outline: none; border-color: var(--accent); }
   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; }
+.wf-canvas-watermark img { width: 300px; height: 300px; filter: invert(1); }
+[data-theme="light"] .wf-canvas-watermark img { filter: none; }
+
+/* ── Home Page Styles ── */
+
+/* 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);
+}
+
+.home-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.home-logo {
+  width: 32px;
+  height: 32px;
+}
+
+.home-header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: -0.01em;
+}
+
+.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;
+}
+
+.home-header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.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;
+}
+
+.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>
@@ -3628,7 +4534,8 @@ select:focus { outline: none; border-color: var(--accent); }
   <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 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>
@@ -3687,8 +4594,169 @@ select:focus { outline: none; border-color: var(--accent); }
   </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 active" id="tab-embed" role="tabpanel" aria-labelledby="tab-btn-embed" tabindex="0">
+<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>
@@ -4494,10 +5562,13 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <div class="wf-container">
     <div class="wf-library">
       <div class="wf-library-header">
-        <div class="wf-library-tabs">
+        <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>
@@ -4541,6 +5612,30 @@ Reranking models rescore initial search results to improve relevance ordering.</
       </div>
       <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>
@@ -4665,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>
@@ -4976,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>
 
@@ -5453,89 +6594,463 @@ function initTelemetryToggle() {
   });
 }
 
-async function init() {
-  // Mark body for Electron vs Web styling
-  if (window.vai && window.vai.isElectron) {
-    document.body.classList.add('is-electron');
+async function init() {
+  // Mark body for Electron vs Web styling
+  if (window.vai && window.vai.isElectron) {
+    document.body.classList.add('is-electron');
+  }
+  setupTabs();
+  await loadConfig();
+  await Promise.all([loadModels(), loadConcepts()]);
+  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);
+  
+  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;
   }
-  setupTabs();
-  await loadConfig();
-  await Promise.all([loadModels(), loadConcepts()]);
-  populateModelSelects();
-  buildExploreCards();
+  
+  let workflows = [...homeData.communityWorkflows];
 
-  // Telemetry
-  initTelemetryToggle();
-  sendTelemetry('app_launch');
+  // 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('');
 }
 
-// ── Tabs ──
-function setupTabs() {
-  const tabBtns = document.querySelectorAll('.tab-btn');
-  const tabList = Array.from(tabBtns);
+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() {
@@ -7461,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) {
@@ -10016,6 +11540,13 @@ const WF_NODE_META = {
   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
@@ -10061,6 +11592,8 @@ async function wfLoadLibrary() {
     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) {
@@ -10111,9 +11644,169 @@ function wfRenderLibrary() {
     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';
@@ -10257,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');
@@ -10267,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);
       }
     });
@@ -10334,14 +12049,27 @@ function wfDrawNode(step, x, y, state, hasDeps, hasDependents) {
     });
   }
 
-  // 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);
+  // 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;
@@ -11454,10 +13182,16 @@ const WF_INPUT_DEFS = {
   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', 'management', 'utility', 'control', 'generation'];
-const WF_CATEGORY_LABELS = { retrieval: 'Retrieval', embedding: 'Embedding', management: 'Management', utility: 'Utility', control: 'Control Flow', generation: 'Generation' };
+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) {
@@ -11935,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();