openclacky 1.3.6 → 1.3.7

data/lib/clacky/web/features/new-session/store.js

@@ -0,0 +1,186 @@
+// ── NewSession · store — agent list + selection + advanced options ────────
+//
+// Owns the state for the "new session" landing page: the list of agents
+// fetched from /api/agents, the current selection (persisted in localStorage),
+// and the advanced-options form values (name / model / working dir / init).
+// It never renders — NewSessionView owns the DOM.
+//
+// Also handles session creation: POST /api/sessions with the current selection
+// and returns the created session summary. Sending the first message is the
+// caller's job (via Sessions.setPendingMessage + Sessions.select).
+//
+// Depends on: Clacky.ext (for cross-module event emit).
+// ───────────────────────────────────────────────────────────────────────────
+
+const NewSessionStore = (() => {
+  const LS_AGENT_KEY = "openclacky.newSession.lastAgent";
+
+  const _state = {
+    agents: [],
+    selectedAgentId: null,
+    advanced: {
+      name: "",
+      modelId: "",
+      workingDir: "",
+      initProject: false,
+    },
+    advancedOpen: false,
+    creating: false,
+  };
+
+  const _listeners = {};
+
+  function _on(event, handler) {
+    (_listeners[event] ||= []).push(handler);
+    return () => {
+      const list = _listeners[event];
+      const i = list ? list.indexOf(handler) : -1;
+      if (i >= 0) list.splice(i, 1);
+    };
+  }
+
+  function _emit(event, payload) {
+    (_listeners[event] || []).forEach((h) => h(payload));
+    if (window.Clacky && Clacky.ext) Clacky.ext.emit(event, payload);
+  }
+
+  async function loadAgents() {
+    try {
+      const res = await fetch("/api/agents");
+      if (!res.ok) return;
+      const data = await res.json();
+      _state.agents = (data && data.agents) || [];
+
+      // Restore last-used agent from localStorage; fall back to the first
+      // available one (typically "general").
+      const remembered = localStorage.getItem(LS_AGENT_KEY);
+      const found = _state.agents.find((a) => a.id === remembered);
+      _state.selectedAgentId = found
+        ? found.id
+        : (_state.agents[0] && _state.agents[0].id) || "general";
+
+      _emit("newSession:agents-loaded", { agents: _state.agents });
+      _emit("newSession:selection-changed", { agentId: _state.selectedAgentId });
+    } catch (e) {
+      console.error("Failed to load agents:", e);
+    }
+  }
+
+  function selectAgent(agentId) {
+    if (!agentId || agentId === _state.selectedAgentId) return;
+    const found = _state.agents.find((a) => a.id === agentId);
+    if (!found) return;
+    _state.selectedAgentId = agentId;
+    localStorage.setItem(LS_AGENT_KEY, agentId);
+    _emit("newSession:selection-changed", { agentId });
+  }
+
+  function currentAgent() {
+    return _state.agents.find((a) => a.id === _state.selectedAgentId) || null;
+  }
+
+  function toggleAdvanced(open) {
+    _state.advancedOpen = open === undefined ? !_state.advancedOpen : !!open;
+    _emit("newSession:advanced-toggled", { open: _state.advancedOpen });
+  }
+
+  function updateAdvanced(patch) {
+    Object.assign(_state.advanced, patch);
+    _emit("newSession:advanced-changed", { advanced: _state.advanced });
+  }
+
+  async function loadModels() {
+    try {
+      const res = await fetch("/api/config");
+      if (!res.ok) return [];
+      const data = await res.json();
+      return (data && data.models) || [];
+    } catch (e) {
+      console.error("Failed to load models:", e);
+      return [];
+    }
+  }
+
+  async function loadDefaultDirectory() {
+    try {
+      const res = await fetch("/api/dirs");
+      if (!res.ok) return "";
+      const data = await res.json();
+      const home = data && data.home;
+      if (!home) return "";
+      return home.replace(/\/+$/, "") + "/clacky_workspace";
+    } catch (e) {
+      return "";
+    }
+  }
+
+  function _autoName(existingSessions) {
+    const maxN = (existingSessions || []).reduce((max, s) => {
+      const m = s.name && s.name.match(/^Session (\d+)$/);
+      return m ? Math.max(max, parseInt(m[1], 10)) : max;
+    }, 0);
+    return "Session " + (maxN + 1);
+  }
+
+  async function createSession({ existingSessions } = {}) {
+    if (_state.creating) return null;
+    _state.creating = true;
+    _emit("newSession:creating", { creating: true });
+
+    try {
+      const agentId = _state.selectedAgentId || "general";
+      const adv = _state.advanced;
+      const name = adv.name.trim() || _autoName(existingSessions);
+
+      const payload = { name, agent_profile: agentId, source: "manual" };
+      if (adv.workingDir.trim()) payload.working_dir = adv.workingDir.trim();
+      if (adv.modelId) payload.model_id = adv.modelId;
+
+      const res = await fetch("/api/sessions", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      const data = await res.json();
+
+      if (!res.ok) {
+        const msg = data.error || "unknown error";
+        const friendly = res.status === 409
+          ? I18n.t("sessions.dirNotEmpty")
+          : I18n.t("sessions.createError") + msg;
+        alert(friendly);
+        return null;
+      }
+
+      return data.session || null;
+    } catch (e) {
+      alert(I18n.t("sessions.createError") + e.message);
+      return null;
+    } finally {
+      _state.creating = false;
+      _emit("newSession:creating", { creating: false });
+    }
+  }
+
+  function reset() {
+    _state.advanced.name = "";
+    _state.advanced.initProject = false;
+    _emit("newSession:reset", {});
+  }
+
+  return {
+    get state() { return _state; },
+    on: _on,
+    loadAgents,
+    selectAgent,
+    currentAgent,
+    toggleAdvanced,
+    updateAdvanced,
+    loadModels,
+    loadDefaultDirectory,
+    createSession,
+    reset,
+  };
+})();
+
+window.NewSessionStore = NewSessionStore;

data/lib/clacky/web/features/new-session/view.js

@@ -0,0 +1,319 @@
+// ── NewSession · view — landing page for #new ─────────────────────────────
+//
+// Renders the "start a new session" page: agent card grid, first-message
+// composer, and the collapsible advanced-options section (name / model /
+// working dir / init-project). Reads state from NewSessionStore and delegates
+// I/O to it. On send, creates a session then hands off to Sessions.select()
+// with a pending first message so the existing chat pipeline handles delivery.
+//
+// Depends on: NewSessionStore, Sessions, I18n, Router.
+// ───────────────────────────────────────────────────────────────────────────
+
+const NewSessionView = (() => {
+  const $ = (id) => document.getElementById(id);
+
+  let _initialized = false;
+  let _modelsLoaded = false;
+
+  function _isZh() {
+    return I18n.lang && I18n.lang().startsWith("zh");
+  }
+
+  function _agentLabel(a) {
+    if (_isZh() && a.title_zh) return a.title_zh;
+    return a.title || a.id;
+  }
+
+  function _agentDesc(a) {
+    if (_isZh() && a.description_zh) return a.description_zh;
+    return a.description || "";
+  }
+
+  const LS_SEEN_AGENTS_KEY = "openclacky.newSession.seenAgents";
+
+  function _seenAgents() {
+    try {
+      const raw = localStorage.getItem(LS_SEEN_AGENTS_KEY);
+      return raw ? JSON.parse(raw) : [];
+    } catch (e) {
+      return [];
+    }
+  }
+
+  function _markAgentSeen(id) {
+    if (!id) return;
+    const seen = _seenAgents();
+    if (seen.includes(id)) return;
+    seen.push(id);
+    try { localStorage.setItem(LS_SEEN_AGENTS_KEY, JSON.stringify(seen)); } catch (e) { /* ignore */ }
+  }
+
+  // Builtin agents (general/coding/ext-studio) ship with the app and are not
+  // "extensions" from the user's point of view — no EXT badge, never NEW.
+  function _isBuiltin(a) {
+    return a.layer === "builtin";
+  }
+
+  function _isNewAgent(a) {
+    if (_isBuiltin(a) || a.source === "user") return false;
+    return !_seenAgents().includes(a.id);
+  }
+
+  function _renderAgents() {
+    const container = $("new-session-agents");
+    if (!container) return;
+    const agents = NewSessionStore.state.agents;
+    const selected = NewSessionStore.state.selectedAgentId;
+
+    container.innerHTML = "";
+    agents.forEach((a) => {
+      const card = document.createElement("button");
+      card.type = "button";
+      card.className = "agent-card" + (a.id === selected ? " agent-card--selected" : "");
+      card.dataset.agentId = a.id;
+
+      const title = document.createElement("div");
+      title.className = "agent-card-title";
+      title.textContent = _agentLabel(a);
+      if (_isNewAgent(a)) {
+        const isNew = document.createElement("span");
+        isNew.className = "agent-card-new";
+        isNew.textContent = "NEW";
+        title.appendChild(isNew);
+      }
+      card.appendChild(title);
+
+      const descText = _agentDesc(a);
+      if (descText) {
+        const desc = document.createElement("div");
+        desc.className = "agent-card-desc";
+        desc.textContent = descText;
+        card.appendChild(desc);
+      }
+
+      const author = (a.author || "").trim();
+      if (author) {
+        const by = document.createElement("div");
+        by.className = "agent-card-author";
+        by.textContent = _isZh() ? `作者 ${author}` : `by ${author}`;
+        card.appendChild(by);
+      }
+
+      if (!_isBuiltin(a) && a.source === "extension") {
+        const badge = document.createElement("span");
+        badge.className = "agent-card-badge";
+        badge.textContent = "EXT";
+        card.appendChild(badge);
+      } else if (a.source === "user") {
+        const badge = document.createElement("span");
+        badge.className = "agent-card-badge agent-card-badge--custom";
+        badge.textContent = "custom";
+        card.appendChild(badge);
+      }
+
+      card.addEventListener("click", () => {
+        _markAgentSeen(a.id);
+        NewSessionStore.selectAgent(a.id);
+        _renderAgents();
+      });
+      container.appendChild(card);
+    });
+
+    _updatePlaceholder();
+  }
+
+  function _updatePlaceholder() {
+    const input = $("new-session-input");
+    if (!input) return;
+    const agent = NewSessionStore.currentAgent();
+    const label = agent ? _agentLabel(agent) : "";
+    const tpl = I18n.t("sessions.new.placeholder");
+    input.placeholder = label
+      ? tpl.replace("{{agent}}", label)
+      : tpl.replace("{{agent}}", "");
+  }
+
+  async function _populateModels() {
+    if (_modelsLoaded) return;
+    const select = $("new-session-model");
+    if (!select) return;
+    const models = await NewSessionStore.loadModels();
+
+    select.innerHTML = "";
+    if (models.length === 0) {
+      const opt = document.createElement("option");
+      opt.value = "";
+      opt.textContent = "No models configured";
+      select.appendChild(opt);
+      _modelsLoaded = true;
+      return;
+    }
+
+    models.forEach((m) => {
+      const opt = document.createElement("option");
+      opt.value = m.id || "";
+      const typeBadge = m.type === "default" ? "[default] " : "";
+      opt.textContent = `${typeBadge}${m.model} (${m.api_key_masked})`;
+      if (m.type === "default") {
+        opt.selected = true;
+        NewSessionStore.updateAdvanced({ modelId: opt.value });
+      }
+      select.appendChild(opt);
+    });
+    _modelsLoaded = true;
+  }
+
+  async function _prefillDefaultDir() {
+    const dirInput = $("new-session-directory");
+    if (!dirInput || dirInput.value) return;
+    const home = await NewSessionStore.loadDefaultDirectory();
+    if (home && !dirInput.value) {
+      dirInput.value = home;
+      NewSessionStore.updateAdvanced({ workingDir: home });
+    }
+  }
+
+  function _updateInitProjectVisibility() {
+    const field = $("new-session-init-project-field");
+    if (!field) return;
+    const agent = NewSessionStore.currentAgent();
+    field.style.display = agent && agent.id === "coding" ? "block" : "none";
+  }
+
+  function _updateSendButton() {
+    const btn = $("new-session-send");
+    const input = $("new-session-input");
+    if (!btn || !input) return;
+    const hasText = input.value.trim().length > 0;
+    btn.disabled = !hasText || NewSessionStore.state.creating;
+  }
+
+  async function _submit() {
+    const input = $("new-session-input");
+    if (!input) return;
+    const content = input.value.trim();
+    if (!content) return;
+
+    const initCheckbox = $("new-session-init-project");
+    const initProject = initCheckbox && initCheckbox.checked;
+
+    const btn = $("new-session-send");
+    if (btn) btn.disabled = true;
+
+    const session = await NewSessionStore.createSession({
+      existingSessions: (Sessions && Sessions.all) || [],
+    });
+    if (!session) {
+      _updateSendButton();
+      return;
+    }
+
+    Sessions.add(session);
+    Sessions.setPendingMessage(session.id, content);
+    input.value = "";
+    NewSessionStore.reset();
+
+    // Hand off to the normal chat pipeline: this switches the panel, wires
+    // up WS subscription, and the pending message is sent once subscribed
+    // (see ws-dispatcher.js "subscribed" branch).
+    Sessions.select(session.id);
+  }
+
+  function _bindOnce() {
+    if (_initialized) return;
+    _initialized = true;
+
+    NewSessionStore.on("newSession:agents-loaded", _renderAgents);
+    NewSessionStore.on("newSession:selection-changed", () => {
+      _renderAgents();
+      _updateInitProjectVisibility();
+    });
+    NewSessionStore.on("newSession:creating", _updateSendButton);
+
+    const input = $("new-session-input");
+    if (input) {
+      input.addEventListener("input", _updateSendButton);
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+          e.preventDefault();
+          _submit();
+        }
+      });
+    }
+
+    const sendBtn = $("new-session-send");
+    if (sendBtn) sendBtn.addEventListener("click", _submit);
+
+    const toggle = $("new-session-toggle-advanced");
+    const advanced = $("new-session-advanced");
+    if (toggle && advanced) {
+      toggle.addEventListener("click", async () => {
+        const open = advanced.hidden;
+        advanced.hidden = !open;
+        toggle.classList.toggle("is-open", open);
+        if (open) {
+          await _populateModels();
+          await _prefillDefaultDir();
+        }
+        NewSessionStore.toggleAdvanced(open);
+      });
+    }
+
+    const nameInput = $("new-session-name");
+    if (nameInput) {
+      nameInput.addEventListener("input", (e) =>
+        NewSessionStore.updateAdvanced({ name: e.target.value })
+      );
+    }
+
+    const modelSelect = $("new-session-model");
+    if (modelSelect) {
+      modelSelect.addEventListener("change", (e) =>
+        NewSessionStore.updateAdvanced({ modelId: e.target.value })
+      );
+    }
+
+    const dirInput = $("new-session-directory");
+    if (dirInput) {
+      dirInput.addEventListener("input", (e) =>
+        NewSessionStore.updateAdvanced({ workingDir: e.target.value })
+      );
+    }
+
+    const browseBtn = $("new-session-browse-btn");
+    if (browseBtn && dirInput) {
+      browseBtn.addEventListener("click", async () => {
+        const start = dirInput.value.trim();
+        const picked = await window.openDirectoryPicker(start, null);
+        if (picked) {
+          dirInput.value = picked;
+          NewSessionStore.updateAdvanced({ workingDir: picked });
+        }
+      });
+    }
+
+    const initCheckbox = $("new-session-init-project");
+    if (initCheckbox) {
+      initCheckbox.addEventListener("change", (e) =>
+        NewSessionStore.updateAdvanced({ initProject: e.target.checked })
+      );
+    }
+  }
+
+  async function onPanelShow() {
+    _bindOnce();
+    if (NewSessionStore.state.agents.length === 0) {
+      await NewSessionStore.loadAgents();
+    } else {
+      _renderAgents();
+    }
+    _updateInitProjectVisibility();
+    _updateSendButton();
+    const input = $("new-session-input");
+    if (input) input.focus();
+  }
+
+  return { onPanelShow };
+})();
+
+window.NewSessionView = NewSessionView;

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

