fauna-api 1.0.780 → 1.0.783

package/dist/src/cicada/conversations.d.ts

@@ -37,6 +37,8 @@ export type Message = {
     attachments: FaunaFile[];
     /** Sent by the inbox agent. */
     agent: boolean;
+    /** Why it never reached them, when its carrier refused it or it failed to send. */
+    undelivered?: string;
 };
 export declare function listInbox(authorization: Credentials | ApiKey, inboxId?: string): Promise<Conversation[]>;
 export declare function listArchived(authorization: Credentials | ApiKey, inboxId?: string): Promise<Conversation[]>;

package/dist/src/marmot/browser.d.ts

@@ -113,7 +113,7 @@ export declare class PageRoom<T extends BrowserTool = BrowserTool> extends Room
     parrotTools(): Tool[];
     handleEvent(packet: any): boolean;
 }
-/** A live web page in a Marmot (or Ant) browser: every browser tool. */
+/** A live web page in Marmot's browser: every browser tool. */
 export declare class BrowserRoom extends PageRoom<BrowserTool> {
     static connect(authorization: Credentials | ApiKey, target: {
         reference: string;
@@ -125,13 +125,11 @@ export declare class BrowserRoom extends PageRoom<BrowserTool> {
         room: BrowserRoom;
         self: Presence;
     }>;
-    /** `endpoint` is where the page's room lives: Marmot's by default, or e.g. Ant's /timeline/browser/live. */
     static join(authorization: Credentials | ApiKey, target: {
         accessCode: string;
     }, opts?: {
         tools?: BrowserTool["kind"][];
         hooks?: BrowserRoomHooks;
-        endpoint?: string;
     }): Promise<{
         room: BrowserRoom;
         self: Presence;

package/dist/src/marmot/browser.js

@@ -337,12 +337,11 @@ export class PageRoom extends Room {
         }
     }
 }
-/** A live web page in a Marmot (or Ant) browser: every browser tool. */
+/** A live web page in Marmot's browser: every browser tool. */
 export class BrowserRoom extends PageRoom {
     static async connect(authorization, target, opts) {
         return openBrowser(authorization, { server: target.reference, group: opts?.group?.id }, opts);
     }
-    /** `endpoint` is where the page's room lives: Marmot's by default, or e.g. Ant's /timeline/browser/live. */
     static async join(authorization, target, opts) {
         return openBrowser(authorization, { accessCode: target.accessCode }, opts);
     }
@@ -352,7 +351,7 @@ async function openBrowser(authorization, target, opts) {
     const auth = "accessCode" in target
         ? { authorization, accessCode: target.accessCode }
         : { authorization, server: target.server, ...(target.group ? { group: target.group } : {}) };
-    const endpoint = opts?.endpoint ?? `${Marmot.getURL()}/browser/live`;
+    const endpoint = `${Marmot.getURL()}/browser/live`;
     let room;
     const notify = () => { if (room)
         room.emitPresence(); };

package/dist/src/termite/os.js

@@ -192,18 +192,18 @@ export function desktopTool(repository) {
     if (repository) {
         return {
             name: "use_desktop",
-            description: `Do something on the repository's desktop that needs a screen, like using a website. A desktop agent does it and reports back. ${DESKTOP_CAPTURE}`,
+            description: `Do something on the repository's desktop that needs a screen, like using an app on the machine or working across its windows. A desktop agent does it and reports back. For a website alone, use_browser is quicker. ${DESKTOP_CAPTURE}`,
             parameters: { type: "OBJECT", properties, required: ["goal"] },
         };
     }
     return {
         name: "use_desktop",
-        description: `Do something on a computer that needs a screen, like using a website. This chat has no computer yet, so the person is asked first to make a repository for it: a Linux machine with a desktop. If they agree, a desktop agent does it and reports back; if they don't, do that request without a computer. ${DESKTOP_CAPTURE}`,
+        description: `Do something on a computer that needs a screen, like running an app or working across windows. This chat has no computer yet, so the person is asked first to make a repository for it: a Linux machine with a desktop. If they agree, a desktop agent does it and reports back; if they don't, do that request without a computer. For a website alone, use use_browser, which needs no computer. ${DESKTOP_CAPTURE}`,
         parameters: {
             type: "OBJECT",
             properties: {
                 ...properties,
-                name: { type: "STRING", description: "What to call the repository this makes: two to four words about the task, like eBay Switch search" },
+                name: { type: "STRING", description: "What to call the repository this makes: two to four words about the task, like Invoice spreadsheet cleanup" },
             },
             required: ["goal", "name"],
         },

package/dist/src/ui/browser.d.ts

@@ -48,6 +48,8 @@ export type BrowserMountOptions<R extends PageRoom<any> = PageRoom> = {
     /** The page's real pointer moved or changed shape. The browser takes the room's
      *  `onCursor` hook, so follow the pointer here. */
     onCursor?: (pointer: HtmlPointer) => void;
+    /** The page closed. The browser takes the room's `onClosed` hook, so hear it here. */
+    onClosed?: () => void;
 };
 export declare function cursorSeed(options: {
     seed?: string;

package/dist/src/ui/browser.js

@@ -466,7 +466,10 @@ export function createBrowser(container, options) {
     room.watch({
         onCursor: (_r, pointer) => applyCursor(pointer),
         onTool: (_r, tool) => applyTool(tool),
-        onClosed: () => { badge.style.display = "none"; },
+        onClosed: () => {
+            badge.style.display = "none";
+            options.onClosed?.();
+        },
         web: {
             onBootstrap: (_web, meta) => { void applyBootstrap(meta.html, meta.viewport); },
             onMutation: (_web, mutation) => {

package/dist/src/ui/chat.js

@@ -7,6 +7,7 @@ import { Fauna } from "fauna-api";
 import { mimeFromFileName } from "../marmot/media.js";
 import { createTokenizedInput, parseRichText, toPlainText, hasTokens } from "./tokenized.js";
 import { roomPartsToChatFields } from "./chatSequence.js";
+import { SessionPopout } from "./chatSession.js";
 import { ChatPanel, askForComputer, attachmentOf, buildAttachmentCard, chatToolLabel, createPanelBus, execOutput, mountRepositoryControl, openViewModal, paintPreview, roomHas, showPreview } from "./chatPanel.js";
 export { RepositoryControl, askForComputer, pickedRepository } from "./chatPanel.js";
 import { createTooltip } from "./hover.js";
@@ -105,8 +106,12 @@ function renderTool(call) {
     }
     return toolChip(call, 'build', status === 'error' ? `${name} failed` : name);
 }
-function renderToolCallElement(call, override) {
-    return override?.(call) ?? renderTool(call);
+/** A tool call's element; one that opened a live room pops it out when its chip is clicked. */
+function renderToolCallElement(call, override, sessions) {
+    const el = override?.(call) ?? renderTool(call);
+    if (call.session && call.id && sessions)
+        sessions.decorate(el, call.id, call.session);
+    return el;
 }
 function buildFileElement(file, iconMap, cards) {
     const code = typeof file.part?.accessCode === 'string' ? file.part.accessCode : '';
@@ -277,7 +282,7 @@ function appendTextBlock(el, text, message, onTokenClick) {
     });
     el.appendChild(textEl);
 }
-async function buildMessageElement(message, iconMap, modelIcons, renderToolCall, mode, selfUserId, onTokenClick, fileCards) {
+async function buildMessageElement(message, iconMap, modelIcons, renderToolCall, mode, selfUserId, onTokenClick, fileCards, sessions) {
     const incoming = isIncomingAuthor(message, chatMode(mode), selfUserId);
     const el = document.createElement('div');
     el.className = (message.role === 'user' && !incoming) ? 'chat-message-user' : 'chat-message-model';
@@ -288,7 +293,7 @@ async function buildMessageElement(message, iconMap, modelIcons, renderToolCall,
             if (block.type === 'text')
                 appendTextBlock(el, block.text, message, onTokenClick);
             else if (block.type === 'tool')
-                el.appendChild(renderToolCallElement(block.call, renderToolCall));
+                el.appendChild(renderToolCallElement(block.call, renderToolCall, sessions));
             else
                 el.appendChild(buildFileElement(block, iconMap, fileCards));
         }
@@ -298,7 +303,7 @@ async function buildMessageElement(message, iconMap, modelIcons, renderToolCall,
             appendTextBlock(el, message.text, message, onTokenClick);
         if (message.toolCalls) {
             for (const call of message.toolCalls) {
-                el.appendChild(renderToolCallElement(call, renderToolCall));
+                el.appendChild(renderToolCallElement(call, renderToolCall, sessions));
             }
         }
         if (message.files) {
@@ -332,7 +337,7 @@ function autoScroll(messagesEl, stick = nearBottom(messagesEl)) {
         messagesEl.scrollTop = messagesEl.scrollHeight;
     }
 }
-function createStreamRenderer(modelEl, messagesEl, renderToolCall) {
+function createStreamRenderer(modelEl, messagesEl, renderToolCall, sessions) {
     // Text is rendered in *segments* — each run of text between tool calls
     // gets its own .chat-message-text div. This way tool chips persist in the
     // DOM between segments, and the visual paragraph break between pre- and
@@ -427,7 +432,7 @@ function createStreamRenderer(modelEl, messagesEl, renderToolCall) {
                     Object.assign(stored, call, { id });
                     if (call.status === 'error')
                         console.error('[chat] tool failed', call.name, call.result ?? '');
-                    const el = renderToolCallElement(view, renderToolCall);
+                    const el = renderToolCallElement(view, renderToolCall, sessions);
                     existing.replaceWith(el);
                     toolElements.set(id, el);
                     continue;
@@ -444,7 +449,7 @@ function createStreamRenderer(modelEl, messagesEl, renderToolCall) {
                 }
                 const stored = { ...call, id };
                 toolCalls.push(stored);
-                const chip = renderToolCallElement(view, renderToolCall);
+                const chip = renderToolCallElement(view, renderToolCall, sessions);
                 toolElements.set(id, chip);
                 modelEl.appendChild(chip);
                 gsap.from(chip, { opacity: 0, x: -10, duration: 0.3, ease: 'power2.out' });
@@ -749,6 +754,13 @@ class ChatEngine {
                     openViewModal(attachment);
             }
         });
+        /** The live rooms tools open, popped out of their chips. */
+        Object.defineProperty(this, "sessions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         // ── Send button ──
         Object.defineProperty(this, "sendTooltip", {
             enumerable: true,
@@ -756,6 +768,7 @@ class ChatEngine {
             writable: true,
             value: null
         });
+        this.sessions = new SessionPopout(refs.root, () => chatAuthorization(this.options));
         const locked = lockedModels(options.models);
         const start = options.model && (!locked || locked.includes(options.model)) ? options.model : Fauna.Parrot.Generative.Text.AUTO;
         this.currentModel = locked?.length === 1 ? locked[0] : start;
@@ -784,7 +797,7 @@ class ChatEngine {
             const gen = this.generation;
             for (const message of options.initialHistory) {
                 this.history.push(message);
-                buildMessageElement(message, options.acceptedTypes, this.modelIcons, options.renderToolCall, options.mode, options.room?.self.profile.email, options.onTokenClick, this.fileCards).then((el) => {
+                buildMessageElement(message, options.acceptedTypes, this.modelIcons, options.renderToolCall, options.mode, options.room?.self.profile.email, options.onTokenClick, this.fileCards, this.sessions).then((el) => {
                     if (this.destroyed || this.generation !== gen)
                         return;
                     refs.messagesEl.appendChild(el);
@@ -1222,7 +1235,7 @@ class ChatEngine {
         this.refs.messagesEl.appendChild(modelEl);
         gsap.from(modelEl, { duration: 0.5, y: 100, opacity: 0, ease: 'power2.inOut' });
         gsap.to(this.refs.messagesEl, { duration: 0.5, scrollTop: this.refs.messagesEl.scrollHeight, ease: 'power2.inOut' });
-        const renderer = createStreamRenderer(modelEl, this.refs.messagesEl, this.options.renderToolCall);
+        const renderer = createStreamRenderer(modelEl, this.refs.messagesEl, this.options.renderToolCall, this.sessions);
         const isStale = () => this.destroyed || this.generation !== gen;
         const usedModel = this.currentModel;
         try {
@@ -1338,7 +1351,7 @@ class ChatEngine {
             gsap.from(el, { duration: 0.4, y: 40, opacity: 0, ease: 'power2.out' });
         }
         else {
-            buildMessageElement(chat, this.options.acceptedTypes, this.modelIcons, this.options.renderToolCall, this.options.mode, this.options.room?.self.profile.email, this.options.onTokenClick, this.fileCards).then((built) => {
+            buildMessageElement(chat, this.options.acceptedTypes, this.modelIcons, this.options.renderToolCall, this.options.mode, this.options.room?.self.profile.email, this.options.onTokenClick, this.fileCards, this.sessions).then((built) => {
                 if (this.destroyed || this.generation !== gen)
                     return;
                 if (this.paintedMessage(messageId))
@@ -1718,7 +1731,7 @@ class ChatEngine {
                     stampModelAvatar(el, this.currentModel, this.modelIcons);
                     this.refs.messagesEl.appendChild(el);
                     gsap.from(el, { duration: 0.4, y: 40, opacity: 0, ease: 'power2.out' });
-                    this.roomStream = { turn, el, renderer: createStreamRenderer(el, this.refs.messagesEl, this.options.renderToolCall) };
+                    this.roomStream = { turn, el, renderer: createStreamRenderer(el, this.refs.messagesEl, this.options.renderToolCall, this.sessions) };
                 }
                 this.roomStream.renderer.syncToolCalls(this.toolsWithProgress(tools));
                 if (files?.length)
@@ -2035,7 +2048,7 @@ class ChatEngine {
             model: role === 'model' ? this.currentModel : undefined,
         };
         this.history.push(message);
-        buildMessageElement(message, this.options.acceptedTypes, this.modelIcons, this.options.renderToolCall, this.options.mode, this.options.room?.self.profile.email, this.options.onTokenClick, this.fileCards).then((el) => {
+        buildMessageElement(message, this.options.acceptedTypes, this.modelIcons, this.options.renderToolCall, this.options.mode, this.options.room?.self.profile.email, this.options.onTokenClick, this.fileCards, this.sessions).then((el) => {
             if (message.model)
                 el.dataset.model = message.model;
             this.refs.messagesEl.appendChild(el);
@@ -2139,6 +2152,7 @@ class ChatEngine {
     }
     destroy() {
         this.destroyed = true;
+        this.sessions.destroy();
         this.generation++;
         this.generating = false;
         this.steerTarget = null;

package/dist/src/ui/chatPanel.js

@@ -697,6 +697,15 @@ function short(text, max = 60) {
 function baseName(path) {
     return path.split("/").filter(Boolean).pop() ?? path;
 }
+/** A page's site, like example.com, for a chip. */
+function siteOf(url) {
+    try {
+        return new URL(url).hostname || short(url);
+    }
+    catch {
+        return short(url) || "the page";
+    }
+}
 /** The icon and words for a chat's file and repository tools, or null for other tools. */
 export function chatToolLabel(call) {
     const args = call.args ?? {};
@@ -753,6 +762,11 @@ export function chatToolLabel(call) {
             out = { icon: "save", label: pick(`Saving ${name}`, `Saved ${name} to the repository`, `Couldn't save ${name}`) };
             break;
         }
+        case "use_browser": {
+            const site = siteOf(String(args.url ?? ""));
+            out = { icon: "travel_explore", label: pick(`Browsing ${site}`, `Browsed ${site}`, `Couldn't open ${site}`) };
+            break;
+        }
         case "use_desktop":
             if (done && call.result === Fauna.Termite.OS.DESKTOP_DECLINED)
                 out = { icon: "desktop_access_disabled", label: "Went without a computer" };

package/dist/src/ui/chatSession.d.ts

@@ -0,0 +1,26 @@
+import { Fauna } from "fauna-api";
+import type { ToolSession } from "./chatSequence.js";
+type Authorization = Fauna.Authentification.Credentials | Fauna.Authentification.ApiKey;
+/** What a session's panel is called: the site a browser is on, or the desktop. */
+export declare function sessionTitle(session: ToolSession): string;
+/**
+ * Pops the live room a tool opened (a browser page, a machine's desktop) out of its chip,
+ * inside the chat. One at a time; clicking the chip again, the close button or Escape puts it
+ * back. Chips are replaced as their tool's status changes, so each is found again by its tool id.
+ */
+export declare class SessionPopout {
+    private root;
+    private authorization;
+    private open;
+    constructor(root: HTMLElement, authorization: () => Authorization | undefined);
+    /** Makes a tool's chip a button that pops out its room. */
+    decorate(element: HTMLElement, id: string, session: ToolSession): void;
+    private chip;
+    private mark;
+    toggle(id: string, session: ToolSession, chip: HTMLElement): void;
+    private show;
+    /** Puts the open panel back into its chip and leaves its room. */
+    close(): void;
+    destroy(): void;
+}
+export {};

package/dist/src/ui/chatSession.js

@@ -0,0 +1,241 @@
+import gsap from "gsap";
+import { Fauna } from "fauna-api";
+import { createBrowser } from "./browser.js";
+/** What a desktop draws at before its first frame says. */
+const DESKTOP = { width: 1440, height: 900 };
+const OPEN_SECONDS = 0.36;
+const CLOSE_SECONDS = 0.26;
+function reducedMotion() {
+    return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+function host(url) {
+    try {
+        return new URL(url ?? "").hostname || "the page";
+    }
+    catch {
+        return "the page";
+    }
+}
+/** What a session's panel is called: the site a browser is on, or the desktop. */
+export function sessionTitle(session) {
+    return session.kind === "desktop" ? "Desktop" : host(session.url);
+}
+/** The transform that puts `panel` where `chip` is, for growing out of it and back. */
+function fromChip(panel, chip) {
+    const from = chip.getBoundingClientRect();
+    const to = panel.getBoundingClientRect();
+    return {
+        x: from.left - to.left,
+        y: from.top - to.top,
+        scaleX: from.width / Math.max(to.width, 1),
+        scaleY: from.height / Math.max(to.height, 1),
+        opacity: 0,
+        transformOrigin: "0 0",
+    };
+}
+/**
+ * Pops the live room a tool opened (a browser page, a machine's desktop) out of its chip,
+ * inside the chat. One at a time; clicking the chip again, the close button or Escape puts it
+ * back. Chips are replaced as their tool's status changes, so each is found again by its tool id.
+ */
+export class SessionPopout {
+    constructor(root, authorization) {
+        Object.defineProperty(this, "root", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: root
+        });
+        Object.defineProperty(this, "authorization", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: authorization
+        });
+        Object.defineProperty(this, "open", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+    }
+    /** Makes a tool's chip a button that pops out its room. */
+    decorate(element, id, session) {
+        const chip = element.classList.contains("chat-tool-chip")
+            ? element
+            : element.querySelector(".chat-tool-chip");
+        if (!chip)
+            return;
+        const title = sessionTitle(session);
+        chip.classList.add("chat-tool-session");
+        chip.dataset.toolId = id;
+        chip.tabIndex = 0;
+        chip.setAttribute("role", "button");
+        chip.setAttribute("aria-label", `Watch ${title}`);
+        chip.setAttribute("aria-expanded", String(this.open?.id === id));
+        const icon = document.createElement("span");
+        icon.className = "material-symbols-outlined chat-tool-session-icon";
+        icon.textContent = "open_in_full";
+        chip.appendChild(icon);
+        const toggle = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.toggle(id, session, chip);
+        };
+        chip.addEventListener("click", toggle);
+        chip.addEventListener("keydown", (event) => {
+            if (event.key === "Enter" || event.key === " ")
+                toggle(event);
+        });
+    }
+    chip(id) {
+        return this.root.querySelector(`.chat-tool-session[data-tool-id="${CSS.escape(id)}"]`);
+    }
+    mark(id, expanded) {
+        this.chip(id)?.setAttribute("aria-expanded", String(expanded));
+    }
+    toggle(id, session, chip) {
+        const same = this.open?.id === id;
+        this.close();
+        if (!same)
+            this.show(id, session, chip);
+    }
+    show(id, session, chip) {
+        const panel = document.createElement("div");
+        panel.className = "chat-session";
+        panel.setAttribute("role", "dialog");
+        panel.setAttribute("aria-label", sessionTitle(session));
+        const bar = document.createElement("div");
+        bar.className = "chat-session-bar";
+        const icon = document.createElement("span");
+        icon.className = "material-symbols-outlined";
+        icon.textContent = session.kind === "desktop" ? "desktop_windows" : "travel_explore";
+        const heading = document.createElement("span");
+        heading.className = "chat-session-title";
+        heading.textContent = sessionTitle(session);
+        const close = document.createElement("button");
+        close.type = "button";
+        close.className = "chat-session-close";
+        close.setAttribute("aria-label", "Close");
+        close.innerHTML = '<span class="material-symbols-outlined">close_fullscreen</span>';
+        bar.append(icon, heading, close);
+        const area = document.createElement("div");
+        area.className = "chat-session-area";
+        const stage = document.createElement("div");
+        stage.className = session.kind === "desktop" ? "chat-session-stage chat-session-desktop" : "chat-session-stage";
+        area.appendChild(stage);
+        panel.append(bar, area);
+        this.root.appendChild(panel);
+        let room = null;
+        let browser = null;
+        let left = false;
+        const fit = () => {
+            if (session.kind !== "desktop")
+                return;
+            const size = room?.web.getBootstrap()?.viewport ?? DESKTOP;
+            const { width, height } = area.getBoundingClientRect();
+            const scale = Math.min(width / size.width, height / size.height) || 1;
+            stage.style.width = `${size.width}px`;
+            stage.style.height = `${size.height}px`;
+            stage.style.transform = `scale(${scale})`;
+        };
+        const sized = new ResizeObserver(fit);
+        sized.observe(area);
+        const ended = () => {
+            browser?.destroy();
+            browser = null;
+            stage.className = "chat-session-ended";
+            stage.removeAttribute("style");
+            stage.textContent = "This session has ended.";
+        };
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                this.close();
+        };
+        document.addEventListener("keydown", onKey);
+        close.addEventListener("click", () => this.close());
+        this.open = {
+            id,
+            panel,
+            leave: () => {
+                left = true;
+                sized.disconnect();
+                document.removeEventListener("keydown", onKey);
+                browser?.destroy();
+                try {
+                    room?.disconnect();
+                }
+                catch { /* already gone */ }
+            },
+        };
+        this.mark(id, true);
+        if (reducedMotion()) {
+            gsap.fromTo(panel, { opacity: 0 }, { opacity: 1, duration: 0.15 });
+        }
+        else {
+            gsap.fromTo(panel, fromChip(panel, chip), {
+                x: 0, y: 0, scaleX: 1, scaleY: 1, opacity: 1,
+                duration: OPEN_SECONDS, ease: "power3.out", clearProps: "transform",
+            });
+        }
+        const authorization = this.authorization();
+        if (!authorization) {
+            ended();
+            return;
+        }
+        void (async () => {
+            try {
+                if (session.kind === "desktop") {
+                    const joined = await Fauna.Termite.OS.MachineRoom.connect(authorization, { reference: session.reference });
+                    if (left) {
+                        joined.room.disconnect();
+                        return;
+                    }
+                    room = joined.room;
+                    browser = createBrowser(stage, { room: joined.room, pagePixels: true, onFrame: fit, onClosed: ended });
+                }
+                else {
+                    const joined = await Fauna.Marmot.Browser.BrowserRoom.join(authorization, { accessCode: session.code ?? "" });
+                    if (left) {
+                        joined.room.disconnect();
+                        return;
+                    }
+                    room = joined.room;
+                    browser = createBrowser(stage, { room: joined.room, url: session.url, onClosed: ended });
+                }
+                fit();
+            }
+            catch {
+                if (!left)
+                    ended();
+            }
+        })();
+    }
+    /** Puts the open panel back into its chip and leaves its room. */
+    close() {
+        const open = this.open;
+        if (!open)
+            return;
+        this.open = null;
+        open.leave();
+        this.mark(open.id, false);
+        const chip = this.chip(open.id);
+        const remove = () => open.panel.remove();
+        if (reducedMotion() || !chip) {
+            gsap.to(open.panel, { opacity: 0, duration: 0.15, onComplete: remove });
+            return;
+        }
+        gsap.to(open.panel, {
+            ...fromChip(open.panel, chip),
+            duration: CLOSE_SECONDS,
+            ease: "power2.in",
+            onComplete: remove,
+        });
+    }
+    destroy() {
+        const open = this.open;
+        this.open = null;
+        open?.leave();
+        open?.panel.remove();
+    }
+}

package/dist/src/ui/ui.css

@@ -1305,6 +1305,100 @@ button.chat-message-file {
     background: #fff7f6;
 }
 
+/* A chip whose tool opened a live room: clicking it pops the browser or desktop out. */
+.chat-tool-session {
+    cursor: pointer;
+    transition: border-color 0.15s ease, color 0.15s ease;
+}
+.chat-tool-session:hover,
+.chat-tool-session:focus-visible,
+.chat-tool-session[aria-expanded="true"] {
+    border-color: var(--chat-accent, #888);
+    color: var(--chat-text, #1a1a1a);
+    outline: none;
+}
+.chat-tool-chip .chat-tool-session-icon {
+    font-size: 13px;
+    opacity: 0.7;
+}
+
+.chat-session {
+    position: absolute;
+    inset: 16px 16px 96px;
+    z-index: 30;
+    display: flex;
+    flex-direction: column;
+    max-width: 960px;
+    margin: 0 auto;
+    border-radius: 16px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    overflow: hidden;
+    background: var(--chat-input-bg, #fff);
+    color: var(--chat-text, #1a1a1a);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.16), 0 32px 64px rgba(0, 0, 0, 0.1);
+}
+.chat-session-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px 8px 14px;
+    border-bottom: 1px solid var(--chat-border, #e0e0e0);
+    font-size: 13px;
+}
+.chat-session-bar > .material-symbols-outlined {
+    font-size: 16px;
+    color: var(--chat-accent, #888);
+}
+.chat-session-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+}
+.chat-session-close {
+    display: inline-flex;
+    padding: 4px;
+    border: none;
+    border-radius: 8px;
+    background: none;
+    color: var(--chat-accent, #888);
+    cursor: pointer;
+}
+.chat-session-close:hover {
+    background: var(--chat-secondary, #f5f5f5);
+    color: var(--chat-text, #1a1a1a);
+}
+.chat-session-close .material-symbols-outlined {
+    font-size: 18px;
+}
+.chat-session-area {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--chat-secondary, #f5f5f5);
+}
+.chat-session-stage {
+    position: absolute;
+    inset: 0;
+}
+.chat-session-desktop {
+    inset: auto;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+}
+.chat-session-ended {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: 13px;
+    color: var(--chat-accent, #888);
+}
+
 .chat-tool-web {
     align-self: flex-start;
     max-width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fauna-api",
-  "version": "1.0.780",
+  "version": "1.0.783",
   "description": "The Fauna SDK: accounts, Drive, groups, calendar, chats, payments and every Fauna app (Parrot, Marmot, Magpie, Cicada, Ant, Termite), plus React UI.",
   "homepage": "https://docs.faunakit.com",
   "repository": {