
CyberCode & CyberRemote
Code has two realities — the functional output and the experience of creation. CyberCode transforms terminal operations into spatial, visual narratives. CyberRemote turns your phone into a remote control for background agents.
The Hard Problem
Terminal interfaces weren't designed for AI-assisted workflows. When you have multiple agents, tool calls, and context switches happening simultaneously, the linear terminal model breaks down. How do you visualise parallelism and memory in a fundamentally sequential interface?
The Why
Moving from 'syntax' to 'vibe coding' by replacing intimidating command lines with a spatial, immersive interface. I treat code execution as a visual experience, allowing users to interact with agents through expressive metaphors rather than raw text.
Design Decisions
- —Reality Translator: CLI operations become animated isometric visualizations — 10 building types (Forge, Laboratory, Battleground, Vault) with 3-tier complexity-based playback
- —Cyber Multiview: See multiple agent sessions running simultaneously — not hidden in tabs but visible side-by-side with shader visualizations responding to each agent's activity in real-time
- —Checkpoint Timeline: Git-like state snapshots with visual cursor — rollback entire project states, not just files
- —20+ Visualization Panels: Drag-and-drop dashboard with agent fleet, cost/token analytics, Timeline Flow, Network Graph, Metro Orchestration Map, Agent Density Field
Architecture
Architecture
Panels
20+ Visualizations
Multiview
Agent Sessions
Remote
Mobile Control
CyberRemote — The 'Game Boy' IDE
Mobile-first, fast tactile UI for controlling background agents from your phone.
- •Xterm terminals + Monaco editor + file browser with keyboard navigation
- •Sessions persist with custom icons, colors, names, and paths
- •Load entire project setups as configurations
- •SQLite + WebSockets for real-time state sync over Tailscale
- •Local Whisper voice commands via koshi-vox — free, private, low-latency
Agentic UI Focus
CyberCode doesn't contain agents — it's the interface layer for humans working with agents. Intentional exploration from VSCode UI buttons to fully custom interfaces:
React canvas dashboard with 20+ drag-and-drop visualizations
Simultaneous agent sessions with shader-based activity feedback
CyberRemote — project setups, multiple tabs, tactile controls
Links
Stack
Next.js 15 • React Three Fiber • Xterm.js • Monaco Editor • Zustand • SQLite • Whisper (Local)