pixl-mcp 0.1.0

package/preview-app/src/FlowCanvas.tsx

@@ -0,0 +1,208 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  Controls,
+  Handle,
+  Position,
+  MarkerType,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  type Node,
+  type Edge,
+  type Connection,
+  type NodeProps,
+} from "@xyflow/react";
+import dagre from "dagre";
+import "@xyflow/react/dist/style.css";
+import { api, type Flow, type Screen } from "./api";
+
+// Thumbnail geometry: a full 390×844 screen scaled down into a node.
+const SCALE = 0.28;
+const THUMB_W = Math.round(390 * SCALE); // 109
+const THUMB_H = Math.round(844 * SCALE); // 236
+const NODE_W = THUMB_W + 20;
+const NODE_H = THUMB_H + 34;
+
+type ScreenData = { label: string; html: string };
+type ScreenNodeType = Node<ScreenData, "screen">;
+
+/** A node = a live thumbnail of the screen plus its name, with edge handles. */
+function ScreenNode({ data }: NodeProps<ScreenNodeType>) {
+  return (
+    <div className="flow-node">
+      <Handle type="target" position={Position.Left} />
+      <div className="flow-thumb" style={{ width: THUMB_W, height: THUMB_H }}>
+        {data.html ? (
+          <iframe
+            title={data.label}
+            srcDoc={data.html}
+            sandbox="allow-scripts"
+            width={390}
+            height={844}
+            style={{ transform: `scale(${SCALE})`, transformOrigin: "top left", border: 0 }}
+          />
+        ) : (
+          <div className="flow-thumb-empty">not generated yet</div>
+        )}
+      </div>
+      <div className="flow-node-label">{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+    </div>
+  );
+}
+
+const nodeTypes = { screen: ScreenNode };
+
+/** dagre left-to-right auto-layout; returns nodes with fresh positions. */
+function autoLayout(nodes: ScreenNodeType[], edges: Edge[]): ScreenNodeType[] {
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: "LR", nodesep: 50, ranksep: 90 });
+  nodes.forEach((n) => g.setNode(n.id, { width: NODE_W, height: NODE_H }));
+  edges.forEach((e) => g.setEdge(e.source, e.target));
+  dagre.layout(g);
+  return nodes.map((n) => {
+    const p = g.node(n.id);
+    return { ...n, position: { x: p.x - NODE_W / 2, y: p.y - NODE_H / 2 } };
+  });
+}
+
+const edgeOf = (e: { id: string; source: string; target: string; label?: string }): Edge => ({
+  id: e.id,
+  source: e.source,
+  target: e.target,
+  label: e.label || undefined,
+  markerEnd: { type: MarkerType.ArrowClosed },
+  labelStyle: { fill: "#e7e9ee", fontSize: 11 },
+  labelBgStyle: { fill: "#1d2027" },
+  style: { stroke: "#6366f1" },
+});
+
+/**
+ * Draggable user-journey canvas (React Flow). Renders flow.json, persists node
+ * drags + edge edits back through /api/flow, and offers dagre auto-layout. It
+ * skips the reload it triggers itself so a save doesn't yank the canvas.
+ */
+export function FlowCanvas({ screens, version }: { screens: Screen[]; version: number }) {
+  const [nodes, setNodes, onNodesChange] = useNodesState<ScreenNodeType>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+  const justSaved = useRef(false);
+  const dragging = useRef(false);
+
+  const htmlById = useMemo(() => new Map(screens.map((s) => [s.id, s.html])), [screens]);
+
+  const persist = useCallback((nds: ScreenNodeType[], eds: Edge[]) => {
+    justSaved.current = true;
+    const flow: Flow = {
+      nodes: nds.map((n) => ({
+        id: n.id,
+        screenId: n.id,
+        label: n.data.label,
+        x: Math.round(n.position.x),
+        y: Math.round(n.position.y),
+      })),
+      edges: eds.map((e, i) => ({
+        id: e.id || `e${i}`,
+        source: e.source,
+        target: e.target,
+        label: typeof e.label === "string" ? e.label : "",
+      })),
+    };
+    api.saveFlow(flow).catch(() => undefined);
+  }, []);
+
+  const load = useCallback(async () => {
+    if (justSaved.current) {
+      justSaved.current = false; // this reload is the echo of our own save
+      return;
+    }
+    if (dragging.current) return;
+    const flow = await api.flow();
+    setNodes(
+      flow.nodes.map((n) => ({
+        id: n.id,
+        type: "screen",
+        position: { x: n.x, y: n.y },
+        data: { label: n.label, html: htmlById.get(n.screenId) ?? "" },
+      })),
+    );
+    setEdges(flow.edges.map(edgeOf));
+  }, [htmlById, setNodes, setEdges]);
+
+  useEffect(() => {
+    load();
+  }, [load, version]);
+
+  const onConnect = useCallback(
+    (c: Connection) => {
+      setEdges((eds) => {
+        const next = addEdge({ ...edgeOf({ id: `e${eds.length}`, source: c.source!, target: c.target! }) }, eds);
+        persist(nodes, next);
+        return next;
+      });
+    },
+    [nodes, persist, setEdges],
+  );
+
+  const onEdgeDoubleClick = useCallback(
+    (_: unknown, edge: Edge) => {
+      const label = window.prompt("Transition label", typeof edge.label === "string" ? edge.label : "");
+      if (label === null) return;
+      setEdges((eds) => {
+        const next = eds.map((e) => (e.id === edge.id ? { ...e, label: label || undefined } : e));
+        persist(nodes, next);
+        return next;
+      });
+    },
+    [nodes, persist, setEdges],
+  );
+
+  const relayout = useCallback(() => {
+    const laid = autoLayout(nodes, edges);
+    setNodes(laid);
+    persist(laid, edges);
+  }, [nodes, edges, setNodes, persist]);
+
+  if (nodes.length === 0) {
+    return (
+      <div className="placeholder">
+        <p>No journey yet.</p>
+        <p className="dim">
+          Ask your assistant to plan screens (pixl_plan_screens) or set the flow (pixl_set_flow) —
+          the journey appears here as a draggable map.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flow-canvas">
+      <div className="flow-toolbar">
+        <button onClick={relayout}>Auto-layout</button>
+        <span className="dim">Drag nodes to rearrange · drag handle→handle to link · double-click an arrow to label it</span>
+      </div>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onEdgeDoubleClick={onEdgeDoubleClick}
+        onNodeDragStart={() => (dragging.current = true)}
+        onNodeDragStop={() => {
+          dragging.current = false;
+          persist(nodes, edges);
+        }}
+        fitView
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background variant={BackgroundVariant.Dots} gap={22} size={1.5} color="#2a2e38" />
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+}

package/preview-app/src/Gallery.tsx

@@ -0,0 +1,35 @@
+import type { Screen } from "./api";
+
+/** Renders each screen inside a 390×844 phone frame via a sandboxed iframe. */
+export function Gallery({ screens }: { screens: Screen[] }) {
+  if (screens.length === 0) {
+    return (
+      <div className="placeholder">
+        <p>No screens yet.</p>
+        <p className="dim">
+          Pick a design system, then ask your assistant to generate screens — they show up here
+          live.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="gallery">
+      {screens.map((s) => (
+        <figure key={s.id} className="phone">
+          <div className="phone-frame">
+            <iframe
+              title={s.name}
+              srcDoc={s.html}
+              sandbox="allow-scripts"
+              width={390}
+              height={844}
+            />
+          </div>
+          <figcaption>{s.name}</figcaption>
+        </figure>
+      ))}
+    </div>
+  );
+}

package/preview-app/src/api.ts

@@ -0,0 +1,51 @@
+export interface Screen {
+  id: string;
+  name: string;
+  description?: string;
+  html: string;
+}
+
+export interface FlowNode {
+  id: string;
+  screenId: string;
+  label: string;
+  x: number;
+  y: number;
+}
+export interface FlowEdge {
+  id: string;
+  source: string;
+  target: string;
+  label: string;
+}
+export interface Flow {
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+}
+
+export interface Status {
+  root: string;
+  initialized: boolean;
+  designSystem: string | null;
+  screenCount: number;
+  flowNodeCount: number;
+  previewUrl: string | null;
+}
+
+async function getJson<T>(url: string): Promise<T> {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`${url} -> ${res.status}`);
+  return res.json();
+}
+
+export const api = {
+  status: () => getJson<Status>("/api/status"),
+  screens: () => getJson<{ screens: Screen[] }>("/api/screens"),
+  flow: () => getJson<Flow>("/api/flow"),
+  saveFlow: (flow: Flow) =>
+    fetch("/api/flow", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(flow),
+    }).then((r) => r.json()),
+};

package/preview-app/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles.css";
+
+createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/preview-app/src/styles.css

@@ -0,0 +1,173 @@
+:root {
+  --bg: #0b0c0f;
+  --panel: #14161b;
+  --line: #23262e;
+  --text: #e7e9ee;
+  --dim: #8b909c;
+  --accent: #6366f1;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.brand {
+  font-weight: 700;
+  font-size: 18px;
+  letter-spacing: -0.02em;
+}
+.brand .dot {
+  color: var(--accent);
+}
+.tabs {
+  display: flex;
+  gap: 4px;
+}
+.tabs button {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--dim);
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.tabs button.active {
+  color: var(--text);
+  background: #1d2027;
+  border-color: var(--line);
+}
+.meta {
+  margin-left: auto;
+  color: var(--dim);
+  font-size: 12px;
+}
+
+.content {
+  flex: 1;
+  padding: 28px;
+}
+
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 28px;
+}
+.phone figcaption {
+  margin-top: 10px;
+  text-align: center;
+  color: var(--dim);
+  font-size: 12px;
+}
+.phone-frame {
+  width: 390px;
+  height: 844px;
+  border-radius: 40px;
+  border: 10px solid #000;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+.phone-frame iframe {
+  border: 0;
+  display: block;
+}
+
+/* --- flow canvas --- */
+.flow-canvas {
+  height: calc(100vh - 130px);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.flow-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.flow-toolbar button {
+  background: #1d2027;
+  color: var(--text);
+  border: 1px solid var(--line);
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.flow-toolbar button:hover {
+  border-color: var(--accent);
+}
+.flow-canvas .react-flow {
+  flex: 1;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel);
+  overflow: hidden;
+}
+.flow-node {
+  width: max-content;
+  padding: 8px 8px 6px;
+  background: #14161b;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+.flow-thumb {
+  overflow: hidden;
+  border-radius: 6px;
+  background: #fff;
+}
+.flow-thumb iframe {
+  pointer-events: none;
+}
+.flow-thumb-empty {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: #1d2027;
+  color: var(--dim);
+  font-size: 11px;
+}
+.flow-node-label {
+  margin-top: 6px;
+  text-align: center;
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.placeholder {
+  max-width: 460px;
+  margin: 80px auto;
+  text-align: center;
+  color: var(--text);
+}
+.placeholder .dim,
+.dim {
+  color: var(--dim);
+  font-size: 13px;
+}

package/preview-app/src/useLiveReload.ts

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+/** Subscribes to the Pixl reload channel; calls onReload when files change. */
+export function useLiveReload(onReload: () => void) {
+  useEffect(() => {
+    const proto = location.protocol === "https:" ? "wss" : "ws";
+    const ws = new WebSocket(`${proto}://${location.host}/pixl-ws`);
+    ws.onmessage = (e) => {
+      try {
+        if (JSON.parse(e.data).type === "reload") onReload();
+      } catch {
+        /* ignore */
+      }
+    };
+    return () => ws.close();
+  }, [onReload]);
+}

package/preview-app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/preview-app/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src"]
+}