openclacky 1.3.0 → 1.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8423d4e64f056251f1763e5cc34502e394f08e2b26de993da5da6a85a88111ef
-  data.tar.gz: 62e60aee3f8654e881870117b4716e053ab0f9328bc3898392ff1ed27517474c
+  metadata.gz: ed703cddac3ffa9887b5c500c5dfbe57c895eb5aab0e9dc3338592c9317555ec
+  data.tar.gz: 67d21c3c857e72bb729cfcecbdb3749eaaac1c76b21e1d0600081d1e4d79e880
 SHA512:
-  metadata.gz: d675c6b981a1fc5f24bbee79dd19dc273817a7f4e233c2ed86a42def4f2fd2876cbc845a9f693383d7f4b67d39f6a62df1eafa65def2a8ace7bb876559c6aba5
-  data.tar.gz: 48adb156c4c8ab26d2908537ac409c161a56b1f6fa5aa2146bdaa5df6b11c2b333e5a04a6aafc4404f1c94ce210fe0c23854d0f86f9cc509f1a27a781f9aa007
+  metadata.gz: 4fe46c92c67e5937bf24e325be47046a9ebf555afb722aaaaf108a17b2c13403c7e42c08d4b1a7abafad5c5ffb5d79d2749264c051572d157d0094dcb067ac78
+  data.tar.gz: 5fa8e909159560aa13944c0435716e7a98265504c6f61e8cfc298bc09553aa218ac404423d4e9b45f5a8d17563f0ae8a7a50547460fb497e06a98bc46b55aa53

data/CHANGELOG.md

@@ -5,6 +5,36 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.2] - 2026-06-18
+
+### Added
+- Right-click context menu on workspace file tree with "Reveal in Finder" support (macOS/Linux/WSL)
+- Resizable workspace panel with a drag handle
+- Expandable task prompt preview — click a task card to view the full prompt
+
+### Improved
+- Skill cards now show a delete button, with shimmer skeleton loading while fetching
+
+### Fixed
+- Every-N-hours cron schedule label now renders correctly (e.g. `0 */2 * * *`)
+- Billing sessions list now shows all rows instead of being clipped
+- Session replay skips reasoning-only assistant messages to match the live view
+- Set-as-default button in settings aligned to the footer row with the top-up link
+
+## [1.3.1] - 2026-06-17
+
+### Added
+- Delete skills directly from the Web UI
+
+### Improved
+- Sidebar is now draggable to resize, with width persisted across sessions
+- Sidebar scrollbar only appears while scrolling for a cleaner look
+- Billing page UI polish and mobile adaptation
+- Default openclacky image model switched to Nano Banana 2
+
+### Fixed
+- Onboarding device-login window no longer gets blocked as a popup
+
 ## [1.3.0] - 2026-06-17
 
 ### Added

data/lib/clacky/agent/session_serializer.rb

@@ -502,14 +502,24 @@ module Clacky
 
         case msg[:role].to_s
         when "assistant"
-          # Text content — prepend reasoning/thinking content wrapped in <think> tags
-          # so the Web UI renders it as a collapsible thinking block
-          text = extract_text_from_content(msg[:content]).to_s.strip
+          # Mirror the live guard at agent.rb (`if response[:content] && !response[:content].empty?`):
+          # only emit an assistant_message when the model produced actual content.
+          # Reasoning-only turns (empty content + reasoning_content + tool_calls)
+          # are silent in live mode; on replay they must stay silent too — otherwise
+          # a phantom <think>-only bubble splits consecutive tool_calls into separate
+          # UI groups, breaking the "N tool(s) used" collapse after refresh (C-5672).
+          raw_text  = extract_text_from_content(msg[:content]).to_s.strip
           reasoning = msg[:reasoning_content]
-          if reasoning && !reasoning.to_s.strip.empty?
-            text = "<think>\n#{reasoning}\n</think>\n#{text}"
+          unless raw_text.empty?
+            text = if reasoning && !reasoning.to_s.strip.empty?
+              # Prepend reasoning wrapped in <think> tags so the Web UI renders it
+              # as a collapsible thinking block.
+              "<think>\n#{reasoning}\n</think>\n#{raw_text}"
+            else
+              raw_text
+            end
+            ui.show_assistant_message(text, files: [])
           end
