Add task status list with node focus navigation in pipeline run view #1605

Mbeaulne · 2026-01-08T14:21:18Z

Description

Added a task status list feature that allows users to view and navigate to individual tasks in a pipeline run. The implementation includes:

A collapsible status bar that shows task statuses grouped by their execution state
Ability to navigate to specific tasks in the pipeline graph
Automatic highlighting of tasks when selected
Task grouping by status with expandable sections
Integration with the existing status bar component

Type of Change

New feature
Improvement

Checklist

I have tested this does not break current pipelines / runs functionality
I have tested the changes on staging

Test Instructions

Open any pipeline run with multiple tasks
Click "View all" under the status bar
Expand status groups and click on individual tasks to navigate to them
Verify that the graph focuses on the selected task and highlights it

status_click.mov (uploaded via Graphite)

Additional Comments

This feature improves pipeline run debugging by making it easier to find and navigate to specific tasks, especially in complex pipelines with many nested components.

Mbeaulne · 2026-01-08T14:21:40Z

Add task status list with node focus navigation in pipeline run view #1605 👈 (View in Graphite)
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

graphite-app · 2026-01-13T19:51:12Z

src/hooks/useNodeFocus.ts

+    const handleClick = () => {
+      const { focus: _, ...rest } = search;
+      navigate({
+        to: pathname,
+        search: rest,
+        replace: true,
+      });
+    };


Critical race condition: The global click handler fires during the capture phase before the task navigation click handlers. When a user clicks on a task in the status list:

This handler fires first (capture phase) and removes the focus parameter

Then the task item's click handler fires and sets a new focus parameter

Both handlers call navigate() with replace: true, causing a navigation race

This will cause the focus highlighting to flicker or fail entirely when clicking on tasks from the status list.

Fix: Add a check to ignore clicks on task navigation elements:

const handleClick = (event: MouseEvent) => { // Don't clear focus if clicking on task navigation elements const target = event.target as HTMLElement; if (target.closest('[data-task-navigation]')) { return; } const { focus: _, ...rest } = search; navigate({ to: pathname, search: rest, replace: true, }); };

And add data-task-navigation attribute to the task buttons in TaskStatusList.tsx.

Suggested change

const handleClick = () => {

const { focus: _, ...rest } = search;

navigate({

to: pathname,

search: rest,

replace: true,

});

};

const handleClick = (event: MouseEvent) => {

// Don't clear focus if clicking on task navigation elements

const target = event.target as HTMLElement;

if (target.closest('[data-task-navigation]')) {

return;

}

const { focus: _, ...rest } = search;

navigate({

to: pathname,

search: rest,

replace: true,

});

};

Spotted by Graphite Agent

Is this helpful? React 👍 or 👎 to let us know.

maxy-shpfy · 2026-01-15T18:02:25Z

src/components/PipelineRun/RunDetails.tsx

+      if (!componentSpec || !state || !details || !backendUrl) {
+        return [];
+      }


NIT: due to enabled condition, this extra check may not be required, unless it narrows down the typing.

maxy-shpfy · 2026-01-15T18:03:14Z

src/components/PipelineRun/RunDetails.tsx

+    },
+    enabled:
+      !!componentSpec && !!state && !!details && !!backendUrl && configured,
+    staleTime: 30000,


NIT: use 30 * SECONDS for better readability

maxy-shpfy · 2026-01-15T18:04:46Z

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx

          "rounded-2xl border-gray-200 border-2 wrap-break-word p-0 drop-shadow-none gap-2",
          selected ? "border-gray-500" : "hover:border-slate-200",
-          (highlighted || highlightedState) && "border-orange-500!",
+          (highlighted || highlightedState || isFocusedByUrl) &&


this condition becomes pretty complex - it makes sense to extract it into a dedicated variable to improve readability.

maxy-shpfy · 2026-01-15T18:09:56Z

src/components/shared/Status/TaskStatusBar.tsx

