feat: slash command card gallery settings UI

src/background/features/gemini/gemini/content-normalize.ts

@@ -209,6 +209,7 @@ function normalizeContentMetadata(value: unknown): GeminiContent['metadata'] | u
   const interactionId = readStringField(value, 'interactionId', 'interaction_id');
   const sourceModel = readStringField(value, 'sourceModel', 'source_model');
   const createdAt = readStringField(value, 'createdAt', 'created_at');
+  const userDisplayText = readStringField(value, 'userDisplayText', 'user_display_text');
   const attachmentPreviewByFileUri = normalizeAttachmentPreviewByFileUri(
     readPartRecord(value, 'attachmentPreviewByFileUri', 'attachment_preview_by_file_uri'),
   );
@@ -224,6 +225,7 @@ function normalizeContentMetadata(value: unknown): GeminiContent['metadata'] | u
     !interactionId &&
     !sourceModel &&
     !createdAt &&
+    !userDisplayText &&
     !attachmentPreviewByFileUri &&
     !attachmentPreviewTextByFileUri &&
     !groundingSources
@@ -244,6 +246,9 @@ function normalizeContentMetadata(value: unknown): GeminiContent['metadata'] | u
   if (createdAt) {
     metadata.createdAt = createdAt;
   }
+  if (userDisplayText) {
+    metadata.userDisplayText = userDisplayText;
+  }
   if (attachmentPreviewByFileUri) {
     metadata.attachmentPreviewByFileUri = attachmentPreviewByFileUri;
   }

src/background/features/gemini/gemini/content-render.ts

