feat(webapp): dashboard agent — UI

.server-changes/dashboard-agent.md

@@ -11,4 +11,6 @@ The health report reads the same everywhere — dashboard, terminal, editor. A v
 
 A sample of conversations is scored automatically so the agent keeps getting better. Only the score and a one-line summary are kept, never your messages, data or code, and we can switch it off for your organization on request.
 
-Separately: a queue's wait times, peak depth, throughput and throttling can now be read from the API, and the Docs button has been removed from page headers.
+The Docs button is gone from page headers — ask the agent instead, or open Documentation from Help & Feedback.
+
+Separately: a queue's wait times, peak depth, throughput and throttling can now be read from the API.

apps/webapp/app/components/AskAI.tsx

@@ -1,7 +1,7 @@
 /**
- * @deprecated Superseded by the dashboard agent (`components/dashboard-agent`). Nothing mounts
- * this any more — every Ask AI entry point now opens Ask Trigger. Kept until the agent has
- * shipped, then removed along with `@kapaai/react-sdk` and `KAPA_AI_WEBSITE_ID`.
+ * Mostly superseded by the dashboard agent (`components/dashboard-agent`), which owns every
+ * entry point except two: ⌘I and the CLI's `?aiHelp=` link still open Ask AI. `AskAIRoot` is
+ * mounted by the `_app` layout for those; the `AskAI` button below is mounted nowhere.
  */
 
 import {
@@ -18,12 +18,15 @@ import DOMPurify from "dompurify";
 import { motion } from "framer-motion";
 import { marked } from "marked";
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { useTypedRouteLoaderData } from "remix-typedjson";
 import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
 import { SparkleListIcon } from "~/assets/icons/SparkleListIcon";
-import { useFeatures } from "~/hooks/useFeatures";
+import { useAskAiAvailability } from "~/hooks/useAskAiAvailability";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
-import { type loader } from "~/root";
+import {
+  ASK_AI_DEEP_LINK_PARAM,
+  ASK_AI_SHORTCUT,
+  askAiCanOpen,
+} from "./dashboard-agent/ask-ai-channels";
 import { Button } from "./primitives/Buttons";
 import { Callout } from "./primitives/Callout";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./primitives/Dialog";
@@ -40,11 +43,6 @@ import {
 } from "./primitives/Tooltip";
 import { ClientOnly } from "remix-utils/client-only";
 
-function useKapaWebsiteId() {
-  const routeMatch = useTypedRouteLoaderData<typeof loader>("root");
-  return routeMatch?.kapa.websiteId;
-}
-
 /** Open/close state for the Ask AI dialog, including the `?aiHelp=` deep-link handling. */
 function useAskAIState() {
   const [isOpen, setIsOpen] = useState(false);
@@ -67,14 +65,14 @@ function useAskAIState() {
 
   // Handle URL param functionality
   useEffect(() => {
-    const aiHelp = searchParams.get("aiHelp");
+    const aiHelp = searchParams.get(ASK_AI_DEEP_LINK_PARAM);
     if (aiHelp) {
       // Delay to avoid hCaptcha bot detection
       window.setTimeout(() => openAskAI(aiHelp), 1000);
 
       // Clone instead of mutating in place
       const next = new URLSearchParams(searchParams);
-      next.delete("aiHelp");
+      next.delete(ASK_AI_DEEP_LINK_PARAM);
       setSearchParams(next);
     }
   }, [searchParams, openAskAI]);
@@ -83,25 +81,24 @@ function useAskAIState() {
 }
 
 /**
- * Hosts Ask AI (Kapa provider, ⌘I shortcut, dialog) for a menu that renders its own trigger. Wrap
- * it around the popover, not inside, so the dialog and shortcut survive the popover closing.
- * `children` receives the open function, or undefined when Ask AI is unavailable (self-hosted, no
- * Kapa website id, or SSR).
- *
- * @deprecated See the note at the top of this file.
+ * Hosts Ask AI (Kapa provider, ⌘I shortcut, dialog) around a subtree that renders its own
+ * triggers. Wrap it around them, never inside, so the dialog and the shortcut survive whatever
+ * opened them closing. `children` receives the open function, or undefined when Ask AI is
+ * unavailable (self-hosted, no Kapa website id, or SSR).
  */
 export function AskAIRoot({
   children,
 }: {
   children: (openAskAI: (() => void) | undefined) => ReactNode;
 }) {
-  const { isManagedCloud } = useFeatures();
-  const websiteId = useKapaWebsiteId();
+  const availability = useAskAiAvailability();
 
-  if (!isManagedCloud || !websiteId) {
+  if (!askAiCanOpen(availability)) {
     return <>{children(undefined)}</>;
   }
 
+  const websiteId = availability.kapaWebsiteId!;
+
   return (
     <ClientOnly fallback={<>{children(undefined)}</>}>
       {() => <AskAIRootProvider websiteId={websiteId}>{children}</AskAIRootProvider>}
@@ -119,7 +116,7 @@ function AskAIRootProvider({
   const { isOpen, setIsOpen, initialQuery, openAskAI, closeAskAI } = useAskAIState();
 
   useShortcutKeys({
-    shortcut: { modifiers: ["mod"], key: "i", enabledOnInputElements: true },
+    shortcut: ASK_AI_SHORTCUT,
     action: () => openAskAI(),
   });
 
@@ -145,15 +142,16 @@ function AskAIRootProvider({
   );
 }
 
-/** @deprecated See the note at the top of this file. */
+/** @deprecated Mounted nowhere: the sidebar's AI entry point is the dashboard agent. */
 export function AskAI({ isCollapsed = false }: { isCollapsed?: boolean }) {
-  const { isManagedCloud } = useFeatures();
-  const websiteId = useKapaWebsiteId();
+  const availability = useAskAiAvailability();
 
-  if (!isManagedCloud || !websiteId) {
+  if (!askAiCanOpen(availability)) {
     return null;
   }
 
+  const websiteId = availability.kapaWebsiteId!;
+
   return (
     <ClientOnly
       fallback={

apps/webapp/app/components/BlankStatePanels.tsx

@@ -34,7 +34,6 @@ import {
   v3NewProjectAlertPath,
   v3NewSchedulePath,
 } from "~/utils/pathBuilder";
-import { AskAI } from "./AskAI";
 import { CodeBlock } from "./code/CodeBlock";
 import { InlineCode } from "./code/InlineCode";
 import { environmentFullTitle, EnvironmentIcon } from "./environments/EnvironmentLabel";
@@ -62,6 +61,47 @@ import {
 import { StepContentContainer } from "./StepContentContainer";
 import { V4Badge } from "./V4Badge";
 
+function DeployDocsLinks() {
+  return (
+    <>
+      <SimpleTooltip
+        asChild
+        tabbable
+        button={
+          // Span wrapper: LinkButton drops the pointer-event props Radix injects via asChild, so
+          // the tooltip trigger has to be a plain element (same pattern as FavoritePageButton).
+          <span className="flex">
+            <LinkButton
+              variant="small-menu-item"
+              LeadingIcon={BookOpenIcon}
+              leadingIconClassName="text-blue-500"
+              to={docsPath("deployment/overview")}
+              aria-label="Deploy docs"
+            />
+          </span>
+        }
+        content="Deploy docs"
+      />
+      <SimpleTooltip
+        asChild
+        tabbable
+        button={
+          <span className="flex">
+            <LinkButton
+              variant="small-menu-item"
+              LeadingIcon={QuestionMarkCircleIcon}
+              leadingIconClassName="text-blue-500"
+              to={docsPath("troubleshooting#deployment")}
+              aria-label="Troubleshooting docs"
+            />
+          </span>
+        }
+        content="Troubleshooting docs"
+      />
+    </>
+  );
+}
+
 export function HasNoTasksDev() {
   return (
     <PackageManagerProvider>
@@ -270,29 +310,7 @@ export function DeploymentsNoneDev() {
           <Header1>Deploy your tasks</Header1>
         </div>
         <div className="flex items-center">
-          <SimpleTooltip
-            button={
-              <LinkButton
-                variant="small-menu-item"
-                LeadingIcon={BookOpenIcon}
-                leadingIconClassName="text-blue-500"
-                to={docsPath("deployment/overview")}
-              />
-            }
-            content="Deploy docs"
-          />
-          <SimpleTooltip
-            button={
-              <LinkButton
-                variant="small-menu-item"
-                LeadingIcon={QuestionMarkCircleIcon}
-                leadingIconClassName="text-blue-500"
-                to={docsPath("troubleshooting#deployment")}
-              />
-            }
-            content="Troubleshooting docs"
-          />
-          <AskAI />
+          <DeployDocsLinks />
         </div>
       </div>
       <StepNumber stepNumber="→" title="Switch to a deployed environment" />
@@ -658,29 +676,7 @@ function DeploymentOnboardingSteps() {
           </Header1>
         </div>
         <div className="flex items-center">
-          <SimpleTooltip
-            button={
-              <LinkButton
-                variant="small-menu-item"
-                LeadingIcon={BookOpenIcon}
-                leadingIconClassName="text-blue-500"
-                to={docsPath("deployment/overview")}
-              />
-            }
-            content="Deploy docs"
-          />
-          <SimpleTooltip
-            button={
-              <LinkButton
-                variant="small-menu-item"
-                LeadingIcon={QuestionMarkCircleIcon}
-                leadingIconClassName="text-blue-500"
-                to={docsPath("troubleshooting#deployment")}
-              />
-            }
-            content="Troubleshooting docs"
-          />
-          <AskAI />
+          <DeployDocsLinks />
         </div>
       </div>
       <ClientTabs defaultValue="github">

apps/webapp/app/components/Shortcuts.tsx

@@ -1,5 +1,8 @@
 import { KeyboardIcon } from "~/assets/icons/KeyboardIcon";
 import { useState } from "react";
+import { ASK_AGENT_LABEL } from "~/components/dashboard-agent/agent-identity";
+import { NEW_CHAT_SHORTCUT } from "~/components/dashboard-agent/DashboardAgentHeader";
+import { TOGGLE_PANEL_SHORTCUT } from "~/components/dashboard-agent/dashboardAgentLauncher";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { Header3 } from "./primitives/Headers";
 import { SideMenuItemButton } from "./navigation/SideMenuItem";
@@ -62,9 +65,9 @@ function ShortcutContent() {
               <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
               <ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
             </Shortcut>
-            <Shortcut name="Ask AI">
+            <Shortcut name={ASK_AGENT_LABEL}>
               <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
-              <ShortcutKey shortcut={{ key: "i" }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: TOGGLE_PANEL_SHORTCUT.key }} variant="medium/bright" />
             </Shortcut>
             <Shortcut name="Filter">
               <ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
@@ -94,6 +97,19 @@ function ShortcutContent() {
               <ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
             </Shortcut>
           </div>
+          <div className="space-y-3">
+            <Header3>Chat</Header3>
+            <Shortcut name="New chat">
+              <ShortcutKey
+                shortcut={{ modifiers: NEW_CHAT_SHORTCUT.modifiers }}
+                variant="medium/bright"
+              />
+              <ShortcutKey shortcut={{ key: NEW_CHAT_SHORTCUT.key }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Close chat">
+              <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
+            </Shortcut>
+          </div>
           <div className="space-y-3">
             <Header3>Runs page</Header3>
             <Shortcut name="Bulk action: Cancel runs">

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

@@ -0,0 +1,31 @@
+import type {
+  ActionsBlock as ActionsBlockPayload,
+  AgentIntent,
+} from "@internal/dashboard-agent-contracts";
+import { Button } from "~/components/primitives/Buttons";
+import { ChatActionsRow } from "./chat-layout";
+import { renderableActions } from "./view-actions";
+
+export function ActionsBlock({
+  block,
+  onIntent,
+}: {
+  block: ActionsBlockPayload;
+  onIntent?: (intent: AgentIntent) => void;
+}) {
+  const renderable = renderableActions(block.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>
+  );
+}