openclacky 0.8.9 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9fbd7535e2cc98aadf0d9bbc3ff8dcc3db04669ba5c972ec00b41c338f1c3ae5
-  data.tar.gz: 345be84b2b010db47ccdd0454b0214463117519fe5d029440290c0187006ff4a
+  metadata.gz: 732978cd6072f33b558e6260af317ffa188529f922913193d9b7505745f0bb2b
+  data.tar.gz: 3a03afdbb194bbf3e52cd89d173a05186e01ce4cb8564410e294e0e5bb7db501
 SHA512:
-  metadata.gz: 317f05f87355eb3c58da51dde828b6fafd3abbc7cc8bfa874c19445b5a783f7687ee84c7e8ddcf59573b7a554687ee8b2c9e5a8ed5d14993b6167fe5a656a881
-  data.tar.gz: ce669491b51cbff8f3fbdea2262d51d206377617d69ad981ac5025b824b86638d78d248ea6dcd89f4b9ecca92d042efa91b783dff220bec5c4ac348c8535b6d6
+  metadata.gz: 0ad076fe8aa80fe40b8f9908cdf6bab87c08110c8940c76aa3d8fe5944886f565735b7dd06008e9f54fc0a13a3b1d5966800d3bb02bf1d7268cf99faab181dd4
+  data.tar.gz: e29e2688839d08a271b105830df847517cfaab57ecae36d50787687180b1ba9a41e15a68f6e3afc21a800dd78b6eea6c7556c97c503aabdc46c2763bdf1c0bb8

data/CHANGELOG.md

@@ -7,9 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [0.8.9] - 2026-03-13
+## [0.9.0] - 2026-03-14
 
 ### Added
+- **Version check and one-click upgrade in WebUI**: a version badge in the sidebar shows when a newer gem is available; clicking it opens an upgrade popover with a live install log and a restart button — no terminal needed
+- **Upgrade badge state machine**: the badge cycles through four visual states — amber pulsing dot (update available), spinning ring (installing), orange bouncing dot (restart needed), green check (restarted successfully)
 - **Markdown rendering in WebUI chat**: assistant responses are now rendered as rich markdown — headings, bold, code blocks, lists, and inline code are all formatted properly instead of displayed as raw text
 - **Session naming with auto-name and inline rename**: sessions are automatically named after the first exchange; users can double-click any session in the sidebar to rename it inline
 - **Session info bar with live status animation**: a slim bar below the chat header shows the session name, working directory, and a pulsing animation while the agent is thinking or executing tools
@@ -18,10 +20,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Idle compression in WebUI**: the agent now compresses long conversation history automatically when the session has been idle, keeping context efficient without manual intervention
 
 ### Improved
+- **Glob tool recursive search**: bare pattern names like `controller` are now automatically expanded to `**/*controller*` so searches always return results across all subdirectories
 - **Onboard flow**: soul setup is now non-blocking; the confirmation page is skipped for a faster first-run experience; onboard now asks the user to name the AI first, then collects the user profile
 - **Token usage display ordering**: the token usage line in WebUI now always appears below the assistant message bubble, not above it
+- **i18n coverage**: settings panel dynamically-rendered fields are now translated correctly at render time
 
 ### Fixed
+- **Upgrade popover stays open during install and reconnect**: the popover is now locked while a gem install or server restart is in progress, preventing accidental dismissal that would leave the badge stuck in a spinning state
+- **Session auto-name respects default placeholders**: session names are now assigned based on message history only, not the agent's internal name field, so placeholder names like "Session 1" no longer block the auto-naming logic
 - **Token usage line disappears after page refresh**: token usage data is now persisted in session history and correctly re-rendered when the page is reloaded
 - **Shell tool hangs on background commands**: commands containing `&` (background operator) no longer cause the shell tool to block indefinitely
 - **White flash on page load**: the page is now hidden until boot completes, preventing a flash of unstyled content or the wrong view on startup

data/lib/clacky/server/http_server.rb

@@ -131,10 +131,20 @@ module Clacky
         @agent_config   = agent_config
         @client_factory = client_factory  # callable: -> { Clacky::Client.new(...) }
         @brand_test     = brand_test      # when true, skip remote API calls for license activation
+        # Capture the absolute path of the entry script and original ARGV at startup,
+        # so api_restart can re-exec the correct binary even if cwd changes later.
+        @restart_script = File.expand_path($0)
+        @restart_argv   = ARGV.dup
         @registry        = SessionRegistry.new
         @session_manager = Clacky::SessionManager.new
         @ws_clients      = {}  # session_id => [WebSocketConnection, ...]
         @ws_mutex        = Mutex.new