@@ -9,6 +9,13 @@ import {
 } from './common';
 
 export function renderContentForChat(content: GeminiContent): string {
+  if (content.role === 'user') {
+    const displayText = content.metadata?.userDisplayText?.trim();
+    if (displayText) {
+      return displayText;
+    }
+  }
+
   const blocks: string[] = [];
 
   for (const part of content.parts) {

src/background/features/runtime/handlers/chat-send.ts

@@ -1,4 +1,5 @@
 import type { FileDataAttachmentPayload } from '../../../../shared/runtime';
+import { resolveSlashCommandText } from '../../../../shared/slash-commands';
 import { isInvalidPreviousInteractionIdError } from '../../gemini/gemini';
 import {
   appendContentsToBranch,
@@ -32,17 +33,20 @@ export async function handleSendMessage(
   attachments: FileDataAttachmentPayload[] | undefined,
   dependencies: RuntimeDependencies,
 ): Promise<SendMessageResult> {
-  const normalizedText = text.trim();
+  const normalizedDisplayText = text.trim();
   const normalizedAttachments = normalizeFileDataAttachments(attachments);
-  if (!normalizedText && normalizedAttachments.length === 0) {
-    throw new Error('Cannot send an empty message.');
-  }
 
   const settings = await dependencies.readGeminiSettings();
   if (!settings.apiKey) {
     throw new Error('Gemini API key is missing. Add it in Speakeasy Settings.');
   }
 
+  const resolvedUserText = resolveSlashCommandText(normalizedDisplayText, settings.slashCommands);
+  const normalizedText = resolvedUserText.resolvedText.trim();
+  if (!normalizedText && normalizedAttachments.length === 0) {
+    throw new Error('Cannot send an empty message.');
+  }
+
   if (model) {
     settings.model = model;
   }
@@ -71,15 +75,24 @@ export async function handleSendMessage(
     role: 'user',
     parts: userParts,
   };
+  const shouldPersistDisplayText =
+    !!resolvedUserText.command && normalizedDisplayText !== normalizedText;
+  const userMetadata: NonNullable<GeminiContent['metadata']> = {};
+  if (shouldPersistDisplayText) {
+    userMetadata.userDisplayText = normalizedDisplayText;
+  }
   const attachmentPreviewByFileUri = buildAttachmentPreviewByFileUri(normalizedAttachments);
   const attachmentPreviewTextByFileUri = buildAttachmentPreviewTextByFileUri(normalizedAttachments);
   const hasImagePreviews = Object.keys(attachmentPreviewByFileUri).length > 0;
   const hasTextPreviews = Object.keys(attachmentPreviewTextByFileUri).length > 0;
-  if (hasImagePreviews || hasTextPreviews) {
-    userContent.metadata = {
-      ...(hasImagePreviews ? { attachmentPreviewByFileUri } : {}),
-      ...(hasTextPreviews ? { attachmentPreviewTextByFileUri } : {}),
-    };
+  if (hasImagePreviews) {
+    userMetadata.attachmentPreviewByFileUri = attachmentPreviewByFileUri;
+  }
+  if (hasTextPreviews) {
+    userMetadata.attachmentPreviewTextByFileUri = attachmentPreviewTextByFileUri;
+  }
+  if (Object.keys(userMetadata).length > 0) {
+    userContent.metadata = userMetadata;
   }
   const branchStartNodeId = workingSession.branchTree?.activeLeafNodeId;
   if (!branchStartNodeId) {
@@ -137,7 +150,7 @@ export async function handleSendMessage(
   const pendingTitleGeneration: PendingSessionTitleGeneration = {
     chatId: workingSession.id,
     apiKey: settings.apiKey,
-    firstUserQuery: normalizedText,
+    firstUserQuery: normalizedDisplayText || normalizedText,
   };
   if (normalizedAttachments.length > 0) {
     pendingTitleGeneration.attachments = normalizedAttachments;

src/background/features/session/types.ts

@@ -146,6 +146,7 @@ export interface GeminiContentMetadata {
   interactionId?: string;
   sourceModel?: string;
   createdAt?: string;
+  userDisplayText?: string;
   attachmentPreviewByFileUri?: Record<string, string>;
   attachmentPreviewTextByFileUri?: Record<string, string>;
   groundingSources?: GroundingSource[];

src/chatpanel/app/bootstrap.ts

@@ -40,6 +40,7 @@ import {
 } from '../features/attachments/page-text-extraction';
 import { readAttachedTextPreview } from '../features/attachments/text-preview';
 import { createInputToolbar } from '../features/composer/input-toolbar';
+import { createSlashCommandMenuController } from '../features/composer/slash-command-menu';
 import {
   canSubmitMessage,
   createConversationFlowController,
@@ -104,6 +105,18 @@ export function mountChatPanel(): void {
   const input = queryRequiredElement<HTMLTextAreaElement>(shadowRoot, '#speakeasy-input');
   const fileInput = queryRequiredElement<HTMLInputElement>(shadowRoot, '#speakeasy-file-input');
   const filePreviews = queryRequiredElement<HTMLElement>(shadowRoot, '#speakeasy-file-previews');
+  const slashCommandMenu = queryRequiredElement<HTMLElement>(
+    shadowRoot,
+    '#speakeasy-slash-command-menu',
+  );
+  const slashCommandList = queryRequiredElement<HTMLElement>(
+    shadowRoot,
+    '#speakeasy-slash-command-list',
+  );
+  const slashCommandEmpty = queryRequiredElement<HTMLElement>(
+    shadowRoot,
+    '#speakeasy-slash-command-empty',
+  );
   const tabMentionMenu = queryRequiredElement<HTMLElement>(
     shadowRoot,
     '#speakeasy-tab-mention-menu',
@@ -196,12 +209,15 @@ export function mountChatPanel(): void {
 
   input.addEventListener('input', () => {
     resizeComposerInput();
+    slashCommandController.onInputOrCaretChange();
     tabMentionController.onInputOrCaretChange();
   });
   input.addEventListener('click', () => {
+    slashCommandController.onInputOrCaretChange();
     tabMentionController.onInputOrCaretChange();
   });
   input.addEventListener('keyup', () => {
+    slashCommandController.onInputOrCaretChange();
     tabMentionController.onInputOrCaretChange();
   });
   const stopInputKeyboardPropagation = (event: KeyboardEvent) => {
@@ -335,6 +351,14 @@ export function mountChatPanel(): void {
     isBusy: () =>
       isBusy || isCapturingFullPageScreenshot || isExtractingPageText || isProcessingMentionAction,
   });
+  const slashCommandController = createSlashCommandMenuController({
+    input,
+    menu: slashCommandMenu,
+    list: slashCommandList,
+    emptyState: slashCommandEmpty,
+    isBusy: () =>
+      isBusy || isCapturingFullPageScreenshot || isExtractingPageText || isProcessingMentionAction,
+  });
 
   async function ensureChatTabContext(): Promise<ChatTabContext> {
     if (hasResolvedChatTabContext) {
@@ -504,6 +528,10 @@ export function mountChatPanel(): void {
   });
 
   input.addEventListener('keydown', (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+
     if (event.key === 'Enter' && !event.shiftKey) {
       if (isInputComposing || event.isComposing || event.keyCode === 229) {
         return;
@@ -525,6 +553,7 @@ export function mountChatPanel(): void {
 
   input.addEventListener('blur', () => {
     isInputComposing = false;
+    slashCommandController.close();
   });
 
   shell.addEventListener('dragenter', (event) => {
@@ -625,7 +654,10 @@ export function mountChatPanel(): void {
       }
 
       const keyboardEvent = event as KeyboardEvent;
-      if (tabMentionController.onKeyDown(keyboardEvent)) {
+      if (
+        tabMentionController.onKeyDown(keyboardEvent) ||
+        slashCommandController.onKeyDown(keyboardEvent)
+      ) {
         keyboardEvent.stopPropagation();
       }
     },
@@ -660,6 +692,7 @@ export function mountChatPanel(): void {
     onClose: () => {
       dragEnterDepth = 0;
       form.classList.remove('drop-active');
+      slashCommandController.close();
       tabMentionController.close();
       closeImagePreview();
       closeTextPreview();
@@ -830,6 +863,7 @@ export function mountChatPanel(): void {
     isBusy = nextBusy;
     syncComposerDisabledState();
     if (nextBusy) {
+      slashCommandController.close();
       tabMentionController.close();
     }
     syncToolbarButtonState();
@@ -859,10 +893,14 @@ export function mountChatPanel(): void {
 
   function syncComposerDisabledState(): void {
     input.disabled = isBusy || isProcessingMentionAction;
+    if (input.disabled) {
+      slashCommandController.close();
+    }
   }
 
   function openImagePreview(imageUrl: string, imageLabel: string): void {
     closeTextPreview();
+    slashCommandController.close();
     imagePreviewElement.src = imageUrl;
     imagePreviewElement.alt = imageLabel || 'Image preview';
     tabMentionController.close();
@@ -884,6 +922,7 @@ export function mountChatPanel(): void {
 
   function openTextPreview(title: string, text: string): void {
     closeImagePreview();
+    slashCommandController.close();
     textPreviewTitle.textContent = title.trim() || 'Markdown preview';
     textPreviewContent.textContent = text;
     tabMentionController.close();