Phase 3: Agent Cycle Visibility (#461) (#462)

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

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

@@ -27,6 +27,7 @@ interface AgentNode {
   name: string;
   task: string;
   status: DotVariant;
+  statusLabel: string;
 }
 
 interface OrchestratorSession {
@@ -36,6 +37,7 @@ interface OrchestratorSession {
   badge: string;
   badgeVariant: BadgeVariant;
   duration: string;
+  progress: number;
   agents: AgentNode[];
 }
 
@@ -105,6 +107,7 @@ function mapJobToSession(job: ActiveJob): OrchestratorSession {
     name: step.name,
     task: `Phase: ${step.phase}`,
     status: statusToDotVariant(step.status),
+    statusLabel: step.status.toLowerCase(),
   }));
 
   return {
@@ -114,6 +117,7 @@ function mapJobToSession(job: ActiveJob): OrchestratorSession {
     badge: job.status,
     badgeVariant: statusToBadgeVariant(job.status),
     duration: formatDuration(job.createdAt),
+    progress: job.progressPercent,
     agents,
   };
 }
@@ -192,6 +196,16 @@ function AgentNodeItem({ agent }: AgentNodeItemProps): ReactElement {
         </div>
       </div>
       <Dot variant={agent.status} />
+      <span
+        style={{
+          fontSize: "0.65rem",
+          fontFamily: "var(--mono)",
+          color: "var(--muted)",
+          textTransform: "uppercase",
+        }}
+      >
+        {agent.statusLabel}
+      </span>
     </div>
   );
 }
@@ -251,6 +265,27 @@ function OrchCard({ session }: OrchCardProps): ReactElement {
           {session.duration}
         </span>
       </div>
+      {session.progress > 0 && (
+        <div
+          style={{
+            height: 4,
+            borderRadius: 2,
+            background: "var(--border)",
+            marginBottom: 10,
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              height: "100%",
+              width: `${String(session.progress)}%`,
+              background: "var(--primary)",
+              borderRadius: 2,
+              transition: "width 0.3s ease",
+            }}
+          />
+        </div>
+      )}
       <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
         {session.agents.map((agent) => (
           <AgentNodeItem key={agent.id} agent={agent} />