@julioventura/opensquad 0.1.17

package/dashboard/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "opensquad-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "phaser": "^3.90.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "yaml": "^2.7.1",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@types/ws": "^8.18.1",
+    "@vitejs/plugin-react": "^4.5.2",
+    "chokidar": "^4.0.3",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "ws": "^8.18.1"
+  }
+}

package/dashboard/src/App.tsx

@@ -0,0 +1,46 @@
+import { useSquadSocket } from "@/hooks/useSquadSocket";
+import { SquadSelector } from "@/components/SquadSelector";
+import { PhaserGame } from "@/office/PhaserGame";
+import { StatusBar } from "@/components/StatusBar";
+
+export function App() {
+  useSquadSocket();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: "100%",
+      }}
+    >
+      {/* Header */}
+      <header
+        style={{
+          display: "flex",
+          alignItems: "center",
+          padding: "0 16px",
+          height: 40,
+          minHeight: 40,
+          borderBottom: "1px solid var(--border)",
+          background: "var(--bg-sidebar)",
+          fontSize: 13,
+          fontWeight: 600,
+          letterSpacing: 0.5,
+        }}
+      >
+        opensquad Dashboard
+      </header>
+
+      {/* Main content */}
+      <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
+        <SquadSelector />
+        <PhaserGame />
+      </div>
+
+      {/* Footer */}
+      <StatusBar />
+    </div>
+  );
+}

package/dashboard/src/components/RunDashboardButton.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+
+interface RunDashboardInfo {
+  available: boolean;
+  url: string | null;
+  runId: string | null;
+  isLegacyOutputRoot: boolean;
+}
+
+interface RunDashboardButtonProps {
+  squadCode: string | null;
+}
+
+export function RunDashboardButton({ squadCode }: RunDashboardButtonProps) {
+  const [info, setInfo] = useState<RunDashboardInfo | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    async function load() {
+      if (!squadCode) {
+        setInfo(null);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/run-dashboard?squad=${encodeURIComponent(squadCode)}`, {
+          cache: "no-store",
+        });
+
+        if (!response.ok) {
+          if (!isCancelled) {
+            setInfo({ available: false, url: null, runId: null, isLegacyOutputRoot: false });
+          }
+          return;
+        }
+
+        const payload = await response.json() as RunDashboardInfo;
+        if (!isCancelled) setInfo(payload);
+      } catch {
+        if (!isCancelled) {
+          setInfo({ available: false, url: null, runId: null, isLegacyOutputRoot: false });
+        }
+      } finally {
+        if (!isCancelled) setLoading(false);
+      }
+    }
+
+    load();
+    return () => {
+      isCancelled = true;
+    };
+  }, [squadCode]);
+
+  if (!squadCode) return null;
+
+  const disabled = loading || !info?.available || !info.url;
+  const buttonLabel = loading
+    ? "Loading Run Dashboard..."
+    : info?.available
+      ? info.isLegacyOutputRoot
+        ? `Open Run Dashboard (${info.runId || "legacy"})`
+        : `Open Run Dashboard (${info.runId || "latest"})`
+      : "Run Dashboard Unavailable";
+
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={() => {
+        if (!info?.url) return;
+        window.open(info.url, "_blank", "noopener,noreferrer");
+      }}
+      title={info?.available ? "Open the served run dashboard for the selected squad" : "No run dashboard available for the selected squad yet"}
+      style={{
+        border: "1px solid var(--border)",
+        background: disabled ? "var(--bg-sidebar)" : "rgba(0, 194, 255, 0.12)",
+        color: disabled ? "var(--text-secondary)" : "var(--text-primary)",
+        borderRadius: 999,
+        padding: "6px 12px",
+        fontSize: 12,
+        fontWeight: 700,
+        cursor: disabled ? "not-allowed" : "pointer",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {buttonLabel}
+    </button>
+  );
+}

package/dashboard/src/components/SquadCard.tsx

@@ -0,0 +1,49 @@
+import { memo } from "react";
+import type { SquadInfo, SquadState } from "@/types/state";
+import { StatusBadge } from "./StatusBadge";
+
+interface SquadCardProps {
+  squad: SquadInfo;
+  squadCode: string;
+  state: SquadState | undefined;
+  isSelected: boolean;
+  onSelect: (code: string) => void;
+}
+
+export const SquadCard = memo(function SquadCard({ squad, squadCode, state, isSelected, onSelect }: SquadCardProps) {
+  const isActive = !!state;
+  const status = state?.status ?? "inactive";
+
+  return (
+    <button
+      onClick={() => onSelect(squadCode)}
+      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/dashboard/src/components/SquadSelector.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from "react";
+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 = useMemo(
+    () =>
+      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);
+      }),
+    [squads, activeStates],
+  );
+
+  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}
+            squadCode={squad.code}
+            state={activeStates.get(squad.code)}
+            isSelected={selectedSquad === squad.code}
+            onSelect={selectSquad}
+          />
+        ))}
+      </div>
+    </aside>
+  );
+}

package/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",
+      }}
+    />
+  );
+}