openclacky 1.5.21 → 1.5.22

data/lib/clacky/web/features/new-session/view.js

@@ -52,7 +52,7 @@ const NewSessionView = (() => {
     return a.description || "";
   }
 
-  const LS_SEEN_AGENTS_KEY = "openclacky.newSession.seenAgents";
+  const LS_SEEN_AGENTS_KEY = "clacky-new-session-seen-agents";
 
   function _seenAgents() {
     try {
@@ -356,20 +356,6 @@ const NewSessionView = (() => {
   const MAX_FILE_BYTES       = 300 * 1024 * 1024;
   const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 
-  function _docTypeIcon(mimeType, filename) {
-    const lower = (filename || "").toLowerCase();
-    if (mimeType === "application/pdf" || lower.endsWith(".pdf")) return "📄";
-    if (mimeType === "application/zip" || lower.endsWith(".zip")) return "🗜️";
-    if (lower.endsWith(".tar") || lower.endsWith(".gz") || lower.endsWith(".tgz") ||
-        lower.endsWith(".tar.gz") || lower.endsWith(".rar") || lower.endsWith(".7z")) return "🗜️";
-    if ((mimeType && mimeType.includes("wordprocessingml")) || lower.endsWith(".doc") || lower.endsWith(".docx")) return "📝";
-    if ((mimeType && mimeType.includes("spreadsheetml")) || lower.endsWith(".xls") || lower.endsWith(".xlsx")) return "📊";
-    if ((mimeType && mimeType.includes("presentationml")) || lower.endsWith(".ppt") || lower.endsWith(".pptx")) return "📋";
-    if (mimeType === "text/csv" || lower.endsWith(".csv")) return "📊";
-    if (lower.endsWith(".md") || lower.endsWith(".markdown")) return "📝";
-    return "📎";
-  }
-
   function _compressImage(file) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -477,7 +463,7 @@ const NewSessionView = (() => {
       const removeBtn = document.createElement("button");
       removeBtn.className = "img-preview-remove";
       removeBtn.textContent = "✕";
-      removeBtn.title = "Remove";
+      removeBtn.title = I18n.t("tooltip.remove");
       removeBtn.addEventListener("click", () => { _pendingImages.splice(idx, 1); _renderAttachmentPreviews(); });
       item.appendChild(thumbnail);
       item.appendChild(removeBtn);
@@ -490,7 +476,7 @@ const NewSessionView = (() => {
       item.title = f.name;
       const icon = document.createElement("div");
       icon.className = "pdf-preview-icon";
-      icon.textContent = _docTypeIcon(f.mime_type, f.name);
+      icon.innerHTML = Clacky.WorkspaceView.fileIcon(f.name);
       const info = document.createElement("div");
       info.className = "pdf-preview-info";
       const name = document.createElement("div");
@@ -504,7 +490,7 @@ const NewSessionView = (() => {
       const removeBtn = document.createElement("button");
       removeBtn.className = "pdf-preview-remove";
       removeBtn.textContent = "✕";
-      removeBtn.title = "Remove";
+      removeBtn.title = I18n.t("tooltip.remove");
       removeBtn.addEventListener("click", () => { _pendingFiles.splice(idx, 1); _renderAttachmentPreviews(); });
       item.appendChild(icon);
       item.appendChild(info);
@@ -541,11 +527,15 @@ const NewSessionView = (() => {
     }
     if (_pendingFiles.length > 0) {
       const badges = _pendingFiles.map((f) => {
-        const icon = _docTypeIcon(f.mime_type, f.name);
+        const icon = Clacky.WorkspaceView.fileIcon(f.name);
         const ext  = (f.name.split(".").pop() || "file").toUpperCase();
-        return `<span class="msg-pdf-badge"><span class="msg-pdf-badge-icon">${icon}</span>` +
+        const tag = f.path ? "button" : "span";
+        const attrs = f.path
+          ? ` type="button" class="msg-pdf-badge msg-file-open" data-file-path="${encodeURIComponent(f.path)}"`
+          : ` class="msg-pdf-badge"`;
+        return `<${tag}${attrs}><span class="msg-pdf-badge-icon">${icon}</span>` +
           `<span class="msg-pdf-badge-info"><span class="msg-pdf-badge-name">${escapeHtml(f.name)}</span>` +
-          `<span class="msg-pdf-badge-type">${escapeHtml(ext)}</span></span></span>`;
+          `<span class="msg-pdf-badge-type">${escapeHtml(ext)}</span></span></${tag}>`;
       }).join(" ");
       html = badges + (html ? "<br>" + html : "");
     }
@@ -604,6 +594,11 @@ const NewSessionView = (() => {
     if (popRect.bottom > window.innerHeight - 8) {
       pop.style.top = `${rect.top - popRect.height - 6}px`;
     }
+    // Keep the popover inside the viewport when the anchor sits near the right
+    // edge (narrow windows), instead of letting it run off-screen.
+    if (popRect.right > window.innerWidth - 8) {
+      pop.style.left = `${Math.max(8, window.innerWidth - popRect.width - 8)}px`;
+    }
 
     const dismiss = (e) => {
       if (!pop.contains(e.target) && e.target !== anchor) {
@@ -799,36 +794,482 @@ const NewSessionView = (() => {
     _updateSendButton();
   }
 
+  // ── Branch chip popover — search, switch, create ──
+  // Branches live in the project's work tree, not in the session, so switching
+  // here really runs `git checkout` on the shared directory. Local branches
+  // switch directly; remote ones become a tracking branch of the same name.
+  function _openBranchPopover(anchor) {
+    const zh = _isZh();
+    const projectId = NewSessionStore.state.advanced.projectId;
+    if (!projectId) return;
+
+    let busy = false;
+
+    _showCtxPopover(anchor, (pop) => {
+      pop.classList.add("ns-branch-pop");
+
+      const header = document.createElement("div");
+      header.className = "ns-branch-search";
+      header.innerHTML =
+        '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ' +
+        'stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>';
+      const input = document.createElement("input");
+      input.type = "text";
+      input.className = "ns-branch-search-input";
+      input.placeholder = zh ? "搜索分支" : "Search branches";
+      input.autocomplete = "off";
+      input.spellcheck = false;
+      header.appendChild(input);
+      pop.appendChild(header);
+
+      const list = document.createElement("div");
+      list.className = "ns-branch-list";
+      pop.appendChild(list);
+
+      const foot = document.createElement("div");
+      foot.className = "ns-branch-foot";
+      pop.appendChild(foot);
+
+      const _showError = (msg) => {
+        Clacky.Modal.toast(msg, "error");
+      };
+
+      const _checkout = async (branch, opts = {}) => {
+        if (busy) return;
+        busy = true;
+        list.classList.add("is-busy");
+        try {
+          const data = await Projects.checkoutBranch(projectId, {
+            branch,
+            dir: NewSessionStore.state.advanced.workingDir || "",
+            ...opts,
+          });
+          NewSessionStore.applyGitState(data);
+          _dismissCtxPopover();
+        } catch (e) {
+          busy = false;
+          list.classList.remove("is-busy");
+          _showError(_branchErrorText(e.message, zh, branch));
+        }
+      };
+
+      const _branchItem = (b, label, onClick) => {
+        const item = document.createElement("button");
+        item.type = "button";
+        item.className = "ns-ctx-popover-item ns-branch-item" + (b.current ? " active" : "");
+        const icon =
+          '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ' +
+          'stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/>' +
+          '<circle cx="18" cy="8" r="2.5"/><path d="M6 8.5v7"/><path d="M18 10.5c0 3-2.5 4.5-6 5"/></svg>';
+        const check = b.current
+          ? '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" ' +
+            'stroke-linecap="round" stroke-linejoin="round"><path d="m20 6-11 11-5-5"/></svg>'
+          : "";
+        item.innerHTML =
+          `<span class="ns-branch-item-icon">${icon}</span>` +
+          `<span class="ns-branch-item-label">${_escHtml(label)}</span>` +
+          `<span class="ns-branch-item-check">${check}</span>`;
+        item.title = label;
+        item.addEventListener("click", onClick);
+        return item;
+      };
+
+      const _localName = (ref) => ref.replace(/^[^/]+\//, "");
+
+      const renderList = () => {
+        const q = input.value.trim().toLowerCase();
+        const branches = NewSessionStore.state.git.branches || [];
+        const local  = branches.filter(b => !b.remote && b.name.toLowerCase().includes(q));
+        const remote = branches.filter(b =>  b.remote && b.name.toLowerCase().includes(q));
+        const currentRef = NewSessionStore.state.git.branch;
+        const localNames = new Set(branches.filter(b => !b.remote).map(b => b.name));
+
+        list.innerHTML = "";
+        list.scrollTop = 0;
+
+        if (!local.length && !remote.length) {
+          const empty = document.createElement("div");
+          empty.className = "ns-ctx-popover-empty";
+          empty.textContent = q
+            ? (zh ? "没有匹配的分支" : "No matching branches")
+            : (zh ? "暂无分支" : "No branches");
+          list.appendChild(empty);
+          return;
+        }
+
+        const addGroup = (title, items, toItem) => {
+          if (!items.length) return;
+          const label = document.createElement("div");
+          label.className = "ns-branch-group";
+          label.textContent = title;
+          list.appendChild(label);
+          items.forEach(b => list.appendChild(toItem(b)));
+        };
+
+        addGroup(zh ? "分支" : "Branches", local, (b) => {
+          const isCurrent = b.name === currentRef || b.current;
+          return _branchItem({ current: isCurrent }, b.name, () => {
+            if (isCurrent) { _dismissCtxPopover(); return; }
+            _checkout(b.name);
+          });
+        });
+
+        addGroup(zh ? "远程" : "Remote", remote, (b) => {
+          // A remote ref is not a thing HEAD can point at, so picking one
+          // materialises a local branch of the same name (or reuses it).
+          const short = _localName(b.name);
+          const existsLocally = localNames.has(short);
+          const item = _branchItem({ current: false }, b.name, () => {
+            if (existsLocally) _checkout(short);
+            else _checkout(short, { create: true, from: b.name });
+          });
+          item.classList.add("is-remote");
+          return item;
+        });
+      };
+
+      // Naming a new branch needs room for the prefix rule and validation
+      // messages, so it opens in a modal instead of an inline field here.
+      const createBtn = document.createElement("button");
+      createBtn.type = "button";
+      createBtn.className = "ns-ctx-popover-item ns-branch-create";
+      createBtn.innerHTML =
+        '<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="M12 5v14M5 12h14"/></svg>' +
+        `<span>${zh ? "创建并检出分支…" : "Create and check out…"}</span>`;
+      createBtn.addEventListener("click", () => {
+        _dismissCtxPopover();
+        _openCreateBranchModal();
+      });
+      foot.appendChild(createBtn);
+
+      input.addEventListener("input", renderList);
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") { e.preventDefault(); _dismissCtxPopover(); }
+      });
+
+      renderList();
+      setTimeout(() => input.focus(), 30);
+    });
+  }
+
+  // ── Create-branch modal ──
+  // Mirrors `git check-ref-format --branch` locally so most mistakes are caught
+  // before the round trip; git's own message is shown for anything missed.
+  function _branchNameError(name, zh) {
+    if (!name) return zh ? "请输入分支名称。" : "Please enter a branch name.";
+    if (name.endsWith("/")) return zh ? '分支名不能以"/"结尾。' : 'Branch name cannot end with "/".';
+    if (name.startsWith("/")) return zh ? '分支名不能以"/"开头。' : 'Branch name cannot start with "/".';
+    if (name.startsWith("-")) return zh ? '分支名不能以"-"开头。' : 'Branch name cannot start with "-".';
+    if (name.indexOf("//") !== -1) return zh ? '分支名不能包含"//"。' : 'Branch name cannot contain "//".';
+    if (name.indexOf("..") !== -1) return zh ? '分支名不能包含".."。' : 'Branch name cannot contain "..".';
+    if (name.endsWith(".")) return zh ? '分支名不能以"."结尾。' : 'Branch name cannot end with "."';
+    if (name.endsWith(".lock")) return zh ? '分支名不能以".lock"结尾。' : 'Branch name cannot end with ".lock".';
+    if (/[\s~^:?*\[\\\x00-\x1f\x7f]/.test(name)) {
+      return zh
+        ? "分支名不能包含空格或 ~ ^ : ? * [ \\ 等字符。"
+        : "Branch name cannot contain spaces or characters like ~ ^ : ? * [ \\.";
+    }
+    return "";
+  }
+
+  // git reports checkout failures on stderr in English and with a file list that
+  // would swamp the popover, so the common cases are rewritten for the active
+  // language; anything unrecognised is passed through untouched.
+  function _branchErrorText(raw, zh, branch, verb = "切换分支") {
+    const msg = String(raw || "").trim();
+    if (!zh) return msg || "Failed";
+    if (!msg) return `${verb}失败。`;
+
+    if (/would be overwritten by checkout|would be overwritten by merge/i.test(msg)) {
+      const files = msg
+        .slice(msg.indexOf(":") + 1)
+        .split("\n")
+        .map(line => line.trim())
+        .filter(line => line && !/^(Please|error:|hint:|Aborting)/i.test(line));
+      if (!files.length) return "本地有未提交的修改，切换分支会被覆盖。请先提交或暂存后再试。";
+      const shown = files.slice(0, 5);
+      const more  = files.length > shown.length ? `\n…（共 ${files.length} 个文件）` : "";
+      return `本地有未提交的修改，切换分支会被覆盖：\n${shown.join("\n")}${more}\n请先提交或暂存后再试。`;
+    }
+    if (/untracked working tree files would be overwritten/i.test(msg)) {
+      return "本地有未跟踪的文件会被覆盖，请先移走或提交后再试。";
+    }
+    if (/a branch named '.+' already exists/i.test(msg)) {
+      const found = msg.match(/a branch named '(.+)' already exists/i);
+      return `分支 ${found ? found[1] : branch || ""} 已存在。`;
+    }
+    if (/not a valid branch name/i.test(msg)) return "分支名不合法。";
+    if (/couldn't find remote ref/i.test(msg)) return "远程分支不存在。";
+    if (/did not match any file\(s\) known to git|pathspec .+ did not match/i.test(msg)) {
+      return "找不到该分支。";
+    }
+    if (/not a git repository/i.test(msg)) return "该目录不是 Git 仓库。";
+    if (/you need to resolve your current index first/i.test(msg)) {
+      return "当前有未解决的合并冲突，请先处理后再切换分支。";
+    }
+    return `${verb}失败：${msg}`;
+  }
+
+  function _openCreateBranchModal() {
+    const zh = _isZh();
+    const projectId = NewSessionStore.state.advanced.projectId;
+    if (!projectId) return;
+
+    let prefix = "";
+    let busy = false;
+
+    const overlay = document.createElement("div");
+    overlay.className = "modal-overlay";
+    overlay.innerHTML =
+      '<div class="modal-box sm ns-branch-modal" role="dialog" aria-modal="true">' +
+        '<div class="modal-header">' +
+          `<h3 class="modal-title">${zh ? "创建并检出分支" : "Create and check out branch"}</h3>` +
+          '<button type="button" class="modal-close-btn ns-branch-modal-close" aria-label="Close"></button>' +
+        "</div>" +
+        '<div class="modal-body">' +
+          '<div class="modal-field">' +
+            '<div class="ns-branch-field-head">' +
+              `<span class="modal-label">${zh ? "分支名称" : "Branch name"}</span>` +
+              `<button type="button" class="ns-branch-prefix-btn">${zh ? "设置前缀" : "Set prefix"}</button>` +
+            "</div>" +
+            '<div class="ns-branch-name-row">' +
+              '<span class="ns-branch-prefix-chip" hidden></span>' +
+              '<input type="text" class="ns-branch-name-input" autocomplete="off" spellcheck="false"' +
+              ` aria-label="${zh ? "分支名称" : "Branch name"}"` +
+              ` placeholder="${zh ? "例如 feature/login" : "e.g. feature/login"}">` +
+            "</div>" +
+            '<div class="ns-branch-modal-error" hidden></div>' +
+          "</div>" +
+        "</div>" +
+        '<div class="modal-footer">' +
+          `<button type="button" class="btn-secondary ns-branch-modal-cancel">${zh ? "关闭" : "Close"}</button>` +
+          `<button type="button" class="btn-primary ns-branch-modal-submit">${zh ? "创建并检出" : "Create and check out"}</button>` +
+        "</div>" +
+      "</div>";
+    document.body.appendChild(overlay);
+
+    const input = overlay.querySelector(".ns-branch-name-input");
+    const prefixChip = overlay.querySelector(".ns-branch-prefix-chip");
+    const prefixBtn = overlay.querySelector(".ns-branch-prefix-btn");
+    const nameRow = overlay.querySelector(".ns-branch-name-row");
+    const errorEl = overlay.querySelector(".ns-branch-modal-error");
+    const submitBtn = overlay.querySelector(".ns-branch-modal-submit");
+    const cancelBtn = overlay.querySelector(".ns-branch-modal-cancel");
+    const closeBtn = overlay.querySelector(".ns-branch-modal-close");
+
+    const fullName = () => (prefix + input.value.trim()).trim();
+
+    const setError = (msg) => {
+      errorEl.textContent = msg;
+      errorEl.hidden = !msg;
+      nameRow.classList.toggle("is-invalid", !!msg);
+    };
+
+    const sync = () => {
+      const name = input.value.trim();
+      prefixChip.hidden = !prefix;
+      prefixChip.textContent = prefix;
+      prefixBtn.textContent = prefix
+        ? (zh ? "取消前缀" : "Clear prefix")
+        : (zh ? "设置前缀" : "Set prefix");
+      prefixBtn.disabled = busy || (!prefix && !name);
+      submitBtn.disabled = busy || !name;
+      setError(name ? _branchNameError(fullName(), zh) : "");
+    };
+
+    const close = () => {
+      unbindEnter();
+      document.removeEventListener("keydown", onKeydown);
+      overlay.remove();
+    };
+
+    const onKeydown = (e) => {
+      if (e.key === "Escape") { e.preventDefault(); close(); }
+    };
+
+    const submit = async () => {
+      if (busy) return;
+      const branch = fullName();
+      const err = _branchNameError(branch, zh);
+      if (err) { setError(err); input.focus(); return; }
+
+      busy = true;
+      const label = submitBtn.textContent;
+      submitBtn.textContent = zh ? "创建中…" : "Creating…";
+      sync();
+      try {
+        const data = await Projects.checkoutBranch(projectId, {
+          branch,
+          create: true,
+          dir: NewSessionStore.state.advanced.workingDir || "",
+        });
+        NewSessionStore.applyGitState(data);
+        close();
+      } catch (e) {
+        busy = false;
+        submitBtn.textContent = label;
+        sync();
+        setError(_branchErrorText(e.message, zh, branch, "创建分支"));
+      }
+    };
+
+    prefixBtn.addEventListener("click", () => {
+      const name = input.value.trim();
+      if (prefix) {
+        input.value = prefix + name;
+        prefix = "";
+      } else {
+        if (!name) return;
+        const cut = name.lastIndexOf("/");
+        if (cut > 0) {
+          prefix = name.slice(0, cut + 1);
+          input.value = name.slice(cut + 1);
+        } else {
+          prefix = name + "/";
+          input.value = "";
+        }
+      }
+      input.focus();
+      sync();
+    });
+
+    input.addEventListener("input", sync);
+    overlay.addEventListener("mousedown", (e) => { if (e.target === overlay) close(); });
+    submitBtn.addEventListener("click", submit);
+    cancelBtn.addEventListener("click", close);
+    closeBtn.addEventListener("click", close);
+    document.addEventListener("keydown", onKeydown);
+    const unbindEnter = IME.bindEnter(input, submit);
+
+    sync();
+    setTimeout(() => input.focus(), 50);
+  }
+
   // ── Render context bar ──
+  // Chips are created once and updated in place. Rebuilding the row on every
+  // store event made it flash during a project switch: the branch chip dropped
+  // out until git info arrived, which shoved the model and init chips sideways,
+  // and the row was repainted two or three times per switch.
+  const CTX_CHIP_ORDER = ["name", "project", "dir", "branch", "model", "init"];
+
+  const _ctxSvg = (body) =>
+    `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+
+  const CTX_ICONS = {
+    name: _ctxSvg(`<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>`),
+    project: _ctxSvg(`<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>`),
+    dir: _ctxSvg(`<rect width="18" height="18" x="3" y="3" rx="2"/><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/>`),
+    branch: _ctxSvg(`<circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="8" r="2.5"/><path d="M6 8.5v7"/><path d="M18 10.5c0 3-2.5 4.5-6 5"/>`),
+    model: _ctxSvg(`<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>`),
+    init: _ctxSvg(`<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>`),
+  };
+
+  let _ctxChips = null;
+
+  function _setChipLabel(chip, label) {
+    const text = chip.querySelector(".ns-ctx-chip-label");
+    if (text && text.textContent !== label) text.textContent = label;
+  }
+
+  function _setChipIcon(chip, icon, cacheKey) {
+    if (!icon) return;
+    if (cacheKey && chip.dataset.iconKey === cacheKey) return;
+    const slot = chip.querySelector(".ns-ctx-chip-icon");
+    if (slot) {
+      if (icon instanceof Node) {
+        slot.innerHTML = "";
+        slot.appendChild(icon);
+        slot.classList.add("ns-ctx-chip-icon--badge");
+      } else if (slot.innerHTML !== icon) {
+        slot.innerHTML = icon;
+        slot.classList.remove("ns-ctx-chip-icon--badge");
+      }
+    }
+    if (cacheKey) chip.dataset.iconKey = cacheKey;
+  }
+
+  function _ensureCtxChips(bar) {
+    if (_ctxChips && _ctxChips.name.parentElement === bar) return _ctxChips;
+    bar.innerHTML = "";
+    _ctxChips = {};
+    CTX_CHIP_ORDER.forEach((role) => {
+      const onClick = {
+        name: _openNamePopover,
+        project: _openProjectPopover,
+        dir: _openDirPopover,
+        branch: _openBranchPopover,
+        model: _openModelPopover,
+        init: _toggleInitProject,
+      }[role];
+      const chip = _makeChip(CTX_ICONS[role], "", onClick);
+      chip.dataset.ctxRole = role;
+      _ctxChips[role] = chip;
+      bar.appendChild(chip);
+    });
+    _ctxChips.branch.id = "ns-chip-branch";
+    return _ctxChips;
+  }
+
   function _renderContextBar() {
     const bar = $("ns-context-bar");
     if (!bar) return;
-    bar.innerHTML = "";
+    const chips = _ensureCtxChips(bar);
 
     const zh = _isZh();
     const agent = NewSessionStore.currentAgent();
     const adv   = NewSessionStore.state.advanced;
 
+    // Session name chip — leads the bar: naming the session is the first thing
+    // people do here, and every other chip is a setting they rarely touch.
+    const nameVal = adv.name || "";
+    _setChipLabel(chips.name, nameVal || (zh ? "会话名称" : "Name"));
+    chips.name.classList.toggle("ns-ctx-chip--muted", !nameVal);
+
     // Project chip
     const projectId = adv.projectId;
     const project = projectId && typeof Projects !== "undefined" && Projects.find
       ? Projects.find(projectId)
       : null;
-    const projectLabel = project
-      ? project.name
-      : (zh ? "选择项目" : "Project");
-    const projectIcon = `<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="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>`;
-    const projectChip = _makeChip(projectIcon, projectLabel, _openProjectPopover);
-    if (!projectId) projectChip.classList.add("ns-ctx-chip--muted");
-    bar.appendChild(projectChip);
-
-    // Session name chip (2nd position)
-    const nameVal = adv.name || "";
-    const nameLabel = nameVal || (zh ? "会话名称" : "Name");
-    const nameIcon = `<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="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>`;
-    const nameChip = _makeChip(nameIcon, nameLabel, _openNamePopover);
-    if (!nameVal) nameChip.classList.add("ns-ctx-chip--muted");
-    bar.appendChild(nameChip);
+    _setChipLabel(chips.project, project ? project.name : (zh ? "选择项目" : "Project"));
+    chips.project.classList.toggle("ns-ctx-chip--muted", !projectId);
+
+    // Working dir chip — a terminal, not a folder: the folder glyph is already
+    // the project chip's, and two folders in a row read as the same thing.
+    const dirVal = adv.workingDir || "";
+    const dirShort = dirVal
+      ? dirVal.replace(/^.*[\/]([^\/]+[\/][^\/]*)$/, "$1").replace(/^.*[\/]/, "").slice(-32)
+      : "";
+    _setChipLabel(chips.dir, dirShort || (zh ? "工作目录" : "Directory"));
+    chips.dir.classList.toggle("ns-ctx-chip--muted", !dirVal);
+
+    // Branch chip — coding agent on a git-backed project. The work tree's
+    // branch is shared state, and the session's working dir can point at a
+    // different repo than the project's, so the key is project + dir.
+    const showBranch = !!(agent && agent.id === "coding" && projectId);
+    const git = NewSessionStore.state.git || {};
+    const gitKey = showBranch ? NewSessionStore.gitKey(projectId, dirVal) : "";
+    const gitKnown = showBranch && git.loaded && git.key === gitKey;
+
+    if (showBranch && !gitKnown && !git.loading) {
+      NewSessionStore.loadGitInfo(projectId, { dir: dirVal });
+    }
+
+    // Only a confirmed non-repo hides the chip; while loading it stays in place
+    // so the chips after it don't shift.
+    chips.branch.hidden = !showBranch || (gitKnown && !git.repo);
+    if (showBranch) {
+      // Keep the previous branch name while a switch is in flight — swapping in
+      // a placeholder and then the real name reads as two separate flickers.
+      const branchLabel = gitKnown
+        ? (git.branch || (zh ? "分支" : "Branch"))
+        : (chips.branch.querySelector(".ns-ctx-chip-label").textContent || (zh ? "分支" : "Branch"));
+      _setChipLabel(chips.branch, branchLabel);
+      chips.branch.classList.toggle("ns-ctx-chip--muted", !gitKnown || !git.branch);
+      chips.branch.title = gitKnown
+        ? (zh ? "切换或创建分支" : "Switch or create a branch")
+        : (zh ? "正在读取分支…" : "Loading branch…");
+    }
 
     // Model chip — show selected model name from store (strip prefix/suffix for brevity)
     let modelLabel = zh ? "模型" : "Model";
@@ -842,29 +1283,19 @@ const NewSessionView = (() => {
         modelLabel = modelRaw.length > 28 ? modelRaw.slice(0, 26) + "…" : modelRaw;
       }
     }
-    const modelIcon = modelRaw && typeof ModelPicker !== "undefined"
-      ? ModelPicker.vendorBadge(modelRaw)
-      : `<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="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>`;
-    bar.appendChild(_makeChip(modelIcon, modelLabel, _openModelPopover));
-
-    // Working dir chip
-    const dirVal = adv.workingDir || "";
-    const dirShort = dirVal
-      ? dirVal.replace(/^.*[\/]([^\/]+[\/][^\/]*)$/, "$1").replace(/^.*[\/]/, "").slice(-32)
-      : (zh ? "工作目录" : "Directory");
-    const dirIcon = `<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="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>`;
-    const dirChip = _makeChip(dirIcon, dirShort || (zh ? "工作目录" : "Directory"), _openDirPopover);
-    if (!dirVal) dirChip.classList.add("ns-ctx-chip--muted");
-    bar.appendChild(dirChip);
+    _setChipLabel(chips.model, modelLabel);
+    _setChipIcon(
+      chips.model,
+      modelRaw && typeof ModelPicker !== "undefined" ? ModelPicker.vendorBadge(modelRaw) : CTX_ICONS.model,
+      modelRaw || "default"
+    );
 
     // Init project chip — only for coding agent
-    if (agent && agent.id === "coding") {
-      const active = NewSessionStore.state.advanced.initProject === true;
-      const initLabel = zh ? "初始化项目" : "Init project";
-      const initIcon = `<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="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`;
-      const initChip = _makeChip(initIcon, initLabel, _toggleInitProject);
-      if (active) initChip.classList.add("ns-ctx-chip--active");
-      bar.appendChild(initChip);
+    const showInit = !!(agent && agent.id === "coding");
+    chips.init.hidden = !showInit;
+    if (showInit) {
+      _setChipLabel(chips.init, zh ? "初始化项目" : "Init project");
+      chips.init.classList.toggle("ns-ctx-chip--active", adv.initProject === true);
     }
   }
 
@@ -943,6 +1374,7 @@ const NewSessionView = (() => {
       _renderContextBar();
     });
     NewSessionStore.on("newSession:creating", _updateSendButton);
+    NewSessionStore.on("newSession:git-changed", _renderContextBar);
 
     const input = $("new-session-input");
     if (input) {
@@ -1031,6 +1463,12 @@ const NewSessionView = (() => {
     // projectId from localStorage, which decides whether the working dir is
     // prefilled from the project or from the global default.
     await _prefillDefaultDir();
+    // Another session may have switched the work tree's branch while this page
+    // was hidden, so the cached value is refreshed on every show.
+    await NewSessionStore.loadGitInfo(NewSessionStore.state.advanced.projectId, {
+      dir: NewSessionStore.state.advanced.workingDir || "",
+      force: true,
+    });
     _renderContextBar();
     _updateSendButton();
     const input = $("new-session-input");

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

@@ -23,7 +23,7 @@
 // ───────────────────────────────────────────────────────────────────────────
 
 const SkillsStore = (() => {
-  const SKILL_AC_SHOW_SYSTEM_KEY = "skill-ac-show-system";
+  const SKILL_AC_SHOW_SYSTEM_KEY = "clacky-skill-ac-show-system";
 
   // ── State (single source of truth) ─────────────────────────────────────
   let _skills          = [];          // [{ name, description, source, enabled }]