devlog 3: debugging hell and nuking the UI

bruh the last 10 hours were an absolute nightmare. the web UI preview was completely broken. you’d hit play, and it would just flash and disappear. i was losing my mind trying to figure out why the terminal was instantly clearing itself.

turns out, the core engine’s TerminalSession was doing its job too well. when the animation finished, it sent the ANSI sequence to exit the alternate screen buffer, which is exactly what you want in a real terminal. but in xterm.js, exiting the alternate screen just leaves you with a blank black box!

had to wire up a --keep-screen flag all the way through the CLI architecture to intercept that sequence when running inside the web preview.

# src/clearfx/engine/terminal.py
def __exit__(self, exc_type, exc_val, exc_tb):
    if not self.keep_screen:
        # restore alternate screen
        self.write(b"\033[?1049l")

then there was the resizing bug. xterm.js was fitting to the container, but the PTY backend was hardcoded to 80x24. so it looked super misaligned. had to intercept term.cols and term.rows in React and pass them through the WebSocket JSON payload.

wsRef.current.send(JSON.stringify({ 
  type: 'run', 
  code, 
  width: termRef.current.cols, 
  height: termRef.current.rows 
}));

once the bugs were dead, i looked at the web UI and realized it looked like generic SaaS slop. huge glowing pills, purple gradients everywhere… it was dog shit.

so i nuked index.css entirely. built a custom design system inspired by factory.ai. pure dark operations console vibes. strictly monochrome, 8px spacing grid, geist monospace fonts for technical labels, and tiny orange/green signal dots instead of giant colored backgrounds.

/* replaced the generic slop with this */
:root {
  --bg-canvas: #101010;
  --bg-surface: #1D1A18;
  --border-hairline: #34312F;
  --signal-orange: #EE6018;
  --font-mono: 'Geist Mono', monospace;
}

the hero section now has a literal UI-in-UI terminal preview embedded in a custom .product-frame. the whole app feels like a precision engineering tool now, not a marketing page.

we finally shipped a safe, strictly declarative, gorgeous terminal engine.