madarx 2.9.16 → 2.9.18

package/app/api/orchestrator/stream/route.js

@@ -15,6 +15,7 @@ import {
 } from '@/lib/runtime.js';
 import { buildAgentCreatedHtml } from '@/lib/agent-created-card.js';
 import { INTENT_WITHOUT_ACTION_RE } from '@/lib/intent-without-action.js';
+import { loadAttachments, attachmentsToContentBlocks, attachmentsToPromptText } from '@/lib/chat-uploads.js';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
@@ -282,6 +283,18 @@ function lastUserText(messages) {
   return '';
 }
 
+// Attachment refs ([{ id, name, mime, ... }]) ride on the latest user message.
+// Return the refs from the last user turn that carries any.
+function lastUserAttachments(messages) {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const m = messages[i];
+    if (m.role === 'user' && Array.isArray(m.attachments) && m.attachments.length) {
+      return m.attachments;
+    }
+  }
+  return [];
+}
+
 /**
  * Auto-create or update an artifact for a substantial response.
  * Returns { artifact_id, created: bool } or null if the text is just a
@@ -411,6 +424,13 @@ export async function POST(req) {
     return { input: { ...(input || {}), approval_id: entry.approval_id }, entry };
   }
 
+  // Resolve any files attached to the latest user turn. Bytes are loaded from
+  // the local uploads store by opaque id (client never sends paths). These feed
+  // the model as native content blocks (Anthropic vision/PDF) or inlined text
+  // (CLI / Ollama engines).
+  const loadedAttachments = loadAttachments(lastUserAttachments(messages));
+  const attachmentPromptText = attachmentsToPromptText(loadedAttachments);
+
   // Persist the latest user turn now (the rest of the history was already saved on previous turns).
   const userText = lastUserText(messages);
   if (userText) {
@@ -472,16 +492,17 @@ export async function POST(req) {
         // Tell the client which session this turn belongs to (so it can persist + restore).
         emit('session', { id: sessionId });
 
-        const userContent = userText || messages.map(m => typeof m.content === 'string' ? m.content : JSON.stringify(m.content)).join('\n');
+        const baseUserContent = userText || messages.map(m => typeof m.content === 'string' ? m.content : JSON.stringify(m.content)).join('\n');
+        const userContent = baseUserContent + attachmentPromptText;
 
         // For CLI engines, embed conversation history directly in the prompt since they are stateless subprocesses.
-        const cliUserContent = messages.length > 1
+        const cliUserContent = (messages.length > 1
           ? messages.map(m => {
               const role = m.role === 'assistant' ? 'Assistant' : 'User';
               const text = typeof m.content === 'string' ? m.content : JSON.stringify(m.content);
               return `${role}: ${text}`;
             }).join('\n\n')
-          : userContent;
+          : baseUserContent) + attachmentPromptText;
 
         if (activeEngine === 'ollama') {
           const output = await runOllamaAgent({ model: activeModel, systemPrompt, userMessage: userContent, maxTokens: 2048 });
@@ -822,9 +843,25 @@ Rules (non-negotiable):
         // When reached via CLI fallback (codex/claude-code with no useful output), the
         // active model is a CLI ID and not a valid Anthropic model — use the default instead.
         const loopModel = isCliEngine ? DEFAULT_ANTHROPIC_MODEL : activeModel;
+        // Normalize client messages for the Anthropic API: keep only role +
+        // content (the `attachments` field is client-side metadata the SDK
+        // rejects). Then splice any uploaded files into the LAST user turn as
+        // native content blocks (image / document / inlined text).
+        let currentMessages = messages.map(m => ({ role: m.role, content: m.content }));
+        if (loadedAttachments.length) {
+          const attachmentBlocks = attachmentsToContentBlocks(loadedAttachments);
+          for (let i = currentMessages.length - 1; i >= 0; i--) {
+            if (currentMessages[i].role !== 'user') continue;
+            const existing = currentMessages[i].content;
+            const textBlocks = typeof existing === 'string'
+              ? (existing ? [{ type: 'text', text: existing }] : [])
+              : (Array.isArray(existing) ? existing : []);
+            currentMessages[i] = { role: 'user', content: [...textBlocks, ...attachmentBlocks] };
+            break;
+          }
+        }
         // Anthropic API requires messages to start with a user turn.
         // Drop any leading assistant messages (e.g. welcome text loaded from session).
-        let currentMessages = [...messages];
         while (currentMessages.length && currentMessages[0].role === 'assistant') {
           currentMessages.shift();
         }

package/app/api/orchestrator/upload/route.js

@@ -0,0 +1,52 @@
+import { requireSession } from '@/lib/auth.js';
+import { saveUpload, isAllowedAttachment, MAX_UPLOAD_BYTES, MAX_ATTACHMENTS } from '@/lib/chat-uploads.js';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+// Accepts multipart/form-data with one or more `files` fields. Persists each to
+// the local uploads store and returns opaque attachment refs the chat composer
+// echoes back on the next send. Bytes never leave the machine.
+export async function POST(req) {
+  try {
+    await requireSession(req);
+  } catch (err) {
+    if (err && typeof err === 'object' && err.status) {
+      return Response.json({ error: err.error || 'unauthorized' }, { status: err.status });
+    }
+    throw err;
+  }
+
+  let form;
+  try {
+    form = await req.formData();
+  } catch {
+    return Response.json({ error: 'expected multipart/form-data' }, { status: 400 });
+  }
+
+  const files = form.getAll('files').filter(f => f && typeof f.arrayBuffer === 'function');
+  if (!files.length) return Response.json({ error: 'no files' }, { status: 400 });
+  if (files.length > MAX_ATTACHMENTS) {
+    return Response.json({ error: `max ${MAX_ATTACHMENTS} files per message` }, { status: 400 });
+  }
+
+  const attachments = [];
+  for (const file of files) {
+    const name = file.name || 'file';
+    const mime = file.type || 'application/octet-stream';
+    if (!isAllowedAttachment(mime, name)) {
+      return Response.json({ error: `unsupported file type: ${name}` }, { status: 415 });
+    }
+    const buffer = Buffer.from(await file.arrayBuffer());
+    if (buffer.length > MAX_UPLOAD_BYTES) {
+      return Response.json({ error: `${name} exceeds ${Math.round(MAX_UPLOAD_BYTES / 1024 / 1024)}MB limit` }, { status: 413 });
+    }
+    try {
+      attachments.push(saveUpload({ buffer, name, mime }));
+    } catch (err) {
+      return Response.json({ error: `${name}: ${err.message}` }, { status: 400 });
+    }
+  }
+
+  return Response.json({ attachments });
+}

package/app/api/whatsapp/disconnect/route.js

@@ -0,0 +1,25 @@
+import { logoutWhatsApp } from '@/lib/whatsapp.js';
+import { appendAudit } from '@/lib/runtime.js';
+import { requireSession } from '@/lib/auth.js';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+export async function POST(req) {
+  try {
+    await requireSession(req);
+    const result = await logoutWhatsApp();
+    appendAudit({
+      type: 'whatsapp.disconnect',
+      summary: 'Owner disconnected WhatsApp from dashboard',
+      status: 'done',
+      meta: {},
+    });
+    return Response.json({ ok: true, ...result });
+  } catch (err) {
+    if (err && typeof err === 'object' && err.status) {
+      return Response.json({ error: err.error || 'unauthorized' }, { status: err.status });
+    }
+    return Response.json({ ok: false, error: err.message }, { status: err.status || 502 });
+  }
+}

package/app/components/dashboard/chat-panel.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { SpinnerIcon, CheckIcon, StepXIcon, ElapsedTime } from './icons';
@@ -7,6 +7,15 @@ import { toolStepSublabel, toolStepDisplayName } from './tool-steps';
 import { useDashboard } from './dashboard-context';
 import { useDraftPersist } from './use-draft-persist';
 
+const MAX_ATTACHMENTS = 8;
+
+function formatBytes(n) {
+  if (!n && n !== 0) return '';
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
 function ChatPanel() {
   const {
     initializing,
@@ -50,18 +59,95 @@ function ChatPanel() {
   const hideChat = useCallback(() => setChatHidden(true), [setChatHidden]);
   const onOpenVoice = useCallback(() => setVoiceOpen(true), [setVoiceOpen]);
   const composerRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const dragDepth = useRef(0);
+  const [attachments, setAttachments] = useState([]);
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState(null);
+  const [dragOver, setDragOver] = useState(false);
+
+  const uploadFiles = useCallback(async (fileList) => {
+    const list = Array.from(fileList || []).filter(Boolean);
+    if (!list.length) return;
+    setUploadError(null);
+    setAttachments(prev => {
+      const room = MAX_ATTACHMENTS - prev.length;
+      if (room <= 0) { setUploadError(`Max ${MAX_ATTACHMENTS} files`); return prev; }
+      const slice = list.slice(0, room);
+      const fd = new FormData();
+      slice.forEach(f => fd.append('files', f));
+      setUploading(true);
+      fetch('/api/orchestrator/upload', { method: 'POST', body: fd })
+        .then(async res => {
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok) { setUploadError(data.error || 'Upload failed'); return; }
+          const withPreview = (data.attachments || []).map((a, i) => ({
+            ...a,
+            previewUrl: a.kind === 'image' && slice[i] ? URL.createObjectURL(slice[i]) : null,
+          }));
+          setAttachments(p => [...p, ...withPreview]);
+        })
+        .catch(err => setUploadError(err.message || 'Upload failed'))
+        .finally(() => setUploading(false));
+      return prev;
+    });
+  }, []);
+
+  const removeAttachment = useCallback((id) => {
+    setAttachments(prev => {
+      const gone = prev.find(a => a.id === id);
+      if (gone?.previewUrl) URL.revokeObjectURL(gone.previewUrl);
+      return prev.filter(a => a.id !== id);
+    });
+  }, []);
+
   // Read live textarea value via ref at send-time rather than the React
   // `prompt` snapshot — avoids dropping the final keystroke under a fast
   // typing + Enter race where setPrompt has not yet flushed before the
   // submit. `command` is now ref-stable from useStreamCommand, so `send`
   // stays stable as long as `busy` is unchanged.
   const send = useCallback(() => {
-    if (busy) return;
+    if (busy || uploading) return;
     const text = composerRef.current?.value ?? '';
-    if (!text.trim()) return;
+    if (!text.trim() && attachments.length === 0) return;
     setPrompt('');
-    command(text);
-  }, [busy, setPrompt, command]);
+    const refs = attachments.map(({ id, name, mime, size, kind }) => ({ id, name, mime, size, kind }));
+    command(text, refs);
+    attachments.forEach(a => { if (a.previewUrl) URL.revokeObjectURL(a.previewUrl); });
+    setAttachments([]);
+    setUploadError(null);
+  }, [busy, uploading, attachments, setPrompt, command]);
+
+  const onPaste = useCallback((e) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    const files = [];
+    for (const it of items) {
+      if (it.kind === 'file') { const f = it.getAsFile(); if (f) files.push(f); }
+    }
+    if (files.length) { e.preventDefault(); uploadFiles(files); }
+  }, [uploadFiles]);
+
+  const onDragEnter = useCallback((e) => {
+    if (!e.dataTransfer?.types?.includes('Files')) return;
+    e.preventDefault();
+    dragDepth.current += 1;
+    setDragOver(true);
+  }, []);
+  const onDragOver = useCallback((e) => {
+    if (e.dataTransfer?.types?.includes('Files')) e.preventDefault();
+  }, []);
+  const onDragLeave = useCallback(() => {
+    dragDepth.current = Math.max(0, dragDepth.current - 1);
+    if (dragDepth.current === 0) setDragOver(false);
+  }, []);
+  const onDrop = useCallback((e) => {
+    if (!e.dataTransfer?.files?.length) return;
+    e.preventDefault();
+    dragDepth.current = 0;
+    setDragOver(false);
+    uploadFiles(e.dataTransfer.files);
+  }, [uploadFiles]);
 
   useEffect(() => {
     function focusComposer() {
@@ -81,7 +167,19 @@ function ChatPanel() {
   }, [newSession]);
 
   return (
-<section className="chat">
+<section className={'chat' + (dragOver ? ' chat--dragover' : '')}
+  onDragEnter={onDragEnter} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
+  {dragOver && (
+    <div className="chat-dropzone" aria-hidden="true">
+      <div className="chat-dropzone-inner">
+        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 16V4M12 4L7 9M12 4l5 5"/>
+          <path d="M4 16v2.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V16"/>
+        </svg>
+        <span>Drop files to attach</span>
+      </div>
+    </div>
+  )}
   <div className="chat-top">
     <div className="model-pill-wrap">
       <button className="model-pill" onClick={() => setModelOpen(o => !o)} aria-haspopup="listbox" aria-expanded={modelOpen}
@@ -208,6 +306,19 @@ function ChatPanel() {
       return (
         <div className={'msg ' + m.role + (m.streaming ? ' msg--streaming' : '')} key={i}>
           <Markdown remarkPlugins={[remarkGfm]}>{m.text}</Markdown>
+          {Array.isArray(m.attachments) && m.attachments.length > 0 && (
+            <div className="msg-attachments">
+              {m.attachments.map(a => (
+                <span key={a.id} className="msg-attach-chip" title={a.name}>
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="M14 3v4a1 1 0 0 0 1 1h4"/>
+                    <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"/>
+                  </svg>
+                  {a.name}
+                </span>
+              ))}
+            </div>
+          )}
         </div>
       );
     })}
@@ -259,15 +370,60 @@ function ChatPanel() {
     {busy && liveSteps.length === 0 && <div className="typing-indicator"><span /><span /><span /></div>}
   </div>
   <form className="composer" onSubmit={e => { e.preventDefault(); send(); }}>
-    <textarea
-      ref={composerRef}
-      data-madarx-composer="true"
-      value={prompt}
-      onChange={e => setPrompt(e.target.value)}
-      onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
-      placeholder="Start fresh: ask the main agent to create the first agent, report, schedule, or UI task…"
-      rows={3}
+    <input
+      ref={fileInputRef}
+      type="file"
+      multiple
+      hidden
+      accept="image/png,image/jpeg,image/gif,image/webp,application/pdf,text/*,.md,.markdown,.csv,.tsv,.json,.jsonl,.log,.yaml,.yml,.xml,.html,.css,.js,.jsx,.ts,.tsx,.mjs,.cjs,.py,.rb,.go,.rs,.java,.c,.h,.cpp,.cs,.php,.sh,.sql,.toml,.ini"
+      onChange={e => { uploadFiles(e.target.files); e.target.value = ''; }}
     />
+    <button
+      type="button"
+      className="attach-btn"
+      onClick={() => fileInputRef.current?.click()}
+      disabled={busy}
+      title="Attach files"
+      aria-label="Attach files"
+    >
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21.4 11.05 12.25 20.2a5.5 5.5 0 0 1-7.78-7.78l9.2-9.2a3.67 3.67 0 0 1 5.18 5.18l-9.2 9.19a1.83 1.83 0 0 1-2.59-2.59l8.49-8.48"/>
+      </svg>
+    </button>
+    <div className="composer-field">
+      {(attachments.length > 0 || uploading || uploadError) && (
+        <div className="composer-attachments">
+          {attachments.map(a => (
+            <span key={a.id} className="attach-chip" title={`${a.name} · ${formatBytes(a.size)}`}>
+              {a.previewUrl ? (
+                <img className="attach-chip-thumb" src={a.previewUrl} alt="" />
+              ) : (
+                <svg className="attach-chip-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M14 3v4a1 1 0 0 0 1 1h4"/>
+                  <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"/>
+                </svg>
+              )}
+              <span className="attach-chip-name">{a.name}</span>
+              <button type="button" className="attach-chip-x" onClick={() => removeAttachment(a.id)} aria-label={`Remove ${a.name}`}>
+                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
+              </button>
+            </span>
+          ))}
+          {uploading && <span className="attach-uploading">Uploading…</span>}
+          {uploadError && <span className="attach-error">{uploadError}</span>}
+        </div>
+      )}
+      <textarea
+        ref={composerRef}
+        data-madarx-composer="true"
+        value={prompt}
+        onChange={e => setPrompt(e.target.value)}
+        onPaste={onPaste}
+        onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
+        placeholder="Start fresh: ask the main agent to create the first agent, report, schedule, or UI task…"
+        rows={3}
+      />
+    </div>
     {busy ? (
       <button
         type="button"
@@ -281,7 +437,7 @@ function ChatPanel() {
         </svg>
       </button>
     ) : (
-      <button className="send-btn" disabled={!prompt.trim()} aria-label="Send">
+      <button className="send-btn" disabled={(!prompt.trim() && attachments.length === 0) || uploading} aria-label="Send">
         <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
           <path d="M9 14V4M9 4L4.5 8.5M9 4L13.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
         </svg>

package/app/components/dashboard/use-stream-command.js

@@ -49,11 +49,13 @@ export function useStreamCommand({
   const commandRef = useRef(null);
   const stopRef = useRef(null);
 
-  async function commandImpl(text) {
+  async function commandImpl(text, attachments) {
     if (busy) return;
     const clean = (text ?? '').trim();
-    if (!clean) return;
-    setChat(c => [...c, { role: 'user', text: clean }]);
+    const files = Array.isArray(attachments) ? attachments : [];
+    // Allow an attachment-only send (no text) — the model still gets the files.
+    if (!clean && !files.length) return;
+    setChat(c => [...c, { role: 'user', text: clean, attachments: files }]);
     clearSavedDraft();
     setLiveSteps([]);
     setAgentPhase('thinking');
@@ -65,7 +67,7 @@ export function useStreamCommand({
       .map(m => ({ role: m.role === 'agent' ? 'assistant' : 'user', content: m.text }));
     while (rawHistory.length && rawHistory[0].role === 'assistant') rawHistory.shift();
     const history = rawHistory;
-    history.push({ role: 'user', content: clean });
+    history.push({ role: 'user', content: clean, attachments: files });
 
     const abort = new AbortController();
     abortRef.current = abort;
@@ -305,7 +307,7 @@ export function useStreamCommand({
   stopRef.current = stopImpl;
   const decideApprovalRef = useRef(null);
   decideApprovalRef.current = decideApprovalImpl;
-  const command = useCallback((text) => commandRef.current(text), []);
+  const command = useCallback((text, attachments) => commandRef.current(text, attachments), []);
   const stop = useCallback(() => stopRef.current(), []);
   const decideApproval = useCallback(
     (id, decision, toolName) => decideApprovalRef.current(id, decision, toolName),

package/app/components/dashboard/whatsapp-section.jsx

@@ -47,6 +47,10 @@ export default function WhatsAppSection() {
   const [addError, setAddError] = useState('');
   const [removingId, setRemovingId] = useState(null);
 
+  // Disconnect state
+  const [disconnectBusy, setDisconnectBusy] = useState(false);
+  const [confirmDisconnect, setConfirmDisconnect] = useState(false);
+
   // Send form state
   const [sendChatId, setSendChatId] = useState('');
   const [sendText, setSendText] = useState('');
@@ -133,6 +137,19 @@ export default function WhatsAppSection() {
     else refreshAll();
   }
 
+  async function handleDisconnect() {
+    setDisconnectBusy(true);
+    setErr(null);
+    const r = await fetchJson('/api/whatsapp/disconnect', { method: 'POST' });
+    setDisconnectBusy(false);
+    setConfirmDisconnect(false);
+    if (!r.ok) {
+      setErr(r.json?.error || 'Failed to disconnect');
+      return;
+    }
+    refreshAll();
+  }
+
   async function handleSend(e) {
     e.preventDefault();
     if (!sendChatId.trim() || !sendText.trim()) return;
@@ -229,7 +246,41 @@ export default function WhatsAppSection() {
                   <span className="config-section-title">Bridge is paired</span>
                   <p>The WhatsApp session is active. Allowlisted senders can message this agent directly.</p>
                 </div>
+                {!confirmDisconnect ? (
+                  <button
+                    type="button"
+                    className="secrets-action-btn danger"
+                    onClick={() => setConfirmDisconnect(true)}
+                    disabled={disconnectBusy}
+                  >
+                    Disconnect
+                  </button>
+                ) : (
+                  <div className="wa-disconnect-confirm">
+                    <button
+                      type="button"
+                      className="secrets-action-btn danger"
+                      onClick={handleDisconnect}
+                      disabled={disconnectBusy}
+                    >
+                      {disconnectBusy ? 'Disconnecting...' : 'Confirm disconnect'}
+                    </button>
+                    <button
+                      type="button"
+                      className="secrets-action-btn"
+                      onClick={() => setConfirmDisconnect(false)}
+                      disabled={disconnectBusy}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                )}
               </div>
+              {confirmDisconnect && (
+                <p className="whatsapp-warn-copy">
+                  Unlinks this device from WhatsApp and wipes the local session. You will need to scan a new QR code to reconnect.
+                </p>
+              )}
               {dedicatedNumberWarning}
             </div>
           )}

package/app/globals.css

@@ -2746,6 +2746,7 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .wa-section { display: flex; flex-direction: column; gap: 14px; }
 .wa-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 .wa-status-user { font-size: 12px; color: #68707b; font-weight: 550; }
+.wa-disconnect-confirm { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
 .wa-error-banner { background: #fff8f6; border: 1px solid rgba(154,51,37,.22); border-radius: 10px; padding: 10px 14px; color: #9a3325; font-size: 12.5px; font-weight: 650; line-height: 1.5; }
 .wa-stats-row { display: flex; gap: 12px; flex-wrap: wrap; }
 .wa-stat { flex: 1 1 120px; background: #f5f6f8; border: 1px solid rgba(17,19,24,.06); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
@@ -4659,3 +4660,27 @@ ul.hail-error{list-style:disc;padding:8px 8px 8px 24px;margin:10px 0 0;display:f
 .help-article-related-card p{margin:5px 0 0;font-size:12px;line-height:1.45;color:#68707b;}
 @media(max-width:820px){.help-article-layout{grid-template-columns:1fr;}.help-article-rail{position:static;}}
 
+
+/* ── Chat file attachments ─────────────────────────────────────────────── */
+.chat{position:relative;}
+.chat--dragover{outline:2px dashed rgba(17,19,24,.28);outline-offset:-6px;}
+.chat-dropzone{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(244,245,247,.86);backdrop-filter:blur(2px);border-radius:22px;pointer-events:none;}
+.chat-dropzone-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#111318;font-size:13px;font-weight:600;}
+.chat-dropzone-inner svg{color:#111318;opacity:.8;}
+.composer .attach-btn{align-self:stretch;width:42px;padding:0;display:grid;place-items:center;border-radius:14px;flex-shrink:0;background:#fff !important;color:#515760;border:1px solid rgba(20,22,26,.10);font-weight:400;cursor:pointer;transition:background .15s,color .15s;}
+.composer .attach-btn:hover:not(:disabled){background:rgba(17,19,24,.06) !important;color:#111318;}
+.composer .attach-btn:disabled{opacity:.45;cursor:not-allowed;}
+.composer-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
+.composer-attachments{display:flex;flex-wrap:wrap;gap:6px;}
+.attach-chip{display:inline-flex;align-items:center;gap:6px;max-width:200px;padding:4px 7px 4px 5px;border-radius:9px;background:#fff;border:1px solid rgba(20,22,26,.12);font-size:11.5px;color:#3a4049;}
+.attach-chip-thumb{width:18px;height:18px;border-radius:4px;object-fit:cover;flex-shrink:0;}
+.attach-chip-icon{color:#7b828c;flex-shrink:0;}
+.attach-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.attach-chip-x{display:grid;place-items:center;width:16px;height:16px;padding:0;border:0;border-radius:5px;background:transparent !important;color:#9098a2 !important;cursor:pointer;flex-shrink:0;font-weight:400;}
+.attach-chip-x:hover{background:rgba(17,19,24,.08) !important;color:#111318 !important;}
+.attach-uploading{font-size:11.5px;color:#7b828c;align-self:center;}
+.attach-error{font-size:11.5px;color:var(--accent-600,#c2452a);align-self:center;}
+.msg-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
+.msg-attach-chip{display:inline-flex;align-items:center;gap:5px;max-width:200px;padding:3px 8px;border-radius:8px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.msg.user .msg-attach-chip{background:rgba(255,255,255,.12);color:#fff;}
+.msg.agent .msg-attach-chip{background:rgba(17,19,24,.06);color:#3a4049;}