{message}
diff --git a/apps/web/components/task/chat/use-chat-panel-state.ts b/apps/web/components/task/chat/use-chat-panel-state.ts
index bf59c9281d..1e30285246 100644
--- a/apps/web/components/task/chat/use-chat-panel-state.ts
+++ b/apps/web/components/task/chat/use-chat-panel-state.ts
@@ -24,6 +24,8 @@ import { buildContextItems } from "../chat-context-items";
import type { ContextItem } from "@/lib/types/context";
import type { DiffComment } from "@/lib/diff/types";
import type { PlanComment, PRFeedbackComment } from "@/lib/state/slices/comments";
+import type { ActiveDocument } from "@/lib/state/slices/ui/types";
+import type { BuiltInPreset } from "@/lib/state/layout-manager/presets";
const EMPTY_CONTEXT_FILES: ContextFile[] = [];
const PLAN_CONTEXT_PATH = "plan:context";
@@ -40,6 +42,63 @@ export type CommentsState = {
clearSessionPlanComments: () => void;
};
+/** Re-focus chat input after dockview layout rebuild. */
+function useRefocusChatAfterLayout() {
+ return useCallback(() => {
+ const unsub = useDockviewStore.subscribe((state) => {
+ if (!state.isRestoringLayout) {
+ unsub();
+ requestAnimationFrame(() => {
+ document.querySelector
(".tiptap.ProseMirror")?.focus();
+ });
+ }
+ });
+ }, []);
+}
+
+type AutoApplyPlanLayoutOpts = {
+ resolvedSessionId: string | null;
+ taskId: string | null;
+ sessionMetaPlanMode: boolean;
+ setActiveDocument: (sid: string, doc: ActiveDocument | null) => void;
+ applyBuiltInPreset: (preset: BuiltInPreset) => void;
+ setPlanMode: (sid: string, enabled: boolean) => void;
+ addContextFile: (sid: string, file: { path: string; name: string }) => void;
+};
+
+/** Auto-apply plan layout when session metadata has plan_mode enabled. */
+function useAutoApplyPlanLayout(opts: AutoApplyPlanLayoutOpts) {
+ const {
+ resolvedSessionId,
+ taskId,
+ sessionMetaPlanMode,
+ setActiveDocument,
+ applyBuiltInPreset,
+ setPlanMode,
+ addContextFile,
+ } = opts;
+ const autoAppliedPlanSessionRef = useRef(null);
+ useEffect(() => {
+ if (!resolvedSessionId || !taskId) return;
+ if (autoAppliedPlanSessionRef.current === resolvedSessionId) return;
+ if (sessionMetaPlanMode) {
+ autoAppliedPlanSessionRef.current = resolvedSessionId;
+ setActiveDocument(resolvedSessionId, { type: "plan", taskId });
+ applyBuiltInPreset("plan");
+ setPlanMode(resolvedSessionId, true);
+ addContextFile(resolvedSessionId, { path: PLAN_CONTEXT_PATH, name: "Plan" });
+ }
+ }, [
+ resolvedSessionId,
+ taskId,
+ sessionMetaPlanMode,
+ setActiveDocument,
+ applyBuiltInPreset,
+ setPlanMode,
+ addContextFile,
+ ]);
+}
+
export function usePlanMode(resolvedSessionId: string | null, taskId: string | null) {
const activeDocument = useAppStore((state) =>
resolvedSessionId
@@ -57,6 +116,12 @@ export function usePlanMode(resolvedSessionId: string | null, taskId: string | n
resolvedSessionId ? (state.chatInput.planModeBySessionId[resolvedSessionId] ?? false) : false,
);
+ const sessionMetaPlanMode = useAppStore((state) =>
+ resolvedSessionId
+ ? state.taskSessions.items[resolvedSessionId]?.metadata?.plan_mode === true
+ : false,
+ );
+
const planModeEnabled = planModeFromStore;
const planLayoutVisible = activeDocument?.type === "plan";
@@ -69,18 +134,17 @@ export function usePlanMode(resolvedSessionId: string | null, taskId: string | n
}
}, [resolvedSessionId, setPlanMode, addContextFile]);
- // Re-focus chat input after dockview layout rebuild.
- // Scroll preservation is handled by the store layout actions (before DOM rebuild).
- const refocusChatAfterLayout = useCallback(() => {
- const unsub = useDockviewStore.subscribe((state) => {
- if (!state.isRestoringLayout) {
- unsub();
- requestAnimationFrame(() => {
- document.querySelector(".tiptap.ProseMirror")?.focus();
- });
- }
- });
- }, []);
+ useAutoApplyPlanLayout({
+ resolvedSessionId,
+ taskId,
+ sessionMetaPlanMode,
+ setActiveDocument,
+ applyBuiltInPreset,
+ setPlanMode,
+ addContextFile,
+ });
+
+ const refocusChatAfterLayout = useRefocusChatAfterLayout();
// Toggle only the plan layout (plan panel + preset) without changing chat input plan mode state
const togglePlanLayout = useCallback(
diff --git a/apps/web/components/task/chat/use-tiptap-editor.ts b/apps/web/components/task/chat/use-tiptap-editor.ts
index 75d18ab1fd..982745508c 100644
--- a/apps/web/components/task/chat/use-tiptap-editor.ts
+++ b/apps/web/components/task/chat/use-tiptap-editor.ts
@@ -7,11 +7,13 @@ import Paragraph from "@tiptap/extension-paragraph";
import Text from "@tiptap/extension-text";
import HardBreak from "@tiptap/extension-hard-break";
import History from "@tiptap/extension-history";
-import Placeholder from "@tiptap/extension-placeholder";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { Extension, isNodeEmpty } from "@tiptap/core";
import Code from "@tiptap/extension-code";
import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
import { common, createLowlight } from "lowlight";
-import { Extension } from "@tiptap/core";
import { cn } from "@/lib/utils";
import { getChatDraftContent, setChatDraftContent } from "@/lib/local-storage";
import { getMarkdownText, textToHtml, handleEditorPaste } from "./tiptap-helpers";
@@ -33,6 +35,65 @@ export type TipTapInputHandle = {
const lowlightInstance = createLowlight(common);
+/**
+ * Custom Placeholder extension that reads the current placeholder from
+ * editor.storage instead of from the captured options object. TipTap's
+ * extension.options is a getter returning a fresh object each call, so the
+ * built-in Placeholder plugin's closure captures a stale options snapshot.
+ * This wrapper uses editor.storage.dynamicPlaceholder.text as the live source.
+ */
+const DynamicPlaceholder = Extension.create({
+ name: "dynamicPlaceholder",
+
+ addStorage() {
+ return { text: "" };
+ },
+
+ addProseMirrorPlugins() {
+ const editor = this.editor;
+ return [
+ new Plugin({
+ key: new PluginKey("dynamicPlaceholder"),
+ props: {
+ decorations: ({ doc, selection }) => {
+ if (!editor.isEditable) return null;
+ const { anchor } = selection;
+ const decorations: InstanceType[] = [];
+ const isEmptyDoc = editor.isEmpty;
+ doc.descendants((node: ProseMirrorNode, pos: number) => {
+ const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+ const isEmpty = !node.isLeaf && isNodeEmpty(node);
+ if (hasAnchor && isEmpty) {
+ const classes = ["is-empty"];
+ if (isEmptyDoc) classes.push("is-editor-empty");
+ decorations.push(
+ Decoration.node(pos, pos + node.nodeSize, {
+ class: classes.join(" "),
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ "data-placeholder": (editor.storage as any).dynamicPlaceholder.text,
+ }),
+ );
+ }
+ return false;
+ });
+ return DecorationSet.create(doc, decorations);
+ },
+ },
+ }),
+ ];
+ },
+});
+
+/** Update the dynamic placeholder text and trigger a redecoration. Extracted to a
+ * standalone function so that the eslint react-hooks/immutability rule does not
+ * flag it as a mutation of the `editor` hook argument. */
+function updateDynamicPlaceholder(ed: ReturnType, text: string) {
+ if (!ed) return;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (ed.storage as any).dynamicPlaceholder.text = text;
+ ed.view.dispatch(ed.state.tr);
+}
+
type UseTipTapEditorOptions = {
value: string;
onChange: (value: string) => void;
@@ -124,7 +185,7 @@ export function useTipTapEditor(opts: UseTipTapEditorOptions) {
return ReactNodeViewRenderer(CodeBlockView);
},
}).configure({ lowlight: lowlightInstance }),
- Placeholder.configure({ placeholder }),
+ DynamicPlaceholder,
ContextMention.configure({ suggestions: [mentionSuggestion, slashSuggestion] }),
SubmitKeymap,
],
@@ -203,15 +264,11 @@ function useSyncEditor({
if (editor) editor.setEditable(!disabled);
}, [editor, disabled]);
- // Sync placeholder
+ // Sync placeholder via editor.storage. The DynamicPlaceholder extension reads
+ // from editor.storage.dynamicPlaceholder.text at decoration time.
useEffect(() => {
if (!editor) return;
- editor.extensionManager.extensions.forEach((ext) => {
- if (ext.name === "placeholder") {
- ext.options.placeholder = placeholder;
- editor.view.dispatch(editor.state.tr);
- }
- });
+ updateDynamicPlaceholder(editor, placeholder);
}, [editor, placeholder]);
// Reset sync flag when session changes
diff --git a/apps/web/components/task/files-panel.tsx b/apps/web/components/task/files-panel.tsx
index b5e7b73988..404b217ebc 100644
--- a/apps/web/components/task/files-panel.tsx
+++ b/apps/web/components/task/files-panel.tsx
@@ -43,7 +43,7 @@ const FilesPanel = memo(function FilesPanel({ onOpenFile }: FilesPanelProps) {
if (isArchived) return ;
return (
-
+
{activeSessionId ? (
& {
children: ReactNode;
className?: string;
};
/** Fills the dockview content slot. Use as the outermost element in every panel. */
-export function PanelRoot({ children, className }: PanelRootProps) {
- return {children}
;
+export function PanelRoot({ children, className, ...rest }: PanelRootProps) {
+ return (
+
+ {children}
+
+ );
}
type PanelBodyProps = Omit, "className"> & {
diff --git a/apps/web/components/task/task-chat-panel.tsx b/apps/web/components/task/task-chat-panel.tsx
index 14a0089541..fee2cb810f 100644
--- a/apps/web/components/task/task-chat-panel.tsx
+++ b/apps/web/components/task/task-chat-panel.tsx
@@ -109,7 +109,7 @@ export const TaskChatPanel = memo(function TaskChatPanel({
const handleClarificationResolved = useCallback(() => setClarificationKey((k) => k + 1), []);
return (
-
+
+ effectiveSessionId
+ ? (state.taskSessions.items[effectiveSessionId]?.workflow_step_id ?? null)
+ : null,
+ );
const previewOpen = useAppStore((state) =>
effectiveSessionId ? (state.previewPanel.openBySessionId[effectiveSessionId] ?? false) : false,
);
@@ -141,6 +146,7 @@ function useSessionPanelState(effectiveSessionId: string | null | undefined) {
return {
storeSessionState,
isSessionPassthrough,
+ sessionWorkflowStepId,
previewOpen,
previewStage,
previewUrl,
@@ -224,6 +230,17 @@ function resolveRemoteExecutor(status?: RemoteExecutorStatus | null) {
};
}
+/** Pick the best step ID. Both session-level (from session.state_changed WS event) and
+ * task-level (from task.updated WS event + kanban snapshot) carry the same value, but
+ * session.state_changed is delivered directly while task.updated goes through the hub's
+ * broadcast channel, so the session value arrives first and is less likely to be stale. */
+function resolveCurrentStepId(
+ sessionStepId: string | null,
+ taskStepId: string | null,
+): string | null {
+ return sessionStepId || taskStepId || null;
+}
+
function buildTaskTopBarProps(params: {
taskProps: ReturnType;
agent: ReturnType;
@@ -233,6 +250,7 @@ function buildTaskTopBarProps(params: {
onToggleDebugOverlay: () => void;
effectiveSessionId: string | null;
remote: ReturnType;
+ sessionWorkflowStepId: string | null;
}) {
const { taskProps, agent, merged, workflowSteps, showDebugOverlay, onToggleDebugOverlay } =
params;
@@ -252,7 +270,7 @@ function buildTaskTopBarProps(params: {
showDebugOverlay,
onToggleDebugOverlay,
workflowSteps,
- currentStepId: taskProps.workflowStepId,
+ currentStepId: resolveCurrentStepId(params.sessionWorkflowStepId, taskProps.workflowStepId),
workflowId: taskProps.workflowId,
isArchived: taskProps.isArchived,
isRemoteExecutor: params.remote.isRemoteExecutor,
@@ -368,6 +386,7 @@ function TaskPageInner({
onToggleDebugOverlay,
effectiveSessionId,
remote,
+ sessionWorkflowStepId: sessionPanel.sessionWorkflowStepId,
});
const layoutProps = buildTaskLayoutProps({
taskProps,
diff --git a/apps/web/components/task/task-plan-panel.tsx b/apps/web/components/task/task-plan-panel.tsx
index 2d3a91de49..215696e3d2 100644
--- a/apps/web/components/task/task-plan-panel.tsx
+++ b/apps/web/components/task/task-plan-panel.tsx
@@ -159,7 +159,7 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({
const { textSelection, setTextSelection } = selectionState;
return (
-
+
+
+
{icon && }
{label}
diff --git a/apps/web/components/task/terminal-panel.tsx b/apps/web/components/task/terminal-panel.tsx
index 303dca9e36..541c80167e 100644
--- a/apps/web/components/task/terminal-panel.tsx
+++ b/apps/web/components/task/terminal-panel.tsx
@@ -36,7 +36,7 @@ export const TerminalPanel = memo(function TerminalPanel({ params }: TerminalPan
if (type === "dev-server" && processId) {
return (
-
+
@@ -45,7 +45,7 @@ export const TerminalPanel = memo(function TerminalPanel({ params }: TerminalPan
}
return (
-
+
+
{sortedSteps.map((step, index) => (
{
+ const deadline = Date.now() + timeoutMs;
+ while (Date.now() < deadline) {
+ try {
+ const res = await fetch(url);
+ if (res.ok) return;
+ } catch {
+ // not ready yet
+ }
+ await new Promise((r) => setTimeout(r, HEALTH_POLL_MS));
+ }
+ throw new Error(`Service did not become healthy at ${url} within ${timeoutMs}ms`);
+}
+
+function killProcess(proc: ChildProcess): Promise
{
+ return new Promise((resolve) => {
+ proc.kill("SIGTERM");
+ const timeout = setTimeout(() => {
+ proc.kill("SIGKILL");
+ resolve();
+ }, 5_000);
+ proc.on("exit", () => {
+ clearTimeout(timeout);
+ resolve();
+ });
+ });
+}
+
+/**
+ * Worker-scoped fixture that spawns an isolated backend process and
+ * a dedicated Next.js frontend. Each Playwright worker gets its own
+ * backend on a unique port with an isolated HOME, database, and data
+ * directory, plus its own frontend with SSR routed to that backend.
+ */
+export const backendFixture = base.extend({
+ backend: [
+ async ({}, use, workerInfo) => {
+ const backendPort = BACKEND_BASE_PORT + workerInfo.workerIndex;
+ const frontendPort = FRONTEND_BASE_PORT + workerInfo.workerIndex;
+ const tmpDir = fs.mkdtempSync(
+ path.join(os.tmpdir(), `kandev-e2e-${workerInfo.workerIndex}-`),
+ );
+ const dataDir = path.join(tmpDir, ".kandev");
+ const dbPath = path.join(tmpDir, "kandev.db");
+ const worktreeBase = path.join(tmpDir, "worktrees");
+ const repoCloneBase = path.join(tmpDir, "repos");
+
+ fs.mkdirSync(dataDir, { recursive: true });
+ fs.mkdirSync(worktreeBase, { recursive: true });
+ fs.mkdirSync(repoCloneBase, { recursive: true });
+
+ // Write a minimal .gitconfig so git doesn't prompt for identity
+ // and disable signing to avoid SSH/GPG key lookups in the isolated HOME.
+ fs.writeFileSync(
+ path.join(tmpDir, ".gitconfig"),
+ "[user]\n name = E2E Test\n email = e2e@test.local\n[commit]\n gpgsign = false\n[tag]\n gpgsign = false\n",
+ );
+
+ // Give each worker its own agentctl port range, offset from the default
+ // range (10001-10100) to avoid conflicts with a running dev instance.
+ const agentctlPortBase = 30001 + workerInfo.workerIndex * 50;
+ const agentctlPortMax = agentctlPortBase + 49;
+
+ const backendEnv = {
+ ...stripGitHubTokens(process.env as Record),
+ HOME: tmpDir,
+ KANDEV_DATA_DIR: dataDir,
+ KANDEV_SERVER_PORT: String(backendPort),
+ KANDEV_DATABASE_PATH: dbPath,
+ KANDEV_MOCK_AGENT: "true",
+ KANDEV_MOCK_GITHUB: "true",
+ KANDEV_DOCKER_ENABLED: "false",
+ KANDEV_WORKTREE_ENABLED: "false",
+ KANDEV_WORKTREE_BASEPATH: worktreeBase,
+ KANDEV_REPOCLONE_BASEPATH: repoCloneBase,
+ KANDEV_LOG_LEVEL: "warn",
+ AGENTCTL_INSTANCE_PORT_BASE: String(agentctlPortBase),
+ AGENTCTL_INSTANCE_PORT_MAX: String(agentctlPortMax),
+ GIT_AUTHOR_NAME: "E2E Test",
+ GIT_AUTHOR_EMAIL: "e2e@test.local",
+ GIT_COMMITTER_NAME: "E2E Test",
+ GIT_COMMITTER_EMAIL: "e2e@test.local",
+ };
+
+ const debug = !!process.env.E2E_DEBUG;
+
+ // --- Spawn backend ---
+ const backendProc: ChildProcess = spawn(KANDEV_BIN, [], {
+ env: backendEnv as unknown as NodeJS.ProcessEnv,
+ stdio: ["ignore", "pipe", "pipe"],
+ });
+
+ const logFile = debug ? fs.createWriteStream(`/tmp/e2e-backend-${backendPort}.log`) : null;
+ backendProc.stderr?.on("data", (chunk: Buffer) => {
+ if (debug) {
+ process.stderr.write(`[backend:${backendPort}] ${chunk.toString()}`);
+ logFile?.write(chunk);
+ }
+ });
+ backendProc.stdout?.on("data", (chunk: Buffer) => {
+ if (debug) {
+ process.stderr.write(`[backend-log:${backendPort}] ${chunk.toString()}`);
+ logFile?.write(chunk);
+ }
+ });
+
+ const baseUrl = `http://localhost:${backendPort}`;
+ await waitForHealth(`${baseUrl}/health`, HEALTH_TIMEOUT_MS);
+
+ // Ensure Next.js static assets are available to the standalone server.
+ // The CLI start command does this via symlink; replicate it here.
+ // Use try/catch to handle concurrent workers racing to create the same symlink.
+ if (fs.existsSync(SOURCE_STATIC_DIR) && !fs.existsSync(STANDALONE_STATIC_DIR)) {
+ fs.mkdirSync(path.dirname(STANDALONE_STATIC_DIR), { recursive: true });
+ try {
+ fs.symlinkSync(SOURCE_STATIC_DIR, STANDALONE_STATIC_DIR, "junction");
+ } catch (err: unknown) {
+ if ((err as NodeJS.ErrnoException).code !== "EEXIST") throw err;
+ }
+ }
+
+ // --- Spawn frontend (Next.js standalone server) ---
+ const frontendProc: ChildProcess = spawn("node", [STANDALONE_SERVER], {
+ cwd: WEB_DIR,
+ env: {
+ ...(process.env as unknown as Record),
+ KANDEV_API_BASE_URL: baseUrl,
+ PORT: String(frontendPort),
+ HOSTNAME: "localhost",
+ NODE_ENV: "production",
+ } as unknown as NodeJS.ProcessEnv,
+ stdio: ["ignore", "pipe", "pipe"],
+ });
+
+ frontendProc.stderr?.on("data", (chunk: Buffer) => {
+ if (debug) process.stderr.write(`[frontend:${frontendPort}] ${chunk.toString()}`);
+ });
+
+ const frontendUrl = `http://localhost:${frontendPort}`;
+ await waitForHealth(frontendUrl, HEALTH_TIMEOUT_MS);
+
+ try {
+ await use({ port: backendPort, baseUrl, frontendPort, frontendUrl, tmpDir });
+ } finally {
+ // Shutdown frontend first, then backend
+ await killProcess(frontendProc);
+ await killProcess(backendProc);
+
+ // Cleanup temp directory — ignore errors (backend may still hold files briefly)
+ try {
+ fs.rmSync(tmpDir, { recursive: true, force: true });
+ } catch {
+ // Non-fatal: OS may not have released all file handles yet
+ }
+ }
+ },
+ { scope: "worker", timeout: 60_000 },
+ ],
+});
+
+/** Strip GH_TOKEN / GITHUB_TOKEN so the mock client is used. */
+function stripGitHubTokens(env: Record): Record {
+ const cleaned = { ...env };
+ delete cleaned.GH_TOKEN;
+ delete cleaned.GITHUB_TOKEN;
+ return cleaned;
+}
diff --git a/apps/web/e2e/fixtures/test-base.ts b/apps/web/e2e/fixtures/test-base.ts
new file mode 100644
index 0000000000..4ceae43cda
--- /dev/null
+++ b/apps/web/e2e/fixtures/test-base.ts
@@ -0,0 +1,104 @@
+import { type Page } from "@playwright/test";
+import { execSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { backendFixture, type BackendContext } from "./backend";
+import { ApiClient } from "../helpers/api-client";
+import type { WorkflowStep } from "../../lib/types/http";
+
+export type SeedData = {
+ workspaceId: string;
+ workflowId: string;
+ startStepId: string;
+ steps: WorkflowStep[];
+ repositoryId: string;
+};
+
+export const test = backendFixture.extend<
+ { testPage: Page },
+ { apiClient: ApiClient; seedData: SeedData }
+>({
+ // Worker-scoped API client
+ apiClient: [
+ async ({ backend }, use) => {
+ const client = new ApiClient(backend.baseUrl);
+ await use(client);
+ },
+ { scope: "worker" },
+ ],
+
+ // Worker-scoped seed data: creates workspace, workflow (from template), discovers steps,
+ // and sets up a local git repository for agent execution workspace.
+ // The repo is created inside backend.tmpDir (the backend's HOME) so that
+ // discoveryRoots() allows branch listing (isPathAllowed check).
+ seedData: [
+ async ({ apiClient, backend }, use) => {
+ const workspace = await apiClient.createWorkspace("E2E Workspace");
+ const workflow = await apiClient.createWorkflow(workspace.id, "E2E Workflow", "simple");
+
+ const { steps } = await apiClient.listWorkflowSteps(workflow.id);
+ const sorted = steps.sort((a, b) => a.position - b.position);
+ const startStep = sorted.find((s) => s.is_start_step) ?? sorted[0];
+
+ // Create a minimal git repository inside backend.tmpDir (the backend's HOME).
+ // This ensures discoveryRoots() allows the path for branch listing.
+ const repoDir = path.join(backend.tmpDir, "repos", "e2e-repo");
+ fs.mkdirSync(repoDir, { recursive: true });
+ const gitEnv = {
+ ...process.env,
+ HOME: backend.tmpDir,
+ GIT_AUTHOR_NAME: "E2E Test",
+ GIT_AUTHOR_EMAIL: "e2e@test.local",
+ GIT_COMMITTER_NAME: "E2E Test",
+ GIT_COMMITTER_EMAIL: "e2e@test.local",
+ };
+ execSync("git init -b main", { cwd: repoDir, env: gitEnv });
+ execSync('git commit --allow-empty -m "init"', { cwd: repoDir, env: gitEnv });
+ const repo = await apiClient.createRepository(workspace.id, repoDir);
+
+ await use({
+ workspaceId: workspace.id,
+ workflowId: workflow.id,
+ startStepId: startStep.id,
+ steps: sorted,
+ repositoryId: repo.id,
+ });
+ },
+ { scope: "worker" },
+ ],
+
+ // Per-test page with baseURL pointing to worker's frontend.
+ // Resets user settings to the E2E workspace/workflow before each test so that
+ // SSR always resolves to the correct workspace regardless of what commitSettings
+ // may have written during previous tests.
+ testPage: async ({ browser, backend, apiClient, seedData }, use) => {
+ // Clean up tasks and test-created workflows from previous tests in this worker.
+ // Keep the seeded workflow so the worker-scoped seedData fixture remains valid.
+ await apiClient.e2eReset(seedData.workspaceId, [seedData.workflowId]);
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: seedData.workflowId,
+ });
+ const context = await browser.newContext({
+ baseURL: backend.frontendUrl,
+ });
+ const page = await context.newPage();
+ await setupPage(page, backend);
+ await use(page);
+ await context.close();
+ },
+});
+
+export { expect } from "@playwright/test";
+
+async function setupPage(page: Page, backend: BackendContext): Promise {
+ await page.addInitScript(
+ ({ backendUrl }: { backendUrl: string }) => {
+ localStorage.setItem("kandev.onboarding.completed", "true");
+ // Set the window global that getBackendConfig() reads for API/WS connections
+ window.__KANDEV_API_BASE_URL = backendUrl;
+ },
+ { backendUrl: backend.baseUrl },
+ );
+}
diff --git a/apps/web/e2e/global-setup.ts b/apps/web/e2e/global-setup.ts
new file mode 100644
index 0000000000..1c718fdaa2
--- /dev/null
+++ b/apps/web/e2e/global-setup.ts
@@ -0,0 +1,37 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const BACKEND_DIR = path.resolve(__dirname, "../../../apps/backend");
+const WEB_DIR = path.resolve(__dirname, "..");
+
+export default function globalSetup() {
+ const kandevBin = path.join(BACKEND_DIR, "bin", "kandev");
+ const mockAgentBin = path.join(BACKEND_DIR, "bin", "mock-agent");
+
+ for (const bin of [kandevBin, mockAgentBin]) {
+ if (!fs.existsSync(bin)) {
+ throw new Error(`Required binary not found: ${bin}\nRun "make build-backend" first.`);
+ }
+ }
+
+ const standaloneServer = path.join(WEB_DIR, ".next/standalone/web/server.js");
+ if (!fs.existsSync(standaloneServer)) {
+ throw new Error(
+ `Next.js standalone build not found: ${standaloneServer}\nRun "make build-web" first.`,
+ );
+ }
+
+ // Standalone builds don't include static assets or public dir.
+ // Symlink them so the standalone server can serve them.
+ const staticSource = path.join(WEB_DIR, ".next/static");
+ const staticTarget = path.join(WEB_DIR, ".next/standalone/web/.next/static");
+ if (fs.existsSync(staticSource) && !fs.existsSync(staticTarget)) {
+ fs.symlinkSync(staticSource, staticTarget, "dir");
+ }
+
+ const publicSource = path.join(WEB_DIR, "public");
+ const publicTarget = path.join(WEB_DIR, ".next/standalone/web/public");
+ if (fs.existsSync(publicSource) && !fs.existsSync(publicTarget)) {
+ fs.symlinkSync(publicSource, publicTarget, "dir");
+ }
+}
diff --git a/apps/web/e2e/helpers/api-client.ts b/apps/web/e2e/helpers/api-client.ts
new file mode 100644
index 0000000000..03cec2ff4e
--- /dev/null
+++ b/apps/web/e2e/helpers/api-client.ts
@@ -0,0 +1,282 @@
+import type {
+ Workspace,
+ Workflow,
+ CreateTaskResponse,
+ ListWorkflowsResponse,
+ ListWorkflowStepsResponse,
+} from "../../lib/types/http";
+import type { Agent } from "../../lib/types/http-agents";
+
+// --- GitHub Mock Types ---
+
+export type MockPR = {
+ number: number;
+ title: string;
+ state: string;
+ head_branch: string;
+ head_sha?: string;
+ base_branch: string;
+ author_login: string;
+ repo_owner: string;
+ repo_name: string;
+ html_url?: string;
+ url?: string;
+ body?: string;
+ draft?: boolean;
+ additions?: number;
+ deletions?: number;
+ requested_reviewers?: Array<{ login: string; type: string }>;
+};
+
+export type MockOrg = {
+ login: string;
+ avatar_url?: string;
+};
+
+export type MockRepo = {
+ full_name: string;
+ owner: string;
+ name: string;
+ private?: boolean;
+};
+
+export type MockReview = {
+ id: number;
+ author: string;
+ author_avatar?: string;
+ state: string;
+ body?: string;
+ created_at?: string;
+};
+
+export type MockCheckRun = {
+ name: string;
+ source?: string;
+ status: string;
+ conclusion?: string;
+ html_url?: string;
+};
+
+/**
+ * HTTP API client for seeding test data via the backend REST API.
+ */
+export class ApiClient {
+ constructor(private baseUrl: string) {}
+
+ private async request(method: string, path: string, body?: unknown): Promise {
+ const res = await fetch(`${this.baseUrl}${path}`, {
+ method,
+ headers: body ? { "Content-Type": "application/json" } : undefined,
+ body: body ? JSON.stringify(body) : undefined,
+ });
+ if (!res.ok) {
+ const text = await res.text();
+ throw new Error(`API ${method} ${path} failed (${res.status}): ${text}`);
+ }
+ return res.json() as Promise;
+ }
+
+ async healthCheck(): Promise {
+ await this.request("GET", "/health");
+ }
+
+ async createWorkspace(name: string): Promise {
+ return this.request("POST", "/api/v1/workspaces", { name });
+ }
+
+ async createWorkflow(workspaceId: string, name: string, templateId?: string): Promise {
+ return this.request("POST", "/api/v1/workflows", {
+ workspace_id: workspaceId,
+ name,
+ ...(templateId ? { workflow_template_id: templateId } : {}),
+ });
+ }
+
+ async createTask(
+ workspaceId: string,
+ title: string,
+ opts?: {
+ description?: string;
+ workflow_id?: string;
+ workflow_step_id?: string;
+ /** Stored in task.Metadata so auto_start_agent can pick it up on on_enter. */
+ agent_profile_id?: string;
+ /** Repository IDs to associate with the task (required for agent execution). */
+ repository_ids?: string[];
+ /** When true, task is placed at position 0 regardless of is_start_step. */
+ plan_mode?: boolean;
+ },
+ ): Promise {
+ return this.request("POST", "/api/v1/tasks", {
+ workspace_id: workspaceId,
+ title,
+ description: opts?.description ?? "",
+ ...(opts?.workflow_id ? { workflow_id: opts.workflow_id } : {}),
+ ...(opts?.workflow_step_id ? { workflow_step_id: opts.workflow_step_id } : {}),
+ ...(opts?.agent_profile_id ? { metadata: { agent_profile_id: opts.agent_profile_id } } : {}),
+ ...(opts?.repository_ids
+ ? { repositories: opts.repository_ids.map((id) => ({ repository_id: id })) }
+ : {}),
+ ...(opts?.plan_mode ? { plan_mode: true } : {}),
+ });
+ }
+
+ async listAgents(): Promise<{ agents: Agent[]; total: number }> {
+ return this.request("GET", "/api/v1/agents");
+ }
+
+ async createTaskWithAgent(
+ workspaceId: string,
+ title: string,
+ agentProfileId: string,
+ opts?: {
+ description?: string;
+ workflow_id?: string;
+ workflow_step_id?: string;
+ repository_ids?: string[];
+ },
+ ): Promise {
+ return this.request("POST", "/api/v1/tasks", {
+ workspace_id: workspaceId,
+ title,
+ description: opts?.description ?? "",
+ start_agent: true,
+ agent_profile_id: agentProfileId,
+ ...(opts?.workflow_id ? { workflow_id: opts.workflow_id } : {}),
+ ...(opts?.workflow_step_id ? { workflow_step_id: opts.workflow_step_id } : {}),
+ ...(opts?.repository_ids
+ ? { repositories: opts.repository_ids.map((id) => ({ repository_id: id })) }
+ : {}),
+ });
+ }
+
+ async listWorkflows(workspaceId: string): Promise {
+ return this.request("GET", `/api/v1/workspaces/${workspaceId}/workflows`);
+ }
+
+ async listWorkflowSteps(workflowId: string): Promise {
+ return this.request("GET", `/api/v1/workflows/${workflowId}/workflow/steps`);
+ }
+
+ async createWorkflowStep(
+ workflowId: string,
+ name: string,
+ position: number,
+ opts?: { is_start_step?: boolean },
+ ): Promise<{ id: string }> {
+ return this.request("POST", `/api/v1/workflow/steps`, {
+ workflow_id: workflowId,
+ name,
+ position,
+ ...(opts?.is_start_step != null ? { is_start_step: opts.is_start_step } : {}),
+ });
+ }
+
+ async createRepository(
+ workspaceId: string,
+ localPath: string,
+ defaultBranch = "main",
+ ): Promise<{ id: string }> {
+ return this.request("POST", `/api/v1/workspaces/${workspaceId}/repositories`, {
+ name: "E2E Repo",
+ source_type: "local",
+ local_path: localPath,
+ default_branch: defaultBranch,
+ });
+ }
+
+ async saveUserSettings(settings: {
+ enable_preview_on_click?: boolean;
+ workspace_id?: string;
+ workflow_filter_id?: string;
+ }): Promise {
+ await this.request("PATCH", "/api/v1/user/settings", settings);
+ }
+
+ async moveTask(taskId: string, workflowId: string, workflowStepId: string): Promise {
+ await this.request("POST", `/api/v1/tasks/${taskId}/move`, {
+ workflow_id: workflowId,
+ workflow_step_id: workflowStepId,
+ });
+ }
+
+ async updateWorkflowStep(
+ stepId: string,
+ updates: {
+ prompt?: string;
+ events?: {
+ on_enter?: Array<{ type: string; config?: Record }>;
+ on_turn_start?: Array<{ type: string; config?: Record }>;
+ on_turn_complete?: Array<{ type: string; config?: Record }>;
+ on_exit?: Array<{ type: string; config?: Record }>;
+ };
+ },
+ ): Promise {
+ await this.request("PUT", `/api/v1/workflow/steps/${stepId}`, { id: stepId, ...updates });
+ }
+
+ // --- E2E Test Reset ---
+
+ async e2eReset(workspaceId: string, keepWorkflowIds?: string[]): Promise {
+ const params = keepWorkflowIds?.length ? `?keep_workflows=${keepWorkflowIds.join(",")}` : "";
+ await this.request("DELETE", `/api/v1/e2e/reset/${workspaceId}${params}`);
+ }
+
+ // --- GitHub Mock Control ---
+
+ async mockGitHubReset(): Promise {
+ await this.request("DELETE", "/api/v1/github/mock/reset");
+ }
+
+ async mockGitHubSetUser(username: string): Promise {
+ await this.request("PUT", "/api/v1/github/mock/user", { username });
+ }
+
+ async mockGitHubAddPRs(prs: MockPR[]): Promise {
+ await this.request("POST", "/api/v1/github/mock/prs", { prs });
+ }
+
+ async mockGitHubAddOrgs(orgs: MockOrg[]): Promise {
+ await this.request("POST", "/api/v1/github/mock/orgs", { orgs });
+ }
+
+ async mockGitHubAddRepos(org: string, repos: MockRepo[]): Promise {
+ await this.request("POST", "/api/v1/github/mock/repos", { org, repos });
+ }
+
+ async mockGitHubAddReviews(
+ owner: string,
+ repo: string,
+ number: number,
+ reviews: MockReview[],
+ ): Promise {
+ await this.request("POST", "/api/v1/github/mock/reviews", {
+ owner,
+ repo,
+ number,
+ reviews,
+ });
+ }
+
+ async mockGitHubAddCheckRuns(
+ owner: string,
+ repo: string,
+ ref: string,
+ checks: MockCheckRun[],
+ ): Promise {
+ await this.request("POST", "/api/v1/github/mock/checks", {
+ owner,
+ repo,
+ ref,
+ checks,
+ });
+ }
+
+ async mockGitHubGetStatus(): Promise<{
+ authenticated: boolean;
+ username: string;
+ auth_method: string;
+ }> {
+ return this.request("GET", "/api/v1/github/status");
+ }
+}
diff --git a/apps/web/e2e/pages/kanban-page.ts b/apps/web/e2e/pages/kanban-page.ts
new file mode 100644
index 0000000000..5d8a9a806e
--- /dev/null
+++ b/apps/web/e2e/pages/kanban-page.ts
@@ -0,0 +1,36 @@
+import { type Locator, type Page } from "@playwright/test";
+
+export class KanbanPage {
+ readonly board: Locator;
+ readonly createTaskButton: Locator;
+
+ constructor(private page: Page) {
+ this.board = page.getByTestId("kanban-board");
+ this.createTaskButton = page.getByTestId("create-task-button");
+ }
+
+ async goto() {
+ await this.page.goto("/");
+ await this.board.waitFor({ state: "visible" });
+ }
+
+ taskCard(taskId: string): Locator {
+ return this.page.getByTestId(`task-card-${taskId}`);
+ }
+
+ taskCardByTitle(title: string): Locator {
+ return this.board.locator(`[data-testid^="task-card-"]`, {
+ hasText: title,
+ });
+ }
+
+ columnByStepId(stepId: string): Locator {
+ return this.page.getByTestId(`kanban-column-${stepId}`);
+ }
+
+ taskCardInColumn(title: string, stepId: string): Locator {
+ return this.columnByStepId(stepId).locator('[data-testid^="task-card-"]', {
+ hasText: title,
+ });
+ }
+}
diff --git a/apps/web/e2e/pages/session-page.ts b/apps/web/e2e/pages/session-page.ts
new file mode 100644
index 0000000000..562bb0042c
--- /dev/null
+++ b/apps/web/e2e/pages/session-page.ts
@@ -0,0 +1,86 @@
+import { type Locator, type Page } from "@playwright/test";
+
+export class SessionPage {
+ readonly chat: Locator;
+ readonly sidebar: Locator;
+ readonly terminal: Locator;
+ readonly files: Locator;
+ readonly planPanel: Locator;
+ readonly stepper: Locator;
+
+ constructor(private readonly page: Page) {
+ this.chat = page.getByTestId("session-chat");
+ this.sidebar = page.getByTestId("task-sidebar");
+ this.terminal = page.getByTestId("terminal-panel");
+ this.files = page.getByTestId("files-panel");
+ this.planPanel = page.getByTestId("plan-panel");
+ this.stepper = page.getByTestId("workflow-stepper");
+ }
+
+ async waitForLoad(timeout = 15_000) {
+ await this.chat.waitFor({ state: "visible", timeout });
+ }
+
+ /** Scoped to the sidebar — finds task title text rendered by TaskItem. */
+ taskInSidebar(title: string): Locator {
+ return this.sidebar.getByText(title, { exact: false });
+ }
+
+ /** Sidebar section header (e.g. "Review", "In Progress", "Backlog"). */
+ sidebarSection(label: string): Locator {
+ return this.sidebar.getByTestId(`sidebar-section-${label}`);
+ }
+
+ /** Agent STARTING or RUNNING status indicator. */
+ agentStatus(): Locator {
+ return this.page.getByRole("status", { name: /Agent is (starting|running)/ });
+ }
+
+ /** Divider that appears after the "New session started" status message is rendered. */
+ turnComplete(): Locator {
+ return this.page.getByTestId("agent-turn-complete");
+ }
+
+ /** Chat input placeholder when agent is idle (default mode). */
+ idleInput(): Locator {
+ return this.page.locator('[data-placeholder="Continue working on the task..."]');
+ }
+
+ /** Chat input placeholder when agent is idle (plan mode). */
+ planModeInput(): Locator {
+ return this.page.locator('[data-placeholder="Continue working on the plan..."]');
+ }
+
+ /**
+ * "Plan mode" badge shown on a message that was sent with plan mode active.
+ * Appears when message.metadata.plan_mode = true, which the backend sets when
+ * a session is auto-started via the enable_plan_mode workflow event.
+ */
+ planModeBadge(): Locator {
+ return this.chat.getByText("Plan mode", { exact: true });
+ }
+
+ stepperStep(name: string): Locator {
+ return this.page.getByTestId(`workflow-step-${name}`);
+ }
+
+ /**
+ * Types a message into the TipTap chat input and sends it.
+ * Default submit key is Cmd+Enter (chatSubmitKey = "cmd_enter").
+ * TipTap maps "Mod" to Meta on macOS and Control on Linux/Windows.
+ */
+ async sendMessage(text: string) {
+ const editor = this.page.locator(".tiptap.ProseMirror").first();
+ await editor.click();
+ await editor.fill(text);
+ const modifier = process.platform === "darwin" ? "Meta" : "Control";
+ await editor.press(`${modifier}+Enter`);
+ }
+
+ /** Toggle plan mode on/off via Shift+Tab in the TipTap editor. */
+ async togglePlanMode() {
+ const editor = this.page.locator(".tiptap.ProseMirror").first();
+ await editor.click();
+ await editor.press("Shift+Tab");
+ }
+}
diff --git a/apps/web/e2e/pages/task-detail-page.ts b/apps/web/e2e/pages/task-detail-page.ts
new file mode 100644
index 0000000000..a127eac514
--- /dev/null
+++ b/apps/web/e2e/pages/task-detail-page.ts
@@ -0,0 +1,22 @@
+import { type Locator, type Page } from "@playwright/test";
+
+export class TaskDetailPage {
+ readonly sessionChat: Locator;
+ readonly turnCompleteIndicator: Locator;
+
+ constructor(private page: Page) {
+ this.sessionChat = page.getByTestId("session-chat");
+ this.turnCompleteIndicator = page.getByTestId("agent-turn-complete");
+ }
+
+ async goto(taskId: string, sessionId: string) {
+ await this.page.goto(`/task/${taskId}/${sessionId}`);
+ }
+
+ async waitForAgentResponse(text: string, timeoutMs = 30_000) {
+ await this.sessionChat.locator(`text=${text}`).waitFor({
+ state: "visible",
+ timeout: timeoutMs,
+ });
+ }
+}
diff --git a/apps/web/e2e/playwright.config.ts b/apps/web/e2e/playwright.config.ts
new file mode 100644
index 0000000000..8870a1ce28
--- /dev/null
+++ b/apps/web/e2e/playwright.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const CI = !!process.env.CI;
+
+export default defineConfig({
+ testDir: "./tests",
+ fullyParallel: true,
+ forbidOnly: CI,
+ retries: CI ? 2 : 0,
+ workers: CI ? 2 : 1,
+ timeout: 60_000,
+ reporter: CI ? [["html", { outputFolder: "./playwright-report" }]] : "list",
+ outputDir: "./test-results",
+
+ use: {
+ trace: "on-first-retry",
+ screenshot: "only-on-failure",
+ video: "on-first-retry",
+ },
+
+ projects: [
+ {
+ name: "chromium",
+ use: { ...devices["Desktop Chrome"] },
+ },
+ ],
+
+ // No webServer — each Playwright worker spawns its own frontend
+ // via the backend fixture (see fixtures/backend.ts)
+
+ globalSetup: "./global-setup.ts",
+});
diff --git a/apps/web/e2e/tests/create-task.spec.ts b/apps/web/e2e/tests/create-task.spec.ts
new file mode 100644
index 0000000000..622b5a40c0
--- /dev/null
+++ b/apps/web/e2e/tests/create-task.spec.ts
@@ -0,0 +1,224 @@
+import { test, expect } from "../fixtures/test-base";
+import { KanbanPage } from "../pages/kanban-page";
+import { SessionPage } from "../pages/session-page";
+
+test.describe("Task creation", () => {
+ test("opens create task dialog from kanban header", async ({ testPage }) => {
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ await kanban.createTaskButton.first().click();
+ await expect(testPage.getByTestId("create-task-dialog")).toBeVisible();
+ });
+
+ test("can fill in task title and description", async ({ testPage }) => {
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ await kanban.createTaskButton.first().click();
+ const dialog = testPage.getByTestId("create-task-dialog");
+ await expect(dialog).toBeVisible();
+
+ const titleInput = testPage.getByTestId("task-title-input");
+ await titleInput.fill("My E2E Test Task");
+ await expect(titleInput).toHaveValue("My E2E Test Task");
+
+ const descInput = testPage.getByTestId("task-description-input");
+ await descInput.fill("This is a test description");
+ await expect(descInput).toHaveValue("This is a test description");
+ });
+
+ test("start agent: creates task, starts session, navigates to session", async ({ testPage }) => {
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ await kanban.createTaskButton.first().click();
+ const dialog = testPage.getByTestId("create-task-dialog");
+ await expect(dialog).toBeVisible();
+
+ // Fill in title and description — description enables the "Start task" button
+ await testPage.getByTestId("task-title-input").fill("Start Agent Task");
+ await testPage.getByTestId("task-description-input").fill("/e2e:simple-message");
+
+ // The dialog auto-selects the E2E Repo (first available repository) and the main branch.
+ // Wait for the button to become enabled (repo + branch + agent profile all resolved).
+ // Under load the branch/profile resolution can take a moment.
+ const startBtn = testPage.getByTestId("submit-start-agent");
+ await expect(startBtn).toBeEnabled({ timeout: 15_000 });
+
+ // Click "Start task" — the agent starts, the dialog closes, we stay on kanban
+ await startBtn.click();
+ await expect(dialog).not.toBeVisible({ timeout: 10_000 });
+
+ // The new task card appears on the kanban board (pushed via WS)
+ const card = kanban.taskCardByTitle("Start Agent Task");
+ await expect(card).toBeVisible({ timeout: 10_000 });
+
+ // Clicking the card fetches the session and navigates to /s/
+ await card.click();
+ await expect(testPage).toHaveURL(/\/s\//, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Default layout: sidebar, terminal, and file tree are all visible
+ await expect(session.sidebar).toBeVisible();
+ await expect(session.terminal).toBeVisible();
+ await expect(session.files).toBeVisible();
+ await expect(session.chat).toBeVisible();
+
+ // Task title appears in the sidebar
+ await expect(session.taskInSidebar("Start Agent Task")).toBeVisible();
+
+ // The mock agent's simple-message scenario emits this response text —
+ // waiting for it confirms the agent ran and completed its turn.
+ await expect(session.chat.getByText("simple mock response", { exact: false })).toBeVisible({
+ timeout: 30_000,
+ });
+
+ // The first user message (task description) is visible in the chat
+ await expect(session.chat.getByText("/e2e:simple-message")).toBeVisible();
+
+ // Session transitions to idle — input placeholder changes from "Queue instructions..."
+ await expect(session.idleInput()).toBeVisible({ timeout: 15_000 });
+
+ // Sidebar shows the task under "Review" section — this uses kanban tasks which update
+ // via task.updated WS event. Check this first to give more time for the stepper data
+ // (session.state_changed) to propagate through the store.
+ await expect(session.sidebarSection("Review")).toBeVisible({ timeout: 15_000 });
+
+ // After the agent completes, the workflow step transitions from "In Progress" to "Review".
+ // The step update arrives via WS (task.updated and session.state_changed events) which may
+ // take a moment to propagate through the store.
+ await expect(session.stepperStep("Review")).toHaveAttribute("aria-current", "step", {
+ timeout: 15_000,
+ });
+ });
+
+ test("plan mode with MCP tool: creates plan via create_task_plan", async ({ testPage }) => {
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ await kanban.createTaskButton.first().click();
+ const dialog = testPage.getByTestId("create-task-dialog");
+ await expect(dialog).toBeVisible();
+
+ // Multi-line script: thinking → MCP create plan → text message
+ const script = [
+ 'e2e:thinking("Analyzing task and creating plan...")',
+ "e2e:delay(100)",
+ 'e2e:mcp:kandev:create_task_plan({"task_id":"{task_id}","content":"## Plan\\n\\n1. Analyze requirements\\n2. Implement solution\\n3. Write tests","title":"Implementation Plan"})',
+ "e2e:delay(100)",
+ 'e2e:message("I\'ve created an implementation plan for this task.")',
+ ].join("\n");
+
+ await testPage.getByTestId("task-title-input").fill("Plan MCP Task");
+ await testPage.getByTestId("task-description-input").fill(script);
+
+ const startBtn = testPage.getByTestId("submit-start-agent");
+ await expect(startBtn).toBeEnabled({ timeout: 15_000 });
+
+ await testPage.getByTestId("submit-start-agent-chevron").click();
+ await expect(testPage.getByTestId("submit-plan-mode")).toBeVisible({ timeout: 5_000 });
+ await testPage.getByTestId("submit-plan-mode").click();
+ await expect(dialog).not.toBeVisible({ timeout: 10_000 });
+
+ await expect(testPage).toHaveURL(/\/s\/.*layout=plan/, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Plan panel visible (plan layout)
+ await expect(session.planPanel).toBeVisible({ timeout: 10_000 });
+
+ // The first user message (script content) is visible in the chat with plan mode badge
+ await expect(session.chat.getByText("e2e:thinking", { exact: false })).toBeVisible({
+ timeout: 15_000,
+ });
+ await expect(session.planModeBadge()).toBeVisible();
+
+ // Agent completion text visible in chat (use .last() because the user message
+ // paragraph also contains this text inside the e2e:message(...) script line)
+ await expect(
+ session.chat.getByText("I've created an implementation plan for this task.").last(),
+ ).toBeVisible({ timeout: 30_000 });
+
+ // Plan content appears in plan panel (created via real MCP call to create_task_plan)
+ await expect(session.planPanel.getByText("Analyze requirements", { exact: false })).toBeVisible(
+ {
+ timeout: 15_000,
+ },
+ );
+ await expect(session.planPanel.getByText("Implement solution", { exact: false })).toBeVisible();
+ await expect(session.planPanel.getByText("Write tests", { exact: false })).toBeVisible();
+
+ // Session transitions to idle — plan mode input placeholder visible
+ await expect(session.planModeInput()).toBeVisible({ timeout: 15_000 });
+
+ // After the agent completes, the workflow step transitions to "Review"
+ await expect(session.stepperStep("Review")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+
+ // Sidebar shows the task under "Review" section
+ await expect(session.sidebarSection("Review")).toBeVisible();
+ });
+
+ test("start task in plan mode: opens session with plan panel visible", async ({ testPage }) => {
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ await kanban.createTaskButton.first().click();
+ const dialog = testPage.getByTestId("create-task-dialog");
+ await expect(dialog).toBeVisible();
+
+ await testPage.getByTestId("task-title-input").fill("Plan Mode Task");
+ await testPage.getByTestId("task-description-input").fill("/e2e:simple-message");
+
+ // Wait for the main submit button to be enabled (repo + agent profile resolved),
+ // then open the dropdown chevron to reveal the "Start task in plan mode" option.
+ const startBtn = testPage.getByTestId("submit-start-agent");
+ await expect(startBtn).toBeEnabled({ timeout: 15_000 });
+
+ // The split-button group wraps "Start task" + a chevron-only dropdown trigger.
+ // Click the chevron to open the dropdown.
+ await testPage.getByTestId("submit-start-agent-chevron").click();
+
+ const planModeBtn = testPage.getByTestId("submit-plan-mode");
+ await expect(planModeBtn).toBeVisible({ timeout: 5_000 });
+ await planModeBtn.click();
+ await expect(dialog).not.toBeVisible({ timeout: 10_000 });
+
+ // activatePlanMode navigates to /s/?layout=plan which applies the plan preset
+ await expect(testPage).toHaveURL(/\/s\/.*layout=plan/, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Plan panel is visible — the layout preset shows it instead of the default file tree
+ await expect(session.planPanel).toBeVisible({ timeout: 10_000 });
+
+ // Chat is still accessible in plan mode
+ await expect(session.chat).toBeVisible();
+
+ // Wait for the agent to complete so messages are loaded
+ await expect(session.chat.getByText("simple mock response", { exact: false })).toBeVisible({
+ timeout: 30_000,
+ });
+
+ // The first user message (task description) is visible with plan mode badge
+ await expect(session.chat.getByText("/e2e:simple-message")).toBeVisible();
+ await expect(session.planModeBadge()).toBeVisible();
+
+ // Session transitions to idle — plan mode input placeholder visible
+ await expect(session.planModeInput()).toBeVisible({ timeout: 15_000 });
+
+ // After the agent completes, the workflow step transitions to "Review"
+ await expect(session.stepperStep("Review")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+
+ // Sidebar shows the task under "Review" section
+ await expect(session.sidebarSection("Review")).toBeVisible();
+ });
+});
diff --git a/apps/web/e2e/tests/kanban-board.spec.ts b/apps/web/e2e/tests/kanban-board.spec.ts
new file mode 100644
index 0000000000..ad9edb85d2
--- /dev/null
+++ b/apps/web/e2e/tests/kanban-board.spec.ts
@@ -0,0 +1,45 @@
+import { test, expect } from "../fixtures/test-base";
+import { KanbanPage } from "../pages/kanban-page";
+
+test.describe("Kanban board", () => {
+ test("displays a seeded task card", async ({ testPage, apiClient, seedData }) => {
+ const task = await apiClient.createTask(seedData.workspaceId, "E2E Kanban Test Task", {
+ workflow_id: seedData.workflowId,
+ workflow_step_id: seedData.startStepId,
+ });
+ const kanban = new KanbanPage(testPage);
+
+ await kanban.goto();
+
+ const card = kanban.taskCardByTitle("E2E Kanban Test Task");
+ await expect(card).toBeVisible();
+ await expect(kanban.taskCard(task.id)).toBeVisible();
+ });
+
+ test("shows create task button", async ({ testPage }) => {
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+ await expect(kanban.createTaskButton.first()).toBeVisible();
+ });
+
+ test("opens task preview from kanban card", async ({ testPage, apiClient, seedData }) => {
+ // Enable preview-on-click so clicking a card opens the preview panel
+ await apiClient.saveUserSettings({ enable_preview_on_click: true });
+
+ const task = await apiClient.createTask(seedData.workspaceId, "Detail View Task", {
+ workflow_id: seedData.workflowId,
+ workflow_step_id: seedData.startStepId,
+ });
+ const kanban = new KanbanPage(testPage);
+
+ await kanban.goto();
+
+ const card = kanban.taskCard(task.id);
+ await expect(card).toBeVisible();
+ await card.click();
+
+ // After clicking a card with preview enabled, URL gets ?taskId=... param.
+ // Use toHaveURL (polling assertion) since replaceState doesn't fire navigation events.
+ await expect(testPage).toHaveURL(/taskId=/, { timeout: 10000 });
+ });
+});
diff --git a/apps/web/e2e/tests/task-list.spec.ts b/apps/web/e2e/tests/task-list.spec.ts
new file mode 100644
index 0000000000..3c41e82c06
--- /dev/null
+++ b/apps/web/e2e/tests/task-list.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from "../fixtures/test-base";
+
+test.describe("Task List", () => {
+ test("seeded task appears in task list", async ({ testPage, apiClient, seedData }) => {
+ await apiClient.createTask(seedData.workspaceId, "Direct Navigate Task", {
+ workflow_id: seedData.workflowId,
+ workflow_step_id: seedData.startStepId,
+ });
+
+ // The /tasks page shows all tasks for the workspace in a data table (SSR)
+ await testPage.goto("/tasks");
+ await testPage.waitForLoadState("networkidle");
+
+ await expect(testPage.getByText("Direct Navigate Task")).toBeVisible();
+ });
+});
diff --git a/apps/web/e2e/tests/workflow-automation.spec.ts b/apps/web/e2e/tests/workflow-automation.spec.ts
new file mode 100644
index 0000000000..15886e071c
--- /dev/null
+++ b/apps/web/e2e/tests/workflow-automation.spec.ts
@@ -0,0 +1,558 @@
+import { test, expect } from "../fixtures/test-base";
+import { KanbanPage } from "../pages/kanban-page";
+import { SessionPage } from "../pages/session-page";
+
+test.describe("Workflow automation", () => {
+ /**
+ * Seeds a 3-step workflow (Inbox → In Progress → Done).
+ * Configures In Progress with on_enter: auto_start_agent and a custom step
+ * prompt routed to the mock agent, plus on_turn_complete: move_to_step(Done).
+ *
+ * Verifies:
+ * - auto_start_agent fires when task is moved into In Progress
+ * - task appears in In Progress column before agent completes
+ * - step custom prompt is used (not the task description)
+ * - on_turn_complete advances task to Done column on the kanban board
+ * - session stepper shows Done as the current step
+ */
+ test("auto_start_agent with step custom prompt; on_turn_complete advances to next column", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ // --- Seed a workflow with explicit step configuration ---
+ const workflow = await apiClient.createWorkflow(
+ seedData.workspaceId,
+ "Automation Test Workflow",
+ );
+
+ const inboxStep = await apiClient.createWorkflowStep(workflow.id, "Inbox", 0);
+ const inProgressStep = await apiClient.createWorkflowStep(workflow.id, "In Progress", 1);
+ const doneStep = await apiClient.createWorkflowStep(workflow.id, "Done", 2);
+
+ // Configure In Progress: auto_start_agent on enter, custom step prompt with delay
+ // so we can observe the task in In Progress before on_turn_complete moves it to Done.
+ await apiClient.updateWorkflowStep(inProgressStep.id, {
+ prompt: 'e2e:delay(3000)\ne2e:message("delayed step response")\n{{task_prompt}}',
+ events: {
+ on_enter: [{ type: "auto_start_agent" }],
+ on_turn_complete: [{ type: "move_to_step", config: { step_id: doneStep.id } }],
+ },
+ });
+
+ // Point the kanban page at our custom workflow
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ // Resolve an agent profile so auto_start_agent can pick it up from task metadata
+ const { agents } = await apiClient.listAgents();
+ const agentProfileId = agents[0]?.profiles[0]?.id ?? "";
+
+ // Create task in Inbox — does NOT trigger auto_start_agent
+ const task = await apiClient.createTask(seedData.workspaceId, "Auto Agent Workflow Task", {
+ workflow_id: workflow.id,
+ workflow_step_id: inboxStep.id,
+ agent_profile_id: agentProfileId,
+ repository_ids: [seedData.repositoryId],
+ });
+
+ // Move task to In Progress → triggers on_enter: auto_start_agent
+ await apiClient.moveTask(task.id, workflow.id, inProgressStep.id);
+
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ // Task should appear in In Progress while the agent is working (3s delay)
+ const cardInProgress = kanban.taskCardInColumn("Auto Agent Workflow Task", inProgressStep.id);
+ await expect(cardInProgress).toBeVisible({ timeout: 15_000 });
+
+ // After the agent completes its turn, on_turn_complete fires and moves the
+ // task to Done. The kanban board receives a WS push.
+ const cardInDone = kanban.taskCardInColumn("Auto Agent Workflow Task", doneStep.id);
+ await expect(cardInDone).toBeVisible({ timeout: 30_000 });
+
+ // Navigate to the session page
+ await cardInDone.click();
+ await expect(testPage).toHaveURL(/\/s\//, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Stepper shows Done as current step
+ await expect(session.stepperStep("Done")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+
+ // Mock agent response confirms the step custom prompt was executed
+ await expect(session.chat.getByText("delayed step response", { exact: true })).toBeVisible({
+ timeout: 30_000,
+ });
+
+ // Session transitions to idle after agent completes
+ await expect(session.idleInput()).toBeVisible({ timeout: 15_000 });
+
+ // Sidebar shows the task under "Review" section
+ await expect(session.sidebarSection("Review")).toBeVisible();
+ });
+
+ /**
+ * Seeds a 4-step workflow (Todo → In Progress → Review → Done) and validates
+ * the full lifecycle from both the kanban page and the session details page.
+ *
+ * Step configuration:
+ * - Todo: on_turn_complete: [move_to_next]
+ * - In Progress: on_enter: [auto_start_agent], custom step prompt,
+ * on_turn_complete: [move_to_next]
+ * - Review: no events (manual step)
+ * - Done: no events
+ *
+ * Flow:
+ * 1. Task is created in Todo
+ * 2. Navigate to kanban → verify task is in Todo → click card to session page
+ * 3. Send a message → agent responds → on_turn_complete fires → task moves to In Progress
+ * 4. on_enter: auto_start_agent queues step prompt (/e2e:multi-turn)
+ * 5. Step prompt runs → "Multi-turn response ready" → on_turn_complete → Review
+ * 6. Stepper shows Review
+ * 7. Send /e2e:simple-message in Review → "simple mock response" → stays in Review
+ * 8. Move task to Done via API → stepper shows Done
+ */
+ test("full workflow lifecycle: kanban transitions and session stepper updates", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const workflow = await apiClient.createWorkflow(
+ seedData.workspaceId,
+ "Lifecycle Test Workflow",
+ );
+
+ const todoStep = await apiClient.createWorkflowStep(workflow.id, "Todo", 0);
+ const inProgressStep = await apiClient.createWorkflowStep(workflow.id, "In Progress", 1);
+ await apiClient.createWorkflowStep(workflow.id, "Review", 2);
+ const doneStep = await apiClient.createWorkflowStep(workflow.id, "Done", 3);
+
+ // Todo: on_turn_complete moves task to In Progress after the first agent turn.
+ await apiClient.updateWorkflowStep(todoStep.id, {
+ events: {
+ on_turn_complete: [{ type: "move_to_next" }],
+ },
+ });
+
+ // In Progress: auto_start_agent on enter with custom step prompt (multi-turn scenario),
+ // move_to_next on turn complete.
+ // Using /e2e:multi-turn (not simple-message) so the auto-start response is distinguishable
+ // from the user's manually sent /e2e:simple-message later in the test.
+ await apiClient.updateWorkflowStep(inProgressStep.id, {
+ prompt: "/e2e:multi-turn {{task_prompt}}",
+ events: {
+ on_enter: [{ type: "auto_start_agent" }],
+ on_turn_complete: [{ type: "move_to_next" }],
+ },
+ });
+
+ // Review: no events — manual step (agent turns don't trigger transitions)
+ // Done: no events (default, no update needed)
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ const { agents } = await apiClient.listAgents();
+ const agentProfileId = agents[0]?.profiles[0]?.id ?? "";
+
+ // Create task in Todo without starting an agent.
+ const task = await apiClient.createTask(seedData.workspaceId, "Lifecycle Workflow Task", {
+ workflow_id: workflow.id,
+ workflow_step_id: todoStep.id,
+ agent_profile_id: agentProfileId,
+ repository_ids: [seedData.repositoryId],
+ });
+
+ // --- Kanban page: verify task starts in Todo ---
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ const cardInTodo = kanban.taskCardInColumn("Lifecycle Workflow Task", todoStep.id);
+ await expect(cardInTodo).toBeVisible({ timeout: 10_000 });
+
+ // Click the card — creates a session (with workflow_step_id from the task)
+ // and navigates to the session page.
+ await cardInTodo.click();
+ await expect(testPage).toHaveURL(/\/s\//, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Stepper initially shows Todo
+ await expect(session.stepperStep("Todo")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+
+ // --- Send a message: agent responds → on_turn_complete fires → cascade ---
+ // Todo on_turn_complete: move_to_next → In Progress
+ // In Progress on_enter: auto_start_agent queues /e2e:multi-turn step prompt
+ // Step prompt runs → on_turn_complete: move_to_next → Review
+ await session.sendMessage("/e2e:simple-message");
+
+ // Wait for the first mock response (from user's /e2e:simple-message on Todo step)
+ await expect(session.chat.getByText("simple mock response", { exact: false })).toBeVisible({
+ timeout: 30_000,
+ });
+
+ // The auto-start step prompt (/e2e:multi-turn) produces a distinct response
+ await expect(session.chat.getByText("Multi-turn response ready", { exact: false })).toBeVisible(
+ { timeout: 30_000 },
+ );
+
+ // Stepper should show Review after the full cascade completes
+ await expect(session.stepperStep("Review")).toHaveAttribute("aria-current", "step", {
+ timeout: 30_000,
+ });
+
+ // --- Send another message in Review: verify manual step stays ---
+ // Wait for agent to become idle before sending (auto-start cascade may still be settling)
+ await expect(session.idleInput()).toBeVisible({ timeout: 15_000 });
+
+ await session.sendMessage("/e2e:simple-message");
+
+ // Wait for the agent to respond (second "simple mock response")
+ await expect(
+ session.chat.getByText("simple mock response", { exact: false }).nth(1),
+ ).toBeVisible({ timeout: 30_000 });
+
+ // Stepper still shows Review (no on_turn_complete events on Review)
+ await expect(session.stepperStep("Review")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+
+ // Session is idle after agent completes the turn in Review
+ await expect(session.idleInput()).toBeVisible({ timeout: 15_000 });
+
+ // Sidebar shows the task under "Review" section
+ await expect(session.sidebarSection("Review")).toBeVisible();
+
+ // --- Move task to Done manually via API ---
+ await apiClient.moveTask(task.id, workflow.id, doneStep.id);
+
+ // Stepper updates to Done via WS push
+ await expect(session.stepperStep("Done")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+ });
+
+ /**
+ * Seeds a 2-step workflow (Inbox → Planning).
+ * Configures Planning with on_enter: [auto_start_agent, enable_plan_mode]
+ * and a custom prompt. No on_turn_complete so task stays in Planning.
+ *
+ * Verifies:
+ * - enable_plan_mode activates plan mode UI
+ * - Plan mode chat input placeholder is visible in the session
+ */
+ test("enable_plan_mode event activates plan mode UI in session", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const workflow = await apiClient.createWorkflow(
+ seedData.workspaceId,
+ "Plan Mode Test Workflow",
+ );
+
+ const inboxStep = await apiClient.createWorkflowStep(workflow.id, "Inbox", 0);
+ const planningStep = await apiClient.createWorkflowStep(workflow.id, "Planning", 1);
+
+ // Configure Planning: auto_start_agent + enable_plan_mode on enter.
+ // No on_turn_complete so the task remains in Planning after the agent turn.
+ await apiClient.updateWorkflowStep(planningStep.id, {
+ prompt: "/e2e:simple-message {{task_prompt}}",
+ events: {
+ on_enter: [{ type: "auto_start_agent" }, { type: "enable_plan_mode" }],
+ },
+ });
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ const { agents } = await apiClient.listAgents();
+ const agentProfileId = agents[0]?.profiles[0]?.id ?? "";
+
+ const task = await apiClient.createTask(seedData.workspaceId, "Plan Mode Workflow Task", {
+ workflow_id: workflow.id,
+ workflow_step_id: inboxStep.id,
+ agent_profile_id: agentProfileId,
+ repository_ids: [seedData.repositoryId],
+ });
+
+ // Move task to Planning → triggers auto_start_agent + enable_plan_mode
+ await apiClient.moveTask(task.id, workflow.id, planningStep.id);
+
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ // Task stays in Planning (no on_turn_complete configured)
+ const card = kanban.taskCardInColumn("Plan Mode Workflow Task", planningStep.id);
+ await expect(card).toBeVisible({ timeout: 30_000 });
+
+ // Navigate to session page
+ await card.click();
+ await expect(testPage).toHaveURL(/\/s\//, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Stepper shows Planning as current step
+ await expect(session.stepperStep("Planning")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+
+ // Plan panel is visible — the layout switches to plan mode when the session
+ // is created with enable_plan_mode.
+ await expect(session.planPanel).toBeVisible({ timeout: 15_000 });
+
+ // "Plan mode" badge on the message confirms plan mode was active for this session.
+ // The badge appears when message.metadata.plan_mode = true, which the backend sets
+ // when the session is auto-started via the enable_plan_mode workflow event.
+ await expect(session.planModeBadge()).toBeVisible({ timeout: 15_000 });
+
+ // Session transitions to idle — plan mode input placeholder visible
+ await expect(session.planModeInput()).toBeVisible({ timeout: 15_000 });
+
+ // Sidebar shows the task under "Review" section
+ await expect(session.sidebarSection("Review")).toBeVisible();
+ });
+
+ /**
+ * Seeds a 5-step workflow (Backlog → Analyze → Implement → Test → Deploy).
+ * Steps Analyze, Implement, and Test each have:
+ * on_enter: [auto_start_agent], custom prompt with {{task_prompt}},
+ * on_turn_complete: [move_to_next]
+ * Deploy has on_enter: [auto_start_agent] and a custom prompt but no on_turn_complete
+ * (terminal step).
+ *
+ * A single moveTask(Backlog → Analyze) triggers a full cascade through all 4
+ * active steps. Each step's custom prompt is sent to the mock agent, which
+ * falls through to emitRandomResponse and echoes the prompt text back.
+ *
+ * Verifies:
+ * - auto_start_agent fires on each step entry
+ * - task cascades through all steps via on_turn_complete: move_to_next
+ * - each step's agent response includes that step's custom prompt text
+ * - the task description is included in every response (via {{task_prompt}})
+ * - task lands in Deploy (terminal step) on the kanban board
+ * - session stepper shows Deploy as the current step
+ */
+ test("multi-step cascade: each step uses its own custom prompt with task description", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const taskTitle = "Cascade Workflow Task";
+ const taskDescription = "Build the login page";
+
+ const workflow = await apiClient.createWorkflow(seedData.workspaceId, "Cascade Test Workflow");
+
+ const backlogStep = await apiClient.createWorkflowStep(workflow.id, "Backlog", 0);
+ const analyzeStep = await apiClient.createWorkflowStep(workflow.id, "Analyze", 1);
+ const implementStep = await apiClient.createWorkflowStep(workflow.id, "Implement", 2);
+ const testStep = await apiClient.createWorkflowStep(workflow.id, "Test", 3);
+ const deployStep = await apiClient.createWorkflowStep(workflow.id, "Deploy", 4);
+
+ // Each active step has a unique prompt prefix so we can assert per-step responses.
+ // {{task_prompt}} is replaced with the task description by buildWorkflowPrompt.
+ // Without a /e2e: prefix the mock agent falls to emitRandomResponse which echoes
+ // the full prompt: "I've completed the analysis of your request: \"\". ..."
+ const stepConfigs = [
+ { step: analyzeStep, prompt: "Analyze requirements for: {{task_prompt}}" },
+ { step: implementStep, prompt: "Implement solution for: {{task_prompt}}" },
+ { step: testStep, prompt: "Write tests for: {{task_prompt}}" },
+ { step: deployStep, prompt: "Deploy changes for: {{task_prompt}}" },
+ ];
+
+ for (const { step, prompt } of stepConfigs) {
+ const isTerminal = step.id === deployStep.id;
+ await apiClient.updateWorkflowStep(step.id, {
+ prompt,
+ events: {
+ on_enter: [{ type: "auto_start_agent" }],
+ ...(isTerminal ? {} : { on_turn_complete: [{ type: "move_to_next" }] }),
+ },
+ });
+ }
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ const { agents } = await apiClient.listAgents();
+ const agentProfileId = agents[0]?.profiles[0]?.id ?? "";
+
+ // Create task in Backlog (staging step, no events).
+ // The description (not title) is what {{task_prompt}} resolves to in step prompts.
+ const task = await apiClient.createTask(seedData.workspaceId, taskTitle, {
+ description: taskDescription,
+ workflow_id: workflow.id,
+ workflow_step_id: backlogStep.id,
+ agent_profile_id: agentProfileId,
+ repository_ids: [seedData.repositoryId],
+ });
+
+ // Move to Analyze → triggers on_enter: auto_start_agent → cascade begins
+ await apiClient.moveTask(task.id, workflow.id, analyzeStep.id);
+
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ // After the full cascade, the task should land in Deploy (terminal step).
+ const cardInDeploy = kanban.taskCardInColumn(taskTitle, deployStep.id);
+ await expect(cardInDeploy).toBeVisible({ timeout: 60_000 });
+
+ // Navigate to the session page to verify per-step responses
+ await cardInDeploy.click();
+ await expect(testPage).toHaveURL(/\/s\//, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Stepper shows Deploy as current step
+ await expect(session.stepperStep("Deploy")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+
+ // Each step's agent response echoes the full prompt via emitRandomResponse:
+ // "I've completed the analysis of your request: \"\". ..."
+ // We match the echoed prompt inside the response text to confirm both the step-specific
+ // prefix and the task description were received by the agent.
+ const expectedResponseFragments = [
+ `Analyze requirements for: ${taskDescription}`,
+ `Implement solution for: ${taskDescription}`,
+ `Write tests for: ${taskDescription}`,
+ `Deploy changes for: ${taskDescription}`,
+ ];
+
+ for (const fragment of expectedResponseFragments) {
+ await expect(session.chat.getByText(fragment, { exact: false }).first()).toBeVisible({
+ timeout: 10_000,
+ });
+ }
+
+ // Session transitions to idle after the cascade completes.
+ // The cascade runs 4 sequential agent turns; session state may lag message display.
+ await expect(session.idleInput()).toBeVisible({ timeout: 30_000 });
+
+ // Sidebar shows the task under "Review" section
+ await expect(session.sidebarSection("Review")).toBeVisible();
+ });
+
+ /**
+ * Kanban board workflow with on_turn_start: move_to_next on Backlog.
+ *
+ * Workflow:
+ * Backlog (on_turn_start: move_to_next, on_turn_complete: move_to_step("review"))
+ * In Progress (on_enter: auto_start_agent, on_turn_complete: move_to_step("review"))
+ * Review (on_turn_start: move_to_previous)
+ * Done (on_turn_start: move_to_step("in-progress"))
+ *
+ * No step has is_start_step, so the task lands at position 0 (Backlog).
+ * The on_turn_complete events use template-level step_id references ("review",
+ * "in-progress") which don't resolve to actual step UUIDs — they're no-ops.
+ *
+ * Flow:
+ * 1. Create task with description via dialog + Start Agent → task starts in Backlog
+ * 2. on_turn_start fires (move_to_next) → task moves to In Progress
+ * 3. Agent completes → on_turn_complete fires with move_to_step("review")
+ * which is gracefully skipped (invalid step_id) → task stays in In Progress
+ */
+ test("kanban workflow: on_turn_start moves task, invalid step_id in on_turn_complete is skipped", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const workflow = await apiClient.createWorkflow(seedData.workspaceId, "Kanban Board Workflow");
+
+ await apiClient.createWorkflowStep(workflow.id, "Backlog", 0);
+ await apiClient.createWorkflowStep(workflow.id, "In Progress", 1);
+ await apiClient.createWorkflowStep(workflow.id, "Review", 2);
+ await apiClient.createWorkflowStep(workflow.id, "Done", 3);
+
+ // Fetch step IDs after creation to set up events
+ const { steps } = await apiClient.listWorkflowSteps(workflow.id);
+ const backlogStep = steps.find((s) => s.name === "Backlog")!;
+ const inProgressStep = steps.find((s) => s.name === "In Progress")!;
+
+ // Backlog: on_turn_start moves to next (In Progress),
+ // on_turn_complete uses template-level step_id (no-op in API-created steps)
+ await apiClient.updateWorkflowStep(backlogStep.id, {
+ events: {
+ on_turn_start: [{ type: "move_to_next" }],
+ on_turn_complete: [{ type: "move_to_step", config: { step_id: "review" } }],
+ },
+ });
+
+ // In Progress: on_turn_complete with invalid step_id (should be skipped)
+ await apiClient.updateWorkflowStep(inProgressStep.id, {
+ events: {
+ on_turn_complete: [{ type: "move_to_step", config: { step_id: "review" } }],
+ },
+ });
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ // --- Create task via dialog with description + Start Agent ---
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ await kanban.createTaskButton.first().click();
+ const dialog = testPage.getByTestId("create-task-dialog");
+ await expect(dialog).toBeVisible();
+
+ await testPage.getByTestId("task-title-input").fill("Kanban Flow Task");
+ await testPage.getByTestId("task-description-input").fill("/e2e:simple-message");
+
+ const startBtn = testPage.getByTestId("submit-start-agent");
+ await expect(startBtn).toBeEnabled({ timeout: 15_000 });
+ await startBtn.click();
+ await expect(dialog).not.toBeVisible({ timeout: 10_000 });
+
+ // Task should be in In Progress: on_turn_start fires on the initial prompt
+ // and moves the task from Backlog → In Progress via move_to_next.
+ // After the agent completes, on_turn_complete's move_to_step("review") is
+ // gracefully skipped (invalid step_id), so the task stays in In Progress.
+ const card = kanban.taskCardInColumn("Kanban Flow Task", inProgressStep.id);
+ await expect(card).toBeVisible({ timeout: 15_000 });
+
+ // Navigate to session to verify agent completed successfully
+ await card.click();
+ await expect(testPage).toHaveURL(/\/s\//, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Agent response confirms the mock agent ran
+ await expect(session.chat.getByText("simple mock response", { exact: false })).toBeVisible({
+ timeout: 30_000,
+ });
+
+ // Session transitions to idle — task is still functional
+ await expect(session.idleInput()).toBeVisible({ timeout: 15_000 });
+
+ // Stepper shows In Progress as current step
+ await expect(session.stepperStep("In Progress")).toHaveAttribute("aria-current", "step", {
+ timeout: 15_000,
+ });
+ });
+});
diff --git a/apps/web/e2e/tests/workflow-start-step.spec.ts b/apps/web/e2e/tests/workflow-start-step.spec.ts
new file mode 100644
index 0000000000..7b77b0ff7c
--- /dev/null
+++ b/apps/web/e2e/tests/workflow-start-step.spec.ts
@@ -0,0 +1,303 @@
+import { test, expect } from "../fixtures/test-base";
+import { KanbanPage } from "../pages/kanban-page";
+import { SessionPage } from "../pages/session-page";
+
+test.describe("Workflow start step placement", () => {
+ test.describe("without explicit start step (Todo -> In Progress -> Done)", () => {
+ test("task lands in first step by position (Todo)", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const workflow = await apiClient.createWorkflow(
+ seedData.workspaceId,
+ "No Start Step Workflow",
+ );
+ const todoStep = await apiClient.createWorkflowStep(workflow.id, "Todo", 0);
+ await apiClient.createWorkflowStep(workflow.id, "In Progress", 1);
+ await apiClient.createWorkflowStep(workflow.id, "Done", 2);
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ // Create task without explicit step — should resolve to position 0 (Todo)
+ await apiClient.createTask(seedData.workspaceId, "No Start Step Task", {
+ workflow_id: workflow.id,
+ });
+
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ const card = kanban.taskCardInColumn("No Start Step Task", todoStep.id);
+ await expect(card).toBeVisible({ timeout: 10_000 });
+ });
+
+ test("plan mode task also lands in first step (Todo)", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const workflow = await apiClient.createWorkflow(
+ seedData.workspaceId,
+ "No Start Step Plan Workflow",
+ );
+ const todoStep = await apiClient.createWorkflowStep(workflow.id, "Todo", 0);
+ await apiClient.createWorkflowStep(workflow.id, "In Progress", 1);
+ await apiClient.createWorkflowStep(workflow.id, "Done", 2);
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ // plan_mode task with no explicit step — both modes resolve to position 0
+ await apiClient.createTask(seedData.workspaceId, "Plan No Start Step Task", {
+ workflow_id: workflow.id,
+ plan_mode: true,
+ });
+
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ const card = kanban.taskCardInColumn("Plan No Start Step Task", todoStep.id);
+ await expect(card).toBeVisible({ timeout: 10_000 });
+ });
+ });
+
+ test.describe("with explicit start step (Todo -> In Progress [start] -> Done)", () => {
+ test("task lands on start step (In Progress)", async ({ testPage, apiClient, seedData }) => {
+ const workflow = await apiClient.createWorkflow(
+ seedData.workspaceId,
+ "Explicit Start Step Workflow",
+ );
+ await apiClient.createWorkflowStep(workflow.id, "Todo", 0);
+ const inProgressStep = await apiClient.createWorkflowStep(workflow.id, "In Progress", 1, {
+ is_start_step: true,
+ });
+ await apiClient.createWorkflowStep(workflow.id, "Done", 2);
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ // No plan_mode, no explicit step — should resolve via is_start_step (In Progress)
+ await apiClient.createTask(seedData.workspaceId, "Start Step Task", {
+ workflow_id: workflow.id,
+ });
+
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ const card = kanban.taskCardInColumn("Start Step Task", inProgressStep.id);
+ await expect(card).toBeVisible({ timeout: 10_000 });
+ });
+
+ test("plan mode task lands in first step (Todo), ignoring start step", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const workflow = await apiClient.createWorkflow(
+ seedData.workspaceId,
+ "Plan Mode Start Step Workflow",
+ );
+ const todoStep = await apiClient.createWorkflowStep(workflow.id, "Todo", 0);
+ await apiClient.createWorkflowStep(workflow.id, "In Progress", 1, {
+ is_start_step: true,
+ });
+ await apiClient.createWorkflowStep(workflow.id, "Done", 2);
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ // plan_mode: true — should ignore is_start_step and use position 0 (Todo)
+ await apiClient.createTask(seedData.workspaceId, "Plan Mode Start Step Task", {
+ workflow_id: workflow.id,
+ plan_mode: true,
+ });
+
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ const card = kanban.taskCardInColumn("Plan Mode Start Step Task", todoStep.id);
+ await expect(card).toBeVisible({ timeout: 10_000 });
+ });
+ });
+
+ /**
+ * Full plan-mode-to-agent lifecycle:
+ *
+ * Workflow: Todo (on_turn_start: move_to_next) → In Progress (on_turn_complete: move_to_next) → Done
+ *
+ * 1. Create task via dialog in plan mode (title only, no description)
+ * 2. Session page opens with plan panel visible
+ * 3. Toggle off plan mode → plan panel disappears
+ * 4. Send a delayed mock script to start the agent
+ * 5. on_turn_start fires on Todo → task moves to In Progress (assert before response)
+ * 6. Agent responds after 3s delay → on_turn_complete fires → task moves to Done
+ */
+ test("plan mode to agent: create in plan mode, toggle off, send message, cascades through steps", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const workflow = await apiClient.createWorkflow(seedData.workspaceId, "Plan To Agent Workflow");
+
+ const todoStep = await apiClient.createWorkflowStep(workflow.id, "Todo", 0);
+ const inProgressStep = await apiClient.createWorkflowStep(workflow.id, "In Progress", 1);
+ await apiClient.createWorkflowStep(workflow.id, "Done", 2);
+
+ // Todo: move to next step when agent turn starts
+ await apiClient.updateWorkflowStep(todoStep.id, {
+ events: {
+ on_turn_start: [{ type: "move_to_next" }],
+ },
+ });
+
+ // In Progress: move to next step when agent turn completes
+ await apiClient.updateWorkflowStep(inProgressStep.id, {
+ events: {
+ on_turn_complete: [{ type: "move_to_next" }],
+ },
+ });
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ // --- Create task via dialog in plan mode ---
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ await kanban.createTaskButton.first().click();
+ const dialog = testPage.getByTestId("create-task-dialog");
+ await expect(dialog).toBeVisible();
+
+ // Fill title only — no description triggers plan mode as the primary submit action
+ await testPage.getByTestId("task-title-input").fill("Plan To Agent Task");
+
+ // The default submit button shows "Start Plan Mode" when there's no description.
+ // It's a type="submit" button so clicking it submits the form.
+ const submitBtn = dialog.getByRole("button", { name: /Start Plan Mode/ });
+ await expect(submitBtn).toBeEnabled({ timeout: 10_000 });
+ await submitBtn.click();
+ await expect(dialog).not.toBeVisible({ timeout: 10_000 });
+
+ // Navigates to session page with plan layout
+ await expect(testPage).toHaveURL(/\/s\//, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Plan panel is visible (plan layout was activated)
+ await expect(session.planPanel).toBeVisible({ timeout: 10_000 });
+
+ // Stepper shows Todo as current step (task starts at position 0)
+ await expect(session.stepperStep("Todo")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+
+ // --- Toggle off plan mode ---
+ await session.togglePlanMode();
+ await expect(session.planPanel).not.toBeVisible({ timeout: 10_000 });
+
+ // --- Send message to start the agent ---
+ // Use script mode with a delay so we can observe the In Progress intermediate state.
+ // on_turn_start fires immediately → task moves to In Progress.
+ // The 3s delay gives us time to assert before on_turn_complete fires.
+ await session.sendMessage('e2e:delay(3000)\ne2e:message("delayed mock response")');
+
+ // on_turn_start fires on Todo → task moves to In Progress
+ await expect(session.stepperStep("In Progress")).toHaveAttribute("aria-current", "step", {
+ timeout: 15_000,
+ });
+
+ // Agent responds after the delay
+ await expect(session.chat.getByText("delayed mock response", { exact: false })).toBeVisible({
+ timeout: 30_000,
+ });
+
+ // on_turn_complete fires on In Progress → task moves to Done
+ await expect(session.stepperStep("Done")).toHaveAttribute("aria-current", "step", {
+ timeout: 15_000,
+ });
+
+ // Session transitions to idle
+ await expect(session.idleInput()).toBeVisible({ timeout: 15_000 });
+ });
+
+ /**
+ * Plan mode bypasses is_start_step — task lands in Backlog (position 0):
+ *
+ * Workflow: Backlog → In Progress [start] (auto_start_agent) → Review → Done
+ *
+ * 1. Create task via dialog in plan mode (title only, no description)
+ * 2. Session page opens with plan panel visible
+ * 3. Task lands in Backlog, not In Progress — plan mode ignores is_start_step
+ */
+ test("plan mode with start step: task lands in Backlog, not In Progress", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const workflow = await apiClient.createWorkflow(seedData.workspaceId, "Plan Mode Dev Workflow");
+
+ const backlogStep = await apiClient.createWorkflowStep(workflow.id, "Backlog", 0);
+ await apiClient.createWorkflowStep(workflow.id, "In Progress", 1, { is_start_step: true });
+ await apiClient.createWorkflowStep(workflow.id, "Review", 2);
+ await apiClient.createWorkflowStep(workflow.id, "Done", 3);
+
+ await apiClient.saveUserSettings({
+ workspace_id: seedData.workspaceId,
+ workflow_filter_id: workflow.id,
+ enable_preview_on_click: false,
+ });
+
+ // --- Create task via dialog in plan mode ---
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ await kanban.createTaskButton.first().click();
+ const dialog = testPage.getByTestId("create-task-dialog");
+ await expect(dialog).toBeVisible();
+
+ // Fill title only — "Start Plan Mode" becomes the default submit action
+ await testPage.getByTestId("task-title-input").fill("Plan Dev Task");
+
+ const submitBtn = dialog.getByRole("button", { name: /Start Plan Mode/ });
+ await expect(submitBtn).toBeEnabled({ timeout: 10_000 });
+ await submitBtn.click();
+ await expect(dialog).not.toBeVisible({ timeout: 10_000 });
+
+ // Navigates to session page with plan layout
+ await expect(testPage).toHaveURL(/\/s\//, { timeout: 15_000 });
+
+ const session = new SessionPage(testPage);
+ await session.waitForLoad();
+
+ // Plan panel is visible
+ await expect(session.planPanel).toBeVisible({ timeout: 10_000 });
+
+ // Stepper shows Backlog as current step — plan mode ignores is_start_step
+ await expect(session.stepperStep("Backlog")).toHaveAttribute("aria-current", "step", {
+ timeout: 10_000,
+ });
+
+ // Task card is in the Backlog column on the kanban board
+ await testPage.goto("/");
+ await kanban.board.waitFor({ state: "visible" });
+ const card = kanban.taskCardInColumn("Plan Dev Task", backlogStep.id);
+ await expect(card).toBeVisible({ timeout: 10_000 });
+ });
+});
diff --git a/apps/web/e2e/tests/workflow-steps.spec.ts b/apps/web/e2e/tests/workflow-steps.spec.ts
new file mode 100644
index 0000000000..e8b315a793
--- /dev/null
+++ b/apps/web/e2e/tests/workflow-steps.spec.ts
@@ -0,0 +1,63 @@
+import { test, expect } from "../fixtures/test-base";
+import { KanbanPage } from "../pages/kanban-page";
+
+test.describe("Workflow steps", () => {
+ test("task appears in correct column after API move", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ // Seed a task (lands in the start step by default)
+ const task = await apiClient.createTask(seedData.workspaceId, "Workflow Move Task", {
+ workflow_id: seedData.workflowId,
+ workflow_step_id: seedData.startStepId,
+ });
+
+ // Find a non-start step to move to
+ const targetStep = seedData.steps.find((s) => !s.is_start_step);
+ if (!targetStep) {
+ test.skip(true, "No non-start step available to test move");
+ return;
+ }
+
+ // Move the task via API
+ await apiClient.moveTask(task.id, seedData.workflowId, targetStep.id);
+
+ // Navigate to kanban and verify the card is visible
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ const card = kanban.taskCardByTitle("Workflow Move Task");
+ await expect(card).toBeVisible();
+ });
+
+ test("multiple tasks can be seeded into different steps", async ({
+ testPage,
+ apiClient,
+ seedData,
+ }) => {
+ const startStep = seedData.steps.find((s) => s.is_start_step) ?? seedData.steps[0];
+ const otherStep = seedData.steps.find((s) => s.id !== startStep.id);
+ if (!otherStep) {
+ test.skip(true, "Need at least 2 workflow steps");
+ return;
+ }
+
+ // Create tasks and move one
+ await apiClient.createTask(seedData.workspaceId, "Step A Task", {
+ workflow_id: seedData.workflowId,
+ workflow_step_id: seedData.startStepId,
+ });
+ const taskB = await apiClient.createTask(seedData.workspaceId, "Step B Task", {
+ workflow_id: seedData.workflowId,
+ workflow_step_id: seedData.startStepId,
+ });
+ await apiClient.moveTask(taskB.id, seedData.workflowId, otherStep.id);
+
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto();
+
+ await expect(kanban.taskCardByTitle("Step A Task")).toBeVisible();
+ await expect(kanban.taskCardByTitle("Step B Task")).toBeVisible();
+ });
+});
diff --git a/apps/web/eslint.config.mjs b/apps/web/eslint.config.mjs
index 118c62c60a..1d18cf0ac1 100644
--- a/apps/web/eslint.config.mjs
+++ b/apps/web/eslint.config.mjs
@@ -33,6 +33,18 @@ const eslintConfig = defineConfig([
"unused-imports/no-unused-imports": "warn",
},
},
+ // E2E tests (Playwright): disable React hooks rules since Playwright's `use()` and
+ // `test.extend()` patterns are falsely flagged, and relax test-specific limits.
+ {
+ files: ["e2e/**/*.ts"],
+ rules: {
+ "react-hooks/rules-of-hooks": "off",
+ "react-hooks/exhaustive-deps": "off",
+ "max-lines-per-function": "off",
+ "max-lines": "off",
+ "sonarjs/no-duplicate-string": "off",
+ },
+ },
]);
export default eslintConfig;
diff --git a/apps/web/lib/state/hydration/hydrator.ts b/apps/web/lib/state/hydration/hydrator.ts
index 47915b1bc4..ac7c3fc316 100644
--- a/apps/web/lib/state/hydration/hydrator.ts
+++ b/apps/web/lib/state/hydration/hydrator.ts
@@ -22,9 +22,40 @@ function mergeWithLoading(draft: any, source: any | undefined): void {
mergeLoadingState(draft, source);
}
+/** Merge kanban tasks by ID, keeping the version with the newer updatedAt timestamp. */
+function mergeKanbanTasks(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ draft: Draft,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ source: any[] | undefined,
+): void {
+ if (!source || source.length === 0) return;
+ const draftTasks = draft.tasks as Array<{ id: string; updatedAt?: string }>;
+ const existingById = new Map(draftTasks.map((t) => [t.id, t]));
+
+ for (const incoming of source) {
+ const existing = existingById.get(incoming.id);
+ if (!existing) {
+ draftTasks.push(incoming);
+ } else {
+ const existingTime = existing.updatedAt ? new Date(existing.updatedAt).getTime() : 0;
+ const incomingTime = incoming.updatedAt ? new Date(incoming.updatedAt).getTime() : 0;
+ if (incomingTime >= existingTime) {
+ const idx = draftTasks.findIndex((t) => t.id === incoming.id);
+ if (idx >= 0) draftTasks[idx] = incoming;
+ }
+ }
+ }
+}
+
/** Hydrate kanban and workspace slices. */
function hydrateKanbanAndWorkspace(draft: Draft, state: Partial): void {
- if (state.kanban) deepMerge(draft.kanban, state.kanban);
+ if (state.kanban) {
+ // Merge tasks by ID with timestamp comparison to avoid overwriting fresher WS data
+ const { tasks, ...kanbanRest } = state.kanban;
+ if (Object.keys(kanbanRest).length > 0) deepMerge(draft.kanban, kanbanRest);
+ mergeKanbanTasks(draft.kanban, tasks);
+ }
if (state.kanbanMulti) deepMerge(draft.kanbanMulti, state.kanbanMulti);
if (state.workflows) deepMerge(draft.workflows, state.workflows);
if (state.tasks) deepMerge(draft.tasks, state.tasks);
diff --git a/apps/web/lib/ws/handlers/agent-session.ts b/apps/web/lib/ws/handlers/agent-session.ts
index 6ca21b9934..761a53e9df 100644
--- a/apps/web/lib/ws/handlers/agent-session.ts
+++ b/apps/web/lib/ws/handlers/agent-session.ts
@@ -15,6 +15,7 @@ function buildSessionUpdate(payload: any): Record {
if (payload.agent_profile_snapshot)
update.agent_profile_snapshot = payload.agent_profile_snapshot;
if (payload.is_passthrough !== undefined) update.is_passthrough = payload.is_passthrough;
+ if (payload.session_metadata !== undefined) update.metadata = payload.session_metadata;
return update;
}
diff --git a/apps/web/package.json b/apps/web/package.json
index 040ac66fe2..fac7f21df6 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -9,7 +9,10 @@
"build": "cross-env NODE_ENV=production next build",
"start": "cross-env NODE_ENV=production next start",
"lint": "eslint --max-warnings 0",
- "test": "vitest run"
+ "test": "vitest run",
+ "e2e": "playwright test --config e2e/playwright.config.ts",
+ "e2e:ui": "playwright test --config e2e/playwright.config.ts --ui",
+ "e2e:headed": "playwright test --config e2e/playwright.config.ts --headed"
},
"dependencies": {
"@base-ui/react": "^1.0.0",
@@ -110,6 +113,7 @@
"zustand": "^5.0.8"
},
"devDependencies": {
+ "@playwright/test": "^1.58.2",
"@tailwindcss/postcss": "^4",
"@types/diff": "^8.0.0",
"@types/node": "^20",
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
index 6571964f8b..0f3636f7f7 100644
--- a/apps/web/vitest.config.ts
+++ b/apps/web/vitest.config.ts
@@ -11,5 +11,6 @@ export default defineConfig({
},
test: {
environment: "happy-dom",
+ exclude: ["e2e/**", "node_modules/**"],
},
});
diff --git a/docs/test_e2e.md b/docs/test_e2e_agents.md
similarity index 100%
rename from docs/test_e2e.md
rename to docs/test_e2e_agents.md
diff --git a/docs/test_e2e_web.md b/docs/test_e2e_web.md
new file mode 100644
index 0000000000..5fb8909d00
--- /dev/null
+++ b/docs/test_e2e_web.md
@@ -0,0 +1,303 @@
+# Web E2E Tests
+
+Browser-based end-to-end tests that exercise the full stack: Next.js frontend, Go backend, and mock agent. Tests run in parallel with complete isolation — each Playwright worker gets its own backend process, frontend process, database, and temp directory.
+
+**Location:** `apps/web/e2e/`
+
+## Architecture
+
+```
+┌─ Playwright ──────────────────────────────────────────────┐
+│ Worker 0 Worker 1 │
+│ ┌──────────────────────┐ ┌──────────────────────┐│
+│ │ Backend :18080 │ │ Backend :18081 ││
+│ │ Frontend :13000 │ │ Frontend :13001 ││
+│ │ SSR → localhost:18080│ │ SSR → localhost:18081││
+│ │ HOME=/tmp/e2e-0 │ │ HOME=/tmp/e2e-1 ││
+│ │ own SQLite DB │ │ own SQLite DB ││
+│ │ mock-agent only │ │ mock-agent only ││
+│ │ mock GitHub │ │ mock GitHub ││
+│ └──────────────────────┘ └──────────────────────┘│
+└───────────────────────────────────────────────────────────┘
+```
+
+- **One backend per worker** — port `18080 + workerIndex`, isolated temp HOME, own SQLite DB
+- **One frontend per worker** — port `13000 + workerIndex`, SSR routed to that worker's backend via `KANDEV_API_BASE_URL`
+- **Shared `.next/` build** — all frontend processes serve from the same pre-built output (read-only)
+- **Mock agent** — deterministic responses, no API keys needed
+- **Mock GitHub client** — reports as authenticated, returns configurable data via REST API
+- **No external dependencies** — no Docker, no GitHub tokens, no real git credentials
+
+## Prerequisites
+
+Build the backend binaries and web app before running tests:
+
+```bash
+make build-backend build-web
+```
+
+This produces `apps/backend/bin/kandev`, `apps/backend/bin/mock-agent`, and `apps/web/.next/`. The global setup script verifies all exist.
+
+## Running Tests
+
+All commands run from the repo root via Make targets (these build automatically):
+
+```bash
+make test-e2e # Headless, parallel (default)
+make test-e2e-headed # Visible browser window
+make test-e2e-ui # Playwright UI mode (step through, inspect)
+make test-e2e-report # Open HTML report from last run
+```
+
+Or directly via pnpm (requires pre-built binaries and web app):
+
+```bash
+cd apps
+pnpm --filter @kandev/web e2e # All tests
+pnpm --filter @kandev/web e2e -- --grep "task creation" # By name
+pnpm --filter @kandev/web e2e -- tests/create-task.spec.ts # Single file
+pnpm --filter @kandev/web e2e:headed # With browser
+pnpm --filter @kandev/web e2e:ui # UI mode
+```
+
+### Debug output
+
+Set `E2E_DEBUG=1` to see backend and frontend stderr in the terminal:
+
+```bash
+E2E_DEBUG=1 make test-e2e
+```
+
+## Directory Structure
+
+```
+apps/web/e2e/
+├── playwright.config.ts # Playwright configuration
+├── global-setup.ts # Verifies backend binaries and web build exist
+├── fixtures/
+│ ├── backend.ts # Worker-scoped backend + frontend process fixture
+│ └── test-base.ts # Extended test fixture (apiClient, seedData, testPage)
+├── helpers/
+│ └── api-client.ts # HTTP client for API seeding
+├── pages/
+│ ├── kanban-page.ts # Kanban board page object
+│ └── task-detail-page.ts # Task detail page object
+└── tests/
+ ├── kanban-board.spec.ts # Kanban board display
+ ├── create-task.spec.ts # Task creation flows
+ ├── task-detail.spec.ts # Task detail views
+ └── workflow-steps.spec.ts # Workflow step progression
+```
+
+## How It Works
+
+### Backend + frontend fixture (`fixtures/backend.ts`)
+
+Each Playwright worker spawns an isolated `kandev` backend and a dedicated `next start` frontend:
+
+**Backend:**
+1. Creates a temp directory as `HOME` with its own `.gitconfig`, data dir, and SQLite DB
+2. Sets environment variables for isolation:
+ - `KANDEV_DATA_DIR` — temp data directory
+ - `KANDEV_SERVER_PORT` — unique port per worker (`18080 + workerIndex`)
+ - `KANDEV_DATABASE_PATH` — temp SQLite path
+ - `KANDEV_MOCK_AGENT=true` — only loads mock agent, skips agent discovery
+ - `KANDEV_MOCK_GITHUB=true` — uses in-memory MockClient instead of real GitHub API
+ - `KANDEV_DOCKER_ENABLED=false` — no Docker
+ - `KANDEV_WORKTREE_ENABLED=false` — no worktrees
+ - `GH_TOKEN` / `GITHUB_TOKEN` stripped — prevents accidental real API calls
+3. Spawns `apps/backend/bin/kandev` and waits for `/health` to return 200
+
+**Frontend:**
+1. Spawns `npx next start --port {13000 + workerIndex}` from `apps/web/`
+2. Sets `KANDEV_API_BASE_URL` to the worker's backend URL so SSR routes correctly
+3. Waits for the frontend to become healthy
+4. All `next start` processes share the same `.next/` build output (read-only)
+
+**Teardown:** sends SIGTERM to frontend then backend, falls back to SIGKILL after 5s, cleans up temp dir.
+
+### Test base (`fixtures/test-base.ts`)
+
+Extends the backend fixture with:
+
+- **`apiClient`** (worker-scoped) — HTTP client for seeding data via the backend API
+- **`seedData`** (worker-scoped) — creates a workspace, discovers the default workflow and its steps
+- **`testPage`** (per-test) — Playwright page with a browser context whose `baseURL` points to the worker's frontend, plus `localStorage` pre-configured:
+ - `kandev.onboarding.completed = "true"` — skips onboarding
+ - `window.__KANDEV_API_BASE_URL` — points to the worker's backend (client-side override)
+
+### API client (`helpers/api-client.ts`)
+
+Seeds test data via REST API. Available methods:
+
+| Method | Endpoint | Purpose |
+|--------|----------|---------|
+| `createWorkspace(name)` | `POST /api/workspaces` | Create workspace |
+| `createTask(workspaceId, title, desc)` | `POST /api/tasks` | Create task |
+| `listWorkflows(workspaceId)` | `GET /api/workspaces/:id/workflows` | List workflows |
+| `listWorkflowSteps(workflowId)` | `GET /api/workflows/:id/workflow/steps` | List steps |
+| `createWorkflowStep(name, pos)` | `POST /api/workflow/steps` | Create step |
+| `moveTask(taskId, stepId)` | `POST /api/tasks/:id/move` | Move task to step |
+
+**GitHub mock control:**
+
+| Method | Endpoint | Purpose |
+|--------|----------|---------|
+| `mockGitHubReset()` | `DELETE /api/v1/github/mock/reset` | Clear all mock data |
+| `mockGitHubSetUser(username)` | `PUT /api/v1/github/mock/user` | Set authenticated user |
+| `mockGitHubAddPRs(prs)` | `POST /api/v1/github/mock/prs` | Add mock PRs |
+| `mockGitHubAddOrgs(orgs)` | `POST /api/v1/github/mock/orgs` | Add mock organizations |
+| `mockGitHubAddRepos(org, repos)` | `POST /api/v1/github/mock/repos` | Add mock repositories |
+| `mockGitHubAddReviews(owner, repo, num, reviews)` | `POST /api/v1/github/mock/reviews` | Add PR reviews |
+| `mockGitHubAddCheckRuns(owner, repo, ref, checks)` | `POST /api/v1/github/mock/checks` | Add CI check runs |
+| `mockGitHubGetStatus()` | `GET /api/v1/github/status` | Verify auth status |
+
+### Page objects (`pages/`)
+
+Page objects encapsulate selectors and navigation:
+
+- **`KanbanPage`** — `goto()`, `board`, `createTaskButton`, `taskCard(id)`, `taskCardByTitle(title)`
+- **`TaskDetailPage`** — `goto(taskId, sessionId)`, `sessionChat`, `turnCompleteIndicator`, `waitForAgentResponse(text)`
+
+### Selectors
+
+Tests use `data-testid` attributes for stability across layout/styling changes:
+
+| `data-testid` | Component |
+|----------------|-----------|
+| `kanban-board` | Kanban board container |
+| `task-card-{id}` | Individual task card |
+| `create-task-button` | Create task button |
+| `create-task-dialog` | Task creation dialog |
+| `task-title-input` | Title input in dialog |
+| `task-description-input` | Description textarea in dialog |
+| `submit-start-agent` | Start agent button |
+| `submit-plan-mode` | Plan mode option |
+| `session-chat` | Session chat panel |
+| `agent-turn-complete` | Agent turn complete indicator |
+
+## Writing New Tests
+
+### 1. Create a spec file
+
+```typescript
+// apps/web/e2e/tests/my-feature.spec.ts
+import { test, expect } from "../fixtures/test-base";
+import { KanbanPage } from "../pages/kanban-page";
+
+test.describe("my feature", () => {
+ test("does something", async ({ testPage, seedData, apiClient }) => {
+ // Seed data via API
+ const task = await apiClient.createTask(
+ seedData.workspaceId,
+ "Test Task",
+ "Description",
+ );
+
+ // Navigate and interact
+ const kanban = new KanbanPage(testPage);
+ await kanban.goto(seedData.workspaceId);
+
+ // Assert
+ await expect(kanban.taskCardByTitle("Test Task")).toBeVisible();
+ });
+});
+```
+
+### 2. Add data-testid attributes
+
+When testing new UI components, add `data-testid` to the relevant elements:
+
+```tsx
+...
+```
+
+Then reference them in page objects or directly:
+
+```typescript
+page.getByTestId("my-component");
+```
+
+### 3. Seed mock GitHub data
+
+The mock GitHub client (`KANDEV_MOCK_GITHUB=true`) reports as authenticated and serves data seeded via the `/api/v1/github/mock/` endpoints. Use the `apiClient` helper methods:
+
+```typescript
+test("shows PR feedback in settings", async ({ testPage, apiClient, seedData }) => {
+ // Seed a mock PR
+ await apiClient.mockGitHubAddPRs([{
+ number: 42,
+ title: "Add feature X",
+ state: "open",
+ head_branch: "feature-x",
+ base_branch: "main",
+ author_login: "mock-user",
+ repo_owner: "myorg",
+ repo_name: "myrepo",
+ html_url: "https://github.com/myorg/myrepo/pull/42",
+ }]);
+
+ // Seed orgs for the org picker
+ await apiClient.mockGitHubAddOrgs([{ login: "myorg" }]);
+
+ // Seed repos for the repo search
+ await apiClient.mockGitHubAddRepos("myorg", [
+ { full_name: "myorg/myrepo", owner: "myorg", name: "myrepo" },
+ ]);
+
+ // Navigate and test GitHub UI features...
+});
+```
+
+Call `mockGitHubReset()` between tests if you need a clean slate (each worker already starts fresh).
+
+### 4. Extend the API client
+
+If your test needs new seed data, add methods to `helpers/api-client.ts`:
+
+```typescript
+async createMyEntity(params: { ... }): Promise {
+ return this.post("/api/my-entities", params);
+}
+```
+
+## Configuration
+
+| Setting | Value | Notes |
+|---------|-------|-------|
+| `fullyParallel` | `true` | Tests run in parallel across workers |
+| `workers` | auto (local), 2 (CI) | Worker count |
+| `timeout` | 60s | Per-test timeout |
+| `retries` | 0 (local), 2 (CI) | Retry count |
+| `trace` | on-first-retry | Playwright trace recording |
+| `screenshot` | only-on-failure | Auto-screenshot |
+| `video` | on-first-retry | Video recording |
+| Browser | Chromium only | Single browser project |
+
+## CI
+
+The GitHub Actions workflow (`.github/workflows/e2e-tests.yml`) runs on pushes and PRs to `main` that touch `apps/backend/`, `apps/web/`, or `apps/packages/`. It:
+
+1. Builds Go binaries (`make build-backend`)
+2. Installs pnpm dependencies
+3. Installs Playwright Chromium
+4. Runs `make test-e2e`
+5. Uploads `playwright-report/` and `test-results/` as artifacts on failure
+
+## Troubleshooting
+
+**Tests fail with "Backend did not become healthy" or "Service did not become healthy"**
+- Ensure `make build-backend build-web` completed successfully
+- Check that `apps/backend/bin/kandev`, `apps/backend/bin/mock-agent`, and `apps/web/.next/` exist
+- Run with `E2E_DEBUG=1` to see backend and frontend stderr
+
+**Tests fail with "Cannot find module" or import errors**
+- Run `cd apps && pnpm install` to ensure dependencies are up to date
+
+**Port conflicts**
+- Tests use ports 18080+ for backends and 13000+ for frontends (one per worker)
+- Ensure nothing else is listening on those ports
+
+**Flaky timeouts**
+- Backend and frontend health checks have a 30s timeout; if your machine is slow, this may need increasing in `fixtures/backend.ts`
+- Per-test timeout is 60s; adjust in `playwright.config.ts` if needed