fix: silent failure when sending image after video

- formatMessagesForApi: strip video_url dataUrls from historical
messages (all but the latest user message), replacing them with
'[Video attachment]' text. Prevents oversized API payloads and
invalid content types reaching the backend.

- app.js: build apiMessages from preConv.messages + userMessage
directly (captured before the store write) instead of re-reading
from localStorage. The current message is always included even if
the localStorage save failed due to quota limits.

- app.js: wrap store.addMessage + appendUserMessage in try/catch so
any remaining failure is shown as a visible error instead of a
silent no-op (input cleared, no output).

- store.js: catch QuotaExceededError in save() to prevent an
unhandled exception when large video dataUrls fill localStorage.

- chat.js: fix video.map(() => videos[0]) bug — use the loop
variable (vid) instead of always referencing the first element.

All 103 tests pass.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/api.js

@@ -209,8 +209,27 @@ export async function* streamCompletion(baseUrl, apiKey, model, messages, option
 }
 
 export function formatMessagesForApi(messages) {
-  return messages.map(msg => {
+  // Find the index of the last user message so we can preserve its media dataUrls.
+  // Historical video messages are stripped (huge dataUrls, already processed by the model).
+  let lastUserIdx = -1;
+  for (let i = messages.length - 1; i >= 0; i--) {
+    if (messages[i].role === 'user') { lastUserIdx = i; break; }
+  }
+
+  return messages.map((msg, i) => {
     if (msg.role === 'assistant') return { role: 'assistant', content: msg.content };
-    return { role: 'user', content: msg.content };
+
+    // For the most recent user message keep content verbatim (includes any media dataUrl).
+    if (i === lastUserIdx || !Array.isArray(msg.content)) {
+      return { role: 'user', content: msg.content };
+    }
+
+    // For historical user messages: replace video_url parts with a text note so the
+    // API payload stays small and uses only standard content types.
+    const content = msg.content.map(part => {
+      if (part?.type === 'video_url') return { type: 'text', text: '[Video attachment]' };
+      return part;
+    });
+    return { role: 'user', content };
   });
 }

src/components/app.js

@@ -255,10 +255,19 @@ export class App {
       );
     }
 
-    // Add to store & render
-    store.addMessage(convId, userMessage);
-    this.chat.appendUserMessage(userMessage);
-    this._updateContextInfo();
+    // Add to store & render — wrapped so any localStorage/DOM error is caught
+    let renderOk = false;
+    try {
+      store.addMessage(convId, userMessage);
+      this.chat.appendUserMessage(userMessage);
+      this._updateContextInfo();
+      renderOk = true;
+    } catch (err) {
+      this.chat.showError(`Error: ${err.message}`);
+      this.inputBar.setSending(false);
+      this.inputBar.focus();
+      return;
+    }
 
     // Update title if first message
     const conv = store.getCurrentConversation();
@@ -272,9 +281,11 @@ export class App {
     this.inputBar.setSending(true);
     this.chat.showTypingIndicator();
 
-    // Get conversation history for API
-    const currentConv = store.getCurrentConversation();
-    const apiMessages = formatMessagesForApi(currentConv.messages);
+    // Get conversation history for API.
+    // Use preConv (read before the store write) + userMessage directly so the
+    // current message is always included even if the localStorage save failed,
+    // and formatMessagesForApi can correctly identify it as the latest message.
+    const apiMessages = formatMessagesForApi([...(preConv?.messages || []), userMessage]);
 
     try {
       this.chat.startAssistantMessage();

src/components/chat.js

@@ -155,8 +155,8 @@ export class Chat {
         <img src="${img.image_url?.url || ''}" alt="Attached image" class="max-w-xs max-h-48 rounded-xl border border-[var(--c-bd)] object-cover mb-2" />
       `).join('');
 
-      const videoHtml = videos.map(() => `
-        <video src="${escapeHtml(videos[0]?.video_url?.url || '')}" controls muted playsinline
+      const videoHtml = videos.map(vid => `
+        <video src="${escapeHtml(vid.video_url?.url || '')}" controls muted playsinline
           class="max-w-xs max-h-48 rounded-xl border border-[var(--c-bd)] bg-black mb-2"></video>
       `).join('');
 

src/store.js

@@ -60,7 +60,15 @@ function load(key, fallback) {
 }
 
 function save(key, value) {
-  localStorage.setItem(key, JSON.stringify(value));
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    if (e?.name === 'QuotaExceededError' || e?.code === 22) {
+      console.warn('[store] localStorage quota exceeded — conversation not persisted');
+    } else {
+      throw e;
+    }
+  }
 }
 
 function uuid() {