Octonode Extended Roadmap — Studio & Ecosystem (Archived)

This historical roadmap predates the TypeScript-only release and does not describe supported runtimes.

Phases 1–5 delivered the engine (polyglot nodes, .octonode config, DAG execution, worker mode, CLI). This roadmap covers the next two tracks, built incrementally with confirmation between phases, exactly as before.

• Track A — Octonode Studio: a web app (React + Vite + React Flow) to visualize, run, and edit workflows — an n8n-inspired node canvas with our own design system and original components.
• Track B — Ecosystem: a plugin system (language-agnostic manifest folders), a marketplace, and IDE-agent tooling (MCP server + skill) to author plugins.

Locked decisions: canvas = @xyflow/react; web↔engine bridge = octonode serve (HTTP + WebSocket); plugin = folder + octonode.plugin.json manifest; Studio order = visualize + live runs before editing.

Constraint: this environment has flaky offline networking. Heavy web deps (React, Vite, @xyflow/react) install slowly/unreliably from the registry; each web phase begins by securing deps (registry or local cache) before coding.

Architecture additions

apps/
  studio/          React + Vite + TS app (Octonode Studio)  ← Track A
packages/
  server/          @octonode/server — HTTP + WebSocket API over core  ← Track A
  plugin/          @octonode/plugin — manifest schema + loader/registry ← Track B
  mcp/             @octonode/mcp — MCP server for agent-driven plugin authoring ← Track B
plugins/
  jira/ langgraph/ …  example/first-party plugins (manifest folders)  ← Track B

The Studio is a client: it never touches the filesystem or spawns processes. @octonode/server exposes the existing core APIs (config load/save, scan, run with streamed RunEvents) over HTTP+WS; the Studio consumes them.

Design system (Octonode Studio)

An original, dark-first system inspired by the common node-editor UX.

• Brand: "Octonode Studio". Octopus/ink motif.
• Palette: ink bg #0B0E14, surface #131722, raised #1B2130, border #2A3142, text #E6EAF2/muted #8B93A7, primary accent teal #14B8A6, states success #22C55E / running #3B82F6 / error #EF4444 / skipped #6B7280. Node accent: typescript #3178C6.
• Type: Inter (UI), JetBrains Mono (code/JSON). Modular spacing (4px base), radii (cards 12px, controls 8px), soft shadows for raised surfaces.
• Layout:
  • Top bar: logo, workflow selector, environment selector, Run, Save.
  • Left rail: icon nav — Workflows, Nodes, Marketplace, Runs, Settings.
  • Canvas: dotted-grid, pan/zoom, minimap (bottom-right), controls (zoom/fit).
  • Right inspector: contextual panel (node details, config, run output).
• Node card: rounded card with a left color accent by language; header = icon + id + language badge; input ports (left) and output ports (right), labeled; a status ring (idle/running/ok/error/skipped) during a run.
• Core components: Button/IconButton, Panel, Badge, Tabs, Select, Input, Tooltip, Toast, StatusDot, JsonViewer, EnvPicker.

Track A — Octonode Studio

Phase 6 — Studio foundation

Goal: a running Vite + React + TS app with the design system and app shell (no backend; mock data). Build: apps/studio scaffold; design tokens + base components; app-shell layout (top bar, left rail, canvas placeholder, inspector); client routing; a typed API-client stub returning fixtures. Demo: npm run dev -w @octonode/studio shows the branded shell with mock workflows.

Phase 7 — octonode serve (the bridge)

Goal: a local API the Studio talks to. Build: @octonode/server (HTTP + WS, minimal/zero-dep using node:http + a tiny WS impl or ws) over core: GET /api/config, /api/workflows, /api/workflows/:id/graph, POST /api/scan, POST /api/workflows/:id/run → WebSocket stream of RunEvents, GET /api/runs. CLI octonode serve [--port] [--config]. CORS for dev. Demo: octonode serve + curl /api/workflows returns the demo workflows; a WS run streams node events.

Phase 8 — Canvas visualization (read-only)

Goal: see real workflows as a graph. Build: Studio loads workflows from the API; React Flow canvas with custom node

• edge components (icons, language accents, labeled ports); auto-layout (dagre); pan/zoom/minimap/fit; workflow switcher. Demo: open Studio → pick etl / fan-out-fan-in → the DAG renders with ports and edges.

Phase 9 — Live execution

Goal: run a workflow from the UI and watch it. Build: Run triggers POST /run; subscribe to the WS stream; animate node status (idle→running→ok/error/skipped) on the canvas; inspector shows per-node inputs/outputs/ errors; run history list; replay a node from a recorded run. Demo: click Run on resilient → watch boom retry/fail and after skip live; open a run; replay transform.

Phase 10 — Node inspector + config editing (write-back)

Goal: edit config-owned fields safely. Build: inspector tabs to edit runtime (timeout/retries/concurrency), presentation (icon/color), and environments; PATCH via API; signature stays read-only; drift surfaced; Save writes .octonode (format preserved). Demo: change a node's timeout + icon in Studio → .octonode updates; signature untouched.

Phase 11 — Editor + node palette

Goal: build workflows visually. Build: node palette (project nodes + installed plugin nodes); drag to add; draw/delete edges; move/persist presentation.position; create/rename workflows; topology written back to .octonode (config-owned) with validation. Demo: drag three nodes, wire them, Save → octonode run <new-workflow> executes it.

Track B — Ecosystem & plugins

Phase 12 — Plugin architecture + loader

Goal: define and load plugins. Build: @octonode/plugin — octonode.plugin.json manifest schema (id, name, version, description, icon, nodes[] with command/inputs/outputs, integration metadata) + a loader that discovers plugins (project ./octonode_plugins, ~/.octonode/plugins); plugin nodes become first-class sources/nodes. CLI: octonode plugin list|install <path|url>|remove. Demo: drop a local plugin folder, octonode plugin list shows it, its nodes run via invoke/run.

Phase 13 — Plugin scaffolding + first plugins

Goal: anyone can create a plugin with one command. Build: octonode plugin create <name> (a.k.a. octonode ecosystem create) generating a manifest + TypeScript node template; first-party example plugins jira and langgraph under plugins/. Demo: octonode plugin create my-thing --lang typescript scaffolds a runnable plugin; jira/langgraph nodes describe + run.

Phase 14 — Marketplace

Goal: discover and share plugins. Build: a marketplace index (JSON registry, file/URL-based to start); octonode plugin search|publish|install <id>; Studio Marketplace view to browse + install (integrations like jira/langgraph shown as cards). Demo: octonode plugin search jira → install → it appears in Studio's palette.

Phase 15 — IDE-agent authoring (MCP + skill)

Goal: let coding agents create/update plugins anywhere. Build: @octonode/mcp — an MCP server exposing tools (create_plugin, add_node, update_plugin, validate_plugin, publish_plugin) usable by any MCP client (Claude Code, Cursor, …); a Claude Code skill for plugin authoring; docs for other agents. Demo: an agent calls the MCP create_plugin tool → a valid plugin appears and loads in the CLI.

Verification (per phase)

• The phase's Demo line is the acceptance test, run end-to-end.
• Unit tests (node:test) for server endpoints, plugin manifest/loader, and MCP tools.
• Studio: component/interaction sanity + a smoke test that the build serves and the canvas renders a known workflow.
• Keep the dependency surface minimal; document any package added and why.