🤖 feat: add Flow Prompting workspace prompts

.github/workflows/pr.yml

@@ -187,7 +187,9 @@ jobs:
     name: Test / Integration
     needs: [changes]
     if: ${{ (needs.changes.outputs.src == 'true' || needs.changes.outputs.config == 'true') && (github.event_name != 'push' || github.actor != 'github-merge-queue[bot]') }}
-    timeout-minutes: 10
+    # Backend changes run the full tests/ tree (IPC + UI + provider-backed coverage),
+    # which can legitimately exceed 10 minutes on busy runners.
+    timeout-minutes: 15
     runs-on: ${{ github.repository_owner == 'coder' && 'depot-ubuntu-22.04-16' || 'ubuntu-latest' }}
     steps:
       - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1

src/browser/components/AppLoader/AppLoader.auth.test.tsx

@@ -1,6 +1,7 @@
 import "../../../../tests/ui/dom";
 
 import React from "react";
+import type { AppLoader as AppLoaderComponent } from "../AppLoader/AppLoader";
 import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
 import { cleanup, render } from "@testing-library/react";
 import { useTheme } from "../../contexts/ThemeContext";
@@ -11,77 +12,106 @@ let cleanupDom: (() => void) | null = null;
 let apiStatus: "auth_required" | "connecting" | "error" = "auth_required";
 let apiError: string | null = "Authentication required";
 
