feat(webapp): dashboard agent — UI - #4529

apps/webapp/app/components/Shortcuts.tsx (1)

68-70: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Source the modifier from TOGGLE_PANEL_SHORTCUT as well.

Line 69 hardcodes ["mod"] while line 70 reads the key from the shared constant. If the modifier of TOGGLE_PANEL_SHORTCUT changes, this row displays the wrong combination. The new Chat section at lines 103-107 already reads both parts from NEW_CHAT_SHORTCUT. apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx passes the whole object to ShortcutKey, so a single render is enough here.

♻️ Proposed fix

             <Shortcut name={ASK_AGENT_LABEL}>
-              <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
-              <ShortcutKey shortcut={{ key: TOGGLE_PANEL_SHORTCUT.key }} variant="medium/bright" />
+              <ShortcutKey shortcut={TOGGLE_PANEL_SHORTCUT} variant="medium/bright" />
             </Shortcut>

apps/webapp/app/components/dashboard-agent/agent-identity.ts (2)

1-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Two entry points use different agent icons.

This module defines AgentIcon as the shared agent mark, and AskAgentButton.tsx uses it. However, apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx line 133 renders AgentMonoLogo for the same ASK_AGENT_LABEL action. The agent therefore appears with two different icons across entry points. Pick one mark and export it from this module, or document why the popover differs.

---

3-3: 📐 Maintainability & Code Quality | 🔵 Trivial

Tracked TODO: final agent icon.

TODO(TRI-12763) records that the placeholder icon must be replaced. The placeholder ships to users in the meantime. Confirm that TRI-12763 is scheduled before this feature is enabled for all plans.

Do you want me to open a follow-up issue that links this line to TRI-12763?

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx (1)

91-94: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Move the handle export below the last import.

The pageMeta import at Line 94 sits after the handle declaration. The code still runs, because ES module imports are hoisted. However, this ordering is hard to read and import/first style rules flag it.

♻️ Proposed reordering

 import { sectionAgentPageContext } from "~/components/dashboard-agent/suggested-prompts";
 import type { Handle } from "~/utils/handle";
+import { pageMeta } from "~/utils/pageTitle";
 
 export const handle: Handle = {
   agentPageContext: () => sectionAgentPageContext("envvars"),
 };
-import { pageMeta } from "~/utils/pageTitle";
 
 export const meta = pageMeta("Environment variables");

apps/webapp/app/components/dashboard-agent/suggested-prompts/page-mappers.ts (1)

134-157: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low value

Guard against a non-finite burst limit.

z.number() accepts NaN and Infinity in Zod 3. If burstFactor or concurrencyLimit arrives as NaN, limit becomes NaN and the comparison silently disables the saturation signal. Use z.number().finite() for these fields to make the contract explicit.

♻️ Proposed schema tightening

 const queuesLoaderDataSchema = z.object({
   environment: z.object({
-    running: z.number(),
-    queued: z.number(),
-    concurrencyLimit: z.number(),
-    burstFactor: z.number().nullish(),
+    running: z.number().finite(),
+    queued: z.number().finite(),
+    concurrencyLimit: z.number().finite(),
+    burstFactor: z.number().finite().nullish(),
   }),
 });

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards._index/route.tsx (1)

21-26: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Declare handle after the import block in four routes. Each of these routes inserts the export const handle declaration between import statements, leaving import { pageMeta } from "~/utils/pageTitle" below it. The code runs because ESM hoists imports, but the split import block is inconsistent with the other routes in this PR (query, regions, runs.$runParam, schedules.$scheduleParam, sessions.$sessionParam, queues), which declare handle after all imports.

• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards._index/route.tsx#L21-L26: move the handle declaration below the pageMeta import.
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx#L55-L60: move the handle declaration below the pageMeta import.
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx#L77-L82: move the handle declaration below the pageMeta import.
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.limits/route.tsx#L50-L55: move the handle declaration below the pageMeta import.

apps/webapp/app/components/dashboard-agent/view-actions.test.ts (1)