-          ui.show_assistant_message(text, files: []) unless text.empty?
 
           # Tool calls embedded in assistant message
           Array(msg[:tool_calls]).each do |tc|

data/lib/clacky/brand_config.rb

@@ -961,7 +961,7 @@ module Clacky
     #
     # @param skill_name [String] The slug/name of the skill to remove.
     # @return [void]
-    private def delete_brand_skill!(skill_name)
+    def delete_brand_skill!(skill_name)
       # Remove files from disk.
       skill_dir = File.join(brand_skills_dir, skill_name)
       FileUtils.rm_rf(skill_dir) if Dir.exist?(skill_dir)

data/lib/clacky/providers.rb

@@ -59,7 +59,7 @@ module Clacky
           "or-gemini-3-1-flash-image"  => "Nano Banana 2",
           "or-gpt-image-2"             => "GPT Image 2"
         },
-        "default_image_model" => "or-gpt-image-2",
+        "default_image_model" => "or-gemini-3-1-flash-image",
         # Video generation models served by the openclacky gateway, which
         # routes them to Vertex AI Veo (async predictLongRunning under the
         # hood; the gateway hides the polling and returns the MP4 inline).

data/lib/clacky/server/http_server.rb

@@ -627,6 +627,12 @@ module Clacky
           elsif method == "PATCH" && path.match?(%r{^/api/skills/[^/]+/toggle$})
             name = URI.decode_www_form_component(path.sub("/api/skills/", "").sub("/toggle", ""))
             api_toggle_skill(name, req, res)
+          elsif method == "DELETE" && path.match?(%r{^/api/skills/[^/]+$})
+            name = URI.decode_www_form_component(path.sub("/api/skills/", ""))
+            api_delete_skill(name, res)
+          elsif method == "DELETE" && path.match?(%r{^/api/brand/skills/[^/]+$})
+            slug = URI.decode_www_form_component(path.sub("/api/brand/skills/", ""))
+            api_delete_brand_skill(slug, res)
           elsif method == "POST" && path.match?(%r{^/api/brand/skills/[^/]+/install$})
             slug = URI.decode_www_form_component(path.sub("/api/brand/skills/", "").sub("/install", ""))
             api_brand_skill_install(slug, req, res)
@@ -1939,6 +1945,23 @@ module Clacky
         json_response(res, 500, { ok: false, error: e.message })
       end
 
+      # DELETE /api/brand/skills/:slug
+      # Uninstalls a brand skill by removing its files and metadata.
+      def api_delete_brand_skill(slug, res)
+        brand = Clacky::BrandConfig.load
+        installed = brand.installed_brand_skills
+        unless installed.key?(slug)
+          json_response(res, 404, { ok: false, error: "Brand skill '#{slug}' is not installed" })
+          return
+        end
+
+        brand.delete_brand_skill!(slug)
+        @skill_loader = Clacky::SkillLoader.new(working_dir: nil, brand_config: brand)
+        json_response(res, 200, { ok: true })
+      rescue StandardError => e
+        json_response(res, 500, { ok: false, error: e.message })
+      end
+
       # GET /api/brand
       # Returns brand metadata consumed by the WebUI on boot
       # to dynamically replace branding strings.
@@ -2892,10 +2915,13 @@ module Clacky
           result = Utils::EnvironmentDetector.open_file(linux_path)
           return json_response(res, 501, { error: "unsupported OS" }) if result.nil?
           json_response(res, 200, { ok: true })
+        when "reveal"
+          Utils::EnvironmentDetector.reveal_file(linux_path)
+          json_response(res, 200, { ok: true })
         when "download"
           serve_file_download(res, linux_path)
         else
-          json_response(res, 400, { error: "invalid action. Must be 'open' or 'download'" })
+          json_response(res, 400, { error: "invalid action. Must be 'open', 'reveal' or 'download'" })
         end
       rescue => e
         json_response(res, 500, { ok: false, error: e.message })