@@ -13,6 +13,11 @@
 // ───────────────────────────────────────────────────────────────────────────
 
 const ShareView = (() => {
+  const THEME_DOT = {
+    geek:  "#38bdf8",
+    light: "#6ee7b7",
+    warm:  "#ea580c"
+  };
   const THEME_KEY = "clacky-share-theme";
   const DRAFT_KEY = "clacky-share-draft";
 
@@ -158,32 +163,49 @@ const ShareView = (() => {
 
     _paintBackground(ctx, W, H, t, t.bg);
 
+    // ── Brand name ──
     ctx.fillStyle = t.title;
-    ctx.textAlign = "center";
-    ctx.font = "700 60px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
-    ctx.fillText(_brandName(), W / 2, 150);
+    ctx.textAlign = "left";
+    ctx.font = "800 72px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
+    ctx.fillText(_brandName(), 64, 140);
+
+    // ── Divider line ──
+    ctx.strokeStyle = t.hero;
+    ctx.lineWidth = 4;
+    ctx.lineCap = "round";
+    ctx.beginPath();
+    ctx.moveTo(64, 172);
+    ctx.lineTo(160, 172);
+    ctx.stroke();
 
+    // ── Copy text ──
     const text = (copy || "").trim() || I18n.t("share.poster.tagline", { brand: _brandName() });
     ctx.fillStyle = t.tagline;
-    _drawAutoText(ctx, text, W / 2, 250, W - 120, 480 - 250);
+    ctx.textAlign = "left";
+    _drawAutoTextLeft(ctx, text, 64, 210, W - 128, 420);
 
     const url = _shareUrl();
     if (url) {
-      const qrSize = 300;
-      const qrX = (W - qrSize) / 2;
-      const qrY = 560;
+      // ── QR code — bottom right ──
+      const qrSize = 180;
+      const qrX = W - qrSize - 56;
+      const qrY = H - qrSize - 100;
       ctx.fillStyle = "#ffffff";
-      _roundRect(ctx, qrX - 24, qrY - 24, qrSize + 48, qrSize + 48, 22);
+      _roundRect(ctx, qrX - 14, qrY - 14, qrSize + 28, qrSize + 28, 16);
       ctx.fill();
       _drawQrToCanvas(ctx, url, qrX, qrY, qrSize);
 
+      // ── Scan label under QR ──
       ctx.fillStyle = t.scan;
-      ctx.font = "400 28px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
-      ctx.fillText(I18n.t("share.poster.scan"), W / 2, qrY + qrSize + 80);
+      ctx.textAlign = "center";
+      ctx.font = "400 22px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
+      ctx.fillText(I18n.t("share.poster.scan"), qrX + qrSize / 2, qrY + qrSize + 44);
 
+      // ── Domain — bottom left ──
       ctx.fillStyle = t.scan;
-      ctx.font = "400 24px -apple-system, sans-serif";
-      ctx.fillText(url.replace(/^https?:\/\//, "").replace(/\/$/, ""), W / 2, H - 60);
+      ctx.textAlign = "left";
+      ctx.font = "300 24px -apple-system, sans-serif";
+      ctx.fillText(url.replace(/^https?:\/\//, "").replace(/\/$/, ""), 64, H - 56);
     }
 
     return canvas.toDataURL("image/png");
@@ -331,6 +353,27 @@ const ShareView = (() => {
     }
   }
 
+  function _drawAutoTextLeft(ctx, text, x, startY, maxWidth, maxHeight) {
+    const sizes = [52, 46, 40, 36, 32, 28, 24];
+    let chosen = null;
+    for (const size of sizes) {
+      ctx.font = "600 " + size + "px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
+      const lh = Math.round(size * 1.55);
+      const lines = _wrapLines(ctx, text, maxWidth);
+      if (lines.length * lh <= maxHeight || size === sizes[sizes.length - 1]) {
+        chosen = { size, lh, lines };
+        break;
+      }
+    }
+    ctx.font = "600 " + chosen.size + "px -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif";
+    ctx.textAlign = "left";
+    let y = startY + chosen.lh * 0.8;
+    for (const line of chosen.lines) {
+      ctx.fillText(line, x, y);
+      y += chosen.lh;
+    }
+  }
+
   function _wrapLines(ctx, text, maxWidth) {
     const out = [];
     for (const para of String(text).split("\n")) {
@@ -469,9 +512,10 @@ const ShareView = (() => {
     const themeChips = THEME_ORDER.map((id) => {
       const th = THEMES[id];
       const on = id === _themeId() ? " is-active" : "";
+      const dot = '<span class="share-theme-dot" style="background:' + THEME_DOT[id] + '"></span>';
       return '<button type="button" class="share-theme-chip' + on + '" data-theme="' + id + '"' +
         ' style="background:' + th.swatch + '" title="' + _esc(I18n.t(th.labelKey)) + '">' +
-        '<span class="share-theme-name">' + _esc(I18n.t(th.labelKey)) + '</span></button>';
+        dot + '<span class="share-theme-name">' + _esc(I18n.t(th.labelKey)) + '</span></button>';
     }).join("");
 
     const platformTabs = PLATFORMS.map((p) => {
@@ -486,7 +530,9 @@ const ShareView = (() => {
         '<h3 class="share-title">' + _esc(I18n.t(titleKey, { brand: _brandName() })) + '</h3>' +
         '<p class="share-subtitle">' + _esc(I18n.t(subtitleKey)) + '</p>' +
         '<div class="share-body">' +
-          '<div class="share-poster-wrap"><img class="share-poster-img" alt="poster"/></div>' +
+          '<div class="share-poster-wrap">' +
+            '<img class="share-poster-img" alt="poster"/>' +
+          '</div>' +
           '<div class="share-controls">' +
             '<div class="share-theme-row">' +
               '<span class="share-row-label">' + _esc(I18n.t("share.theme.label")) + '</span>' +
@@ -517,6 +563,9 @@ const ShareView = (() => {
     const img = o.querySelector(".share-poster-img");
     const textarea = o.querySelector(".share-text");
 
+    img.style.cursor = "pointer";
+    img.addEventListener("click", () => _downloadPoster((textarea.value || "").trim()));
+
     const renderPoster = () => {
       const copy = (textarea.value || "").trim();
       try { img.src = _scorecard() ? _buildScorecardPoster(copy) : _buildPoster(copy); }

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

@@ -30,7 +30,7 @@ const SkillsStore = (() => {
   let _brandActivated  = false;       // whether a license is currently active
   let _freeMode        = false;       // brand-skills tab is showing free-mode skills
   let _paidSkillsCount = 0;           // premium (encrypted) skills locked behind activation
-  let _showSystemSkills = false;      // whether system (source=default) skills are shown
+  let _showSystemSkills = localStorage.getItem("skill-ac-show-system") === "true";
 
   // ── Internal event bus ──────────────────────────────────────────────────
   // Always live (unlike Clacky.ext, which is silenced under ?pure=true). The
@@ -173,6 +173,7 @@ const SkillsStore = (() => {
     /** Toggle visibility of system skills; emit so the view re-renders. */
     setShowSystemSkills(show) {
       _showSystemSkills = !!show;
+      localStorage.setItem("skill-ac-show-system", _showSystemSkills ? "true" : "false");
       _emit("skills:changed", { skills: _skills });
     },
 
@@ -314,3 +315,4 @@ const SkillsStore = (() => {
 
 // Expose the facade under its historical global name.
 const Skills = SkillsStore;
+Clacky.Skills = Skills;

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

@@ -265,7 +265,7 @@ const SkillsView = (() => {
     btn.setAttribute("data-i18n", "skills.brand.activateBtn");
     btn.addEventListener("click", () => {
       if (typeof Brand !== "undefined" && Brand.goToLicenseInput) Brand.goToLicenseInput();
-      else Router.navigate("settings");
+      else window.Clacky.Router.navigate("settings");
     });
 
     hint.appendChild(msgEl);