feat: Add fullscreen expand to plan preview

[charlesvien]

Problem

Plan previews are capped at 50vh, making long plans hard to read in full.

Closeshttps://github.com/PostHog/code/issues/1743

See below the screen of the inline plan preview (in blue) with the expand button on the top right of the plan and the expanded plan view (the first image).

Changes

1. Add expand button (ArrowsOut) to plan preview card
2. Portal fullscreen view into existing conversation overlay, matching MCP app pattern
3. Use neutral theme (bg-gray-1) for fullscreen, keep blue accent for inline card
4. Support Escape key and X button to exit fullscreen
5. Preserve scroll position across mode toggles

How did you test this?

Manually

[charlesvien]

• feat: Make plan approval options contextual #1794
• feat: Add fullscreen expand to plan preview #1793 👈 (View in Graphite)
• fix: Misc bug and nit fixes #1792
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Prompt To Fix All With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/components/permissions/PlanContent.tsx
Line: 19-37
Comment:
**Scroll tracking breaks after mode toggle**
The scroll `useEffect` depends only on `[id]`, so when `isFullscreen` flips and `scrollRef.current` is re-bound to a different DOM node, the effect never re-runs. The listener stays on the stale (now detached) element: scroll events in the new mode go untracked, and `el.scrollTop = position` (position restoration) never fires for the newly mounted element. This directly breaks the PR's stated goal of preserving scroll position across mode toggles.
Add `isFullscreen` to the dependency array so the effect re-attaches to whichever element is currently active:
```suggestion useEffect(() => { const el = scrollRef.current; if (!el) return; const position = planScrollPosition.get(id); if (position !== undefined) { el.scrollTop = position; } const handleScroll = () => { planScrollPosition.set(id, el.scrollTop); }; el.addEventListener("scroll", handleScroll, { passive: true }); return () => { el.removeEventListener("scroll", handleScroll); }; }, [id, isFullscreen]);```
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: apps/code/src/renderer/components/permissions/PlanContent.tsx
Line: 72-75
Comment:
**Superfluous opacity transition**`transition: "opacity 150ms ease"` is set on the fullscreen overlay, but nothing in the code ever changes the element's `opacity`. The transition never fires, making this a no-op style property. Per simplicity rule #4, superfluous parts should be removed.
```suggestion <Box className="pointer-events-auto absolute inset-0 flex flex-col bg-gray-1" >```
How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "Add fullscreen expand to plan preview" | Re-trigger Greptile}

[charlesvien]

Merge activity

• Apr 23, 1:40 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 23, 1:41 AM UTC: Graphite rebased this pull request as part of a merge.
• Apr 23, 1:48 AM UTC: @charlesvien merged this pull request with Graphite.