feat: Add fullscreen expand to plan preview

[charlesvien]

Problem

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

Closes #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]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• 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
• feat: Add usage limit detection and upgrade prompt #1791
• 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}