openclacky 0.9.30 → 0.9.32

data/lib/clacky/utils/arguments_parser.rb

@@ -113,7 +113,7 @@ module Clacky
       def self.raise_helpful_error(call, tool_registry, original_error)
         tool = tool_registry.get(call[:name])
         error_msg = build_error_message(call, tool, original_error)
-        raise StandardError, error_msg
+        raise BadArgumentsError, error_msg
       end
 
       def self.build_error_message(call, tool, original_error)
@@ -173,8 +173,11 @@ module Clacky
       end
     end
 
+    # Raised when tool call arguments are malformed or missing required params.
+    class BadArgumentsError < StandardError; end
+
     # Custom exception for missing required parameters
-    class MissingRequiredParamsError < StandardError
+    class MissingRequiredParamsError < BadArgumentsError
       attr_reader :tool_name, :missing_params, :provided_params
 
       def initialize(tool_name, missing_params, provided_params)

data/lib/clacky/utils/limit_stack.rb

@@ -2,21 +2,40 @@
 
 module Clacky
   module Utils
-    # Auto-rolling fixed-size array
-    # Automatically discards oldest elements when size limit is exceeded
+    # Auto-rolling fixed-size array.
+    # Automatically discards oldest elements when the line-count limit is exceeded.
+    #
+    # Optional limits (all default to nil = no limit):
+    #   max_line_chars – truncate each individual line to this many characters on push
+    #   max_chars      – once the total accepted chars reach this threshold, further
+    #                    pushes are silently dropped (sets #truncated? = true)
+    #
+    # These extra limits are fully opt-in; existing callers that only pass max_size
+    # are completely unaffected.
     class LimitStack
       attr_reader :max_size, :items
 
-      def initialize(max_size: 5000)
-        @max_size = max_size
-        @items = []
+      def initialize(max_size: 5000, max_line_chars: nil, max_chars: nil)
+        @max_size       = max_size
+        @max_line_chars = max_line_chars
+        @max_chars      = max_chars
+
+        @items          = []
+        @total_chars    = 0   # chars currently stored in @items
+        @truncated      = false
+        @chars_full     = false  # latched true once max_chars is reached
+      end
+
+      # True if any content was dropped (lines rolled off the front OR
+      # chars budget was exceeded OR a line was truncated).
+      def truncated?
+        @truncated
       end
 
       # Add elements (supports single or multiple)
       def push(*elements)
         elements.each do |element|
-          @items << element
-          trim_if_needed
+          _push_one(element)
         end
         self
       end
@@ -27,13 +46,15 @@ module Clacky
         return self if text.nil? || text.empty?
 
         lines = text.is_a?(Array) ? text : text.lines
-        lines.each { |line| push(line) }
+        lines.each { |line| _push_one(line) }
         self
       end
 
       # Remove and return the last element
       def pop
-        @items.pop
+        item = @items.pop
+        @total_chars -= item.length if item.is_a?(String)
+        item
       end
 
       # Get last N elements
@@ -64,6 +85,9 @@ module Clacky
       # Clear all elements
       def clear
         @items.clear
+        @total_chars = 0
+        @truncated   = false
+        @chars_full  = false
         self
       end
 
@@ -72,12 +96,56 @@ module Clacky
         @items.each(&block)
       end
 
-
+      # kept for compatibility (called internally; public so subclasses can override)
       def trim_if_needed
-        if @items.size > @max_size
-          # Remove oldest elements, keep only the latest max_size items
-          @items.shift(@items.size - @max_size)
+        while @items.size > @max_size
+          removed = @items.shift
+          @total_chars -= removed.length if removed.is_a?(String)
+          @truncated = true
+        end
+      end
+
+      private def _push_one(element)
+        # --- chars budget check ---
+        if @chars_full
+          @truncated = true
+          return
         end
+
+        item = element
+
+        # --- per-line truncation ---
+        if @max_line_chars && item.is_a?(String) && item.length > @max_line_chars
+          item = item[0, @max_line_chars]
+          # Preserve trailing newline if original had one
+          item += "\n" if element.end_with?("\n") && !item.end_with?("\n")
+          @truncated = true
+        end
+
+        # --- total chars check ---
+        if @max_chars && item.is_a?(String)
+          remaining = @max_chars - @total_chars
+          if remaining <= 0
+            @chars_full = true
+            @truncated  = true
+            return
+          end
+          if item.length > remaining
+            # If original line ends with \n we must preserve it, so reserve 1
+            # byte for it — this keeps total_chars strictly within max_chars.
+            needs_newline = element.is_a?(String) && element.end_with?("\n")
+            cut = needs_newline ? [remaining - 1, 0].max : remaining
+            item = item[0, cut]
+            item += "\n" if needs_newline && !item.end_with?("\n")
+            @chars_full = true
+            @truncated  = true
+          end
+        end
+
+        @items << item
+        @total_chars += item.length if item.is_a?(String)
+
+        trim_if_needed
       end
     end
   end

