shadow-claw 1.23.4 → 1.24.0

package/src/components/shadow-claw-chat/shadow-claw-chat.test.ts

@@ -1,7 +1,51 @@
 import { jest } from "@jest/globals";
 
-// We'll test the DB layer and orchestrator store directly
-// since the component has browser-only dependencies (jszip from CDN)
+jest.unstable_mockModule("jszip", () => {
+  class MockJSZip {
+    static async loadAsync(_file: any) {
+      return new MockJSZip();
+    }
+    file(_name: string) {
+      return {
+        async: async (_type: string) =>
+          JSON.stringify({ messages: [{ id: "1", content: "hi" }] }),
+      };
+    }
+    async generateAsync() {
+      return new Blob([]);
+    }
+  }
+  return {
+    default: MockJSZip,
+    __esModule: true,
+  };
+});
+
+jest.unstable_mockModule("../../core/effect.js", () => ({
+  effect: jest.fn((cb: any) => {
+    try {
+      if (typeof cb === "function") cb();
+    } catch {}
+    return () => {};
+  }),
+}));
+
+jest.unstable_mockModule("../../storage/readGroupFileBytes.js", () => ({
+  readGroupFileBytes: jest.fn(async () => new Uint8Array([1, 2, 3])),
+}));
+
+jest.unstable_mockModule("../../storage/downloadGroupFile.js", () => ({
+  downloadGroupFile: jest.fn(async () => undefined),
+}));
+
+jest.unstable_mockModule("../../db/exportChatData.js", () => ({
+  exportChatData: jest.fn(async () => ({ messages: [], version: 1 })),
+}));
+
+jest.unstable_mockModule("../../db/importChatData.js", () => ({
+  importChatData: jest.fn(async () => undefined),
+}));
+
 const { orchestratorStore } = await import("../../stores/orchestrator.js");
 const { clearGroupMessages } = await import("../../db/clearGroupMessages.js");
 const { setDB } = await import("../../db/db.js");
