@hosty-sdk/app 0.25.12 → 0.27.22

package/dist/ui-embedded.js

@@ -1,9 +1,13 @@
+import { activeNavigationKey, UiCompositionModel } from "./ui-composition.js";
+import { UI_COMPOSITION_CAPABILITY } from "./ui-types.js";
 import { createPresentationRequestId } from "./ui.js";
 import { UiError } from "./ui-types.js";
-import { DISCOVERY_TIMEOUT, failure, readUiMessage, uiRequest, validId, validTarget, waitForPresentation } from "./ui-transport.js";
+import { canonicalSurfaceRoute, DISCOVERY_TIMEOUT, failure, readUiMessage, uiRequest, validId, validTarget, waitForPresentation } from "./ui-transport.js";
 /** Direct-child transport. Discovery carries no identity and never creates a fallback host. */
 export class EmbeddedUiClient {
     path;
+    composition;
+    localActions = new Map();
     environment = { mode: "embedded", connection: "connecting" };
     nonce = createPresentationRequestId();
     listeners = new Set();
@@ -20,8 +24,19 @@ export class EmbeddedUiClient {
     onFocus = () => { void this.recheck(); };
     onKey = (event) => { if (this.active && !event.defaultPrevented && event.key === "Escape")
         this.post({ type: "hosty:ui:dismiss" }); };
-    constructor(path) {
+    constructor(path, chrome = {}) {
         this.path = path;
+        this.composition = new UiCompositionModel(path, "embedded", chrome);
+        this.composition.attachRouter();
+        this.composition.subscribeNavigation(() => {
+            if (this.getChrome().capabilities.includes(UI_COMPOSITION_CAPABILITY) && this.environment.connection === "connected") {
+                const route = this.composition.currentRoute();
+                if (this.state && canonicalSurfaceRoute(this.state.route) === canonicalSurfaceRoute(route))
+                    this.reportSurfaceState(this.state);
+                else
+                    this.reportRoute(route);
+            }
+        });
         window.addEventListener("message", this.onMessage);
         window.addEventListener("focus", this.onFocus);
         window.addEventListener("keydown", this.onKey);
@@ -30,12 +45,18 @@ export class EmbeddedUiClient {
             this.setEnvironment("unsupported", "unsupported_nesting");
     }
     getEnvironment = () => this.environment;
+    getChrome = () => this.composition.getChrome();
+    subscribeChrome = (listener) => this.composition.subscribeChrome(listener);
+    getNavigation = () => this.composition.getNavigation();
+    subscribeNavigation = (listener) => this.composition.subscribeNavigation(listener);
     setActive(active) {
         if (this.active === active)
             return;
         if (!active)
             this.post({ type: "hosty:ui:auth-required" });
         this.active = active;
+        this.composition.resetNavigation();
+        this.localActions.clear();
         this.channel = null;
         this.verifying = null;
         this.nonce = createPresentationRequestId();
@@ -72,11 +93,12 @@ export class EmbeddedUiClient {
         if (this.disposed)
             return;
         this.environment = { mode: "embedded", connection, ...(code ? { code } : {}) };
+        this.composition.setEnvironment(this.environment);
         this.emit({ type: "environment", value: this.environment });
     }
     probe() {
         if (this.active && !this.disposed && window.parent === window.top && !this.channel)
-            window.parent.postMessage({ type: "hosty:ui:probe", version: 1, versions: [1], childNonce: this.nonce }, "*");
+            window.parent.postMessage({ type: "hosty:ui:probe", version: 1, versions: [1], capabilities: [UI_COMPOSITION_CAPABILITY], childNonce: this.nonce }, "*");
     }
     discover() {
         clearTimeout(this.deadline);
@@ -154,7 +176,7 @@ export class EmbeddedUiClient {
                 if (previous && (previous.origin !== event.origin || previous.hostWindowId !== msg.hostWindowId || previous.generation !== msg.generation))
                     this.retirePending();
                 this.channel = { origin: event.origin, hostWindowId: msg.hostWindowId, generation: msg.generation, own };
-                this.post({ type: "hosty:ui:accept", coreOrigin: own.coreOrigin, userId: own.userId, appId: own.app.appId, installationId: own.app.installationId });
+                this.post({ type: "hosty:ui:accept", capabilities: [UI_COMPOSITION_CAPABILITY], coreOrigin: own.coreOrigin, userId: own.userId, appId: own.app.appId, installationId: own.app.installationId });
             }
             catch (error) {
                 if (this.disposed || !this.active || this.verifying !== key)
@@ -179,16 +201,29 @@ export class EmbeddedUiClient {
             }
             clearTimeout(this.deadline);
             this.setEnvironment("connected");
+            if (Array.isArray(msg.capabilities) && msg.capabilities.includes(UI_COMPOSITION_CAPABILITY)) {
+                this.composition.setHostPolicy(channel.generation, msg.revision, msg.chrome, msg.rootDisabled === true, msg.endpoint);
+            }
+            else
+                this.composition.setLegacyHost();
+            void this.composition.refreshNavigation();
             if (this.state)
                 this.reportSurfaceState(this.state);
             return;
         }
         if (this.environment.connection !== "connected")
             return;
-        if (msg.type === "hosty:ui:result" && validId(msg.requestId) && validResult(msg.result, msg.requestId)) {
-            const result = msg.result;
-            this.pending.get(msg.requestId)?.resolve(result);
-            this.emit({ type: "presentation", value: result });
+        if (msg.type === "hosty:ui:chrome" && this.getChrome().capabilities.includes(UI_COMPOSITION_CAPABILITY)) {
+            this.composition.setHostPolicy(channel.generation, msg.revision, msg.chrome, msg.rootDisabled === true, msg.endpoint);
+            return;
+        }
+        if ((msg.type === "hosty:ui:result" || msg.type === "hosty:ui:action-result") && validId(msg.requestId) && validResult(msg.result, msg.requestId)) {
+            const result = msg.result, pending = this.pending.get(msg.requestId);
+            if (result.status === "accepted" && pending?.kind !== "action" || result.status === "opened" && pending?.kind === "action")
+                return;
+            pending?.resolve(result);
+            if (result.status !== "accepted")
+                this.emit({ type: "presentation", value: result });
         }
     }
     async request(requestId, message, signal) {
@@ -199,7 +234,9 @@ export class EmbeddedUiClient {
         if (signal?.aborted)
             return { status: "uncertain", requestId, code: "presentation_unknown" };
         const target = message.target;
-        const input = target ? JSON.stringify([target.panel.appId, target.panel.installationId, target.panel.panelId, target.route ?? null]) : null;
+        const input = message.type === "hosty:ui:status" ? null : JSON.stringify([message.type, target?.panel ?? null, target?.route ?? null, message.reuse ?? "exact", message.entryKey ?? null]);
+        if (this.localActions.has(requestId))
+            return { status: "rejected", requestId, code: "request_conflict" };
         const existing = this.pending.get(requestId);
         if (existing) {
             if (input !== null && existing.input !== null && input !== existing.input)
@@ -214,11 +251,11 @@ export class EmbeddedUiClient {
             }
             return this.wait(requestId, existing, signal);
         }
-        if (this.pending.size >= 4)
+        if (this.pending.size + [...this.localActions.values()].filter(value => value.pending).length >= 4)
             return { status: "blocked", requestId, code: "presentation_busy" };
         let settle;
         const operation = new Promise(resolve => { settle = resolve; });
-        const entry = { input, operation, waiters: 0, sent: false, resolve: result => {
+        const entry = { kind: message.type === "hosty:ui:picker" || message.type === "hosty:ui:navigate" ? "action" : "presentation", input, operation, waiters: 0, sent: false, resolve: result => {
                 if (this.pending.get(requestId) === entry)
                     this.pending.delete(requestId);
                 settle(result);
@@ -247,17 +284,86 @@ export class EmbeddedUiClient {
                 this.pending.delete(requestId);
         });
     }
-    openSurface = (target, options) => validTarget(target) && options.placement === "side"
-        ? this.request(options.requestId, { type: "hosty:ui:open", target, placement: "side" }, options.signal)
-        : Promise.resolve({ status: "rejected", requestId: options.requestId, code: "invalid_presentation" });
+    openSurface = (target, options) => {
+        if (!this.getChrome().tools.enabled)
+            return Promise.resolve({ status: "blocked", requestId: options.requestId, code: "tools_disabled" });
+        if (options.reuse !== undefined && !this.getChrome().capabilities.includes(UI_COMPOSITION_CAPABILITY))
+            return Promise.resolve({ status: "unsupported", requestId: options.requestId, code: "unsupported_composition" });
+        return validTarget(target) && options.placement === "side"
+            ? this.request(options.requestId, { type: "hosty:ui:open", target, placement: "side", ...(options.reuse ? { reuse: options.reuse } : {}) }, options.signal)
+            : Promise.resolve({ status: "rejected", requestId: options.requestId, code: "invalid_presentation" });
+    };
     getPresentation = (requestId, options) => this.request(requestId, { type: "hosty:ui:status" }, options?.signal);
+    openToolPicker = (options) => {
+        if (!this.getChrome().tools.enabled)
+            return Promise.resolve({ status: "blocked", requestId: options.requestId, code: "tools_disabled" });
+        if (!this.getChrome().capabilities.includes(UI_COMPOSITION_CAPABILITY))
+            return Promise.resolve({ status: "unsupported", requestId: options.requestId, code: "unsupported_composition" });
+        return this.request(options.requestId, { type: "hosty:ui:picker" }, options.signal);
+    };
+    navigate = (entryKey, options) => {
+        const id = options.requestId, existing = this.localActions.get(id);
+        if (!validId(id))
+            return Promise.resolve({ status: "rejected", requestId: id, code: "invalid_presentation" });
+        if (existing)
+            return existing.key === entryKey ? waitForPresentation(existing.result, id, options.signal) : Promise.resolve({ status: "rejected", requestId: id, code: "request_conflict" });
+        const entry = this.getNavigation().entries.find(e => e.key === entryKey);
+        if (!entry?.route)
+            return Promise.resolve({ status: "blocked", requestId: id, code: "destination_changed" });
+        if (!this.composition.isLocalEntry(entry)) {
+            if (!this.getChrome().capabilities.includes(UI_COMPOSITION_CAPABILITY))
+                return Promise.resolve({ status: "unsupported", requestId: id, code: "unsupported_composition" });
+            return this.request(id, { type: "hosty:ui:navigate", entryKey }, options.signal);
+        }
+        if (this.pending.has(id))
+            return Promise.resolve({ status: "rejected", requestId: id, code: "request_conflict" });
+        if (this.pending.size + [...this.localActions.values()].filter(value => value.pending).length >= 4)
+            return Promise.resolve({ status: "blocked", requestId: id, code: "presentation_busy" });
+        const nonce = this.nonce;
+        const operation = Promise.resolve().then(async () => {
+            try {
+                if (!this.active || this.disposed || nonce !== this.nonce)
+                    throw new UiError("activity_required", "Sign in to navigate.");
+                if (options.signal?.aborted)
+                    return { status: "uncertain", requestId: id, code: "presentation_unknown" };
+                await this.composition.navigateLocal(entry);
+                if (!this.active || this.disposed || nonce !== this.nonce)
+                    throw new UiError("activity_required", "Sign in to navigate.");
+                return { status: "accepted", requestId: id };
+            }
+            catch (error) {
+                return failure(id, error);
+            }
+        });
+        const action = { key: entryKey, result: operation, pending: true };
+        this.localActions.set(id, action);
+        void operation.finally(() => {
+            action.pending = false;
+            for (const [key, value] of this.localActions) {
+                if (this.localActions.size <= 256)
+                    break;
+                if (!value.pending)
+                    this.localActions.delete(key);
+            }
+        });
+        return waitForPresentation(operation, id, options.signal);
+    };
+    reportRoute(route) {
+        const entryKey = activeNavigationKey(this.getNavigation().entries, this.composition.currentEndpoint(), route);
+        this.post({ type: "hosty:ui:route", route, ...(entryKey ? { entryKey } : {}) });
+    }
     reportSurfaceState = (state) => {
         this.state = state;
-        if (this.environment.connection === "connected")
+        if (this.environment.connection === "connected") {
+            if (this.getChrome().capabilities.includes(UI_COMPOSITION_CAPABILITY))
+                this.reportRoute(state.route);
             this.post({ type: "hosty:ui:surface-state", ...state });
+        }
     };
     dispose = () => {
         this.disposed = true;
+        this.composition.dispose();
+        this.localActions.clear();
         clearTimeout(this.deadline);
         this.retries.forEach(clearTimeout);
         window.removeEventListener("message", this.onMessage);
@@ -273,6 +379,6 @@ function validResult(value, id) {
     if (!value || typeof value !== "object")
         return false;
     const v = value;
-    return v.requestId === id && (v.status === "opened" ? validTarget(v.target) && ["loading", "ready", "unreported", "auth-required"].includes(v.readiness)
-        : ["blocked", "unsupported", "rejected", "uncertain", "unknown"].includes(v.status) && "code" in v && typeof v.code === "string");
+    return v.requestId === id && (v.status === "accepted" || (v.status === "opened" ? validTarget(v.target) && ["loading", "ready", "unreported", "auth-required"].includes(v.readiness)
+        : ["blocked", "unsupported", "rejected", "uncertain", "unknown"].includes(v.status) && "code" in v && typeof v.code === "string"));
 }

package/dist/ui-frame-layer.d.ts

@@ -0,0 +1,36 @@
+import { type HostyAppFrameProps } from "./ui-frame.js";
+import type { UiHost } from "./ui-host.js";
+import type { PanelTarget } from "./ui-types.js";
+export type UiViewport = {
+    element: HTMLElement;
+    drawer: boolean;
+    onAskAssistant?: HostyAppFrameProps["onAskAssistant"];
+    onAuthRequired?: HostyAppFrameProps["onAuthRequired"];
+    outbound?: {
+        target: PanelTarget;
+        presentationId?: string;
+        message: unknown;
+        nonce: number;
+    } | null;
+};
+/** One stable React frame tree for every dock/window rectangle in this document. */
+export declare class UiFrameLayer {
+    root: HTMLDivElement | null;
+    readonly containers: Map<string, HTMLDivElement>;
+    ensure(id: string): boolean;
+    release(id: string): void;
+    readonly viewports: Map<string, UiViewport>;
+    private revision;
+    private readonly listeners;
+    getSnapshot: () => number;
+    subscribe: (listener: () => void) => () => void;
+    update: () => void;
+    register(id: string, viewport: UiViewport): () => void;
+}
+export declare const UiFrameLayerContext: import("react").Context<UiFrameLayer | null>;
+export declare function presentationElement(id: string): HTMLElement | null;
+export declare function HostyPresentationLayer({ layer, host, active }: {
+    layer: UiFrameLayer;
+    host: UiHost;
+    active: boolean;
+}): import("react").JSX.Element;

package/dist/ui-frame-layer.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useEffect, useLayoutEffect, useSyncExternalStore } from "react";
+import { HostyAppFrame } from "./ui-frame.js";
+import { createPortal } from "react-dom";
+import { panelKey } from "./ui-types.js";
+/** One stable React frame tree for every dock/window rectangle in this document. */
+export class UiFrameLayer {
+    root = null;
+    containers = new Map();
+    ensure(id) {
+        if (!this.root?.isConnected)
+            return false;
+        if (!this.containers.has(id)) {
+            const element = document.createElement("div");
+            element.dataset.hostyPresentation = id;
+            element.id = `hosty-presentation-${id}`;
+            element.className = "hosty-panel-frame";
+            element.hidden = true;
+            element.inert = true;
+            element.style.display = "none";
+            this.root.append(element);
+            this.containers.set(id, element);
+            this.update();
+        }
+        return true;
+    }
+    release(id) { this.containers.get(id)?.remove(); this.containers.delete(id); this.update(); }
+    viewports = new Map();
+    revision = 0;
+    listeners = new Set();
+    getSnapshot = () => this.revision;
+    subscribe = (listener) => { this.listeners.add(listener); return () => { this.listeners.delete(listener); }; };
+    update = () => { this.revision++; for (const listener of this.listeners)
+        listener(); };
+    register(id, viewport) {
+        this.viewports.set(id, viewport);
+        this.update();
+        const observer = new ResizeObserver(this.update);
+        observer.observe(viewport.element);
+        return () => { observer.disconnect(); if (this.viewports.get(id) === viewport)
+            this.viewports.delete(id); this.update(); };
+    }
+}
+export const UiFrameLayerContext = createContext(null);
+export function presentationElement(id) {
+    return document.querySelector(`[data-hosty-presentation="${id}"]`);
+}
+export function HostyPresentationLayer({ layer, host, active }) {
+    const state = useSyncExternalStore(host.subscribeSnapshot, host.getSnapshot, host.getSnapshot);
+    useSyncExternalStore(layer.subscribe, layer.getSnapshot, layer.getSnapshot);
+    useEffect(() => {
+        window.addEventListener("resize", layer.update);
+        window.addEventListener("scroll", layer.update, true);
+        return () => { window.removeEventListener("resize", layer.update); window.removeEventListener("scroll", layer.update, true); };
+    }, [layer]);
+    useLayoutEffect(() => {
+        for (const [id, element] of layer.containers) {
+            const tool = state.tools.find(t => t.presentationId === id);
+            if (!tool) {
+                layer.release(id);
+                continue;
+            }
+            const viewport = layer.viewports.get(tool.workspaceId), workspace = state.workspaces?.find(w => w.workspaceId === tool.workspaceId);
+            const visible = !!(active && viewport && workspace?.expanded && workspace.selectedId === id);
+            const rect = viewport?.element.getBoundingClientRect();
+            element.hidden = !visible;
+            element.inert = !visible;
+            Object.assign(element.style, { position: "fixed", left: `${rect?.left ?? 0}px`, top: `${rect?.top ?? 0}px`,
+                width: `${rect?.width ?? 0}px`, height: `${rect?.height ?? 0}px`, zIndex: viewport?.drawer ? "103" : "10", display: visible ? "block" : "none" });
+        }
+    });
+    return _jsxs(_Fragment, { children: [_jsx("div", { ref: element => { layer.root = element; }, className: "hosty-presentation-layer" }), state.tools.map(tool => {
+                const viewport = layer.viewports.get(tool.workspaceId), workspace = state.workspaces?.find(w => w.workspaceId === tool.workspaceId);
+                const surface = tool.resolved.surface, container = layer.containers.get(tool.presentationId);
+                if (!container)
+                    return null;
+                const focusControls = (last) => {
+                    const controls = Array.from(viewport?.element.closest("aside")?.querySelectorAll('button,a[href],select') ?? [])
+                        .filter(element => !element.disabled);
+                    (last ? controls.at(-1) : controls[0])?.focus();
+                };
+                return createPortal(_jsxs(_Fragment, { children: [viewport?.drawer && _jsx("span", { tabIndex: 0, "aria-hidden": "true", className: "hosty-panel-focus-guard", onFocus: () => focusControls(true) }), surface ? _jsx(HostyAppFrame, { surface: { ...surface, panelId: tool.target.panel.panelId }, view: { viewId: `tool-${tool.presentationId}`, workspaceId: tool.workspaceId, presentationId: tool.presentationId, chrome: { navigation: "hide", tools: { launcher: "hide" } } }, title: state.catalog.find(p => panelKey(p.panel) === tool.key)?.label ?? "Tool", standaloneHref: tool.resolved.standaloneHref, onAskAssistant: viewport?.onAskAssistant, onAuthRequired: viewport?.onAuthRequired, onAttention: count => host.setAttention(tool.presentationId, count), outbound: viewport?.outbound && panelKey(viewport.outbound.target.panel) === tool.key
+                                && (viewport.outbound.presentationId ? viewport.outbound.presentationId === tool.presentationId
+                                    : workspace?.selectedId === tool.presentationId && viewport.outbound.target.route === tool.currentRoute) ? viewport.outbound : null })
+                            : _jsxs("div", { className: "hosty-panel-notice", role: "status", children: ["This tool is unavailable (", tool.resolved.state, ")."] }), viewport?.drawer && _jsx("span", { tabIndex: 0, "aria-hidden": "true", className: "hosty-panel-focus-guard", onFocus: () => focusControls(false) })] }), container, tool.presentationId);
+            })] });
+}

package/dist/ui-frame.d.ts

@@ -1,4 +1,5 @@
 import { type HostyResolvedTheme, type HostyThemePreference } from "./theme.js";
+import type { UiViewDescriptor } from "./ui-workspaces.js";
 import type { UiFrameSurface } from "./ui-types.js";
 export declare function parseFrameMcpReview(event: {
     source: unknown;
@@ -10,6 +11,7 @@ export declare function parseFrameMcpReview(event: {
 } | null;
 export declare function frameSandbox(policy: UiFrameSurface["framePolicy"]): string;
 export type HostyAppFrameProps = {
+    view?: UiViewDescriptor;
     surface: UiFrameSurface;
     title: string;
     src?: string;

package/dist/ui-frame.js

@@ -5,6 +5,8 @@ import { UiHostContext } from "./ui-context.js";
 import { appendThemeLaunchParams, parseActiveFrameAskAssistant, parseActiveFrameAttention, parseActiveFrameAuthRequired, parseActiveFramePermissionReview } from "./embedder.js";
 import { createShellThemeMessage } from "./theme.js";
 import { permissionReviewUrl } from "./permissions.js";
+import { withChromeHints } from "./ui-composition.js";
+import { createPresentationRequestId } from "./ui.js";
 export function parseFrameMcpReview(event, frame, src, appId) {
     if (!frame || event.source !== frame || !event.data || typeof event.data !== "object")
         return null;
@@ -24,7 +26,11 @@ export function frameSandbox(policy) {
 }
 /** Shared frame coordinator. No delegated-token responder and no authority inferred from messages. */
 export function HostyAppFrame(props) {
-    const { surface, title, className, standaloneHref, theme, themePreference } = props;
+    const { title, className, standaloneHref, theme, themePreference } = props;
+    const inputId = JSON.stringify([props.surface, props.src]);
+    const [destination, setDestination] = useState(null);
+    const surface = destination?.inputId === inputId ? destination.surface : props.surface;
+    const [defaultViewId] = useState(createPresentationRequestId);
     const host = useContext(UiHostContext);
     const ref = useRef(null);
     const callbacks = useRef(props);
@@ -47,20 +53,44 @@ export function HostyAppFrame(props) {
         return () => observer.disconnect();
     }, []);
     const resolvedTheme = theme ?? appearance.theme, preference = themePreference ?? appearance.preference;
-    const source = props.src ?? new URL(surface.route, surface.origin).href;
+    const source = destination?.inputId === inputId ? new URL(surface.route, surface.origin).href
+        : props.src ?? new URL(surface.route, surface.origin).href;
     // Theme changes are messages; they must not replace a document with an unsent draft.
-    const [launch] = useState(() => {
+    const [launch, setLaunch] = useState(() => {
         const url = new URL(source);
         url.searchParams.set("hosty_launch", "embedded");
-        return appendThemeLaunchParams(url.href, resolvedTheme, preference);
+        return appendThemeLaunchParams(withChromeHints(url.href, host?.getViewChrome?.(props.view?.viewId ?? defaultViewId)
+            ?? props.view?.chrome ?? { navigation: "hide", tools: { launcher: "hide" } }), resolvedTheme, preference);
     });
     const frameId = JSON.stringify([surface, source]);
     useLayoutEffect(() => {
         const frame = ref.current;
         if (!frame || !host)
             return;
-        return host.registerFrame(frame, surface, ready => setConnection(current => ({ ready, generation: current.generation + (ready ? 1 : 0) })));
-    }, [host, frameId]); // Caller keys the frame by this immutable surface.
+        const view = callbacks.current.view;
+        return host.registerFrame(frame, surface, ready => setConnection(current => ({ ready, generation: current.generation + (ready ? 1 : 0) })), { viewId: defaultViewId, workspaceId: "default", chrome: { navigation: "hide", tools: { launcher: "hide" } }, ...view,
+            navigate: next => {
+                const current = callbacks.current;
+                if (current.view?.navigate)
+                    return current.view.navigate(next);
+                // Replace the document through React so every message handler follows its verified origin.
+                const url = new URL(next.route, next.origin);
+                url.searchParams.set("hosty_launch", "embedded");
+                setLoaded(false);
+                setReview(null);
+                setDestination({ inputId: JSON.stringify([current.surface, current.src]), surface: { ...next, panelId: surface.panelId } });
+                setLaunch(appendThemeLaunchParams(withChromeHints(url.href, host.getViewChrome(current.view?.viewId ?? defaultViewId)
+                    ?? current.view?.chrome ?? { navigation: "hide", tools: { launcher: "hide" } }), resolvedTheme, preference));
+            } });
+    }, [host, frameId]);
+    const policy = JSON.stringify(props.view?.chrome ?? {});
+    const previousPolicy = useRef({ viewId: props.view?.viewId, policy });
+    useEffect(() => {
+        const previous = previousPolicy.current;
+        previousPolicy.current = { viewId: props.view?.viewId, policy };
+        if (host && props.view && ref.current && previous.viewId === props.view.viewId && previous.policy !== policy)
+            host.setViewChrome(props.view.viewId, JSON.parse(policy));
+    }, [host, props.view?.viewId, policy]);
     useEffect(() => {
         if (loaded)
             ref.current?.contentWindow?.postMessage(createShellThemeMessage(resolvedTheme, preference), surface.origin);
@@ -93,9 +123,15 @@ export function HostyAppFrame(props) {
         return () => window.removeEventListener("message", handle);
     }, [host, frameId, source, surface]);
     const outboundReady = host ? connection.ready : loaded;
+    const sent = useRef(null);
     useEffect(() => {
-        if (outboundReady && props.outbound)
+        if (outboundReady && props.outbound) {
+            const key = `${connection.generation}:${props.outbound.nonce}`;
+            if (sent.current === key)
+                return;
             ref.current?.contentWindow?.postMessage(props.outbound.message, surface.origin);
+            sent.current = key;
+        }
     }, [outboundReady, connection.generation, props.outbound?.nonce, surface.origin]);
     const insecure = typeof window !== "undefined" && window.location.protocol === "https:" && new URL(surface.origin).protocol === "http:";
     if (insecure)

package/dist/ui-host.d.ts

@@ -1,17 +1,20 @@
+import { UiCompositionModel } from "./ui-composition.js";
+import { type UiPresentation, type UiWorkspaceSnapshot, type UiWorkspaceRenderer, type UiViewDescriptor, type UiPlacementResolver } from "./ui-workspaces.js";
+export type { UiWorkspaceRenderer, UiViewDescriptor, UiPlacementResolver, UiPresentation } from "./ui-workspaces.js";
+import { type UiChromeOverrides, type UiActionOptions, type UiActionResult } from "./ui-types.js";
 import { type UiClient } from "./ui.js";
-import { type PanelRef, type PanelTarget, type PresentationOptions, type PresentationResult, type UiBootstrap, type UiEnvironment, type UiEvent, type UiFrameSurface, type UiPanel, type UiResolvedPanel, type SurfaceReadiness } from "./ui-types.js";
-export type UiTool = {
-    key: string;
-    target: PanelTarget;
-    resolved: UiResolvedPanel;
-    readiness: SurfaceReadiness;
-    attention: number;
+import { type PanelRef, type PanelTarget, type PresentationOptions, type PresentationResult, type UiBootstrap, type UiEnvironment, type UiEvent, type UiFrameSurface, type UiPanel } from "./ui-types.js";
+export type UiTool = UiPresentation & {
+    panelSurface: UiFrameSurface;
+    navigationRoot?: string;
 };
 export type UiHostSnapshot = {
     bootstrap: UiBootstrap | null;
     catalog: UiPanel[];
     tools: UiTool[];
     selected: PanelRef | null;
+    selectedPresentationId?: string | null;
+    workspaces?: UiWorkspaceSnapshot[];
     expanded: boolean;
     width: number;
     error: {
@@ -23,6 +26,7 @@ export type UiHostSnapshot = {
 export declare function createUiHost(options?: {
     uiPath?: string;
     active?: boolean;
+    chrome?: UiChromeOverrides;
 }): UiHost;
 export declare class UiHost implements UiClient {
     private readonly path;
@@ -33,48 +37,91 @@ export declare class UiHost implements UiClient {
     private readonly listeners;
     private readonly events;
     private readonly frames;
+    private readonly viewChrome;
     private readonly ledger;
     private readonly toolQueues;
-    private selectionGeneration;
+    private readonly moves;
+    private readonly rendererWork;
+    readonly composition: UiCompositionModel;
+    private readonly workspaces;
+    private placement?;
+    private readonly actions;
+    private focusSequence;
     private activityGeneration;
     private activityReady;
     private disposed;
-    private workspace;
     private refreshing;
     private readonly onMessage;
     private readonly onFocus;
-    constructor(path: string, active?: boolean);
+    constructor(path: string, active?: boolean, chrome?: UiChromeOverrides);
     getEnvironment: () => UiEnvironment;
+    getChrome: () => import("./ui-types").UiChromeSnapshot;
+    subscribeChrome: (listener: () => void) => () => void;
+    getNavigation: () => Readonly<{
+        status: "loading" | "ready" | "unavailable";
+        catalog: import("./ui-types").UiNavigationCatalog | null;
+        entries: readonly import("./ui-types").UiNavigationEntry[];
+        activeKey: string | null;
+        code?: string;
+    }>;
+    subscribeNavigation: (listener: () => void) => () => void;
     setActive(active: boolean): void;
     private checkActivity;
     claimWorkspace: (owner: object) => () => void;
+    registerWorkspace: ({ workspaceId, renderer }: {
+        workspaceId: string;
+        renderer: UiWorkspaceRenderer;
+    }) => () => void;
+    private publishWorkspaces;
+    setPlacementResolver: (resolver?: UiPlacementResolver) => void;
+    getViewChrome: (viewId: string) => UiChromeOverrides | undefined;
+    setViewChrome: (viewId: string, overrides: UiChromeOverrides) => void;
+    private publishPolicy;
+    private requireTools;
+    focusPresentation: (id: string) => boolean;
+    collapseWorkspace: (id: string) => void;
+    closePresentation: (id: string) => void;
+    private releasePresentation;
+    private resetPresentations;
+    movePresentation: (id: string, workspaceId: string) => Promise<boolean>;
     getSnapshot: () => UiHostSnapshot;
     subscribeSnapshot: (listener: () => void) => () => void;
     subscribe: (listener: (event: UiEvent) => void) => () => void;
     private emit;
     private update;
+    private invalidateRendererWork;
+    private runRenderer;
     private setEnvironment;
     private bootstrap;
     refresh: () => Promise<void>;
     openSurface: (target: PanelTarget, options: PresentationOptions) => Promise<PresentationResult>;
     private open;
+    private pendingCount;
+    private trimLedger;
+    private peerResult;
+    private action;
+    navigate: (entryKey: string, options: UiActionOptions) => Promise<UiActionResult>;
+    openToolPicker: (options: UiActionOptions) => Promise<UiActionResult>;
+    private pickTools;
+    private navigateFrame;
     getPresentation: (id: string, options?: {
         signal?: AbortSignal;
     }) => Promise<PresentationResult>;
     private status;
-    selectPanel: (ref: PanelRef) => Promise<PresentationResult>;
-    setExpanded: (expanded: boolean) => void;
-    setWidth: (width: number) => void;
-    setAttention: (panel: PanelRef, attention: number) => void;
+    selectPanel: (ref: PanelRef, workspaceId?: string) => Promise<PresentationResult>;
+    setExpanded: (expanded: boolean, workspaceId?: string) => void;
+    setWidth: (width: number, workspaceId?: string) => void;
+    setAttention: (panel: PanelRef | string, attention: number) => void;
     reportSurfaceState: (_state: {
         route: string;
         state: "ready" | "blocked";
         code?: string;
     }) => void;
     private forgetFrameRequests;
-    registerFrame: (element: HTMLIFrameElement, surface: UiFrameSurface, onConnection?: (connected: boolean) => void) => (() => void);
+    registerFrame: (element: HTMLIFrameElement, surface: UiFrameSurface, onConnection?: (connected: boolean) => void, view?: UiViewDescriptor) => (() => void);
     private post;
     private reportFrame;
+    private reportRoute;
     private receive;
     dispose: () => void;
 }