openclacky 1.5.7 → 1.5.8

data/lib/clacky/session_manager.rb

@@ -335,6 +335,13 @@ module Clacky
     # sessions are never deleted and do not count toward the cap.
     # Returns count of soft-deleted sessions.
     def cleanup_by_count(keep:, grouped_keep: 200)
+      # Fast path: if total session files can't exceed any single group's cap,
+      # skip the expensive all_sessions() full-scan (read + JSON.parse every file).
+      # min() is correct because groups are mutually exclusive — any single
+      # group's count ≤ non_pinned ≤ file_count ≤ min(keep, grouped_keep).
+      file_count = Dir.glob(File.join(@sessions_dir, "*.json")).size
+      return 0 if file_count <= [keep, grouped_keep].min
+
       non_pinned = all_sessions.reject { |s| s[:pinned] }
 
       groups = non_pinned.group_by do |s|

data/lib/clacky/ui2/components/inline_input.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+require "tty-screen"
 require_relative "../line_editor"
 
 module Clacky

data/lib/clacky/ui2/components/input_area.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "pastel"
+require "tty-screen"
 require "tempfile"
 require_relative "../theme_manager"
 require_relative "../line_editor"

data/lib/clacky/ui2/components/modal_component.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require 'io/console'
-require 'tty-prompt'
 require_relative 'base_component'
 
 module Clacky

data/lib/clacky/ui2/components/todo_area.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "pastel"
+require "tty-screen"
 
 module Clacky
   module UI2

data/lib/clacky/ui2/line_editor.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "pastel"
+require "tty-screen"
 
 module Clacky
   module UI2

data/lib/clacky/ui2/markdown_renderer.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-require "tty-markdown"
+require "tty-screen"
 require_relative "theme_manager"
 
 module Clacky
@@ -14,6 +14,10 @@ module Clacky
         def render(content)
           return content if content.nil? || content.empty?
 
+          # tty-markdown pulls in rouge + kramdown (~0.4s). Server mode renders
+          # markdown in the browser, so only pay that cost on a real terminal render.
+          require "tty-markdown" unless defined?(TTY::Markdown)
+
           # Get current theme colors
           theme = ThemeManager.current_theme
 

data/lib/clacky/ui2/ui_controller.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+require "pastel"
 require_relative "layout_manager"
 require_relative "view_renderer"
 require_relative "progress_handle"

data/lib/clacky/version.rb

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

data/lib/clacky/web/app.css

@@ -30,7 +30,7 @@
   --color-border-strong:    #d4d4ce;  /* hover / active outline */
 
   /* Text — 4-tier hierarchy */
-  --color-text-primary:   #1a1b1e;   /* titles, important content */
+  --color-text-primary:   #344054;   /* titles, important content */
   --color-text-secondary: #56585e;   /* body text */
   --color-text-tertiary:  #8a8d94;   /* captions, meta */
   --color-text-muted:     #a8abb2;   /* placeholders, disabled */
@@ -55,6 +55,7 @@
   --color-warning: #f59e0b;
   --color-warning-bg: #fffbeb;
   --color-warning-border: #fcd34d;
+  --color-warning-text: #92400e;
 
   --color-info: #0ea5e9;
   --color-secondary: #10b981;
@@ -113,7 +114,7 @@
   --color-border-secondary: #1e2229;
   --color-border-strong:    #3a3f4a;
 
-  --color-text-primary:   #e8eaee;
+  --color-text-primary:   #c2cad1;
   --color-text-secondary: #a4a9b4;
   --color-text-tertiary:  #6b707b;
   --color-text-muted:     #565b66;
@@ -137,6 +138,7 @@
   --color-warning: #fbbf24;
   --color-warning-bg: #2d1f00;
   --color-warning-border: #4d3200;
+  --color-warning-text: #fcd34d;
 
   --color-info: #38bdf8;
   --color-secondary: #34d399;
@@ -190,6 +192,7 @@
   --color-warning: #fbbf24;
   --color-warning-bg: #2d1f00;
   --color-warning-border: #4d3200;
+  --color-warning-text: #fcd34d;
 
   --color-info: #38bdf8;
   --color-secondary: #34d399;
