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 /