From 90774d60a873c8f17ed1fb220a6a68da2977362a Mon Sep 17 00:00:00 2001
From: Raman Shekhawat <raman.s@parity.io>
Date: Mon, 17 Aug 2026 18:14:26 +0545
Subject: [PATCH] feat: Product chat

---
 README.md                                     |  15 +
 apps/host/index.html                          |  61 ++-
 apps/host/src/main.ts                         |  26 ++
 packages/shared/src/chat-capability.ts        | 107 +++++
 packages/shared/tests/chat-capability.test.ts |  80 ++++
 packages/storage/src/chat.ts                  | 132 ++++++
 packages/storage/src/db.ts                    |  17 +-
 packages/storage/tests/chat.test.ts           |  83 ++++
 packages/ui/src/bridge.ts                     |  18 +-
 packages/ui/src/chat/panel.ts                 | 413 ++++++++++++++++++
 packages/ui/src/chat/service.ts               | 150 +++++++
 packages/ui/src/host-callbacks/Chat.ts        |  90 ++++
 packages/ui/src/host-callbacks/Theme.ts       |  16 +-
 packages/ui/src/host-callbacks/handlers.ts    |   4 +
 packages/ui/src/styles/themes.css             |  50 +++
 packages/ui/src/styles/topbar.css             | 195 +++++++++
 packages/ui/src/topbar.ts                     |   4 +
 packages/ui/tests/chat-panel.test.ts          | 166 +++++++
 packages/ui/tests/theme.test.ts               |  15 +-
 19 files changed, 1630 insertions(+), 12 deletions(-)
 create mode 100644 packages/shared/src/chat-capability.ts
 create mode 100644 packages/shared/tests/chat-capability.test.ts
 create mode 100644 packages/storage/src/chat.ts
 create mode 100644 packages/storage/tests/chat.test.ts
 create mode 100644 packages/ui/src/chat/panel.ts
 create mode 100644 packages/ui/src/chat/service.ts
 create mode 100644 packages/ui/src/host-callbacks/Chat.ts
 create mode 100644 packages/ui/tests/chat-panel.test.ts

