Phase 2: Task Ingestion Pipeline (#459) (#460)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/dashboard/OrchestratorSessions.tsx

@@ -3,6 +3,22 @@
 import { useState } from "react";
 import type { ReactElement } from "react";
 import { Card, SectionHeader, Badge, Dot } from "@mosaic/ui";
+import type { ActiveJob } from "@/lib/api/dashboard";
+
+/* ------------------------------------------------------------------ */
+/*  Internal display types                                             */
+/* ------------------------------------------------------------------ */
+
+type DotVariant = "teal" | "blue" | "amber" | "red" | "muted";
+
+type BadgeVariant =
+  | "badge-teal"
+  | "badge-amber"
+  | "badge-red"
+  | "badge-blue"
+  | "badge-muted"
+  | "badge-purple"
+  | "badge-pulse";
 
 interface AgentNode {
   id: string;
@@ -10,7 +26,7 @@ interface AgentNode {
   avatarColor: string;
   name: string;
   task: string;
-  status: "teal" | "blue" | "amber" | "red" | "muted";
+  status: DotVariant;
 }
 
 interface OrchestratorSession {
@@ -18,73 +34,94 @@ interface OrchestratorSession {
   orchId: string;
   name: string;
   badge: string;
-  badgeVariant:
-    | "badge-teal"
-    | "badge-amber"
-    | "badge-red"
-    | "badge-blue"
-    | "badge-muted"
-    | "badge-purple"
-    | "badge-pulse";
+  badgeVariant: BadgeVariant;
   duration: string;
   agents: AgentNode[];
 }
 
-const sessions: OrchestratorSession[] = [
-  {
-    id: "s1",
-    orchId: "ORCH-001",
-    name: "infra-refactor",
-    badge: "running",
-    badgeVariant: "badge-teal",
-    duration: "2h 14m",
-    agents: [
-      {
-        id: "a1",
-        initials: "PL",
-        avatarColor: "rgba(47,128,255,0.15)",
-        name: "planner-agent",
-        task: "Analyzing network topology",
-        status: "blue",
-      },
-      {
-        id: "a2",
-        initials: "EX",
-        avatarColor: "rgba(20,184,166,0.15)",
-        name: "executor-agent",
-        task: "Applying Terraform modules",
-        status: "teal",
-      },
-      {
-        id: "a3",
-        initials: "QA",
-        avatarColor: "rgba(245,158,11,0.15)",
-        name: "reviewer-agent",
-        task: "Waiting for executor output",
-        status: "amber",
-      },
-    ],
-  },
-  {
-    id: "s2",
-    orchId: "ORCH-002",
-    name: "api-v3-migration",
-    badge: "running",
-    badgeVariant: "badge-teal",
-    duration: "45m",
-    agents: [
-      {
-        id: "a4",
-        initials: "MG",
-        avatarColor: "rgba(139,92,246,0.15)",
-        name: "migrator-agent",
-        task: "Rewriting endpoint handlers",
-        status: "blue",
-      },
-    ],
-  },
+export interface OrchestratorSessionsProps {
+  jobs?: ActiveJob[] | undefined;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Mapping helpers                                                    */
+/* ------------------------------------------------------------------ */
+
+const STEP_COLORS: string[] = [
+  "rgba(47,128,255,0.15)",
+  "rgba(20,184,166,0.15)",
+  "rgba(245,158,11,0.15)",
+  "rgba(139,92,246,0.15)",
+  "rgba(229,72,77,0.15)",
 ];
 
+function statusToDotVariant(status: string): DotVariant {
+  const lower = status.toLowerCase();
+  if (lower === "running" || lower === "active" || lower === "completed") return "teal";
+  if (lower === "pending" || lower === "queued") return "blue";
+  if (lower === "waiting" || lower === "paused") return "amber";
+  if (lower === "failed" || lower === "error") return "red";
+  return "muted";
+}
+
+function statusToBadgeVariant(status: string): BadgeVariant {
+  const lower = status.toLowerCase();
+  if (lower === "running" || lower === "active") return "badge-teal";
+  if (lower === "pending" || lower === "queued") return "badge-blue";
+  if (lower === "waiting" || lower === "paused") return "badge-amber";
+  if (lower === "failed" || lower === "error") return "badge-red";
+  if (lower === "completed") return "badge-purple";
+  return "badge-muted";
+}
+
+function formatDuration(isoDate: string): string {
+  const now = Date.now();
+  const start = new Date(isoDate).getTime();
+  const diffMs = now - start;
+
+  if (Number.isNaN(diffMs) || diffMs < 0) return "0m";
+
+  const totalMinutes = Math.floor(diffMs / 60_000);
+  if (totalMinutes < 60) return `${String(totalMinutes)}m`;
+
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return `${String(hours)}h ${String(minutes)}m`;
+}
+
+function initials(name: string): string {
+  return name
+    .split(/[\s\-_]+/)
+    .slice(0, 2)
+    .map((w) => w.charAt(0).toUpperCase())
+    .join("");
+}
+
+function mapJobToSession(job: ActiveJob): OrchestratorSession {
+  const agents: AgentNode[] = job.steps.map((step, idx) => ({
+    id: step.id,
+    initials: initials(step.name),
+    avatarColor: STEP_COLORS[idx % STEP_COLORS.length] ?? "rgba(100,116,139,0.15)",
+    name: step.name,
+    task: `Phase: ${step.phase}`,
+    status: statusToDotVariant(step.status),
+  }));
+
+  return {
+    id: job.id,
+    orchId: job.id.length > 10 ? job.id.slice(0, 10).toUpperCase() : job.id.toUpperCase(),
+    name: job.type,
+    badge: job.status,
+    badgeVariant: statusToBadgeVariant(job.status),
+    duration: formatDuration(job.createdAt),
+    agents,
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/*  Sub-components                                                     */
+/* ------------------------------------------------------------------ */
+
 interface AgentNodeItemProps {
   agent: AgentNode;
 }
@@ -182,7 +219,7 @@ function OrchCard({ session }: OrchCardProps): ReactElement {
           marginBottom: 10,
         }}
       >
-        <Dot variant="teal" />
+        <Dot variant={statusToDotVariant(session.badge)} />
         <span
           style={{
             fontFamily: "var(--mono)",
@@ -223,18 +260,48 @@ function OrchCard({ session }: OrchCardProps): ReactElement {
   );
 }
 
-export function OrchestratorSessions(): ReactElement {
+/* ------------------------------------------------------------------ */
+/*  Main export                                                        */
+/* ------------------------------------------------------------------ */
+
+export function OrchestratorSessions({ jobs }: OrchestratorSessionsProps): ReactElement {
+  const sessions = jobs ? jobs.map(mapJobToSession) : [];
+  const activeCount = jobs
+    ? jobs.filter(
+        (j) => j.status.toLowerCase() === "running" || j.status.toLowerCase() === "active"
+      ).length
+    : 0;
+
   return (
     <Card>
       <SectionHeader
         title="Active Orchestrator Sessions"
-        subtitle="3 of 8 projects running"
-        actions={<Badge variant="badge-teal">3 active</Badge>}
+        subtitle={
+          sessions.length > 0
+            ? `${String(activeCount)} of ${String(sessions.length)} jobs running`
+            : "No active sessions"
+        }
+        actions={
+          sessions.length > 0 ? (
+            <Badge variant="badge-teal">{String(activeCount)} active</Badge>
+          ) : undefined
+        }
       />
       <div>
-        {sessions.map((session) => (
-          <OrchCard key={session.id} session={session} />
-        ))}
+        {sessions.length > 0 ? (
+          sessions.map((session) => <OrchCard key={session.id} session={session} />)
+        ) : (
+          <div
+            style={{
+              padding: "24px 0",
+              textAlign: "center",
+              fontSize: "0.8rem",
+              color: "var(--muted)",
+            }}
+          >
+            No active sessions
+          </div>
+        )}
       </div>
     </Card>
   );