feat(DRC-2641): run history view + metadata Activity runs

js/packages/ui/src/api/checks.ts

@@ -26,6 +26,7 @@ export interface Check<PT = unknown, VO = unknown> {
   is_preset?: boolean;
   last_run?: Run;
   is_outdated?: boolean;
+  actor_type?: string; // "recce_ai" | "user" | "preset_system" — Cloud-only, undefined in OSS
 }
 
 /**

js/packages/ui/src/api/types/run.ts

@@ -98,6 +98,8 @@ export interface BaseRun {
   error?: string;
   /** Current status of the run */
   status?: RunStatus;
+  /** Who triggered this run: "user" | "recce_ai" */
+  triggered_by?: string;
 }
 
 // ============================================================================

js/packages/ui/src/components/check/CheckCard.tsx

@@ -57,6 +57,8 @@ export interface CheckCardData {
    * dbt manifest or related artifacts are regenerated (shown in outdated tooltip).
    */
   lastRunAt?: string;
+  /** Who created this check: "recce_ai" | "user" | "preset_system" */
+  actorType?: string;
 }
 
 /**
@@ -176,6 +178,23 @@ function formatOutdatedTooltip(lastRunAt?: string): string {
   }
 }
 
+/**
+ * Badge config for actor type display.
+ * Exported so downstream components (e.g. CheckDetailOss) can reuse it.
+ */
+export const ACTOR_BADGE_CONFIG: Record<
+  string,
+  { label: string; color: string; bg: string }
+> = {
+  recce_ai: { label: "AI", color: "#7c3aed", bg: "rgb(124 58 237 / 0.12)" },
+  user: { label: "User", color: "#059669", bg: "rgb(5 150 105 / 0.12)" },
+  preset_system: {
+    label: "Preset",
+    color: "#2563eb",
+    bg: "rgb(37 99 235 / 0.12)",
+  },
+};
+
 /**
  * CheckCard Component
  *
@@ -332,6 +351,25 @@ function CheckCardComponent({
         </Tooltip>
       )}
 
+      {/* Actor badge — skip for presets (already shown by Preset chip) */}
+      {check.actorType &&
+        !check.isPreset &&
+        ACTOR_BADGE_CONFIG[check.actorType] && (
+          <Chip
+            label={ACTOR_BADGE_CONFIG[check.actorType].label}
+            size="small"
+            sx={{
+              height: 20,
+              fontSize: "0.65rem",
+              fontWeight: 500,
+              backgroundColor: ACTOR_BADGE_CONFIG[check.actorType].bg,
+              color: ACTOR_BADGE_CONFIG[check.actorType].color,
+              flexShrink: 0,
+              "& .MuiChip-label": { px: 0.75 },
+            }}
+          />
+        )}
+
       {/* Preset badge */}
       {check.isPreset && (
         <Chip

js/packages/ui/src/components/check/CheckDetailOss.tsx

@@ -2,6 +2,7 @@
 
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
 import MuiDialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -90,6 +91,7 @@ import {
   ViewOptionTypes,
 } from "../run";
 import { toaster } from "../ui";
+import { ACTOR_BADGE_CONFIG } from "./CheckCard";
 import { LineageDiffViewOss as LineageDiffView } from "./LineageDiffViewOss";
 import { SchemaDiffView } from "./SchemaDiffView";
 import { CheckTimelineOss as CheckTimeline } from "./timeline/CheckTimelineOss";
@@ -477,6 +479,26 @@ export function CheckDetailOss({
                     </MuiTooltip>
                   )}
 
+                  {/* Actor badge — skip for presets (already shown by Preset chip) */}
+                  {check?.actor_type &&
+                    !check.is_preset &&
+                    ACTOR_BADGE_CONFIG[check.actor_type] && (
+                      <Chip
+                        label={ACTOR_BADGE_CONFIG[check.actor_type].label}
+                        size="small"
+                        sx={{
+                          height: 20,
+                          fontSize: "0.65rem",
+                          fontWeight: 500,
+                          backgroundColor:
+                            ACTOR_BADGE_CONFIG[check.actor_type].bg,
+                          color: ACTOR_BADGE_CONFIG[check.actor_type].color,
+                          flexShrink: 0,
+                          "& .MuiChip-label": { px: 0.75 },
+                        }}
+                      />
+                    )}
+
                   <IconButton size="small" onClick={handleMenuClick}>
                     <VscKebabVertical />
                   </IconButton>

js/packages/ui/src/components/check/CheckListOss.tsx

@@ -80,6 +80,7 @@ const ChecklistItem = ({
     isPreset: check.is_preset,
     isOutdated: check.is_outdated,
     lastRunAt: check.last_run?.run_at,
+    actorType: check.actor_type,
   };
 
   return (

js/packages/ui/src/components/check/__tests__/CheckCard.actorBadge.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { CheckCard, type CheckCardData } from "../CheckCard";
+
+const baseCheck: CheckCardData = {
+  id: "check-1",
+  name: "Row Count Diff of orders",
+  type: "row_count_diff",
+};
+
+describe("CheckCard actor badge", () => {
+  it("renders AI badge when actorType is recce_ai", () => {
+    render(<CheckCard check={{ ...baseCheck, actorType: "recce_ai" }} />);
+    expect(screen.getByText("AI")).toBeInTheDocument();
+  });
+
+  it("skips actor badge when isPreset is true (Preset chip already shown)", () => {
+    render(
+      <CheckCard
+        check={{ ...baseCheck, actorType: "preset_system", isPreset: true }}
+      />,
+    );
+    // The outlined Preset chip (from isPreset) should exist
+    const presetChips = screen.getAllByText("Preset");
+    expect(presetChips).toHaveLength(1); // Only the isPreset chip, no actor badge
+  });
+
+  it("does not render badge when actorType is undefined", () => {
+    render(<CheckCard check={baseCheck} />);
+    expect(screen.queryByText("AI")).not.toBeInTheDocument();
+    expect(screen.queryByText("User")).not.toBeInTheDocument();
+    expect(screen.queryByText("Preset")).not.toBeInTheDocument();
+  });
+
+  it("renders both AI and Outdated badges together", () => {
+    render(
+      <CheckCard
+        check={{ ...baseCheck, actorType: "recce_ai", isOutdated: true }}
+      />,
+    );
+    expect(screen.getByText("AI")).toBeInTheDocument();
+    expect(screen.getByText("Outdated")).toBeInTheDocument();
+  });
+});

js/packages/ui/src/components/check/timeline/CheckTimelineOss.tsx

@@ -15,19 +15,97 @@ import Divider from "@mui/material/Divider";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
 import { cacheKeys } from "../../../api";
+import type { CheckEvent } from "../../../api/checkEvents";
+import { listRuns } from "../../../api/runs";
 import { useApiConfig, useCheckEvents, useIsDark } from "../../../hooks";
 import { fetchUser } from "../../../lib/api/user";
 import { CommentInput } from "../../../primitives";
+import { type RunEntry, RunTimelineEntry } from "./RunTimelineEntry";
 import { TimelineEventOss as TimelineEvent } from "./TimelineEventOss";
 
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/**
+ * Map OSS run status to display status using the error field.
+ * RunStatus enum values are capitalized: "Finished", "Failed", "Running", "Cancelled".
+ */
+function deriveRunStatus(
+  status: string | undefined,
+  error: string | undefined | null,
+): string {
+  const s = status?.toLowerCase();
+  if (s === "finished") {
+    return error ? "error" : "success";
+  }
+  if (s === "failed") {
+    return "error";
+  }
+  // "running", "cancelled" pass through
+  return status ?? "unknown";
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type TimelineEntry =
+  | { kind: "event"; event: CheckEvent; at: string }
+  | { kind: "run"; run: RunEntry; index: number; at: string };
+
+// ============================================================================
+// Pure merge function (exported for testing)
+// ============================================================================
+
+/**
+ * Merges check events and run entries into a single chronologically sorted
+ * list (descending — newest first). Runs are numbered from oldest (#1) to
+ * newest (#N) so the index reflects execution order.
+ */
+export function mergeTimelineEntries(
+  events: CheckEvent[],
+  runs: RunEntry[] | undefined,
+): TimelineEntry[] {
+  const entries: TimelineEntry[] = [];
+
+  for (const event of events) {
+    entries.push({ kind: "event", event, at: event.created_at });
+  }
+
+  if (runs) {
+    // Sort ascending to assign indices from oldest (#1) to newest (#N)
+    const sortedRuns = [...runs].sort(
+      (a, b) => new Date(a.run_at).getTime() - new Date(b.run_at).getTime(),
+    );
+    for (let i = 0; i < sortedRuns.length; i++) {
+      entries.push({
+        kind: "run",
+        run: sortedRuns[i],
+        index: i + 1,
+        at: sortedRuns[i].run_at,
+      });
+    }
+  }
+
+  // Sort descending (newest first) for display
+  entries.sort((a, b) => new Date(b.at).getTime() - new Date(a.at).getTime());
+  return entries;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
 interface CheckTimelineProps {
   checkId: string;
 }
 
 export function CheckTimelineOss({ checkId }: CheckTimelineProps) {
   const isDark = useIsDark();
-  const { apiClient } = useApiConfig();
+  const { apiClient, authToken } = useApiConfig();
   const {
     events,
     isLoading,
@@ -45,6 +123,32 @@ export function CheckTimelineOss({ checkId }: CheckTimelineProps) {
     retry: false,
   });
 
+  // Fetch runs only in cloudMode (authToken present = Cloud)
+  const { data: checkRuns } = useQuery({
+    queryKey: ["check-runs", checkId],
+    queryFn: async () => {
+      const allRuns = await listRuns(apiClient);
+      return allRuns
+        .filter((r) => r.check_id === checkId)
+        .map(
+          (r): RunEntry => ({
+            run_id: r.run_id,
+            run_at: r.run_at,
+            status: deriveRunStatus(r.status, r.error),
+            summary: r.error || undefined,
+            triggered_by: r.triggered_by,
+          }),
+        );
+    },
+    enabled: !!authToken,
+    staleTime: 30000,
+  });
+
+  const timelineEntries = useMemo(
+    () => mergeTimelineEntries(events, checkRuns),
+    [events, checkRuns],
+  );
+
   const handleCreateComment = (content: string) => {
     createComment(content);
   };
@@ -117,21 +221,27 @@ export function CheckTimelineOss({ checkId }: CheckTimelineProps) {
 
       {/* Events List - Scrollable */}
       <Box sx={{ flex: 1, overflowY: "auto", px: 3, py: 2 }}>
-        {events.length === 0 ? (
+        {timelineEntries.length === 0 ? (
           <Typography sx={{ fontSize: "0.875rem", color: "grey.500" }}>
             No activity yet
           </Typography>
         ) : (
           <Stack sx={{ alignItems: "stretch" }} spacing={0}>
-            {events.map((event, index) => (
-              <Box key={event.id}>
-                <TimelineEvent
-                  event={event}
-                  currentUserId={currentUser?.id}
-                  onEdit={handleEditComment}
-                  onDelete={handleDeleteComment}
-                />
-                {index < events.length - 1 && (
+            {timelineEntries.map((entry, index) => (
+              <Box
+                key={entry.kind === "event" ? entry.event.id : entry.run.run_id}
+              >
+                {entry.kind === "event" ? (
+                  <TimelineEvent
+                    event={entry.event}
+                    currentUserId={currentUser?.id}
+                    onEdit={handleEditComment}
+                    onDelete={handleDeleteComment}
+                  />
+                ) : (
+                  <RunTimelineEntry run={entry.run} index={entry.index} />
+                )}
+                {index < timelineEntries.length - 1 && (
                   <Divider
                     sx={{ borderColor: isDark ? "grey.700" : "grey.100" }}
                   />