50-67: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider replacing source-text assertions with behavior tests.

These assertions read ActionsBlock.tsx as a string. A formatting change or a rename breaks them without a behavior change, and they do not prove the component renders or dispatches correctly. If a React renderer is already available in this suite, assert on rendered output and on the onIntent callback instead.

apps/webapp/app/components/dashboard-agent/AgentChart.tsx (1)

50-74: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider extracting the shared action-button row.

ChartActions duplicates ActionsBlock in apps/webapp/app/components/dashboard-agent/ActionsBlock.tsx (lines 9-31). Both filter with renderableActions, key by index, pick primary/small for the first item, and cast with as AgentIntent. One shared component keeps the styling rules and the cast in one place.

♻️ Suggested shared component

// chat-layout.tsx (or a new agent-actions.tsx)
export function AgentActionButtons({
  actions,
  onIntent,
}: {
  actions: readonly { label: string; intent: unknown }[];
  onIntent?: (intent: AgentIntent) => void;
}) {
  const renderable = renderableActions(actions);
  if (!onIntent || renderable.length === 0) return null;
  return (
    <ChatActionsRow>
      {renderable.map((action, i) => (
        <Button
          key={i}
          variant={i === 0 ? "primary/small" : "secondary/small"}
          onClick={() => onIntent(action.intent as AgentIntent)}
        >
          {action.label}
        </Button>
      ))}
    </ChatActionsRow>
  );
}

apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx (1)

52-59: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider sharing the default page context.

The literal { page: { kind: "other", path: "" }, signals: [] } also appears in apps/webapp/app/components/dashboard-agent/DashboardAgentDraft.tsx. Both call sites must resolve the same prompts, and the draft comment states that intent. Export one constant from the suggested-prompts module so the two stay in sync.

♻️ Suggested change

+import {
+  DEFAULT_AGENT_PAGE_CONTEXT,
+  readDismissedPromptIds,
+  resolveSuggestedPromptsBySlot,
+  type ResolvedPromptSlot,
+} from "./suggested-prompts";
+
   const prompts = useMemo(
     () =>
-      resolveSuggestedPromptsBySlot(
-        pageContext ?? { page: { kind: "other", path: "" }, signals: [] },
-        { promoted, dismissedIds: effectiveDismissedIds }
-      ),
+      resolveSuggestedPromptsBySlot(pageContext ?? DEFAULT_AGENT_PAGE_CONTEXT, {
+        promoted,
+        dismissedIds: effectiveDismissedIds,
+      }),
     [pageContext, promoted, effectiveDismissedIds]
   );

apps/webapp/app/components/dashboard-agent/view-catalog.tsx (1)

28-31: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low value

Consider precomputing the original indices.

blocks.indexOf(block) runs a linear scan for every rendered block, so the loop is O(n²). It also returns the first index if one block object instance appears twice in blocks, which yields duplicate keys. A single index map removes both concerns.

♻️ Suggested change

