openclacky 1.3.3 → 1.3.5

data/lib/clacky/web/app.css

@@ -526,7 +526,7 @@ body {
 /* The sidebar sits on the outer frame (bg-primary) so it's visibly a layer
    BEHIND the chat surface (bg-secondary). Subtle right border separates them. */
 #sidebar {
-  --sidebar-width: 15rem;
+  --sidebar-width: 16rem;
   width: var(--sidebar-width);
   min-width: var(--sidebar-width);
   background: var(--color-bg-primary);
@@ -650,38 +650,38 @@ body {
   position: relative;
   display: flex;
   align-items: center;
-  border-radius: 5px;
+  border-radius: 6px;
   overflow: visible;
 }
 .btn-split-main {
-  height: 1.375rem;
-  padding: 0 0.5rem;
+  height: 1.5rem;
+  padding: 0 0.625rem;
   border: none;
-  border-radius: 5px 0 0 5px;
+  border-radius: 6px 0 0 6px;
   background: var(--color-accent-primary);
   color: #fff;
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-weight: 500;
   white-space: nowrap;
   line-height: 1;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
+  transition: background 0.15s, box-shadow 0.15s;
 }
 .btn-split-main:hover {
   background: var(--color-button-primary-hover);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
 .btn-split-arrow {
-  height: 1.375rem;
-  padding: 0 0.25rem;
+  height: 1.5rem;
+  padding: 0 0.35rem;
   border: none;
   border-left: 1px solid rgba(255,255,255,0.3);
-  border-radius: 0 5px 5px 0;
+  border-radius: 0 6px 6px 0;
   background: var(--color-accent-primary);
   color: #fff;
-  font-size: 0.625rem;
+  font-size: 0.75rem;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.15s;
 }
 .btn-split-arrow:hover {
   background: var(--color-button-primary-hover);
@@ -690,7 +690,7 @@ body {
 /* ── Dropdown menu ───────────────────────────────────────────────────────── */
 .new-session-dropdown {
   position: absolute;
-  top: calc(100% + 0.25rem);
+  top: 100%;
   right: 0;
   min-width: 11.25rem;
   background: var(--color-bg-card);
@@ -698,13 +698,13 @@ body {
   border-radius: 7px;
   box-shadow: var(--shadow-md);
   z-index: 200;
-  padding: 0.25rem 0;
+  padding: 0.375rem 0 0.25rem;
   overflow: hidden;
 }
 .new-session-dropdown[hidden] { display: none; }
 .dropdown-item {
-  padding: 0.25rem 0.625rem;
-  font-size: 0.6875rem;
+  padding: 0.4rem 0.875rem;
+  font-size: 0.8125rem;
   color: var(--color-text-secondary);
   cursor: pointer;
   white-space: nowrap;
@@ -1799,7 +1799,7 @@ body {
   white-space: nowrap;
   transition: background .12s;
 }
-.task-run-btn:hover { background: var(--color-accent-hover); }
+.task-run-btn:hover { background: var(--color-button-primary-hover); }
 .task-action-btn {
   display: inline-flex;
   align-items: center;
@@ -1938,7 +1938,7 @@ body {
    the slot has no panels for the current agent it stays empty and the whole
    column collapses to zero width. */
 #session-aside {
-  --session-aside-width: 360px;
+  --session-aside-width: 16rem;
   width: var(--session-aside-width);
   flex-shrink: 0;
   position: relative;
@@ -1976,7 +1976,7 @@ body {
   transition: background-color var(--transition-base);
 }
 .session-aside-resize:hover::after,
-.session-aside-resize.active::after { background: var(--color-accent-primary); }
+.session-aside-resize.active::after { background: transparent; }
 
 .session-aside-collapse {
   position: absolute;
@@ -2271,13 +2271,16 @@ body {
   /* Sit above the next message in case text would otherwise clip beneath it. */
   z-index: 1;
 }
-.msg:hover .msg-time {
+.msg:hover .msg-time,
+.msg-user-wrap:hover .msg-time {
   opacity: 1;
   transform: translateY(0);
 }
 /* Time color / alignment: anchor to the bubble's own side, let width be
    driven by content — prevents overflow on narrow bubbles. */
-.msg-user .msg-time      { display: none; }
+/* User timestamp: appended to .msg-user-wrap (not bubble), sits below action
+   buttons, right-aligned. */
+.msg-user-wrap > .msg-time { color: var(--color-text-secondary); top: auto; bottom: 0.2rem; right: 0; left: auto; padding-right: 0.25rem; }
 .msg-assistant .msg-time { color: var(--color-text-secondary); left: 0;  right: auto; padding-left: 0.25rem; }
 
 .msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); white-space: pre-wrap; }
@@ -2289,11 +2292,11 @@ body {
   position: relative;
   display: flex;
   justify-content: flex-end;
-  padding-bottom: 1.8rem;
+  padding-bottom: 3rem;
 }
 .msg-user-actions {
   position: absolute;
-  top: calc(100% - 1.5rem + 2px);
+  bottom: 1.1rem;
   right: 0;
   display: flex;
   gap: 0.125rem;
@@ -2305,6 +2308,7 @@ body {
 .msg-user-wrap:hover .msg-user-actions { opacity: 1; pointer-events: auto; }
 .msg-user-wrap:has(.msg-user.editing) { padding-bottom: 0; }
 .msg-user-wrap:has(.msg-user.editing) .msg-user-actions { display: none; }
+.msg-user-wrap:has(.msg-user.editing) .msg-time { display: none; }
 
 .msg-user-action-btn {
   display: inline-flex;
@@ -2452,6 +2456,36 @@ body {
   .msg-copy-btn { opacity: 0.65; }
 }
 
+/* ── Inline "start" button on unchecked task-list items ──────────────────── */
+.msg-assistant li.task-list-item { position: relative; }
+.msg-todo-spawn {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.5rem;
+  padding: 0.05rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 5px;
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  opacity: 0;
+  vertical-align: middle;
+  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.msg-assistant:hover .msg-todo-spawn,
+.msg-todo-spawn:focus-visible { opacity: 1; }
+.msg-todo-spawn:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-secondary);
+}
+.msg-todo-spawn:disabled { opacity: 0.5; cursor: default; }
+@media (hover: none) {
+  .msg-todo-spawn { opacity: 0.7; }
+}
+
 /* ── Markdown rendering inside assistant messages ────────────────────────── */
 .msg-assistant p:last-child { margin-bottom: 0; }
 .msg-assistant h1, .msg-assistant h2, .msg-assistant h3,
@@ -2686,7 +2720,7 @@ body {
   align-self: flex-start;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 .msg-error .retry-btn {
   align-self: flex-start;
@@ -2717,6 +2751,56 @@ body {
 .msg-error a:hover {
   opacity: 0.8;
 }
+.error-raw-detail {
+  margin-top: -0.125rem;
+  font-size: 0.75rem;
+  align-self: flex-start;
+  max-width: 100%;
+}
+.error-raw-detail summary {
+  cursor: pointer;
+  font-size: 0.7rem;
+  font-weight: 500;
+  user-select: none;
+  color: var(--color-error);
+  opacity: 0.6;
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  transition: opacity 0.15s;
+}
+.error-raw-detail summary::-webkit-details-marker { display: none; }
+.error-raw-detail summary::before {
+  content: "";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid currentColor;
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+.error-raw-detail[open] summary::before {
+  transform: rotate(90deg);
+}
+.error-raw-detail summary:hover {
+  opacity: 0.9;
+}
+.error-raw-detail pre {
+  margin: 0.375rem 0 0;
+  padding: 0.5rem 0.625rem;
+  background: rgba(255, 59, 48, 0.05);
+  border: 1px solid rgba(255, 59, 48, 0.12);
+  border-radius: 5px;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.7rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--color-text-secondary);
+}
 .msg-success   { color: var(--color-success); align-self: flex-start; font-size: 0.8125rem; }
 .tool-name     { color: var(--color-warning); font-weight: 600; }
 .progress-msg  { color: var(--color-accent-primary); font-size: 0.75rem; align-self: center; }
@@ -4583,7 +4667,6 @@ body {
   font-size: 0.8125rem;
   color: var(--color-text-primary);
   cursor: pointer;
-  margin-top: 0.5rem;
 }
 .model-field-checkbox input[type="checkbox"] {
   width: 15px;
@@ -4780,7 +4863,7 @@ body {
 /* ── Model Cards Grid Container ─────────────────────────────────────────────── */
 #model-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 1rem;
 }
 
@@ -6698,24 +6781,14 @@ body {
   white-space: nowrap;
 }
 .brand-skill-version.installed {
-  background: #1f3a5f;
-  color: #7eb8f7;
-  border: 1px solid #1d4070;
+  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
+  color: var(--color-accent-primary);
+  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
 }
 .brand-skill-version.latest {
-  background: #1f4e9e;
-  color: #bfdbfe;
-  border: 1px solid #1d4070;
-}
-[data-theme="light"] .brand-skill-version.installed {
-  background: #eff6ff;
-  color: #1d4ed8;
-  border: 1px solid #bfdbfe;
-}
-[data-theme="light"] .brand-skill-version.latest {
-  background: #1d4ed8;
+  background: var(--color-accent-primary);
   color: #ffffff;
-  border: 1px solid #1e40af;
+  border: 1px solid var(--color-accent-primary);
 }
 .brand-skill-update-arrow {
   color: var(--color-text-secondary);
@@ -6795,17 +6868,11 @@ body {
   border-color: var(--color-accent-primary);
 }
 .btn-brand-update {
-  background: #1f4e9e;
-  color: #bfdbfe;
-  border: 1px solid #1d4070;
-}
-.btn-brand-update:hover { background: #1a3f85; }
-[data-theme="light"] .btn-brand-update {
-  background: #1d4ed8;
+  background: var(--color-accent-primary);
   color: #ffffff;
-  border: 1px solid #1e40af;
+  border: 1px solid var(--color-accent-primary);
 }
-[data-theme="light"] .btn-brand-update:hover { background: #1e40af; }
+.btn-brand-update:hover { background: var(--color-accent-hover); }
 .btn-brand-install:disabled,
 .btn-brand-update:disabled {
   opacity: 0.5;
@@ -6846,6 +6913,22 @@ body {
   border-color: var(--color-error-border, #f5c6c6);
   background: var(--color-error-bg, #fff0f0);
 }
+.btn-skill-edit {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.btn-skill-edit:hover {
+  color: var(--color-text-primary);
+  border-color: var(--color-border-primary);
+  background: var(--color-bg-hover);
+}
 
 
 /* ── CodeEditor (CodeMirror 6) Modal ────────────────────────────────────── */
@@ -6926,10 +7009,10 @@ body {
   background: var(--color-bg-hover);
 }
 .code-editor-body .cm-activeLine {
-  background: var(--color-bg-hover);
+  background: color-mix(in srgb, var(--color-bg-hover) 60%, transparent);
 }
 .code-editor-body .cm-selectionBackground {
-  background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent) !important;
+  background: color-mix(in srgb, var(--color-accent-primary) 40%, transparent) !important;
 }
 .code-editor-footer {
   display: flex;
@@ -7396,28 +7479,35 @@ body.setup-mode[data-theme="dark"] {
   transform: translateY(1px);
 }
 #setup-device-error {
-  margin-top: 0.5rem;
+  margin-top: 0;
+  min-height: 0;
 }
 #setup-device-error.result-fail { color: var(--color-error); }
 
 /* Manual-config collapsible (secondary path) */
-#setup-manual-details {
-  margin-top: 0.25rem;
-}
-#setup-manual-summary {
+#setup-manual-toggle {
+  display: block;
+  width: 100%;
+  margin-top: 0.5rem;
+  padding: 0.5rem 0;
+  background: none;
+  border: none;
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   color: var(--color-text-secondary);
   text-align: center;
-  list-style: none;
-  padding: 0.5rem 0;
+  text-decoration: underline;
+  text-underline-offset: 3px;
   user-select: none;
+  transition: color 0.15s;
 }
-#setup-manual-summary::-webkit-details-marker { display: none; }
-#setup-manual-summary:hover { color: var(--color-text-primary); }
-#setup-manual-details[open] #setup-manual-summary {
-  margin-bottom: 0.5rem;
-  border-bottom: 1px solid var(--color-border-primary);
+#setup-manual-toggle:hover {
+  color: var(--color-text-primary);
+}
+#setup-manual-section {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border-primary);
 }
 
 /* Bottom action row: [← Back]  [Test & Continue →] */
@@ -10036,7 +10126,7 @@ body.setup-mode[data-theme="dark"] {
   border-right: 1px solid var(--color-border-primary);
 }
 .billing-period-btn:hover {
-  background: var(--color-bg-tertiary);
+  background: var(--color-bg-hover);
   color: var(--color-text-primary);
 }
 .billing-period-btn.active {
@@ -10896,7 +10986,7 @@ body.setup-mode[data-theme="dark"] {
   white-space: nowrap;
   transition: opacity 0.15s ease, transform 0.05s ease;
 }
-.btn-mcp-cta:hover { opacity: 0.85; }
+.btn-mcp-cta:hover { background: var(--color-button-primary-hover) }
 .btn-mcp-cta:active { transform: scale(0.98); }
 .btn-mcp-cta-large {
   padding: 0.625rem 1.125rem;
@@ -11009,6 +11099,49 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-error, #d33);
 }
 
+/* ── Accent Color Swatches ───────────────────────────────────────────── */
+.settings-accent-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+}
+
+.settings-accent-swatch {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.15s;
+  outline: none;
+  position: relative;
+}
+
+.settings-accent-swatch:hover {
+  transform: scale(1.15);
+}
+
+.settings-accent-swatch.active::after {
+  content: "";
+  position: absolute;
+  width: 0.375rem;
+  height: 0.625rem;
+  border-right: 0.125rem solid white;
+  border-bottom: 0.125rem solid white;
+  top: 46%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.swatch-indigo         { background: #4f46e5; }
+.swatch-aurora-blue    { background: #3B82F6; }
+.swatch-forest-green   { background: #10B981; }
+.swatch-sunrise-orange { background: #F59E0B; }
+.swatch-rose-violet    { background: #8B5CF6; }
+.swatch-coral-red      { background: #EF4444; }
+
 /* ── Sessions List ───────────────────────────────────────────────────── */
 .billing-sessions-row {
   margin-top: 1rem;
@@ -12113,16 +12246,3 @@ body.setup-mode[data-theme="dark"] {
   }
 }
 
-/* ════ Media output directory subsection (nested under #media-section) ════ */
-#media-output-dir-section.settings-subsection {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-width: 48rem;
-}
-#media-output-dir-section .settings-subsection-desc {
-  font-size: 0.8125rem;
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-  margin: 0;
-}

data/lib/clacky/web/app.js

@@ -10,6 +10,14 @@
 // ── DOM helper (shared by all modules loaded after this) ──────────────────
 const $ = id => document.getElementById(id);
 
+// ── Inject X-Lang header into every fetch request ─────────────────────────
+const _nativeFetch = window.fetch;
+window.fetch = function(input, init = {}) {
+  const headers = new Headers(init.headers || {});
+  if (!headers.has("X-Lang")) headers.set("X-Lang", I18n.lang());
+  return _nativeFetch.call(this, input, { ...init, headers });
+};
+
 // ── Utilities (shared) ────────────────────────────────────────────────────
 function escapeHtml(str) {
   return String(str)
@@ -325,13 +333,53 @@ const Modal = (() => {
   /** Show a yes/no confirmation dialog. Returns a Promise<boolean>. */
   function confirm(message) {
     return new Promise(resolve => {
+      const overlay = $("modal-overlay");
+      $("modal-message").textContent = message;
+      $("modal-skip-label").style.display = "none";
+      $("modal-skip-cb").checked = false;
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
+
+      const cleanup = (result) => {
+        overlay.style.display = "none";
+        $("modal-yes").onclick = null;
+        $("modal-no").onclick  = null;
+        resolve(result);
+      };
+      $("modal-yes").onclick = () => cleanup(true);
+      $("modal-no").onclick  = () => cleanup(false);
+    });
+  }
+
+  /**
+   * Like confirm(), but shows a "don't show again" checkbox.
+   * If localStorage[storageKey] === "1", resolves true immediately.
+   * Returns Promise<boolean>.
+   */
+  function confirmOnce(storageKey, message, skipLabel) {
+    if (localStorage.getItem(storageKey) === "1") return Promise.resolve(true);
+
+    return new Promise(resolve => {
+      const overlay = $("modal-overlay");
       $("modal-message").textContent   = message;
-      $("modal-overlay").style.display = "flex";
+      $("modal-skip-text").textContent = skipLabel;
+      $("modal-skip-cb").checked       = false;
+      $("modal-skip-label").style.display = "flex";
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
 
       const cleanup = (result) => {
-        $("modal-overlay").style.display = "none";
+        overlay.style.display = "none";
+        $("modal-skip-label").style.display = "none";
         $("modal-yes").onclick = null;
         $("modal-no").onclick  = null;
+        if (result && $("modal-skip-cb").checked) {
+          localStorage.setItem(storageKey, "1");
+        }
         resolve(result);
       };
       $("modal-yes").onclick = () => cleanup(true);
@@ -342,10 +390,15 @@ const Modal = (() => {
   /** Show a text input prompt dialog. Returns a Promise<string|null>. */
   function prompt(message, defaultValue = "") {
     return new Promise(resolve => {
+      const overlay = $("prompt-modal-overlay");
       $("prompt-modal-message").textContent = message;
       const input = $("prompt-modal-input");
       input.value = defaultValue;
-      $("prompt-modal-overlay").style.display = "flex";
+      // Re-attach to <body> end so it stacks above dynamically-appended overlays.
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
       
       // Auto-focus and select all text
       setTimeout(() => {
@@ -375,10 +428,15 @@ const Modal = (() => {
   /** Show a rename dialog. Returns a Promise<string|null>. */
   function rename(currentName = "") {
     return new Promise(resolve => {
+      const overlay = $("rename-modal-overlay");
       const input = $("rename-modal-input");
       input.value = currentName;
       input.classList.remove("input-error");
-      $("rename-modal-overlay").style.display = "flex";
+      // Re-attach to <body> end so it stacks above dynamically-appended overlays.
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
       
       setTimeout(() => {
         input.focus();
@@ -423,7 +481,7 @@ const Modal = (() => {
     });
   }
 
-  return { confirm, prompt, rename };
+  return { confirm, confirmOnce, prompt, rename };
 })();
 
 // ── Toast helper ──────────────────────────────────────────────────────────
@@ -550,7 +608,7 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
   let startW = 0;
 
   // Restore saved width
-  const saved = localStorage.getItem("sidebar-width");
+  const saved = localStorage.getItem("clacky-sidebar-width");
   if (saved) {
     const w = parseFloat(saved);
     if (w >= MIN_W && w <= MAX_W) {
@@ -583,7 +641,7 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
     handle.classList.remove("active");
     document.body.style.cursor = "";
     document.body.style.userSelect = "";
-    localStorage.setItem("sidebar-width", _getWidth());
+    localStorage.setItem("clacky-sidebar-width", _getWidth());
   });
 })();
 

data/lib/clacky/web/components/onboard.js

@@ -110,6 +110,11 @@ const Onboard = (() => {
     $("setup-phase-key").style.display  = step === "key"  ? "" : "none";
     $("setup-dot-1").className = "setup-step" + (step === "lang" ? " active" : " done");
     $("setup-dot-2").className = "setup-step" + (step === "key"  ? " active" : "");
+    if (step === "key") {
+      $("setup-device-block").style.display   = "";
+      $("setup-manual-toggle").style.display  = "";
+      $("setup-manual-section").style.display = "none";
+    }
   }
 
   // Step 2 — API key setup
@@ -367,9 +372,20 @@ const Onboard = (() => {
 
     $("setup-btn-test").addEventListener("click", _testAndSave);
 
-    // Back to Step 1
+    $("setup-manual-toggle").addEventListener("click", () => {
+      $("setup-device-block").style.display  = "none";
+      $("setup-manual-toggle").style.display = "none";
+      $("setup-manual-section").style.display = "";
+    });
+
     $("setup-btn-back").addEventListener("click", () => {
-      _showSetupStep("lang");
+      if ($("setup-manual-section").style.display !== "none") {
+        $("setup-device-block").style.display  = "";
+        $("setup-manual-toggle").style.display = "";
+        $("setup-manual-section").style.display = "none";
+      } else {
+        _showSetupStep("lang");
+      }
     });
 
     _bindDeviceStep();
@@ -559,20 +575,7 @@ const Onboard = (() => {
   async function _launchOnboardSession() {
     try {
       await _complete();
-      const res = await fetch("/api/sessions", {
-        method:  "POST",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ name: "Onboard", source: "setup" })
-      });
-      const data    = await res.json();
-      const session = data.session;
-      if (!session) throw new Error("No session returned");
-
-      Sessions.add(session);
-      Sessions.renderList();
-      Sessions.setPendingMessage(session.id, `/onboard lang:${_selectedLang}`);
-      Sessions.select(session.id);
-
+      await Sessions.startWith(`/onboard lang:${_selectedLang}`, { name: "Onboard", source: "setup" });
       _bootUI();
     } catch (_) {
       // Fallback: just boot normally if session creation fails