@@ -3463,6 +3489,14 @@ module Clacky
         json_response(res, 422, { error: e.message })
       end
 
+      private def api_delete_skill(name, res)
+        skill = @skill_loader[name]
+        return json_response(res, 404, { error: "Skill not found: #{name}" }) unless skill
+
+        FileUtils.rm_rf(skill.directory)
+        json_response(res, 200, { ok: true })
+      end
+
       # POST /api/my-skills/:name/publish
       # GET /api/creator/skills
       # Returns two separate groups:

data/lib/clacky/utils/environment_detector.rb

@@ -36,6 +36,22 @@ module Clacky
         end
       end
 
+      # Reveal a file in the OS file manager (select/highlight it).
+      # macOS: open -R; Linux: xdg-open on parent dir; WSL: explorer /select
+      # @param path [String] Linux-side file path
+      # @return [Boolean, nil] true/false from system(), or nil on unsupported OS
+      def self.reveal_file(path)
+        case os_type
+        when :macos then system("open", "-R", path)
+        when :linux then system("xdg-open", File.dirname(path))
+        when :wsl
+          win_path = linux_to_win_path(path)
+          system("explorer.exe", "/select,#{win_path}")
+        else
+          nil
+        end
+      end
+
       # Convert a Windows-style path to a WSL/Linux-side path.
       # e.g. "C:/Users/foo/file.txt" → "/mnt/c/Users/foo/file.txt"
       # Returns the original path unchanged on non-WSL or if already a Linux path.

data/lib/clacky/version.rb

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

data/lib/clacky/web/app.css

@@ -250,7 +250,7 @@ html { font-size: 16px; }
 .skel-label    { height: 0.75rem;  width: 4rem;  margin-top: 0.375rem; }
 .skel-block    { height: 9rem;  width: 100%; }
 .skel-block-sm { height: 5rem;  width: 100%; }
-.skel-heatmap  { height: 7rem;  width: 100%; }
+.skel-heatmap  { height: 5rem;  width: 178px; }
 
 
 
@@ -375,7 +375,7 @@ body {
 }
 
 .header-logo-img {
-  height: 2.3rem;
+  height: 2rem;
   object-fit: contain;
   display: block;
   flex-shrink: 0;
@@ -498,10 +498,6 @@ body {
 .theme-toggle-btn:active {
   background: var(--color-bg-hover);
 }
-/* Sound-notification toggle shares .theme-toggle-btn; highlight when ON. */
-#notify-toggle-header.notify-on:hover {
-  color: var(--color-accent-primary, var(--color-text-primary));
-}
 
 /* ── Content Row (Sidebar + Main) ───────────────────────────────────────── */
 #app > aside,
@@ -530,8 +526,9 @@ body {
 /* The sidebar sits on the outer frame (bg-primary) so it's visibly a layer
    BEHIND the chat surface (bg-secondary). Subtle right border separates them. */
 #sidebar {
-  width: 15rem;
-  min-width: 15rem;
+  --sidebar-width: 15rem;
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
   background: var(--color-bg-primary);
   border-right: 1px solid var(--color-border-primary);
   display: flex;
@@ -540,9 +537,22 @@ body {
   height: 100%;
   flex-shrink: 0;
   margin-left: 0;
+  position: relative;
 }
 #sidebar.hidden {
-  margin-left: -15rem;
+  margin-left: calc(-1 * var(--sidebar-width));
+}
+#sidebar-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 10;
+}
+#sidebar:has(#sidebar-resize-handle.active) {
+  transition: background-color var(--transition-base);
 }
 #sidebar-header {
   display: flex;
@@ -578,6 +588,22 @@ body {
   flex-direction: column;
   min-height: 0;
   padding: 0 6px 8px;
+  margin-right: -1px;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+#sidebar-list.is-scrolling {
+  scrollbar-color: var(--color-border-secondary) transparent;
+}
+#sidebar-list::-webkit-scrollbar { width: 4px; }
+#sidebar-list::-webkit-scrollbar-track { background: transparent; }
+#sidebar-list::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 4px;
+  transition: background 0.4s;
+}
+#sidebar-list.is-scrolling::-webkit-scrollbar-thumb {
+  background: var(--color-border-secondary);
 }
 #session-list { padding: 4px 0 0; min-height: 6.75rem; }
 
