From 0a0495005e05cc80cd29559f326f722abd0ca9a6 Mon Sep 17 00:00:00 2001 From: Saatvik Arya Date: Fri, 24 Apr 2026 22:54:36 +0530 Subject: [PATCH] =?UTF-8?q?feat(react):=20runs=20page=20=E2=80=94=20list,?= =?UTF-8?q?=20filters,=20timeline,=20detail=20drawer,=20live=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lands the full \`/runs\` observability UI on top of the \`/executions\` HTTP API shipped in #401. Route wired in both \`apps/cloud\` and \`apps/local\`; sidebar gets a "Runs" entry. React package: - \`api/executions.tsx\` — client hitting \`GET /executions\`, \`GET /executions/:id\`, \`GET /executions/:id/tool-calls\`. Flattens the server's nested \`{ execution, pendingInteraction }\` into a single row type so components can read \`row.id\` / \`row.createdAt\` directly. Wire types are kept as epoch-ms numbers (server serializes \`Date\` at the edge) so the UI never has to know about Schema-decoded Dates. - \`pages/runs.tsx\` — infinite-scrolling list, filter rail, timeline chart, detail drawer, keyboard-driven navigation (\`j\` live, \`r\` refresh, \`/\` filter command, \`?\` help, \`↑/↓\` row nav, \`b\` collapse rail). URL params carry the filter state so runs links are shareable. - \`components/runs/*\` — 16 components covering the shell, rows, drawer, facet rail, CLI-style filter command + parser, timeline chart with drag-to-zoom, live-mode controls, and the keyboard-help overlay. - \`hooks/use-live-mode.ts\` — captures the cutoff timestamp at activation so new rows are rendered above a divider without the list jumping. \`useEffectEvent\` isolates live-toggle from stale closures. - \`hooks/use-local-storage.ts\` — SSR-safe persistence helper, used for field visibility preferences. - \`api/provider.tsx\` — wraps \`RegistryProvider\` in a shared \`QueryClientProvider\` (React Query for the list + detail fetches). - Deps added: \`@tanstack/react-query\`, \`date-fns\`, \`@date-fns/utc\`, \`react-hotkeys-hook\`. - \`styles/globals.css\` — \`--color-success|warning|error|info\` tokens used by the status dots. Apps: - \`routes/runs.tsx\` (cloud + local) — file route bound to \`\` with Effect-Schema validation on each query param. - \`routeTree.gen.ts\` (cloud + local) — regenerated to register \`/runs\`. The tanstack-router vite plugin will overwrite on next dev start; kept manual for now so \`bun x tsc --noEmit\` passes in CI. - \`web/shell.tsx\` (cloud + local) — sidebar NavItem for "Runs". ## Test plan - [x] \`bun x tsc --noEmit\` in \`@executor/react\`, \`apps/local\`, \`apps/cloud\` — all clean. - [x] No new runtime tests (the list/detail flow goes through the API layer which the SDK's executions.test.ts exercises end-to-end via the in-memory adapter). - [ ] Dev-server smoke: start the daemon, visit \`/runs\`, exercise filters + live mode — to be verified by reviewer or in CI once the full stack is merged. --- apps/cloud/src/routeTree.gen.ts | 21 + apps/cloud/src/routes/runs.tsx | 24 + apps/cloud/src/web/shell.tsx | 2 + apps/local/src/routeTree.gen.ts | 21 + apps/local/src/routes/runs.tsx | 24 + apps/local/src/web/shell.tsx | 2 + bun.lock | 12 +- packages/react/package.json | 4 + packages/react/src/api/executions.tsx | 220 +++++++ packages/react/src/api/provider.tsx | 18 +- .../src/components/runs/column-header.tsx | 100 +++ .../src/components/runs/detail-drawer.tsx | 608 ++++++++++++++++++ .../components/runs/filter-command-parser.ts | 172 +++++ .../src/components/runs/filter-command.tsx | 259 ++++++++ .../react/src/components/runs/filter-rail.tsx | 382 +++++++++++ .../components/runs/hover-card-timestamp.tsx | 97 +++ .../src/components/runs/keyboard-help.tsx | 63 ++ .../react/src/components/runs/live-button.tsx | 28 + .../react/src/components/runs/live-row.tsx | 14 + .../src/components/runs/refresh-button.tsx | 29 + packages/react/src/components/runs/row.tsx | 172 +++++ packages/react/src/components/runs/shell.tsx | 162 +++++ packages/react/src/components/runs/status.ts | 108 ++++ .../src/components/runs/timeline-chart.tsx | 200 ++++++ .../components/runs/view-options-button.tsx | 96 +++ packages/react/src/hooks/use-live-mode.ts | 42 ++ packages/react/src/hooks/use-local-storage.ts | 53 ++ packages/react/src/pages/runs.tsx | 497 ++++++++++++++ packages/react/src/styles/globals.css | 12 + 29 files changed, 3438 insertions(+), 4 deletions(-) create mode 100644 apps/cloud/src/routes/runs.tsx create mode 100644 apps/local/src/routes/runs.tsx create mode 100644 packages/react/src/api/executions.tsx create mode 100644 packages/react/src/components/runs/column-header.tsx create mode 100644 packages/react/src/components/runs/detail-drawer.tsx create mode 100644 packages/react/src/components/runs/filter-command-parser.ts create mode 100644 packages/react/src/components/runs/filter-command.tsx create mode 100644 packages/react/src/components/runs/filter-rail.tsx create mode 100644 packages/react/src/components/runs/hover-card-timestamp.tsx create mode 100644 packages/react/src/components/runs/keyboard-help.tsx create mode 100644 packages/react/src/components/runs/live-button.tsx create mode 100644 packages/react/src/components/runs/live-row.tsx create mode 100644 packages/react/src/components/runs/refresh-button.tsx create mode 100644 packages/react/src/components/runs/row.tsx create mode 100644 packages/react/src/components/runs/shell.tsx create mode 100644 packages/react/src/components/runs/status.ts create mode 100644 packages/react/src/components/runs/timeline-chart.tsx create mode 100644 packages/react/src/components/runs/view-options-button.tsx create mode 100644 packages/react/src/hooks/use-live-mode.ts create mode 100644 packages/react/src/hooks/use-local-storage.ts create mode 100644 packages/react/src/pages/runs.tsx diff --git a/apps/cloud/src/routeTree.gen.ts b/apps/cloud/src/routeTree.gen.ts index 46104e23b..60dd41900 100644 --- a/apps/cloud/src/routeTree.gen.ts +++ b/apps/cloud/src/routeTree.gen.ts @@ -11,6 +11,7 @@ import { Route as rootRouteImport } from './routes/__root' import { Route as ToolsRouteImport } from './routes/tools' import { Route as SecretsRouteImport } from './routes/secrets' +import { Route as RunsRouteImport } from './routes/runs' import { Route as OrgRouteImport } from './routes/org' import { Route as ConnectionsRouteImport } from './routes/connections' import { Route as BillingRouteImport } from './routes/billing' @@ -29,6 +30,11 @@ const SecretsRoute = SecretsRouteImport.update({ path: '/secrets', getParentRoute: () => rootRouteImport, } as any) +const RunsRoute = RunsRouteImport.update({ + id: '/runs', + path: '/runs', + getParentRoute: () => rootRouteImport, +} as any) const OrgRoute = OrgRouteImport.update({ id: '/org', path: '/org', @@ -70,6 +76,7 @@ export interface FileRoutesByFullPath { '/billing': typeof BillingRoute '/connections': typeof ConnectionsRoute '/org': typeof OrgRoute + '/runs': typeof RunsRoute '/secrets': typeof SecretsRoute '/tools': typeof ToolsRoute '/billing/plans': typeof BillingPlansRoute @@ -81,6 +88,7 @@ export interface FileRoutesByTo { '/billing': typeof BillingRoute '/connections': typeof ConnectionsRoute '/org': typeof OrgRoute + '/runs': typeof RunsRoute '/secrets': typeof SecretsRoute '/tools': typeof ToolsRoute '/billing/plans': typeof BillingPlansRoute @@ -93,6 +101,7 @@ export interface FileRoutesById { '/billing': typeof BillingRoute '/connections': typeof ConnectionsRoute '/org': typeof OrgRoute + '/runs': typeof RunsRoute '/secrets': typeof SecretsRoute '/tools': typeof ToolsRoute '/billing_/plans': typeof BillingPlansRoute @@ -106,6 +115,7 @@ export interface FileRouteTypes { | '/billing' | '/connections' | '/org' + | '/runs' | '/secrets' | '/tools' | '/billing/plans' @@ -117,6 +127,7 @@ export interface FileRouteTypes { | '/billing' | '/connections' | '/org' + | '/runs' | '/secrets' | '/tools' | '/billing/plans' @@ -128,6 +139,7 @@ export interface FileRouteTypes { | '/billing' | '/connections' | '/org' + | '/runs' | '/secrets' | '/tools' | '/billing_/plans' @@ -140,6 +152,7 @@ export interface RootRouteChildren { BillingRoute: typeof BillingRoute ConnectionsRoute: typeof ConnectionsRoute OrgRoute: typeof OrgRoute + RunsRoute: typeof RunsRoute SecretsRoute: typeof SecretsRoute ToolsRoute: typeof ToolsRoute BillingPlansRoute: typeof BillingPlansRoute @@ -163,6 +176,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof SecretsRouteImport parentRoute: typeof rootRouteImport } + '/runs': { + id: '/runs' + path: '/runs' + fullPath: '/runs' + preLoaderRoute: typeof RunsRouteImport + parentRoute: typeof rootRouteImport + } '/org': { id: '/org' path: '/org' @@ -220,6 +240,7 @@ const rootRouteChildren: RootRouteChildren = { BillingRoute: BillingRoute, ConnectionsRoute: ConnectionsRoute, OrgRoute: OrgRoute, + RunsRoute: RunsRoute, SecretsRoute: SecretsRoute, ToolsRoute: ToolsRoute, BillingPlansRoute: BillingPlansRoute, diff --git a/apps/cloud/src/routes/runs.tsx b/apps/cloud/src/routes/runs.tsx new file mode 100644 index 000000000..175234c0e --- /dev/null +++ b/apps/cloud/src/routes/runs.tsx @@ -0,0 +1,24 @@ +import { Schema } from "effect"; +import { createFileRoute } from "@tanstack/react-router"; +import { RunsPage, type RunsSearch } from "@executor/react/pages/runs"; + +const RunsSearchSchema = Schema.standardSchemaV1( + Schema.Struct({ + executionId: Schema.optional(Schema.String), + status: Schema.optional(Schema.String), + trigger: Schema.optional(Schema.String), + tool: Schema.optional(Schema.String), + range: Schema.optional(Schema.String), + from: Schema.optional(Schema.String), + to: Schema.optional(Schema.String), + code: Schema.optional(Schema.String), + live: Schema.optional(Schema.String), + sort: Schema.optional(Schema.String), + elicitation: Schema.optional(Schema.String), + }), +); + +export const Route = createFileRoute("/runs")({ + validateSearch: RunsSearchSchema, + component: () => , +}); diff --git a/apps/cloud/src/web/shell.tsx b/apps/cloud/src/web/shell.tsx index 4aa725027..9d685ede3 100644 --- a/apps/cloud/src/web/shell.tsx +++ b/apps/cloud/src/web/shell.tsx @@ -360,6 +360,7 @@ function UserFooter() { function SidebarContent(props: { pathname: string; onNavigate?: () => void; showBrand?: boolean }) { const isHome = props.pathname === "/"; const isSecrets = props.pathname === "/secrets"; + const isRuns = props.pathname === "/runs"; const isConnections = props.pathname === "/connections"; const isBilling = props.pathname === "/billing" || props.pathname.startsWith("/billing/"); const isOrg = props.pathname === "/org"; @@ -378,6 +379,7 @@ function SidebarContent(props: { pathname: string; onNavigate?: () => void; show + diff --git a/apps/local/src/routeTree.gen.ts b/apps/local/src/routeTree.gen.ts index b068e7fb3..e98f21d74 100644 --- a/apps/local/src/routeTree.gen.ts +++ b/apps/local/src/routeTree.gen.ts @@ -11,6 +11,7 @@ import { Route as rootRouteImport } from './routes/__root' import { Route as ToolsRouteImport } from './routes/tools' import { Route as SecretsRouteImport } from './routes/secrets' +import { Route as RunsRouteImport } from './routes/runs' import { Route as ConnectionsRouteImport } from './routes/connections' import { Route as IndexRouteImport } from './routes/index' import { Route as SourcesNamespaceRouteImport } from './routes/sources.$namespace' @@ -21,6 +22,11 @@ const ToolsRoute = ToolsRouteImport.update({ path: '/tools', getParentRoute: () => rootRouteImport, } as any) +const RunsRoute = RunsRouteImport.update({ + id: '/runs', + path: '/runs', + getParentRoute: () => rootRouteImport, +} as any) const SecretsRoute = SecretsRouteImport.update({ id: '/secrets', path: '/secrets', @@ -50,6 +56,7 @@ const SourcesAddPluginKeyRoute = SourcesAddPluginKeyRouteImport.update({ export interface FileRoutesByFullPath { '/': typeof IndexRoute '/connections': typeof ConnectionsRoute + '/runs': typeof RunsRoute '/secrets': typeof SecretsRoute '/tools': typeof ToolsRoute '/sources/$namespace': typeof SourcesNamespaceRoute @@ -58,6 +65,7 @@ export interface FileRoutesByFullPath { export interface FileRoutesByTo { '/': typeof IndexRoute '/connections': typeof ConnectionsRoute + '/runs': typeof RunsRoute '/secrets': typeof SecretsRoute '/tools': typeof ToolsRoute '/sources/$namespace': typeof SourcesNamespaceRoute @@ -67,6 +75,7 @@ export interface FileRoutesById { __root__: typeof rootRouteImport '/': typeof IndexRoute '/connections': typeof ConnectionsRoute + '/runs': typeof RunsRoute '/secrets': typeof SecretsRoute '/tools': typeof ToolsRoute '/sources/$namespace': typeof SourcesNamespaceRoute @@ -77,6 +86,7 @@ export interface FileRouteTypes { fullPaths: | '/' | '/connections' + | '/runs' | '/secrets' | '/tools' | '/sources/$namespace' @@ -85,6 +95,7 @@ export interface FileRouteTypes { to: | '/' | '/connections' + | '/runs' | '/secrets' | '/tools' | '/sources/$namespace' @@ -93,6 +104,7 @@ export interface FileRouteTypes { | '__root__' | '/' | '/connections' + | '/runs' | '/secrets' | '/tools' | '/sources/$namespace' @@ -102,6 +114,7 @@ export interface FileRouteTypes { export interface RootRouteChildren { IndexRoute: typeof IndexRoute ConnectionsRoute: typeof ConnectionsRoute + RunsRoute: typeof RunsRoute SecretsRoute: typeof SecretsRoute ToolsRoute: typeof ToolsRoute SourcesNamespaceRoute: typeof SourcesNamespaceRoute @@ -124,6 +137,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof SecretsRouteImport parentRoute: typeof rootRouteImport } + '/runs': { + id: '/runs' + path: '/runs' + fullPath: '/runs' + preLoaderRoute: typeof RunsRouteImport + parentRoute: typeof rootRouteImport + } '/connections': { id: '/connections' path: '/connections' @@ -158,6 +178,7 @@ declare module '@tanstack/react-router' { const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, ConnectionsRoute: ConnectionsRoute, + RunsRoute: RunsRoute, SecretsRoute: SecretsRoute, ToolsRoute: ToolsRoute, SourcesNamespaceRoute: SourcesNamespaceRoute, diff --git a/apps/local/src/routes/runs.tsx b/apps/local/src/routes/runs.tsx new file mode 100644 index 000000000..175234c0e --- /dev/null +++ b/apps/local/src/routes/runs.tsx @@ -0,0 +1,24 @@ +import { Schema } from "effect"; +import { createFileRoute } from "@tanstack/react-router"; +import { RunsPage, type RunsSearch } from "@executor/react/pages/runs"; + +const RunsSearchSchema = Schema.standardSchemaV1( + Schema.Struct({ + executionId: Schema.optional(Schema.String), + status: Schema.optional(Schema.String), + trigger: Schema.optional(Schema.String), + tool: Schema.optional(Schema.String), + range: Schema.optional(Schema.String), + from: Schema.optional(Schema.String), + to: Schema.optional(Schema.String), + code: Schema.optional(Schema.String), + live: Schema.optional(Schema.String), + sort: Schema.optional(Schema.String), + elicitation: Schema.optional(Schema.String), + }), +); + +export const Route = createFileRoute("/runs")({ + validateSearch: RunsSearchSchema, + component: () => , +}); diff --git a/apps/local/src/web/shell.tsx b/apps/local/src/web/shell.tsx index 879210adb..b1baab69c 100644 --- a/apps/local/src/web/shell.tsx +++ b/apps/local/src/web/shell.tsx @@ -305,6 +305,7 @@ function SidebarContent(props: { }) { const isHome = props.pathname === "/"; const isSecrets = props.pathname === "/secrets"; + const isRuns = props.pathname === "/runs"; const isConnections = props.pathname === "/connections"; return ( @@ -322,6 +323,7 @@ function SidebarContent(props: { + {/* Sources list */}
diff --git a/bun.lock b/bun.lock index 89db25bd4..35237c272 100644 --- a/bun.lock +++ b/bun.lock @@ -766,6 +766,7 @@ "version": "1.4.3", "dependencies": { "@base-ui/react": "^1.3.0", + "@date-fns/utc": "^2.1.0", "@effect-atom/atom": "^0.5.0", "@effect-atom/atom-react": "^0.5.0", "@effect/platform": "catalog:", @@ -775,10 +776,12 @@ "@lobehub/icons": "^5.4.0", "@shikijs/langs": "^4.0.2", "@shikijs/themes": "^4.0.2", + "@tanstack/react-query": "^5.62.12", "@tanstack/react-router": "catalog:", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", + "date-fns": "^3.6.0", "effect": "catalog:", "embla-carousel-react": "^8.6.0", "input-otp": "^1.4.2", @@ -787,6 +790,7 @@ "react": "catalog:", "react-day-picker": "^9.14.0", "react-hook-form": "^7.72.0", + "react-hotkeys-hook": "^5.2.4", "react-resizable-panels": "^4", "recharts": "3.8.0", "shiki": "^4.0.2", @@ -1061,6 +1065,8 @@ "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="], + "@date-fns/utc": ["@date-fns/utc@2.1.1", "", {}, "sha512-SlJDfG6RPeEX8wEVv6ZB3kak4MmbtyiI2qX/5zuKdordbrhB/iaJ58GVMZgJ6P1sJaM1gMgENFYYeg1JWrCFrA=="], + "@develar/schema-utils": ["@develar/schema-utils@2.6.5", "", { "dependencies": { "ajv": "^6.12.0", "ajv-keywords": "^3.4.1" } }, "sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig=="], "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="], @@ -2819,7 +2825,7 @@ "dagre-d3-es": ["dagre-d3-es@7.0.14", "", { "dependencies": { "d3": "^7.9.0", "lodash-es": "^4.17.21" } }, "sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg=="], - "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="], + "date-fns": ["date-fns@3.6.0", "", {}, "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="], "date-fns-jalali": ["date-fns-jalali@4.1.0-0", "", {}, "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="], @@ -4753,6 +4759,8 @@ "@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="], + "@base-ui/react/date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="], + "@changesets/apply-release-plan/prettier": ["prettier@2.8.8", "", { "bin": { "prettier": "bin-prettier.js" } }, "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q=="], "@changesets/write/prettier": ["prettier@2.8.8", "", { "bin": { "prettier": "bin-prettier.js" } }, "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q=="], @@ -5245,6 +5253,8 @@ "rc-menu/@rc-component/trigger": ["@rc-component/trigger@2.3.1", "", { "dependencies": { "@babel/runtime": "^7.23.2", "@rc-component/portal": "^1.1.0", "classnames": "^2.3.2", "rc-motion": "^2.0.0", "rc-resize-observer": "^1.3.1", "rc-util": "^5.44.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-ORENF39PeXTzM+gQEshuk460Z8N4+6DkjpxlpE7Q3gYy1iBpLrx0FOJz3h62ryrJZ/3zCAUIkT1Pb/8hHWpb3A=="], + "react-day-picker/date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="], + "react-rnd/tslib": ["tslib@2.6.2", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="], "read-yaml-file/js-yaml": ["js-yaml@3.14.2", "", { "dependencies": { "argparse": "^1.0.7", "esprima": "^4.0.0" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg=="], diff --git a/packages/react/package.json b/packages/react/package.json index 557aa93cd..5dc591e76 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -18,6 +18,7 @@ }, "dependencies": { "@base-ui/react": "^1.3.0", + "@date-fns/utc": "^2.1.0", "@effect-atom/atom": "^0.5.0", "@effect-atom/atom-react": "^0.5.0", "@effect/platform": "catalog:", @@ -27,10 +28,12 @@ "@lobehub/icons": "^5.4.0", "@shikijs/langs": "^4.0.2", "@shikijs/themes": "^4.0.2", + "@tanstack/react-query": "^5.62.12", "@tanstack/react-router": "catalog:", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", + "date-fns": "^3.6.0", "effect": "catalog:", "embla-carousel-react": "^8.6.0", "input-otp": "^1.4.2", @@ -39,6 +42,7 @@ "react": "catalog:", "react-day-picker": "^9.14.0", "react-hook-form": "^7.72.0", + "react-hotkeys-hook": "^5.2.4", "react-resizable-panels": "^4", "recharts": "3.8.0", "shiki": "^4.0.2", diff --git a/packages/react/src/api/executions.tsx b/packages/react/src/api/executions.tsx new file mode 100644 index 000000000..008dc0910 --- /dev/null +++ b/packages/react/src/api/executions.tsx @@ -0,0 +1,220 @@ +import { endOfDay, parseISO, startOfDay } from "date-fns"; + +import { getBaseUrl } from "./base-url"; + +// --------------------------------------------------------------------------- +// Wire-format row projections. The server returns epoch-ms numbers for +// every timestamp (handlers stringify/unwrap Effect Schema `Date`s at +// the edge), so the UI works with plain numbers throughout instead of +// reusing the SDK's Schema classes that decode to `Date`. +// --------------------------------------------------------------------------- + +export type ExecutionStatus = + | "pending" + | "running" + | "waiting_for_interaction" + | "completed" + | "failed" + | "cancelled"; + +export type Execution = { + readonly id: string; + readonly scopeId: string; + readonly status: ExecutionStatus; + readonly code: string; + readonly resultJson: string | null; + readonly errorText: string | null; + readonly logsJson: string | null; + readonly startedAt: number | null; + readonly completedAt: number | null; + readonly triggerKind: string | null; + readonly triggerMetaJson: string | null; + readonly toolCallCount: number; + readonly createdAt: number; + readonly updatedAt: number; +}; + +export type ExecutionInteraction = { + readonly id: string; + readonly executionId: string; + readonly status: "pending" | "resolved" | "cancelled"; + readonly kind: string; + readonly purpose: string | null; + readonly payloadJson: string | null; + readonly responseJson: string | null; + readonly responsePrivateJson: string | null; + readonly createdAt: number; + readonly updatedAt: number; +}; + +export type ExecutionToolCall = { + readonly id: string; + readonly executionId: string; + readonly status: "running" | "completed" | "failed"; + readonly toolPath: string; + readonly namespace: string | null; + readonly argsJson: string | null; + readonly resultJson: string | null; + readonly errorText: string | null; + readonly startedAt: number; + readonly completedAt: number | null; + readonly durationMs: number | null; +}; + +export type ExecutionChartBucket = { + readonly bucketStart: number; + readonly counts: Readonly>; +}; + +export type ExecutionListMeta = { + readonly totalRowCount: number; + readonly filterRowCount: number; + readonly statusCounts: ReadonlyArray<{ + readonly status: ExecutionStatus; + readonly count: number; + }>; + readonly triggerCounts: ReadonlyArray<{ + readonly triggerKind: string | null; + readonly count: number; + }>; + readonly toolFacets: ReadonlyArray<{ + readonly toolPath: string; + readonly count: number; + }>; + readonly interactionCounts: { + readonly withElicitation: number; + readonly withoutElicitation: number; + }; + readonly chartBucketMs: number; + readonly chartData: ReadonlyArray; +}; + +/** + * Flat list item shape consumed by the runs UI. The server returns + * `{ execution, pendingInteraction }` nested; we flatten here so every + * component can read `row.id` / `row.createdAt` / `row.pendingInteraction` + * without going through `.execution`. + */ +export type ExecutionListItem = Execution & { + readonly pendingInteraction: ExecutionInteraction | null; +}; + +export type ListExecutionsResponse = { + readonly executions: readonly ExecutionListItem[]; + readonly nextCursor?: string; + readonly meta?: ExecutionListMeta; +}; + +export type GetExecutionResponse = { + readonly execution: Execution; + readonly pendingInteraction: ExecutionInteraction | null; +}; + +export type ListToolCallsResponse = { + readonly toolCalls: readonly ExecutionToolCall[]; +}; + +type ServerListItem = { + readonly execution: Execution; + readonly pendingInteraction: ExecutionInteraction | null; +}; + +type ServerListResponse = { + readonly executions: readonly ServerListItem[]; + readonly nextCursor?: string; + readonly meta?: ExecutionListMeta; +}; + +export type RunsQueryInput = { + readonly limit: number; + readonly cursor?: string; + readonly status?: string; + readonly trigger?: string; + readonly tool?: string; + readonly from?: string; + readonly to?: string; + /** Live-mode floor: epoch-ms. Rows strictly newer than this. */ + readonly after?: string; + readonly code?: string; + /** Sort expression `","` e.g. `"createdAt,desc"`. */ + readonly sort?: string; + /** + * Interactions filter: `"true"` → only runs that recorded an + * elicitation, `"false"` → only runs that didn't, omitted → no + * filter. Maps to `hadElicitation` on the server side. + */ + readonly elicitation?: string; +}; + +const toEpochRange = (date: string | undefined, mode: "start" | "end"): number | undefined => { + if (!date) return undefined; + + try { + const parsed = parseISO(date); + return mode === "start" ? startOfDay(parsed).getTime() : endOfDay(parsed).getTime(); + } catch { + return undefined; + } +}; + +const readJson = async (response: Response): Promise => { + if (!response.ok) { + const body = await response.text().catch(() => ""); + throw new Error(body || `Request failed with status ${response.status}`); + } + + return (await response.json()) as T; +}; + +export const listExecutions = async (input: RunsQueryInput): Promise => { + const params = new URLSearchParams(); + params.set("limit", String(input.limit)); + + if (input.cursor) params.set("cursor", input.cursor); + if (input.status) params.set("status", input.status); + if (input.trigger) params.set("trigger", input.trigger); + if (input.tool) params.set("tool", input.tool); + if (input.after) params.set("after", input.after); + if (input.sort) params.set("sort", input.sort); + if (input.elicitation) params.set("elicitation", input.elicitation); + + const from = toEpochRange(input.from, "start"); + const to = toEpochRange(input.to, "end"); + if (from !== undefined) params.set("from", String(from)); + if (to !== undefined) params.set("to", String(to)); + if (input.code?.trim()) params.set("code", input.code.trim()); + + const response = await fetch(`${getBaseUrl()}/executions?${params.toString()}`, { + credentials: "include", + }); + + const payload = await readJson(response); + return { + executions: payload.executions.map( + (item): ExecutionListItem => ({ + ...item.execution, + pendingInteraction: item.pendingInteraction, + }), + ), + ...(payload.nextCursor ? { nextCursor: payload.nextCursor } : {}), + ...(payload.meta ? { meta: payload.meta } : {}), + }; +}; + +export const getExecution = async (executionId: string): Promise => { + const response = await fetch(`${getBaseUrl()}/executions/${executionId}`, { + credentials: "include", + }); + + return readJson(response); +}; + +export const listExecutionToolCalls = async ( + executionId: string, +): Promise => { + const response = await fetch(`${getBaseUrl()}/executions/${executionId}/tool-calls`, { + credentials: "include", + }); + + return readJson(response); +}; diff --git a/packages/react/src/api/provider.tsx b/packages/react/src/api/provider.tsx index 968c2608e..52bb940ae 100644 --- a/packages/react/src/api/provider.tsx +++ b/packages/react/src/api/provider.tsx @@ -1,11 +1,23 @@ import { RegistryProvider } from "@effect-atom/atom-react"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import * as React from "react"; import { ScopeProvider } from "./scope-context"; +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: 1, + refetchOnWindowFocus: true, + }, + }, +}); + export const ExecutorProvider = ( props: React.PropsWithChildren<{ fallback?: React.ReactNode }>, ) => ( - - {props.children} - + + + {props.children} + + ); diff --git a/packages/react/src/components/runs/column-header.tsx b/packages/react/src/components/runs/column-header.tsx new file mode 100644 index 000000000..4168d727b --- /dev/null +++ b/packages/react/src/components/runs/column-header.tsx @@ -0,0 +1,100 @@ +import * as React from "react"; +import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react"; + +import { cn } from "../../lib/utils"; + +export type SortField = "createdAt" | "durationMs"; +export type SortDirection = "asc" | "desc"; +export type SortState = { + readonly field: SortField; + readonly direction: SortDirection; +} | null; + +export interface RunsColumnHeaderProps { + readonly sort: SortState; + readonly onSort: (field: SortField) => void; + readonly visibleFields?: { + readonly via?: boolean; + readonly tools?: boolean; + readonly log?: boolean; + readonly duration_ms?: boolean; + }; +} + +export function RunsColumnHeader({ sort, onSort, visibleFields }: RunsColumnHeaderProps) { + const showVia = visibleFields?.via !== false; + const showTools = visibleFields?.tools !== false; + const showLog = visibleFields?.log !== false; + const showDuration = visibleFields?.duration_ms !== false; + + return ( +
+ {/* dot column (spacer to match row layout) */} + + + + + status + + {showVia ? via : null} + + {showTools ? tools : null} + + {showLog ? log : null} + + {showDuration ? ( + + ) : null} + + code +
+ ); +} + +function SortHeader({ + label, + field, + currentSort, + onSort, + className, +}: { + readonly label: string; + readonly field: SortField; + readonly currentSort: SortState; + readonly onSort: (field: SortField) => void; + readonly className?: string; +}) { + const isActive = currentSort?.field === field; + const direction = isActive ? currentSort.direction : null; + const Icon = direction === "desc" ? ArrowDown : direction === "asc" ? ArrowUp : ArrowUpDown; + + return ( + // oxlint-disable-next-line react/forbid-elements -- column headers are dense table-level affordances; + ); +} diff --git a/packages/react/src/components/runs/detail-drawer.tsx b/packages/react/src/components/runs/detail-drawer.tsx new file mode 100644 index 000000000..cb875d078 --- /dev/null +++ b/packages/react/src/components/runs/detail-drawer.tsx @@ -0,0 +1,608 @@ +"use client"; + +import * as React from "react"; +import { useQuery } from "@tanstack/react-query"; +import { useHotkeys } from "react-hotkeys-hook"; +import { ChevronDown, ChevronUp } from "lucide-react"; +import type { Execution, ExecutionInteraction, ExecutionToolCall } from "../../api/executions"; + +import { cn } from "../../lib/utils"; +import { Button } from "../button"; +import { CodeBlock } from "../code-block"; +import { HoverCardTimestamp } from "./hover-card-timestamp"; +import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../sheet"; +import { + getExecution, + listExecutionToolCalls, + type GetExecutionResponse, +} from "../../api/executions"; +import { STATUS_LABELS, statusTone, triggerTone } from "./status"; + +type DetailTab = "properties" | "logs" | "toolCalls"; + +const formatDuration = (execution: Execution): string => { + if (execution.startedAt === null || execution.completedAt === null) return "—"; + const ms = Math.max(0, execution.completedAt - execution.startedAt); + if (ms < 1_000) return `${ms}ms`; + if (ms < 60_000) return `${(ms / 1_000).toFixed(1)}s`; + return `${(ms / 60_000).toFixed(1)}m`; +}; + +/** Recursively parse up to 4 layers of JSON-in-JSON — QuickJS double-serializes tool results. */ +const unwrapJson = ( + raw: string | null, +): { readonly formatted: string | null; readonly lang: "json" | "text" } => { + if (raw === null) return { formatted: null, lang: "json" }; + + let value: unknown = raw; + for (let i = 0; i < 4; i += 1) { + if (typeof value !== "string") break; + try { + value = JSON.parse(value); + } catch { + break; + } + } + + if (typeof value === "string") { + return { formatted: value, lang: "text" }; + } + try { + return { formatted: JSON.stringify(value, null, 2), lang: "json" }; + } catch { + return { formatted: String(value), lang: "text" }; + } +}; + +export interface RunsDetailDrawerProps { + readonly executionId?: string; + readonly onOpenChange: (open: boolean) => void; + /** Id of the previous row in the current filter set, or undefined if none. */ + readonly prevRowId?: string; + /** Id of the next row in the current filter set, or undefined if none. */ + readonly nextRowId?: string; + readonly onPrev?: () => void; + readonly onNext?: () => void; +} + +export function RunsDetailDrawer({ + executionId, + onOpenChange, + prevRowId, + nextRowId, + onPrev, + onNext, +}: RunsDetailDrawerProps) { + const open = Boolean(executionId); + const query = useQuery({ + queryKey: ["execution", executionId], + queryFn: () => getExecution(executionId!), + enabled: open, + staleTime: 10_000, + }); + + useHotkeys("ArrowUp", () => onPrev?.(), { enabled: open && !!prevRowId, preventDefault: true }, [ + open, + prevRowId, + onPrev, + ]); + useHotkeys( + "ArrowDown", + () => onNext?.(), + { enabled: open && !!nextRowId, preventDefault: true }, + [open, nextRowId, onNext], + ); + + return ( + + + onOpenChange(false)} + prevRowId={prevRowId} + nextRowId={nextRowId} + onPrev={onPrev} + onNext={onNext} + /> + + + ); +} + +function DrawerBody({ + executionId, + query, + onClose, + prevRowId, + nextRowId, + onPrev, + onNext, +}: { + readonly executionId?: string; + readonly query: ReturnType>; + readonly onClose: () => void; + readonly prevRowId?: string; + readonly nextRowId?: string; + readonly onPrev?: () => void; + readonly onNext?: () => void; +}) { + const [tab, setTab] = React.useState("properties"); + const [copied, setCopied] = React.useState(false); + + const envelope = query.data; + + const handleCopyJson = React.useCallback(() => { + if (!envelope) return; + const tryParse = (value: string | null): unknown => { + if (value === null) return null; + try { + return JSON.parse(value); + } catch { + return value; + } + }; + + const cleaned = { + ...envelope, + execution: { + ...envelope.execution, + resultJson: tryParse(envelope.execution.resultJson), + logsJson: tryParse(envelope.execution.logsJson), + }, + }; + void navigator.clipboard.writeText(JSON.stringify(cleaned, null, 2)).then(() => { + setCopied(true); + window.setTimeout(() => setCopied(false), 1500); + }); + }, [envelope]); + + return ( +
+ + Execution details + {executionId ?? "No execution selected"} + + +
+
+
{executionId ?? "—"}
+
+
+ + +
+ + +
+
+ +
+ setTab("properties")} + /> + 0 + ? `Tool calls · ${envelope.execution.toolCallCount}` + : "Tool calls" + } + active={tab === "toolCalls"} + onClick={() => setTab("toolCalls")} + /> + setTab("logs")} /> +
+ +
+ {query.isLoading ? ( +

Loading execution…

+ ) : query.isError ? ( +

Failed to load execution details.

+ ) : envelope ? ( + tab === "properties" ? ( + + ) : tab === "toolCalls" ? ( + + ) : ( + + ) + ) : ( +

Execution not found.

+ )} +
+
+ ); +} + +function TabButton(props: { label: string; active: boolean; onClick: () => void }) { + return ( + // oxlint-disable-next-line react/forbid-elements -- tab buttons carry a tab-shaped bottom border that + ); +} + +function PropertiesTab({ envelope }: { envelope: GetExecutionResponse }) { + const { execution, pendingInteraction } = envelope; + const tone = statusTone(execution.status); + const trigger = triggerTone(execution.triggerKind); + const result = unwrapJson(execution.resultJson); + + return ( +
+
+ + + + {STATUS_LABELS[execution.status]} + + + + {formatDuration(execution)} + +
+ +
+
+ Created + {execution.createdAt ? ( + + ) : ( + — + )} +
+
+ Started + {execution.startedAt ? ( + + ) : ( + — + )} +
+
+ +
+ + + via {trigger.label} + + • + tools {execution.toolCallCount} +
+ + + + {result.formatted ? ( + + ) : ( + + )} + + {execution.errorText ? ( +
+
+ Error +
+ 
+            {execution.errorText}
+
+
+ ) : null} + + {pendingInteraction ? : null} +
+ ); +} + +function MetaCard(props: { label: string; children: React.ReactNode }) { + return ( +
+
+ {props.label} +
+
{props.children}
+
+ ); +} + +function EmptyPanel(props: { title: string; message: string }) { + return ( +
+
+ {props.title} +
+
+ {props.message} +
+
+ ); +} + +function PendingInteractionBlock({ interaction }: { interaction: ExecutionInteraction }) { + const request = unwrapJson(interaction.payloadJson); + const response = unwrapJson(interaction.responseJson); + + return ( +
+
+
+
Pending interaction
+
+ {interaction.kind} — {interaction.purpose} +
+
+ + {interaction.status} + +
+ +
+ {request.formatted ? ( + + ) : ( + + )} + {response.formatted ? ( + + ) : ( + + )} +
+
+ ); +} + +function LogsTab({ logsJson }: { logsJson: string | null }) { + const lines = React.useMemo(() => { + if (logsJson === null) return null; + try { + const parsed = JSON.parse(logsJson); + if (Array.isArray(parsed)) return parsed.map(String); + } catch { + return null; + } + return null; + }, [logsJson]); + + if (!lines) { + const fallback = unwrapJson(logsJson); + if (!fallback.formatted) { + return ( +
+ No logs recorded. +
+ ); + } + return ; + } + + if (lines.length === 0) { + return ( +
+ No logs recorded. +
+ ); + } + + return ( +
+
+ Logs +
+
+ {lines.map((line, index) => { + const isError = /\[error\]/i.test(line); + const isWarn = /\[warn\]/i.test(line); + return ( +
+ {line} +
+ ); + })} +
+
+ ); +} + +function ToolCallsTab({ execution }: { execution: Execution }) { + const query = useQuery({ + queryKey: ["execution", execution.id, "tool-calls"], + queryFn: () => listExecutionToolCalls(execution.id), + staleTime: 10_000, + }); + + if (query.isLoading) { + return

Loading tool calls…

; + } + if (query.isError) { + return

Failed to load tool calls.

; + } + + const calls = query.data?.toolCalls ?? []; + if (calls.length === 0) { + return ( +
+ No tool calls recorded. +
+ ); + } + + // Derive a time scale for the flame-graph bars. + const windowStart = execution.startedAt ?? calls[0]!.startedAt; + const windowEnd = + execution.completedAt ?? + Math.max(...calls.map((call) => call.completedAt ?? call.startedAt + (call.durationMs ?? 0))); + const windowWidth = Math.max(1, windowEnd - windowStart); + + return ( +
+ {calls.map((call) => ( + + ))} +
+ ); +} + +function ToolCallRow({ + call, + windowStart, + windowWidth, +}: { + readonly call: ExecutionToolCall; + readonly windowStart: number; + readonly windowWidth: number; +}) { + const [expanded, setExpanded] = React.useState(false); + + const offsetMs = Math.max(0, call.startedAt - windowStart); + const durationMs = call.durationMs ?? Math.max(0, Date.now() - call.startedAt); + const offsetPct = (offsetMs / windowWidth) * 100; + const widthPct = Math.max(0.75, (durationMs / windowWidth) * 100); + + const args = unwrapJson(call.argsJson); + const result = unwrapJson(call.resultJson); + + const statusColor = + call.status === "failed" + ? "bg-destructive" + : call.status === "running" + ? "bg-blue-400 animate-pulse" + : "bg-primary"; + + return ( +
+ {/* oxlint-disable-next-line react/forbid-elements -- full-width expandable card header; + + {expanded ? ( +
+ {args.formatted ? ( + + ) : ( + + )} + {call.status === "failed" && call.errorText ? ( +
+
+ Error +
+ 
+                {call.errorText}
+
+
+ ) : result.formatted ? ( + + ) : ( + + )} +
+ ) : null} +
+ ); +} diff --git a/packages/react/src/components/runs/filter-command-parser.ts b/packages/react/src/components/runs/filter-command-parser.ts new file mode 100644 index 000000000..0366cf9bb --- /dev/null +++ b/packages/react/src/components/runs/filter-command-parser.ts @@ -0,0 +1,172 @@ +export interface RunsFilterTokens { + readonly status: readonly string[]; + readonly trigger: readonly string[]; + readonly tool: readonly string[]; + readonly code: string | null; + readonly durationMsMin: number | null; + readonly durationMsMax: number | null; + readonly from: number | null; + readonly to: number | null; +} + +export const emptyFilterTokens = (): RunsFilterTokens => ({ + status: [], + trigger: [], + tool: [], + code: null, + durationMsMin: null, + durationMsMax: null, + from: null, + to: null, +}); + +const RELATIVE_DURATIONS: Record = { + m: 60 * 1000, + h: 60 * 60 * 1000, + d: 24 * 60 * 60 * 1000, + w: 7 * 24 * 60 * 60 * 1000, +}; + +const parseRelativeMs = (literal: string): number | null => { + const match = /^(\d+)([mhdw])$/.exec(literal); + if (!match) return null; + const [, amount, unit] = match; + const base = RELATIVE_DURATIONS[unit!]; + if (!base) return null; + return Number(amount) * base; +}; + +const parseTimestamp = (value: string): number | null => { + const relative = parseRelativeMs(value); + if (relative !== null) return Date.now() - relative; + const parsed = Date.parse(value); + return Number.isNaN(parsed) ? null : parsed; +}; + +export const parseFilterCommand = (input: string): RunsFilterTokens => { + const result: { + -readonly [K in keyof RunsFilterTokens]: RunsFilterTokens[K] extends readonly (infer E)[] + ? E[] + : RunsFilterTokens[K]; + } = { + status: [], + trigger: [], + tool: [], + code: null, + durationMsMin: null, + durationMsMax: null, + from: null, + to: null, + }; + + const parts = input.trim().split(/\s+/).filter(Boolean); + + for (const part of parts) { + const colon = part.indexOf(":"); + if (colon === -1) continue; + const key = part.slice(0, colon); + const value = part.slice(colon + 1); + if (value.length === 0) continue; + + switch (key) { + case "status": { + result.status.push(...value.split(",").filter(Boolean)); + break; + } + case "trigger": { + result.trigger.push(...value.split(",").filter(Boolean)); + break; + } + case "tool": { + result.tool.push(...value.split(",").filter(Boolean)); + break; + } + case "code": { + result.code = value; + break; + } + case "duration_ms": { + if (value.startsWith(">=")) { + result.durationMsMin = Number(value.slice(2)) || null; + } else if (value.startsWith("<=")) { + result.durationMsMax = Number(value.slice(2)) || null; + } else if (value.startsWith(">")) { + result.durationMsMin = (Number(value.slice(1)) || 0) + 1; + } else if (value.startsWith("<")) { + result.durationMsMax = (Number(value.slice(1)) || 0) - 1; + } else { + const exact = Number(value); + if (!Number.isNaN(exact)) { + result.durationMsMin = exact; + result.durationMsMax = exact; + } + } + break; + } + case "after": { + const ts = parseTimestamp(value); + if (ts !== null) result.from = ts; + break; + } + case "before": { + const ts = parseTimestamp(value); + if (ts !== null) result.to = ts; + break; + } + default: + // Unknown keys are silently dropped so the input stays forgiving. + } + } + + return result; +}; + +export type FilterCommandKey = { + readonly key: "status" | "trigger" | "tool" | "code" | "duration_ms" | "after" | "before"; + readonly description: string; + readonly example: string; + readonly hints?: readonly string[]; +}; + +export const FILTER_COMMAND_KEYS: readonly FilterCommandKey[] = [ + { + key: "status", + description: "Execution status", + example: "status:failed,completed", + hints: ["failed", "completed", "running", "waiting"], + }, + { + key: "trigger", + description: "Entry point that started the run", + example: "trigger:mcp", + hints: ["mcp", "http", "cli"], + }, + { + key: "tool", + description: "Tool path (supports * glob)", + example: "tool:github.*", + hints: ["namespace.*", "exact.path"], + }, + { + key: "code", + description: "Substring of the run's source code", + example: "code:axiom", + }, + { + key: "duration_ms", + description: "Duration comparator in ms", + example: "duration_ms:>5000", + hints: [">5000", "<1000"], + }, + { + key: "after", + description: "Newer than a relative or absolute date", + example: "after:1h", + hints: ["15m", "1h", "24h", "7d"], + }, + { + key: "before", + description: "Older than a relative or absolute date", + example: "before:2026-04-11", + }, +]; diff --git a/packages/react/src/components/runs/filter-command.tsx b/packages/react/src/components/runs/filter-command.tsx new file mode 100644 index 000000000..bf51800e6 --- /dev/null +++ b/packages/react/src/components/runs/filter-command.tsx @@ -0,0 +1,259 @@ +"use client"; + +import * as React from "react"; +import type { ExecutionListMeta } from "../../api/executions"; + +import { cn } from "../../lib/utils"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, + CommandShortcut, +} from "../command"; +import { + FILTER_COMMAND_KEYS, + parseFilterCommand, + type RunsFilterTokens, +} from "./filter-command-parser"; + +export interface RunsFilterCommandProps { + readonly meta?: ExecutionListMeta; + readonly onApply: (tokens: RunsFilterTokens) => void; + readonly value: string; + readonly onValueChange: (value: string) => void; + /** + * Called whenever the dropdown's open state changes. Parent uses this + * to guard conflicting hotkeys (e.g. `b` → rail collapse) while the + * palette is active. + */ + readonly onOpenChange?: (open: boolean) => void; +} + +export const RunsFilterCommand = React.forwardRef( + function RunsFilterCommand({ meta, onApply, value, onValueChange, onOpenChange }, forwardedRef) { + const [open, setOpen] = React.useState(false); + const containerRef = React.useRef(null); + const inputRef = React.useRef(null); + + React.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement, []); + + React.useEffect(() => { + onOpenChange?.(open); + }, [open, onOpenChange]); + + React.useEffect(() => { + if (!open) return; + const handlePointer = (event: PointerEvent) => { + const target = event.target as Node | null; + if (!containerRef.current || !target) return; + if (!containerRef.current.contains(target)) { + setOpen(false); + } + }; + window.addEventListener("pointerdown", handlePointer); + return () => window.removeEventListener("pointerdown", handlePointer); + }, [open]); + + const currentKey = React.useMemo(() => { + const match = KEY_PATTERN.exec(value); + return match ? match[1]! : null; + }, [value]); + + const suggestions = React.useMemo(() => { + if (!currentKey) return []; + switch (currentKey) { + case "status": + return Object.entries(meta?.statusCounts ?? {}).map(([status, count]) => ({ + label: status, + hint: `${count}`, + })); + case "trigger": + return Object.entries(meta?.triggerCounts ?? {}).map(([trigger, count]) => ({ + label: trigger, + hint: `${count}`, + })); + case "tool": + return (meta?.toolFacets ?? []).map((facet) => ({ + label: facet.toolPath, + hint: `${facet.count}`, + })); + default: + return []; + } + }, [currentKey, meta]); + + const handleApply = () => { + const tokens = parseFilterCommand(value); + onApply(tokens); + setOpen(false); + inputRef.current?.blur(); + }; + + const handleSuggestionSelect = (suggestion: string) => { + const match = KEY_PATTERN.exec(value); + const updated = match + ? `${value.slice(0, match.index)}${match[1]!}:${suggestion}` + : value + ? `${value} ${suggestion}` + : suggestion; + onValueChange(updated); + inputRef.current?.focus(); + }; + + const handleKeyInsert = (key: string) => { + const trimmed = value.trimEnd(); + onValueChange(trimmed.length === 0 ? `${key}:` : `${trimmed} ${key}:`); + inputRef.current?.focus(); + }; + + return ( +
+ { + if (event.key === "Enter") { + event.preventDefault(); + handleApply(); + } else if (event.key === "Escape") { + event.preventDefault(); + setOpen(false); + inputRef.current?.blur(); + } + }} + > + setOpen(true)} + placeholder="Filter runs — status:… trigger:… tool:… code:…" + className="font-mono text-xs" + /> + + {open ? ( +
+ + {suggestions.length > 0 ? ( + + {suggestions.map((suggestion) => ( + handleSuggestionSelect(suggestion.label)} + > + {suggestion.label} + {suggestion.hint} + + ))} + + ) : ( + + + No live suggestions for this token. + + + )} + + + + + {FILTER_COMMAND_KEYS.map((entry) => ( + handleKeyInsert(entry.key)} + className="group" + > + {entry.key}: + {entry.description} + {entry.hints && entry.hints.length > 0 ? ( + + {entry.hints.map((hint) => ( + + {hint} + + ))} + + ) : null} + + ))} + + + + + + + Apply filters + Enter + + + + +
+ + Use + + ↑↓ + + to navigate + + · + + + Enter + + to query + + · + + + Esc + + to close + + · + + Union:{" "} + + status:failed,completed + + + · + + Range:{" "} + + duration_ms:>5000 + + + · + + Time:{" "} + + after:1h + + +
+
+ ) : null} + +
+ ); + }, +); + +const KEY_PATTERN = /(status|trigger|tool|code|duration_ms|after|before):([^\s]*)$/; + diff --git a/packages/react/src/components/runs/filter-rail.tsx b/packages/react/src/components/runs/filter-rail.tsx new file mode 100644 index 000000000..9feee2523 --- /dev/null +++ b/packages/react/src/components/runs/filter-rail.tsx @@ -0,0 +1,382 @@ +import * as React from "react"; +import type { ExecutionListMeta, ExecutionStatus } from "../../api/executions"; + +import { cn } from "../../lib/utils"; +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../accordion"; +import { Input } from "../input"; +import { STATUS_ORDER, STATUS_LABELS, TRIGGER_ORDER, statusTone, triggerTone } from "./status"; + +export interface RunsFilterRailProps { + readonly selectedStatuses: readonly ExecutionStatus[]; + readonly onToggleStatus: (status: ExecutionStatus) => void; + readonly onOnlyStatus: (status: ExecutionStatus) => void; + readonly selectedTriggers: readonly string[]; + readonly onToggleTrigger: (trigger: string) => void; + readonly onOnlyTrigger: (trigger: string) => void; + /** + * Tri-state interactions filter: `"true"` → runs that elicited, + * `"false"` → runs that didn't, `null` → no filter. Only one of + * the two rows can be checked at a time. + */ + readonly selectedElicitation: "true" | "false" | null; + readonly onToggleElicitation: (value: "true" | "false") => void; + readonly selectedTools: readonly string[]; + readonly onToggleTool: (toolPath: string) => void; + readonly onOnlyTool: (toolPath: string) => void; + readonly range: TimeRangePreset; + readonly onRangeChange: (range: TimeRangePreset) => void; + readonly codeQuery: string; + readonly onCodeQueryChange: (value: string) => void; + readonly onReset: () => void; + readonly meta?: ExecutionListMeta; + readonly totalsLine?: string; +} + +export type TimeRangePreset = "15m" | "1h" | "24h" | "7d" | "30d" | "all"; + +export const TIME_RANGE_PRESETS: readonly { + readonly value: TimeRangePreset; + readonly label: string; +}[] = [ + { value: "15m", label: "Last 15m" }, + { value: "1h", label: "Last 1h" }, + { value: "24h", label: "Last 24h" }, + { value: "7d", label: "Last 7d" }, + { value: "30d", label: "Last 30d" }, + { value: "all", label: "All time" }, +]; + +/** Resolve a preset to an epoch-ms [from, to] pair. `to` is always "now". */ +export const resolveTimeRange = ( + preset: TimeRangePreset, +): { readonly from?: number; readonly to?: number } => { + if (preset === "all") return {}; + const now = Date.now(); + const deltaMs: Record, number> = { + "15m": 15 * 60 * 1000, + "1h": 60 * 60 * 1000, + "24h": 24 * 60 * 60 * 1000, + "7d": 7 * 24 * 60 * 60 * 1000, + "30d": 30 * 24 * 60 * 60 * 1000, + }; + return { from: now - deltaMs[preset], to: now }; +}; + +export function RunsFilterRail({ + selectedStatuses, + onToggleStatus, + onOnlyStatus, + selectedTriggers, + onToggleTrigger, + onOnlyTrigger, + selectedElicitation, + onToggleElicitation, + selectedTools, + onToggleTool, + onOnlyTool, + range, + onRangeChange, + codeQuery, + onCodeQueryChange, + onReset, + meta, + totalsLine, +}: RunsFilterRailProps) { + const filtersActive = + selectedStatuses.length > 0 || + selectedTriggers.length > 0 || + selectedTools.length > 0 || + selectedElicitation !== null || + codeQuery.trim().length > 0 || + range !== "24h"; + + const triggerKeys = React.useMemo(() => { + const set = new Set(TRIGGER_ORDER); + if (meta?.triggerCounts) { + for (const key of Object.keys(meta.triggerCounts)) set.add(key); + } + return [...set].sort(); + }, [meta?.triggerCounts]); + + const toolFacets = meta?.toolFacets ?? []; + + return ( +
+ {/* Title block */} +
+

Execution history

+

+ Every execution recorded for this scope, newest first. +

+ {totalsLine ? ( +

+ {totalsLine} +

+ ) : null} +
+ + {/* Filters header + reset */} +
+

+ Filters +

+ {filtersActive ? ( + // oxlint-disable-next-line react/forbid-elements -- inline text button matches the header's uppercase-tracked-wider styling; + ) : null} +
+ +
+ + +
    + {STATUS_ORDER.map((status) => { + const tone = statusTone(status); + const checked = selectedStatuses.includes(status); + const count = meta?.statusCounts.find( + (c) => c.status === status, + )?.count; + return ( +
  • + onToggleStatus(status)} + onOnly={() => onOnlyStatus(status)} + dotClass={cn(tone.dot, tone.pulse && "animate-pulse")} + label={STATUS_LABELS[status]} + count={count} + /> +
    • + ); + })} +
+ + + +
    + {triggerKeys.map((key) => { + const tone = triggerTone(key); + const checked = selectedTriggers.includes(key); + const count = meta?.triggerCounts.find( + (c) => (c.triggerKind ?? "unknown") === key, + )?.count; + return ( +
  • + onToggleTrigger(key)} + onOnly={() => onOnlyTrigger(key)} + dotClass={tone.dot} + label={tone.label} + count={count} + monoLabel + /> +
    • + ); + })} +
+ + + +
    +
  • + onToggleElicitation("true")} + dotClass="bg-[color:var(--color-warning)]" + label="Used elicitation" + count={meta?.interactionCounts.withElicitation} + /> +
    • +
  • + onToggleElicitation("false")} + dotClass="bg-muted-foreground/40" + label="No elicitation" + count={meta?.interactionCounts.withoutElicitation} + /> +
    • +
+ + + {toolFacets.length > 0 ? ( + +
    + {toolFacets.map((facet) => { + const checked = selectedTools.includes(facet.toolPath); + return ( +
  • + onToggleTool(facet.toolPath)} + onOnly={() => onOnlyTool(facet.toolPath)} + dotClass="bg-foreground/40" + label={facet.toolPath} + count={facet.count} + monoLabel + /> +
    • + ); + })} +
+ + ) : null} + + +
    + {TIME_RANGE_PRESETS.map((preset) => { + const active = preset.value === range; + return ( +
  • + {/* oxlint-disable-next-line react/forbid-elements -- radio-like list item in a compact filter rail; +
    • + ); + })} +
+ + + + onCodeQueryChange(event.currentTarget.value)} + placeholder="tools.github.list" + className="h-8 font-mono text-[11px]" + /> + + +
+
+ ); +} + +function FacetSection({ + value, + label, + children, +}: { + readonly value: string; + readonly label: string; + readonly children: React.ReactNode; +}) { + return ( + + + {label} + + {children} + + ); +} + +function FacetRow({ + checked, + onToggle, + onOnly, + dotClass, + label, + count, + monoLabel, +}: { + readonly checked: boolean; + readonly onToggle: () => void; + readonly onOnly?: () => void; + readonly dotClass: string; + readonly label: string; + readonly count: number | undefined; + readonly monoLabel?: boolean; +}) { + return ( +
+ {/* oxlint-disable-next-line react/forbid-elements -- facet row acts as a checkbox + dot + label + count composite; replacing with + + {onOnly ? ( + // oxlint-disable-next-line react/forbid-elements -- tiny "only" affordance overlays the facet row on hover; + ) : null} +
+ ); +} diff --git a/packages/react/src/components/runs/hover-card-timestamp.tsx b/packages/react/src/components/runs/hover-card-timestamp.tsx new file mode 100644 index 000000000..a982518b8 --- /dev/null +++ b/packages/react/src/components/runs/hover-card-timestamp.tsx @@ -0,0 +1,97 @@ +"use client"; + +import * as React from "react"; +import { UTCDate } from "@date-fns/utc"; +import { format, formatDistanceToNowStrict } from "date-fns"; +import { Check, Copy } from "lucide-react"; +import type { ComponentPropsWithoutRef } from "react"; + +import { cn } from "../../lib/utils"; +import { HoverCard, HoverCardContent, HoverCardTrigger } from "../hover-card"; + +type HoverCardContentProps = ComponentPropsWithoutRef; + +export interface HoverCardTimestampProps { + readonly date: Date; + readonly side?: HoverCardContentProps["side"]; + readonly sideOffset?: HoverCardContentProps["sideOffset"]; + readonly align?: HoverCardContentProps["align"]; + readonly alignOffset?: HoverCardContentProps["alignOffset"]; + readonly className?: string; +} + +export function HoverCardTimestamp({ + date, + side = "right", + align = "start", + alignOffset = -4, + sideOffset, + className, +}: HoverCardTimestampProps) { + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + + return ( + + +
+ {format(date, "LLL dd, y HH:mm:ss")} +
+ + +
+ + + + +
+ + + ); +} + +function CopyRow({ value, label }: { readonly value: string; readonly label: string }) { + const [copied, setCopied] = React.useState(false); + + const handleCopy = React.useCallback( + (event: React.MouseEvent) => { + event.stopPropagation(); + void navigator.clipboard.writeText(value).then(() => { + setCopied(true); + window.setTimeout(() => setCopied(false), 1500); + }); + }, + [value], + ); + + return ( +
{ + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + void navigator.clipboard.writeText(value).then(() => { + setCopied(true); + window.setTimeout(() => setCopied(false), 1500); + }); + } + }} + > +
{label}
+
+ + {copied ? : } + + {value} +
+
+ ); +} diff --git a/packages/react/src/components/runs/keyboard-help.tsx b/packages/react/src/components/runs/keyboard-help.tsx new file mode 100644 index 000000000..5aa62407c --- /dev/null +++ b/packages/react/src/components/runs/keyboard-help.tsx @@ -0,0 +1,63 @@ +import * as React from "react"; +import { Keyboard } from "lucide-react"; + +import { Button } from "../button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "../dropdown-menu"; + +const SHORTCUTS: ReadonlyArray<{ + readonly label: string; + readonly key: string; +}> = [ + { label: "Toggle live refresh", key: "J" }, + { label: "Refresh data", key: "R" }, + { label: "Open filter command", key: "/" }, + { label: "Toggle filter rail", key: "B" }, + { label: "Previous run in drawer", key: "↑" }, + { label: "Next run in drawer", key: "↓" }, + { label: "Close drawer / dialog", key: "Esc" }, + { label: "Show this menu", key: "?" }, +]; + +export interface KeyboardHelpButtonProps { + readonly open?: boolean; + readonly onOpenChange?: (open: boolean) => void; +} + +export function KeyboardHelpButton({ open, onOpenChange }: KeyboardHelpButtonProps) { + return ( + + + + + + + Keyboard shortcuts + + + {SHORTCUTS.map((shortcut) => ( + + {shortcut.label} + {shortcut.key} + + ))} + + + ); +} diff --git a/packages/react/src/components/runs/live-button.tsx b/packages/react/src/components/runs/live-button.tsx new file mode 100644 index 000000000..6cf53154b --- /dev/null +++ b/packages/react/src/components/runs/live-button.tsx @@ -0,0 +1,28 @@ +import { CirclePause, CirclePlay } from "lucide-react"; + +import { cn } from "../../lib/utils"; +import { Button } from "../button"; + +export interface LiveButtonProps { + readonly active: boolean; + readonly onClick: () => void; +} + +export function LiveButton({ active, onClick }: LiveButtonProps) { + return ( + + ); +} diff --git a/packages/react/src/components/runs/live-row.tsx b/packages/react/src/components/runs/live-row.tsx new file mode 100644 index 000000000..c5b536a77 --- /dev/null +++ b/packages/react/src/components/runs/live-row.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; + +export function LiveRow() { + return ( +
+ + ● Live · now + +
+ ); +} diff --git a/packages/react/src/components/runs/refresh-button.tsx b/packages/react/src/components/runs/refresh-button.tsx new file mode 100644 index 000000000..591a96f60 --- /dev/null +++ b/packages/react/src/components/runs/refresh-button.tsx @@ -0,0 +1,29 @@ +import { LoaderCircle, RefreshCcw } from "lucide-react"; + +import { Button } from "../button"; + +export interface RefreshButtonProps { + readonly onClick: () => void; + readonly isLoading?: boolean; +} + +export function RefreshButton({ onClick, isLoading }: RefreshButtonProps) { + return ( + + ); +} diff --git a/packages/react/src/components/runs/row.tsx b/packages/react/src/components/runs/row.tsx new file mode 100644 index 000000000..ff877c8f6 --- /dev/null +++ b/packages/react/src/components/runs/row.tsx @@ -0,0 +1,172 @@ +import * as React from "react"; +import type { Execution } from "../../api/executions"; + +import { cn } from "../../lib/utils"; +import { HoverCardTimestamp } from "./hover-card-timestamp"; +import { statusTone, triggerTone } from "./status"; + +const formatDurationMs = (execution: Execution): string | null => { + if (execution.startedAt === null || execution.completedAt === null) return null; + const ms = Math.max(0, execution.completedAt - execution.startedAt); + return ms.toLocaleString(); +}; + + +/** Count `[error]` and `[warn]` lines in the serialized logsJson array. */ +const parseLogCounts = (logsJson: string | null): { errors: number; warns: number } => { + if (!logsJson) return { errors: 0, warns: 0 }; + try { + const parsed = JSON.parse(logsJson); + if (!Array.isArray(parsed)) return { errors: 0, warns: 0 }; + let errors = 0; + let warns = 0; + for (const line of parsed) { + if (typeof line !== "string") continue; + if (line.startsWith("[error]")) errors += 1; + else if (line.startsWith("[warn]")) warns += 1; + } + return { errors, warns }; + } catch { + return { errors: 0, warns: 0 }; + } +}; + +export interface RunRowProps { + readonly execution: Execution; + readonly isSelected?: boolean; + /** + * True when the row is "past" the live cutoff — i.e., it already + * existed at the moment live mode was turned on. Rendered at half + * opacity so new arrivals stand out. + */ + readonly isPast?: boolean; + /** + * Per-field visibility from the ViewOptionsButton. Missing keys + * default to visible. `status` and `code` are always shown. + */ + readonly visibleFields?: { + readonly via?: boolean; + readonly tools?: boolean; + readonly log?: boolean; + readonly duration_ms?: boolean; + }; + readonly onSelect?: () => void; +} + +export function RunRow({ execution, isSelected, isPast, visibleFields, onSelect }: RunRowProps) { + const showVia = visibleFields?.via !== false; + const showTools = visibleFields?.tools !== false; + const showLog = visibleFields?.log !== false; + const showDuration = visibleFields?.duration_ms !== false; + + const durationMs = formatDurationMs(execution); + const durationNumeric = durationMs ? Number(durationMs.replace(/,/g, "")) : null; + const isSlow = durationNumeric !== null && durationNumeric > 5_000; + const tone = statusTone(execution.status); + const trigger = triggerTone(execution.triggerKind); + const logs = React.useMemo(() => parseLogCounts(execution.logsJson), [execution.logsJson]); + + return ( + // oxlint-disable-next-line react/forbid-elements -- row needs a plain + ); +} diff --git a/packages/react/src/components/runs/shell.tsx b/packages/react/src/components/runs/shell.tsx new file mode 100644 index 000000000..5c3ddb81c --- /dev/null +++ b/packages/react/src/components/runs/shell.tsx @@ -0,0 +1,162 @@ +import * as React from "react"; + +import { cn } from "../../lib/utils"; +import { LiveRow } from "./live-row"; + +export interface RunsShellProps { + readonly filterRail: React.ReactNode; + readonly topBar?: React.ReactNode; + readonly chartSlot?: React.ReactNode; + readonly columnHeader?: React.ReactNode; + readonly emptyState?: React.ReactNode; + readonly rows: readonly T[]; + readonly getRowId: (row: T) => string; + readonly renderRow: (row: T) => React.ReactNode; + /** Row id before which to render a `` divider (live mode cutoff). */ + readonly liveMarkerBeforeRowId?: string; + readonly isLoading?: boolean; + readonly isFetchingNextPage?: boolean; + readonly hasNextPage?: boolean; + readonly fetchNextPage?: () => void; + readonly totalRowsFetched?: number; + readonly filterRowCount?: number; + /** When true, hide the filter rail and let the main pane fill the width. */ + readonly collapseRail?: boolean; + readonly className?: string; +} + +export function RunsShell({ + filterRail, + topBar, + chartSlot, + columnHeader, + emptyState, + rows, + getRowId, + renderRow, + liveMarkerBeforeRowId, + isLoading, + isFetchingNextPage, + hasNextPage, + fetchNextPage, + totalRowsFetched = 0, + filterRowCount, + collapseRail, + className, +}: RunsShellProps) { + const topBarRef = React.useRef(null); + const bodyRef = React.useRef(null); + const [topBarHeight, setTopBarHeight] = React.useState(0); + + React.useEffect(() => { + const topBar = topBarRef.current; + if (!topBar) return; + + const observer = new ResizeObserver(() => { + const rect = topBar.getBoundingClientRect(); + setTopBarHeight(rect.height); + }); + + observer.observe(topBar); + return () => observer.disconnect(); + }, []); + + const onScroll = React.useCallback( + (event: React.UIEvent) => { + if (!fetchNextPage || !hasNextPage || isFetchingNextPage) return; + + const target = event.currentTarget; + const onPageBottom = + Math.ceil(target.scrollTop + target.clientHeight) >= target.scrollHeight - 64; + + if (onPageBottom) { + const hitFilterCeiling = + typeof filterRowCount === "number" && totalRowsFetched >= filterRowCount; + if (!hitFilterCeiling) { + fetchNextPage(); + } + } + }, + [fetchNextPage, hasNextPage, isFetchingNextPage, totalRowsFetched, filterRowCount], + ); + + return ( +
+ + +
+
+ {topBar} + {chartSlot} +
+ + {columnHeader ? ( +
+ {columnHeader} +
+ ) : null} + +
+ {isLoading ? ( +
+ Loading runs… +
+ ) : rows.length === 0 ? ( +
+ {emptyState ??

No runs.

} +
+ ) : ( + <> + {rows.map((row) => { + const id = getRowId(row); + return ( + + {id === liveMarkerBeforeRowId ? : null} + {renderRow(row)} + + ); + })} + {isFetchingNextPage ? ( +
+ Loading more… +
+ ) : null} + {!hasNextPage && totalRowsFetched > 0 ? ( +
+ End of history +
+ ) : null} + + )} +
+
+
+ ); +} diff --git a/packages/react/src/components/runs/status.ts b/packages/react/src/components/runs/status.ts new file mode 100644 index 000000000..d23cb2d17 --- /dev/null +++ b/packages/react/src/components/runs/status.ts @@ -0,0 +1,108 @@ +import type { ExecutionStatus } from "../../api/executions"; + +export const STATUS_ORDER = [ + "running", + "waiting_for_interaction", + "completed", + "failed", + "cancelled", + "pending", +] as const satisfies readonly ExecutionStatus[]; + +export const STATUS_LABELS: Record = { + pending: "Pending", + running: "Running", + waiting_for_interaction: "Waiting", + completed: "Completed", + failed: "Failed", + cancelled: "Cancelled", +}; + +export type StatusTone = { + /** Tailwind bg-* class for the solid dot. */ + readonly dot: string; + /** Tailwind text-* class for the inline status label. */ + readonly text: string; + /** CSS value suitable for recharts bar `fill`. */ + readonly chartFill: string; + /** Whether to apply `animate-pulse` to the dot. */ + readonly pulse: boolean; +}; + +export const STATUS_TONES: Record = { + completed: { + dot: "bg-primary", + text: "text-primary", + chartFill: "var(--primary)", + pulse: false, + }, + failed: { + dot: "bg-destructive", + text: "text-destructive", + chartFill: "var(--destructive)", + pulse: false, + }, + running: { + dot: "bg-blue-400", + text: "text-blue-400", + chartFill: "#60a5fa", + pulse: true, + }, + waiting_for_interaction: { + dot: "bg-amber-400", + text: "text-amber-400", + chartFill: "#fbbf24", + pulse: true, + }, + cancelled: { + dot: "bg-muted-foreground/60", + text: "text-muted-foreground", + chartFill: "var(--muted-foreground)", + pulse: false, + }, + pending: { + dot: "bg-muted-foreground/40", + text: "text-muted-foreground", + chartFill: "color-mix(in srgb, var(--muted-foreground) 50%, transparent)", + pulse: false, + }, +}; + +export const statusTone = (status: ExecutionStatus): StatusTone => STATUS_TONES[status]; + +export type TriggerTone = { + readonly dot: string; + readonly text: string; + readonly label: string; +}; + +const UNKNOWN_TRIGGER_TONE: TriggerTone = { + dot: "bg-muted-foreground/40", + text: "text-muted-foreground", + label: "unknown", +}; + +export const TRIGGER_TONES: Record = { + mcp: { + dot: "bg-[color:var(--color-info)]", + text: "text-[color:var(--color-info)]", + label: "mcp", + }, + http: { + dot: "bg-[color:var(--color-success)]", + text: "text-[color:var(--color-success)]", + label: "http", + }, + cli: { + dot: "bg-foreground/70", + text: "text-foreground", + label: "cli", + }, +}; + +export const triggerTone = (kind: string | null | undefined): TriggerTone => { + if (!kind) return UNKNOWN_TRIGGER_TONE; + return TRIGGER_TONES[kind] ?? { ...UNKNOWN_TRIGGER_TONE, label: kind }; +}; + +export const TRIGGER_ORDER = ["mcp", "http", "cli"] as const; diff --git a/packages/react/src/components/runs/timeline-chart.tsx b/packages/react/src/components/runs/timeline-chart.tsx new file mode 100644 index 000000000..9b8cde8d0 --- /dev/null +++ b/packages/react/src/components/runs/timeline-chart.tsx @@ -0,0 +1,200 @@ +"use client"; + +import * as React from "react"; +import { format } from "date-fns"; +import { Bar, BarChart, CartesianGrid, ReferenceArea, XAxis } from "recharts"; + +type RechartsMouseEvent = { readonly activeLabel?: string | number }; +import type { ExecutionChartBucket } from "../../api/executions"; + +import { cn } from "../../lib/utils"; +import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "../chart"; +import { STATUS_LABELS, STATUS_TONES } from "./status"; + +const TIMELINE_CONFIG: ChartConfig = { + completed: { label: STATUS_LABELS.completed, color: STATUS_TONES.completed.chartFill }, + failed: { label: STATUS_LABELS.failed, color: STATUS_TONES.failed.chartFill }, + running: { label: STATUS_LABELS.running, color: STATUS_TONES.running.chartFill }, + waiting_for_interaction: { + label: STATUS_LABELS.waiting_for_interaction, + color: STATUS_TONES.waiting_for_interaction.chartFill, + }, + cancelled: { label: STATUS_LABELS.cancelled, color: STATUS_TONES.cancelled.chartFill }, + pending: { label: STATUS_LABELS.pending, color: STATUS_TONES.pending.chartFill }, +}; + +const BAR_STACK_ORDER = [ + "failed", + "cancelled", + "waiting_for_interaction", + "running", + "pending", + "completed", +] as const; + +const pickAxisLabelFormatter = (bucketMs: number) => { + const MIN = 60_000; + const HOUR = 60 * MIN; + const DAY = 24 * HOUR; + + if (bucketMs <= MIN) { + return (value: string) => { + const date = new Date(value); + return Number.isNaN(date.getTime()) ? "—" : format(date, "HH:mm:ss"); + }; + } + if (bucketMs < HOUR) { + return (value: string) => { + const date = new Date(value); + return Number.isNaN(date.getTime()) ? "—" : format(date, "HH:mm"); + }; + } + if (bucketMs < DAY) { + return (value: string) => { + const date = new Date(value); + return Number.isNaN(date.getTime()) ? "—" : format(date, "HH:mm"); + }; + } + return (value: string) => { + const date = new Date(value); + return Number.isNaN(date.getTime()) ? "—" : format(date, "LLL dd"); + }; +}; + +const pickTooltipLabelFormatter = (bucketMs: number) => { + const MIN = 60_000; + const HOUR = 60 * MIN; + return (value: unknown) => { + const date = new Date(value as string); + if (Number.isNaN(date.getTime())) return "—"; + if (bucketMs <= MIN) return format(date, "LLL dd, HH:mm:ss"); + if (bucketMs < HOUR) return format(date, "LLL dd, HH:mm"); + return format(date, "LLL dd, y HH:mm"); + }; +}; + +export interface TimelineChartProps { + readonly data: readonly ExecutionChartBucket[]; + readonly bucketMs: number; + readonly className?: string; + readonly onRangeSelect?: (range: { readonly from: number; readonly to: number }) => void; +} + +export function TimelineChart({ data, bucketMs, className, onRangeSelect }: TimelineChartProps) { + const [refAreaLeft, setRefAreaLeft] = React.useState(null); + const [refAreaRight, setRefAreaRight] = React.useState(null); + const isSelectingRef = React.useRef(false); + + const chartRows = React.useMemo( + () => + data.map((bucket) => ({ + ...bucket, + date: new Date(bucket.bucketStart).toISOString(), + })), + [data], + ); + + const axisLabelFormatter = React.useMemo(() => pickAxisLabelFormatter(bucketMs), [bucketMs]); + const tooltipLabelFormatter = React.useMemo( + () => pickTooltipLabelFormatter(bucketMs), + [bucketMs], + ); + + const handleMouseDown = (event: RechartsMouseEvent | null | undefined) => { + if (event?.activeLabel != null) { + setRefAreaLeft(String(event.activeLabel)); + isSelectingRef.current = true; + } + }; + + const handleMouseMove = (event: RechartsMouseEvent | null | undefined) => { + if (isSelectingRef.current && event?.activeLabel != null) { + setRefAreaRight(String(event.activeLabel)); + } + }; + + const handleMouseUp = () => { + if (refAreaLeft && refAreaRight && onRangeSelect) { + const [lStr, rStr] = [refAreaLeft, refAreaRight].sort( + (a, b) => new Date(a).getTime() - new Date(b).getTime(), + ); + const from = new Date(lStr).getTime(); + const to = new Date(rStr).getTime() + bucketMs; // include the bucket + if (from < to) { + onRangeSelect({ from, to }); + } + } + setRefAreaLeft(null); + setRefAreaRight(null); + isSelectingRef.current = false; + }; + + if (chartRows.length === 0) { + return ( +
+ No activity in range +
+ ); + } + + return ( + + + + + } + /> + {BAR_STACK_ORDER.map((status) => ( + + ))} + {refAreaLeft && refAreaRight ? ( + + ) : null} + + + ); +} diff --git a/packages/react/src/components/runs/view-options-button.tsx b/packages/react/src/components/runs/view-options-button.tsx new file mode 100644 index 000000000..8adbe0af2 --- /dev/null +++ b/packages/react/src/components/runs/view-options-button.tsx @@ -0,0 +1,96 @@ +import * as React from "react"; +import { Settings2 } from "lucide-react"; + +import { cn } from "../../lib/utils"; +import { Button } from "../button"; +import { Popover, PopoverContent, PopoverTrigger } from "../popover"; + +// --------------------------------------------------------------------------- +// ViewOptionsButton — row field visibility toggle +// --------------------------------------------------------------------------- +// +// Adapted from openstatus `data-table-view-options.tsx` (which toggles column +// visibility). We're flat-row so there are no columns — instead, this toggles +// which inline key-value fields the row renders. Persisted to localStorage via +// the `useLocalStorage` hook so the user's preferences survive reloads. + +export type RunFieldKey = "via" | "tools" | "log" | "duration_ms"; + +export const RUN_FIELD_LABELS: Record = { + via: "Trigger (via:)", + tools: "Tool calls (tools:)", + log: "Log levels (log:)", + duration_ms: "Duration (duration_ms:)", +}; + +export const DEFAULT_FIELD_VISIBILITY: Record = { + via: true, + tools: true, + log: true, + duration_ms: true, +}; + +const FIELD_ORDER: readonly RunFieldKey[] = ["via", "tools", "log", "duration_ms"]; + +export interface ViewOptionsButtonProps { + readonly visible: Record; + readonly onToggle: (key: RunFieldKey) => void; +} + +export function ViewOptionsButton({ visible, onToggle }: ViewOptionsButtonProps) { + return ( + + + + + +
+ Row fields +
+ {FIELD_ORDER.map((field) => { + const checked = visible[field] !== false; + return ( + // oxlint-disable-next-line react/forbid-elements -- dropdown menu row with a leading checkbox span; + ); + })} + + + ); +} diff --git a/packages/react/src/hooks/use-live-mode.ts b/packages/react/src/hooks/use-live-mode.ts new file mode 100644 index 000000000..7362b2ce8 --- /dev/null +++ b/packages/react/src/hooks/use-live-mode.ts @@ -0,0 +1,42 @@ +import * as React from "react"; + +export interface LiveModeState { + readonly cutoffTimestamp: number | null; + readonly cutoffRow: T | null; + readonly isPast: (createdAt: number) => boolean; +} + +export function useLiveMode( + rows: readonly T[], + live: boolean, +): LiveModeState { + const [cutoffTimestamp, setCutoffTimestamp] = React.useState(null); + + const onLiveChange = React.useEffectEvent((isLive: boolean) => { + if (!isLive) { + setCutoffTimestamp(null); + return; + } + const newest = rows[0]; + setCutoffTimestamp(newest ? newest.createdAt : Date.now()); + }); + + React.useEffect(() => { + onLiveChange(live); + }, [live]); + + const cutoffRow = React.useMemo(() => { + if (cutoffTimestamp === null) return null; + return rows.find((row) => row.createdAt <= cutoffTimestamp) ?? null; + }, [rows, cutoffTimestamp]); + + const isPast = React.useCallback( + (createdAt: number): boolean => { + if (cutoffTimestamp === null) return false; + return createdAt <= cutoffTimestamp; + }, + [cutoffTimestamp], + ); + + return { cutoffTimestamp, cutoffRow, isPast }; +} diff --git a/packages/react/src/hooks/use-local-storage.ts b/packages/react/src/hooks/use-local-storage.ts new file mode 100644 index 000000000..3a8fd35d6 --- /dev/null +++ b/packages/react/src/hooks/use-local-storage.ts @@ -0,0 +1,53 @@ +import * as React from "react"; + +// --------------------------------------------------------------------------- +// useLocalStorage — minimal JSON-backed persistent state hook +// --------------------------------------------------------------------------- +// +// SSR-safe (reads lazily from `window.localStorage` inside useEffect so it +// works with TanStack Start's hydration). Writes on every state change. +// Falls back to the initial value when parsing fails or localStorage is +// unavailable (private browsing, quota exceeded, etc.). + +export function useLocalStorage( + key: string, + initialValue: T, +): readonly [T, (value: T | ((prev: T) => T)) => void] { + const [value, setValue] = React.useState(initialValue); + const [isHydrated, setIsHydrated] = React.useState(false); + + // Hydrate from localStorage on mount. Done in a one-shot effect so the + // initial SSR render matches the client default, then swaps in the + // stored value on the first client tick. + React.useEffect(() => { + try { + const stored = window.localStorage.getItem(key); + if (stored !== null) { + setValue(JSON.parse(stored) as T); + } + } catch { + // Parse error or localStorage unavailable — keep initial value. + } + setIsHydrated(true); + }, [key]); + + const setPersistedValue = React.useCallback( + (next: T | ((prev: T) => T)) => { + setValue((prev) => { + const resolved = typeof next === "function" ? (next as (p: T) => T)(prev) : next; + if (isHydrated) { + try { + window.localStorage.setItem(key, JSON.stringify(resolved)); + } catch { + // Quota exceeded or localStorage unavailable — state still + // updates in memory. + } + } + return resolved; + }); + }, + [key, isHydrated], + ); + + return [value, setPersistedValue] as const; +} diff --git a/packages/react/src/pages/runs.tsx b/packages/react/src/pages/runs.tsx new file mode 100644 index 000000000..362b61d79 --- /dev/null +++ b/packages/react/src/pages/runs.tsx @@ -0,0 +1,497 @@ +import * as React from "react"; +import { useInfiniteQuery } from "@tanstack/react-query"; +import { useNavigate } from "@tanstack/react-router"; +import type { ExecutionStatus } from "../api/executions"; + +import { listExecutions, type ExecutionListItem } from "../api/executions"; +import { useHotkeys } from "react-hotkeys-hook"; +import { useLiveMode } from "../hooks/use-live-mode"; +import { useLocalStorage } from "../hooks/use-local-storage"; +import { RunsShell } from "../components/runs/shell"; +import { RunRow } from "../components/runs/row"; +import { RunsColumnHeader, type SortField, type SortState } from "../components/runs/column-header"; +import { + RunsFilterRail, + resolveTimeRange, + type TimeRangePreset, +} from "../components/runs/filter-rail"; +import { TimelineChart } from "../components/runs/timeline-chart"; +import { RunsDetailDrawer } from "../components/runs/detail-drawer"; +import { LiveButton } from "../components/runs/live-button"; +import { RefreshButton } from "../components/runs/refresh-button"; +import { KeyboardHelpButton } from "../components/runs/keyboard-help"; +import { + ViewOptionsButton, + DEFAULT_FIELD_VISIBILITY, + type RunFieldKey, +} from "../components/runs/view-options-button"; +import { RunsFilterCommand } from "../components/runs/filter-command"; +import type { RunsFilterTokens } from "../components/runs/filter-command-parser"; +import { STATUS_ORDER } from "../components/runs/status"; + +export type RunsSearch = { + readonly executionId?: string; + readonly status?: string; + readonly trigger?: string; + readonly tool?: string; + readonly range?: string; + readonly from?: string; + readonly to?: string; + readonly code?: string; + readonly live?: string; + readonly sort?: string; + readonly elicitation?: string; +}; + +const DEFAULT_RANGE: TimeRangePreset = "24h"; +const VALID_RANGES: readonly TimeRangePreset[] = ["15m", "1h", "24h", "7d", "30d", "all"]; +const PAGE_SIZE = 50; +const LIVE_REFRESH_INTERVAL_MS = 5_000; + +const splitCsv = (value: string | undefined): string[] => + value ? value.split(",").map((s) => s.trim()).filter((s) => s.length > 0) : []; + +const parseStatuses = (value: string | undefined): ExecutionStatus[] => + splitCsv(value).filter((s): s is ExecutionStatus => STATUS_ORDER.includes(s as ExecutionStatus)); + +const toggleCsv = (values: readonly string[], value: string): string[] => + values.includes(value) ? values.filter((entry) => entry !== value) : [...values, value].sort(); + +const VALID_SORT_FIELDS: readonly SortField[] = ["createdAt", "durationMs"]; + +const parseSortSearch = (value: string | undefined): SortState => { + if (!value) return null; + const [field, direction] = value.split(","); + if (!field || !direction) return null; + if (!VALID_SORT_FIELDS.includes(field as SortField)) return null; + if (direction !== "asc" && direction !== "desc") return null; + return { field: field as SortField, direction }; +}; + + +export function RunsPage({ search }: { search: RunsSearch }) { + const navigate = useNavigate(); + + const selectedStatuses = React.useMemo(() => parseStatuses(search.status), [search.status]); + const selectedTriggers = React.useMemo(() => splitCsv(search.trigger), [search.trigger]); + const selectedTools = React.useMemo(() => splitCsv(search.tool), [search.tool]); + const range = React.useMemo( + (): TimeRangePreset => + search.range && VALID_RANGES.includes(search.range as TimeRangePreset) + ? (search.range as TimeRangePreset) + : DEFAULT_RANGE, + [search.range], + ); + const sort = React.useMemo(() => parseSortSearch(search.sort), [search.sort]); + const selectedElicitation: "true" | "false" | null = + search.elicitation === "true" || search.elicitation === "false" ? search.elicitation : null; + const live = search.live === "1"; + + const [codeInput, setCodeInput] = React.useState(search.code ?? ""); + + React.useEffect(() => { + setCodeInput(search.code ?? ""); + }, [search.code]); + + const updateSearch = React.useCallback( + (patch: Partial) => { + void navigate({ + to: "/runs", + replace: true, + search: (current: RunsSearch) => { + const next = { ...current, ...patch }; + const cleaned: Record = {}; + for (const [key, value] of Object.entries(next)) { + if (value && String(value).length > 0) { + cleaned[key] = String(value); + } + } + return cleaned as RunsSearch; + }, + }); + }, + [navigate], + ); + + React.useEffect(() => { + const trimmed = codeInput.trim(); + const current = search.code ?? ""; + if (trimmed === current) return; + + const timeout = window.setTimeout(() => { + updateSearch({ code: trimmed || undefined, executionId: undefined }); + }, 250); + return () => window.clearTimeout(timeout); + }, [codeInput, search.code, updateSearch]); + + const resolvedTimeRange = React.useMemo(() => { + if (search.from || search.to) { + return { + from: search.from ? Number(search.from) : undefined, + to: search.to ? Number(search.to) : undefined, + }; + } + return resolveTimeRange(range); + }, [range, search.from, search.to]); + + const listQuery = useInfiniteQuery({ + queryKey: [ + "executions", + selectedStatuses.join(","), + selectedTriggers.join(","), + selectedTools.join(","), + resolvedTimeRange.from ?? "", + resolvedTimeRange.to ?? "", + search.code ?? "", + search.sort ?? "", + search.elicitation ?? "", + ], + initialPageParam: undefined as string | undefined, + queryFn: ({ pageParam }) => + listExecutions({ + limit: PAGE_SIZE, + cursor: pageParam, + status: selectedStatuses.length > 0 ? selectedStatuses.join(",") : undefined, + trigger: selectedTriggers.length > 0 ? selectedTriggers.join(",") : undefined, + tool: selectedTools.length > 0 ? selectedTools.join(",") : undefined, + from: resolvedTimeRange.from ? String(resolvedTimeRange.from) : undefined, + to: resolvedTimeRange.to ? String(resolvedTimeRange.to) : undefined, + code: search.code, + sort: search.sort, + elicitation: search.elicitation, + }), + getNextPageParam: (page) => page.nextCursor, + staleTime: 10_000, + refetchInterval: live ? LIVE_REFRESH_INTERVAL_MS : false, + refetchIntervalInBackground: false, + }); + + const rows = React.useMemo( + () => listQuery.data?.pages.flatMap((page) => page.executions) ?? [], + [listQuery.data], + ); + + const liveMode = useLiveMode(rows, live); + + const selectedIndex = React.useMemo( + () => (search.executionId ? rows.findIndex((r) => r.id === search.executionId) : -1), + [rows, search.executionId], + ); + const prevRowId = selectedIndex > 0 ? rows[selectedIndex - 1]?.id : undefined; + const nextRowId = + selectedIndex >= 0 && selectedIndex < rows.length - 1 ? rows[selectedIndex + 1]?.id : undefined; + + const meta = listQuery.data?.pages[0]?.meta; + + const totalsLine = meta + ? `${meta.filterRowCount.toLocaleString()} of ${meta.totalRowCount.toLocaleString()} runs` + : undefined; + + const handleToggleStatus = React.useCallback( + (status: ExecutionStatus) => { + const next = toggleCsv(selectedStatuses, status) as ExecutionStatus[]; + updateSearch({ + status: next.length > 0 ? next.join(",") : undefined, + executionId: undefined, + }); + }, + [selectedStatuses, updateSearch], + ); + + const handleToggleTrigger = React.useCallback( + (trigger: string) => { + const next = toggleCsv(selectedTriggers, trigger); + updateSearch({ + trigger: next.length > 0 ? next.join(",") : undefined, + executionId: undefined, + }); + }, + [selectedTriggers, updateSearch], + ); + + const handleToggleTool = React.useCallback( + (toolPath: string) => { + const next = toggleCsv(selectedTools, toolPath); + updateSearch({ + tool: next.length > 0 ? next.join(",") : undefined, + executionId: undefined, + }); + }, + [selectedTools, updateSearch], + ); + + const handleToggleElicitation = React.useCallback( + (value: "true" | "false") => { + updateSearch({ + elicitation: selectedElicitation === value ? undefined : value, + executionId: undefined, + }); + }, + [selectedElicitation, updateSearch], + ); + + const handleSort = React.useCallback( + (field: SortField) => { + const next: SortState = + sort?.field !== field + ? { field, direction: "desc" } + : sort.direction === "desc" + ? { field, direction: "asc" } + : null; + updateSearch({ + sort: next ? `${next.field},${next.direction}` : undefined, + executionId: undefined, + }); + }, + [sort, updateSearch], + ); + + const handleOnlyStatus = React.useCallback( + (status: ExecutionStatus) => updateSearch({ status, executionId: undefined }), + [updateSearch], + ); + const handleOnlyTrigger = React.useCallback( + (trigger: string) => updateSearch({ trigger, executionId: undefined }), + [updateSearch], + ); + const handleOnlyTool = React.useCallback( + (tool: string) => updateSearch({ tool, executionId: undefined }), + [updateSearch], + ); + + const handleRangeChange = React.useCallback( + (nextRange: TimeRangePreset) => { + updateSearch({ + range: nextRange, + from: undefined, + to: undefined, + executionId: undefined, + }); + }, + [updateSearch], + ); + + const handleCodeQueryChange = React.useCallback((value: string) => { + setCodeInput(value); + }, []); + + const handleReset = React.useCallback(() => { + setCodeInput(""); + updateSearch({ + status: undefined, + trigger: undefined, + tool: undefined, + range: DEFAULT_RANGE, + from: undefined, + to: undefined, + code: undefined, + elicitation: undefined, + executionId: undefined, + }); + }, [updateSearch]); + + const handleChartRangeSelect = React.useCallback( + ({ from, to }: { from: number; to: number }) => { + updateSearch({ + range: undefined, + from: String(from), + to: String(to), + executionId: undefined, + }); + }, + [updateSearch], + ); + + const handleRowSelect = React.useCallback( + (execution: ExecutionListItem) => { + updateSearch({ + executionId: search.executionId === execution.id ? undefined : execution.id, + }); + }, + [search.executionId, updateSearch], + ); + + const handleDrawerOpenChange = React.useCallback( + (open: boolean) => { + if (!open) { + updateSearch({ executionId: undefined }); + } + }, + [updateSearch], + ); + + const toggleLive = React.useCallback(() => { + updateSearch({ live: live ? undefined : "1" }); + }, [live, updateSearch]); + + const filterCommandInputRef = React.useRef(null); + const [filterCommandValue, setFilterCommandValue] = React.useState(""); + const [filterCommandOpen, setFilterCommandOpen] = React.useState(false); + const [keyboardHelpOpen, setKeyboardHelpOpen] = React.useState(false); + const [railCollapsed, setRailCollapsed] = React.useState(false); + + const [fieldVisibility, setFieldVisibility] = useLocalStorage>( + "runs.fieldVisibility", + DEFAULT_FIELD_VISIBILITY, + ); + + const toggleFieldVisibility = React.useCallback( + (key: RunFieldKey) => { + setFieldVisibility((prev) => ({ ...prev, [key]: !prev[key] })); + }, + [setFieldVisibility], + ); + + const currentFilterExpression = React.useMemo(() => { + const parts: string[] = []; + if (selectedStatuses.length > 0) parts.push(`status:${selectedStatuses.join(",")}`); + if (selectedTriggers.length > 0) parts.push(`trigger:${selectedTriggers.join(",")}`); + if (selectedTools.length > 0) parts.push(`tool:${selectedTools.join(",")}`); + if (search.code) parts.push(`code:${search.code}`); + return parts.join(" "); + }, [selectedStatuses, selectedTriggers, selectedTools, search.code]); + + React.useEffect(() => { + setFilterCommandValue(currentFilterExpression); + }, [currentFilterExpression]); + + const handleApplyFilterCommand = React.useCallback( + (tokens: RunsFilterTokens) => { + const statusValue = (tokens.status as ExecutionStatus[]).filter((s) => + STATUS_ORDER.includes(s), + ); + + updateSearch({ + status: statusValue.length > 0 ? statusValue.join(",") : undefined, + trigger: tokens.trigger.length > 0 ? [...tokens.trigger].join(",") : undefined, + tool: tokens.tool.length > 0 ? [...tokens.tool].join(",") : undefined, + code: tokens.code ?? undefined, + from: tokens.from ? String(tokens.from) : undefined, + to: tokens.to ? String(tokens.to) : undefined, + range: tokens.from || tokens.to ? undefined : undefined, + executionId: undefined, + }); + }, + [updateSearch], + ); + + useHotkeys("j", toggleLive, { enabled: !filterCommandOpen }); + useHotkeys("r", () => void listQuery.refetch(), { enabled: !filterCommandOpen }); + useHotkeys("/", () => filterCommandInputRef.current?.focus(), { preventDefault: true }); + useHotkeys("shift+/", () => setKeyboardHelpOpen(true), { preventDefault: true }); + useHotkeys("b", () => setRailCollapsed((prev) => !prev), { + enabled: !filterCommandOpen, + }); + + return ( + <> + + } + topBar={ +
+
+
+ + {rows.length.toLocaleString()} loaded + + {meta ? ( + + · {meta.filterRowCount.toLocaleString()} total + + ) : null} +
+
+ void listQuery.refetch()} + isLoading={listQuery.isRefetching} + /> + + + +
+
+ +
+ } + chartSlot={ + meta ? ( + + ) : null + } + columnHeader={ + + } + isLoading={listQuery.isLoading} + isFetchingNextPage={listQuery.isFetchingNextPage} + hasNextPage={listQuery.hasNextPage} + fetchNextPage={() => void listQuery.fetchNextPage()} + totalRowsFetched={rows.length} + filterRowCount={meta?.filterRowCount} + rows={rows} + getRowId={(row) => row.id} + collapseRail={railCollapsed} + renderRow={(row) => ( + handleRowSelect(row)} + /> + )} + liveMarkerBeforeRowId={liveMode.cutoffRow?.id} + emptyState={ +
+

+ No runs match the current filters. +

+

+ Try widening the time range or removing the status filter. +

+
+ } + /> + + prevRowId && updateSearch({ executionId: prevRowId })} + onNext={() => nextRowId && updateSearch({ executionId: nextRowId })} + /> + + ); +} diff --git a/packages/react/src/styles/globals.css b/packages/react/src/styles/globals.css index bddf02aae..5ed11e358 100644 --- a/packages/react/src/styles/globals.css +++ b/packages/react/src/styles/globals.css @@ -30,6 +30,10 @@ --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); + --color-success: var(--success); + --color-warning: var(--warning); + --color-error: var(--error); + --color-info: var(--info); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); @@ -67,6 +71,10 @@ --accent: oklch(0.94 0.006 260); --accent-foreground: oklch(0.145 0.005 260); --destructive: oklch(0.55 0.22 25); + --success: oklch(0.62 0.15 150); + --warning: oklch(0.72 0.16 85); + --error: oklch(0.58 0.22 25); + --info: oklch(0.62 0.12 245); --border: oklch(0.88 0.006 260); --input: oklch(0.88 0.006 260); --ring: oklch(0.55 0.17 175); @@ -103,6 +111,10 @@ --accent: oklch(0.195 0.008 260); --accent-foreground: oklch(0.9 0.008 250); --destructive: oklch(0.62 0.22 25); + --success: oklch(0.78 0.16 150); + --warning: oklch(0.8 0.14 85); + --error: oklch(0.72 0.2 25); + --info: oklch(0.76 0.11 245); --border: oklch(0.28 0.007 260); --input: oklch(0.195 0.007 260); --ring: oklch(0.72 0.15 175);