conectese 0.1.14

package/dashboard/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "conectese-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,
+        }}
+      >
+        conectese Dashboard
+      </header>
+
+      {/* Main content */}
+      <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
+        <SquadSelector />
+        <PhaserGame />
+      </div>
+
+      {/* Footer */}
+      <StatusBar />
+    </div>
+  );
+}

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