openclacky 1.3.7 → 1.3.9

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

@@ -72,6 +72,23 @@ const NewSessionView = (() => {
       card.className = "agent-card" + (a.id === selected ? " agent-card--selected" : "");
       card.dataset.agentId = a.id;
 
+      const header = document.createElement("div");
+      header.className = "agent-card-header";
+
+      const avatar = document.createElement("div");
+      avatar.className = "agent-card-avatar";
+      if (a.avatar) {
+        const img = document.createElement("img");
+        img.src = a.avatar;
+        img.alt = "";
+        img.loading = "lazy";
+        avatar.appendChild(img);
+      } else {
+        avatar.classList.add("agent-card-avatar--fallback");
+        avatar.textContent = (_agentLabel(a) || "?").trim().charAt(0).toUpperCase();
+      }
+      header.appendChild(avatar);
+
       const title = document.createElement("div");
       title.className = "agent-card-title";
       title.textContent = _agentLabel(a);
@@ -81,7 +98,8 @@ const NewSessionView = (() => {
         isNew.textContent = "NEW";
         title.appendChild(isNew);
       }
-      card.appendChild(title);
+      header.appendChild(title);
+      card.appendChild(header);
 
       const descText = _agentDesc(a);
       if (descText) {
@@ -120,17 +138,45 @@ const NewSessionView = (() => {
     });
 
     _updatePlaceholder();
+    _renderAgentPanels();
+  }
+
+  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;
-    const agent = NewSessionStore.currentAgent();
-    const label = agent ? _agentLabel(agent) : "";
-    const tpl = I18n.t("sessions.new.placeholder");
-    input.placeholder = label
-      ? tpl.replace("{{agent}}", label)
-      : tpl.replace("{{agent}}", "");
+    input.placeholder = I18n.t("chat.input.placeholder");
   }
 
   async function _populateModels() {
@@ -185,14 +231,214 @@ const NewSessionView = (() => {
     const input = $("new-session-input");
     if (!btn || !input) return;
     const hasText = input.value.trim().length > 0;
-    btn.disabled = !hasText || NewSessionStore.state.creating;
+    const hasFiles = _pendingImages.length > 0 || _pendingFiles.length > 0;
+    btn.disabled = (!hasText && !hasFiles) || NewSessionStore.state.creating;
+  }
+
+  // ── Attachments (image compression + generic file upload) ───────────────
+  // A trimmed mirror of the chat composer's pipeline (sessions.js). New-session
+  // has no live session, so attachments are staged here and handed to the chat
+  // pipeline as a pending message once the session is created & subscribed.
+  const _pendingImages = [];
+  const _pendingFiles  = [];
+  let   _imageSeq      = 0;
+  const MAX_IMAGE_SIZE       = 5 * 1024 * 1024;
+  const MAX_IMAGE_BYTES_SEND = 512 * 1024;
+  const MAX_IMAGE_LONG_EDGE  = 1920;
+  const MAX_FILE_BYTES       = 32 * 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();
+      reader.onerror = () => reject(new Error("Failed to read image"));
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onerror = () => reject(new Error("Failed to decode image"));
+        img.onload = () => {
+          let { width, height } = img;
+          if (width > MAX_IMAGE_LONG_EDGE || height > MAX_IMAGE_LONG_EDGE) {
+            const ratio = Math.min(MAX_IMAGE_LONG_EDGE / width, MAX_IMAGE_LONG_EDGE / height);
+            width  = Math.round(width * ratio);
+            height = Math.round(height * ratio);
+          }
+          const canvas = document.createElement("canvas");
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(img, 0, 0, width, height);
+          const isPNG = file.type === "image/png";
+          if (isPNG) {
+            let dataUrl = canvas.toDataURL("image/png");
+            let scale = 0.9;
+            while (dataUrl.length * 0.75 > MAX_IMAGE_BYTES_SEND && scale > 0.3) {
+              const sw = Math.round(width * scale);
+              const sh = Math.round(height * scale);
+              canvas.width = sw;
+              canvas.height = sh;
+              ctx.drawImage(img, 0, 0, sw, sh);
+              dataUrl = canvas.toDataURL("image/png");
+              scale -= 0.1;
+            }
+            resolve(dataUrl);
+          } else {
+            let quality = 0.85;
+            let dataUrl = canvas.toDataURL("image/jpeg", quality);
+            while (dataUrl.length * 0.75 > MAX_IMAGE_BYTES_SEND && quality > 0.2) {
+              quality -= 0.1;
+              dataUrl = canvas.toDataURL("image/jpeg", quality);
+            }
+            resolve(dataUrl);
+          }
+        };
+        img.src = e.target.result;
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+
+  function _addImageFile(file) {
+    if (file.size > MAX_IMAGE_SIZE) {
+      alert(I18n.t("chat.file.imageTooLarge", { name: file.name, max: "5 MB" }));
+      return;
+    }
+    const seq = ++_imageSeq;
+    const ext = (file.name.split(".").pop() || "png").toLowerCase();
+    const displayName = `IMG_${String(seq).padStart(3, "0")}.${ext}`;
+    _compressImage(file)
+      .then((dataUrl) => {
+        _pendingImages.push({ dataUrl, name: displayName, mimeType: file.type === "image/png" ? "image/png" : "image/jpeg", seq });
+        _renderAttachmentPreviews();
+      })
+      .catch((err) => alert(I18n.t("chat.file.processFailed", { msg: err.message })));
+  }
+
+  function _addGenericFile(file) {
+    if (file.size > MAX_FILE_BYTES) {
+      alert(I18n.t("chat.file.tooLarge", { name: file.name, max: "32 MB" }));
+      return;
+    }
+    const formData = new FormData();
+    formData.append("file", file);
+    fetch("/api/upload", { method: "POST", body: formData })
+      .then((r) => r.json())
+      .then((data) => {
+        if (!data.ok) { alert(I18n.t("chat.file.uploadFailed", { msg: data.error })); return; }
+        _pendingFiles.push({ name: data.name, path: data.path, mime_type: file.type });
+        _renderAttachmentPreviews();
+      })
+      .catch((err) => alert(`Upload error: ${err.message}`));
+  }
+
+  function _addAttachmentFile(file) {
+    if (file && ACCEPTED_IMAGE_TYPES.includes(file.type)) _addImageFile(file);
+    else _addGenericFile(file);
+  }
+
+  function _renderAttachmentPreviews() {
+    const strip = $("ns-image-preview-strip");
+    if (!strip) return;
+    strip.innerHTML = "";
+    const hasContent = _pendingImages.length > 0 || _pendingFiles.length > 0;
+    strip.style.display = hasContent ? "flex" : "none";
+    _updateSendButton();
+    if (!hasContent) return;
+
+    _pendingImages.forEach((img, idx) => {
+      const item = document.createElement("div");
+      item.className = "img-preview-item";
+      item.title = img.name;
+      const thumbnail = document.createElement("img");
+      thumbnail.src = img.dataUrl;
+      thumbnail.alt = img.name;
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "img-preview-remove";
+      removeBtn.textContent = "✕";
+      removeBtn.title = "Remove";
+      removeBtn.addEventListener("click", () => { _pendingImages.splice(idx, 1); _renderAttachmentPreviews(); });
+      item.appendChild(thumbnail);
+      item.appendChild(removeBtn);
+      strip.appendChild(item);
+    });
+
+    _pendingFiles.forEach((f, idx) => {
+      const item = document.createElement("div");
+      item.className = "pdf-preview-item";
+      item.title = f.name;
+      const icon = document.createElement("div");
+      icon.className = "pdf-preview-icon";
+      icon.textContent = _docTypeIcon(f.mime_type, f.name);
+      const info = document.createElement("div");
+      info.className = "pdf-preview-info";
+      const name = document.createElement("div");
+      name.className = "pdf-preview-name";
+      name.textContent = f.name;
+      const typeLabel = document.createElement("div");
+      typeLabel.className = "pdf-preview-type";
+      typeLabel.textContent = (f.name.split(".").pop() || "file").toUpperCase();
+      info.appendChild(name);
+      info.appendChild(typeLabel);
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "pdf-preview-remove";
+      removeBtn.textContent = "✕";
+      removeBtn.title = "Remove";
+      removeBtn.addEventListener("click", () => { _pendingFiles.splice(idx, 1); _renderAttachmentPreviews(); });
+      item.appendChild(icon);
+      item.appendChild(info);
+      item.appendChild(removeBtn);
+      strip.appendChild(item);
+    });
+  }
+
+  function _buildPendingFiles() {
+    _pendingImages.sort((a, b) => a.seq - b.seq);
+    return [
+      ..._pendingImages.map((img) => ({ name: img.name, mime_type: img.mimeType || "image/jpeg", data_url: img.dataUrl })),
+      ..._pendingFiles.map((f) => ({ name: f.name, path: f.path, mime_type: f.mime_type })),
+    ];
+  }
+
+  function _buildBubbleHtml(content) {
+    let html = content ? escapeHtml(content) : "";
+    if (_pendingImages.length > 0) {
+      const thumbs = _pendingImages
+        .map((img) => `<img src="${img.dataUrl}" alt="${escapeHtml(img.name)}" class="msg-image-thumb">`)
+        .join("");
+      html = thumbs + (html ? "<br>" + html : "");
+    }
+    if (_pendingFiles.length > 0) {
+      const badges = _pendingFiles.map((f) => {
+        const icon = _docTypeIcon(f.mime_type, f.name);
+        const ext  = (f.name.split(".").pop() || "file").toUpperCase();
+        return `<span class="msg-pdf-badge"><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>`;
+      }).join(" ");
+      html = badges + (html ? "<br>" + html : "");
+    }
+    return html;
   }
 
   async function _submit() {
     const input = $("new-session-input");
     if (!input) return;
     const content = input.value.trim();
-    if (!content) return;
+    const hasFiles = _pendingImages.length > 0 || _pendingFiles.length > 0;
+    if (!content && !hasFiles) return;
 
     const initCheckbox = $("new-session-init-project");
     const initProject = initCheckbox && initCheckbox.checked;
@@ -208,9 +454,16 @@ const NewSessionView = (() => {
       return;
     }
 
+    const files = hasFiles ? _buildPendingFiles() : null;
+    const display = hasFiles ? _buildBubbleHtml(content) : null;
+
     Sessions.add(session);
-    Sessions.setPendingMessage(session.id, content);
+    Sessions.setPendingMessage(session.id, content, display, files);
     input.value = "";
+    _pendingImages.length = 0;
+    _pendingFiles.length = 0;
+    _imageSeq = 0;
+    _renderAttachmentPreviews();
     NewSessionStore.reset();
 
     // Hand off to the normal chat pipeline: this switches the panel, wires
@@ -233,11 +486,55 @@ const NewSessionView = (() => {
     const input = $("new-session-input");
     if (input) {
       input.addEventListener("input", _updateSendButton);
-      input.addEventListener("keydown", (e) => {
-        if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
-          e.preventDefault();
-          _submit();
+      // Enter-to-send + slash-command navigation are owned by SkillAC.attach().
+    }
+
+    // Slash-command skill autocomplete for this composer (mirrors chat).
+    if (typeof SkillAC !== "undefined" && input) {
+      SkillAC.attach({
+        input:     "new-session-input",
+        dropdown:  "ns-skill-autocomplete",
+        list:      "ns-skill-autocomplete-list",
+        slashBtn:  "ns-btn-slash",
+        systemChk: "ns-chk-ac-show-system-skills",
+        fetchSkills: async () => {
+          const agent = NewSessionStore.currentAgent();
+          if (!agent) return [];
+          return NewSessionStore.fetchSkillsForAgent(agent.id);
+        },
+        onSend: _submit,
+      });
+    }
+
+    // Attachments: attach button → file picker, drag-drop, paste.
+    const fileInput = $("ns-file-input");
+    const attachBtn = $("ns-btn-attach");
+    if (attachBtn && fileInput) {
+      attachBtn.addEventListener("click", () => fileInput.click());
+      fileInput.addEventListener("change", (e) => {
+        Array.from(e.target.files).forEach(_addAttachmentFile);
+        e.target.value = "";
+      });
+    }
+    if (input) {
+      input.addEventListener("paste", (e) => {
+        const items = (e.clipboardData && e.clipboardData.items) || [];
+        let handled = false;
+        for (const it of items) {
+          if (it.kind === "file") {
+            const file = it.getAsFile();
+            if (file) { _addAttachmentFile(file); handled = true; }
+          }
         }
+        if (handled) e.preventDefault();
+      });
+    }
+    const composer = document.querySelector("#welcome .new-session-composer");
+    if (composer) {
+      composer.addEventListener("dragover", (e) => { e.preventDefault(); });
+      composer.addEventListener("drop", (e) => {
+        e.preventDefault();
+        Array.from(e.dataTransfer.files || []).forEach(_addAttachmentFile);
       });
     }
 
@@ -254,6 +551,9 @@ const NewSessionView = (() => {
         if (open) {
           await _populateModels();
           await _prefillDefaultDir();
+          requestAnimationFrame(() =>
+            advanced.scrollIntoView({ behavior: "smooth", block: "end" })
+          );
         }
         NewSessionStore.toggleAdvanced(open);
       });

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

@@ -77,12 +77,8 @@ const TrashView = (() => {
 
   function _load() {
     if (_activeTab === "file-trash") {
-      const list = $("trash-list");
-      if (list) list.innerHTML = `<div class="trash-loading">${_t("trash.loading")}</div>`;
       Trash.loadFiles();
     } else {
-      const list = $("trash-session-list");
-      if (list) list.innerHTML = `<div class="creator-loading">${_t("trash.loading")}</div>`;
       Trash.loadSessions();
     }
   }
@@ -182,7 +178,8 @@ const TrashView = (() => {
   // ── Session trash rendering ──────────────────────────────────────────
 
   function _renderSkeleton() {
-    const list = $("trash-session-list");
+    const isSession = _activeTab === "session-trash";
+    const list = $(isSession ? "trash-session-list" : "trash-list");
     if (!list) return;
     let html = "";
     for (let i = 0; i < 3; i++) {
@@ -425,6 +422,8 @@ const TrashView = (() => {
   }
 
   function _subscribe() {
+    Trash.on("trash:filesLoading",    _renderSkeleton);
+    Trash.on("trash:sessionsLoading", _renderSkeleton);
     Trash.on("trash:filesChanged",    _renderFiles);
     Trash.on("trash:sessionsChanged", _renderSessions);
     Trash.on("trash:filesError", (e) => {

data/lib/clacky/web/i18n.js

@@ -136,6 +136,23 @@ const I18n = (() => {
       "workspace.revealInFinder": "Reveal in Finder",
       "workspace.revealFailed":   "Failed to reveal file",
       "changes.tab":              "Git",
+      "changes.loading":          "Loading changes…",
+      "changes.error":            "Failed to load changes",
+      "changes.noRepo":           "This project has no version control enabled.",
+      "changes.cleanTitle":       "No changes",
+      "changes.changedPre":       "AI changed ",
+      "changes.filesUnit":        "file(s)",
+      "changes.sub":              "Managed by Git · since last snapshot",
+      "changes.branchPre":        "Current branch: ",
+      "changes.clean":            "Working tree is clean — no unsaved changes.",
+      "changes.tag.add":          "Added",
+      "changes.tag.mod":          "Modified",
+      "changes.tag.del":          "Deleted",
+      "changes.save.prefix":      "Manual snapshot",
+      "changes.save.btn":         "Save snapshot",
+      "changes.save.saving":      "Saving…",
+      "changes.save.done":        "Saved — restore it from History",
+      "changes.save.failed":      "Save failed",
       "tm.tab":                   "History",
       "sib.model.tooltip":       "Click to switch model",
       "sib.model.tooltip.busy":  "Model switching is disabled while the agent is responding",
@@ -496,6 +513,8 @@ const I18n = (() => {
       "extensions.sort.newest":   "Newest",
       "extensions.sort.updated":  "Recently updated",
       "extensions.sort.downloads": "Most downloaded",
+      "extensions.filter.all":       "All",
+      "extensions.filter.installed": "Installed",
       "extensions.empty":         "No extensions available yet.",
       "extensions.noResults":     "No extensions match your search.",
       "extensions.loadFailed":    "Could not reach the extension store.",
@@ -517,10 +536,12 @@ const I18n = (() => {
       "extensions.section.panels":     "Panels",
       "extensions.section.api":        "APIs",
       "extensions.disabled":               "Disabled",
+      "extensions.action.install":         "Install",
+      "extensions.action.installing":      "Installing…",
       "extensions.action.disable":         "Disable",
       "extensions.action.enable":          "Enable",
       "extensions.action.remove":          "Remove",
-      "extensions.action.removeConfirm":   "Remove this extension? Its files will be deleted. You can reinstall it from your license package later.",
+      "extensions.action.removeConfirm":   "Remove this extension? Its files will be deleted. You can reinstall it later.",
       "mcp.loading":              "Loading…",
       "mcp.empty.title":          "No MCP servers configured",
       "mcp.empty.body":           "Create ~/.clacky/mcp.json to plug in MCP servers. The format matches Claude Desktop and Cursor, so existing configs work as-is.",
@@ -1077,6 +1098,23 @@ const I18n = (() => {
       "workspace.revealInFinder": "打开所在文件夹",
       "workspace.revealFailed":   "无法打开文件位置",
       "changes.tab":              "Git 管理",
+      "changes.loading":          "正在读取改动…",
+      "changes.error":            "读取改动失败",
+      "changes.noRepo":           "这个项目还没有启用版本管理。",
+      "changes.cleanTitle":       "暂无改动",
+      "changes.changedPre":       "AI 改了 ",
+      "changes.filesUnit":        "个文件",
+      "changes.sub":              "由 Git 管理 · 自上次存档以来",
+      "changes.branchPre":        "当前分支：",
+      "changes.clean":            "工作区是干净的，没有未存档的改动。",
+      "changes.tag.add":          "新增",
+      "changes.tag.mod":          "修改",
+      "changes.tag.del":          "删除",
+      "changes.save.prefix":      "手动存档",
+      "changes.save.btn":         "存档当前版本",
+      "changes.save.saving":      "正在存档…",
+      "changes.save.done":        "已存档，可在「时光机」里回到这个版本",
+      "changes.save.failed":      "存档失败",
       "tm.tab":                   "时光机",
       "sib.model.tooltip":       "点击切换模型",
       "sib.model.tooltip.busy":  "Agent 回复中，暂时无法切换模型",
@@ -1436,6 +1474,8 @@ const I18n = (() => {
       "extensions.sort.newest":   "最新",
       "extensions.sort.updated":  "最近更新",
       "extensions.sort.downloads": "下载最多",
+      "extensions.filter.all":       "全部",
+      "extensions.filter.installed": "已安装",
       "extensions.empty":         "暂无可用扩展。",
       "extensions.noResults":     "没有匹配的扩展。",
       "extensions.loadFailed":    "无法连接扩展市场。",
@@ -1457,10 +1497,12 @@ const I18n = (() => {
       "extensions.section.panels":     "面板",
       "extensions.section.api":        "API",
       "extensions.disabled":               "已禁用",
+      "extensions.action.install":         "安装",
+      "extensions.action.installing":      "安装中…",
       "extensions.action.disable":         "禁用",
       "extensions.action.enable":          "启用",
       "extensions.action.remove":          "移除",
-      "extensions.action.removeConfirm":   "确定移除此扩展？相关文件会被删除，之后可从授权包重新安装。",
+      "extensions.action.removeConfirm":   "确定移除此扩展？相关文件会被删除，之后可重新安装。",
       "mcp.loading":              "加载中…",
       "mcp.empty.title":          "尚未配置 MCP 服务",
       "mcp.empty.body":           "新建 ~/.clacky/mcp.json 即可接入 MCP 服务。格式与 Claude Desktop、Cursor 一致，现有配置可直接复用。",

data/lib/clacky/web/index.html

@@ -311,11 +311,15 @@
     <!-- New Session page (default landing view; hash: #new or empty) -->
     <div id="welcome" class="centered new-session-page">
       <div class="new-session-inner">
+       <div class="new-session-body">
         <h2 class="new-session-title" data-i18n="sessions.new.title">Start a new session</h2>
         <p class="new-session-subtitle" data-i18n="sessions.new.subtitle">Pick who you want to chat with, then type your first message.</p>
 
         <div id="new-session-agents" class="new-session-agents"></div>
 
+        <!-- Panels the selected agent exposes (filled when an agent is picked) -->
+        <div id="new-session-agent-panels" class="new-session-agent-panels" style="display:none"></div>
+
         <div class="new-session-advanced-wrap">
           <button id="new-session-toggle-advanced" class="new-session-advanced-toggle" type="button" aria-expanded="false">
             <span data-i18n="sessions.new.moreOptions">More options</span>
@@ -356,16 +360,43 @@
             </div>
           </div>
         </div>
+       </div><!-- /.new-session-body -->
 
         <div class="new-session-composer">
-          <textarea id="new-session-input"
-                    class="new-session-textarea"
-                    rows="3"
-                    data-i18n-placeholder="sessions.new.placeholder"
-                    placeholder="Type your first message and press Enter…"></textarea>
-          <div class="new-session-composer-actions">
-            <button id="new-session-send" class="new-session-send" type="button" disabled>
-              <span data-i18n="sessions.new.send">Send</span>
+          <!-- Skill autocomplete dropdown (shown when user types /xxx) -->
+          <div id="ns-skill-autocomplete" class="skill-autocomplete" style="display:none" role="listbox" aria-label="Skills">
+            <div class="skill-ac-header-row">
+              <div class="skill-ac-left">
+                <div class="skill-ac-title" data-i18n="sidebar.skills">Skills</div>
+                <label class="skill-ac-filter-toggle">
+                  <input type="checkbox" id="ns-chk-ac-show-system-skills">
+                  <span class="skill-ac-toggle-track"></span>
+                  <span class="skill-ac-filter-label" data-i18n="skills.filter.showSystemShort">System</span>
+                </label>
+              </div>
+            </div>
+            <div id="ns-skill-autocomplete-list"></div>
+          </div>
+          <!-- Attachment preview strip (hidden when empty) -->
+          <div id="ns-image-preview-strip" style="display:none"></div>
+          <div id="ns-input-bar" class="new-session-input-bar">
+            <input type="file" id="ns-file-input" accept="*/*" multiple style="display:none">
+            <button id="ns-btn-attach" type="button" class="new-session-composer-btn"
+                    title="Attach file (image, pdf, docx, md, tar.gz…) — drag & drop / Ctrl+V also work">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.41 17.41a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
+              </svg>
+            </button>
+            <button id="ns-btn-slash" type="button" class="new-session-composer-btn" title="Insert skill command (/)">
+              <span>/</span>
+            </button>
+            <textarea id="new-session-input"
+                      class="new-session-textarea"
+                      rows="1"
+                      data-i18n-placeholder="chat.input.placeholder"
+                      placeholder="Message… (Enter to send, Shift+Enter for newline)"></textarea>
+            <button id="new-session-send" class="new-session-send" type="button" title="Send message" disabled>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
             </button>
           </div>
         </div>
@@ -404,6 +435,8 @@
       <div id="new-message-banner" class="new-message-banner" style="display:none">
         <span data-i18n="chat.newMessageHint">New messages ↓</span>
       </div>
+      <!-- Composer slot: agent-scoped controls above the session info bar. -->
+      <div id="ext-slot-session-composer" class="session-composer" data-slot="session.composer"></div>
       <!-- Session info bar — mirrors CLI bottom status bar -->
       <div id="session-info-bar" style="display:none">
         <!-- Order: status | id | dir | model | mode | tasks | cost -->
@@ -448,8 +481,7 @@
         </span>
       </div>
 
-      <!-- Composer slot: agent-scoped controls just above the input bar. -->
-      <div id="ext-slot-session-composer" class="session-composer" data-slot="session.composer"></div>
+      <!-- Composer slot: moved above the session info bar. -->
       <div id="input-area">
         <div id="ws-disconnect-hint" style="display:none"></div>
         <!-- Skill autocomplete dropdown (shown when user types /xxx) -->
@@ -630,12 +662,18 @@
         </div>
 
         <div class="extensions-toolbar">
-          <input type="text" id="extensions-search-input" class="extensions-search" placeholder="Search extensions…" />
-          <select id="extensions-sort" class="extensions-sort">
-            <option value="newest" data-i18n="extensions.sort.newest">Newest</option>
-            <option value="updated" data-i18n="extensions.sort.updated">Recently updated</option>
-            <option value="downloads" data-i18n="extensions.sort.downloads">Most downloaded</option>
-          </select>
+          <div class="extensions-filter-tabs">
+            <button type="button" class="extensions-filter-tab extensions-filter-tab-active" data-filter="all" data-i18n="extensions.filter.all">All</button>
+            <button type="button" class="extensions-filter-tab" data-filter="installed" data-i18n="extensions.filter.installed">Installed</button>
+          </div>
+          <div class="extensions-toolbar-right">
+            <input type="text" id="extensions-search-input" class="extensions-search" placeholder="Search extensions…" />
+            <select id="extensions-sort" class="extensions-sort">
+              <option value="newest" data-i18n="extensions.sort.newest">Newest</option>
+              <option value="updated" data-i18n="extensions.sort.updated">Recently updated</option>
+              <option value="downloads" data-i18n="extensions.sort.downloads">Most downloaded</option>
+            </select>
+          </div>
         </div>
 
         <div id="extensions-warning" class="brand-skills-warning" style="display:none"></div>

data/lib/clacky/web/sessions.js

@@ -3989,9 +3989,9 @@ const Sessions = (() => {
       return id;
     },
 
-    /** Register a slash-command message to send after subscribe is confirmed. */
-    setPendingMessage(sessionId, content, display = null) {
-      _pendingMessage = { session_id: sessionId, content, display };
+    /** Register a message (optionally with attachments) to send after subscribe is confirmed. */
+    setPendingMessage(sessionId, content, display = null, files = null) {
+      _pendingMessage = { session_id: sessionId, content, display, files };
     },
 
     /** Consume and return the pending message (clears it). */