data/lib/clacky/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Clacky
-  VERSION = "0.9.30"
+  VERSION = "0.9.32"
 end

data/lib/clacky/web/app.css

@@ -181,7 +181,6 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 180px;
-  line-height: 1;
 }
 /* When a logo image is present, slightly dim the text to act as a subtitle */
 #header-brand.has-logo .header-logo {
@@ -311,8 +310,9 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  padding-bottom: 10px;
 }
-#session-list { padding: 4px 8px 8px; min-height: 108px; }
+#session-list { padding: 6px 8px 8px; min-height: 108px; }
 
 /* ── Sidebar divider (Section Labels) ───────────────────────────────────── */
 .sidebar-divider {
@@ -327,6 +327,10 @@ body {
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 4px;
+  position: sticky;
+  top: 0;
+  background: var(--color-bg-secondary);
+  z-index: 10;
 }
 .sidebar-divider:first-child {
   margin-top: 0;
@@ -348,34 +352,33 @@ body {
   padding: 0 8px;
   border: none;
   border-radius: 5px 0 0 5px;
-  background: var(--color-bg-hover);
-  color: var(--color-text-secondary);
+  background: var(--color-accent-primary);
+  color: #fff;
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap;
   line-height: 1;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
 .btn-split-main:hover {
-  background: var(--color-accent-primary);
-  color: #fff;
+  background: var(--color-button-primary-hover);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 .btn-split-arrow {
   height: 22px;
   padding: 0 4px;
   border: none;
-  border-left: 1px solid var(--color-border-primary);
+  border-left: 1px solid rgba(255,255,255,0.3);
   border-radius: 0 5px 5px 0;
-  background: var(--color-bg-hover);
-  color: var(--color-text-tertiary);
+  background: var(--color-accent-primary);
+  color: #fff;
   font-size: 10px;
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
 }
 .btn-split-arrow:hover {
-  background: var(--color-accent-primary);
-  color: #fff;
+  background: var(--color-button-primary-hover);
 }
 
 /* ── Dropdown menu ───────────────────────────────────────────────────────── */
@@ -1513,6 +1516,65 @@ body {
 .msg-assistant em { font-style: italic; color: var(--color-text-secondary); }
 .msg-tool      { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); font-family: monospace; font-size: 12px; color: var(--color-text-secondary); align-self: flex-start; }
 .msg-info      { color: var(--color-text-secondary); font-size: 12px; align-self: center; font-style: italic; }
+
+/* ── Feedback request card ──────────────────────────────────────────────── */
+.feedback-card {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 12px;
+  padding: 16px 18px;
+  margin: 4px 0;
+  align-self: flex-start;
+  max-width: 85%;
+  color: var(--color-text-primary);
+}
+.feedback-context {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+.feedback-question {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+.feedback-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.feedback-option-btn {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  padding: 7px 12px;
+  color: var(--color-text-primary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  text-align: left;
+}
+.feedback-option-btn:hover {
+  border-color: var(--color-accent-primary);
+  background: var(--color-bg-secondary);
+}
+.feedback-option-btn:active {
+  opacity: 0.8;
+}
+.feedback-hint {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  margin-top: 6px;
+}
+.feedback-card--submitted {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .history-start-marker {
   display: flex;
   align-items: center;
@@ -2926,10 +2988,26 @@ body {
 /* ── Skills Tabs ─────────────────────────────────────────────────────────── */
 #skills-tabs {
   display: flex;
-  gap: 4px;
+  justify-content: space-between;
+  align-items: center;
   border-bottom: 1px solid var(--color-border-primary);
   flex-shrink: 0;
+  gap: 16px;
 }
+
+.skills-tabs-left {
+  display: flex;
+  gap: 4px;
+}
+
+.skills-tabs-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-right: 12px;
+  margin-bottom: 4px;
+}
+
 .skills-tab {
   background: none;
   border: none;
@@ -2998,34 +3076,40 @@ body {
 }
 
 /* ── My Skills list ──────────────────────────────────────────────────────── */
-/* ── Skills Filter Bar ───────────────────────────────────────────────────── */
-.skills-filter-bar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 10px 0 6px;
-}
-
+/* ── Skills Filter Toggle (in tab bar) ───────────────────────────────────── */
 .skills-filter-toggle {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: 8px;
   cursor: pointer;
   user-select: none;
+  padding: 0;
+  background: none;
+  border: none;
 }
 
 .skills-filter-toggle input[type="checkbox"] {
   display: none;
 }
 
+.skills-filter-label {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  transition: color 0.15s;
+}
+
+.skills-filter-toggle:hover .skills-filter-label {
+  color: var(--color-text-primary);
+}
+
 /* Mini toggle track — matches the skill-card toggle style */
 .skills-filter-toggle-track {
   position: relative;
-  width: 28px;
-  height: 16px;
+  width: 32px;
+  height: 18px;
   background: var(--color-border-primary);
-  border-radius: 8px;
+  border-radius: 9px;
   flex-shrink: 0;
   transition: background 0.18s;
 }
@@ -3034,8 +3118,8 @@ body {
   position: absolute;
   top: 2px;
   left: 2px;
-  width: 12px;
-  height: 12px;
+  width: 14px;
+  height: 14px;
   background: #fff;
   border-radius: 50%;
   transition: transform 0.18s;
@@ -3044,12 +3128,7 @@ body {
   background: var(--color-accent, #6c63ff);
 }
 .skills-filter-toggle input:checked ~ .skills-filter-toggle-track::after {
-  transform: translateX(12px);
-}
-
-.skills-filter-label {
-  font-size: 12px;
-  color: var(--color-text-secondary);
+  transform: translateX(14px);
 }
 
 #skills-list {
@@ -3064,6 +3143,42 @@ body {
   padding: 20px 0;
   text-align: center;
 }
+.skills-empty-text {
+  margin-bottom: 12px;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+/* Guided CTA card in the empty-skills state — mirrors .creator-new-card */
+.skills-empty-create-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  background: var(--color-bg-secondary);
+  border: 1px dashed var(--color-border-primary);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  transition: border-color .15s, color .15s, background .15s;
+  text-align: left;
+  margin-top: 4px;
+}
+.skills-empty-create-btn:hover {
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
+  background: var(--color-accent-bg, rgba(59,130,246,0.04));
+}
+.skills-empty-create-arrow {
+  margin-left: auto;
+  opacity: 0.5;
+  transition: opacity .15s, transform .15s;
+}
+.skills-empty-create-btn:hover .skills-empty-create-arrow {
+  opacity: 1;
+  transform: translateX(3px);
+}
 
 /* ── Skill Card ──────────────────────────────────────────────────────────── */
 .skill-card {
@@ -3450,24 +3565,44 @@ body {
 }
 
 /* ── Brand Skills tab ────────────────────────────────────────────────────── */
-#brand-skills-header {
-  display: flex;
-  justify-content: flex-end;
-  padding: 8px 0 4px;
-}
+/* Refresh button now lives in skills-tabs-controls, but keep these styles */
 .btn-brand-skills-refresh {
-  background: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--color-bg-secondary);
   border: 1px solid var(--color-border-primary);
   border-radius: 6px;
   color: var(--color-text-secondary);
   cursor: pointer;
-  font-size: 12px;
-  padding: 4px 10px;
-  transition: color .15s, border-color .15s;
+  font-size: 13px;
+  padding: 6px 12px;
+  transition: color .15s, background .15s, border-color .15s;
+  white-space: nowrap;
 }
 .btn-brand-skills-refresh:hover {
+  background: var(--color-bg-hover);
   border-color: var(--color-accent-primary);
-  color: var(--color-accent-primary);
+  color: var(--color-text-primary);
+}
+.btn-brand-skills-refresh:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.btn-brand-skills-refresh svg {
+  flex-shrink: 0;
+}
+.btn-brand-skills-refresh svg.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 #brand-skills-list {
@@ -4686,14 +4821,14 @@ body.setup-mode[data-theme="dark"] {
 #channels-body {
   flex: 1;
   overflow-y: auto;
-  padding: 32px 40px;
+  padding: 28px 36px;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 20px;
 }
 
 .channels-page-header {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 
 .channels-page-title {
@@ -4729,14 +4864,20 @@ body.setup-mode[data-theme="dark"] {
   animation: section-flash 2.4s ease-in-out;
 }
 /* ── Channel card ───────────────────────────────────────────────────────── */
+#channels-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
 .channel-card {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border-primary);
   border-radius: 12px;
-  padding: 20px 24px;
+  padding: 16px 20px;
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 12px;
 }
 
 .channel-card-header {
@@ -4816,7 +4957,7 @@ body.setup-mode[data-theme="dark"] {
 
 /* ── Channel card body ───────────────────────────────────────────────────── */
 .channel-card-body {
-  padding: 2px 0;
+  padding: 0;
 }
 
 .channel-status-hint {
@@ -4837,7 +4978,7 @@ body.setup-mode[data-theme="dark"] {
   align-items: center;
   justify-content: flex-end;
   gap: 12px;
-  padding-top: 4px;
+  padding-top: 12px;
   border-top: 1px solid var(--color-border-primary);
 }
 
@@ -5799,6 +5940,61 @@ body.setup-mode[data-theme="dark"] {
   white-space: nowrap;
 }
 
+/* ── Promo banner (non-licensed users) ─────────────────────────────────── */
+#creator-promo-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  font-size: 12.5px;
+  color: var(--color-text-secondary);
+}
+#creator-promo-banner svg {
+  flex-shrink: 0;
+  color: var(--color-accent-primary);
+  opacity: 0.8;
+}
+#creator-promo-banner a {
+  margin-left: auto;
+  white-space: nowrap;
+  color: var(--color-accent-primary);
+  text-decoration: none;
+  font-weight: 500;
+}
+#creator-promo-banner a:hover {
+  text-decoration: underline;
+}
+
+/* ── Cloud skills lock (non-licensed users) ─────────────────────────────── */
+#creator-cloud-lock {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
+  border: 1px dashed var(--color-border-primary);
+  border-radius: 8px;
+  font-size: 12.5px;
+  color: var(--color-text-muted);
+}
+#creator-cloud-lock svg {
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+#creator-cloud-lock a {
+  margin-left: auto;
+  white-space: nowrap;
+  color: var(--color-accent-primary);
+  text-decoration: none;
+  font-weight: 500;
+  opacity: 0.85;
+}
+#creator-cloud-lock a:hover {
+  text-decoration: underline;
+}
+
 /* ── Create New Skill entry card ───────────────────────────────────────── */
 .creator-new-card {
   display: flex;

data/lib/clacky/web/app.js

@@ -149,6 +149,9 @@ const Router = (() => {
         Sessions.updateInfoBar(s);
         Sessions._restoreMessagesPublic(id);
         Sessions._setActiveId(id);
+        // Immediately re-attach saved progress UI (timer + spinner) so it appears
+        // instantly without waiting for the async history fetch or WS replay.
+        Sessions._attachProgressUI(id);
         WS.setSubscribedSession(id);
         // Only disable send button until server confirms subscription
         // Input field remains usable so user can type while waiting
@@ -310,7 +313,7 @@ WS.onEvent(ev => {
         banner.textContent = I18n.t("offline.banner");
         banner.style.display = "block";
       }
-      Sessions.clearProgress();
+      Sessions.clearAllProgress();
       Sessions.updateStatusBar("idle");
       break;
     }
@@ -452,8 +455,8 @@ WS.onEvent(ev => {
       if (ev.phase === "active" || ev.status === "start") {
         const progress_type = ev.progress_type || "thinking";
         const metadata = ev.metadata || {};
-        console.log("[DEBUG] calling showProgress:", { message: ev.message, progress_type, metadata });
-        Sessions.showProgress(ev.message, progress_type, metadata);
+        console.log("[DEBUG] calling showProgress:", { message: ev.message, progress_type, metadata, started_at: ev.started_at });
+        Sessions.showProgress(ev.message, progress_type, metadata, ev.started_at || null);
       } else {
         console.log("[DEBUG] calling clearProgress:", ev.message);
         Sessions.clearProgress(ev.message);
@@ -467,6 +470,11 @@ WS.onEvent(ev => {
       Sessions.appendInfo(`✓ ${I18n.t("chat.done", { n: ev.iterations, cost: (ev.cost || 0).toFixed(4) })}`);
       break;
 
+    case "request_feedback":
+      if (ev.session_id !== Sessions.activeId) break;
+      Sessions.showFeedbackRequest(ev.question, ev.context, ev.options);
+      break;
+
     case "request_confirmation":
       if (ev.session_id !== Sessions.activeId) break;
       showConfirmModal(ev.id, ev.message);