Skip to content

chore: workflow run ui#894

Merged
adityachoudhari26 merged 3 commits intomainfrom
workflow-run-ui
Mar 31, 2026
Merged

chore: workflow run ui#894
adityachoudhari26 merged 3 commits intomainfrom
workflow-run-ui

Conversation

@adityachoudhari26
Copy link
Copy Markdown
Member

@adityachoudhari26 adityachoudhari26 commented Mar 30, 2026

Summary by CodeRabbit

  • New Features
    • Workflow run rows are now clickable to open a detailed run view.
    • Deep-linkable run detail page showing inputs (or "No inputs"), associated jobs with agent info and status badges, external metadata links when available, and relative "created" timestamps.
    • Backend support added to fetch run details and associated job metadata for accurate display.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 30, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 52fd5b42-4491-4a32-8cc4-63d416829baa

📥 Commits

Reviewing files that changed from the base of the PR and between 72ca7b3 and 0b7dba0.

📒 Files selected for processing (2)
  • apps/web/app/routes/ws/workflows/page.$workflowId.runs.$runId.tsx
  • packages/trpc/src/routes/workflows.ts

Disabled knowledge base sources:

  • Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.


📝 Walkthrough

Walkthrough

Adds a workflow run detail page and route, makes workflow run rows navigable to that page, and introduces a tRPC endpoint that returns a workflow run with its jobs and per-job metadata.

Changes

Cohort / File(s) Summary
Routing Configuration
apps/web/app/routes.ts
Added nested route workflows/:workflowId/runs/:runId → new run detail page component.
UI Components
apps/web/app/routes/ws/workflows/_components/WorkflowRunsTable.tsx, apps/web/app/routes/ws/workflows/page.$workflowId.runs.$runId.tsx
Made run table rows clickable (navigate to run detail). Added WorkflowRunDetailPage rendering header/breadcrumbs, inputs grid, jobs table with status badges and metadata-derived external links, loading and not-found handling.
Backend API
packages/trpc/src/routes/workflows.ts
Added getJobMetadataMap helper and workflows.runs.get tRPC endpoint returning a workflow run plus its jobs and per-job metadata: Record<string,string>.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Browser as Browser/Client
    participant Router as React Router
    participant Page as WorkflowRunDetailPage
    participant API as tRPC Backend
    participant DB as Database

    User->>Browser: Click workflow run row
    Browser->>Router: Navigate to /{workspace}/workflows/{workflowId}/runs/{runId}
    Router->>Page: Render WorkflowRunDetailPage
    Page->>API: trpc.workflows.get(workflowId)
    API->>DB: Query workflow
    DB-->>API: workflow
    API-->>Page: workflow
    Page->>API: trpc.workflows.runs.get({workflowRunId, workspaceId})
    API->>DB: Query workflowRun
    DB-->>API: workflowRun
    API->>DB: Query jobs for run (with agent fields)
    DB-->>API: jobs
    API->>DB: Query jobMetadata for job IDs (getJobMetadataMap)
    DB-->>API: metadata grouped by jobId
    API-->>Page: run + jobs with metadata
    Page->>Browser: Render inputs and jobs table
    Browser->>User: Display run details
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • jsbroks

Poem

🐰 I hopped from row to shiny row,
Followed breadcrumbs where data flow.
Jobs and inputs come into view,
Metadata links with a tiny cue.
Hooray — a run’s tale, fresh and new!

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'chore: workflow run ui' accurately describes the main change: adding a new workflow run detail view UI. The changes include routing, UI components, and backend support for displaying workflow run information.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch workflow-run-ui

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🧹 Nitpick comments (1)
apps/web/app/routes/ws/workflows/page.$workflowId.runs.$runId.tsx (1)

39-45: Consider aligning component declarations with the repo’s React.FC convention.

These new components use function declarations; the repo guideline asks for React.FC with explicit typing.

