claude-simple 0.2.3 → 0.2.4

package/dist/index.html

@@ -4,13 +4,13 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   <title>Claude Code</title>
-  <link rel="stylesheet" href="/style.0.2.3.min.css">
+  <link rel="stylesheet" href="/style.0.2.4.min.css">
   <link rel="stylesheet" href="/highlight.min.css">
   <script src="/marked.min.js"></script>
   <script src="/highlight.min.js"></script>
 </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.0.2.3.min.js"></script>
+  <script type="module" src="/app.0.2.4.min.js"></script>
 </body>
 </html>

package/dist/{style.0.2.3.min.css → style.0.2.4.min.css}

@@ -30,6 +30,7 @@
     line-height: 1.35 !important;
   }
   #btn-opts,
+  #btn-attach,
   #send-btn,
   #stop-btn {
     height: 36px !important;
@@ -886,11 +887,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%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-simple",
-  "version": "0.2.3",
+  "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/shell/templates.js

@@ -239,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>
@@ -283,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"
@@ -295,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/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%;

package/public/sw.js

@@ -1,7 +1,7 @@
 /* Agent UI service worker — cache shell assets only.
  * Never intercepts WebSocket or mutates API semantics beyond offline fallback.
  * Bump CACHE when shipping UI that must invalidate old shells. */
-const CACHE = 'agent-ui-shell-v7';
+const CACHE = 'agent-ui-shell-v8';
 const PRECACHE = [
   '/',
   '/index.html',