bmad-visual 0.1.0

package/templates/dashboard/src/App.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect } from "react";
+import { useSquadSocket } from "@/hooks/useSquadSocket";
+import { PhaserGame } from "@/office/PhaserGame";
+
+const HEADER_TEXT = "Infinity Squad";
+const TYPE_SPEED = 80;
+
+function TypewriterHeader() {
+  const [displayed, setDisplayed] = useState("");
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    let i = 0;
+    const interval = setInterval(() => {
+      i++;
+      setDisplayed(HEADER_TEXT.slice(0, i));
+      if (i >= HEADER_TEXT.length) {
+        clearInterval(interval);
+        setTimeout(() => setDone(true), 600);
+      }
+    }, TYPE_SPEED);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <header
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0 24px",
+        height: 56,
+        minHeight: 56,
+        borderBottom: "1px solid rgba(16, 185, 129, 0.15)",
+        background: "linear-gradient(90deg, #080c16 0%, #0f1629 50%, #080c16 100%)",
+        fontFamily: "'Inter', sans-serif",
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
+        <img
+          src="/assets/logo.png"
+          alt="Logo"
+          style={{
+            height: 32,
+            width: 32,
+            objectFit: "contain",
+            filter: "drop-shadow(0 0 6px rgba(16, 185, 129, 0.4))",
+          }}
+        />
+        <span
+          style={{
+            fontSize: 20,
+            fontWeight: 700,
+            letterSpacing: 1.5,
+            color: "#ffffff",
+          }}
+        >
+          {displayed}
+          {!done && (
+            <span
+              style={{
+                display: "inline-block",
+                width: 2,
+                height: "1.1em",
+                marginLeft: 3,
+                background: "#10b981",
+                animation: "blink-caret 0.6s step-end infinite",
+                verticalAlign: "text-bottom",
+              }}
+            />
+          )}
+        </span>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          fontSize: 12,
+          color: "#6b7894",
+          fontWeight: 500,
+        }}
+      >
+        <span
+          style={{
+            width: 6,
+            height: 6,
+            borderRadius: "50%",
+            background: "#10b981",
+            boxShadow: "0 0 6px #10b981",
+          }}
+        />
+        BMAD Method
+      </div>
+    </header>
+  );
+}
+
+export function App() {
+  useSquadSocket();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: "100%",
+      }}
+    >
+      <TypewriterHeader />
+
+      <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
+        <PhaserGame />
+      </div>
+    </div>
+  );
+}

package/templates/dashboard/src/components/SquadCard.tsx

@@ -0,0 +1,47 @@
+import type { SquadInfo, SquadState } from "@/types/state";
+import { StatusBadge } from "./StatusBadge";
+
+interface SquadCardProps {
+  squad: SquadInfo;
+  state: SquadState | undefined;
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+export function SquadCard({ squad, state, isSelected, onSelect }: SquadCardProps) {
+  const isActive = !!state;
+  const status = state?.status ?? "inactive";
+
+  return (
+    <button
+      onClick={onSelect}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        width: "100%",
+        padding: "10px 12px",
+        border: "none",
+        borderLeft: isSelected ? "3px solid var(--accent-cyan)" : "3px solid transparent",
+        background: isSelected ? "var(--bg-secondary)" : "transparent",
+        color: isActive ? "var(--text-primary)" : "var(--text-secondary)",
+        cursor: "pointer",
+        textAlign: "left",
+        fontSize: 13,
+        fontFamily: "inherit",
+        transition: "all 0.15s ease",
+      }}
+    >
+      <StatusBadge status={status} />
+      <span style={{ marginRight: 4 }}>{squad.icon}</span>
+      <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+        {squad.name}
+      </span>
+      {state?.step && (
+        <span style={{ fontSize: 11, color: "var(--text-secondary)" }}>
+          {state.step.current}/{state.step.total}
+        </span>
+      )}
+    </button>
+  );
+}

package/templates/dashboard/src/components/SquadSelector.tsx

@@ -0,0 +1,61 @@
+import { useSquadStore } from "@/store/useSquadStore";
+import { SquadCard } from "./SquadCard";
+
+export function SquadSelector() {
+  const squads = useSquadStore((s) => s.squads);
+  const activeStates = useSquadStore((s) => s.activeStates);
+  const selectedSquad = useSquadStore((s) => s.selectedSquad);
+  const selectSquad = useSquadStore((s) => s.selectSquad);
+
+  // Sort: active squads first, then alphabetical
+  const squadList = Array.from(squads.values()).sort((a, b) => {
+    const aActive = activeStates.has(a.code) ? 0 : 1;
+    const bActive = activeStates.has(b.code) ? 0 : 1;
+    if (aActive !== bActive) return aActive - bActive;
+    return a.name.localeCompare(b.name);
+  });
+
+  return (
+    <aside
+      style={{
+        width: 240,
+        minWidth: 240,
+        height: "100%",
+        background: "var(--bg-sidebar)",
+        borderRight: "1px solid var(--border)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          padding: "16px 12px 8px",
+          fontSize: 11,
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: 1,
+          color: "var(--text-secondary)",
+        }}
+      >
+        Squads
+      </div>
+      <div style={{ flex: 1, overflowY: "auto" }}>
+        {squadList.length === 0 && (
+          <div style={{ padding: "16px 12px", color: "var(--text-secondary)", fontSize: 12 }}>
+            No squads found
+          </div>
+        )}
+        {squadList.map((squad) => (
+          <SquadCard
+            key={squad.code}
+            squad={squad}
+            state={activeStates.get(squad.code)}
+            isSelected={selectedSquad === squad.code}
+            onSelect={() => selectSquad(squad.code)}
+          />
+        ))}
+      </div>
+    </aside>
+  );
+}

