feat: make slash commands available in draft agent screen

packages/app/src/components/agent-input-area.tsx

@@ -26,7 +26,10 @@ import {
 } from "./message-input";
 import { Theme } from "@/styles/theme";
 import { CommandAutocomplete } from "./command-autocomplete";
-import { useAgentCommandsQuery } from "@/hooks/use-agent-commands-query";
+import {
+  useAgentCommandsQuery,
+  type DraftCommandConfig,
+} from "@/hooks/use-agent-commands-query";
 import { encodeImages } from "@/utils/encode-images";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { focusWithRetries } from "@/utils/web-focus";
@@ -55,6 +58,8 @@ interface AgentInputAreaProps {
   autoFocus?: boolean;
   /** Callback to expose the addImages function to parent components */
   onAddImages?: (addImages: (images: ImageAttachment[]) => void) => void;
+  /** Optional draft context for listing commands before an agent exists. */
+  commandDraftConfig?: DraftCommandConfig;
 }
 
 const EMPTY_ARRAY: readonly QueuedMessage[] = [];
@@ -69,6 +74,7 @@ export function AgentInputArea({
   onChangeText,
   autoFocus = false,
   onAddImages,
+  commandDraftConfig,
 }: AgentInputAreaProps) {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
@@ -117,13 +123,39 @@ export function AgentInputArea({
   // Command autocomplete logic
   const showCommandAutocomplete = userInput.startsWith("/") && !userInput.includes(" ");
   const commandFilter = showCommandAutocomplete ? userInput.slice(1) : "";
+  const normalizedCommandDraftConfig = useMemo(() => {
+    if (!commandDraftConfig) {
+      return undefined;
+    }
 
-  // Prefetch commands when agent is available (not on new agent screen)
+    const cwd = commandDraftConfig.cwd.trim();
+    if (!cwd) {
+      return undefined;
+    }
+
+    const modeId = commandDraftConfig.modeId?.trim() ?? "";
+    const model = commandDraftConfig.model?.trim() ?? "";
+    const thinkingOptionId = commandDraftConfig.thinkingOptionId?.trim() ?? "";
+    return {
+      provider: commandDraftConfig.provider,
+      cwd,
+      ...(modeId ? { modeId } : {}),
+      ...(model ? { model } : {}),
+      ...(thinkingOptionId ? { thinkingOptionId } : {}),
+    };
+  }, [commandDraftConfig]);
+
+  // Prefetch commands for real agents and for draft screens when context is available.
   const isRealAgent = agentId && !agentId.startsWith("__");
+  const commandQueryDraftConfig = isRealAgent
+    ? undefined
+    : normalizedCommandDraftConfig;
+  const canLoadCommands = Boolean(serverId) && (isRealAgent || !!commandQueryDraftConfig);
   const { commands } = useAgentCommandsQuery({
     serverId,
     agentId,
-    enabled: !!isRealAgent && !!serverId,
+    enabled: canLoadCommands,
+    draftConfig: commandQueryDraftConfig,
   });
 
   // Filter commands for keyboard navigation
@@ -742,13 +774,14 @@ export function AgentInputArea({
           )}
 
           {/* Command autocomplete dropdown */}
-          {showCommandAutocomplete && isRealAgent && (
+          {showCommandAutocomplete && canLoadCommands && (
             <CommandAutocomplete
               serverId={serverId}
               agentId={agentId}
               filter={commandFilter}
               selectedIndex={commandSelectedIndex}
               onSelect={handleCommandSelect}
+              draftConfig={commandQueryDraftConfig}
             />
           )}
 

packages/app/src/components/command-autocomplete.tsx

@@ -1,6 +1,9 @@
 import { View, Text, Pressable, ScrollView } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { useAgentCommandsQuery } from "@/hooks/use-agent-commands-query";
+import {
+  useAgentCommandsQuery,
+  type DraftCommandConfig,
+} from "@/hooks/use-agent-commands-query";
 import { Fonts } from "@/constants/theme";
 import { Theme } from "@/styles/theme";
 
@@ -16,6 +19,7 @@ interface CommandAutocompleteProps {
   filter: string;
   selectedIndex: number;
   onSelect: (command: AgentSlashCommand) => void;
+  draftConfig?: DraftCommandConfig;
 }
 
 export function CommandAutocomplete({
@@ -24,12 +28,14 @@ export function CommandAutocomplete({
   filter,
   selectedIndex,
   onSelect,
+  draftConfig,
 }: CommandAutocompleteProps) {
   const { theme } = useUnistyles();
   const { commands, isLoading, isError, error } = useAgentCommandsQuery({
     serverId,
     agentId,
     enabled: true,
+    draftConfig,
   });
 
   // Filter commands based on input after /

packages/app/src/hooks/use-agent-commands-query.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useSessionStore } from "@/stores/session-store";
+import type { AgentProvider } from "@server/server/agent/agent-sdk-types";
 
 const COMMANDS_STALE_TIME = 60_000; // Commands rarely change, cache for 1 minute
 
@@ -9,20 +10,43 @@ interface AgentSlashCommand {
   argumentHint: string;
 }
 
-function commandsQueryKey(serverId: string, agentId: string) {
-  return ["agentCommands", serverId, agentId] as const;
+export interface DraftCommandConfig {
+  provider: AgentProvider;
+  cwd: string;
+  modeId?: string;
+  model?: string;
+  thinkingOptionId?: string;
+}
+
+function commandsQueryKey(
+  serverId: string,
+  agentId: string,
+  draftConfig?: DraftCommandConfig
+) {
+  return [
+    "agentCommands",
+    serverId,
+    agentId,
+    draftConfig?.provider ?? null,
+    draftConfig?.cwd ?? null,
+    draftConfig?.modeId ?? null,
+    draftConfig?.model ?? null,
+    draftConfig?.thinkingOptionId ?? null,
+  ] as const;
 }
 
 interface UseAgentCommandsQueryOptions {
   serverId: string;
   agentId: string;
   enabled?: boolean;
+  draftConfig?: DraftCommandConfig;
 }
 
 export function useAgentCommandsQuery({
   serverId,
   agentId,
   enabled = true,
+  draftConfig,
 }: UseAgentCommandsQueryOptions) {
   const client = useSessionStore(
     (state) => state.sessions[serverId]?.client ?? null
@@ -32,12 +56,12 @@ export function useAgentCommandsQuery({
   );
 
   const query = useQuery({
-    queryKey: commandsQueryKey(serverId, agentId),
+    queryKey: commandsQueryKey(serverId, agentId, draftConfig),
     queryFn: async () => {
       if (!client) {
         throw new Error("Daemon client not available");
       }
-      const response = await client.listCommands(agentId);
+      const response = await client.listCommands(agentId, { draftConfig });
       return response.commands as AgentSlashCommand[];
     },
     enabled: enabled && !!client && isConnected && !!agentId,

packages/app/src/screens/agent/draft-agent-screen.tsx

@@ -23,6 +23,7 @@ import { Combobox } from "@/components/ui/combobox";
 import { FileDropZone } from "@/components/file-drop-zone";
 import { useQuery } from "@tanstack/react-query";
 import { useAgentFormState, type CreateAgentInitialValues } from "@/hooks/use-agent-form-state";
+import type { DraftCommandConfig } from "@/hooks/use-agent-commands-query";
 import {
   CHECKOUT_STATUS_STALE_TIME,
   checkoutStatusQueryKey,
@@ -788,6 +789,33 @@ export function DraftAgentScreen({
   const createAgentClient = useSessionStore((state) =>
     selectedServerId ? state.sessions[selectedServerId]?.client ?? null : null
   );
+  const draftCommandConfig = useMemo<DraftCommandConfig | undefined>(() => {
+    const cwd = (
+      isAttachWorktree && selectedWorktreePath ? selectedWorktreePath : workingDir
+    ).trim();
+    if (!cwd) {
+      return undefined;
+    }
+
+    return {
+      provider: selectedProvider,
+      cwd,
+      ...(modeOptions.length > 0 && selectedMode !== "" ? { modeId: selectedMode } : {}),
+      ...(selectedModel.trim() ? { model: selectedModel.trim() } : {}),
+      ...(selectedThinkingOptionId.trim()
+        ? { thinkingOptionId: selectedThinkingOptionId.trim() }
+        : {}),
+    };
+  }, [
+    isAttachWorktree,
+    modeOptions.length,
+    selectedMode,
+    selectedModel,
+    selectedProvider,
+    selectedThinkingOptionId,
+    selectedWorktreePath,
+    workingDir,
+  ]);
 
   const promptValue = machine.tag === "draft" ? machine.promptText : "";
   const formErrorMessage = machine.tag === "draft" ? machine.errorMessage : "";
@@ -1240,6 +1268,7 @@ export function DraftAgentScreen({
             onChangeText={(next) => dispatch({ type: "DRAFT_SET_PROMPT", text: next })}
             autoFocus={machine.tag === "draft"}
             onAddImages={handleAddImagesCallback}
+            commandDraftConfig={draftCommandConfig}
           />
         </View>
       </View>