refine loop run history cards and model row

charlesvien · charlesvien · commit 1a61150291eb · 2026-07-16T10:17:58.000-07:00
diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -10,7 +10,7 @@ import {
   navigateToLoops,
 } from "@posthog/ui/router/navigationBridge";
 import { AlertDialog, Flex, Text } from "@radix-ui/themes";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useLoop } from "../hooks/useLoop";
 import {
   useDeleteLoop,
@@ -54,10 +54,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
   const [deleteOpen, setDeleteOpen] = useState(false);
 
   const runsQuery = useLoopRuns(loopId);
-  const runs = useMemo(
-    () => runsQuery.data?.pages.flatMap((page) => page.results) ?? [],
-    [runsQuery.data],
-  );
+  const runs = runsQuery.data ?? [];
 
   useSetHeaderContent(
     <Flex align="center" gap="2" className="w-full min-w-0">
@@ -201,9 +198,12 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
         <ConfigSummarySection loop={loop} />
 
         <Flex direction="column" gap="2">
-          <Text className="font-medium text-[13px] text-gray-12">
-            Run history
-          </Text>
+          <Flex align="center" gap="2">
+            <Text className="font-medium text-[13px] text-gray-12">
+              Run history
+            </Text>
+            <Text className="text-[11px] text-gray-10">10 most recent</Text>
+          </Flex>
           {runsQuery.isLoading ? (
             <div className="h-16 animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)" />
           ) : runs.length === 0 ? (
@@ -215,19 +215,6 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
               ))}
             </Flex>
           )}
-          {runsQuery.hasNextPage ? (
-            <Button
-              variant="soft"
-              color="gray"
-              size="1"
-              className="w-fit"
-              loading={runsQuery.isFetchingNextPage}
-              disabled={runsQuery.isFetchingNextPage}
-              onClick={() => void runsQuery.fetchNextPage()}
-            >
-              Load more
-            </Button>
-          ) : null}
         </Flex>
       </Flex>
 
@@ -279,8 +266,13 @@ function ConfigSummarySection({ loop }: { loop: LoopSchemas.Loop }) {
         className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) p-3"
       >
         <SummaryRow label="Model">
-          {loop.runtime_adapter} · {loop.model}
-          {loop.reasoning_effort ? ` · ${loop.reasoning_effort} reasoning` : ""}
+          {[
+            loop.runtime_adapter,
+            loop.model,
+            loop.reasoning_effort ? `${loop.reasoning_effort} reasoning` : null,
+          ]
+            .filter(Boolean)
+            .join(" · ")}
         </SummaryRow>
 
         <SummaryRow label="Repository">
diff --git a/packages/ui/src/features/loops/components/LoopRunRow.tsx b/packages/ui/src/features/loops/components/LoopRunRow.tsx
@@ -1,5 +1,6 @@
 import type { LoopSchemas } from "@posthog/api-client/loops";
 import { Badge } from "@posthog/ui/primitives/Badge";
+import { Button } from "@posthog/ui/primitives/Button";
 import { navigateToTaskDetail } from "@posthog/ui/router/navigationBridge";
 import { Flex, Text } from "@radix-ui/themes";
 
@@ -20,43 +21,88 @@ function statusColor(
   }
 }
 