@@ -242,6 +245,7 @@
   --color-warning: #f59e0b;
   --color-warning-bg: #fffbeb;
   --color-warning-border: #fcd34d;
+  --color-warning-text: #92400e;
 
   --color-info: #0ea5e9;
   --color-secondary: #10b981;
@@ -294,6 +298,7 @@
   --color-warning: #fbbf24;
   --color-warning-bg: #2d1f00;
   --color-warning-border: #4d3200;
+  --color-warning-text: #fcd34d;
 
   --color-info: #38bdf8;
   --color-secondary: #34d399;
@@ -807,7 +812,11 @@ body {
   margin-bottom: 6px;
   border-bottom: 1px solid var(--color-border-secondary);
 }
-#ext-slot-sidebar-nav      { padding: 10px 0 0px; }
+#ext-slot-sidebar-nav {
+  margin-top: 10px;
+  padding: 10px 0 0px; 
+  border-top: 1px solid var(--color-border-secondary);
+}
 #ext-slot-sidebar-nav-bottom {
   padding: 8px 0 10px;
   margin-top: 6px;
@@ -821,7 +830,7 @@ body {
   gap: 8px;
   padding: 14px 8px 7px;
   font-family: var(--font-mono);
-  font-size: 0.65625rem;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-text-tertiary);
   text-transform: uppercase;
@@ -1511,8 +1520,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  color: var(--color-text-primary);
-  font-size: 0.8125rem;
+  font-size: 0.8325rem;
   font-weight: 400;
   transition: color var(--transition-fast), font-weight var(--transition-fast);
 }
