feat(webapp): UX improvements for TaskRun page and TaskRun table

apps/webapp/app/components/Shortcuts.tsx

@@ -134,6 +134,10 @@ function ShortcutContent() {
               <ShortcutKey shortcut={{ key: "arrowleft" }} variant="medium/bright" />
               <ShortcutKey shortcut={{ key: "arrowright" }} variant="medium/bright" />
             </Shortcut>
+            <Shortcut name="Jump to adjacent">
+              <ShortcutKey shortcut={{ key: "[" }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: "]" }} variant="medium/bright" />
+            </Shortcut>
             <Shortcut name="Expand all">
               <ShortcutKey shortcut={{ key: "e" }} variant="medium/bright" />
             </Shortcut>

apps/webapp/app/components/primitives/Buttons.tsx

@@ -372,7 +372,7 @@ export const LinkButton = ({
       <ExtLink
         href={to.toString()}
         ref={innerRef}
-        className={cn("group/button focus-custom", props.fullWidth ? "w-full" : "")}
+        className={cn("group/button block focus-custom", props.fullWidth ? "w-full" : "")}
         onClick={onClick}
         onMouseDown={onMouseDown}
         onMouseEnter={onMouseEnter}
@@ -387,7 +387,7 @@ export const LinkButton = ({
       <Link
         to={to}
         ref={innerRef}
-        className={cn("group/button focus-custom", props.fullWidth ? "w-full" : "")}
+        className={cn("group/button block focus-custom", props.fullWidth ? "w-full" : "")}
         onClick={onClick}
         onMouseDown={onMouseDown}
         onMouseEnter={onMouseEnter}
@@ -408,7 +408,7 @@ export const NavLinkButton = ({ to, className, target, ...props }: NavLinkPropsT
   return (
     <NavLink
       to={to}
-      className={cn("group/button outline-none", props.fullWidth ? "w-full" : "")}
+      className={cn("group/button outline-none block", props.fullWidth ? "w-full" : "")}
       target={target}
     >
       {({ isActive, isPending }) => (

apps/webapp/app/components/primitives/CopyableText.tsx

@@ -3,59 +3,95 @@ import { useState } from "react";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useCopy } from "~/hooks/useCopy";
 import { cn } from "~/utils/cn";
+import { Button } from "./Buttons";
 
 export function CopyableText({
   value,
   copyValue,
   className,
   asChild,
+  variant,
 }: {
   value: string;
   copyValue?: string;
   className?: string;
   asChild?: boolean;
+  variant?: "icon-right" | "text-below";
 }) {
   const [isHovered, setIsHovered] = useState(false);
   const { copy, copied } = useCopy(copyValue ?? value);
 
-  return (
-    <span
-      className={cn("group relative inline-flex h-6 items-center", className)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <span onMouseEnter={() => setIsHovered(true)}>{value}</span>
+  const resolvedVariant = variant ?? "icon-right";
+
+  if (resolvedVariant === "icon-right") {
+    return (
       <span
-        onClick={copy}
-        onMouseDown={(e) => e.stopPropagation()}
-        className={cn(
-          "absolute -right-6 top-0 z-10 size-6 font-sans",
-          isHovered ? "flex" : "hidden"
-        )}
+        className={cn("group relative inline-flex h-6 items-center", className)}
+        onMouseLeave={() => setIsHovered(false)}
       >
-        <SimpleTooltip
-          button={
-            <span
-              className={cn(
-                "ml-1 flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
-                asChild && "p-1",
-                copied
-                  ? "text-green-500"
-                  : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
-              )}
-            >
-              {copied ? (
-                <ClipboardCheckIcon className="size-3.5" />
-              ) : (
-                <ClipboardIcon className="size-3.5" />
-              )}
-            </span>
-          }
-          content={copied ? "Copied!" : "Copy"}
-          className="font-sans"
-          disableHoverableContent
-          asChild={asChild}
-        />
+        <span onMouseEnter={() => setIsHovered(true)}>{value}</span>
+        <span
+          onClick={copy}
+          onMouseDown={(e) => e.stopPropagation()}
+          className={cn(
+            "absolute -right-6 top-0 z-10 size-6 font-sans",
+            isHovered ? "flex" : "hidden"
+          )}
+        >
+          <SimpleTooltip
+            button={
+              <span
+                className={cn(
+                  "ml-1 flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+                  asChild && "p-1",
+                  copied
+                    ? "text-green-500"
+                    : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+                )}
+              >
+                {copied ? (
+                  <ClipboardCheckIcon className="size-3.5" />
+                ) : (
+                  <ClipboardIcon className="size-3.5" />
+                )}
+              </span>
+            }
+            content={copied ? "Copied!" : "Copy"}
+            className="font-sans"
+            disableHoverableContent
+            asChild={asChild}
+          />
+        </span>
       </span>
-    </span>
-  );
+    );
+  }
+
+  if (resolvedVariant === "text-below") {
+    return (
+      <SimpleTooltip
+        button={
+          <Button
+            variant="minimal/small"
+            onClick={(e) => { 
+              e.stopPropagation();
+              copy(); 
+            }}
+            className={cn(
+              "cursor-pointer bg-transparent py-0 px-1 text-left text-text-bright transition-colors hover:text-white hover:bg-transparent",
+              className
+            )}
+          >
+            <span>{value}</span>
+          </Button>
+        }
+        content={copied ? "Copied" : "Click to copy"}
+        className="font-sans px-2 py-1"
+        disableHoverableContent
+        open={isHovered || copied}
+        onOpenChange={setIsHovered}
+      />
+    );
+  }
+
+  return null;
 }

apps/webapp/app/components/primitives/ShortcutKey.tsx

@@ -9,11 +9,11 @@ import { useOperatingSystem } from "./OperatingSystemProvider";
 import { KeyboardEnterIcon } from "~/assets/icons/KeyboardEnterIcon";
 
 const medium =
-  "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase";
+  "justify-center min-w-[1.25rem] min-h-[1.25rem] text-[0.65rem] font-mono font-medium rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase";
 
 export const variants = {
   small:
-    "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-text-dimmed/60 transition uppercase",
+    "justify-center text-[0.6rem] font-mono font-medium min-w-[1rem] min-h-[1rem] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-text-dimmed/60 transition uppercase",
   medium: cn(medium, "group-hover:border-charcoal-550"),
   "medium/bright": cn(medium, "bg-charcoal-750 text-text-bright border-charcoal-650"),
 };
@@ -57,7 +57,7 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps)
 function keyString(key: string, isMac: boolean, variant: "small" | "medium" | "medium/bright") {
   key = key.toLowerCase();
 
-  const className = variant === "small" ? "w-2.5 h-4" : "w-3 h-5";
+  const className = variant === "small" ? "w-2.5 h-4" : "w-2.5 h-4.5";
 
   switch (key) {
     case "enter":

apps/webapp/app/components/primitives/Tooltip.tsx

@@ -6,7 +6,7 @@ import { cn } from "~/utils/cn";
 const variantClasses = {
   basic:
     "bg-background-bright border border-grid-bright rounded px-3 py-2 text-sm text-text-bright shadow-md fade-in-50",
-  dark: "bg-background-dimmed border border-grid-bright rounded px-3 py-2 text-sm text-text-bright shadow-md fade-in-50",
+  dark: "bg-background-dimmed border border-grid-bright rounded px-3 py-2 text-sm text-text-bright shadow-md fade-in-50"
 };
 
 type Variant = keyof typeof variantClasses;
@@ -64,6 +64,8 @@ function SimpleTooltip({
   buttonStyle,
   asChild = false,
   sideOffset,
+  open,
+  onOpenChange,
 }: {
   button: React.ReactNode;
   content: React.ReactNode;
@@ -76,10 +78,12 @@ function SimpleTooltip({
   buttonStyle?: React.CSSProperties;
   asChild?: boolean;
   sideOffset?: number;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
   return (
     <TooltipProvider disableHoverableContent={disableHoverableContent}>
-      <Tooltip>
+      <Tooltip open={open} onOpenChange={onOpenChange}>
         <TooltipTrigger
           tabIndex={-1}
           className={cn("h-fit", buttonClassName)}

apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

@@ -55,6 +55,7 @@ import {
   filterableTaskRunStatuses,
   TaskRunStatusCombo,
 } from "./TaskRunStatus";
+import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 
 type RunsTableProps = {
   total: number;
@@ -81,6 +82,8 @@ export function TaskRunsTable({
   const checkboxes = useRef<(HTMLInputElement | null)[]>([]);
   const { has, hasAll, select, deselect, toggle } = useSelectedItems(allowSelection);
   const { isManagedCloud } = useFeatures();
+  const location = useOptimisticLocation();
+  const tableStateParam = encodeURIComponent(location.search ? `${location.search}&rt=1` : "rt=1");
 
   const showCompute = isManagedCloud;
 
@@ -293,16 +296,20 @@ export function TaskRunsTable({
           <BlankState isLoading={isLoading} filters={filters} />
         ) : (
           runs.map((run, index) => {
+            const searchParams = new URLSearchParams();
+            if (tableStateParam) {
+              searchParams.set("tableState", tableStateParam);
+            }
             const path = v3RunSpanPath(organization, project, run.environment, run, {
               spanId: run.spanId,
-            });
+            }, searchParams);
             return (
               <TableRow key={run.id}>
                 {allowSelection && (
                   <TableCell className="pl-3 pr-0">
                     <Checkbox
                       checked={has(run.friendlyId)}
-                      onChange={(element) => {
+                      onChange={() => {
                         toggle(run.friendlyId);
                       }}
                       ref={(r) => {