Introduce AutoMetabuilder core components and workflow packages:

- Implement core components: CLI argument parsing, environment loading, GitHub service creation, and logging configuration.
- Add support for OpenAI client setup and model resolution.
- Develop SDLC context loader from GitHub and repository files.
- Implement workflow context and engine builders.
- Introduce major workflow packages: `game_tick_loop` and `contextual_iterative_loop`.
- Update localization files with new package descriptions and labels.
- Streamline web navigation by loading items from a dedicated JSON file.

README.md

@@ -48,6 +48,18 @@ PYTHONPATH=backend pytest backend/tests/test_main.py backend/tests/test_metadata
 PYTHONPATH=backend pytest backend/tests/ui           # Playwright UI tests; they skip when socket creation is blocked
 ```
 
+### Storybook & Playwright
+
+```bash
+cd frontend
+npx playwright install chromium
+npm run storybook           # launch the component catalog at http://localhost:6006
+npm run build:storybook     # compile the catalog to static files
+npm run test:e2e            # runs the Playwright tests defined under frontend/playwright/tests
+```
+
+Storybook renders the Material UI sections from `frontend/autometabuilder/components`, and Playwright now targets `http://localhost:3000` (override with `NEXT_PUBLIC_API_BASE` if your backend runs elsewhere).
+
 ### Frontend
 
 ```bash

ROADMAP.md

@@ -41,28 +41,23 @@
 - [x] **Workflow Template Picker**: AJAX-loaded catalog with localized labels/descriptions.
 - [x] **Atomic Jinja Components**: Split dashboard/prompt/settings/translations/sidebar into single-macro files.
 - [x] **AJAX Navigation Data**: Render sidebar links from API payload with a client-side fallback.
-- [ ] **n8n-Style Visual Workflow Canvas (Breakdown)**:
-- [ ] **Canvas Layout Engine**: DAG layout, node positioning, zoom/pan, and fit-to-view.
 - [x] **Node Palette + Search**: Categorized plugin library with search and click-to-add.
-- [ ] **Palette Tags + Drag-to-Canvas**: Add tags, drag handles, and drag/drop placement.
-- [ ] **Atomic Node Cards**: Compact node tiles with status badge, type icon, and inline rename.
-- [ ] **Ports + Connectors**: Visual input/output ports with link creation + validation.
-- [ ] **Edge Routing**: Orthogonal edge routing with arrowheads, hover/selection state.
-- [ ] **Mini Map**: Overview map for large workflows with viewport control.
-- [ ] **Selection + Multi-Edit**: Multi-select nodes, bulk delete, and bulk edit fields.
-- [ ] **Inspector Panel**: Right-side inspector to edit node inputs/outputs/conditions.
-- [ ] **Inline Validation**: Missing input warnings, type mismatch hints, and disabled run cues.
-- [ ] **Execution Preview**: Simulate data flow highlights and show store bindings.
-- [ ] **Auto-Save Drafts**: Local draft save/restore with change markers.
-- [ ] **Template Import/Export**: Export current workflow and import to apply or merge.
-- [ ] **Keyboard Shortcuts**: Add node, delete, duplicate, undo/redo, and search.
-- [ ] **Undo/Redo Stack**: Reversible edits for canvas and inspector changes.
-- [ ] **Context Menu**: Right-click actions for node, edge, and canvas.
-- [ ] **Performance Tuning**: Virtualized node rendering for large graphs.
 
 ## Phase 8: Modern Frontend Platform
 - [x] **Flask + Next.js split**: Replace the Jinja-based FastAPI UI with a Flask REST backend and Next.js frontend consuming metadata, translations, workflows, logs, and nav via AJAX.
 - [x] **Atomic Next sections**: Compose dashboard, workflow builder, prompt editor, settings, and translation editor into dedicated components powered by localized strings.
 - [x] **Workflow templates & navigation JSON**: Serve workflow packages, nav items, and translation mappings from metadata-backed JSON endpoints.
 - [ ] **Document build constraints**: Record that `next build --webpack` fails in this sandbox because bundlers attempt to bind new ports, and continue iterating locally.
+- [x] **Storybook + Playwright**: Add a Storybook catalog for the Material UI sections and a Playwright suite (with `npm run test:e2e`) so the frontend gets visual regression/backstop coverage tied to the Flask API.
 - [x] **Material UI + webhooks**: Drive the dashboard with Material UI surfaces and a lightweight webhook emitter/listener so downstream components can react to run events without prop drilling.
+
+## Phase 9: Visual Workflow Canvas
+- [ ] **n8n-Style Visual Workflow Canvas (Breakdown)**: Capture node + edge details so the canvas understands the micro-plugin graphs.
+- [ ] **Canvas Layout Engine**: DAG layout, zoom/pan, and background grid to keep large graphs navigable.
+- [ ] **Palette Tags + Drag-to-Canvas**: Tag nodes, add drag handles, and allow drag/drop placement onto the canvas.
+- [ ] **Atomic Node Cards**: Compact tile UI with status badges, icons, and inline rename/edit actions.
+- [ ] **Ports + Connectors**: Visualize input/output ports with validation and JSON metadata.
+- [ ] **Edge Routing + Mini Map**: Orthogonal edges with hover/selection states plus a mini overview map.
+- [ ] **Selection + Inspector**: Multi-select, bulk edit, right-side inspector for node/edge properties.
+- [ ] **Inline Validation & Execution Preview**: Warn on missing inputs and simulate data flow + store bindings.
+- [ ] **Workspace Controls**: Auto-save drafts, template import/export, keyboard shortcuts, undo/redo stack, context menus, and performant rendering for big graphs.

frontend/.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../autometabuilder/**/*.stories.@(tsx|mdx)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react-webpack5",
+  docs: {
+    autodocs: "tag",
+  },
+};
+
+export default config;

frontend/.storybook/preview.ts

@@ -0,0 +1,13 @@
+import "../autometabuilder/styles/globals.scss";
+
+export const parameters = {
+  layout: "fullscreen",
+  backgrounds: {
+    default: "dark",
+    values: [
+      { name: "dark", value: "#04070f" },
+      { name: "panel", value: "#0d111b" },
+    ],
+  },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+};

frontend/package.json

@@ -6,12 +6,16 @@
     "dev": "next dev --webpack",
     "build": "next build --webpack",
     "start": "next start --webpack",
-    "lint": "eslint"
+    "lint": "eslint",
+    "storybook": "start-storybook -p 6006 -c .storybook",
+    "build:storybook": "build-storybook -c .storybook",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed"
   },
   "dependencies": {
     "next": "16.1.1",
-    "react": "19.2.3",
+    "react": "18.2.0",
-    "react-dom": "19.2.3"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -21,6 +25,11 @@
     "@emotion/styled": "^11.12.0",
     "@mui/icons-material": "^5.14.4",
     "@mui/material": "^5.15.0",
+    "@playwright/test": "^1.41.0",
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-interactions": "^7.0.0",
+    "@storybook/react": "^7.0.0",
+    "@storybook/react-webpack5": "^7.0.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.1",
     "sass": "^1.95.0"

frontend/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./playwright/tests",
+  timeout: 60_000,
+  expect: {
+    timeout: 5_000,
+  },
+  fullyParallel: true,
+  retries: process.env.CI ? 1 : 0,
+  reporter: [["list"], ["html", { open: "never" }]],
+  use: {
+    actionTimeout: 5_000,
+    baseURL: process.env.NEXT_PUBLIC_API_BASE || "http://localhost:3000",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+    headless: true,
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});

frontend/playwright/tests/app.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from "@playwright/test";
+
+test("dashboard loads", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("text=Dashboard")).toBeVisible();
+});

frontend/stories/DashboardSection.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import DashboardSection from "../autometabuilder/components/sections/DashboardSection";
+
+const meta: Meta<typeof DashboardSection> = {
+  title: "Sections/Dashboard",
+  component: DashboardSection,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DashboardSection>;
+
+export const Default: Story = {
+  args: {
+    status: {
+      is_running: false,
+      mvp_reached: false,
+      config: {},
+    },
+    logs: "Start: nothing happening yet.",
+    onRun: async () => {},
+    t: (key: string, fallback?: string) => fallback ?? key,
+  },
+};