+        # Version cache: { latest: "x.y.z", checked_at: Time }
+        @version_cache   = nil
+        @version_mutex   = Mutex.new
+        # Version cache: { latest: "x.y.z", checked_at: Time }
+        @version_cache   = nil
+        @version_mutex   = Mutex.new
         @scheduler       = Scheduler.new(
           session_registry: @registry,
           session_builder:  method(:build_session)
@@ -264,6 +274,9 @@ module Clacky
         when ["GET",    "/api/brand"]             then api_brand_info(res)
         when ["GET",    "/api/channels"]          then api_list_channels(res)
         when ["POST",   "/api/upload"]            then api_upload_file(req, res)
+        when ["GET",    "/api/version"]           then api_get_version(res)
+        when ["POST",   "/api/version/upgrade"]   then api_upgrade_version(req, res)
+        when ["POST",   "/api/restart"]           then api_restart(req, res)
         else
           if method == "POST" && path.match?(%r{^/api/channels/[^/]+/test$})
             platform = path.sub("/api/channels/", "").sub("/test", "")
@@ -591,6 +604,111 @@ module Clacky
         json_response(res, 200, brand.to_h)
       end
 
+      # ── Version API ───────────────────────────────────────────────────────────
+
+      # GET /api/version
+      # Returns current version and latest version from RubyGems (cached for 1 hour).
+      def api_get_version(res)
+        current = Clacky::VERSION
+        latest  = fetch_latest_version_cached
+        json_response(res, 200, {
+          current:      current,
+          latest:       latest,
+          needs_update: latest ? version_older?(current, latest) : false
+        })
+      end
+
+      # POST /api/version/upgrade
+      # Runs `gem update openclacky --no-document` via Clacky::Tools::Shell (login shell)
+      # in a background thread, streaming output via WebSocket broadcast.
+      # On success, re-execs the process so the new gem version is loaded.
+      def api_upgrade_version(req, res)
+        json_response(res, 202, { ok: true, message: "Upgrade started" })
+
+        Thread.new do
+          begin
+            broadcast_all(type: "upgrade_log", line: "Starting upgrade: gem update openclacky --no-document\n")
+
+            shell  = Clacky::Tools::Shell.new
+            result = shell.execute(command: "gem update openclacky --no-document",
+                                   soft_timeout: 300, hard_timeout: 600)
+            output  = [result[:stdout], result[:stderr]].join
+            success = result[:exit_code] == 0
+
+            broadcast_all(type: "upgrade_log", line: output)
+
+            if success
+              broadcast_all(type: "upgrade_log", line: "\n✓ Upgrade successful! Please restart the server to apply the new version.\n")
+              broadcast_all(type: "upgrade_complete", success: true)
+            else
+              broadcast_all(type: "upgrade_log", line: "\n✗ Upgrade failed. Please try manually: gem update openclacky\n")
+              broadcast_all(type: "upgrade_complete", success: false)
+            end
+          rescue StandardError => e
+            broadcast_all(type: "upgrade_log", line: "\n✗ Error during upgrade: #{e.message}\n")
+            broadcast_all(type: "upgrade_complete", success: false)
+          end
+        end
+      end
+
+      # POST /api/restart
+      # Re-execs the current process so the newly installed gem version is loaded.
+      # Uses the absolute script path captured at startup to avoid relative-path issues.
+      # Responds 200 first, then waits briefly for WEBrick to flush the response before exec.
+      def api_restart(req, res)
+        json_response(res, 200, { ok: true, message: "Restarting…" })
+
+        script = @restart_script
+        argv   = @restart_argv
+        Thread.new do
+          sleep 0.5  # Let WEBrick flush the HTTP response
+          Clacky::Logger.info("[Restart] exec: #{RbConfig.ruby} #{script} #{argv.join(' ')}")
+          exec(RbConfig.ruby, script, *argv)
+        end
+      end
+
+      # Fetch the latest gem version using `gem list -r`, with a 1-hour in-memory cache.
+      # Uses Clacky::Tools::Shell (login shell) so rbenv/mise shims and gem mirrors work correctly.
+      private def fetch_latest_version_cached
+        @version_mutex.synchronize do
+          now = Time.now
+          if @version_cache && (now - @version_cache[:checked_at]) < 3600
+            return @version_cache[:latest]
+          end
+        end
+
+        # Fetch outside the mutex to avoid blocking other requests
+        latest = fetch_latest_version_from_gem
+
+        @version_mutex.synchronize do
+          @version_cache = { latest: latest, checked_at: Time.now }
+        end
+
+        latest
+      end
+
+      # Query the latest openclacky version via `gem list -r openclacky`.
+      # Runs through login shell so gem source mirrors configured via rbenv/mise work correctly.
+      # Output format: "openclacky (0.9.0)"
+      private def fetch_latest_version_from_gem
+        shell  = Clacky::Tools::Shell.new
+        result = shell.execute(command: "gem list -r openclacky", soft_timeout: 15, hard_timeout: 30)
+        return nil unless result[:exit_code] == 0
+
+        out   = result[:stdout].to_s
+        match = out.match(/^openclacky\s+\(([^)]+)\)/)
+        match ? match[1].strip : nil
+      rescue StandardError
+        nil
+      end
+
+      # Returns true if version string `a` is strictly older than `b`.
+      private def version_older?(a, b)
+        Gem::Version.new(a) < Gem::Version.new(b)
+      rescue ArgumentError
+        false
+      end
+
       # ── Channel API ───────────────────────────────────────────────────────────
 
       # GET /api/channels
