update

Author: masseater

apps/ops-harbor/DESIGN.md

@@ -5,6 +5,7 @@
 Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.
 
 **Key Characteristics:**
+
 - White canvas with deep navy text (`#181d26`)
 - Airtable Blue (`#1b61c9`) as primary CTA and link color
 - Haas + Haas Groot Disp dual font system
@@ -16,74 +17,87 @@ Airtable's website is a clean, enterprise-friendly platform that communicates "s
 ## 2. Color Palette & Roles
 
 ### Primary
+
 - **Deep Navy** (`#181d26`): Primary text
 - **Airtable Blue** (`#1b61c9`): CTA buttons, links
 - **White** (`#ffffff`): Primary surface
 - **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
 
 ### Semantic
+
 - **Success Green** (`#006400`): `--theme_success-text`
 - **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
 - **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
 
 ### Neutral
+
 - **Dark Gray** (`#333333`): Secondary text
 - **Mid Blue** (`#254fad`): Link/accent blue variant
 - **Border** (`#e0e2e6`): Card borders
 - **Light Surface** (`#f8fafc`): Subtle surface
 
 ### Shadows
+
 - **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)
 - **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)
 
 ## 3. Typography Rules
 
 ### Font Families
+
 - **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
 - **Display**: `Haas Groot Disp`, fallback: `Haas`
 
 ### Hierarchy
 
-| Role | Font | Size | Weight | Line Height | Letter Spacing |
-|------|------|------|--------|-------------|----------------|
-| Display Hero | Haas | 48px | 400 | 1.15 | normal |
-| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
-| Section Heading | Haas | 40px | 400 | 1.25 | normal |
-| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
-| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
-| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
-| Body | Haas | 18px | 400 | 1.35 | 0.18px |
-| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
-| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
-| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
+| Role            | Font            | Size | Weight  | Line Height | Letter Spacing |
+| --------------- | --------------- | ---- | ------- | ----------- | -------------- |
+| Display Hero    | Haas            | 48px | 400     | 1.15        | normal         |
+| Display Bold    | Haas Groot Disp | 48px | 900     | 1.50        | normal         |
+| Section Heading | Haas            | 40px | 400     | 1.25        | normal         |
+| Sub-heading     | Haas            | 32px | 400–500 | 1.15–1.25   | normal         |
+| Card Title      | Haas            | 24px | 400     | 1.20–1.30   | 0.12px         |
+| Feature         | Haas            | 20px | 400     | 1.25–1.50   | 0.1px          |
+| Body            | Haas            | 18px | 400     | 1.35        | 0.18px         |
+| Body Medium     | Haas            | 16px | 500     | 1.30        | 0.08–0.16px    |
+| Button          | Haas            | 16px | 500     | 1.25–1.30   | 0.08px         |
+| Caption         | Haas            | 14px | 400–500 | 1.25–1.35   | 0.07–0.28px    |
 
 ## 4. Component Stylings
 
 ### Buttons
+
 - **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
 - **White**: white bg, `#181d26` text, 12px radius, 1px border white
 - **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)
 
 ### Cards: `1px solid #e0e2e6`, 16px–24px radius
+
 ### Inputs: Standard Haas styling
 
 ## 5. Layout
+
 - Spacing: 1–48px (8px base)
 - Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)
 
 ## 6. Depth
+
 - Blue-tinted multi-layer shadow system
 - Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
 
 ## 7. Do's and Don'ts
+
 ### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
+
 ### Don't: Skip positive letter-spacing, use heavy shadows
 
 ## 8. Responsive Behavior
+
 Breakpoints: 425–1664px (23 breakpoints)
 
 ## 9. Agent Prompt Guide
+
 - Text: Deep Navy (`#181d26`)
 - CTA: Airtable Blue (`#1b61c9`)
 - Background: White (`#ffffff`)
-- Border: `#e0e2e6`
+- Border: `#e0e2e6`

apps/ops-harbor/src/client/app/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { ActivityPage } from "../pages/activity";
 import { DashboardPage } from "../pages/dashboard";
 import { SettingsPage } from "../pages/settings";
 
@@ -18,5 +19,8 @@ export function App() {
   if (hash === "#/settings") {
     return <SettingsPage />;
   }
+  if (hash === "#/activity") {
+    return <ActivityPage />;
+  }
   return <DashboardPage />;
 }

apps/ops-harbor/src/client/pages/activity/index.ts

@@ -0,0 +1 @@
+export { ActivityPage } from "./ui/ActivityPage";