-// AppLoader imports App, which pulls in Lottie-based components. In happy-dom,
-// lottie-web's canvas bootstrap can throw during module evaluation.
-void mock.module("lottie-react", () => ({
-  __esModule: true,
-  default: () => <div data-testid="LottieMock" />,
-}));
-
-void mock.module("@/browser/contexts/API", () => ({
-  APIProvider: (props: { children: React.ReactNode }) => props.children,
-  useAPI: () => {
-    if (apiStatus === "auth_required") {
-      return {
-        api: null,
-        status: "auth_required" as const,
-        error: apiError,
-        authenticate: () => undefined,
-        retry: () => undefined,
-      };
-    }
+const passthroughRef = <T,>(value: T): T => value;
+
+function installAppLoaderModuleMocks() {
+  void mock.module("react-dnd", () => ({
+    DndProvider: (props: { children: React.ReactNode }) => props.children,
+    useDrag: () => [{ isDragging: false }, passthroughRef, () => undefined] as const,
+    useDrop: () => [{ isOver: false }, passthroughRef] as const,
+    useDragLayer: () => ({ isDragging: false, item: null, currentOffset: null }),
+  }));
+
+  void mock.module("react-dnd-html5-backend", () => ({
+    HTML5Backend: {},
+    getEmptyImage: () => null,
+  }));
+
+  // AppLoader imports App, which pulls in Lottie-based components. In happy-dom,
+  // lottie-web's canvas bootstrap can throw during module evaluation.
+  void mock.module("lottie-react", () => ({
+    __esModule: true,
+    default: () => <div data-testid="LottieMock" />,
+  }));
+
+  void mock.module("@/browser/contexts/API", () => ({
+    APIProvider: (props: { children: React.ReactNode }) => props.children,
+    useAPI: () => {
+      if (apiStatus === "auth_required") {
+        return {
+          api: null,
+          status: "auth_required" as const,
+          error: apiError,
+          authenticate: () => undefined,
+          retry: () => undefined,
+        };
+      }
+
+      if (apiStatus === "error") {
+        return {
+          api: null,
+          status: "error" as const,
+          error: apiError ?? "Connection error",
+          authenticate: () => undefined,
+          retry: () => undefined,
+        };
+      }
 
-    if (apiStatus === "error") {
       return {
         api: null,
-        status: "error" as const,
-        error: apiError ?? "Connection error",
+        status: "connecting" as const,
+        error: null,
         authenticate: () => undefined,
         retry: () => undefined,
       };
-    }
-
-    return {
-      api: null,
-      status: "connecting" as const,
-      error: null,
-      authenticate: () => undefined,
-      retry: () => undefined,
-    };
-  },
-}));
-
-void mock.module("@/browser/components/LoadingScreen/LoadingScreen", () => ({
-  LoadingScreen: () => {
-    const { theme } = useTheme();
-    return <div data-testid="LoadingScreenMock">{theme}</div>;
-  },
-}));
-
-void mock.module("@/browser/components/StartupConnectionError/StartupConnectionError", () => ({
-  StartupConnectionError: (props: { error: string }) => (
-    <div data-testid="StartupConnectionErrorMock">{props.error}</div>
-  ),
-}));
-
-void mock.module("@/browser/components/AuthTokenModal/AuthTokenModal", () => ({
-  // Note: Module mocks leak between bun test files.
-  // Export all commonly-used symbols to avoid cross-test import errors.
-  AuthTokenModal: (props: { error?: string | null }) => (
-    <div data-testid="AuthTokenModalMock">{props.error ?? "no-error"}</div>
-  ),
-  getStoredAuthToken: () => null,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setStoredAuthToken: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  clearStoredAuthToken: () => {},
-}));
-
-import { AppLoader } from "../AppLoader/AppLoader";
+    },
+  }));
+
+  void mock.module("../../App", () => ({
+    __esModule: true,
+    // App imports the full sidebar tree (including react-dnd) even though these auth-path tests
+    // only need AppLoader's pre-App branching. Keep the unit focused so cross-file DOM teardown
+    // cannot trip react-dnd's MutationObserver bootstrap between test files.
+    default: () => <div data-testid="AppMock" />,
+  }));
+
+  void mock.module("@/browser/components/LoadingScreen/LoadingScreen", () => ({
+    LoadingScreen: () => {
+      const { theme } = useTheme();
+      return <div data-testid="LoadingScreenMock">{theme}</div>;
+    },
+  }));
+
+  void mock.module("@/browser/components/StartupConnectionError/StartupConnectionError", () => ({
+    StartupConnectionError: (props: { error: string }) => (
+      <div data-testid="StartupConnectionErrorMock">{props.error}</div>
+    ),
+  }));
+
+  void mock.module("@/browser/components/AuthTokenModal/AuthTokenModal", () => ({
+    // Note: Module mocks leak between bun test files.
+    // Export all commonly-used symbols to avoid cross-test import errors.
+    AuthTokenModal: (props: { error?: string | null }) => (
+      <div data-testid="AuthTokenModalMock">{props.error ?? "no-error"}</div>
+    ),
+    getStoredAuthToken: () => null,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setStoredAuthToken: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    clearStoredAuthToken: () => {},
+  }));
+}
+
+let AppLoader: typeof AppLoaderComponent;
 
 describe("AppLoader", () => {
   beforeEach(() => {
     cleanupDom = installDom();
+    installAppLoaderModuleMocks();
+    // eslint-disable-next-line @typescript-eslint/no-require-imports -- module mocks must be registered before loading AppLoader in bun tests.
+    ({ AppLoader } = require("../AppLoader/AppLoader") as {
+      AppLoader: typeof AppLoaderComponent;
+    });
   });
 
   afterEach(() => {

src/browser/components/AppLoader/AppLoader.tsx

@@ -10,6 +10,7 @@ import { useWorkspaceStoreRaw, workspaceStore } from "../../stores/WorkspaceStor
 import { useGitStatusStoreRaw } from "../../stores/GitStatusStore";
 import { useRuntimeStatusStoreRaw } from "../../stores/RuntimeStatusStore";
 import { useBackgroundBashStoreRaw } from "../../stores/BackgroundBashStore";
+import { useFlowPromptStoreRaw } from "../../stores/FlowPromptStore";
 import { getPRStatusStoreInstance } from "../../stores/PRStatusStore";
 import { ProjectProvider, useProjectContext } from "../../contexts/ProjectContext";
 import { PolicyProvider, usePolicy } from "@/browser/contexts/PolicyContext";
@@ -71,6 +72,7 @@ function AppLoaderInner() {
   const gitStatusStore = useGitStatusStoreRaw();
   const runtimeStatusStore = useRuntimeStatusStoreRaw();
   const backgroundBashStore = useBackgroundBashStoreRaw();
+  const flowPromptStore = useFlowPromptStoreRaw();
 
   const prefersReducedMotion = useReducedMotion();
 
@@ -89,6 +91,7 @@ function AppLoaderInner() {
     gitStatusStore.setClient(api ?? null);
     runtimeStatusStore.setClient(api ?? null);
     backgroundBashStore.setClient(api ?? null);
+    flowPromptStore.setClient(api ?? null);
     getPRStatusStoreInstance().setClient(api ?? null);
 
     if (!workspaceContext.loading) {
@@ -113,6 +116,7 @@ function AppLoaderInner() {
     gitStatusStore,
     runtimeStatusStore,
     backgroundBashStore,
+    flowPromptStore,
     api,
   ]);
 

src/browser/components/ChatPane/ChatPane.tsx

@@ -43,13 +43,15 @@ import {
 import { formatKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
 import { useAutoScroll } from "@/browser/hooks/useAutoScroll";
 import { useOpenInEditor } from "@/browser/hooks/useOpenInEditor";
+import { useFlowPrompt } from "@/browser/hooks/useFlowPrompt";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
 import {
   useWorkspaceAggregator,
   useWorkspaceUsage,
   useWorkspaceStoreRaw,
   type WorkspaceState,
 } from "@/browser/stores/WorkspaceStore";
+import { MUX_HELP_CHAT_WORKSPACE_ID } from "@/common/constants/muxChat";
 import { WorkspaceMenuBar } from "../WorkspaceMenuBar/WorkspaceMenuBar";
 import type { DisplayedMessage, QueuedMessage as QueuedMessageData } from "@/common/types/message";
 import type { RuntimeConfig } from "@/common/types/runtime";
@@ -83,6 +85,10 @@ import {
   normalizeQueuedMessage,
   type EditingMessageState,
 } from "@/browser/utils/chatEditing";
+import {
+  FlowPromptComposerCard,
+  shouldShowFlowPromptComposerCard,
+} from "../FlowPromptComposerCard/FlowPromptComposerCard";
 import { recordSyntheticReactRenderSample } from "@/browser/utils/perf/reactProfileCollector";
 
 // Perf e2e runs load the production bundle where React's onRender profiler callbacks may not
@@ -1022,6 +1028,14 @@ interface ChatInputPaneProps {
 
 const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
   const { reviews } = props;
+  const flowPrompt = useFlowPrompt(props.workspaceId, props.workspaceName, props.runtimeConfig);
+  const [isFlowPromptCollapsed, setIsFlowPromptCollapsed] = usePersistedState(
+    `flowPromptComposerCollapsed:${props.workspaceId}`,
+    false,
+    { listener: true }
+  );
+
+  const shouldShowFlowPromptCard = shouldShowFlowPromptComposerCard(flowPrompt.state);
 
   return (
     <div className="flex flex-col gap-2">
@@ -1057,6 +1071,30 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
           This agent task is queued and will start automatically when a parallel slot is available.
         </div>
       )}
+      {flowPrompt.state && shouldShowFlowPromptCard ? (
+        <FlowPromptComposerCard
+          state={flowPrompt.state}
+          error={flowPrompt.error}
+          isCollapsed={isFlowPromptCollapsed}
+          isUpdatingAutoSendMode={flowPrompt.isUpdatingAutoSendMode}
+          isSendingNow={flowPrompt.isSendingNow}
+          onOpen={() => {
+            void flowPrompt.openFlowPrompt();
+          }}
+          onDisable={() => {
+            void flowPrompt.disableFlowPrompt();
+          }}
+          onAutoSendModeChange={(mode) => {
+            void flowPrompt.updateAutoSendMode(mode);
+          }}
+          onSendNow={() => {
+            void flowPrompt.sendNow();
+          }}
+          onToggleCollapsed={() => {
+            setIsFlowPromptCollapsed((collapsed) => !collapsed);
+          }}
+        />
+      ) : null}
       <ChatInput
         key={props.workspaceId}
         variant="workspace"
@@ -1078,6 +1116,9 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
         onEditLastUserMessage={props.onEditLastUserMessage}
         canInterrupt={props.canInterrupt}
         onReady={props.onChatInputReady}
+        showFlowPromptShortcutHint={
+          props.workspaceId !== MUX_HELP_CHAT_WORKSPACE_ID && !shouldShowFlowPromptCard
+        }
         attachedReviews={reviews.attachedReviews}
         onDetachReview={reviews.detachReview}
         onDetachAllReviews={reviews.detachAllAttached}