openclacky 1.5.21 → 1.5.22

data/lib/clacky/web/app.js

@@ -1021,10 +1021,22 @@ window.bootAfterBrand = async function() {
 
 // ── Image Lightbox ────────────────────────────────────────────────────────────
 // Global lightbox: click a sent image or a pending attachment thumbnail to
-// open; click backdrop or ✕ or press ESC to close.
+// open; wheel and drag inspect details, while backdrop, ✕ and ESC close it.
 (function () {
   const IMAGE_SELECTOR = ".msg-image-thumb, .img-preview-thumb";
   let _overlay = null;
+  let _zoomController = null;
+  let _backdropPointer = null;
+
+  function _zoomButton(label, content) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "img-lightbox-zoom-btn";
+    button.title = label;
+    button.setAttribute("aria-label", label);
+    button.innerHTML = content;
+    return button;
+  }
 
   function _open(src, alt) {
     if (_overlay) return;
@@ -1039,21 +1051,62 @@ window.bootAfterBrand = async function() {
     const image = document.createElement("img");
     image.src = src;
     image.alt = alt || "image";
+    image.draggable = false;
+
+    const toolbar = document.createElement("div");
+    toolbar.className = "img-lightbox-toolbar";
+    const zoomOut = _zoomButton(I18n.t("workspace.zoomOut"), "−");
+    const level = document.createElement("span");
+    level.className = "img-lightbox-zoom-level";
+    const zoomIn = _zoomButton(I18n.t("workspace.zoomIn"), "+");
+    const fit = _zoomButton(
+      I18n.t("workspace.zoomFit"),
+      '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M16 3h3a2 2 0 0 1 2 2v3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/><path d="M8 21H5a2 2 0 0 1-2-2v-3"/></svg>'
+    );
+    toolbar.append(zoomOut, level, zoomIn, fit);
 
     _overlay.appendChild(close);
     _overlay.appendChild(image);
+    _overlay.appendChild(toolbar);
 
-    // Click on backdrop or ✕ → close
-    _overlay.addEventListener("click", function (e) {
-      if (e.target === _overlay || e.target.classList.contains("img-lightbox-close")) {
-        _close();
-      }
+    close.addEventListener("click", _close);
+
+    // A drag can finish outside the image and make the browser synthesize a
+    // click on the backdrop. Close only when the whole pointer gesture belongs
+    // to the backdrop, never from the click generated after image panning.
+    _overlay.addEventListener("pointerdown", function(e) {
+      _backdropPointer = e.target === _overlay ? e.pointerId : null;
+    });
+    _overlay.addEventListener("pointerup", function(e) {
+      const closesBackdrop = e.pointerId === _backdropPointer && e.target === _overlay;
+      _backdropPointer = null;
+      if (closesBackdrop) _close();
+    });
+    _overlay.addEventListener("pointercancel", function(e) {
+      if (e.pointerId === _backdropPointer) _backdropPointer = null;
     });
 
     document.body.appendChild(_overlay);
+
+    _zoomController = ImageZoom.create({
+      viewport: _overlay,
+      image,
+      fitPadding: 0.9,
+      panOnImageOnly: true,
+      onChange(state) {
+        level.textContent = Math.round(state.scale * 100) + "%";
+        zoomOut.disabled = !state.canZoomOut;
+        zoomIn.disabled = !state.canZoomIn;
+      },
+    });
+    zoomOut.addEventListener("click", _zoomController.zoomOut);
+    zoomIn.addEventListener("click", _zoomController.zoomIn);
+    fit.addEventListener("click", _zoomController.reset);
   }
 
   function _close() {
+    _backdropPointer = null;
+    if (_zoomController) { _zoomController.destroy(); _zoomController = null; }
     if (_overlay) { _overlay.remove(); _overlay = null; }
   }
 

data/lib/clacky/web/auth.js

@@ -1,7 +1,7 @@
 const Auth = (() => {
   // ── Constants ──────────────────────────────────────────────────────────
   const COOKIE_NAME      = 'clacky_access_key';
-  const STORAGE_KEY      = 'clacky_access_key';
+  const STORAGE_KEY      = 'clacky-access-key';
   const PROBE_ENDPOINT   = '/api/sessions?limit=1';
   const MAX_PROMPT_TRIES = 3;
 

data/lib/clacky/web/components/composer.js

@@ -15,6 +15,7 @@
 const Composer = (() => {
   const CHIP_CLASS = "mention-chip";
   const REFERENCE_DRAG_TYPE = "application/x-openclacky-reference";
+  const WORKSPACE_FILE_DRAG_TYPE = "application/x-openclacky-workspace-file";
   const ELEMENT_NODE = 1;
   const TEXT_NODE = 3;
 
@@ -86,8 +87,16 @@ const Composer = (() => {
     return out.replace(/\u200B/g, "").replace(/\u00A0/g, " ");
   }
 
+  // ArrowUp/Down recall position per composer: { index, filled }.
+  const _recall = new WeakMap();
+
   // Replace composer contents with plain text (newlines → <br>), caret at end.
   function setText(el, value) {
+    _recall.delete(el);
+    _fill(el, value);
+  }
+
+  function _fill(el, value) {
     el.innerHTML = "";
     const v = String(value == null ? "" : value);
     if (v !== "") {
@@ -100,6 +109,7 @@ const Composer = (() => {
   }
 
   function clear(el) {
+    _recall.delete(el);
     el.innerHTML = "";
   }
 
@@ -284,10 +294,63 @@ const Composer = (() => {
     return types.includes(REFERENCE_DRAG_TYPE);
   }
 
-  function acceptsDrop(dataTransfer) {
+  function _normalizeDraggedWorkspaceFile(value) {
+    if (!value || typeof value !== "object" || value.type !== "file") return null;
+    const path = String(value.path || "").trim();
+    if (!path || path.length > 32768) return null;
+    const rawName = String(value.name || path.split(/[\\/]/).pop() || "").trim();
+    if (!rawName) return null;
+    const size = value.size == null ? NaN : Number(value.size);
+    return {
+      type: "file",
+      name: rawName.slice(0, 512),
+      path,
+      size: Number.isFinite(size) && size >= 0 ? size : null,
+    };
+  }
+
+  // Start a drag from the Files tree without turning the workspace entry into
+  // a browser File. The path-backed attachment keeps using the same staging
+  // path as the Files tab's "Add to chat" action.
+  function beginWorkspaceFileDrag(dataTransfer, file) {
+    const normalized = _normalizeDraggedWorkspaceFile(file);
+    if (!dataTransfer || !normalized) return false;
+    dataTransfer.effectAllowed = "copy";
+    dataTransfer.setData(WORKSPACE_FILE_DRAG_TYPE, JSON.stringify(normalized));
+    dataTransfer.setData("text/plain", normalized.name);
+    return true;
+  }
+
+  function readDraggedWorkspaceFile(dataTransfer) {
+    if (!dataTransfer) return null;
+    let raw = "";
+    try {
+      raw = dataTransfer.getData(WORKSPACE_FILE_DRAG_TYPE) || "";
+    } catch (_) {
+      return null;
+    }
+    if (!raw || raw.length > 65536) return null;
+    try {
+      return _normalizeDraggedWorkspaceFile(JSON.parse(raw));
+    } catch (_) {
+      return null;
+    }
+  }
+
+  function acceptsWorkspaceFileDrag(dataTransfer) {
+    if (!dataTransfer || !dataTransfer.types) return false;
+    return Array.from(dataTransfer.types).includes(WORKSPACE_FILE_DRAG_TYPE);
+  }
+
+  function _acceptsDrop(dataTransfer, allowWorkspaceFile) {
     if (!dataTransfer || !dataTransfer.types) return false;
     const types = Array.from(dataTransfer.types);
-    return acceptsSessionDrag(dataTransfer) || types.includes("Files");
+    return acceptsSessionDrag(dataTransfer) || types.includes("Files") ||
+      (allowWorkspaceFile && acceptsWorkspaceFileDrag(dataTransfer));
+  }
+
+  function acceptsDrop(dataTransfer) {
+    return _acceptsDrop(dataTransfer, true);
   }
 
   // Insert a valid dropped reference at the pointer position. Returns false
@@ -303,11 +366,14 @@ const Composer = (() => {
   // Make a whole page/panel act as the drop target for its composer. Session
   // references are inserted into the contenteditable; files are handed back
   // to the owning view so its existing attachment pipeline remains in charge.
-  function bindDropZone({ zone, input, onFiles }) {
+  function bindDropZone({ zone, input, onFiles, onWorkspaceFile }) {
     if (!zone || !input) return;
 
+    const acceptsBoundDrop = (dataTransfer) =>
+      _acceptsDrop(dataTransfer, typeof onWorkspaceFile === "function");
+
     zone.addEventListener("dragover", (event) => {
-      if (!acceptsDrop(event.dataTransfer)) return;
+      if (!acceptsBoundDrop(event.dataTransfer)) return;
       event.preventDefault();
       event.dataTransfer.dropEffect = "copy";
       zone.classList.add("drag-over");
@@ -316,11 +382,17 @@ const Composer = (() => {
       if (!zone.contains(event.relatedTarget)) zone.classList.remove("drag-over");
     });
     zone.addEventListener("drop", (event) => {
-      if (!acceptsDrop(event.dataTransfer)) return;
+      if (!acceptsBoundDrop(event.dataTransfer)) return;
       event.preventDefault();
       zone.classList.remove("drag-over");
       if (insertDroppedChip(input, event.dataTransfer, event.clientX, event.clientY)) return;
 
+      const workspaceFile = readDraggedWorkspaceFile(event.dataTransfer);
+      if (workspaceFile && typeof onWorkspaceFile === "function") {
+        onWorkspaceFile(workspaceFile);
+        return;
+      }
+
       const files = Array.from(event.dataTransfer.files || []);
       if (files.length > 0 && typeof onFiles === "function") onFiles(files);
     });
@@ -419,12 +491,38 @@ const Composer = (() => {
     el.setAttribute("data-placeholder", value || "");
   }
 
-  // Wire up chip deletion, plain-text paste, and Shift+Enter for one composer.
-  function init(el) {
+  // Shell-style recall: only from an empty box, or while the box still holds
+  // the last recalled entry untouched. Past the newest entry clears the box.
+  function _handleHistory(el, e, getHistory) {
+    if (!getHistory || (e.key !== "ArrowUp" && e.key !== "ArrowDown")) return false;
+    if (e.isComposing || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey) return false;
+    let state = _recall.get(el);
+    if (state && (text(el) !== state.filled || el.querySelector("." + CHIP_CLASS))) {
+      _recall.delete(el);
+      state = null;
+    }
+    if (!state && (hasContent(el) || e.key === "ArrowDown")) return false;
+    const history = getHistory();
+    if (!history.length) return false;
+    e.preventDefault();
+    const index = Math.max(0, (state ? state.index : history.length) + (e.key === "ArrowUp" ? -1 : 1));
+    if (index >= history.length) {
+      clear(el);
+      return true;
+    }
+    _fill(el, history[index]);
+    _recall.set(el, { index, filled: text(el) });
+    return true;
+  }
+
+  // Wire up chip deletion, plain-text paste, Shift+Enter, and optional
+  // ArrowUp/Down recall of opts.getHistory() (oldest → newest) for one composer.
+  function init(el, opts = {}) {
     if (!el || el.dataset.composerInit) return;
     el.dataset.composerInit = "1";
     el.addEventListener("keydown", (e) => {
       if (_handleKeydown(el, e)) return;
+      if (_handleHistory(el, e, opts.getHistory)) return;
       _handleEnter(el, e);
     });
     el.addEventListener("paste", (e) => _handlePaste(el, e));
@@ -441,7 +539,8 @@ const Composer = (() => {
   return {
     text, setText, clear, focus, focusEnd, hasContent,
     chips, insertChip, insertDroppedChip, beginReferenceDrag, readDraggedChip,
-    acceptsSessionDrag,
+    acceptsSessionDrag, beginWorkspaceFileDrag, readDraggedWorkspaceFile,
+    acceptsWorkspaceFileDrag,
     acceptsDrop, bindDropZone,
     removeChip, setPlaceholder, init,
   };

data/lib/clacky/web/components/image-zoom.js

@@ -0,0 +1,165 @@
+/**
+ * ImageZoom — shared zoom and pan behavior for image viewers.
+ *
+ * The image keeps its natural dimensions and is transformed around the centre
+ * of the viewport, so 100% always means one image pixel per screen pixel.
+ */
+;(function(window) {
+  "use strict";
+
+  const DEFAULT_MIN_SCALE = 0.1;
+  const DEFAULT_MAX_SCALE = 8;
+  const DEFAULT_STEP = 1.25;
+
+  function create(options) {
+    const viewport = options.viewport;
+    const image = options.image;
+    const minScale = options.minScale || DEFAULT_MIN_SCALE;
+    const maxScale = options.maxScale || DEFAULT_MAX_SCALE;
+    const step = options.step || DEFAULT_STEP;
+    const fitPadding = options.fitPadding || 1;
+    const onChange = options.onChange || function() {};
+
+    let scale = 1;
+    let fit = 1;
+    let x = 0;
+    let y = 0;
+    let drag = null;
+
+    function fitScale() {
+      const vw = viewport.clientWidth;
+      const vh = viewport.clientHeight;
+      if (!vw || !vh) return 1;
+      const nw = image.naturalWidth || vw;
+      const nh = image.naturalHeight || vh;
+      return Math.min(1, vw * fitPadding / nw, vh * fitPadding / nh);
+    }
+
+    function pan(offsetX, offsetY) {
+      const maxX = Math.max(0, (image.naturalWidth * scale - viewport.clientWidth) / 2);
+      const maxY = Math.max(0, (image.naturalHeight * scale - viewport.clientHeight) / 2);
+      x = Math.max(-maxX, Math.min(maxX, offsetX));
+      y = Math.max(-maxY, Math.min(maxY, offsetY));
+    }
+
+    function state() {
+      return {
+        scale,
+        fit,
+        atFit: Math.abs(scale - fit) < 1e-6,
+        canZoomIn: scale < maxScale - 1e-6,
+        canZoomOut: scale > minScale + 1e-6,
+      };
+    }
+
+    function render() {
+      pan(x, y);
+      image.style.transform = "translate(" + x + "px, " + y + "px) scale(" + scale + ")";
+      onChange(state());
+    }
+
+    // Zoom around a point relative to the viewport centre, so the image pixel
+    // beneath the pointer stays in place rather than drifting toward a corner.
+    function zoomAt(target, px, py) {
+      const next = Math.max(minScale, Math.min(maxScale, target));
+      if (next === scale) return;
+      const k = next / scale;
+      x = px - k * (px - x);
+      y = py - k * (py - y);
+      scale = next;
+      render();
+    }
+
+    function anchorOf(ev) {
+      const rect = viewport.getBoundingClientRect();
+      return [
+        ev.clientX - (rect.left + rect.width / 2),
+        ev.clientY - (rect.top + rect.height / 2),
+      ];
+    }
+
+    function reset() {
+      fit = fitScale();
+      scale = fit;
+      x = 0;
+      y = 0;
+      render();
+    }
+
+    function zoomIn() { zoomAt(scale * step, 0, 0); }
+    function zoomOut() { zoomAt(scale / step, 0, 0); }
+
+    function onWheel(ev) {
+      ev.preventDefault();
+      const anchor = anchorOf(ev);
+      zoomAt(scale * Math.exp(-ev.deltaY * 0.002), anchor[0], anchor[1]);
+    }
+
+    function onDoubleClick(ev) {
+      ev.preventDefault();
+      if (state().atFit) {
+        const anchor = anchorOf(ev);
+        zoomAt(fit < 1 ? 1 : fit * 2, anchor[0], anchor[1]);
+      } else {
+        reset();
+      }
+    }
+
+    function onPointerDown(ev) {
+      if (ev.button || (options.panOnImageOnly && ev.target !== image)) return;
+      drag = { id: ev.pointerId, x: ev.clientX, y: ev.clientY };
+      viewport.classList.add("is-panning");
+      viewport.setPointerCapture(ev.pointerId);
+      ev.preventDefault();
+    }
+
+    function onPointerMove(ev) {
+      if (!drag || ev.pointerId !== drag.id) return;
+      pan(x + ev.clientX - drag.x, y + ev.clientY - drag.y);
+      drag.x = ev.clientX;
+      drag.y = ev.clientY;
+      image.style.transform = "translate(" + x + "px, " + y + "px) scale(" + scale + ")";
+    }
+
+    function endDrag(ev) {
+      if (!drag || ev.pointerId !== drag.id) return;
+      drag = null;
+      viewport.classList.remove("is-panning");
+    }
+
+    viewport.addEventListener("wheel", onWheel, { passive: false });
+    viewport.addEventListener("dblclick", onDoubleClick);
+    viewport.addEventListener("pointerdown", onPointerDown);
+    viewport.addEventListener("pointermove", onPointerMove);
+    viewport.addEventListener("pointerup", endDrag);
+    viewport.addEventListener("pointercancel", endDrag);
+    image.addEventListener("load", reset);
+
+    if (image.complete) reset();
+    else render();
+
+    // Refit only while the image is still fitted. A deliberate user zoom must
+    // survive a viewport resize or a tab becoming visible.
+    const observer = typeof ResizeObserver === "function"
+      ? new ResizeObserver(function() { if (state().atFit) reset(); })
+      : null;
+    if (observer) observer.observe(viewport);
+
+    function destroy() {
+      if (observer) observer.disconnect();
+      drag = null;
+      viewport.classList.remove("is-panning");
+      viewport.removeEventListener("wheel", onWheel);
+      viewport.removeEventListener("dblclick", onDoubleClick);
+      viewport.removeEventListener("pointerdown", onPointerDown);
+      viewport.removeEventListener("pointermove", onPointerMove);
+      viewport.removeEventListener("pointerup", endDrag);
+      viewport.removeEventListener("pointercancel", endDrag);
+      image.removeEventListener("load", reset);
+    }
+
+    return { zoomIn, zoomOut, reset, destroy, state };
+  }
+
+  window.ImageZoom = { create };
+})(window);

data/lib/clacky/web/components/model-picker.js

@@ -32,17 +32,18 @@ const ModelPicker = (() => {
   // tile's white ink; `brandSvg` keeps the official multi-color/gradient
   // artwork, so those tiles take a light background and skip the currentColor
   // fill. Unknown models fall back to their initial on a neutral tile.
+  // `tint` keeps a monochrome mark in brand color when drawn on a neutral tile.
   const _VENDOR_RULES = [
     // "auto" is the routing feature, not a vendor model: circular arrows
     // wrapping a bold "A" mark the automatic model pick.
-    { re: /^auto$/i, label: "A", color: "#4f46e5",
+    { re: /^auto$/i, label: "A", color: "#4f46e5", tint: "#4f46e5",
       svg: '<path d="M19.79 7.5A9 9 0 1 0 19.79 16.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/>'
          + '<path d="M17.49 3.51 21.52 6.5 18.06 8.5Z"/>'
          + '<path d="M22.09 12.51 21.52 17.5 18.06 15.5Z"/>'
          + '<path fill-rule="evenodd" d="M12 5.8 16.4 17.6H14.35L13.5 15.1H10.5L9.65 17.6H7.6ZM12 8.8 13.05 12.8H10.95Z"/>' },
     { re: /claude|anthropic/i,   label: "A", color: "#fff",
       brandSvg: '<path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"/>' },
-    { re: /deepseek/i,           label: "D", color: "#4D6BFE", viewBox: "0 1.5 27 20.5",
+    { re: /deepseek/i,           label: "D", color: "#4D6BFE", tint: "#4D6BFE", viewBox: "0 1.5 27 20.5",
       svg: '<path d="M26.5174 3.39471C26.235 3.2567 26.1137 3.52006 25.9487 3.65346C25.8923 3.69659 25.8446 3.75294 25.7969 3.80469C25.3846 4.24516 24.9027 4.53439 24.2737 4.49989C23.3536 4.44814 22.5682 4.73737 21.8735 5.44119C21.7258 4.57349 21.2353 4.0554 20.4889 3.72304C20.0985 3.55054 19.7034 3.37746 19.4297 3.00197C19.2388 2.73459 19.1865 2.43673 19.091 2.14289C19.0301 1.96579 18.9697 1.78466 18.7656 1.75418C18.5442 1.71968 18.4574 1.90541 18.3705 2.06067C18.0232 2.69549 17.8887 3.39471 17.9019 4.10313C17.9324 5.6965 18.6051 6.96556 19.9421 7.86834C20.0939 7.97184 20.133 8.07535 20.0852 8.22658C19.9938 8.53766 19.8857 8.83955 19.7903 9.15063C19.7293 9.34901 19.6384 9.39271 19.4257 9.30588C18.692 8.9994 18.0583 8.54571 17.4982 7.99772C16.5477 7.07827 15.6881 6.06336 14.6162 5.26869C14.3644 5.08296 14.1125 4.91045 13.8521 4.746C12.7584 3.68394 13.9952 2.81164 14.2816 2.70814C14.5812 2.60003 14.3857 2.22857 13.4179 2.23317C12.4502 2.2372 11.5646 2.56151 10.4359 2.99335C10.2708 3.05832 10.0972 3.10547 9.91951 3.14457C8.8954 2.95022 7.83162 2.90709 6.72069 3.03245C4.62877 3.26533 2.95777 4.25436 1.72954 5.94261C0.254043 7.97184 -0.0932678 10.2777 0.33167 12.6824C0.778458 15.2171 2.07225 17.3153 4.06008 18.9558C6.12152 20.6567 8.49577 21.4905 11.2047 21.3306C12.8498 21.2358 14.6812 21.0155 16.7473 19.2669C17.2682 19.5262 17.8151 19.6297 18.7219 19.7074C19.4205 19.7723 20.0933 19.6729 20.6143 19.5648C21.4302 19.3923 21.3739 18.6367 21.0789 18.4981C18.6874 17.3843 19.2124 17.8374 18.7351 17.4706C19.9501 16.033 21.8063 13.4776 22.379 9.99821C22.4353 9.61409 22.5072 9.073 22.4986 8.76192C22.494 8.57216 22.5377 8.49856 22.7545 8.47671C23.3536 8.40771 23.935 8.24383 24.4692 7.94999C26.0188 7.10357 26.6439 5.71318 26.7911 4.04678C26.8129 3.79204 26.7865 3.52869 26.5174 3.39471ZM13.0143 18.3946C10.6964 16.5724 9.5722 15.9726 9.10816 15.9985C8.67402 16.0244 8.75222 16.5212 8.84768 16.8449C8.94773 17.1646 9.07768 17.3849 9.25996 17.6655C9.38589 17.8512 9.47272 18.1272 9.13404 18.3348C8.38766 18.7965 7.08985 18.1796 7.0289 18.1491C5.51833 17.2595 4.25559 16.0853 3.36546 14.4793C2.50581 12.9337 2.0067 11.2753 1.92447 9.50542C1.90262 9.07818 2.02855 8.92695 2.45406 8.84932C3.01413 8.74582 3.59144 8.72397 4.15093 8.80619C6.51656 9.15178 8.53027 10.2092 10.2185 11.8848C11.1822 12.8388 11.9114 13.979 12.6623 15.0929C13.461 16.2757 14.3201 17.4027 15.4144 18.3268C15.8008 18.6505 16.109 18.8966 16.404 19.0783C15.5144 19.1778 14.0297 19.1991 13.0143 18.3958V18.3946ZM14.1252 11.2489C14.1252 11.0591 14.277 10.9079 14.4679 10.9079C14.511 10.9079 14.5501 10.9165 14.5852 10.9292C14.6329 10.9464 14.6766 10.9723 14.7111 11.0114C14.7721 11.0718 14.8066 11.158 14.8066 11.2489C14.8066 11.4386 14.6548 11.5899 14.4639 11.5899C14.273 11.5899 14.1252 11.4386 14.1252 11.2489ZM17.5759 13.0188C17.3545 13.1096 17.1331 13.1873 16.9203 13.1959C16.5903 13.2131 16.2303 13.0791 16.0348 12.9153C15.7312 12.6605 15.5139 12.5179 15.423 12.0734C15.3839 11.8837 15.4057 11.5899 15.4402 11.4214C15.5185 11.0585 15.4316 10.8257 15.1757 10.614C14.9676 10.4415 14.7025 10.3938 14.4115 10.3938C14.3029 10.3938 14.2034 10.3461 14.1292 10.3076C14.0079 10.2472 13.9078 10.096 14.0033 9.91023C14.0338 9.84985 14.1815 9.70322 14.216 9.67734C14.6111 9.45251 15.0665 9.52612 15.488 9.6946C15.8784 9.85445 16.174 10.1477 16.5989 10.5623C17.033 11.0631 17.1112 11.2011 17.3585 11.5772C17.554 11.871 17.7317 12.1729 17.8536 12.5185C17.9272 12.7341 17.8317 12.9107 17.5759 13.0188Z"/>' },
     { re: /glm|zhipu|bigmodel/i, label: "Z", color: "#131212", viewBox: "0 0 32 27",
       svg: '<path d="M16.5376 0.0307374L14.3326 3.13223C14.1617 3.37577 13.9331 3.57415 13.6667 3.71001C13.4004 3.84586 13.1045 3.91504 12.8048 3.9115H0.787598V0.015152H16.5376V0.0307374Z"/><path d="M31.5 0.0321655L12.6 26.5273H0L18.9 0.0321655H31.5Z"/><path d="M14.9624 26.5272L17.1832 23.4101C17.3564 23.1689 17.5856 22.9723 17.8513 22.8368C18.1171 22.7012 18.4119 22.6306 18.7109 22.6308H30.7124V26.5272H14.9624Z"/>' },
@@ -64,7 +65,7 @@ const ModelPicker = (() => {
       brandSvg: '<path d="M19.44 10.153l-2.936 11.586a.215.215 0 00.214.261h5.87a.215.215 0 00.214-.261l-2.95-11.586a.214.214 0 00-.412 0zM3.28 12.778l-2.275 8.96A.214.214 0 001.22 22h4.532a.212.212 0 00.214-.165.214.214 0 000-.097l-2.276-8.96a.214.214 0 00-.41 0z" fill="#00E5E5"/><path d="M7.29 5.359L3.148 21.738a.215.215 0 00.203.261h8.29a.214.214 0 00.215-.261L7.7 5.358a.214.214 0 00-.41 0z" fill="#006EFF"/><path d="M14.44.15a.214.214 0 00-.41 0L8.366 21.739a.214.214 0 00.214.261H19.9a.216.216 0 00.171-.078.214.214 0 00.044-.183L14.439.15z" fill="#006EFF"/><path d="M10.278 7.741L6.685 21.736a.214.214 0 00.214.264h7.17a.215.215 0 00.214-.264L10.688 7.741a.214.214 0 00-.41 0z" fill="#00E5E5"/>' },
     { re: /llama/i,              label: "L", color: "#fff", ink: "#111827",
       svg: '<path d="M7.905 1.09c.216.085.411.225.588.41.295.306.544.744.734 1.263.191.522.315 1.1.362 1.68a5.054 5.054 0 012.049-.636l.051-.004c.87-.07 1.73.087 2.48.474.101.053.2.11.297.17.05-.569.172-1.134.36-1.644.19-.52.439-.957.733-1.264a1.67 1.67 0 01.589-.41c.257-.1.53-.118.796-.042.401.114.745.368 1.016.737.248.337.434.769.561 1.287.23.934.27 2.163.115 3.645l.053.04.026.019c.757.576 1.284 1.397 1.563 2.35.435 1.487.216 3.155-.534 4.088l-.018.021.002.003c.417.762.67 1.567.724 2.4l.002.03c.064 1.065-.2 2.137-.814 3.19l-.007.01.01.024c.472 1.157.62 2.322.438 3.486l-.006.039a.651.651 0 01-.747.536.648.648 0 01-.54-.742c.167-1.033.01-2.069-.48-3.123a.643.643 0 01.04-.617l.004-.006c.604-.924.854-1.83.8-2.72-.046-.779-.325-1.544-.8-2.273a.644.644 0 01.18-.886l.009-.006c.243-.159.467-.565.58-1.12a4.229 4.229 0 00-.095-1.974c-.205-.7-.58-1.284-1.105-1.683-.595-.454-1.383-.673-2.38-.61a.653.653 0 01-.632-.371c-.314-.665-.772-1.141-1.343-1.436a3.288 3.288 0 00-1.772-.332c-1.245.099-2.343.801-2.67 1.686a.652.652 0 01-.61.425c-1.067.002-1.893.252-2.497.703-.522.39-.878.935-1.066 1.588a4.07 4.07 0 00-.068 1.886c.112.558.331 1.02.582 1.269l.008.007c.212.207.257.53.109.785-.36.622-.629 1.549-.673 2.44-.05 1.018.186 1.902.719 2.536l.016.019a.643.643 0 01.095.69c-.576 1.236-.753 2.252-.562 3.052a.652.652 0 01-1.269.298c-.243-1.018-.078-2.184.473-3.498l.014-.035-.008-.012a4.339 4.339 0 01-.598-1.309l-.005-.019a5.764 5.764 0 01-.177-1.785c.044-.91.278-1.842.622-2.59l.012-.026-.002-.002c-.293-.418-.51-.953-.63-1.545l-.005-.024a5.352 5.352 0 01.093-2.49c.262-.915.777-1.701 1.536-2.269.06-.045.123-.09.186-.132-.159-1.493-.119-2.73.112-3.67.127-.518.314-.95.562-1.287.27-.368.614-.622 1.015-.737.266-.076.54-.059.797.042zm4.116 9.09c.936 0 1.8.313 2.446.855.63.527 1.005 1.235 1.005 1.94 0 .888-.406 1.58-1.133 2.022-.62.375-1.451.557-2.403.557-1.009 0-1.871-.259-2.493-.734-.617-.47-.963-1.13-.963-1.845 0-.707.398-1.417 1.056-1.946.668-.537 1.55-.849 2.485-.849zm0 .896a3.07 3.07 0 00-1.916.65c-.461.37-.722.835-.722 1.25 0 .428.21.829.61 1.134.455.347 1.124.548 1.943.548.799 0 1.473-.147 1.932-.426.463-.28.7-.686.7-1.257 0-.423-.246-.89-.683-1.256-.484-.405-1.14-.643-1.864-.643zm.662 1.21l.004.004c.12.151.095.37-.056.49l-.292.23v.446a.375.375 0 01-.376.373.375.375 0 01-.376-.373v-.46l-.271-.218a.347.347 0 01-.052-.49.353.353 0 01.494-.051l.215.172.22-.174a.353.353 0 01.49.051zm-5.04-1.919c.478 0 .867.39.867.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zm8.706 0c.48 0 .868.39.868.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zM7.44 2.3l-.003.002a.659.659 0 00-.285.238l-.005.006c-.138.189-.258.467-.348.832-.17.692-.216 1.631-.124 2.782.43-.128.899-.208 1.404-.237l.01-.001.019-.034c.046-.082.095-.161.148-.239.123-.771.022-1.692-.253-2.444-.134-.364-.297-.65-.453-.813a.628.628 0 00-.107-.09L7.44 2.3zm9.174.04l-.002.001a.628.628 0 00-.107.09c-.156.163-.32.45-.453.814-.29.794-.387 1.776-.23 2.572l.058.097.008.014h.03a5.184 5.184 0 011.466.212c.086-1.124.038-2.043-.128-2.722-.09-.365-.21-.643-.349-.832l-.004-.006a.659.659 0 00-.285-.239h-.004z"/>' },
-    { re: /mistral/i,            label: "M", color: "#F26B1D",
+    { re: /mistral/i,            label: "M", color: "#F26B1D", tint: "#F26B1D",
       svg: '<path d="M17.143 3.429v3.428h-3.429v3.429h-3.428V6.857H6.857V3.43H3.43v13.714H0v3.428h10.286v-3.428H6.857v-3.429h3.429v3.429h3.429v-3.429h3.428v3.429h-3.428v3.428H24v-3.428h-3.43V3.429z"/>' },
     { re: /hunyuan/i,            label: "H", color: "#fff",
       brandSvg: '<circle cx="12" cy="12" fill="#0055E9" r="12"/><path d="M12 0c.518 0 1.028.033 1.528.096A6.188 6.188 0 0112.12 12.28l-.12.001c-2.99 0-5.242 2.179-5.554 5.11-.223 2.086.353 4.412 2.242 6.146C3.672 22.1 0 17.479 0 12 0 5.373 5.373 0 12 0z" fill="#A8DFF5"/><path d="M5.286 5a2.438 2.438 0 01.682 3.38c-3.962 5.966-3.215 10.743 2.648 15.136C3.636 22.056 0 17.452 0 12c0-1.787.39-3.482 1.09-5.006.253-.435.525-.872.817-1.311A2.438 2.438 0 015.286 5z" fill="#0055E9"/><path d="M12.98.04c.272.021.543.053.81.093.583.106 1.117.254 1.538.44 6.638 2.927 8.07 10.052 1.748 15.642a4.125 4.125 0 01-5.822-.358c-1.51-1.706-1.3-4.184.357-5.822.858-.848 3.108-1.223 4.045-2.441 1.257-1.634 2.122-6.009-2.523-7.506L12.98.039z" fill="#00BCFF"/><path d="M13.528.096A6.187 6.187 0 0112 12.281a5.75 5.75 0 00-1.71.255c.147-.905.595-1.784 1.321-2.501.858-.848 3.108-1.223 4.045-2.441 1.27-1.651 2.14-6.104-2.676-7.554.184.014.367.033.548.056z" fill="#ECECEE"/>' },
@@ -84,7 +85,8 @@ const ModelPicker = (() => {
     const el = document.createElement("span");
     el.className = "sib-vendor-badge";
     el.style.setProperty("--vendor-color", rule ? rule.color : "#7A8B99");
-    if (rule && rule.ink) el.style.color = rule.ink;
+    if (rule && rule.ink) el.style.setProperty("--vendor-ink", rule.ink);
+    if (rule && rule.tint) el.style.setProperty("--vendor-tint", rule.tint);
     if (rule && rule.color === "#fff") el.classList.add("is-light");
     if (rule && rule.brandSvg) {
       el.classList.add("is-brand");

data/lib/clacky/web/components/notify.js

@@ -230,9 +230,9 @@ const Notify = (() => {
     btn.classList.toggle("notify-on", on);
     if (typeof I18n !== "undefined") {
       const tip = I18n.t(_tooltipKey(on));
-      btn.title = tip;
+      btn.setAttribute("data-tooltip", tip);
       btn.setAttribute("aria-label", tip);
-      btn.setAttribute("data-i18n-title", _tooltipKey(on));
+      btn.setAttribute("data-i18n-tooltip", _tooltipKey(on));
     }
   }
 

data/lib/clacky/web/core/aside.js

@@ -23,6 +23,10 @@
   const OPEN_KEY  = "clacky.aside.open";
   const FULLSCREEN_KEY = "clacky.aside.fullscreen";
   const MIN_W = 256;
+  // Narrower than this the chat column stops being readable — composer and
+  // message bubbles fold into a one-character-wide strip. Once the aside
+  // crosses the line it takes the whole workspace instead.
+  const CHAT_MIN_W = 300;
   const maxW = () => Math.max(MIN_W, Math.round(window.innerWidth * 0.8));
   // Matches the CSS breakpoint where the aside becomes a fixed overlay drawer.
   const isNarrow = () => window.matchMedia("(max-width: 768px)").matches;
@@ -57,6 +61,19 @@
   function setWidth(px) {
     const aside = $("session-aside");
     if (aside) aside.style.setProperty("--session-aside-width", px + "px");
+    syncChatCollapse();
+  }
+
+  // The aside wins the whole workspace as soon as it would leave the chat
+  // column below CHAT_MIN_W. Width itself stays driven by the drag value, so
+  // pulling the handle back past the threshold restores the split at once.
+  function syncChatCollapse() {
+    const panel = $("chat-panel");
+    if (!panel) return;
+    const panelWidth = panel.getBoundingClientRect().width;
+    const collapsed = !isNarrow() && isOpen() && !slotEmpty() &&
+      panelWidth > CHAT_MIN_W && panelWidth - currentWidth() < CHAT_MIN_W;
+    panel.classList.toggle("chat-collapsed", collapsed);
   }
 
   // Reconcile temporary requests centrally so nested panels can close in any
@@ -144,6 +161,7 @@
     // A fullscreen class with an empty slot would show an empty column over
     // the whole workspace (the fullscreen rule outranks the empty-slot one).
     if (empty) setFullscreen(false);
+    syncChatCollapse();
   }
 
   function isOpen() {
@@ -214,12 +232,29 @@
     }
   }
 
+  function shortcutLabel() {
+    const uaData = navigator.userAgentData && navigator.userAgentData.platform;
+    const platform = (uaData || navigator.platform || "").toString();
+    return /mac/i.test(platform) ? "⌘L" : "Ctrl+L";
+  }
+
+  // Both hints carry the shortcut, so they are composed here rather than
+  // through data-i18n-tooltip (which would drop the suffix on a lang switch).
+  function applyAsideTitles() {
+    if (!window.Clacky || !Clacky.I18n) return;
+    const label = (key) => Clacky.I18n.t(key) + " (" + shortcutLabel() + ")";
+    const collapse = $("btn-aside-collapse");
+    if (collapse) collapse.setAttribute("data-tooltip", label("aside.collapse"));
+    const opener = $("btn-aside-open");
+    if (opener) opener.setAttribute("data-tooltip", label("aside.expand"));
+  }
+
   function applyFullscreenState() {
     const chatPanel = $("chat-panel");
     if (chatPanel) chatPanel.classList.toggle("aside-fullscreen", isFullscreen());
     const btn = $("btn-aside-fullscreen");
     if (btn && window.Clacky && Clacky.I18n) {
-      btn.title = Clacky.I18n.t(isFullscreen() ? "aside.exitFullscreen" : "aside.fullscreen");
+      btn.setAttribute("data-tooltip", Clacky.I18n.t(isFullscreen() ? "aside.exitFullscreen" : "aside.fullscreen"));
     }
   }
 
@@ -255,7 +290,7 @@
 
     try {
       const saved = parseFloat(localStorage.getItem(WIDTH_KEY));
-      if (saved >= MIN_W && saved <= maxW()) aside.style.setProperty("--session-aside-width", saved + "px");
+      if (saved >= MIN_W && saved <= maxW()) setWidth(saved);
     } catch (_e) { /* ignore */ }
 
     let dragging = false;
@@ -277,7 +312,7 @@
       if (!dragging) return;
       const dx = startX - e.clientX;
       const w = Math.min(maxW(), Math.max(MIN_W, startW + dx));
-      aside.style.setProperty("--session-aside-width", w + "px");
+      setWidth(w);
     });
 
     document.addEventListener("mouseup", () => {
@@ -320,6 +355,21 @@
     if (opener)   opener.addEventListener("click", () => setOpen(true));
     if (overlay)  overlay.addEventListener("click", () => setOpen(false));
     if (fsBtn)    fsBtn.addEventListener("click", () => setFullscreen(!isFullscreen()));
+    applyAsideTitles();
+    document.addEventListener("langchange", applyAsideTitles);
+    document.addEventListener("langchange", applyFullscreenState);
+    document.addEventListener("keydown", (e) => {
+      // ⌘L is the advertised shortcut; browsers keep it for the address bar,
+      // so ⌘\ stays as a working fallback wherever the keystroke is swallowed.
+      const isBackslash = e.key === "\\" || e.code === "Backslash";
+      const isL = e.key === "l" || e.key === "L" || e.code === "KeyL";
+      if (!isL && !isBackslash) return;
+      if (e.altKey || e.shiftKey) return;
+      if (!(e.metaKey || e.ctrlKey)) return;
+      if (slotEmpty()) return;
+      e.preventDefault();
+      setOpen(!isOpen());
+    });
     document.addEventListener("keydown", (e) => {
       if (e.key !== "Escape" || !isFullscreen()) return;
       // Let overlay panels (settings / skills) consume Esc first.
@@ -343,6 +393,13 @@
       requestAnimationFrame(() => { clampScheduled = false; clampWidth(); });
     });
 
+    // Sidebar collapse, session switches and window resizes all change how
+    // much room the chat panel has without going through setWidth.
+    const chatPanel = $("chat-panel");
+    if (chatPanel && window.ResizeObserver) {
+      new ResizeObserver(() => syncChatCollapse()).observe(chatPanel);
+    }
+
     // Re-evaluate opener visibility whenever the slot content changes (panels
     // re-render on session / agent switch).
     const slot = $("ext-slot-session-aside");

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

@@ -219,8 +219,8 @@ const BillingView = (() => {
       </div>
     `;
 
-    document.querySelectorAll(".segmented-control__btn").forEach(btn => {
-      btn.addEventListener("click", (e) => Billing.setPeriod(e.target.dataset.period));
+    container.querySelectorAll(".segmented-control__btn").forEach(btn => {
+      btn.addEventListener("click", () => Billing.setPeriod(btn.dataset.period));
     });
 
     const billingModelWrap = document.getElementById("billing-model-filter");