@codori/client 0.0.7 → 0.0.9

package/app/components/ChatWorkspace.vue

@@ -1,25 +1,43 @@
 <script setup lang="ts">
-import { useRouter } from '#imports'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useRouter, useRuntimeConfig } from '#imports'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  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,
   removePendingUserMessageId,
   resolvePromptSubmitStatus,
   resolveTurnSubmissionMethod,
+  shouldAdvanceLiveStreamTurn,
   shouldApplyNotificationToCurrentTurn,
   shouldSubmitViaTurnSteer,
   shouldAwaitThreadHydration,
   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'
 import { useProjects } from '../composables/useProjects'
 import { useRpc } from '../composables/useRpc'
 import { useChatSubmitGuard } from '../composables/useChatSubmitGuard'
-import { resolveThreadSummaryTitle, useThreadSummaries } from '../composables/useThreadSummaries'
+import {
+  normalizeThreadTitleCandidate,
+  resolveThreadSummaryTitle,
+  useThreadSummaries
+} from '../composables/useThreadSummaries'
 import { resolveChatMessagesStatus, shouldAwaitAssistantOutput } from '../utils/chat-messages-status'
 import {
   ITEM_PART,
@@ -46,6 +64,9 @@ import {
   type CodexRpcNotification,
   type CodexThread,
   type CodexThreadItem,
+  type ReviewStartParams,
+  type ReviewStartResponse,
+  type ReviewTarget,
   type ThreadReadResponse,
   type ThreadResumeResponse,
   type ThreadStartResponse,
@@ -67,7 +88,29 @@ import {
   visibleModelOptions,
   type ReasoningEffort
 } from '~~/shared/chat-prompt-controls'
-import { toProjectThreadRoute } from '~~/shared/codori'
+import {
+  resolveProjectGitBranchesUrl,
+  toProjectThreadRoute,
+  type ProjectGitBranchesResponse
+} from '~~/shared/codori'
+import {
+  filterSlashCommands,
+  findActiveSlashCommand,
+  parseSubmittedSlashCommand,
+  SLASH_COMMANDS,
+  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
@@ -75,6 +118,7 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
+const runtimeConfig = useRuntimeConfig()
 const { getClient } = useRpc()
 const {
   loaded,
@@ -106,8 +150,13 @@ const {
   onDrop,
   uploadAttachments
 } = useChatAttachments(props.projectId)
-
 const input = ref('')
+const chatPromptRef = ref<{
+  textareaRef?: unknown
+} | 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)
@@ -130,6 +179,13 @@ const {
   modelContextWindow,
   tokenUsage
 } = session
+const {
+  pendingRequest,
+  hasPendingRequest,
+  handleServerRequest,
+  resolveCurrentRequest,
+  cancelAllPendingRequests
+} = usePendingUserRequest(props.projectId, activeThreadId)
 
 const selectedProject = computed(() => getProject(props.projectId))
 const composerError = computed(() => attachmentError.value ?? error.value)
@@ -137,10 +193,30 @@ const submitError = computed(() => composerError.value ? new Error(composerError
 const interruptRequested = ref(false)
 const awaitingAssistantOutput = ref(false)
 const sendMessageLocked = ref(false)
+const reviewStartPending = ref(false)
+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)
+const reviewBranchesError = ref<string | null>(null)
 const isBusy = computed(() =>
   status.value === 'submitted'
   || status.value === 'streaming'
   || isUploading.value
+  || reviewStartPending.value
 )
 const hasDraftContent = computed(() =>
   input.value.trim().length > 0
@@ -149,6 +225,13 @@ const hasDraftContent = computed(() =>
 const isComposerDisabled = computed(() =>
   isUploading.value
   || interruptRequested.value
+  || hasPendingRequest.value
+  || reviewStartPending.value
+)
+const composerPlaceholder = computed(() =>
+  hasPendingRequest.value
+    ? 'Respond to the pending request below to let Codex continue'
+    : 'Describe the change you want Codex to make'
 )
 const promptSubmitStatus = computed(() =>
   resolvePromptSubmitStatus({
@@ -168,6 +251,86 @@ const showWelcomeState = computed(() =>
   && !isBusy.value
 )
 
+const slashCommands = computed(() =>
+  SLASH_COMMANDS.filter(() => !hasPendingRequest.value)
+)
+
+const activeSlashMatch = computed(() =>
+  isPromptFocused.value
+    ? findActiveSlashCommand(input.value, promptSelectionStart.value, promptSelectionEnd.value)
+    : null
+)
+
+const activeSlashMatchKey = computed(() => {
+  const match = activeSlashMatch.value
+  if (!match) {
+    return null
+  }
+
+  return `${match.start}:${match.end}:${match.raw}`
+})
+
+const filteredSlashCommands = computed(() =>
+  activeSlashMatch.value
+    ? filterSlashCommands(slashCommands.value, activeSlashMatch.value.query)
+    : []
+)
+
+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
+)
+
+const highlightedSlashCommand = computed(() =>
+  filteredSlashCommands.value[slashHighlightIndex.value] ?? filteredSlashCommands.value[0] ?? null
+)
+
+const reviewBaseBranches = computed(() =>
+  reviewBranches.value.filter(branch => branch !== reviewCurrentBranch.value)
+)
+
 const starterPrompts = computed(() => {
   const project = projectTitle.value
 
@@ -223,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
@@ -316,6 +507,8 @@ const subagentBootstrapPromises = new Map<string, Promise<void>>()
 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) {
@@ -354,6 +547,7 @@ const createLiveStreamState = (
 ): LiveStream => ({
   threadId,
   turnId: null,
+  lockedTurnId: null,
   bufferedNotifications,
   observedSubagentThreadIds: new Set<string>(),
   pendingUserMessageIds: [],
@@ -380,6 +574,7 @@ const setLiveStreamTurnId = (liveStream: LiveStream, turnId: string | null) => {
   liveStream.turnId = turnId
 
   if (!turnId) {
+    liveStream.lockedTurnId = null
     return
   }
 
@@ -390,6 +585,11 @@ const setLiveStreamTurnId = (liveStream: LiveStream, turnId: string | null) => {
   }
 }
 
+const lockLiveStreamTurnId = (liveStream: LiveStream, turnId: string | null) => {
+  liveStream.lockedTurnId = turnId
+  setLiveStreamTurnId(liveStream, turnId)
+}
+
 const waitForLiveStreamTurnId = async (liveStream: LiveStream) => {
   if (liveStream.turnId) {
     return liveStream.turnId
@@ -409,9 +609,10 @@ const queuePendingUserMessage = (liveStream: LiveStream, messageId: string) => {
 }
 
 const replayBufferedNotifications = (liveStream: LiveStream) => {
+  const trackedTurnId = liveStream.lockedTurnId ?? liveStream.turnId
   for (const notification of liveStream.bufferedNotifications.splice(0, liveStream.bufferedNotifications.length)) {
     const turnId = notificationTurnId(notification)
-    if (turnId && turnId !== liveStream.turnId) {
+    if (turnId && trackedTurnId && turnId !== trackedTurnId) {
       continue
     }
 
@@ -471,6 +672,7 @@ const ensurePendingLiveStream = async () => {
       const turnId = notificationTurnId(notification)
       if (!shouldApplyNotificationToCurrentTurn({
         liveStreamTurnId: liveStream.turnId,
+        lockedTurnId: liveStream.lockedTurnId,
         notificationMethod: notification.method,
         notificationTurnId: turnId
       })) {
@@ -548,6 +750,415 @@ const formatAttachmentSize = (size: number) => {
   return `${size} B`
 }
 
+const isTextareaElement = (value: unknown): value is HTMLTextAreaElement =>
+  typeof HTMLTextAreaElement !== 'undefined'
+  && value instanceof HTMLTextAreaElement
+
+const getPromptTextarea = () => {
+  const exposed = chatPromptRef.value?.textareaRef
+  if (isTextareaElement(exposed)) {
+    return exposed
+  }
+
+  if (
+    typeof exposed === 'object'
+    && exposed !== null
+    && 'value' in exposed
+    && isTextareaElement(exposed.value)
+  ) {
+    return exposed.value
+  }
+
+  return null
+}
+
+const syncPromptSelectionFromDom = () => {
+  const textarea = getPromptTextarea()
+  promptSelectionStart.value = textarea?.selectionStart ?? input.value.length
+  promptSelectionEnd.value = textarea?.selectionEnd ?? input.value.length
+
+  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) => {
+  await nextTick()
+  const textarea = getPromptTextarea()
+  if (!textarea) {
+    return
+  }
+
+  const nextPosition = position ?? textarea.value.length
+  textarea.focus()
+  textarea.setSelectionRange(nextPosition, nextPosition)
+  promptSelectionStart.value = nextPosition
+  promptSelectionEnd.value = nextPosition
+  isPromptFocused.value = true
+}
+
+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)) {
+    void focusPromptAt(promptSelectionStart.value)
+    return
+  }
+
+  isPromptFocused.value = false
+}
+
+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 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) => {
+  markAwaitingAssistantOutput(false)
+  error.value = messageText
+  status.value = 'error'
+}
+
+const resetReviewDrawerState = () => {
+  reviewDrawerMode.value = 'target'
+  reviewDrawerCommandText.value = '/review'
+  reviewBranchesLoading.value = false
+  reviewBranchesError.value = null
+}
+
+const closeReviewDrawer = () => {
+  reviewDrawerOpen.value = false
+  resetReviewDrawerState()
+}
+
+const openReviewDrawer = (commandText = '/review') => {
+  dismissedSlashMatchKey.value = null
+  reviewDrawerCommandText.value = commandText
+  reviewDrawerMode.value = 'target'
+  reviewBranchesError.value = null
+  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
+    return
+  }
+
+  const maxIndex = filteredSlashCommands.value.length - 1
+  const nextIndex = slashHighlightIndex.value + delta
+  if (nextIndex < 0) {
+    slashHighlightIndex.value = maxIndex
+    return
+  }
+
+  if (nextIndex > maxIndex) {
+    slashHighlightIndex.value = 0
+    return
+  }
+
+  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) {
+    return
+  }
+
+  dismissedSlashMatchKey.value = null
+  const completion = toSlashCommandCompletion(command)
+  input.value = `${input.value.slice(0, match.start)}${completion}${input.value.slice(match.end)}`
+  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
+
+  try {
+    const response = await fetch(resolveProjectGitBranchesUrl({
+      projectId: props.projectId,
+      configuredBase: String(runtimeConfig.public.serverBase ?? '')
+    }))
+
+    const body = await response.json() as ProjectGitBranchesResponse | { error?: { message?: string } }
+    if (!response.ok) {
+      throw new Error(body && typeof body === 'object' && 'error' in body
+        ? body.error?.message ?? 'Failed to load local branches.'
+        : 'Failed to load local branches.')
+    }
+
+    const result = body as ProjectGitBranchesResponse
+    reviewCurrentBranch.value = result.currentBranch
+    reviewBranches.value = result.branches
+  } finally {
+    reviewBranchesLoading.value = false
+  }
+}
+
+const openBaseBranchPicker = async () => {
+  reviewDrawerMode.value = 'branch'
+
+  try {
+    await fetchProjectGitBranches()
+    if (!reviewBaseBranches.value.length) {
+      reviewBranchesError.value = 'No local base branches are available to compare against.'
+    }
+  } catch (caughtError) {
+    reviewBranchesError.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
+  }
+}
+
+const startReview = async (target: ReviewTarget) => {
+  if (reviewStartPending.value) {
+    return
+  }
+
+  if (hasPendingRequest.value || isBusy.value) {
+    setComposerError('Review can only start when the current thread is idle.')
+    return
+  }
+
+  reviewStartPending.value = true
+  const draftText = reviewDrawerCommandText.value
+  const submittedAttachments = attachments.value.slice()
+  input.value = ''
+  clearAttachments({ revoke: false })
+
+  try {
+    const client = getClient(props.projectId)
+    const liveStream = await ensurePendingLiveStream()
+    error.value = null
+    status.value = 'submitted'
+    tokenUsage.value = null
+    markAwaitingAssistantOutput(true)
+
+    const response = await client.request<ReviewStartResponse>('review/start', {
+      threadId: liveStream.threadId,
+      delivery: 'inline',
+      target
+    } satisfies ReviewStartParams)
+
+    for (const item of response.turn.items) {
+      if (item.type === 'userMessage') {
+        continue
+      }
+
+      for (const nextMessage of itemToMessages(item)) {
+        messages.value = upsertStreamingMessage(messages.value, {
+          ...nextMessage,
+          pending: false
+        })
+      }
+    }
+
+    lockLiveStreamTurnId(liveStream, response.turn.id)
+    replayBufferedNotifications(liveStream)
+    closeReviewDrawer()
+  } catch (caughtError) {
+    restoreDraftIfPristine(draftText, submittedAttachments)
+    setComposerError(caughtError instanceof Error ? caughtError.message : String(caughtError))
+  } finally {
+    reviewStartPending.value = false
+  }
+}
+
+const handleSlashCommandSubmission = async (
+  rawText: string,
+  submittedAttachments: DraftAttachment[]
+) => {
+  const slashCommand = parseSubmittedSlashCommand(rawText)
+  if (!slashCommand) {
+    return false
+  }
+
+  const command = slashCommands.value.find(candidate => candidate.name === slashCommand.name)
+  if (!command) {
+    return false
+  }
+
+  if (submittedAttachments.length > 0) {
+    setComposerError('Slash commands do not support image attachments yet.')
+    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'
+      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 (
+  command: SlashCommandDefinition,
+  mode: 'complete' | 'execute'
+) => {
+  if (mode === 'complete') {
+    await completeSlashCommand(command)
+    return
+  }
+
+  await handleSlashCommandSubmission(`/${command.name}`, attachments.value.slice())
+}
+
+const handleReviewDrawerOpenChange = (open: boolean) => {
+  if (open) {
+    reviewDrawerOpen.value = true
+    return
+  }
+
+  closeReviewDrawer()
+}
+
+const handleUsageStatusOpenChange = (open: boolean) => {
+  usageStatusModalOpen.value = open
+}
+
+const handleReviewDrawerBack = () => {
+  reviewDrawerMode.value = 'target'
+  reviewBranchesError.value = null
+}
+
 const removeOptimisticMessage = (messageId: string) => {
   messages.value = removeChatMessage(messages.value, messageId)
   optimisticAttachmentSnapshots.delete(messageId)
@@ -814,6 +1425,7 @@ const hydrateThread = async (threadId: string) => {
           const turnId = notificationTurnId(notification)
           if (!shouldApplyNotificationToCurrentTurn({
             liveStreamTurnId: nextLiveStream.turnId,
+            lockedTurnId: nextLiveStream.lockedTurnId,
             notificationMethod: notification.method,
             notificationTurnId: turnId
           })) {
@@ -1521,7 +2133,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
       if (!nextThreadId || !nextThreadName) {
         return
       }
-      const nextTitle = nextThreadName.trim()
+      const nextTitle = normalizeThreadTitleCandidate(nextThreadName)
       if (!nextTitle) {
         return
       }
@@ -1534,13 +2146,21 @@ const applyNotification = (notification: CodexRpcNotification) => {
       return
     }
     case 'turn/started': {
+      const nextTurnId = notificationTurnId(notification)
+      if (liveStream && !shouldAdvanceLiveStreamTurn({
+        lockedTurnId: liveStream.lockedTurnId,
+        nextTurnId
+      })) {
+        return
+      }
+
       if (liveStream) {
-        setLiveStreamTurnId(liveStream, notificationTurnId(notification))
+        setLiveStreamTurnId(liveStream, nextTurnId)
         setLiveStreamInterruptRequested(liveStream, false)
       }
       messages.value = upsertStreamingMessage(
         messages.value,
-        eventToMessage(`event-turn-started-${notificationTurnId(notification) ?? Date.now()}`, {
+        eventToMessage(`event-turn-started-${nextTurnId ?? Date.now()}`, {
           kind: 'turn.started'
         })
       )
@@ -1733,6 +2353,9 @@ const applyNotification = (notification: CodexRpcNotification) => {
       markAwaitingAssistantOutput(false)
       pushEventMessage('stream.error', messageText)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
+      if (liveStream) {
+        liveStream.lockedTurnId = null
+      }
       clearLiveStream(new Error(messageText))
       error.value = messageText
       status.value = 'error'
@@ -1744,6 +2367,9 @@ const applyNotification = (notification: CodexRpcNotification) => {
       markAwaitingAssistantOutput(false)
       pushEventMessage('turn.failed', messageText)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
+      if (liveStream) {
+        liveStream.lockedTurnId = null
+      }
       clearLiveStream(new Error(messageText))
       error.value = messageText
       status.value = 'error'
@@ -1755,6 +2381,9 @@ const applyNotification = (notification: CodexRpcNotification) => {
       markAwaitingAssistantOutput(false)
       pushEventMessage('stream.error', messageText)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
+      if (liveStream) {
+        liveStream.lockedTurnId = null
+      }
       clearLiveStream(new Error(messageText))
       error.value = messageText
       status.value = 'error'
@@ -1763,6 +2392,9 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'turn/completed': {
       markAwaitingAssistantOutput(false)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
+      if (liveStream) {
+        liveStream.lockedTurnId = null
+      }
       error.value = null
       status.value = 'ready'
       clearLiveStream()
@@ -1774,12 +2406,26 @@ const applyNotification = (notification: CodexRpcNotification) => {
 }
 
 const sendMessage = async () => {
-  if (sendMessageLocked.value) {
+  // 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
   }
 
   sendMessageLocked.value = true
-  const text = input.value.trim()
+  const rawText = input.value
+  const text = rawText.trim()
   const submittedAttachments = attachments.value.slice()
 
   if (!text && submittedAttachments.length === 0) {
@@ -1787,6 +2433,11 @@ const sendMessage = async () => {
     return
   }
 
+  if (await handleSlashCommandSubmission(rawText, submittedAttachments)) {
+    sendMessageLocked.value = false
+    return
+  }
+
   input.value = ''
   clearAttachments({ revoke: false })
 
@@ -1933,7 +2584,7 @@ const stopActiveTurn = async () => {
 }
 
 const sendStarterPrompt = async (text: string) => {
-  if (isBusy.value) {
+  if (isBusy.value || hasPendingRequest.value) {
     return
   }
 
@@ -1941,16 +2592,122 @@ const sendStarterPrompt = async (text: string) => {
   await sendMessage()
 }
 
+const respondToPendingRequest = (response: unknown) => {
+  error.value = null
+  resolveCurrentRequest(response)
+}
+
+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
+  }
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    moveSlashHighlight(1)
+    return
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    moveSlashHighlight(-1)
+    return
+  }
+
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    dismissedSlashMatchKey.value = activeSlashMatchKey.value
+    isPromptFocused.value = true
+    void focusPromptAt(promptSelectionStart.value)
+    return
+  }
+
+  if (event.key === 'Tab' || event.key === ' ') {
+    const command = highlightedSlashCommand.value
+    if (!command || (event.key === ' ' && !command.completeOnSpace)) {
+      return
+    }
+
+    event.preventDefault()
+    void activateSlashCommand(command, 'complete')
+  }
+}
+
 const onPromptEnter = (event: KeyboardEvent) => {
   if (!shouldSubmit(event)) {
     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) {
+      event.preventDefault()
+      const isExactMatch = activeSlashMatch.value?.query === command.name
+      const action = isExactMatch && command.executeOnEnter && !command.supportsInlineArgs
+        ? 'execute'
+        : 'complete'
+      void activateSlashCommand(command, action)
+      return
+    }
+  }
+
   event.preventDefault()
   void sendMessage()
 }
 
 onMounted(() => {
+  releaseServerRequestHandler = getClient(props.projectId).setServerRequestHandler(handleServerRequest)
   if (!loaded.value) {
     void refreshProjects()
   }
@@ -1959,6 +2716,12 @@ onMounted(() => {
   void scheduleScrollToBottom('auto')
 })
 
+onBeforeUnmount(() => {
+  cancelAllPendingRequests()
+  releaseServerRequestHandler?.()
+  releaseServerRequestHandler = null
+})
+
 watch(() => props.threadId ?? null, (threadId) => {
   if (!threadId) {
     if (isBusy.value || pendingThreadId.value) {
@@ -2010,6 +2773,40 @@ watch(status, (nextStatus, previousStatus) => {
   void scheduleScrollToBottom(nextStatus === 'streaming' ? 'auto' : 'smooth')
 }, { flush: 'post' })
 
+watch(filteredSlashCommands, (commands) => {
+  if (!commands.length) {
+    slashHighlightIndex.value = 0
+    return
+  }
+
+  if (slashHighlightIndex.value >= commands.length) {
+    slashHighlightIndex.value = 0
+  }
+}, { 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) {
@@ -2021,6 +2818,71 @@ watch([selectedModel, availableModels], () => {
     selectedEffort.value = nextSelection.effort
   }
 }, { flush: 'sync' })
+
+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>
@@ -2120,6 +2982,13 @@ watch([selectedModel, availableModels], () => {
           class="mb-3"
         />
 
+        <div
+          v-if="pendingRequest"
+          class="mb-3 rounded-2xl border border-primary/30 bg-primary/8 px-4 py-3 text-sm text-default"
+        >
+          Codex is waiting for the response in the drawer below. Normal chat sending is paused until you answer it.
+        </div>
+
         <div
           class="relative"
           @dragenter="onDragEnter"
@@ -2134,14 +3003,113 @@ watch([selectedModel, availableModels], () => {
             Drop images to attach them
           </div>
 
+          <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"
+            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"
             v-model="input"
-            placeholder="Describe the change you want Codex to make"
+            :placeholder="composerPlaceholder"
             :error="submitError"
             :disabled="isComposerDisabled"
             autoresize
             @submit.prevent="sendMessage"
+            @keydown.enter.exact.capture="onPromptEnterCapture"
+            @keydown="onPromptKeydown"
             @keydown.enter="onPromptEnter"
+            @input="syncPromptSelectionFromDom"
+            @click="syncPromptSelectionFromDom"
+            @keyup="syncPromptSelectionFromDom"
+            @focus="isPromptFocused = true; syncPromptSelectionFromDom()"
+            @blur="handlePromptBlur"
+            @select="syncPromptSelectionFromDom"
             @compositionstart="onCompositionStart"
             @compositionend="onCompositionEnd"
             @paste="onPaste"
@@ -2353,4 +3321,32 @@ watch([selectedModel, availableModels], () => {
       </div>
     </div>
   </section>
+
+  <PendingUserRequestDrawer
+    :request="pendingRequest"
+    @respond="respondToPendingRequest"
+  />
+
+  <LocalFileViewerModal />
+
+  <ReviewStartDrawer
+    :open="reviewDrawerOpen"
+    :mode="reviewDrawerMode"
+    :branches="reviewBaseBranches"
+    :current-branch="reviewCurrentBranch"
+    :loading="reviewBranchesLoading"
+    :submitting="reviewStartPending"
+    :error="reviewBranchesError"
+    @update:open="handleReviewDrawerOpenChange"
+    @choose-current-changes="startReview({ type: 'uncommittedChanges' })"
+    @choose-base-branch-mode="openBaseBranchPicker"
+    @choose-base-branch="(branch) => startReview({ type: 'baseBranch', branch })"
+    @back="handleReviewDrawerBack"
+  />
+
+  <UsageStatusModal
+    :project-id="props.projectId"
+    :open="usageStatusModalOpen"
+    @update:open="handleUsageStatusOpenChange"
+  />
 </template>