voyageai-cli 1.28.0 → 1.30.0

package/src/playground/index.html

@@ -350,6 +350,79 @@ body {
   flex-direction: column;
   overflow: hidden;
   z-index: 100;
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sidebar.collapsed {
+  width: 56px;
+  min-width: 56px;
+}
+.sidebar.collapsed .sidebar-title,
+.sidebar.collapsed .sidebar-nav-label,
+.sidebar.collapsed .sidebar-nav-divider,
+.sidebar.collapsed .status-label,
+.sidebar.collapsed .sidebar-bug-label,
+.sidebar.collapsed .sidebar-docs-link span,
+.sidebar.collapsed .sidebar-model-group,
+.sidebar.collapsed .sidebar-footer > div:last-child { display: none; }
+.sidebar.collapsed .sidebar-footer { overflow: hidden; padding: 8px 0; align-items: center; border-top: none; }
+.sidebar.collapsed .sidebar-footer > div:first-child { justify-content: center; }
+.sidebar.collapsed .sidebar-footer .theme-toggle { display: none; }
+.sidebar.collapsed #appVersionLabel { display: none; }
+.sidebar.collapsed .sidebar-docs-link { display: none; }
+.sidebar.collapsed .tab-btn {
+  justify-content: center;
+  padding: 10px;
+  border-left-width: 2px;
+}
+.sidebar.collapsed .tab-btn span:not(.tab-btn-icon) { display: none; }
+.sidebar.collapsed .sidebar-settings-btn { display: none; }
+.sidebar.collapsed .sidebar-drag-region { justify-content: center; padding: 0; padding-top: 52px; }
+body:not(.is-electron) .sidebar.collapsed .sidebar-drag-region { padding-top: 16px; padding-bottom: 12px; }
+
+/* Sidebar collapse toggle */
+.sidebar-collapse-btn {
+  -webkit-app-region: no-drag;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+.sidebar-collapse-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
+[data-theme="light"] .sidebar-collapse-btn:hover { background: rgba(0,0,0,0.04); }
+.sidebar.collapsed .sidebar-collapse-btn { transform: rotate(180deg); }
+
+/* Sidebar tooltip for collapsed mode */
+.sidebar.collapsed .tab-btn {
+  position: relative;
+}
+.sidebar.collapsed .tab-btn::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  background: #2d333b;
+  color: #e6edf3;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s 0.15s;
+  z-index: 1000;
+}
+.sidebar.collapsed .tab-btn:hover::after {
+  opacity: 1;
 }
 
 .sidebar-drag-region {
@@ -484,6 +557,7 @@ body:not(.is-electron) .sidebar-drag-region {
 
 .sidebar-footer {
   padding: 12px 16px;
+  padding-bottom: 56px; /* Clear the fixed cost status bar */
   border-top: 1px solid var(--border);
   display: flex;
   flex-direction: column;
@@ -1779,6 +1853,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 {
@@ -2531,7 +2642,10 @@ select:focus { outline: none; border-color: var(--accent); }
 .chat-thinking .thinking-icon {
   font-size: 14px;
   line-height: 1;
+  display: flex;
+  align-items: center;
 }
+.chat-thinking .thinking-icon svg { color: var(--accent); }
 .chat-thinking .thinking-label {
   font-weight: 500;
 }
@@ -2589,6 +2703,7 @@ select:focus { outline: none; border-color: var(--accent); }
   background: var(--bg-input, #112733);
   border: 1px solid var(--border);
 }
+.thinking-step-icon svg { color: var(--text-dim); }
 .thinking-step.active .thinking-step-icon {
   border-color: var(--accent);
   animation: thinkingPulse 1.2s ease-in-out infinite;
@@ -2983,10 +3098,15 @@ select:focus { outline: none; border-color: var(--accent); }
   min-height: 0;
 }
 .wf-library {
-  width: 220px; min-width: 180px; flex-shrink: 0;
+  width: 220px; min-width: 0; flex-shrink: 0;
   border-right: 1px solid var(--border);
   display: flex; flex-direction: column;
   background: var(--bg);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+.wf-library.collapsed {
+  width: 0; border-right: none;
 }
 .wf-library-header {
   padding: 14px 16px 10px; font-weight: 700; font-size: 13px;
@@ -3049,6 +3169,88 @@ select:focus { outline: none; border-color: var(--accent); }
   font-size: 10px; font-weight: 600; color: var(--text-muted);
   padding: 8px 12px 2px; text-transform: uppercase; letter-spacing: 0.5px;
 }
+/* ── Library Search ── */
+.wf-library-search-wrap {
+  padding: 8px 12px 4px; position: relative;
+}
+.wf-library-search-wrap input {
+  width: 100%; padding: 6px 28px 6px 10px; border-radius: 6px;
+  border: 1px solid var(--border); background: var(--bg-card);
+  color: var(--text); font-size: 12px; outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+.wf-library-search-wrap input:focus {
+  border-color: var(--accent);
+}
+.wf-library-search-wrap input::placeholder {
+  color: var(--text-muted);
+}
+.wf-library-search-clear {
+  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
+  background: none; border: none; color: var(--text-muted); cursor: pointer;
+  font-size: 14px; padding: 2px 4px; line-height: 1; display: none;
+}
+.wf-library-search-clear:hover { color: var(--text); }
+/* ── Collapsible Library Sections ── */
+.wf-lib-section-header {
+  display: flex; align-items: center; gap: 6px;
+  width: 100%; padding: 8px 12px; border: none; background: none;
+  color: var(--text-muted); font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 1.2px; cursor: pointer;
+  transition: color 0.15s;
+}
+.wf-lib-section-header:hover { color: var(--text); }
+.wf-lib-section-header .wf-chevron {
+  font-size: 10px; transition: transform 0.2s; display: inline-block;
+}
+.wf-lib-section-header.expanded .wf-chevron { transform: rotate(90deg); }
+.wf-lib-section-header .wf-section-count {
+  color: var(--text-muted); font-size: 10px; font-weight: 400;
+}
+.wf-lib-section-body {
+  overflow: hidden; transition: max-height 0.2s ease-out;
+}
+/* ── Properties Accordion ── */
+.wf-accordion-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
+  transition: background-color 0.15s ease; user-select: none;
+}
+.wf-accordion-header.expanded {
+  background: rgba(0,212,170,0.05);
+}
+.wf-accordion-header .wf-acc-left {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
+  color: var(--text);
+}
+.wf-accordion-header .wf-acc-left .wf-chevron {
+  font-size: 10px; transition: transform 0.2s; display: inline-block;
+}
+.wf-accordion-header.expanded .wf-acc-left .wf-chevron { transform: rotate(90deg); }
+.wf-accordion-header .wf-acc-summary {
+  font-size: 10px; color: var(--text-muted); font-weight: 400;
+}
+.wf-accordion-body {
+  overflow: hidden; transition: max-height 0.2s ease-out;
+}
+.wf-accordion-body-inner {
+  padding: 12px;
+}
+.wf-step-row {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 4px 0; font-size: 12px;
+}
+.wf-step-dot {
+  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
+  margin-right: 8px; flex-shrink: 0;
+}
+.wf-step-name { flex: 1; color: var(--text); }
+.wf-step-time {
+  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10px;
+  color: var(--text-muted); margin-left: 8px;
+}
 .wf-canvas-area {
   flex: 1; position: relative; overflow: hidden;
   background: var(--bg);
@@ -3056,8 +3258,8 @@ select:focus { outline: none; border-color: var(--accent); }
   background-size: 20px 20px;
 }
 .wf-canvas-toolbar {
-  position: absolute; top: 12px; right: 12px; z-index: 10;
-  display: flex; gap: 4px;
+  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 10;
+  display: flex; gap: 4px; align-items: center;
 }
 .wf-canvas-toolbar button {
   width: 32px; height: 32px; border-radius: 8px;
@@ -3127,6 +3329,339 @@ 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 Node Help ── */
+.wf-palette-item { position: relative; }
+.wf-help-trigger {
+  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
+  width: 20px; height: 20px; border-radius: 50%;
+  border: 1px solid var(--border); background: var(--bg);
+  color: var(--text-muted); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
+  padding: 0; z-index: 2;
+}
+.wf-palette-item:hover .wf-help-trigger { opacity: 1; }
+.wf-help-trigger:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+.wf-help-trigger svg { width: 12px; height: 12px; }
+
+.wf-inspector-help-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 8px; border-radius: 4px;
+  border: 1px solid var(--border); background: var(--bg);
+  color: var(--text-muted); font-size: 11px; cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  margin-left: 8px; vertical-align: middle;
+}
+.wf-inspector-help-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+.wf-inspector-help-btn svg { width: 12px; height: 12px; }
+
+.wf-help-modal-backdrop {
+  position: fixed; inset: 0; z-index: 10000;
+  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+  animation: wfStoreDetailFadeIn 0.12s ease-out;
+}
+.wf-help-modal {
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: 12px; width: 540px; max-width: 92vw;
+  max-height: 82vh; display: flex; flex-direction: column;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
+  animation: wfStoreDetailFadeIn 0.12s ease-out;
+}
+.wf-help-modal-header {
+  display: flex; align-items: center; gap: 10px;
+  padding: 16px 20px; border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.wf-help-modal-header .wf-help-icon {
+  width: 32px; height: 32px; border-radius: 8px;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.wf-help-modal-header .wf-help-title { font-size: 16px; font-weight: 600; flex: 1; }
+.wf-help-modal-header .wf-help-category-badge {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.5px; padding: 2px 8px; border-radius: 4px;
+  background: var(--bg-card); color: var(--text-muted); flex-shrink: 0;
+}
+.wf-help-modal-header .wf-help-close-btn {
+  width: 28px; height: 28px; border-radius: 6px;
+  border: 1px solid var(--border); background: var(--bg);
+  color: var(--text-muted); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0; padding: 0; transition: background 0.15s ease, color 0.15s ease;
+}
+.wf-help-modal-header .wf-help-close-btn:hover { background: var(--bg-card); color: var(--text); }
+
+.wf-help-modal-body {
+  overflow-y: auto; padding: 20px; flex: 1;
+}
+.wf-help-section { margin-bottom: 20px; }
+.wf-help-section:last-child { margin-bottom: 0; }
+.wf-help-section-title {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px;
+}
+.wf-help-section p {
+  font-size: 13px; line-height: 1.6; color: var(--text); margin: 0;
+}
+
+.wf-help-io-table {
+  width: 100%; border-collapse: collapse; font-size: 12px;
+}
+.wf-help-io-table th {
+  text-align: left; padding: 6px 8px; font-weight: 600;
+  color: var(--text-muted); border-bottom: 1px solid var(--border);
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
+}
+.wf-help-io-table td {
+  padding: 6px 8px; border-bottom: 1px solid var(--border);
+  color: var(--text); vertical-align: top;
+}
+.wf-help-io-table tr:last-child td { border-bottom: none; }
+.wf-help-io-table .wf-help-key {
+  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px;
+  color: var(--accent); white-space: nowrap;
+}
+.wf-help-io-table .wf-help-type {
+  font-size: 10px; color: var(--text-muted); white-space: nowrap;
+}
+.wf-help-io-table .wf-help-required {
+  display: inline-block; font-size: 9px; font-weight: 600;
+  color: #ff6b6b; background: rgba(255,107,107,0.1);
+  padding: 1px 4px; border-radius: 3px; margin-left: 4px;
+}
+
+.wf-help-tip {
+  display: flex; gap: 8px; margin-bottom: 8px;
+  font-size: 13px; line-height: 1.5; color: var(--text);
+}
+.wf-help-tip:last-child { margin-bottom: 0; }
+.wf-help-tip-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--accent); flex-shrink: 0; margin-top: 7px;
+}
+
+/* ── 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-badge-verified { 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-badge-capability { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 100px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
+.wf-store-badge-cap-network { background: rgba(59,130,246,.1); color: #3B82F6; border: 1px solid rgba(59,130,246,.15); }
+.wf-store-badge-cap-writedb { background: rgba(245,158,11,.1); color: #F59E0B; border: 1px solid rgba(245,158,11,.15); }
+.wf-store-badge-cap-llm { background: rgba(139,92,246,.1); color: #8B5CF6; border: 1px solid rgba(139,92,246,.15); }
+.wf-store-badge-cap-loop { background: rgba(6,182,212,.1); color: #06B6D4; border: 1px solid rgba(6,182,212,.15); }
+.wf-store-badge-cap-readdb { background: rgba(34,197,94,.1); color: #22C55E; border: 1px solid rgba(34,197,94,.15); }
+.wf-store-detail-security-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-card); border-radius: 6px; margin-bottom: 4px; font-size: 12px; color: var(--text-dim); }
+.wf-store-detail-security-sev { font-family: var(--mono); font-size: 9px; padding: 2px 7px; border-radius: 100px; font-weight: 700; text-transform: uppercase; }
+.wf-store-detail-security-sev.critical { background: rgba(239,68,68,.15); color: #EF4444; }
+.wf-store-detail-security-sev.high { background: rgba(249,115,22,.15); color: #F97316; }
+.wf-store-detail-security-sev.medium { background: rgba(234,179,8,.15); color: #EAB308; }
+.wf-store-detail-security-sev.low { background: rgba(148,163,184,.15); color: #94A3B8; }
+.wf-store-detail-security-ok { color: #10B981; font-size: 12px; padding: 8px 10px; background: rgba(16,185,129,.06); border-radius: 6px; }
+.wf-store-detail-stars { display: inline-flex; gap: 2px; cursor: pointer; }
+.wf-store-detail-stars span { font-size: 18px; color: var(--text-muted); transition: color 0.1s; }
+.wf-store-detail-stars span.filled { color: #F59E0B; }
+.wf-store-detail-stars span:hover, .wf-store-detail-stars span:hover ~ span { color: var(--text-muted); }
+.wf-store-report-form { margin-top: 8px; padding: 12px; background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border); }
+.wf-store-report-form select, .wf-store-report-form textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; color: var(--text); font-family: var(--font); font-size: 12px; margin-bottom: 8px; }
+.wf-store-report-form textarea { resize: vertical; min-height: 60px; }
+.wf-store-report-submit { padding: 6px 14px; background: var(--error); color: #fff; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }
+.wf-store-report-submit:hover { filter: brightness(1.1); }
+.wf-store-cap-badges { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
+.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: hidden;
+  animation: wfStoreDetailSlideIn 0.18s ease-out; display: flex; flex-direction: column;
+}
+.wf-store-detail-scroll {
+  overflow-y: auto; flex: 1; min-height: 0;
+}
+.wf-store-detail-scroll::-webkit-scrollbar { width: 4px; }
+.wf-store-detail-scroll::-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,39 +3935,79 @@ 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 */
+/* ── Library collapse chevron ── */
+.wf-library-collapse-btn {
+  width: 28px; height: 28px; border: none; background: none;
+  color: var(--text-muted); cursor: pointer; font-size: 14px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 6px; transition: color 0.15s, background 0.15s;
+  flex-shrink: 0; padding: 0;
+}
+.wf-library-collapse-btn:hover { color: var(--text); background: var(--bg-card); }
+
+/* ── Canvas edge handles ── */
+.wf-edge-handle {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  width: 28px; height: 56px; z-index: 20;
+  background: var(--bg-card); border: 1px solid var(--border);
+  color: var(--text-muted); cursor: pointer;
+  display: none; align-items: center; justify-content: center;
+  font-size: 14px; transition: background 0.15s, color 0.15s;
+}
+.wf-edge-handle:hover { background: var(--bg); color: var(--text); }
+.wf-edge-handle--left {
+  left: 0; border-radius: 0 8px 8px 0; border-left: none;
+}
+.wf-edge-handle--right {
+  right: 0; border-radius: 8px 0 0 8px; border-right: none;
+}
+.wf-edge-handle.visible { display: flex; }
+
+/* ── Toolbar panel toggle group ── */
+.wf-toolbar-spacer { flex: 1; }
+.wf-toolbar-toggle-group {
+  display: flex; background: var(--bg); border-radius: 6px; padding: 2px;
+  border: 1px solid var(--border);
+}
+.wf-toolbar-toggle-group button {
+  width: auto !important; height: 28px !important; padding: 0 10px !important;
+  border: none !important; border-radius: 4px !important;
+  background: transparent !important; color: var(--text-muted) !important;
+  font-size: 11px !important; font-weight: 500 !important; cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.wf-toolbar-toggle-group button.active {
+  background: rgba(0,212,170,0.15) !important; color: var(--accent) !important;
+}
+.wf-toolbar-toggle-group button:hover:not(.active) {
+  color: var(--text) !important;
+}
+
+/* ── Inspector (upgraded) ── */
 .wf-inspector {
   flex-shrink: 0; position: relative;
   display: flex; flex-direction: row;
   background: var(--bg);
-  transition: width 0.25s ease;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   width: 300px;
   overflow: hidden;
   align-self: stretch;
+  border-left: 1px solid var(--border);
 }
 .wf-inspector.collapsed {
-  width: 28px;
+  width: 0; border-left: none;
 }
 .wf-inspector-toggle {
-  width: 28px; flex-shrink: 0; align-self: stretch;
-  border: none; border-left: 1px solid var(--border);
-  background: var(--bg); color: var(--text-muted);
-  cursor: pointer; font-size: 14px; padding: 0;
-  display: flex; align-items: center; justify-content: center;
-  transition: color 0.15s, background 0.15s;
-}
-.wf-inspector-toggle:hover {
-  color: var(--text); background: var(--bg-card);
-}
-.wf-inspector.collapsed .wf-inspector-toggle {
-  border-left: 1px solid var(--border);
+  display: none; /* replaced by edge handle */
 }
 .wf-inspector.collapsed .wf-inspector-content {
   display: none;
 }
 .wf-inspector-content {
   flex: 1; display: flex; flex-direction: column;
-  border-left: 1px solid var(--border);
   overflow-y: auto; min-width: 0; height: 100%;
 }
 .wf-inspector-header {
@@ -3499,11 +4074,11 @@ select:focus { outline: none; border-color: var(--accent); }
 .wf-inspector-result.error { border-color: #e74c3c; }
 /* Responsive */
 @media (max-width: 900px) {
-  .wf-library { display: none; }
+  .wf-library { width: 0; border-right: none; }
   .wf-inspector:not(.collapsed) { width: 240px; }
 }
 @media (max-width: 600px) {
-  .wf-inspector { display: none; }
+  .wf-inspector { width: 0; border-left: none; }
 }
 /* Workflow visualizer light mode */
 [data-theme="light"] .wf-node-label { fill: #001E2B; }
@@ -3552,105 +4127,890 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 .wf-canvas-watermark img { width: 300px; height: 300px; filter: invert(1); }
 [data-theme="light"] .wf-canvas-watermark img { filter: none; }
-</style>
-</head>
-<body>
 
-<!-- Lucide Icons (lucide.dev) — stroke-based, 16×16 -->
-<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
-  <!-- Zap (Embed) -->
-  <symbol id="lg-lightning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
-  </symbol>
-  <!-- Arrow Left Right (Compare) -->
-  <symbol id="lg-arrows" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/>
-  </symbol>
-  <!-- Search -->
-  <symbol id="lg-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
-  </symbol>
-  <!-- Gauge (Benchmark) -->
-  <symbol id="lg-gauge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>
-  </symbol>
-  <!-- Lightbulb (Explore) -->
-  <symbol id="lg-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>
-  </symbol>
-  <!-- Info (About) -->
-  <symbol id="lg-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>
-  </symbol>
-  <!-- Image (Multimodal) -->
-  <symbol id="lg-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
-  </symbol>
-  <!-- Settings (Config) -->
-  <symbol id="lg-config" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>
-  </symbol>
-  <!-- Code (Generate) -->
-  <symbol id="lg-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
-  </symbol>
-  <!-- Palette (Theme) -->
-  <symbol id="lg-palette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>
-  </symbol>
-  <!-- Box (Cube) -->
-  <symbol id="lg-cube" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
-  </symbol>
-  <!-- Message Square (Chat) -->
-  <symbol id="lg-chat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-  </symbol>
-  <!-- Shield -->
-  <symbol id="lg-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 .5-.87l7-4a1 1 0 0 1 1 0l7 4A1 1 0 0 1 20 6z"/>
-  </symbol>
-  <!-- Activity (Pulse) -->
-  <symbol id="lg-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36-3.18-19.64A2 2 0 0 0 10.12 1h-.24a2 2 0 0 0-1.94 1.55L5.18 12H2"/>
-  </symbol>
-</svg>
+/* ── Home Page Styles ── */
 
-<div class="app-shell">
+/* Home Header */
+.home-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 32px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
 
-<!-- Sidebar -->
-<aside class="sidebar">
-  <div class="sidebar-drag-region">
-    <img class="sidebar-logo" id="sidebarLogo" src="/icons/dark/64.png" alt="Vai">
-    <span class="sidebar-title">Vai</span>
-    <button class="sidebar-settings-btn" data-tab="settings" title="Settings"><svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-config"/></svg></button>
-  </div>
-  <nav class="sidebar-nav">
-    <div class="sidebar-nav-group" role="tablist" aria-label="Tools">
-      <div class="sidebar-nav-label" id="nav-tools-label">Tools</div>
-      <button class="tab-btn active" data-tab="embed" role="tab" aria-selected="true" aria-controls="tab-embed" id="tab-btn-embed"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-lightning"/></svg></span><span>Embed</span></button>
-      <button class="tab-btn" data-tab="compare" role="tab" aria-selected="false" aria-controls="tab-compare" id="tab-btn-compare"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-arrows"/></svg></span><span>Compare</span></button>
-      <button class="tab-btn" data-tab="search" role="tab" aria-selected="false" aria-controls="tab-search" id="tab-btn-search"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-search"/></svg></span><span>Search</span></button>
-      <button class="tab-btn" data-tab="multimodal" role="tab" aria-selected="false" aria-controls="tab-multimodal" id="tab-btn-multimodal"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-image"/></svg></span><span>Multimodal</span></button>
-      <button class="tab-btn" data-tab="generate" role="tab" aria-selected="false" aria-controls="tab-generate" id="tab-btn-generate"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-code"/></svg></span><span>Generate</span></button>
-      <button class="tab-btn" data-tab="chat" role="tab" aria-selected="false" aria-controls="tab-chat" id="tab-btn-chat"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-chat"/></svg></span><span>Chat</span></button>
-      <button class="tab-btn" data-tab="workflows" role="tab" aria-selected="false" aria-controls="tab-workflows" id="tab-btn-workflows"><span class="tab-btn-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="3"/><circle cx="19" cy="6" r="3"/><circle cx="19" cy="18" r="3"/><line x1="7.7" y1="10.7" x2="16.3" y2="7.3"/><line x1="7.7" y1="13.3" x2="16.3" y2="16.7"/></svg></span><span>Workflows</span></button>
-    </div>
-    <div class="sidebar-nav-divider"></div>
-    <div class="sidebar-nav-group" role="tablist" aria-label="Learn">
-      <div class="sidebar-nav-label" id="nav-learn-label">Learn</div>
-      <button class="tab-btn" data-tab="benchmark" role="tab" aria-selected="false" aria-controls="tab-benchmark" id="tab-btn-benchmark"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-gauge"/></svg></span><span>Benchmark</span></button>
-      <button class="tab-btn" data-tab="explore" role="tab" aria-selected="false" aria-controls="tab-explore" id="tab-btn-explore"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-bulb"/></svg></span><span>Explore</span></button>
-      <button class="tab-btn" data-tab="about" role="tab" aria-selected="false" aria-controls="tab-about" id="tab-btn-about"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-info"/></svg></span><span>About</span></button>
-    </div>
-  </nav>
-  <div class="sidebar-footer">
-    <div style="display:flex;align-items:center;gap:8px;justify-content:space-between;">
-      <div style="display:flex;align-items:center;gap:5px;">
-        <div class="status-dot" id="statusDot"></div>
-        <span class="status-label" id="statusLabel">Checking...</span>
-      </div>
-      <button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode">🌙</button>
+.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);
+  min-height: 180px;
+}
+
+.home-announcement-card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 32px;
+  text-align: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.home-announcement-card.active {
+  position: relative;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.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);
+}
+
+.home-announcements-restore {
+  text-align: center;
+  margin-top: 12px;
+}
+
+.home-announcements-restore button {
+  background: var(--bg-card);
+  border: 1px dashed var(--border);
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  padding: 8px 16px;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.home-announcements-restore button:hover {
+  color: var(--accent-text);
+  border-color: var(--accent-text);
+  background: var(--bg-surface);
+}
+
+.home-announcement-card.has-bg-image {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.home-announcement-card.has-bg-image::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: inherit;
+  z-index: 0;
+}
+
+.home-announcement-card.has-bg-image > * {
+  position: relative;
+  z-index: 1;
+}
+
+.home-announcement-card.has-bg-image h3,
+.home-announcement-card.has-bg-image p {
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+}
+
+.home-announcement-card.has-bg-image h3 {
+  color: #fff;
+}
+
+.home-announcement-card.has-bg-image p {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.home-announcement-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+  line-height: 1;
+}
+
+/* Section Headers */
+.home-section {
+  margin-bottom: 48px;
+}
+
+.home-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.home-section-header h3 {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--accent-text);
+}
+
+.home-section-header a,
+.home-marketplace-cta {
+  color: var(--blue);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.home-marketplace-cta {
+  background: linear-gradient(135deg, #00ED64, #00C2FF);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.home-marketplace-cta:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(0, 237, 100, 0.3);
+}
+
+.home-section-header a:hover {
+  color: var(--accent);
+}
+
+/* Release Notes Timeline */
+.home-releases-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.home-release-item {
+  display: flex;
+  gap: 16px;
+  padding: 24px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  border-left: 4px solid transparent;
+  border-left-color: #00ED64;
+  background: linear-gradient(90deg, transparent, var(--bg-card) 4px);
+  transition: all 0.2s;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.home-release-item:hover {
+  background: var(--bg-surface);
+  border-color: var(--accent);
+}
+
+.home-release-version {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent-text);
+  margin-bottom: 4px;
+}
+
+.home-release-date {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+.home-release-highlights {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.home-release-highlights li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+
+.home-release-highlights li:before {
+  content: "•";
+  color: var(--accent);
+  font-weight: bold;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+/* Subsections */
+.home-subsection {
+  margin-bottom: 32px;
+}
+
+.home-subsection h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 16px;
+}
+
+.home-subsection-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+/* Workflow Carousels */
+.home-workflows-carousel {
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+  scroll-snap-type: x mandatory;
+}
+
+.home-workflows-carousel::-webkit-scrollbar {
+  height: 6px;
+}
+
+.home-workflows-carousel::-webkit-scrollbar-track {
+  background: var(--bg-surface);
+  border-radius: 3px;
+}
+
+.home-workflows-carousel::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+.home-workflow-card {
+  flex: 0 0 280px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 20px;
+  scroll-snap-align: start;
+  transition: all 0.2s;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.home-workflow-card:hover {
+  background: var(--bg-surface);
+  border-color: var(--accent);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.1);
+}
+
+.home-workflow-card h5 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent-text);
+  margin-bottom: 8px;
+}
+
+.home-workflow-card p {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  margin-bottom: 12px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.home-workflow-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.home-workflow-domain {
+  background: rgba(0, 237, 100, 0.1);
+  color: var(--accent);
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.home-workflow-author {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.home-workflow-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.home-workflow-btn {
+  flex: 1;
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.home-workflow-btn:hover {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
+
+/* Domain Pills */
+.home-domain-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.home-domain-pill {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.home-domain-pill:hover {
+  background: linear-gradient(135deg, #00ED64, #00C2FF);
+  color: white;
+  border-color: transparent;
+  transform: translateY(-1px);
+}
+
+/* Sort Tabs */
+.home-sort-tabs {
+  display: flex;
+  gap: 2px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.home-sort-tab {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.home-sort-tab.active {
+  background: var(--accent);
+  color: white;
+}
+
+.home-sort-tab:hover:not(.active) {
+  background: var(--bg-card);
+  color: var(--text);
+}
+
+/* Community Grid */
+.home-community-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.home-community-empty {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 48px;
+  color: var(--text-muted);
+}
+
+.home-community-empty h4 {
+  font-size: 16px;
+  margin-bottom: 8px;
+  color: var(--text);
+}
+
+/* Quick Actions */
+.home-quick-actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.home-quick-action {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 24px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+  color: var(--text);
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.home-quick-action:hover {
+  background: var(--bg-surface);
+  border-color: var(--accent);
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0, 212, 170, 0.1);
+  color: var(--text);
+}
+
+.home-quick-action svg {
+  width: 24px;
+  height: 24px;
+  color: var(--accent);
+}
+
+.home-quick-action span {
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Footer */
+.home-footer {
+  margin-top: 64px;
+  padding-top: 32px;
+  border-top: 1px solid var(--border);
+  text-align: center;
+}
+
+.home-footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.home-footer-links a {
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: 12px;
+  transition: color 0.2s;
+}
+
+.home-footer-links a:hover {
+  color: var(--accent);
+}
+
+.home-footer-branding {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .home-content {
+    padding: 24px;
+  }
+  
+  .home-quick-actions {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  }
+  
+  .home-community-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .home-header {
+    padding: 16px 24px 12px;
+  }
+  
+  .home-content {
+    padding: 16px;
+  }
+  
+  .home-section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  
+  .home-footer-links {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+</style>
+</head>
+<body>
+
+<!-- Lucide Icons (lucide.dev) — stroke-based, 16×16 -->
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
+  <!-- Zap (Embed) -->
+  <symbol id="lg-lightning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
+  </symbol>
+  <!-- Arrow Left Right (Compare) -->
+  <symbol id="lg-arrows" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/>
+  </symbol>
+  <!-- Search -->
+  <symbol id="lg-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+  </symbol>
+  <!-- Gauge (Benchmark) -->
+  <symbol id="lg-gauge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>
+  </symbol>
+  <!-- Lightbulb (Explore) -->
+  <symbol id="lg-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>
+  </symbol>
+  <!-- Info (About) -->
+  <symbol id="lg-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>
+  </symbol>
+  <!-- Image (Multimodal) -->
+  <symbol id="lg-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
+  </symbol>
+  <!-- Settings (Config) -->
+  <symbol id="lg-config" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>
+  </symbol>
+  <!-- Code (Generate) -->
+  <symbol id="lg-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
+  </symbol>
+  <!-- Palette (Theme) -->
+  <symbol id="lg-palette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>
+  </symbol>
+  <!-- Box (Cube) -->
+  <symbol id="lg-cube" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
+  </symbol>
+  <!-- Message Square (Chat) -->
+  <symbol id="lg-chat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+  </symbol>
+  <!-- Shield -->
+  <symbol id="lg-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 .5-.87l7-4a1 1 0 0 1 1 0l7 4A1 1 0 0 1 20 6z"/>
+  </symbol>
+  <!-- Activity (Pulse) -->
+  <symbol id="lg-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36-3.18-19.64A2 2 0 0 0 10.12 1h-.24a2 2 0 0 0-1.94 1.55L5.18 12H2"/>
+  </symbol>
+  <!-- Brain (Thinking) -->
+  <symbol id="lg-brain" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/>
+  </symbol>
+  <!-- Sparkles -->
+  <symbol id="lg-sparkles" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="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"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>
+  </symbol>
+  <!-- Target (Similarity) -->
+  <symbol id="lg-target" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>
+  </symbol>
+  <!-- Database (Collections) -->
+  <symbol id="lg-database" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>
+  </symbol>
+  <!-- Bot (Models) -->
+  <symbol id="lg-bot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>
+  </symbol>
+  <!-- ArrowUpDown (Rerank) -->
+  <symbol id="lg-arrow-up-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/>
+  </symbol>
+  <!-- Coins (Cost) -->
+  <symbol id="lg-coins" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/>
+  </symbol>
+  <!-- Inbox (Ingest) -->
+  <symbol id="lg-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
+  </symbol>
+  <!-- SearchCode (Vector Search) -->
+  <symbol id="lg-search-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m13 13.5 2-2.5-2-2.5"/><path d="m9 8.5-2 2.5 2 2.5"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+  </symbol>
+</svg>
+
+<div class="app-shell">
+
+<!-- Sidebar -->
+<aside class="sidebar">
+  <div class="sidebar-drag-region">
+    <img class="sidebar-logo" id="sidebarLogo" src="/icons/dark/64.png" alt="Vai">
+    <span class="sidebar-title">Vai</span>
+    <button class="sidebar-collapse-btn" id="sidebarCollapseBtn" onclick="toggleSidebarCollapse()" title="Toggle sidebar"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></button>
+    <button class="sidebar-settings-btn" data-tab="settings" title="Settings"><svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-config"/></svg></button>
+  </div>
+  <nav class="sidebar-nav">
+    <div class="sidebar-nav-group" role="tablist" aria-label="Tools">
+      <div class="sidebar-nav-label" id="nav-tools-label">Tools</div>
+      <button class="tab-btn active" data-tab="home" data-tooltip="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" data-tooltip="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" data-tooltip="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" data-tooltip="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" data-tooltip="Multimodal" role="tab" aria-selected="false" aria-controls="tab-multimodal" id="tab-btn-multimodal"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-image"/></svg></span><span>Multimodal</span></button>
+      <button class="tab-btn" data-tab="generate" data-tooltip="Generate" role="tab" aria-selected="false" aria-controls="tab-generate" id="tab-btn-generate"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-code"/></svg></span><span>Generate</span></button>
+      <button class="tab-btn" data-tab="chat" data-tooltip="Chat" role="tab" aria-selected="false" aria-controls="tab-chat" id="tab-btn-chat"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-chat"/></svg></span><span>Chat</span></button>
+      <button class="tab-btn" data-tab="workflows" data-tooltip="Workflows" role="tab" aria-selected="false" aria-controls="tab-workflows" id="tab-btn-workflows"><span class="tab-btn-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="3"/><circle cx="19" cy="6" r="3"/><circle cx="19" cy="18" r="3"/><line x1="7.7" y1="10.7" x2="16.3" y2="7.3"/><line x1="7.7" y1="13.3" x2="16.3" y2="16.7"/></svg></span><span>Workflows</span></button>
+    </div>
+    <div class="sidebar-nav-divider"></div>
+    <div class="sidebar-nav-group" role="tablist" aria-label="Learn">
+      <div class="sidebar-nav-label" id="nav-learn-label">Learn</div>
+      <button class="tab-btn" data-tab="benchmark" data-tooltip="Benchmark" role="tab" aria-selected="false" aria-controls="tab-benchmark" id="tab-btn-benchmark"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-gauge"/></svg></span><span>Benchmark</span></button>
+      <button class="tab-btn" data-tab="explore" data-tooltip="Explore" role="tab" aria-selected="false" aria-controls="tab-explore" id="tab-btn-explore"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-bulb"/></svg></span><span>Explore</span></button>
+      <button class="tab-btn" data-tab="about" data-tooltip="About" role="tab" aria-selected="false" aria-controls="tab-about" id="tab-btn-about"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-info"/></svg></span><span>About</span></button>
+    </div>
+  </nav>
+  <div class="sidebar-footer">
+    <div style="display:flex;align-items:center;gap:8px;justify-content:space-between;">
+      <div style="display:flex;align-items:center;gap:5px;">
+        <div class="status-dot" id="statusDot"></div>
+        <span class="status-label" id="statusLabel">Checking...</span>
+      </div>
+      <button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode">🌙</button>
     </div>
     <div style="display:flex;align-items:center;justify-content:space-between;">
       <div id="appVersionLabel" style="font-size:10px;color:var(--text-muted);"></div>
@@ -3687,8 +5047,172 @@ 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 class="home-announcements-restore" id="announcementsRestore" style="display: none;">
+        <button onclick="restoreAnnouncements()">Show dismissed announcements</button>
+      </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>
@@ -4492,12 +6016,20 @@ Reranking models rescore initial search results to improve relevance ordering.</
 <!-- ========== WORKFLOWS TAB ========== -->
 <div class="tab-panel" id="tab-workflows" role="tabpanel" aria-labelledby="tab-btn-workflows" tabindex="0">
   <div class="wf-container">
-    <div class="wf-library">
+    <div class="wf-library" id="wfLibrary">
       <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>
+        <button class="wf-library-collapse-btn" onclick="wfToggleLibrary()" title="Collapse library">&#x2039;</button>
+      </div>
+      <div class="wf-library-search-wrap">
+        <input type="text" id="wfLibrarySearch" placeholder="Search workflows..." oninput="wfOnLibrarySearch()">
+        <button class="wf-library-search-clear" id="wfLibrarySearchClear" onclick="wfClearLibrarySearch()">✕</button>
       </div>
       <div class="wf-library-list" id="wfLibraryList">
         <div style="padding: 16px; color: var(--text-muted); font-size: 12px;">Loading...</div>
@@ -4528,7 +6060,15 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <button onclick="wfExportJson()" id="wfExportBtn" disabled title="Export workflow JSON">
           <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2h10M8 14V5M5 8l3-3 3 3"/></svg>
         </button>
+        <span class="wf-toolbar-spacer"></span>
+        <div class="wf-toolbar-toggle-group">
+          <button id="wfToggleLibBtn" class="active" onclick="wfToggleLibrary()">Library</button>
+          <button id="wfTogglePropsBtn" class="active" onclick="wfToggleInspector()">Props</button>
+        </div>
       </div>
+      <!-- Edge handles for collapsed panels -->
+      <div class="wf-edge-handle wf-edge-handle--left" id="wfEdgeHandleLeft" onclick="wfToggleLibrary()" title="Expand library">&#x203A;</div>
+      <div class="wf-edge-handle wf-edge-handle--right" id="wfEdgeHandleRight" onclick="wfToggleInspector()" title="Expand properties">&#x2039;</div>
       <!-- Execution status bar -->
       <div class="wf-exec-status" id="wfExecStatus" style="display:none;">
         <span class="wf-exec-status-dot"></span>
@@ -4541,9 +6081,32 @@ 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>
       <div class="wf-inspector-content">
         <div class="wf-inspector-header" id="wfInspectorHeader">Inspector</div>
         <div class="wf-inspector-body" id="wfInspectorBody">
@@ -4571,6 +6134,14 @@ Reranking models rescore initial search results to improve relevance ordering.</
   </div>
 </div>
 
+<!-- ── Workflow Node Help Modal ── -->
+<div class="wf-help-modal-backdrop" id="wfHelpModalBackdrop" style="display:none;" onclick="wfCloseHelpModal()">
+  <div class="wf-help-modal" onclick="event.stopPropagation()">
+    <div class="wf-help-modal-header" id="wfHelpModalHeader"></div>
+    <div class="wf-help-modal-body" id="wfHelpModalBody"></div>
+  </div>
+</div>
+
 <!-- ── Workflow Input Modal (pre-execution) ── -->
 <div class="wf-input-modal-backdrop" id="wfInputModalBackdrop" style="display:none;" onclick="wfCloseInputModal()">
   <div class="wf-input-modal" onclick="event.stopPropagation()">
@@ -4665,13 +6236,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 +6573,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>
 
@@ -5440,6 +7057,17 @@ function sendTelemetry(event, extra = {}) {
   } catch { /* telemetry should never break the app */ }
 }
 
+function telemetryTimer(event, baseFields = {}) {
+  const start = performance.now();
+  return (extra = {}) => {
+    sendTelemetry(event, {
+      ...baseFields,
+      ...extra,
+      durationMs: Math.round(performance.now() - start),
+    });
+  };
+}
+
 function initTelemetryToggle() {
   const toggle = document.getElementById('settingsTelemetry');
   if (!toggle) return;
@@ -5464,9 +7092,15 @@ async function init() {
   populateModelSelects();
   buildExploreCards();
 
+  // Apply default tab setting
+  const settings = JSON.parse(localStorage.getItem('vai-settings') || '{}');
+  const defaultTab = settings.defaultTab || 'home';
+  switchTab(defaultTab);
+
   // Telemetry
   initTelemetryToggle();
   sendTelemetry('app_launch');
+  sendTelemetry('playground_open');
 }
 
 // ── Tabs ──
@@ -5533,10 +7167,457 @@ function switchTab(tab) {
   if (settingsBtn) settingsBtn.classList.toggle('active', tab === 'settings');
   // Track tab views
   sendTelemetry('tab_view', { tab });
+  sendTelemetry('playground_tab', { 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();
+    
+    // Store total count before filtering
+    homeData.totalAnnouncements = data.announcements.length;
+    
+    // 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 = [];
+    homeData.totalAnnouncements = 0;
+  }
+}
+
+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');
+  const restoreBtn = document.getElementById('announcementsRestore');
+  
+  // Show restore button if any announcements have been dismissed
+  const hasDismissed = (homeData.totalAnnouncements || 0) > homeData.announcements.length;
+  if (restoreBtn) restoreBtn.style.display = hasDismissed ? 'block' : 'none';
+  
+  if (!homeData.announcements.length) {
+    container.style.display = hasDismissed ? 'block' : 'none';
+    carousel.innerHTML = '';
+    dots.innerHTML = '';
+    return;
+  }
+  
+  // Render cards
+  carousel.innerHTML = homeData.announcements.map((ann, i) => {
+    const bgClasses = [
+      'home-announcement-card',
+      i === 0 ? 'active' : '',
+      ann.bg_image ? 'has-bg-image' : ''
+    ].filter(Boolean).join(' ');
+    const bgStyle = ann.bg_image
+      ? `background-image: url('${ann.bg_image}');`
+      : ann.bg_color
+        ? `background: ${ann.bg_color};`
+        : '';
+    return `
+    <div class="${bgClasses}" data-id="${ann.id}" style="${bgStyle}">
+      <button class="home-announcement-dismiss" onclick="dismissAnnouncement('${ann.id}')">×</button>
+      ${ann.icon ? `<div class="home-announcement-icon">${ann.icon}</div>` : ''}
+      ${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) => {
+    if (i === index) {
+      card.classList.add('active');
+    } else {
+      card.classList.remove('active');
+    }
+  });
+  
+  // Update dots
+  document.querySelectorAll('.home-announcement-dot').forEach((dot, i) => {
+    if (i === index) {
+      dot.classList.add('active');
+    } else {
+      dot.classList.remove('active');
+    }
+  });
+  
+  // Reset the rotation timer so we get a full interval after manual clicks
+  resetAnnouncementRotation();
+}
+
+let announcementRotationTimer = null;
+
+function startAnnouncementRotation() {
+  stopAnnouncementRotation();
+  if (homeData.announcements.length <= 1) return;
+  announcementRotationTimer = setInterval(() => {
+    const next = (homeData.currentAnnouncementIndex + 1) % homeData.announcements.length;
+    homeData.currentAnnouncementIndex = next;
+    
+    // Update cards directly (don't call showAnnouncement to avoid resetting timer)
+    document.querySelectorAll('.home-announcement-card').forEach((card, i) => {
+      if (i === next) {
+        card.classList.add('active');
+      } else {
+        card.classList.remove('active');
+      }
+    });
+    document.querySelectorAll('.home-announcement-dot').forEach((dot, i) => {
+      if (i === next) {
+        dot.classList.add('active');
+      } else {
+        dot.classList.remove('active');
+      }
+    });
+  }, 6000);
+}
+
+function stopAnnouncementRotation() {
+  if (announcementRotationTimer) {
+    clearInterval(announcementRotationTimer);
+    announcementRotationTimer = null;
+  }
+}
+
+function resetAnnouncementRotation() {
+  stopAnnouncementRotation();
+  startAnnouncementRotation();
+}
+
+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();
+}
+
+async function restoreAnnouncements() {
+  localStorage.removeItem('vai-dismissed-announcements');
+  // Re-fetch all announcements
+  try {
+    const res = await fetch('/api/home/announcements');
+    const data = await res.json();
+    homeData.announcements = data.announcements;
+    renderAnnouncements();
+  } catch (err) {
+    console.error('Failed to restore announcements:', err);
+  }
+}
+
+function renderReleases() {
+  const container = document.getElementById('releasesTimeline');
+  
+  const releases = homeData.releases.slice(0, 1); // Show only the latest release
+  container.innerHTML = releases.map(release => `
+    <div class="home-release-item">
+      <div>
+        <div class="home-release-version">${release.version}</div>
+        <div class="home-release-date">${new Date(release.date).toLocaleDateString()}</div>
+        <ul class="home-release-highlights">
+          ${release.highlights.map(highlight => `<li>${highlight}</li>`).join('')}
+        </ul>
+      </div>
+    </div>
+  `).join('');
+}
+
+function renderFeaturedWorkflows() {
+  const container = document.getElementById('featuredWorkflows');
+  
+  if (!homeData.featuredWorkflows.length) {
+    container.innerHTML = '<div class="home-community-empty"><h4>Coming Soon</h4><p>Featured workflows launching soon</p></div>';
+    return;
+  }
+  
+  container.innerHTML = homeData.featuredWorkflows.map(workflow => `
+    <div class="home-workflow-card">
+      <h5>${workflow.name || 'Untitled'}</h5>
+      <p>${workflow.description || 'No description available'}</p>
+      <div class="home-workflow-meta">
+        <div class="home-workflow-domain">${workflow.category || 'utility'}</div>
+        <div class="home-workflow-author">by ${workflow.author?.name || 'unknown'}</div>
+      </div>
+      <div class="home-workflow-actions">
+        <button class="home-workflow-btn" onclick="installWorkflow('${workflow.packageName}')">Install</button>
+        <button class="home-workflow-btn" onclick="viewWorkflowDetails('${workflow.packageName}')">Details</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function renderCommunityWorkflows() {
+  const container = document.getElementById('communityWorkflows');
+  
+  if (!homeData.communityWorkflows.length) {
+    container.innerHTML = '<div class="home-community-empty"><h4>Be the First!</h4><p>Publish a workflow to get started</p></div>';
+    return;
+  }
+  
+  let workflows = [...homeData.communityWorkflows];
+
+  // Sort based on current mode
+  switch (homeData.sortMode) {
+    case 'trending':
+      // Use downloads as proxy for trending
+      workflows.sort((a, b) => (b.downloads || 0) - (a.downloads || 0));
+      break;
+    case 'newest':
+      // Sort by name alphabetically as fallback (no publish date available)
+      workflows.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+      break;
+    case 'installs':
+      workflows.sort((a, b) => (b.downloads || 0) - (a.downloads || 0));
+      break;
+  }
+  
+  container.innerHTML = workflows.slice(0, 6).map(workflow => `
+    <div class="home-workflow-card">
+      <h5>${workflow.name || 'Untitled'}</h5>
+      <p>${workflow.description || 'No description available'}</p>
+      <div class="home-workflow-meta">
+        <div class="home-workflow-domain">${workflow.category || 'utility'}</div>
+        <div class="home-workflow-author">by ${workflow.author?.name || 'unknown'}</div>
+      </div>
+      <div class="home-workflow-actions">
+        <button class="home-workflow-btn" onclick="installWorkflow('${workflow.packageName}')">Install</button>
+        <button class="home-workflow-btn" onclick="viewWorkflowDetails('${workflow.packageName}')">Details</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function sortCommunityWorkflows(mode) {
+  homeData.sortMode = mode;
+  
+  // Update tab appearance
+  document.querySelectorAll('.home-sort-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.sort === mode);
+  });
+  
+  renderCommunityWorkflows();
+}
+
+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 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');
+  }
+}
+
 // ── Config ──
 async function loadConfig() {
   try {
@@ -5659,11 +7740,13 @@ window.doEmbed = async function() {
   hideError('embedError');
   const text = document.getElementById('embedInput').value.trim();
   if (!text) { showError('embedError', 'Enter some text to embed'); return; }
-  sendTelemetry('api_call', { endpoint: 'embed', model: document.getElementById('embedModel').value });
+  const _embedModel = document.getElementById('embedModel').value;
+  sendTelemetry('api_call', { endpoint: 'embed', model: _embedModel });
+  const _embedDone = telemetryTimer('playground_embed', { model: _embedModel, inputType: document.getElementById('embedInputType').value || undefined });
 
   setLoading('embedBtn', true);
   try {
-    const model = document.getElementById('embedModel').value;
+    const model = _embedModel;
     const inputType = document.getElementById('embedInputType').value || undefined;
     const dims = document.getElementById('embedDimensions').value;
     const dimensions = dims ? parseInt(dims, 10) : undefined;
@@ -5701,6 +7784,8 @@ window.doEmbed = async function() {
     buildHeatmap(emb, document.getElementById('embedHeatmap'));
 
     document.getElementById('embedResult').classList.add('visible');
+    CostTracker.addOperation('embed', model, data.usage?.total_tokens || 0);
+    _embedDone();
   } catch (err) {
     showError('embedError', err.message);
   } finally {
@@ -5743,6 +7828,7 @@ function buildHeatmap(vec, container) {
 window.doCompare = async function() {
   hideError('compareError');
   sendTelemetry('api_call', { endpoint: 'compare', model: document.getElementById('compareModel').value });
+  const _compareDone = telemetryTimer('playground_similarity', { model: document.getElementById('compareModel').value });
   const a = document.getElementById('compareA').value.trim();
   const b = document.getElementById('compareB').value.trim();
   if (!a || !b) { showError('compareError', 'Enter text in both fields'); return; }
@@ -5825,6 +7911,8 @@ window.doCompare = async function() {
     `;
 
     document.getElementById('compareResult').classList.add('visible');
+    CostTracker.addOperation('compare', data.model || model, data.usage?.total_tokens || 0);
+    _compareDone();
   } catch (err) {
     showError('compareError', err.message);
   } finally {
@@ -5836,6 +7924,7 @@ window.doCompare = async function() {
 window.doSearch = async function(withRerank) {
   hideError('searchError');
   sendTelemetry('api_call', { endpoint: withRerank ? 'rerank' : 'search' });
+  const _searchDone = telemetryTimer(withRerank ? 'playground_rerank' : 'playground_search', { model: document.getElementById('searchEmbedModel').value });
   const query = document.getElementById('searchQuery').value.trim();
   const docsText = document.getElementById('searchDocs').value.trim();
   if (!query || !docsText) { showError('searchError', 'Enter a query and documents'); return; }
@@ -5868,9 +7957,10 @@ window.doSearch = async function(withRerank) {
     const embeddingResults = scores.slice(0, topK);
 
     let rerankResults = null;
+    let rerankData = null;
     if (withRerank) {
       const rerankModel = document.getElementById('searchRerankModel').value;
-      const rerankData = await apiPost('/api/rerank', { query, documents, model: rerankModel, topK });
+      rerankData = await apiPost('/api/rerank', { query, documents, model: rerankModel, topK });
       rerankResults = rerankData.data.map(r => ({
         index: r.index,
         text: documents[r.index],
@@ -5880,6 +7970,12 @@ window.doSearch = async function(withRerank) {
 
     renderSearchResults(embeddingResults, rerankResults);
     document.getElementById('searchResult').classList.add('visible');
+    CostTracker.addOperation('search', embedModel, embedData.usage?.total_tokens || 0);
+    if (withRerank && rerankResults) {
+      const rerankModel = document.getElementById('searchRerankModel').value;
+      CostTracker.addOperation('rerank', rerankModel, rerankData?.usage?.total_tokens || 0);
+    }
+    _searchDone();
   } catch (err) {
     showError('searchError', err.message);
   } finally {
@@ -6533,6 +8629,7 @@ window.doBenchLatency = async function() {
         latencies.push(data.elapsed);
         tokens = data.tokens;
         dims = data.dimensions;
+        CostTracker.addOperation('bench-latency', model, data.tokens || 0);
       } catch (err) {
         document.getElementById(`bench-stats-${mi}`).textContent = 'Error';
         document.getElementById(`bench-bar-${mi}`).classList.remove('running');
@@ -6626,6 +8723,8 @@ window.doBenchRanking = async function() {
 
       rankedA = rankBySimilarity(dataA.embeddings, documents, topK);
       rankedB = rankBySimilarity(dataB.embeddings, documents, topK);
+      CostTracker.addOperation('bench-ranking', modelA, dataA.tokens || 0);
+      CostTracker.addOperation('bench-ranking', modelB, dataB.tokens || 0);
     } else {
       // Rerank mode
       const [dataA, dataB] = await Promise.all([
@@ -6643,6 +8742,8 @@ window.doBenchRanking = async function() {
         text: documents[r.index],
         score: r.relevance_score,
       }));
+      CostTracker.addOperation('bench-ranking', modelA, dataA.usage?.total_tokens || 0);
+      CostTracker.addOperation('bench-ranking', modelB, dataB.usage?.total_tokens || 0);
     }
 
     // Render comparison
@@ -6783,6 +8884,7 @@ window.doBenchQuantization = async function() {
       const start = performance.now();
       const data = await apiPost('/api/embed', body);
       const elapsed = performance.now() - start;
+      CostTracker.addOperation('bench-quantization', model, data.usage?.total_tokens || 0);
 
       const embeddings = data.data.map(d => d.embedding);
       const queryEmbed = embeddings[0];
@@ -7461,6 +9563,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) {
@@ -8335,6 +10446,7 @@ window.doMultimodalCompare = async function() {
     }
 
     document.getElementById('mmResult').classList.add('visible');
+    CostTracker.addOperation('multimodal-compare', data.model || model, usage.total_tokens || 0);
   } catch (err) {
     showError('mmError', err.message);
   } finally {
@@ -8538,6 +10650,7 @@ window.doMultimodalSearch = async function() {
     });
 
     document.getElementById('mmSearchResult').classList.add('visible');
+    CostTracker.addOperation('multimodal-search', model, data.usage?.total_tokens || 0);
   } catch (err) {
     showError('mmSearchError', err.message);
   } finally {
@@ -9436,20 +11549,24 @@ function renderMarkdown(md) {
 /**
  * Tool metadata: icon, label, and a function to summarize the call for the thinking panel.
  */
+function lucideIcon(id, size = 16) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" style="color:var(--accent)"><use href="#${id}"/></svg>`;
+}
+
 const TOOL_META = {
-  vai_query:       { icon: '\uD83D\uDD0D', label: 'RAG Query',          verb: 'Searching',       descFn: a => a.query ? `"${a.query}"` : '' },
-  vai_search:      { icon: '\uD83D\uDD0E', label: 'Vector Search',      verb: 'Searching vectors', descFn: a => a.query ? `"${a.query}"` : '' },
-  vai_rerank:      { icon: '\u2195\uFE0F', label: 'Rerank',             verb: 'Reranking',       descFn: a => a.query ? `${a.documents?.length || '?'} docs for "${a.query}"` : '' },
-  vai_embed:       { icon: '\uD83E\uDDE0', label: 'Embed',              verb: 'Embedding',       descFn: a => a.text ? `"${a.text.slice(0, 60)}${a.text.length > 60 ? '...' : ''}"` : '' },
-  vai_similarity:  { icon: '\uD83C\uDFAF', label: 'Similarity',         verb: 'Comparing',       descFn: a => a.text1 ? `two texts` : '' },
-  vai_collections: { icon: '\uD83D\uDDC4\uFE0F', label: 'Collections',  verb: 'Discovering',     descFn: a => a.db ? `in ${a.db}` : 'available databases' },
-  vai_models:      { icon: '\uD83E\uDD16', label: 'Models',             verb: 'Listing',         descFn: () => 'available models' },
-  vai_topics:      { icon: '\uD83D\uDCDA', label: 'Topics',             verb: 'Browsing',        descFn: () => 'educational topics' },
-  vai_explain:     { icon: '\uD83D\uDCA1', label: 'Explain',            verb: 'Explaining',      descFn: a => a.topic || '' },
-  vai_estimate:    { icon: '\uD83D\uDCB0', label: 'Cost Estimate',      verb: 'Estimating',      descFn: a => a.docs ? `${a.docs} docs` : '' },
-  vai_ingest:      { icon: '\uD83D\uDCE5', label: 'Ingest',             verb: 'Ingesting',       descFn: a => a.source || 'document' },
+  vai_query:       { iconId: 'lg-search',      label: 'RAG Query',      verb: 'Searching',         descFn: a => a.query ? `"${a.query}"` : '' },
+  vai_search:      { iconId: 'lg-search-code',  label: 'Vector Search',  verb: 'Searching vectors', descFn: a => a.query ? `"${a.query}"` : '' },
+  vai_rerank:      { iconId: 'lg-arrow-up-down', label: 'Rerank',        verb: 'Reranking',         descFn: a => a.query ? `${a.documents?.length || '?'} docs for "${a.query}"` : '' },
+  vai_embed:       { iconId: 'lg-lightning',    label: 'Embed',          verb: 'Embedding',         descFn: a => a.text ? `"${a.text.slice(0, 60)}${a.text.length > 60 ? '...' : ''}"` : '' },
+  vai_similarity:  { iconId: 'lg-target',       label: 'Similarity',     verb: 'Comparing',         descFn: a => a.text1 ? `two texts` : '' },
+  vai_collections: { iconId: 'lg-database',     label: 'Collections',    verb: 'Discovering',       descFn: a => a.db ? `in ${a.db}` : 'available databases' },
+  vai_models:      { iconId: 'lg-bot',          label: 'Models',         verb: 'Listing',           descFn: () => 'available models' },
+  vai_topics:      { iconId: 'lg-cube',         label: 'Topics',         verb: 'Browsing',          descFn: () => 'educational topics' },
+  vai_explain:     { iconId: 'lg-bulb',         label: 'Explain',        verb: 'Explaining',        descFn: a => a.topic || '' },
+  vai_estimate:    { iconId: 'lg-coins',        label: 'Cost Estimate',  verb: 'Estimating',        descFn: a => a.docs ? `${a.docs} docs` : '' },
+  vai_ingest:      { iconId: 'lg-inbox',        label: 'Ingest',         verb: 'Ingesting',         descFn: a => a.source || 'document' },
 };
-const DEFAULT_TOOL_META = { icon: '\u2699\uFE0F', label: '', verb: 'Running', descFn: () => '' };
+const DEFAULT_TOOL_META = { iconId: 'lg-config', label: '', verb: 'Running', descFn: () => '' };
 
 /**
  * Create the thinking panel <details> element.
@@ -9462,7 +11579,7 @@ function createThinkingPanel() {
 
   const summary = document.createElement('summary');
   summary.innerHTML =
-    '<span class="thinking-icon">\uD83E\uDDE0</span>' +
+    '<span class="thinking-icon">' + lucideIcon('lg-brain', 14) + '</span>' +
     '<span class="thinking-label">Thinking</span>' +
     '<span class="thinking-count">0</span>' +
     '<span class="thinking-elapsed"></span>' +
@@ -9505,7 +11622,7 @@ function createThinkingPanel() {
 
     const iconDiv = document.createElement('div');
     iconDiv.className = 'thinking-step-icon';
-    iconDiv.textContent = meta.icon;
+    iconDiv.innerHTML = lucideIcon(meta.iconId, 14);
     step.appendChild(iconDiv);
 
     const body = document.createElement('div');
@@ -9560,7 +11677,7 @@ function createThinkingPanel() {
     const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
     summary.querySelector('.thinking-elapsed').textContent = elapsed + 's';
     summary.querySelector('.thinking-label').textContent = 'Thought for ' + elapsed + 's';
-    summary.querySelector('.thinking-icon').textContent = '\u2728';
+    summary.querySelector('.thinking-icon').innerHTML = lucideIcon('lg-sparkles', 14);
     // Mark last step done and collapse
     if (activeStep) {
       activeStep.classList.remove('active');
@@ -9685,6 +11802,7 @@ async function sendChatMessage() {
     let fullText = '';
     let sources = [];
     let thinkingPanel = null;
+    let retrievalCostTracked = false;
 
     while (true) {
       const { done, value } = await reader.read();
@@ -9705,6 +11823,14 @@ async function sendChatMessage() {
 
           if (currentEvent === 'retrieval') {
             typing.textContent = `Retrieved ${data.docs?.length || 0} docs (${data.timeMs}ms)`;
+            // Track embedding cost from retrieval (flag to avoid double-counting with done)
+            if (data.tokens?.embed) {
+              CostTracker.addOperation('chat-embed', 'voyage-4-lite', data.tokens.embed);
+              retrievalCostTracked = true;
+            }
+            if (data.tokens?.rerank) {
+              CostTracker.addOperation('chat-rerank', 'rerank-2.5', data.tokens.rerank);
+            }
           }
 
           if (currentEvent === 'tool_call') {
@@ -9729,6 +11855,24 @@ async function sendChatMessage() {
           }
 
           if (currentEvent === 'done') {
+            // Track costs from done metadata (only if retrieval event didn't already)
+            const meta = data.metadata || {};
+            if (!retrievalCostTracked && meta.tokens?.embed) {
+              CostTracker.addOperation('chat-embed', 'voyage-4-lite', meta.tokens.embed);
+            }
+            if (!retrievalCostTracked && meta.tokens?.rerank) {
+              CostTracker.addOperation('chat-rerank', 'rerank-2.5', meta.tokens.rerank);
+            }
+            // Track LLM generation cost
+            if (meta.tokens?.llmInput || meta.tokens?.llmOutput) {
+              CostTracker.addLLMOperation('chat-llm', meta.llmModel, meta.tokens.llmInput, meta.tokens.llmOutput);
+            }
+            // Agent mode: track tool call tokens from steps/layers
+            if (data.steps) {
+              for (const step of data.steps) {
+                if (step.tokens) CostTracker.addOperation('chat-tool', step.model || 'voyage-4-lite', step.tokens);
+              }
+            }
             // Finalize the thinking panel (collapse, show elapsed)
             if (thinkingPanel) thinkingPanel.finalize();
             // Render accumulated text as markdown for assistant messages
@@ -9935,6 +12079,57 @@ init();
 .bug-success h3{margin:0 0 12px;color:var(--accent-text);font-size:20px}
 .bug-success p{margin:8px 0;color:var(--text-muted)}
 .bug-success code{background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:4px;font-size:12px;color:var(--accent)}
+
+/* ── Cost Dashboard ── */
+#costStatusBar {
+  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
+  background: var(--bg-surface); border-top: 1px solid var(--border);
+  padding: 8px 16px; font-size: 13px; color: var(--text-dim);
+  display: flex; align-items: center; gap: 12px; backdrop-filter: blur(8px);
+  opacity: 0.95; font-family: 'SF Mono', 'Fira Code', monospace;
+}
+#costStatusBar .cost-sep { color: var(--border); }
+#costStatusBar .cost-savings { color: var(--green, #00D4AA); }
+#costStatusBar .cost-more { color: var(--red, #FF6960); }
+#costStatusBar .cost-val { color: var(--accent); font-weight: 600; }
+#costDetailsToggle {
+  margin-left: auto; cursor: pointer; color: var(--accent);
+  background: none; border: 1px solid var(--border); border-radius: 6px;
+  padding: 3px 10px; font-size: 12px; font-family: inherit;
+}
+#costDetailsToggle:hover { background: var(--bg-card); }
+#costDetailPanel {
+  position: fixed; bottom: 40px; left: 0; right: 0; z-index: 9998;
+  background: var(--bg-surface); border-top: 1px solid var(--border);
+  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
+}
+#costDetailPanel.open { max-height: 50vh; overflow-y: auto; }
+#costDetailPanel .cost-panel-inner { padding: 16px 20px; }
+#costDetailPanel table {
+  width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace;
+}
+#costDetailPanel th { text-align: left; color: var(--text-muted); font-weight: 500; padding: 4px 8px; border-bottom: 1px solid var(--border); }
+#costDetailPanel td { padding: 4px 8px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
+#costDetailPanel .cost-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+#costDetailPanel .cost-panel-header h3 { margin: 0; font-size: 14px; color: var(--text); }
+#costResetBtn {
+  background: none; border: 1px solid var(--border); border-radius: 6px;
+  padding: 3px 10px; font-size: 12px; color: var(--text-dim); cursor: pointer; font-family: inherit;
+}
+#costResetBtn:hover { background: var(--bg-card); color: var(--text); }
+.cost-projection { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
+.cost-projection span { color: var(--accent); font-weight: 600; }
+.cost-toast {
+  position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%);
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
+  padding: 8px 16px; font-size: 12px; color: var(--text-dim); z-index: 10000;
+  font-family: 'SF Mono', 'Fira Code', monospace; white-space: nowrap;
+  animation: costToastIn 0.2s ease, costToastOut 0.3s ease 2.7s forwards;
+  pointer-events: none;
+}
+@keyframes costToastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
+@keyframes costToastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(-50%) translateY(-10px); } }
+body { padding-bottom: 44px; }
 </style>
 
 <!-- Bug button moved to sidebar footer -->
@@ -10016,6 +12211,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 +12263,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) {
@@ -10069,51 +12273,238 @@ async function wfLoadLibrary() {
   }
 }
 
+// ── Library Search ──
+let _wfLibSearchTimer = null;
+function wfOnLibrarySearch() {
+  clearTimeout(_wfLibSearchTimer);
+  _wfLibSearchTimer = setTimeout(() => wfRenderLibrary(), 150);
+  const input = document.getElementById('wfLibrarySearch');
+  const clear = document.getElementById('wfLibrarySearchClear');
+  if (input && clear) clear.style.display = input.value ? 'block' : 'none';
+}
+function wfClearLibrarySearch() {
+  const input = document.getElementById('wfLibrarySearch');
+  if (input) { input.value = ''; input.focus(); }
+  const clear = document.getElementById('wfLibrarySearchClear');
+  if (clear) clear.style.display = 'none';
+  wfRenderLibrary();
+}
+
+function wfGetLibSectionStates() {
+  const state = wfGetLayoutState();
+  return (state.library && state.library.sections) || { builtin: true, examples: true, catalog: false, community: false };
+}
+function wfSaveLibSectionState(key, expanded) {
+  const state = wfGetLayoutState();
+  if (!state.library) state.library = { open: true };
+  if (!state.library.sections) state.library.sections = { builtin: true, examples: true, catalog: false, community: false };
+  state.library.sections[key] = expanded;
+  try { localStorage.setItem('vai-workflow-layout', JSON.stringify(state)); } catch(e) {}
+}
+function wfToggleLibSection(key) {
+  const states = wfGetLibSectionStates();
+  const newVal = !states[key];
+  wfSaveLibSectionState(key, newVal);
+  // Toggle UI directly
+  const header = document.querySelector(`.wf-lib-section-header[data-section="${key}"]`);
+  const body = document.querySelector(`.wf-lib-section-body[data-section="${key}"]`);
+  if (header && body) {
+    header.classList.toggle('expanded', newVal);
+    if (newVal) {
+      body.style.maxHeight = body.scrollHeight + 'px';
+      setTimeout(() => { body.style.maxHeight = 'none'; }, 200);
+    } else {
+      body.style.maxHeight = body.scrollHeight + 'px';
+      requestAnimationFrame(() => { body.style.maxHeight = '0px'; });
+    }
+  }
+}
+
 function wfRenderLibrary() {
   const list = document.getElementById('wfLibraryList');
   if (!list) return;
-  if (wfState.workflows.length === 0 && (!wfState.examples || wfState.examples.length === 0)) {
-    list.innerHTML = '<div style="padding:16px;color:var(--text-muted);font-size:12px;">No workflows found</div>';
-    return;
+
+  const searchInput = document.getElementById('wfLibrarySearch');
+  const query = (searchInput ? searchInput.value : '').toLowerCase().trim();
+  const sectionStates = wfGetLibSectionStates();
+
+  function matchesSearch(w) {
+    if (!query) return true;
+    const name = (w.name || '').toLowerCase();
+    const desc = (w.description || '').toLowerCase();
+    return name.includes(query) || desc.includes(query);
   }
 
-  // Built-in templates
-  let html = wfState.workflows.map(w => {
-    const displayName = w.name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+  function renderItem(w, prefix) {
+    const displayName = prefix + w.name.replace(/^@vaicli\/vai-workflow-/, '').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('');
+  }
+
+  function renderSection(key, label, items, prefix) {
+    const filtered = items.filter(matchesSearch);
+    if (filtered.length === 0) return '';
+    const expanded = sectionStates[key] !== false;
+    const chevron = '&#9654;';
+    const itemsHtml = filtered.map(w => renderItem(w, prefix)).join('');
+    return `<div class="wf-library-section" data-section="${key}">
+      <div class="wf-lib-section-header ${expanded ? 'expanded' : ''}" data-section="${key}" onclick="wfToggleLibSection('${key}')">
+        <span class="wf-chevron">${chevron}</span>
+        <span>${label}</span>
+        <span class="wf-section-count">(${filtered.length})</span>
+      </div>
+      <div class="wf-lib-section-body" data-section="${key}" style="max-height:${expanded ? 'none' : '0px'};">
+        ${itemsHtml}
+      </div>
+    </div>`;
+  }
+
+  let html = '';
 
-  // Collapsible examples section
+  // Built-in
+  html += renderSection('builtin', 'Built-in', wfState.workflows, '');
+
+  // Examples
   const examples = wfState.examples || [];
   if (examples.length > 0) {
-    html += `<div class="wf-library-section">
-      <button class="wf-library-section-toggle" onclick="wfToggleExamples(this)">
-        <span class="arrow">&#9654;</span> Examples (${examples.length})
-      </button>
-      <div class="wf-examples-content" style="display:none;">`;
-
-    const categories = ['Retrieval', 'RAG', 'Ingestion', 'Analysis', 'Other'];
-    for (const cat of categories) {
-      const items = examples.filter(e => e.category === cat);
-      if (items.length === 0) continue;
-      html += `<div class="wf-library-category">${cat}</div>`;
-      html += items.map(w => {
-        const displayName = w.name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-        return `<div class="wf-library-item" data-wf-name="${w.name}" onclick="wfSelectWorkflow('${w.name}')">
-          <div class="wf-library-item-name">${displayName}</div>
-          <div class="wf-library-item-desc">${w.description || ''}</div>
-        </div>`;
-      }).join('');
-    }
-    html += '</div></div>';
+    html += renderSection('examples', 'Examples', examples, '');
+  }
+
+  // Official catalog
+  const official = wfState.official || [];
+  html += renderSection('catalog', 'Official Catalog (@vaicli)', official, '✓ ');
+
+  // Community
+  const community = wfState.community || [];
+  html += renderSection('community', 'Community', community, '🌐 ');
+
+  if (!html) {
+    html = '<div style="padding:16px;color:var(--text-muted);font-size:12px;">No workflows found</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';
@@ -10254,7 +12645,20 @@ async function wfRenderWorkflow(definition) {
         nodeHasDeps[stepId] = true;
         nodeHasDependents[depId] = true;
       }
-    });
+    });
+  }
+
+  // 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)
@@ -10267,6 +12671,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 +12747,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;
@@ -10516,22 +12942,200 @@ function wfDrawEdge(fromId, toId, positions) {
   return g;
 }
 
+// ── Panel Layout State ──
+let _wfLayoutSaveTimer = null;
+function wfGetLayoutState() {
+  try {
+    const s = localStorage.getItem('vai-workflow-layout');
+    if (s) return JSON.parse(s);
+  } catch(e) {}
+  return { library: { open: true }, properties: { open: true } };
+}
+function wfSaveLayoutState() {
+  clearTimeout(_wfLayoutSaveTimer);
+  _wfLayoutSaveTimer = setTimeout(() => {
+    const lib = document.getElementById('wfLibrary');
+    const insp = document.getElementById('wfInspector');
+    const existing = wfGetLayoutState();
+    const state = {
+      library: { open: lib ? !lib.classList.contains('collapsed') : true, sections: (existing.library && existing.library.sections) || { builtin: true, examples: true, catalog: false, community: false } },
+      properties: { open: insp ? !insp.classList.contains('collapsed') : true, sections: (existing.properties && existing.properties.sections) || { inputs: true, steps: false, output: false } }
+    };
+    try { localStorage.setItem('vai-workflow-layout', JSON.stringify(state)); } catch(e) {}
+  }, 300);
+}
+// ── Properties Accordion State ──
+function wfGetAccordionStates() {
+  const state = wfGetLayoutState();
+  return (state.properties && state.properties.sections) || { inputs: true, steps: false, output: false };
+}
+function wfSaveAccordionState(key, expanded) {
+  const state = wfGetLayoutState();
+  if (!state.properties) state.properties = { open: true };
+  if (!state.properties.sections) state.properties.sections = { inputs: true, steps: false, output: false };
+  state.properties.sections[key] = expanded;
+  try { localStorage.setItem('vai-workflow-layout', JSON.stringify(state)); } catch(e) {}
+}
+function wfToggleAccordion(key, headerEl) {
+  const body = document.querySelector(`.wf-accordion-body[data-acc="${key}"]`);
+  if (!body) return;
+  const expanded = headerEl.classList.contains('expanded');
+  const newVal = !expanded;
+  headerEl.classList.toggle('expanded', newVal);
+  if (newVal) {
+    body.style.maxHeight = body.scrollHeight + 'px';
+    setTimeout(() => { body.style.maxHeight = 'none'; }, 200);
+  } else {
+    body.style.maxHeight = body.scrollHeight + 'px';
+    requestAnimationFrame(() => { body.style.maxHeight = '0px'; });
+  }
+  wfSaveAccordionState(key, newVal);
+}
+
+function wfSyncPanelUI() {
+  const lib = document.getElementById('wfLibrary');
+  const insp = document.getElementById('wfInspector');
+  const libBtn = document.getElementById('wfToggleLibBtn');
+  const propsBtn = document.getElementById('wfTogglePropsBtn');
+  const leftHandle = document.getElementById('wfEdgeHandleLeft');
+  const rightHandle = document.getElementById('wfEdgeHandleRight');
+  const libCollapsed = lib && lib.classList.contains('collapsed');
+  const inspCollapsed = insp && insp.classList.contains('collapsed');
+  if (libBtn) libBtn.classList.toggle('active', !libCollapsed);
+  if (propsBtn) propsBtn.classList.toggle('active', !inspCollapsed);
+  if (leftHandle) leftHandle.classList.toggle('visible', !!libCollapsed);
+  if (rightHandle) rightHandle.classList.toggle('visible', !!inspCollapsed);
+}
+function wfRestoreLayoutState() {
+  const state = wfGetLayoutState();
+  const lib = document.getElementById('wfLibrary');
+  const insp = document.getElementById('wfInspector');
+  if (lib) lib.classList.toggle('collapsed', !state.library.open);
+  if (insp) insp.classList.toggle('collapsed', !state.properties.open);
+  wfSyncPanelUI();
+}
+
+// ── Library Toggle ──
+function wfToggleLibrary() {
+  const panel = document.getElementById('wfLibrary');
+  if (!panel) return;
+  panel.classList.toggle('collapsed');
+  wfSyncPanelUI();
+  wfSaveLayoutState();
+}
+
 // ── Inspector Toggle ──
 function wfToggleInspector() {
   const panel = document.getElementById('wfInspector');
-  const btn = document.getElementById('wfInspectorToggle');
   if (!panel) return;
   panel.classList.toggle('collapsed');
-  if (btn) btn.innerHTML = panel.classList.contains('collapsed') ? '&lsaquo;' : '&rsaquo;';
+  wfSyncPanelUI();
+  wfSaveLayoutState();
 }
 
 function wfOpenInspector() {
   const panel = document.getElementById('wfInspector');
-  const btn = document.getElementById('wfInspectorToggle');
   if (!panel || !panel.classList.contains('collapsed')) return;
   panel.classList.remove('collapsed');
-  if (btn) btn.innerHTML = '&rsaquo;';
+  wfSyncPanelUI();
+  wfSaveLayoutState();
+}
+
+// ── Sidebar Collapse ──
+function toggleSidebarCollapse() {
+  const sidebar = document.querySelector('.sidebar');
+  if (!sidebar) return;
+  sidebar.classList.toggle('collapsed');
+  // Persist
+  const state = wfGetLayoutState();
+  if (!state.sidebar) state.sidebar = {};
+  state.sidebar.collapsed = sidebar.classList.contains('collapsed');
+  try { localStorage.setItem('vai-workflow-layout', JSON.stringify(state)); } catch(e) {}
+}
+function restoreSidebarState() {
+  const state = wfGetLayoutState();
+  if (state.sidebar && state.sidebar.collapsed) {
+    const sidebar = document.querySelector('.sidebar');
+    if (sidebar) sidebar.classList.add('collapsed');
+  }
 }
+restoreSidebarState();
+
+// ── Keyboard Shortcuts (Workflows tab only) ──
+let _wfLastOpenedPanel = null; // 'library' or 'properties'
+(function() {
+  const origToggleLib = window.wfToggleLibrary;
+  window.wfToggleLibrary = function() {
+    origToggleLib();
+    const lib = document.getElementById('wfLibrary');
+    if (lib && !lib.classList.contains('collapsed')) _wfLastOpenedPanel = 'library';
+  };
+  const origToggleInsp = window.wfToggleInspector;
+  window.wfToggleInspector = function() {
+    origToggleInsp();
+    const insp = document.getElementById('wfInspector');
+    if (insp && !insp.classList.contains('collapsed')) _wfLastOpenedPanel = 'properties';
+  };
+})();
+
+document.addEventListener('keydown', function(e) {
+  // Only active when Workflows tab is visible
+  const wfTab = document.getElementById('tab-workflows');
+  if (!wfTab || wfTab.style.display === 'none' || !wfTab.classList.contains('active')) {
+    // Check if tab-btn-workflows is active instead
+    const wfBtn = document.getElementById('tab-btn-workflows');
+    if (!wfBtn || !wfBtn.classList.contains('active')) return;
+  }
+
+  const mod = e.metaKey || e.ctrlKey;
+  if (!mod && e.key !== 'Escape') return;
+
+  // Cmd/Ctrl + Shift + B → Toggle sidebar
+  if (mod && e.shiftKey && (e.key === 'B' || e.key === 'b')) {
+    e.preventDefault();
+    toggleSidebarCollapse();
+    return;
+  }
+  // Cmd/Ctrl + B → Toggle Library
+  if (mod && !e.shiftKey && (e.key === 'B' || e.key === 'b')) {
+    e.preventDefault();
+    wfToggleLibrary();
+    return;
+  }
+  // Cmd/Ctrl + I → Toggle Properties
+  if (mod && (e.key === 'I' || e.key === 'i')) {
+    e.preventDefault();
+    wfToggleInspector();
+    return;
+  }
+  // Cmd/Ctrl + \ → Collapse both panels
+  if (mod && e.key === '\\') {
+    e.preventDefault();
+    const lib = document.getElementById('wfLibrary');
+    const insp = document.getElementById('wfInspector');
+    if (lib && !lib.classList.contains('collapsed')) { lib.classList.add('collapsed'); }
+    if (insp && !insp.classList.contains('collapsed')) { insp.classList.add('collapsed'); }
+    wfSyncPanelUI();
+    wfSaveLayoutState();
+    return;
+  }
+  // Escape → Close most recently opened panel
+  if (e.key === 'Escape' && !mod) {
+    if (_wfLastOpenedPanel === 'library') {
+      const lib = document.getElementById('wfLibrary');
+      if (lib && !lib.classList.contains('collapsed')) { wfToggleLibrary(); _wfLastOpenedPanel = null; return; }
+    }
+    if (_wfLastOpenedPanel === 'properties') {
+      const insp = document.getElementById('wfInspector');
+      if (insp && !insp.classList.contains('collapsed')) { wfToggleInspector(); _wfLastOpenedPanel = null; return; }
+    }
+    // Fallback: close properties then library
+    const insp = document.getElementById('wfInspector');
+    if (insp && !insp.classList.contains('collapsed')) { wfToggleInspector(); return; }
+    const lib = document.getElementById('wfLibrary');
+    if (lib && !lib.classList.contains('collapsed')) { wfToggleLibrary(); return; }
+  }
+});
 
 // ── Node Selection ──
 function wfSelectNode(stepId) {
@@ -10593,56 +13197,83 @@ function wfUpdateInspector() {
         <div style="font-size:10px;color:var(--text-muted);">Add steps from the Palette tab, then drag between ports to connect them.</div>
       </div>`;
     } else {
-      // Read-only: Description
+      // Read-only: Description (above accordion)
       if (def.description) {
         html += `<div class="wf-inspector-section">
-          <div class="wf-inspector-section-title">Description</div>
           <div style="font-size:12px;color:var(--text);line-height:1.4;">${escapeHtml(def.description)}</div>
         </div>`;
       }
 
-      // Read-only: Inputs
-      if (def.inputs && Object.keys(def.inputs).length > 0) {
-        html += '<div class="wf-inspector-section"><div class="wf-inspector-section-title">Inputs</div>';
+      // Get accordion states from localStorage
+      const accStates = wfGetAccordionStates();
+      const hasDone = !!wfState.executionResults._done;
+
+      // ── INPUTS Accordion ──
+      const inputKeys = def.inputs ? Object.keys(def.inputs) : [];
+      const inputsExpanded = accStates.inputs !== false;
+      html += `<div class="wf-accordion-header ${inputsExpanded ? 'expanded' : ''}" onclick="wfToggleAccordion('inputs', this)">
+        <span class="wf-acc-left"><span class="wf-chevron">&#9654;</span> INPUTS</span>
+        <span class="wf-acc-summary">${inputKeys.length} field${inputKeys.length !== 1 ? 's' : ''}</span>
+      </div>
+      <div class="wf-accordion-body" data-acc="inputs" style="max-height:${inputsExpanded ? 'none' : '0px'};">
+        <div class="wf-accordion-body-inner">`;
+      if (inputKeys.length > 0) {
         for (const [key, spec] of Object.entries(def.inputs)) {
           const req = spec.required ? ' <span style="color:#e74c3c">*</span>' : '';
-          const defVal = spec.default !== undefined ? ` (default: ${spec.default})` : '';
-          html += `<div style="margin-bottom:8px;">
+          html += `<div style="margin-bottom:12px;">
             <div style="font-size:12px;font-weight:600;color:var(--text);">${escapeHtml(key)}${req}</div>
-            <div style="font-size:11px;color:var(--text-muted);">${escapeHtml(spec.description || spec.type || '')}${defVal}</div>
-            <input class="wf-inspector-input" id="wf-input-${key}" placeholder="${escapeHtml(key)}" value="${spec.default !== undefined ? spec.default : ''}">
+            <div style="font-size:10px;color:var(--text-muted);margin-bottom:4px;">${escapeHtml(spec.description || spec.type || '')}</div>
+            <input class="wf-inspector-input" id="wf-input-${key}" placeholder="${escapeHtml(key)}" value="${spec.default !== undefined ? escapeHtml(String(spec.default)) : ''}">
           </div>`;
         }
-        html += '</div>';
+      } else {
+        html += '<div style="font-size:12px;color:var(--text-muted);">No inputs defined</div>';
       }
-
-      // Steps summary
-      html += `<div class="wf-inspector-section">
-        <div class="wf-inspector-section-title">Steps</div>
-        <div style="font-size:12px;color:var(--text);">${def.steps.length} step${def.steps.length !== 1 ? 's' : ''}${wfState.layers ? ' in ' + wfState.layers.length + ' layer' + (wfState.layers.length !== 1 ? 's' : '') : ''}</div>
-      </div>`;
-
-      // Output mapping
-      if (def.output) {
-        html += `<div class="wf-inspector-section">
-          <div class="wf-inspector-section-title">Output</div>
-          <div class="wf-inspector-code">${escapeHtml(JSON.stringify(def.output, null, 2))}</div>
+      html += '</div></div>';
+
+      // ── STEPS Accordion ──
+      const stepCount = def.steps.length;
+      const layerCount = wfState.layers ? wfState.layers.length : 0;
+      const stepsSummary = `${stepCount} step${stepCount !== 1 ? 's' : ''}${layerCount ? ' · ' + layerCount + ' layer' + (layerCount !== 1 ? 's' : '') : ''}`;
+      const stepsExpanded = accStates.steps === true;
+      html += `<div class="wf-accordion-header ${stepsExpanded ? 'expanded' : ''}" onclick="wfToggleAccordion('steps', this)">
+        <span class="wf-acc-left"><span class="wf-chevron">&#9654;</span> STEPS</span>
+        <span class="wf-acc-summary">${stepsSummary}</span>
+      </div>
+      <div class="wf-accordion-body" data-acc="steps" style="max-height:${stepsExpanded ? 'none' : '0px'};">
+        <div class="wf-accordion-body-inner">`;
+      for (const step of def.steps) {
+        const meta = WF_NODE_META[step.tool] || { color: '#666' };
+        const result = wfState.executionResults[step.id];
+        const timeStr = result && result.timeMs != null ? result.timeMs + 'ms' : '—';
+        html += `<div class="wf-step-row">
+          <span class="wf-step-dot" style="background:${meta.color}"></span>
+          <span class="wf-step-name">${escapeHtml(step.name || step.id)}</span>
+          <span class="wf-step-time">${timeStr}</span>
         </div>`;
       }
-    }
+      html += '</div></div>';
 
-    // Execution result (shown in both modes)
-    if (wfState.executionResults._done) {
-      const r = wfState.executionResults._done;
-      const doneJson = JSON.stringify(r.output, null, 2);
-      html += `<div class="wf-inspector-section">
-        <div class="wf-inspector-section-title">Result</div>
-        <div class="wf-inspector-result success">
-          <div style="font-weight:600;margin-bottom:4px;">Completed in ${r.totalTimeMs}ms</div>
-          <div class="wf-inspector-code" style="max-height:150px;overflow:auto;">${escapeHtml(doneJson)}</div>
-        </div>
-        <button class="wf-output-expand-btn" data-expand-step="_done">&#x2922; Expand</button>
-      </div>`;
+      // ── OUTPUT Accordion ──
+      const outputExpanded = hasDone || accStates.output === true;
+      html += `<div class="wf-accordion-header ${outputExpanded ? 'expanded' : ''}" onclick="wfToggleAccordion('output', this)">
+        <span class="wf-acc-left"><span class="wf-chevron">&#9654;</span> OUTPUT</span>
+        <span class="wf-acc-summary"></span>
+      </div>
+      <div class="wf-accordion-body" data-acc="output" style="max-height:${outputExpanded ? 'none' : '0px'};">
+        <div class="wf-accordion-body-inner">`;
+      if (hasDone) {
+        const r = wfState.executionResults._done;
+        const doneJson = JSON.stringify(r.output, null, 2);
+        html += `<div style="font-size:11px;color:var(--text-muted);margin-bottom:6px;">Completed in ${r.totalTimeMs}ms</div>
+          <div class="wf-inspector-code" style="max-height:200px;overflow:auto;color:#40E0FF;">${escapeHtml(doneJson)}</div>
+          <button class="wf-output-expand-btn" data-expand-step="_done">&#x2922; Expand</button>`;
+      } else if (def.output) {
+        html += `<div class="wf-inspector-code" style="color:#40E0FF;">${escapeHtml(JSON.stringify(def.output, null, 2))}</div>`;
+      } else {
+        html += '<div style="font-size:12px;color:var(--text-muted);">Run the workflow to see output</div>';
+      }
+      html += '</div></div>';
     }
 
     body.innerHTML = html;
@@ -10662,10 +13293,13 @@ function wfUpdateInspector() {
 
   let html = '';
 
-  // Tool badge (always shown)
+  // Tool badge (always shown) with help button
   html += `<div class="wf-inspector-section">
     <div class="wf-inspector-section-title">Tool</div>
-    <span class="wf-tool-badge" style="background:${meta.color}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="${meta.icon || WF_FALLBACK_ICON}"/></svg>${meta.label}</span>
+    <div style="display:flex;align-items:center;">
+      <span class="wf-tool-badge" style="background:${meta.color}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="${meta.icon || WF_FALLBACK_ICON}"/></svg>${meta.label}</span>
+      <button class="wf-inspector-help-btn" onclick="wfOpenHelpModal('${step.tool}')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> Help</button>
+    </div>
   </div>`;
 
   if (wfState.builderMode) {
@@ -11323,9 +13957,105 @@ function wfCopyOutput() {
   });
 }
 
-// Close modal on Escape
+// ── Node Help Modal ──
+let _nodeHelpCache = null;
+async function getNodeHelp() {
+  if (_nodeHelpCache) return _nodeHelpCache;
+  try {
+    const res = await fetch('/api/workflows/node-help');
+    const data = await res.json();
+    _nodeHelpCache = data.nodeHelp || {};
+  } catch { _nodeHelpCache = {}; }
+  return _nodeHelpCache;
+}
+
+async function wfOpenHelpModal(tool) {
+  const helpData = await getNodeHelp();
+  const help = helpData[tool];
+  const meta = WF_NODE_META[tool] || { icon: WF_FALLBACK_ICON, label: tool, color: '#666', category: 'unknown' };
+  const categoryLabel = WF_CATEGORY_LABELS[meta.category] || meta.category || 'Unknown';
+
+  const headerEl = document.getElementById('wfHelpModalHeader');
+  const bodyEl = document.getElementById('wfHelpModalBody');
+  const backdrop = document.getElementById('wfHelpModalBackdrop');
+  if (!headerEl || !bodyEl || !backdrop) return;
+
+  // Build header
+  const isEmoji = !meta.icon.includes(' ');
+  const iconHtml = isEmoji
+    ? `<div class="wf-help-icon" style="background:${meta.color}22;font-size:18px;">${meta.icon}</div>`
+    : `<div class="wf-help-icon" style="background:${meta.color}22;color:${meta.color};"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="${meta.icon}"/></svg></div>`;
+
+  headerEl.innerHTML = iconHtml
+    + `<span class="wf-help-title">${escapeHtml(meta.label)}</span>`
+    + `<span class="wf-help-category-badge">${escapeHtml(categoryLabel)}</span>`
+    + `<button class="wf-help-close-btn" onclick="wfCloseHelpModal()" title="Close"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>`;
+
+  // Build body
+  if (!help) {
+    bodyEl.innerHTML = `<div class="wf-help-section"><p>No help content available for this node yet.</p></div>`;
+    backdrop.style.display = 'flex';
+    return;
+  }
+
+  let html = '';
+
+  // Overview
+  if (help.description) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">Overview</div><p>${escapeHtml(help.description)}</p></div>`;
+  }
+
+  // How it Works
+  if (help.howItWorks) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">How it Works</div><p>${escapeHtml(help.howItWorks)}</p></div>`;
+  }
+
+  // Inputs
+  if (help.inputs && help.inputs.length > 0) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">Inputs</div><table class="wf-help-io-table"><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody>`;
+    for (const inp of help.inputs) {
+      const reqBadge = inp.required ? '<span class="wf-help-required">required</span>' : '';
+      html += `<tr><td><span class="wf-help-key">${escapeHtml(inp.key)}</span>${reqBadge}</td><td><span class="wf-help-type">${escapeHtml(inp.type)}</span></td><td>${escapeHtml(inp.desc)}</td></tr>`;
+    }
+    html += '</tbody></table></div>';
+  }
+
+  // Outputs
+  if (help.outputs && help.outputs.length > 0) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">Output</div><table class="wf-help-io-table"><thead><tr><th>Field</th><th>Type</th><th>Description</th></tr></thead><tbody>`;
+    for (const out of help.outputs) {
+      html += `<tr><td><span class="wf-help-key">${escapeHtml(out.key)}</span></td><td><span class="wf-help-type">${escapeHtml(out.type)}</span></td><td>${escapeHtml(out.desc)}</td></tr>`;
+    }
+    html += '</tbody></table></div>';
+  }
+
+  // Tips
+  if (help.tips && help.tips.length > 0) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">Tips</div>`;
+    for (const tip of help.tips) {
+      html += `<div class="wf-help-tip"><span class="wf-help-tip-dot"></span><span>${escapeHtml(tip)}</span></div>`;
+    }
+    html += '</div>';
+  }
+
+  bodyEl.innerHTML = html;
+  backdrop.style.display = 'flex';
+}
+
+function wfCloseHelpModal() {
+  const backdrop = document.getElementById('wfHelpModalBackdrop');
+  if (backdrop) backdrop.style.display = 'none';
+}
+
+// Close modals on Escape
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
+    const helpBackdrop = document.getElementById('wfHelpModalBackdrop');
+    if (helpBackdrop && helpBackdrop.style.display !== 'none') {
+      wfCloseHelpModal();
+      e.preventDefault();
+      return;
+    }
     const backdrop = document.getElementById('wfOutputModalBackdrop');
     if (backdrop && backdrop.style.display !== 'none') {
       wfCloseOutputModal();
@@ -11454,10 +14184,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) {
@@ -11488,6 +14224,7 @@ function wfRenderPalette() {
       html += `<div class="wf-palette-item" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','${item.tool}')" onclick="wfAddNodeFromPalette('${item.tool}')">
         <span class="wf-palette-icon" style="color:${item.color}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="${item.icon || WF_FALLBACK_ICON}"/></svg></span>
         <span class="wf-palette-label">${item.label}</span>
+        <button class="wf-help-trigger" onclick="event.stopPropagation();wfOpenHelpModal('${item.tool}')" title="Help: ${item.label}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></button>
       </div>`;
     }
     html += '</div>';
@@ -11935,7 +14672,442 @@ 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' };
+  wf.verified = true;
+  wf.security = [];
+  wf.rating = null;
+});
+
+function getCapabilityBadges(tools) {
+  if (!Array.isArray(tools)) return [];
+  const badges = [];
+  if (tools.includes('http')) badges.push({ emoji: '🌐', label: 'NETWORK', cls: 'wf-store-badge-cap-network' });
+  if (tools.includes('ingest') || tools.includes('aggregate')) badges.push({ emoji: '💾', label: 'WRITE_DB', cls: 'wf-store-badge-cap-writedb' });
+  if (tools.includes('generate')) badges.push({ emoji: '🤖', label: 'LLM', cls: 'wf-store-badge-cap-llm' });
+  if (tools.includes('loop') || tools.includes('forEach')) badges.push({ emoji: '🔄', label: 'LOOP', cls: 'wf-store-badge-cap-loop' });
+  if (tools.some(t => ['query','search','collections','aggregate'].includes(t))) badges.push({ emoji: '📊', label: 'READ_DB', cls: 'wf-store-badge-cap-readdb' });
+  return badges;
+}
+
+let _wfStoreUserRatings = {};
+
+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.verified ? '<span class="wf-store-badge-verified">✓ VERIFIED</span>' : '') +
+        (wf.installed ? '<span class="wf-store-badge-installed">installed</span>' : '') +
+        `<span class="wf-store-badge-official">${wf.tier==='official' ? '✓ OFFICIAL' : 'COMMUNITY'}</span>`;
+      const capBadges = getCapabilityBadges(wf.tools);
+      const capBadgesHtml = capBadges.length > 0
+        ? `<div class="wf-store-cap-badges">${capBadges.map(b => `<span class="wf-store-badge-capability ${b.cls}">${b.emoji} ${b.label}</span>`).join('')}</div>`
+        : '';
+      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>` : ''}
+        ${capBadgesHtml}
+        <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-scroll">
+    <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>
+      ${(() => {
+        const capBadges = getCapabilityBadges(wf.tools);
+        if (capBadges.length === 0) return '';
+        return `<div class="wf-store-detail-section">
+          <div class="wf-store-detail-label">Capabilities</div>
+          <div style="display:flex;gap:5px;flex-wrap:wrap">${capBadges.map(b => `<span class="wf-store-badge-capability ${b.cls}">${b.emoji} ${b.label}</span>`).join('')}</div>
+        </div>`;
+      })()}
+      ${(() => {
+        const sec = wf.security || [];
+        if (sec.length === 0) return `<div class="wf-store-detail-section"><div class="wf-store-detail-label">Security</div><div class="wf-store-detail-security-ok">✓ No security issues found</div></div>`;
+        return `<div class="wf-store-detail-section"><div class="wf-store-detail-label">Security</div>${sec.map(f => `<div class="wf-store-detail-security-item"><span class="wf-store-detail-security-sev ${f.severity||'low'}">${f.severity||'low'}</span><span>${f.message||f.rule||'Issue found'}</span></div>`).join('')}</div>`;
+      })()}
+      ${wf.verified ? `<div class="wf-store-detail-section"><div class="wf-store-detail-label">Verified</div><div class="wf-store-detail-security-ok">✓ This workflow has passed all validation checks (L1–L4): schema, security audit, quality audit, and capability analysis.</div></div>` : ''}
+      <div class="wf-store-detail-section">
+        <div class="wf-store-detail-label">Rating</div>
+        <div style="display:flex;align-items:center;gap:12px">
+          <span style="font-size:12px;color:var(--text-dim)">${wf.rating != null ? wf.rating.toFixed(1) + ' / 5' : 'Not yet rated'}</span>
+        </div>
+        <div style="margin-top:8px;font-size:11px;color:var(--text-muted)">Rate this workflow:</div>
+        <div class="wf-store-detail-stars" id="wfStoreRateStars">
+          ${[1,2,3,4,5].map(i => `<span onclick="_wfStoreUserRatings['${wf.name}']=${i};document.querySelectorAll('#wfStoreRateStars span').forEach((s,j)=>s.className=j<${i}?'filled':'')" class="${(_wfStoreUserRatings[wf.name]||0)>=i?'filled':''}">★</span>`).join('')}
+        </div>
+      </div>
+      <div class="wf-store-detail-section">
+        <button class="wf-store-detail-btn wf-store-detail-btn-secondary" style="flex:none;width:auto;padding:6px 14px;font-size:11px" onclick="document.getElementById('wfStoreReportForm').style.display=document.getElementById('wfStoreReportForm').style.display==='none'?'block':'none'">⚑ Report</button>
+        <div id="wfStoreReportForm" class="wf-store-report-form" style="display:none">
+          <select id="wfStoreReportReason"><option value="">Select reason...</option><option value="malicious">Malicious</option><option value="broken">Broken</option><option value="low quality">Low quality</option><option value="spam">Spam</option></select>
+          <textarea id="wfStoreReportComment" placeholder="Optional comment..."></textarea>
+          <button class="wf-store-report-submit" onclick="document.getElementById('wfStoreReportForm').style.display='none';const t=document.createElement('div');t.style.cssText='position:fixed;bottom:20px;right:20px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:12px 20px;color:var(--text);font-size:13px;z-index:9999;animation:wfStoreDetailFadeIn .2s';t.textContent='✓ Report submitted';document.body.appendChild(t);setTimeout(()=>t.remove(),3000)">Submit Report</button>
+        </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>
+  </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() {
+  wfRestoreLayoutState();
   wfLoadLibrary();
   wfInitPan();
 }
@@ -12067,5 +15239,241 @@ let wfInitialized = false;
 })();
 </script>
 
+<!-- Cost Dashboard -->
+<div id="costDetailPanel">
+  <div class="cost-panel-inner">
+    <div class="cost-panel-header">
+      <h3>💰 Cost Dashboard</h3>
+      <button id="costResetBtn" onclick="CostTracker.reset()">Reset Session</button>
+    </div>
+    <table id="costOpsTable">
+      <thead><tr><th>Time</th><th>Operation</th><th>Model</th><th>Tokens</th><th>Cost</th><th>If v4-large</th><th>If OpenAI</th></tr></thead>
+      <tbody></tbody>
+    </table>
+    <div class="cost-projection" id="costProjection"></div>
+  </div>
+</div>
+<div id="costStatusBar">
+  <span>💰 Session: <span class="cost-val" id="costTotal">$0.000000</span></span>
+  <span class="cost-sep">│</span>
+  <span><span id="costTokens">0</span> tokens</span>
+  <span class="cost-sep">│</span>
+  <span><span id="costOps">0</span> ops</span>
+  <span class="cost-sep">│</span>
+  <span>LLM: <span class="cost-val" id="costLLM">$0.000000</span> (<span id="costLLMIn">0</span>in/<span id="costLLMOut">0</span>out)</span>
+  <span class="cost-sep">│</span>
+  <span>If symmetric: <span id="costSymmetric">$0.000000</span> <span id="costSymDelta"></span></span>
+  <span class="cost-sep">│</span>
+  <span>If OpenAI: <span id="costCompetitor">$0.000000</span> <span id="costCompDelta"></span></span>
+  <button id="costDetailsToggle" onclick="CostTracker.togglePanel()">Details ▾</button>
+</div>
+
+<script>
+(function() {
+  const PRICING = {
+    'voyage-4-large': 0.12, 'voyage-4': 0.06, 'voyage-4-lite': 0.02,
+    'voyage-code-3': 0.18, 'voyage-finance-2': 0.12, 'voyage-law-2': 0.12,
+    'rerank-2.5': 0.05, 'rerank-2.5-lite': 0.02,
+    'voyage-multimodal-3': 0.12,
+  };
+  const LARGE_PRICE = 0.12;
+  const OPENAI_PRICE = 0.13;
+
+  // LLM pricing: per-million tokens { input, output }
+  const LLM_PRICING = {
+    'claude-sonnet-4-5-20250929': { input: 3.00, output: 15.00 },
+    'claude-opus-4-20250514': { input: 15.00, output: 75.00 },
+    'claude-3-5-haiku-20241022': { input: 0.80, output: 4.00 },
+    'claude-sonnet-4': { input: 3.00, output: 15.00 },
+    'claude-opus-4': { input: 15.00, output: 75.00 },
+    'gpt-4o': { input: 2.50, output: 10.00 },
+    'gpt-4o-mini': { input: 0.15, output: 0.60 },
+    'gpt-4-turbo': { input: 10.00, output: 30.00 },
+    'o1': { input: 15.00, output: 60.00 },
+    'o1-mini': { input: 3.00, output: 12.00 },
+    'o3-mini': { input: 1.10, output: 4.40 },
+  };
+
+  function getLLMPrice(model) {
+    if (!model) return { input: 0, output: 0 };
+    if (LLM_PRICING[model]) return LLM_PRICING[model];
+    // Fuzzy match
+    for (const k of Object.keys(LLM_PRICING)) {
+      if (model.includes(k) || k.includes(model)) return LLM_PRICING[k];
+    }
+    // Match by prefix (e.g. "claude-sonnet-4-5" matches the full versioned key)
+    for (const k of Object.keys(LLM_PRICING)) {
+      const base = k.replace(/-\d{8}$/, '');
+      if (model.includes(base) || base.includes(model)) return LLM_PRICING[k];
+    }
+    return { input: 0, output: 0 }; // Unknown model: free (don't inflate costs)
+  }
+
+  function llmCostForTokens(model, inputTokens, outputTokens) {
+    const prices = getLLMPrice(model);
+    return (prices.input / 1_000_000) * inputTokens + (prices.output / 1_000_000) * outputTokens;
+  }
+
+  function getPrice(model) {
+    if (PRICING[model] != null) return PRICING[model];
+    // fuzzy match
+    for (const k of Object.keys(PRICING)) {
+      if (model.includes(k) || k.includes(model)) return PRICING[k];
+    }
+    return 0.06; // default fallback
+  }
+
+  function costForTokens(pricePerMillion, tokens) {
+    return (pricePerMillion / 1_000_000) * tokens;
+  }
+
+  const session = {
+    operations: [], totalCost: 0, totalTokens: 0, totalOperations: 0,
+    symmetricCost: 0, competitorCost: 0,
+    llmCost: 0, llmInputTokens: 0, llmOutputTokens: 0,
+  };
+
+  window.CostTracker = {
+    addOperation(op, model, tokens) {
+      if (!tokens || tokens <= 0) return;
+      const price = getPrice(model);
+      const cost = costForTokens(price, tokens);
+      const largeCost = costForTokens(LARGE_PRICE, tokens);
+      const competitorCost = costForTokens(OPENAI_PRICE, tokens);
+
+      session.operations.push({
+        timestamp: new Date(), operation: op, model, tokens, cost,
+        hypotheticalLargeCost: largeCost, hypotheticalCompetitorCost: competitorCost,
+      });
+      session.totalCost += cost;
+      session.totalTokens += tokens;
+      session.totalOperations++;
+      session.symmetricCost += largeCost;
+      session.competitorCost += competitorCost;
+
+      this._updateUI();
+      this._showToast(op, model, tokens, cost, largeCost);
+    },
+
+    addLLMOperation(op, model, inputTokens, outputTokens) {
+      if ((!inputTokens || inputTokens <= 0) && (!outputTokens || outputTokens <= 0)) return;
+      const cost = llmCostForTokens(model, inputTokens || 0, outputTokens || 0);
+      const totalTokens = (inputTokens || 0) + (outputTokens || 0);
+
+      session.operations.push({
+        timestamp: new Date(), operation: op, model: model || 'unknown',
+        tokens: totalTokens, cost, isLLM: true,
+        inputTokens: inputTokens || 0, outputTokens: outputTokens || 0,
+        hypotheticalLargeCost: 0, hypotheticalCompetitorCost: 0,
+      });
+      session.totalCost += cost;
+      session.totalTokens += totalTokens;
+      session.totalOperations++;
+      session.llmCost += cost;
+      session.llmInputTokens += (inputTokens || 0);
+      session.llmOutputTokens += (outputTokens || 0);
+
+      this._updateUI();
+      this._showLLMToast(op, model, inputTokens || 0, outputTokens || 0, cost);
+    },
+
+    reset() {
+      session.operations.length = 0;
+      session.totalCost = 0; session.totalTokens = 0; session.totalOperations = 0;
+      session.symmetricCost = 0; session.competitorCost = 0;
+      session.llmCost = 0; session.llmInputTokens = 0; session.llmOutputTokens = 0;
+      this._updateUI();
+    },
+
+    getProjectedMonthlyCost(queriesPerMonth) {
+      if (session.totalOperations === 0) return { actual: 0, symmetric: 0, competitor: 0 };
+      const avgCost = session.totalCost / session.totalOperations;
+      const avgSym = session.symmetricCost / session.totalOperations;
+      const avgComp = session.competitorCost / session.totalOperations;
+      return { actual: avgCost * queriesPerMonth, symmetric: avgSym * queriesPerMonth, competitor: avgComp * queriesPerMonth };
+    },
+
+    togglePanel() {
+      const panel = document.getElementById('costDetailPanel');
+      const btn = document.getElementById('costDetailsToggle');
+      const isOpen = panel.classList.toggle('open');
+      btn.textContent = isOpen ? 'Details ▴' : 'Details ▾';
+      if (isOpen && typeof sendTelemetry === 'function') sendTelemetry('cost_panel_viewed');
+    },
+
+    _updateUI() {
+      document.getElementById('costTotal').textContent = '$' + session.totalCost.toFixed(6);
+      document.getElementById('costTokens').textContent = session.totalTokens.toLocaleString();
+      document.getElementById('costOps').textContent = session.totalOperations;
+      document.getElementById('costLLM').textContent = '$' + session.llmCost.toFixed(6);
+      document.getElementById('costLLMIn').textContent = session.llmInputTokens.toLocaleString();
+      document.getElementById('costLLMOut').textContent = session.llmOutputTokens.toLocaleString();
+      document.getElementById('costSymmetric').textContent = '$' + session.symmetricCost.toFixed(6);
+      document.getElementById('costCompetitor').textContent = '$' + session.competitorCost.toFixed(6);
+
+      // Deltas
+      const symDelta = document.getElementById('costSymDelta');
+      const compDelta = document.getElementById('costCompDelta');
+      if (session.totalCost > 0) {
+        const symPct = ((session.symmetricCost - session.totalCost) / session.totalCost * 100).toFixed(0);
+        const compPct = ((session.competitorCost - session.totalCost) / session.totalCost * 100).toFixed(0);
+        symDelta.textContent = symPct > 0 ? `(+${symPct}%)` : `(${symPct}%)`;
+        symDelta.className = symPct > 0 ? 'cost-more' : 'cost-savings';
+        compDelta.textContent = compPct > 0 ? `(+${compPct}%)` : `(${compPct}%)`;
+        compDelta.className = compPct > 0 ? 'cost-more' : 'cost-savings';
+      } else {
+        symDelta.textContent = ''; compDelta.textContent = '';
+      }
+
+      // Table
+      const tbody = document.querySelector('#costOpsTable tbody');
+      tbody.innerHTML = session.operations.map(o => {
+        const tokensDisplay = o.isLLM
+          ? `${o.inputTokens.toLocaleString()}in / ${o.outputTokens.toLocaleString()}out`
+          : o.tokens.toLocaleString();
+        const largeCostDisplay = o.isLLM ? 'n/a' : `$${o.hypotheticalLargeCost.toFixed(6)}`;
+        const compCostDisplay = o.isLLM ? 'n/a' : `$${o.hypotheticalCompetitorCost.toFixed(6)}`;
+        return `<tr${o.isLLM ? ' style="background:rgba(180,90,242,0.08)"' : ''}>
+          <td>${o.timestamp.toLocaleTimeString()}</td>
+          <td>${o.operation}</td>
+          <td>${o.model}</td>
+          <td>${tokensDisplay}</td>
+          <td>$${o.cost.toFixed(6)}</td>
+          <td>${largeCostDisplay}</td>
+          <td>${compCostDisplay}</td>
+        </tr>`;
+      }).join('');
+
+      // Projection
+      const proj = this.getProjectedMonthlyCost(1_000_000);
+      const projEl = document.getElementById('costProjection');
+      if (session.totalOperations > 0) {
+        projEl.innerHTML = `📊 Projected at 1M queries/month: <span>$${proj.actual.toFixed(2)}</span> actual │ $${proj.symmetric.toFixed(2)} symmetric │ $${proj.competitor.toFixed(2)} OpenAI`;
+      } else {
+        projEl.innerHTML = '';
+      }
+    },
+
+    _showToast(op, model, tokens, cost, largeCost) {
+      const saved = largeCost > 0 ? Math.round((1 - cost / largeCost) * 100) : 0;
+      const savingsText = saved > 0 ? ` — saved ${saved}% vs v4-large` : '';
+      const toast = document.createElement('div');
+      toast.className = 'cost-toast';
+      toast.textContent = `✅ ${op} — $${cost.toFixed(6)} (${model}, ${tokens.toLocaleString()} tokens)${savingsText}`;
+      document.body.appendChild(toast);
+      setTimeout(() => toast.remove(), 3100);
+    },
+
+    _showLLMToast(op, model, inputTokens, outputTokens, cost) {
+      const toast = document.createElement('div');
+      toast.className = 'cost-toast';
+      toast.textContent = `🤖 ${op} — $${cost.toFixed(6)} (${model || 'LLM'}, ${inputTokens.toLocaleString()}in/${outputTokens.toLocaleString()}out)`;
+      document.body.appendChild(toast);
+      setTimeout(() => toast.remove(), 3100);
+    }
+  };
+})();
+</script>
+
 </body>
 </html>