claude-simple 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-simple",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "bin": {
     "claude-simple": "server.js",

package/public/chat.js

@@ -3,7 +3,7 @@ import { watch, delegate, esc, $ } from './lib.js';
 import { ctx, isProcessing, currentProject, currentTab, currentModel, currentEffort, currentPermission,
          currentAgent, setAgent, AGENT_LABELS, getDefaultModel, getModelsForAgent, getEffortsForModel,
          addCustomModel, chatDensity, wsStatus } from './state.js';
-import { sendWs, api, flushWsQueue, clearWsQueue } from './api.js';
+import { sendWs, api, authHeaders, flushWsQueue, clearWsQueue } from './api.js';
 import { initWakeLock, setWakeLockDesired } from './wake-lock.js';
 
 function assistantLabel() {
@@ -706,6 +706,7 @@ export function sendMessage() {
     input.value = '';
     autoResize(input);
     updateInputMode('');
+    clearPendingAttachments();
     appendSystemMsg(`已排队下一条，当前回复结束后发送：${text.length > 80 ? text.slice(0, 80) + '…' : text}`);
     return;
   }
@@ -713,6 +714,7 @@ export function sendMessage() {
   input.value = '';
   autoResize(input);
   updateInputMode('');
+  clearPendingAttachments();
 
   if (text.startsWith('/')) {
     if (handleSlashCommand(text)) {
@@ -899,74 +901,195 @@ export function appendMsg(role, _label, text, opts = {}) {
 
 export function appendSystemMsg(text) { appendMsg('system', '', text); }
 
-async function uploadImageBlob(blob, filename) {
+/** Pending chat attachments shown above the input (paths also inserted into text). */
+const pendingAttachments = [];
+let attachSeq = 0;
+let chatDropBound = false;
+
+async function uploadChatBlob(blob, filename) {
+  const name = filename || `upload-${Date.now()}`;
+  const headers = authHeaders({ 'x-filename': name });
+  delete headers['Content-Type'];
+  // Prefer file MIME so hub base64-encodes binary uploads correctly.
+  if (blob?.type && !headers['Content-Type'] && !headers['content-type']) {
+    headers['Content-Type'] = blob.type;
+  }
   const res = await fetch('/api/upload-image', {
     method: 'POST',
-    headers: { Authorization: `Bearer ${ctx.token}`, 'x-filename': filename },
+    headers,
     body: blob,
   });
-  if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
-  return (await res.json()).path;
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.error || `Upload failed: ${res.status}`);
+  }
+  const data = await res.json();
+  if (!data?.path) throw new Error('upload returned no path');
+  return data.path;
 }
 
 function insertAtCursor(ta, text) {
-  const s = ta.selectionStart, e = ta.selectionEnd;
-  ta.value = ta.value.slice(0, s) + text + ta.value.slice(e);
-  ta.selectionStart = ta.selectionEnd = s + text.length;
+  if (!ta) return;
+  const s = ta.selectionStart ?? ta.value.length;
+  const e = ta.selectionEnd ?? ta.value.length;
+  const padBefore = s > 0 && ta.value[s - 1] !== '\n' ? '\n' : '';
+  const insert = padBefore + text + '\n';
+  ta.value = ta.value.slice(0, s) + insert + ta.value.slice(e);
+  ta.selectionStart = ta.selectionEnd = s + insert.length;
   ta.dispatchEvent(new Event('input'));
 }
 
+function isImageFile(file) {
+  if (!file) return false;
+  if (file.type && file.type.startsWith('image/')) return true;
+  return /\.(png|jpe?g|gif|webp|bmp|svg|heic|heif|avif)$/i.test(file.name || '');
+}
+
+function makeAttachRef(file, path) {
+  const name = file?.name || path.split('/').pop() || 'file';
+  if (isImageFile(file)) {
+    attachSeq += 1;
+    const label = `img${attachSeq}`;
+    return { ref: `![${label}](${path})`, label, kind: 'image' };
+  }
+  attachSeq += 1;
+  const label = `file${attachSeq}`;
+  return { ref: `[${label}](${path})`, label, kind: 'file' };
+}
+
+function clearPendingAttachments() {
+  for (const item of pendingAttachments) {
+    if (item.previewUrl) {
+      try { URL.revokeObjectURL(item.previewUrl); } catch { /* ignore */ }
+    }
+  }
+  pendingAttachments.length = 0;
+  renderAttachBar();
+}
+
+function renderAttachBar() {
+  const bar = $('chat-attach-bar');
+  if (!bar) return;
+  if (!pendingAttachments.length) {
+    bar.classList.add('hidden');
+    bar.innerHTML = '';
+    return;
+  }
+  bar.classList.remove('hidden');
+  bar.innerHTML = pendingAttachments.map((item, i) => `
+    <div class="chat-thumb relative" title="${esc(item.ref || item.path)}">
+      ${item.previewUrl
+        ? `<img src="${item.previewUrl}" alt="${esc(item.label || 'img')}">`
+        : `<span class="chat-thumb-path">${esc(item.label || item.name || 'file')}</span>`}
+      <span class="chat-thumb-label">${esc(item.label || item.kind || '')}</span>
+      <button type="button" class="chat-thumb-x" data-rm-attach="${i}" aria-label="remove">✕</button>
+    </div>`).join('');
+}
+
+async function addChatAttachment(file) {
+  if (!file) return;
+  const name = file.name || `upload-${Date.now()}`;
+  const path = await uploadChatBlob(file, name);
+  const { ref, label, kind } = makeAttachRef(file, path);
+  let previewUrl = '';
+  if (kind === 'image') {
+    try { previewUrl = URL.createObjectURL(file); } catch { /* ignore */ }
+  }
+  pendingAttachments.push({ path, ref, label, kind, name, previewUrl });
+  renderAttachBar();
+  insertAtCursor($('chat-input'), ref);
+  return path;
+}
+
+async function uploadFilesList(fileList) {
+  const files = [...(fileList || [])].filter(Boolean);
+  if (!files.length) return;
+  const ta = $('chat-input');
+  if (ta) ta.disabled = true;
+  try {
+    for (const file of files) {
+      try {
+        await addChatAttachment(file);
+      } catch (err) {
+        appendSystemMsg(`上传失败 ${file.name || 'file'}: ${err.message}`);
+      }
+    }
+  } finally {
+    if (ta) {
+      ta.disabled = false;
+      ta.focus();
+    }
+  }
+}
+
+/** Open file picker (images + any files). */
+export function attachImage() {
+  const input = $('chat-file-input');
+  if (input) {
+    input.value = '';
+    input.click();
+    return;
+  }
+  const fallback = document.createElement('input');
+  fallback.type = 'file';
+  fallback.accept = 'image/*,*/*';
+  fallback.multiple = true;
+  fallback.addEventListener('change', () => uploadFilesList(fallback.files));
+  fallback.click();
+}
+
 export function initImagePaste() {
   document.addEventListener('paste', async e => {
     const ta = $('chat-input');
-    if (!ta || document.activeElement !== ta) return;
+    if (!ta) return;
+    // Accept paste when focusing input, or when composer is active
+    const composer = $('chat-composer');
+    const inComposer = composer && (composer.contains(document.activeElement) || document.activeElement === ta);
+    if (!inComposer && document.activeElement !== ta) return;
+
     const items = [...(e.clipboardData?.items || [])];
-    const imageItem = items.find(i => i.type.startsWith('image/'));
-    if (!imageItem) return;
-    e.preventDefault();
-    const blob = imageItem.getAsFile();
-    const ext  = imageItem.type.split('/')[1] || 'png';
-    const name = `paste-${Date.now()}.${ext}`;
-    ta.disabled = true;
-    try {
-      const path = await uploadImageBlob(blob, name);
-      insertAtCursor(ta, `![${name}](${path})`);
-    } catch (err) {
-      appendSystemMsg(`Image paste failed: ${err.message}`);
-    } finally {
-      ta.disabled = false;
-      ta.focus();
+    const files = [];
+    for (const it of items) {
+      if (it.kind === 'file') {
+        const f = it.getAsFile();
+        if (f) files.push(f);
+      }
     }
+    // Prefer image paste; also allow non-image files from clipboard when present
+    const imageFiles = files.filter(f => isImageFile(f));
+    const pick = imageFiles.length ? imageFiles : files;
+    if (!pick.length) return;
+    e.preventDefault();
+    await uploadFilesList(pick);
   });
-}
 
-export function attachImage() {
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = 'image/*';
-  input.multiple = true;
-  input.addEventListener('change', async () => {
-    for (const file of input.files) {
-      appendSystemMsg(`Uploading ${file.name}…`);
-      try {
-        const res = await fetch('/api/upload-image', {
-          method: 'POST',
-          headers: { Authorization: `Bearer ${ctx.token}`, 'x-filename': file.name },
-          body: file,
-        });
-        const { path } = await res.json();
-        // Insert path reference into chat input
-        const ta = $('chat-input');
-        if (ta) {
-          ta.value += (ta.value ? '\n' : '') + path;
-          ta.dispatchEvent(new Event('input'));
-          ta.focus();
-        }
-        appendSystemMsg(`📎 ${path}`);
-      } catch (e) { appendSystemMsg(`Upload failed: ${e.message}`); }
+  if (chatDropBound) return;
+  chatDropBound = true;
+  document.addEventListener('dragover', e => {
+    const composer = $('chat-composer');
+    if (!composer || !e.dataTransfer?.types?.includes('Files')) return;
+    if (!composer.contains(e.target) && e.target !== composer) return;
+    e.preventDefault();
+    composer.classList.add('chat-drop-active');
+  });
+  document.addEventListener('dragleave', e => {
+    const composer = $('chat-composer');
+    if (!composer) return;
+    if (e.target === composer || composer.contains(e.target)) {
+      // leaving to outside
+      if (!composer.contains(e.relatedTarget)) composer.classList.remove('chat-drop-active');
     }
   });
-  input.click();
+  document.addEventListener('drop', async e => {
+    const composer = $('chat-composer');
+    if (!composer) return;
+    composer.classList.remove('chat-drop-active');
+    if (!composer.contains(e.target) && e.target !== composer) return;
+    const files = [...(e.dataTransfer?.files || [])];
+    if (!files.length) return;
+    e.preventDefault();
+    await uploadFilesList(files);
+  });
 }
 
 function fmtNum(n) { return n >= 1000 ? `${(n/1000).toFixed(1)}k` : String(n); }
@@ -1315,6 +1438,34 @@ export function initChat() {
   });
   delegate.on('input',   '#chat-input', (e, el) => { autoResize(el); updateInputMode(el.value); });
 
+  // Attach images / files
+  delegate.on('click', '#btn-attach', e => {
+    e.preventDefault();
+    attachImage();
+  });
+  delegate.on('change', '#chat-file-input', (e, el) => {
+    const files = el?.files;
+    if (files?.length) uploadFilesList(files);
+    if (el) el.value = '';
+  });
+  delegate.on('click', '[data-rm-attach]', (e, el) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const i = parseInt(el.dataset.rmAttach, 10);
+    if (Number.isNaN(i) || i < 0 || i >= pendingAttachments.length) return;
+    const item = pendingAttachments[i];
+    if (item?.previewUrl) {
+      try { URL.revokeObjectURL(item.previewUrl); } catch { /* ignore */ }
+    }
+    const ta = $('chat-input');
+    if (ta && item?.ref) {
+      ta.value = ta.value.split(item.ref).join('').replace(/\n{3,}/g, '\n\n');
+      ta.dispatchEvent(new Event('input'));
+    }
+    pendingAttachments.splice(i, 1);
+    renderAttachBar();
+  });
+
   // Permission buttons → approval.respond (typed control plane)
   delegate.on('click', '[data-perm-id]', (e, el) => {
     sendWs({

package/public/index.html

@@ -65,10 +65,10 @@
   <script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
   <link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/highlight.min.js"></script>
-  <link rel="stylesheet" href="style.css?v=ui-8">
+  <link rel="stylesheet" href="style.css?v=ui-9">
 </head>
 <body class="h-dvh overflow-hidden flex flex-col bg-base-100 text-base-content">
   <div id="root" class="flex flex-col flex-1 overflow-hidden"></div>
-  <script type="module" src="app.js?v=ui-8"></script>
+  <script type="module" src="app.js?v=ui-9"></script>
 </body>
 </html>

package/public/shell/dashboard.js

@@ -266,7 +266,70 @@ export function updateRecentSessionsList(sessions) {
 }
 
 export function closeRecentMenu() {
-  $('recent-menu')?.classList.add('hidden');
+  const menu = $('recent-menu');
+  if (menu) {
+    menu.classList.add('hidden');
+    menu.classList.remove('recent-menu-open');
+    // clear inline placement for next open
+    menu.style.top = '';
+    menu.style.left = '';
+    menu.style.right = '';
+    menu.style.width = '';
+    menu.style.maxHeight = '';
+  }
+  $('recent-menu-backdrop')?.classList.add('hidden');
+}
+
+/**
+ * Place the panel under the topbar with position:fixed so it is never clipped
+ * by #app / #topbar overflow (the previous top-full + fixed combo put it
+ * below the viewport on phones — looked like “no response”).
+ */
+export function positionRecentMenu() {
+  const menu = $('recent-menu');
+  const topbar = $('topbar');
+  if (!menu || !topbar) return;
+  const rect = topbar.getBoundingClientRect();
+  const gap = 6;
+  const top = Math.round(rect.bottom + gap);
+  const side = window.matchMedia('(max-width: 640px)').matches ? 8 : null;
+  menu.style.top = `${top}px`;
+  if (side != null) {
+    menu.style.left = `${side}px`;
+    menu.style.right = `${side}px`;
+  } else {
+    // desktop: align under the “最近” button when possible
+    const btn = $('btn-recent-sessions');
+    const br = btn?.getBoundingClientRect();
+    if (br) {
+      const width = Math.min(320, window.innerWidth - 16);
+      let left = br.left;
+      if (left + width > window.innerWidth - 8) left = window.innerWidth - width - 8;
+      if (left < 8) left = 8;
+      menu.style.left = `${Math.round(left)}px`;
+      menu.style.right = 'auto';
+      menu.style.width = `${width}px`;
+    }
+  }
+  const maxH = Math.max(160, window.innerHeight - top - 12);
+  menu.style.maxHeight = `${Math.min(maxH, Math.round(window.innerHeight * 0.7))}px`;
+}
+
+export function openRecentMenu(sessions) {
+  const menu = $('recent-menu');
+  if (!menu) return;
+  renderRecentSessionsMenu(sessions ?? getDashboardSessions());
+  menu.classList.remove('hidden');
+  menu.classList.add('recent-menu-open');
+  positionRecentMenu();
+  $('recent-menu-backdrop')?.classList.remove('hidden');
+}
+
+export function toggleRecentMenu(sessions) {
+  const menu = $('recent-menu');
+  if (!menu) return;
+  if (menu.classList.contains('hidden')) openRecentMenu(sessions);
+  else closeRecentMenu();
 }
 
 /** Topbar quick-jump: last N sessions by updatedAt. */

package/public/shell/templates.js

@@ -61,24 +61,15 @@ export const AppShell = (opts = {}) => {
         </div>
       </div>
       <div id="recent-menu-wrap" class="relative flex-shrink-0">
-        <button type="button" id="btn-recent-sessions" class="btn btn-ghost btn-xs border border-base-300 gap-1"
-                title="最近会话 / 快速跳转">
+        <button type="button" id="btn-recent-sessions" class="btn btn-ghost btn-xs border border-base-300 gap-1 min-h-8 px-2"
+                title="最近会话 / 快速跳转" aria-haspopup="listbox" aria-expanded="false">
           <span>最近</span>
           <span class="text-[10px] opacity-50">▾</span>
         </button>
-        <div id="recent-menu" class="hidden absolute left-0 top-full mt-1 z-50 w-80 max-h-[min(24rem,70vh)] overflow-y-auto
-             rounded-lg border border-base-300 bg-base-100 shadow-xl p-2">
-          <div class="flex items-center justify-between px-1 pb-1.5 mb-1 border-b border-base-300 sticky top-0 bg-base-100 z-[1]">
-            <span class="text-[10px] uppercase tracking-wide text-base-content/45 font-semibold">Recent sessions</span>
-            <span id="recent-menu-count" class="text-[10px] text-base-content/35 font-mono"></span>
-          </div>
-          <div id="recent-menu-list" class="flex flex-col gap-0.5"></div>
-          <p id="recent-menu-empty" class="text-xs text-base-content/40 px-1 py-2 hidden">暂无最近会话</p>
-        </div>
       </div>
       <span id="topbar-project" class="text-sm text-base-content/50 flex-1 truncate min-w-0">Select a session</span>
       <span id="conn-dot" class="w-2 h-2 rounded-full bg-base-content/30 flex-shrink-0" title="连接状态"></span>
-      <div class="flex gap-2">
+      <div class="flex gap-2 topbar-actions">
         <button id="btn-refresh-conn" class="btn btn-ghost btn-xs border border-base-300" title="重新连接并同步">↻</button>
         <button id="btn-pwa-install" class="btn btn-ghost btn-xs border border-base-300 hidden" title="安装到主屏幕">安装</button>
         <button id="btn-meta-agent"  class="btn btn-ghost btn-xs border border-primary/40 text-primary" title="Meta Agent — 报告 / 问答 / VLM">✦ Agent</button>
@@ -88,6 +79,18 @@ export const AppShell = (opts = {}) => {
         <button id="btn-logout"      class="btn btn-ghost btn-xs border border-base-300">Sign out</button>
       </div>
     </div>
+    <!-- Fixed panel + backdrop: siblings of topbar so flex layout never clips them -->
+    <div id="recent-menu-backdrop" class="hidden fixed inset-0 z-[55] bg-black/40" aria-hidden="true"></div>
+    <div id="recent-menu" class="hidden fixed z-[60] w-80 max-h-[min(24rem,70vh)] overflow-y-auto
+         rounded-lg border border-base-300 bg-base-100 shadow-xl p-2"
+         role="listbox" aria-label="最近会话">
+      <div class="flex items-center justify-between px-1 pb-1.5 mb-1 border-b border-base-300 sticky top-0 bg-base-100 z-[1]">
+        <span class="text-[10px] uppercase tracking-wide text-base-content/45 font-semibold">最近会话</span>
+        <span id="recent-menu-count" class="text-[10px] text-base-content/35 font-mono"></span>
+      </div>
+      <div id="recent-menu-list" class="flex flex-col gap-0.5"></div>
+      <p id="recent-menu-empty" class="text-xs text-base-content/40 px-1 py-2 hidden">暂无最近会话</p>
+    </div>
     <!-- Hub: only when no remembered machine (or last one offline) -->
     <div id="machine-picker" class="hidden fixed inset-0 z-[60] bg-base-100 flex items-center justify-center p-4">
       <div class="w-full max-w-md">
@@ -236,6 +239,7 @@ export const AppShell = (opts = {}) => {
             </div>
             <div id="permission-requests"></div>
             <div id="chat-composer" class="flex flex-col border-t border-base-300 bg-base-200 flex-shrink-0">
+              <div id="chat-attach-bar" class="hidden flex flex-wrap gap-1.5 px-3 pt-2"></div>
               <div id="chat-opts" class="hidden flex items-center gap-1.5 px-3 pt-2 flex-wrap">
                 <select id="sel-agent" class="select select-xs select-bordered text-xs font-semibold" title="Agent">
                   <option value="claude">Claude</option>
@@ -280,8 +284,10 @@ export const AppShell = (opts = {}) => {
                 </select>
               </div>
               <div id="composer-row" class="flex gap-2 items-end px-3 pt-2 pb-2">
-                <button id="btn-opts" class="btn btn-ghost btn-sm px-2 text-base-content/30 hover:text-base-content flex-shrink-0" title="Options">⚙</button>
-                <textarea id="chat-input" rows="1" placeholder="Ask… (!cmd shell · ⌘↵ send)"
+                <button type="button" id="btn-opts" class="btn btn-ghost btn-sm px-2 text-base-content/30 hover:text-base-content flex-shrink-0" title="Options">⚙</button>
+                <button type="button" id="btn-attach" class="btn btn-ghost btn-sm px-2 text-base-content/40 hover:text-base-content flex-shrink-0" title="添加图片 / 文件">📎</button>
+                <input type="file" id="chat-file-input" class="hidden" multiple accept="image/*,*/*">
+                <textarea id="chat-input" rows="1" placeholder="Ask… (📎 图片/文件 · !cmd · ⌘↵)"
                   class="chat-input flex-1 text-sm resize-none leading-relaxed"
                   name="agent-chat-message"
                   autocomplete="off"
@@ -292,8 +298,8 @@ export const AppShell = (opts = {}) => {
                   data-lpignore="true"
                   data-form-type="other"
                   data-bwignore="true"></textarea>
-                <button id="send-btn" class="btn btn-primary btn-sm flex-shrink-0">Send</button>
-                <button id="stop-btn" class="btn btn-error btn-sm hidden flex-shrink-0">■</button>
+                <button type="button" id="send-btn" class="btn btn-primary btn-sm flex-shrink-0">Send</button>
+                <button type="button" id="stop-btn" class="btn btn-error btn-sm hidden flex-shrink-0">■</button>
               </div>
             </div>
           </div>

package/public/shell.js

@@ -26,7 +26,7 @@ import { openMetaAgent, toggleMetaAgent } from './agent-panel.js';
 import { AuthScreen, AppShell } from './shell/templates.js';
 import {
   updateDashboard, shiftCalMonth, setSelectedCalDate, getDashboardSessions,
-  renderRecentSessionsMenu, closeRecentMenu,
+  openRecentMenu, toggleRecentMenu, closeRecentMenu, positionRecentMenu,
 } from './shell/dashboard.js';
 import {
   loadAllSessions, loadWorkspaces, renderSessionList, syncSidebarChrome,
@@ -570,26 +570,43 @@ export function initShell(opts = {}) {
     }
   });
   delegate.on('click', '#btn-recent-sessions', e => {
+    e.preventDefault();
     e.stopPropagation();
     closeMachineMenu();
-    const menu = $('recent-menu');
-    if (!menu) return;
-    if (menu.classList.contains('hidden')) {
-      renderRecentSessionsMenu(getDashboardSessions());
-      menu.classList.remove('hidden');
-    } else {
-      menu.classList.add('hidden');
-    }
+    toggleRecentMenu(getDashboardSessions());
+    const open = !$('recent-menu')?.classList.contains('hidden');
+    const btn = $('btn-recent-sessions');
+    if (btn) btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+  });
+  delegate.on('click', '#recent-menu-backdrop', e => {
+    e.preventDefault();
+    e.stopPropagation();
+    closeRecentMenu();
+    $('btn-recent-sessions')?.setAttribute('aria-expanded', 'false');
   });
   document.addEventListener('click', e => {
     const machineWrap = $('machine-menu-wrap');
     if (machineWrap && !machineWrap.contains(e.target)) closeMachineMenu();
-    const recentWrap = $('recent-menu-wrap');
-    if (recentWrap && !recentWrap.contains(e.target)) closeRecentMenu();
+    const menu = $('recent-menu');
+    const btn = $('btn-recent-sessions');
+    const t = e.target;
+    // Menu is portaled (fixed) outside the button wrap — check both
+    if (menu && !menu.classList.contains('hidden')) {
+      if (menu.contains(t) || btn?.contains(t)) return;
+      closeRecentMenu();
+      btn?.setAttribute('aria-expanded', 'false');
+    }
+  });
+  // Keep panel glued under topbar on rotate / URL bar show-hide
+  window.addEventListener('resize', () => {
+    if ($('recent-menu') && !$('recent-menu').classList.contains('hidden')) {
+      positionRecentMenu();
+    }
   });
   // After picking a session from the topbar menu, close it (row click also resumes).
   delegate.on('click', '#recent-menu [data-session-id]', () => {
     closeRecentMenu();
+    $('btn-recent-sessions')?.setAttribute('aria-expanded', 'false');
   });
 
   delegate.on('click', '#btn-edit-project-notes, #project-goal-text, #project-notes-text', () => {

package/public/style.css

@@ -28,6 +28,7 @@
     line-height: 1.35 !important;
   }
   #btn-opts,
+  #btn-attach,
   #send-btn,
   #stop-btn {
     height: 36px !important;
@@ -884,11 +885,71 @@ html.pwa-standalone .ma-panel {
 /* ── Chat composer ───────────────────────────────────────────────────────── */
 /* Single outer border only — no DaisyUI nested focus ring / inner outline. */
 #composer-row #btn-opts,
+#composer-row #btn-attach,
 #composer-row #send-btn,
 #composer-row #stop-btn {
   height: 40px;
   min-height: 40px;
 }
+#chat-composer.chat-drop-active {
+  outline: 2px dashed color-mix(in oklch, var(--color-primary) 70%, transparent);
+  outline-offset: -2px;
+  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-base-200));
+}
+#chat-attach-bar:not(.hidden) {
+  display: flex;
+}
+.chat-thumb {
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
+  position: relative;
+  flex-shrink: 0;
+  background: var(--color-base-100);
+}
+.chat-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.chat-thumb-path {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 10px;
+  padding: 4px;
+  text-align: center;
+  word-break: break-all;
+  line-height: 1.15;
+  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+  background: color-mix(in oklch, var(--color-base-content) 6%, var(--color-base-100));
+}
+.chat-thumb-label {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  font-size: 9px;
+  text-align: center;
+  background: rgba(0,0,0,.55);
+  color: #fff;
+  line-height: 1.2;
+  padding: 1px 0;
+}
+.chat-thumb-x {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: rgba(0,0,0,.65);
+  color: #fff;
+  border: 0;
+  font-size: 10px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  line-height: 1;
+  z-index: 1;
+}
 #chat-input.chat-input,
 #chat-input {
   width: 100%;
@@ -931,17 +992,43 @@ html.pwa-standalone .ma-panel {
   transition: background-color 99999s ease-in-out 0s;
 }
 
-/* Recent sessions topbar menu */
+/* Recent sessions panel (position set in JS under topbar; never use top:100% with fixed) */
 #recent-menu {
   min-width: 16rem;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+#recent-menu.recent-menu-open {
+  display: block; /* beat .hidden if both race */
 }
 @media (max-width: 640px) {
-  #recent-menu-wrap #recent-menu {
-    position: fixed;
-    left: 0.5rem;
-    right: 0.5rem;
+  #recent-menu {
+    min-width: 0;
     width: auto;
-    max-width: none;
+  }
+  /* Keep 最近 + hamburger reachable; tuck secondary actions */
+  #topbar {
+    overflow: visible;
+    gap: 0.35rem;
+  }
+  #topbar .topbar-actions {
+    gap: 0.25rem;
+    flex-shrink: 0;
+  }
+  #btn-theme,
+  #btn-settings,
+  #btn-logout,
+  #btn-pwa-install {
+    display: none !important;
+  }
+  #topbar-project {
+    font-size: 11px;
+    max-width: 30vw;
+  }
+  #recent-menu-list .recent-menu-item {
+    min-height: 44px; /* comfortable touch targets */
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
 }
 #chat-input:focus,