OpenCode Spatial Canvas Plugin

A non-linear, spatial reasoning canvas for OpenCode. Break free from the linear chat window. This plugin transforms your local OpenCode environment into a visual reasoning workspace.

Powered by Directed Acyclic Graphs (DAGs), this plugin allows you to branch conversations, inject modular file context, route specific prompts to specialized AI agents, and visually navigate complex coding logic—all while staying perfectly synced with your OpenCode backend.

Core Features

• Non-Linear Branching (DAG): Explore multiple solutions to a coding problem simultaneously. Every node can branch into a new OpenCode session.
• Modular Context Nodes: Drag and drop local files onto the canvas to visually wire them into specific conversation branches.
• Agent & Mode Routing: Select specific OpenCode agents (e.g., Architect, Reviewer) or modes (Chat, Plan) for individual branches.
• Slash Command Interceptor: Execute OpenCode CLI commands directly from the canvas with an autocomplete menu.
• Mobile-First UX: Responsive bottom-sheet UI, native file uploads, and locked viewports for flawless touch navigation.
• Auto-Layout & Navigation: Powered by Dagre and Svelte Flow. Smooth camera panning, auto-centering, and keyboard-driven branch traversal.
• Real-time Streaming: Fast SSE streaming with auto-detected syntax highlighting.
• Obsidian Integration: Export your entire branched reasoning tree as an interactive .canvas file to your personal knowledge base.

Architecture & Tech Stack

This project utilizes a cleanly separated client-server architecture, managed entirely by devenv (Nix) for 100% reproducible environments.

• Frontend: SvelteKit + @xyflow/svelte (Svelte Flow) + Dagre

• Backend Bridge: Node.js/Express (OpenCode Plugin API)

• Environment: devenv with modular tasks and process management

• System Design

• Repository Structure

Getting Started

We use devenv to manage all dependencies (Node.js, npm) and lifecycle tasks. You do not need to install Node globally on your machine, but you will need to have devenv and nix installed.

Prerequisites

Install devenv and Nix on your system by following the official devenv getting started guide.

Clone & Initialize

Clone the repository and jump into the reproducible shell. devenv will automatically download the correct Node version and install all node_modules via startup tasks.

git clone [https://github.com/yourusername/opencode-canvas.git](https://github.com/yourusername/opencode-canvas.git)
cd opencode-canvas
devenv shell

Run the Development Environment

To start both the OpenCode backend and the Svelte frontend concurrently, simply run:

devenv up

• Frontend UI: http://localhost:5173
• OpenCode Backend: http://localhost:8000

Interactive Demo

Don't have OpenCode running yet? You can still explore the spatial UI, test the minimap navigation, and try the Obsidian export by launching the canvas in Demo Mode.

devenv tasks run frontend:dev

Then open your browser to: http://localhost:5173/?demo=true

Task Management

Our Nix environment is modularly split into frontend, backend, and testing files. We use devenv tasks to manage the dependency graph.

Available Commands:

• devenv tasks run frontend:build : Compiles the SvelteKit app for production.
• devenv tasks run backend:plugin : Runs the compiled plugin (waits for frontend build).
• devenv test : Runs the Vitest test suite.
• devenv tasks run test:watch : Runs Vitest in watch mode.

Note: Because tasks use a DAG, running frontend build will automatically ensure install has completed first.

Usage Guide

• Branching: Hover over any historical AI response and click "🌿 Branch from here". This spins up a parallel OpenCode session.
• File Context: Drag a text or code file from your OS directly onto the canvas (or use the mobile attachment button).
• Changing Agents: Use the dropdown in the bottom chat bar (or bottom sheet on mobile) to route your next prompt to a different agent.
• Commands: Type / in the chat bar to trigger the command menu.
• Navigation: Use ArrowUp and ArrowDown (when not typing) to swiftly climb up and down your conversation tree.
• Exporting: Click the 📥 button in the chat bar to save your session.

Contributing

Contributions are welcome! Since the environment is fully managed by Nix, you can be confident that if tests pass on your machine, they will pass in CI.

• Fork the project.
• Run devenv shell to get the exact tooling.
• Create your feature branch.
• Ensure devenv test passes.
• Open a Pull Request.