feat: add MCP apps sidebar to task threads

[fercgomes]

Summary

• Adds a collapsible right-side sidebar inside the task conversation view that lists every MCP-app (UI-rendering) tool call in the thread.
• Clicking an entry scrolls the chat to that exact item via the existing VirtualizedList.scrollToIndex mechanism (same as conversation search).
• A toggle button lives in the task header next to ExternalAppsOpener.
• A single global subscription to mcpApps.onDiscoveryComplete maintains a Set of tool keys with registered UI, so the sidebar filters to true "apps" without firing N hasUiForTool queries.

Screen.Recording.2026-05-22.at.17.30.31.mov

Files

New

• mcp-apps/stores/mcpUiToolsStore.ts — runtime registry of MCP tool keys with UI
• mcp-apps/hooks/useMcpUiToolsSubscription.ts — single global subscription that populates the registry
• sessions/stores/mcpAppsSidebarStore.ts — persisted open/width via createSidebarStore
• sessions/components/McpAppsSidebar.tsx — the panel with resize handle and clickable rows
• task-detail/components/McpAppsToggleButton.tsx — header icon button

Modified

• App.tsx — mounts the subscription once
• ConversationView.tsx — single pass derives both mcpAppIndices (for keepMounted) and mcpEntries; root wrapped in a Flex to host the sidebar
• TaskDetail.tsx — toggle button next to ExternalAppsOpener in the header

Test plan

• pnpm --filter code typecheck passes
• pnpm dev — open a task, generate a couple of PostHog MCP apps (insights / dashboard)
• Click the SquaresFour icon in the task header → sidebar opens to 260px on the right
• Sidebar lists only UI-rendering MCP calls; non-UI MCP tools are absent
• Scroll the chat up; click an entry → conversation scrolls to that item centred, iframe state preserved
• Drag the resize handle; reload the app → width persisted
• Close the sidebar; reload → closed state persisted
• Empty thread → sidebar shows empty state

[greptile-apps]

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
apps/code/src/renderer/features/sessions/components/McpAppsSidebar.tsx:202-209
**Duplicate `McpAppHost` instances for every MCP app call**

Each MCP app tool call already has a live `McpAppHost` mounted in the main conversation via `keepMounted`. Rendering another `McpAppHost` per entry in the sidebar means two active iframes and two independent `useAppBridge` connections exist simultaneously for the same call. Because `onToolResult` and `onToolCancelled` subscriptions in `McpAppHost` are keyed only by `toolKey` (not `toolCallId`), both instances receive every tool result/cancellation event and independently forward it to their respective iframes via `sendWhenReady`. This doubles IPC traffic, doubles bridge initialisation overhead, and means the MCP app receives each result twice — once in the conversation iframe and once in the sidebar iframe.

### Issue 2 of 2
apps/code/src/renderer/features/sessions/components/McpAppsSidebar.tsx:89-101
Add a cleanup reset so `isResizing` returns to `false` when the component unmounts mid-drag.

```suggestion
    const onMouseUp = () => {
      setIsResizing(false);
      document.body.style.cursor = "";
      document.body.style.userSelect = "";
    };
    document.body.style.cursor = "col-resize";
    document.body.style.userSelect = "none";
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
    return () => {
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
      setIsResizing(false);
      document.body.style.cursor = "";
      document.body.style.userSelect = "";
    };
```

_{Reviews (1): Last reviewed commit: "feat: size MCP apps sidebar as a ratio o..." | Re-trigger Greptile}

[greptile-apps]

Duplicate McpAppHost instances for every MCP app call

Each MCP app tool call already has a live McpAppHost mounted in the main conversation via keepMounted. Rendering another McpAppHost per entry in the sidebar means two active iframes and two independent useAppBridge connections exist simultaneously for the same call. Because onToolResult and onToolCancelled subscriptions in McpAppHost are keyed only by toolKey (not toolCallId), both instances receive every tool result/cancellation event and independently forward it to their respective iframes via sendWhenReady. This doubles IPC traffic, doubles bridge initialisation overhead, and means the MCP app receives each result twice — once in the conversation iframe and once in the sidebar iframe.

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/sessions/components/McpAppsSidebar.tsx
Line: 202-209

Comment:
**Duplicate `McpAppHost` instances for every MCP app call**

Each MCP app tool call already has a live `McpAppHost` mounted in the main conversation via `keepMounted`. Rendering another `McpAppHost` per entry in the sidebar means two active iframes and two independent `useAppBridge` connections exist simultaneously for the same call. Because `onToolResult` and `onToolCancelled` subscriptions in `McpAppHost` are keyed only by `toolKey` (not `toolCallId`), both instances receive every tool result/cancellation event and independently forward it to their respective iframes via `sendWhenReady`. This doubles IPC traffic, doubles bridge initialisation overhead, and means the MCP app receives each result twice — once in the conversation iframe and once in the sidebar iframe.

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

Add a cleanup reset so isResizing returns to false when the component unmounts mid-drag.

Suggested change

	const onMouseUp = () => {
	setIsResizing(false);
	document.body.style.cursor = "";
	document.body.style.userSelect = "";
	};
	document.body.style.cursor = "col-resize";
	document.body.style.userSelect = "none";
	document.addEventListener("mousemove", onMouseMove);
	document.addEventListener("mouseup", onMouseUp);
	return () => {
	document.removeEventListener("mousemove", onMouseMove);
	document.removeEventListener("mouseup", onMouseUp);
	};
	const onMouseUp = () => {
	setIsResizing(false);
	document.body.style.cursor = "";
	document.body.style.userSelect = "";
	};
	document.body.style.cursor = "col-resize";
	document.body.style.userSelect = "none";
	document.addEventListener("mousemove", onMouseMove);
	document.addEventListener("mouseup", onMouseUp);
	return () => {
	document.removeEventListener("mousemove", onMouseMove);
	document.removeEventListener("mouseup", onMouseUp);
	setIsResizing(false);
	document.body.style.cursor = "";
	document.body.style.userSelect = "";
	};

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/sessions/components/McpAppsSidebar.tsx
Line: 89-101

Comment:
Add a cleanup reset so `isResizing` returns to `false` when the component unmounts mid-drag.

```suggestion
    const onMouseUp = () => {
      setIsResizing(false);
      document.body.style.cursor = "";
      document.body.style.userSelect = "";
    };
    document.body.style.cursor = "col-resize";
    document.body.style.userSelect = "none";
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
    return () => {
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
      setIsResizing(false);
      document.body.style.cursor = "";
      document.body.style.userSelect = "";
    };
```

How can I resolve this? If you propose a fix, please make it concise.