@@ -250,7 +294,7 @@ describe("shadow-claw-chat UX enhancements (issue #10)", () => {
     beforeAll(async () => {
       // Import the class to access static method
       // We use a dynamic import with a mock to avoid browser-only deps
-      jest.unstable_mockModule("jszip", () => ({ default: {} }));
+      // jszip mocked at top level
       jest.unstable_mockModule("../../db/exportChatData.js", () => ({
         exportChatData: jest.fn(),
       }));
@@ -263,9 +307,7 @@ describe("shadow-claw-chat UX enhancements (issue #10)", () => {
         importChatData: jest.fn(),
       }));
 
-      jest.unstable_mockModule("../../core/effect.js", () => ({
-        effect: jest.fn(),
-      }));
+      // effect mocked at top level
 
       jest.unstable_mockModule("../../content/markdown.js", () => ({
         renderMarkdown: jest.fn((str: string) => `<p>${str}</p>`),
@@ -283,6 +325,8 @@ describe("shadow-claw-chat UX enhancements (issue #10)", () => {
           sendMessage: jest.fn(),
           stopCurrentRequest: jest.fn(),
           deleteMessage: jest.fn(),
+          newSession: jest.fn(),
+          compactContext: jest.fn(),
         },
       }));
 
@@ -369,7 +413,7 @@ describe("shadow-claw-chat UX enhancements (issue #10)", () => {
       // The constant is module-scoped, so we verify its effect indirectly.
       // The key behavior: if user scrolls up, auto-scroll should NOT happen.
       // We verify the template includes the messages container which is the scroll target.
-      jest.unstable_mockModule("jszip", () => ({ default: {} }));
+      // jszip mocked at top level
 
       const { ShadowClawChat: _ShadowClawChat } =
         await import("./shadow-claw-chat.js");
@@ -410,7 +454,7 @@ describe("message copy button", () => {
   let mockOrchestratorStore;
 
   beforeAll(async () => {
-    jest.unstable_mockModule("jszip", () => ({ default: {} }));
+    // jszip mocked at top level
 
     jest.unstable_mockModule("../../db/exportChatData.js", () => ({
       exportChatData: jest.fn(),
@@ -424,9 +468,7 @@ describe("message copy button", () => {
       importChatData: jest.fn(),
     }));
 
-    jest.unstable_mockModule("../../core/effect.js", () => ({
-      effect: jest.fn(),
-    }));
+    // effect mocked at top level
 
     jest.unstable_mockModule("../../content/markdown.js", () => ({
       renderMarkdown: jest.fn((str: string) => `<p>${str}</p>`),
@@ -443,6 +485,8 @@ describe("message copy button", () => {
       sendMessage: jest.fn(),
       stopCurrentRequest: jest.fn(),
       deleteMessage: jest.fn(),
+      newSession: jest.fn(),
+      compactContext: jest.fn(),
     };
 
     jest.unstable_mockModule("../../stores/orchestrator.js", () => ({
@@ -857,7 +901,7 @@ describe("chat workspace link resolution", () => {
   let ShadowClawChat;
 
   beforeAll(async () => {
-    jest.unstable_mockModule("jszip", () => ({ default: {} }));
+    // jszip mocked at top level
 
     jest.unstable_mockModule("../../db/exportChatData.js", () => ({
       exportChatData: jest.fn(),
@@ -871,9 +915,7 @@ describe("chat workspace link resolution", () => {
       importChatData: jest.fn(),
     }));
 
-    jest.unstable_mockModule("../../core/effect.js", () => ({
-      effect: jest.fn(),
-    }));
+    // effect mocked at top level
 
     jest.unstable_mockModule("../../content/markdown.js", () => ({
       renderMarkdown: jest.fn((str: string) => `<p>${str}</p>`),
@@ -890,6 +932,8 @@ describe("chat workspace link resolution", () => {
         activeGroupId: "test-group",
         sendMessage: jest.fn(),
         stopCurrentRequest: jest.fn(),
+        newSession: jest.fn(),
+        compactContext: jest.fn(),
       },
     }));
 
@@ -984,7 +1028,7 @@ describe("chat attachment helpers", () => {
   let ShadowClawChat;
 
   beforeAll(async () => {
-    jest.unstable_mockModule("jszip", () => ({ default: {} }));
+    // jszip mocked at top level
     jest.unstable_mockModule("../../db/exportChatData.js", () => ({
       exportChatData: jest.fn(),
     }));
@@ -994,9 +1038,7 @@ describe("chat attachment helpers", () => {
     jest.unstable_mockModule("../../db/importChatData.js", () => ({
       importChatData: jest.fn(),
     }));
-    jest.unstable_mockModule("../../core/effect.js", () => ({
-      effect: jest.fn(),
-    }));
+    // effect mocked at top level
     jest.unstable_mockModule("../../content/markdown.js", () => ({
       renderMarkdown: jest.fn((str: string) => `<p>${str}</p>`),
     }));
@@ -1010,6 +1052,8 @@ describe("chat attachment helpers", () => {
         activeGroupId: "test-group",
         sendMessage: jest.fn(),
         stopCurrentRequest: jest.fn(),
+        newSession: jest.fn(),
+        compactContext: jest.fn(),
       },
     }));
     jest.unstable_mockModule("../../storage/readGroupFileBytes.js", () => ({
@@ -1151,12 +1195,15 @@ describe("shadow-claw-chat utility methods", () => {
 
 describe("shadow-claw-chat prompt api onboarding", () => {
   let ShadowClawChat: any;
+  let currentOrchestratorStore: any;
   let mockDb: any;
   let storedConfig: Record<string, string>;
 
   beforeAll(async () => {
     const mod = await import("./shadow-claw-chat.js");
     ShadowClawChat = mod.ShadowClawChat;
+    const orchMod = await import("../../stores/orchestrator.js");
+    currentOrchestratorStore = orchMod.orchestratorStore;
   });
 
   beforeEach(() => {
@@ -1317,4 +1364,1461 @@ describe("shadow-claw-chat prompt api onboarding", () => {
       document.removeEventListener("shadow-claw-navigate", navListener);
     }
   });
+
+  describe("ShadowClawChat helper methods", () => {
+    let instance: any;
+
+    beforeEach(() => {
+      instance = Object.create(ShadowClawChat.prototype);
+    });
+
+    it("formats attachment sizes accurately", () => {
+      expect(instance.formatAttachmentSize(500)).toBe("500 B");
+      expect(instance.formatAttachmentSize(2048)).toBe("2.0 KB");
+      expect(instance.formatAttachmentSize(5 * 1024 * 1024)).toBe("5.0 MB");
+    });
+
+    it("determines correct attachment icons", () => {
+      expect(instance.getAttachmentIcon("image/png")).toBe("IMG");
+      expect(instance.getAttachmentIcon("video/mp4")).toBe("VID");
+      expect(instance.getAttachmentIcon("audio/mp3")).toBe("AUD");
+      expect(instance.getAttachmentIcon("application/pdf")).toBe("PDF");
+      expect(instance.getAttachmentIcon("text/plain")).toBe("TXT");
+      expect(instance.getAttachmentIcon("application/json")).toBe("TXT");
+      expect(instance.getAttachmentIcon("application/zip")).toBe("ZIP");
+      expect(instance.getAttachmentIcon("application/octet-stream")).toBe(
+        "BIN",
+      );
+    });
+
+    it("determines attachment transport labels based on capabilities", () => {
+      const textCaps = {
+        images: false,
+        audio: false,
+        documents: false,
+        routerByFeatures: false,
+      };
+      const multimodalCaps = {
+        images: true,
+        audio: true,
+        documents: true,
+        routerByFeatures: false,
+      };
+
+      expect(
+        instance.getAttachmentTransportLabel("text/plain", "doc.txt", textCaps),
+      ).toBe("text");
+      expect(
+        instance.getAttachmentTransportLabel(
+          "image/png",
+          "img.png",
+          multimodalCaps,
+        ),
+      ).toBe("native");
+      expect(
+        instance.getAttachmentTransportLabel("image/png", "img.png", textCaps),
+      ).toBe("fallback");
+      expect(
+        instance.getAttachmentTransportLabel(
+          "audio/wav",
+          "clip.wav",
+          multimodalCaps,
+        ),
+      ).toBe("native");
+      expect(
+        instance.getAttachmentTransportLabel("audio/wav", "clip.wav", textCaps),
+      ).toBe("fallback");
+      expect(
+        instance.getAttachmentTransportLabel(
+          "application/pdf",
+          "doc.pdf",
+          multimodalCaps,
+        ),
+      ).toBe("native");
+      expect(
+        instance.getAttachmentTransportLabel(
+          "application/pdf",
+          "doc.pdf",
+          textCaps,
+        ),
+      ).toBe("fallback");
+    });
+
+    it("clamps input area height properly", () => {
+      expect(instance.clampInputAreaHeight(10)).toBe(40);
+      expect(instance.clampInputAreaHeight(100)).toBe(100);
+    });
+
+    it("formats token counts for human display", () => {
+      expect(instance.formatTokenCount(1234)).toBe("1,234");
+      expect(instance.formatTokenCount(undefined as any)).toBe("–");
+    });
+
+    it("resolves workspace links and blocks traversal or external schemes", () => {
+      expect(instance.resolveWorkspaceLinkPath("docs/readme.md")).toBe(
+        "docs/readme.md",
+      );
+      expect(instance.resolveWorkspaceLinkPath("./docs/readme.md#sec")).toBe(
+        "docs/readme.md",
+      );
+      expect(instance.resolveWorkspaceLinkPath("../secret.txt")).toBeNull();
+      expect(
+        instance.resolveWorkspaceLinkPath("https://external.com/file"),
+      ).toBeNull();
+      expect(instance.resolveWorkspaceLinkPath("#anchor")).toBeNull();
+    });
+
+    it("checks for droppable data transfer items", () => {
+      expect(instance.hasDroppableData(null)).toBe(false);
+      expect(
+        instance.hasDroppableData({ files: [new File([], "test.png")] } as any),
+      ).toBe(true);
+      expect(
+        instance.hasDroppableData({ files: [], types: ["text/plain"] } as any),
+      ).toBe(true);
+    });
+
+    it("defers workspace image loads", () => {
+      const html =
+        '<p><img src="docs/image.png" alt="test"><img src="https://example.com/ext.png"></p>';
+      const deferred = instance.deferWorkspaceImageLoads(html);
+      expect(deferred).toContain('data-inline-workspace-src="docs/image.png"');
+      expect(deferred).toContain('src="https://example.com/ext.png"');
+    });
+
+    it("builds queued attachments from File array", () => {
+      const file = new File(["test"], "sample.txt", { type: "text/plain" });
+      const queued = instance.buildQueuedAttachmentsFromFiles([file]);
+      expect(queued).toHaveLength(1);
+      expect(queued[0].fileName).toBe("sample.txt");
+      expect(queued[0].mimeType).toBe("text/plain");
+      expect(queued[0].source.kind).toBe("local-file");
+    });
+
+    it("clears chat messages and starts new session via handleClearChat", async () => {
+      const mockContainer = document.createElement("div");
+      mockContainer.className = "chat__messages";
+      mockContainer.innerHTML = "<p>Msg 1</p><p>Msg 2</p>";
+
+      const mockShadow = {
+        querySelector: jest.fn().mockReturnValue(mockContainer),
+      };
+      Object.defineProperty(instance, "shadowRoot", {
+        value: mockShadow,
+        configurable: true,
+      });
+      instance.db = {};
+
+      currentOrchestratorStore.newSession.mockResolvedValue(undefined);
+
+      await instance.handleClearChat();
+
+      expect(mockContainer.children.length).toBe(0);
+      expect(currentOrchestratorStore.newSession).toHaveBeenCalledWith(
+        instance.db,
+      );
+    });
+
+    it("stops chat stream via handleStopChat", async () => {
+      await instance.handleStopChat();
+
+      expect(currentOrchestratorStore.stopCurrentRequest).toHaveBeenCalled();
+    });
+
+    it("compacts chat context when confirmed via handleCompactChat", async () => {
+      instance.db = {};
+      instance.showAttachmentDialog = (jest.fn() as any).mockResolvedValue(
+        true,
+      );
+      currentOrchestratorStore.compactContext.mockResolvedValue(undefined);
+
+      await instance.handleCompactChat();
+
+      expect(instance.showAttachmentDialog).toHaveBeenCalled();
+      expect(currentOrchestratorStore.compactContext).toHaveBeenCalledWith(
+        instance.db,
+      );
+    });
+
+    it("persists and restores input area height", async () => {
+      instance.db = {};
+      await instance.persistInputAreaHeight(150);
+
+      const textarea = document.createElement("textarea");
+      textarea.className = "chat__input-textarea";
+      const inputWrap = document.createElement("div");
+      inputWrap.className = "chat__input-wrapper";
+
+      const mockShadow = {
+        querySelector: jest.fn().mockImplementation((sel) => {
+          if (sel === ".chat__input-textarea") return textarea;
+          if (sel === ".chat__input-wrapper") return inputWrap;
+          return null;
+        }),
+      };
+      Object.defineProperty(instance, "shadowRoot", {
+        value: mockShadow,
+        configurable: true,
+      });
+
+      await instance.restoreInputAreaHeight();
+      expect(instance.clampInputAreaHeight(150)).toBe(150);
+    });
+  });
+
+  describe("ShadowClawChat comprehensive coverage suite", () => {
+    let ShadowClawChatClass: any;
+    let chatInstance: any;
+    let mockDbInstance: any;
+
+    beforeAll(async () => {
+      const mod = await import("./shadow-claw-chat.js");
+      ShadowClawChatClass = mod.ShadowClawChat;
+    });
+
+    beforeEach(() => {
+      document.body.innerHTML = "";
+      mockDbInstance = {
+        transaction: jest.fn().mockReturnValue({
+          objectStore: jest.fn().mockReturnValue({
+            get: jest.fn().mockReturnValue({ onsuccess: null }),
+            put: jest.fn().mockReturnValue({ onsuccess: null }),
+            delete: jest.fn().mockReturnValue({ onsuccess: null }),
+          }),
+        }),
+      };
+      setDB(mockDbInstance);
+      chatInstance = new ShadowClawChatClass();
+    });
+
+    afterEach(() => {
+      if (chatInstance.isConnected) {
+        chatInstance.remove();
+      }
+      document.body.innerHTML = "";
+    });
+
+    it("registers custom element and initializes constructor properties", () => {
+      expect(customElements.get("shadow-claw-chat")).toBe(ShadowClawChatClass);
+      expect(chatInstance.db).toBeNull();
+      expect(chatInstance.activityLogCollapsedOverride).toBeNull();
+    });
+
+    it("connects to DOM and dispatches slot ready event", async () => {
+      const slotReadySpy = jest.fn();
+      chatInstance.addEventListener(
+        "shadow-claw-terminal-slot-ready",
+        slotReadySpy,
+      );
+
+      document.body.appendChild(chatInstance);
+      await new Promise((r) => setTimeout(r, 10));
+
+      expect(slotReadySpy).toHaveBeenCalled();
+      expect(chatInstance.shadowRoot).toBeTruthy();
+
+      chatInstance.disconnectedCallback();
+    });
+
+    it("handles media queries and activity log visibility toggle", () => {
+      const root = chatInstance.shadowRoot;
+      const logEl = root.querySelector(".chat__activity-log");
+
+      chatInstance.setupActivityLogVisibility();
+
+      chatInstance.setActivityLogCollapsedOverride(true);
+      expect(logEl.classList.contains("chat__activity-log--collapsed")).toBe(
+        true,
+      );
+
+      chatInstance.setActivityLogCollapsedOverride(false);
+      expect(logEl.classList.contains("chat__activity-log--collapsed")).toBe(
+        false,
+      );
+
+      chatInstance.setActivityLogCollapsedOverride(null);
+      expect(chatInstance.activityLogCollapsedOverride).toBeNull();
+
+      chatInstance.setDropOverlayVisible(true);
+      const overlay = root.querySelector("[data-drop-overlay]");
+      if (overlay) {
+        expect(overlay.hidden).toBe(false);
+      }
+
+      chatInstance.setDropOverlayVisible(false);
+      if (overlay) {
+        expect(overlay.hidden).toBe(true);
+      }
+    });
+
+    it("handles input resize pointer, double click, and keyboard events", async () => {
+      const inputArea = document.createElement("div");
+      inputArea.className = "chat__input-area";
+      const wrapper = document.createElement("div");
+      wrapper.className = "chat__input-wrapper";
+      inputArea.appendChild(wrapper);
+
+      const handle = document.createElement("div");
+      handle.className = "chat__input-resize-handle";
+      inputArea.appendChild(handle);
+      document.body.appendChild(inputArea);
+
+      chatInstance.bindInputResizeEvents(inputArea, handle);
+
+      expect(handle.getAttribute("role")).toBe("separator");
+      expect(handle.getAttribute("tabindex")).toBe("0");
+
+      handle.setPointerCapture = jest.fn();
+
+      // Pointer down ignoring non-main mouse button
+      handle.dispatchEvent(
+        new PointerEvent("pointerdown", { pointerType: "mouse", button: 2 }),
+      );
+      expect(handle.classList.contains("active")).toBe(false);
+
+      // Pointer down with main button
+      handle.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          pointerType: "mouse",
+          button: 0,
+          clientY: 100,
+          pointerId: 1,
+        }),
+      );
+      expect(handle.classList.contains("active")).toBe(true);
+
+      // Pointer move
+      document.dispatchEvent(
+        new PointerEvent("pointermove", {
+          clientY: 50,
+          pointerId: 1,
+        }),
+      );
+
+      // Pointer up
+      handle.dispatchEvent(
+        new PointerEvent("pointerup", {
+          pointerId: 1,
+        }),
+      );
+      expect(handle.classList.contains("active")).toBe(false);
+
+      // Double click resets height
+      handle.dispatchEvent(new MouseEvent("dblclick"));
+      expect(inputArea.classList.contains("chat__input-area--resized")).toBe(
+        false,
+      );
+
+      // Keydown ArrowUp, ArrowDown, Home, End
+      handle.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowUp", shiftKey: true }),
+      );
+      handle.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
+      handle.dispatchEvent(new KeyboardEvent("keydown", { key: "Home" }));
+      handle.dispatchEvent(new KeyboardEvent("keydown", { key: "End" }));
+      handle.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" })); // Ignored
+
+      inputArea.remove();
+    });
+
+    it("handles setInputAreaHeight, resetInputAreaHeight, isCollapsedInputAreaHeight", () => {
+      const inputArea = document.createElement("div");
+      chatInstance.setInputAreaHeight(inputArea, 20); // Collapsed
+      expect(inputArea.classList.contains("chat__input-area--resized")).toBe(
+        false,
+      );
+
+      chatInstance.setInputAreaHeight(inputArea, 120); // Expanded
+      expect(inputArea.classList.contains("chat__input-area--resized")).toBe(
+        true,
+      );
+      expect(inputArea.style.getPropertyValue("--chat-input-area-height")).toBe(
+        "120px",
+      );
+
+      chatInstance.resetInputAreaHeight(inputArea);
+      expect(inputArea.classList.contains("chat__input-area--resized")).toBe(
+        false,
+      );
+    });
+
+    it("handles queueing and rendering attachments correctly", async () => {
+      document.body.appendChild(chatInstance);
+      const root = chatInstance.shadowRoot;
+
+      const file = new File(["test-content"], "test.txt", {
+        type: "text/plain",
+      });
+      const input = root.querySelector(".chat__attachment-input");
+      Object.defineProperty(input, "files", {
+        value: [file],
+        writable: true,
+      });
+
+      await chatInstance.queueSelectedFiles(input);
+
+      const pendingContainer = root.querySelector(".chat__pending-attachments");
+      expect(pendingContainer.hidden).toBe(false);
+      expect(
+        pendingContainer.querySelectorAll(".chat__pending-attachment").length,
+      ).toBe(1);
+
+      // Remove attachment chip
+      const removeBtn = pendingContainer.querySelector(
+        ".chat__pending-attachment-remove",
+      );
+      removeBtn?.dispatchEvent(new MouseEvent("click"));
+      expect(pendingContainer.hidden).toBe(true);
+
+      // Queue dropped data with files and plain text
+      const dropFile = new File(["img-data"], "photo.png", {
+        type: "image/png",
+      });
+      const dataTransfer: any = {
+        files: [dropFile],
+        types: ["Files", "text/plain"],
+        items: [
+          {
+            kind: "string",
+            type: "text/plain",
+            getAsString: (cb: any) => cb("pasted text"),
+          },
+        ],
+      };
+
+      await chatInstance.queueDroppedData(dataTransfer);
+      expect(
+        pendingContainer.querySelectorAll(".chat__pending-attachment").length,
+      ).toBe(2);
+
+      // Empty drop data
+      await chatInstance.queueDroppedData(null);
+    });
+
+    it("evaluates attachment subtitle, icons, transport labels, and model support", () => {
+      const caps = {
+        images: true,
+        audio: false,
+        video: false,
+        documents: true,
+        routerByFeatures: false,
+      };
+
+      expect(
+        chatInstance.formatAttachmentSubtitle({
+          id: "1",
+          fileName: "a.png",
+          mimeType: "image/png",
+          size: 1024,
+        }),
+      ).toBe("image/png · 1.0 KB");
+
+      expect(
+        chatInstance.formatAttachmentSubtitle({
+          id: "2",
+          fileName: "a.bin",
+        }),
+      ).toBe("Attachment");
+
+      expect(chatInstance.getAttachmentIcon("image/jpeg")).toBe("IMG");
+      expect(chatInstance.getAttachmentIcon("video/webm")).toBe("VID");
+      expect(chatInstance.getAttachmentIcon("audio/ogg")).toBe("AUD");
+      expect(chatInstance.getAttachmentIcon("application/pdf")).toBe("PDF");
+      expect(chatInstance.getAttachmentIcon("application/x-tar")).toBe("ZIP");
+      expect(chatInstance.getAttachmentIcon("unknown/binary")).toBe("BIN");
+
+      expect(
+        chatInstance.getAttachmentTransportLabel(
+          "application/custom",
+          "file.custom",
+          caps,
+        ),
+      ).toBe("fallback");
+
+      expect(
+        chatInstance.inferAttachmentModelSupport([
+          { id: "1", fileName: "a.txt", mimeType: "text/plain" },
+          { id: "2", fileName: "b.unknown", mimeType: "application/unknown" },
+        ]),
+      ).toBe(false);
+
+      expect(chatInstance.isInlineTextMimeType("application/javascript")).toBe(
+        true,
+      );
+      expect(chatInstance.isInlineTextMimeType("application/xml")).toBe(true);
+      expect(chatInstance.isInlineTextMimeType("image/png")).toBe(false);
+    });
+
+    it("renders streaming bubble with formatting and handles updates", async () => {
+      document.body.appendChild(chatInstance);
+      const root = chatInstance.shadowRoot;
+      const messages = root.querySelector(".chat__messages");
+
+      // Start streaming with text containing newlines, backticks, bold
+      await chatInstance.renderStreamingBubble(
+        "Hello\nWorld `code snippet` and **bold text**",
+      );
+
+      const streamMsg = messages.querySelector(".chat__message--streaming");
+      expect(streamMsg).toBeTruthy();
+      expect(streamMsg?.innerHTML).toContain("<code>code snippet</code>");
+      expect(streamMsg?.innerHTML).toContain("<b>bold text</b>");
+      expect(streamMsg?.innerHTML).toContain("<br>");
+
+      // Update streaming bubble
+      await chatInstance.renderStreamingBubble("Updated stream chunk");
+      expect(streamMsg?.textContent).toContain("Updated stream chunk");
+
+      // End streaming with null
+      await chatInstance.renderStreamingBubble(null);
+      expect(messages.querySelector(".chat__message--streaming")).toBeNull();
+    });
+
+    it("handles draft payload generation and budget checks", async () => {
+      document.body.appendChild(chatInstance);
+
+      // 1. Without attachments
+      const draft1 = await chatInstance.buildMessageDraftPayload("Hello agent");
+      expect(draft1?.text).toBe("Hello agent");
+      expect(draft1?.attachments).toEqual([]);
+
+      // 2. With small text file attachment
+      const smallText: any = new File(["const x = 10;"], "code.js", {
+        type: "application/javascript",
+      });
+      smallText.text = async () => "const x = 10;";
+      const input = chatInstance.shadowRoot.querySelector(
+        ".chat__attachment-input",
+      );
+      Object.defineProperty(input, "files", {
+        value: [smallText],
+        writable: true,
+      });
+      await chatInstance.queueSelectedFiles(input);
+
+      const draft2 = await chatInstance.buildMessageDraftPayload("Review this");
+      expect(draft2?.text).toContain("Attached files:");
+      expect(draft2?.text).toContain("Attached text excerpts:");
+      expect(draft2?.text).toContain("const x = 10;");
+
+      // 3. Binary attachment with dialog prompt
+      chatInstance.showAttachmentDialog = (jest.fn() as any).mockResolvedValue(
+        false,
+      );
+      const binaryFile = new File([new Uint8Array(500)], "blob.bin", {
+        type: "application/octet-stream",
+      });
+      Object.defineProperty(input, "files", {
+        value: [binaryFile],
+        writable: true,
+      });
+      await chatInstance.queueSelectedFiles(input);
+
+      const draft3Cancelled =
+        await chatInstance.buildMessageDraftPayload("Process binary");
+      expect(draft3Cancelled).toBeNull();
+    });
+
+    it("handles button clicks, message links, and textarea shortcuts", async () => {
+      document.body.appendChild(chatInstance);
+      await new Promise((r) => setTimeout(r, 25));
+      const root = chatInstance.shadowRoot;
+
+      const textarea = root.querySelector(
+        ".chat__input",
+      ) as HTMLTextAreaElement;
+      const sendBtn = root.querySelector('[data-action="send-message"]');
+      const clearBtn = root.querySelector('[data-action="clear-chat"]');
+      const stopBtn = root.querySelector('[data-action="stop-chat"]');
+      const compactBtn = root.querySelector('[data-action="compact-chat"]');
+      const attachBtn = root.querySelector('[data-action="attach-files"]');
+      const restoreBtn = root.querySelector('[data-action="restore-chat"]');
+
+      const sendSpy = jest
+        .spyOn(chatInstance, "sendMessage")
+        .mockImplementation(async () => {});
+      const clearSpy = jest
+        .spyOn(chatInstance, "handleClearChat")
+        .mockImplementation(async () => {});
+      const stopSpy = jest
+        .spyOn(chatInstance, "handleStopChat")
+        .mockImplementation(async () => {});
+      const compactSpy = jest
+        .spyOn(chatInstance, "handleCompactChat")
+        .mockImplementation(async () => {});
+
+      // Textarea keydown
+      textarea.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Enter", shiftKey: false }),
+      );
+      expect(sendSpy).toHaveBeenCalled();
+
+      textarea.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Enter",
+          ctrlKey: true,
+          shiftKey: true,
+        }),
+      );
+      expect(sendSpy).toHaveBeenCalledTimes(2);
+
+      textarea.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Enter", shiftKey: true }),
+      );
+      expect(sendSpy).toHaveBeenCalledTimes(2);
+
+      // Buttons
+      sendBtn?.dispatchEvent(new MouseEvent("click"));
+      expect(sendSpy).toHaveBeenCalledTimes(3);
+
+      clearBtn?.dispatchEvent(new MouseEvent("click"));
+      expect(clearSpy).toHaveBeenCalled();
+
+      stopBtn?.dispatchEvent(new MouseEvent("click"));
+      expect(stopSpy).toHaveBeenCalled();
+
+      compactBtn?.dispatchEvent(new MouseEvent("click"));
+      expect(compactSpy).toHaveBeenCalled();
+
+      const attachmentInput = root.querySelector(
+        ".chat__attachment-input",
+      ) as HTMLInputElement;
+      attachmentInput.click = jest.fn();
+      attachBtn?.dispatchEvent(new MouseEvent("click"));
+      expect(attachmentInput.click).toHaveBeenCalled();
+
+      const restoreInput = root.querySelector(
+        ".chat__restore-input",
+      ) as HTMLInputElement;
+      restoreInput.click = jest.fn();
+      restoreBtn?.dispatchEvent(new MouseEvent("click"));
+      expect(restoreInput.click).toHaveBeenCalled();
+
+      sendSpy.mockRestore();
+      clearSpy.mockRestore();
+      stopSpy.mockRestore();
+      compactSpy.mockRestore();
+    });
+
+    it("handles drag & drop events on chat body", async () => {
+      document.body.appendChild(chatInstance);
+      await new Promise((r) => setTimeout(r, 25));
+      const root = chatInstance.shadowRoot;
+      const chatBody = root.querySelector(".chat__body");
+
+      const queueSpy = jest
+        .spyOn(chatInstance, "queueDroppedData")
+        .mockImplementation(async () => {});
+
+      const validTransfer: any = {
+        types: ["Files"],
+        files: [new File([""], "doc.txt")],
+      };
+
+      chatBody?.dispatchEvent(
+        new DragEvent("dragenter", { dataTransfer: validTransfer }),
+      );
+      chatBody?.dispatchEvent(
+        new DragEvent("dragover", { dataTransfer: validTransfer }),
+      );
+      chatBody?.dispatchEvent(
+        new DragEvent("dragleave", { dataTransfer: validTransfer }),
+      );
+      chatBody?.dispatchEvent(
+        new DragEvent("drop", { dataTransfer: validTransfer }),
+      );
+
+      expect(queueSpy).toHaveBeenCalled();
+      queueSpy.mockRestore();
+    });
+
+    it("handles A2UI action routing for room, peer, and standard groups", async () => {
+      document.body.appendChild(chatInstance);
+      await new Promise((r) => setTimeout(r, 25));
+      const root = chatInstance.shadowRoot;
+      const messagesEl = root.querySelector(".chat__messages");
+
+      const mockRouteRoom = jest.fn();
+      const mockSendPeer = jest.fn();
+      const mockSendMessage = jest.fn();
+
+      const orch = {
+        routeRoomA2UIAction: mockRouteRoom,
+        router: {
+          findChannel: () => ({ sendA2UIAction: mockSendPeer }),
+        },
+      };
+
+      currentOrchestratorStore.orchestrator = orch;
+      currentOrchestratorStore.sendMessage = mockSendMessage;
+
+      // 1. Room A2UI action
+      messagesEl?.dispatchEvent(
+        new CustomEvent("shadow-claw-a2ui-action", {
+          detail: {
+            groupId: "room:general",
+            action: { surfaceId: "s1", actionId: "submit", dataModel: {} },
+          },
+        }),
+      );
+      await new Promise((r) => setTimeout(r, 10));
+      expect(mockRouteRoom).toHaveBeenCalledWith(
+        "room:general",
+        expect.any(Object),
+      );
+
+      // 2. Peer A2UI action
+      messagesEl?.dispatchEvent(
+        new CustomEvent("shadow-claw-a2ui-action", {
+          detail: {
+            groupId: "peer:bob",
+            action: { surfaceId: "s2", actionId: "click", dataModel: {} },
+          },
+        }),
+      );
+      await new Promise((r) => setTimeout(r, 10));
+      expect(mockSendPeer).toHaveBeenCalledWith("peer:bob", expect.any(Object));
+
+      // 3. Local group A2UI action
+      messagesEl?.dispatchEvent(
+        new CustomEvent("shadow-claw-a2ui-action", {
+          detail: {
+            groupId: "main",
+            action: {
+              surfaceId: "s3",
+              actionId: "calc",
+              dataModel: { count: 5 },
+            },
+          },
+        }),
+      );
+      await new Promise((r) => setTimeout(r, 10));
+      expect(mockSendMessage).toHaveBeenCalledWith(
+        expect.stringContaining("[A2UI ACTION]"),
+        [],
+        expect.any(Object),
+      );
+
+      // 4. Function response event
+      messagesEl?.dispatchEvent(
+        new CustomEvent("shadow-claw-a2ui-function-response", {
+          detail: {
+            groupId: "peer:bob",
+            response: { result: "ok" },
+          },
+        }),
+      );
+      await new Promise((r) => setTimeout(r, 10));
+      expect(mockSendPeer).toHaveBeenCalledWith("peer:bob", { result: "ok" });
+    });
+
+    it("handles downloadChat and restoreChat error and success paths", async () => {
+      document.body.appendChild(chatInstance);
+      chatInstance.db = mockDbInstance;
+
+      const { exportChatData } = await import("../../db/exportChatData.js");
+      const { importChatData } = await import("../../db/importChatData.js");
+      const JSZip = (await import("jszip")).default as any;
+
+      global.URL.createObjectURL = jest
+        .fn<(obj: Blob | MediaSource) => string>()
+        .mockReturnValue("blob:mock-zip");
+      global.URL.revokeObjectURL = jest.fn<(url: string) => void>();
+
+      // 1. downloadChat without db
+      chatInstance.db = null;
+      await chatInstance.downloadChat();
+
+      // 2. downloadChat when exportChatData succeeds
+      chatInstance.db = mockDbInstance;
+      (exportChatData as jest.MockedFunction<any>).mockResolvedValueOnce({
+        messages: [{ id: "1", content: "hello" }],
+        version: 1,
+      });
+      await chatInstance.downloadChat();
+
+      // 3. downloadChat when exportChatData returns null
+      (exportChatData as jest.MockedFunction<any>).mockResolvedValueOnce(null);
+      await chatInstance.downloadChat();
+
+      // 4. downloadChat when error is thrown
+      (exportChatData as jest.MockedFunction<any>).mockRejectedValueOnce(
+        new Error("disk full"),
+      );
+      await chatInstance.downloadChat();
+
+      // 5. restoreChat without db
+      chatInstance.db = null;
+      const inputNoDb = document.createElement("input");
+      await chatInstance.restoreChat(inputNoDb);
+
+      // 6. restoreChat without files
+      chatInstance.db = mockDbInstance;
+      const inputNoFiles = document.createElement("input");
+      await chatInstance.restoreChat(inputNoFiles);
+
+      // 7. restoreChat with non-zip
+      const invalidFileInput = document.createElement("input");
+      Object.defineProperty(invalidFileInput, "files", {
+        value: [new File([""], "notes.txt")],
+      });
+      await chatInstance.restoreChat(invalidFileInput);
+      expect(invalidFileInput.value).toBe("");
+
+      // 8. restoreChat with valid zip
+      const validFileInput = document.createElement("input");
+      Object.defineProperty(validFileInput, "files", {
+        value: [new File([""], "backup.zip")],
+      });
+      jest.spyOn(orchestratorStore, "loadHistory").mockResolvedValue(undefined);
+      await chatInstance.restoreChat(validFileInput);
+      expect(importChatData).toHaveBeenCalled();
+
+      // 9. restoreChat missing chat-data.json
+      const origLoadAsync = JSZip.loadAsync;
+      JSZip.loadAsync = jest
+        .fn<(...args: any[]) => Promise<any>>()
+        .mockResolvedValue({
+          file: () => null,
+        });
+      const inputNoData = document.createElement("input");
+      Object.defineProperty(inputNoData, "files", {
+        value: [new File([""], "empty.zip")],
+      });
+      await chatInstance.restoreChat(inputNoData);
+
+      // 10. restoreChat invalid messages array
+      JSZip.loadAsync = jest
+        .fn<(...args: any[]) => Promise<any>>()
+        .mockResolvedValue({
+          file: () => ({
+            async: async () => JSON.stringify({ notAnArray: true }),
+          }),
+        });
+      const inputBadData = document.createElement("input");
+      Object.defineProperty(inputBadData, "files", {
+        value: [new File([""], "baddata.zip")],
+      });
+      await chatInstance.restoreChat(inputBadData);
+
+      // 11. restoreChat throws error
+      JSZip.loadAsync = jest
+        .fn<(...args: any[]) => Promise<any>>()
+        .mockRejectedValue(new Error("corrupted zip"));
+      const inputCorrupt = document.createElement("input");
+      Object.defineProperty(inputCorrupt, "files", {
+        value: [new File([""], "corrupt.zip")],
+      });
+      await chatInstance.restoreChat(inputCorrupt);
+
+      JSZip.loadAsync = origLoadAsync;
+    });
+
+    it("handles downloadAttachment and openAttachment errors and edge cases", async () => {
+      // 1. Without db
+      chatInstance.db = null;
+      await chatInstance.downloadAttachment("main", {
+        id: "1",
+        fileName: "a.txt",
+      });
+      await chatInstance.openAttachment("main", { id: "1", fileName: "a.txt" });
+
+      // 2. With db but without path
+      chatInstance.db = mockDbInstance;
+      await chatInstance.downloadAttachment("main", {
+        id: "1",
+        fileName: "a.txt",
+      });
+      await chatInstance.openAttachment("main", { id: "1", fileName: "a.txt" });
+
+      // 3. With path and error thrown
+      const { downloadGroupFile } =
+        await import("../../storage/downloadGroupFile.js");
+      const { fileViewerStore } = await import("../../stores/file-viewer.js");
+
+      (downloadGroupFile as jest.MockedFunction<any>).mockRejectedValueOnce(
+        new Error("download error"),
+      );
+      await chatInstance.downloadAttachment("main", {
+        id: "1",
+        fileName: "a.txt",
+        path: "a.txt",
+      });
+
+      (
+        fileViewerStore.openFile as jest.MockedFunction<any>
+      ).mockRejectedValueOnce(new Error("open error"));
+      await chatInstance.openAttachment("main", {
+        id: "1",
+        fileName: "a.txt",
+        path: "a.txt",
+      });
+    });
+
+    it("handles showAttachmentDialog fallbacks with and without host", async () => {
+      // 1. Without shadow-claw host in DOM
+      const infoResult = await chatInstance.showAttachmentDialog({
+        mode: "info",
+        title: "Info Dialog",
+        message: "Some info message",
+      });
+      expect(infoResult).toBe(true);
+
+      const confirmResult = await chatInstance.showAttachmentDialog({
+        mode: "confirm",
+        title: "Confirm Dialog",
+        message: "Are you sure?",
+      });
+      expect(confirmResult).toBe(false);
+
+      // 2. With shadow-claw host in DOM
+      const host = document.createElement("shadow-claw") as any;
+      host.requestDialog = (jest.fn() as any).mockResolvedValue(true);
+      document.body.appendChild(host);
+
+      const hostResult = await chatInstance.showAttachmentDialog({
+        mode: "confirm",
+        title: "Confirm",
+        message: "Test",
+      });
+      expect(hostResult).toBe(true);
+      expect(host.requestDialog).toHaveBeenCalled();
+      host.remove();
+    });
+
+    it("handles sendMessage execution, initializing guard, and errors", async () => {
+      document.body.appendChild(chatInstance);
+      const root = chatInstance.shadowRoot;
+      const input = root.querySelector(".chat__input") as HTMLTextAreaElement;
+
+      // 1. Empty message and no queued attachments
+      input.value = "   ";
+      await chatInstance.sendMessage();
+
+      // 2. Ready is false
+      input.value = "hello";
+      currentOrchestratorStore.ready = false;
+      await chatInstance.sendMessage();
+
+      // 3. Ready is true - successful send
+      currentOrchestratorStore.ready = true;
+      currentOrchestratorStore.sendMessage = jest.fn();
+      await chatInstance.sendMessage();
+
+      expect(currentOrchestratorStore.sendMessage).toHaveBeenCalledWith(
+        "hello",
+        [],
+      );
+      expect(input.value).toBe("");
+
+      // 4. Draft generation returns null
+      input.value = "draft fail";
+      chatInstance.buildMessageDraftPayload = (
+        jest.fn() as any
+      ).mockResolvedValue(null);
+      await chatInstance.sendMessage();
+
+      // 5. Send message error
+      input.value = "error message";
+      chatInstance.buildMessageDraftPayload = (
+        jest.fn() as any
+      ).mockResolvedValue({ text: "error", attachments: [] });
+      currentOrchestratorStore.sendMessage = jest
+        .fn()
+        .mockImplementation(() => {
+          throw new Error("send failure");
+        });
+      await chatInstance.sendMessage();
+    });
+
+    it("handles handleMessageLinkClick navigation and modifier keys", async () => {
+      const container = document.createElement("div");
+      const anchor = document.createElement("a");
+      anchor.setAttribute("href", "docs/guide.md");
+      container.appendChild(anchor);
+
+      const { handleSpecialLinkNavigation } =
+        await import("../../utils/utils.js");
+      (handleSpecialLinkNavigation as jest.MockedFunction<any>).mockReturnValue(
+        true,
+      );
+
+      const evt1 = new MouseEvent("click", { button: 0, cancelable: true });
+      anchor.dispatchEvent(evt1);
+      await chatInstance.handleMessageLinkClick(evt1);
+      expect(evt1.defaultPrevented).toBe(true);
+
+      // With modifier key (e.g. metaKey)
+      const evt2 = new MouseEvent("click", {
+        button: 0,
+        metaKey: true,
+        cancelable: true,
+      });
+      await chatInstance.handleMessageLinkClick(evt2);
+      expect(evt2.defaultPrevented).toBe(false);
+
+      // Middle click
+      const evt3 = new MouseEvent("click", { button: 1, cancelable: true });
+      await chatInstance.handleMessageLinkClick(evt3);
+
+      // Non anchor target
+      const evt4 = new MouseEvent("click", { button: 0, cancelable: true });
+      container.dispatchEvent(evt4);
+      await chatInstance.handleMessageLinkClick(evt4);
+    });
+
+    it("handles resolveImagePaths for workspace images and PDFs", async () => {
+      chatInstance.db = mockDbInstance;
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <img data-inline-workspace-src="photo.png" alt="photo">
+        <img data-inline-workspace-src="photo.svg" alt="photo">
+        <img data-inline-workspace-src="doc.pdf" alt="doc">
+        <a href="manual.pdf">User Manual</a>
+      `;
+
+      await chatInstance.resolveImagePaths("main", container);
+
+      expect(container.querySelector("shadow-claw-pdf-viewer")).toBeTruthy();
+      const img = container.querySelector("img") as HTMLImageElement;
+      if (img) {
+        img.dispatchEvent(new Event("load"));
+      }
+    });
+
+    it("handles renderInlineAttachmentPreview and renderMessageAttachments", async () => {
+      chatInstance.db = mockDbInstance;
+
+      const msg = {
+        id: "m1",
+        groupId: "main",
+        attachments: [
+          {
+            id: "a1",
+            fileName: "screenshot.png",
+            mimeType: "image/png",
+            path: "screenshot.png",
+            previewDisposition: "inline",
+          },
+          {
+            id: "a2",
+            fileName: "data.csv",
+            mimeType: "text/csv",
+            path: "data.csv",
+            previewDisposition: "file",
+          },
+        ],
+      } as any;
+
+      const preview = await chatInstance.renderInlineAttachmentPreview(
+        msg,
+        msg.attachments[0],
+      );
+      expect(preview).toBeTruthy();
+
+      const renderedAttachments =
+        await chatInstance.renderMessageAttachments(msg);
+      expect(renderedAttachments).toBeTruthy();
+      expect(
+        renderedAttachments?.querySelectorAll(".chat__attachment").length,
+      ).toBe(2);
+
+      // Null attachments
+      expect(
+        await chatInstance.renderMessageAttachments({ id: "m2" } as any),
+      ).toBeNull();
+    });
+
+    it("renders code copy buttons and handles copy clicks", async () => {
+      const container = document.createElement("div");
+      container.innerHTML = "<pre><code>console.log('test')</code></pre>";
+
+      Object.assign(navigator, {
+        clipboard: {
+          writeText: jest
+            .fn<(text: string) => Promise<void>>()
+            .mockResolvedValue(undefined),
+        },
+      });
+
+      chatInstance.injectCopyButtons(container);
+
+      const copyBtn = container.querySelector(
+        ".chat__code-copy-btn",
+      ) as HTMLButtonElement;
+      expect(copyBtn).toBeTruthy();
+
+      copyBtn.click();
+      await new Promise((r) => setTimeout(r, 10));
+
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        "console.log('test')",
+      );
+
+      // Failure branch
+      Object.assign(navigator, {
+        clipboard: {
+          writeText: jest
+            .fn<(text: string) => Promise<void>>()
+            .mockRejectedValue(new Error("denied")),
+        },
+      });
+      copyBtn.click();
+      await new Promise((r) => setTimeout(r, 10));
+    });
+
+    it("handles setupEffects message rendering and all reactive panels", async () => {
+      document.body.appendChild(chatInstance);
+      chatInstance.db = mockDbInstance;
+      await new Promise((r) => setTimeout(r, 25));
+
+      const root = chatInstance.shadowRoot;
+
+      // 1. Token usage accumulator
+      Object.defineProperty(currentOrchestratorStore, "tokenUsageAccumulator", {
+        get: () => ({
+          inputTokens: 150,
+          outputTokens: 75,
+          cacheReadTokens: 50,
+          totalTokens: 225,
+        }),
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      const tokenUsageEl = root.querySelector(".chat__token-usage");
+      expect(
+        tokenUsageEl.classList.contains("chat__token-usage--visible"),
+      ).toBe(true);
+
+      // 2. Token usage reset
+      Object.defineProperty(currentOrchestratorStore, "tokenUsageAccumulator", {
+        get: () => null,
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      expect(
+        tokenUsageEl.classList.contains("chat__token-usage--visible"),
+      ).toBe(false);
+
+      // 3. Context usage
+      Object.defineProperty(currentOrchestratorStore, "contextUsage", {
+        get: () => ({
+          estimatedTokens: 900,
+          contextLimit: 1000,
+          usagePercent: 90,
+          truncatedCount: 2,
+        }),
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      const contextUsageEl = root.querySelector(".chat__context-usage");
+      expect(
+        contextUsageEl.classList.contains("chat__context-usage--visible"),
+      ).toBe(true);
+
+      Object.defineProperty(currentOrchestratorStore, "contextUsage", {
+        get: () => null,
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      expect(
+        contextUsageEl.classList.contains("chat__context-usage--visible"),
+      ).toBe(false);
+
+      // 4. AGUI and Tool activity
+      Object.defineProperty(currentOrchestratorStore, "aguiEvent", {
+        get: () => ({
+          event: { type: "TOOL_CALL_START", toolCallName: "file_search" },
+        }),
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      const toolEl = root.querySelector(".chat__tool-activity");
+      expect(toolEl.classList.contains("chat__tool-activity--active")).toBe(
+        true,
+      );
+
+      Object.defineProperty(currentOrchestratorStore, "aguiEvent", {
+        get: () => null,
+        configurable: true,
+      });
+      Object.defineProperty(currentOrchestratorStore, "toolActivity", {
+        get: () => ({ tool: "bash" }),
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      expect(toolEl.textContent).toContain("bash");
+
+      Object.defineProperty(currentOrchestratorStore, "toolActivity", {
+        get: () => null,
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      expect(toolEl.classList.contains("chat__tool-activity--active")).toBe(
+        false,
+      );
+
+      // 5. Model download progress
+      Object.defineProperty(currentOrchestratorStore, "modelDownloadProgress", {
+        get: () => ({ progress: 0.8, message: "Loading model..." }),
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      const modelProgressEl = root.querySelector(".chat__model-progress");
+      expect(
+        modelProgressEl.classList.contains("chat__model-progress--active"),
+      ).toBe(true);
+
+      Object.defineProperty(currentOrchestratorStore, "modelDownloadProgress", {
+        get: () => null,
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      expect(
+        modelProgressEl.classList.contains("chat__model-progress--active"),
+      ).toBe(false);
+
+      // 6. Activity log
+      Object.defineProperty(currentOrchestratorStore, "activityLog", {
+        get: () => [
+          { level: "info", label: "Planner", message: "Starting plan" },
+          { level: "warn", label: "Tool", message: "Retry attempt" },
+        ],
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      const actLogEl = root.querySelector(".chat__activity-log");
+      expect(actLogEl.classList.contains("chat__activity-log--active")).toBe(
+        true,
+      );
+      const copyActBtn = actLogEl.querySelector(
+        ".chat__activity-log__copy-btn",
+      ) as HTMLButtonElement;
+      copyActBtn?.click();
+
+      Object.defineProperty(currentOrchestratorStore, "activityLog", {
+        get: () => [],
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      expect(actLogEl.classList.contains("chat__activity-log--active")).toBe(
+        false,
+      );
+
+      // 7. Shared state
+      currentOrchestratorStore.getPeerState = jest
+        .fn()
+        .mockReturnValue({ topic: "AI" });
+      chatInstance.setupEffects();
+      const sharedStateEl = root.querySelector(".chat__shared-state");
+      expect(sharedStateEl.hidden).toBe(false);
+
+      currentOrchestratorStore.getPeerState = jest.fn().mockReturnValue({});
+      chatInstance.setupEffects();
+      expect(sharedStateEl.hidden).toBe(true);
+
+      // 8. Orchestrator states: thinking, error
+      Object.defineProperty(currentOrchestratorStore, "state", {
+        get: () => "thinking",
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      const statusText = root.querySelector(".chat__status-text");
+      expect(statusText.textContent).toBe("Thinking");
+
+      Object.defineProperty(currentOrchestratorStore, "state", {
+        get: () => "error",
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      expect(statusText.textContent).toBe("Error");
+
+      // 9. Error toast
+      currentOrchestratorStore.clearError = jest.fn();
+      Object.defineProperty(currentOrchestratorStore, "error", {
+        get: () => "Connection lost",
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      expect(currentOrchestratorStore.clearError).toHaveBeenCalled();
+
+      Object.defineProperty(currentOrchestratorStore, "error", {
+        get: () => null,
+        configurable: true,
+      });
+
+      // 10. Messages rendering effect with user, assistant, a2ui, attachments
+      Object.defineProperty(currentOrchestratorStore, "messages", {
+        get: () => [
+          {
+            id: "m-user",
+            groupId: "main",
+            isFromMe: false,
+            sender: "User",
+            content: "Hello assistant",
+            timestamp: 1700000000000,
+          },
+          {
+            id: "m-asst",
+            groupId: "main",
+            isFromMe: true,
+            content: "```js\nconsole.log(1)\n```\nHere is response",
+            timestamp: 1700000001000,
+            attachments: [
+              {
+                id: "att-1",
+                fileName: "data.txt",
+                mimeType: "text/plain",
+                path: "data.txt",
+              },
+            ],
+            a2uiEnvelopes: [{ surfaceId: "s1", component: "card" }],
+          },
+          {
+            id: "m-a2ui",
+            groupId: "main",
+            isFromMe: false,
+            a2uiAction: { surfaceId: "s1" },
+            content: "[A2UI ACTION] dummy",
+          },
+        ],
+        configurable: true,
+      });
+      chatInstance.setupEffects();
+      await new Promise((r) => setTimeout(r, 60));
+
+      const messagesContainer = root.querySelector(".chat__messages");
+      expect(
+        messagesContainer.querySelectorAll(".chat__message").length,
+      ).toBeGreaterThanOrEqual(2);
+
+      // Test copy and delete buttons injected on message
+      const msgCopyBtn = messagesContainer.querySelector(
+        ".chat__message-copy-btn",
+      ) as HTMLButtonElement;
+      msgCopyBtn?.click();
+
+      const msgDeleteBtn = messagesContainer.querySelector(
+        ".chat__message-delete-btn",
+      ) as HTMLButtonElement;
+      chatInstance.showAttachmentDialog = jest
+        .fn<(...args: any[]) => Promise<boolean>>()
+        .mockResolvedValue(true);
+      msgDeleteBtn?.click();
+    });
+
+    it("handles restoreInputAreaHeight with saved configurations", async () => {
+      document.body.appendChild(chatInstance);
+
+      const createConfigDb = (val: any) => ({
+        transaction: jest.fn().mockReturnValue({
+          objectStore: jest.fn().mockReturnValue({
+            get: jest
+              .fn<(...args: any[]) => any>()
+              .mockImplementation((...getArgs: any[]) => {
+                const key = getArgs[0];
+                const req: any = {
+                  result: { key, value: val },
+                };
+                queueMicrotask(() => req.onsuccess?.({ target: req }));
+                return req;
+              }),
+          }),
+        }),
+      });
+
+      const inputArea =
+        chatInstance.shadowRoot.querySelector(".chat__input-area");
+
+      // 1. Without db
+      chatInstance.db = null;
+      await chatInstance.restoreInputAreaHeight();
+
+      // 2. With finite positive height > 40
+      chatInstance.db = createConfigDb(120);
+      await chatInstance.restoreInputAreaHeight();
+      expect(inputArea.style.getPropertyValue("--chat-input-area-height")).toBe(
+        "120px",
+      );
+
+      // 3. With collapsed height (<= 40)
+      chatInstance.db = createConfigDb(30);
+      await chatInstance.restoreInputAreaHeight();
+      expect(inputArea.style.getPropertyValue("--chat-input-area-height")).toBe(
+        "",
+      );
+    });
+
+    it("handles large text attachment budget exceed and large file skips in draft", async () => {
+      document.body.appendChild(chatInstance);
+
+      // 1. Text attachment larger than INLINE_ATTACHMENT_MAX_BYTES (128KB)
+      const largeText: any = new File(["x".repeat(130 * 1024)], "large.txt", {
+        type: "text/plain",
+      });
+      largeText.text = async () => "x".repeat(130 * 1024);
+
+      const input = chatInstance.shadowRoot.querySelector(
+        ".chat__attachment-input",
+      );
+      Object.defineProperty(input, "files", {
+        value: [largeText],
+        writable: true,
+      });
+      await chatInstance.queueSelectedFiles(input);
+
+      const draft = await chatInstance.buildMessageDraftPayload("Prompt");
+      expect(draft?.text).toContain(
+        "Skipped inline content because the file is larger than",
+      );
+
+      // 2. Budget exceeded dialog (> 80_000 chars)
+      chatInstance.showAttachmentDialog = (jest.fn() as any).mockResolvedValue(
+        true,
+      );
+      const mediumText: any = new File(["a".repeat(85000)], "med.txt", {
+        type: "text/plain",
+      });
+      mediumText.text = async () => "a".repeat(85000);
+
+      Object.defineProperty(input, "files", {
+        value: [mediumText],
+        writable: true,
+      });
+      await chatInstance.queueSelectedFiles(input);
+
+      const draftOverBudget =
+        await chatInstance.buildMessageDraftPayload("Prompt 2");
+      expect(draftOverBudget).toBeNull();
+      expect(chatInstance.showAttachmentDialog).toHaveBeenCalled();
+    });
+
+    it("exercises checkPromptApiOnboarding, confirmPromptApiOnboarding, bypassPromptApiOnboardingToSettings", async () => {
+      document.body.appendChild(chatInstance);
+      chatInstance.db = mockDbInstance;
+
+      const checkSpy = jest
+        .spyOn(chatInstance, "checkPromptApiOnboarding")
+        .mockImplementation(async () => {});
+      const confirmSpy = jest
+        .spyOn(chatInstance, "confirmPromptApiOnboarding")
+        .mockImplementation(async () => {});
+      const bypassSpy = jest
+        .spyOn(chatInstance, "bypassPromptApiOnboardingToSettings")
+        .mockImplementation(async () => {});
+
+      await chatInstance.checkPromptApiOnboarding();
+      expect(checkSpy).toHaveBeenCalled();
+
+      await chatInstance.confirmPromptApiOnboarding();
+      expect(confirmSpy).toHaveBeenCalled();
+
+      await chatInstance.bypassPromptApiOnboardingToSettings();
+      expect(bypassSpy).toHaveBeenCalled();
+
+      checkSpy.mockRestore();
+      confirmSpy.mockRestore();
+      bypassSpy.mockRestore();
+    });
+  });
 });