openclacky 1.5.4 → 1.5.5

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

@@ -13,16 +13,20 @@
 // ───────────────────────────────────────────────────────────────────────────
 
 const NewSessionStore = (() => {
-  const LS_AGENT_KEY = "openclacky.newSession.lastAgent";
+  const LS_AGENT_KEY   = "openclacky.newSession.lastAgent";
+  const LS_PROJECT_KEY = "openclacky.newSession.lastProject";
 
   const _state = {
     agents: [],
     selectedAgentId: null,
+    defaultDir: "",
+    models: [],
     advanced: {
       name: "",
       modelId: "",
       workingDir: "",
       initProject: false,
+      projectId: null,
     },
     advancedOpen: false,
     creating: false,
@@ -61,6 +65,10 @@ const NewSessionStore = (() => {
 
       _emit("newSession:agents-loaded", { agents: _state.agents });
       _emit("newSession:selection-changed", { agentId: _state.selectedAgentId });
+
+      // Restore last-used project from localStorage.
+      const lastProject = localStorage.getItem(LS_PROJECT_KEY);
+      if (lastProject) _state.advanced.projectId = lastProject;
     } catch (e) {
       console.error("Failed to load agents:", e);
     }
@@ -86,6 +94,14 @@ const NewSessionStore = (() => {
 
   function updateAdvanced(patch) {
     Object.assign(_state.advanced, patch);
+    // Persist last-selected project so it's restored on next visit.
+    if ("projectId" in patch) {
+      if (patch.projectId) {
+        localStorage.setItem(LS_PROJECT_KEY, patch.projectId);
+      } else {
+        localStorage.removeItem(LS_PROJECT_KEY);
+      }
+    }
     _emit("newSession:advanced-changed", { advanced: _state.advanced });
   }
 
@@ -94,7 +110,9 @@ const NewSessionStore = (() => {
       const res = await fetch("/api/config");
       if (!res.ok) return [];
       const data = await res.json();
-      return (data && data.models) || [];
+      const models = (data && data.models) || [];
+      _state.models = models;
+      return models;
     } catch (e) {
       console.error("Failed to load models:", e);
       return [];
@@ -108,7 +126,9 @@ const NewSessionStore = (() => {
       const data = await res.json();
       const home = data && data.home;
       if (!home) return "";
-      return home.replace(/\/+$/, "") + "/clacky_workspace";
+      const dir = home.replace(/\/+$/, "") + "/clacky_workspace";
+      _state.defaultDir = dir;
+      return dir;
     } catch (e) {
       return "";
     }
@@ -138,6 +158,7 @@ const NewSessionStore = (() => {
       if (!useDefaults) {
         if (adv.workingDir.trim()) payload.working_dir = adv.workingDir.trim();
         if (adv.modelId) payload.model_id = adv.modelId;
+        if (adv.projectId) payload.project_id = adv.projectId;
       }
 
       const res = await fetch("/api/sessions", {
@@ -169,6 +190,7 @@ const NewSessionStore = (() => {
   function reset() {
     _state.advanced.name = "";
     _state.advanced.initProject = false;
+    // projectId is intentionally kept — restored on next visit from localStorage.
     _emit("newSession:reset", {});
   }
 

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

@@ -120,12 +120,12 @@ const NewSessionView = (() => {
       if (!_isBuiltin(a) && a.source === "extension") {
         const badge = document.createElement("span");
         badge.className = "agent-card-badge";
-        badge.textContent = "EXT";
+        badge.textContent = _isZh() ? "扩展" : "EXT";
         card.appendChild(badge);
       } else if (a.source === "user") {
         const badge = document.createElement("span");
         badge.className = "agent-card-badge agent-card-badge--custom";
-        badge.textContent = "custom";
+        badge.textContent = _isZh() ? "自定义" : "Custom";
         card.appendChild(badge);
       }
 
@@ -138,7 +138,6 @@ const NewSessionView = (() => {
     });
 
     _updatePlaceholder();
-    _renderAgentPanels();
     _renderStarterPrompts();
   }
 
@@ -202,38 +201,6 @@ const NewSessionView = (() => {
     container.style.display = "block";
   }
 
-  function _renderAgentPanels() {
-    const box = $("new-session-agent-panels");
-    if (!box) return;
-    const agent = NewSessionStore.currentAgent();
-    const ext = window.Clacky && Clacky.ext;
-    const contrib = (agent && ext && typeof ext.contributionsForAgent === "function")
-      ? ext.contributionsForAgent(agent.id)
-      : null;
-    const panels = (contrib && contrib.panels) || [];
-    const skills = (contrib && contrib.skills) || [];
-    if (!panels.length && !skills.length) {
-      box.style.display = "none";
-      box.replaceChildren();
-      return;
-    }
-    const zh = _isZh();
-    const label = document.createElement("span");
-    label.className = "ns-panels-label";
-    label.textContent = zh ? "此助手额外提供" : "This agent adds";
-    box.replaceChildren(label);
-    panels.forEach((p) => box.appendChild(_contribChip((zh && p.title_zh) ? p.title_zh : p.title, "panel")));
-    skills.forEach((s) => box.appendChild(_contribChip((zh && s.title_zh) ? s.title_zh : s.title, "skill")));
-    box.style.display = "flex";
-  }
-
-  function _contribChip(text, kind) {
-    const chip = document.createElement("span");
-    chip.className = `ns-panel-chip ns-panel-chip--${kind}`;
-    chip.textContent = text;
-    return chip;
-  }
-
   function _updatePlaceholder() {
     const input = $("new-session-input");
     if (!input) return;
@@ -242,58 +209,34 @@ const NewSessionView = (() => {
 
   async function _populateModels() {
     if (_modelsLoaded) return;
-    const select = $("new-session-model");
-    if (!select) return;
     const models = await NewSessionStore.loadModels();
+    _modelsLoaded = true;
 
-    select.innerHTML = "";
-    if (models.length === 0) {
-      const opt = document.createElement("option");
-      opt.value = "";
-      opt.textContent = "No models configured";
-      select.appendChild(opt);
-      _modelsLoaded = true;
-      return;
+    // Set default modelId in store if not already set
+    if (!NewSessionStore.state.advanced.modelId) {
+      const def = models.find((m) => m.type === "default") || models[0];
+      if (def) NewSessionStore.updateAdvanced({ modelId: def.id || "" });
     }
-
-    models.forEach((m) => {
-      const opt = document.createElement("option");
-      opt.value = m.id || "";
-      const typeBadge = m.type === "default" ? "[default] " : "";
-      opt.textContent = `${typeBadge}${m.model} (${m.api_key_masked})`;
-      if (m.type === "default") {
-        opt.selected = true;
-        NewSessionStore.updateAdvanced({ modelId: opt.value });
-      }
-      select.appendChild(opt);
-    });
-    _modelsLoaded = true;
+    _renderContextBar();
   }
 
   async function _prefillDefaultDir() {
-    const dirInput = $("new-session-directory");
-    if (!dirInput || dirInput.value) return;
+    if (NewSessionStore.state.advanced.workingDir) return;  // already set
     const home = await NewSessionStore.loadDefaultDirectory();
-    if (home && !dirInput.value) {
-      dirInput.value = home;
+    if (home) {
       NewSessionStore.updateAdvanced({ workingDir: home });
+      _renderContextBar();
     }
   }
 
-  function _updateInitProjectVisibility() {
-    const field = $("new-session-init-project-field");
-    if (!field) return;
-    const agent = NewSessionStore.currentAgent();
-    field.style.display = agent && agent.id === "coding" ? "block" : "none";
-  }
-
   function _updateSendButton() {
     const btn = $("new-session-send");
     const input = $("new-session-input");
     if (!btn || !input) return;
     const hasText = input.value.trim().length > 0;
     const hasFiles = _pendingImages.length > 0 || _pendingFiles.length > 0;
-    btn.disabled = (!hasText && !hasFiles) || NewSessionStore.state.creating;
+    const initProject = NewSessionStore.state.advanced.initProject === true;
+    btn.disabled = (!hasText && !hasFiles && !initProject) || NewSessionStore.state.creating;
   }
 
   // ── Attachments (image compression + generic file upload) ───────────────
@@ -494,15 +437,321 @@ const NewSessionView = (() => {
     return html;
   }
 
+
+  // ── Context bar (chips above the input) ──────────────────────────────────
+  // Shows: Agent · Model · Working Dir · Session Name (optional)
+  // Each chip opens a lightweight popover when clicked.
+
+  let _ctxPopoverDismiss = null;
+
+  function _dismissCtxPopover() {
+    if (_ctxPopoverDismiss) { _ctxPopoverDismiss(); _ctxPopoverDismiss = null; }
+  }
+
+  function _makeChip(iconSvg, label, onClick) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "ns-ctx-chip";
+
+    if (iconSvg) {
+      const icon = document.createElement("span");
+      icon.className = "ns-ctx-chip-icon";
+      icon.innerHTML = iconSvg;
+      chip.appendChild(icon);
+    }
+
+    const text = document.createElement("span");
+    text.className = "ns-ctx-chip-label";
+    text.textContent = label;
+    chip.appendChild(text);
+
+    chip.addEventListener("click", (e) => { e.stopPropagation(); onClick(chip); });
+    return chip;
+  }
+
+  function _showCtxPopover(anchor, buildFn) {
+    _dismissCtxPopover();
+
+    const pop = document.createElement("div");
+    pop.className = "ns-ctx-popover";
+    buildFn(pop);
+
+    const rect = anchor.getBoundingClientRect();
+    pop.style.position = "fixed";
+    pop.style.left = `${rect.left}px`;
+    pop.style.top  = `${rect.bottom + 6}px`;
+    document.body.appendChild(pop);
+
+    // Flip up if overflows viewport bottom
+    const popRect = pop.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - 8) {
+      pop.style.top = `${rect.top - popRect.height - 6}px`;
+    }
+
+    const dismiss = (e) => {
+      if (!pop.contains(e.target) && e.target !== anchor) {
+        pop.remove();
+        document.removeEventListener("mousedown", dismiss, true);
+        _ctxPopoverDismiss = null;
+      }
+    };
+    document.addEventListener("mousedown", dismiss, true);
+    _ctxPopoverDismiss = () => {
+      pop.remove();
+      document.removeEventListener("mousedown", dismiss, true);
+    };
+    return pop;
+  }
+
+  // ── Session name chip — custom modal dialog ──
+  // ── Session name chip — modal dialog (reuses standard modal classes) ──
+  function _openNamePopover(_anchor) {
+    const zh = _isZh();
+    const current = NewSessionStore.state.advanced.name || "";
+
+    return new Promise((resolve) => {
+      const overlay = document.createElement("div");
+      overlay.className = "modal-overlay";
+      overlay.innerHTML = `
+        <div class="modal-box sm">
+          <div class="modal-header">
+            <h3 class="modal-title">${zh ? "会话名称" : "Session Name"}</h3>
+          </div>
+          <div class="modal-body">
+            <div class="modal-field">
+              <label class="modal-label">
+                <span>${zh ? "名称" : "Name"}</span>
+              </label>
+              <input type="text" class="modal-input ns-name-modal-input"
+                     placeholder="${zh ? "留空自动生成" : "Leave empty to auto-generate"}"
+                     autocomplete="off" spellcheck="false"
+                     value="${_escHtml(current)}">
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn-secondary ns-name-modal-cancel">${zh ? "取消" : "Cancel"}</button>
+            <button type="button" class="btn-primary ns-name-modal-confirm">${zh ? "确定" : "OK"}</button>
+          </div>
+        </div>`;
+      document.body.appendChild(overlay);
+
+      const input   = overlay.querySelector(".ns-name-modal-input");
+      const cancel  = overlay.querySelector(".ns-name-modal-cancel");
+      const confirm = overlay.querySelector(".ns-name-modal-confirm");
+
+      setTimeout(() => { input.focus(); input.select(); }, 50);
+
+      const cleanup = (save) => {
+        overlay.remove();
+        if (save) {
+          NewSessionStore.updateAdvanced({ name: input.value.trim() });
+          _renderContextBar();
+        }
+        resolve(save ? input.value.trim() : null);
+      };
+
+      confirm.addEventListener("click", () => cleanup(true));
+      cancel.addEventListener("click",  () => cleanup(false));
+      overlay.addEventListener("click", (e) => { if (e.target === overlay) cleanup(false); });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter")  cleanup(true);
+        if (e.key === "Escape") cleanup(false);
+      });
+    });
+  }
+
+  // ── Project chip popover — list projects for selection ──
+  function _openProjectPopover(anchor) {
+    _showCtxPopover(anchor, (pop) => {
+      const zh = _isZh();
+      const projects = (typeof Projects !== "undefined" && Projects.all) ? Projects.all() : [];
+      const currentId = NewSessionStore.state.advanced.projectId;
+
+      if (!projects.length) {
+        const empty = document.createElement("div");
+        empty.className = "ns-ctx-popover-empty";
+        empty.textContent = zh ? "暂无项目" : "No projects";
+        pop.appendChild(empty);
+      } else {
+        projects.forEach((proj) => {
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "ns-ctx-popover-item" + (proj.id === currentId ? " active" : "");
+          const folderIcon = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><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>`;
+          item.innerHTML = folderIcon + `<span style="margin-left:6px">${_escHtml(proj.name)}</span>`;
+          item.style.display = "flex";
+          item.style.alignItems = "center";
+          item.addEventListener("click", () => {
+            const dir = proj.working_dir || NewSessionStore.state.defaultDir || "";
+            NewSessionStore.updateAdvanced({ projectId: proj.id, workingDir: dir });
+            _dismissCtxPopover();
+            _renderContextBar();
+          });
+          pop.appendChild(item);
+        });
+      }
+
+      // Separator + "No project" clear option
+      if (projects.length) {
+        const sep = document.createElement("div");
+        sep.style.cssText = "height:1px;background:var(--color-border-primary);margin:4px 8px";
+        pop.appendChild(sep);
+      }
+      const clearItem = document.createElement("button");
+      clearItem.type = "button";
+      clearItem.className = "ns-ctx-popover-item" + (!currentId ? " active" : "");
+      clearItem.textContent = zh ? "不选项目" : "No project";
+      clearItem.addEventListener("click", () => {
+        const defaultDir = NewSessionStore.state.defaultDir || "";
+        NewSessionStore.updateAdvanced({ projectId: null, workingDir: defaultDir });
+        _dismissCtxPopover();
+        _renderContextBar();
+      });
+      pop.appendChild(clearItem);
+    });
+  }
+
+  function _escHtml(str) {
+    return String(str || "")
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+
+  // ── Model chip popover ──
+  function _openModelPopover(anchor) {
+    _showCtxPopover(anchor, (pop) => {
+      const models = NewSessionStore.state.models || [];
+      const currentId = NewSessionStore.state.advanced.modelId;
+
+      if (!models.length) {
+        const empty = document.createElement("div");
+        empty.className = "ns-ctx-popover-empty";
+        empty.textContent = I18n.t("sessions.modal.model");
+        pop.appendChild(empty);
+        return;
+      }
+      models.forEach((m) => {
+        const isDefault = m.type === "default";
+        const modelName = m.model || m.id || "";
+
+        const item = document.createElement("button");
+        item.type = "button";
+        item.className = "ns-ctx-popover-item sib-model-option" + ((m.id || "") === currentId ? " active" : "");
+        item.style.cssText = "display:flex;align-items:center;justify-content:space-between;gap:0.5rem;";
+
+        const nameSpan = document.createElement("span");
+        nameSpan.textContent = modelName;
+        item.appendChild(nameSpan);
+
+        if (isDefault) {
+          const badge = document.createElement("span");
+          badge.className = "model-badge default";
+          badge.textContent = "default";
+          item.appendChild(badge);
+        }
+
+        item.addEventListener("click", () => {
+          NewSessionStore.updateAdvanced({ modelId: m.id || "" });
+          _dismissCtxPopover();
+          _renderContextBar();
+        });
+        pop.appendChild(item);
+      });
+    });
+  }
+
+  // ── Working dir chip popover ──
+  async function _openDirPopover(_anchor) {
+    const start = NewSessionStore.state.advanced.workingDir || "";
+    const picked = await window.openDirectoryPicker(start, null);
+    if (picked) {
+      NewSessionStore.updateAdvanced({ workingDir: picked });
+      _renderContextBar();
+    }
+  }
+
+  // ── Init project chip (coding agent only) — toggle directly ──
+  function _toggleInitProject(chip) {
+    const newVal = !NewSessionStore.state.advanced.initProject;
+    NewSessionStore.updateAdvanced({ initProject: newVal });
+    chip.classList.toggle("ns-ctx-chip--active", newVal);
+    _updateSendButton();
+  }
+
+  // ── Render context bar ──
+  function _renderContextBar() {
+    const bar = $("ns-context-bar");
+    if (!bar) return;
+    bar.innerHTML = "";
+
+    const zh = _isZh();
+    const agent = NewSessionStore.currentAgent();
+    const adv   = NewSessionStore.state.advanced;
+
+    // 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);
+
+    // Model chip — show selected model name from store (strip prefix/suffix for brevity)
+    let modelLabel = zh ? "模型" : "Model";
+    const modelId = adv.modelId;
+    if (modelId) {
+      const models = NewSessionStore.state.models || [];
+      const found = models.find((m) => (m.id || "") === modelId);
+      if (found) {
+        const raw = found.model || found.id || modelId;
+        modelLabel = raw.length > 28 ? raw.slice(0, 26) + "…" : raw;
+      }
+    }
+    const modelIcon = `<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="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></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="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 dirChip = _makeChip(dirIcon, dirShort || (zh ? "工作目录" : "Directory"), _openDirPopover);
+    if (!dirVal) dirChip.classList.add("ns-ctx-chip--muted");
+    bar.appendChild(dirChip);
+
+    // 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);
+    }
+  }
+
   async function _submit() {
     const input = $("new-session-input");
     if (!input) return;
     const content = input.value.trim();
     const hasFiles = _pendingImages.length > 0 || _pendingFiles.length > 0;
-    if (!content && !hasFiles) return;
-
-    const initCheckbox = $("new-session-init-project");
-    const initProject = initCheckbox && initCheckbox.checked;
+    const initProject = NewSessionStore.state.advanced.initProject === true;
+    // Allow empty input when initProject is checked — /new will be auto-sent.
+    if (!content && !hasFiles && !initProject) return;
 
     const btn = $("new-session-send");
     if (btn) btn.disabled = true;
@@ -515,11 +764,17 @@ const NewSessionView = (() => {
       return;
     }
 
+    // When initProject is selected, send /new as the first message so the
+    // coding agent triggers the new-project skill. If the user also typed
+    // something, append it as the project description.
+    const finalContent = initProject
+      ? (content ? `/new\n${content}` : "/new")
+      : content;
     const files = hasFiles ? _buildPendingFiles() : null;
-    const display = hasFiles ? _buildBubbleHtml(content) : null;
+    const display = hasFiles ? _buildBubbleHtml(finalContent) : null;
 
     Sessions.add(session);
-    Sessions.setPendingMessage(session.id, content, display, files);
+    Sessions.setPendingMessage(session.id, finalContent, display, files);
     input.value = "";
     _pendingImages.length = 0;
     _pendingFiles.length = 0;
@@ -540,7 +795,7 @@ const NewSessionView = (() => {
     NewSessionStore.on("newSession:agents-loaded", _renderAgents);
     NewSessionStore.on("newSession:selection-changed", () => {
       _renderAgents();
-      _updateInitProjectVisibility();
+      _renderContextBar();
     });
     NewSessionStore.on("newSession:creating", _updateSendButton);
 
@@ -602,73 +857,15 @@ const NewSessionView = (() => {
     const sendBtn = $("new-session-send");
     if (sendBtn) sendBtn.addEventListener("click", _submit);
 
-    const toggle = $("new-session-toggle-advanced");
-    const advanced = $("new-session-advanced");
-    if (toggle && advanced) {
-      toggle.addEventListener("click", async () => {
-        const open = advanced.hidden;
-        advanced.hidden = !open;
-        toggle.classList.toggle("is-open", open);
-        if (open) {
-          await _populateModels();
-          await _prefillDefaultDir();
-          requestAnimationFrame(() =>
-            advanced.scrollIntoView({ behavior: "smooth", block: "end" })
-          );
-        }
-        NewSessionStore.toggleAdvanced(open);
-      });
-    }
-
-    const nameInput = $("new-session-name");
-    if (nameInput) {
-      nameInput.addEventListener("input", (e) =>
-        NewSessionStore.updateAdvanced({ name: e.target.value })
-      );
-    }
-
-    const modelSelect = $("new-session-model");
-    if (modelSelect) {
-      modelSelect.addEventListener("change", (e) =>
-        NewSessionStore.updateAdvanced({ modelId: e.target.value })
-      );
-    }
-
-    const dirInput = $("new-session-directory");
-    if (dirInput) {
-      dirInput.addEventListener("input", (e) =>
-        NewSessionStore.updateAdvanced({ workingDir: e.target.value })
-      );
-    }
-
-    const browseBtn = $("new-session-browse-btn");
-    if (browseBtn && dirInput) {
-      browseBtn.addEventListener("click", async () => {
-        const start = dirInput.value.trim();
-        const picked = await window.openDirectoryPicker(start, null);
-        if (picked) {
-          dirInput.value = picked;
-          NewSessionStore.updateAdvanced({ workingDir: picked });
-        }
-      });
-    }
-
-    const initCheckbox = $("new-session-init-project");
-    if (initCheckbox) {
-      initCheckbox.addEventListener("change", (e) =>
-        NewSessionStore.updateAdvanced({ initProject: e.target.checked })
-      );
-    }
+    // Context bar: load models + default dir eagerly, then render chips
+    _populateModels().then(() => _renderContextBar());
+    _prefillDefaultDir().then(() => _renderContextBar());
   }
 
   async function onPanelShow() {
     _bindOnce();
-    if (NewSessionStore.state.agents.length === 0) {
-      await NewSessionStore.loadAgents();
-    } else {
-      _renderAgents();
-    }
-    _updateInitProjectVisibility();
+    await NewSessionStore.loadAgents();
+    _renderContextBar();
     _updateSendButton();
     const input = $("new-session-input");
     if (input) input.focus();

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

@@ -189,7 +189,7 @@ const SkillsView = (() => {
             <span class="${badgeClass}">${badgeLabel}</span>
             ${skill.invalid ? `<span class="skill-badge skill-badge-invalid">${I18n.t("skills.badge.invalid")}</span>` : ""}
           </div>
-          <div class="skill-card-desc">${escapeHtml(description)}</div>
+          <div class="skill-card-desc" data-tooltip="${escapeHtml(description)}" data-tooltip-pos="top" data-tooltip-overflow>${escapeHtml(description)}</div>
         </div>
         <div class="skill-card-actions">
           <label class="skill-toggle ${toggleDisabled ? "skill-toggle-disabled" : ""}" data-tooltip="${escapeHtml(toggleTitle)}">