feat(dashboard-agent): investigation cards for run questions, timeline, fullscreen blocks and queue charts

Mono-RevId: 7a958bdcafd56dd32ed248d8928893400dbaac6b

Author: kathiekiwi

.server-changes/dashboard-assistant.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+The assistant in the dashboard now answers with cards: investigation cards for run questions, carrying the run's timeline and links to the run, queue or deployment, alongside charts and tables you can open fullscreen or copy — including queue metrics — and it answers about another project or environment without you switching to it first. The assistant reads run timelines through a dedicated endpoint, so span durations and launch events are consistent on every event store; the public run trace API is unchanged.

apps/webapp/app/components/code/QueryResultsChart.tsx

@@ -12,10 +12,10 @@ import { ChartBlankState } from "../primitives/charts/ChartBlankState";
 import { Callout } from "../primitives/Callout";
 import type { AggregationType, ChartConfiguration } from "../metrics/QueryWidget";
 import { aggregateValues } from "../primitives/charts/aggregation";
+import { MAX_SERIES } from "~/components/primitives/charts/seriesFromRows";
 import { getRunStatusChartColor } from "~/components/runs/v3/TaskRunStatus";
 import { getSeriesColor } from "./chartColors";
 
-const MAX_SERIES = 50;
 const MAX_SVG_ELEMENT_BUDGET = 6_000;
 const MIN_DATA_POINTS = 100;
 const MAX_DATA_POINTS = 500;
