@vendian/cli 0.0.36 → 0.0.37

package/cli-wrapper.mjs

@@ -2363,7 +2363,7 @@ function buildLocalServeEventStreamArgs({ agentsDir: agentsDir2 = "./agents", co
 }
 
 // src/version.js
-var CLI_VERSION = true ? "0.0.36" : process.env.npm_package_version || "0.0.0-dev";
+var CLI_VERSION = true ? "0.0.37" : process.env.npm_package_version || "0.0.0-dev";
 
 // src/dev-server.js
 var __dirname = path8.dirname(fileURLToPath(import.meta.url));

package/dev-ui/css/app.css

@@ -0,0 +1,259 @@
+:root {
+  --bg: #ffffff;
+  --bg-page: #f8f9fb;
+  --bg-card: #ffffff;
+  --bg-elevated: #f4f5f7;
+  --bg-hover: #f0f1f3;
+  --bg-active: #e8eaed;
+  --border: #e3e5e8;
+  --border-hover: #cdd0d5;
+  --border-focus: #6366f1;
+  --text: #1a1d24;
+  --text-secondary: #555d6b;
+  --text-dim: #8a919e;
+  --accent: #6366f1;
+  --accent-solid: #6366f1;
+  --accent-bg: rgba(99,102,241,0.06);
+  --accent-border: rgba(99,102,241,0.18);
+  --green: #10b981;
+  --green-bg: rgba(16,185,129,0.07);
+  --green-border: rgba(16,185,129,0.2);
+  --red: #ef4444;
+  --red-bg: rgba(239,68,68,0.06);
+  --red-border: rgba(239,68,68,0.18);
+  --yellow: #f59e0b;
+  --yellow-bg: rgba(245,158,11,0.07);
+  --yellow-border: rgba(245,158,11,0.2);
+  --blue: #3b82f6;
+  --blue-bg: rgba(59,130,246,0.06);
+  --blue-border: rgba(59,130,246,0.2);
+  --radius: 10px;
+  --radius-lg: 14px;
+  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
+  --shadow-lg: 0 4px 16px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.04);
+  --transition: 0.15s ease;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: var(--font); background: var(--bg-page); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
+::selection { background: rgba(99,102,241,0.12); }
+
+/* ─── Header ─── */
+.header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--bg-card); position: sticky; top: 0; z-index: 50; min-height: 54px; }
+.header-left { display: flex; align-items: center; gap: 12px; }
+.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -0.4px; color: var(--text); }
+.logo svg { width: 26px; height: 26px; }
+.header-right { display: flex; align-items: center; gap: 14px; }
+.conn-badge { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); padding: 5px 12px; border-radius: 20px; background: var(--bg-elevated); border: 1px solid var(--border); }
+.conn-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); transition: background 0.3s; }
+.conn-badge .dot.ok { background: var(--green); box-shadow: 0 0 5px rgba(16,185,129,0.3); }
+.env-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-border); cursor: pointer; transition: all var(--transition); }
+.env-badge:hover { background: rgba(99,102,241,0.1); }
+
+/* ─── Layout ─── */
+.layout { display: flex; flex: 1; overflow: hidden; }
+
+/* ─── Sidebar ─── */
+.sidebar { width: 200px; min-width: 200px; border-right: 1px solid var(--border); background: var(--bg-card); display: flex; flex-direction: column; padding: 14px 0; gap: 1px; }
+.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 0 8px; border-radius: 7px; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition); user-select: none; }
+.nav-item:hover { color: var(--text); background: var(--bg-hover); }
+.nav-item.active { color: var(--accent); background: var(--accent-bg); font-weight: 600; }
+.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
+.nav-item.active svg { opacity: 1; }
+.nav-sep { height: 1px; background: var(--border); margin: 8px 16px; }
+.nav-label { font-size: 10px; font-weight: 700; color: var(--text-dim); padding: 8px 16px 3px; text-transform: uppercase; letter-spacing: 0.7px; margin: 0 8px; }
+
+/* ─── Main ─── */
+.main { flex: 1; overflow-y: auto; padding: 28px 36px; max-height: calc(100vh - 54px); }
+
+/* ─── Page ─── */
+.page { display: none; animation: fadeIn 0.15s ease; }
+.page.active { display: block; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
+.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
+.page-title { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: var(--text); }
+.page-desc { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
+
+/* ─── Folder Groups ─── */
+.folder-group { margin-bottom: 28px; }
+.folder-header { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
+.folder-header svg { width: 13px; height: 13px; opacity: 0.5; }
+
+/* ─── Cards / Grid ─── */
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
+.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; transition: all var(--transition); cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow); }
+.card:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
+.card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 3px; }
+.card-title { font-size: 14px; font-weight: 650; color: var(--text); }
+.card-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
+.card-dot.ready { background: var(--green); }
+.card-dot.running { background: var(--blue); animation: pulse 1.5s infinite; }
+.card-dot.error { background: var(--red); }
+.card-dot.unknown { background: #d1d5db; }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
+.card-sub { font-size: 11.5px; font-family: var(--mono); color: var(--text-dim); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.card-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
+.card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
+.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 5px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); }
+.tag svg { width: 11px; height: 11px; }
+.tag.trigger { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
+.tag.cred { color: #92400e; border-color: var(--yellow-border); background: var(--yellow-bg); }
+.tag.ok { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.tag.missing { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
+
+/* ─── Buttons ─── */
+.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 7px; font-size: 12.5px; font-weight: 600; border: none; cursor: pointer; transition: all var(--transition); font-family: var(--font); }
+.btn-primary { background: var(--accent-solid); color: white; }
+.btn-primary:hover { background: #4f46e5; box-shadow: 0 3px 10px rgba(99,102,241,0.2); }
+.btn-ghost { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); }
+.btn-ghost:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg-hover); }
+.btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
+.btn-danger:hover { background: rgba(239,68,68,0.1); }
+.btn-sm { padding: 6px 10px; font-size: 11.5px; border-radius: 5px; }
+.btn-success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
+
+/* ─── Form ─── */
+.input { width: 100%; padding: 10px 13px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 13.5px; font-family: var(--font); outline: none; }
+.input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(99,102,241,0.07); }
+
+/* ─── Validate ─── */
+.val-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 20px; }
+.val-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); }
+.val-card:hover { border-color: var(--border-hover); background: var(--bg-hover); }
+.val-card.selected { border-color: var(--accent); background: var(--accent-bg); }
+.val-card .vc-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 1px solid var(--border); flex-shrink: 0; font-size: 15px; }
+.val-card .vc-info { flex: 1; min-width: 0; }
+.val-card .vc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.val-card .vc-path { font-size: 11px; color: var(--text-dim); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
+.val-card .vc-badge { font-size: 15px; flex-shrink: 0; }
+.val-results { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
+.val-results-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
+.val-results-head h3 { font-size: 13px; font-weight: 650; }
+.val-results-body { padding: 16px 20px; max-height: 380px; overflow-y: auto; }
+.val-section { margin-bottom: 14px; }
+.val-section:last-child { margin-bottom: 0; }
+.val-section-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
+.val-section-title.errors { color: var(--red); }
+.val-section-title.warnings { color: var(--yellow); }
+.val-section-title.success { color: var(--green); }
+.val-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; margin-bottom: 3px; border-radius: 7px; font-size: 12.5px; line-height: 1.5; }
+.val-item.error { background: var(--red-bg); color: #991b1b; border: 1px solid var(--red-border); }
+.val-item.warning { background: var(--yellow-bg); color: #78350f; border: 1px solid var(--yellow-border); }
+.val-item.success { background: var(--green-bg); color: #065f46; border: 1px solid var(--green-border); }
+.val-item .vi-icon { flex-shrink: 0; padding-top: 1px; }
+
+/* ─── Serve ─── */
+.serve-controls { display: flex; align-items: center; gap: 12px; }
+.serve-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 7px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); }
+.serve-status .dot { width: 9px; height: 9px; border-radius: 50%; }
+.serve-select-bar { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 14px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
+.serve-select-bar:hover { background: var(--bg-hover); }
+.serve-select-bar input { width: 16px; height: 16px; accent-color: var(--accent-solid); cursor: pointer; }
+.serve-select-bar .count { margin-left: auto; font-weight: 400; color: var(--text-dim); font-size: 12px; }
+.serve-folder { margin-bottom: 20px; }
+.serve-folder-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
+.serve-folder-title svg { width: 12px; height: 12px; opacity: 0.5; }
+.serve-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
+.serve-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 12px; user-select: none; box-shadow: var(--shadow); }
+.serve-card:hover { border-color: var(--border-hover); }
+.serve-card.checked { border-color: var(--accent); background: var(--accent-bg); }
+.serve-card input { width: 17px; height: 17px; accent-color: var(--accent-solid); cursor: pointer; flex-shrink: 0; }
+.serve-card .sc-info { flex: 1; min-width: 0; }
+.serve-card .sc-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.serve-card .sc-path { font-size: 11px; color: var(--text-dim); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
+.serve-card .sc-triggers { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; }
+
+/* Live agent grid */
+.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 20px; }
+.live-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); }
+.live-card .lc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
+.live-card .lc-dot.ready { background: var(--green); }
+.live-card .lc-dot.preparing { background: var(--yellow); animation: pulse 1.5s infinite; }
+.live-card .lc-dot.running { background: var(--blue); animation: pulse 1.2s infinite; }
+.live-card .lc-dot.error { background: var(--red); }
+.live-card .lc-dot.unknown { background: #d1d5db; }
+.live-card .lc-info { flex: 1; min-width: 0; }
+.live-card .lc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.live-card .lc-detail { font-size: 11px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.live-card .lc-detail.err { color: var(--red); }
+.live-card .lc-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.2px; flex-shrink: 0; border: 1px solid; }
+.live-card .lc-badge.ready { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
+.live-card .lc-badge.preparing { background: var(--yellow-bg); color: #92400e; border-color: var(--yellow-border); }
+.live-card .lc-badge.running { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border); }
+.live-card .lc-badge.error { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
+.live-card .lc-badge.unknown { background: var(--bg-elevated); color: var(--text-dim); border-color: var(--border); }
+
+/* Activity feed */
+.feed { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
+.feed-title { font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; padding: 12px 18px 8px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
+.feed-items { max-height: 280px; overflow-y: auto; padding: 6px 18px; }
+.feed-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
+.feed-item:last-child { border-bottom: none; }
+.feed-time { font-size: 10.5px; font-family: var(--mono); color: var(--text-dim); white-space: nowrap; min-width: 52px; padding-top: 1px; }
+.feed-icon { flex-shrink: 0; font-size: 11px; padding-top: 2px; }
+.feed-body { flex: 1; min-width: 0; }
+.feed-agent { font-weight: 600; font-size: 11.5px; color: var(--text); }
+.feed-msg { color: var(--text-secondary); margin-top: 1px; font-size: 12px; }
+.feed-msg.err { color: var(--red); }
+.feed-msg.ok { color: var(--green); }
+
+/* ─── Logs ─── */
+.log-box { background: #1e1e2e; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.8; max-height: 480px; overflow-y: auto; color: #cdd6f4; box-shadow: var(--shadow); }
+.log-box .line { padding: 1px 0; }
+.log-box .line.err { color: #f38ba8; }
+.log-box .line.warn { color: #fab387; }
+.log-box .line.info { color: #89b4fa; }
+
+/* ─── Settings ─── */
+.settings-section { margin-bottom: 28px; }
+.settings-section-title { font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
+.conn-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 560px; box-shadow: var(--shadow); }
+.conn-summary .cs-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); }
+.conn-summary .cs-dot { width: 8px; height: 8px; border-radius: 50%; }
+.conn-summary .cs-dot.green { background: var(--green); }
+.conn-summary .cs-dot.red { background: var(--red); }
+.settings-list { display: grid; gap: 8px; max-width: 560px; }
+.settings-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: all var(--transition); box-shadow: var(--shadow); cursor: pointer; }
+.settings-card:hover { border-color: var(--border-hover); }
+.settings-card.is-active { border-color: var(--green-border); background: var(--green-bg); }
+.settings-card.needs-login { border-color: var(--border); opacity: 0.7; }
+.settings-card .sc-left { flex: 1; min-width: 0; }
+.settings-card .sc-label { font-size: 13.5px; font-weight: 650; }
+.settings-card .sc-url { font-size: 11px; font-family: var(--mono); color: var(--text-dim); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.settings-card .sc-email { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
+.settings-card .sc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+.settings-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 4px; white-space: nowrap; border: 1px solid; }
+.settings-badge.active { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
+.settings-badge.signed-in { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border); }
+.settings-badge.disconnected { background: var(--bg-elevated); color: var(--text-dim); border-color: var(--border); }
+
+/* ─── Empty ─── */
+.empty { text-align: center; padding: 48px 20px; }
+.empty-icon { font-size: 36px; margin-bottom: 14px; opacity: 0.35; }
+.empty h3 { font-size: 16px; font-weight: 650; margin-bottom: 6px; }
+.empty p { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; max-width: 320px; margin-left: auto; margin-right: auto; line-height: 1.5; }
+
+/* ─── Modal ─── */
+.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.25); z-index:200; align-items:center; justify-content:center; backdrop-filter: blur(3px); }
+.modal-bg.open { display:flex; }
+.modal { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; width:400px; max-width:90vw; box-shadow: var(--shadow-lg); }
+.modal h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
+.modal .modal-desc { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 16px; }
+.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
+
+/* ─── Scrollbar ─── */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
+
+@media (max-width: 840px) {
+  .sidebar { width: 52px; min-width: 52px; }
+  .nav-item span { display: none; }
+  .nav-item { justify-content: center; padding: 9px; margin: 0 5px; }
+  .nav-label { display: none; }
+  .main { padding: 16px; }
+  .grid, .serve-grid, .live-grid { grid-template-columns: 1fr; }
+}

package/dev-ui/index.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Vendian</title>
+<link rel="stylesheet" href="css/app.css">
+</head>
+<body>
+
+<div class="header">
+  <div class="header-left">
+    <div class="logo">
+      <svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="7" fill="#6366f1"/><path d="M7 20L14 8L21 20H7Z" fill="white" fill-opacity="0.95"/></svg>
+      <span>Vendian</span>
+    </div>
+  </div>
+  <div class="header-right">
+    <div class="conn-badge"><span class="dot" id="conn-dot"></span><span id="conn-text">Idle</span></div>
+    <div class="env-badge" id="env-badge">—</div>
+  </div>
+</div>
+
+<div class="layout">
+  <aside class="sidebar">
+    <div class="nav-label">Workspace</div>
+    <div class="nav-item active" data-page="agents">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="2"/><rect x="3" y="14" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/></svg>
+      <span>Agents</span>
+    </div>
+    <div class="nav-item" data-page="validate">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="9"/></svg>
+      <span>Validate</span>
+    </div>
+    <div class="nav-sep"></div>
+    <div class="nav-label">Runtime</div>
+    <div class="nav-item" data-page="serve">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="6,3 20,12 6,21"/></svg>
+      <span>Serve</span>
+    </div>
+    <div class="nav-item" data-page="logs">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+      <span>Logs</span>
+    </div>
+    <div class="nav-sep"></div>
+    <div class="nav-label">Account</div>
+    <div class="nav-item" data-page="settings">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+      <span>Settings</span>
+    </div>
+  </aside>
+
+  <div class="main">
+    <!-- ═══ Agents ═══ -->
+    <div class="page active" id="page-agents">
+      <div class="page-header">
+        <div><div class="page-title">Agents</div><div class="page-desc" id="agents-path">Scanning...</div></div>
+        <button class="btn btn-primary" id="btn-new-agent">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          New Agent
+        </button>
+      </div>
+      <div id="agents-content"></div>
+      <div class="empty" id="agents-empty" style="display:none">
+        <div class="empty-icon">📦</div>
+        <h3>No agents found</h3>
+        <p>Create your first agent or check that your agents directory has manifest.yaml files.</p>
+        <button class="btn btn-primary" id="btn-empty-create">Create Agent</button>
+      </div>
+    </div>
+
+    <!-- ═══ Validate ═══ -->
+    <div class="page" id="page-validate">
+      <div class="page-header">
+        <div><div class="page-title">Validate</div><div class="page-desc">Check manifests, credentials, imports, and deployment readiness.</div></div>
+        <button class="btn btn-primary" id="btn-validate-all">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="9"/></svg>
+          Validate All
+        </button>
+      </div>
+      <div class="val-grid" id="validate-grid"></div>
+      <div id="validate-results"></div>
+    </div>
+
+    <!-- ═══ Serve ═══ -->
+    <div class="page" id="page-serve">
+      <div class="page-header">
+        <div><div class="page-title">Local Serve</div><div class="page-desc">Run agents locally, connected to the Vendian backend.</div></div>
+        <div class="serve-controls">
+          <div class="serve-status"><span class="dot" id="serve-dot" style="background:#d1d5db"></span><span id="serve-label">Stopped</span></div>
+          <button class="btn btn-primary" id="btn-start">Start</button>
+          <button class="btn btn-danger" id="btn-stop" style="display:none">Stop</button>
+        </div>
+      </div>
+
+      <div id="serve-picker-section">
+        <div class="serve-select-bar" id="serve-select-bar">
+          <input type="checkbox" id="cb-all" checked>
+          <label for="cb-all" style="cursor:pointer">Select all</label>
+          <span class="count" id="serve-count">0</span>
+        </div>
+        <div id="serve-picker"></div>
+      </div>
+
+      <div id="serve-dashboard" style="display:none">
+        <div id="serve-activity-text" style="font-size:12.5px;color:var(--text-secondary);margin-bottom:14px"></div>
+        <div class="live-grid" id="live-cards"></div>
+        <div class="feed">
+          <div class="feed-title">Activity</div>
+          <div class="feed-items" id="feed-items"><div style="color:var(--text-dim);font-size:12px;padding:10px 0">Waiting for events...</div></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ Logs ═══ -->
+    <div class="page" id="page-logs">
+      <div class="page-header">
+        <div><div class="page-title">Raw Logs</div><div class="page-desc">Event stream from the serve process.</div></div>
+        <button class="btn btn-ghost" id="btn-clear-logs">Clear</button>
+      </div>
+      <div class="log-box" id="all-logs"><div class="line" data-placeholder="1" style="color:#6c7086">Start serving to see logs here.</div></div>
+    </div>
+
+    <!-- ═══ Settings ═══ -->
+    <div class="page" id="page-settings">
+      <div class="page-header"><div><div class="page-title">Settings</div><div class="page-desc">Backend connections and authentication.</div></div></div>
+      <div class="conn-summary" id="conn-summary"><div class="cs-item"><span class="cs-dot"></span>Checking...</div></div>
+      <div class="settings-section">
+        <div class="settings-section-title">Environments</div>
+        <div class="settings-list" id="backends-list"></div>
+      </div>
+      <div class="settings-section">
+        <div class="settings-section-title">Sign In via Terminal</div>
+        <div style="font-size:12.5px;color:var(--text-secondary);margin-bottom:8px;max-width:520px">Run the login command to authenticate, then click an environment above to activate it.</div>
+        <div style="font-family:var(--mono);font-size:12px;padding:10px 14px;background:var(--bg-elevated);border-radius:7px;border:1px solid var(--border);color:var(--text-secondary);max-width:520px;display:inline-block">vendian login --backend <span style="color:var(--accent);font-weight:600">&lt;local|dev|staging|prod&gt;</span></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Create Agent Modal -->
+<div class="modal-bg" id="modal-bg">
+  <div class="modal">
+    <h3>Create Agent</h3>
+    <div class="modal-desc">Scaffold a new agent with manifest, agent.py, and requirements.</div>
+    <input class="input" id="create-input" placeholder="Agent name (e.g. Invoice Processor)">
+    <div class="modal-actions">
+      <button class="btn btn-ghost" id="btn-modal-cancel">Cancel</button>
+      <button class="btn btn-primary" id="btn-modal-create">Create</button>
+    </div>
+  </div>
+</div>
+
+<script type="module" src="js/app.js"></script>
+</body>
+</html>

package/dev-ui/js/agents.js

@@ -0,0 +1,48 @@
+import { state, esc, groupByFolder, statusDotClass } from './state.js';
+
+export function renderAgents() {
+  const content = document.getElementById('agents-content');
+  const empty = document.getElementById('agents-empty');
+  if (!state.agents.length) { content.innerHTML = ''; empty.style.display = ''; return; }
+  empty.style.display = 'none';
+
+  const groups = groupByFolder(state.agents);
+  const sortedFolders = Object.keys(groups).sort();
+  let html = '';
+
+  for (const folder of sortedFolders) {
+    const folderAgents = groups[folder];
+    html += `<div class="folder-group">`;
+    if (sortedFolders.length > 1 || folder !== '.') {
+      html += `<div class="folder-header"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>${esc(folder)}</div>`;
+    }
+    html += `<div class="grid">`;
+    for (const a of folderAgents) {
+      const tc = a.triggerCount || (a.triggers || []).length;
+      const cc = a.credentialCount || (a.credentials || []).length;
+      html += `<div class="card" data-path="${esc(a.path)}">
+        <div class="card-top">
+          <div class="card-title">${esc(a.displayName || a.name)}</div>
+          <div class="card-dot ${statusDotClass(a.runtimeStatus)}"></div>
+        </div>
+        <div class="card-sub">${esc(a.relativePath)}</div>
+        ${a.description ? `<div class="card-desc">${esc(a.description)}</div>` : '<div class="card-desc" style="color:var(--text-dim);font-style:italic">No description</div>'}
+        <div class="card-meta">
+          ${tc ? `<span class="tag trigger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>${tc} trigger${tc>1?'s':''}</span>` : ''}
+          ${cc ? `<span class="tag cred"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>${cc} cred${cc>1?'s':''}</span>` : ''}
+          ${a.hasAgentPy ? '<span class="tag ok">agent.py</span>' : '<span class="tag missing">no agent.py</span>'}
+          ${a.version ? `<span class="tag">v${esc(a.version)}</span>` : ''}
+        </div>
+      </div>`;
+    }
+    html += `</div></div>`;
+  }
+  content.innerHTML = html;
+
+  // Delegate click
+  content.querySelectorAll('.card[data-path]').forEach(card => {
+    card.addEventListener('click', () => {
+      window.dispatchEvent(new CustomEvent('navigate', { detail: { page: 'validate', path: card.dataset.path } }));
+    });
+  });
+}

package/dev-ui/js/app.js

@@ -0,0 +1,97 @@
+import { state, api } from './state.js';
+import { renderAgents } from './agents.js';
+import { populateValidateGrid, runValidateAll, triggerValidateAgent } from './validate.js';
+import { populateServePicker, toggleAll, startServe, stopServe, setServing, clearLogs } from './serve.js';
+import { loadAuth } from './settings.js';
+
+// ─── Navigation ───
+function nav(page) {
+  document.querySelectorAll('.nav-item').forEach(n => n.classList.toggle('active', n.dataset.page === page));
+  document.querySelectorAll('.page').forEach(p => p.classList.toggle('active', p.id === 'page-' + page));
+}
+
+document.querySelectorAll('.nav-item').forEach(el => {
+  el.addEventListener('click', () => nav(el.dataset.page));
+});
+
+window.addEventListener('navigate', (e) => {
+  const { page, path } = e.detail;
+  nav(page);
+  if (page === 'validate' && path) triggerValidateAgent(path);
+});
+
+// ─── Load agents ───
+async function loadAgents() {
+  try {
+    const d = await api('/agents');
+    state.agents = d.agents || [];
+    document.getElementById('agents-path').textContent = d.agentsDir || '';
+    renderAgents();
+    populateValidateGrid();
+    populateServePicker();
+  } catch (e) { console.error(e); }
+}
+
+// ─── Status polling ───
+async function checkStatus() {
+  try {
+    const d = await api('/status');
+    setServing(d.serving);
+    const dot = document.getElementById('conn-dot');
+    const text = document.getElementById('conn-text');
+    if (d.serving && d.connected) { dot.classList.add('ok'); text.textContent = 'Connected'; }
+    else if (d.serving) { dot.classList.add('ok'); text.textContent = d.activity || 'Starting...'; }
+    else { dot.classList.remove('ok'); text.textContent = 'Idle'; }
+  } catch {
+    document.getElementById('conn-dot').classList.remove('ok');
+    document.getElementById('conn-text').textContent = 'Offline';
+  }
+}
+
+// ─── Create agent modal ───
+const modalBg = document.getElementById('modal-bg');
+const createInput = document.getElementById('create-input');
+
+document.getElementById('btn-new-agent').addEventListener('click', openModal);
+document.getElementById('btn-empty-create').addEventListener('click', openModal);
+document.getElementById('btn-modal-cancel').addEventListener('click', closeModal);
+document.getElementById('btn-modal-create').addEventListener('click', createAgent);
+modalBg.addEventListener('click', (e) => { if (e.target === modalBg) closeModal(); });
+createInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') createAgent();
+  if (e.key === 'Escape') closeModal();
+});
+
+function openModal() { modalBg.classList.add('open'); createInput.value = ''; setTimeout(() => createInput.focus(), 80); }
+function closeModal() { modalBg.classList.remove('open'); }
+
+async function createAgent() {
+  const name = createInput.value.trim();
+  if (!name) return;
+  const d = await api('/create', { method: 'POST', body: JSON.stringify({ name }) });
+  if (d.ok) { closeModal(); await loadAgents(); }
+  else alert(d.error || 'Failed');
+}
+
+// ─── Wire up serve buttons ───
+document.getElementById('btn-start').addEventListener('click', startServe);
+document.getElementById('btn-stop').addEventListener('click', stopServe);
+document.getElementById('btn-clear-logs').addEventListener('click', clearLogs);
+document.getElementById('btn-validate-all').addEventListener('click', runValidateAll);
+document.getElementById('env-badge').addEventListener('click', () => nav('settings'));
+
+// Select all
+const cbAll = document.getElementById('cb-all');
+cbAll.addEventListener('change', () => toggleAll(cbAll.checked));
+document.getElementById('serve-select-bar').addEventListener('click', (e) => {
+  if (e.target.tagName === 'INPUT') return;
+  cbAll.checked = !cbAll.checked;
+  toggleAll(cbAll.checked);
+});
+
+// ─── Init ───
+loadAgents();
+loadAuth();
+checkStatus();
+setInterval(checkStatus, 4000);
+setInterval(loadAgents, 8000);

package/dev-ui/js/serve.js

@@ -0,0 +1,228 @@
+import { state, api, esc, groupByFolder, formatTime } from './state.js';
+
+// ─── Picker ───
+let userSelections = null; // null = all selected (default), Set = explicit selections
+
+export function populateServePicker() {
+  const container = document.getElementById('serve-picker');
+  const countEl = document.getElementById('serve-count');
+  if (!state.agents.length) {
+    container.innerHTML = '<div style="color:var(--text-dim);font-size:13px">No agents found.</div>';
+    countEl.textContent = '0';
+    return;
+  }
+  countEl.textContent = `${state.agents.length} agent${state.agents.length === 1 ? '' : 's'}`;
+
+  // Determine which are selected
+  const isSelected = (path) => userSelections === null || userSelections.has(path);
+
+  const groups = groupByFolder(state.agents);
+  const sortedFolders = Object.keys(groups).sort();
+  let html = '';
+
+  for (const folder of sortedFolders) {
+    html += `<div class="serve-folder">`;
+    if (sortedFolders.length > 1 || folder !== '.') {
+      html += `<div class="serve-folder-title"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>${esc(folder)}</div>`;
+    }
+    html += `<div class="serve-grid">`;
+    for (const a of groups[folder]) {
+      const tc = a.triggerCount || (a.triggers || []).length;
+      const checked = isSelected(a.path);
+      html += `<div class="serve-card${checked ? ' checked' : ''}" data-path="${esc(a.path)}">
+        <input type="checkbox" class="agent-cb" ${checked ? 'checked' : ''} value="${esc(a.path)}">
+        <div class="sc-info">
+          <div class="sc-name">${esc(a.displayName || a.name)}</div>
+          <div class="sc-path">${esc(a.relativePath)}</div>
+          ${tc ? `<div class="sc-triggers">${tc} trigger${tc > 1 ? 's' : ''}</div>` : ''}
+        </div>
+      </div>`;
+    }
+    html += `</div></div>`;
+  }
+  container.innerHTML = html;
+
+  // Wire up clicks
+  container.querySelectorAll('.serve-card').forEach(card => {
+    card.addEventListener('click', (e) => {
+      if (e.target.tagName === 'INPUT') return;
+      const cb = card.querySelector('input');
+      cb.checked = !cb.checked;
+      card.classList.toggle('checked', cb.checked);
+      syncSelectAll();
+    });
+    card.querySelector('input').addEventListener('change', () => {
+      card.classList.toggle('checked', card.querySelector('input').checked);
+      syncSelectAll();
+    });
+  });
+
+  syncSelectAll();
+}
+
+function syncSelectAll() {
+  const all = document.querySelectorAll('.agent-cb');
+  const allChecked = [...all].every(c => c.checked);
+  document.getElementById('cb-all').checked = allChecked;
+  // Track user state
+  if (allChecked) {
+    userSelections = null; // all selected = default
+  } else {
+    userSelections = new Set([...all].filter(c => c.checked).map(c => c.value));
+  }
+}
+
+export function toggleAll(checked) {
+  document.querySelectorAll('.agent-cb').forEach(cb => { cb.checked = checked; });
+  document.querySelectorAll('.serve-card').forEach(card => { card.classList.toggle('checked', checked); });
+  userSelections = checked ? null : new Set();
+}
+
+export function getSelectedPaths() {
+  return [...document.querySelectorAll('.agent-cb:checked')].map(cb => cb.value);
+}
+
+// ─── Controls ───
+export async function startServe() {
+  const selected = getSelectedPaths();
+  if (!selected.length) { alert('Select at least one agent.'); return; }
+  const body = {};
+  if (selected.length < state.agents.length) {
+    body.agentsDir = commonParent(selected);
+  }
+  const d = await api('/serve/start', { method: 'POST', body: JSON.stringify(body) });
+  if (d.ok) setServing(true);
+  else alert(d.error || 'Failed to start');
+}
+
+export async function stopServe() {
+  await api('/serve/stop', { method: 'POST' });
+  setServing(false);
+}
+
+export function setServing(v) {
+  state.isServing = v;
+  const dot = document.getElementById('serve-dot');
+  const label = document.getElementById('serve-label');
+  const btnStart = document.getElementById('btn-start');
+  const btnStop = document.getElementById('btn-stop');
+  const picker = document.getElementById('serve-picker-section');
+  const dashboard = document.getElementById('serve-dashboard');
+  if (v) {
+    dot.style.background = 'var(--green)'; dot.style.boxShadow = '0 0 6px rgba(16,185,129,0.3)';
+    label.textContent = 'Running';
+    btnStart.style.display = 'none'; btnStop.style.display = '';
+    picker.style.display = 'none'; dashboard.style.display = '';
+    startPoll();
+  } else {
+    dot.style.background = '#d1d5db'; dot.style.boxShadow = 'none';
+    label.textContent = 'Stopped';
+    btnStart.style.display = ''; btnStop.style.display = 'none';
+    picker.style.display = ''; dashboard.style.display = 'none';
+    stopPoll();
+  }
+}
+
+// ─── Live Dashboard ───
+function startPoll() { if (!state.pollTimer) state.pollTimer = setInterval(pollState, 800); pollState(); }
+function stopPoll() { if (state.pollTimer) { clearInterval(state.pollTimer); state.pollTimer = null; } }
+
+async function pollState() {
+  try {
+    const d = await api('/serve/state');
+    renderLiveCards(d.agents || []);
+    renderFeed(d.recentActivity || []);
+    if (d.activity) {
+      const el = document.getElementById('serve-activity-text');
+      if (el) el.textContent = d.activity;
+    }
+  } catch {}
+  // Raw logs
+  try {
+    const d = await api('/logs?since=' + state.logOffset);
+    if (d.logs?.length) {
+      d.logs.forEach(l => appendLogLine(l));
+      state.logOffset = d.total;
+    }
+  } catch {}
+}
+
+function renderLiveCards(agents) {
+  const container = document.getElementById('live-cards');
+  if (!agents.length) { container.innerHTML = '<div style="color:var(--text-dim);font-size:12px">Discovering...</div>'; return; }
+  container.innerHTML = agents.map(a => {
+    const s = a.status || 'unknown';
+    const label = s === 'ready' || s === 'completed' ? 'Ready' : s === 'running' ? 'Running' : s === 'preparing' ? 'Preparing' : s === 'error' ? 'Error' : 'Offline';
+    const cls = s === 'ready' || s === 'completed' ? 'ready' : s === 'running' ? 'running' : s === 'preparing' ? 'preparing' : s === 'error' ? 'error' : 'unknown';
+    const detail = a.errorMessage ? (a.errorMessage.length > 70 ? a.errorMessage.slice(0,70)+'…' : a.errorMessage) : a.progressMessage || a.relativePath;
+    const detailCls = a.errorMessage ? 'lc-detail err' : 'lc-detail';
+    return `<div class="live-card"><div class="lc-dot ${cls}"></div><div class="lc-info"><div class="lc-name">${esc(a.name)}</div><div class="${detailCls}">${esc(detail)}</div></div><div class="lc-badge ${cls}">${label}</div></div>`;
+  }).join('');
+}
+
+function renderFeed(items) {
+  const container = document.getElementById('feed-items');
+  if (!items.length) return;
+  container.innerHTML = items.slice(-20).map(e => {
+    const time = formatTime(e.timestamp);
+    const agent = esc(e._agentName || '');
+    const msg = fmtMsg(e);
+    const icon = fmtIcon(e);
+    const cls = e.level === 'error' || (e.eventType === 'job_completed' && e.success === false) ? 'feed-msg err' : (e.eventType === 'job_completed' && e.success !== false) ? 'feed-msg ok' : 'feed-msg';
+    return `<div class="feed-item"><span class="feed-time">${time}</span><span class="feed-icon">${icon}</span><div class="feed-body"><div class="feed-agent">${agent}</div><div class="${cls}">${esc(msg)}</div></div></div>`;
+  }).join('');
+  container.scrollTop = container.scrollHeight;
+}
+
+function fmtMsg(e) {
+  switch (e.eventType) {
+    case 'job_started': return 'Started a new job';
+    case 'job_completed': return e.success === false ? `Failed — ${e.message||'error'}` : 'Completed';
+    case 'agent_prepare_started': return 'Preparing...';
+    case 'agent_prepare_progress': return e.message || 'Preparing...';
+    case 'agent_prepare_completed': return e.success === false ? (e.message||'Setup failed') : 'Ready';
+    case 'error': return e.message || 'Error';
+    default: return e.message || e.eventType || '';
+  }
+}
+
+function fmtIcon(e) {
+  if (e.eventType === 'job_started') return '▶';
+  if (e.eventType === 'job_completed' && e.success !== false) return '✔';
+  if (e.eventType === 'job_completed' || e.eventType === 'error' || e.level === 'error') return '✖';
+  if (e.eventType?.includes('prepare')) return '⚙';
+  return '•';
+}
+
+export function appendLogLine(text) {
+  const box = document.getElementById('all-logs');
+  if (box.children.length === 1 && box.children[0].dataset.placeholder) box.innerHTML = '';
+  const div = document.createElement('div');
+  const cls = /error|traceback|exception/i.test(text) ? ' err' : /warn/i.test(text) ? ' warn' : /connected|ready|registered/i.test(text) ? ' info' : '';
+  div.className = 'line' + cls;
+  try {
+    const p = JSON.parse(text);
+    div.textContent = `[${formatTime(p.timestamp)}] ${p.type||'event'} ${p.message||p.relativePath||''}`;
+  } catch { div.textContent = text; }
+  box.appendChild(div);
+  if (box.children.length > 1000) box.removeChild(box.firstChild);
+  box.scrollTop = box.scrollHeight;
+}
+
+export function clearLogs() {
+  document.getElementById('all-logs').innerHTML = '<div class="line" data-placeholder="1" style="color:#6c7086">Cleared.</div>';
+}
+
+// ─── Helpers ───
+function commonParent(paths) {
+  if (!paths.length) return '';
+  const sep = paths[0].includes('/') ? '/' : '\\';
+  const split = paths.map(p => p.split(/[\\/]/));
+  const first = split[0];
+  let common = [];
+  for (let i = 0; i < first.length; i++) {
+    if (split.every(s => s[i] === first[i])) common.push(first[i]);
+    else break;
+  }
+  return common.join(sep);
+}

package/dev-ui/js/settings.js

@@ -0,0 +1,84 @@
+import { state, api, esc, capitalize } from './state.js';
+
+export async function loadAuth() {
+  try {
+    state.authData = await api('/auth');
+    renderEnvBadge();
+    renderSettings();
+  } catch {}
+}
+
+function renderEnvBadge() {
+  const badge = document.getElementById('env-badge');
+  const url = state.authData.apiUrl || '';
+  if (!url) { badge.textContent = '?'; return; }
+  if (url.includes('localhost')) badge.textContent = 'LOCAL';
+  else if (url.includes('.dev.')) badge.textContent = 'DEV';
+  else if (url.includes('staging')) badge.textContent = 'STAGING';
+  else badge.textContent = 'PROD';
+}
+
+function renderSettings() {
+  const backends = state.authData.backends || [];
+  const activeBackend = backends.find(b => b.active);
+  const connectedCount = backends.filter(b => b.authenticated).length;
+
+  // Summary
+  const summary = document.getElementById('conn-summary');
+  if (activeBackend) {
+    summary.innerHTML = `<div class="cs-item"><span class="cs-dot green"></span>Connected to <strong style="margin-left:4px">${capitalize(activeBackend.key)}</strong></div>
+      ${activeBackend.email ? `<div class="cs-item" style="color:var(--text-dim);font-size:11.5px;margin-left:auto">${esc(activeBackend.email)}</div>` : ''}`;
+  } else {
+    summary.innerHTML = `<div class="cs-item"><span class="cs-dot red"></span>Not connected — run <code style="font-family:var(--mono);background:var(--bg-elevated);padding:2px 6px;border-radius:3px;font-size:11px">vendian login</code></div>`;
+  }
+
+  // Backend list
+  const list = document.getElementById('backends-list');
+  list.innerHTML = backends.map(b => {
+    const isActive = b.active;
+    const cardClass = isActive ? 'is-active' : (!b.authenticated ? 'needs-login' : '');
+    const badgeClass = isActive ? 'active' : b.authenticated ? 'signed-in' : 'disconnected';
+    const badgeText = isActive ? '● Active' : b.authenticated ? 'Signed in' : 'Not connected';
+    const action = !b.authenticated
+      ? `<button class="btn btn-sm btn-ghost" data-login="${b.key}">Sign in →</button>`
+      : (!isActive ? `<button class="btn btn-sm btn-success" data-switch="${b.key}">Activate</button>` : '');
+    return `<div class="settings-card ${cardClass}" data-backend="${b.key}">
+      <div class="sc-left">
+        <div class="sc-label">${capitalize(b.key)}</div>
+        <div class="sc-url">${esc(b.url)}</div>
+        ${b.email ? `<div class="sc-email">${esc(b.email)}</div>` : ''}
+      </div>
+      <div class="sc-right">
+        <span class="settings-badge ${badgeClass}">${badgeText}</span>
+        ${action}
+      </div>
+    </div>`;
+  }).join('');
+
+  // Wire buttons
+  list.querySelectorAll('[data-login]').forEach(btn => {
+    btn.addEventListener('click', (e) => { e.stopPropagation(); promptLogin(btn.dataset.login); });
+  });
+  list.querySelectorAll('[data-switch]').forEach(btn => {
+    btn.addEventListener('click', (e) => { e.stopPropagation(); switchBackend(btn.dataset.switch); });
+  });
+  list.querySelectorAll('.settings-card').forEach(card => {
+    card.addEventListener('click', () => {
+      const key = card.dataset.backend;
+      const b = backends.find(x => x.key === key);
+      if (b && b.authenticated && !b.active) switchBackend(key);
+      else if (b && !b.authenticated) promptLogin(key);
+    });
+  });
+}
+
+function promptLogin(key) {
+  alert(`To sign in to ${capitalize(key)}, run:\n\n  vendian login --backend ${key}\n\nThen refresh this page.`);
+}
+
+async function switchBackend(key) {
+  const d = await api('/auth/switch', { method: 'POST', body: JSON.stringify({ backend: key }) });
+  if (d.ok) await loadAuth();
+  else if (d.needsLogin) promptLogin(key);
+  else alert(d.error || 'Switch failed');
+}

package/dev-ui/js/state.js

@@ -0,0 +1,52 @@
+// ─── State ───
+export const state = {
+  agents: [],
+  authData: {},
+  logOffset: 0,
+  pollTimer: null,
+  isServing: false,
+  validateResults: {},
+  selectedValidateAgent: null,
+};
+
+// ─── API ───
+export const api = (path, opts) =>
+  fetch('/api' + path, { headers: { 'Content-Type': 'application/json' }, ...opts }).then(r => r.json());
+
+// ─── Utils ───
+export function esc(s) {
+  if (!s) return '';
+  const d = document.createElement('span');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+export function capitalize(s) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : '';
+}
+
+export function formatTime(ts) {
+  if (!ts) return '';
+  try {
+    const d = new Date(ts);
+    return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`;
+  } catch { return ''; }
+}
+
+export function groupByFolder(list) {
+  const groups = {};
+  list.forEach(a => {
+    const parts = a.relativePath.replace(/\\/g, '/').split('/');
+    const folder = parts.length > 1 ? parts.slice(0, -1).join('/') : '.';
+    if (!groups[folder]) groups[folder] = [];
+    groups[folder].push(a);
+  });
+  return groups;
+}
+
+export function statusDotClass(s) {
+  if (s === 'ready' || s === 'completed') return 'ready';
+  if (s === 'running') return 'running';
+  if (s === 'error') return 'error';
+  return 'unknown';
+}

package/dev-ui/js/validate.js

@@ -0,0 +1,111 @@
+import { state, api, esc } from './state.js';
+
+export function populateValidateGrid() {
+  const grid = document.getElementById('validate-grid');
+  if (!state.agents.length) {
+    grid.innerHTML = '<div style="color:var(--text-dim);font-size:13px">No agents found.</div>';
+    return;
+  }
+  grid.innerHTML = state.agents.map(a => {
+    const result = state.validateResults[a.path];
+    const sel = state.selectedValidateAgent === a.path ? ' selected' : '';
+    const badge = result
+      ? (result.valid ? '<span style="color:var(--green);font-size:16px;font-weight:700">✓</span>' : '<span style="color:var(--red);font-size:16px;font-weight:700">✗</span>')
+      : '';
+    return `<div class="val-card${sel}" data-path="${esc(a.path)}">
+      <div class="vc-icon">🤖</div>
+      <div class="vc-info"><div class="vc-name">${esc(a.displayName || a.name)}</div><div class="vc-path">${esc(a.relativePath)}</div></div>
+      <div class="vc-badge">${badge}</div>
+    </div>`;
+  }).join('');
+
+  grid.querySelectorAll('.val-card').forEach(card => {
+    card.addEventListener('click', () => selectAndValidate(card.dataset.path));
+  });
+}
+
+async function selectAndValidate(path) {
+  state.selectedValidateAgent = path;
+  populateValidateGrid();
+  await runValidateSingle(path);
+}
+
+export function triggerValidateAgent(path) {
+  state.selectedValidateAgent = path;
+  populateValidateGrid();
+  runValidateSingle(path);
+}
+
+async function runValidateSingle(path) {
+  const container = document.getElementById('validate-results');
+  container.innerHTML = `<div class="val-results"><div class="val-results-head"><h3>Validating...</h3></div><div class="val-results-body" style="color:var(--text-dim)">Running checks...</div></div>`;
+
+  const d = await api('/validate', { method: 'POST', body: JSON.stringify({ path }) });
+  state.validateResults[path] = d;
+  populateValidateGrid();
+  renderResults(d, path);
+}
+
+export async function runValidateAll() {
+  const container = document.getElementById('validate-results');
+  container.innerHTML = `<div class="val-results"><div class="val-results-head"><h3>Validating ${state.agents.length} agents...</h3></div><div class="val-results-body" style="color:var(--text-dim)">Running...</div></div>`;
+
+  let allErrors = [], allWarnings = [], passed = 0, failed = 0;
+  for (const a of state.agents) {
+    const d = await api('/validate', { method: 'POST', body: JSON.stringify({ path: a.path }) });
+    state.validateResults[a.path] = d;
+    if (d.valid) passed++; else failed++;
+    if (d.errors?.length) allErrors.push({ agent: a.displayName || a.name, errors: d.errors });
+    if (d.warnings?.length) allWarnings.push({ agent: a.displayName || a.name, warnings: d.warnings });
+  }
+  populateValidateGrid();
+  renderAllResults(passed, failed, allErrors, allWarnings);
+}
+
+function renderResults(d, path) {
+  const agent = state.agents.find(a => a.path === path);
+  const name = agent ? (agent.displayName || agent.name) : 'Agent';
+  const container = document.getElementById('validate-results');
+  let body = '';
+
+  if (d.valid) {
+    body += `<div class="val-section"><div class="val-section-title success">All checks passed</div><div class="val-item success"><span class="vi-icon">✓</span>${esc(name)} is valid and ready to deploy</div></div>`;
+  }
+  if (d.errors?.length) {
+    body += `<div class="val-section"><div class="val-section-title errors">Errors (${d.errors.length})</div>`;
+    d.errors.forEach(e => { body += `<div class="val-item error"><span class="vi-icon">✗</span>${esc(typeof e === 'string' ? e : e.message || JSON.stringify(e))}</div>`; });
+    body += `</div>`;
+  }
+  if (d.warnings?.length) {
+    body += `<div class="val-section"><div class="val-section-title warnings">Warnings (${d.warnings.length})</div>`;
+    d.warnings.forEach(w => { body += `<div class="val-item warning"><span class="vi-icon">⚠</span>${esc(typeof w === 'string' ? w : w.message || JSON.stringify(w))}</div>`; });
+    body += `</div>`;
+  }
+  if (d.agent_id) body += `<div style="margin-top:10px;font-size:11px;color:var(--text-dim)">ID: <span style="font-family:var(--mono)">${esc(d.agent_id)}</span></div>`;
+
+  const badge = d.valid
+    ? '<span style="color:var(--green);font-size:12px;font-weight:700">✓ Passed</span>'
+    : '<span style="color:var(--red);font-size:12px;font-weight:700">✗ Failed</span>';
+  container.innerHTML = `<div class="val-results"><div class="val-results-head"><h3>${esc(name)}</h3>${badge}</div><div class="val-results-body">${body}</div></div>`;
+}
+
+function renderAllResults(passed, failed, allErrors, allWarnings) {
+  const container = document.getElementById('validate-results');
+  let body = `<div style="display:flex;gap:16px;margin-bottom:16px"><span style="color:var(--green);font-weight:700">✓ ${passed} passed</span>${failed ? `<span style="color:var(--red);font-weight:700">✗ ${failed} failed</span>` : ''}</div>`;
+
+  for (const { agent, errors } of allErrors) {
+    body += `<div class="val-section"><div class="val-section-title errors">${esc(agent)}</div>`;
+    errors.forEach(e => { body += `<div class="val-item error"><span class="vi-icon">✗</span>${esc(typeof e === 'string' ? e : e.message || JSON.stringify(e))}</div>`; });
+    body += `</div>`;
+  }
+  for (const { agent, warnings } of allWarnings) {
+    body += `<div class="val-section"><div class="val-section-title warnings">${esc(agent)}</div>`;
+    warnings.forEach(w => { body += `<div class="val-item warning"><span class="vi-icon">⚠</span>${esc(typeof w === 'string' ? w : w.message || JSON.stringify(w))}</div>`; });
+    body += `</div>`;
+  }
+
+  const badge = failed === 0
+    ? '<span style="color:var(--green);font-size:12px;font-weight:700">✓ All passed</span>'
+    : `<span style="color:var(--red);font-size:12px;font-weight:700">✗ ${failed} failed</span>`;
+  container.innerHTML = `<div class="val-results"><div class="val-results-head"><h3>All Agents (${passed + failed})</h3>${badge}</div><div class="val-results-body">${body}</div></div>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendian/cli",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "Public Vendian CLI bootstrapper and launcher",
   "license": "UNLICENSED",
   "private": false,
@@ -15,6 +15,7 @@
   "files": [
     "bin/",
     "cli-wrapper.mjs",
+    "dev-ui/",
     "LICENSE",
     "README.md"
   ],