Merge branch 'feat/dashboard-agent-flows' into feat/dashboard-agent-watch

Author: kathiekiwi

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

@@ -75,6 +75,9 @@ export function DashboardAgent({
   }, []);
   // A request from `openWith`, handed to the panel. `seq` makes repeat requests
   // with the same text distinct, so the panel can tell them apart.
+  // Bumped by contextual ⌘J while the panel is open; the panel starts a new
+  // chat when it changes.
+  const [newChatSeq, setNewChatSeq] = useState(0);
   const [requestedMessage, setRequestedMessage] = useState<
     { text: string; seq: number } | undefined
   >(undefined);
@@ -186,12 +189,18 @@ export function DashboardAgent({
     [actionPath]
   );
 
-  // ⌘J toggles the panel. Opening mounts the composer, which focuses itself, so
-  // the shortcut lands you in the text field. Enabled inside inputs too, so the
-  // same keystroke closes the panel while you're typing in it.
+  // ⌘J is contextual: closed → open the panel (the composer focuses itself, so
+  // the keystroke lands you in the text field); open → start a new chat.
+  // Closing is Esc or the header's ×, never ⌘J.
   useShortcutKeys({
     shortcut: TOGGLE_PANEL_SHORTCUT,
-    action: () => setPanelOpen(!open),
+    action: () => {
+      if (!open) {
+        setPanelOpen(true);
+      } else {
+        setNewChatSeq((seq) => seq + 1);
+      }
+    },
     disabled: !hasAccess,
     enabledOnInputElements: true,
   });
@@ -238,6 +247,7 @@ export function DashboardAgent({
                   requestedMessage={requestedMessage}
                   openChatRequest={openChatRequest}
                   watchRequest={watchRequest}
+                  newChatSeq={newChatSeq}
                   promotedPrompt={promotedPrompt}
                   onChatRead={markChatRead}
                   isFullscreen={fullscreen}

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

@@ -20,6 +20,7 @@ export function DashboardAgentComposer({
   context,
   layout = "docked",
   autoFocus = true,
+  placeholderSuggestion,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -38,6 +39,12 @@ export function DashboardAgentComposer({
   // Off only where a composer isn't the thing the user came for — the storybook
   // gallery renders several at once and must not steal the page's focus.
   autoFocus?: boolean;
+  /**
+   * A suggested prompt shown as the placeholder while the field is empty.
+   * Tab accepts it into the field as editable text — it is never sent on its
+   * own. Once anything is typed, Tab goes back to being Tab.
+   */
+  placeholderSuggestion?: string;
 }) {
   const ref = useRef<HTMLTextAreaElement>(null);
 
@@ -56,7 +63,7 @@ export function DashboardAgentComposer({
     // destructive action.
     <Button
       variant="minimal/small"
-      className="aspect-square h-6 p-1"
+      className="aspect-square h-6 min-w-0 p-1"
       aria-label="Stop generating"
       tooltip="Stop generating"
       onClick={onStop}
@@ -65,7 +72,7 @@ export function DashboardAgentComposer({
   ) : (
     <Button
       variant="primary/small"
-      className="aspect-square h-6 p-1"
+      className="aspect-square h-6 min-w-0 p-1"
       aria-label="Send"
       tooltip="Send"
       onClick={onSubmit}
@@ -106,8 +113,19 @@ export function DashboardAgentComposer({
                 e.preventDefault();
                 onSubmit();
               }
+              // Tab accepts the suggested placeholder into the field (still
+              // editable, not sent). Only while empty — with text present, Tab
+              // keeps its normal focus behavior.
+              if (e.key === "Tab" && !e.shiftKey && placeholderSuggestion && value === "") {
+                e.preventDefault();
+                onChange(placeholderSuggestion);
+                requestAnimationFrame(() => {
+                  const el = ref.current;
+                  el?.setSelectionRange(el.value.length, el.value.length);
+                });
+              }
             }}
-            placeholder="Type a message…"
+            placeholder={placeholderSuggestion ?? "Type a message…"}
             aria-label="Message the dashboard agent"
             className={cn(
               "max-h-[40vh] flex-1 resize-none border-0 bg-transparent px-1.5 py-0.5 text-sm leading-6 text-text-bright placeholder-text-dimmed outline-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control field-sizing-content focus:outline-hidden focus:ring-0",

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

@@ -1,9 +1,10 @@
 import type { SuggestedPrompt } from "@internal/dashboard-agent-contracts";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { DashboardAgentComposer } from "./DashboardAgentComposer";
 import { DashboardAgentContextBanner } from "./DashboardAgentContextBanner";
 import { DashboardAgentHero } from "./DashboardAgentHero";
 import type { AgentPageContext } from "./page-context-types";
+import { readDismissedPromptIds, resolveSuggestedPromptsBySlot } from "./suggested-prompts";
 
 /**
  * The new-chat "draft" state: the blank-state hero — title, subtitle, the field
@@ -38,6 +39,22 @@ export function DashboardAgentDraft({
 }) {
   const [input, setInput] = useState("");
 
+  // The top resolved prompt doubles as the field's placeholder (Tab accepts it
+  // as editable text). Same resolution the hero's buttons use, so the
+  // placeholder is always the first button the user sees.
+  const [dismissedIds] = useState(readDismissedPromptIds);
+  const placeholderSuggestion = useMemo(
+    () =>
+      resolveSuggestedPromptsBySlot(
+        pageContext ?? { page: { kind: "other", path: "" }, signals: [] },
+        {
+          promoted: promotedPrompt,
+          dismissedIds,
+        }
+      )[0]?.prompt.prompt,
+    [pageContext, promotedPrompt, dismissedIds]
+  );
+
   const submit = useCallback(
     (text: string) => {
       const trimmed = text.trim();
@@ -66,6 +83,7 @@ export function DashboardAgentDraft({
             onSubmit={() => submit(input)}
             onStop={() => {}}
             isStreaming={false}
+            placeholderSuggestion={placeholderSuggestion}
             context={
               <DashboardAgentContextBanner
                 projectSlug={projectSlug}

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

@@ -8,12 +8,14 @@ import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import type { Shortcut } from "~/hooks/useShortcutKeys";
 import { DashboardAgentHistoryMenu, type DashboardAgentChat } from "./DashboardAgentHistory";
 
-/** New chat. Sits next to the panel's own ⌘J so the pair is easy to remember. */
+/**
+ * New chat — the same ⌘J that opens the panel: contextual, registered ONCE in
+ * `DashboardAgent` (closed → open, open → new chat). This constant is display
+ * only; nothing else may register it or the keystroke would fire twice.
+ */
 export const NEW_CHAT_SHORTCUT: Shortcut = {
-  modifiers: ["mod", "shift"],
+  modifiers: ["mod"],
   key: "j",
-  // The composer holds focus while the panel is open, so a shortcut that only
-  // fires outside inputs would never fire at all.
   enabledOnInputElements: true,
 };
 
@@ -104,8 +106,12 @@ export function DashboardAgentHeader({
             variant="minimal/small"
             className="aspect-square h-6 p-1"
             aria-label="New chat"
-            tooltip="New chat"
-            shortcut={NEW_CHAT_SHORTCUT}
+            tooltip={
+              <span className="flex items-center">
+                New chat
+                <ShortcutKey shortcut={NEW_CHAT_SHORTCUT} variant="medium" />
+              </span>
+            }
             onClick={onNewChat}
             LeadingIcon={<PlusIcon className="size-4 text-text-dimmed" />}
           />

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

@@ -84,6 +84,7 @@ export function DashboardAgentPanel({
   onClose,
   requestedMessage,
   openChatRequest,
+  newChatSeq,
   promotedPrompt,
   watchRequest,
   onChatRead,
@@ -101,6 +102,9 @@ export function DashboardAgentPanel({
   // A specific chat to show, from outside the panel (a wake toast). `seq`
   // distinguishes repeat requests for the same chat.
   openChatRequest?: { chatId: string; seq: number };
+  // Bumped by the contextual ⌘J while the panel is open — each change starts a
+  // new chat.
+  newChatSeq?: number;
   // The product-controlled promoted prompt chip, from the feature flag.
   promotedPrompt?: SuggestedPrompt;
   // A watch card asked for by a `Watch…` entry. `seq` distinguishes repeats.
@@ -513,6 +517,15 @@ export function DashboardAgentPanel({
     [openChat]
   );
 
+  // Contextual ⌘J: each bump while the panel is open starts a new chat. A ref
+  // skips the mount-time value so opening the panel never resets a restored chat.
+  const seenNewChatSeq = useRef(newChatSeq ?? 0);
+  useEffect(() => {
+    if (newChatSeq === undefined || newChatSeq === seenNewChatSeq.current) return;
+    seenNewChatSeq.current = newChatSeq;
+    newChat();
+  }, [newChatSeq, newChat]);
+
   const deleteChat = useCallback(
     async (id: string) => {
       const body = new FormData();

apps/webapp/app/components/dashboard-agent/chat-layout.tsx

@@ -22,7 +22,7 @@
  *                         card (diagnosis, investigation, report, chart), a
  *                         callout, a chip row
  *   - `ChatProgress`    — a spinner and one line of progress
- *   - `ChatPendingTool` — a tool call still in flight, as a compact pill
+ *   - `ChatPendingTool` — a tool call still in flight: a bare spinner line
  *   - `ChatToolRow`     — a tool-call row, optionally with progress under it
  *   - `ChatNote`        — an inline system / interceptor note
  *   - `ChatSystemBlock` — a deterministic form/system block (the watch card and
@@ -227,7 +227,7 @@ export function ChatProgress({ children }: { children: React.ReactNode }) {
 }
 
 /**
- * A tool call still in flight, as a compact pill: a spinner and one short phrase
+ * A tool call still in flight: a spinner and one short phrase
  * saying what the agent is doing.
  *
  * It replaces the tool row for the whole in-flight phase, so the transcript never
@@ -238,17 +238,12 @@ export function ChatProgress({ children }: { children: React.ReactNode }) {
  */
 export function ChatPendingTool({ label }: { label: string }) {
   const insetClass = useInsetClass();
+  // A bare progress line, not a pill: bordered chips read as artifacts that
+  // stay, while in-flight work is transient — the same register as ChatProgress.
   return (
-    <div className={cn(insetClass, "flex min-w-0")}>
-      <span
-        className={cn(
-          "inline-flex h-6 min-w-0 items-center rounded-full border border-border-bright bg-background-bright px-2.5 text-xs text-text-dimmed",
-          CHIP_GAP
-        )}
-      >
-        <Spinner className="size-3 shrink-0" />
-        <span className="truncate">{label}</span>
-      </span>
+    <div className={cn(insetClass, "flex min-w-0 items-center text-xs text-text-dimmed", CHIP_GAP)}>
+      <Spinner className="size-3 shrink-0" />
+      <span className="truncate">{label}</span>
     </div>
   );
 }

internal-packages/dashboard-agent/src/dashboard-agent.test.ts

@@ -972,7 +972,7 @@ describe("buildDashboardAgentTools", () => {
     await expect(
       callTool("navigate_to", { destination: { kind: "error", fingerprint: "error_1" } })
     ).resolves.toEqual({
-      intent: { kind: "navigate", target: "trigger://proj_abc/env_abc/error/error_1" },
+      intent: { kind: "navigate", target: "trigger://proj_abc/env_abc/error/1" },
     });
 
     // A queue name's `/` is percent-encoded, so a task queue round-trips.
@@ -1153,9 +1153,9 @@ describe("buildDashboardAgentTools", () => {
     expect(output.error).toBeUndefined();
     const investigation = output.blocks[0].investigation;
     expect(investigation.hypotheses[0].evidence.map((e: { uri: string }) => e.uri)).toEqual([
-      "trigger://proj_abc/env_abc/error/error_c4b4a797397a9c43",
+      "trigger://proj_abc/env_abc/error/c4b4a797397a9c43",
       "trigger://proj_abc/env_abc/deployment/20260726.4",
-      "trigger://proj_abc/env_abc/error/error_c4b4a797397a9c43",
+      "trigger://proj_abc/env_abc/error/c4b4a797397a9c43",
     ]);
     expect(investigation.evidence.map((e: { uri: string }) => e.uri)).toEqual([
       "trigger://proj_abc/env_abc/run/run_abc123",
@@ -1349,7 +1349,7 @@ describe("buildDashboardAgentTools", () => {
     // The follow-up that navigates points at the canonical error URI.
     expect(actions[2].intent).toEqual({
       kind: "navigate",
-      target: "trigger://proj_abc/env_abc/error/error_c4b4a797397a9c43",
+      target: "trigger://proj_abc/env_abc/error/c4b4a797397a9c43",
     });
   });
 

internal-packages/dashboard-agent/src/tools.ts

@@ -848,7 +848,10 @@ export function buildDashboardAgentTools(ctx: DashboardAgentToolContext): ToolSe
           parsed = { ...base, kind: "run", runId: ref };
           break;
         case "error":
-          parsed = { ...base, kind: "error", fingerprint: ref };
+          // The errors API returns friendly ids ("error_<fingerprint>") but the
+          // canonical URI — and the dashboard error page it resolves to — key on
+          // the raw fingerprint. Same normalization the watch checks apply.
+          parsed = { ...base, kind: "error", fingerprint: ref.replace(/^error_/, "") };
           break;
         case "queue":
           parsed = { ...base, kind: "queue", name: ref };
@@ -1536,7 +1539,12 @@ export function buildDashboardAgentTools(ctx: DashboardAgentToolContext): ToolSe
             parsed = { kind: "run", ...scope, runId: destination.runId };
             break;
           case "error":
-            parsed = { kind: "error", ...scope, fingerprint: destination.fingerprint };
+            // Accept the API's friendly id ("error_<fp>") — the page keys on the raw one.
+            parsed = {
+              kind: "error",
+              ...scope,
+              fingerprint: destination.fingerprint.replace(/^error_/, ""),
+            };
             break;
           case "queue":
             parsed = { kind: "queue", ...scope, name: destination.name };