All tests run on an 8-year-old MacBook Air.

The first version of HiyokoLogcat's AI diagnosis UI was a fixed panel at the bottom of the screen.

It took up 30% of the vertical space — permanently. Even when you weren't using AI. Users hated it.

The second version: a full-screen overlay that appears on demand and disappears with ESC. Here's why it works better and how I built it.

The problem with fixed panels

A fixed AI panel makes a promise: "AI is always here." But most of the time, you're reading logs, not diagnosing them.

30% of screen space dedicated to a feature you use 10% of the time is a bad trade.

The overlay model makes a different promise: "AI appears when you need it and gets out of the way when you don't."

The React overlay

interface DiagnosisOverlayProps { isVisible : boolean ; result : string ; isLoading : boolean ; onClose : () => void ; }

export function DiagnosisOverlay ({ isVisible , result , isLoading , onClose }: DiagnosisOverlayProps ) { // Close on ESC key useEffect (() => {…