@walwal-harness/cli 7.1.8 → 7.1.10

package/apps/harness-dashboard/components/drawer/RoomMetricsTab.tsx

@@ -0,0 +1,90 @@
+"use client";
+import type { RoomState } from "@/lib/types";
+
+interface RoomMetricsTabProps {
+  room: RoomState;
+}
+
+const METRIC_LABEL: Record<string, string> = {
+  sprint_number: "Cycle",
+  last_review: "Last review",
+  last_audit: "Last audit",
+  last_check: "Last check",
+  sprint_verdict: "Verdict",
+  open_alerts: "Open alerts",
+  open_arch_risks: "Open arch risks",
+  open_regressions: "Open regressions",
+  cadence: "Cadence",
+  next_scheduled: "Next meeting",
+  active_tracks: "Active tracks",
+  active_hypothesis: "Active hypothesis",
+  active_workers: "Active workers",
+  open_incidents: "Open incidents",
+  pass_rate: "Pass rate",
+  contract_signed: "Contract signed",
+  eval_scores: "Eval scores",
+};
+
+function fmt(key: string, value: unknown): string {
+  if (value === null || value === undefined || value === "") return "—";
+  if (key === "pass_rate" && typeof value === "number") {
+    return `${Math.round(value * 100)}%`;
+  }
+  if (key === "contract_signed" && typeof value === "object" && value) {
+    const v = value as { be?: boolean; fe?: boolean };
+    const parts = [v.be ? "BE" : null, v.fe ? "FE" : null].filter(Boolean);
+    return parts.length ? parts.join("·") : "—";
+  }
+  if (key === "eval_scores" && typeof value === "object" && value) {
+    const v = value as Record<string, number | null | undefined>;
+    const parts = Object.entries(v)
+      .filter(([, s]) => typeof s === "number")
+      .map(([k, s]) => `${k.slice(0, 3)} ${(s as number).toFixed(1)}`);
+    return parts.length ? parts.join(" · ") : "—";
+  }
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+export function RoomMetricsTab({ room }: RoomMetricsTabProps) {
+  const metrics = room.metrics ?? {};
+  const entries = Object.entries(metrics);
+  return (
+    <div className="space-y-3">
+      <div className="text-gray-400 text-[11px]">
+        {room.label_ko} <span className="text-gray-600">({room.label_en})</span>
+      </div>
+      {entries.length === 0 ? (
+        <div className="text-gray-500">No metrics available for this room.</div>
+      ) : (
+        <div className="grid grid-cols-2 gap-2">
+          {entries.map(([k, v]) => (
+            <div
+              key={k}
+              data-testid={`metric-${k}`}
+              className="rounded border border-brick-wall bg-brick-wall/30 px-2 py-1.5"
+            >
+              <div className="text-[10px] uppercase tracking-wider text-gray-500">
+                {METRIC_LABEL[k] ?? k}
+              </div>
+              <div className="text-[12px] text-gray-100">{fmt(k, v)}</div>
+            </div>
+          ))}
+        </div>
+      )}
+      {room.seatLayout && (
+        <div className="rounded border border-brick-wall bg-brick-wall/30 px-2 py-1.5">
+          <div className="text-[10px] uppercase tracking-wider text-gray-500">
+            Seats
+          </div>
+          <div className="text-[12px] text-gray-100">
+            {room.seatLayout.occupants.length} / {room.seatLayout.seats}
+            {room.seatLayout.overflow > 0 && (
+              <span className="text-aura-alert"> +{room.seatLayout.overflow}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/harness-dashboard/components/drawer/TracksTab.tsx

@@ -0,0 +1,47 @@
+"use client";
+import type { ParallelTrack } from "@/lib/types";
+
+const STATUS_TONE: Record<string, string> = {
+  dispatched: "border-aura-talking/40 bg-aura-talking/10 text-aura-talking",
+  in_progress: "border-aura-typing/40 bg-aura-typing/10 text-aura-typing",
+  joined: "border-aura-typing/60 bg-aura-typing/20 text-aura-typing",
+  blocked: "border-aura-alert/40 bg-aura-alert/10 text-aura-alert",
+};
+
+interface TracksTabProps {
+  tracks: ParallelTrack[];
+}
+
+export function TracksTab({ tracks }: TracksTabProps) {
+  if (tracks.length === 0) {
+    return (
+      <div className="text-gray-500" data-testid="tracks-empty">
+        No parallel tracks active.
+      </div>
+    );
+  }
+  return (
+    <ul className="space-y-2" data-testid="tracks-list">
+      {tracks.map((t) => (
+        <li
+          key={t.id}
+          data-testid={`track-row-${t.id}`}
+          className={`rounded border px-2 py-1.5 ${
+            STATUS_TONE[t.status] ?? STATUS_TONE.dispatched
+          }`}
+        >
+          <div className="flex items-center justify-between text-[11px]">
+            <span className="font-semibold">{t.id}</span>
+            <span className="uppercase tracking-wider text-[9px]">{t.status}</span>
+          </div>
+          <div className="mt-1 text-[10px] text-gray-300">
+            {t.from_meeting} → {t.to_dept} ({t.to_room})
+          </div>
+          {t.label && (
+            <div className="mt-0.5 text-[11px] text-gray-100">{t.label}</div>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/apps/harness-dashboard/components/three/ArchiveBoxes.tsx

@@ -0,0 +1,95 @@
+"use client";
+import { Html } from "@react-three/drei";
+import { ROOM_RECTS } from "@/lib/iso";
+import type { ArchiveStat } from "@/lib/types";
+
+interface ArchiveBoxesProps {
+  archive: ArchiveStat;
+}
+
+// Visualises completed sprints as cardboard boxes stacked inside the archive
+// room. The most-recent three are labelled (drei <Html>); the rest are
+// anonymous boxes plus a "+N more" label.
+export function ArchiveBoxes({ archive }: ArchiveBoxesProps) {
+  const room = ROOM_RECTS.find((r) => r.id === "archive")!;
+  const cols = 6;
+  const rowSpacingX = (room.ww - 1.0) / cols; // leave 0.5 inset on each side
+  const rowSpacingZ = 0.45;
+  const baseX = room.wx + 0.5;
+  const baseZ = room.wy + 0.5;
+
+  // Use the full sorted list so each rendered box can carry its own verdict
+  // colour, not just the recent three.
+  const ordered = archive.all.length > 0 ? archive.all : archive.recent;
+  const boxes = Array.from({ length: archive.sprintCount }, (_, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const entry = i < ordered.length ? ordered[i] : null;
+    return {
+      x: baseX + col * rowSpacingX + rowSpacingX / 2,
+      z: baseZ + row * rowSpacingZ,
+      isRecent: i < 3,
+      entry,
+      result: entry?.result ?? "unknown",
+    };
+  });
+
+  const overflowAfterThree = Math.max(0, archive.sprintCount - 3);
+
+  return (
+    <group data-testid="archive-boxes">
+      {boxes.map((b, i) => {
+        const baseColor = b.isRecent ? "#caa978" : "#8a7c5a";
+        const tapeColor =
+          b.result === "PASS"
+            ? "#34d399"
+            : b.result === "FAIL"
+            ? "#ef4444"
+            : "#6a5a3a";
+        return (
+        <group key={i} position={[b.x, 0.21, b.z]} data-testid={`archive-box-${b.result.toLowerCase()}`}>
+          <mesh castShadow position={[0, 0.16, 0]}>
+            <boxGeometry args={[0.34, 0.32, 0.28]} />
+            <meshStandardMaterial
+              color={baseColor}
+              roughness={0.85}
+            />
+          </mesh>
+          {/* Tape line on top — verdict-coloured for at-a-glance archive scan. */}
+          <mesh position={[0, 0.33, 0]}>
+            <boxGeometry args={[0.36, 0.01, 0.06]} />
+            <meshStandardMaterial color={tapeColor} />
+          </mesh>
+          {b.isRecent && b.entry && (
+            <Html
+              position={[0, 0.45, 0]}
+              transform
+              occlude={false}
+              scale={0.08}
+              pointerEvents="none"
+              zIndexRange={[3, 0]}
+            >
+              <div className="rounded bg-black/70 px-1.5 py-0.5 text-[10px] font-mono text-gray-100 whitespace-nowrap">
+                {b.entry.label}
+              </div>
+            </Html>
+          )}
+        </group>
+        );
+      })}
+      {overflowAfterThree > 0 && (
+        <Html
+          position={[room.wx + room.ww / 2, 0.6, room.wy + room.wh - 0.3]}
+          transform
+          occlude={false}
+          scale={0.1}
+          pointerEvents="none"
+        >
+          <div className="rounded bg-aura-typing/40 px-2 py-0.5 text-[10px] font-mono text-aura-typing whitespace-nowrap">
+            +{overflowAfterThree} more
+          </div>
+        </Html>
+      )}
+    </group>
+  );
+}

package/apps/harness-dashboard/components/three/DeptBoard.tsx

@@ -0,0 +1,175 @@
+"use client";
+import { Html } from "@react-three/drei";
+import { ROOM_RECTS } from "@/lib/iso";
+import type {
+  ContractSnapshot,
+  EvalScores,
+  RoomId,
+} from "@/lib/types";
+
+interface DeptBoardProps {
+  roomId: Extract<RoomId, "cto-team" | "cqo-team">;
+  contract: ContractSnapshot;
+  evalScores: EvalScores | null;
+  passRate: number | null;
+  openArchRisks?: number;
+  openRegressions?: number;
+  sprintVerdict?: "pending" | "PASS" | "FAIL";
+}
+
+function fmtRate(rate: number | null): string {
+  if (rate === null || !Number.isFinite(rate)) return "—";
+  return `${Math.round(rate * 100)}%`;
+}
+
+function fmtScore(s: number | null | undefined): string {
+  if (s === null || s === undefined) return "—";
+  return s.toFixed(2);
+}
+
+// Wall board for CTO/CQO rooms. CTO: contract sign-off + pass-rate. CQO:
+// 5-axis eval scores + verdict + regressions.
+export function DeptBoard({
+  roomId,
+  contract,
+  evalScores,
+  passRate,
+  openArchRisks,
+  openRegressions,
+  sprintVerdict,
+}: DeptBoardProps) {
+  const room = ROOM_RECTS.find((r) => r.id === roomId)!;
+  const cx = room.wx + room.ww / 2;
+  // Mount on the back wall (wy is the north edge).
+  const cz = room.wy + 0.18;
+  const isCto = roomId === "cto-team";
+
+  return (
+    <Html
+      position={[cx, 0.85, cz]}
+      transform
+      occlude={false}
+      scale={0.14}
+      pointerEvents="none"
+      zIndexRange={[5, 0]}
+    >
+      <div
+        data-testid={`dept-board-${roomId}`}
+        className="rounded-md border border-brick-wall bg-brick-bg/95 px-3 py-2 shadow-lg text-gray-100 font-mono"
+        style={{ minWidth: 240, maxWidth: 320 }}
+      >
+        <div className="text-[9px] uppercase tracking-widest text-gray-400">
+          {isCto ? "CTO BOARD" : "CQO BOARD"}
+        </div>
+        <div className="mt-1 grid grid-cols-2 gap-1 text-[10px]">
+          <div className="rounded bg-brick-wall/50 px-1.5 py-0.5">
+            <span className="text-gray-500">sprint</span>{" "}
+            <span data-testid={`board-sprint-${roomId}`}>
+              {contract.sprint_number ?? "—"}
+            </span>
+          </div>
+          <div className="rounded bg-brick-wall/50 px-1.5 py-0.5">
+            <span className="text-gray-500">pass</span>{" "}
+            <span data-testid={`board-pass-${roomId}`}>{fmtRate(passRate)}</span>
+          </div>
+          {isCto ? (
+            <>
+              <div className="rounded bg-brick-wall/50 px-1.5 py-0.5">
+                <span className="text-gray-500">contract BE</span>{" "}
+                <span
+                  className={
+                    contract.contract_signed.be ? "text-aura-typing" : "text-gray-500"
+                  }
+                >
+                  {contract.contract_signed.be ? "signed" : "—"}
+                </span>
+              </div>
+              <div className="rounded bg-brick-wall/50 px-1.5 py-0.5">
+                <span className="text-gray-500">contract FE</span>{" "}
+                <span
+                  className={
+                    contract.contract_signed.fe ? "text-aura-typing" : "text-gray-500"
+                  }
+                >
+                  {contract.contract_signed.fe ? "signed" : "—"}
+                </span>
+              </div>
+              <div className="rounded bg-brick-wall/50 px-1.5 py-0.5 col-span-2">
+                <span className="text-gray-500">arch risks</span>{" "}
+                <span
+                  className={
+                    (openArchRisks ?? 0) > 0
+                      ? "text-aura-alert"
+                      : "text-aura-typing"
+                  }
+                >
+                  {openArchRisks ?? 0}
+                </span>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="rounded bg-brick-wall/50 px-1.5 py-0.5 col-span-2">
+                <span className="text-gray-500">verdict</span>{" "}
+                <span
+                  className={
+                    sprintVerdict === "PASS"
+                      ? "text-aura-typing"
+                      : sprintVerdict === "FAIL"
+                      ? "text-aura-alert"
+                      : "text-gray-300"
+                  }
+                >
+                  {sprintVerdict ?? "pending"}
+                </span>
+              </div>
+              <div className="rounded bg-brick-wall/50 px-1.5 py-0.5 col-span-2">
+                <span className="text-gray-500">regressions</span>{" "}
+                <span
+                  className={
+                    (openRegressions ?? 0) > 0
+                      ? "text-aura-alert"
+                      : "text-aura-typing"
+                  }
+                >
+                  {openRegressions ?? 0}
+                </span>
+              </div>
+            </>
+          )}
+        </div>
+
+        {!isCto && evalScores && (
+          <div
+            data-testid="eval-scores"
+            className="mt-1.5 grid grid-cols-5 gap-1 text-[9px] uppercase"
+          >
+            {(
+              ["functional", "visual", "code_quality", "architecture", "security"] as const
+            ).map((axis) => {
+              const v = evalScores?.[axis] ?? null;
+              const fail = v !== null && typeof v === "number" && v < 2.8;
+              return (
+                <div
+                  key={axis}
+                  data-testid={`eval-axis-${axis}`}
+                  className={`rounded px-1 py-0.5 text-center ${
+                    fail
+                      ? "bg-aura-alert/30 text-aura-alert"
+                      : "bg-aura-typing/20 text-aura-typing"
+                  }`}
+                  title={axis}
+                >
+                  <div className="text-[8px] tracking-wider opacity-70">
+                    {axis.slice(0, 3)}
+                  </div>
+                  <div>{fmtScore(v)}</div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </Html>
+  );
+}