@epam/ai-dial-mcp-apps 1.2.0-dev.6 → 1.2.0-dev.69

package/components/McpAppInlinePreview/McpAppInlinePreview.d.ts

@@ -1,4 +1,4 @@
-import { McpAppHostAdapter, McpAppResponseCache, McpAppToolCallSeed, McpAppToolRef } from '../../models/mcp-apps';
+import { McpAppHostAdapter, McpAppInlinePreviewColors, McpAppResponseCache, McpAppToolCallSeed, McpAppToolRef } from '../../models/mcp-apps';
 /** Props for the `McpAppInlinePreview` component. */
 export interface McpAppInlinePreviewProps {
     /** Matched MCP App tool to preview. */
@@ -21,6 +21,17 @@ export interface McpAppInlinePreviewProps {
     actionsGroupAriaLabel?: string;
     /** Message shown when the resource fails to load or the app fails to initialize. */
     loadErrorLabel: string;
+    /**
+     * Whether this message's MCP App is currently open in the full-width
+     * canvas. When `true`, the header stays (so the tool/app identity is still
+     * visible) but the body shows `openedInCanvasLabel` centered instead of
+     * mounting the app — only one live app instance exists at a time.
+     */
+    isOpenedInCanvas?: boolean;
+    /** Message shown centered in the body when `isOpenedInCanvas` is `true`. */
+    openedInCanvasLabel: string;
+    /** Color overrides applied as CSS custom properties on the preview's root. */
+    colors?: McpAppInlinePreviewColors;
 }
 /** Renders a compact, always-visible preview of a message's matched MCP App — see `McpAppInlinePreviewProps`. */
 export declare const McpAppInlinePreview: import('react').NamedExoticComponent<McpAppInlinePreviewProps>;

package/components/McpAppInlinePreview/McpAppInlinePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"McpAppInlinePreview.d.ts","sourceRoot":"","sources":["../../../src/components/McpAppInlinePreview/McpAppInlinePreview.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAE/B,qDAAqD;AACrD,MAAM,WAAW,wBAAwB;IACvC,uCAAuC;IACvC,KAAK,EAAE,aAAa,CAAC;IACrB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,uIAAuI;IACvI,KAAK,EAAE,mBAAmB,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,6GAA6G;IAC7G,WAAW,EAAE,iBAAiB,CAAC;IAC/B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,eAAe,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,uFAAuF;IACvF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oFAAoF;IACpF,cAAc,EAAE,MAAM,CAAC;CACxB;AAyHD,iHAAiH;AACjH,eAAO,MAAM,mBAAmB,gEAAgC,CAAC"}
+{"version":3,"file":"McpAppInlinePreview.d.ts","sourceRoot":"","sources":["../../../src/components/McpAppInlinePreview/McpAppInlinePreview.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAG/B,qDAAqD;AACrD,MAAM,WAAW,wBAAwB;IACvC,uCAAuC;IACvC,KAAK,EAAE,aAAa,CAAC;IACrB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,uIAAuI;IACvI,KAAK,EAAE,mBAAmB,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,6GAA6G;IAC7G,WAAW,EAAE,iBAAiB,CAAC;IAC/B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,eAAe,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,uFAAuF;IACvF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oFAAoF;IACpF,cAAc,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4EAA4E;IAC5E,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACpC;AAqLD,iHAAiH;AACjH,eAAO,MAAM,mBAAmB,gEAAgC,CAAC"}

package/constants/public-class-names.d.ts

@@ -0,0 +1,11 @@
+export declare const MCP_APPS_CLASS: {
+    /** The preview's bordered outer card. */
+    readonly preview: "dial-mcp-apps-preview";
+    /**
+     * The header strip above the mounted app, holding the reload and
+     * expand-to-canvas actions. It sits outside the app's own content, so a host
+     * restyling it never overlaps what the app draws.
+     */
+    readonly previewHeader: "dial-mcp-apps-preview-header";
+};
+//# sourceMappingURL=public-class-names.d.ts.map

package/constants/public-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc;IACzB,yCAAyC;;IAEzC;;;;OAIG;;CAEK,CAAC"}

package/hooks/useMcpAppInlinePreview/useMcpAppInlinePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMcpAppInlinePreview.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMcpAppInlinePreview/useMcpAppInlinePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACvB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EACL,yBAAyB,EACzB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAM/B,kDAAkD;AAClD,MAAM,WAAW,wBAAwB;IACvC,iDAAiD;IACjD,MAAM,EAAE,yBAAyB,CAAC;IAClC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,+FAA+F;IAC/F,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,sBAAsB,GACjC,OAAO,aAAa,GAAG,SAAS,EAChC,UAAU,kBAAkB,GAAG,SAAS,EACxC,OAAO,mBAAmB,EAC1B,UAAU,MAAM,EAChB,aAAa,iBAAiB,EAC9B,uBAAuB,CAAC,IAAI,EAAE,iBAAiB,KAAK,iBAAiB,GAAG,IAAI,KAC3E,wBAgGF,CAAC"}
+{"version":3,"file":"useMcpAppInlinePreview.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMcpAppInlinePreview/useMcpAppInlinePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACvB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EACL,yBAAyB,EACzB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAM/B,kDAAkD;AAClD,MAAM,WAAW,wBAAwB;IACvC,iDAAiD;IACjD,MAAM,EAAE,yBAAyB,CAAC;IAClC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,+FAA+F;IAC/F,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,sBAAsB,GACjC,OAAO,aAAa,GAAG,SAAS,EAChC,UAAU,kBAAkB,GAAG,SAAS,EACxC,OAAO,mBAAmB,EAC1B,UAAU,MAAM,EAChB,aAAa,iBAAiB,EAC9B,uBAAuB,CAAC,IAAI,EAAE,iBAAiB,KAAK,iBAAiB,GAAG,IAAI,KAC3E,wBAkGF,CAAC"}

package/index.css

@@ -0,0 +1,2 @@
+._preview_19as4_11{background:var(--mcpapp-preview-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--mcpapp-preview-border,var(--stroke-tertiary,#e0e6f0))}._previewHeader_19as4_23{border-bottom-color:var(--mcpapp-preview-header-border,var(--stroke-tertiary,#e0e6f0))}
+/*$vite$:1*/.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.ms-2{margin-inline-start:.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.h-3{height:.75rem}.min-h-10{min-height:2.5rem}.min-h-\[200px\]{min-height:200px}.w-0{width:0}.w-full{width:100%}.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-s{border-inline-start-width:1px}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-center{text-align:center}.align-middle{vertical-align:middle}.text-error{color:var(--text-error,#ae2f2f)}.text-primary{color:var(--text-primary,#161b2d)}.text-secondary{color:var(--text-secondary,#57647a)}

package/index.d.ts

@@ -4,4 +4,6 @@ export { useMcpAppResponseCache } from './hooks/useMcpAppResponseCache/useMcpApp
 export type { McpDeploymentKind, McpAppToolDiscovery, McpAppToolRef, McpAppToolCallSeed, FetchMcpAppResourceHtml, CallMcpAppTool, CachedMcpAppResponse, McpAppResponseCache, McpAppHostAdapter, } from './models/mcp-apps';
 export { McpAppInlinePreviewStatus } from './models/mcp-apps';
 export { collectToolCallNames, findMcpAppForMessage, mcpAppCanvasKey, computeMcpAppSeedKey, resolveMcpAppToolCallSeed, resolveMcpAppToolResult, } from './utils/mcp-app';
+export { MCP_APPS_CLASS } from './constants/public-class-names';
+export type { McpAppInlinePreviewColors } from './models/mcp-apps';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,GAC9B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,GAC9B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC"}

package/index.js

@@ -1,20 +1,23 @@
 import { AttachmentContentType as e, McpAppCanvasRenderer as t } from "@epam/ai-dial-attachment-canvas";
-import { DIAL_ICON_SIZE as n, DIAL_KIT_ICON_STROKE as r, ElementSize as i, GhostIconButton as a, Spinner as o } from "@epam/ai-dial-ui-kit";
-import { IconAlertTriangle as s, IconArrowsMaximize as c, IconRefresh as l } from "@tabler/icons-react";
-import { memo as u, useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { MessageRole as g } from "@epam/ai-dial-chat-shared";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-//#region src/models/mcp-apps.ts
-var y = /* @__PURE__ */ function(e) {
+import { MessageRole as n, buildCssVars as r } from "@epam/ai-dial-chat-shared";
+import { DIAL_ICON_SIZE as i, DIAL_KIT_ICON_STROKE as a, ElementSize as o, EllipsisTooltip as s, GhostIconButton as c, Spinner as l, mergeClasses as u } from "@epam/ai-dial-ui-kit";
+import { IconAlertTriangle as d, IconArrowsMaximize as f, IconRefresh as p } from "@tabler/icons-react";
+import { memo as m, useCallback as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/constants/public-class-names.ts
+var C = {
+	preview: "dial-mcp-apps-preview",
+	previewHeader: "dial-mcp-apps-preview-header"
+}, w = /* @__PURE__ */ function(e) {
 	return e.Loading = "loading", e.Ready = "ready", e.Error = "error", e.Unavailable = "unavailable", e;
-}({}), b = (e) => {
+}({}), T = (e) => {
 	try {
 		let t = JSON.parse(e);
 		return typeof t == "object" && t ? t : {};
 	} catch {
 		return {};
 	}
-}, x = (e) => {
+}, E = (e) => {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e?.tool_messages ?? []) {
 		for (let e of n.tool_calls ?? []) t.set(e.id, {
@@ -29,7 +32,7 @@ var y = /* @__PURE__ */ function(e) {
 	for (let n of e?.tool_execution_history ?? []) {
 		for (let e of n.tool_calls ?? []) t.set(e.id, {
 			name: e.function.name,
-			args: b(e.function.arguments)
+			args: T(e.function.arguments)
 		});
 		if (n.role === "tool" && n.tool_call_id) {
 			let e = t.get(n.tool_call_id);
@@ -37,18 +40,18 @@ var y = /* @__PURE__ */ function(e) {
 		}
 	}
 	return t;
-}, S = (e) => {
+}, D = (e) => {
 	let t = /* @__PURE__ */ new Set();
-	for (let n of e) for (let e of x(n.custom_content?.state).values()) t.add(e.name);
+	for (let n of e) for (let e of E(n.custom_content?.state).values()) t.add(e.name);
 	return t;
-}, C = (e, t, n) => {
-	if (t.length === 0 || e.role !== g.Assistant) return;
-	let r = new Set([...x(e.custom_content?.state).values()].map((e) => e.name));
-	return t.find((e) => r.has(e.toolName)) || t.find((e) => e.discovery === "direct") || (n ? t[0] : void 0);
-}, w = (e) => `${e}:mcp-app`, T = (e) => e == null ? void 0 : JSON.stringify(e.toolInput ?? null), E = (e, t) => {
+}, O = (e, t, r) => {
+	if (t.length === 0 || e.role !== n.Assistant) return;
+	let i = new Set([...E(e.custom_content?.state).values()].map((e) => e.name));
+	return t.find((e) => i.has(e.toolName)) || t.find((e) => e.discovery === "direct") || (r ? t[0] : void 0);
+}, k = (e) => `${e}:mcp-app`, A = (e) => e == null ? void 0 : JSON.stringify(e.toolInput ?? null), j = (e, t) => {
 	let n = e.custom_content?.state;
 	if (!n) return;
-	let r = [...x(n).values()].reverse().find((e) => e.name === t);
+	let r = [...E(n).values()].reverse().find((e) => e.name === t);
 	if (r) return {
 		toolInput: r.args,
 		toolResult: r.result == null ? void 0 : { content: [{
@@ -56,59 +59,59 @@ var y = /* @__PURE__ */ function(e) {
 			text: r.result
 		}] }
 	};
-}, D = async (e, t, n) => {
+}, M = async (e, t, n) => {
 	if (!(e.discovery === "direct" || t?.toolInput != null)) return t?.toolResult;
 	try {
 		return await n(e.toolsetId, e.mcpToolName, t?.toolInput ?? {}, e.kind);
 	} catch {
 		return t?.toolResult;
 	}
-}, O = (t, n, r, i, a, o) => {
-	let { hostContext: s, sandboxUrl: c, fetchResourceHtml: l, callTool: u } = a, [p, m] = h(), [g, _] = h(), [v, b] = h(() => t == null || c == null ? y.Unavailable : y.Loading), [x, S] = h(0), C = d(() => {
+}, N = (t, n, r, i, a, o) => {
+	let { hostContext: s, hostInfo: c, sandboxUrl: l, fetchResourceHtml: u, callTool: d } = a, [f, p] = y(), [m, _] = y(), [v, b] = y(() => t == null || l == null ? w.Unavailable : w.Loading), [x, S] = y(0), C = h(() => {
 		r.invalidate(i), S((e) => e + 1);
-	}, [r, i]), w = d(async (e) => {
-		if (!(t == null || c == null)) try {
-			let a = T(n), { html: o, toolResult: s } = await r.getOrFetch(i, a, async () => {
-				let [e, r] = await Promise.all([l(t.toolsetId, t.resourceUri), D(t, n, u)]);
+	}, [r, i]), T = h(async (e) => {
+		if (!(t == null || l == null)) try {
+			let a = A(n), { html: o, toolResult: s } = await r.getOrFetch(i, a, async () => {
+				let [e, r] = await Promise.all([u(t.toolsetId, t.resourceUri), M(t, n, d)]);
 				return {
 					html: e,
 					toolResult: r
 				};
 			});
 			if (e()) return;
-			m(o), _(s), b(y.Ready);
+			p(o), _(s), b(w.Ready);
 		} catch {
-			e() || b(y.Error);
+			e() || b(w.Error);
 		}
 	}, [
 		t,
 		n,
-		c,
+		l,
 		r,
 		i,
-		l,
-		u
+		u,
+		d
 	]);
-	f(() => {
-		if (t == null || c == null) {
-			b(y.Unavailable);
+	g(() => {
+		if (t == null || l == null) {
+			b(w.Unavailable);
 			return;
 		}
 		let e = !1;
-		return b(y.Loading), w(() => e), () => {
+		return b(w.Loading), T(() => e), () => {
 			e = !0;
 		};
 	}, [
 		t,
-		c,
-		w,
+		l,
+		T,
 		x
 	]);
-	let E = d(async (e, n) => {
+	let E = h(async (e, n) => {
 		if (t == null) throw Error(`Tool call "${e}" failed: no matching MCP App`);
-		return u(t.toolsetId, e, n, t.kind);
-	}, [t, u]);
-	return v !== y.Ready || t == null || c == null || p == null ? {
+		return d(t.toolsetId, e, n, t.kind);
+	}, [t, d]);
+	return v !== w.Ready || t == null || l == null || f == null ? {
 		status: v,
 		reload: C
 	} : {
@@ -116,84 +119,129 @@ var y = /* @__PURE__ */ function(e) {
 		reload: C,
 		content: {
 			type: e.McpApp,
-			html: p,
-			sandboxUrl: c,
+			html: f,
+			sandboxUrl: l,
 			toolInput: n?.toolInput,
-			toolResult: g,
+			toolResult: m,
 			hostContext: s,
+			hostInfo: c,
 			onToolCall: E,
 			onRequestDisplayMode: o
 		}
 	};
-}, k = u(({ match: e, toolCall: u, cache: f, cacheKey: p, hostAdapter: m, onExpand: h, expandAriaLabel: g, reloadAriaLabel: b, actionsGroupAriaLabel: x = "MCP app actions", loadErrorLabel: S }) => {
-	let { status: C, content: w, reload: T } = O(e, u, f, p, m, d((e) => e === "fullscreen" ? (h(), "fullscreen") : "inline", [h]));
-	return C === y.Unavailable ? null : /* @__PURE__ */ v("div", {
-		className: "bg-layer-2 flex w-full min-w-0 flex-col overflow-hidden rounded-xl border border-tertiary",
-		children: [/* @__PURE__ */ _("div", {
-			className: "flex min-h-10 items-center justify-end border-b border-tertiary px-4 py-2",
-			children: /* @__PURE__ */ v("div", {
+}, P = {
+	preview: "_preview_19as4_11",
+	previewHeader: "_previewHeader_19as4_23"
+}, F = m(({ match: e, toolCall: n, cache: m, cacheKey: _, hostAdapter: v, onExpand: T, expandAriaLabel: E, reloadAriaLabel: D, actionsGroupAriaLabel: O = "MCP app actions", loadErrorLabel: k, isOpenedInCanvas: A = !1, openedInCanvasLabel: j, colors: M }) => {
+	let [F, I] = y(void 0);
+	g(() => {
+		I(void 0);
+	}, [_]);
+	let L = h((e) => e === "fullscreen" ? (T(), "fullscreen") : "inline", [T]), R = r({
+		"--mcpapp-preview-bg": M?.previewBackground,
+		"--mcpapp-preview-border": M?.previewBorder,
+		"--mcpapp-preview-header-border": M?.previewHeaderBorder
+	}), { status: z, content: B, reload: V } = N(e, n, m, _, v, L);
+	return z === w.Unavailable ? null : /* @__PURE__ */ S("div", {
+		style: R,
+		className: u(P.preview, "flex w-full min-w-0 flex-col overflow-hidden rounded-xl border", C.preview),
+		children: [/* @__PURE__ */ S("div", {
+			className: u(P.previewHeader, "flex min-h-10 items-center justify-between gap-2 border-b px-4 py-2", C.previewHeader),
+			children: [/* @__PURE__ */ x(s, {
+				text: F == null ? /* @__PURE__ */ x("span", {
+					className: "dial-tiny-lead-semi-text",
+					children: e.mcpToolName
+				}) : /* @__PURE__ */ S(b, { children: [
+					/* @__PURE__ */ x("span", {
+						className: "dial-tiny-lead-semi-text",
+						children: e.mcpToolName
+					}),
+					/* @__PURE__ */ x("span", {
+						"aria-hidden": !0,
+						className: "border-current mx-1.5 inline-block h-3 w-0 border-s align-middle"
+					}),
+					/* @__PURE__ */ x("span", {
+						className: "dial-tiny-lead-semi-text",
+						children: F.name
+					}),
+					F.version && /* @__PURE__ */ x("span", {
+						className: "dial-caption-text ms-2",
+						children: F.version
+					})
+				] }),
+				className: "text-secondary"
+			}), /* @__PURE__ */ S("div", {
 				role: "toolbar",
-				"aria-label": x,
-				className: "flex items-center gap-1",
-				children: [/* @__PURE__ */ _(a, {
-					icon: /* @__PURE__ */ _(l, {
-						size: n.SM,
-						stroke: r,
+				"aria-label": O,
+				className: "flex shrink-0 items-center gap-1",
+				children: [/* @__PURE__ */ x(c, {
+					icon: /* @__PURE__ */ x(p, {
+						size: i.SM,
+						stroke: a,
 						"aria-hidden": !0
 					}),
-					"aria-label": b,
-					size: i.Small,
-					onClick: T
-				}), /* @__PURE__ */ _(a, {
-					icon: /* @__PURE__ */ _(c, {
-						size: n.SM,
-						stroke: r,
+					"aria-label": D,
+					size: o.Small,
+					onClick: V
+				}), /* @__PURE__ */ x(c, {
+					icon: /* @__PURE__ */ x(f, {
+						size: i.SM,
+						stroke: a,
 						"aria-hidden": !0
 					}),
-					"aria-label": g,
-					size: i.Small,
-					onClick: h
+					"aria-label": E,
+					size: o.Small,
+					onClick: T
 				})]
-			})
-		}), /* @__PURE__ */ v("div", {
+			})]
+		}), /* @__PURE__ */ x("div", {
 			className: "relative min-h-[200px] w-full",
-			children: [
-				C === y.Loading && /* @__PURE__ */ _("div", {
+			children: A ? /* @__PURE__ */ x("div", {
+				role: "status",
+				"aria-live": "polite",
+				className: "absolute inset-0 flex items-center justify-center p-4",
+				children: /* @__PURE__ */ x("span", {
+					className: "dial-body-text text-center text-secondary",
+					children: j
+				})
+			}) : /* @__PURE__ */ S(b, { children: [
+				z === w.Loading && /* @__PURE__ */ x("div", {
 					className: "absolute inset-0 flex items-center justify-center",
-					children: /* @__PURE__ */ _(o, {})
+					children: /* @__PURE__ */ x(l, {})
 				}),
-				C === y.Error && /* @__PURE__ */ v("div", {
+				z === w.Error && /* @__PURE__ */ S("div", {
 					className: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-4",
-					children: [/* @__PURE__ */ _(s, {
+					children: [/* @__PURE__ */ x(d, {
 						size: 40,
-						stroke: r,
+						stroke: a,
 						"aria-hidden": !0,
 						className: "text-error"
-					}), /* @__PURE__ */ _("p", {
+					}), /* @__PURE__ */ x("p", {
 						role: "alert",
 						className: "dial-body-text text-center text-primary",
-						children: S
+						children: k
 					})]
 				}),
-				C === y.Ready && w && /* @__PURE__ */ _(t, {
-					content: w,
-					errorLabel: S
+				z === w.Ready && B && /* @__PURE__ */ x(t, {
+					content: B,
+					errorLabel: k,
+					onAppInfo: I
 				})
-			]
+			] })
 		})]
 	});
-}), A = 900 * 1e3, j = (e) => {
-	let t = m(/* @__PURE__ */ new Map()), n = m(/* @__PURE__ */ new Map());
-	return p(() => {
+}), I = 900 * 1e3, L = (e) => {
+	let t = v(/* @__PURE__ */ new Map()), n = v(/* @__PURE__ */ new Map());
+	return _(() => {
 		let r = (t) => `${e}:${t}`, i = (e, t) => `${r(e)}::${t ?? ""}`, a = (e, n) => {
 			let i = t.current.get(r(e));
-			if (i != null && i.seedKey === n && !(Date.now() - i.cachedAt > A)) return {
+			if (i != null && i.seedKey === n && !(Date.now() - i.cachedAt > I)) return {
 				html: i.html,
 				toolResult: i.toolResult
 			};
 		}, o = (e, n, i) => {
 			let a = Date.now();
-			for (let [e, n] of t.current) a - n.cachedAt > A && t.current.delete(e);
+			for (let [e, n] of t.current) a - n.cachedAt > I && t.current.delete(e);
 			t.current.set(r(e), {
 				...n,
 				seedKey: i,
@@ -220,4 +268,4 @@ var y = /* @__PURE__ */ function(e) {
 	}, [e]);
 };
 //#endregion
-export { k as McpAppInlinePreview, y as McpAppInlinePreviewStatus, S as collectToolCallNames, T as computeMcpAppSeedKey, C as findMcpAppForMessage, w as mcpAppCanvasKey, E as resolveMcpAppToolCallSeed, D as resolveMcpAppToolResult, O as useMcpAppInlinePreview, j as useMcpAppResponseCache };
+export { C as MCP_APPS_CLASS, F as McpAppInlinePreview, w as McpAppInlinePreviewStatus, D as collectToolCallNames, A as computeMcpAppSeedKey, O as findMcpAppForMessage, k as mcpAppCanvasKey, j as resolveMcpAppToolCallSeed, M as resolveMcpAppToolResult, N as useMcpAppInlinePreview, L as useMcpAppResponseCache };

package/models/mcp-apps.d.ts

@@ -1,5 +1,5 @@
 import { McpUiHostContext } from '@mcp-ui/client';
-import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+import { CallToolResult, Implementation } from '@modelcontextprotocol/sdk/types.js';
 /** Which of the host's two MCP proxy routes a deployment id resolves through — a plain toolset, or an application that is itself an MCP server. */
 export type McpDeploymentKind = 'toolset' | 'application';
 /**
@@ -92,6 +92,8 @@ export declare enum McpAppInlinePreviewStatus {
 export interface McpAppHostAdapter {
     /** `McpUiHostContext` to deliver to the mounted app's `ui/initialize` handshake. */
     hostContext: McpUiHostContext;
+    /** Host identity (`name`/`version`) to deliver to the mounted app's `ui/initialize` handshake. */
+    hostInfo: Implementation;
     /** Operator-configured MCP Apps sandbox-proxy URL, or `null` when unconfigured. */
     sandboxUrl: string | null;
     /** Fetches the matched tool's MCP Apps `ui://` resource. */
@@ -99,4 +101,16 @@ export interface McpAppHostAdapter {
     /** Forwards a tool call the mounted app makes on its own (`onToolCall`) or the live re-call `resolveMcpAppToolResult` performs. */
     callTool: CallMcpAppTool;
 }
+/**
+ * Color overrides for `McpAppInlinePreview`, applied as CSS custom properties
+ * on the preview's root.
+ */
+export interface McpAppInlinePreviewColors {
+    /** Surface the mounted app sits on. Fallback: `--bg-layer-raised`. */
+    previewBackground?: string;
+    /** Border around the preview card. Fallback: `--stroke-tertiary`. */
+    previewBorder?: string;
+    /** Divider under the header strip. Fallback: `--stroke-tertiary`. */
+    previewHeaderBorder?: string;
+}
 //# sourceMappingURL=mcp-apps.d.ts.map

package/models/mcp-apps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-apps.d.ts","sourceRoot":"","sources":["../../src/models/mcp-apps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAEzE,mJAAmJ;AACnJ,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAExD,yFAAyF;AACzF,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,oIAAoI;IACpI,QAAQ,EAAE,MAAM,CAAC;IACjB,mIAAmI;IACnI,WAAW,EAAE,MAAM,CAAC;IACpB,mGAAmG;IACnG,IAAI,EAAE,iBAAiB,CAAC;IACxB,gEAAgE;IAChE,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED,sJAAsJ;AACtJ,MAAM,WAAW,kBAAkB;IACjC,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,gDAAgD;IAChD,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,+GAA+G;AAC/G,MAAM,MAAM,uBAAuB,GAAG,CACpC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,KAChB,OAAO,CAAC,MAAM,CAAC,CAAC;AAErB,8FAA8F;AAC9F,MAAM,MAAM,cAAc,GAAG,CAC3B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,iBAAiB,KACpB,OAAO,CAAC,cAAc,CAAC,CAAC;AAE7B,qEAAqE;AACrE,MAAM,WAAW,oBAAoB;IACnC,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,sEAAsE;AACtE,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,GAAG,EAAE,CACH,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,GAAG,SAAS,KACxB,oBAAoB,GAAG,SAAS,CAAC;IACtC,4EAA4E;IAC5E,GAAG,EAAE,CACH,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,oBAAoB,EAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,KACxB,IAAI,CAAC;IACV,kDAAkD;IAClD,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;;;;OASG;IACH,UAAU,EAAE,CACV,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,OAAO,EAAE,MAAM,OAAO,CAAC,oBAAoB,CAAC,KACzC,OAAO,CAAC,oBAAoB,CAAC,CAAC;CACpC;AAED,sDAAsD;AACtD,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,WAAW,gBAAgB;CAC5B;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,oFAAoF;IACpF,WAAW,EAAE,gBAAgB,CAAC;IAC9B,mFAAmF;IACnF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,4DAA4D;IAC5D,iBAAiB,EAAE,uBAAuB,CAAC;IAC3C,mIAAmI;IACnI,QAAQ,EAAE,cAAc,CAAC;CAC1B"}
+{"version":3,"file":"mcp-apps.d.ts","sourceRoot":"","sources":["../../src/models/mcp-apps.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-mcp-apps",
   "description": "Host-agnostic MCP Apps building blocks — tool-call/message matching, the response cache, and the inline preview hook/component shared by the full-width canvas and inline surfaces",
-  "version": "1.2.0-dev.6",
+  "version": "1.2.0-dev.69",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -9,6 +9,7 @@
   "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
+    "./styles.css": "./index.css",
     ".": {
       "types": "./index.d.ts",
       "import": "./index.js",
@@ -19,11 +20,11 @@
     "@tabler/icons-react": "^3.44.0",
     "@mcp-ui/client": "^7.1.1",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@epam/ai-dial-attachment-canvas": "1.2.0-dev.6"
+    "@epam/ai-dial-attachment-canvas": "1.2.0-dev.69"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.6",
-    "@epam/ai-dial-ui-kit": "^0.14.2",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.69",
+    "@epam/ai-dial-ui-kit": "^0.15.0-dev.9",
     "react": "^19.2.8"
   },
   "repository": {