openclacky 1.3.3 → 1.3.4

data/lib/clacky/web/settings.js

@@ -17,7 +17,6 @@ const Settings = (() => {
   function open() {
     _load();
     _loadMedia();
-    _initMediaOutputDir();
     _loadBrand();
     _loadBrowserStatus();
     _initNetworkSettings();
@@ -118,6 +117,10 @@ const Settings = (() => {
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
             <span>${I18n.t("settings.models.btn.edit")}</span>
           </button>
+          <button class="btn-card-grid-action" data-index="${index}" data-action="duplicate">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            <span>${I18n.t("settings.models.btn.duplicate")}</span>
+          </button>
           ${_models.length > 1 ? `<button class="btn-card-grid-action btn-card-grid-action-danger" data-index="${index}" data-action="delete">
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
             <span>${I18n.t("settings.models.btn.delete")}</span>
@@ -141,10 +144,11 @@ const Settings = (() => {
       btn.addEventListener("click", () => {
         const action = btn.dataset.action;
         switch (action) {
-          case "edit":    _openModal(index); break;
-          case "test":    _testModel(index); break;
-          case "delete":  _removeModel(index); break;
-          case "default": _setAsDefault(index); break;
+          case "edit":      _openModal(index); break;
+          case "test":      _testModel(index); break;
+          case "delete":    _removeModel(index); break;
+          case "default":   _setAsDefault(index); break;
+          case "duplicate": _openModalDuplicate(index); break;
         }
       });
     });
@@ -158,6 +162,7 @@ const Settings = (() => {
     const indexInput = document.getElementById("model-modal-index");
 
     indexInput.value = index;
+    document.getElementById("model-modal-source-id").value = "";
 
     // Populate provider dropdown
     _populateModalProviderDropdown();
@@ -233,6 +238,30 @@ const Settings = (() => {
     document.body.style.overflow = "";
   }
 
+  function _openModalDuplicate(index) {
+    const source = _models[index];
+    if (!source) return;
+
+    _openModal(-1);
+
+    document.getElementById("model-modal-source-id").value = source.id || "";
+    document.getElementById("model-modal-title").textContent = I18n.t("settings.models.modal.duplicate");
+    document.getElementById("model-modal-model").value   = source.model    || "";
+    document.getElementById("model-modal-baseurl").value = source.base_url || "";
+    document.getElementById("model-modal-apikey").value  = source.api_key_masked || "";
+
+    const matched = _findProviderByBaseUrl(source.base_url);
+    _modalSelectedProviderId = matched ? matched.id : (source.anthropic_format ? "anthropic" : null);
+    const providerValue = document.getElementById("model-modal-provider-value");
+    if (matched) {
+      providerValue.textContent = matched.name;
+      providerValue.classList.remove("placeholder");
+
+      const promoHint = document.getElementById("model-modal-promo-hint");
+      if (matched.id !== "openclacky") promoHint.classList.remove("visible");
+    }
+  }
+
   function _populateModalProviderDropdown() {
     const dropdown = document.getElementById("model-modal-provider-dropdown");
     dropdown.innerHTML = `
@@ -334,13 +363,14 @@ const Settings = (() => {
     const isNew = index < 0;
     const existing = isNew ? {} : (_models[index] || {});
     const existingId = existing.id || null;
+    const sourceId = document.getElementById("model-modal-source-id").value || null;
 
     // Step 1: Test first
     saveBtn.textContent = I18n.t("settings.models.btn.testing");
     _showModalTestResult(null, "");
 
     const result = await ModelTester.testConnection({
-      model, base_url, api_key, index, id: existingId, anthropic_format
+      model, base_url, api_key, index, id: existingId || sourceId, anthropic_format
     });
 
     if (result.rewrote) {
@@ -376,10 +406,14 @@ const Settings = (() => {
     }
 
     if (!hasId && !payload.api_key) {
-      saveBtn.textContent = I18n.t("settings.models.btn.save");
-      saveBtn.disabled = false;
-      _showModalTestResult(false, I18n.t("settings.models.placeholder.apikey"));
-      return;
+      if (sourceId) {
+        payload.source_id = sourceId;
+      } else {
+        saveBtn.textContent = I18n.t("settings.models.btn.save");
+        saveBtn.disabled = false;
+        _showModalTestResult(false, I18n.t("settings.models.placeholder.apikey"));
+        return;
+      }
     }
 
     const saveResult = await ModelTester.saveModel(payload, { existingId: hasId ? existingId : null });
@@ -406,6 +440,25 @@ const Settings = (() => {
     el.className = `model-test-result ${ok ? "result-ok" : "result-fail"}`;
   }
 
+  function _positionDropdownFixed(dropdown, anchor) {
+    const rect = anchor.getBoundingClientRect();
+    dropdown.style.position = "fixed";
+    dropdown.style.top = (rect.bottom + 4) + "px";
+    dropdown.style.left = rect.left + "px";
+    dropdown.style.width = rect.width + "px";
+    dropdown.style.right = "auto";
+    dropdown.style.zIndex = "9999";
+  }
+
+  function _resetDropdownPosition(dropdown) {
+    dropdown.style.position = "";
+    dropdown.style.top = "";
+    dropdown.style.left = "";
+    dropdown.style.width = "";
+    dropdown.style.right = "";
+    dropdown.style.zIndex = "";
+  }
+
   function _initModal() {
     // Close button
     document.getElementById("model-modal-close").addEventListener("click", _closeModal);
@@ -459,34 +512,58 @@ const Settings = (() => {
     // Model dropdown functionality
     const modelDropdownBtn = document.getElementById("model-modal-model-dropdown-btn");
     const modelDropdown = document.getElementById("model-modal-model-dropdown");
+    const modelCombobox = document.getElementById("model-modal-model-combobox");
     const modelInput = document.getElementById("model-modal-model");
 
+    function _openModelDropdown() {
+      _closeBaseUrlDropdown();
+      _updateModalModelDropdown();
+      _positionDropdownFixed(modelDropdown, modelCombobox);
+      modelDropdown.style.display = "block";
+      document.body.appendChild(modelDropdown);
+    }
+
+    function _closeModelDropdown() {
+      modelDropdown.style.display = "none";
+      _resetDropdownPosition(modelDropdown);
+      modelCombobox.appendChild(modelDropdown);
+    }
+
     modelDropdownBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      const isOpen = modelDropdown.style.display === "block";
-      document.querySelectorAll(".model-name-dropdown, .base-url-dropdown").forEach(d => {
-        d.style.display = "none";
-      });
-      if (!isOpen) {
-        _updateModalModelDropdown();
-        modelDropdown.style.display = "block";
+      if (modelDropdown.style.display === "block") {
+        _closeModelDropdown();
+      } else {
+        _openModelDropdown();
       }
     });
 
     // Base URL dropdown functionality
     const baseUrlDropdownBtn = document.getElementById("model-modal-baseurl-dropdown-btn");
     const baseUrlDropdown = document.getElementById("model-modal-baseurl-dropdown");
+    const baseUrlCombobox = document.getElementById("model-modal-baseurl-combobox");
     const baseUrlInput = document.getElementById("model-modal-baseurl");
 
+    function _openBaseUrlDropdown() {
+      _closeModelDropdown();
+      _updateModalBaseUrlDropdown();
+      _positionDropdownFixed(baseUrlDropdown, baseUrlCombobox);
+      baseUrlDropdown.style.display = "block";
+      document.body.appendChild(baseUrlDropdown);
+    }
+
+    function _closeBaseUrlDropdown() {
+      baseUrlDropdown.style.display = "none";
+      _resetDropdownPosition(baseUrlDropdown);
+      baseUrlCombobox.appendChild(baseUrlDropdown);
+    }
+
     baseUrlDropdownBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      const isOpen = baseUrlDropdown.style.display === "block";
-      document.querySelectorAll(".model-name-dropdown, .base-url-dropdown").forEach(d => {
-        d.style.display = "none";
-      });
-      if (!isOpen) {
-        _updateModalBaseUrlDropdown();
-        baseUrlDropdown.style.display = "block";
+      if (baseUrlDropdown.style.display === "block") {
+        _closeBaseUrlDropdown();
+      } else {
+        _openBaseUrlDropdown();
       }
     });
 
@@ -495,10 +572,14 @@ const Settings = (() => {
       _updateModalModelDropdown();
     });
 
-    // Close all modal dropdowns on document click
-    document.addEventListener("click", () => {
-      modelDropdown.style.display = "none";
-      baseUrlDropdown.style.display = "none";
+    // Close dropdowns on outside click
+    document.addEventListener("mousedown", (e) => {
+      if (!modelCombobox.contains(e.target) && !modelDropdown.contains(e.target)) {
+        _closeModelDropdown();
+      }
+      if (!baseUrlCombobox.contains(e.target) && !baseUrlDropdown.contains(e.target)) {
+        _closeBaseUrlDropdown();
+      }
     });
   }
 
@@ -1272,89 +1353,6 @@ const Settings = (() => {
     }
   }
 
-  // ── Media output directory ────────────────────────────────────────────────────
-  //
-  // Single user-facing override for where /api/media/* writes generated files.
-  // Mirrors the proxy_url section above (same field-input + save/clear pair)
-  // because the data shape is identical (one optional string). Resolution
-  // priority lives server-side in Clacky::Media::OutputDir.resolve:
-  //   per-call output_dir → media_output_dir (this setting) → default_working_dir → Dir.pwd
-
-  async function _initMediaOutputDir() {
-    const input     = document.getElementById("settings-media-output-dir");
-    const browseBtn = document.getElementById("btn-browse-media-output-dir");
-    const clearBtn  = document.getElementById("btn-clear-media-output-dir");
-    const status    = document.getElementById("settings-media-output-dir-status");
-    if (!input || !browseBtn) return;
-
-    try {
-      const res  = await fetch("/api/config/media-output-dir");
-      const data = await res.json();
-      if (data.ok) {
-        input.value = data.value || "";
-        // Show the system fallback as a placeholder hint so the user sees
-        // where files would land if they leave the field blank.
-        if (data.default) input.placeholder = data.default;
-      }
-    } catch (_) { /* non-critical */ }
-
-    async function _patchMediaOutputDir(value, successKey) {
-      status.textContent = "";
-      status.className   = "model-test-result";
-      try {
-        const res  = await fetch("/api/config/media-output-dir", {
-          method:  "PATCH",
-          headers: { "Content-Type": "application/json" },
-          body:    JSON.stringify({ value: value })
-        });
-        const data = await res.json();
-        if (data.ok) {
-          status.textContent = I18n.t(successKey);
-          status.className   = "model-test-result success";
-          // Auto-hide the toast after a short delay so it doesn't linger
-          // forever (looks like a stuck banner). 2s is enough to read.
-          clearTimeout(_patchMediaOutputDir._hideTimer);
-          _patchMediaOutputDir._hideTimer = setTimeout(() => {
-            status.textContent = "";
-            status.className   = "model-test-result";
-          }, 2000);
-          // Server may have expanded `~` or normalized the path — reflect
-          // the canonical value back into the input so the user sees what
-          // was actually persisted.
-          input.value = data.value || "";
-        } else {
-          status.textContent = data.error || I18n.t("settings.media.output_dir.invalid");
-          status.className   = "model-test-result error";
-        }
-      } catch (e) {
-        status.textContent = e.message || I18n.t("settings.media.output_dir.invalid");
-        status.className   = "model-test-result error";
-      }
-    }
-
-    if (!browseBtn.dataset.bound) {
-      browseBtn.dataset.bound = "1";
-      browseBtn.addEventListener("click", async () => {
-        // Reuse the global directory picker in session-less mode (browses
-        // the real filesystem via /api/dirs). Picker resolves to an absolute
-        // path on confirm, or null on cancel.
-        const start  = (input.value || "").trim();
-        const picked = await window.openDirectoryPicker(start, null, I18n.t("settings.media.output_dir.picker"));
-        if (!picked) return;
-        // Persist immediately — no separate Save click needed.
-        await _patchMediaOutputDir(picked, "settings.media.output_dir.saved");
-      });
-    }
-
-    if (clearBtn && !clearBtn.dataset.bound) {
-      clearBtn.dataset.bound = "1";
-      clearBtn.addEventListener("click", () => {
-        input.value = "";
-        _patchMediaOutputDir("", "settings.media.output_dir.cleared");
-      });
-    }
-  }
-
   // ── Brand & License ───────────────────────────────────────────────────────────
 
   // Whether the server was started with --brand-test (relaxed key validation).

data/lib/clacky/web/ws-dispatcher.js

@@ -217,7 +217,7 @@ WS.onEvent(ev => {
       const pendingMsg = Sessions.takePendingMessage();
       if (pendingMsg && pendingMsg.session_id === ev.session_id) {
         Sessions.appendMsg("user", escapeHtml(pendingMsg.content), { time: new Date() });
-        WS.send({ type: "message", session_id: pendingMsg.session_id, content: pendingMsg.content });
+        WS.send({ type: "message", session_id: pendingMsg.session_id, content: pendingMsg.content, lang: I18n.lang() });
       }
       break;
     }
@@ -298,8 +298,12 @@ WS.onEvent(ev => {
 
     // ── Chat messages ──────────────────────────────────────────────────
     case "history_user_message":
-      // Emitted only during history replay — never from live WS.
-      // Rendered by Sessions._fetchHistory; nothing to do here.
+      // Emitted by show_user_message before agent.run; stamp the authoritative
+      // created_at onto the optimistically-rendered bubble and register it in
+      // the dedup set so the subsequent history fetch skips this round.
+      if (ev.session_id === Sessions.activeId && ev.created_at) {
+        Sessions.stampLastUserBubble(ev.created_at);
+      }
       break;
 
     case "assistant_message":

data/lib/clacky.rb

@@ -68,6 +68,7 @@ require_relative "clacky/message_format/bedrock"
 require_relative "clacky/bedrock_stream_aggregator"
 require_relative "clacky/openai_stream_aggregator"
 require_relative "clacky/anthropic_stream_aggregator"
+require_relative "clacky/locales/i18n"
 require_relative "clacky/client"
 require_relative "clacky/skill"
 require_relative "clacky/skill_loader"
@@ -128,7 +129,6 @@ require_relative "clacky/mcp/registry"
 require_relative "clacky/mcp/skill_provider"
 require_relative "clacky/media/base"
 require_relative "clacky/media/openai_compat"
-require_relative "clacky/media/output_dir"
 require_relative "clacky/media/generator"
 require_relative "clacky/vision/resolver"
 require_relative "clacky/telemetry"
@@ -145,10 +145,25 @@ require_relative "clacky/cli"
 require_relative "clacky/patch_loader"
 Clacky::PatchLoader.load_all
 
+# HTTP API extension layer: define the base class + loader + dispatcher.
+# Loading of user extensions is deferred to HttpServer#start so the host
+# process is fully initialized before extension handlers can resolve helpers
+# like session_manager or agent_config.
+require_relative "clacky/api_extension"
+require_relative "clacky/api_extension_loader"
+require_relative "clacky/server/api_extension_dispatcher"
+
 module Clacky
   class AgentInterrupted < Exception; end  # Inherit from Exception to bypass rescue StandardError
   class AgentError < StandardError; end
-  class BadRequestError < AgentError; end  # 400 errors — our request was malformed, history should be rolled back
+  class BadRequestError < AgentError
+    attr_reader :display_message
+
+    def initialize(message, display_message: nil)
+      super(message)
+      @display_message = display_message
+    end
+  end
   class InsufficientCreditError < AgentError
     attr_reader :error_code, :provider_id
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openclacky
 version: !ruby/object:Gem::Version
-  version: 1.3.3
+  version: 1.3.4
 platform: ruby
 authors:
 - windy
@@ -245,6 +245,20 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: ruby_rich
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.5.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.5.2
 - !ruby/object:Gem::Dependency
   name: chunky_png
   requirement: !ruby/object:Gem::Requirement
@@ -313,6 +327,8 @@ files:
 - docs/engineering-article.md
 - docs/mcp-architecture.md
 - docs/mcp.example.json
+- docs/rich_ui_guide.md
+- docs/rich_ui_refactor_plan.md
 - docs/session-skill-invocation.md
 - docs/time_machine_design.md
 - docs/ui2-architecture.md
@@ -339,6 +355,8 @@ files:
 - lib/clacky/agent_config.rb
 - lib/clacky/agent_profile.rb
 - lib/clacky/anthropic_stream_aggregator.rb
+- lib/clacky/api_extension.rb
+- lib/clacky/api_extension_loader.rb
 - lib/clacky/banner.rb
 - lib/clacky/bedrock_stream_aggregator.rb
 - lib/clacky/billing/billing_record.rb
@@ -412,6 +430,9 @@ files:
 - lib/clacky/default_skills/skill-creator/scripts/validate_skill_frontmatter.rb
 - lib/clacky/idle_compression_timer.rb
 - lib/clacky/json_ui_controller.rb
+- lib/clacky/locales/en.rb
+- lib/clacky/locales/i18n.rb
+- lib/clacky/locales/zh.rb
 - lib/clacky/mcp/client.rb
 - lib/clacky/mcp/http_transport.rb
 - lib/clacky/mcp/registry.rb
@@ -424,7 +445,6 @@ files:
 - lib/clacky/media/gemini.rb
 - lib/clacky/media/generator.rb
 - lib/clacky/media/openai_compat.rb
-- lib/clacky/media/output_dir.rb
 - lib/clacky/message_format/anthropic.rb
 - lib/clacky/message_format/bedrock.rb
 - lib/clacky/message_format/open_ai.rb
@@ -435,7 +455,23 @@ files:
 - lib/clacky/platform_http_client.rb
 - lib/clacky/providers.rb
 - lib/clacky/proxy_config.rb
+- lib/clacky/rich_ui.rb
+- lib/clacky/rich_ui/components/base_component.rb
+- lib/clacky/rich_ui/components/dialogs/approval_dialog.rb
+- lib/clacky/rich_ui/components/dialogs/config_menu_dialog.rb
+- lib/clacky/rich_ui/components/dialogs/form_dialog.rb
+- lib/clacky/rich_ui/components/sidebar.rb
+- lib/clacky/rich_ui/components/sidebar_panels.rb
+- lib/clacky/rich_ui/components/status_view.rb
+- lib/clacky/rich_ui/components/thinking_live_view.rb
+- lib/clacky/rich_ui/entry_tracker.rb
+- lib/clacky/rich_ui/layout_adapter.rb
+- lib/clacky/rich_ui/progress_handle_adapter.rb
+- lib/clacky/rich_ui/rich_ui_controller.rb
+- lib/clacky/rich_ui/shell/rich_agent_shell.rb
+- lib/clacky/rich_ui/view_renderer.rb
 - lib/clacky/rich_ui_controller.rb
+- lib/clacky/server/api_extension_dispatcher.rb
 - lib/clacky/server/backup_manager.rb
 - lib/clacky/server/browser_manager.rb
 - lib/clacky/server/channel.rb

data/lib/clacky/media/output_dir.rb

@@ -1,43 +0,0 @@
-# frozen_string_literal: true
-
-module Clacky
-  module Media
-    # Resolves the on-disk root for generated media files (images, videos,
-    # audio) according to a fixed precedence:
-    #
-    #   1. `param`      — explicit `output_dir` from the API caller.
-    #                     Highest priority; lets a single call land
-    #                     somewhere specific (e.g. a doc's project root).
-    #   2. `configured` — user setting from AgentConfig#media_output_dir.
-    #                     Set via Settings → Models → Media Output Directory.
-    #   3. `fallback`   — process default; preserves legacy behavior for
-    #                     configs that have neither key set.
-    #
-    # Pure function on purpose: callers (HTTP handlers) read the configured
-    # value off AgentConfig and inject it here. Keeps this helper trivially
-    # unit-testable and free of global state.
-    #
-    # The final on-disk path is `<resolved>/assets/generated/<file>` —
-    # the `assets/generated/` suffix is appended by Media::Base#save_*
-    # for stable relative-path semantics across markdown / slide outputs,
-    # and is intentionally not configurable here.
-    module OutputDir
-      # @param param [String, nil]      explicit per-call override
-      # @param configured [String, nil] user-configured default
-      # @param fallback [String]        last-resort default (defaults to Dir.pwd)
-      # @return [String]                absolute or `~`-prefixed path; the
-      #   caller's File.join with "assets/generated/" handles `~` via the
-      #   surrounding FileUtils.mkdir_p call only when expanded — for safety
-      #   we expand `~` here so downstream sees an absolute path.
-      def self.resolve(param:, configured:, fallback: Dir.pwd)
-        chosen = first_present(param, configured) || fallback
-        File.expand_path(chosen.to_s)
-      end
-
-      # @api private
-      def self.first_present(*candidates)
-        candidates.find { |c| c.is_a?(String) && !c.strip.empty? }
-      end
-    end
-  end
-end