-      {latestRevisionBlocks(blocks).map((block) => {
-        // Index into the original array, so collapsing a revision above an
-        // envelope-less block can't shift its key.
-        const key = blockKey(block, blocks.indexOf(block));
+      {(() => {
+        // Index into the original array, so collapsing a revision above an
+        // envelope-less block can't shift its key.
+        const originalIndex = new Map(blocks.map((block, index) => [block, index]));
+        return latestRevisionBlocks(blocks).map((block) => {
+          const key = blockKey(block, originalIndex.get(block) ?? 0);

apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx (1)

5-5: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider moving toSafeUrl to a shared utility module.

toSafeUrl is a URL sanitizer, but it is imported from the view module ~/components/runs/v3/agent/AgentMessageView. This file now uses it for both evidence references and documentation targets. A dedicated util module keeps the security helper independent of a rendering component.

This is a placement concern only. The current behavior is correct.

Also applies to: 114-136

apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx (1)

121-132: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Mount the live region before the counter appears.

The element that carries aria-live="polite" is added to the DOM only when the count reaches MESSAGE_CHARS_WARN_AT. Several screen readers announce updates only for live regions that already exist in the DOM. Keep the region mounted and change its content instead.

♿ Proposed change

-      {/* Only near the limit: a normal message never sees a counter. */}
-      {value.length >= MESSAGE_CHARS_WARN_AT ? (
-        <p
-          className={cn(
-            "self-end text-xxs tabular-nums",
-            value.length >= MAX_MESSAGE_CHARS ? "text-error" : "text-text-dimmed"
-          )}
-          aria-live="polite"
-        >
-          {value.length} / {MAX_MESSAGE_CHARS}
-        </p>
-      ) : null}
+      {/* Only near the limit: a normal message never sees a counter. */}
+      <p
+        className={cn(
+          "self-end text-xxs tabular-nums",
+          value.length >= MAX_MESSAGE_CHARS ? "text-error" : "text-text-dimmed",
+          value.length < MESSAGE_CHARS_WARN_AT && "hidden"
+        )}
+        aria-live="polite"
+      >
+        {value.length >= MESSAGE_CHARS_WARN_AT ? `${value.length} / ${MAX_MESSAGE_CHARS}` : ""}
+      </p>

apps/webapp/app/components/dashboard-agent/DashboardAgentDraft.tsx (1)

29-56: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Share the empty page-context default and forward dismissedIds.

Two points:

1. The fallback literal { page: { kind: "other", path: "" }, signals: [] } also exists in apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx. Export one named constant from the suggested-prompts module and use it in both places.
2. dismissedIds is not passed to DashboardAgentHero, so DashboardAgentSuggestedPrompts reads localStorage a second time. Forward the value the draft already read to keep one source.

As per coding guidelines: "Use named constants for sentinel or placeholder values instead of scattering raw string literals across comparisons."

♻️ Proposed change

   const placeholderSuggestion = useMemo(
     () =>
-      resolveSuggestedPromptsBySlot(
-        pageContext ?? { page: { kind: "other", path: "" }, signals: [] },
-        {
-          promoted: promotedPrompt,
-          dismissedIds,
-        }
-      )[0]?.prompt.prompt,
+      resolveSuggestedPromptsBySlot(pageContext ?? EMPTY_PAGE_CONTEXT, {
+        promoted: promotedPrompt,
+        dismissedIds,
+      })[0]?.prompt.prompt,
     [pageContext, promotedPrompt, dismissedIds]
   );
@@
     <DashboardAgentHero
       onSelect={submit}
       pageContext={pageContext}
       promoted={promotedPrompt}
+      dismissedIds={dismissedIds}

Source: Coding guidelines

apps/webapp/app/components/dashboard-agent/report-block-adapter.test.ts (2)

94-100: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

The assertion does not prove that series is dropped.

The test name states that the curated output drops links and series. The vm fixture has no series on its metric, so expect(block.vm.metrics[0]!.series).toBeUndefined() passes even if the adapter kept the field. Add series to the metric in the input to make the assertion meaningful.

💚 Proposed change

   it("accepts the curated tool output, which drops links and series", () => {
     const { links, ...curated } = vm;
-    const block = reportBlockFromToolPart(part({ output: { ...curated, seriesOmitted: true } }))!;
+    const block = reportBlockFromToolPart(
+      part({
+        output: {
+          ...curated,
+          metrics: [{ ...curated.metrics[0]!, series: [1, 2, 3] }],
+          seriesOmitted: true,
+        },
+      })
+    )!;
     expect(block.vm.links).toEqual([]);
     expect(block.vm.metrics[0]!.series).toBeUndefined();

---

118-127: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

sameKeyAgain uses a different tool call id.

The variable name states that the key repeats, but the call passes toolCallId: "call_3". The assertion therefore repeats the distinct-id case instead of covering a repeated id. Rename the variable, or pass "call_1" and assert the expected collapse behavior.

apps/webapp/app/components/dashboard-agent/useAgentMessageQuota.ts (1)

5-8: 📐 Maintainability & Code Quality | 🔵 Trivial

useIsFreePlan always returns undefined, so the whole quota path is inert.

resolveMessageQuota returns { kind: "unlimited" } whenever isFreePlan !== true. The effect at Line 25 also returns early, so the quota endpoint is never called. As a result AgentUpgradeBlock and AgentQuotaNotice in DashboardAgentChat.tsx never render, and atMessageCap is always false.

The comment records this as intentional until billing supplies plan detection. Confirm that shipping the free-plan cap as inactive is the intended state for this PR. I can open a follow-up issue to track wiring plan detection if that helps.

apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx (2)

11-17: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Reuse the registered shortcut constant instead of redefining it.

NEW_CHAT_SHORTCUT duplicates the ⌘J definition that DashboardAgent registers as TOGGLE_PANEL_SHORTCUT. If one definition changes, the displayed key and the registered key diverge. Export the single source from the module that registers it, and import it here for display.

---

57-66: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Accessible name hides the visible label.

The trigger renders the chat title as visible text, but aria-label="Chat history" replaces that name. Speech-input users cannot activate the control by the visible text. Include the title in the accessible name.

♿ Proposed change

-          aria-label="Chat history"
+          aria-label={`Chat history: ${title}`}
           title={title}

apps/webapp/app/components/dashboard-agent/ask-ai-channels.ts (1)

51-63: 🔒 Security & Privacy | 🔵 Trivial | 💤 Low value

Consider rejecting absolute values for environmentPath.

new URL(environmentPath, origin) ignores origin when environmentPath is absolute. The result then feeds redirect(...) in apps/webapp/app/routes/projects.$projectRef.ai-help.ts. The current caller passes a builder-generated internal path, so there is no exploit today. A guard keeps the function safe if a future caller forwards request data.

🛡️ Proposed guard

   const url = new URL(environmentPath, origin);
+  if (url.origin !== new URL(origin).origin) {
+    throw new Error("environmentPath must be relative to the given origin");
+  }
   url.searchParams.set(ASK_AI_DEEP_LINK_PARAM, query);

apps/webapp/app/components/dashboard-agent/InvestigationCard.test.ts (1)

38-40: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider relaxing the exact-source assertion.

Line 39 matches one exact source line, including spacing. Prettier reflow, a rename of onIntent or actions, or an equivalent early return breaks this test without any behavior change. The other assertions in this file are pattern-based and tolerate that. Consider matching a looser pattern, or asserting the behavior by rendering the component with and without onIntent.

♻️ Looser pattern

-    expect(source).toMatch(/if \(!onIntent \|\| actions\.length === 0\) return null;/);
+    expect(source).toMatch(/!onIntent[\s\S]{0,40}return null/);

apps/webapp/app/components/dashboard-agent/report-sparkline.tsx (2)

468-475: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

The Math.max(..., 1) guard sits on the wrong operand.

Line 472 applies Math.max(..., 1) to the slice end index. The guard reads as protection against an empty slice, but it cannot help: the function returns early when points.length <= maxBars, so perBar > 1 and Math.floor((i + 1) * perBar) is always at least 1. The expression is dead and misleading. The real empty-slice guard is already on line 473.

♻️ Proposed simplification

-    const slice = points.slice(Math.floor(i * perBar), Math.max(Math.floor((i + 1) * perBar), 1));
+    const slice = points.slice(Math.floor(i * perBar), Math.floor((i + 1) * perBar));
     return slice.reduce((sum, v) => sum + v, 0) / Math.max(slice.length, 1);

---

528-544: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low value

Date.now() during render breaks the stated purity of this file.

The file header states no Remix hooks and no host state, and ReportView.test.ts enforces that for the sibling card. Line 532 reads the wall clock during render. Two consequences follow. Server and client renders produce different date values for the same data. Every re-render shifts the synthesised bar timestamps, so a tooltip can report a different time for the same bar.

The bars themselves do not depend on the clock, only the tooltip labels do. Consider passing the series end time in through the view model, so the timestamps come from the data instead of the render.