-
- {children}
-
+
+
;
+ appOnly: boolean;
+ agentVisible: boolean;
+}
+
+export type ChatMcpAppTool = ChatMcpTool & { uiResourceUri: string };
+
+type ChatMcpAppsContextValue = {
+ getMcpAppForTool: (toolName: string) => ChatMcpAppTool | undefined;
+ getMcpToolForAppCall: (namespace: string, serverName: string, toolName: string) => ChatMcpTool | undefined;
+};
+
+const ChatMcpAppsContext = createContext({
+ getMcpAppForTool: () => undefined,
+ getMcpToolForAppCall: () => undefined,
+});
+
+interface ChatMcpAppsProviderProps {
+ currentAgent: AgentResponse;
+ children: ReactNode;
+}
+
+function isRemoteMCPServer(tool: Tool): boolean {
+ const kind = tool.mcpServer?.kind || "RemoteMCPServer";
+ const apiGroup = tool.mcpServer?.apiGroup || "kagent.dev";
+ return kind === "RemoteMCPServer" && (apiGroup === "" || apiGroup === "kagent.dev");
+}
+
+// groupKind of the tool's backing server CRD, used to disambiguate the MCP Apps
+// endpoint when a RemoteMCPServer and MCPServer share a namespace/name.
+function serverGroupKind(tool: Tool): string {
+ const kind = tool.mcpServer?.kind || "RemoteMCPServer";
+ const apiGroup = tool.mcpServer?.apiGroup || "kagent.dev";
+ return apiGroup ? `${kind}.${apiGroup}` : kind;
+}
+
+function resolveServerRef(tool: Tool, agentNamespace: string): { namespace: string; name: string } | undefined {
+ const mcpServer = tool.mcpServer;
+ if (!mcpServer?.name) {
+ return undefined;
+ }
+
+ if (k8sRefUtils.isValidRef(mcpServer.name)) {
+ return k8sRefUtils.fromRef(mcpServer.name);
+ }
+
+ return {
+ namespace: mcpServer.namespace || agentNamespace,
+ name: mcpServer.name,
+ };
+}
+
+function isAppOnlyTool(tool: McpAppTool): boolean {
+ const ui = tool._meta?.ui;
+ if (!ui || typeof ui !== "object") {
+ return false;
+ }
+ const visibility = (ui as Record).visibility;
+ if (typeof visibility === "string") {
+ return visibility === "app";
+ }
+ if (!Array.isArray(visibility)) {
+ return false;
+ }
+ // app-only means "app" is declared AND "model" is not — if both are
+ // listed (e.g. ["model", "app"]) the tool is visible to the agent too.
+ let hasApp = false;
+ for (const v of visibility) {
+ if (v === "model") {
+ return false;
+ }
+ if (v === "app") {
+ hasApp = true;
+ }
+ }
+ return hasApp;
+}
+
+export function ChatMcpAppsProvider({ currentAgent, children }: ChatMcpAppsProviderProps) {
+ const [appRegistry, setAppRegistry] = useState>(new Map());
+ const [toolRegistry, setToolRegistry] = useState>(new Map());
+
+ const configuredMcpServers = useMemo(() => {
+ const agentNamespace = currentAgent.agent.metadata.namespace || "";
+ const servers = new Map;
+ selectsAllTools: boolean;
+ }>();
+
+ for (const tool of currentAgent.tools || []) {
+ if (!isMcpTool(tool) || !isRemoteMCPServer(tool)) {
+ continue;
+ }
+ const serverRef = resolveServerRef(tool, agentNamespace);
+ if (!serverRef) {
+ continue;
+ }
+
+ const key = `${serverRef.namespace}/${serverRef.name}`;
+ const existing = servers.get(key) ?? {
+ namespace: serverRef.namespace,
+ name: serverRef.name,
+ groupKind: serverGroupKind(tool),
+ selectedToolNames: new Set(),
+ selectsAllTools: false,
+ };
+
+ const toolNames = tool.mcpServer.toolNames || [];
+ if (toolNames.length === 0) {
+ existing.selectsAllTools = true;
+ } else {
+ toolNames.forEach((name) => existing.selectedToolNames.add(name));
+ }
+ servers.set(key, existing);
+ }
+
+ return Array.from(servers.values());
+ }, [currentAgent]);
+
+ useEffect(() => {
+ let cancelled = false;
+
+ async function loadMcpApps() {
+ if (configuredMcpServers.length === 0) {
+ setAppRegistry(new Map());
+ setToolRegistry(new Map());
+ return;
+ }
+
+ const nextAppRegistry = new Map();
+ const nextToolRegistry = new Map();
+ const ambiguousToolNames = new Set();
+
+ await Promise.all(configuredMcpServers.map(async (server) => {
+ const response = await listMcpAppTools(server.namespace, server.name, server.groupKind);
+ if (cancelled || response.error || !response.data) {
+ return;
+ }
+
+ for (const appTool of response.data) {
+ const appOnly = isAppOnlyTool(appTool);
+ const selectedForAgent = server.selectsAllTools || server.selectedToolNames.has(appTool.name);
+ const agentVisible = selectedForAgent && !appOnly;
+
+ const entry: ChatMcpTool = {
+ namespace: server.namespace,
+ serverName: server.name,
+ groupKind: server.groupKind,
+ toolName: appTool.name,
+ uiResourceUri: appTool.uiResourceUri,
+ inputSchema: appTool.inputSchema,
+ meta: appTool._meta,
+ appOnly,
+ agentVisible,
+ };
+
+ nextToolRegistry.set(toolRegistryKey(server.namespace, server.name, appTool.name), entry);
+
+ if (entry.uiResourceUri && entry.agentVisible) {
+ const appEntry = entry as ChatMcpAppTool;
+ const existing = nextAppRegistry.get(appTool.name);
+ if (existing && (existing.namespace !== appEntry.namespace || existing.serverName !== appEntry.serverName || existing.uiResourceUri !== appEntry.uiResourceUri)) {
+ ambiguousToolNames.add(appTool.name);
+ nextAppRegistry.delete(appTool.name);
+ continue;
+ }
+ if (!ambiguousToolNames.has(appTool.name)) {
+ nextAppRegistry.set(appTool.name, appEntry);
+ }
+ }
+ }
+ }));
+
+ if (!cancelled) {
+ setAppRegistry(nextAppRegistry);
+ setToolRegistry(nextToolRegistry);
+ }
+ }
+
+ void loadMcpApps();
+ return () => {
+ cancelled = true;
+ };
+ }, [configuredMcpServers]);
+
+ const value = useMemo(() => ({
+ getMcpAppForTool: (toolName: string) => appRegistry.get(toolName),
+ getMcpToolForAppCall: (namespace: string, serverName: string, toolName: string) =>
+ toolRegistry.get(toolRegistryKey(namespace, serverName, toolName)),
+ }), [appRegistry, toolRegistry]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useChatMcpApps() {
+ return useContext(ChatMcpAppsContext);
+}
+
+function toolRegistryKey(namespace: string, serverName: string, toolName: string): string {
+ return `${namespace}/${serverName}/${toolName}`;
+}
diff --git a/ui/src/components/chat/ChatMessage.tsx b/ui/src/components/chat/ChatMessage.tsx
index 25e4524617..e21282ca74 100644
--- a/ui/src/components/chat/ChatMessage.tsx
+++ b/ui/src/components/chat/ChatMessage.tsx
@@ -12,6 +12,7 @@ import { toast } from "sonner";
import { convertToUserFriendlyName } from "@/lib/utils";
import { ADKMetadata, getMetadataValue } from "@/lib/messageHandlers";
import { ToolDecision } from "@/types";
+import type { ChatMcpAppTool } from "@/components/chat/ChatMcpAppsContext";
interface ChatMessageProps {
message: Message;
@@ -24,9 +25,11 @@ interface ChatMessageProps {
onReject?: (toolCallId: string, reason?: string) => void;
onAskUserSubmit?: (answers: Array<{ answer: string[] }>) => void;
pendingDecisions?: Record;
+ getMcpAppForTool?: (toolName: string) => ChatMcpAppTool | undefined;
+ onMcpAppSendMessage?: (text: string) => Promise;
}
-export default function ChatMessage({ message, allMessages, agentContext, onApprove, onReject, onAskUserSubmit, pendingDecisions }: ChatMessageProps) {
+export default function ChatMessage({ message, allMessages, agentContext, onApprove, onReject, onAskUserSubmit, pendingDecisions, getMcpAppForTool, onMcpAppSendMessage }: ChatMessageProps) {
const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
const [isPositiveFeedback, setIsPositiveFeedback] = useState(true);
@@ -114,6 +117,8 @@ export default function ChatMessage({ message, allMessages, agentContext, onAppr
onApprove={onApprove}
onReject={onReject}
pendingDecisions={pendingDecisions}
+ getMcpAppForTool={getMcpAppForTool}
+ onMcpAppSendMessage={onMcpAppSendMessage}
/>;
}
@@ -124,6 +129,8 @@ export default function ChatMessage({ message, allMessages, agentContext, onAppr
onApprove={onApprove}
onReject={onReject}
pendingDecisions={pendingDecisions}
+ getMcpAppForTool={getMcpAppForTool}
+ onMcpAppSendMessage={onMcpAppSendMessage}
/>;
}
@@ -139,7 +146,7 @@ export default function ChatMessage({ message, allMessages, agentContext, onAppr
});
if (hasToolCalls) {
- return ;
+ /**
+ * Bumped by the parent whenever the message list changes, so the minimap
+ * re-binds its observers/listeners to the (possibly new) viewport. Height
+ * changes from streaming are picked up by the ResizeObserver regardless.
+ */
+ revision: number;
+}
+
+interface Segment {
+ topPct: number;
+ heightPct: number;
+ role: "user" | "assistant";
+}
+
+/**
+ * A scrollbar-style minimap rendered on the right edge of the chat. Each message
+ * becomes a segment sized proportionally to its height and colored by role; a
+ * viewport indicator shows the current position. Click or drag the track to jump
+ * through the history quickly.
+ */
+export default function ChatMinimap({ containerRef, revision }: ChatMinimapProps) {
+ const viewportId = useId();
+ const [segments, setSegments] = useState([]);
+ const [view, setView] = useState({ topPct: 0, heightPct: 100 });
+ const [scrollable, setScrollable] = useState(false);
+ const trackRef = useRef(null);
+ const draggingRef = useRef(false);
+
+ const getViewport = useCallback(
+ () => (containerRef.current?.querySelector("[data-radix-scroll-area-viewport]") as HTMLElement | null) ?? null,
+ [containerRef],
+ );
+
+ const updateView = useCallback(() => {
+ const vp = getViewport();
+ if (!vp) return;
+ const total = vp.scrollHeight || 1;
+ setView({
+ topPct: (vp.scrollTop / total) * 100,
+ heightPct: Math.min(100, (vp.clientHeight / total) * 100),
+ });
+ }, [getViewport]);
+
+ const measure = useCallback(() => {
+ const vp = getViewport();
+ if (!vp) return;
+ const total = vp.scrollHeight;
+ if (total <= 0) return;
+
+ const vpRect = vp.getBoundingClientRect();
+ const items = Array.from(vp.querySelectorAll("[data-mm-item]")) as HTMLElement[];
+ const segs: Segment[] = items.map((el) => {
+ const r = el.getBoundingClientRect();
+ const top = r.top - vpRect.top + vp.scrollTop;
+ return {
+ topPct: (top / total) * 100,
+ heightPct: (r.height / total) * 100,
+ role: el.getAttribute("data-mm-role") === "user" ? "user" : "assistant",
+ };
+ });
+
+ setSegments(segs);
+ setScrollable(total > vp.clientHeight + 4);
+ updateView();
+ }, [getViewport, updateView]);
+
+ useEffect(() => {
+ const vp = getViewport();
+ if (!vp) return;
+ if (!vp.id) {
+ vp.id = viewportId;
+ }
+
+ // Defer the initial measurement so its setState calls don't run
+ // synchronously inside the effect (which triggers cascading renders).
+ // The ResizeObserver below also fires on observe(), so layout is captured
+ // promptly regardless.
+ const initialMeasure = requestAnimationFrame(() => measure());
+
+ const onScroll = () => updateView();
+ vp.addEventListener("scroll", onScroll, { passive: true });
+
+ const ro = new ResizeObserver(() => measure());
+ ro.observe(vp);
+ const content = vp.firstElementChild;
+ if (content) ro.observe(content);
+
+ return () => {
+ cancelAnimationFrame(initialMeasure);
+ vp.removeEventListener("scroll", onScroll);
+ ro.disconnect();
+ };
+ }, [getViewport, measure, updateView, revision, viewportId]);
+
+ const scrollToClientY = useCallback(
+ (clientY: number) => {
+ const vp = getViewport();
+ const track = trackRef.current;
+ if (!vp || !track) return;
+ const rect = track.getBoundingClientRect();
+ const frac = Math.min(1, Math.max(0, (clientY - rect.top) / rect.height));
+ const total = vp.scrollHeight;
+ // Center the viewport window on the clicked point for intuitive jumps.
+ const target = frac * total - vp.clientHeight / 2;
+ vp.scrollTo({ top: Math.max(0, target), behavior: draggingRef.current ? "auto" : "smooth" });
+ },
+ [getViewport],
+ );
+
+ const onPointerDown = (e: React.PointerEvent) => {
+ draggingRef.current = true;
+ e.currentTarget.setPointerCapture?.(e.pointerId);
+ scrollToClientY(e.clientY);
+ };
+ const onPointerMove = (e: React.PointerEvent) => {
+ if (!draggingRef.current) return;
+ scrollToClientY(e.clientY);
+ };
+ const endDrag = (e: React.PointerEvent) => {
+ draggingRef.current = false;
+ e.currentTarget.releasePointerCapture?.(e.pointerId);
+ };
+
+ if (!scrollable || segments.length === 0) return null;
+
+ return (
+ ;
+ getMcpAppForTool?: (toolName: string) => ChatMcpAppTool | undefined;
+ onMcpAppSendMessage?: (text: string) => Promise;
}
interface ToolCallState {
@@ -20,6 +23,7 @@ interface ToolCallState {
result?: {
content: string;
is_error?: boolean;
+ rawResult?: unknown;
};
status: ToolCallStatus;
subagentSessionId?: string;
@@ -88,7 +92,7 @@ const extractToolCallRequests = (message: Message): FunctionCall[] => {
functionCalls.push({
id: data.id,
name: data.name,
- args: data.args
+ args: data.args ?? {},
});
}
}
@@ -146,6 +150,7 @@ const extractToolCallResults = (message: Message): ProcessedToolResultData[] =>
name: data.name,
content: textContent,
is_error: data.response?.isError || false,
+ raw_result: data.response?.result ?? data.response,
...(subagentSessionId ? { subagent_session_id: subagentSessionId } : {}),
});
}
@@ -172,7 +177,7 @@ const extractToolCallResults = (message: Message): ProcessedToolResultData[] =>
};
-const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pendingDecisions }: ToolCallDisplayProps) => {
+const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pendingDecisions, getMcpAppForTool, onMcpAppSendMessage }: ToolCallDisplayProps) => {
// Determine which tool call IDs this component instance "owns" by finding,
// for each ID introduced by currentMessage, whether currentMessage is the
// FIRST message in allMessages that introduces that ID.
@@ -289,7 +294,8 @@ const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pen
const existingCall = newToolCalls.get(result.call_id)!;
existingCall.result = {
content: result.content,
- is_error: result.is_error
+ is_error: result.is_error,
+ rawResult: result.raw_result,
};
if (result.subagent_session_id && !existingCall.subagentSessionId) {
// Only set from function_response if the 1st pass (function_call
@@ -338,7 +344,7 @@ const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pen
const tokenStats = (currentMessage.metadata as Record | undefined)?.tokenStats as TokenStats | undefined;
return (
-
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/ui/src/components/chat/ToolCallDisplay.tsx b/ui/src/components/chat/ToolCallDisplay.tsx
index 9ebaec3e7e..cfe3491bd7 100644
--- a/ui/src/components/chat/ToolCallDisplay.tsx
+++ b/ui/src/components/chat/ToolCallDisplay.tsx
@@ -5,6 +5,7 @@ import AgentCallDisplay, { AgentCallStatus } from "@/components/chat/AgentCallDi
import { isAgentToolName } from "@/lib/utils";
import { ADKMetadata, ProcessedToolCallData, ProcessedToolResultData, ToolResponseData, normalizeToolResultToText, getMetadataValue } from "@/lib/messageHandlers";
import { FunctionCall, ToolDecision, TokenStats } from "@/types";
+import type { ChatMcpAppTool } from "@/components/chat/ChatMcpAppsContext";
interface ToolCallDisplayProps {
currentMessage: Message;
@@ -12,6 +13,8 @@ interface ToolCallDisplayProps {
onApprove?: (toolCallId: string) => void;
onReject?: (toolCallId: string, reason?: string) => void;
pendingDecisions?: Record
+ {segments.map((s, i) => (
+
+ ))}
+
+
+
+
{currentDisplayableCalls.map(toolCall => {
// Determine effective status: use local pending decision for optimistic UI
const localDecision = pendingDecisions?.[toolCall.id];
@@ -378,6 +384,8 @@ const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pen
onApprove={showButtons && onApprove ? () => onApprove(toolCall.id) : undefined}
onReject={showButtons && onReject ? (reason?: string) => onReject(toolCall.id, reason) : undefined}
tokenStats={tokenStats}
+ mcpApp={getMcpAppForTool?.(toolCall.call.name)}
+ onMcpAppSendMessage={onMcpAppSendMessage}
/>
);
})}
diff --git a/ui/src/components/chat/__tests__/ChatInterface.sendGuard.test.tsx b/ui/src/components/chat/__tests__/ChatInterface.sendGuard.test.tsx
index 5a301b447c..6c652b8462 100644
--- a/ui/src/components/chat/__tests__/ChatInterface.sendGuard.test.tsx
+++ b/ui/src/components/chat/__tests__/ChatInterface.sendGuard.test.tsx
@@ -3,7 +3,7 @@
*/
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
-import type { DataPart, Message, Task, TaskStatusUpdateEvent } from "@a2a-js/sdk";
+import type { Message, Task, TaskStatusUpdateEvent } from "@a2a-js/sdk";
import { checkSessionExists, createSession, getSessionTasks } from "@/app/actions/sessions";
import { kagentA2AClient } from "@/lib/a2aClient";
import { toast } from "sonner";
@@ -76,9 +76,14 @@ const mockToastInfo = toast.info as jest.MockedFunction;
const staleToastMessage = "New messages loaded — please review before sending";
-function mockBackendTasks(tasks: Task[]) {
- mockGetSessionTasks.mockResolvedValue({ data: tasks });
-}
+// The send guard is server-authoritative: it compares the count of persisted
+// history messages across all tasks (the high-water mark) against the count this
+// tab last synced. These helpers build tasks whose `history.length` drives that
+// count — the message content is irrelevant to the guard.
+
+// The backend snapshot the mocked getSessionTasks currently returns. The stream
+// generators advance it to model a turn being persisted after it streams.
+let currentTasks: Task[] = [];
function textMessage(messageId: string, role: "user" | "agent", text: string, contextId = "session-1", taskId = "task-1"): Message {
return {
@@ -92,7 +97,8 @@ function textMessage(messageId: string, role: "user" | "agent", text: string, co
} as Message;
}
-function completedTask(taskId: string, history: Message[], contextId = "session-1"): Task {
+/** A completed task whose history (a user + agent turn) contributes 2 to the mark. */
+function completedTurnTask(taskId: string, prompt: string, answer: string, contextId = "session-1"): Task {
return {
id: taskId,
contextId,
@@ -100,7 +106,10 @@ function completedTask(taskId: string, history: Message[], contextId = "session-
state: "completed",
timestamp: new Date().toISOString(),
},
- history,
+ history: [
+ textMessage(`${taskId}-user`, "user", prompt, contextId, taskId),
+ textMessage(`${taskId}-agent`, "agent", answer, contextId, taskId),
+ ],
} as Task;
}
@@ -118,42 +127,12 @@ function completedStatusEvent(text: string, contextId = "session-1", taskId = "t
} as TaskStatusUpdateEvent;
}
-function toolCallMessage(messageId: string, contextId = "session-1", taskId = "task-tool", callId = "shared-call"): Message {
- return {
- kind: "message",
- messageId,
- role: "agent",
- contextId,
- taskId,
- parts: [
- {
- kind: "data",
- data: { id: callId, name: "kubectl_get_pods", args: { namespace: "default" } },
- metadata: { adk_type: "function_call" },
- } as DataPart,
- ],
- metadata: { timestamp: Date.now() },
- } as Message;
-}
-
-function completedToolCallStatusEvent(contextId = "session-1", taskId = "task-streamed", callId = "shared-call"): TaskStatusUpdateEvent {
- return {
- kind: "status-update",
- contextId,
- taskId,
- final: true,
- status: {
- state: "completed",
- timestamp: new Date().toISOString(),
- message: toolCallMessage(`tool-${taskId}`, contextId, taskId, callId),
- },
- } as TaskStatusUpdateEvent;
-}
-
-async function* streamOf(...events: unknown[]): AsyncIterable {
+/** Yields the given events, then advances the backend snapshot as if the turn was persisted. */
+async function* streamThenPersist(events: unknown[], persistedTasks: Task[]): AsyncIterable {
for (const event of events) {
yield event;
}
+ currentTasks = persistedTasks;
}
function sessionFixture(overrides: Partial = {}): Session {
@@ -189,242 +168,79 @@ async function sendText(text: string) {
await user.click(screen.getByRole("button", { name: /send/i }));
}
-function sentMessage(callIndex = 0): Message {
- return (mockSendMessageStream.mock.calls[callIndex][2] as { message: Message }).message;
-}
-
-describe("ChatInterface send guard", () => {
- const initialTurn = [
- textMessage("initial-user", "user", "initial user", "session-1", "task-initial"),
- textMessage("initial-agent", "agent", "initial answer", "session-1", "task-initial"),
- ];
- const sameTabTurn = [
- textMessage("same-tab-user", "user", "same tab question", "session-1", "task-streamed"),
- textMessage("same-tab-agent", "agent", "same tab answer", "session-1", "task-streamed"),
- ];
- const externalTurn = [
- textMessage("external-user", "user", "external user", "session-1", "task-external"),
- textMessage("external-agent", "agent", "external answer", "session-1", "task-external"),
- ];
+describe("ChatInterface send guard (high-water mark)", () => {
+ const initialTasks = () => [completedTurnTask("task-initial", "initial user", "initial answer")];
beforeEach(() => {
jest.clearAllMocks();
mockCheckSessionExists.mockResolvedValue({ data: true });
mockCreateSession.mockResolvedValue({ error: "unexpected createSession call" });
+ // Every getSessionTasks (load, guard, refreshServerMark, reload) reads the
+ // current backend snapshot; streams mutate it to simulate persistence.
+ mockGetSessionTasks.mockImplementation(async () => ({ data: currentTasks }));
});
- it("does not block the next send when completed same-tab stream messages are already visible", async () => {
- mockBackendTasks([completedTask("task-initial", initialTurn)]);
+ it("does not block the next send after a same-tab turn advances the mark", async () => {
+ currentTasks = initialTasks();
+ const afterFirstTurn = [...initialTasks(), completedTurnTask("task-streamed", "same tab question", "same tab answer")];
mockSendMessageStream
- .mockResolvedValueOnce(streamOf(completedStatusEvent("same tab answer")))
- .mockResolvedValueOnce(streamOf(completedStatusEvent("next answer", "session-1", "task-next")));
+ .mockResolvedValueOnce(streamThenPersist([completedStatusEvent("same tab answer")], afterFirstTurn))
+ .mockResolvedValueOnce(streamThenPersist([completedStatusEvent("next answer", "session-1", "task-next")], afterFirstTurn));
renderExistingSession();
expect(await screen.findByText("initial answer")).toBeInTheDocument();
+ // Load synced the mark to the initial history count.
+ await waitFor(() => expect(mockGetSessionTasks).toHaveBeenCalledTimes(1));
await sendText("same tab question");
await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(1));
expect(await screen.findByText("same tab answer")).toBeInTheDocument();
+ // Wait until refreshServerMark has re-read the post-turn snapshot (load +
+ // guard + refresh = 3 reads) so the mark reflects our own new messages.
+ await waitFor(() => expect(mockGetSessionTasks).toHaveBeenCalledTimes(3));
- mockBackendTasks([
- completedTask("task-initial", initialTurn),
- completedTask("task-streamed", [
- textMessage(sentMessage().messageId, "user", "same tab question", "session-1", "task-streamed"),
- textMessage("same-tab-agent", "agent", "same tab answer", "session-1", "task-streamed"),
- ]),
- ]);
await sendText("next question");
await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(2));
expect(mockToastInfo).not.toHaveBeenCalledWith(staleToastMessage);
});
- it("still blocks after a same-tab stream when the backend also has an unseen cross-tab message", async () => {
- mockBackendTasks([completedTask("task-initial", initialTurn)]);
- mockSendMessageStream
- .mockResolvedValueOnce(streamOf(completedStatusEvent("same tab answer")));
+ it("blocks the send when another tab advanced the conversation past the synced mark", async () => {
+ currentTasks = initialTasks();
renderExistingSession();
expect(await screen.findByText("initial answer")).toBeInTheDocument();
+ await waitFor(() => expect(mockGetSessionTasks).toHaveBeenCalledTimes(1));
- await sendText("same tab question");
- await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(1));
- expect(await screen.findByText("same tab answer")).toBeInTheDocument();
+ // Another tab added a turn the server persisted but this tab never synced.
+ currentTasks = [...initialTasks(), completedTurnTask("task-external", "external user", "external answer")];
- mockBackendTasks([
- completedTask("task-initial", initialTurn),
- completedTask("task-streamed", sameTabTurn),
- completedTask("task-external", externalTurn),
- ]);
await sendText("should review cross-tab first");
await waitFor(() => expect(mockToastInfo).toHaveBeenCalledWith(staleToastMessage));
- expect(mockSendMessageStream).toHaveBeenCalledTimes(1);
- });
-
- it("does not let local-only streaming messages mask an unseen backend turn", async () => {
- mockBackendTasks([completedTask("task-initial", initialTurn)]);
- mockSendMessageStream
- .mockResolvedValueOnce(streamOf(completedStatusEvent("local-only answer")));
-
- renderExistingSession();
-
- expect(await screen.findByText("initial answer")).toBeInTheDocument();
-
- await sendText("local optimistic question");
- await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(1));
- expect(await screen.findByText("local-only answer")).toBeInTheDocument();
-
- mockBackendTasks([
- completedTask("task-initial", initialTurn),
- completedTask("task-external", externalTurn),
- ]);
- await sendText("should review backend first");
-
- await waitFor(() => expect(mockToastInfo).toHaveBeenCalledWith(staleToastMessage));
- expect(mockSendMessageStream).toHaveBeenCalledTimes(1);
- });
-
- it("blocks when local-only streaming messages share text and role with an unseen backend turn", async () => {
- mockBackendTasks([completedTask("task-initial", initialTurn)]);
- mockSendMessageStream
- .mockResolvedValueOnce(streamOf(completedStatusEvent("duplicate answer", "session-1", "task-streamed")));
-
- renderExistingSession();
-
- expect(await screen.findByText("initial answer")).toBeInTheDocument();
-
- await sendText("duplicate question");
- await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(1));
- expect(await screen.findByText("duplicate answer")).toBeInTheDocument();
-
- mockBackendTasks([
- completedTask("task-initial", initialTurn),
- completedTask("task-unseen", [
- textMessage("unseen-user", "user", "duplicate question", "session-1", "task-unseen"),
- textMessage("unseen-agent", "agent", "duplicate answer", "session-1", "task-unseen"),
- ]),
- ]);
- await sendText("should review duplicate backend first");
-
- await waitFor(() => expect(mockToastInfo).toHaveBeenCalledWith(staleToastMessage));
- expect(mockSendMessageStream).toHaveBeenCalledTimes(1);
+ expect(mockSendMessageStream).not.toHaveBeenCalled();
+ // The block reloaded the latest context for the user.
+ expect(await screen.findByText("external answer")).toBeInTheDocument();
});
- it("blocks when a local-only empty tool stream collides with an unseen backend data turn", async () => {
- mockBackendTasks([completedTask("task-initial", initialTurn)]);
- mockSendMessageStream
- .mockResolvedValueOnce(streamOf(completedToolCallStatusEvent("session-1", "task-streamed", "shared-call")));
+ it("proceeds after a block once the reload re-syncs the mark", async () => {
+ currentTasks = initialTasks();
+ mockSendMessageStream.mockResolvedValueOnce(streamThenPersist([completedStatusEvent("ok")], currentTasks));
renderExistingSession();
-
expect(await screen.findByText("initial answer")).toBeInTheDocument();
- await sendText("local tool question");
- await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(1));
-
- mockBackendTasks([
- completedTask("task-initial", initialTurn),
- completedTask("task-unseen-tool", [
- toolCallMessage("backend-tool", "session-1", "task-unseen-tool", "shared-call"),
- ]),
- ]);
- await sendText("should review tool turn first");
-
+ // First send is stale and blocked; reloadSessionFromDB advances the mark.
+ currentTasks = [...initialTasks(), completedTurnTask("task-external", "external user", "external answer")];
+ await sendText("first try");
await waitFor(() => expect(mockToastInfo).toHaveBeenCalledWith(staleToastMessage));
- expect(mockSendMessageStream).toHaveBeenCalledTimes(1);
- });
-
- it("does not block the next send after a same-tab tool-call turn is persisted", async () => {
- // Reproduces the false positive seen with tool calls: a same-tab turn that
- // makes a tool call streams a ToolCallRequestEvent locally (keyed by its
- // real contextId/taskId), but the backend persists agent messages with
- // EMPTY contextId/taskId. extractMessagesFromTasks leaves those empty
- // (`"" ?? task.contextId` is still "") and rebuilds the converted tool
- // message with a fresh uuidv4 messageId, so it keys on ["message", ]
- // — a different key on every extraction. The guard therefore can never match
- // the persisted tool message against the local one, counts the backend as
- // ahead, and falsely blocks the next send.
- mockBackendTasks([completedTask("task-initial", initialTurn)]);
- mockSendMessageStream
- .mockResolvedValueOnce(streamOf(completedToolCallStatusEvent("session-1", "task-streamed", "shared-call")))
- .mockResolvedValueOnce(streamOf(completedStatusEvent("next answer", "session-1", "task-next")));
-
- renderExistingSession();
-
- expect(await screen.findByText("initial answer")).toBeInTheDocument();
-
- await sendText("tool question");
- await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(1));
-
- // Backend now reflects exactly that same-tab tool turn. The persisted agent
- // tool message carries empty contextId/taskId, as the real backend stores it.
- mockBackendTasks([
- completedTask("task-initial", initialTurn),
- completedTask("task-streamed", [
- textMessage(sentMessage().messageId, "user", "tool question", "session-1", "task-streamed"),
- toolCallMessage("backend-tool", "", "", "shared-call"),
- ]),
- ]);
- await sendText("next question");
-
- await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(2));
- expect(mockToastInfo).not.toHaveBeenCalledWith(staleToastMessage);
- });
-
- it("does not block the next send after a same-tab text turn persisted with empty agent ids", async () => {
- // The general case behind "every message needs sending twice": the backend
- // persists AGENT messages with empty contextId/taskId (A2A optional fields;
- // the task is the canonical carrier). The locally-streamed agent message
- // carries the task's real ids, so it keys on ["task", ...] while the
- // backend-extracted copy — pushed as-is with empty ids — keys on
- // ["message", ]. They never match, so every turn (each has an
- // agent text response) counts the backend as ahead and falsely blocks.
- mockBackendTasks([completedTask("task-initial", initialTurn)]);
- mockSendMessageStream
- .mockResolvedValueOnce(streamOf(completedStatusEvent("same tab answer", "session-1", "task-streamed")))
- .mockResolvedValueOnce(streamOf(completedStatusEvent("next answer", "session-1", "task-next")));
-
- renderExistingSession();
-
- expect(await screen.findByText("initial answer")).toBeInTheDocument();
+ expect(mockSendMessageStream).not.toHaveBeenCalled();
- await sendText("same tab question");
+ // Nothing else changed on the server, so the next send goes through.
+ await sendText("second try");
await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(1));
- expect(await screen.findByText("same tab answer")).toBeInTheDocument();
-
- // Backend reflects the turn, with the agent message persisted with empty
- // contextId/taskId (the user message keeps its contextId, as the client stamps it).
- mockBackendTasks([
- completedTask("task-initial", initialTurn),
- completedTask("task-streamed", [
- textMessage(sentMessage().messageId, "user", "same tab question", "session-1", ""),
- textMessage("same-tab-agent", "agent", "same tab answer", "", ""),
- ]),
- ]);
- await sendText("next question");
-
- await waitFor(() => expect(mockSendMessageStream).toHaveBeenCalledTimes(2));
- expect(mockToastInfo).not.toHaveBeenCalledWith(staleToastMessage);
- });
-
- it("still blocks when the backend has a cross-tab message not visible locally", async () => {
- mockBackendTasks([completedTask("task-initial", initialTurn)]);
-
- renderExistingSession();
-
- expect(await screen.findByText("initial answer")).toBeInTheDocument();
-
- mockBackendTasks([
- completedTask("task-initial", initialTurn),
- completedTask("task-external", externalTurn),
- ]);
- await sendText("should review first");
-
- await waitFor(() => expect(mockToastInfo).toHaveBeenCalledWith(staleToastMessage));
- expect(mockSendMessageStream).not.toHaveBeenCalled();
});
it.each([
@@ -432,16 +248,14 @@ describe("ChatInterface send guard", () => {
["Ctrl+Enter", { ctrlKey: true }],
])("applies the stale-message send guard for %s", async (_shortcut, modifier) => {
const user = userEvent.setup();
- mockBackendTasks([completedTask("task-initial", initialTurn)]);
+ currentTasks = initialTasks();
renderExistingSession();
expect(await screen.findByText("initial answer")).toBeInTheDocument();
+ await waitFor(() => expect(mockGetSessionTasks).toHaveBeenCalledTimes(1));
- mockBackendTasks([
- completedTask("task-initial", initialTurn),
- completedTask("task-external", externalTurn),
- ]);
+ currentTasks = [...initialTasks(), completedTurnTask("task-external", "external user", "external answer")];
const textbox = screen.getByRole("textbox");
await user.type(textbox, "should review first");
diff --git a/ui/src/components/chat/__tests__/ChatLayoutUI.test.tsx b/ui/src/components/chat/__tests__/ChatLayoutUI.test.tsx
new file mode 100644
index 0000000000..e52582eefc
--- /dev/null
+++ b/ui/src/components/chat/__tests__/ChatLayoutUI.test.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import ChatLayoutUI from "@/components/chat/ChatLayoutUI";
+import type { AgentResponse } from "@/types";
+
+// Heavy descendants and server actions are stubbed; this test only verifies the
+// layout wiring, not their behavior.
+jest.mock("@/app/actions/sessions", () => ({
+ getSessionsForAgent: jest.fn().mockResolvedValue({ data: [], error: null }),
+}));
+jest.mock("@/components/sidebars/SessionsSidebar", () => ({
+ __esModule: true,
+ default: () => ,
+}));
+jest.mock("@/components/sidebars/AgentDetailsSidebar", () => ({
+ AgentDetailsSidebar: () => ,
+}));
+jest.mock("@/components/chat/ChatAgentContext", () => ({
+ ChatAgentProvider: ({ children }: { children: React.ReactNode }) => <>{children},
+}));
+
+// Replace the real provider with a marker so we can assert ChatLayoutUI mounts
+// it (and wraps the chat children with it). Without this provider the chat
+// silently falls back to the empty default context and MCP App widgets never
+// render — the regression this test guards against.
+jest.mock("@/components/chat/ChatMcpAppsContext", () => ({
+ ChatMcpAppsProvider: ({
+ currentAgent,
+ children,
+ }: {
+ currentAgent: AgentResponse;
+ children: React.ReactNode;
+ }) => (
+
+ ,
+ );
+}
+
+describe("ChatLayoutUI", () => {
+ it("mounts ChatMcpAppsProvider around the chat so MCP App widgets can render", async () => {
+ renderLayout();
+
+ const provider = await screen.findByTestId("mcp-apps-provider");
+ expect(provider).toHaveAttribute("data-agent", "kanban-mcp-agent");
+ // The chat content must live inside the provider, otherwise tool calls
+ // never resolve to MCP App widgets.
+ expect(provider).toContainElement(screen.getByTestId("chat-child"));
+ });
+
+ it("renders the chat children", async () => {
+ renderLayout();
+ await waitFor(() => expect(screen.getByTestId("chat-child")).toBeInTheDocument());
+ });
+});
diff --git a/ui/src/components/chat/__tests__/ChatMcpAppsContext.test.tsx b/ui/src/components/chat/__tests__/ChatMcpAppsContext.test.tsx
new file mode 100644
index 0000000000..1f2179b7ad
--- /dev/null
+++ b/ui/src/components/chat/__tests__/ChatMcpAppsContext.test.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import {
+ ChatMcpAppsProvider,
+ useChatMcpApps,
+} from "@/components/chat/ChatMcpAppsContext";
+import { listMcpAppTools } from "@/app/actions/mcp-apps";
+import type { AgentResponse } from "@/types";
+
+jest.mock("@/app/actions/mcp-apps", () => ({
+ listMcpAppTools: jest.fn(),
+}));
+
+const mockedListMcpAppTools = listMcpAppTools as jest.Mock;
+
+// An agent that selects all tools from a single RemoteMCPServer (kanban-mcp).
+const currentAgent = {
+ agent: {
+ metadata: { namespace: "kagent", name: "assistant" },
+ },
+ tools: [
+ {
+ type: "McpServer",
+ mcpServer: {
+ kind: "RemoteMCPServer",
+ apiGroup: "kagent.dev",
+ name: "kanban-mcp",
+ namespace: "kagent",
+ toolNames: [], // empty => selects all tools
+ },
+ },
+ ],
+} as unknown as AgentResponse;
+
+function Probe() {
+ const { getMcpAppForTool, getMcpToolForAppCall } = useChatMcpApps();
+ const board = getMcpAppForTool("show_board");
+ const appOnly = getMcpAppForTool("internal_widget");
+ const plain = getMcpAppForTool("plain_tool");
+ const appOnlyTool = getMcpToolForAppCall("kagent", "kanban-mcp", "internal_widget");
+ return (
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByTestId("board").textContent).toBe("kanban-mcp:ui://board");
+ });
+ expect(screen.getByTestId("appOnly").textContent).toBe("none");
+ expect(screen.getByTestId("plain").textContent).toBe("none");
+ expect(screen.getByTestId("appOnlyTool").textContent).toBe("internal_widget:true");
+ expect(mockedListMcpAppTools).toHaveBeenCalledWith("kagent", "kanban-mcp", "RemoteMCPServer.kagent.dev");
+ });
+
+ it("registers no apps when the agent has no MCP servers", async () => {
+ const agentWithoutMcp = {
+ agent: { metadata: { namespace: "kagent", name: "assistant" } },
+ tools: [],
+ } as unknown as AgentResponse;
+
+ render(
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByTestId("board").textContent).toBe("none");
+ });
+ expect(mockedListMcpAppTools).not.toHaveBeenCalled();
+ });
+});
diff --git a/ui/src/components/mcp-apps/McpAppRenderer.tsx b/ui/src/components/mcp-apps/McpAppRenderer.tsx
new file mode 100644
index 0000000000..e82dfd5108
--- /dev/null
+++ b/ui/src/components/mcp-apps/McpAppRenderer.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { AppRenderer, type AppRendererProps } from "@mcp-ui/client";
+import type { CallToolResult, ContentBlock } from "@modelcontextprotocol/sdk/types.js";
+import { useTheme } from "next-themes";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { useChatMcpApps } from "@/components/chat/ChatMcpAppsContext";
+import { callMcpAppTool, readMcpAppResource } from "@/app/actions/mcp-apps";
+import { installMcpAppInitCompat } from "@/lib/mcpAppInitCompat";
+
+// Install at module load (before AppRenderer mounts and its transport connects)
+// so non-conformant guests that send `clientInfo` instead of `appInfo` in their
+// `ui/initialize` request still complete the handshake. See mcpAppInitCompat.
+installMcpAppInitCompat();
+
+type SandboxCsp = NonNullable["csp"];
+
+interface McpAppRendererProps {
+ namespace: string;
+ serverName: string;
+ /**
+ * groupKind of the backing tool-server CRD so proxied tool/resource calls
+ * resolve the right CRD when a RemoteMCPServer and MCPServer share a
+ * namespace/name.
+ */
+ groupKind?: string;
+ toolName: string;
+ toolResourceUri: string;
+ toolInput?: Record;
+ toolResult?: CallToolResult;
+ /**
+ * Delivers a message the app pushed into the conversation via the MCP Apps
+ * `ui/message` channel. The host injects it as a new chat turn so the agent
+ * can act on it (e.g. start monitoring a build after the app triggered it).
+ */
+ onSendMessage?: (text: string) => Promise;
+}
+
+/** Join the text content blocks of an app `ui/message` into a single prompt. */
+function extractMessageText(content: ContentBlock[] | undefined): string {
+ if (!Array.isArray(content)) {
+ return "";
+ }
+ return content
+ .filter((block): block is ContentBlock & { type: "text"; text: string } => block?.type === "text" && typeof (block as { text?: unknown }).text === "string")
+ .map((block) => block.text)
+ .join("\n")
+ .trim();
+}
+
+function requireData(response: { data?: T; error?: string; message: string }): T {
+ if (response.error || !response.data) {
+ throw new Error(response.error || response.message);
+ }
+ return response.data;
+}
+
+export function McpAppRenderer({
+ namespace,
+ serverName,
+ groupKind,
+ toolName,
+ toolResourceUri,
+ toolInput,
+ toolResult,
+ onSendMessage,
+}: McpAppRendererProps) {
+ const { resolvedTheme } = useTheme();
+ const { getMcpToolForAppCall } = useChatMcpApps();
+ const [sandboxUrl, setSandboxUrl] = useState(null);
+ const [csp, setCsp] = useState(undefined);
+ const [connected, setConnected] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const id = requestAnimationFrame(() => {
+ // ponytail: the proxy is served from the host origin, so with the iframe's
+ // allow-same-origin attribute an MCP App shares the host origin (can reach
+ // host cookies/storage/DOM/API). Accepted by design: MCP servers are
+ // curated/trusted, and a single origin keeps everything behind one SSO
+ // gateway. Upgrade path if untrusted servers are ever exposed: serve
+ // sandbox_proxy.html from a distinct, env-configured origin so
+ // allow-same-origin resolves to the sandbox origin instead of the host.
+ // Tell the sandbox proxy which origin to trust for postMessage, so it can
+ // reject messages from any other origin instead of accepting "*".
+ const url = new URL("/sandbox_proxy.html", window.location.origin);
+ url.searchParams.set("parentOrigin", window.location.origin);
+ setSandboxUrl(url);
+ });
+ return () => cancelAnimationFrame(id);
+ }, []);
+
+ // Only hand the app its theme/locale once it has connected. @mcp-ui/client@7.1.1
+ // fires setHostContext the moment the AppBridge is created — before the iframe
+ // transport connects — so providing hostContext earlier throws an unhandled
+ // "Not connected" rejection and never reaches the guest. The first
+ // size-changed notification only arrives post-connect, so we use it as the
+ // connected signal (see handleSizeChanged). ponytail: an app that never
+ // reports its size won't get theme sync and falls back to its own theme —
+ // acceptable degradation; the upgrade path is a library fix that delivers
+ // hostContext at ui/initialize instead of via a pre-connect notification.
+ const hostContext = useMemo(
+ () => connected
+ ? {
+ theme: resolvedTheme === "dark" ? "dark" : "light",
+ locale: typeof navigator !== "undefined" ? navigator.language : "en-US",
+ }
+ : undefined,
+ [connected, resolvedTheme],
+ );
+
+ // Pass the resource's declared CSP (captured in handleReadResource) to the
+ // sandbox proxy so it can enforce it; the proxy applies the spec's restrictive
+ // default when this is undefined.
+ const sandbox = useMemo(() => sandboxUrl ? { url: sandboxUrl, csp } : undefined, [sandboxUrl, csp]);
+
+ // Advertise the host channels we actually implement so capability-gated apps
+ // know they can proxy tool/resource calls and push messages to the chat.
+ const hostCapabilities = useMemo>(() => ({
+ serverTools: {},
+ serverResources: {},
+ openLinks: {},
+ message: { text: {} },
+ }), []);
+
+ const handleReadResource = useCallback>(async ({ uri }) => {
+ const result = requireData(await readMcpAppResource(namespace, serverName, uri, groupKind));
+ // Capture _meta.ui.csp before the library renders the iframe so the sandbox
+ // proxy can enforce the server-declared Content Security Policy.
+ const ui = (result.contents?.[0]?._meta as { ui?: { csp?: SandboxCsp } } | undefined)?.ui;
+ if (ui?.csp) {
+ setCsp(ui.csp);
+ }
+ return result;
+ }, [namespace, serverName, groupKind]);
+
+ // An iframe-initiated tools/call is the app updating itself: proxy it to the
+ // MCP server and return the result to the same widget so it re-renders in
+ // place (MCP Apps standard). We do NOT promote it to a new chat turn, even
+ // when the tool is also model-visible — that would spawn a duplicate widget
+ // instead of updating the existing one. Apps that want the agent to act use
+ // the separate ui/message channel (onMessage) instead.
+ const handleCallTool = useCallback>(async (params) => {
+ const requestedToolName = typeof params.name === "string" && params.name ? params.name : toolName;
+ const args = typeof params.arguments === "object" && params.arguments !== null
+ ? (params.arguments as Record)
+ : {};
+ const requestedTool = getMcpToolForAppCall(namespace, serverName, requestedToolName);
+
+ if (requestedTool && !requestedTool.appOnly && !requestedTool.agentVisible) {
+ throw new Error(`MCP App requested tool ${requestedToolName}, but it is not configured as app-only or agent-visible.`);
+ }
+
+ return requireData(await callMcpAppTool(namespace, serverName, requestedToolName, args, groupKind));
+ }, [getMcpToolForAppCall, namespace, serverName, toolName, groupKind]);
+
+ // ui/message: the app asks the host to inject content into the conversation.
+ // We forward it as a new chat turn so the agent can react (e.g. start
+ // monitoring a build the app just triggered).
+ const handleMessage = useCallback>(async (params) => {
+ const text = extractMessageText(params.content as ContentBlock[] | undefined);
+ if (!text) {
+ return { isError: true };
+ }
+ if (!onSendMessage) {
+ return { isError: true };
+ }
+ try {
+ await onSendMessage(text);
+ return {};
+ } catch {
+ return { isError: true };
+ }
+ }, [onSendMessage]);
+
+ // Gracefully accept protocol requests we don't act on (e.g.
+ // ui/update-model-context) so apps that send them don't surface errors.
+ const handleFallbackRequest = useCallback>(async () => {
+ return {};
+ }, []);
+
+ const handleOpenLink = useCallback>(async ({ url }) => {
+ const target = new URL(String(url), window.location.href);
+ if (target.protocol !== "http:" && target.protocol !== "https:") {
+ const message = `Blocked unsupported link scheme: ${target.protocol}`;
+ setError(message);
+ throw new Error(message);
+ }
+ window.open(target.toString(), "_blank", "noopener,noreferrer");
+ return {};
+ }, []);
+
+ const handleError = useCallback>((err) => {
+ setError(err.message);
+ }, []);
+
+ // The guest can only emit size-changed once its transport is connected, so we
+ // treat the first one as the signal that it's safe to push hostContext.
+ const handleSizeChanged = useCallback>(() => {
+ setConnected(true);
+ }, []);
+
+ if (error) {
+ return (
+
+ MCP App error
+ {error}
+
+ );
+ }
+
+ if (!sandboxUrl) {
+ return ([]);
+ const [selectedToolName, setSelectedToolName] = useState("");
+ const [argsText, setArgsText] = useState("{}");
+ const [toolResult, setToolResult] = useState();
+ const [toolInput, setToolInput] = useState | undefined>();
+ const [loading, setLoading] = useState(true);
+ const [invoking, setInvoking] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ async function loadTools() {
+ setLoading(true);
+ setError(null);
+ const response = await listMcpAppTools(namespace, name);
+ if (cancelled) {
+ return;
+ }
+ if (response.error || !response.data) {
+ setError(response.error || response.message);
+ setTools([]);
+ } else {
+ const uiTools = response.data.filter((tool): tool is UiMcpAppTool => !!tool.uiResourceUri);
+ const scoped = focusToolName ? uiTools.filter((tool) => tool.name === focusToolName) : uiTools;
+ setTools(scoped);
+ setSelectedToolName((current) => current || scoped[0]?.name || "");
+ }
+ setLoading(false);
+ }
+ void loadTools();
+ return () => {
+ cancelled = true;
+ };
+ }, [namespace, name, focusToolName]);
+
+ const selectedTool = useMemo(
+ () => tools.find((tool) => tool.name === selectedToolName),
+ [selectedToolName, tools],
+ );
+
+ const invokeSelectedTool = async () => {
+ if (!selectedTool) {
+ return;
+ }
+ let args: Record;
+ try {
+ const parsed = JSON.parse(argsText || "{}") as unknown;
+ if (parsed === null || Array.isArray(parsed) || typeof parsed !== "object") {
+ throw new Error("Tool arguments must be a JSON object");
+ }
+ args = parsed as Record;
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "Invalid JSON arguments");
+ return;
+ }
+
+ setInvoking(true);
+ setError(null);
+ setToolResult(undefined);
+ setToolInput(args);
+ const response = await callMcpAppTool(namespace, name, selectedTool.name, args);
+ if (response.error || !response.data) {
+ setError(response.error || response.message);
+ } else {
+ setToolResult(response.data);
+ }
+ setInvoking(false);
+ };
+
+ return (
+
+ {children}
+
+ ),
+}));
+
+const currentAgent = {
+ agent: {
+ metadata: { namespace: "kagent", name: "kanban-mcp-agent" },
+ spec: { type: "Declarative" },
+ },
+ workloadMode: "deployment",
+} as unknown as AgentResponse;
+
+function renderLayout() {
+ return render(
+ chat
+
+ {board ? `${board.serverName}:${board.uiResourceUri}` : "none"}
+ {appOnly ? "yes" : "none"}
+ {plain ? "yes" : "none"}
+
+ {appOnlyTool ? `${appOnlyTool.toolName}:${appOnlyTool.appOnly}` : "none"}
+
+
+ );
+}
+
+describe("ChatMcpAppsProvider", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it("registers agent-visible UI tools as apps and excludes app-only and non-UI tools", async () => {
+ mockedListMcpAppTools.mockResolvedValue({
+ error: false,
+ data: [
+ // Visible to both model and app -> agent-visible app.
+ {
+ name: "show_board",
+ uiResourceUri: "ui://board",
+ _meta: { ui: { visibility: ["model", "app"] } },
+ },
+ // App-only -> not surfaced via getMcpAppForTool, but resolvable for app calls.
+ {
+ name: "internal_widget",
+ uiResourceUri: "ui://widget",
+ _meta: { ui: { visibility: "app" } },
+ },
+ // No UI resource -> never an app.
+ { name: "plain_tool" },
+ ],
+ });
+
+ render(
+ Preparing MCP App renderer...
;
+ }
+
+ return (
+
+ }
+ hostContext={hostContext}
+ hostCapabilities={hostCapabilities}
+ onReadResource={handleReadResource}
+ onCallTool={handleCallTool}
+ onMessage={handleMessage}
+ onFallbackRequest={handleFallbackRequest}
+ onOpenLink={handleOpenLink}
+ onSizeChanged={handleSizeChanged}
+ onError={handleError}
+ />
+
+ );
+}
diff --git a/ui/src/components/mcp-apps/McpAppsInspector.tsx b/ui/src/components/mcp-apps/McpAppsInspector.tsx
new file mode 100644
index 0000000000..4627725f5a
--- /dev/null
+++ b/ui/src/components/mcp-apps/McpAppsInspector.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { AlertCircle, Loader2, Play } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
+import {
+ callMcpAppTool,
+ listMcpAppTools,
+ type McpAppTool,
+} from "@/app/actions/mcp-apps";
+import { McpAppRenderer } from "./McpAppRenderer";
+
+interface McpAppsInspectorProps {
+ namespace: string;
+ name: string;
+ /** When set, scope the inspector to a single app (tool) instead of listing all of them. */
+ focusToolName?: string;
+}
+
+type UiMcpAppTool = McpAppTool & { uiResourceUri: string };
+
+export function McpAppsInspector({ namespace, name, focusToolName }: McpAppsInspectorProps) {
+ const [tools, setTools] = useState
+
+ Error
+ {error}
+
+ ) : null}
+
+
+
+ UI-capable tools
+
+ Tools are listed only when they declare
+
+
+ {loading ? (
+
+
+
+ {selectedTool ? (
+
+
+ Invoke {selectedTool.name}
+ Enter JSON arguments, invoke the tool, then render its MCP App resource.
+
+
+
+
+
+ {error ? (
+ MCP Apps
++ Inspect UI-capable tools exposed by {namespace}/{name}. +
+_meta.ui.resourceUri or the legacy alias.
+
+
+ ) : tools.length === 0 ? (
+
+ No MCP Apps found for this server.
+
+ ) : (
+
+ {tools.map((tool) => (
+
+ ))}
+
+ )}
+