fix(vscode-companion): fill slash commands into input on Enter instead of auto-submitting

packages/channels/base/src/AcpBridge.ts

@@ -23,6 +23,7 @@ export interface AcpBridgeOptions {
 export interface AvailableCommand {
   name: string;
   description: string;
+  input?: { hint: string } | null;
 }
 
 export interface ToolCallEvent {

packages/cli/src/acp-integration/session/Session.test.ts

@@ -221,6 +221,7 @@ describe('Session', () => {
         {
           name: 'init',
           description: 'Initialize project context',
+          kind: 'built-in',
         },
       ]);
 
@@ -251,6 +252,7 @@ describe('Session', () => {
         {
           name: 'init',
           description: 'Initialize project context',
+          kind: 'built-in',
         },
       ]);
       mockConfig.getSkillManager = vi.fn().mockReturnValue({

packages/cli/src/acp-integration/session/Session.ts

@@ -81,6 +81,7 @@ import {
   type NonInteractiveSlashCommandResult,
 } from '../../nonInteractiveCliCommands.js';
 import { isSlashCommand } from '../../ui/utils/commandUtils.js';
+import { CommandKind } from '../../ui/commands/types.js';
 import { parseAcpModelOption } from '../../utils/acpModelUtils.js';
 import { classifyApiError } from '../../ui/hooks/useGeminiStream.js';
 
@@ -976,12 +977,19 @@ export class Session implements SessionContext {
         'acp',
       );
 
-      // Convert SlashCommand[] to AvailableCommand[] format for ACP protocol
+      // Convert SlashCommand[] to AvailableCommand[] format for ACP protocol.
+      // Commands that accept arguments (skills, commands with completion) get
+      // input: { hint } so the client can let users type arguments before
+      // submitting.  Built-in commands without completion get input: null so the
+      // client auto-submits them immediately on selection.
       const availableCommands: AvailableCommand[] = slashCommands.map(
         (cmd) => ({
           name: cmd.name,
           description: cmd.description,
-          input: null,
+          input:
+            cmd.kind !== CommandKind.BUILT_IN || cmd.completion != null
+              ? { hint: cmd.argumentHint ?? '' }
+              : null,
         }),
       );
 

packages/vscode-ide-companion/src/webview/App.test.tsx

@@ -34,6 +34,20 @@ const secondarySkillItem: CompletionItem = {
   value: 'skills code-review',
 };
 
+const commitCommandItem: CompletionItem = {
+  id: 'commit',
+  label: '/commit',
+  type: 'command',
+  value: 'commit',
+};
+
+const clearCommandItem: CompletionItem = {
+  id: 'clear',
+  label: '/clear',
+  type: 'command',
+  value: 'clear',
+};
+
 vi.mock('./hooks/useVSCode.js', () => ({
   useVSCode: () => ({
     postMessage: mockPostMessage,
@@ -101,7 +115,11 @@ vi.mock('./hooks/useWebViewMessages.js', async () => {
     }: {
       setIsAuthenticated: (value: boolean) => void;
       setAvailableCommands: (
-        value: Array<{ name: string; description?: string }>,
+        value: Array<{
+          name: string;
+          description: string;
+          input?: { hint: string } | null;
+        }>,
       ) => void;
       setAvailableSkills: (value: string[]) => void;
     }) => {
@@ -114,7 +132,21 @@ vi.mock('./hooks/useWebViewMessages.js', async () => {
         initializedRef.current = true;
         setIsAuthenticated(true);
         setAvailableCommands([
-          { name: 'skills', description: 'List available skills' },
+          {
+            name: 'skills',
+            description: 'List available skills',
+            input: null,
+          },
+          {
+            name: 'commit',
+            description: 'Commit current changes',
+            input: { hint: '' },
+          },
+          {
+            name: 'clear',
+            description: 'Clear the chat',
+            input: null,
+          },
         ]);
         setAvailableSkills(['code-review']);
       }, [setAvailableCommands, setAvailableSkills, setIsAuthenticated]);
@@ -143,7 +175,12 @@ vi.mock('./hooks/useCompletionTrigger.js', () => ({
     isOpen: true,
     triggerChar: '/',
     query: 'skills ',
-    items: [slashSkillsItem, secondarySkillItem],
+    items: [
+      slashSkillsItem,
+      secondarySkillItem,
+      commitCommandItem,
+      clearCommandItem,
+    ],
     closeCompletion: mockCloseCompletion,
     openCompletion: mockOpenCompletion,
     refreshCompletion: vi.fn(),
@@ -217,6 +254,15 @@ vi.mock('./components/layout/InputForm.js', () => ({
       <button onClick={() => onCompletionFill?.(secondarySkillItem)}>
         select-skill-tab
       </button>
+      <button onClick={() => onCompletionSelect(commitCommandItem)}>
+        select-commit-enter
+      </button>
+      <button onClick={() => onCompletionSelect(clearCommandItem)}>
+        select-clear-enter
+      </button>
+      <button onClick={() => onCompletionFill?.(clearCommandItem)}>
+        select-clear-tab
+      </button>
     </div>
   ),
 }));
@@ -410,4 +456,50 @@ describe('App /skills secondary picker', () => {
       '/skills code-review ',
     );
   });
+
+  it('fills slash commands that declare input when pressing Enter', async () => {
+    const rendered = renderApp();
+    root = rendered.root;
+    container = rendered.container;
+
+    await act(async () => {});
+    setInputSelection(rendered.container, '/');
+
+    clickButton(rendered.container, 'select-commit-enter');
+
+    expect(mockPostMessage).not.toHaveBeenCalled();
+    expect(getRenderedInputText(rendered.container)).toBe('/commit ');
+    expect(mockCloseCompletion).toHaveBeenCalled();
+  });
+
+  it('auto-submits slash commands without input when pressing Enter', async () => {
+    const rendered = renderApp();
+    root = rendered.root;
+    container = rendered.container;
+
+    await act(async () => {});
+    setInputSelection(rendered.container, '/');
+
+    clickButton(rendered.container, 'select-clear-enter');
+
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      type: 'sendMessage',
+      data: { text: '/clear' },
+    });
+    expect(mockCloseCompletion).toHaveBeenCalled();
+  });
+
+  it('fills slash commands without input when pressing Tab', async () => {
+    const rendered = renderApp();
+    root = rendered.root;
+    container = rendered.container;
+
+    await act(async () => {});
+    setInputSelection(rendered.container, '/');
+
+    clickButton(rendered.container, 'select-clear-tab');
+
+    expect(mockPostMessage).not.toHaveBeenCalled();
+    expect(getRenderedInputText(rendered.container)).toBe('/clear ');
+  });
 });

packages/vscode-ide-companion/src/webview/App.tsx

@@ -176,7 +176,7 @@
       }
       // No wrapper div — message components render directly as children
       // of the scroll container, preserving the original CSS layout.
       if (child == null) return null;
       mapping.push(index);
       return <React.Fragment key={`msg-${index}`}>{child}</React.Fragment>;
     });
@@ -212,7 +212,7 @@
   while (directChild && directChild.parentElement !== container) {
     directChild = directChild.parentElement;
   }
   if (!directChild) return -1;
 
   // Find DOM child position among container's children
   const children = container.children;
@@ -796,52 +796,49 @@
           }
         };
 
-        if (itemId === 'auth') {
-          clearTriggerText();
-          vscode.postMessage({ type: 'auth', data: {} });
-          closeCompletion();
-          return;
-        }
-
-        if (itemId === 'account') {
-          clearTriggerText();
-          vscode.postMessage({ type: 'getAccountInfo', data: {} });
-          closeCompletion();
-          return;
-        }
+        // Client-side commands that trigger extension actions directly
+        // instead of being sent to the agent as messages.
+        const clientActions: Record<string, () => void> = {
+          auth: () => vscode.postMessage({ type: 'auth', data: {} }),
+          account: () =>
+            vscode.postMessage({ type: 'getAccountInfo', data: {} }),
+          model: () => setShowModelSelector(true),
+        };
 
-        if (itemId === 'model') {
+        const clientAction = clientActions[itemId];
+        if (clientAction) {
           clearTriggerText();
-          setShowModelSelector(true);
+          clientAction();
           closeCompletion();
           return;
         }
 
-        // Handle server-provided slash commands by sending them as messages.
-        // Skip when fillOnly (Tab) — let the generic insertion path fill the
-        // command text so the user can keep typing arguments.
-        // Special case: /skills always uses fill behavior (Enter = Tab) to
-        // allow the secondary skill picker to appear.
+        // For server-provided slash commands, decide based on the `input`
+        // field: commands without input (input == null) auto-submit
+        // immediately; commands that accept input fall through to the generic
+        // insertion path so users can type arguments before submitting.
+        // Special case: /skills always uses fill behavior to allow the
+        // secondary skill picker to appear.
         const serverCmd = availableCommands.find((c) => c.name === itemId);
         const isSkillsCmd = shouldOpenSkillsSecondaryPicker(
           item,
           availableSkills,
         );
         if (
           serverCmd &&
-          !fillOnly &&
           !isSkillsCmd &&
           !isExpandableSlashCommand(serverCmd.name)
         ) {
-          // Clear the trigger text since we're sending the command
-          clearTriggerText();
-          // Send the slash command as a user message
-          vscode.postMessage({
-            type: 'sendMessage',
-            data: { text: `/${serverCmd.name}` },
-          });
-          closeCompletion();
-          return;
+          if (!serverCmd.input && !fillOnly) {
+            clearTriggerText();
+            vscode.postMessage({
+              type: 'sendMessage',
+              data: { text: `/${serverCmd.name}` },
+            });
+            closeCompletion();
+            return;
+          }
+          // Command accepts input — fall through to fill the input box.
         }
 
         // Handle secondary skill selection — send `/skills <name>` with
@@ -1203,7 +1200,7 @@
   useEffect(() => {
     const handler = (event: MessageEvent) => {
       const message = event.data;
       if (message?.type !== 'copyCommand') return;
 
       const { action } = message.data as { action: string };
 
@@ -1234,7 +1231,7 @@
               msg.kind === 'image' && msg.imagePath
                 ? `![image](${msg.imagePath})`
                 : (msg.content || '').trim();
             if (!content) continue;
             if (msg.role === 'user') {
               parts.push(`**User:** ${content}`);
             } else if (msg.role === 'thinking') {
@@ -1247,7 +1244,7 @@
             item.type === 'in-progress-tool-call'
           ) {
             const tc = item.data as ToolCallData;
             if (!shouldShowToolCall(tc.kind)) continue;
             const text = formatToolCallForCopy(tc, true);
             if (text) {
               parts.push(`**[Tool: ${tc.kind}]**\n\n${text}`);

packages/vscode-ide-companion/src/webview/hooks/useMessageSubmit.ts

@@ -101,8 +101,11 @@ export const useMessageSubmit = ({
         return;
       }
 
-      // Handle /login command - show inline loading while extension authenticates
-      if (textToSend.trim() === '/login') {
+      // Handle /auth (and its legacy alias /login) — trigger interactive
+      // auth flow directly in the extension instead of sending the command
+      // to the agent.
+      const trimmedInput = textToSend.trim();
+      if (trimmedInput === '/auth' || trimmedInput === '/login') {
         setInputText('');
         if (inputFieldRef.current) {
           inputFieldRef.current.textContent = ZERO_WIDTH_SPACE;
@@ -112,7 +115,6 @@ export const useMessageSubmit = ({
           type: 'auth',
           data: {},
         });
-        // Show a friendly loading message in the chat while authenticating
         try {
           messageHandling.setWaitingForResponse('Authenticating Qwen Code...');
         } catch (_err) {

packages/vscode-ide-companion/src/webview/hooks/useWebViewMessages.test.tsx

@@ -248,6 +248,24 @@ describe('useWebViewMessages', () => {
     expect(rendered.clearWaitingForResponse).toHaveBeenCalled();
   });
 
+  it('clears waiting state when authCancelled is received', () => {
+    const rendered = renderHookHarness();
+    root = rendered.root;
+    container = rendered.container;
+
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: {
+            type: 'authCancelled',
+          },
+        }),
+      );
+    });
+
+    expect(rendered.clearWaitingForResponse).toHaveBeenCalled();
+  });
+
   it('stores the latest insight report path when the ready event arrives', () => {
     const rendered = renderHookHarness();
     root = rendered.root;

packages/vscode-ide-companion/src/webview/hooks/useWebViewMessages.ts

@@ -521,6 +521,13 @@ export const useWebViewMessages = ({
           break;
         }
 
+        case 'authCancelled': {
+          // User dismissed the auth picker — clear loading state so the
+          // input is not left disabled.
+          handlers.messageHandling.clearWaitingForResponse();
+          break;
+        }
+
         case 'authState': {
           const state = (
             message?.data as { authenticated?: boolean | null } | undefined

packages/vscode-ide-companion/src/webview/providers/WebViewProvider.ts

@@ -1109,7 +1109,7 @@
 
   /**
    * Initialize agent connection and session
-   * Can be called from show() or via /login command
+   * Can be called from show() or via /auth command
    */
   async initializeAgentConnection(options?: {
     autoAuthenticate?: boolean;
@@ -1667,9 +1667,9 @@
    * The webview resolves the content and posts back a 'copyToClipboard' message.
    */
   sendCopyCommand(action: string): boolean {
     if (WebViewProvider.lastContextMenuProvider !== this) return false;
     const webview = this.getActiveWebview();
     if (!webview) return false;
     webview.postMessage({ type: 'copyCommand', data: { action } });
     return true;
   }