From 00fbf6ac13d1680f5ba3ea8087529473843f57b7 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 11:50:57 +0100
Subject: [PATCH 1/5] fix(webapp): align tree mouse and keyboard interactions

---
 .../route.tsx                                 | 22 +++++++++----
 .../app/routes/storybook.tree-view/route.tsx  | 32 ++++++++++++-------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index 53ba28b800b..f318a7e5a85 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -968,6 +968,14 @@ function TasksTreeView({
     },
   });
 
+  const getInteractiveNodeProps = useCallback(
+    (id: string) => ({
+      ...getNodeProps(id),
+      onClick: () => selectNode(id),
+    }),
+    [getNodeProps, selectNode]
+  );
+
   return (
     <div className="grid h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden">
       <div className="flex items-center justify-between gap-2 border-b border-grid-dimmed px-1.5">
@@ -1047,7 +1055,7 @@ function TasksTreeView({
               autoFocus
               tree={events}
               nodes={nodes}
-              getNodeProps={getNodeProps}
+              getNodeProps={getInteractiveNodeProps}
               getTreeProps={getTreeProps}
               parentClassName="pl-3"
               renderNode={({ node, state, index }) => (
@@ -1058,9 +1066,6 @@ function TasksTreeView({
                       ? "bg-grid-dimmed hover:bg-grid-bright"
                       : "bg-transparent hover:bg-grid-dimmed"
                   )}
-                  onClick={() => {
-                    selectNode(node.id);
-                  }}
                 >
                   <div className="flex h-8 items-center">
                     {Array.from({ length: node.level }).map((_, index) => (
@@ -1070,9 +1075,12 @@ function TasksTreeView({
                         isSelected={state.selected}
                       />
                     ))}
-                    <div
+                    <button
+                      type="button"
+                      disabled={!node.hasChildren}
+                      aria-label={state.expanded ? "Collapse task" : "Expand task"}
                       className={cn(
-                        "flex h-8 w-4 items-center",
+                        "flex h-8 w-4 items-center focus-custom",
                         node.hasChildren && "hover:bg-surface-control"
                       )}
                       onClick={(e) => {
@@ -1098,7 +1106,7 @@ function TasksTreeView({
                       ) : (
                         <div className="h-8 w-4" />
                       )}
-                    </div>
+                    </button>
                   </div>
 
                   <div className="flex w-full items-center justify-between gap-2 pl-1">
diff --git a/apps/webapp/app/routes/storybook.tree-view/route.tsx b/apps/webapp/app/routes/storybook.tree-view/route.tsx
index ac58d71b185..a78d7ccd4c5 100644
--- a/apps/webapp/app/routes/storybook.tree-view/route.tsx
+++ b/apps/webapp/app/routes/storybook.tree-view/route.tsx
@@ -4,7 +4,7 @@ import {
   FolderOpenIcon,
   MagnifyingGlassIcon,
 } from "@heroicons/react/20/solid";
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { Input } from "~/components/primitives/Input";
 import type { Tree } from "~/components/primitives/TreeView/TreeView";
@@ -177,6 +177,14 @@ function TreeViewParent({
     },
   });
 
+  const getInteractiveNodeProps = useCallback(
+    (id: string) => ({
+      ...getNodeProps(id),
+      onClick: () => toggleNodeSelection(id),
+    }),
+    [getNodeProps, toggleNodeSelection]
+  );
+
   return (
     <div className="flex w-72 flex-col items-start gap-y-4 p-4">
       <div className="flex items-center gap-2">
@@ -203,7 +211,7 @@ function TreeViewParent({
         autoFocus
         tree={tree}
         nodes={nodes}
-        getNodeProps={getNodeProps}
+        getNodeProps={getInteractiveNodeProps}
         getTreeProps={getTreeProps}
         parentClassName="h-96 bg-background-deep"
         renderNode={({ node, state, index, virtualizer, virtualItem }) => (
@@ -215,20 +223,22 @@ function TreeViewParent({
               "flex cursor-pointer items-center gap-2 py-1 hover:bg-blue-500/10",
               state.selected && "bg-blue-500/20 hover:bg-blue-500/30"
             )}
-            onClick={() => {
-              toggleNodeSelection(node.id);
-            }}
           >
-            <div
-              className="h-4 w-4"
+            <button
+              type="button"
+              aria-label={
+                node.hasChildren
+                  ? state.expanded
+                    ? "Collapse node"
+                    : "Expand node"
+                  : "Select node"
+              }
+              className="h-4 w-4 focus-custom"
               onClick={(e) => {
                 e.stopPropagation();
                 toggleExpandNode(node.id);
                 selectNode(node.id, true);
               }}
-              onKeyDown={(e) => {
-                console.log(e.key);
-              }}
             >
               {node.hasChildren ? (
                 state.expanded ? (
@@ -239,7 +249,7 @@ function TreeViewParent({
               ) : (
                 <DocumentIcon className="h-4 w-4" />
               )}
-            </div>
+            </button>
             <div>{node.data.title}</div>
           </div>
         )}

From f8cdd56f6db993ddd7e1aa795fb764b99ad8dbbb Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 13:00:15 +0100
Subject: [PATCH 2/5] fix(webapp): preserve tree keyboard focus

---
 .../route.tsx                                     | 13 ++++++-------
 .../app/routes/storybook.tree-view/route.tsx      | 15 +++++++--------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index f318a7e5a85..9b8a81f7508 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -968,13 +968,10 @@ function TasksTreeView({
     },
   });
 
-  const getInteractiveNodeProps = useCallback(
-    (id: string) => ({
-      ...getNodeProps(id),
-      onClick: () => selectNode(id),
-    }),
-    [getNodeProps, selectNode]
-  );
+  const getInteractiveNodeProps = (id: string) => ({
+    ...getNodeProps(id),
+    onClick: () => selectNode(id),
+  });
 
   return (
     <div className="grid h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden">
@@ -1077,6 +1074,7 @@ function TasksTreeView({
                     ))}
                     <button
                       type="button"
+                      tabIndex={-1}
                       disabled={!node.hasChildren}
                       aria-label={state.expanded ? "Collapse task" : "Expand task"}
                       className={cn(
@@ -1095,6 +1093,7 @@ function TasksTreeView({
                           toggleExpandNode(node.id);
                         }
                         scrollToNode(node.id);
+                        parentRef.current?.focus();
                       }}
                     >
                       {node.hasChildren ? (
diff --git a/apps/webapp/app/routes/storybook.tree-view/route.tsx b/apps/webapp/app/routes/storybook.tree-view/route.tsx
index a78d7ccd4c5..bc7c8cc26ef 100644
--- a/apps/webapp/app/routes/storybook.tree-view/route.tsx
+++ b/apps/webapp/app/routes/storybook.tree-view/route.tsx
@@ -4,7 +4,7 @@ import {
   FolderOpenIcon,
   MagnifyingGlassIcon,
 } from "@heroicons/react/20/solid";
-import { useCallback, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { Input } from "~/components/primitives/Input";
 import type { Tree } from "~/components/primitives/TreeView/TreeView";
@@ -177,13 +177,10 @@ function TreeViewParent({
     },
   });
 
-  const getInteractiveNodeProps = useCallback(
-    (id: string) => ({
-      ...getNodeProps(id),
-      onClick: () => toggleNodeSelection(id),
-    }),
-    [getNodeProps, toggleNodeSelection]
-  );
+  const getInteractiveNodeProps = (id: string) => ({
+    ...getNodeProps(id),
+    onClick: () => toggleNodeSelection(id),
+  });
 
   return (
     <div className="flex w-72 flex-col items-start gap-y-4 p-4">
@@ -226,6 +223,7 @@ function TreeViewParent({
           >
             <button
               type="button"
+              tabIndex={-1}
               aria-label={
                 node.hasChildren
                   ? state.expanded
@@ -238,6 +236,7 @@ function TreeViewParent({
                 e.stopPropagation();
                 toggleExpandNode(node.id);
                 selectNode(node.id, true);
+                parentRef.current?.focus();
               }}
             >
               {node.hasChildren ? (

From b43918628fcd8a844115a691df63d8ecb567fb4f Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 13:40:52 +0100
Subject: [PATCH 3/5] fix(webapp): restore alt-click bulk expand/collapse on
 leaf tree rows

The task-arrow button used a disabled attribute for leaf rows, which
also blocks the click event entirely, so alt-clicking a leaf's arrow
no longer expanded or collapsed every row at that depth. Guard the
per-node toggle instead and keep the button clickable, and mark it
aria-disabled for styling. Also pass preventScroll to the post-toggle
focus() call so it can't fight the just-completed scrollToNode.
---
 .../route.tsx                                               | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index 9b8a81f7508..c60c56df785 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -1075,7 +1075,7 @@ function TasksTreeView({
                     <button
                       type="button"
                       tabIndex={-1}
-                      disabled={!node.hasChildren}
+                      aria-disabled={!node.hasChildren}
                       aria-label={state.expanded ? "Collapse task" : "Expand task"}
                       className={cn(
                         "flex h-8 w-4 items-center focus-custom",
@@ -1089,11 +1089,11 @@ function TasksTreeView({
                           } else {
                             expandAllBelowDepth(node.level);
                           }
-                        } else {
+                        } else if (node.hasChildren) {
                           toggleExpandNode(node.id);
                         }
                         scrollToNode(node.id);
-                        parentRef.current?.focus();
+                        parentRef.current?.focus({ preventScroll: true });
                       }}
                     >
                       {node.hasChildren ? (

From 12c9870f3539c1c48dcf3a034547c3d6937d7bca Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 15:59:53 +0100
Subject: [PATCH 4/5] docs(webapp): note trace tree interaction fix

---
 .server-changes/run-trace-tree-interactions.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .server-changes/run-trace-tree-interactions.md

diff --git a/.server-changes/run-trace-tree-interactions.md b/.server-changes/run-trace-tree-interactions.md
new file mode 100644
index 00000000000..eb94cf06712
--- /dev/null
+++ b/.server-changes/run-trace-tree-interactions.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Run trace rows now respond consistently to mouse and keyboard selection, including Alt-click expansion controls.

From 5cce769eadd2200a01da5d4e2e22d3764a6e7559 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 16:19:25 +0100
Subject: [PATCH 5/5] fix(webapp): make leaf trace controls select tasks

---
 .../route.tsx                                         | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index c60c56df785..be4b2b4a816 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -1075,8 +1075,13 @@ function TasksTreeView({
                     <button
                       type="button"
                       tabIndex={-1}
-                      aria-disabled={!node.hasChildren}
-                      aria-label={state.expanded ? "Collapse task" : "Expand task"}
+                      aria-label={
+                        node.hasChildren
+                          ? state.expanded
+                            ? "Collapse task"
+                            : "Expand task"
+                          : "Select task"
+                      }
                       className={cn(
                         "flex h-8 w-4 items-center focus-custom",
                         node.hasChildren && "hover:bg-surface-control"
@@ -1091,6 +1096,8 @@ function TasksTreeView({
                           }
                         } else if (node.hasChildren) {
                           toggleExpandNode(node.id);
+                        } else {
+                          selectNode(node.id, false);
                         }
                         scrollToNode(node.id);
                         parentRef.current?.focus({ preventScroll: true });