CyberCode & CyberRemote

What does an IDE look like when agents are the primary users? CyberCode explores agentic UI — visualization panels, multi-agent views, and terminal workflows. CyberRemote extends it to mobile: an IDE for controlling background agents from your phone.

The Challenge

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 visual, immersive interfaces. I treat code execution as a visual experience, allowing users to interact with agents through expressive metaphors rather than raw text. Built from my own workflow pain points — I used Claude Code to develop custom setups solving real friction in daily use. The platform's flexibility enabled rapid iteration. This is ongoing research — several iterations, not fully solved. Both CyberCode panels and CyberRemote have working demos.

Design Decisions

• —Reality Translator: CLI operations become animated isometric visualisations — 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 visualisations 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+ Visualisation Panels: Drag-and-drop dashboard with agent fleet, cost/token analytics, Timeline Flow, Network Graph, Metro Orchestration Map, Agent Density Field
• —Ongoing Research: Several iterations exploring what UI patterns work when agents are collaborators. CyberRemote is the working piece — visualisation panels and multi-agent views remain exploratory.

Architecture

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

Design Research Journey

This project is self-directed UX research — I'm both the user and the designer, iterating toward the best interface for agentic workflows. Each iteration responds to how Claude Code actually gets used — a moving target as Anthropic ships features fast. The research question isn't solved, but the exploration is the value. Process documentation shows how each iteration informed the next.

1VSCode Extension

Claude Code inspired me to experiment with IDE modification, started in VSCode footer. Created panel with slash commands grouped by function, targeting Claude Code sessions, voice mode via local Whisper (open source). Streamlining workflow and making it feel more tactile and personal.

2React Canvas

Modular panels — allowed freedom unlike VSCode. IDE broken into individual components (editor, terminal, file browser) connected via WebSockets. Data visualisation tools for agent analytics. Flexible UI/UX, but might work for limited audience only.

3CyberRemote IDE

Realised a remote version would be valuable for on-the-go access to repos. Used Tailscale for secure connections. Mobile-first terminal with customizable sessions — name, color, icon per tab. Projects allow saving and loading terminal setups. Voice mode via local Whisper. Utility buttons for fast tactile control.

4Isometric Maps

Reality Translator — as one of the panels, exploring data visualisation for agent analytics. Mapping CLI operations to visual metaphors. Progress and token tracking visualised as city building. Exploratory.

5Multiple Chat Views

Desktop iteration from CyberRemote — side-by-side Claude Code agent sessions with status indicators. Translating terminal output into readable UI. Current direction allows seeing all sessions at once, responding to agents and reviewing work faster.

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:

Links