Merge pull request #11 from agentdesktop-dev/peterj/uistorybook-comps

add storybook and break up UI into smaller components

Author: peterj

.github/workflows/ci.yml

@@ -39,6 +39,10 @@ jobs:
           corepack enable
           pnpm install --frozen-lockfile
 
+      - name: Install Storybook test browser
+        working-directory: frontend
+        run: pnpm --filter @agentdesktop/desktop-web exec playwright install --with-deps chromium
+
       - name: Install Linux desktop dependencies
         run: |
           sudo apt-get update

Makefile

@@ -52,4 +52,6 @@ docker:
 clean:
 	cargo clean
 	rm -rf frontend/controller/dist
+	rm -rf frontend/controller/storybook-static
 	rm -rf frontend/desktop/dist
+	rm -rf frontend/desktop/storybook-static

frontend/.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 */node_modules/
 */dist/
+*/storybook-static/
 *.log
 *.tsbuildinfo

frontend/biome.json

@@ -1,7 +1,14 @@
 {
   "$schema": "https://biomejs.dev/schemas/2.5.8/schema.json",
   "files": {
-    "includes": ["controller/**", "desktop/**", "ui/**", "!**/dist", "!**/node_modules"]
+    "includes": [
+      "controller/**",
+      "desktop/**",
+      "ui/**",
+      "!**/dist",
+      "!**/node_modules",
+      "!**/storybook-static"
+    ]
   },
   "formatter": {
     "enabled": true,

frontend/controller/.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-a11y", "@storybook/addon-vitest"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  viteFinal: async (viteConfig) => {
+    viteConfig.build = { ...viteConfig.build, target: "es2022" };
+    return viteConfig;
+  },
+} satisfies StorybookConfig;
+
+export default config;

frontend/controller/.storybook/preview.ts

@@ -0,0 +1,35 @@
+import type { Preview } from "@storybook/react-vite";
+
+import "../src/styles.css";
+import "@agentdesktop/ui/styles.css";
+
+const controllerViewports = {
+  desktop: {
+    name: "Controller desktop (1280 × 800)",
+    styles: { width: "1280px", height: "800px" },
+    type: "desktop" as const,
+  },
+  compact: {
+    name: "Compact window (760 × 720)",
+    styles: { width: "760px", height: "720px" },
+    type: "tablet" as const,
+  },
+  mobile: {
+    name: "Mobile reflow (320 × 640)",
+    styles: { width: "320px", height: "640px" },
+    type: "mobile" as const,
+  },
+};
+
+const preview = {
+  parameters: {
+    layout: "fullscreen",
+    a11y: { test: "error" },
+    viewport: { options: controllerViewports },
+  },
+  initialGlobals: {
+    viewport: { value: "desktop", isRotated: false },
+  },
+} satisfies Preview;
+
+export default preview;

frontend/controller/README.md

@@ -0,0 +1,37 @@
+# Agent Desktop Controller UI
+
+React and Vite administration interface for controller fleet status, device
+inventory, managed configuration, and runtime settings.
+
+## Development
+
+From the repository root:
+
+```sh
+cd frontend
+pnpm install
+pnpm dev:controller
+```
+
+API requests under `/api` are proxied to `http://127.0.0.1:8080` during local
+development.
+
+## Storybook
+
+The controller views have deterministic Storybook states for development,
+interaction tests, responsive checks, and automated accessibility checks. The
+browser install is required once per Playwright version:
+
+```sh
+cd frontend
+pnpm --filter @agentdesktop/controller-web exec playwright install chromium
+pnpm storybook:controller
+```
+
+The controller Storybook runs at `http://localhost:6007/`. Run both UI suites or
+build both static Storybooks with:
+
+```sh
+pnpm test:storybook
+pnpm build:storybook
+```

frontend/controller/package.json

@@ -8,7 +8,10 @@
     "build": "tsc -b && vite build",
     "typecheck": "tsc -b --pretty false",
     "check": "biome check . && pnpm typecheck",
-    "format": "biome format --write ."
+    "format": "biome format --write .",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build",
+    "test-storybook": "vitest run --project=storybook"
   },
   "dependencies": {
     "@agentdesktop/ui": "workspace:*",
@@ -18,10 +21,18 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.8",
+    "@storybook/addon-a11y": "^10.5.9",
+    "@storybook/addon-vitest": "^10.5.9",
+    "@storybook/react-vite": "^10.5.9",
+    "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@vitejs/plugin-react": "^6.0.5",
+    "@vitest/browser-playwright": "^4.1.11",
+    "playwright": "^1.62.1",
+    "storybook": "^10.5.9",
     "typescript": "^7.0.2",
-    "vite": "^8.2.1"
+    "vite": "^8.2.1",
+    "vitest": "^4.1.11"
   }
 }