diff --git a/README.md b/README.md
index 55e9e835..cf812c95 100644
--- a/README.md
+++ b/README.md
@@ -130,6 +130,21 @@ Loaded SPAs communicate with dotli through a postMessage-based protocol. The bri
 | `navigateTo`                   | Opens URLs in new tabs                                                 |
 | `featureSupported`             | Reports whether a feature is supported (e.g. a chain's genesis hash)   |
 | `connectionStatus`             | Streams auth state changes to the SPA                                  |
+| `chat.*`                       | Product chat: rooms and messages persisted locally, rendered in the topbar chat panel |
+
+### Product chat
+
+Products that declare `includes.chat` in their `worker.<label>.<tld>`
+executable manifest get a Chat-kind TrUAPI execution and a chat button in
+the topbar. The product drives the conversation over the core's chat
+surface (`chat.create_room`, `chat.post_message`, `chat.list_subscribe`,
+`chat.action_subscribe`); the user replies from the docked chat panel, and
+each reply reaches the product as a `MessagePosted` action. Rooms and
+messages persist in IndexedDB on the product origin and never leave the
+device. The core denies chat calls without an active session, so chat
+requires being logged in. The localhost debug paths enable chat
+unconditionally so local products can be tested without publishing a
+manifest.
 
 ### App iframe model
 
diff --git a/apps/host/index.html b/apps/host/index.html
index 7d834c9d..472e9565 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -17,7 +17,7 @@
             // before main.ts executes. Overlaps IDB open (~10-50ms) with
             // module loading. Picked up by src/db.ts via window.__dotliDb.
             window.__dotliDb = new Promise(function(resolve, reject) {
-                var req = indexedDB.open("dotli", 2);
+                var req = indexedDB.open("dotli", 3);
                 req.onupgradeneeded = function() {
                     var db = req.result;
                     if (!db.objectStoreNames.contains("cids"))
@@ -32,6 +32,13 @@
                     }
                     if (!db.objectStoreNames.contains("notification_counters"))
                         db.createObjectStore("notification_counters", { keyPath: "productId" });
+                    // v3: product chat rooms and messages.
+                    if (!db.objectStoreNames.contains("chat_rooms"))
+                        db.createObjectStore("chat_rooms", { keyPath: ["productId", "roomId"] });
+                    if (!db.objectStoreNames.contains("chat_messages")) {
+                        var c = db.createObjectStore("chat_messages", { keyPath: "seq", autoIncrement: true });
+                        c.createIndex("byRoom", ["productId", "roomId"], { unique: false });
+                    }
                 };
                 req.onsuccess = function() { resolve(req.result); };
                 req.onerror = function() { reject(new Error("IDB open failed")); };
@@ -87,6 +94,20 @@
                         <circle cx="12" cy="7" r="4"/>
                     </svg>
                 </button>
+                <button
+                    id="chat-button"
+                    class="topbar-btn"
+                    title="Chat"
+                    aria-label="Chat"
+                    aria-expanded="false"
+                    aria-controls="chat-panel"
+                    hidden
+                >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                    </svg>
+                    <span class="chat-unread-badge" id="chat-unread-badge" hidden></span>
+                </button>
                 <button
                     id="permissions-button"
                     class="topbar-btn"
@@ -159,6 +180,12 @@
                     </span>
                 </button>
                 <div class="more-popover" id="more-popover">
+                    <button class="more-row" id="more-row-chat" data-target="chat-button" hidden>
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                        </svg>
+                        <span>Chat</span>
+                    </button>
                     <button class="more-row" data-target="permissions-button">
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
@@ -256,6 +283,38 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
             <div class="permissions-popover-list" id="permissions-popover-list"></div>
         </div>
 
+        <!-- Chat Panel (docked right; the panel runtime shrinks the product
+             iframe while open, mirroring the debug panel's right dock) -->
+        <aside class="chat-panel" id="chat-panel" role="complementary" aria-label="Product chat" hidden>
+            <div class="chat-panel-resize" id="chat-panel-resize" aria-hidden="true"></div>
+            <div class="chat-panel-header">
+                <span class="chat-panel-title" id="chat-panel-title">Chat</span>
+                <button class="chat-panel-close" id="chat-panel-close" title="Close chat" aria-label="Close chat">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="chat-panel-rooms" id="chat-panel-rooms" role="tablist" aria-label="Chat rooms" hidden></div>
+            <div class="chat-panel-messages" id="chat-panel-messages" aria-live="polite"></div>
+            <p class="chat-panel-hint" id="chat-panel-hint" hidden></p>
+            <form class="chat-panel-composer" id="chat-panel-composer">
+                <input
+                    id="chat-panel-input"
+                    class="chat-panel-input"
+                    type="text"
+                    placeholder="Message"
+                    autocomplete="off"
+                    maxlength="4000"
+                />
+                <button type="submit" class="chat-panel-send" id="chat-panel-send" title="Send" aria-label="Send">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                    </svg>
+                </button>
+            </form>
+        </aside>
+
         <!-- App Content -->
         <div id="app">
             <div class="loading">
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index b7f3d67a..6db1a32a 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -62,6 +62,10 @@ import {
   setActiveAppManifest,
   setActiveRootManifest,
 } from "@dotli/shared/active-manifest";
+import {
+  primeChatCapability,
+  setChatCapability,
+} from "@dotli/shared/chat-capability";
 import type {
   ExecutableManifest,
   ManifestResult,
@@ -1028,6 +1032,9 @@ async function main(): Promise<void> {
       urlBar.innerHTML = `<div class="topbar-url-pill localhost-pill" id="url-pill"><svg class="localhost-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg><span class="topbar-url-text"><span class="dot-domain">${escapeHtml(host)}</span></span></div>`;
     }
 
+    // Local products carry no worker manifest to read the chat flag from,
+    // so the debug paths enable chat unconditionally for product testing.
+    setChatCapability(host, true);
     const { renderIframe } = await bridgeModulePromise;
     await renderIframe(previewTargetUrl, host, {
       productId: productIdOverride,
@@ -1067,6 +1074,7 @@ async function main(): Promise<void> {
       urlBar.innerHTML = `<div class="topbar-url-pill localhost-pill" id="url-pill"><svg class="localhost-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg><span class="topbar-url-text"><span class="dot-domain">${escapeHtml(host)}</span></span></div>`;
     }
 
+    setChatCapability(host, true);
     const { renderIframe } = await bridgeModulePromise;
     await renderIframe(localhostUrl, host, { productId: productIdOverride });
 
@@ -1118,6 +1126,24 @@ async function main(): Promise<void> {
 
   initScheduledNotifications({ label });
 
+  // Resolve the worker manifest's `includes.chat` in parallel with CID
+  // resolution. The bridge awaits this before creating the product's core
+  // provider (it decides the connection's execution kind), and the topbar
+  // uses the announced value to gate the chat button.
+  primeChatCapability(label, async () => {
+    const result =
+      chainBackend === "rpc-gateway"
+        ? await (
+            await import("@dotli/resolver/rpc-resolve")
+          ).resolveExecutableManifestViaRpc(label, "worker")
+        : await resolveExecutableManifestRemote(label, "worker");
+    return (
+      result.kind === "ok" &&
+      result.value.kind === "worker" &&
+      result.value.includes.chat
+    );
+  });
+
   // Pre-load render chunk in parallel (overlap with CID resolution)
   const renderChunkPromise: Promise<RenderChunk> = import("@dotli/ui/bridge");
   void renderChunkPromise.catch(() => {
diff --git a/packages/shared/src/chat-capability.ts b/packages/shared/src/chat-capability.ts
new file mode 100644
index 00000000..ea1fb86f
--- /dev/null
+++ b/packages/shared/src/chat-capability.ts
@@ -0,0 +1,107 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: AGPL-3.0-only
+
+// Whether the loaded product declares chat support, read from the worker
+// executable manifest's `includes.chat` on `worker.<label>.<tld>`.
+//
+// The host shell primes this before rendering so the TrUAPI bridge can
+// pick the product connection's execution kind ("Chat" vs "Spa") when it
+// creates the provider, and the topbar can gate the chat button. The last
+// resolved value is cached in localStorage per label so warm loads (cached
+// CID) do not stall provider creation on a dotNS text-record read.
+
+const CACHE_PREFIX = "dotli:chat-capable:";
+
+/** Window event announcing a settled chat capability for a label. */
+export const CHAT_AVAILABILITY_EVENT = "dotli:chat-availability";
+
+export interface ChatAvailabilityDetail {
+  label: string;
+  chat: boolean;
+}
+
+let activeLabel: string | null = null;
+let activePromise: Promise<boolean> | null = null;
+
+function readCache(label: string): boolean | null {
+  try {
+    const raw = localStorage.getItem(`${CACHE_PREFIX}${label}`);
+    return raw === null ? null : raw === "1";
+  } catch {
+    return null;
+  }
+}
+
+function writeCache(label: string, value: boolean): void {
+  try {
+    localStorage.setItem(`${CACHE_PREFIX}${label}`, value ? "1" : "0");
+    // eslint-disable-next-line no-restricted-syntax -- localStorage may be unavailable (private mode); only the warm-start shortcut is lost.
+  } catch {
+    /* capability still resolves for this load */
+  }
+}
+
+function announce(label: string, chat: boolean): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.dispatchEvent(
+    new CustomEvent<ChatAvailabilityDetail>(CHAT_AVAILABILITY_EVENT, {
+      detail: { label, chat },
+    }),
+  );
+}
+
+/**
+ * Prime the capability for the product being rendered. The cached value
+ * answers immediately when present; `resolve` always runs to refresh the
+ * cache and re-announce, so a stale cache corrects itself on the next load.
+ */
+export function primeChatCapability(
+  label: string,
+  resolve: () => Promise<boolean>,
+): void {
+  activeLabel = label;
+  const cached = readCache(label);
+  const fresh = resolve().then(
+    (value) => {
+      writeCache(label, value);
+      announce(label, value);
+      return value;
+    },
+    () => {
+      // An unreadable manifest means no chat this load; keep any cached
+      // value for the next one rather than overwriting it with a failure.
+      announce(label, cached ?? false);
+      return cached ?? false;
+    },
+  );
+  activePromise = cached === null ? fresh : Promise.resolve(cached);
+  if (cached !== null) {
+    announce(label, cached);
+  }
+}
+
+/** Force a known capability, used by the localhost product debug path. */
+export function setChatCapability(label: string, chat: boolean): void {
+  activeLabel = label;
+  activePromise = Promise.resolve(chat);
+  announce(label, chat);
+}
+
+/**
+ * Capability for `label`, resolving `false` when nothing was primed or a
+ * different product is active.
+ */
+export function chatCapabilityFor(label: string): Promise<boolean> {
+  if (activeLabel !== label || activePromise === null) {
+    return Promise.resolve(false);
+  }
+  return activePromise;
+}
+
+/** Reset module state (tests only). */
+export function resetChatCapabilityForTests(): void {
+  activeLabel = null;
+  activePromise = null;
+}
diff --git a/packages/shared/tests/chat-capability.test.ts b/packages/shared/tests/chat-capability.test.ts
new file mode 100644
index 00000000..953bdad1
--- /dev/null
+++ b/packages/shared/tests/chat-capability.test.ts
@@ -0,0 +1,80 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  CHAT_AVAILABILITY_EVENT,
+  chatCapabilityFor,
+  primeChatCapability,
+  resetChatCapabilityForTests,
+  setChatCapability,
+  type ChatAvailabilityDetail,
+} from "@dotli/shared/chat-capability";
+
+function nextAnnouncement(): Promise<ChatAvailabilityDetail> {
+  return new Promise((resolve) => {
+    window.addEventListener(
+      CHAT_AVAILABILITY_EVENT,
+      (event) => {
+        resolve((event as CustomEvent<ChatAvailabilityDetail>).detail);
+      },
+      { once: true },
+    );
+  });
+}
+
+describe("chat capability", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    resetChatCapabilityForTests();
+  });
+
+  it("As the bridge, an unprimed label resolves to no chat", async () => {
+    expect(await chatCapabilityFor("unknown")).toBe(false);
+  });
+
+  it("As the bridge, priming resolves from the manifest and announces", async () => {
+    const announced = nextAnnouncement();
+
+    primeChatCapability("myapp", () => Promise.resolve(true));
+
+    expect(await chatCapabilityFor("myapp")).toBe(true);
+    expect(await announced).toEqual({ label: "myapp", chat: true });
+    expect(await chatCapabilityFor("other")).toBe(false);
+  });
+
+  it("As the bridge, a cached value answers without waiting on the resolver", async () => {
+    localStorage.setItem("dotli:chat-capable:myapp", "1");
+    const resolver = vi.fn(() => new Promise<boolean>(() => undefined));
+
+    primeChatCapability("myapp", resolver);
+
+    expect(await chatCapabilityFor("myapp")).toBe(true);
+    expect(resolver).toHaveBeenCalledOnce();
+  });
+
+  it("As the bridge, a fresh resolve updates the cache for the next load", async () => {
+    const announced = nextAnnouncement();
+    primeChatCapability("myapp", () => Promise.resolve(true));
+    await announced;
+
+    expect(localStorage.getItem("dotli:chat-capable:myapp")).toBe("1");
+  });
+
+  it("As the bridge, a failed resolve falls back to the cached value", async () => {
+    localStorage.setItem("dotli:chat-capable:myapp", "1");
+    const announced = nextAnnouncement();
+
+    primeChatCapability("myapp", () => Promise.reject(new Error("offline")));
+
+    expect(await chatCapabilityFor("myapp")).toBe(true);
+    expect(await announced).toEqual({ label: "myapp", chat: true });
+    expect(localStorage.getItem("dotli:chat-capable:myapp")).toBe("1");
+  });
+
+  it("As the debug path, a forced capability answers immediately", async () => {
+    setChatCapability("localhost:5173", true);
+
+    expect(await chatCapabilityFor("localhost:5173")).toBe(true);
+  });
+});
diff --git a/packages/storage/src/chat.ts b/packages/storage/src/chat.ts
new file mode 100644
index 00000000..59f6fe23
--- /dev/null
+++ b/packages/storage/src/chat.ts
@@ -0,0 +1,132 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: AGPL-3.0-only
+
+/**
+ * Persistent IDB store for product chat rooms and messages.
+ *
+ * Product chat is a local conversation between the user and the loaded
+ * product; nothing here leaves the device. Records live on the product
+ * origin, so each product's rooms and messages are isolated by the
+ * browser's same-origin storage boundary, same as the CID cache.
+ *
+ * The message `content` is the decoded TrUAPI `ChatMessageContent` value
+ * stored as structured-clone data. Storage stays codec-agnostic so a wire
+ * bump does not require a migration; readers must tolerate unknown tags.
+ */
+
+import { getDb } from "./db";
+
+const ROOM_STORE = "chat_rooms";
+const MESSAGE_STORE = "chat_messages";
+const BY_ROOM = "byRoom";
+
+export interface ChatRoomRecord {
+  productId: string;
+  roomId: string;
+  name: string;
+  /** URL or base64 image, as supplied by the product. */
+  icon: string;
+  createdAt: number;
+}
+
+export type ChatMessageAuthor = "product" | "user";
+
+export interface ChatMessageRecord {
+  /** Auto-incremented insertion order, assigned by IDB. */
+  seq: number;
+  productId: string;
+  roomId: string;
+  messageId: string;
+  author: ChatMessageAuthor;
+  /** Decoded TrUAPI `ChatMessageContent`, stored as structured-clone data. */
+  content: unknown;
+  timestamp: number;
+}
+
+export type NewChatMessage = Omit<ChatMessageRecord, "seq">;
+
+function requestAsPromise<T>(req: IDBRequest<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    req.onsuccess = () => {
+      resolve(req.result);
+    };
+    req.onerror = () => {
+      reject(req.error ?? new Error("chat store request failed"));
+    };
+  });
+}
+
+/**
+ * Create the room if it does not exist yet. Returns `"New"` on first
+ * creation and `"Exists"` when the (productId, roomId) pair is already
+ * stored, mirroring the TrUAPI `ChatRoomRegistrationStatus` values.
+ */
+export async function createRoom(
+  room: Omit<ChatRoomRecord, "createdAt">,
+): Promise<"New" | "Exists"> {
+  const db = await getDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(ROOM_STORE, "readwrite");
+    const store = tx.objectStore(ROOM_STORE);
+    let status: "New" | "Exists" | null = null;
+    const getReq = store.get([room.productId, room.roomId]);
+    getReq.onsuccess = () => {
+      if (getReq.result !== undefined) {
+        status = "Exists";
+        return;
+      }
+      store.add({ ...room, createdAt: Date.now() } satisfies ChatRoomRecord);
+      status = "New";
+    };
+    tx.oncomplete = () => {
+      if (status !== null) {
+        resolve(status);
+      } else {
+        reject(new Error("createRoom tx completed without a result"));
+      }
+    };
+    tx.onerror = () => {
+      reject(tx.error ?? new Error("createRoom tx errored"));
+    };
+  });
+}
+
+/** All rooms of a product, in creation order. */
+export async function listRooms(productId: string): Promise<ChatRoomRecord[]> {
+  const db = await getDb();
+  const store = db.transaction(ROOM_STORE, "readonly").objectStore(ROOM_STORE);
+  const range = IDBKeyRange.bound([productId, ""], [productId, "￿"]);
+  const rooms = await requestAsPromise(
+    store.getAll(range) as IDBRequest<ChatRoomRecord[]>,
+  );
+  return rooms.sort((a, b) => a.createdAt - b.createdAt);
+}
+
+/** Append one message. Resolves with the assigned insertion sequence. */
+export async function appendMessage(message: NewChatMessage): Promise<number> {
+  const db = await getDb();
+  const store = db
+    .transaction(MESSAGE_STORE, "readwrite")
+    .objectStore(MESSAGE_STORE);
+  const seq = await requestAsPromise(store.add(message));
+  return seq as number;
+}
+
+/** Messages of one room in insertion order, capped at `limit` latest. */
+export async function listMessages(
+  productId: string,
+  roomId: string,
+  limit = 200,
+): Promise<ChatMessageRecord[]> {
+  const db = await getDb();
+  const index = db
+    .transaction(MESSAGE_STORE, "readonly")
+    .objectStore(MESSAGE_STORE)
+    .index(BY_ROOM);
+  const all = await requestAsPromise(
+    index.getAll(IDBKeyRange.only([productId, roomId])) as IDBRequest<
+      ChatMessageRecord[]
+    >,
+  );
+  return all.length > limit ? all.slice(all.length - limit) : all;
+}
diff --git a/packages/storage/src/db.ts b/packages/storage/src/db.ts
index 74a19e68..cfff6c6a 100644
--- a/packages/storage/src/db.ts
+++ b/packages/storage/src/db.ts
@@ -22,7 +22,7 @@ declare global {
 }
 
 const DB_NAME = "dotli";