@@ -1354,8 +1472,10 @@ module Clacky
         end
         content = [content, *file_refs].join("\n") unless file_refs.empty?
 
-        # Auto-name the session from the first user message (before agent starts running)
-        if agent.name.empty? && agent.messages.empty?
+        # Auto-name the session from the first user message (before agent starts running).
+        # Check messages.empty? only — agent.name may already hold a default placeholder
+        # like "Session 1" assigned at creation time, so it's not a reliable signal.
+        if agent.messages.empty?
           auto_name = content.gsub(/\s+/, " ").strip[0, 30]
           auto_name += "…" if content.strip.length > 30
           agent.rename(auto_name)
@@ -1635,15 +1755,23 @@ module Clacky
 
         pid = File.read(pid_file).strip.to_i
         return if pid <= 0
+        # After exec-restart, the new process inherits the same PID as the old one.
+        # Skip sending TERM to ourselves — we are already the new server.
+        if pid == Process.pid
+          Clacky::Logger.info("[Server] exec-restart detected (PID=#{pid}), skipping self-kill.")
+          return
+        end
 
         begin
           Process.kill("TERM", pid)
+          Clacky::Logger.info("[Server] Stopped existing server (PID=#{pid}) on port #{port}.")
           puts "Stopped existing server (PID: #{pid}) on port #{port}."
           # Give it a moment to release the port
           sleep 0.5
         rescue Errno::ESRCH
-          # Process already gone — nothing to do
+          Clacky::Logger.info("[Server] Existing server PID=#{pid} already gone.")
         rescue Errno::EPERM
+          Clacky::Logger.warn("[Server] Could not stop existing server (PID=#{pid}) — permission denied.")
           puts "Could not stop existing server (PID: #{pid}) — permission denied."
         ensure
           File.delete(pid_file) if File.exist?(pid_file)

data/lib/clacky/tools/glob.rb

@@ -63,11 +63,22 @@ module Clacky
             ignored: 0
           }
 
+          # Auto-expand bare patterns (no slash, no **) to recursive search.
+          # e.g. "*install*" -> "**/*install*", "*.rb" -> "**/*.rb"
+          # This avoids surprising empty results when files are in subdirectories.
+          effective_pattern = if !File.absolute_path?(pattern) &&
+                                  !pattern.include?("/") &&
+                                  !pattern.start_with?("**")
+                                "**/#{pattern}"
+                              else
+                                pattern
+                              end
+
           # Build full pattern - handle absolute paths correctly
-          full_pattern = if File.absolute_path?(pattern)
-                          pattern
+          full_pattern = if File.absolute_path?(effective_pattern)
+                          effective_pattern
                         else
-                          File.join(base_path, pattern)
+                          File.join(base_path, effective_pattern)
                         end
           # Always-ignored directory names that should never appear in results
           always_ignored_dirs = Clacky::Utils::FileIgnoreHelper::ALWAYS_IGNORED_DIRS

data/lib/clacky/version.rb

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

data/lib/clacky/web/app.css

@@ -33,6 +33,7 @@
 
   --color-button-primary: #60a5fa;
   --color-button-primary-hover: #3d8bd8;
+  --color-button-primary-text: #ffffff;
 
   --color-info: #38bdf8;
   --color-secondary: #34d399;
@@ -77,6 +78,7 @@
 
   --color-button-primary: #3b82f6;
   --color-button-primary-hover: #2563eb;
+  --color-button-primary-text: #ffffff;
 
   --color-info: #38bdf8;
   --color-secondary: #10b981;
@@ -3060,3 +3062,314 @@ body {
   border: 1px dashed var(--color-border-primary);
   border-radius: 8px;
 }
