Strategic Roadmap

What: KSP (Kotlin Symbol Processing) plugin that scans the codebase at compile time and generates a GraphManifest.json containing all nodes, edges, ports, routes, metadata, source locations, and module boundaries.

Why: This is the bridge between the code and the visual tool. Without it, the graph is manually maintained. With it, the graph is always in sync with reality.

Deliverable: reaktor-graph-ksp module. Run ./gradlew :app:kspKotlin → generates build/graph-manifest.json with every node, edge, port, route, and source file location in the BestBuds app.

What: Close the remaining issues identified in the reaktor-flow analysis. Ensure edge rendering, node selection events, kind filtering, and zoom controls all work reliably.

Deliverable: All 10 GraphFlowIntegrationTest tests pass. Manual verification in Desktop app shows fully interactive graph editing with selection → inspector wiring.

What: Extend ReaktorWorkbench from 2 modes (Graph/App) to 5 modes (Graph/Run/DevTools/Deploy/Insights). Add mode toolbar, keyboard shortcuts (Cmd+1-5), responsive panel collapse.

Deliverable: WorkbenchState ViewModel in commonMain. All 5 modes accessible via toolbar and keyboard. Graph screen is fully functional (powered by reaktor-flow). Other 4 screens show placeholder content with correct layout.

What: "Open in IDE" buttons throughout the workbench. Click a node → open its source file in IntelliJ/VS Code at the exact line.

Deliverable: ProcessBuilder("idea", "--line", lineNum, filePath) on Desktop. jetbrains:// and vscode:// URI schemes on Web. Every entity with a source field in the manifest gets an "Open in IDE" action.

What: Replace the generic NodeDetailPanel with a type-dispatching system that renders specialized inspectors for each of the 8 node types + edge types. Port the 13 inspector bodies from the web prototype.

Each inspector follows the pattern: Header (type pill + name + source) → Section tabs (scroll-linked) → Sections (overview, metrics, connections, source, actions) → Footer actions (Open in Graph / IDE / Follow chain).

What: WYSIWYG preview with device frame. Extend existing ScreenPreviewPanel with DeviceFrame composable (phone/tablet/desktop chrome), bidirectional click-to-inspect via ReaktorComposeSemanticsInspector, and FloatingGraphLink card connecting selected UI element to its graph entity.

Unique advantage: The semantics inspector reads live CompositionData — no other tool can do this. You literally click a button in the running app and see its full action chain through the graph.

What: Causal trace waterfall. Collect PortInvocationEvents from the running graph and display as a Chrome DevTools-style trace rail. Each span shows entity type, name, duration bar, and is clickable to navigate to the graph node.

Data source: PortInvocationEvent listeners on the live graph. Initially mock data from the manifest; real events once the app is running in the preview panel.

Blast radius: Use BreadthFirstTraverser with ConnectivitySelector to compute N-hop blast radius from selected entity. Show entity count, module count, expandable list.

What: Topology view showing all deployment targets extracted from the graph's deploys edges. Partitioned by platform (Cloudflare Workers, D1, R2, KV, Queue, App Stores, JVM Server). CI pipeline visualization. Environment switcher (Local/Staging/Production).

Data source P2: Static topology from GraphManifest. CI status from mock data. Real integrations come in P4.

What: Analytics dashboard. Timeline chart with deploy markers. Route × metric heatmap. Metric summary cards (active users, response time, error rate). Time range selector (1h/24h/7d/30d).

Data source P2: Mock data. Real integrations come in P4.

What: Modal search across all entities, commands, and navigation targets. Fuzzy matching on name, type, module, source, tags. Arrow key navigation, Enter to select, Escape to close. ">" prefix for command mode.

Why now: This is the highest-impact single feature for making the tool feel professional. Every user (developer, PM, QA) uses search as their primary navigation.

What: Bottom drawer with 7 tabs: Traces, Logs, Agent, Diagnostics, Commands, Queue, CodeDiff. Resizable height. Tab switching via keyboard. The "Agent" tab is a placeholder in P2 — becomes the AI chat in P3.

What: The typed command hierarchy that represents every structural change to the application.

sealed interface GraphCommand {
    val id: String; val timestamp: Instant; val description: String

    data class AddNode(val type: NodeType, val name: String, val parent: String?)
    data class RemoveNode(val nodeId: String)
    data class ConnectPorts(val consumer: PortRef, val provider: PortRef)
    data class DisconnectPorts(val consumer: PortRef, val provider: PortRef)
    data class SetProperty(val entityId: String, val key: String, val value: JsonElement)
    data class CreateSubgraph(val name: String, val nodes: List<String>)
    data class MoveToContainer(val nodeId: String, val containerId: String)
    data class SetRoute(val routeId: String, val pattern: String)
    data class SetTransport(val edgeId: String, val transport: TransportMode)
    data class SetDeployTarget(val nodeId: String, val target: DeployTarget)
    data class AddInterceptor(val serviceId: String, val interceptor: InterceptorDef)
    data class SetUiProperty(val elementId: String, val prop: String, val value: JsonElement)
}