package/templates/dashboard/src/components/StatusBadge.tsx

@@ -0,0 +1,32 @@
+import type { SquadStatus } from "@/types/state";
+
+const STATUS_COLORS: Record<SquadStatus | "inactive", string> = {
+  idle: "#888",
+  running: "var(--accent-cyan)",
+  completed: "var(--accent-green)",
+  checkpoint: "var(--accent-amber)",
+  inactive: "#444",
+};
+
+interface StatusBadgeProps {
+  status: SquadStatus | "inactive";
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  const color = STATUS_COLORS[status];
+  const isPulsing = status === "running" || status === "checkpoint";
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        backgroundColor: color,
+        boxShadow: isPulsing ? `0 0 6px ${color}` : "none",
+        animation: isPulsing ? "pulse 1.5s ease-in-out infinite" : "none",
+      }}
+    />
+  );
+}

package/templates/dashboard/src/components/StatusBar.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { useSquadStore } from "@/store/useSquadStore";
+import { formatElapsed } from "@/lib/formatTime";
+
+export function StatusBar() {
+  const selectedSquad = useSquadStore((s) => s.selectedSquad);
+  const state = useSquadStore((s) =>
+    s.selectedSquad ? s.activeStates.get(s.selectedSquad) : undefined
+  );
+  const isConnected = useSquadStore((s) => s.isConnected);
+
+  // Elapsed timer
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (!state?.startedAt) {
+      setElapsed(0);
+      return;
+    }
+
+    const startTime = new Date(state.startedAt).getTime();
+    const tick = () => setElapsed(Date.now() - startTime);
+    tick();
+    const interval = setInterval(tick, 1000);
+    return () => clearInterval(interval);
+  }, [state?.startedAt]);
+
+  if (!selectedSquad || !state) {
+    return (
+      <footer style={footerStyle}>
+        <span style={{ color: "var(--text-secondary)" }}>
+          Select an active squad to monitor
+        </span>
+        <ConnectionDot connected={isConnected} />
+      </footer>
+    );
+  }
+
+  return (
+    <footer style={footerStyle}>
+      <div style={{ display: "flex", alignItems: "center", gap: 16, flex: 1, minWidth: 0 }}>
+        <span>
+          Step {state.step.current}/{state.step.total}
+          {state.step.label ? ` — ${state.step.label}` : ""}
+        </span>
+        {state.startedAt && (
+          <span style={{ color: "var(--text-secondary)" }}>
+            {formatElapsed(elapsed)}
+          </span>
+        )}
+        {state.handoff && (
+          <span
+            style={{
+              flex: 1,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              color: "var(--text-secondary)",
+              fontSize: 12,
+            }}
+            title={`${state.handoff.from} → ${state.handoff.to}: ${state.handoff.message}`}
+          >
+            {state.handoff.from} → {state.handoff.to}: {state.handoff.message}
+          </span>
+        )}
+      </div>
+      <ConnectionDot connected={isConnected} />
+    </footer>
+  );
+}
+
+function ConnectionDot({ connected }: { connected: boolean }) {
+  return (
+    <span
+      title={connected ? "Connected" : "Disconnected"}
+      style={{
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        backgroundColor: connected ? "var(--accent-green)" : "var(--accent-red)",
+        flexShrink: 0,
+      }}
+    />
+  );
+}
+
+const footerStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "8px 16px",
+  borderTop: "1px solid var(--border)",
+  background: "var(--bg-sidebar)",
+  fontSize: 13,
+  height: 40,
+  minHeight: 40,
+};

package/templates/dashboard/src/hooks/useSquadSocket.ts