@@ -65,6 +65,8 @@ interface QueryResultsChartProps {
   /** When true, constrains legend to max 50% height with scrolling */
   legendScrollable?: boolean;
   isLoading?: boolean;
+  /** Overrides the y-value format inferred from the first y column's metadata. */
+  valueFormat?: ColumnFormatType;
 }
 
 interface TransformedData {
@@ -805,6 +807,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   onViewAllLegendItems,
   isLoading = false,
   legendScrollable = false,
+  valueFormat,
 }: QueryResultsChartProps) {
   const {
     xAxisColumn,
@@ -911,10 +914,11 @@ export const QueryResultsChart = memo(function QueryResultsChart({
 
   // Resolve the Y-axis column format for formatting
   const yAxisFormat = useMemo(() => {
+    if (valueFormat) return valueFormat;
     if (yAxisColumns.length === 0) return undefined;
     const col = columns.find((c) => c.name === yAxisColumns[0]);
     return (col?.format ?? col?.customRenderType) as ColumnFormatType | undefined;
-  }, [yAxisColumns, columns]);
+  }, [valueFormat, yAxisColumns, columns]);
 
   // Create dynamic Y-axis formatter based on data range and format
   const yAxisFormatter = useMemo(
@@ -1243,7 +1247,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
 /**
  * Creates a Y-axis value formatter based on the data range and optional format hint
  */
-function createYAxisFormatter(
+export function createYAxisFormatter(
   data: Record<string, unknown>[],
   series: string[],
   format?: ColumnFormatType

apps/webapp/app/components/code/StreamdownRenderer.test.ts

@@ -170,6 +170,13 @@ describe("StreamdownRenderer (rendered markdown)", () => {
     expect(html).toContain('target="_blank"');
     expect(html).toContain('rel="noopener noreferrer"');
   });
+
+  it("wraps a rendered table in a scrollable div and drops the hast node prop", async () => {
+    const html = await render(["| a | b |", "| --- | --- |", "| 1 | 2 |"].join("\n"));
+
+    expect(html).toMatch(/<div class="overflow-x-auto"><table/);
+    expect(html).not.toMatch(/<table[^>]*node=/);
+  });
 });
 
 // No jsdom in this repo — stand in for the browser globals `createStaleAssetRecovery` touches.

apps/webapp/app/components/code/StreamdownRenderer.tsx

@@ -47,12 +47,22 @@ type TriggerUriResolver = (uri: string) => TriggerLinkResolution | null;
 
 const TriggerUriResolverContext = createContext<TriggerUriResolver | undefined>(undefined);
 
-function TriggerAwareAnchor({ href, children }: { href?: string; children?: React.ReactNode }) {
+// Exported so a consumer (e.g. the agent chat) can wrap it with its own link styling
+// without forking the trigger:// resolution logic.
+export function TriggerAwareAnchor({
+  href,
+  children,
+  className,
+}: {
+  href?: string;
+  children?: React.ReactNode;
+  className?: string;
+}) {
   const resolveTriggerUri = useContext(TriggerUriResolverContext);
 
   if (!href || !isTriggerUri(href)) {
     return (
-      <a href={href} target="_blank" rel="noopener noreferrer">
+      <a href={href} target="_blank" rel="noopener noreferrer" className={className}>
         {children}
       </a>
     );
@@ -62,15 +72,30 @@ function TriggerAwareAnchor({ href, children }: { href?: string; children?: Reac
   if (!resolved) return children;
   if (resolved.external) {
     return (
-      <a href={resolved.url} target="_blank" rel="noopener noreferrer">
+      <a href={resolved.url} target="_blank" rel="noopener noreferrer" className={className}>
         {children}
       </a>
     );
   }
-  return <a href={resolved.url}>{children}</a>;
+  return (
+    <a href={resolved.url} className={className}>
+      {children}
+    </a>
+  );
 }
 
-const STREAMDOWN_COMPONENTS = { a: TriggerAwareAnchor };
+function ScrollableTable({
+  node,
+  ...props
+}: React.TableHTMLAttributes<HTMLTableElement> & { node?: unknown }) {
+  return (
+    <div className="overflow-x-auto">
+      <table {...props} />
+    </div>
+  );
+}
+
+const STREAMDOWN_COMPONENTS = { a: TriggerAwareAnchor, table: ScrollableTable };
 
 // Same shape the browser actually throws for a chunk fetch that 404s under asset skew
 // (Vite/Rollup's dynamic-import wrapper, or the module-script equivalent).
@@ -81,11 +106,14 @@ const PlainTextFallback = ({ children }: { children: string }) => (
   <pre className="whitespace-pre-wrap break-words font-sans text-sm">{children}</pre>
 );
 
+type StreamdownComponents = StreamdownModule.StreamdownProps["components"];
+
 type StreamdownRendererModule = {
   default: (props: {
     children: string;
     isAnimating?: boolean;
     resolveTriggerUri?: TriggerUriResolver;
+    components?: StreamdownComponents;
   }) => JSX.Element;
 };
 
@@ -134,11 +162,17 @@ export function loadStreamdownRenderer(
           children,
           isAnimating = false,
           resolveTriggerUri,
+          components,
         }: {
           children: string;
           isAnimating?: boolean;
           resolveTriggerUri?: TriggerUriResolver;
+          components?: StreamdownComponents;
         }) {
+          const mergedComponents = {
+            ...STREAMDOWN_COMPONENTS,
+            ...components,
+          } as StreamdownComponents;
           return (
             <TriggerUriResolverContext.Provider value={resolveTriggerUri}>
               <Streamdown
@@ -148,7 +182,7 @@ export function loadStreamdownRenderer(
                 urlTransform={restrictModelUrls}
                 linkSafety={{ enabled: false }}
                 rehypePlugins={rehypePlugins}
-                components={STREAMDOWN_COMPONENTS}
+                components={mergedComponents}
               >
                 {children}
               </Streamdown>

apps/webapp/app/components/dashboard-agent/AgentBlockToolsMenu.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverMenuItem,
+  PopoverVerticalEllipseTrigger,
+} from "~/components/primitives/Popover";
+import { cn } from "~/utils/cn";
+import type { AgentBlockTool } from "./agent-block-tools";
+
+// Shared by the inline hover-reveal trigger and the always-visible fullscreen header trigger.
+export function AgentBlockToolsMenu({
+  tools,
+  revealOnHover = true,
+}: {
+  tools: AgentBlockTool[];
+  revealOnHover?: boolean;
+}) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  return (
+    <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+      <PopoverVerticalEllipseTrigger
+        isOpen={isMenuOpen}
+        aria-label="More actions"
+        className={cn(
+          "transition-opacity",
+          isMenuOpen || !revealOnHover
+            ? "opacity-100"
+            : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"
+        )}
+      />
+      <PopoverContent align="end" className="p-0">
+        <div className="flex flex-col gap-1 p-1">
+          {tools.map((tool, i) => (
+            <PopoverMenuItem
+              key={i}
+              icon={tool.icon}
+              title={tool.title}
+              disabled={tool.disabled}
+              onClick={() => {
+                tool.onClick();
+                setIsMenuOpen(false);
+              }}
+              leadingIconClassName="-ml-0.5 -mr-1"
+            />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}