As per coding guidelines, **/*.{ts,tsx}: “For React components, use React.FC with explicit typing (e.g., const My: React.FC = () => {})`.

Also applies to: 82-82, 103-103, 132-132, 153-153

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/app/routes/ws/workflows/page`.$workflowId.runs.$runId.tsx around
lines 39 - 45, Convert the function-style React components in this file to the
repo convention using React.FC with explicit prop typing: change RunPageHeader
(and the other components noted in the comment) from function declarations to
const declarations typed as React.FC with an explicit props interface (e.g.,
specify { workflowName: string; runId: string } for RunPageHeader) and keep the
same props and implementation body; update any exports/imports as necessary to
match the new const component forms.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/app/routes/ws/workflows/_components/WorkflowRunsTable.tsx`:
- Around line 29-36: TableRow currently only handles mouse clicks via onClick
(TableRow, navigate, workspace.slug, workflowId, run.id) and is not
keyboard-focusable/operable; make the row keyboard-accessible by either
rendering a real Link inside the row cell pointing to
`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}` or add accessible
semantics to TableRow: set tabIndex={0}, role="link", and handle onKeyDown to
trigger the same navigate call when Enter or Space is pressed, and ensure focus
styling is preserved for keyboard users.

In `@apps/web/app/routes/ws/workflows/page`.$workflowId.runs.$runId.tsx:
- Around line 89-98: The mapped fragment in entries.map uses the shorthand <>
which cannot accept a key, and currently the key props are placed on the inner
<span> elements (see entries.map and the two span elements using
`${key}-label`/`${key}-value`), so React reconciliation can be unstable; fix by
moving the key to the top-level mapped element: either replace the shorthand
fragment with a keyed Fragment (import Fragment and use <Fragment key={key}>) or
wrap the two spans in a keyed container element (e.g., <div key={key}> or
similar), and remove the duplicate keys on the inner spans.
- Around line 104-107: Replace the direct JSON.parse of
metadata["ctrlplane/links"] with a guarded parse: wrap JSON.parse in a try/catch
when building the links variable so malformed JSON falls back to an empty
object, and then iterate over the parsed object to include only entries whose
values are strings (ensuring links: Record<string,string>). Update the code that
constructs links (the variable named links and the access to
metadata["ctrlplane/links"]) to use this safe parse-and-validate flow so the
page won't crash on malformed metadata and only valid string values are kept.

In `@packages/trpc/src/routes/workflows.ts`:
- Around line 90-101: The runs.get procedure currently queries
schema.workflowRun by input.workflowRunId only, allowing cross-workspace access
if a run UUID is guessed; update the procedure input to include workspaceId
(and/or workflowId) and modify the DB WHERE clause to filter by both
eq(schema.workflowRun.id, input.workflowRunId) AND
eq(schema.workflowRun.workspaceId, ctx.session.workspaceId) (or
eq(schema.workflowRun.workflowId, input.workflowId) if scoping to workflow), and
ensure authorization uses ctx.session.workspaceId from the authenticated
session; adjust the protectedProcedure invocation and any related queries
(including the similar block around the code referenced at lines 120-133) to
apply the same workspace/workflow WHERE filters.

---

Nitpick comments:
In `@apps/web/app/routes/ws/workflows/page`.$workflowId.runs.$runId.tsx:
- Around line 39-45: Convert the function-style React components in this file to
the repo convention using React.FC with explicit prop typing: change
RunPageHeader (and the other components noted in the comment) from function
declarations to const declarations typed as React.FC with an explicit props
interface (e.g., specify { workflowName: string; runId: string } for
RunPageHeader) and keep the same props and implementation body; update any
exports/imports as necessary to match the new const component forms.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8868d9f3-fac0-4a4b-9a68-7c06597c380e

📥 Commits

Reviewing files that changed from the base of the PR and between 6bf858d and 75f2f2d.

📒 Files selected for processing (4)
  • apps/web/app/routes.ts
  • apps/web/app/routes/ws/workflows/_components/WorkflowRunsTable.tsx
  • apps/web/app/routes/ws/workflows/page.$workflowId.runs.$runId.tsx
  • packages/trpc/src/routes/workflows.ts

Comment on lines +29 to +36
<TableRow
className="cursor-pointer"
onClick={() =>
navigate(
`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`,
)
}
>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Make row navigation keyboard-accessible.

The row is clickable with a mouse, but it is not focusable/operable via keyboard. Please add keyboard semantics (or render a real <Link> target in-cell).

♿ Suggested fix
     <TableRow
       className="cursor-pointer"
+      role="link"
+      tabIndex={0}
       onClick={() =>
         navigate(
           `/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`,
         )
       }
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          navigate(`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`);
+        }
+      }}
     >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<TableRow
className="cursor-pointer"
onClick={() =>
navigate(
`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`,
)
}
>
<TableRow
className="cursor-pointer"
role="link"
tabIndex={0}
onClick={() =>
navigate(
`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`,
)
}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
navigate(`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`);
}
}}
>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/app/routes/ws/workflows/_components/WorkflowRunsTable.tsx` around
lines 29 - 36, TableRow currently only handles mouse clicks via onClick
(TableRow, navigate, workspace.slug, workflowId, run.id) and is not
keyboard-focusable/operable; make the row keyboard-accessible by either
rendering a real Link inside the row cell pointing to
`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}` or add accessible
semantics to TableRow: set tabIndex={0}, role="link", and handle onKeyDown to
trigger the same navigate call when Enter or Space is pressed, and ensure focus
styling is preserved for keyboard users.

@adityachoudhari26 adityachoudhari26 merged commit f6b2b05 into main Mar 31, 2026
6 checks passed
@adityachoudhari26 adityachoudhari26 deleted the workflow-run-ui branch March 31, 2026 17:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant