@codori/client 0.0.8 → 0.0.9

package/app/components/ChatWorkspace.vue

@@ -6,12 +6,13 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
-  watch,
-  type ComponentPublicInstance
+  watch
 } from 'vue'
+import LocalFileViewerModal from './LocalFileViewerModal.vue'
 import MessageContent from './MessageContent.vue'
 import ReviewStartDrawer from './ReviewStartDrawer.vue'
 import PendingUserRequestDrawer from './PendingUserRequestDrawer.vue'
+import UsageStatusModal from './UsageStatusModal.vue'
 import {
   reconcileOptimisticUserMessage,
   removeChatMessage,
@@ -25,6 +26,7 @@ import {
   shouldRetrySteerWithTurnStart,
   shouldIgnoreNotificationAfterInterrupt
 } from '../utils/chat-turn-engagement'
+import { isFocusWithinContainer } from '../utils/slash-prompt-focus'
 import { useChatAttachments, type DraftAttachment } from '../composables/useChatAttachments'
 import { usePendingUserRequest } from '../composables/usePendingUserRequest'
 import { useChatSession, type LiveStream, type SubagentPanelState } from '../composables/useChatSession'
@@ -99,6 +101,16 @@ import {
   toSlashCommandCompletion,
   type SlashCommandDefinition
 } from '~~/shared/slash-commands'
+import {
+  buildFileAutocompletePathSegments,
+  findActiveFileAutocompleteMatch,
+  normalizeFileAutocompleteQuery,
+  normalizeFuzzyFileSearchMatches,
+  replaceActiveFileAutocompleteMatch,
+  toFileAutocompleteHandle,
+  type FileAutocompletePathSegment,
+  type NormalizedFuzzyFileSearchMatch
+} from '~~/shared/file-autocomplete'
 
 const props = defineProps<{
   projectId: string
@@ -142,7 +154,9 @@ const input = ref('')
 const chatPromptRef = ref<{
   textareaRef?: unknown
 } | null>(null)
-const slashDropdownRef = ref<ComponentPublicInstance | HTMLElement | null>(null)
+const slashDropdownRef = ref<HTMLElement | null>(null)
+const fileAutocompleteDropdownRef = ref<HTMLElement | null>(null)
+const fileAutocompleteListRef = ref<HTMLElement | null>(null)
 const scrollViewport = ref<HTMLElement | null>(null)
 const pinnedToBottom = ref(true)
 const session = useChatSession(props.projectId)
@@ -184,10 +198,16 @@ const promptSelectionStart = ref(0)
 const promptSelectionEnd = ref(0)
 const isPromptFocused = ref(false)
 const dismissedSlashMatchKey = ref<string | null>(null)
+const dismissedFileAutocompleteMatchKey = ref<string | null>(null)
 const slashHighlightIndex = ref(0)
+const fileAutocompleteHighlightIndex = ref(0)
+const fileAutocompleteLoading = ref(false)
+const fileAutocompleteError = ref<string | null>(null)
+const fileAutocompleteResults = ref<NormalizedFuzzyFileSearchMatch[]>([])
 const reviewDrawerOpen = ref(false)
 const reviewDrawerMode = ref<'target' | 'branch'>('target')
 const reviewDrawerCommandText = ref('/review')
+const usageStatusModalOpen = ref(false)
 const reviewBranches = ref<string[]>([])
 const reviewCurrentBranch = ref<string | null>(null)
 const reviewBranchesLoading = ref(false)
@@ -256,8 +276,48 @@ const filteredSlashCommands = computed(() =>
     : []
 )
 
+const activeFileAutocompleteMatch = computed(() =>
+  isPromptFocused.value
+    ? findActiveFileAutocompleteMatch(input.value, promptSelectionStart.value, promptSelectionEnd.value)
+    : null
+)
+
+const activeFileAutocompleteMatchKey = computed(() => {
+  const match = activeFileAutocompleteMatch.value
+  if (!match) {
+    return null
+  }
+
+  return `${match.start}:${match.end}:${match.raw}`
+})
+
+const normalizedFileAutocompleteQuery = computed(() =>
+  activeFileAutocompleteMatch.value
+    ? normalizeFileAutocompleteQuery(activeFileAutocompleteMatch.value.query)
+    : ''
+)
+
+const fileAutocompleteOpen = computed(() =>
+  !reviewDrawerOpen.value
+  && Boolean(activeFileAutocompleteMatch.value)
+  && activeFileAutocompleteMatchKey.value !== dismissedFileAutocompleteMatchKey.value
+)
+
+const visibleFileAutocompleteResults = computed(() =>
+  fileAutocompleteResults.value
+    .filter((match) => match.matchType === 'file')
+    .slice(0, 8)
+)
+
+const highlightedFileAutocompleteResult = computed(() =>
+  visibleFileAutocompleteResults.value[fileAutocompleteHighlightIndex.value]
+  ?? visibleFileAutocompleteResults.value[0]
+  ?? null
+)
+
 const slashDropdownOpen = computed(() =>
   !reviewDrawerOpen.value
+  && !fileAutocompleteOpen.value
   && Boolean(activeSlashMatch.value)
   && activeSlashMatchKey.value !== dismissedSlashMatchKey.value
   && filteredSlashCommands.value.length > 0
@@ -267,20 +327,6 @@ const highlightedSlashCommand = computed(() =>
   filteredSlashCommands.value[slashHighlightIndex.value] ?? filteredSlashCommands.value[0] ?? null
 )
 
-const slashPaletteGroups = computed(() => [{
-  id: 'slash-commands',
-  ignoreFilter: true,
-  items: filteredSlashCommands.value.map((command, index) => ({
-    label: `/${command.name}`,
-    description: command.description,
-    icon: command.name === 'review' ? 'i-lucide-search-check' : 'i-lucide-terminal',
-    active: index === slashHighlightIndex.value,
-    onSelect: () => {
-      void activateSlashCommand(command, command.supportsInlineArgs ? 'complete' : 'execute')
-    }
-  }))
-}])
-
 const reviewBaseBranches = computed(() =>
   reviewBranches.value.filter(branch => branch !== reviewCurrentBranch.value)
 )
@@ -340,6 +386,34 @@ const contextIndicatorLabel = computed(() => {
   return remainingPercent == null ? 'ctx' : `${Math.round(remainingPercent)}%`
 })
 
+const fileAutocompleteEmptyState = computed(() => {
+  if (!fileAutocompleteOpen.value) {
+    return null
+  }
+
+  if (!selectedProject.value?.projectPath) {
+    return 'Project runtime is not ready yet.'
+  }
+
+  if (!normalizedFileAutocompleteQuery.value) {
+    return 'Type a path or filename to search project files.'
+  }
+
+  if (fileAutocompleteLoading.value) {
+    return 'Searching project files...'
+  }
+
+  if (fileAutocompleteError.value) {
+    return fileAutocompleteError.value
+  }
+
+  if (visibleFileAutocompleteResults.value.length === 0) {
+    return 'No matching project files.'
+  }
+
+  return null
+})
+
 const normalizePromptSelection = (
   preferredModel?: string | null,
   preferredEffort?: ReasoningEffort | null
@@ -434,6 +508,7 @@ const optimisticAttachmentSnapshots = new Map<string, DraftAttachment[]>()
 let promptControlsPromise: Promise<void> | null = null
 let pendingThreadHydration: Promise<void> | null = null
 let releaseServerRequestHandler: (() => void) | null = null
+let fileAutocompleteRequestSequence = 0
 
 const isActiveTurnStatus = (value: string | null | undefined) => {
   if (!value) {
@@ -705,6 +780,10 @@ const syncPromptSelectionFromDom = () => {
   if (!activeSlashMatchKey.value || activeSlashMatchKey.value !== dismissedSlashMatchKey.value) {
     dismissedSlashMatchKey.value = null
   }
+
+  if (!activeFileAutocompleteMatchKey.value || activeFileAutocompleteMatchKey.value !== dismissedFileAutocompleteMatchKey.value) {
+    dismissedFileAutocompleteMatchKey.value = null
+  }
 }
 
 const focusPromptAt = async (position?: number) => {
@@ -722,23 +801,15 @@ const focusPromptAt = async (position?: number) => {
   isPromptFocused.value = true
 }
 
-const resolveSlashDropdownElement = () => {
-  const target = slashDropdownRef.value
-  if (target instanceof HTMLElement) {
-    return target
-  }
-
-  const rootElement = target?.$el
-  return rootElement instanceof HTMLElement ? rootElement : null
-}
-
-const shouldRetainPromptFocus = (nextFocused: EventTarget | null) =>
-  nextFocused instanceof Node
-  && Boolean(resolveSlashDropdownElement()?.contains(nextFocused))
+const shouldRetainPromptFocus = (nextFocused: EventTarget | null | undefined) =>
+  isFocusWithinContainer(nextFocused, slashDropdownRef.value)
+  || isFocusWithinContainer(nextFocused, fileAutocompleteDropdownRef.value)
 
 const handlePromptBlur = (event: FocusEvent) => {
+  // Composer suggestion popups must stay focusless. If focus ever moves into
+  // the overlay, the textarea selection state no longer matches the active
+  // token and the menu collapses while the draft still contains `/` or `@`.
   if (shouldRetainPromptFocus(event.relatedTarget)) {
-    isPromptFocused.value = true
     void focusPromptAt(promptSelectionStart.value)
     return
   }
@@ -746,16 +817,38 @@ const handlePromptBlur = (event: FocusEvent) => {
   isPromptFocused.value = false
 }
 
-const handleSlashDropdownFocusIn = () => {
-  if (!slashDropdownOpen.value) {
-    return
-  }
+const handleSlashDropdownPointerDown = (event: PointerEvent) => {
+  // Fundamental rule for slash commands: the popup is only a visual chooser.
+  // Selection happens through the textarea's keyboard handlers, and mouse/touch
+  // clicks must not transfer DOM focus into popup items.
+  event.preventDefault()
+  void focusPromptAt(promptSelectionStart.value)
+}
 
+const handleFileAutocompletePointerDown = (event: PointerEvent) => {
+  // File suggestions follow the same inert-overlay rule as slash commands.
+  // Keeping focus anchored in the textarea avoids collapsing the popup while
+  // the active `@token` is still being edited.
+  event.preventDefault()
   void focusPromptAt(promptSelectionStart.value)
 }
 
-const preventSlashPaletteEntryFocus = (event: CustomEvent) => {
+const onPromptEnterCapture = (event: KeyboardEvent) => {
+  if (!fileAutocompleteOpen.value) {
+    return
+  }
+
+  // UChatPrompt wires its own `keydown.enter.exact` handler on the textarea and
+  // emits `submit` immediately. Intercept exact Enter in capture phase so file
+  // palette selection never falls through to the component's submit path.
   event.preventDefault()
+  event.stopPropagation()
+  event.stopImmediatePropagation()
+
+  const match = highlightedFileAutocompleteResult.value
+  if (match) {
+    void selectFileAutocompleteResult(match)
+  }
 }
 
 const setComposerError = (messageText: string) => {
@@ -784,6 +877,15 @@ const openReviewDrawer = (commandText = '/review') => {
   reviewDrawerOpen.value = true
 }
 
+const clearSlashCommandDraft = () => {
+  // Successful slash commands consume the draft immediately. Leaving `/usage`
+  // or `/review` in the prompt after opening the modal/drawer makes the next
+  // edit start from stale command text and feels like the action did not finish.
+  input.value = ''
+  clearAttachments({ revoke: false })
+  dismissedSlashMatchKey.value = null
+}
+
 const moveSlashHighlight = (delta: number) => {
   if (!filteredSlashCommands.value.length) {
     slashHighlightIndex.value = 0
@@ -805,6 +907,39 @@ const moveSlashHighlight = (delta: number) => {
   slashHighlightIndex.value = nextIndex
 }
 
+const moveFileAutocompleteHighlight = (delta: number) => {
+  if (!visibleFileAutocompleteResults.value.length) {
+    fileAutocompleteHighlightIndex.value = 0
+    return
+  }
+
+  const maxIndex = visibleFileAutocompleteResults.value.length - 1
+  const nextIndex = fileAutocompleteHighlightIndex.value + delta
+  if (nextIndex < 0) {
+    fileAutocompleteHighlightIndex.value = maxIndex
+    return
+  }
+
+  if (nextIndex > maxIndex) {
+    fileAutocompleteHighlightIndex.value = 0
+    return
+  }
+
+  fileAutocompleteHighlightIndex.value = nextIndex
+}
+
+const resolveSlashCommandIcon = (command: SlashCommandDefinition) => {
+  if (command.name === 'review') {
+    return 'i-lucide-search-check'
+  }
+
+  if (command.name === 'usage' || command.name === 'status') {
+    return 'i-lucide-gauge'
+  }
+
+  return 'i-lucide-terminal'
+}
+
 const completeSlashCommand = async (command: SlashCommandDefinition) => {
   const match = activeSlashMatch.value
   if (!match) {
@@ -817,6 +952,40 @@ const completeSlashCommand = async (command: SlashCommandDefinition) => {
   await focusPromptAt(match.start + completion.length)
 }
 
+const resolveFileAutocompleteIcon = (match: Pick<NormalizedFuzzyFileSearchMatch, 'matchType'>) =>
+  match.matchType === 'directory' ? 'i-lucide-folder-open' : 'i-lucide-file-code-2'
+
+const renderFileAutocompletePathSegments = (
+  match: Pick<NormalizedFuzzyFileSearchMatch, 'path' | 'indices'>
+): FileAutocompletePathSegment[] =>
+  buildFileAutocompletePathSegments(match)
+
+const selectFileAutocompleteResult = async (match: NormalizedFuzzyFileSearchMatch) => {
+  const activeMatch = activeFileAutocompleteMatch.value
+  if (!activeMatch) {
+    return
+  }
+
+  dismissedFileAutocompleteMatchKey.value = null
+  fileAutocompleteError.value = null
+  const replacement = toFileAutocompleteHandle(match)
+  const nextDraft = replaceActiveFileAutocompleteMatch(input.value, activeMatch, replacement)
+  input.value = nextDraft.value
+  fileAutocompleteResults.value = []
+  await focusPromptAt(nextDraft.caret)
+}
+
+const syncFileAutocompleteScroll = async () => {
+  await nextTick()
+
+  const selected = fileAutocompleteListRef.value?.querySelector<HTMLElement>(
+    '[data-file-autocomplete-option][aria-selected="true"]'
+  )
+  selected?.scrollIntoView({
+    block: 'nearest'
+  })
+}
+
 const fetchProjectGitBranches = async () => {
   reviewBranchesLoading.value = true
   reviewBranchesError.value = null
@@ -928,16 +1097,36 @@ const handleSlashCommandSubmission = async (
     return true
   }
 
-  if (!slashCommand.isBare) {
-    setComposerError('`/review` currently only supports the bare command. Choose the diff target in the review drawer.')
-    return true
-  }
+  switch (command.name) {
+    case 'review': {
+      if (!slashCommand.isBare) {
+        setComposerError('`/review` currently only supports the bare command. Choose the diff target in the review drawer.')
+        return true
+      }
 
-  error.value = null
-  status.value = 'ready'
-  openReviewDrawer(`/${command.name}`)
-  await focusPromptAt(rawText.trim().length)
-  return true
+      error.value = null
+      status.value = 'ready'
+      clearSlashCommandDraft()
+      openReviewDrawer(rawText.trim())
+      await focusPromptAt(0)
+      return true
+    }
+    case 'usage':
+    case 'status': {
+      if (!slashCommand.isBare) {
+        setComposerError(`\`/${command.name}\` currently only supports the bare command.`)
+        return true
+      }
+
+      error.value = null
+      status.value = 'ready'
+      clearSlashCommandDraft()
+      usageStatusModalOpen.value = true
+      return true
+    }
+    default:
+      return false
+  }
 }
 
 const activateSlashCommand = async (
@@ -961,6 +1150,10 @@ const handleReviewDrawerOpenChange = (open: boolean) => {
   closeReviewDrawer()
 }
 
+const handleUsageStatusOpenChange = (open: boolean) => {
+  usageStatusModalOpen.value = open
+}
+
 const handleReviewDrawerBack = () => {
   reviewDrawerMode.value = 'target'
   reviewBranchesError.value = null
@@ -2213,6 +2406,19 @@ const applyNotification = (notification: CodexRpcNotification) => {
 }
 
 const sendMessage = async () => {
+  // Nuxt UI's UChatPrompt emits `submit` directly from its internal
+  // `keydown.enter.exact` handler, so guarding only in our keydown callback is
+  // not sufficient to stop Enter from racing into a send while the file palette
+  // is open. Keep the submit path itself aware of the palette state.
+  if (fileAutocompleteOpen.value) {
+    const match = highlightedFileAutocompleteResult.value
+    if (match) {
+      await selectFileAutocompleteResult(match)
+    }
+
+    return
+  }
+
   if (sendMessageLocked.value || hasPendingRequest.value) {
     return
   }
@@ -2392,6 +2598,47 @@ const respondToPendingRequest = (response: unknown) => {
 }
 
 const onPromptKeydown = (event: KeyboardEvent) => {
+  if (fileAutocompleteOpen.value) {
+    if (event.key === 'ArrowDown') {
+      if (visibleFileAutocompleteResults.value.length === 0) {
+        return
+      }
+
+      event.preventDefault()
+      moveFileAutocompleteHighlight(1)
+      return
+    }
+
+    if (event.key === 'ArrowUp') {
+      if (visibleFileAutocompleteResults.value.length === 0) {
+        return
+      }
+
+      event.preventDefault()
+      moveFileAutocompleteHighlight(-1)
+      return
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      dismissedFileAutocompleteMatchKey.value = activeFileAutocompleteMatchKey.value
+      isPromptFocused.value = true
+      void focusPromptAt(promptSelectionStart.value)
+      return
+    }
+
+    if (event.key === 'Tab') {
+      const match = highlightedFileAutocompleteResult.value
+      if (!match) {
+        return
+      }
+
+      event.preventDefault()
+      void selectFileAutocompleteResult(match)
+      return
+    }
+  }
+
   if (!slashDropdownOpen.value) {
     return
   }
@@ -2432,6 +2679,16 @@ const onPromptEnter = (event: KeyboardEvent) => {
     return
   }
 
+  if (fileAutocompleteOpen.value) {
+    event.preventDefault()
+    const match = highlightedFileAutocompleteResult.value
+    if (match) {
+      void selectFileAutocompleteResult(match)
+    }
+
+    return
+  }
+
   if (slashDropdownOpen.value) {
     const command = highlightedSlashCommand.value
     if (command) {
@@ -2527,6 +2784,29 @@ watch(filteredSlashCommands, (commands) => {
   }
 }, { flush: 'sync' })
 
+watch(visibleFileAutocompleteResults, (results) => {
+  if (!results.length) {
+    fileAutocompleteHighlightIndex.value = 0
+    return
+  }
+
+  if (fileAutocompleteHighlightIndex.value >= results.length) {
+    fileAutocompleteHighlightIndex.value = 0
+  }
+}, { flush: 'sync' })
+
+watch(
+  [fileAutocompleteOpen, fileAutocompleteHighlightIndex, visibleFileAutocompleteResults],
+  async ([open, highlightIndex, results]) => {
+    if (!open || !results.length || highlightIndex >= results.length) {
+      return
+    }
+
+    await syncFileAutocompleteScroll()
+  },
+  { flush: 'post' }
+)
+
 watch([selectedModel, availableModels], () => {
   const nextSelection = coercePromptSelection(effectiveModelList.value, selectedModel.value, selectedEffort.value)
   if (selectedModel.value !== nextSelection.model) {
@@ -2543,6 +2823,66 @@ watch(input, async () => {
   await nextTick()
   syncPromptSelectionFromDom()
 }, { flush: 'post' })
+
+watch(
+  [fileAutocompleteOpen, normalizedFileAutocompleteQuery, () => selectedProject.value?.projectPath ?? null],
+  async ([open, query, projectPath]) => {
+    const requestSequence = ++fileAutocompleteRequestSequence
+
+    if (!open) {
+      fileAutocompleteLoading.value = false
+      fileAutocompleteError.value = null
+      fileAutocompleteResults.value = []
+      return
+    }
+
+    if (!projectPath) {
+      fileAutocompleteLoading.value = false
+      fileAutocompleteError.value = null
+      fileAutocompleteResults.value = []
+      return
+    }
+
+    fileAutocompleteError.value = null
+    if (!query) {
+      fileAutocompleteLoading.value = false
+      fileAutocompleteResults.value = []
+      return
+    }
+
+    fileAutocompleteLoading.value = true
+    fileAutocompleteResults.value = []
+
+    try {
+      await ensureProjectRuntime()
+      const response = await getClient(props.projectId).request('fuzzyFileSearch', {
+        query,
+        roots: [projectPath],
+        cancellationToken: `chat-file-autocomplete:${props.projectId}`
+      })
+
+      if (requestSequence !== fileAutocompleteRequestSequence) {
+        return
+      }
+
+      fileAutocompleteResults.value = normalizeFuzzyFileSearchMatches(response)
+    } catch (caughtError) {
+      if (requestSequence !== fileAutocompleteRequestSequence) {
+        return
+      }
+
+      fileAutocompleteResults.value = []
+      fileAutocompleteError.value = caughtError instanceof Error
+        ? caughtError.message
+        : 'Failed to search project files.'
+    } finally {
+      if (requestSequence === fileAutocompleteRequestSequence) {
+        fileAutocompleteLoading.value = false
+      }
+    }
+  },
+  { flush: 'post' }
+)
 </script>
 
 <template>
@@ -2663,27 +3003,95 @@ watch(input, async () => {
             Drop images to attach them
           </div>
 
-          <UCommandPalette
+          <div
+            v-if="fileAutocompleteOpen"
+            ref="fileAutocompleteDropdownRef"
+            role="listbox"
+            aria-label="Project files"
+            class="absolute bottom-full left-0 z-20 mb-2 w-[90vw] max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg border border-default bg-default/95 shadow-2xl backdrop-blur md:w-[min(50vw,52rem)] md:max-w-[min(50vw,52rem)]"
+            @pointerdown="handleFileAutocompletePointerDown"
+          >
+            <div
+              ref="fileAutocompleteListRef"
+              class="max-h-72 overflow-y-auto p-2"
+            >
+              <div
+                v-if="fileAutocompleteEmptyState"
+                class="px-3 py-2 text-sm leading-6 text-muted"
+              >
+                {{ fileAutocompleteEmptyState }}
+              </div>
+              <div
+                v-for="(match, index) in visibleFileAutocompleteResults"
+                v-else
+                :key="`${match.matchType}:${match.path}`"
+                role="option"
+                :aria-selected="index === fileAutocompleteHighlightIndex"
+                data-file-autocomplete-option=""
+                class="group relative flex cursor-pointer items-center gap-1.5 px-3 py-2 text-sm text-highlighted outline-none transition-colors before:absolute before:inset-px before:z-[-1] before:rounded-md"
+                :class="index === fileAutocompleteHighlightIndex
+                  ? 'before:bg-elevated'
+                  : 'hover:before:bg-elevated/60'"
+                @click="void selectFileAutocompleteResult(match)"
+              >
+                <UIcon
+                  :name="resolveFileAutocompleteIcon(match)"
+                  class="size-4 shrink-0 text-dimmed group-aria-selected:text-highlighted"
+                />
+                <div class="min-w-0 truncate font-mono text-[13px] leading-6">
+                  <span
+                    v-for="(segment, segmentIndex) in renderFileAutocompletePathSegments(match)"
+                    :key="`${match.path}:${segmentIndex}:${segment.isMatch ? 'match' : 'plain'}`"
+                    class="truncate"
+                    :class="segment.isMatch ? 'font-semibold text-primary' : 'text-toned'"
+                  >
+                    {{ segment.text }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
             v-if="slashDropdownOpen"
             ref="slashDropdownRef"
-            class="absolute bottom-full left-0 z-20 mb-2 w-[90vw] max-w-[calc(100vw-2rem)] md:w-[min(50vw,52rem)] md:max-w-[min(50vw,52rem)]"
-            :groups="slashPaletteGroups"
-            :input="false"
-            :autofocus="false"
-            :search-term="activeSlashMatch?.query ?? ''"
-            :ui="{
-              root: 'min-h-0 overflow-hidden rounded-2xl border border-default bg-default/95 shadow-2xl backdrop-blur',
-              content: 'max-h-72 overflow-y-auto p-2',
-              group: 'space-y-1',
-              item: 'rounded-xl px-3 py-2.5',
-              itemLeadingIcon: 'size-4',
-              itemLabel: 'text-sm font-medium',
-              itemDescription: 'text-xs leading-5'
-            }"
-            @entry-focus="preventSlashPaletteEntryFocus"
-            @focusin.capture="handleSlashDropdownFocusIn"
-            @mousedown.prevent
-          />
+            role="listbox"
+            aria-label="Slash commands"
+            class="absolute bottom-full left-0 z-20 mb-2 w-[90vw] max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg border border-default bg-default/95 shadow-2xl backdrop-blur md:w-[min(50vw,52rem)] md:max-w-[min(50vw,52rem)]"
+            @pointerdown="handleSlashDropdownPointerDown"
+          >
+            <!-- Do not swap this back to a focus-managing listbox/palette. Slash
+                 suggestions are anchored to the textarea selection state; the
+                 popup must remain an inert overlay or the first `/` can move
+                 focus out of the composer and permanently collapse matching. -->
+            <div class="max-h-72 space-y-1 overflow-y-auto p-2">
+              <div
+                v-for="(command, index) in filteredSlashCommands"
+                :key="command.name"
+                role="option"
+                :aria-selected="index === slashHighlightIndex"
+                data-slash-command-option=""
+                class="group relative flex cursor-pointer items-start gap-1.5 px-3 py-2.5 text-sm text-highlighted outline-none transition-colors before:absolute before:inset-px before:z-[-1] before:rounded-md"
+                :class="index === slashHighlightIndex
+                  ? 'before:bg-elevated'
+                  : 'hover:before:bg-elevated/60'"
+                @click="void activateSlashCommand(command, command.supportsInlineArgs ? 'complete' : 'execute')"
+              >
+                <UIcon
+                  :name="resolveSlashCommandIcon(command)"
+                  class="mt-0.5 size-4 shrink-0 text-dimmed group-aria-selected:text-highlighted"
+                />
+                <div class="min-w-0">
+                  <div class="text-sm font-medium">
+                    /{{ command.name }}
+                  </div>
+                  <div class="text-xs leading-5 text-toned">
+                    {{ command.description }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
 
           <UChatPrompt
             ref="chatPromptRef"
@@ -2693,6 +3101,7 @@ watch(input, async () => {
             :disabled="isComposerDisabled"
             autoresize
             @submit.prevent="sendMessage"
+            @keydown.enter.exact.capture="onPromptEnterCapture"
             @keydown="onPromptKeydown"
             @keydown.enter="onPromptEnter"
             @input="syncPromptSelectionFromDom"
@@ -2918,6 +3327,8 @@ watch(input, async () => {
     @respond="respondToPendingRequest"
   />
 
+  <LocalFileViewerModal />
+
   <ReviewStartDrawer
     :open="reviewDrawerOpen"
     :mode="reviewDrawerMode"
@@ -2932,4 +3343,10 @@ watch(input, async () => {
     @choose-base-branch="(branch) => startReview({ type: 'baseBranch', branch })"
     @back="handleReviewDrawerBack"
   />
+
+  <UsageStatusModal
+    :project-id="props.projectId"
+    :open="usageStatusModalOpen"
+    @update:open="handleUsageStatusOpenChange"
+  />
 </template>