feat(FN-3155): add createAiSession plugin context API with DI wiring

This merge brings FN-3155's plugin `createAiSession` API (types, DI hooks, engine adapter, context wiring, docs, and tests), FN-3056's task title sanitization, and FN-3129's tokenized footer and mobile initialization for MissionManager. It also adds CentralCore Docker node management, a new AddNodeM

Fusion-Task-Id: FN-3155

.changeset/fn-3155-plugin-create-ai-session.md

@@ -0,0 +1,5 @@
+---
+"@runfusion/fusion": minor
+---
+
+Add `createAiSession` to `PluginContext` so plugins can create AI sessions through an engine-injected factory without importing `@fusion/engine` directly.

docs/PLUGIN_AUTHORING.md

@@ -717,6 +717,7 @@ interface PluginContext {
   settings: Record<string, unknown>;
   logger: PluginLogger;
   emitEvent: (event: string, data: unknown) => void;
+  createAiSession?: CreateAiSessionFactory;
 }
 ```
 
@@ -729,6 +730,7 @@ interface PluginContext {
 | `settings` | `Record<string, unknown>` | User configuration (merged with defaults) |
 | `logger` | `PluginLogger` | Structured logging |
 | `emitEvent` | `(event, data) => void` | Emit custom events |
+| `createAiSession` | `CreateAiSessionFactory \| undefined` | Engine-injected AI session factory (undefined when engine isn't loaded) |
 
 ### Logger Methods
 
@@ -741,6 +743,55 @@ interface PluginLogger {
 }
 ```
 