Why this matters: This is the structured protocol between the human/UI and the AI. Instead of "change the button color" → raw code, you get SetUiProperty(elementId="apple_button", prop="backgroundColor", value="#3fbf78") → the LLM knows exactly what to change, in which file, and can generate a precise diff.

What: The Queue drawer tab shows pending commands. Each command shows: type badge, description, affected entity, preview of what changes. Commands can be reordered, grouped into batches, or discarded. "Apply Batch" sends to LLM.

Persistence: Commands stored in reaktor-db SQLite: graph_commands(id, type, payload_json, timestamp, applied, batch_id). Full undo/redo history.

What: When the user clicks "Apply" on a command batch:

1. Context assembly: Serialize command batch + ReaktorGraphDocument + relevant source files (from entity source metadata)
2. LLM call: Send to Claude API with a system prompt describing Reaktor's conventions, node types, port patterns, and the project's coding style
3. CodeDiff generation: Receive unified diffs per file
4. Review UI: Show in CodeDiff drawer tab with syntax highlighting, accept/reject per hunk
5. Apply: Write approved diffs to project via file system (Desktop) or IDE bridge (Web)
6. Manifest regeneration: Trigger incremental rebuild of GraphManifest to reflect changes

What: The drawer's "Agent" tab. A Claude Code-style chat interface where the agent has full graph context via tools:

Conversation flow: "Add a caching layer to the AuthService" → agent reads graph, identifies AuthService and its downstream edges, generates [AddNode(type=ServiceNode, name="AuthCache"), ConnectPorts(AuthService.output, AuthCache.input), SetProperty(AuthCache, "ttl", 300)] → user reviews in Queue tab → Apply → LLM generates code → Review → Write to project.

What: Expose the graph as an MCP server so external tools (Cursor, Claude Code, Codex) can query and navigate it.

Why: This is the platform play. Instead of competing with AI IDEs, you feed them. A developer using Cursor can ask "what calls AuthService?" and Cursor queries Reaktor's MCP server to get the full connection graph. This makes Reaktor the architectural layer that all AI tools lack.

Endpoints: read_graph, find_entity, get_connections, get_blast_radius, get_traces, push_command

What: The Deploy screen shows live CI pipeline status from real providers.

Deploy actions: "Push to Staging" triggers a real Cloudflare Workers deployment. "Promote to Production" triggers a production deploy with confirmation. Status updates stream into the drawer's Logs tab.

What: The Insights screen shows real metrics from production infrastructure.

Graph-linked metrics: Every metric is attached to a graph entity. "cf.workers/auth has a p95 of 340ms" links to the edge entity in the graph. Click it → see the EdgeInspector → see the trace → see the downstream impact.

What: The agent doesn't just respond to questions — it monitors the system and surfaces anomalies. Like Codex's Automations, but graph-aware.

• "Your p95 on /onboarding spiked 40% after deploy rc-813. The change touched AuthInteractor → AuthService. Want me to trace it?"
• "3 new crash reports on OnboardingScreen since yesterday. All in the Apple login flow. AuthService.loginWithApple has a 12% error rate."
• "Your d1.sessions table grew 340% this week. Want me to add TTL-based cleanup to the sessions service?"

How: Background polling of telemetry APIs + threshold alerts + graph context to explain why something changed, not just that it changed.

What: Compile reaktor-workbench (commonMain) to Kotlin/JS + Compose canvas. Deploy to Cloudflare Workers. Same codebase, same features, accessible in a browser. Replaces the current React prototype at reaktor.build.

Platform-specific (jsMain): IndexedDB for SQLite, fetch wrapper for network, vscode:///jetbrains:// URI schemes for IDE bridge, Cloudflare Worker proxy for LLM API (CORS).

What: "Describe your app" → generate a full GraphManifest with nodes, edges, routes, services, screens, and deploy targets. The user sees the graph immediately, reviews it, and refines through the command pattern. Then "Apply" generates the entire project skeleton.

Why: This is Reaktor's answer to Bolt/Lovable/Emergent. But instead of a black box that produces code, you get a visible, editable graph that produces code. You understand what was generated. You can modify individual parts. You can trace it.

Flow:

• Shared graph state: Multiple users viewing the same graph, selections visible to others (like Figma cursors)
• Command review flow: Developer creates command batch → architect reviews → approve/reject → LLM generates code
• Entity annotations: Any user can annotate a graph entity with notes, screenshots, links. Annotations visible to all roles.
• Activity feed: "Alice deployed v812 to production" / "Bob modified AuthService" / "Agent detected p95 spike on /chat"