@@ -0,0 +1,137 @@
+import { useEffect, useRef } from "react";
+import { useSquadStore } from "@/store/useSquadStore";
+import type { WsMessage } from "@/types/state";
+
+const RECONNECT_BASE_MS = 1000;
+const RECONNECT_MAX_MS = 30000;
+const WS_FAIL_THRESHOLD = 3;
+const POLL_INTERVAL_MS = 3000;
+
+export function useSquadSocket() {
+  const wsRef = useRef<WebSocket | null>(null);
+  const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const setConnected = useSquadStore((s) => s.setConnected);
+  const setSnapshot = useSquadStore((s) => s.setSnapshot);
+  const updateSquadState = useSquadStore((s) => s.updateSquadState);
+  const setSquadInactive = useSquadStore((s) => s.setSquadInactive);
+
+  useEffect(() => {
+    let disposed = false;
+    let reconnectTimer: ReturnType<typeof setTimeout> | undefined;
+    let reconnectDelay = RECONNECT_BASE_MS;
+    let wsFailCount = 0;
+
+    function dispatch(msg: WsMessage) {
+      if (disposed) return;
+      switch (msg.type) {
+        case "SNAPSHOT":
+          setSnapshot(msg.squads, msg.activeStates);
+          break;
+        case "SQUAD_UPDATE":
+          updateSquadState(msg.squad, msg.state);
+          break;
+        case "SQUAD_INACTIVE":
+          setSquadInactive(msg.squad);
+          break;
+      }
+    }
+
+    // ── HTTP polling fallback ───────────────────────────────────────────
+
+    function stopPolling() {
+      if (pollTimerRef.current) {
+        clearInterval(pollTimerRef.current);
+        pollTimerRef.current = null;
+      }
+    }
+
+    function startPolling() {
+      stopPolling();
+
+      const poll = async () => {
+        if (disposed) return;
+        try {
+          const res = await fetch("/api/snapshot", { cache: "no-store" });
+          if (!res.ok || disposed) return;
+          const msg: WsMessage = await res.json();
+          dispatch(msg);
+          setConnected(true);
+        } catch {
+          // Endpoint not available — will retry on next interval
+        }
+      };
+
+      poll();
+      pollTimerRef.current = setInterval(poll, POLL_INTERVAL_MS);
+    }
+
+    // ── WebSocket connection ────────────────────────────────────────────
+
+    function connect() {
+      if (disposed) return;
+
+      if (reconnectTimer !== undefined) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = undefined;
+      }
+
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const ws = new WebSocket(
+        `${protocol}//${window.location.host}/__squads_ws`,
+      );
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        if (disposed) { ws.close(); return; }
+        setConnected(true);
+        reconnectDelay = RECONNECT_BASE_MS;
+        wsFailCount = 0;
+        stopPolling();
+      };
+
+      ws.onmessage = (event) => {
+        if (disposed) return;
+        try {
+          const msg: WsMessage = JSON.parse(event.data);
+          dispatch(msg);
+        } catch {
+          // Ignore malformed messages
+        }
+      };
+
+      ws.onclose = () => {
+        if (disposed) return;
+
+        setConnected(false);
+        wsFailCount++;
+
+        if (wsFailCount >= WS_FAIL_THRESHOLD) {
+          startPolling();
+        }
+
+        reconnectTimer = setTimeout(() => {
+          reconnectDelay = Math.min(reconnectDelay * 2, RECONNECT_MAX_MS);
+          connect();
+        }, reconnectDelay);
+      };
+
+      ws.onerror = () => {
+        // onerror is always followed by onclose — just let onclose handle it.
+        // Don't call ws.close() here to avoid "closed before established" in StrictMode.
+      };
+    }
+
+    // Start polling immediately as a reliable baseline, then upgrade to WS
+    startPolling();
+    connect();
+
+    return () => {
+      disposed = true;
+      if (reconnectTimer !== undefined) clearTimeout(reconnectTimer);
+      stopPolling();
+      wsRef.current?.close();
+      wsRef.current = null;
+    };
+  }, [setConnected, setSnapshot, updateSquadState, setSquadInactive]);
+}

package/templates/dashboard/src/lib/formatTime.ts

@@ -0,0 +1,16 @@
+/**
+ * Formats elapsed milliseconds as "MM:SS" or "HH:MM:SS" if over an hour.
+ */
+export function formatElapsed(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const pad = (n: number) => n.toString().padStart(2, "0");
+
+  if (hours > 0) {
+    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  }
+  return `${pad(minutes)}:${pad(seconds)}`;
+}

package/templates/dashboard/src/lib/normalizeState.ts

@@ -0,0 +1,25 @@
+import type { SquadState, Agent } from "@/types/state";
+
+/**
+ * Returns agents sorted by desk position (row first, then col).
+ */
+export function sortAgentsByDesk(agents: Agent[]): Agent[] {
+  return [...agents].sort((a, b) => {
+    if (a.desk.row !== b.desk.row) return a.desk.row - b.desk.row;
+    return a.desk.col - b.desk.col;
+  });
+}
+
+/**
+ * Find agent by id.
+ */
+export function findAgent(state: SquadState, agentId: string): Agent | undefined {
+  return state.agents.find((a) => a.id === agentId);
+}
+
+/**
+ * Returns the currently working agent, if any.
+ */
+export function getWorkingAgent(state: SquadState): Agent | undefined {
+  return state.agents.find((a) => a.status === "working");
+}

package/templates/dashboard/src/main.tsx

@@ -0,0 +1,14 @@
+if (import.meta.env.DEV) {
+  import("react-grab");
+}
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);