openclacky 1.3.4 → 1.3.6

data/lib/clacky/web/app.css

@@ -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;
@@ -2456,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,
@@ -2690,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;
@@ -2721,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; }
@@ -4406,6 +4486,7 @@ body {
   border-radius: 10px;
   padding: 0.625rem 0.875rem;
   background: var(--color-bg-secondary);
+  margin-bottom: 0.625rem;
 }
 .backup-auto-card .backup-auto-row {
   margin: 0.25rem 0;
@@ -4437,6 +4518,43 @@ body {
   font-size: 0.75rem;
   color: var(--color-text-secondary);
 }
+.backup-dest-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.625rem 0 0.25rem;
+  padding-top: 0.625rem;
+  border-top: 1px solid var(--color-border-primary);
+}
+.backup-dest-label {
+  font-size: 0.78125rem;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.backup-dest-path {
+  font-size: 0.78125rem;
+  color: var(--color-text-primary);
+  font-family: var(--font-mono, monospace);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.btn-settings-link {
+  flex-shrink: 0;
+  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  color: var(--color-accent-primary);
+  font-size: 0.75rem;
+  padding: 0.25rem 0.625rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.btn-settings-link:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-accent-primary);
+}
 .backup-actions {
   display: flex;
   align-items: center;
@@ -4444,6 +4562,21 @@ body {
   flex-wrap: wrap;
 }
 
+.backup-config-row {
+  margin-top: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border);
+}
+.btn-settings-action--file {
+  cursor: pointer;
+}
+.backup-actions-sep {
+  width: 1px;
+  height: 1.25rem;
+  background: var(--color-border);
+  flex-shrink: 0;
+}
+
 .settings-network-url {
   display: flex;
   flex-direction: column;
@@ -6929,10 +7062,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;
@@ -7468,7 +7601,7 @@ body.setup-mode[data-theme="dark"] {
   cursor: pointer;
   transition: background .15s, opacity .15s;
 }
-.setup-submit-btn:hover    { background: #2563eb; }
+.setup-submit-btn:hover    { background: var(--color-button-primary-hover); }
 .setup-submit-btn:disabled { opacity: .5; cursor: default; }
 
 /* ── Onboard panel ───────────────────────────────────────────────────────── */
@@ -10046,7 +10179,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 {
@@ -10906,7 +11039,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;
@@ -11019,6 +11152,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;

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

@@ -575,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

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

@@ -13,9 +13,7 @@ const Sidebar = (() => {
   function init() {
     // Settings button toggles between "settings" and "welcome" view.
     document.getElementById("btn-settings").addEventListener("click", () => {
-      if (Router.current === "settings") {
-        Router.navigate("welcome");
-      } else {
+      if (Router.current !== "settings") {
         Router.navigate("settings");
       }
     });

data/lib/clacky/web/features/backup/store.js

@@ -66,6 +66,29 @@ const BackupStore = (() => {
       }
     },
 
+    async openFolder() {
+      try {
+        await fetch("/api/backup/open-folder", { method: "POST" });
+      } catch (e) {
+        // Non-critical, fail quietly.
+      }
+    },
+
+    /** Upload a tar.gz archive to restore ~/.clacky. Returns { ok, error }. */
+    async restore(arrayBuffer) {
+      try {
+        const res = await fetch("/api/backup/restore", {
+          method: "POST",
+          headers: { "Content-Type": "application/octet-stream" },
+          body: arrayBuffer
+        });
+        const data = await res.json().catch(() => ({}));
+        return res.ok ? { ok: true } : { ok: false, error: data.error || "Restore failed" };
+      } catch (e) {
+        return { ok: false, error: e.message };
+      }
+    },
+
     /** Fetch a one-off archive. Returns { ok, blob, filename, error }. */
     async fetchArchive() {
       try {

data/lib/clacky/web/features/backup/view.js

@@ -1,17 +1,8 @@
-// ── Backup · view — settings rendering, toggles, download UI ──────────────
-//
-// Renders the backup settings panel, wires the toggles + download button, and
-// drives the file download from a blob. Reads through BackupStore.state; all
-// I/O goes through store actions. Re-renders on store change events.
-//
-// Augments the `Backup` facade with load (re-exposing the store action so the
-// existing Settings caller keeps working).
-//
-// Depends on: BackupStore, I18n.
-// ───────────────────────────────────────────────────────────────────────────
+// ── Backup · view — settings rendering, toggles, download/restore UI ──────
 
 const BackupView = (() => {
   const $ = (id) => document.getElementById(id);
+  let _restoreStatusEl = null;
 
   function _fmtDate(iso) {
     if (!iso) return "";
@@ -19,8 +10,12 @@ const BackupView = (() => {
   }
 
   function _render() {
-    const cfg = Backup.state.config;
-    if (!Backup.state.status) return;
+    const cfg    = Backup.state.config;
+    const status = Backup.state.status;
+    if (!status) return;
+
+    const autoToggle = $("backup-auto-toggle");
+    if (autoToggle) autoToggle.checked = !!cfg.enabled;
 
     const incl = $("backup-include-sessions");
     if (incl) {
@@ -28,8 +23,8 @@ const BackupView = (() => {
       incl.disabled = !cfg.enabled;
     }
 
-    const autoToggle = $("backup-auto-toggle");
-    if (autoToggle) autoToggle.checked = !!cfg.enabled;
+    const destPath = $("backup-dest-path");
+    if (destPath) destPath.textContent = status.dest_dir || "—";
 
     _renderLastRun(cfg);
   }
@@ -48,10 +43,10 @@ const BackupView = (() => {
   }
 
   async function _downloadNow() {
-    const btn = $("btn-backup-now");
-    const el = $("backup-status");
+    const btn      = $("btn-backup-now");
+    const statusEl = $("backup-manual-status");
     if (btn) btn.disabled = true;
-    if (el) { el.textContent = I18n.t("settings.backup.running"); el.className = "model-test-result"; }
+    if (statusEl) { statusEl.textContent = I18n.t("settings.backup.downloading"); statusEl.className = "model-test-result"; }
 
     const res = await Backup.fetchArchive();
     if (res.ok) {
@@ -63,14 +58,32 @@ const BackupView = (() => {
       a.click();
       a.remove();
       URL.revokeObjectURL(url);
-      if (el) { el.textContent = I18n.t("settings.backup.downloaded"); el.className = "model-test-result success"; }
-    } else if (el) {
-      el.textContent = I18n.t("settings.backup.lastError", { msg: res.error });
-      el.className = "model-test-result error";
+      if (statusEl) { statusEl.textContent = I18n.t("settings.backup.downloaded"); statusEl.className = "model-test-result success"; }
+    } else if (statusEl) {
+      statusEl.textContent = I18n.t("settings.backup.lastError", { msg: res.error });
+      statusEl.className = "model-test-result error";
     }
     if (btn) btn.disabled = false;
   }
 
+  async function _restoreBackup(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+    e.target.value = "";
+
+    const statusEl = $("backup-manual-status");
+    if (statusEl) { statusEl.textContent = I18n.t("settings.backup.restoring"); statusEl.className = "model-test-result"; }
+
+    const buf = await file.arrayBuffer();
+    const res = await Backup.restore(buf);
+    if (res.ok) {
+      if (statusEl) { statusEl.textContent = I18n.t("settings.backup.restoreOk"); statusEl.className = "model-test-result success"; }
+      _restoreStatusEl = statusEl;
+    } else {
+      if (statusEl) { statusEl.textContent = res.error || "Restore failed"; statusEl.className = "model-test-result error"; }
+    }
+  }
+
   function _bind() {
     const btn = $("btn-backup-now");
     if (btn) btn.addEventListener("click", _downloadNow);
@@ -80,11 +93,25 @@ const BackupView = (() => {
 
     const incl = $("backup-include-sessions");
     if (incl) incl.addEventListener("change", () => Backup.saveConfig({ include_sessions: incl.checked }));
+
+    const openBtn = $("btn-backup-open-folder");
+    if (openBtn) openBtn.addEventListener("click", () => Backup.openFolder());
+
+    const restoreInput = $("input-backup-restore");
+    if (restoreInput) restoreInput.addEventListener("change", _restoreBackup);
   }
 
   function _subscribe() {
     Backup.on("backup:changed", _render);
     document.addEventListener("DOMContentLoaded", _bind);
+    WS.onEvent(ev => {
+      if (ev.type !== "_ws_connected" || !_restoreStatusEl) return;
+      const el = _restoreStatusEl;
+      _restoreStatusEl = null;
+      el.textContent = I18n.t("settings.backup.restartOk");
+      el.className = "model-test-result success";
+      if (typeof Settings !== "undefined") Settings.open();
+    });
   }
 
   return { init: _subscribe };

data/lib/clacky/web/features/brand/view.js

@@ -18,6 +18,7 @@ const BrandView = (() => {
     if (!data || !data.branded) return;
 
     if (data.needs_activation) {
+      if (data.theme_color) Settings.applyAccentColor(data.theme_color, { persist: true });
       _showActivationBanner(data.product_name);
       _applyHeaderLogo();
       if (data.distribution_refresh_pending) _scheduleDistributionRefreshPoll();
@@ -153,6 +154,7 @@ const BrandView = (() => {
       if (data.ok) {
         _setResult(true, I18n.t("brand.activate.success"));
         if (data.product_name) _applyBrandName(data.product_name);
+        if (data.theme_color) Settings.applyAccentColor(data.theme_color, { persist: true });
         Brand.clearBrandCache();
         _applyHeaderLogo();
         setTimeout(_bootUI, 800);
@@ -201,13 +203,14 @@ const BrandView = (() => {
       const brandWrap = document.getElementById("header-brand");
 
       if (info.theme_color) {
-        const root = document.documentElement;
-        root.style.setProperty("--color-accent-primary",      info.theme_color);
-        root.style.setProperty("--color-accent-hover",        info.theme_color);
-        root.style.setProperty("--color-button-primary",      info.theme_color);
-        root.style.setProperty("--color-button-primary-hover", info.theme_color);
         const metaTheme = document.querySelector("meta[name='theme-color']");
         if (metaTheme) metaTheme.setAttribute("content", info.theme_color);
+      }
+      const userAccent = (() => { try { return localStorage.getItem("clacky-accent-color"); } catch (_) { return null; } })();
+      if (userAccent) {
+        Settings.applyAccentColor(userAccent, { persist: false });
+      } else if (info.theme_color) {
+        Settings.applyAccentColor(info.theme_color, { persist: true });
       } else {
         const root = document.documentElement;
         root.style.removeProperty("--color-accent-primary");

data/lib/clacky/web/features/channels/store.js

@@ -37,26 +37,7 @@ const ChannelsStore = (() => {
   // Create a session, register it, queue a command, and navigate to it.
   async function _sendToAgent(command, sessionName) {
     try {
-      const maxN = Sessions.all.reduce((max, s) => {
-        const m = s.name.match(/^Session (\d+)$/);
-        return m ? Math.max(max, parseInt(m[1], 10)) : max;
-      }, 0);
-      const name = sessionName || ("Session " + (maxN + 1));
-
-      const res = await fetch("/api/sessions", {
-        method:  "POST",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ name, source: "setup" }),
-      });
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || I18n.t("channels.sessionError"));
-      const session = data.session;
-      if (!session) throw new Error(I18n.t("channels.noSession"));
-
-      Sessions.add(session);
-      Sessions.renderList();
-      Sessions.setPendingMessage(session.id, command);
-      Sessions.select(session.id);
+      await Sessions.startWith(command, { name: sessionName });
     } catch (e) {
       alert("Error: " + e.message);
     }

data/lib/clacky/web/features/mcp/store.js

@@ -43,26 +43,7 @@ const McpStore = (() => {
 
   async function _sendToAgent(command, sessionName) {
     try {
-      const maxN = Sessions.all.reduce((max, s) => {
-        const m = s.name.match(/^Session (\d+)$/);
-        return m ? Math.max(max, parseInt(m[1], 10)) : max;
-      }, 0);
-      const name = sessionName || ("Session " + (maxN + 1));
-
-      const res = await fetch("/api/sessions", {
-        method:  "POST",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ name, source: "mcp" }),
-      });
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "failed to create session");
-      const session = data.session;
-      if (!session) throw new Error("no session returned");
-
-      Sessions.add(session);
-      Sessions.renderList();
-      Sessions.setPendingMessage(session.id, command);
-      Sessions.select(session.id);
+      await Sessions.startWith(command, { name: sessionName });
     } catch (e) {
       alert("Error: " + e.message);
     }

data/lib/clacky/web/features/profile/store.js

@@ -64,19 +64,7 @@ const ProfileStore = (() => {
   }
 
   async function _openCurateSession(name, command) {
-    const res     = await fetch("/api/sessions", {
-      method:  "POST",
-      headers: { "Content-Type": "application/json" },
-      body:    JSON.stringify({ name, source: "onboard" })
-    });
-    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, command);
-    Sessions.select(session.id);
+    await Sessions.startWith(command, { name, source: "onboard" });
   }
 
   const Profile = {