@codori/client 0.0.6 → 0.0.8

package/app/components/ChatWorkspace.vue

@@ -1,24 +1,41 @@
 <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,
+  type ComponentPublicInstance
+} from 'vue'
 import MessageContent from './MessageContent.vue'
+import ReviewStartDrawer from './ReviewStartDrawer.vue'
+import PendingUserRequestDrawer from './PendingUserRequestDrawer.vue'
 import {
   reconcileOptimisticUserMessage,
   removeChatMessage,
   removePendingUserMessageId,
   resolvePromptSubmitStatus,
   resolveTurnSubmissionMethod,
+  shouldAdvanceLiveStreamTurn,
+  shouldApplyNotificationToCurrentTurn,
   shouldSubmitViaTurnSteer,
   shouldAwaitThreadHydration,
   shouldRetrySteerWithTurnStart,
   shouldIgnoreNotificationAfterInterrupt
 } from '../utils/chat-turn-engagement'
 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,
@@ -45,6 +62,9 @@ import {
   type CodexRpcNotification,
   type CodexThread,
   type CodexThreadItem,
+  type ReviewStartParams,
+  type ReviewStartResponse,
+  type ReviewTarget,
   type ThreadReadResponse,
   type ThreadResumeResponse,
   type ThreadStartResponse,
@@ -66,7 +86,19 @@ 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'
 
 const props = defineProps<{
   projectId: string
@@ -74,6 +106,7 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
+const runtimeConfig = useRuntimeConfig()
 const { getClient } = useRpc()
 const {
   loaded,
@@ -105,8 +138,11 @@ const {
   onDrop,
   uploadAttachments
 } = useChatAttachments(props.projectId)
-
 const input = ref('')
+const chatPromptRef = ref<{
+  textareaRef?: unknown
+} | null>(null)
+const slashDropdownRef = ref<ComponentPublicInstance | HTMLElement | null>(null)
 const scrollViewport = ref<HTMLElement | null>(null)
 const pinnedToBottom = ref(true)
 const session = useChatSession(props.projectId)
@@ -129,16 +165,38 @@ 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)
 const submitError = computed(() => composerError.value ? new Error(composerError.value) : undefined)
 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 slashHighlightIndex = ref(0)
+const reviewDrawerOpen = ref(false)
+const reviewDrawerMode = ref<'target' | 'branch'>('target')
+const reviewDrawerCommandText = ref('/review')
+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
@@ -147,6 +205,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({
@@ -166,6 +231,60 @@ 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 slashDropdownOpen = computed(() =>
+  !reviewDrawerOpen.value
+  && Boolean(activeSlashMatch.value)
+  && activeSlashMatchKey.value !== dismissedSlashMatchKey.value
+  && filteredSlashCommands.value.length > 0
+)
+
+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)
+)
+
 const starterPrompts = computed(() => {
   const project = projectTitle.value
 
@@ -314,6 +433,7 @@ 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
 
 const isActiveTurnStatus = (value: string | null | undefined) => {
   if (!value) {
@@ -352,6 +472,7 @@ const createLiveStreamState = (
 ): LiveStream => ({
   threadId,
   turnId: null,
+  lockedTurnId: null,
   bufferedNotifications,
   observedSubagentThreadIds: new Set<string>(),
   pendingUserMessageIds: [],
@@ -378,6 +499,7 @@ const setLiveStreamTurnId = (liveStream: LiveStream, turnId: string | null) => {
   liveStream.turnId = turnId
 
   if (!turnId) {
+    liveStream.lockedTurnId = null
     return
   }
 
@@ -388,6 +510,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
@@ -407,9 +534,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
     }
 
@@ -467,7 +595,12 @@ const ensurePendingLiveStream = async () => {
       }
 
       const turnId = notificationTurnId(notification)
-      if (turnId && turnId !== liveStream.turnId) {
+      if (!shouldApplyNotificationToCurrentTurn({
+        liveStreamTurnId: liveStream.turnId,
+        lockedTurnId: liveStream.lockedTurnId,
+        notificationMethod: notification.method,
+        notificationTurnId: turnId
+      })) {
         return
       }
 
@@ -542,6 +675,297 @@ 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
+  }
+}
+
+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 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 handlePromptBlur = (event: FocusEvent) => {
+  if (shouldRetainPromptFocus(event.relatedTarget)) {
+    isPromptFocused.value = true
+    void focusPromptAt(promptSelectionStart.value)
+    return
+  }
+
+  isPromptFocused.value = false
+}
+
+const handleSlashDropdownFocusIn = () => {
+  if (!slashDropdownOpen.value) {
+    return
+  }
+
+  void focusPromptAt(promptSelectionStart.value)
+}
+
+const preventSlashPaletteEntryFocus = (event: CustomEvent) => {
+  event.preventDefault()
+}
+
+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 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 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 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
+  }
+
+  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
+}
+
+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 handleReviewDrawerBack = () => {
+  reviewDrawerMode.value = 'target'
+  reviewBranchesError.value = null
+}
+
 const removeOptimisticMessage = (messageId: string) => {
   messages.value = removeChatMessage(messages.value, messageId)
   optimisticAttachmentSnapshots.delete(messageId)
@@ -806,7 +1230,12 @@ const hydrateThread = async (threadId: string) => {
           }
 
           const turnId = notificationTurnId(notification)
-          if (turnId && turnId !== nextLiveStream.turnId) {
+          if (!shouldApplyNotificationToCurrentTurn({
+            liveStreamTurnId: nextLiveStream.turnId,
+            lockedTurnId: nextLiveStream.lockedTurnId,
+            notificationMethod: notification.method,
+            notificationTurnId: turnId
+          })) {
             return
           }
 
@@ -1511,7 +1940,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
       if (!nextThreadId || !nextThreadName) {
         return
       }
-      const nextTitle = nextThreadName.trim()
+      const nextTitle = normalizeThreadTitleCandidate(nextThreadName)
       if (!nextTitle) {
         return
       }
@@ -1524,13 +1953,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'
         })
       )
@@ -1723,6 +2160,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'
@@ -1734,6 +2174,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'
@@ -1745,6 +2188,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'
@@ -1753,6 +2199,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()
@@ -1764,118 +2213,137 @@ const applyNotification = (notification: CodexRpcNotification) => {
 }
 
 const sendMessage = async () => {
-  const text = input.value.trim()
+  if (sendMessageLocked.value || hasPendingRequest.value) {
+    return
+  }
+
+  sendMessageLocked.value = true
+  const rawText = input.value
+  const text = rawText.trim()
   const submittedAttachments = attachments.value.slice()
 
   if (!text && submittedAttachments.length === 0) {
+    sendMessageLocked.value = false
     return
   }
 
+  if (await handleSlashCommandSubmission(rawText, submittedAttachments)) {
+    sendMessageLocked.value = false
+    return
+  }
+
+  input.value = ''
+  clearAttachments({ revoke: false })
+
   try {
     await loadPromptControls()
   } catch (caughtError) {
+    restoreDraftIfPristine(text, submittedAttachments)
     error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
     status.value = 'error'
+    sendMessageLocked.value = false
     return
   }
 
-  if (pendingThreadHydration && shouldAwaitThreadHydration({
-    hasPendingThreadHydration: true,
-    routeThreadId: routeThreadId.value
-  })) {
-    await pendingThreadHydration
-  }
+  try {
+    if (pendingThreadHydration && shouldAwaitThreadHydration({
+      hasPendingThreadHydration: true,
+      routeThreadId: routeThreadId.value
+    })) {
+      await pendingThreadHydration
+    }
 
-  pinnedToBottom.value = true
-  error.value = null
-  attachmentError.value = null
-  const submissionMethod = resolveTurnSubmissionMethod(shouldSubmitWithTurnSteer())
-  if (submissionMethod === 'turn/start') {
-    status.value = 'submitted'
-  }
-  input.value = ''
-  clearAttachments({ revoke: false })
-  const optimisticMessage = buildOptimisticMessage(text, submittedAttachments)
-  const optimisticMessageId = optimisticMessage.id
-  rememberOptimisticAttachments(optimisticMessageId, submittedAttachments)
-  messages.value = [...messages.value, optimisticMessage]
-  markAwaitingAssistantOutput(shouldAwaitAssistantOutput(submissionMethod))
-  let startedLiveStream: LiveStream | null = null
-  let executedSubmissionMethod = submissionMethod
+    pinnedToBottom.value = true
+    error.value = null
+    attachmentError.value = null
+    const submissionMethod = resolveTurnSubmissionMethod(shouldSubmitWithTurnSteer())
+    if (submissionMethod === 'turn/start') {
+      status.value = 'submitted'
+    }
+    const optimisticMessage = buildOptimisticMessage(text, submittedAttachments)
+    const optimisticMessageId = optimisticMessage.id
+    rememberOptimisticAttachments(optimisticMessageId, submittedAttachments)
+    messages.value = [...messages.value, optimisticMessage]
+    markAwaitingAssistantOutput(shouldAwaitAssistantOutput(submissionMethod))
+    let startedLiveStream: LiveStream | null = null
+    let executedSubmissionMethod = submissionMethod
 
-  try {
-    const client = getClient(props.projectId)
+    try {
+      const client = getClient(props.projectId)
 
-    if (submissionMethod === 'turn/steer') {
-      const liveStream = await ensurePendingLiveStream()
-      queuePendingUserMessage(liveStream, optimisticMessageId)
-      let uploadedAttachments: PersistedProjectAttachment[] | undefined
-
-      try {
-        uploadedAttachments = await uploadAttachments(liveStream.threadId, submittedAttachments)
-        const turnId = await waitForLiveStreamTurnId(liveStream)
-
-        await client.request<TurnStartResponse>('turn/steer', {
-          threadId: liveStream.threadId,
-          expectedTurnId: turnId,
-          input: buildTurnStartInput(text, uploadedAttachments),
-          ...buildTurnOverrides(selectedModel.value, selectedEffort.value)
-        })
-        tokenUsage.value = null
-      } catch (caughtError) {
-        const errorToHandle = caughtError instanceof Error ? caughtError : new Error(String(caughtError))
-        if (!shouldRetrySteerWithTurnStart(errorToHandle.message)) {
-          throw errorToHandle
-        }
+      if (submissionMethod === 'turn/steer') {
+        const liveStream = await ensurePendingLiveStream()
+        queuePendingUserMessage(liveStream, optimisticMessageId)
+        let uploadedAttachments: PersistedProjectAttachment[] | undefined
 
-        executedSubmissionMethod = 'turn/start'
-        startedLiveStream = liveStream
-        status.value = 'submitted'
-        setLiveStreamTurnId(liveStream, null)
-        setLiveStreamInterruptRequested(liveStream, false)
+        try {
+          uploadedAttachments = await uploadAttachments(liveStream.threadId, submittedAttachments)
+          const turnId = await waitForLiveStreamTurnId(liveStream)
 
-        await submitTurnStart({
-          client,
-          liveStream,
-          text,
-          submittedAttachments,
-          uploadedAttachments,
-          optimisticMessageId,
-          queueOptimisticMessage: false
-        })
+          await client.request<TurnStartResponse>('turn/steer', {
+            threadId: liveStream.threadId,
+            expectedTurnId: turnId,
+            input: buildTurnStartInput(text, uploadedAttachments),
+            ...buildTurnOverrides(selectedModel.value, selectedEffort.value)
+          })
+          tokenUsage.value = null
+        } catch (caughtError) {
+          const errorToHandle = caughtError instanceof Error ? caughtError : new Error(String(caughtError))
+          if (!shouldRetrySteerWithTurnStart(errorToHandle.message)) {
+            throw errorToHandle
+          }
+
+          executedSubmissionMethod = 'turn/start'
+          startedLiveStream = liveStream
+          status.value = 'submitted'
+          setLiveStreamTurnId(liveStream, null)
+          setLiveStreamInterruptRequested(liveStream, false)
+
+          await submitTurnStart({
+            client,
+            liveStream,
+            text,
+            submittedAttachments,
+            uploadedAttachments,
+            optimisticMessageId,
+            queueOptimisticMessage: false
+          })
+        }
+        return
       }
-      return
-    }
 
-    const liveStream = await ensurePendingLiveStream()
-    startedLiveStream = liveStream
-    await submitTurnStart({
-      client,
-      liveStream,
-      text,
-      submittedAttachments,
-      optimisticMessageId
-    })
-  } catch (caughtError) {
-    const messageText = caughtError instanceof Error ? caughtError.message : String(caughtError)
+      const liveStream = await ensurePendingLiveStream()
+      startedLiveStream = liveStream
+      await submitTurnStart({
+        client,
+        liveStream,
+        text,
+        submittedAttachments,
+        optimisticMessageId
+      })
+    } catch (caughtError) {
+      const messageText = caughtError instanceof Error ? caughtError.message : String(caughtError)
 
-    markAwaitingAssistantOutput(false)
-    untrackPendingUserMessage(optimisticMessageId)
-    removeOptimisticMessage(optimisticMessageId)
+      markAwaitingAssistantOutput(false)
+      untrackPendingUserMessage(optimisticMessageId)
+      removeOptimisticMessage(optimisticMessageId)
 
-    if (executedSubmissionMethod === 'turn/start') {
-      if (startedLiveStream && session.liveStream === startedLiveStream) {
-        clearPendingOptimisticMessages(clearLiveStream(new Error(messageText)))
+      if (executedSubmissionMethod === 'turn/start') {
+        if (startedLiveStream && session.liveStream === startedLiveStream) {
+          clearPendingOptimisticMessages(clearLiveStream(new Error(messageText)))
+        }
+        session.pendingLiveStream = null
+        restoreDraftIfPristine(text, submittedAttachments)
+        error.value = messageText
+        status.value = 'error'
+        return
       }
-      session.pendingLiveStream = null
+
       restoreDraftIfPristine(text, submittedAttachments)
       error.value = messageText
-      status.value = 'error'
-      return
     }
-
-    restoreDraftIfPristine(text, submittedAttachments)
-    error.value = messageText
+  } finally {
+    sendMessageLocked.value = false
   }
 }
 
@@ -1910,7 +2378,7 @@ const stopActiveTurn = async () => {
 }
 
 const sendStarterPrompt = async (text: string) => {
-  if (isBusy.value) {
+  if (isBusy.value || hasPendingRequest.value) {
     return
   }
 
@@ -1918,16 +2386,71 @@ const sendStarterPrompt = async (text: string) => {
   await sendMessage()
 }
 
+const respondToPendingRequest = (response: unknown) => {
+  error.value = null
+  resolveCurrentRequest(response)
+}
+
+const onPromptKeydown = (event: KeyboardEvent) => {
+  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 (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()
   }
@@ -1936,6 +2459,12 @@ onMounted(() => {
   void scheduleScrollToBottom('auto')
 })
 
+onBeforeUnmount(() => {
+  cancelAllPendingRequests()
+  releaseServerRequestHandler?.()
+  releaseServerRequestHandler = null
+})
+
 watch(() => props.threadId ?? null, (threadId) => {
   if (!threadId) {
     if (isBusy.value || pendingThreadId.value) {
@@ -1987,6 +2516,17 @@ 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([selectedModel, availableModels], () => {
   const nextSelection = coercePromptSelection(effectiveModelList.value, selectedModel.value, selectedEffort.value)
   if (selectedModel.value !== nextSelection.model) {
@@ -1998,6 +2538,11 @@ watch([selectedModel, availableModels], () => {
     selectedEffort.value = nextSelection.effort
   }
 }, { flush: 'sync' })
+
+watch(input, async () => {
+  await nextTick()
+  syncPromptSelectionFromDom()
+}, { flush: 'post' })
 </script>
 
 <template>
@@ -2077,19 +2622,11 @@ watch([selectedModel, availableModels], () => {
           />
         </template>
         <template #indicator>
-          <div
+          <UChatShimmer
             v-if="awaitingAssistantOutput"
-            class="flex items-center gap-3 px-1 py-2 text-sm text-muted"
-          >
-            <UIcon
-              name="i-lucide-loader-circle"
-              class="size-4 animate-spin text-primary"
-            />
-            <div class="flex flex-col gap-1">
-              <UChatShimmer text="Waiting for response…" />
-              <span class="text-xs text-toned">Real reasoning will appear separately when streaming starts.</span>
-            </div>
-          </div>
+            text="Thinking..."
+            class="px-1 py-2"
+          />
         </template>
       </UChatMessages>
     </div>
@@ -2105,6 +2642,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"
@@ -2119,14 +2663,44 @@ watch([selectedModel, availableModels], () => {
             Drop images to attach them
           </div>
 
+          <UCommandPalette
+            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
+          />
+
           <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="onPromptKeydown"
             @keydown.enter="onPromptEnter"
+            @input="syncPromptSelectionFromDom"
+            @click="syncPromptSelectionFromDom"
+            @keyup="syncPromptSelectionFromDom"
+            @focus="isPromptFocused = true; syncPromptSelectionFromDom()"
+            @blur="handlePromptBlur"
+            @select="syncPromptSelectionFromDom"
             @compositionstart="onCompositionStart"
             @compositionend="onCompositionEnd"
             @paste="onPaste"
@@ -2338,4 +2912,24 @@ watch([selectedModel, availableModels], () => {
       </div>
     </div>
   </section>
+
+  <PendingUserRequestDrawer
+    :request="pendingRequest"
+    @respond="respondToPendingRequest"
+  />
+
+  <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"
+  />
 </template>