@@ -598,10 +624,6 @@ body {
   background: var(--color-bg-primary);
   z-index: 10;
 }
-.sidebar-divider:first-child {
-  margin-top: 0;
-  padding-top: 18px;
-}
 .sidebar-divider span {
   white-space: nowrap;
   flex: 0 0 auto;
@@ -1732,6 +1754,30 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.task-card-preview-expandable {
+  cursor: pointer;
+}
+.task-card-preview-expandable:hover {
+  color: var(--color-accent-primary);
+}
+.task-card-detail {
+  margin-top: 0.625rem;
+  padding: 0.625rem 0.75rem;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+}
+.task-card-detail-content {
+  margin: 0;
+  font-size: 0.75rem;
+  font-family: inherit;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 12rem;
+  overflow-y: auto;
+}
 .task-card-actions {
   display: flex;
   align-items: center;
@@ -1885,7 +1931,8 @@ body {
 
 /* ── Workspace panel (right file browser) ───────────────────────────────── */
 #workspace-panel {
-  width: 280px;
+  --workspace-width: 280px;
+  width: var(--workspace-width);
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -1893,8 +1940,21 @@ body {
   background: var(--color-bg-primary);
   overflow: hidden;
   transition: width var(--transition-base);
+  position: relative;
 }
 #workspace-panel.collapsed { width: 0; border-left: none; }
+#workspace-resize-handle {
+  position: absolute;
+  top: 0;
+  left: -3px;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 10;
+}
+#workspace-panel:has(#workspace-resize-handle.active) {
+  transition: background-color var(--transition-base);
+}
 #workspace-header {
   display: flex;
   align-items: center;
@@ -2128,7 +2188,7 @@ body {
 .msg-user .msg-time      { color: var(--color-text-secondary); right: 0; left: auto; padding-right: 0.25rem; }
 .msg-assistant .msg-time { color: var(--color-text-secondary); left: 0;  right: auto; padding-left: 0.25rem; }
 
-.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); align-self: flex-end; white-space: pre-wrap; border: 1px solid var(--color-border-secondary); }
+.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); align-self: flex-end; white-space: pre-wrap; }
 [data-theme="dark"] .msg-user { background: var(--color-accent-soft); }
 .msg-assistant { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); align-self: flex-start; }
 
@@ -2777,11 +2837,11 @@ body {
 #session-info-bar {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 0.375rem;
   flex-wrap: wrap;
-  padding: 6px 0 6px 0;
-  margin-left: 24px;
-  margin-right: 24px;
+  padding: 0.375rem 0.75rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
   background: transparent;
   border-top: none;
   font-size: 0.6875rem;
@@ -4611,14 +4671,15 @@ body {
 }
 .model-card-grid-toolbar {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 0.375rem;
   margin-left: auto;
   justify-content: flex-end;
 }
 .model-card-grid-footer {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 0.25rem;
 }
 .model-card-grid-link {
@@ -6541,6 +6602,24 @@ body {
   background: var(--color-success-bg);
 }
 
+/* ── Delete button ────────────────────────────────────────────────────────── */
+.btn-skill-delete {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.btn-skill-delete:hover {
+  color: var(--color-error, #c0392b);
+  border-color: var(--color-error-border, #f5c6c6);
+  background: var(--color-error-bg, #fff0f0);
+}
+
 /* ── Skills sidebar section ──────────────────────────────────────────────── */
 #skill-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
 
@@ -9712,9 +9791,6 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 12px;
   transition: border-color 0.15s ease;
 }
-.billing-stat-card:hover {
-  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
-}
 .billing-stat-primary {
   border-color: color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
 }
@@ -9762,7 +9838,12 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Heatmap ─────────────────────────────────────────────────────────── */
-.billing-heatmap-row { width: 100%; }
+.billing-heatmap-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  width: 100%;
+}
 .billing-heat-dow-row {
   display: grid;
   grid-template-columns: repeat(7, 28px);
@@ -9790,11 +9871,11 @@ body.setup-mode[data-theme="dark"] {
 }
 .billing-heat-cell.is-empty { background: transparent; }
 .billing-heat-cell[data-level="0"] { background: var(--color-border-primary); }
-.billing-heat-cell[data-level="1"] { background: #9be9a8; }
-.billing-heat-cell[data-level="2"] { background: #40c463; }
-.billing-heat-cell[data-level="3"] { background: #30a14e; }
-.billing-heat-cell[data-level="4"] { background: #216e39; }
-.billing-heat-cell[data-level="5"] { background: #0a4020; }
+.billing-heat-cell[data-level="1"] { background: color-mix(in srgb, var(--color-accent-primary) 20%, var(--color-bg-secondary)); }
+.billing-heat-cell[data-level="2"] { background: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-bg-secondary)); }
+.billing-heat-cell[data-level="3"] { background: color-mix(in srgb, var(--color-accent-primary) 60%, var(--color-bg-secondary)); }
+.billing-heat-cell[data-level="4"] { background: color-mix(in srgb, var(--color-accent-primary) 80%, var(--color-bg-secondary)); }
+.billing-heat-cell[data-level="5"] { background: var(--color-accent-primary); }
 .billing-heat-legend {
   display: flex;
   align-items: center;
@@ -9808,6 +9889,63 @@ body.setup-mode[data-theme="dark"] {
   aspect-ratio: auto;
 }
 
+/* ── Heatmap + Trend two-column row ──────────────────────────────────── */
+.billing-heatmap-card,
+.billing-trend-card {
+  min-width: 0;
+  min-height: 140px;
+}
+
+/* ── Cost Trend Line Chart ───────────────────────────────────────────── */
+.billing-trend-total {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-accent-primary);
+}
+.billing-trend-chart {
+  flex: 1;
+  min-height: 0;
+}
+.billing-trend-svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.billing-trend-grid-line {
+  stroke: var(--color-border-primary);
+  stroke-width: 1;
+}
+.billing-trend-y-label {
+  font-size: 9px;
+  fill: var(--color-text-secondary);
+  text-anchor: end;
+}
+.billing-trend-x-label {
+  font-size: 9px;
+  fill: var(--color-text-secondary);
+  text-anchor: middle;
+}
+.billing-trend-line {
+  stroke: var(--color-accent-primary);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.billing-trend-area {
+  fill: url(#billing-trend-grad);
+}
+.billing-trend-dot {
+  fill: var(--color-accent-primary);
+  stroke: var(--color-bg-secondary);
+  stroke-width: 2;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.billing-trend-svg:hover .billing-trend-dot {
+  opacity: 1;
+}
+
 /* ── Chart Card base ─────────────────────────────────────────────────── */
 .billing-chart-row { width: 100%; }
 .billing-chart-card {
@@ -10002,6 +10140,8 @@ body.setup-mode[data-theme="dark"] {
   border: 1px solid var(--color-border-primary);
   border-radius: 12px;
   padding: 1.25rem;
+  height: 16rem;
+  overflow-y: auto;
 }
 .billing-section h3 {
   font-size: 0.9375rem;
@@ -10103,6 +10243,7 @@ body.setup-mode[data-theme="dark"] {
   height: 100%;
   background: var(--color-accent-primary);
   border-radius: 3px;
+  min-width: 8px;
 }
 .billing-model-cost {
   font-size: 0.8125rem;
@@ -10603,6 +10744,9 @@ body.setup-mode[data-theme="dark"] {
   text-align: right;
   color: var(--color-text-primary);
 }
+.billing-cell-total {
+  color: var(--color-accent-primary);
+}
 .billing-cell-hit {
   color: #3b82f6;
 }
@@ -11180,6 +11324,7 @@ body.setup-mode[data-theme="dark"] {
     transform: translateX(-100%);
     margin-left: 0 !important;
   }
+  #sidebar-resize-handle { display: none; }
 
   /* Overlay backdrop */
   #sidebar-overlay {
@@ -11219,7 +11364,9 @@ body.setup-mode[data-theme="dark"] {
 
   /* Session info bar: single-line, no hover-expand, font smaller */
   #session-info-bar {
-    padding: 0.1875rem 0.75rem;
+    padding: 0.1875rem 0.5rem;
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
     font-size: 0.625rem;
     overflow: hidden;
     white-space: nowrap;
@@ -11246,9 +11393,14 @@ body.setup-mode[data-theme="dark"] {
     margin: 0 0.25rem;
   }
 
+  /* Tighten input area outer padding on mobile */
+  #input-area {
+    padding: 0px 12px 12px;
+  }
+
   /* Input bar: proportional spacing, touch-friendly */
   #input-bar {
-    padding: 0.5rem 0.625rem;
+    padding: 0.375rem 0.5rem;
     gap: 0.25rem;
   }
 
@@ -11264,12 +11416,12 @@ body.setup-mode[data-theme="dark"] {
   /* Textarea: prevent iOS auto-zoom (must be ≥1rem) */
   #user-input {
     font-size: 1rem;
-    padding: 0.4375rem 0.625rem;
+    padding: 0.1875rem 0.375rem;
   }
 
   /* Send button: bigger tap target */
   #btn-send, #btn-interrupt {
-    padding: 0.4375rem 0.875rem;
+    padding: 0.3125rem 0.75rem;
     font-size: 0.875rem;
   }
 
@@ -11329,7 +11481,7 @@ body.setup-mode[data-theme="dark"] {
     min-height: 0;
   }
   #skills-body {
-    padding: 1rem 1rem 5rem;
+    padding: 1rem 1rem 1rem;
     gap: 0.75rem;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -11430,9 +11582,11 @@ body.setup-mode[data-theme="dark"] {
   }
 
   /* ── Billing / Trash / Creator pages ── */
-  #billing-body { padding: 1rem 1rem 5rem; }
-  #trash-body   { padding: 1rem 1rem 5rem; }
-  #creator-body { padding: 1rem 1rem 5rem; }
+  #billing-body { padding: 1rem 1rem 1rem; }
+  #trash-body   { padding: 1rem 1rem 1rem; }
+  #creator-body { padding: 1rem 1rem 1rem; }
+
+  .billing-heatmap-row { grid-template-columns: 1fr; }
 
   /* ── MCP page ── */
   #mcp-panel {

data/lib/clacky/web/app.js

@@ -513,6 +513,57 @@ if ($("btn-toggle-sidebar")) {
 // Tap overlay to close sidebar on mobile
 $("sidebar-overlay").addEventListener("click", _closeSidebar);
 
+// ── Sidebar resize ──────────────────────────────────────────────────────
+(function _initSidebarResize() {
+  const sidebar = $("sidebar");
+  const handle = $("sidebar-resize-handle");
+  if (!sidebar || !handle) return;
+
+  const MIN_W = 12;  // rem
+  const MAX_W = 32;  // rem
+  const baseFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+  let startX = 0;
+  let startW = 0;
+
+  // Restore saved width
+  const saved = localStorage.getItem("sidebar-width");
+  if (saved) {
+    const w = parseFloat(saved);
+    if (w >= MIN_W && w <= MAX_W) {
+      sidebar.style.setProperty("--sidebar-width", w + "rem");
+    }
+  }
+
+  function _getWidth() {
+    return parseFloat(getComputedStyle(sidebar).getPropertyValue("--sidebar-width"));
+  }
+
+  handle.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    startX = e.clientX;
+    startW = _getWidth();
+    handle.classList.add("active");
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  });
+
+  document.addEventListener("mousemove", (e) => {
+    if (!handle.classList.contains("active")) return;
+    const dx = (e.clientX - startX) / baseFontSize;
+    const newW = Math.min(MAX_W, Math.max(MIN_W, startW + dx));
+    sidebar.style.setProperty("--sidebar-width", newW + "rem");
+  });
+
+  document.addEventListener("mouseup", () => {
+    if (!handle.classList.contains("active")) return;
+    handle.classList.remove("active");
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    localStorage.setItem("sidebar-width", _getWidth());
+  });
+})();
+
 // On mobile: start with sidebar hidden
 if (_isMobile()) _closeSidebar();