openclacky 0.9.30 → 0.9.32

data/lib/clacky/web/sessions.js

@@ -572,7 +572,15 @@ const Sessions = (() => {
           messages.scrollTop = messages.scrollHeight - scrollBefore;
         } else {
           // Initial load or append: scroll to bottom (user just opened session or sent message)
-          messages.appendChild(frag);
+          // If a progress indicator is already visible (attached instantly on session switch),
+          // insert history above it so the progress element stays at the bottom.
+          const pState = Sessions._sessionProgress[id];
+          const existingProgressEl = pState && pState.el;
+          if (existingProgressEl && existingProgressEl.parentNode === messages) {
+            messages.insertBefore(frag, existingProgressEl);
+          } else {
+            messages.appendChild(frag);
+          }
           messages.scrollTop = messages.scrollHeight;
           // Flush any tool_stdout lines that arrived via WS before this history
           // fetch completed (race condition on session switch).
@@ -595,8 +603,10 @@ const Sessions = (() => {
           const session = _sessions.find(s => s.id === id);
           if (session) {
             if (session.status === "running") {
-              // Agent is still running (e.g. page was refreshed mid-task)
-              Sessions.showProgress(I18n.t("chat.thinking"));
+              // Progress UI is already attached (done eagerly in Router._apply).
+              // The backend's replay_live_state event will arrive shortly and call
+              // showProgress() with the authoritative started_at, which is the
+              // single source of truth for first-visit sessions (no cached state).
             } else if (session.status === "error" && session.error) {
               // Show the stored error message at the end of history
               Sessions.appendMsg("error", session.error);
@@ -768,6 +778,8 @@ const Sessions = (() => {
     remove(id) {
       const idx = _sessions.findIndex(s => s.id === id);
       if (idx !== -1) _sessions.splice(idx, 1);
+      // Clean up per-session progress state (timer + DOM + logical state)
+      Sessions._deleteProgressState(id);
     },
 
     /** Load the next page of older sessions (unified time cursor). */
@@ -964,6 +976,9 @@ const Sessions = (() => {
      *  Called by Router before switching away from a session view. */
     _cacheActiveAndDeselect() {
       _cacheActiveMessages();
+      // Detach progress UI (DOM + timer) but preserve the logical state
+      // so it can be restored when the user switches back to this session.
+      if (_activeId) Sessions._detachProgressUI(_activeId);
       _activeId = null;
       WS.setSubscribedSession(null);
       Sessions.renderList();
@@ -1019,7 +1034,16 @@ const Sessions = (() => {
 
       // Scroll active session into view so the sidebar always shows the current session.
       const activeEl = list.querySelector(".session-item.active");
-      if (activeEl) activeEl.scrollIntoView({ block: "nearest" });
+      if (activeEl) {
+        // If the active session is the very first item, scroll to top of the sidebar
+        // container so sticky headers / expanded panels don't obscure it.
+        if (activeEl === list.firstElementChild) {
+          const sidebarList = document.getElementById("sidebar-list");
+          if (sidebarList) sidebarList.scrollTop = 0;
+        } else {
+          activeEl.scrollIntoView({ block: "nearest" });
+        }
+      }
     },
 
     /** Begin inline rename: replace session-name content with an <input>. */
@@ -1314,79 +1338,254 @@ const Sessions = (() => {
       _scrollToBottomIfNeeded(messages);
     },
 
-    _progressEl: null,
-    _progressInterval: null,
-    _progressStartTime: null,
-    _progressType: null,
-
-    showProgress(text, progress_type = "thinking", metadata = {}) {
-      console.log("[DEBUG] showProgress called:", { text, progress_type, metadata });
-      Sessions.clearProgress();
-      
-      Sessions._progressType = progress_type;
-      Sessions._progressStartTime = Date.now();
-      
+    // Display a request_user_feedback UI card with optional clickable option buttons.
+    // Called when the agent needs user input to continue.
+    showFeedbackRequest(question, context, options) {
+      Sessions.collapseToolGroup();
       const messages = $("messages");
-      const el = document.createElement("div");
-      el.className = "progress-msg";
-      
-      // Choose display text based on type
-      let displayText;
+      const hasOptions = options && Array.isArray(options) && options.length > 0;
+
+      // Normalize bullet symbols to markdown list format so marked renders them as <ul>
+      const normalizeBullets = (text) => text ? text.replace(/^[•·‣▸▪\-–]\s*/gm, '- ') : text;
+
+      // No options → plain assistant bubble (card UI adds no value without choices)
+      if (!hasOptions) {
+        const parts = [context && context.trim(), question].filter(Boolean);
+        const text = parts.map(normalizeBullets).join("\n\n");
+        Sessions.appendMsg("assistant", marked.parse(text));
+        return;
+      }
+
+      // Has options → render interactive card
+      const card = document.createElement("div");
+      card.className = "feedback-card";
+
+      let cardHtml = "";
+      if (context && context.trim()) {
+        cardHtml += `<div class="feedback-context">${escapeHtml(context)}</div>`;
+      }
+      cardHtml += `<div class="feedback-question">${escapeHtml(question)}</div>`;
+      cardHtml += `<div class="feedback-options">`;
+      options.forEach((opt, idx) => {
+        cardHtml += `<button class="feedback-option-btn" data-option-index="${idx}">${escapeHtml(opt)}</button>`;
+      });
+      cardHtml += `</div>`;
+      cardHtml += `<div class="feedback-hint">${I18n.t("chat.feedback_hint")}</div>`;
+
+      card.innerHTML = cardHtml;
+
+      // Click → disable card + submit immediately via sendMessage()
+      card.querySelectorAll(".feedback-option-btn").forEach(btn => {
+        btn.onclick = () => {
+          card.querySelectorAll(".feedback-option-btn").forEach(b => b.disabled = true);
+          card.classList.add("feedback-card--submitted");
+          const input = $("user-input");
+          if (input) input.value = btn.textContent.trim();
+          sendMessage();
+        };
+      });
+
+      messages.appendChild(card);
+      _scrollToBottomIfNeeded(messages);
+    },
+
+    // ── Per-session progress state ──────────────────────────────────────
+    //
+    // Each session maintains its own progress state so switching sessions
+    // and switching back does NOT reset the elapsed timer.
+    //
+    // State map: { [sessionId]: { el, interval, startTime, type, displayText } }
+    //   el          — DOM element (.progress-msg) currently in #messages (or null if detached)
+    //   interval    — setInterval id for the ticking counter (or null if detached)
+    //   startTime   — Date.now()-compatible ms timestamp when progress began
+    //   type        — "thinking" | "retrying" | "idle_compress" | …
+    //   displayText — the label shown before the "(Ns)" suffix
+
+    _sessionProgress: {},
+
+    _getProgressState(id) {
+      if (!id) return null;
+      if (!Sessions._sessionProgress[id]) {
+        Sessions._sessionProgress[id] = { el: null, interval: null, startTime: null, type: null, displayText: null };
+      }
+      return Sessions._sessionProgress[id];
+    },
+
+    // Build the display label for a given progress type (pure — no side effects).
+    _buildDisplayText(text, progress_type, metadata) {
       if (progress_type === "thinking") {
-        displayText = text || getRandomThinkingVerb();
-        console.log("[DEBUG] thinking verb:", displayText);
+        return text || getRandomThinkingVerb();
       } else if (progress_type === "retrying") {
-        const { attempt, total } = metadata;
-        // Show error reason + retry count
+        const { attempt, total } = metadata || {};
         if (text && attempt && total) {
-          displayText = `${I18n.t("chat.retrying")}: ${text} (${attempt}/${total})`;
+          return `${I18n.t("chat.retrying")}: ${text} (${attempt}/${total})`;
         } else if (attempt && total) {
-          displayText = `${I18n.t("chat.retrying")} (${attempt}/${total})`;
-        } else {
-          displayText = text || I18n.t("chat.retrying");
+          return `${I18n.t("chat.retrying")} (${attempt}/${total})`;
         }
+        return text || I18n.t("chat.retrying");
       } else if (progress_type === "idle_compress") {
-        displayText = text || "Compressing...";
-      } else {
-        displayText = text || I18n.t("chat.thinking");
+        return text || "Compressing...";
       }
-      
-      el.textContent = "⟳ " + displayText;
-      console.log("[DEBUG] appending progress element:", el.textContent);
+      return text || I18n.t("chat.thinking");
+    },
+
+    // Attach the progress UI (DOM element + setInterval) for a given session.
+    // Requires the session's progress state to already have startTime + displayText set.
+    _attachProgressUI(id) {
+      const state = Sessions._getProgressState(id);
+      if (!state || !state.startTime) return;
+
+      // Only attach if this session is currently visible
+      if (id !== _activeId) return;
+
+      const messages = $("messages");
+      if (!messages) return;
+
+      // Clean up any previous DOM/timer for this session (idempotent)
+      Sessions._detachProgressUI(id);
+
+      const el = document.createElement("div");
+      el.className = "progress-msg";
+      const displayText = state.displayText;
+      // Show elapsed time immediately (not just after first setInterval tick)
+      const initialElapsed = Math.floor((Date.now() - state.startTime) / 1000);
+      el.textContent = initialElapsed > 0
+        ? `⟳ ${displayText}… (${initialElapsed}s)`
+        : `⟳ ${displayText}`;
       messages.appendChild(el);
-      Sessions._progressEl = el;
+      state.el = el;
       _scrollToBottomIfNeeded(messages);
-      
+
       // Start elapsed time counter (update every second)
-      Sessions._progressInterval = setInterval(() => {
-        const elapsed = Math.floor((Date.now() - Sessions._progressStartTime) / 1000);
-        if (Sessions._progressEl) {
-          Sessions._progressEl.textContent = `⟳ ${displayText}… (${elapsed}s)`;
+      state.interval = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - state.startTime) / 1000);
+        if (state.el) {
+          state.el.textContent = `⟳ ${displayText}… (${elapsed}s)`;
         }
       }, 1000);
     },
 
-    clearProgress(finalMessage = null) {
-      console.log("[DEBUG] clearProgress called:", finalMessage);
-      // Clear interval timer
-      if (Sessions._progressInterval) {
-        clearInterval(Sessions._progressInterval);
-        Sessions._progressInterval = null;
+    // Detach only the DOM element and timer for a session, preserving logical state
+    // (startTime, type, displayText).  Called when switching away from a session.
+    _detachProgressUI(id) {
+      const state = Sessions._sessionProgress[id];
+      if (!state) return;
+      if (state.interval) {
+        clearInterval(state.interval);
+        state.interval = null;
       }
-      
-      // Remove progress element
-      if (Sessions._progressEl) {
-        Sessions._progressEl.remove();
-        Sessions._progressEl = null;
+      if (state.el) {
+        state.el.remove();
+        state.el = null;
       }
-      
+    },
+
+    showProgress(text, progress_type = "thinking", metadata = {}, startedAt = null) {
+      const sid = _activeId;
+      if (!sid) return;
+
+      const newStartTime   = startedAt || Date.now();
+      const newDisplayText = Sessions._buildDisplayText(text, progress_type, metadata);
+
+      // If this session already has a visible progress indicator (DOM element
+      // attached), update it in-place instead of tear-down/rebuild.  This avoids
+      // the jarring flicker when replay_live_state arrives shortly after the
+      // eager-attach on session switch.
+      const existing = Sessions._sessionProgress[sid];
+      if (existing && existing.el) {
+        // If the start time is the same (same progress phase, e.g. dedup replay),
+        // keep everything as-is — not even the display text changes.
+        if (existing.startTime === newStartTime) {
+          existing.type = progress_type;
+          return;
+        }
+        // Different start time → new progress phase.  Update state in-place and
+        // restart the interval, but reuse the existing DOM element so the user
+        // never sees the indicator disappear/reappear.
+        existing.type        = progress_type;
+        existing.startTime   = newStartTime;
+        existing.displayText = newDisplayText;
+        // Immediately refresh the text + elapsed counter
+        const elapsed = Math.floor((Date.now() - newStartTime) / 1000);
+        existing.el.textContent = elapsed > 0
+          ? `⟳ ${newDisplayText}… (${elapsed}s)`
+          : `⟳ ${newDisplayText}`;
+        // Restart interval with new startTime
+        if (existing.interval) clearInterval(existing.interval);
+        existing.interval = setInterval(() => {
+          const e = Math.floor((Date.now() - existing.startTime) / 1000);
+          if (existing.el) {
+            existing.el.textContent = `⟳ ${existing.displayText}… (${e}s)`;
+          }
+        }, 1000);
+        _scrollToBottomIfNeeded($("messages"));
+        return;
+      }
+
+      // No existing visible progress — create from scratch.
+      // Clear any stale logical state first.
+      Sessions.clearProgress(sid);
+
+      const state = Sessions._getProgressState(sid);
+      state.type        = progress_type;
+      state.startTime   = newStartTime;
+      state.displayText = newDisplayText;
+
+      // Attach DOM + timer
+      Sessions._attachProgressUI(sid);
+    },
+
+    clearProgress(sessionIdOrMessage = null, finalMessage = null) {
+      // Backward-compatible overload resolution:
+      //   clearProgress()                       — clear active session
+      //   clearProgress("some message")          — clear active session + final message
+      //   clearProgress(sessionId)               — clear specific session (id looks like UUID)
+      //   clearProgress(sessionId, "message")    — clear specific session + final message
+      let sid;
+      if (sessionIdOrMessage && typeof sessionIdOrMessage === "string") {
+        // Heuristic: session IDs are UUIDs (contain hyphens or are 32+ hex chars).
+        // Anything else is treated as a finalMessage for the active session.
+        if (/^[0-9a-f-]{8,}$/i.test(sessionIdOrMessage)) {
+          sid = sessionIdOrMessage;
+        } else {
+          finalMessage = sessionIdOrMessage;
+          sid = _activeId;
+        }
+      } else {
+        sid = _activeId;
+      }
+      if (!sid) return;
+
+      const state = Sessions._sessionProgress[sid];
+      if (!state) return;
+
+      // Detach DOM + timer
+      Sessions._detachProgressUI(sid);
+
       // Show final message if provided (for idle_compress, etc.)
-      if (finalMessage && Sessions._progressType !== "thinking") {
+      if (finalMessage && state.type && state.type !== "thinking") {
         Sessions.appendInfo(`· ${finalMessage}`);
       }
-      
-      Sessions._progressStartTime = null;
-      Sessions._progressType = null;
+
+      // Clear logical state
+      state.startTime   = null;
+      state.type        = null;
+      state.displayText = null;
+    },
+
+    // Delete all progress state for a session (used when session is removed).
+    _deleteProgressState(id) {
+      Sessions._detachProgressUI(id);
+      delete Sessions._sessionProgress[id];
+    },
+
+    // Clear progress for ALL sessions (used on WS disconnect).
+    clearAllProgress() {
+      for (const id of Object.keys(Sessions._sessionProgress)) {
+        Sessions._detachProgressUI(id);
+      }
+      // Wipe the entire map — all state is stale after disconnect
+      Sessions._sessionProgress = {};
     },
 
     // ── Create ─────────────────────────────────────────────────────────────

data/lib/clacky/web/settings.js

@@ -750,6 +750,38 @@ const Settings = (() => {
       document.getElementById("settings-license-key").focus();
     });
 
+    document.getElementById("btn-unbind-license").addEventListener("click", async () => {
+      const confirmed = await Modal.confirm(I18n.t("settings.brand.confirmUnbind"));
+      if (!confirmed) return;
+
+      try {
+        const res = await fetch("/api/brand/license", { method: "DELETE" });
+        const data = await res.json();
+
+        if (data.ok) {
+          // Clear brand name and logo from header
+          Brand.applyBrandName("OpenClacky");
+          Brand.clearBrandCache();
+          Brand.applyHeaderLogo();
+          // Reset Skills panel state (hide Brand Skills tab, switch to My Skills)
+          if (typeof Skills !== "undefined" && Skills.resetAfterUnbind) {
+            Skills.resetAfterUnbind();
+          }
+          // Hide status card, show activation form
+          document.getElementById("brand-status-card").style.display   = "none";
+          document.getElementById("brand-activate-form").style.display = "";
+          document.getElementById("settings-license-key").value = "";
+          _showBrandResult(true, I18n.t("settings.brand.unbindSuccess"));
+          // Reload brand status after a brief delay
+          setTimeout(_loadBrand, 800);
+        } else {
+          _showBrandResult(false, data.error || I18n.t("settings.brand.unbindFailed"));
+        }
+      } catch (e) {
+        _showBrandResult(false, I18n.t("settings.brand.networkRetry"));
+      }
+    });
+
     _initLangBtns();
 
     // Re-render model cards when language changes (dynamic HTML, not data-i18n)

data/lib/clacky/web/skills.js

@@ -33,6 +33,12 @@ const Skills = (() => {
     $("skills-tab-my").style.display    = tab === "my-skills"    ? "" : "none";
     $("skills-tab-brand").style.display = tab === "brand-skills" ? "" : "none";
 
+    // Toggle visibility of tab-specific controls in the tab bar
+    const showSystemLabel = $("label-show-system");
+    const refreshBtn      = $("btn-refresh-brand-skills");
+    if (showSystemLabel) showSystemLabel.style.display = tab === "my-skills"    ? "" : "none";
+    if (refreshBtn)      refreshBtn.style.display      = tab === "brand-skills" ? "" : "none";
+
     // Lazy-load brand skills when the tab is first opened
     if (tab === "brand-skills" && _brandSkills.length === 0) {
       _loadBrandSkills();
@@ -359,7 +365,31 @@ const Skills = (() => {
       : _skills.filter(s => s.source !== "default");
 
     if (visible.length === 0) {
-      container.innerHTML = `<div class="skills-empty">${I18n.t("skills.empty")}</div>`;
+      const emptyText     = I18n.t("skills.empty");
+      const createBtnText = I18n.t("skills.empty.createBtn");
+
+      const emptyWrapper = document.createElement("div");
+      emptyWrapper.className = "skills-empty";
+
+      const emptyTextEl = document.createElement("div");
+      emptyTextEl.className   = "skills-empty-text";
+      emptyTextEl.textContent = emptyText;
+
+      const createBtn = document.createElement("div");
+      createBtn.className = "skills-empty-create-btn";
+      createBtn.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/><path d="M12 8v8"/><path d="M8 12h8"/>
+        </svg>
+        <span>${escapeHtml(createBtnText)}</span>
+        <svg class="skills-empty-create-arrow" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 12h14"/><path d="M12 5l7 7-7 7"/>
+        </svg>`;
+      createBtn.addEventListener("click", () => Skills.createInSession("/skill-creator"));
+
+      emptyWrapper.appendChild(emptyTextEl);
+      emptyWrapper.appendChild(createBtn);
+      container.appendChild(emptyWrapper);
     } else {
       // System skills first, then custom
       const sorted = [
@@ -420,8 +450,21 @@ const Skills = (() => {
         const refreshBtn = $("btn-refresh-brand-skills");
         if (refreshBtn) {
           refreshBtn.addEventListener("click", async () => {
+            // Add spinning animation
+            const icon = refreshBtn.querySelector("svg");
+            if (icon) {
+              icon.classList.add("spinning");
+            }
+            refreshBtn.disabled = true;
+            
             _brandSkills = [];
             await _loadBrandSkills();
+            
+            // Remove spinning animation
+            if (icon) {
+              icon.classList.remove("spinning");
+            }
+            refreshBtn.disabled = false;
           });
         }
 
@@ -513,6 +556,23 @@ const Skills = (() => {
       _switchTab("brand-skills");
     },
 
+    /** Reset the skills panel back to My Skills tab and clear brand data.
+     *  Called after license unbind so the user is not left on Brand Skills tab.
+     */
+    resetAfterUnbind() {
+      _brandSkills    = [];
+      _brandActivated = false;
+      _activeTab      = "my-skills";
+      // Hide the Brand Skills tab since there is no active license
+      const brandTab = $("tab-brand-skills");
+      if (brandTab) brandTab.style.display = "none";
+      // If the panel is currently visible, switch to My Skills immediately
+      const panel = $("skills-panel");
+      if (panel && panel.style.display !== "none") {
+        _switchTab("my-skills");
+      }
+    },
+
     // ── Import bar ────────────────────────────────────────────────────────
 
     /** Toggle the inline import bar below the My Skills header.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openclacky
 version: !ruby/object:Gem::Version
-  version: 0.9.30
+  version: 0.9.32
 platform: ruby
 authors:
 - windy
@@ -305,7 +305,10 @@ files:
 - lib/clacky/agent/message_compressor.rb
 - lib/clacky/agent/message_compressor_helper.rb
 - lib/clacky/agent/session_serializer.rb
+- lib/clacky/agent/skill_auto_creator.rb
+- lib/clacky/agent/skill_evolution.rb
 - lib/clacky/agent/skill_manager.rb
+- lib/clacky/agent/skill_reflector.rb
 - lib/clacky/agent/system_prompt_builder.rb
 - lib/clacky/agent/time_machine.rb
 - lib/clacky/agent/tool_executor.rb