feat(react): runs page — list, filters, timeline, detail drawer

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,

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: () => <RunsPage search={Route.useSearch() as RunsSearch} />,
+});

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
         <NavItem to="/" label="Sources" active={isHome} onNavigate={props.onNavigate} />
         <NavItem to="/connections" label="Connections" active={isConnections} onNavigate={props.onNavigate} />
         <NavItem to="/secrets" label="Secrets" active={isSecrets} onNavigate={props.onNavigate} />
+        <NavItem to="/runs" label="Runs" active={isRuns} onNavigate={props.onNavigate} />
         <NavItem to="/org" label="Organization" active={isOrg} onNavigate={props.onNavigate} />
         <NavItem to="/billing" label="Billing" active={isBilling} onNavigate={props.onNavigate} />
 

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,

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: () => <RunsPage search={Route.useSearch() as RunsSearch} />,
+});

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: {
         <NavItem to="/" label="Sources" active={isHome} onNavigate={props.onNavigate} />
         <NavItem to="/connections" label="Connections" active={isConnections} onNavigate={props.onNavigate} />
         <NavItem to="/secrets" label="Secrets" active={isSecrets} onNavigate={props.onNavigate} />
+        <NavItem to="/runs" label="Runs" active={isRuns} onNavigate={props.onNavigate} />
 
         {/* Sources list */}
         <div className="mt-5 mb-1 px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground">

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",