+### `createAiSession` API
+
+```typescript
+interface CreateAiSessionOptions {
+  cwd: string;
+  systemPrompt: string;
+  tools?: "coding" | "readonly";
+  defaultProvider?: string;
+  defaultModelId?: string;
+}
+
+interface AiSessionResult {
+  session: {
+    prompt(text: string): Promise<void>;
+    state: { messages: Array<{ role: string; content?: unknown }> };
+  };
+  sessionFile?: string;
+}
+
+type CreateAiSessionFactory = (
+  options: CreateAiSessionOptions,
+) => Promise<AiSessionResult>;
+```
+
+The factory is dependency-injected by the engine at runtime. In test-only or core-only environments where the engine module is not loaded, `ctx.createAiSession` is `undefined`, so guard before calling it.
+
+### Example: Using `ctx.createAiSession()`
+
+```typescript
+hooks: {
+  onLoad: async (ctx) => {
+    if (!ctx.createAiSession) {
+      ctx.logger.warn("AI session factory unavailable; engine not loaded");
+      return;
+    }
+
+    const { session } = await ctx.createAiSession({
+      cwd: process.cwd(),
+      systemPrompt: "You are a release assistant for this plugin.",
+      tools: "readonly",
+    });
+
+    await session.prompt("Summarize what this plugin contributes.");
+    const latest = session.state.messages.at(-1);
+    ctx.logger.info("AI summary generated", latest);
+  },
+},
+```
+
 ### Example: Using the Context
 
 ```typescript

packages/core/src/__tests__/ai-engine-loader.test.ts

@@ -0,0 +1,66 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  getCreateAiSessionFactory,
+  getFnAgent,
+  setCreateAiSessionFactory,
+  setCreateFnAgent,
+} from "../ai-engine-loader.js";
+import type { CreateAiSessionFactory } from "../plugin-types.js";
+
+describe("ai-engine-loader", () => {
+  beforeEach(() => {
+    setCreateFnAgent(undefined);
+    setCreateAiSessionFactory(undefined);
+  });
+
+  it("returns undefined createAiSession factory before registration", async () => {
+    await expect(getCreateAiSessionFactory()).resolves.toBeUndefined();
+  });
+
+  it("stores and returns createAiSession factory", async () => {
+    const factory: CreateAiSessionFactory = vi.fn(async () => ({
+      session: {
+        prompt: async () => {},
+        state: { messages: [] },
+      },
+    }));
+
+    setCreateAiSessionFactory(factory);
+
+    await expect(getCreateAiSessionFactory()).resolves.toBe(factory);
+  });
+
+  it("clears createAiSession factory when set to undefined", async () => {
+    setCreateAiSessionFactory(async () => ({
+      session: {
+        prompt: async () => {},
+        state: { messages: [] },
+      },
+    }));
+
+    setCreateAiSessionFactory(undefined);
+
+    await expect(getCreateAiSessionFactory()).resolves.toBeUndefined();
+  });
+
+  it("does not interfere with createFnAgent registration", async () => {
+    const fnAgent = vi.fn();
+    const factory: CreateAiSessionFactory = vi.fn(async () => ({
+      session: {
+        prompt: async () => {},
+        state: { messages: [] },
+      },
+    }));
+
+    setCreateFnAgent(fnAgent);
+    setCreateAiSessionFactory(factory);
+
+    await expect(getFnAgent()).resolves.toBe(fnAgent);
+    await expect(getCreateAiSessionFactory()).resolves.toBe(factory);
+
+    setCreateAiSessionFactory(undefined);
+
+    await expect(getFnAgent()).resolves.toBe(fnAgent);
+    await expect(getCreateAiSessionFactory()).resolves.toBeUndefined();
+  });
+});

packages/core/src/__tests__/plugin-loader.test.ts

@@ -5,7 +5,8 @@ import { mkdtempSync, existsSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { PluginLoader } from "../plugin-loader.js";
 import { PluginStore } from "../plugin-store.js";
-import type { FusionPlugin, PluginManifest } from "../plugin-types.js";
+import { setCreateAiSessionFactory } from "../ai-engine-loader.js";
+import type { CreateAiSessionOptions, FusionPlugin, PluginManifest } from "../plugin-types.js";
 
 // Test plugin manifest
 function makeManifest(overrides: Partial<PluginManifest> = {}): PluginManifest {
@@ -147,11 +148,13 @@ describe("PluginLoader", () => {
   beforeEach(() => {
     rootDir = makeTmpDir();
     pluginStore = new PluginStore(rootDir, { inMemoryDb: true });
+    setCreateAiSessionFactory(undefined);
   });
 
   afterEach(async () => {
     const { rm } = await import("node:fs/promises");
     await rm(rootDir, { recursive: true, force: true });
+    setCreateAiSessionFactory(undefined);
     vi.clearAllMocks();
   });
 
@@ -990,6 +993,85 @@ describe("PluginLoader", () => {
     });
   });
 
+  describe("createAiSession plugin context injection", () => {
+    it("createContext includes createAiSession when factory is registered", async () => {
+      const loader = new PluginLoader({ pluginStore, taskStore: mockTaskStore });
+      const factory = vi.fn(async () => ({
+        session: { prompt: async () => {}, state: { messages: [] } },
+      }));
+      setCreateAiSessionFactory(factory);
+
+      const context = await (loader as any).createContext(makePlugin(makeManifest({ id: "ctx-ai" })));
+
+      expect(context.createAiSession).toBe(factory);
+    });
+
+    it("createContext sets createAiSession to undefined when no factory is registered", async () => {
+      const loader = new PluginLoader({ pluginStore, taskStore: mockTaskStore });
+
+      const context = await (loader as any).createContext(makePlugin(makeManifest({ id: "ctx-no-ai" })));
+
+      expect(context).toHaveProperty("createAiSession");
+      expect(context.createAiSession).toBeUndefined();
+    });
+
+    it("createAiSession calls through to underlying factory with provided options", async () => {
+      const loader = new PluginLoader({ pluginStore, taskStore: mockTaskStore });
+      const factory = vi.fn(async () => ({
+        session: { prompt: async () => {}, state: { messages: [] } },
+      }));
+      setCreateAiSessionFactory(factory);
+
+      const context = await (loader as any).createContext(makePlugin(makeManifest({ id: "ctx-call-through" })));
+      const options: CreateAiSessionOptions = {
+        cwd: rootDir,
+        systemPrompt: "You are a plugin test agent",
+        tools: "readonly",
+        defaultProvider: "anthropic",
+        defaultModelId: "claude-sonnet",
+      };
+
+      await context.createAiSession?.(options);
+
+      expect(factory).toHaveBeenCalledWith(options);
+      expect(factory).toHaveBeenCalledTimes(1);
+    });
+
+    it("allows plugin onLoad to call ctx.createAiSession and receive a result", async () => {
+      await pluginStore.init();
+
+      const pluginId = "onload-create-ai-session";
+      const pluginDir = join(rootDir, "plugins");
+      const pluginPath = await writePluginWithHooks(
+        pluginDir,
+        "onload-create-ai-session.js",
+        {
+          onLoad:
+            "(async (ctx) => { const result = await ctx.createAiSession({ cwd: process.cwd(), systemPrompt: 'test prompt' }); if (!result?.session?.state?.messages) throw new Error('missing session result'); })",
+        },
+        makeManifest({ id: pluginId }),
+      );
+
+      await pluginStore.registerPlugin({
+        manifest: makeManifest({ id: pluginId }),
+        path: pluginPath,
+      });
+
+      setCreateAiSessionFactory(async () => ({
+        session: {
+          prompt: async () => {},
+          state: { messages: [{ role: "assistant", content: "ok" }] },
+        },
+        sessionFile: join(rootDir, "session.json"),
+      }));
+
+      const loader = new PluginLoader({ pluginStore, taskStore: mockTaskStore });
+      const plugin = await loader.loadPlugin(pluginId);
+
+      expect(plugin.state).toBe("started");
+    });
+  });
+
   // ── getPluginTools ─────────────────────────────────────────────────
 
   describe("getPluginTools", () => {

packages/core/src/__tests__/plugin-types.test.ts

@@ -1,5 +1,12 @@
 import { describe, it, expect } from "vitest";
+import { mkdtempSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { PluginLoader } from "../plugin-loader.js";
+import { PluginStore } from "../plugin-store.js";
 import type {
+  CreateAiSessionFactory,
+  CreateAiSessionOptions,
   FusionPlugin,
   PluginPromptContribution,
   PluginPromptContributions,
@@ -1241,3 +1248,50 @@ describe("validatePluginManifest contribution metadata", () => {
     expect(result.errors).toContain("setup.description is required and must be a non-empty string");
   });
 });
+
+describe("CreateAiSession types", () => {
+  it("supports CreateAiSessionOptions with required cwd and systemPrompt", () => {
+    const options: CreateAiSessionOptions = {
+      cwd: "/tmp/project",
+      systemPrompt: "You are a plugin helper",
+    };
+
+    expect(options.cwd).toBe("/tmp/project");
+    expect(options.systemPrompt).toContain("plugin");
+  });
+
+  it("supports CreateAiSessionFactory and AiSessionResult structural shape", async () => {
+    const factory: CreateAiSessionFactory = async (options) => ({
+      session: {
+        prompt: async () => {
+          void options.systemPrompt;
+        },
+        state: { messages: [{ role: "assistant", content: "hello" }] },
+      },
+      sessionFile: join(options.cwd, "session.json"),
+    });
+
+    const result = await factory({ cwd: "/tmp/project", systemPrompt: "prompt" });
+    expect(result.session.state.messages[0]?.role).toBe("assistant");
+    expect(result.sessionFile).toContain("session.json");
+  });
+
+  it("createContext runtime includes createAiSession field", async () => {
+    const rootDir = mkdtempSync(join(tmpdir(), "kb-plugin-types-test-"));
+    const pluginStore = new PluginStore(rootDir, { inMemoryDb: true });
+    const loader = new PluginLoader({
+      pluginStore,
+      taskStore: { getRootDir: () => rootDir } as any,
+    });
+
+    const context = await (loader as any).createContext({
+      manifest: { id: "runtime-field-test", name: "Runtime", version: "1.0.0" },
+      state: "installed",
+      hooks: {},
+      tools: [],
+      routes: [],
+    } as FusionPlugin);
+
+    expect(context).toHaveProperty("createAiSession");
+  });
+});

packages/core/src/ai-engine-loader.ts

@@ -10,12 +10,15 @@
  * returns `undefined` and callers degrade gracefully.
  */
 
+import type { CreateAiSessionFactory } from "./plugin-types.js";
+
 // Engine exports a function type we intentionally don't pull in here — importing
 // the type would reintroduce the cycle this module is designed to avoid.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type CreateFnAgent = any;
 
 let createFnAgent: CreateFnAgent | undefined;
+let createAiSessionFactory: CreateAiSessionFactory | undefined;
 
 /** Shape of a message in an agent session's state. */
 export interface AgentMessage {
@@ -38,3 +41,19 @@ export function setCreateFnAgent(fn: CreateFnAgent | undefined): void {
 export async function getFnAgent(): Promise<CreateFnAgent> {
   return createFnAgent;
 }
+
+/**
+ * Wire engine's plugin-facing AI session factory into core.
+ * Called by `@fusion/engine` at module load; tests may register stubs.
+ */
+export function setCreateAiSessionFactory(fn: CreateAiSessionFactory | undefined): void {
+  createAiSessionFactory = fn;
+}
+
+/**
+ * Returns engine-registered plugin AI session factory, or `undefined` when
+ * engine hasn't registered it (common in isolated core tests).
+ */
+export async function getCreateAiSessionFactory(): Promise<CreateAiSessionFactory | undefined> {
+  return createAiSessionFactory;
+}

packages/core/src/index.ts

@@ -147,6 +147,9 @@ export type {
   PluginRuntimeFactory,
   PluginRuntimeRegistration,
   PluginContext,
+  CreateAiSessionOptions,
+  AiSessionResult,
+  CreateAiSessionFactory,
   PluginLogger,
   PluginSkillContribution,
   PluginWorkflowStepContribution,

packages/core/src/plugin-loader.ts

@@ -35,6 +35,7 @@ import type {
 } from "./plugin-types.js";
 import { validatePluginManifest } from "./plugin-types.js";
 import { createLogger } from "./logger.js";
+import { getCreateAiSessionFactory } from "./ai-engine-loader.js";
 
 // Minimum Fusion version for plugin compatibility checks (can be expanded later)
 const MINIMUM_FUSION_VERSION = "0.1.0";
@@ -108,11 +109,21 @@ export class PluginLoader extends EventEmitter<{
   // ── Context Creation ───────────────────────────────────────────────
 
   private async createContext(plugin: FusionPlugin): Promise<PluginContext> {
+    const createAiSession = await getCreateAiSessionFactory();
+    if (process.env.DEBUG?.includes("plugins")) {
+      log.log(
+        createAiSession
+          ? `[plugin:${plugin.manifest.id}] createAiSession available`
+          : `[plugin:${plugin.manifest.id}] createAiSession unavailable`,
+      );
+    }
+
     return {
       pluginId: plugin.manifest.id,
       taskStore: this.options.taskStore,
       settings: await this.getPluginSettings(plugin.manifest.id),
       logger: this.createLogger(plugin.manifest.id),
+      createAiSession,
       emitEvent: (event: string, data: unknown) => {
         this.emit("plugin:error", { pluginId: plugin.manifest.id, error: new Error(`Custom event: ${event}`) });
         // Custom events are logged but not surfaced as errors

packages/core/src/plugin-types.ts

@@ -79,6 +79,46 @@ export interface PluginSettingSchema {
 
 // ── Plugin Hooks ─────────────────────────────────────────────────────
 
+/**
+ * Options for creating an AI session from plugin runtime context.
+ * This is a focused subset of engine agent options exposed to plugin authors.
+ */
+export interface CreateAiSessionOptions {
+  /** Working directory for the agent session */
+  cwd: string;
+  /** System prompt for the agent */
+  systemPrompt: string;
+  /** Tool mode: "coding" for full tools, "readonly" for read-only */
+  tools?: "coding" | "readonly";
+  /** Default model provider (e.g., "anthropic") */
+  defaultProvider?: string;
+  /** Default model ID within the provider */
+  defaultModelId?: string;
+}
+
+/**
+ * Result returned from creating an AI session through PluginContext.
+ */
+export interface AiSessionResult {
+  /** The underlying agent session — plugins call .prompt() on it */
+  session: {
+    prompt(text: string): Promise<void>;
+    state: {
+      messages: Array<{
+        role: string;
+        content?: unknown;
+      }>;
+    };
+  };
+  /** Path to persisted session file, if any */
+  sessionFile?: string;
+}
+
+/**
+ * Engine-injected factory for plugin AI sessions.
+ */
+export type CreateAiSessionFactory = (options: CreateAiSessionOptions) => Promise<AiSessionResult>;
+
 /**
  * Context object passed to plugins at runtime.
  * Contains task store access, settings, logging, and event emission.
@@ -93,6 +133,8 @@ export interface PluginContext {
   logger: PluginLogger;
   /** Emit custom events */
   emitEvent: (event: string, data: unknown) => void;
+  /** Engine-injected AI session factory (undefined when engine is not loaded) */
+  createAiSession?: CreateAiSessionFactory;
 }
 
 /**

packages/dashboard/app/components/Header.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, useMemo, type KeyboardEvent as ReactKeyboardEvent } from "react";
-import { Settings, Pause, Play, Square, LayoutGrid, List, Terminal, Lightbulb, Search, X, Activity, MoreHorizontal, Clock, Folder, History, GitBranch, Monitor, Server, Workflow, Bot, Target, ChevronRight, FileCode, Loader2, Grid3X3, Mail, MessageSquare, ChevronDown, Check, Map, Zap, Sparkles, FileText, Brain, CheckSquare } from "lucide-react";
+import { Settings, Pause, Play, Square, LayoutGrid, List, Terminal, Lightbulb, Search, X, Activity, MoreHorizontal, Clock, Folder, History, GitBranch, Monitor, Server, Workflow, Bot, Target, ChevronRight, FileCode, Loader2, Grid3X3, Mail, MessageSquare, ChevronDown, Check, Zap, Sparkles, FileText, Brain, CheckSquare } from "lucide-react";
 import "./Header.css";
 // Header renders an inline ProjectSelector dropdown using project-selector-* classes.
 import "./ProjectSelector.css";
@@ -338,19 +338,24 @@ export function Header({
     return Object.entries(overflowScripts).sort(([a], [b]) => a.localeCompare(b));
   }, [overflowScripts]);
 
+  const hasRoadmapsPluginView = useMemo(
+    () => pluginDashboardViews.some((entry) => entry.pluginId === "fusion-plugin-roadmap"),
+    [pluginDashboardViews],
+  );
+
   const hasViewOverflowItems = useMemo(() => {
     return !!(
       experimentalFeatures?.researchView ||
       todosEnabled ||
       experimentalFeatures?.insights ||
-      experimentalFeatures?.roadmap ||
+      (experimentalFeatures?.roadmap && !hasRoadmapsPluginView) ||
       showSkillsTab ||
       experimentalFeatures?.memoryView ||
       experimentalFeatures?.devServerView ||
       !hideFullNav ||
       pluginDashboardViews.some((entry) => entry.view.placement !== "primary")
     );
-  }, [experimentalFeatures, todosEnabled, showSkillsTab, hideFullNav, pluginDashboardViews]);
+  }, [experimentalFeatures, todosEnabled, showSkillsTab, hideFullNav, pluginDashboardViews, hasRoadmapsPluginView]);
 
   const getEffectiveViewport = useCallback(() => {
     const vv = window.visualViewport;
@@ -1189,7 +1194,7 @@ export function Header({
                         <span>Insights</span>
                       </button>
                     )}
-                    {experimentalFeatures?.roadmap && (
+                    {experimentalFeatures?.roadmap && !hasRoadmapsPluginView && (
                       <button
                         className={`view-toggle-overflow-item${view === "roadmaps" ? " active" : ""}`}
                         onClick={() => {
@@ -1199,7 +1204,6 @@ export function Header({
                         role="menuitem"
                         data-testid="view-overflow-roadmaps"
                       >
-                        <Map size={14} />
                         <span>Roadmaps</span>
                       </button>
                     )}

packages/dashboard/app/components/MobileNavBar.tsx

@@ -188,7 +188,8 @@ export function MobileNavBar({
 
   const planningHandler = activePlanningSessionCount > 0 && onResumePlanning ? onResumePlanning : onOpenPlanning;
 
-  const roadmapEnabled = Boolean(experimentalFeatures?.roadmap);
+  const hasRoadmapsPluginView = pluginDashboardViews.some((entry) => entry.pluginId === "fusion-plugin-roadmap");
+  const roadmapEnabled = Boolean(experimentalFeatures?.roadmap) && !hasRoadmapsPluginView;
   const skillsEnabled = Boolean(showSkillsTab);
   const todoViewEnabled = Boolean(experimentalFeatures?.todoView);
 

packages/dashboard/app/components/RoadmapsView.css

@@ -23,6 +23,52 @@
   margin-top: 4px;
 }
 
+.roadmaps-view__handoff-intro,
+.roadmaps-view__handoff-error,
+.roadmaps-view__handoff-section {
+  margin-bottom: var(--space-lg);
+}
+
+.roadmaps-view__handoff-empty-state,
+.roadmaps-view__handoff-loading-state {
+  text-align: center;
+  padding: var(--space-xl);
+}
+
+.roadmaps-view__handoff-button-icon {
+  margin-right: var(--space-sm);
+}
+
+.roadmaps-view__handoff-loading-text {
+  margin-top: var(--space-md);
+}
+
+.roadmaps-view__handoff-section-title {
+  margin-bottom: var(--space-sm);
+}
+
+.roadmaps-view__handoff-card {
+  padding: var(--space-md);
+}
+
+.roadmaps-view__handoff-pre {
+  white-space: pre-wrap;
+  font-size: 0.75rem;
+  overflow: auto;
+}
+
+.roadmaps-view__handoff-pre--mission {
+  max-height: 200px;
+}
+
+.roadmaps-view__handoff-pre--features {
+  max-height: 300px;
+}
+
+.roadmaps-view__handoff-copy-icon {
+  margin-right: var(--space-xs);
+}
+
 /* Sidebar */
 .roadmaps-view__sidebar {
   width: 280px;
@@ -56,9 +102,9 @@
   border: none;
   border-radius: var(--radius-sm);
   background: var(--accent);
-  color: white;
+  color: var(--cta-text);
   cursor: pointer;
-  transition: opacity 0.15s;
+  transition: opacity var(--transition-fast);
 }
 
 .roadmaps-view__add-btn:hover {
@@ -85,7 +131,7 @@
   padding: var(--space-sm) var(--space-md);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background 0.15s;
+  transition: background var(--transition-fast);
   gap: var(--space-sm);
 }
 
@@ -124,15 +170,15 @@
   display: flex;
   gap: 2px;
   opacity: 0;
-  transition: opacity 0.15s;
+  transition: opacity var(--transition-fast);
 }
 
 .roadmaps-view__sidebar-item:hover .roadmaps-view__sidebar-item-actions {
   opacity: 1;
 }
 
-/* Icon button as span for nested element avoidance */
+/* Icon buttons */
-.roadmaps-view__icon-btn[role="button"] {
+.roadmaps-view__icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -143,52 +189,22 @@
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition: background var(--transition-fast), color var(--transition-fast);
-}
-
-.roadmaps-view__icon-btn[role="button"]:hover {
-  background: var(--surface-hover);
-  color: var(--text-primary);
-}
-
-.roadmaps-view__icon-btn--danger[role="button"]:hover {
-  background: rgba(248, 81, 73, 0.1);
-  color: var(--color-error);
-}
-
-.roadmaps-view__icon-btn--success[role="button"]:hover {
-  background: rgba(63, 185, 80, 0.1);
-  color: var(--success);
-}
-
-/* Icon buttons */
-.roadmaps-view__icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
 }
 
 .roadmaps-view__icon-btn:hover {
-  background: var(--surface-hover);
+  background: var(--surface-hover, color-mix(in srgb, var(--text) 6%, transparent));
-  color: var(--text-primary);
+  color: var(--text);
 }
 
 .roadmaps-view__icon-btn--danger:hover {
-  background: rgba(248, 81, 73, 0.1);
+  background: color-mix(in srgb, var(--color-error) 10%, transparent);
   color: var(--color-error);
 }
 
 .roadmaps-view__icon-btn--success:hover {
-  background: rgba(63, 185, 80, 0.1);
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
-  color: var(--success);
+  color: var(--color-success);
 }
 
 .roadmaps-view__icon-btn:disabled {
@@ -263,8 +279,8 @@
   background: var(--surface-elevated);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
-  transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
+  transition: opacity var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
   cursor: grab;
 }
 
@@ -296,7 +312,7 @@
   cursor: grab;
   padding: 2px;
   border-radius: var(--radius-sm);
-  transition: color 0.15s, background 0.15s;
+  transition: color var(--transition-fast), background var(--transition-fast);
 }
 
 .roadmaps-view__drag-handle:hover {
@@ -350,7 +366,7 @@
   color: var(--text-muted);
   font-size: 0.8rem;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
 }
 
 .roadmaps-view__add-feature-btn:hover {
@@ -365,9 +381,9 @@
   align-items: center;
   gap: var(--space-xs);
   padding: var(--space-xs) var(--space-sm);
-  background: var(--accent, #58a6ff);
+  background: var(--accent);
-  color: #fff;
+  color: var(--cta-text);
-  border: 1px solid var(--accent, #58a6ff);
+  border: 1px solid var(--accent);
   border-radius: var(--radius-md);
   font-size: 0.75rem;
   cursor: pointer;
@@ -375,8 +391,8 @@
 }
 
 .roadmaps-view__suggest-btn:hover {
-  background: var(--accent-hover, #4c94e6);
+  background: color-mix(in srgb, var(--accent) 88%, var(--bg) 12%);
-  border-color: var(--accent-hover, #4c94e6);
+  border-color: color-mix(in srgb, var(--accent) 88%, var(--bg) 12%);
 }
 
 .roadmaps-view__suggest-btn:active {
@@ -393,11 +409,11 @@
   flex: 1;
   overflow-y: auto;
   padding: var(--space-sm);
-  transition: background 0.15s;
+  transition: background var(--transition-fast);
 }
 
 .roadmaps-view__feature-list--drop-target {
-  background: rgba(63, 131, 245, 0.05);
+  background: color-mix(in srgb, var(--color-info) 5%, transparent);
 }
 
 .roadmaps-view__empty-features {
@@ -414,7 +430,7 @@
   padding: var(--space-sm);
   border-bottom: 1px solid var(--border);
   gap: var(--space-sm);
-  transition: opacity 0.15s, border-color 0.15s;
+  transition: opacity var(--transition-fast), border-color var(--transition-fast);
   cursor: grab;
 }
 
@@ -463,7 +479,7 @@
   display: flex;
   gap: 2px;
   opacity: 0;
-  transition: opacity 0.15s;
+  transition: opacity var(--transition-fast);
 }
 
 .roadmaps-view__feature-item:hover .roadmaps-view__feature-actions {
@@ -543,7 +559,7 @@
   color: var(--text-primary);
   font-size: 0.85rem;
   cursor: pointer;
-  transition: background 0.15s;
+  transition: background var(--transition-fast);
 }
 
 .roadmaps-view__btn:hover {
@@ -553,7 +569,7 @@
 .roadmaps-view__btn--primary {
   background: var(--accent);
   border-color: var(--accent);
-  color: white;
+  color: var(--cta-text);
 }
 
 .roadmaps-view__btn--primary:hover {
@@ -589,7 +605,7 @@
   color: var(--text-muted);
   font-size: 0.9rem;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
 }
 
 .roadmaps-view__add-milestone-fab {
@@ -680,7 +696,7 @@
   font-family: inherit;
   resize: vertical;
   min-height: 60px;
-  transition: border-color 0.15s;
+  transition: border-color var(--transition-fast);
 }
 
 .roadmap-suggestion-input:focus {
@@ -707,13 +723,13 @@
 .roadmap-suggestion-generate-btn {
   padding: var(--space-sm) var(--space-lg);
   background: var(--accent);
-  color: white;
+  color: var(--cta-text);
   border: none;
   border-radius: var(--radius-sm);
   font-size: 0.9rem;
   font-weight: 500;
   cursor: pointer;
-  transition: opacity 0.15s, transform 0.1s;
+  transition: opacity var(--transition-fast), transform var(--transition-instant);
 }
 
 .roadmap-suggestion-generate-btn:hover:not(:disabled) {
@@ -732,13 +748,13 @@
 .roadmap-suggestion-accept-all-btn {
   padding: var(--space-sm) var(--space-md);
   background: var(--color-success);
-  color: white;
+  color: var(--cta-text);
   border: none;
   border-radius: var(--radius-sm);
   font-size: 0.85rem;
   font-weight: 500;
   cursor: pointer;
-  transition: opacity 0.15s, transform 0.1s;
+  transition: opacity var(--transition-fast), transform var(--transition-instant);
 }
 
 .roadmap-suggestion-accept-all-btn:hover {
@@ -761,7 +777,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
+  transition: color var(--transition-fast), border-color var(--transition-fast);
 }
 
 .roadmap-suggestion-clear-btn:hover {
@@ -784,7 +800,7 @@
   background: var(--surface-elevated);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
 }
 
 .roadmap-suggestion-card:hover {
@@ -826,11 +842,11 @@
   height: 28px;
   padding: 0;
   background: var(--color-success);
-  color: white;
+  color: var(--cta-text);
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: opacity 0.15s, transform 0.1s;
+  transition: opacity var(--transition-fast), transform var(--transition-instant);
 }
 
 .roadmap-suggestion-accept-btn:hover {
@@ -858,7 +874,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background-color 0.15s, color 0.15s;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
 }
 
 .roadmap-suggestion-edit-btn:hover {
@@ -889,7 +905,7 @@
   font-size: 0.9rem;
   font-family: inherit;
   resize: vertical;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
 }
 
 .roadmap-suggestion-textarea:focus {
@@ -915,11 +931,11 @@
   height: 28px;
   padding: 0;
   background: var(--color-success);
-  color: white;
+  color: var(--cta-text);
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: opacity 0.15s;
+  transition: opacity var(--transition-fast);
 }
 
 .roadmap-suggestion-save-btn:hover:not(:disabled) {
@@ -943,7 +959,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background-color 0.15s, color 0.15s;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
 }
 
 .roadmap-suggestion-cancel-btn:hover {
@@ -1054,7 +1070,7 @@
     border: none;
     border-radius: var(--radius-md);
     background: var(--accent);
-    color: white;
+    color: var(--cta-text);
     cursor: pointer;
     transition: opacity var(--transition-fast);
   }
@@ -1276,11 +1292,6 @@
     height: 36px;
   }
 
-  .roadmaps-view__icon-btn[role="button"] {
-    width: 36px;
-    height: 36px;
-  }
-
   /* Feature create overlay - offset from mobile nav bar */
   .roadmaps-view__feature-create-overlay {
     bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-md));

packages/dashboard/app/components/RoadmapsView.tsx

@@ -107,50 +107,50 @@ function HandoffModal({
           </button>
         </div>
         <div className="modal-body">
-          <p className="text-muted" style={{ marginBottom: "var(--space-lg)" }}>
+          <p className="text-muted roadmaps-view__handoff-intro">
             Export roadmap data for use in mission and task planning flows.
             This is a read-only export — no missions or tasks will be created.
           </p>
           
           {error && (
-            <div className="form-error" style={{ marginBottom: "var(--space-lg)" }}>
+            <div className="form-error roadmaps-view__handoff-error">
               Error loading handoff data: {error.message}
             </div>
           )}
 
           {!handoffPayload && !isLoading && (
-            <div style={{ textAlign: "center", padding: "var(--space-xl)" }}>
+            <div className="roadmaps-view__handoff-empty-state">
               <button className="btn btn-primary" onClick={onFetchHandoff}>
-                <Download size={16} style={{ marginRight: "var(--space-sm)" }} />
+                <Download size={16} className="roadmaps-view__handoff-button-icon" />
                 Load Handoff Data
               </button>
             </div>
           )}
 
           {isLoading && (
-            <div style={{ textAlign: "center", padding: "var(--space-xl)" }}>
+            <div className="roadmaps-view__handoff-loading-state">
               <Loader size={24} className="spin" />
-              <p style={{ marginTop: "var(--space-md)" }}>Loading handoff data...</p>
+              <p className="roadmaps-view__handoff-loading-text">Loading handoff data...</p>
             </div>
           )}
 
           {handoffPayload && (
             <>
-              <div style={{ marginBottom: "var(--space-lg)" }}>
+              <div className="roadmaps-view__handoff-section">
-                <h3 style={{ marginBottom: "var(--space-sm)" }}>Mission Planning Handoff</h3>
+                <h3 className="roadmaps-view__handoff-section-title">Mission Planning Handoff</h3>
-                <div className="card" style={{ padding: "var(--space-md)" }}>
+                <div className="card roadmaps-view__handoff-card">
-                  <pre style={{ whiteSpace: "pre-wrap", fontSize: "12px", maxHeight: "200px", overflow: "auto" }}>
+                  <pre className="roadmaps-view__handoff-pre roadmaps-view__handoff-pre--mission">
                     {JSON.stringify(handoffPayload.mission, null, 2)}
                   </pre>
                 </div>
               </div>
 
-              <div style={{ marginBottom: "var(--space-lg)" }}>
+              <div className="roadmaps-view__handoff-section">
-                <h3 style={{ marginBottom: "var(--space-sm)" }}>
+                <h3 className="roadmaps-view__handoff-section-title">
                   Feature Task Planning Handoffs ({handoffPayload.features.length})
                 </h3>
-                <div className="card" style={{ padding: "var(--space-md)" }}>
+                <div className="card roadmaps-view__handoff-card">
-                  <pre style={{ whiteSpace: "pre-wrap", fontSize: "12px", maxHeight: "300px", overflow: "auto" }}>
+                  <pre className="roadmaps-view__handoff-pre roadmaps-view__handoff-pre--features">
                     {JSON.stringify(handoffPayload.features, null, 2)}
                   </pre>
                 </div>
@@ -162,7 +162,7 @@ function HandoffModal({
           <div className="modal-actions-left">
             {handoffPayload && (
               <button className="btn btn-sm" onClick={onCopyToClipboard}>
-                <Copy size={14} style={{ marginRight: "var(--space-xs)" }} />
+                <Copy size={14} className="roadmaps-view__handoff-copy-icon" />
                 Copy to Clipboard
               </button>
             )}
@@ -231,39 +231,36 @@ function RoadmapItem({
         )}
       </div>
       <div className="roadmaps-view__sidebar-item-actions" onClick={handleEditClick} role="presentation">
-        <span
+        <button
           className="roadmaps-view__icon-btn"
           onClick={handleExportClick}
-          role="button"
           title="Export roadmap"
           aria-label="Export roadmap"
           data-testid={`roadmap-export-${roadmap.id}`}
-          tabIndex={0}
+          type="button"
         >
           <Download size={14} />
-        </span>
+        </button>
-        <span
+        <button
           className="roadmaps-view__icon-btn"
           onClick={handleEditClick}
-          role="button"
           title="Edit roadmap"
           aria-label="Edit roadmap"
           data-testid={`roadmap-edit-${roadmap.id}`}
-          tabIndex={0}
+          type="button"
         >
           <Pencil size={14} />
-        </span>
+        </button>
-        <span
+        <button
           className="roadmaps-view__icon-btn roadmaps-view__icon-btn--danger"
           onClick={handleDeleteClick}
-          role="button"
           title="Delete roadmap"
           aria-label="Delete roadmap"
           data-testid={`roadmap-delete-${roadmap.id}`}
-          tabIndex={0}
+          type="button"
         >
           <Trash2 size={14} />
-        </span>
+        </button>
       </div>
     </div>
   );
@@ -464,10 +461,12 @@ function MilestoneCard({
   onEditFeature,
   onDeleteFeature,
   milestoneEdit,
-  onStartMilestoneEdit,
+  onMilestoneEditChange,
+  onMilestoneEditFieldChange,
   onCancelMilestoneEdit,
   onSaveMilestoneEdit,
   featureEdit,
+  onFeatureEditChange,
   onStartFeatureEdit: _onStartFeatureEdit,
   onCancelFeatureEdit,
   onSaveFeatureEdit,
@@ -509,10 +508,12 @@ function MilestoneCard({
   onEditFeature: (featureId: string) => void;
   onDeleteFeature: (featureId: string) => void;
   milestoneEdit: MilestoneInlineEditState | null;
-  onStartMilestoneEdit: () => void;
+  onMilestoneEditChange: (value: string) => void;
+  onMilestoneEditFieldChange: (field: "title" | "description") => void;
   onCancelMilestoneEdit: () => void;
   onSaveMilestoneEdit: (updates: RoadmapMilestoneUpdateInput) => void;
   featureEdit: FeatureInlineEditState | null;
+  onFeatureEditChange: (value: string) => void;
   onStartFeatureEdit: (featureId: string, currentTitle: string, currentDescription?: string) => void;
   onCancelFeatureEdit: () => void;
   onSaveFeatureEdit: (updates: RoadmapFeatureUpdateInput) => void;
@@ -633,9 +634,10 @@ function MilestoneCard({
                 type="text"
                 className="roadmaps-view__inline-input"
                 value={milestoneEdit.value}
-                onChange={() =>
+                onChange={(e) => {
-                  onStartMilestoneEdit()
+                  onMilestoneEditFieldChange("title");
-                }
+                  onMilestoneEditChange(e.target.value);
+                }}
                 onKeyDown={handleMilestoneTitleKeyDown}
                 placeholder="Milestone title"
                 autoFocus
@@ -661,8 +663,9 @@ function MilestoneCard({
             <textarea
               className="roadmaps-view__inline-textarea"
               value={milestoneEdit.field === "description" ? milestoneEdit.value : milestone.description || ""}
-              onChange={() => {
+              onChange={(e) => {
-                // Update the edit state with description
+                onMilestoneEditFieldChange("description");
+                onMilestoneEditChange(e.target.value);
               }}
               onKeyDown={handleMilestoneDescKeyDown}
               placeholder="Milestone description (optional)"
@@ -845,7 +848,7 @@ function MilestoneCard({
                         type="text"
                         className="roadmaps-view__inline-input"
                         value={featureEdit.value}
-                        onChange={() => {}}
+                        onChange={(e) => onFeatureEditChange(e.target.value)}
                         onKeyDown={handleFeatureTitleKeyDown}
                         placeholder="Feature title"
                         autoFocus
@@ -1861,6 +1864,14 @@ export function RoadmapsView({ projectId, addToast }: RoadmapsViewProps) {
     });
   }, []);
 
+  const handleMilestoneEditChange = useCallback((value: string) => {
+    setMilestoneEdit((previous) => ({ ...previous, value }));
+  }, []);
+
+  const handleMilestoneEditFieldChange = useCallback((field: "title" | "description") => {
+    setMilestoneEdit((previous) => ({ ...previous, field }));
+  }, []);
+
   const handleCancelMilestoneEdit = useCallback(() => {
     setMilestoneEdit({ milestoneId: null, field: null, value: "" });
   }, []);
@@ -1927,6 +1938,10 @@ export function RoadmapsView({ projectId, addToast }: RoadmapsViewProps) {
     []
   );
 
+  const handleFeatureEditChange = useCallback((value: string) => {
+    setFeatureEdit((previous) => ({ ...previous, value }));
+  }, []);
+
   const handleCancelFeatureEdit = useCallback(() => {
     setFeatureEdit({ featureId: null, field: null, value: "" });
   }, []);
@@ -2470,10 +2485,12 @@ export function RoadmapsView({ projectId, addToast }: RoadmapsViewProps) {
                       }}
                       onDeleteFeature={handleDeleteFeature}
                       milestoneEdit={milestoneEdit}
-                      onStartMilestoneEdit={() => handleStartMilestoneEdit(milestone)}
+                      onMilestoneEditChange={handleMilestoneEditChange}
+                      onMilestoneEditFieldChange={handleMilestoneEditFieldChange}
                       onCancelMilestoneEdit={handleCancelMilestoneEdit}
                       onSaveMilestoneEdit={handleSaveMilestoneEdit}
                       featureEdit={featureEdit}
+                      onFeatureEditChange={handleFeatureEditChange}
                       onStartFeatureEdit={handleStartFeatureEdit}
                       onCancelFeatureEdit={handleCancelFeatureEdit}
                       onSaveFeatureEdit={handleSaveFeatureEdit}

packages/dashboard/app/components/__tests__/Header.test.tsx

@@ -185,6 +185,22 @@ describe("Header", () => {
       expect(onChangeView).toHaveBeenCalledWith("plugin:fusion-plugin-dependency-graph:queue");
     });
 
+    it("hides legacy roadmaps overflow item when roadmap plugin view is present", () => {
+      renderHeader({
+        onChangeView: noop,
+        experimentalFeatures: { roadmap: true },
+        pluginDashboardViews: [
+          {
+            pluginId: "fusion-plugin-roadmap",
+            view: { viewId: "roadmaps", label: "Roadmaps", componentPath: "./RoadmapsView", icon: "Map", placement: "primary" },
+          },
+        ],
+      });
+
+      fireEvent.click(screen.getByTestId("view-toggle-overflow-trigger"));
+      expect(screen.queryByTestId("view-overflow-roadmaps")).toBeNull();
+    });
+
     it("renders view overflow trigger when an experimental overflow feature is enabled", () => {
       renderHeader({ onChangeView: noop, experimentalFeatures: { insights: true } });
       expect(screen.getByTestId("view-toggle-overflow-trigger")).toBeDefined();

packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx

@@ -285,6 +285,25 @@ describe("MobileNavBar", () => {
     expect(screen.getByTestId("mobile-more-item-roadmaps")).toBeDefined();
   });
 
+  it("suppresses legacy roadmaps entries when roadmap plugin view is registered", () => {
+    render(
+      <MobileNavBar
+        {...createDefaultProps()}
+        experimentalFeatures={{ roadmap: true }}
+        pluginDashboardViews={[
+          {
+            pluginId: "fusion-plugin-roadmap",
+            view: { viewId: "roadmaps", label: "Roadmaps", componentPath: "./RoadmapsView", icon: "Map", placement: "primary" },
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.queryByTestId("mobile-nav-tab-roadmaps")).toBeNull();
+    fireEvent.click(screen.getByTestId("mobile-nav-tab-more"));
+    expect(screen.queryByTestId("mobile-more-item-roadmaps")).toBeNull();
+  });
+
   it("shows insights in more sheet when experimentalFeatures.insights is true", () => {
     render(<MobileNavBar {...createDefaultProps()} experimentalFeatures={{ insights: true }} />);
     fireEvent.click(screen.getByTestId("mobile-nav-tab-more"));

packages/dashboard/app/components/__tests__/PlanningModeModal.test.tsx

@@ -674,7 +674,9 @@ describe("PlanningModeModal", () => {
         expect(mockStopPlanningGeneration).toHaveBeenCalledWith("session-123", undefined, expect.any(String));
       });
       expect(closeSpy).toHaveBeenCalled();
+      await waitFor(() => {
         expect(screen.getByText("Generation stopped by user. You can retry or start a new session.")).toBeDefined();
+      });
       expect(screen.getByRole("button", { name: "Retry" })).toBeDefined();
 
       // avoid dangling handlers reference lint

packages/engine/src/index.ts

@@ -22,12 +22,27 @@ export { createFnAgent, promptWithFallback, describeModel, setHostExtensionPaths
 // Register createFnAgent into core's loader so consumers in @fusion/core
 // (e.g. ai-summarize, memory-compaction) can resolve it without a circular
 // static import. Runs once at engine module load.
+import type { AiSessionResult, CreateAiSessionFactory, CreateAiSessionOptions } from "@fusion/core";
 import { createFnAgent as _createFnAgentForCore } from "./pi.js";
+
+const _createAiSessionAdapter: CreateAiSessionFactory = async (options: CreateAiSessionOptions): Promise<AiSessionResult> => {
+  return _createFnAgentForCore({
+    cwd: options.cwd,
+    systemPrompt: options.systemPrompt,
+    tools: options.tools,
+    defaultProvider: options.defaultProvider,
+    defaultModelId: options.defaultModelId,
+  });
+};
+
 void import("@fusion/core")
   .then((core) => {
     if ("setCreateFnAgent" in core && typeof core.setCreateFnAgent === "function") {
       core.setCreateFnAgent(_createFnAgentForCore);
     }
+    if ("setCreateAiSessionFactory" in core && typeof core.setCreateAiSessionFactory === "function") {
+      core.setCreateAiSessionFactory(_createAiSessionAdapter);
+    }
   })
   .catch(() => {
     // Ignore loader registration failures in constrained test/mocked environments.