diff --git a/apps/code/src/renderer/components/permissions/PlanContent.tsx b/apps/code/src/renderer/components/permissions/PlanContent.tsx index 10b1ea9f2..a25a265de 100644 --- a/apps/code/src/renderer/components/permissions/PlanContent.tsx +++ b/apps/code/src/renderer/components/permissions/PlanContent.tsx @@ -1,5 +1,7 @@ -import { Box } from "@radix-ui/themes"; -import { useEffect, useRef } from "react"; +import { ArrowsIn, ArrowsOut, ListChecks, X } from "@phosphor-icons/react"; +import { Box, Flex, IconButton, Text } from "@radix-ui/themes"; +import { useEffect, useRef, useState } from "react"; +import { createPortal } from "react-dom"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; @@ -12,6 +14,7 @@ interface PlanContentProps { export function PlanContent({ id, plan }: PlanContentProps) { const scrollRef = useRef(null); + const [isFullscreen, setIsFullscreen] = useState(false); useEffect(() => { const el = scrollRef.current; @@ -33,14 +36,93 @@ export function PlanContent({ id, plan }: PlanContentProps) { }; }, [id]); + useEffect(() => { + if (!isFullscreen) return; + const handler = (e: KeyboardEvent) => { + if (e.key === "Escape") { + setIsFullscreen(false); + } + }; + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); + }, [isFullscreen]); + + const markdown = ( + {plan} + ); + + if (isFullscreen) { + const portalTarget = document.getElementById("fullscreen-portal"); + if (portalTarget) { + return ( + <> + + setIsFullscreen(false)} + title="Exit fullscreen" + > + + + + + {createPortal( + + + + + + Plan + + + setIsFullscreen(false)} + title="Exit fullscreen (Escape)" + > + + + + + + {markdown} + + , + portalTarget, + )} + + ); + } + } + return ( - - {plan} - + setIsFullscreen(true)} + title="Expand to fullscreen" + > + + + + {markdown} ); } diff --git a/apps/code/src/renderer/features/mcp-apps/components/McpAppHost.tsx b/apps/code/src/renderer/features/mcp-apps/components/McpAppHost.tsx index 4f86ea8dc..c7ce8db6a 100644 --- a/apps/code/src/renderer/features/mcp-apps/components/McpAppHost.tsx +++ b/apps/code/src/renderer/features/mcp-apps/components/McpAppHost.tsx @@ -198,50 +198,51 @@ export function McpAppHost({ ); - const portalTarget = document.getElementById("mcp-fullscreen-portal"); + if (displayMode === "fullscreen") { + const portalTarget = document.getElementById("fullscreen-portal"); + if (portalTarget) { + return ( + <> + {fullscreenToggle} - if (displayMode === "fullscreen" && portalTarget) { - return ( - <> - {fullscreenToggle} - - {createPortal( - - - - - - {serverName} - {toolName} - - - { - setDisplayMode("inline"); - }} - title="Exit fullscreen (Escape)" + - - - + + + + {serverName} - {toolName} + + + { + setDisplayMode("inline"); + }} + title="Exit fullscreen (Escape)" + > + + + - {iframeElement} - , - portalTarget, - )} - - ); + {iframeElement} + , + portalTarget, + )} + + ); + } } return ( diff --git a/apps/code/src/renderer/features/sessions/components/ConversationView.tsx b/apps/code/src/renderer/features/sessions/components/ConversationView.tsx index 337dc820b..926d4bb89 100644 --- a/apps/code/src/renderer/features/sessions/components/ConversationView.tsx +++ b/apps/code/src/renderer/features/sessions/components/ConversationView.tsx @@ -212,7 +212,7 @@ export function ConversationView({ return (