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/app/(authenticated)/page.tsx

@@ -1,24 +1,102 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import type { ReactElement } from "react";
 import { DashboardMetrics } from "@/components/dashboard/DashboardMetrics";
 import { OrchestratorSessions } from "@/components/dashboard/OrchestratorSessions";
 import { QuickActions } from "@/components/dashboard/QuickActions";
 import { ActivityFeed } from "@/components/dashboard/ActivityFeed";
 import { TokenBudget } from "@/components/dashboard/TokenBudget";
+import { fetchDashboardSummary } from "@/lib/api/dashboard";
+import type { DashboardSummaryResponse } from "@/lib/api/dashboard";
+import { useWorkspaceId } from "@/lib/hooks";
 
 export default function DashboardPage(): ReactElement {
+  const workspaceId = useWorkspaceId();
+  const [data, setData] = useState<DashboardSummaryResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!workspaceId) {
+      setIsLoading(false);
+      return;
+    }
+
+    const wsId = workspaceId;
+    let cancelled = false;
+    setError(null);
+    setIsLoading(true);
+
+    async function loadSummary(): Promise<void> {
+      try {
+        const summary = await fetchDashboardSummary(wsId);
+        if (!cancelled) {
+          setData(summary);
+        }
+      } catch (err: unknown) {
+        console.error("[Dashboard] Failed to fetch summary:", err);
+        if (!cancelled) {
+          setError("Failed to load dashboard data");
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    void loadSummary();
+
+    return (): void => {
+      cancelled = true;
+    };
+  }, [workspaceId]);
+
+  if (isLoading) {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <DashboardMetrics />
+        <div className="dash-grid">
+          <div style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
+            <OrchestratorSessions />
+            <QuickActions />
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+            <ActivityFeed />
+            <TokenBudget />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-      <DashboardMetrics />
+      {error && (
+        <div
+          style={{
+            padding: "12px 16px",
+            marginBottom: 16,
+            background: "rgba(229,72,77,0.1)",
+            border: "1px solid var(--border)",
+            borderRadius: "var(--r)",
+            color: "var(--text)",
+            fontSize: "0.85rem",
+          }}
+        >
+          {error}
+        </div>
+      )}
+      <DashboardMetrics metrics={data?.metrics} />
       <div className="dash-grid">
         <div style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
-          <OrchestratorSessions />
+          <OrchestratorSessions jobs={data?.activeJobs} />
           <QuickActions />
         </div>
         <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-          <ActivityFeed />
-          <TokenBudget />
+          <ActivityFeed items={data?.recentActivity} />
+          <TokenBudget budgets={data?.tokenBudget} />
         </div>
       </div>
     </div>