+  rootExecutionId?: string;
+}
+
 const TaskStatusBar = ({


Not related to the PR, but it bothers me: we have TWO aliases for the same component: TaskStatusBar and just StatusBar. We should fix it future

maxy-shpfy · 2026-01-15T18:11:22Z

src/components/shared/Status/TaskStatusBar.tsx

+        {showViewAll && (
+          <CollapsibleTrigger asChild>
+            <InlineStack align="end">
+              <Button
+                variant="link"
+                size="inline-xs"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <InlineStack gap="1" blockAlign="center">
+                  {isExpanded ? "Hide" : viewAllLabel}
+                  <Icon
+                    name="ChevronDown"
+                    size="xs"
+                    className={cn(
+                      "transition-transform duration-200",
+                      isExpanded && "rotate-180",
+                    )}
+                  />
+                </InlineStack>
+              </Button>
+            </InlineStack>
+          </CollapsibleTrigger>
+        )}
+      </BlockStack>
+      {showViewAll && (
+        <CollapsibleContent>
+          <BlockStack className="mt-1 max-h-64 overflow-y-auto">
+            <TaskStatusList
+              tasks={taskStatuses}
+              rootExecutionId={rootExecutionId}
+            />
+          </BlockStack>
+        </CollapsibleContent>
      )}
-    </BlockStack>
+    </Collapsible>


I believe this must be a separate component for simplified maintenance. StatusBar is used a lot across the app, and only in one place with taskStatuses (which changes behavior drastically). So my suggestion is to extract this into a separate component and use it next to the StatusBar in RunDetails.

After reviewing, I think it definitely need to be a separate component. Also helpers from collectAllTaskStatuses need to be ingested by that new component in form of lazy useSuspenseQuery. useTaskNavigation must be also co-located with the new component.

maxy-shpfy · 2026-01-15T18:15:30Z

src/hooks/useNodeFocus.ts

+  return undefined;
+};
+
+export const useNodeFocus = () => {


The purpose of the hook is to "remove selection" when clicked outside of the selected node (click-away-to-dismiss behavior), if I read it correctly.

I would advice to change the name of the hook to be reflect the purpose.

maxy-shpfy · 2026-01-15T18:17:08Z

src/hooks/useNodeFocus.ts

+      const target = event.target;
+      if (
+        target instanceof HTMLElement &&
+        target.closest("[data-task-status-list]")


Magic string. Risk of divergence in future, if someone changes it in a different place.

maxy-shpfy · 2026-01-15T18:18:14Z

src/hooks/useTaskNavigation.ts

+ * Hook for navigating to a task from the status list.
+ * Updates the URL with `?focus=nodeId` to trigger node highlighting.
+ */
+export const useTaskNavigation = ({


Hook is used in one place only. I suggest to move it closer to the usage, so it follows "co-location" principle.

maxy-shpfy · 2026-01-15T18:25:48Z

src/routes/router.ts

+  filter?: string;
+};
+
+const validateHomeSearch = (


how is it related to the PR?

maxy-shpfy · 2026-01-15T18:27:26Z

src/utils/collectTaskStatuses.ts

+ * Recursively collects all LEAF tasks (non-subgraph tasks) with their execution statuses.
+ * This traverses into subgraphs to find the actual tasks.
+ */
+export const collectAllTaskStatuses = async (


this been used only in one place. I suggest to move this helper closer to the usage to satisfy our co-location principle.

maxy-shpfy · 2026-01-15T18:44:00Z

src/utils/collectTaskStatuses.ts

+      if (subgraphExecutionId && context.backendUrl) {
+        try {
+          [nestedDetails, nestedState] = await Promise.all([
+            fetchExecutionDetails(subgraphExecutionId, context.backendUrl),
+            fetchExecutionState(subgraphExecutionId, context.backendUrl),
+          ]);
+        } catch {
+          // If fetching fails, continue without nested execution data
+        }
+      }


That's something we need to think about. We were fighting hard to reduce number of requests coming from the Pipeline Run page and managed to do that.

Now we introducing those queries back. I would suggest to rethink and try to find way to avoid this or at least make it "lazy" - component is "hidden" by default, so we can fetch data only when we "expand" it.

Also "state" wont be re-fetched, as fast as I understood

maxy-shpfy

UI and purpose seems to be pretty nice! I liked it.

But

We were fighting hard to reduce number of requests coming from the Pipeline Run page and managed to do that.

Now we introducing those queries back. I would suggest to rethink and try to find way to avoid this or at least make it "lazy" - component is "hidden" by default, so we can fetch data only when we "expand" it.

Also "state" wont be re-fetched leading to "stale" data displayed in the expanded form.

Screen Recording 2026-01-15 at 10.46.29 AM.mov (uploaded via Graphite)

Mbeaulne force-pushed the 01-08-status_click_through branch 2 times, most recently from a8d0d34 to 5f33bd2 Compare January 12, 2026 15:58

Mbeaulne changed the title ~~status click through~~ Add expandable task status list to pipeline run details Jan 12, 2026

Mbeaulne force-pushed the 01-08-status_click_through branch 11 times, most recently from 2c94e0d to 0a1f283 Compare January 12, 2026 21:31

Mbeaulne changed the title ~~Add expandable task status list to pipeline run details~~ Add task status list with node focus navigation in pipeline run view Jan 12, 2026

Mbeaulne force-pushed the 01-08-status_click_through branch 4 times, most recently from 26c3d2c to 8c37884 Compare January 12, 2026 21:56

Mbeaulne requested review from camielvs, maxy-shpfy, morgan-wowk and yuechao-qin January 12, 2026 22:04

graphite-app bot reviewed Jan 13, 2026

View reviewed changes

Mbeaulne marked this pull request as ready for review January 14, 2026 21:13

Mbeaulne requested a review from a team as a code owner January 14, 2026 21:13

Mbeaulne force-pushed the 01-08-status_click_through branch 2 times, most recently from 4564ec1 to 84fe6c1 Compare January 15, 2026 15:48

status click through

9cace25

Mbeaulne force-pushed the 01-08-status_click_through branch from 84fe6c1 to 9cace25 Compare January 15, 2026 15:54

maxy-shpfy reviewed Jan 15, 2026

View reviewed changes

src/routes/router.ts

filter?: string;

};

const validateHomeSearch = (

Copy link

Collaborator

maxy-shpfy Jan 15, 2026

Choose a reason for hiding this comment

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

how is it related to the PR?

maxy-shpfy reviewed Jan 15, 2026

View reviewed changes

maxy-shpfy requested changes Jan 15, 2026

View reviewed changes

Add task status list with node focus navigation in pipeline run view #1605

Are you sure you want to change the base?

Add task status list with node focus navigation in pipeline run view #1605

Conversation

Mbeaulne commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Checklist

Test Instructions

Additional Comments

Uh oh!

Mbeaulne commented Jan 8, 2026

Uh oh!

graphite-app bot Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Mbeaulne commented Jan 8, 2026 •

edited

Loading

maxy-shpfy Jan 15, 2026 •

edited

Loading