+
+/* ── Version badge (inline in Settings row, right-aligned) ──────────────── */
+
+/* Settings button stretches to fill width; version badge pushes to the right */
+#btn-settings {
+  position: relative;
+}
+
+.version-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;        /* push to right inside flex btn-settings */
+  padding: 2px 6px;
+  border-radius: 4px;
+  cursor: default;
+  transition: background .15s;
+  flex-shrink: 0;
+}
+/* When actionable, clicking the badge opens the popover.
+   We intercept click on the badge span, stop propagation to avoid
+   opening the settings panel at the same time. */
+.version-badge.has-update,
+.version-badge.upgrade-done,
+.version-badge.is-upgrading { cursor: pointer; }
+
+.version-text {
+  font-size: 10.5px;
+  color: var(--color-text-muted);
+  font-family: monospace;
+  letter-spacing: 0.03em;
+  transition: color .15s;
+  line-height: 1;
+}
+/* Highlight version text when badge is actionable and btn is hovered */
+#btn-settings:hover .version-text { color: var(--color-text-tertiary); }
+.version-badge.has-update .version-text,
+.version-badge.upgrade-done .version-text { color: var(--color-accent-primary); }
+
+/* Amber pulsing dot — update available */
+.version-update-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-warning);
+  flex-shrink: 0;
+  box-shadow: 0 0 5px var(--color-warning);
+  animation: vbadge-pulse 2s ease-in-out infinite;
+}
+@keyframes vbadge-pulse {
+  0%, 100% { opacity: 1;   box-shadow: 0 0 5px var(--color-warning); }
+  50%       { opacity: 0.4; box-shadow: 0 0 2px var(--color-warning); }
+}
+
+/* Tiny spinning ring — upgrade in progress */
+.version-spinner {
+  width: 9px;
+  height: 9px;
+  border: 1.5px solid var(--color-border-primary);
+  border-top-color: var(--color-accent-primary);
+  border-radius: 50%;
+  flex-shrink: 0;
+  animation: vbadge-spin .7s linear infinite;
+}
+@keyframes vbadge-spin { to { transform: rotate(360deg); } }
+
+/* Orange bouncing dot — needs restart (upgrade done, waiting for restart) */
+.version-restart-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #f97316;   /* orange-500 */
+  flex-shrink: 0;
+  animation: vbadge-bounce 1s ease-in-out infinite;
+}
+@keyframes vbadge-bounce {
+  0%, 100% { transform: translateY(0);    opacity: 1;   }
+  50%       { transform: translateY(-3px); opacity: 0.7; }
+}
+
+/* Green check — restarted successfully */
+.version-done-check {
+  font-size: 10px;
+  color: #22c55e;
+  flex-shrink: 0;
+  line-height: 1;
+  animation: vbadge-popin .25s cubic-bezier(.34,1.56,.64,1) both;
+}
+@keyframes vbadge-popin {
+  from { transform: scale(0); opacity: 0; }
+  to   { transform: scale(1); opacity: 1; }
+}
+
+/* ── Upgrade popover (fixed, floats above badge) ─────────────────────────── */
+.vup {
+  position: fixed;
+  z-index: 9999;
+  width: 240px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
+  padding: 14px 16px 12px;
+  display: none;
+  /* Slide-up + fade entrance */
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity .18s ease, transform .18s ease;
+}
+.vup--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+/* Tiny arrow pointing down toward badge */
+.vup::after {
+  content: "";
+  position: absolute;
+  bottom: -6px;
+  left: 20px;
+  width: 10px;
+  height: 10px;
+  background: var(--color-bg-secondary);
+  border-right: 1px solid var(--color-border-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+  transform: rotate(45deg);
+}
+
+/* Confirm state */
+.vup-desc {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  line-height: 1.55;
+  margin: 0 0 8px;
+}
+.vup-versions {
+  font-size: 12px;
+  font-family: monospace;
+  color: var(--color-text-primary);
+  margin: 0 0 12px;
+  font-weight: 600;
+}
+.vup-arrow {
+  color: var(--color-accent-primary);
+  margin: 0 4px;
+}
+.vup-actions {
+  display: flex;
+  gap: 8px;
+}
+.vup-btn-primary {
+  flex: 1;
+  padding: 7px 0;
+  background: var(--color-button-primary);
+  color: var(--color-button-primary-text);
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background .15s, transform .1s;
+}
+.vup-btn-primary:hover  { background: var(--color-button-primary-hover); }
+.vup-btn-primary:active { transform: scale(.97); }
+.vup-btn-cancel {
+  padding: 7px 12px;
+  background: transparent;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background .15s, color .15s;
+}
+.vup-btn-cancel:hover { background: var(--color-bg-hover); color: var(--color-text-secondary); }
+
+/* Progress state */
+.vup-progress-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.vup-installing-label {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+/* Animated 3-dot ellipsis */
+.vup-installing-dot {
+  display: inline-flex;
+  gap: 3px;
+}
+.vup-installing-dot::before,
+.vup-installing-dot::after,
+.vup-installing-dot b {
+  content: "";
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--color-accent-primary);
+  animation: vup-bounce 1.2s ease-in-out infinite;
+}
+.vup-installing-dot::after  { animation-delay: .2s; }
+/* We use a pseudo trick — actual 3 dots via box-shadow instead */
+.vup-installing-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--color-accent-primary);
+  animation: vup-bounce 1.2s ease-in-out infinite;
+  box-shadow: 10px 0 0 var(--color-accent-primary), 20px 0 0 var(--color-accent-primary);
+  margin-right: 24px; /* make room for box-shadow dots */
+  flex-shrink: 0;
+}
+.vup-installing-dot::before,
+.vup-installing-dot::after { display: none; }
+
+/* Stagger the shadow dots via custom animation composition */
+.vup-installing-dot {
+  animation: vup-bounce1 1.2s ease-in-out infinite;
+}
+@keyframes vup-bounce1 {
+  0%, 80%, 100% { box-shadow: 10px 0 0 var(--color-accent-primary), 20px 0 0 var(--color-accent-primary); opacity: 1; }
+  40%            { box-shadow: 10px 0 0 var(--color-accent-primary), 20px 0 0 var(--color-accent-primary); opacity: .4; }
+}
+@keyframes vup-bounce { 0%, 80%, 100% { opacity: 1; } 40% { opacity: .3; } }
+
+.vup-log {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 10.5px;
+  font-family: monospace;
+  line-height: 1.5;
+  color: var(--color-text-muted);
+  max-height: 140px;
+  min-height: 60px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
+
+/* Done state */
+.vup-done-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+.vup-done-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #22c55e;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  flex-shrink: 0;
+  animation: vbadge-popin .3s cubic-bezier(.34,1.56,.64,1) both;
+}
+.vup-btn-restart {
+  width: 100%;
+  padding: 9px 0;
+  background: var(--color-button-primary);
+  color: var(--color-button-primary-text);
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background .15s, transform .1s;
+  letter-spacing: .02em;
+}
+.vup-btn-restart:hover  { background: var(--color-button-primary-hover); }
+.vup-btn-restart:active { transform: scale(.97); }
+
+/* Reconnect state */
+.vup-reconnect {
+  text-align: center;
+  padding: 8px 0 4px;
+}
+.vup-reconnect-spinner {
+  width: 28px;
+  height: 28px;
+  border: 2.5px solid var(--color-border-primary);
+  border-top-color: var(--color-accent-primary);
+  border-radius: 50%;
+  animation: vbadge-spin .7s linear infinite;
+  margin: 0 auto 10px;
+}
+.vup-reconnect-msg {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+/* Error state */
+.vup-error {
+  font-size: 12px;
+  color: var(--color-error, #ef4444);
+  margin: 0;
+  line-height: 1.5;
+}
+
+

data/lib/clacky/web/i18n.js

@@ -49,6 +49,22 @@ const I18n = (() => {
       "modal.yes": "Yes",
       "modal.no":  "No",
 
+      // ── Version / Upgrade ──
+      "upgrade.desc":              "A new version is available. It will install in the background — you can keep using the app.",
+      "upgrade.btn.upgrade":       "Upgrade Now",
+      "upgrade.btn.cancel":        "Cancel",
+      "upgrade.btn.restart":       "↻ Restart Now",
+      "upgrade.installing":        "Installing…",
+      "upgrade.done":              "Upgrade complete!",
+      "upgrade.failed":            "Upgrade failed. Please try again.",
+      "upgrade.reconnecting":      "Restarting server…",
+      "upgrade.restart.success":   "✓ Restarted successfully!",
+      "upgrade.tooltip.upgrading":    "Upgrading — click to see progress",
+      "upgrade.tooltip.new":         "v{{latest}} available — click to upgrade",
+      "upgrade.tooltip.ok":          "v{{current}} (up to date)",
+      "upgrade.tooltip.needs_restart": "Upgrade complete — click to restart",
+      "upgrade.tooltip.done":        "Restarted successfully",
+
       // ── Tasks panel ──
       "tasks.title":          "Scheduled Tasks",
       "tasks.subtitle":       "Manage and schedule automated tasks for your assistant",
@@ -260,6 +276,22 @@ const I18n = (() => {
       "modal.yes": "确认",
       "modal.no":  "取消",
 
+      // ── Version / Upgrade ──
+      "upgrade.desc":              "有新版本可用，将在后台安装，升级期间可继续使用。",
+      "upgrade.btn.upgrade":       "立即升级",
+      "upgrade.btn.cancel":        "取消",
+      "upgrade.btn.restart":       "↻ 立即重启",
+      "upgrade.installing":        "安装中…",
+      "upgrade.done":              "升级完成！",
+      "upgrade.failed":            "升级失败，请重试。",
+      "upgrade.reconnecting":      "服务重启中…",
+      "upgrade.restart.success":   "✓ 重启成功！",
+      "upgrade.tooltip.upgrading":    "升级中，点击查看进度",
+      "upgrade.tooltip.new":         "v{{latest}} 可用，点击升级",
+      "upgrade.tooltip.ok":          "v{{current}}（已是最新）",
+      "upgrade.tooltip.needs_restart": "升级完成，点击重启",
+      "upgrade.tooltip.done":        "重启成功",
+
       // ── Tasks panel ──
       "tasks.title":          "定时任务",
       "tasks.subtitle":       "管理和调度助手的自动化任务",

data/lib/clacky/web/index.html

@@ -107,6 +107,14 @@
           <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
         </svg>
         <span data-i18n="sidebar.settings">Settings</span>
+        <!-- Version badge: inline in settings row, right-aligned -->
+        <span id="version-badge" class="version-badge" style="display:none">
+          <span id="version-text" class="version-text"></span>
+          <span id="version-update-dot"   class="version-update-dot"   style="display:none"></span>
+          <span id="version-restart-dot"  class="version-restart-dot"  style="display:none"></span>
+          <span id="version-spinner"      class="version-spinner"       style="display:none"></span>
+          <span id="version-done-check"   class="version-done-check"    style="display:none">✓</span>
+        </span>
       </button>
     </div>
   </aside>
@@ -467,6 +475,8 @@
   </div>
 </div>
 
+
+
 <script src="/marked.min.js"></script>
 <script src="/i18n.js"></script>
 <script src="/theme.js"></script>
@@ -478,6 +488,7 @@
 <script src="/settings.js"></script>
 <script src="/onboard.js"></script>
 <script src="/brand.js"></script>
+<script src="/version.js"></script>
 <script src="/app.js"></script>
 </body>
 </html>

data/lib/clacky/web/version.js

@@ -0,0 +1,362 @@
+// ── Version — version check and upgrade flow ───────────────────────────────
+//
+// Badge states:
+//   (none)        → up-to-date, muted version text
+//   has-update    → amber pulsing dot: new version available
+//   is-upgrading  → spinning ring: gem install in progress
+//   needs-restart → orange bouncing dot: upgrade done, waiting for restart
+//   upgrade-done  → green check: restarted & reconnected successfully
+//
+// Flow:
+//   1. Page load → checkVersion() → badge shows version number
+//   2. needs_update: badge shows amber pulsing dot
+//   3. Click badge → fixed popover (confirm state)
+//   4. Click "Upgrade" → popover → progress state (live log)
+//   5. upgrade_complete (success) → badge: needs-restart; popover: restart button
+//   6. Click "Restart" → /api/restart → popover: reconnecting spinner
+//      → poll /api/version until server back → badge: upgrade-done (green ✓) → reload
+// ─────────────────────────────────────────────────────────────────────────
+
+const Version = (() => {
+  // ── State ──────────────────────────────────────────────────────────────
+  let _current        = null;
+  let _latest         = null;
+  let _needsUpdate    = false;
+  let _upgrading      = false;
+  let _needsRestart   = false;   // upgrade done, waiting for restart
+  let _reconnecting   = false;   // restart sent, polling for server to come back
+  let _upgradeDone    = false;   // restarted and reconnected successfully
+  let _popoverOpen    = false;
+  let _reconnectTimer = null;
+  let _logLines       = [];
+
+  // ── DOM helpers ────────────────────────────────────────────────────────
+  const $  = id => document.getElementById(id);
+  const el = (tag, attrs = {}, ...children) => {
+    const e = document.createElement(tag);
+    Object.entries(attrs).forEach(([k, v]) => {
+      if (k === "className") e.className = v;
+      else if (k === "innerHTML") e.innerHTML = v;
+      else e.setAttribute(k, v);
+    });
+    children.forEach(c => c && e.appendChild(typeof c === "string" ? document.createTextNode(c) : c));
+    return e;
+  };
+
+  // ── Version check ──────────────────────────────────────────────────────
+  async function checkVersion() {
+    try {
+      const res  = await fetch("/api/version");
+      if (!res.ok) return;
+      const data = await res.json();
+      _current     = data.current;
+      _latest      = data.latest;
+      _needsUpdate = !!data.needs_update;
+      _renderBadge();
+    } catch (e) {
+      console.warn("[Version] check failed:", e);
+    }
+  }
+
+  // ── Badge render ───────────────────────────────────────────────────────
+  function _renderBadge() {
+    const badge         = $("version-badge");
+    const text          = $("version-text");
+    const dot           = $("version-update-dot");
+    const restartDot    = $("version-restart-dot");
+    const check         = $("version-done-check");
+    const spinner       = $("version-spinner");
+    if (!badge || !text) return;
+
+    text.textContent = _current ? `v${_current}` : "";
+
+    // Reset all indicators
+    if (dot)        dot.style.display        = "none";
+    if (restartDot) restartDot.style.display = "none";
+    if (check)      check.style.display      = "none";
+    if (spinner)    spinner.style.display    = "none";
+    badge.className = "version-badge";
+
+    if (_upgrading) {
+      // Spinning ring: gem install running
+      badge.classList.add("is-upgrading");
+      badge.title = I18n.t("upgrade.tooltip.upgrading");
+      if (spinner) spinner.style.display = "inline-block";
+    } else if (_needsRestart) {
+      // Orange bouncing dot: upgrade done, please restart
+      badge.classList.add("needs-restart");
+      badge.title = I18n.t("upgrade.tooltip.needs_restart");
+      if (restartDot) restartDot.style.display = "inline-block";
+    } else if (_upgradeDone) {
+      // Green check: restarted successfully
+      badge.classList.add("upgrade-done");
+      badge.title = I18n.t("upgrade.tooltip.done");
+      if (check) check.style.display = "inline-block";
+    } else if (_needsUpdate) {
+      // Amber pulsing dot: new version available
+      badge.classList.add("has-update");
+      badge.title = I18n.t("upgrade.tooltip.new", { latest: _latest });
+      if (dot) dot.style.display = "inline-block";
+    } else {
+      badge.title = I18n.t("upgrade.tooltip.ok", { current: _current });
+    }
+
+    badge.style.display = "flex";
+  }
+
+  // ── Popover (fixed, positioned above badge) ────────────────────────────
+  function _getOrCreatePopover() {
+    let pop = $("version-upgrade-popover");
+    if (pop) return pop;
+
+    pop = el("div", { id: "version-upgrade-popover", className: "vup" });
+    document.body.appendChild(pop);
+    return pop;
+  }
+
+  function _positionPopover() {
+    const badge = $("version-badge");
+    const pop   = $("version-upgrade-popover");
+    if (!badge || !pop) return;
+
+    const rect = badge.getBoundingClientRect();
+    // Appear above the badge, right-aligned to sidebar edge
+    pop.style.left   = rect.left + "px";
+    pop.style.bottom = (window.innerHeight - rect.top + 8) + "px";
+    pop.style.top    = "auto";
+  }
+
+  function _openPopover() {
+    if (_popoverOpen) { _positionPopover(); return; }
+    _popoverOpen = true;
+
+    const pop = _getOrCreatePopover();
+    pop.innerHTML = "";
+
+    if (_reconnecting) {
+      _renderReconnectState(pop);
+    } else if (_upgrading) {
+      _renderProgressState(pop);
+    } else if (_needsRestart) {
+      _renderDoneState(pop);
+    } else if (_upgradeDone) {
+      _renderDoneState(pop);
+    } else {
+      _renderConfirmState(pop);
+    }
+
+    pop.style.display = "block";
+    _positionPopover();
+
+    // Animate in
+    requestAnimationFrame(() => pop.classList.add("vup--visible"));
+  }
+
+  function _closePopover() {
+    // Don't allow closing while upgrading or waiting for server to come back
+    if (_upgrading || _reconnecting) return;
+    const pop = $("version-upgrade-popover");
+    if (!pop) return;
+    pop.classList.remove("vup--visible");
+    setTimeout(() => {
+      pop.style.display = "none";
+      _popoverOpen = false;
+    }, 180);
+  }
+
+  // ── Popover states ─────────────────────────────────────────────────────
+
+  /** State 1: confirm upgrade */
+  function _renderConfirmState(pop) {
+    pop.innerHTML = `
+      <p class="vup-desc">${I18n.t("upgrade.desc")}</p>
+      <p class="vup-versions">v${_current} <span class="vup-arrow">→</span> v${_latest}</p>
+      <div class="vup-actions">
+        <button id="vup-btn-upgrade" class="vup-btn-primary">${I18n.t("upgrade.btn.upgrade")}</button>
+        <button id="vup-btn-cancel"  class="vup-btn-cancel">${I18n.t("upgrade.btn.cancel")}</button>
+      </div>
+    `;
+    $("vup-btn-upgrade").addEventListener("click", () => _startUpgrade(pop));
+    $("vup-btn-cancel").addEventListener("click", _closePopover);
+  }
+
+  /** State 2: upgrading — show live log */
+  function _renderProgressState(pop) {
+    pop.innerHTML = `
+      <div class="vup-progress-header">
+        <span class="vup-installing-dot"></span>
+        <span class="vup-installing-label">${I18n.t("upgrade.installing")}</span>
+      </div>
+      <pre id="vup-log" class="vup-log"></pre>
+    `;
+    // Replay any logs already received
+    const logEl = $("vup-log");
+    if (logEl && _logLines.length) {
+      logEl.textContent = _logLines.join("\n");
+      logEl.scrollTop = logEl.scrollHeight;
+    }
+  }
+
+  /** State 3: done — show restart button */
+  function _renderDoneState(pop) {
+    pop.innerHTML = `
+      <div class="vup-done-header">
+        <span class="vup-done-icon">✓</span>
+        <span>${I18n.t("upgrade.done")}</span>
+      </div>
+      <button id="vup-btn-restart" class="vup-btn-restart">${I18n.t("upgrade.btn.restart")}</button>
+    `;
+    $("vup-btn-restart").addEventListener("click", _startRestart);
+  }
+
+  /** State 4: reconnecting after restart */
+  function _renderReconnectState(pop) {
+    pop.innerHTML = `
+      <div class="vup-reconnect">
+        <div class="vup-reconnect-spinner"></div>
+        <p class="vup-reconnect-msg">${I18n.t("upgrade.reconnecting")}</p>
+      </div>
+    `;
+  }
+
+  // ── Upgrade ────────────────────────────────────────────────────────────
+  async function _startUpgrade(pop) {
+    if (_upgrading || _upgradeDone) return;
+    _upgrading  = true;
+    _logLines   = [];
+    _renderBadge();
+    _renderProgressState(pop);
+
+    try {
+      await fetch("/api/version/upgrade", { method: "POST" });
+    } catch (e) {
+      console.warn("[Version] upgrade request failed:", e);
+      _upgrading = false;
+      _renderBadge();
+    }
+  }
+
+  // ── Restart ────────────────────────────────────────────────────────────
+  async function _startRestart() {
+    _reconnecting = true;
+
+    // Ensure popover is open and showing the reconnect spinner
+    const pop = _getOrCreatePopover();
+    _renderReconnectState(pop);
+    if (!_popoverOpen) {
+      _popoverOpen = true;
+      pop.style.display = "block";
+      _positionPopover();
+      requestAnimationFrame(() => pop.classList.add("vup--visible"));
+    }
+
+    try {
+      fetch("/api/restart", { method: "POST" }).catch(() => {});
+    } catch (_) {}
+
+    _waitForReconnect();
+  }
+
+  function _waitForReconnect() {
+    if (_reconnectTimer) clearInterval(_reconnectTimer);
+    setTimeout(() => {
+      _reconnectTimer = setInterval(async () => {
+        try {
+          const res = await fetch("/api/version", { cache: "no-store" });
+          if (res.ok) {
+            clearInterval(_reconnectTimer);
+            _reconnectTimer = null;
+            // Server is back — close popover, badge → green check, then reload
+            _reconnecting = false;
+            _needsRestart = false;
+            _upgradeDone  = true;
+            _renderBadge();
+            _closePopover();
+            setTimeout(() => window.location.reload(), 800);
+          }
+        } catch (_) { /* server not yet up */ }
+      }, 2000);
+    }, 2500);
+  }
+
+  // ── WebSocket events ───────────────────────────────────────────────────
+  function _handleWsEvent(event) {
+    if (event.type === "upgrade_log") {
+      const line = event.line || "";
+      _logLines.push(line);
+      // Append to live log if popover is open
+      const logEl = $("vup-log");
+      if (logEl) {
+        logEl.textContent += (logEl.textContent ? "\n" : "") + line;
+        logEl.scrollTop = logEl.scrollHeight;
+      }
+    } else if (event.type === "upgrade_complete") {
+      _upgrading    = false;
+      _needsUpdate  = false;
+      if (event.success) {
+        _needsRestart = true;   // badge: orange bouncing dot
+        _upgradeDone  = false;
+      }
+      _renderBadge();
+      // Morph popover to done/error state
+      const pop = $("version-upgrade-popover");
+      if (pop && _popoverOpen) {
+        if (event.success) {
+          _renderDoneState(pop);
+        } else {
+          pop.innerHTML = `<p class="vup-error">${I18n.t("upgrade.failed")}</p>`;
+        }
+      }
+    }
+  }
+
+  // ── Init ───────────────────────────────────────────────────────────────
+  function init() {
+    const badge = $("version-badge");
+    if (badge) {
+      badge.addEventListener("click", e => {
+        if (!_current) return;
+        // Up-to-date: no action, let the click fall through to settings btn
+        if (!_needsUpdate && !_upgrading && !_needsRestart && !_reconnecting && !_upgradeDone) return;
+
+        // Actionable: stop propagation so settings panel doesn't open
+        e.stopPropagation();
+
+        // During reconnect, badge click just keeps popover visible (no toggle)
+        if (_reconnecting) { if (!_popoverOpen) _openPopover(); return; }
+
+        if (_popoverOpen) {
+          _closePopover();
+        } else {
+          _openPopover();
+        }
+      });
+    }
+
+    // Close on outside click — but not while upgrading or reconnecting
+    document.addEventListener("click", e => {
+      if (!e.target.closest("#version-badge") && !e.target.closest("#version-upgrade-popover")) {
+        if (_popoverOpen && !_upgrading && !_reconnecting) _closePopover();
+      }
+    });
+
+    // Reposition on window resize
+    window.addEventListener("resize", () => {
+      if (_popoverOpen) _positionPopover();
+    });
+
+    if (typeof WS !== "undefined") {
+      WS.onEvent(_handleWsEvent);
+    }
+
+    checkVersion();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  return { checkVersion };
+})();

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openclacky
 version: !ruby/object:Gem::Version
-  version: 0.8.9
+  version: 0.9.0
 platform: ruby
 authors:
 - windy
@@ -394,6 +394,7 @@ files:
 - lib/clacky/web/skills.js
 - lib/clacky/web/tasks.js
 - lib/clacky/web/theme.js
+- lib/clacky/web/version.js
 - lib/clacky/web/ws.js
 - scripts/install.sh
 - scripts/uninstall.sh