-const DB_VERSION = 2;
+const DB_VERSION = 3;
 
 let dbPromise: Promise<IDBDatabase> | null = null;
 
@@ -57,6 +57,21 @@ function openFresh(): Promise<IDBDatabase> {
         // keyPath: "productId". Value: { productId, next: number }.
         db.createObjectStore("notification_counters", { keyPath: "productId" });
       }
+      // v3: product chat rooms and messages.
+      if (!db.objectStoreNames.contains("chat_rooms")) {
+        db.createObjectStore("chat_rooms", {
+          keyPath: ["productId", "roomId"],
+        });
+      }
+      if (!db.objectStoreNames.contains("chat_messages")) {
+        const store = db.createObjectStore("chat_messages", {
+          keyPath: "seq",
+          autoIncrement: true,
+        });
+        store.createIndex("byRoom", ["productId", "roomId"], {
+          unique: false,
+        });
+      }
     };
     req.onsuccess = () => {
       resolve(req.result);
diff --git a/packages/storage/tests/chat.test.ts b/packages/storage/tests/chat.test.ts
new file mode 100644
index 00000000..70b52a32
--- /dev/null
+++ b/packages/storage/tests/chat.test.ts
@@ -0,0 +1,83 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import "fake-indexeddb/auto";
+import { describe, it, expect } from "vitest";
+import {
+  appendMessage,
+  createRoom,
+  listMessages,
+  listRooms,
+} from "@dotli/storage/chat";
+
+const textContent = (text: string): unknown => ({
+  tag: "Text",
+  value: { text },
+});
+
+describe("chat rooms", () => {
+  it("As a product, creating a room reports New then Exists", async () => {
+    const room = { productId: "roomstatus.dot", roomId: "main", name: "Main", icon: "" };
+
+    expect(await createRoom(room)).toBe("New");
+    expect(await createRoom(room)).toBe("Exists");
+  });
+
+  it("As a host, rooms are scoped per product", async () => {
+    await createRoom({ productId: "a.dot", roomId: "r", name: "A", icon: "" });
+    await createRoom({ productId: "b.dot", roomId: "r", name: "B", icon: "" });
+
+    const rooms = await listRooms("a.dot");
+    expect(rooms).toHaveLength(1);
+    expect(rooms[0].name).toBe("A");
+  });
+});
+
+describe("chat messages", () => {
+  it("As a host, messages come back in insertion order per room", async () => {
+    const base = {
+      productId: "order.dot",
+      author: "product" as const,
+      timestamp: 1,
+    };
+    await appendMessage({
+      ...base,
+      roomId: "main",
+      messageId: "m1",
+      content: textContent("first"),
+    });
+    await appendMessage({
+      ...base,
+      roomId: "other",
+      messageId: "m2",
+      content: textContent("elsewhere"),
+    });
+    await appendMessage({
+      ...base,
+      roomId: "main",
+      messageId: "m3",
+      author: "user",
+      content: textContent("second"),
+    });
+
+    const messages = await listMessages("order.dot", "main");
+    expect(messages.map((m) => m.messageId)).toEqual(["m1", "m3"]);
+    expect(messages[1].author).toBe("user");
+  });
+
+  it("As a host, the message list caps at the latest `limit` entries", async () => {
+    for (let i = 0; i < 5; i++) {
+      await appendMessage({
+        productId: "cap.dot",
+        roomId: "main",
+        messageId: `m${String(i)}`,
+        author: "product",
+        content: textContent(String(i)),
+        timestamp: i,
+      });
+    }
+
+    const messages = await listMessages("cap.dot", "main", 2);
+    expect(messages.map((m) => m.messageId)).toEqual(["m3", "m4"]);
+  });
+});
diff --git a/packages/ui/src/bridge.ts b/packages/ui/src/bridge.ts
index f2d186e5..dc0ea395 100644
--- a/packages/ui/src/bridge.ts
+++ b/packages/ui/src/bridge.ts
@@ -30,6 +30,7 @@ import { getBackend, getCacheSettings } from "@dotli/config/mode";
 import { getNetwork, withActiveTld } from "@dotli/config/network";
 import { m } from "@dotli/metrics/metrics";
 import * as S from "@dotli/metrics/spans";
+import { chatCapabilityFor } from "@dotli/shared/chat-capability";
 import { log } from "@dotli/shared/log";
 import {
   emitDotliDebugEvent,
@@ -53,6 +54,7 @@ import {
   createWindowMessageProvider,
 } from "./legacy-host-bridge";
 import type { BlockingModalCoordinator } from "./blocking-modal-queue";
+import { registerChatConnection } from "./chat/service";
 import { showNotification } from "./notification";
 
 const noop = (): void => undefined;
@@ -835,6 +837,11 @@ async function createCoreProvider(
       await runtimeChunkPromise;
     const runtimeConfig = createTruapiRuntimeConfig(label, options.productId);
     const { productId, ...hostConfig } = runtimeConfig;
+    // Chat-capable products get a Chat-kind execution so the core serves
+    // their chat calls; everything a Spa connection can do still works.
+    // The capability is primed by the host shell before rendering, so
+    // this await settles from cache or the in-flight manifest read.
+    const chatCapable = await chatCapabilityFor(label);
     const runtime = await createWebWorkerPairingHostRuntime(
       new HostWorker(),
       createHostCallbacks({
@@ -848,11 +855,20 @@ async function createCoreProvider(
         hostConfig,
       },
     );
-    const provider = await runtime.createProvider({ productId });
+    const provider = await runtime.createProvider({
+      productId,
+      executionKind: chatCapable ? "Chat" : "Spa",
+    });
+    const unregisterChat = chatCapable
+      ? registerChatConnection(productId, {
+          publish: (action) => runtime.publishChatAction(productId, action),
+        })
+      : noop;
     return trackCoreProvider(
       wrapCoreProviderForDebug(provider, options.productId ?? label),
       runtime,
       () => {
+        unregisterChat();
         blockingModalScope.dispose();
       },
     );
diff --git a/packages/ui/src/chat/panel.ts b/packages/ui/src/chat/panel.ts
new file mode 100644
index 00000000..5514e002
--- /dev/null
+++ b/packages/ui/src/chat/panel.ts
@@ -0,0 +1,413 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: AGPL-3.0-only
+
+// Docked product-chat panel and its topbar button.
+//
+// The button appears when the loaded product declares chat in its worker
+// manifest (announced via `dotli:chat-availability`). The panel docks to
+// the right edge and shrinks the product iframe while open, mirroring the
+// debug panel's right dock. Messages render from local storage; sending
+// publishes a `MessagePosted` action into the product's core connection.
+
+import { getActiveRootManifest } from "@dotli/shared/active-manifest";
+import {
+  CHAT_AVAILABILITY_EVENT,
+  type ChatAvailabilityDetail,
+} from "@dotli/shared/chat-capability";
+import type { ChatMessageContent } from "@parity/truapi";
+import { labelToProductId } from "../runtime-config";
+import {
+  CHAT_MESSAGE_EVENT,
+  CHAT_ROOMS_CHANGED_EVENT,
+  chatMessages,
+  chatRooms,
+  userPostMessage,
+  type ChatMessageEventDetail,
+  type ChatMessageRecord,
+} from "./service";
+
+const PANEL_WIDTH_KEY = "dotli:chat-panel-width";
+const MIN_PANEL_WIDTH = 280;
+const MAX_PANEL_WIDTH = 560;
+const DEFAULT_PANEL_WIDTH = 360;
+
+interface PanelElements {
+  button: HTMLElement;
+  moreRow: HTMLElement;
+  badge: HTMLElement;
+  panel: HTMLElement;
+  resize: HTMLElement;
+  title: HTMLElement;
+  close: HTMLElement;
+  rooms: HTMLElement;
+  messages: HTMLElement;
+  hint: HTMLElement;
+  composer: HTMLFormElement;
+  input: HTMLInputElement;
+}
+
+let el: PanelElements | null = null;
+let currentLabel: string | null = null;
+let chatAvailable = false;
+let open = false;
+let activeRoomId: string | null = null;
+let unreadCount = 0;
+let renderQueued = false;
+// Send-failure notice, kept across re-renders until the next send or edit.
+let composerError: string | null = null;
+
+function getElements(): PanelElements | null {
+  const button = document.getElementById("chat-button");
+  const moreRow = document.getElementById("more-row-chat");
+  const badge = document.getElementById("chat-unread-badge");
+  const panel = document.getElementById("chat-panel");
+  const resize = document.getElementById("chat-panel-resize");
+  const title = document.getElementById("chat-panel-title");
+  const close = document.getElementById("chat-panel-close");
+  const rooms = document.getElementById("chat-panel-rooms");
+  const messages = document.getElementById("chat-panel-messages");
+  const hint = document.getElementById("chat-panel-hint");
+  const composer = document.getElementById("chat-panel-composer");
+  const input = document.getElementById("chat-panel-input");
+  if (
+    button === null ||
+    moreRow === null ||
+    badge === null ||
+    panel === null ||
+    resize === null ||
+    title === null ||
+    close === null ||
+    rooms === null ||
+    messages === null ||
+    hint === null ||
+    !(composer instanceof HTMLFormElement) ||
+    !(input instanceof HTMLInputElement)
+  ) {
+    return null;
+  }
+  return {
+    button,
+    moreRow,
+    badge,
+    panel,
+    resize,
+    title,
+    close,
+    rooms,
+    messages,
+    hint,
+    composer,
+    input,
+  };
+}
+
+function currentProductId(): string | null {
+  return currentLabel === null ? null : labelToProductId(currentLabel);
+}
+
+function storedPanelWidth(): number {
+  try {
+    const raw = Number(localStorage.getItem(PANEL_WIDTH_KEY));
+    if (Number.isFinite(raw) && raw >= MIN_PANEL_WIDTH) {
+      return Math.min(raw, MAX_PANEL_WIDTH);
+    }
+    // eslint-disable-next-line no-restricted-syntax -- localStorage may be unavailable (private mode); the default width is the safe fallback.
+  } catch {
+    /* fall through to the default width */
+  }
+  return DEFAULT_PANEL_WIDTH;
+}
+
+function adjustIframe(): void {
+  const iframe = document.querySelector<HTMLIFrameElement>("#app iframe");
+  if (iframe === null || el === null) {
+    return;
+  }
+  iframe.style.width = open
+    ? `calc(100vw - ${String(el.panel.offsetWidth)}px)`
+    : "100%";
+}
+
+function updateButton(): void {
+  if (el === null) {
+    return;
+  }
+  const visible = chatAvailable && currentLabel !== null;
+  el.button.hidden = !visible;
+  el.moreRow.hidden = !visible;
+  el.badge.hidden = unreadCount === 0;
+  el.badge.textContent = unreadCount > 9 ? "9+" : String(unreadCount);
+  if (!visible && open) {
+    setPanelOpen(false);
+  }
+}
+
+/** One message row. Built via textContent so product text cannot inject markup. */
+function renderMessage(record: ChatMessageRecord): HTMLElement {
+  const row = document.createElement("div");
+  row.className = `chat-msg ${record.author === "user" ? "chat-msg-user" : "chat-msg-product"}`;
+  const bubble = document.createElement("div");
+  bubble.className = "chat-msg-bubble";
+  const content = record.content as ChatMessageContent;
+  switch (content.tag) {
+    case "Text":
+      bubble.textContent = content.value.text;
+      break;
+    case "RichText":
+      bubble.textContent = content.value.text ?? "";
+      if (content.value.media.length > 0) {
+        const media = document.createElement("span");
+        media.className = "chat-msg-meta";
+        media.textContent = ` [${String(content.value.media.length)} attachment${content.value.media.length === 1 ? "" : "s"}]`;
+        bubble.appendChild(media);
+      }
+      break;
+    case "Reaction":
+      bubble.className += " chat-msg-event";
+      bubble.textContent = `reacted ${content.value.emoji}`;
+      break;
+    case "ReactionRemoved":
+      bubble.className += " chat-msg-event";
+      bubble.textContent = `removed reaction ${content.value.emoji}`;
+      break;
+    case "File":
+      bubble.textContent = `[file] ${content.value.fileName}`;
+      break;
+    case "Actions":
+      bubble.textContent = content.value.text ?? "[actions]";
+      break;
+    case "Custom":
+      bubble.className += " chat-msg-event";
+      bubble.textContent = "[custom message]";
+      break;
+    default:
+      bubble.className += " chat-msg-event";
+      bubble.textContent = "[unsupported message]";
+  }
+  row.appendChild(bubble);
+  return row;
+}
+
+// Coalesces bursts via setTimeout rather than requestAnimationFrame: rAF
+// stalls in hidden tabs, which would wedge the queue flag and drop every
+// later render until the next paint.
+function scheduleRender(): void {
+  if (renderQueued) {
+    return;
+  }
+  renderQueued = true;
+  setTimeout(() => {
+    renderQueued = false;
+    void renderPanel();
+  }, 0);
+}
+
+async function renderPanel(): Promise<void> {
+  if (el === null || !open) {
+    return;
+  }
+  const productId = currentProductId();
+  if (productId === null) {
+    return;
+  }
+  el.title.textContent =
+    getActiveRootManifest()?.displayName ?? currentLabel ?? "Chat";
+
+  const rooms = await chatRooms(productId);
+  if (rooms.length === 0) {
+    activeRoomId = null;
+    el.rooms.hidden = true;
+    el.messages.replaceChildren();
+    el.hint.hidden = false;
+    el.hint.textContent = "Waiting for the app to start a chat.";
+    el.input.disabled = true;
+    return;
+  }
+  if (activeRoomId === null || !rooms.some((r) => r.roomId === activeRoomId)) {
+    activeRoomId = rooms[0].roomId;
+  }
+  el.hint.hidden = composerError === null;
+  el.hint.textContent = composerError ?? "";
+  el.input.disabled = false;
+
+  el.rooms.hidden = rooms.length < 2;
+  if (rooms.length >= 2) {
+    el.rooms.replaceChildren(
+      ...rooms.map((room) => {
+        const tab = document.createElement("button");
+        tab.type = "button";
+        tab.className = "chat-room-tab";
+        tab.setAttribute("role", "tab");
+        tab.setAttribute(
+          "aria-selected",
+          room.roomId === activeRoomId ? "true" : "false",
+        );
+        tab.textContent = room.name;
+        tab.addEventListener("click", () => {
+          activeRoomId = room.roomId;
+          scheduleRender();
+        });
+        return tab;
+      }),
+    );
+  }
+
+  const roomId = activeRoomId;
+  const records = await chatMessages(productId, roomId);
+  // The active room may have changed while messages loaded.
+  if (activeRoomId !== roomId) {
+    return;
+  }
+  el.messages.replaceChildren(...records.map(renderMessage));
+  el.messages.scrollTop = el.messages.scrollHeight;
+}
+
+function setPanelOpen(next: boolean): void {
+  if (el === null || open === next) {
+    return;
+  }
+  open = next;
+  el.panel.hidden = !next;
+  el.button.setAttribute("aria-expanded", next ? "true" : "false");
+  el.button.classList.toggle("active", next);
+  if (next) {
+    el.panel.style.width = `${String(storedPanelWidth())}px`;
+    unreadCount = 0;
+    updateButton();
+    scheduleRender();
+    el.input.focus();
+  } else {
+    updateButton();
+  }
+  adjustIframe();
+}
+
+function initResize(): void {
+  if (el === null) {
+    return;
+  }
+  const { resize, panel } = el;
+  resize.addEventListener("pointerdown", (down: PointerEvent) => {
+    down.preventDefault();
+    resize.setPointerCapture(down.pointerId);
+    const startX = down.clientX;
+    const startWidth = panel.offsetWidth;
+    const onMove = (move: PointerEvent): void => {
+      const width = Math.min(
+        MAX_PANEL_WIDTH,
+        Math.max(MIN_PANEL_WIDTH, startWidth + (startX - move.clientX)),
+      );
+      panel.style.width = `${String(width)}px`;
+      adjustIframe();
+    };
+    const onUp = (): void => {
+      resize.removeEventListener("pointermove", onMove);
+      resize.removeEventListener("pointerup", onUp);
+      try {
+        localStorage.setItem(PANEL_WIDTH_KEY, String(panel.offsetWidth));
+        // eslint-disable-next-line no-restricted-syntax -- localStorage may be unavailable (private mode); the width just resets next session.
+      } catch {
+        /* width resets next session */
+      }
+    };
+    resize.addEventListener("pointermove", onMove);
+    resize.addEventListener("pointerup", onUp);
+  });
+}
+
+async function submitMessage(): Promise<void> {
+  if (el === null) {
+    return;
+  }
+  const productId = currentProductId();
+  const text = el.input.value.trim();
+  if (productId === null || activeRoomId === null || text === "") {
+    return;
+  }
+  el.input.value = "";
+  try {
+    await userPostMessage(productId, activeRoomId, text);
+    composerError = null;
+  } catch (error) {
+    composerError =
+      error instanceof Error && error.message.includes("denied")
+        ? "Log in to chat with this app."
+        : "Message saved, but the app could not be reached.";
+  }
+  scheduleRender();
+}
+
+/** Wire the chat button + panel. Called once from `initTopBar`. */
+export function initChatPanel(): void {
+  el = getElements();
+  if (el === null) {
+    return;
+  }
+
+  window.addEventListener(CHAT_AVAILABILITY_EVENT, (event: Event) => {
+    const detail = (event as CustomEvent<ChatAvailabilityDetail>).detail;
+    if (currentLabel !== null && detail.label !== currentLabel) {
+      return;
+    }
+    chatAvailable = detail.chat;
+    updateButton();
+  });
+
+  window.addEventListener("dotli:product-loaded", (event: Event) => {
+    const { label } = (event as CustomEvent<{ label: string }>).detail;
+    if (currentLabel !== label) {
+      currentLabel = label;
+      activeRoomId = null;
+      unreadCount = 0;
+      composerError = null;
+    }
+    updateButton();
+    // A product (re)load while the panel is open must refresh its content.
+    if (open) {
+      scheduleRender();
+    }
+  });
+
+  window.addEventListener("dotli:product-error", () => {
+    currentLabel = null;
+    updateButton();
+  });
+
+  window.addEventListener(CHAT_MESSAGE_EVENT, (event: Event) => {
+    const detail = (event as CustomEvent<ChatMessageEventDetail>).detail;
+    if (detail.productId !== currentProductId()) {
+      return;
+    }
+    if (open) {
+      scheduleRender();
+    } else if (detail.author === "product") {
+      unreadCount += 1;
+      updateButton();
+    }
+  });
+
+  window.addEventListener(CHAT_ROOMS_CHANGED_EVENT, (event: Event) => {
+    const detail = (event as CustomEvent<{ productId: string }>).detail;
+    if (detail.productId === currentProductId() && open) {
+      scheduleRender();
+    }
+  });
+
+  el.button.addEventListener("click", () => {
+    setPanelOpen(!open);
+  });
+  el.close.addEventListener("click", () => {
+    setPanelOpen(false);
+  });
+  el.panel.addEventListener("keydown", (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      setPanelOpen(false);
+      el?.button.focus();
+    }
+  });
+  el.composer.addEventListener("submit", (event) => {
+    event.preventDefault();
+    void submitMessage();
+  });
+  initResize();
+}
diff --git a/packages/ui/src/chat/service.ts b/packages/ui/src/chat/service.ts
new file mode 100644
index 00000000..a1ed64b2
--- /dev/null
+++ b/packages/ui/src/chat/service.ts
@@ -0,0 +1,150 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: AGPL-3.0-only
+
+// Product chat domain: room/message persistence, the live product
+// connection registry, and the window events the chat panel renders from.
+//
+// Product chat is a local conversation between the user and the loaded
+// product. The product drives its side over TrUAPI (`chat.create_room`,
+// `chat.post_message`); the user's replies go back to the product through
+// the core's `chat.action_subscribe` stream via `publishChatAction` on the
+// worker host runtime. Nothing leaves the device.
+
+import type {
+  ChatMessageContent,
+  HostChatActionSubscribeItem,
+} from "@parity/truapi";
+import {
+  appendMessage,
+  createRoom,
+  listMessages,
+  listRooms,
+  type ChatMessageRecord,
+  type ChatRoomRecord,
+} from "@dotli/storage/chat";
+
+export type { ChatMessageRecord, ChatRoomRecord };
+
+/** Window event: a product's room list changed. Detail: `{ productId }`. */
+export const CHAT_ROOMS_CHANGED_EVENT = "dotli:chat-rooms-changed";
+/** Window event: a message was appended. Detail: `{ productId, roomId, author }`. */
+export const CHAT_MESSAGE_EVENT = "dotli:chat-message";
+
+export interface ChatMessageEventDetail {
+  productId: string;
+  roomId: string;
+  author: "product" | "user";
+}
+
+/** Live publish handle for one product's Chat-kind core connection. */
+export interface ChatConnection {
+  publish(action: HostChatActionSubscribeItem): Promise<void>;
+}
+
+const connections = new Map<string, ChatConnection>();
+
+/**
+ * Register the publish handle for a product's live Chat connection.
+ * Returns the matching unregister; a stale unregister (after a newer
+ * registration for the same product) is a no-op.
+ */
+export function registerChatConnection(
+  productId: string,
+  connection: ChatConnection,
+): () => void {
+  connections.set(productId, connection);
+  return () => {
+    if (connections.get(productId) === connection) {
+      connections.delete(productId);
+    }
+  };
+}
+
+function emit(name: string, detail: unknown): void {
+  window.dispatchEvent(new CustomEvent(name, { detail }));
+}
+
+/** Product-initiated room creation. Idempotent per (productId, roomId). */
+export async function productCreateRoom(
+  productId: string,
+  room: { roomId: string; name: string; icon: string },
+): Promise<"New" | "Exists"> {
+  const status = await createRoom({ productId, ...room });
+  if (status === "New") {
+    emit(CHAT_ROOMS_CHANGED_EVENT, { productId });
+  }
+  return status;
+}
+
+/** Product-authored message. Returns the assigned message id. */
+export async function productPostMessage(
+  productId: string,
+  roomId: string,
+  content: ChatMessageContent,
+): Promise<string> {
+  const messageId = crypto.randomUUID();
+  await appendMessage({
+    productId,
+    roomId,
+    messageId,
+    author: "product",
+    content,
+    timestamp: Date.now(),
+  });
+  emit(CHAT_MESSAGE_EVENT, {
+    productId,
+    roomId,
+    author: "product",
+  } satisfies ChatMessageEventDetail);
+  return messageId;
+}
+
+/**
+ * User-authored text message from the chat panel. Persists locally first,
+ * then publishes a `MessagePosted` action into the product's
+ * `chat.action_subscribe` stream. The publish can fail independently of
+ * persistence (no live Chat connection, logged out); callers surface that
+ * without losing the stored message.
+ */
+export async function userPostMessage(
+  productId: string,
+  roomId: string,
+  text: string,
+): Promise<void> {
+  const content: ChatMessageContent = { tag: "Text", value: { text } };
+  await appendMessage({
+    productId,
+    roomId,
+    messageId: crypto.randomUUID(),
+    author: "user",
+    content,
+    timestamp: Date.now(),
+  });
+  emit(CHAT_MESSAGE_EVENT, {
+    productId,
+    roomId,
+    author: "user",
+  } satisfies ChatMessageEventDetail);
+  const connection = connections.get(productId);
+  if (connection === undefined) {
+    throw new Error("Chat is not connected for this product");
+  }
+  await connection.publish({
+    roomId,
+    peer: "user",
+    payload: { tag: "MessagePosted", value: content },
+  });
+}
+
+/** Rooms of one product, creation order. */
+export function chatRooms(productId: string): Promise<ChatRoomRecord[]> {
+  return listRooms(productId);
+}
+
+/** Messages of one room, insertion order. */
+export function chatMessages(
+  productId: string,
+  roomId: string,
+): Promise<ChatMessageRecord[]> {
+  return listMessages(productId, roomId);
+}
diff --git a/packages/ui/src/host-callbacks/Chat.ts b/packages/ui/src/host-callbacks/Chat.ts
new file mode 100644
index 00000000..7231da43
--- /dev/null
+++ b/packages/ui/src/host-callbacks/Chat.ts
@@ -0,0 +1,90 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: AGPL-3.0-only
+
+// ChatPlatform host callbacks: the product side of product chat.
+//
+// The core forwards `chat.create_room` / `chat.post_message` /
+// `chat.list_subscribe` here after enforcing its own access policy (the
+// connection must be a Chat-kind execution with an active session). The
+// user side of the conversation flows the other way, through
+// `publishChatAction` on the worker host runtime; see `../chat/service`.
+
+import type { ChatPlatform } from "@parity/truapi-host";
+import type { HostChatListSubscribeItem } from "@parity/truapi";
+import {
+  CHAT_ROOMS_CHANGED_EVENT,
+  chatRooms,
+  productCreateRoom,
+  productPostMessage,
+} from "../chat/service";
+import { createResultStream } from "./result-stream";
+
+export function createChatPlatform(): Required<ChatPlatform> {
+  return {
+    async createChatRoom(product, request) {
+      const status = await productCreateRoom(product.productId, {
+        roomId: request.roomId,
+        name: request.name,
+        icon: request.icon,
+      });
+      return { status };
+    },
+
+    async postChatMessage(product, request) {
+      const messageId = await productPostMessage(
+        product.productId,
+        request.roomId,
+        request.payload,
+      );
+      return { messageId };
+    },
+
+    subscribeChatRooms(product) {
+      const snapshot = async (): Promise<HostChatListSubscribeItem> => ({
+        rooms: (await chatRooms(product.productId)).map((room) => ({
+          roomId: room.roomId,
+          participatingAs: "RoomHost" as const,
+        })),
+      });
+      return createResultStream<HostChatListSubscribeItem>(
+        [],
+        (push, pushError) => {
+          let live = true;
+          const emitSnapshot = (): void => {
+            snapshot().then(
+              (item) => {
+                if (live) {
+                  push(item);
+                }
+              },
+              (error: unknown) => {
+                if (live) {
+                  pushError({
+                    reason:
+                      error instanceof Error ? error.message : String(error),
+                  });
+                }
+              },
+            );
+          };
+          const onRoomsChanged = (event: Event): void => {
+            const detail = (event as CustomEvent<{ productId: string }>)
+              .detail;
+            if (detail.productId === product.productId) {
+              emitSnapshot();
+            }
+          };
+          window.addEventListener(CHAT_ROOMS_CHANGED_EVENT, onRoomsChanged);
+          emitSnapshot();
+          return () => {
+            live = false;
+            window.removeEventListener(
+              CHAT_ROOMS_CHANGED_EVENT,
+              onRoomsChanged,
+            );
+          };
+        },
+      );
+    },
+  };
+}
diff --git a/packages/ui/src/host-callbacks/Theme.ts b/packages/ui/src/host-callbacks/Theme.ts
index c7cb74db..945d7ad3 100644
--- a/packages/ui/src/host-callbacks/Theme.ts
+++ b/packages/ui/src/host-callbacks/Theme.ts
@@ -1,16 +1,20 @@
 import type { ThemeHost } from "@parity/truapi-host";
-import type { ThemeVariant } from "@parity/truapi";
+import type { HostThemeSubscribeItem } from "@parity/truapi";
 import { createResultStream } from "./result-stream";
 
-function currentTheme(): ThemeVariant {
-  return document.documentElement.getAttribute("data-theme") === "light"
-    ? "Light"
-    : "Dark";
+function currentTheme(): HostThemeSubscribeItem {
+  return {
+    name: { tag: "Default" },
+    variant:
+      document.documentElement.getAttribute("data-theme") === "light"
+        ? "Light"
+        : "Dark",
+  };
 }
 
 export function createThemeSubscribe(): Required<ThemeHost>["subscribeTheme"] {
   return () =>
-    createResultStream<ThemeVariant>([currentTheme()], (push) => {
+    createResultStream<HostThemeSubscribeItem>([currentTheme()], (push) => {
       const onThemeChanged = (): void => {
         push(currentTheme());
       };
diff --git a/packages/ui/src/host-callbacks/handlers.ts b/packages/ui/src/host-callbacks/handlers.ts
index 1cd81f04..cc87d595 100644
--- a/packages/ui/src/host-callbacks/handlers.ts
+++ b/packages/ui/src/host-callbacks/handlers.ts
@@ -22,6 +22,7 @@ import { createFeatureSupported } from "./FeatureSupported";
 import { createSupportedChains } from "./SupportedChains";
 import { createThemeSubscribe } from "./Theme";
 import { createAuthStateChanged } from "./AuthState";
+import { createChatPlatform } from "./Chat";
 import { createSessionStoreAdapters } from "./SessionStore";
 import { createUserConfirmationAdapters } from "./UserConfirmation";
 import {
@@ -83,5 +84,8 @@ export function createHostCallbacks(
     theme: { subscribeTheme: createThemeSubscribe() },
     preimage: createPreimageAdapters(label),
     chain: { connect: createChainConnect() },
+    // Always served; the core itself denies chat calls on non-Chat
+    // executions and without an active session.
+    chat: createChatPlatform(),
   };
 }
diff --git a/packages/ui/src/styles/themes.css b/packages/ui/src/styles/themes.css
index e84cc99b..1c80606c 100644
--- a/packages/ui/src/styles/themes.css
+++ b/packages/ui/src/styles/themes.css
@@ -580,3 +580,53 @@
 [data-theme="light"] .permission-modal-notice {
   color: rgba(0, 0, 0, 0.5);
 }
+[data-theme="light"] .chat-panel {
+  background: rgb(250, 250, 250);
+  border-left-color: rgba(0, 0, 0, 0.1);
+}
+[data-theme="light"] .chat-panel-header,
+[data-theme="light"] .chat-panel-composer {
+  border-color: rgba(0, 0, 0, 0.08);
+}
+[data-theme="light"] .chat-panel-title {
+  color: rgba(0, 0, 0, 0.88);
+}
+[data-theme="light"] .chat-panel-close {
+  color: rgba(0, 0, 0, 0.55);
+}
+[data-theme="light"] .chat-panel-close:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: rgba(0, 0, 0, 0.88);
+}
+[data-theme="light"] .chat-room-tab {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.65);
+}
+[data-theme="light"] .chat-room-tab[aria-selected="true"] {
+  background: rgba(230, 0, 122, 0.12);
+  border-color: rgba(230, 0, 122, 0.4);
+  color: rgba(0, 0, 0, 0.88);
+}
+[data-theme="light"] .chat-msg-bubble {
+  background: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, 0.85);
+}
+[data-theme="light"] .chat-msg-user .chat-msg-bubble {
+  background: rgba(230, 0, 122, 0.14);
+}
+[data-theme="light"] .chat-msg-event,
+[data-theme="light"] .chat-msg-meta,
+[data-theme="light"] .chat-panel-hint {
+  color: rgba(0, 0, 0, 0.45);
+}
+[data-theme="light"] .chat-panel-input {
+  background: rgba(0, 0, 0, 0.03);
+  border-color: rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.88);
+}
+[data-theme="light"] #chat-button.active {
+  background: rgba(0, 0, 0, 0.06);
+  border-color: rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.88);
+}
diff --git a/packages/ui/src/styles/topbar.css b/packages/ui/src/styles/topbar.css
index 4f4a084e..bfe65c8a 100644
--- a/packages/ui/src/styles/topbar.css
+++ b/packages/ui/src/styles/topbar.css
@@ -1250,3 +1250,198 @@
   margin-top: 4px;
   font-style: italic;
 }
+
+/* ── Chat Panel ─────────────────────────── */
+#chat-button {
+  position: relative;
+}
+#chat-button.active {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.92);
+}
+.chat-unread-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  border-radius: 7px;
+  background: #e6007a;
+  color: #fff;
+  font-size: 0.6rem;
+  font-weight: 600;
+  line-height: 14px;
+  text-align: center;
+}
+.chat-panel {
+  position: fixed;
+  top: 56px;
+  right: 0;
+  bottom: 0;
+  width: 360px;
+  display: flex;
+  flex-direction: column;
+  background: rgb(24, 24, 24);
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  z-index: 900;
+}
+.chat-panel[hidden] {
+  display: none;
+}
+.chat-panel-resize {
+  position: absolute;
+  top: 0;
+  left: -3px;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  touch-action: none;
+}
+.chat-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.chat-panel-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.92);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chat-panel-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: rgba(255, 255, 255, 0.55);
+  cursor: pointer;
+}
+.chat-panel-close:hover {
+  background: rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.92);
+}
+.chat-panel-rooms {
+  display: flex;
+  gap: 6px;
+  padding: 8px 14px 0;
+  overflow-x: auto;
+}
+.chat-room-tab {
+  padding: 4px 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  color: rgba(255, 255, 255, 0.65);
+  font-size: 0.72rem;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.chat-room-tab[aria-selected="true"] {
+  background: rgba(230, 0, 122, 0.18);
+  border-color: rgba(230, 0, 122, 0.45);
+  color: rgba(255, 255, 255, 0.92);
+}
+.chat-panel-messages {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+  overflow-y: auto;
+}
+.chat-msg {
+  display: flex;
+}
+.chat-msg-user {
+  justify-content: flex-end;
+}
+.chat-msg-bubble {
+  max-width: 85%;
+  padding: 7px 11px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 0.8rem;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.chat-msg-user .chat-msg-bubble {
+  background: rgba(230, 0, 122, 0.22);
+}
+.chat-msg-event {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.45);
+  font-style: italic;
+  font-size: 0.72rem;
+}
+.chat-msg-meta {
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 0.72rem;
+}
+.chat-panel-hint {
+  margin: 0;
+  padding: 8px 14px;
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 0.75rem;
+}
+.chat-panel-composer {
+  display: flex;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+.chat-panel-input {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 0.8rem;
+  font-family: inherit;
+}
+.chat-panel-input:focus {
+  outline: none;
+  border-color: rgba(230, 0, 122, 0.55);
+}
+.chat-panel-input:disabled {
+  opacity: 0.5;
+}
+.chat-panel-send {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  background: rgba(230, 0, 122, 0.85);
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+}
+.chat-panel-send:hover {
+  background: #e6007a;
+}
+@media (max-width: 560px) {
+  .chat-panel {
+    left: 0;
+    width: 100% !important;
+  }
+  .chat-panel-resize {
+    display: none;
+  }
+}
diff --git a/packages/ui/src/topbar.ts b/packages/ui/src/topbar.ts
index cf5d64ba..aac011b4 100644
--- a/packages/ui/src/topbar.ts
+++ b/packages/ui/src/topbar.ts
@@ -47,6 +47,7 @@ import {
   setPermissionStatus,
   type PermissionStatus,
 } from "./permissions";
+import { initChatPanel } from "./chat/panel";
 import type { DotliAuthState } from "./host-callbacks/AuthState";
 import {
   emitPersistedSessionUiState,
@@ -414,6 +415,9 @@ export function initTopBar(
   // Permissions
   initPermissions();
 
+  // Product chat button + docked panel
+  initChatPanel();
+
   window.addEventListener("dotli:blocking-modal-active", (event: Event) => {
     const { active } = (event as CustomEvent<{ active: boolean }>).detail;
     if (!active) {
diff --git a/packages/ui/tests/chat-panel.test.ts b/packages/ui/tests/chat-panel.test.ts
new file mode 100644
index 00000000..b37ab1d6
--- /dev/null
+++ b/packages/ui/tests/chat-panel.test.ts
@@ -0,0 +1,166 @@
+import "fake-indexeddb/auto";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { labelToProductId } from "@dotli/ui/runtime-config";
+import { setChatCapability } from "@dotli/shared/chat-capability";
+import type { HostChatActionSubscribeItem } from "@parity/truapi";
+
+// The panel and service keep module-level state (listeners, connection
+// registry), so each test loads a fresh module instance via resetModules.
+async function loadChatModules(): Promise<{
+  panel: typeof import("@dotli/ui/chat/panel");
+  service: typeof import("@dotli/ui/chat/service");
+}> {
+  vi.resetModules();
+  return {
+    panel: await import("@dotli/ui/chat/panel"),
+    service: await import("@dotli/ui/chat/service"),
+  };
+}
+
+function installChatDom(): void {
+  document.body.innerHTML = `
+    <button id="chat-button" aria-expanded="false" hidden>
+      <span id="chat-unread-badge" hidden></span>
+    </button>
+    <button id="more-row-chat" hidden></button>
+    <aside id="chat-panel" hidden>
+      <div id="chat-panel-resize"></div>
+      <span id="chat-panel-title"></span>
+      <button id="chat-panel-close"></button>
+      <div id="chat-panel-rooms" hidden></div>
+      <div id="chat-panel-messages"></div>
+      <p id="chat-panel-hint" hidden></p>
+      <form id="chat-panel-composer">
+        <input id="chat-panel-input" type="text" />
+        <button type="submit" id="chat-panel-send"></button>
+      </form>
+    </aside>
+  `;
+}
+
+function loadProduct(label: string): void {
+  window.dispatchEvent(
+    new CustomEvent("dotli:product-loaded", { detail: { label } }),
+  );
+  setChatCapability(label, true);
+}
+
+/** Panel renders on rAF then reads IndexedDB; settle both. */
+async function settle(): Promise<void> {
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await new Promise((resolve) => setTimeout(resolve, 20));
+}
+
+const byId = <T extends HTMLElement>(id: string): T => {
+  const node = document.getElementById(id);
+  if (node === null) {
+    throw new Error(`missing #${id}`);
+  }
+  return node as T;
+};
+
+describe("chat panel", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    installChatDom();
+  });
+
+  it("As a user, the chat button appears only for chat-capable products", async () => {
+    const { panel } = await loadChatModules();
+    panel.initChatPanel();
+    const button = byId("chat-button");
+    expect(button.hidden).toBe(true);
+
+    loadProduct("chatless");
+    setChatCapability("chatless", false);
+    expect(button.hidden).toBe(true);
+
+    loadProduct("chatty-visible");
+    expect(button.hidden).toBe(false);
+
+    window.dispatchEvent(new CustomEvent("dotli:product-error"));
+    expect(button.hidden).toBe(true);
+  });
+
+  it("As a user, an empty room list shows a waiting hint", async () => {
+    const { panel } = await loadChatModules();
+    panel.initChatPanel();
+    loadProduct("chatty-empty");
+
+    byId("chat-button").click();
+    await settle();
+
+    expect(byId("chat-panel").hidden).toBe(false);
+    expect(byId("chat-panel-hint").hidden).toBe(false);
+    expect(byId<HTMLInputElement>("chat-panel-input").disabled).toBe(true);
+  });
+
+  it("As a user, product messages render and replies reach the product", async () => {
+    const { panel, service } = await loadChatModules();
+    panel.initChatPanel();
+    loadProduct("chatty-send");
+    const productId = labelToProductId("chatty-send");
+    const published: HostChatActionSubscribeItem[] = [];
+    service.registerChatConnection(productId, {
+      publish: async (action) => {
+        published.push(action);
+      },
+    });
+
+    await service.productCreateRoom(productId, {
+      roomId: "main",
+      name: "Main",
+      icon: "",
+    });
+    await service.productPostMessage(productId, "main", {
+      tag: "Text",
+      value: { text: "hello from the app" },
+    });
+
+    byId("chat-button").click();
+    await settle();
+    expect(byId("chat-panel-messages").textContent).toContain(
+      "hello from the app",
+    );
+
+    const input = byId<HTMLInputElement>("chat-panel-input");
+    input.value = "hello back";
+    byId<HTMLFormElement>("chat-panel-composer").requestSubmit();
+    await settle();
+
+    expect(published).toHaveLength(1);
+    expect(published[0]).toMatchObject({
+      roomId: "main",
+      payload: {
+        tag: "MessagePosted",
+        value: { tag: "Text", value: { text: "hello back" } },
+      },
+    });
+    expect(byId("chat-panel-messages").textContent).toContain("hello back");
+  });
+
+  it("As a user, unseen product messages show an unread badge", async () => {
+    const { panel, service } = await loadChatModules();
+    panel.initChatPanel();
+    loadProduct("chatty-unread");
+    const productId = labelToProductId("chatty-unread");
+
+    await service.productCreateRoom(productId, {
+      roomId: "main",
+      name: "Main",
+      icon: "",
+    });
+    await service.productPostMessage(productId, "main", {
+      tag: "Text",
+      value: { text: "ping" },
+    });
+
+    const badge = byId("chat-unread-badge");
+    expect(badge.hidden).toBe(false);
+    expect(badge.textContent).toBe("1");
+
+    byId("chat-button").click();
+    await settle();
+    expect(badge.hidden).toBe(true);
+  });
+});
diff --git a/packages/ui/tests/theme.test.ts b/packages/ui/tests/theme.test.ts
index 89d24134..e7c2900d 100644
--- a/packages/ui/tests/theme.test.ts
+++ b/packages/ui/tests/theme.test.ts
@@ -19,7 +19,10 @@ describe("theme host callbacks", () => {
     // Then
     expect(first.done).toBe(false);
     expect(first.value.isOk()).toBe(true);
-    expect(first.value._unsafeUnwrap()).toBe("Light");
+    expect(first.value._unsafeUnwrap()).toEqual({
+      name: { tag: "Default" },
+      variant: "Light",
+    });
   });
 
   it("As a dotli integrator, the host emits theme changes until unsubscribed", async () => {
@@ -42,10 +45,16 @@ describe("theme host callbacks", () => {
     // Then
     expect(first.done).toBe(false);
     expect(first.value.isOk()).toBe(true);
-    expect(first.value._unsafeUnwrap()).toBe("Dark");
+    expect(first.value._unsafeUnwrap()).toEqual({
+      name: { tag: "Default" },
+      variant: "Dark",
+    });
     expect(changed.done).toBe(false);
     expect(changed.value.isOk()).toBe(true);
-    expect(changed.value._unsafeUnwrap()).toBe("Light");
+    expect(changed.value._unsafeUnwrap()).toEqual({
+      name: { tag: "Default" },
+      variant: "Light",
+    });
     expect(afterReturn.done).toBe(true);
   });
 });