-function formatRelativeDate(iso: string | null): string {
-  if (!iso) return "";
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return "";
-  return date.toLocaleString();
+function formatRelative(iso: string): string {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const sec = Math.round((Date.now() - then) / 1000);
+  if (sec < 45) return "just now";
+  const min = Math.round(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.round(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  const day = Math.round(hr / 24);
+  if (day < 7) return `${day}d ago`;
+  return new Date(iso).toLocaleDateString();
+}
+
+function formatDuration(ms: number): string {
+  const sec = Math.max(0, Math.round(ms / 1000));
+  if (sec < 60) return `${sec}s`;
+  const min = Math.floor(sec / 60);
+  const rem = sec % 60;
+  if (min < 60) return rem ? `${min}m ${rem}s` : `${min}m`;
+  const hr = Math.floor(min / 60);
+  const remMin = min % 60;
+  return remMin ? `${hr}h ${remMin}m` : `${hr}h`;
+}
+
+function durationLabel(run: LoopSchemas.LoopRun): string {
+  const start = new Date(run.created_at).getTime();
+  if (Number.isNaN(start)) return "";
+  if (run.completed_at) {
+    const end = new Date(run.completed_at).getTime();
+    if (!Number.isNaN(end)) return `ran ${formatDuration(end - start)}`;
+  }
+  if (run.status === "in_progress")
+    return `running ${formatDuration(Date.now() - start)}`;
+  if (run.status === "queued") return "queued";
+  return "";
 }
 
 export function LoopRunRow({ run }: { run: LoopSchemas.LoopRun }) {
+  const meta = [
+    formatRelative(run.created_at),
+    durationLabel(run),
+    run.environment,
+    run.loop_trigger_id ? "Triggered" : "Manual",
+  ].filter(Boolean);
+
   return (
-    <button
-      type="button"
-      onClick={() => navigateToTaskDetail(run.task_id)}
-      title="Open this run to see the agent's activity"
-      className="w-full rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-3 py-2.5 text-left transition-colors hover:bg-(--gray-3)"
+    <Flex
+      align="center"
+      justify="between"
+      gap="3"
+      className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-3 py-2.5"
     >
-      <Flex align="center" justify="between" gap="3">
-        <Flex direction="column" className="min-w-0 gap-0.5">
-          <Flex align="center" gap="2">
-            <Badge color={statusColor(run.status)}>{run.status}</Badge>
-            <Text className="text-[12px] text-gray-11">
-              {formatRelativeDate(run.created_at)}
-            </Text>
-          </Flex>
-          {run.error_message ? (
-            <Text className="truncate text-(--red-11) text-[11.5px]">
-              {run.error_message}
-            </Text>
-          ) : run.branch ? (
-            <Text className="truncate text-[11.5px] text-gray-10 [font-family:var(--font-mono)]">
-              {run.branch}
-            </Text>
-          ) : null}
+      <Flex direction="column" className="min-w-0 gap-1">
+        <Flex align="center" gap="2" wrap="wrap">
+          <Badge color={statusColor(run.status)}>{run.status}</Badge>
+          <Text
+            className="text-[12px] text-gray-11"
+            title={new Date(run.created_at).toLocaleString()}
+          >
+            {meta.join(" · ")}
+          </Text>
         </Flex>
-        <Text className="shrink-0 text-[11px] text-gray-10 uppercase">
-          {run.environment}
-        </Text>
+        {run.error_message ? (
+          <Text className="truncate text-(--red-11) text-[11.5px]">
+            {run.error_message}
+          </Text>
+        ) : run.branch ? (
+          <Text className="truncate text-[11.5px] text-gray-10 [font-family:var(--font-mono)]">
+            {run.branch}
+          </Text>
+        ) : null}
       </Flex>
-    </button>
+      <Button
+        variant="soft"
+        color="gray"
+        size="1"
+        className="shrink-0"
+        onClick={() => navigateToTaskDetail(run.task_id)}
+      >
+        View run
+      </Button>
+    </Flex>
   );
 }
diff --git a/packages/ui/src/features/loops/hooks/useLoopRuns.ts b/packages/ui/src/features/loops/hooks/useLoopRuns.ts
@@ -1,32 +1,30 @@
 import { type LoopSchemas, listLoopRuns } from "@posthog/api-client/loops";
 import { AUTH_SCOPED_QUERY_META } from "@posthog/ui/features/auth/useCurrentUser";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { loopsKeys } from "./loopsKeys";
 import { useLoopsClient } from "./useLoopsClient";
 
-const LOOP_RUNS_PAGE_LIMIT = 20;
+const RECENT_RUNS_LIMIT = 10;
 
+/** The 10 most recent runs for a loop, polled so the detail view stays live. */
 export function useLoopRuns(loopId: string | undefined) {
   const loopsClient = useLoopsClient();
 
-  return useInfiniteQuery<LoopSchemas.LoopRunPage>({
+  return useQuery<LoopSchemas.LoopRunPage, Error, LoopSchemas.LoopRun[]>({
     queryKey: loopsKeys.runs(loopsClient?.projectId ?? null, loopId ?? ""),
-    queryFn: async ({ pageParam }) => {
+    queryFn: async () => {
       if (!loopsClient || !loopId) throw new Error("Not authenticated");
       return await listLoopRuns(
         loopsClient.client,
         loopsClient.projectId,
         loopId,
-        {
-          limit: LOOP_RUNS_PAGE_LIMIT,
-          cursor: pageParam as string | undefined,
-        },
+        { limit: RECENT_RUNS_LIMIT },
       );
     },
+    select: (page) => page.results.slice(0, RECENT_RUNS_LIMIT),
     enabled: !!loopsClient && !!loopId,
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) => lastPage.next_cursor ?? undefined,
-    staleTime: 15_000,
+    staleTime: 10_000,
+    refetchInterval: 15_000,
     meta: AUTH_SCOPED_QUERY_META,
   });
 }
