orquesta-agent 0.2.220 → 0.2.222

package/dist/ui/public/welcome.css

@@ -0,0 +1,247 @@
+/* First-run welcome / onboarding wizard. Reuses the palette from style.css. */
+
+.welcome-body {
+  overflow: auto;
+  background:
+    radial-gradient(1100px 560px at 50% -12%, rgba(34,197,94,0.14), transparent 70%),
+    radial-gradient(820px 440px at 88% 116%, rgba(34,197,94,0.06), transparent 70%),
+    var(--bg-950);
+}
+
+.wz {
+  max-width: 900px;
+  margin: 0 auto;
+  min-height: 100vh;
+  padding: 0 30px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Header ─────────────────────────────────────────── */
+.wz-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 26px 0 18px;
+}
+.wz-brand { display: flex; align-items: center; gap: 11px; }
+.wz-logo { width: 30px; height: 30px; filter: drop-shadow(0 2px 8px rgba(34,197,94,0.25)); }
+.wz-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
+.wz-brand-name { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
+.wz-version { color: var(--text-500); font-size: 11px; font-family: 'JetBrains Mono', monospace; margin-top: 1px; }
+
+.wz-report-btn {
+  display: inline-flex; align-items: center; gap: 7px;
+  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
+  color: #fca5a5; background: rgba(239,68,68,0.07);
+  border: 1px solid rgba(239,68,68,0.28); border-radius: 9px; padding: 8px 14px;
+  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease;
+}
+.wz-report-btn:hover { color: #fecaca; border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.15); }
+.wz-report-btn:active { transform: translateY(1px); }
+.wz-report-btn svg { width: 15px; height: 15px; }
+
+/* ── Progress (numbered, labelled) ──────────────────── */
+.wz-steps { display: flex; align-items: center; gap: 0; padding: 6px 0 22px; }
+.wz-pip { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; cursor: default; }
+.wz-pip-num {
+  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
+  display: grid; place-items: center; font-size: 12px; font-weight: 700;
+  background: var(--bg-800); color: var(--text-500);
+  border: 1px solid var(--bg-700); transition: all .22s cubic-bezier(.2,.7,.3,1);
+}
+.wz-pip-label { font-size: 12px; color: var(--text-500); font-weight: 500; white-space: nowrap; transition: color .22s ease; }
+.wz-pip-line { flex: 1 1 auto; height: 2px; border-radius: 2px; background: var(--bg-700); margin: 0 11px; min-width: 8px; transition: background .3s ease; }
+/* Fill the connector leading into any reached step (modern :has, degrades gracefully). */
+.wz-pip-line:has(+ .wz-pip.active), .wz-pip-line:has(+ .wz-pip.done) {
+  background: linear-gradient(90deg, rgba(34,197,94,0.5), var(--green));
+}
+.wz-pip:hover .wz-pip-num { border-color: var(--bg-600); }
+.wz-pip.active .wz-pip-num { background: var(--green); color: #052e16; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-bg); }
+.wz-pip.active .wz-pip-label { color: var(--text-100); font-weight: 600; }
+.wz-pip.done .wz-pip-num { background: var(--green-bg); color: var(--green-light); border-color: rgba(34,197,94,0.45); }
+.wz-pip.done .wz-pip-label { color: var(--text-400); }
+
+/* ── Main / steps ───────────────────────────────────── */
+.wz-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 10px 0 30px; }
+.wz-step { animation: wzIn .32s cubic-bezier(.2,.7,.3,1); }
+@keyframes wzIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
+
+.wz-step-head { margin-bottom: 12px; }
+.wz-step-kicker {
+  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
+  text-transform: uppercase; color: var(--green-light); margin-bottom: 10px;
+  padding: 3px 9px; border-radius: 6px;
+  background: var(--green-bg); border: 1px solid rgba(34,197,94,0.22);
+}
+.wz-step h1 { font-size: 38px; line-height: 1.08; letter-spacing: -0.038em; margin-bottom: 14px; font-weight: 800; }
+.wz-step h2 { font-size: 28px; letter-spacing: -0.028em; font-weight: 700; line-height: 1.15; }
+.wz-lead { color: var(--text-300); font-size: 15.5px; line-height: 1.6; max-width: 740px; margin-bottom: 26px; }
+.wz-lead-center { margin-left: auto; margin-right: auto; }
+.wz-lead code, .wz-step code {
+  font-family: 'JetBrains Mono', monospace; font-size: .85em;
+  background: var(--bg-800); border: 1px solid var(--bg-700);
+  border-radius: 5px; padding: 1.5px 6px; color: var(--green-light);
+}
+
+/* Hero (step 1) */
+.wz-hero { text-align: center; margin-bottom: 34px; }
+.wz-hero-logo { width: 60px; height: 60px; margin-bottom: 20px; filter: drop-shadow(0 8px 28px rgba(34,197,94,0.4)); }
+.wz-hero-badge {
+  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
+  background: var(--green-bg); color: var(--green-light);
+  border: 1px solid rgba(34,197,94,0.3);
+  border-radius: 999px; padding: 6px 15px; font-size: 12.5px; font-weight: 600;
+}
+.wz-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: wzPulse 2s infinite; }
+@keyframes wzPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5);} 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0);} 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0);} }
+
+/* Card grid */
+.wz-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
+.wz-card {
+  position: relative; overflow: hidden;
+  background: linear-gradient(180deg, var(--bg-900), rgba(20,20,23,0.55));
+  border: 1px solid var(--bg-700); border-radius: 16px; padding: 22px 20px;
+  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
+}
+.wz-card::before {
+  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
+}
+.wz-card:hover { border-color: rgba(34,197,94,0.35); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
+.wz-card-ico {
+  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 15px;
+  border-radius: 11px; color: var(--green-light);
+  background: var(--green-bg); border: 1px solid rgba(34,197,94,0.25);
+}
+.wz-card-ico svg { width: 21px; height: 21px; }
+.wz-card h3 { font-size: 15px; margin-bottom: 7px; letter-spacing: -0.01em; }
+.wz-card p { color: var(--text-400); font-size: 13.5px; line-height: 1.55; }
+
+/* Mode list */
+.wz-modes { display: flex; flex-direction: column; gap: 12px; }
+.wz-mode {
+  display: flex; gap: 16px; align-items: flex-start;
+  background: var(--bg-900); border: 1px solid var(--bg-700);
+  border-radius: 13px; padding: 16px 18px;
+  transition: border-color .18s ease, background .18s ease;
+}
+.wz-mode:hover { border-color: var(--bg-600); background: rgba(255,255,255,0.012); }
+.wz-mode h4 { font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; letter-spacing: -0.01em; }
+.wz-mode p { color: var(--text-400); font-size: 14px; line-height: 1.55; }
+.wz-mode p code { font-size: .82em; }
+.wz-tag {
+  flex-shrink: 0; min-width: 94px; text-align: center;
+  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
+  background: var(--bg-800); border: 1px solid var(--bg-700); color: var(--text-300);
+  border-radius: 8px; padding: 8px 8px; margin-top: 1px;
+}
+.wz-tag-green { background: var(--green-bg); border-color: rgba(34,197,94,0.3); color: var(--green-light); }
+.wz-tag-yellow { background: var(--yellow-bg); border-color: rgba(234,179,8,0.3); color: var(--yellow); }
+.wz-tag-purple { background: var(--purple-bg); border-color: rgba(168,85,247,0.3); color: var(--purple); }
+.wz-rec {
+  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
+  color: var(--green-light); background: var(--green-bg);
+  border: 1px solid rgba(34,197,94,0.25);
+  border-radius: 5px; padding: 2px 7px;
+}
+.wz-note { color: var(--text-500); font-size: 13px; line-height: 1.55; margin-top: 20px; }
+.wz-note strong { color: var(--text-300); }
+.wz-note code { font-size: .85em; }
+
+/* Configure form */
+.wz-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
+.wz-field { display: flex; flex-direction: column; gap: 8px; }
+.wz-field label { font-size: 13px; font-weight: 600; color: var(--text-300); }
+.wz-select-wrap { position: relative; }
+.wz-select-wrap::after {
+  content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
+  transform: translateY(-65%) rotate(45deg); pointer-events: none;
+  border-right: 1.5px solid var(--text-500); border-bottom: 1.5px solid var(--text-500);
+}
+.wz-field select, .wz-textarea {
+  width: 100%;
+  background: var(--bg-900); color: var(--text-100);
+  border: 1px solid var(--bg-700); border-radius: 10px;
+  padding: 11px 12px; font-size: 14px; font-family: inherit;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.wz-field select {
+  cursor: pointer; appearance: none; -webkit-appearance: none;
+  padding-right: 34px;
+}
+.wz-field select:hover { border-color: var(--bg-600); }
+.wz-field select:focus, .wz-textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
+.wz-apply-row { display: flex; align-items: center; gap: 14px; }
+.wz-apply-status { font-size: 13px; color: var(--text-400); }
+.wz-apply-status.ok { color: var(--green-light); }
+.wz-apply-status.err { color: #fca5a5; }
+
+/* ── Footer ─────────────────────────────────────────── */
+.wz-foot {
+  display: flex; align-items: center; gap: 16px;
+  padding: 18px 0 30px; border-top: 1px solid var(--bg-800);
+}
+.wz-foot-spacer { flex: 1; }
+.wz-skip { color: var(--text-500); font-size: 13px; text-decoration: none; transition: color .15s ease; }
+.wz-skip:hover { color: var(--text-300); }
+
+.wz-btn {
+  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
+  border-radius: 10px; padding: 10px 24px; border: 1px solid transparent;
+  transition: background .15s ease, border-color .15s ease, opacity .15s ease, transform .1s ease, box-shadow .15s ease;
+}
+.wz-btn:active { transform: translateY(1px); }
+.wz-btn-primary { background: var(--green); color: #052e16; box-shadow: 0 4px 16px rgba(34,197,94,0.22); }
+.wz-btn-primary:hover { background: var(--green-light); box-shadow: 0 6px 20px rgba(34,197,94,0.3); }
+.wz-btn-ghost { background: transparent; color: var(--text-300); border-color: var(--bg-700); }
+.wz-btn-ghost:hover { border-color: var(--bg-600); color: var(--text-100); }
+.wz-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
+
+/* ── Report modal ───────────────────────────────────── */
+.wz-modal-overlay {
+  position: fixed; inset: 0; z-index: 50;
+  background: rgba(0,0,0,0.62); backdrop-filter: blur(4px);
+  display: grid; place-items: center; padding: 20px;
+  animation: wzFade .15s ease;
+}
+/* The author `display: grid` above overrides the UA `[hidden] { display:none }`
+   rule, so without this the modal is ALWAYS visible — it shows on page load and
+   Close/Cancel (which set `hidden = true`) can't dismiss it. Re-assert hidden. */
+.wz-modal-overlay[hidden] { display: none; }
+@keyframes wzFade { from { opacity: 0; } to { opacity: 1; } }
+.wz-modal {
+  width: 100%; max-width: 490px;
+  background: linear-gradient(180deg, var(--bg-900), var(--bg-950));
+  border: 1px solid var(--bg-700);
+  border-radius: 18px; padding: 24px; box-shadow: 0 28px 70px rgba(0,0,0,0.55);
+  animation: wzPop .22s cubic-bezier(.2,.8,.3,1);
+}
+@keyframes wzPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
+.wz-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.wz-modal-head h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
+.wz-modal-close { background: none; border: none; color: var(--text-500); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .15s ease; }
+.wz-modal-close:hover { color: var(--text-100); }
+.wz-modal-sub { color: var(--text-400); font-size: 13.5px; line-height: 1.55; margin-bottom: 15px; }
+.wz-textarea { resize: vertical; min-height: 100px; line-height: 1.55; }
+.wz-logs-note {
+  display: flex; align-items: center; gap: 8px; margin-top: 13px;
+  font-size: 12.5px; color: var(--green-light);
+  background: var(--green-bg); border: 1px solid rgba(34,197,94,0.25);
+  border-radius: 9px; padding: 10px 12px;
+}
+.wz-logs-note svg { width: 15px; height: 15px; flex-shrink: 0; }
+.wz-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
+.wz-report-status { font-size: 13px; margin-top: 12px; min-height: 18px; }
+.wz-report-status.ok { color: var(--green-light); }
+.wz-report-status.err { color: #fca5a5; }
+
+@media (max-width: 760px) {
+  .wz { padding: 0 20px; }
+  .wz-cards, .wz-form { grid-template-columns: 1fr; }
+  .wz-step h1 { font-size: 30px; }
+  .wz-step h2 { font-size: 24px; }
+  .wz-pip-label { display: none; }
+  .wz-pip-line { margin: 0 7px; }
+}

package/dist/ui/public/welcome.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Welcome to Orquesta</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="welcome.css">
+</head>
+<body class="welcome-body">
+  <div class="wz">
+    <!-- Header -->
+    <header class="wz-head">
+      <div class="wz-brand">
+        <img src="logo-mark-white.png" alt="Orquesta" class="wz-logo">
+        <div class="wz-brand-text">
+          <span class="wz-brand-name">orquesta</span>
+          <span class="wz-version" id="wz-version"></span>
+        </div>
+      </div>
+      <button class="wz-report-btn" id="wz-report-open" type="button" title="Something went wrong? Send us the details.">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        Report a problem
+      </button>
+    </header>
+
+    <!-- Progress -->
+    <nav class="wz-steps" id="wz-progress" aria-label="Setup progress"></nav>
+
+    <!-- Steps -->
+    <main class="wz-main" id="wz-main">
+
+      <!-- 1. Welcome -->
+      <section class="wz-step" data-step="0">
+        <div class="wz-hero">
+          <img src="logo-mark-white.png" alt="" class="wz-hero-logo">
+          <div class="wz-hero-badge"><span class="wz-pulse"></span> Agent connected</div>
+          <h1>Welcome to Orquesta</h1>
+          <p class="wz-lead wz-lead-center" id="wz-project-line">This machine is now an Orquesta agent. Your team can send prompts from the dashboard and they run right here — on your machine, against your code.</p>
+        </div>
+        <div class="wz-cards">
+          <div class="wz-card">
+            <span class="wz-card-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
+            </span>
+            <h3>Runs locally</h3>
+            <p>Prompts execute on this machine. Your code never leaves it — only logs and results are sent back.</p>
+          </div>
+          <div class="wz-card">
+            <span class="wz-card-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>
+            </span>
+            <h3>Dashboard-driven</h3>
+            <p>Your team submits prompts from the Orquesta dashboard. The agent picks them up over a realtime channel.</p>
+          </div>
+          <div class="wz-card">
+            <span class="wz-card-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-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>
+            <h3>Fully logged</h3>
+            <p>Every prompt, tool call and result is recorded, so the whole team sees what the AI did and why.</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- 2. Engine -->
+      <section class="wz-step" data-step="1" hidden>
+        <div class="wz-step-head"><span class="wz-step-kicker">Execution</span><h2>The engine that runs your prompts</h2></div>
+        <p class="wz-lead">This is the AI coding CLI that actually executes your prompts. Change it anytime — per machine here, or per project from the dashboard.</p>
+        <div class="wz-modes">
+          <div class="wz-mode"><span class="wz-tag wz-tag-green">auto</span><div><h4>Auto <span class="wz-rec">recommended</span></h4><p>Picks the best CLI installed on this machine (Orquesta → Claude → Kimi). Set it and forget it.</p></div></div>
+          <div class="wz-mode"><span class="wz-tag">claude</span><div><h4>Claude CLI</h4><p>Anthropic's Claude Code. Best-in-class coding model; uses your Claude subscription or API key.</p></div></div>
+          <div class="wz-mode"><span class="wz-tag">orquesta</span><div><h4>Orquesta CLI</h4><p>Multi-model engine routed through Orquesta's Batuta proxy — switch models without reconfiguring the machine.</p></div></div>
+          <div class="wz-mode"><span class="wz-tag">kimi</span><div><h4>Kimi Code CLI</h4><p>The local Kimi coding CLI, if you have it installed.</p></div></div>
+        </div>
+      </section>
+
+      <!-- 3. Permissions -->
+      <section class="wz-step" data-step="2" hidden>
+        <div class="wz-step-head"><span class="wz-step-kicker">Control</span><h2>Permissions</h2></div>
+        <p class="wz-lead">How much the agent can do on its own before a human steps in.</p>
+        <div class="wz-modes">
+          <div class="wz-mode"><span class="wz-tag wz-tag-green">auto</span><div><h4>Auto</h4><p>The agent runs commands and edits files without asking. Fast and hands-free — ideal for trusted automation.</p></div></div>
+          <div class="wz-mode"><span class="wz-tag wz-tag-yellow">supervised</span><div><h4>Supervised</h4><p>Each action waits for approval in the dashboard before it runs. Slower, but you stay in control of every step.</p></div></div>
+        </div>
+        <p class="wz-note">You can flip this live from the dashboard at any time — no restart needed.</p>
+      </section>
+
+      <!-- 4. Sandbox -->
+      <section class="wz-step" data-step="3" hidden>
+        <div class="wz-step-head"><span class="wz-step-kicker">Safety</span><h2>Filesystem isolation</h2></div>
+        <p class="wz-lead">Limits which files the agent can touch — protecting the rest of your machine from a wrong move.</p>
+        <div class="wz-modes">
+          <div class="wz-mode"><span class="wz-tag">off</span><div><h4>Off</h4><p>The agent has the same access you do. Simplest; use on machines dedicated to one project.</p></div></div>
+          <div class="wz-mode"><span class="wz-tag wz-tag-green">standard</span><div><h4>Standard</h4><p>Only the project folder is writable. The rest of the filesystem is read-only — a stray <code>rm</code> can't escape the project.</p></div></div>
+          <div class="wz-mode"><span class="wz-tag wz-tag-purple">strict</span><div><h4>Strict</h4><p>Standard, plus <em>hides</em> other projects and credentials (<code>~/.ssh</code>, <code>~/.aws</code>, cloud tokens) entirely. Best for shared machines.</p></div></div>
+        </div>
+        <p class="wz-note" id="wz-sandbox-avail">Checking sandbox support on this host…</p>
+      </section>
+
+      <!-- 5. Manager UI -->
+      <section class="wz-step" data-step="4" hidden>
+        <div class="wz-step-head"><span class="wz-step-kicker">Control panel</span><h2>Your local manager</h2></div>
+        <p class="wz-lead">This page lives at <code id="wz-ui-url">http://localhost:8080</code> — bookmark it. It's where you watch and manage every agent on this machine.</p>
+        <div class="wz-cards">
+          <div class="wz-card">
+            <span class="wz-card-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg>
+            </span>
+            <h3>Agents</h3>
+            <p>See every agent's status, switch its engine / permissions / sandbox inline, and start or stop it.</p>
+          </div>
+          <div class="wz-card">
+            <span class="wz-card-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+            </span>
+            <h3>All Logs</h3>
+            <p>Live, streaming logs from every agent — exactly what each prompt did, as it happens.</p>
+          </div>
+          <div class="wz-card">
+            <span class="wz-card-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+            </span>
+            <h3>System</h3>
+            <p>CPU, memory and disk for this machine, so you know it has headroom to run prompts.</p>
+          </div>
+        </div>
+        <p class="wz-note">Closing this page does <strong>not</strong> stop your agent — it keeps running in the background.</p>
+      </section>
+
+      <!-- 6. Configure -->
+      <section class="wz-step" data-step="5" hidden>
+        <div class="wz-step-head"><span class="wz-step-kicker">Finish</span><h2>Configure this agent</h2></div>
+        <p class="wz-lead">Set the defaults for this machine. These apply <strong>live</strong> to the running agent — no restart.</p>
+        <div class="wz-form" id="wz-form">
+          <div class="wz-field">
+            <label for="wz-engine">Engine</label>
+            <div class="wz-select-wrap">
+              <select id="wz-engine">
+                <option value="auto">Auto (best available)</option>
+                <option value="claude">Claude CLI</option>
+                <option value="orquesta">Orquesta CLI (multi-model)</option>
+                <option value="kimi">Kimi Code CLI</option>
+              </select>
+            </div>
+          </div>
+          <div class="wz-field">
+            <label for="wz-perm">Permissions</label>
+            <div class="wz-select-wrap">
+              <select id="wz-perm">
+                <option value="auto">Auto (no approval)</option>
+                <option value="supervised">Supervised (review each)</option>
+              </select>
+            </div>
+          </div>
+          <div class="wz-field">
+            <label for="wz-sandbox">Sandbox</label>
+            <div class="wz-select-wrap">
+              <select id="wz-sandbox">
+                <option value="off">Off</option>
+                <option value="standard">Standard (project-only writes)</option>
+                <option value="strict">Strict (hide other projects + creds)</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="wz-apply-row">
+          <button class="wz-btn wz-btn-ghost" id="wz-apply-btn" type="button">Apply settings</button>
+          <span class="wz-apply-status" id="wz-apply-status"></span>
+        </div>
+        <p class="wz-note" id="wz-no-live" hidden>This agent was started elsewhere, so settings can't be applied from here — change them from the Orquesta dashboard or the Agents tab.</p>
+      </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="wz-foot">
+      <button class="wz-btn wz-btn-ghost" id="wz-back" type="button" hidden>Back</button>
+      <div class="wz-foot-spacer"></div>
+      <a class="wz-skip" href="/" id="wz-skip">Skip to manager</a>
+      <button class="wz-btn wz-btn-primary" id="wz-next" type="button">Next</button>
+    </footer>
+  </div>
+
+  <!-- Report a problem modal -->
+  <div class="wz-modal-overlay" id="wz-report-modal" hidden>
+    <div class="wz-modal" role="dialog" aria-modal="true" aria-labelledby="wz-report-title">
+      <div class="wz-modal-head">
+        <h3 id="wz-report-title">Report a problem</h3>
+        <button class="wz-modal-close" id="wz-report-close" type="button" aria-label="Close">&times;</button>
+      </div>
+      <p class="wz-modal-sub">Tell us what went wrong. Your recent terminal logs are attached automatically so we can see exactly what happened.</p>
+      <textarea id="wz-report-msg" class="wz-textarea" rows="5" placeholder="What were you trying to do, and what happened instead?"></textarea>
+      <div class="wz-logs-note">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+        Terminal logs from this agent will be included with your report.
+      </div>
+      <div class="wz-modal-actions">
+        <button class="wz-btn wz-btn-ghost" id="wz-report-cancel" type="button">Cancel</button>
+        <button class="wz-btn wz-btn-primary" id="wz-report-send" type="button">Send report</button>
+      </div>
+      <p class="wz-report-status" id="wz-report-status"></p>
+    </div>
+  </div>
+
+  <script src="welcome.js"></script>
+</body>
+</html>

package/dist/ui/public/welcome.js

@@ -0,0 +1,183 @@
+// First-run welcome wizard. Vanilla JS, no build step. Talks to the embedded
+// agent server (/api/onboarding/*) to read current config, apply live changes,
+// and submit problem reports (message + terminal logs).
+
+const STEP_LABELS = ['Welcome', 'Engine', 'Permissions', 'Sandbox', 'Manager', 'Setup']
+const TOTAL_STEPS = STEP_LABELS.length
+let step = 0
+let hasLiveAgent = false
+
+const $ = (id) => document.getElementById(id)
+const steps = Array.from(document.querySelectorAll('.wz-step'))
+
+// Build the numbered, labelled progress bar
+const progress = $('wz-progress')
+const pips = []
+STEP_LABELS.forEach((label, i) => {
+  if (i > 0) {
+    const line = document.createElement('span')
+    line.className = 'wz-pip-line'
+    progress.appendChild(line)
+  }
+  const pip = document.createElement('div')
+  pip.className = 'wz-pip'
+  pip.innerHTML = `<span class="wz-pip-num">${i + 1}</span><span class="wz-pip-label">${label}</span>`
+  pip.addEventListener('click', () => { if (i <= furthest) { step = i; render() } })
+  progress.appendChild(pip)
+  pips.push(pip)
+})
+let furthest = 0
+
+function render() {
+  furthest = Math.max(furthest, step)
+  steps.forEach((s) => { s.hidden = Number(s.dataset.step) !== step })
+  pips.forEach((p, i) => {
+    p.classList.toggle('active', i === step)
+    p.classList.toggle('done', i < step)
+    p.style.cursor = i <= furthest ? 'pointer' : 'default'
+  })
+  $('wz-back').hidden = step === 0
+  const isLast = step === TOTAL_STEPS - 1
+  $('wz-next').textContent = isLast ? 'Finish' : 'Next'
+  $('wz-skip').hidden = isLast
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+$('wz-next').addEventListener('click', () => {
+  if (step < TOTAL_STEPS - 1) { step++; render() }
+  else finish()
+})
+$('wz-back').addEventListener('click', () => { if (step > 0) { step--; render() } })
+
+// Keyboard nav (ignored while typing in a field or the modal is open)
+document.addEventListener('keydown', (e) => {
+  if (!$('wz-report-modal').hidden) { if (e.key === 'Escape') closeReport(); return }
+  if (e.target.tagName === 'SELECT' || e.target.tagName === 'TEXTAREA') return
+  if (e.key === 'ArrowRight' || e.key === 'Enter') $('wz-next').click()
+  else if (e.key === 'ArrowLeft') $('wz-back').click()
+})
+
+async function finish() {
+  if (hasLiveAgent) await applySettings(true)
+  try { await fetch('/api/onboarding/complete', { method: 'POST' }) } catch {}
+  window.location.href = '/'
+}
+
+async function applySettings(silent) {
+  const status = $('wz-apply-status')
+  const body = {
+    cliPreference: $('wz-engine').value,
+    permissionMode: $('wz-perm').value,
+    sandboxMode: $('wz-sandbox').value,
+  }
+  try {
+    const r = await fetch('/api/onboarding/apply', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+    const data = await r.json().catch(() => ({}))
+    if (!r.ok) throw new Error(data.error || `HTTP ${r.status}`)
+    if (!silent) { status.textContent = '✓ Applied to the running agent'; status.className = 'wz-apply-status ok' }
+  } catch (err) {
+    if (!silent) { status.textContent = err.message || 'Failed to apply'; status.className = 'wz-apply-status err' }
+  }
+}
+
+$('wz-apply-btn').addEventListener('click', () => applySettings(false))
+
+// ── Report a problem ─────────────────────────────────
+function openReport() {
+  $('wz-report-status').textContent = ''
+  $('wz-report-status').className = 'wz-report-status'
+  $('wz-report-modal').hidden = false
+  setTimeout(() => $('wz-report-msg').focus(), 50)
+}
+function closeReport() { $('wz-report-modal').hidden = true }
+
+$('wz-report-open').addEventListener('click', openReport)
+$('wz-report-close').addEventListener('click', closeReport)
+$('wz-report-cancel').addEventListener('click', closeReport)
+$('wz-report-modal').addEventListener('click', (e) => { if (e.target.id === 'wz-report-modal') closeReport() })
+
+$('wz-report-send').addEventListener('click', async () => {
+  const status = $('wz-report-status')
+  const message = $('wz-report-msg').value.trim()
+  if (!message) {
+    status.textContent = 'Please describe the problem first.'
+    status.className = 'wz-report-status err'
+    return
+  }
+  const btn = $('wz-report-send')
+  btn.disabled = true; btn.textContent = 'Sending…'
+  status.textContent = ''; status.className = 'wz-report-status'
+  // Client-side timeout so the button can never get stuck on "Sending…" even if
+  // the agent or the network stalls — it always resolves to success or a clear error.
+  const ac = new AbortController()
+  const timer = setTimeout(() => ac.abort(), 15000)
+  try {
+    const r = await fetch('/api/onboarding/report', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message }),
+      signal: ac.signal,
+    })
+    const data = await r.json().catch(() => ({}))
+    if (!r.ok) throw new Error(data.error || `HTTP ${r.status}`)
+    status.textContent = '✓ Report sent with your terminal logs. Thank you!'
+    status.className = 'wz-report-status ok'
+    $('wz-report-msg').value = ''
+    setTimeout(closeReport, 1800)
+  } catch (err) {
+    status.textContent = err.name === 'AbortError'
+      ? 'Timed out reaching the agent. Check the connection and try again.'
+      : (err.message || 'Could not send the report.')
+    status.className = 'wz-report-status err'
+  } finally {
+    clearTimeout(timer)
+    btn.disabled = false; btn.textContent = 'Send report'
+  }
+})
+
+// ── Load current state ───────────────────────────────
+async function loadState() {
+  try {
+    const r = await fetch('/api/onboarding/state')
+    const s = await r.json()
+    if (s.version) $('wz-version').textContent = 'v' + s.version
+    hasLiveAgent = !!s.hasLiveAgent
+
+    const avail = $('wz-sandbox-avail')
+    if (s.sandbox && s.sandbox.available) {
+      avail.textContent = `Sandbox is supported on this host (bubblewrap ${s.sandbox.version || 'available'}).`
+    } else {
+      avail.innerHTML = 'Standard/Strict need <code>bubblewrap</code>, which isn\'t installed here yet — the agent runs unsandboxed until it is. (Linux only.)'
+    }
+
+    if (s.config) {
+      if (s.config.cliPreference) $('wz-engine').value = s.config.cliPreference
+      if (s.config.permissionMode) $('wz-perm').value = s.config.permissionMode
+      $('wz-sandbox').value = s.config.sandbox ? (s.config.sandboxMode || 'standard') : 'off'
+      if (s.config.projectName) {
+        $('wz-project-line').innerHTML =
+          `This machine is now an Orquesta agent for <strong>${escapeHtml(s.config.projectName)}</strong>. Your team can send prompts from the dashboard and they run right here — on your machine, against your code.`
+      }
+    }
+    if (!hasLiveAgent) {
+      $('wz-no-live').hidden = false
+      $('wz-apply-btn').disabled = true
+    }
+  } catch {
+    $('wz-no-live').hidden = false
+    $('wz-apply-btn').disabled = true
+  }
+}
+
+function escapeHtml(str) {
+  return String(str).replace(/[&<>"']/g, (c) => (
+    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+  ))
+}
+
+loadState()
+render()