apps/ops-harbor/src/client/pages/activity/model/activity.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import type { ActivityEvent } from "@repo/ops-harbor-core";
+import { fetchJson } from "@/shared/lib";
+
+type AutomationRun = {
+  id: string;
+  workItemId: string;
+  repository: string;
+  triggerType: string;
+  status: "pending" | "running" | "completed" | "failed" | "canceled" | "leased";
+  startedAt: string;
+  finishedAt: string;
+  summary: string;
+};
+
+function useActivityData() {
+  const [activity, setActivity] = useState<ActivityEvent[]>([]);
+  const [runs, setRuns] = useState<AutomationRun[]>([]);
+
+  async function refresh(): Promise<void> {
+    const [activityData, runsData] = await Promise.all([
+      fetchJson<ActivityEvent[]>("/api/activity?limit=200"),
+      fetchJson<AutomationRun[]>("/api/automation-runs"),
+    ]);
+    setActivity(activityData);
+    setRuns(runsData);
+  }
+
+  useEffect(() => {
+    void refresh().catch((error) => {
+      console.error("activity refresh failed", error);
+    });
+
+    const eventSource = new EventSource("/api/events");
+    const handleUpdate = () => {
+      void refresh().catch((error) => {
+        console.error("SSE-triggered activity refresh failed", error);
+      });
+    };
+    eventSource.addEventListener("sync_completed", handleUpdate);
+    eventSource.addEventListener("automation_completed", handleUpdate);
+    return () => eventSource.close();
+  }, []);
+
+  return { activity, runs };
+}
+
+export { useActivityData, type AutomationRun };

apps/ops-harbor/src/client/pages/activity/ui/ActivityPage.tsx