@@ -1805,7 +1813,7 @@ body {
   opacity: 1;
 }
 .task-item.active {
-  background: var(--color-accent-soft);
+  background: var(--color-bg-hover);
 }
 .task-item.active::before {
   content: "";
@@ -2802,7 +2810,7 @@ body {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
-  z-index: 8;
+  z-index: 100;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7982,6 +7990,29 @@ body {
   border-radius: 4px;
   padding: 0.0625rem 0.375rem;
 }
+.extension-verified {
+  font-size: 0.625rem;
+  color: var(--color-success, #16a34a);
+  background: var(--color-success-bg, rgba(22,163,74,0.12));
+  border-radius: 4px;
+  padding: 0.2rem 0.375rem;
+}
+.extension-unverified-banner {
+  font-size: 0.75rem;
+  color: var(--color-warning-text, #92400e);
+  background: var(--color-warning-bg, #fffbeb);
+  border: 1px solid var(--color-warning-border, #fcd34d);
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.extension-unverified-icon {
+  flex-shrink: 0;
+  color: var(--color-warning, #d97706);
+}
 .extension-desc {
   font-size: 0.75rem;
   color: var(--color-text-secondary);
@@ -11549,6 +11580,42 @@ body.setup-mode[data-theme="dark"] {
   gap: 0.625rem;
 }
 
+/* ── Segmented Control (reusable compact tab selector) ──────────────────── */
+.segmented-control {
+  display: flex;
+  gap: 2px;
+  background: var(--color-bg-hover);
+  border-radius: 8px;
+  padding: 3px;
+}
+.segmented-control__btn {
+  padding: 0.3125rem 0.75rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+.segmented-control__btn:hover:not(.active) {
+  color: var(--color-text-primary);
+}
+.segmented-control__btn.active {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  font-weight: 500;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+[data-theme="dark"] .segmented-control {
+  background: var(--color-bg-primary);
+}
+[data-theme="dark"] .segmented-control__btn.active {
+  background: var(--color-bg-hover);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
 /* ═════════════════════════════════════════════════════════════════════════
  * BILLING PANEL
  * ═════════════════════════════════════════════════════════════════════════ */
@@ -11636,39 +11703,9 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 6px;
 }
 
-/* ── Period Button Group ─────────────────────────────────────────────── */
-.billing-period-group {
-  display: flex;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  overflow: hidden;
-}
-.billing-period-btn {
-  padding: 0.4375rem 0.75rem;
-  border: none;
-  background: transparent;
-  color: var(--color-text-secondary);
-  font-size: 0.8125rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.billing-period-btn:not(:last-child) {
-  border-right: 1px solid var(--color-border-primary);
-}
-.billing-period-btn:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
-}
-.billing-period-btn.active {
-  background: var(--color-accent-primary);
-  color: #ffffff;
-  font-weight: 500;
-}
-
 /* ── Model Filter ────────────────────────────────────────────────────── */
 .billing-model-filter {
-  padding: 0.4375rem 1.75rem 0.4375rem 0.75rem;
+  padding: 0.5375rem 1.75rem 0.5375rem 0.75rem;
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
   background: var(--color-bg-secondary);
@@ -11693,28 +11730,6 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Action Buttons ──────────────────────────────────────────────────── */
-.billing-clear-container {
-  position: relative;
-}
-.billing-clear-btn {
-  width: 32px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.billing-clear-btn:hover {
-  background: var(--color-bg-tertiary);
-  border-color: #ef4444;
-  color: #ef4444;
-}
 .billing-share-btn {
   display: inline-flex;
   align-items: center;
@@ -11735,43 +11750,6 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-text-primary);
   border-color: var(--color-accent-primary);
 }
-.billing-clear-popup {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  padding: 0.375rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  z-index: 100;
-  min-width: 120px;
-}
-.billing-clear-option {
-  padding: 0.4375rem 0.75rem;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--color-text-primary);
-  font-size: 0.8125rem;
-  cursor: pointer;
-  text-align: left;
-  white-space: nowrap;
-  transition: background 0.15s ease;
-}
-.billing-clear-option:hover {
-  background: var(--color-bg-tertiary);
-}
-.billing-clear-danger {
-  color: #ef4444;
-}
-.billing-clear-danger:hover {
-  background: rgba(239, 68, 68, 0.08) !important;
-}
 
 /* ── Stats Row ───────────────────────────────────────────────────────── */
 .billing-stats-row {
@@ -11901,11 +11879,6 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Cost Trend Line Chart ───────────────────────────────────────────── */
-.billing-trend-total {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-accent-primary);
-}
 .billing-trend-chart {
   flex: 1;
   min-height: 0;
@@ -14050,11 +14023,23 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Section-level collapse ────────────────────────────────────────────────── */
+#projects-section-header {
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast);
+}
+#projects-section-header:hover {
+  background: var(--color-bg-hover);
+}
+#projects-section-header:hover .btn-icon-sm:hover {
+  background: var(--color-border-primary);
+}
 .projects-section-title {
   display: inline-flex;
   align-items: center;
   gap: 3px;
-  cursor: pointer;
 }
 .projects-section-chevron {
   flex-shrink: 0;
@@ -14078,8 +14063,8 @@ body.setup-mode[data-theme="dark"] {
 .project-group-header {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.3125rem 0.625rem;
+  gap: 0.575rem;
+  padding: 0.3325rem 0.625rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
   user-select: none;
@@ -14095,7 +14080,7 @@ body.setup-mode[data-theme="dark"] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   color: var(--color-text-primary);
 }
 
@@ -14134,113 +14119,18 @@ body.setup-mode[data-theme="dark"] {
   margin-top: 0.08rem;
 }
 
-.project-sessions-empty {
-  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-}
-
-/* ── Project hover tooltip ─────────────────────────────────────────────────── */
-.project-tooltip {
-  position: fixed;
-  z-index: 1200;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 10px;
-  box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
-  padding: 0.75rem 0.875rem 0.75rem 1.125rem; /* extra left padding = visual gap */
-  min-width: 13rem;
-  max-width: 18rem;
-  animation: fadeIn 0.12s ease;
-}
-/* Transparent bridge on the left side fills the gap between sidebar and tooltip */
-.project-tooltip::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -8px;
-  width: 8px;
-  height: 100%;
-}
-[data-theme="dark"] .project-tooltip {
-  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
-}
-
-.project-tooltip-header {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  margin-bottom: 0.75rem;
-}
-.project-tooltip-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  line-height: 0;
-}
-.project-tooltip-icon svg {
-  display: block;
-  flex-shrink: 0;
-}
-.project-tooltip-name {
-  flex: 1;
-  min-width: 0;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.project-tooltip-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-.project-tooltip-row {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  min-width: 0;
-}
-.project-tooltip-row--clickable {
-  cursor: pointer;
-  border-radius: 4px;
-  margin: 0 -0.25rem;
-  padding: 0.15rem 0.25rem;
-  transition: background var(--transition-fast);
-}
-.project-tooltip-row--clickable:hover {
+.project-session-group .session-item.active {
   background: var(--color-bg-hover);
 }
 
-.project-tooltip-divider {
-  height: 1px;
-  background: var(--color-border-primary);
-  margin: 0.25rem 0;
+.project-session-group .session-item.active::before {
+  display: none;
 }
 
-.project-tooltip-row-icon {
-  flex-shrink: 0;
+.project-sessions-empty {
+  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
+  font-size: 0.75rem;
   color: var(--color-text-muted);
-  display: flex;
-  align-items: center;
-  line-height: 0;
-}
-.project-tooltip-row-icon svg {
-  display: block;
-  flex-shrink: 0;
-}
-.project-tooltip-row-text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.4;
 }
 
 /* ── Project context menu (rename / delete) ────────────────────────────────── */
@@ -14258,7 +14148,9 @@ body.setup-mode[data-theme="dark"] {
   box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
 }
 .project-actions-menu-item {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
   padding: 0.375rem 0.625rem;
   border: none;
@@ -14267,17 +14159,43 @@ body.setup-mode[data-theme="dark"] {
   cursor: pointer;
   color: var(--color-text-primary);
   font-size: 0.8125rem;
+  line-height: 1.4;
   text-align: left;
   transition: background .12s ease, color .12s ease;
 }
+.project-actions-menu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  flex: 0 0 0.875rem;
+  color: var(--color-text-secondary);
+  transition: color .12s ease;
+}
+.project-actions-menu-icon svg {
+  display: block;
+  flex-shrink: 0;
+}
+.project-actions-menu-label {
+  min-width: 0;
+  flex: 1;
+}
 .project-actions-menu-item:hover {
   background: var(--color-bg-hover);
 }
+.project-actions-menu-item:hover .project-actions-menu-icon {
+  color: var(--color-text-primary);
+}
 .project-actions-menu-item.danger {
   color: var(--color-error);
   margin-top: 0.25rem;
   position: relative;
 }
+.project-actions-menu-item.danger .project-actions-menu-icon,
+.project-actions-menu-item.danger:hover .project-actions-menu-icon {
+  color: var(--color-error);
+}
 .project-actions-menu-item.danger::before {
   content: "";
   position: absolute;
@@ -14406,6 +14324,13 @@ body.setup-mode[data-theme="dark"] {
   margin-top: 0.75rem;
 }
 
+.create-project-folder-hint {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  margin-top: 0.35rem;
+  line-height: 1.4;
+}
+
 .create-project-folder-label {
   font-size: 0.78rem;
   font-weight: 500;
@@ -14603,4 +14528,3 @@ body.setup-mode[data-theme="dark"] {
 .project-picker-done-btn:hover {
   background: var(--color-bg-hover);
 }
-

data/lib/clacky/web/components/chat-navigator.js

@@ -163,7 +163,7 @@
     popup.style.bottom = "";
     const popupHeight = popup.offsetHeight;
     let top = barCenter - popupHeight / 2;
-    top = Math.max(0, Math.min(top, navRect.height - popupHeight));
+    top = Math.max(48, Math.min(top, navRect.height - popupHeight));
     popup.style.top = top + "px";
 
     const target = items[idx].popupItem;

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

@@ -2,7 +2,7 @@
 //
 // Owns billing state (summary / daily / sessions / model list / current period
 // & model filter), currency conversion utilities (localStorage-backed), the
-// data fetch, and clear-data actions. It never renders.
+// data fetch, and clear-data actions (retained for API use). It never renders.
 //
 // Currency utilities are pure and read by both the view and other modules, so
 // they live with the data layer. Emits store events the view reacts to; mirrors
@@ -103,8 +103,8 @@ const BillingStore = (() => {
       if (_summary) _emit("billing:changed");
     },
 
-    setPeriod(period) { _currentPeriod = period; return Billing.load(); },
-    setModel(model)   { _currentModel = model;   return Billing.load(); },
+    setPeriod(period) { _currentPeriod = period; _emit("billing:changed"); return Billing.load(); },
+    setModel(model)   { _currentModel = model;   _emit("billing:changed"); return Billing.load(); },
 
     async load() {
       const isFirstLoad = !_summary;