What: A plugin API that lets third parties add: new node types, new inspector bodies, new drawer tabs, new deploy targets, new telemetry sources, new MCP tools.

Examples:

• Firebase plugin: Adds Firestore/RTDB node types, Firebase Analytics telemetry source, Firebase Hosting deploy target
• AWS plugin: Adds Lambda/DynamoDB/S3 node types, CloudWatch telemetry, CDK deploy target
• Stripe plugin: Adds Payment node type with Stripe-specific inspector showing revenue metrics
• Sentry plugin: Adds crash reporting telemetry source, links stack traces to graph entities

What: Curated GraphManifest templates for common app patterns: social app, e-commerce, SaaS dashboard, chat app, marketplace. Each template is a pre-built graph with all nodes, edges, routes, services, and deploy targets. User selects template → sees graph → customizes via commands → Apply.

• SSO/SAML: Enterprise auth integration
• Audit log: Every command, every deploy, every agent interaction logged
• Compliance view: Which entities handle PII? Which services are exposed externally? Which databases store credentials?
• Custom deploy policies: "Production deploys require 2 approvals" enforced at the graph level
• Self-hosted option: Run the full workbench on-prem for regulated industries

KMP Developer — "I need to add Apple Pay to the checkout flow"

1. Open Reaktor Desktop. Graph screen shows the full BestBuds architecture.
2. Cmd+K → "checkout" → selects screen:CheckoutScreen.
3. Inspector shows: CheckoutScreen → PaymentInteractor → PaymentService → cf.workers/payment → stripe.api.
4. Click "Ask Agent" → "Add Apple Pay as a payment method alongside Stripe".
5. Agent reads graph, generates commands: AddNode(ServiceNode, "ApplePayService"), ConnectPorts(PaymentInteractor.output, ApplePayService.input), AddNode(EdgeNode, "apple.pay.api"), etc.
6. Review commands in Queue tab. Approve. Agent generates CodeDiff.
7. Review diff in CodeDiff tab. Accept. Code written to project. IntelliJ auto-refreshes.
8. Switch to Run screen. Preview shows new Apple Pay button. Click it → trace shows the full new action chain.
9. Switch to Deploy. CI shows tests passing. Click "Push to Staging".
10. Switch to Insights. 30 minutes later, see Apple Pay adoption rate in the heatmap.

Product Manager — "Why is onboarding conversion dropping?"

1. Open reaktor.build in browser (read-only PM view).
2. Insights screen shows: onboarding funnel conversion dropped 8% after deploy v812.
3. Click the deploy marker on the timeline → sees which entities changed in v812.
4. Click screen:OnboardingScreen → inspector shows crash-free rate dropped to 94%.
5. DevTools trace shows: loginWithApple action is timing out for 12% of users.
6. PM annotates the entity: "Investigate Apple login timeout — blocking 8% conversion drop".
7. Annotation appears in the developer's Reaktor Desktop immediately.

DevOps — "Is it safe to promote v813 to production?"

1. Open Deploy screen. See staging environment: all CI steps passed, 3 workers updated.
2. Click "cf.workers/auth" in topology → EdgeInspector shows: p95 on staging = 142ms (within SLA), error rate = 0.3% (below threshold).
3. Click "Blast radius" → shows 14 entities across 6 modules affected by this deploy.
4. Check Insights for staging metrics: all green after 2 hours of soak time.
5. Click "Promote to Production" → confirms → production deploy starts → status streams into Logs tab.

Phase 1-2: Developer-First (Weeks 0-16)

• Target: KMP developers (growing community, ~100K developers by 2026)
• Channel: Open-source the graph modules (reaktor-graph, reaktor-graph-port, reaktor-flow). The workbench is the commercial product.
• Hook: "See your entire KMP app as a navigable graph. Click a button → trace to the database." Demo with BestBuds as the reference app.
• Pricing: Free for individual developers. $29/mo for IDE bridge + inspector + deploy screen.

Phase 3-4: AI-Powered Development (Weeks 16-32)

• Target: Teams adopting AI-assisted development
• Channel: Integration announcements with Claude Code, Cursor, Codex via MCP. "The architectural layer your AI IDE is missing."
• Hook: "Your AI generates code. Reaktor tells it what code to generate." Show command → LLM → CodeDiff pipeline.
• Pricing: $79/mo per seat for AI features (command pattern, agent, MCP server). Usage-based for LLM API calls.

Phase 5-6: Platform for Teams (Weeks 32-60)

• Target: Product teams (5-50 people) building production apps
• Channel: PM/QA/DevOps access as free readers. Developers pay for edit access. Enterprise sales for large teams.
• Hook: "One tool for your entire team — from the developer writing code to the PM reading analytics."
• Pricing: $29/mo readers, $79/mo editors, $199/mo enterprise seats. Custom pricing for self-hosted.