@@ -0,0 +1,41 @@
+import { useTheme } from "@/shared/lib";
+import { ActivityPanel } from "../../dashboard/ui/ActivityPanel";
+import { AutomationPanel } from "../../dashboard/ui/AutomationPanel";
+import { useActivityData } from "../model/activity";
+
+function ActivityPage() {
+  const { activity, runs } = useActivityData();
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <div className="h-screen flex flex-col bg-bg-base">
+      <header className="flex items-center justify-between px-6 py-4 border-b border-border-default shrink-0">
+        <div className="flex items-center gap-4">
+          <a
+            href="#/"
+            className="text-text-secondary text-[0.82rem] no-underline hover:text-text-primary transition-colors duration-150"
+          >
+            &larr; Dashboard
+          </a>
+          <h1 className="font-display font-extrabold text-[1.2rem] tracking-tight m-0 text-text-primary">
+            Activity &amp; Automation
+          </h1>
+        </div>
+        <button
+          className="px-2.5 py-1.5 bg-transparent border border-border-default text-text-secondary text-[0.78rem] rounded-sm hover:bg-bg-hover hover:text-text-primary transition-all duration-150"
+          onClick={toggleTheme}
+        >
+          {theme === "dark" ? "Light" : "Dark"}
+        </button>
+      </header>
+      <main className="flex-1 overflow-y-auto p-6">
+        <div className="grid grid-cols-2 gap-5 max-md:grid-cols-1">
+          <ActivityPanel activity={activity} selectedWorkItemId={null} />
+          <AutomationPanel runs={runs} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export { ActivityPage };

apps/ops-harbor/src/client/pages/dashboard/model/dashboard.test.tsx

@@ -67,11 +67,7 @@ describe("useDashboardData", () => {
 
   it("fetches initial data on mount", async () => {
     const workItems = [makeWorkItem()];
-    mockFetchJson
-      .mockResolvedValueOnce(workItems)
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
+    mockFetchJson.mockResolvedValueOnce(workItems).mockResolvedValueOnce([]);
 
     const { result } = renderHook(() => useDashboardData());
 
@@ -81,17 +77,11 @@ describe("useDashboardData", () => {
 
     expect(result.current.workItems[0]?.id).toBe("wi-1");
     expect(result.current.alerts).toEqual([]);
-    expect(result.current.activity).toEqual([]);
-    expect(result.current.runs).toEqual([]);
   });
 
   it("auto-selects the first work item", async () => {
     const workItems = [makeWorkItem({ id: "first" }), makeWorkItem({ id: "second" })];
-    mockFetchJson
-      .mockResolvedValueOnce(workItems)
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
+    mockFetchJson.mockResolvedValueOnce(workItems).mockResolvedValueOnce([]);
 
     const { result } = renderHook(() => useDashboardData());
 
@@ -104,11 +94,7 @@ describe("useDashboardData", () => {
 
   it("allows manual selection of a work item", async () => {
     const workItems = [makeWorkItem({ id: "a" }), makeWorkItem({ id: "b" })];
-    mockFetchJson
-      .mockResolvedValueOnce(workItems)
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
+    mockFetchJson.mockResolvedValueOnce(workItems).mockResolvedValueOnce([]);
 
     const { result } = renderHook(() => useDashboardData());
 
@@ -135,24 +121,18 @@ describe("useDashboardData", () => {
 
   it("syncNow calls POST /api/sync and refreshes", async () => {
     // Initial load
-    mockFetchJson
-      .mockResolvedValueOnce([makeWorkItem()])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
+    mockFetchJson.mockResolvedValueOnce([makeWorkItem()]).mockResolvedValueOnce([]);
 
     const { result } = renderHook(() => useDashboardData());
 
     await waitFor(() => {
       expect(result.current.workItems).toHaveLength(1);
     });
 
-    // syncNow: POST + refresh (4 fetches)
+    // syncNow: POST + refresh (2 fetches)
     mockFetchJson
       .mockResolvedValueOnce({ workItems: 5, events: 10 })
       .mockResolvedValueOnce([makeWorkItem(), makeWorkItem({ id: "wi-2", number: 43 })])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
       .mockResolvedValueOnce([]);
 
     await act(async () => {
@@ -165,11 +145,7 @@ describe("useDashboardData", () => {
 
   it("syncNow sets error message on failure", async () => {
     // Initial load
-    mockFetchJson
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
+    mockFetchJson.mockResolvedValueOnce([]).mockResolvedValueOnce([]);
 
     const { result } = renderHook(() => useDashboardData());
 
@@ -188,11 +164,7 @@ describe("useDashboardData", () => {
 
   it("selected falls back to first item when selectedId is null", async () => {
     const workItems = [makeWorkItem({ id: "only" })];
-    mockFetchJson
-      .mockResolvedValueOnce(workItems)
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
+    mockFetchJson.mockResolvedValueOnce(workItems).mockResolvedValueOnce([]);
 
     const { result } = renderHook(() => useDashboardData());
 
@@ -202,11 +174,7 @@ describe("useDashboardData", () => {
   });
 
   it("selected is null when no work items exist", async () => {
-    mockFetchJson
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
+    mockFetchJson.mockResolvedValueOnce([]).mockResolvedValueOnce([]);
 
     const { result } = renderHook(() => useDashboardData());
 

apps/ops-harbor/src/client/pages/dashboard/model/dashboard.ts

@@ -1,23 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
-import type { ActivityEvent, AlertSummaryRow, WorkItem } from "@repo/ops-harbor-core";
+import type { AlertSummaryRow, WorkItem } from "@repo/ops-harbor-core";
 import { fetchJson } from "@/shared/lib";
 
-export type AutomationRun = {
-  id: string;
-  workItemId: string;
-  repository: string;
-  triggerType: string;
-  status: "pending" | "running" | "completed" | "failed" | "canceled" | "leased";
-  startedAt: string;
-  finishedAt: string;
-  summary: string;
-};
-
 export function useDashboardData() {
   const [workItems, setWorkItems] = useState<WorkItem[]>([]);
   const [alerts, setAlerts] = useState<AlertSummaryRow[]>([]);
-  const [activity, setActivity] = useState<ActivityEvent[]>([]);
-  const [runs, setRuns] = useState<AutomationRun[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [message, setMessage] = useState<string>("");
   const [loadError, setLoadError] = useState<string | null>(null);
@@ -28,16 +15,12 @@ export function useDashboardData() {
   );
 
   async function refresh(): Promise<void> {
-    const [workItemsData, alertsData, activityData, runsData] = await Promise.all([
+    const [workItemsData, alertsData] = await Promise.all([
       fetchJson<WorkItem[]>("/api/work-items"),
       fetchJson<AlertSummaryRow[]>("/api/alerts"),
-      fetchJson<ActivityEvent[]>("/api/activity?limit=200"),
-      fetchJson<AutomationRun[]>("/api/automation-runs"),
     ]);
     setWorkItems(workItemsData);
     setAlerts(alertsData);
-    setActivity(activityData);
-    setRuns(runsData);
     setLoadError(null);
     if (!selectedId && workItemsData[0]) {
       setSelectedId(workItemsData[0].id);
@@ -80,8 +63,6 @@ export function useDashboardData() {
   return {
     workItems,
     alerts,
-    activity,
-    runs,
     selected,
     selectedId,
     setSelectedId,