Agentic UI: open slash-command dropdown when typing / in chat

apps/local/src/index.ts

@@ -24,6 +24,7 @@ import {
 	deleteAiSession,
 	loadAiSession,
 } from '@studio/common/ai/sessions/store';
+import { expandSkillCommandPrompt } from '@studio/common/ai/slash-commands';
 import { DEFAULT_TOKEN_LIFETIME_MS } from '@studio/common/constants';
 import { createCliRunner } from '@studio/common/lib/cli-process';
 import {
@@ -1407,7 +1408,7 @@ export async function startLocalServer( options: LocalServerOptions ): Promise<
 		}
 		const { runId } = runManager.startAgentRun( {
 			sessionId: req.params.id,
-			prompt,
+			prompt: expandSkillCommandPrompt( prompt ),
 			displayMessage,
 		} );
 		res.json( { runId } );

apps/studio/src/components/studio-code-session/composer/use-slash-commands.tsx

@@ -1,8 +1,8 @@
+import { getSlashCommandMatches } from '@studio/common/ai/slash-commands';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useEffect, useId, useMemo, useState } from 'react';
 import motionStyles from '../floating-surface-motion/style.module.css';
 import menuStyles from '../menu/style.module.css';
-import { getSlashCommandMatches } from './slash-autocomplete';
 import styles from './style.module.css';
 import type { Dispatch, KeyboardEvent, ReactNode, RefObject, SetStateAction } from 'react';
 

apps/studio/src/ipc-handlers.ts

@@ -41,10 +41,7 @@ import {
 	deleteAiSession as deleteAiSessionFromStore,
 	loadAiSession as loadAiSessionFromStore,
 } from '@studio/common/ai/sessions/store';
-import {
-	buildSkillInvocationPrompt,
-	resolveSkillFromPrompt,
-} from '@studio/common/ai/slash-commands';
+import { expandSkillCommandPrompt } from '@studio/common/ai/slash-commands';
 import { getAiTracksIdentity } from '@studio/common/ai/tracks-identity';
 import {
 	installSkillToSite,
@@ -415,14 +412,6 @@ async function reconcileSessionEnvironmentBeforeRun( sessionId: string ): Promis
 	} );
 }
 
-// Expand a bare skill-command slash prompt (e.g. `/rank-me-up`) into the
-// instruction the agent actually acts on. Mirrors the CLI's interactive main
-// loop so UI clients can send the short form and get the same behaviour.
-function expandSkillCommandPrompt( prompt: string ): string {
-	const name = resolveSkillFromPrompt( prompt );
-	return name ? buildSkillInvocationPrompt( name ) : prompt;
-}
-
 export async function continueAiSession(
 	event: IpcMainInvokeEvent,
 	sessionId: string,

apps/ui/src/ui-classic/components/session-view/composer/index.test.tsx

@@ -190,7 +190,7 @@ describe( 'Composer menu', () => {
 			value: 1000,
 		} );
 		renderComposer();
-		const textarea = screen.getByRole( 'textbox' ) as HTMLTextAreaElement;
+		const textarea = screen.getByRole( 'combobox' ) as HTMLTextAreaElement;
 		let scrollHeight = 72;
 		Object.defineProperty( textarea, 'scrollHeight', {
 			configurable: true,
@@ -231,7 +231,7 @@ describe( 'Composer menu', () => {
 
 	it( 'resizes the textarea when attachments change its padding', async () => {
 		const { container } = renderComposer();
-		const textarea = screen.getByRole( 'textbox' ) as HTMLTextAreaElement;
+		const textarea = screen.getByRole( 'combobox' ) as HTMLTextAreaElement;
 		const textFile = new File( [ 'Attachment preview text' ], 'notes.txt', {
 			type: 'text/plain',
 		} );
@@ -267,7 +267,7 @@ describe( 'Composer menu', () => {
 			value: 1000,
 		} );
 		renderComposer();
-		const textarea = screen.getByRole( 'textbox' ) as HTMLTextAreaElement;
+		const textarea = screen.getByRole( 'combobox' ) as HTMLTextAreaElement;
 		const resizeHandle = screen.getByRole( 'separator', { name: 'Resize composer' } );
 		Object.defineProperty( textarea, 'scrollHeight', {
 			configurable: true,
@@ -317,7 +317,7 @@ describe( 'Composer menu', () => {
 		expect(
 			await screen.findByRole( 'button', { name: 'Remove attachment: pasted-image.png' } )
 		).toBeInTheDocument();
-		expect( screen.getByRole( 'textbox' ) ).toHaveFocus();
+		expect( screen.getByRole( 'combobox' ) ).toHaveFocus();
 	} );
 
 	it( 'ignores pastes inside open dialogs', () => {

apps/ui/src/ui-classic/components/session-view/composer/index.tsx

@@ -54,6 +54,7 @@ import {
 	type ComposerAttachment,
 	type ComposerSendAttachments,
 } from './use-composer-attachments';
+import { useSlashCommands } from './use-slash-commands';
 import type {
 	AiModelId,
 	LoadedAiSession,
@@ -311,6 +312,13 @@ export const Composer = forwardRef< ComposerHandle, ComposerProps >( function Co
 	const connector = useConnector();
 	const queryClient = useQueryClient();
 
+	const slash = useSlashCommands( {
+		value,
+		setValue,
+		textareaRef,
+		previewPrompt: null,
+	} );
+
 	// File/image attachments (attach button + drag-and-drop). Images ride as
 	// base64 content blocks; other files are referenced by disk path.
 	const {
@@ -855,9 +863,13 @@ export const Composer = forwardRef< ComposerHandle, ComposerProps >( function Co
 							className={ styles.input }
 							placeholder={ placeholder }
 							value={ value }
+							{ ...slash.comboboxProps }
 							onChange={ ( event ) => setValue( event.target.value ) }
 							onPaste={ pasteHandlers.onPaste }
 							onKeyDown={ ( event ) => {
+								if ( slash.handleKeyDown( event ) ) {
+									return;
+								}
 								if ( event.key === 'Escape' && busy ) {
 									event.preventDefault();
 									void onInterrupt();
@@ -884,6 +896,7 @@ export const Composer = forwardRef< ComposerHandle, ComposerProps >( function Co
 							} }
 							rows={ 2 }
 						/>
+						{ slash.popup }
 					</div>
 					<div className={ styles.toolbar }>
 						<div className={ styles.leftActions }>

apps/ui/src/ui-classic/components/session-view/composer/style.module.css

@@ -337,6 +337,37 @@
 	min-width: 0;
 }
 
+/* Inline listbox anchored above the textarea. The Menu `.popup` class provides
+   the surface; this only adds the anchor/layout bits the portaled Menu doesn't
+   need. Stays a plain element so the textarea keeps focus. */
+.autocompletePopup {
+	position: absolute;
+	bottom: calc(100% + 4px);
+	left: 0;
+	z-index: 100;
+	max-height: 240px;
+	overflow-y: auto;
+	margin: 0;
+	list-style: none;
+}
+
+.commandItem {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.commandName {
+	font-family: var(--wpds-typography-font-family-mono, ui-monospace, monospace);
+	font-size: var(--wpds-typography-font-size-sm);
+	color: var(--wpds-color-fg-content-neutral);
+}
+
+.commandDescription {
+	font-size: var(--wpds-typography-font-size-xs);
+	color: var(--wpds-color-fg-content-neutral-weak);
+}
+
 .input {
 	display: block;
 	min-height: 48px;