@codori/client 0.0.2 → 0.0.4

package/app/components/ChatWorkspace.vue

@@ -2,15 +2,27 @@
 import { useRouter } from '#imports'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import MessageContent from './MessageContent.vue'
-import { useChatSession, type SubagentPanelState } from '../composables/useChatSession'
+import {
+  reconcileOptimisticUserMessage,
+  removeChatMessage,
+  removePendingUserMessageId,
+  resolvePromptSubmitStatus,
+  resolveTurnSubmissionMethod,
+  shouldIgnoreNotificationAfterInterrupt
+} from '../utils/chat-turn-engagement'
+import { useChatAttachments, type DraftAttachment } from '../composables/useChatAttachments'
+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 {
+  hideThinkingPlaceholder,
   ITEM_PART,
   eventToMessage,
   isSubagentActiveStatus,
   itemToMessages,
+  replaceStreamingMessage,
+  showThinkingPlaceholder,
   threadToMessages,
   upsertStreamingMessage,
   type ChatMessage,
@@ -19,7 +31,10 @@ import {
   type ItemData,
   type McpToolCallItem
 } from '~~/shared/codex-chat'
+import { buildTurnStartInput } from '~~/shared/chat-attachments'
 import {
+  type ConfigReadResponse,
+  type ModelListResponse,
   notificationThreadId,
   notificationTurnId,
   type CodexRpcNotification,
@@ -30,6 +45,21 @@ import {
   type ThreadStartResponse,
   type TurnStartResponse
 } from '~~/shared/codex-rpc'
+import {
+  buildTurnOverrides,
+  coercePromptSelection,
+  ensureModelOption,
+  FALLBACK_MODELS,
+  formatCompactTokenCount,
+  formatReasoningEffortLabel,
+  normalizeConfigDefaults,
+  normalizeModelList,
+  normalizeThreadTokenUsage,
+  resolveContextWindowState,
+  resolveEffortOptions,
+  visibleModelOptions,
+  type ReasoningEffort
+} from '~~/shared/chat-prompt-controls'
 import { toProjectThreadRoute } from '~~/shared/codori'
 
 const props = defineProps<{
@@ -50,6 +80,25 @@ const {
   onCompositionEnd,
   shouldSubmit
 } = useChatSubmitGuard()
+const {
+  attachments,
+  isDragging,
+  isUploading,
+  error: attachmentError,
+  fileInput,
+  removeAttachment,
+  replaceAttachments,
+  clearAttachments,
+  discardSnapshot,
+  openFilePicker,
+  onFileInputChange,
+  onPaste,
+  onDragEnter,
+  onDragLeave,
+  onDragOver,
+  onDrop,
+  uploadAttachments
+} = useChatAttachments(props.projectId)
 
 const input = ref('')
 const scrollViewport = ref<HTMLElement | null>(null)
@@ -64,12 +113,39 @@ const {
   threadTitle,
   pendingThreadId,
   autoRedirectThreadId,
-  loadVersion
+  loadVersion,
+  promptControlsLoaded,
+  promptControlsLoading,
+  availableModels,
+  selectedModel,
+  selectedEffort,
+  modelContextWindow,
+  tokenUsage
 } = session
 
 const selectedProject = computed(() => getProject(props.projectId))
-const submitError = computed(() => error.value ? new Error(error.value) : undefined)
-const isBusy = computed(() => status.value === 'submitted' || status.value === 'streaming')
+const composerError = computed(() => attachmentError.value ?? error.value)
+const submitError = computed(() => composerError.value ? new Error(composerError.value) : undefined)
+const interruptRequested = ref(false)
+const isBusy = computed(() =>
+  status.value === 'submitted'
+  || status.value === 'streaming'
+  || isUploading.value
+)
+const hasDraftContent = computed(() =>
+  input.value.trim().length > 0
+  || attachments.value.length > 0
+)
+const isComposerDisabled = computed(() =>
+  isUploading.value
+  || interruptRequested.value
+)
+const promptSubmitStatus = computed(() =>
+  resolvePromptSubmitStatus({
+    status: status.value,
+    hasDraftContent: hasDraftContent.value
+  })
+)
 const routeThreadId = computed(() => props.threadId ?? null)
 const projectTitle = computed(() => selectedProject.value?.projectId ?? props.projectId)
 const showWelcomeState = computed(() =>
@@ -98,7 +174,134 @@ const starterPrompts = computed(() => {
   ]
 })
 
+const hasKnownThreadUsage = computed(() => !activeThreadId.value || tokenUsage.value !== null)
+const effectiveModelList = computed(() => {
+  const withSelected = ensureModelOption(
+    availableModels.value.length > 0 ? availableModels.value : FALLBACK_MODELS,
+    selectedModel.value,
+    selectedEffort.value
+  )
+  return visibleModelOptions(withSelected)
+})
+const selectedModelOption = computed(() =>
+  effectiveModelList.value.find(model => model.model === selectedModel.value)
+  ?? effectiveModelList.value[0]
+  ?? FALLBACK_MODELS[0]
+)
+const modelSelectItems = computed(() =>
+  effectiveModelList.value.map(model => ({
+    label: model.displayName,
+    value: model.model
+  }))
+)
+const effortOptions = computed(() => resolveEffortOptions(effectiveModelList.value, selectedModel.value))
+const effortSelectItems = computed(() =>
+  effortOptions.value.map(effort => ({
+    label: formatReasoningEffortLabel(effort),
+    value: effort
+  }))
+)
+const contextWindowState = computed(() =>
+  resolveContextWindowState(tokenUsage.value, modelContextWindow.value, hasKnownThreadUsage.value)
+)
+const contextUsedPercent = computed(() => contextWindowState.value.usedPercent ?? 0)
+const contextIndicatorLabel = computed(() => {
+  const remainingPercent = contextWindowState.value.remainingPercent
+  return remainingPercent == null ? 'ctx' : `${Math.round(remainingPercent)}%`
+})
+
+const normalizePromptSelection = (
+  preferredModel?: string | null,
+  preferredEffort?: ReasoningEffort | null
+) => {
+  const withSelected = ensureModelOption(
+    availableModels.value.length > 0 ? availableModels.value : FALLBACK_MODELS,
+    preferredModel ?? selectedModel.value,
+    preferredEffort ?? selectedEffort.value
+  )
+  const visibleModels = visibleModelOptions(withSelected)
+  const nextSelection = coercePromptSelection(visibleModels, preferredModel ?? selectedModel.value, preferredEffort ?? selectedEffort.value)
+
+  availableModels.value = visibleModels
+  if (selectedModel.value !== nextSelection.model) {
+    selectedModel.value = nextSelection.model
+  }
+  if (selectedEffort.value !== nextSelection.effort) {
+    selectedEffort.value = nextSelection.effort
+  }
+}
+
+const syncPromptSelectionFromThread = (
+  model: string | null | undefined,
+  effort: ReasoningEffort | null | undefined
+) => {
+  normalizePromptSelection(model ?? null, effort ?? null)
+}
+
+const loadPromptControls = async () => {
+  if (promptControlsLoaded.value) {
+    return
+  }
+
+  if (promptControlsPromise) {
+    return await promptControlsPromise
+  }
+
+  promptControlsPromise = (async () => {
+    promptControlsLoading.value = true
+
+    try {
+      await ensureProjectRuntime()
+      const client = getClient(props.projectId)
+      const initialModel = selectedModel.value
+      const initialEffort = selectedEffort.value
+      let nextModels = availableModels.value.length > 0 ? availableModels.value : FALLBACK_MODELS
+      let defaultModel: string | null = null
+      let defaultEffort: ReasoningEffort | null = null
+
+      const [modelsResponse, configResponse] = await Promise.allSettled([
+        client.request<ModelListResponse>('model/list'),
+        client.request<ConfigReadResponse>('config/read')
+      ])
+
+      if (modelsResponse.status === 'fulfilled') {
+        nextModels = visibleModelOptions(normalizeModelList(modelsResponse.value))
+      } else {
+        nextModels = visibleModelOptions(nextModels)
+      }
+
+      if (configResponse.status === 'fulfilled') {
+        const defaults = normalizeConfigDefaults(configResponse.value)
+        if (defaults.contextWindow != null) {
+          modelContextWindow.value = defaults.contextWindow
+        }
+        defaultModel = defaults.model
+        defaultEffort = defaults.effort
+      }
+
+      availableModels.value = nextModels
+
+      const preferredModel = selectedModel.value !== initialModel
+        ? selectedModel.value
+        : defaultModel ?? initialModel
+      const preferredEffort = selectedEffort.value !== initialEffort
+        ? selectedEffort.value
+        : defaultEffort ?? initialEffort
+
+      normalizePromptSelection(preferredModel, preferredEffort)
+      promptControlsLoaded.value = true
+    } finally {
+      promptControlsLoading.value = false
+      promptControlsPromise = null
+    }
+  })()
+
+  return await promptControlsPromise
+}
+
 const subagentBootstrapPromises = new Map<string, Promise<void>>()
+const optimisticAttachmentSnapshots = new Map<string, DraftAttachment[]>()
+let promptControlsPromise: Promise<void> | null = null
 
 const isActiveTurnStatus = (value: string | null | undefined) => {
   if (!value) {
@@ -113,13 +316,263 @@ const currentLiveStream = () =>
     ? session.liveStream
     : null
 
-const clearLiveStream = () => {
-  session.liveStream?.unsubscribe?.()
-  session.liveStream = null
+const hasActiveTurnEngagement = () =>
+  Boolean(currentLiveStream() || session.pendingLiveStream)
+
+const rejectLiveStreamTurnWaiters = (liveStream: LiveStream, error: Error) => {
+  const waiters = liveStream.turnIdWaiters.splice(0, liveStream.turnIdWaiters.length)
+  for (const waiter of waiters) {
+    waiter.reject(error)
+  }
+}
+
+const createLiveStreamState = (
+  threadId: string,
+  bufferedNotifications: CodexRpcNotification[] = []
+): LiveStream => ({
+  threadId,
+  turnId: null,
+  bufferedNotifications,
+  observedSubagentThreadIds: new Set<string>(),
+  pendingUserMessageIds: [],
+  turnIdWaiters: [],
+  interruptRequested: false,
+  interruptAcknowledged: false,
+  unsubscribe: null
+})
+
+const setSessionLiveStream = (liveStream: LiveStream | null) => {
+  session.liveStream = liveStream
+  interruptRequested.value = liveStream?.interruptRequested === true
 }
 
-const stripOptimisticDraftMessages = () => {
-  messages.value = messages.value.filter(message => !message.id.startsWith('local-user-'))
+const setLiveStreamInterruptRequested = (liveStream: LiveStream, nextValue: boolean) => {
+  liveStream.interruptRequested = nextValue
+
+  if (session.liveStream === liveStream) {
+    interruptRequested.value = nextValue
+  }
+}
+
+const setLiveStreamTurnId = (liveStream: LiveStream, turnId: string | null) => {
+  liveStream.turnId = turnId
+
+  if (!turnId) {
+    return
+  }
+
+  liveStream.interruptAcknowledged = false
+  const waiters = liveStream.turnIdWaiters.splice(0, liveStream.turnIdWaiters.length)
+  for (const waiter of waiters) {
+    waiter.resolve(turnId)
+  }
+}
+
+const waitForLiveStreamTurnId = async (liveStream: LiveStream) => {
+  if (liveStream.turnId) {
+    return liveStream.turnId
+  }
+
+  return await new Promise<string>((resolve, reject) => {
+    liveStream.turnIdWaiters.push({ resolve, reject })
+  })
+}
+
+const clearLiveStream = (reason?: Error) => {
+  const liveStream = session.liveStream
+  if (!liveStream) {
+    interruptRequested.value = false
+    return null
+  }
+
+  liveStream.unsubscribe?.()
+  rejectLiveStreamTurnWaiters(liveStream, reason ?? new Error('The active turn is no longer available.'))
+  setSessionLiveStream(null)
+  return liveStream
+}
+
+const ensurePendingLiveStream = async () => {
+  const existingLiveStream = currentLiveStream()
+  if (existingLiveStream) {
+    return existingLiveStream
+  }
+
+  if (session.pendingLiveStream) {
+    return await session.pendingLiveStream
+  }
+
+  const pendingLiveStream = (async () => {
+    await ensureProjectRuntime()
+    const { threadId, created } = await ensureThread()
+    const client = getClient(props.projectId)
+    const buffered: CodexRpcNotification[] = []
+    clearLiveStream()
+
+    const liveStream = createLiveStreamState(threadId, buffered)
+    liveStream.unsubscribe = client.subscribe((notification) => {
+      const targetThreadId = notificationThreadId(notification)
+      if (!targetThreadId) {
+        return
+      }
+
+      if (targetThreadId !== threadId) {
+        if (liveStream.observedSubagentThreadIds.has(targetThreadId)) {
+          applySubagentNotification(targetThreadId, notification)
+        }
+        return
+      }
+
+      if (!liveStream.turnId) {
+        buffered.push(notification)
+        return
+      }
+
+      const turnId = notificationTurnId(notification)
+      if (turnId && turnId !== liveStream.turnId) {
+        return
+      }
+
+      applyNotification(notification)
+    })
+
+    setSessionLiveStream(liveStream)
+
+    if (created && !routeThreadId.value) {
+      pendingThreadId.value = threadId
+    }
+
+    return liveStream
+  })()
+
+  session.pendingLiveStream = pendingLiveStream
+
+  try {
+    return await pendingLiveStream
+  } finally {
+    if (session.pendingLiveStream === pendingLiveStream) {
+      session.pendingLiveStream = null
+    }
+  }
+}
+
+const createOptimisticMessageId = () =>
+  typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+    ? `local-user-${crypto.randomUUID()}`
+    : `local-user-${Date.now()}-${Math.random().toString(16).slice(2)}`
+
+const buildOptimisticMessage = (text: string, submittedAttachments: DraftAttachment[]): ChatMessage => ({
+  id: createOptimisticMessageId(),
+  role: 'user',
+  parts: [
+    ...(text.trim()
+      ? [{
+          type: 'text' as const,
+          text,
+          state: 'done' as const
+        }]
+      : []),
+    ...submittedAttachments.map((attachment) => ({
+      type: 'attachment' as const,
+      attachment: {
+        kind: 'image' as const,
+        name: attachment.name,
+        mediaType: attachment.mediaType,
+        url: attachment.previewUrl
+      }
+    }))
+  ]
+})
+
+const rememberOptimisticAttachments = (messageId: string, submittedAttachments: DraftAttachment[]) => {
+  if (submittedAttachments.length === 0) {
+    return
+  }
+
+  optimisticAttachmentSnapshots.set(messageId, submittedAttachments)
+}
+
+const formatAttachmentSize = (size: number) => {
+  if (size >= 1024 * 1024) {
+    return `${(size / (1024 * 1024)).toFixed(1)} MB`
+  }
+
+  if (size >= 1024) {
+    return `${Math.round(size / 1024)} KB`
+  }
+
+  return `${size} B`
+}
+
+const removeOptimisticMessage = (messageId: string) => {
+  messages.value = removeChatMessage(messages.value, messageId)
+  optimisticAttachmentSnapshots.delete(messageId)
+}
+
+const clearThinkingPlaceholder = () => {
+  messages.value = hideThinkingPlaceholder(messages.value)
+}
+
+const ensureThinkingPlaceholder = () => {
+  messages.value = showThinkingPlaceholder(messages.value)
+}
+
+const clearThinkingPlaceholderForVisibleItem = (item: CodexThreadItem) => {
+  if (item.type !== 'userMessage') {
+    clearThinkingPlaceholder()
+  }
+}
+
+const restoreDraftIfPristine = (text: string, submittedAttachments: DraftAttachment[]) => {
+  if (!input.value.trim()) {
+    input.value = text
+  }
+
+  if (attachments.value.length === 0 && submittedAttachments.length > 0) {
+    replaceAttachments(submittedAttachments)
+  }
+}
+
+const untrackPendingUserMessage = (messageId: string) => {
+  const liveStream = currentLiveStream()
+  if (!liveStream) {
+    return
+  }
+
+  liveStream.pendingUserMessageIds = removePendingUserMessageId(liveStream.pendingUserMessageIds, messageId)
+}
+
+const reconcilePendingUserMessage = (confirmedMessage: ChatMessage) => {
+  const liveStream = currentLiveStream()
+  const optimisticMessageId = liveStream?.pendingUserMessageIds.shift() ?? null
+  if (!optimisticMessageId) {
+    messages.value = upsertStreamingMessage(messages.value, confirmedMessage)
+    return
+  }
+
+  const pendingAttachments = optimisticAttachmentSnapshots.get(optimisticMessageId)
+  if (pendingAttachments) {
+    discardSnapshot(pendingAttachments)
+    optimisticAttachmentSnapshots.delete(optimisticMessageId)
+  }
+
+  messages.value = reconcileOptimisticUserMessage(messages.value, optimisticMessageId, confirmedMessage)
+}
+
+const clearPendingOptimisticMessages = (liveStream: LiveStream | null, options?: { discardSnapshots?: boolean }) => {
+  if (!liveStream) {
+    return
+  }
+
+  for (const messageId of liveStream.pendingUserMessageIds) {
+    messages.value = removeChatMessage(messages.value, messageId)
+    const pendingAttachments = optimisticAttachmentSnapshots.get(messageId)
+    if (options?.discardSnapshots && pendingAttachments) {
+      discardSnapshot(pendingAttachments)
+    }
+    optimisticAttachmentSnapshots.delete(messageId)
+  }
+
+  liveStream.pendingUserMessageIds = []
 }
 
 const resolveThreadTitle = (thread: { name: string | null, preview: string, id: string }) => {
@@ -249,22 +702,21 @@ const hydrateThread = async (threadId: string) => {
   const requestVersion = loadVersion.value + 1
   loadVersion.value = requestVersion
   error.value = null
+  tokenUsage.value = null
 
   try {
     await ensureProjectRuntime()
     const client = getClient(props.projectId)
     activeThreadId.value = threadId
 
-    const existingLiveStream = currentLiveStream()
+    const existingLiveStream = session.liveStream
 
-    if (!existingLiveStream) {
-      const nextLiveStream = {
-        threadId,
-        turnId: null,
-        bufferedNotifications: [] as CodexRpcNotification[],
-        observedSubagentThreadIds: new Set<string>(),
-        unsubscribe: null as (() => void) | null
-      }
+    if (existingLiveStream && existingLiveStream.threadId !== threadId) {
+      clearLiveStream()
+    }
+
+    if (!session.liveStream) {
+      const nextLiveStream = createLiveStreamState(threadId)
 
       nextLiveStream.unsubscribe = client.subscribe((notification) => {
         const targetThreadId = notificationThreadId(notification)
@@ -292,10 +744,10 @@ const hydrateThread = async (threadId: string) => {
         applyNotification(notification)
       })
 
-      session.liveStream = nextLiveStream
+      setSessionLiveStream(nextLiveStream)
     }
 
-    await client.request<ThreadResumeResponse>('thread/resume', {
+    const resumeResponse = await client.request<ThreadResumeResponse>('thread/resume', {
       threadId,
       cwd: selectedProject.value?.projectPath ?? null,
       approvalPolicy: 'never',
@@ -310,6 +762,10 @@ const hydrateThread = async (threadId: string) => {
       return
     }
 
+    syncPromptSelectionFromThread(
+      resumeResponse.model ?? null,
+      (resumeResponse.reasoningEffort as ReasoningEffort | null | undefined) ?? null
+    )
     activeThreadId.value = response.thread.id
     threadTitle.value = resolveThreadTitle(response.thread)
     messages.value = threadToMessages(response.thread)
@@ -327,7 +783,7 @@ const hydrateThread = async (threadId: string) => {
       return
     }
 
-    session.liveStream.turnId = activeTurn.id
+    setLiveStreamTurnId(session.liveStream, activeTurn.id)
     status.value = 'streaming'
 
     const pendingNotifications = session.liveStream.bufferedNotifications.splice(0, session.liveStream.bufferedNotifications.length)
@@ -348,6 +804,7 @@ const hydrateThread = async (threadId: string) => {
 
 const resetDraftThread = () => {
   clearLiveStream()
+  session.pendingLiveStream = null
   activeThreadId.value = null
   threadTitle.value = null
   pendingThreadId.value = null
@@ -355,6 +812,7 @@ const resetDraftThread = () => {
   messages.value = []
   subagentPanels.value = []
   error.value = null
+  tokenUsage.value = null
   status.value = 'ready'
 }
 
@@ -790,7 +1248,7 @@ const applySubagentNotification = (threadId: string, notification: CodexRpcNotif
       }
       for (const nextMessage of itemToMessages(params.item)) {
         updateSubagentPanelMessages(threadId, (panelMessages) =>
-          upsertStreamingMessage(panelMessages, {
+          replaceStreamingMessage(panelMessages, {
             ...nextMessage,
             pending: false
           })
@@ -947,6 +1405,11 @@ const applySubagentNotification = (threadId: string, notification: CodexRpcNotif
 }
 
 const applyNotification = (notification: CodexRpcNotification) => {
+  const liveStream = currentLiveStream()
+  if (liveStream?.interruptAcknowledged && shouldIgnoreNotificationAfterInterrupt(notification.method)) {
+    return
+  }
+
   switch (notification.method) {
     case 'thread/started': {
       const nextThreadId = notificationThreadId(notification)
@@ -959,6 +1422,10 @@ const applyNotification = (notification: CodexRpcNotification) => {
       return
     }
     case 'turn/started': {
+      if (liveStream) {
+        setLiveStreamTurnId(liveStream, notificationTurnId(notification))
+        setLiveStreamInterruptRequested(liveStream, false)
+      }
       messages.value = upsertStreamingMessage(
         messages.value,
         eventToMessage(`event-turn-started-${notificationTurnId(notification) ?? Date.now()}`, {
@@ -973,6 +1440,17 @@ const applyNotification = (notification: CodexRpcNotification) => {
       if (params.item.type === 'collabAgentToolCall') {
         applySubagentActivityItem(params.item)
       }
+      if (params.item.type === 'userMessage') {
+        for (const nextMessage of itemToMessages(params.item)) {
+          reconcilePendingUserMessage({
+            ...nextMessage,
+            pending: false
+          })
+        }
+        status.value = 'streaming'
+        return
+      }
+      clearThinkingPlaceholderForVisibleItem(params.item)
       seedStreamingMessage(params.item)
       status.value = 'streaming'
       return
@@ -982,19 +1460,24 @@ const applyNotification = (notification: CodexRpcNotification) => {
       if (params.item.type === 'collabAgentToolCall') {
         applySubagentActivityItem(params.item)
       }
-      if (params.item.type === 'userMessage') {
-        stripOptimisticDraftMessages()
-      }
+      clearThinkingPlaceholderForVisibleItem(params.item)
       for (const nextMessage of itemToMessages(params.item)) {
-        messages.value = upsertStreamingMessage(messages.value, {
+        const confirmedMessage = {
           ...nextMessage,
           pending: false
-        })
+        }
+        if (params.item.type === 'userMessage') {
+          reconcilePendingUserMessage(confirmedMessage)
+          continue
+        }
+
+        messages.value = replaceStreamingMessage(messages.value, confirmedMessage)
       }
       return
     }
     case 'item/agentMessage/delta': {
       const params = notification.params as { itemId: string, delta: string }
+      clearThinkingPlaceholder()
       appendTextPartDelta(params.itemId, params.delta, {
         id: params.itemId,
         role: 'assistant',
@@ -1010,6 +1493,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     }
     case 'item/plan/delta': {
       const params = notification.params as { itemId: string, delta: string }
+      clearThinkingPlaceholder()
       appendTextPartDelta(params.itemId, params.delta, {
         id: params.itemId,
         role: 'assistant',
@@ -1026,6 +1510,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'item/reasoning/textDelta':
     case 'item/reasoning/summaryTextDelta': {
       const params = notification.params as { itemId: string, delta: string }
+      clearThinkingPlaceholder()
       updateMessage(params.itemId, {
         id: params.itemId,
         role: 'assistant',
@@ -1120,11 +1605,34 @@ const applyNotification = (notification: CodexRpcNotification) => {
       status.value = 'streaming'
       return
     }
+    case 'thread/tokenUsage/updated': {
+      const nextUsage = normalizeThreadTokenUsage(notification.params)
+      if (nextUsage) {
+        tokenUsage.value = nextUsage
+        if (nextUsage.modelContextWindow != null) {
+          modelContextWindow.value = nextUsage.modelContextWindow
+        }
+      }
+      return
+    }
+    case 'error': {
+      const params = notification.params as { error?: { message?: string } }
+      const messageText = params.error?.message ?? 'The stream failed.'
+      clearThinkingPlaceholder()
+      pushEventMessage('stream.error', messageText)
+      clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
+      clearLiveStream(new Error(messageText))
+      error.value = messageText
+      status.value = 'error'
+      return
+    }
     case 'turn/failed': {
       const params = notification.params as { error?: { message?: string } }
       const messageText = params.error?.message ?? 'The turn failed.'
+      clearThinkingPlaceholder()
       pushEventMessage('turn.failed', messageText)
-      clearLiveStream()
+      clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
+      clearLiveStream(new Error(messageText))
       error.value = messageText
       status.value = 'error'
       return
@@ -1132,13 +1640,18 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'stream/error': {
       const params = notification.params as { message?: string }
       const messageText = params.message ?? 'The stream failed.'
+      clearThinkingPlaceholder()
       pushEventMessage('stream.error', messageText)
-      clearLiveStream()
+      clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
+      clearLiveStream(new Error(messageText))
       error.value = messageText
       status.value = 'error'
       return
     }
     case 'turn/completed': {
+      clearThinkingPlaceholder()
+      clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
+      error.value = null
       status.value = 'ready'
       clearLiveStream()
       return
@@ -1150,165 +1663,128 @@ const applyNotification = (notification: CodexRpcNotification) => {
 
 const sendMessage = async () => {
   const text = input.value.trim()
-  if (!text) {
+  const submittedAttachments = attachments.value.slice()
+
+  if (!text && submittedAttachments.length === 0) {
+    return
+  }
+
+  try {
+    await loadPromptControls()
+  } catch (caughtError) {
+    error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
+    status.value = 'error'
     return
   }
 
   pinnedToBottom.value = true
   error.value = null
-  status.value = 'submitted'
-  input.value = ''
-  const shouldRenderOptimisticDraft = !routeThreadId.value
-
-  if (shouldRenderOptimisticDraft) {
-    const optimisticMessage: ChatMessage = {
-      id: `local-user-${Date.now()}`,
-      role: 'user',
-      parts: [{
-        type: 'text',
-        text,
-        state: 'done'
-      }]
-    }
-
-    messages.value = [...messages.value, optimisticMessage]
+  attachmentError.value = null
+  const submissionMethod = resolveTurnSubmissionMethod(hasActiveTurnEngagement())
+  if (submissionMethod === 'turn/start') {
+    status.value = 'submitted'
   }
-  let unsubscribe: (() => void) | null = null
+  input.value = ''
+  clearAttachments({ revoke: false })
+  const optimisticMessage = buildOptimisticMessage(text, submittedAttachments)
+  const optimisticMessageId = optimisticMessage.id
+  rememberOptimisticAttachments(optimisticMessageId, submittedAttachments)
+  messages.value = [...messages.value, optimisticMessage]
+  ensureThinkingPlaceholder()
+  let startedLiveStream: LiveStream | null = null
 
   try {
-    await ensureProjectRuntime()
-    const { threadId, created } = await ensureThread()
     const client = getClient(props.projectId)
-    const buffered: CodexRpcNotification[] = []
-    let currentTurnId: string | null = null
-    let completionResolved = false
-    let resolveCompletion: (() => void) | null = null
-    let rejectCompletion: ((error: Error) => void) | null = null
-
-    const settleNotification = (notification: CodexRpcNotification) => {
-      if (notificationThreadId(notification) !== threadId) {
-        return false
-      }
-
-      const turnId = notificationTurnId(notification)
-      if (currentTurnId && turnId && turnId !== currentTurnId) {
-        return false
-      }
-
-      if (notification.method === 'error') {
-        completionResolved = true
-        unsubscribe?.()
-        if (session.liveStream?.unsubscribe === unsubscribe) {
-          session.liveStream = null
-        }
-        const params = notification.params as { error?: { message?: string } }
-        const messageText = params.error?.message ?? 'Turn failed.'
-        pushEventMessage('stream.error', messageText)
-        rejectCompletion?.(new Error(messageText))
-        return true
-      }
-
-      applyNotification(notification)
-
-      if (notification.method === 'turn/completed') {
-        completionResolved = true
-        unsubscribe?.()
-        if (session.liveStream?.unsubscribe === unsubscribe) {
-          session.liveStream = null
-        }
-        resolveCompletion?.()
-        return true
-      }
 
-      if (notification.method === 'turn/failed' || notification.method === 'stream/error') {
-        completionResolved = true
-        unsubscribe?.()
-        if (session.liveStream?.unsubscribe === unsubscribe) {
-          session.liveStream = null
-        }
-        rejectCompletion?.(new Error(error.value ?? 'Turn failed.'))
-        return true
-      }
-
-      return false
+    if (submissionMethod === 'turn/steer') {
+      const liveStream = await ensurePendingLiveStream()
+      const uploadedAttachments = await uploadAttachments(liveStream.threadId, submittedAttachments)
+      liveStream.pendingUserMessageIds.push(optimisticMessageId)
+      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)
+      })
+      return
     }
 
-    clearLiveStream()
-
-    const completion = new Promise<void>((resolve, reject) => {
-      resolveCompletion = resolve
-      rejectCompletion = (caughtError: Error) => reject(caughtError)
-    })
+    const liveStream = await ensurePendingLiveStream()
+    startedLiveStream = liveStream
+    const threadId = liveStream.threadId
+    const uploadedAttachments = await uploadAttachments(threadId, submittedAttachments)
+    liveStream.pendingUserMessageIds.push(optimisticMessageId)
 
-    const liveStream = {
+    const turnStart = await client.request<TurnStartResponse>('turn/start', {
       threadId,
-      turnId: null as string | null,
-      bufferedNotifications: buffered,
-      observedSubagentThreadIds: new Set<string>(),
-      unsubscribe: null as (() => void) | null
-    }
+      input: buildTurnStartInput(text, uploadedAttachments),
+      cwd: selectedProject.value?.projectPath ?? null,
+      approvalPolicy: 'never',
+      ...buildTurnOverrides(selectedModel.value, selectedEffort.value)
+    })
 
-    unsubscribe = client.subscribe((notification) => {
-      const targetThreadId = notificationThreadId(notification)
-      if (!targetThreadId) {
-        return
-      }
+    setLiveStreamTurnId(liveStream, turnStart.turn.id)
 
-      if (targetThreadId !== threadId) {
-        if (liveStream.observedSubagentThreadIds.has(targetThreadId)) {
-          applySubagentNotification(targetThreadId, notification)
-        }
-        return
-      }
-
-      if (!currentTurnId) {
-        buffered.push(notification)
-        return
+    for (const notification of liveStream.bufferedNotifications.splice(0, liveStream.bufferedNotifications.length)) {
+      const turnId = notificationTurnId(notification)
+      if (turnId && turnId !== liveStream.turnId) {
+        continue
       }
 
-      settleNotification(notification)
-    })
-    liveStream.unsubscribe = unsubscribe
-    session.liveStream = liveStream
-
-    if (created && !routeThreadId.value) {
-      pendingThreadId.value = threadId
+      applyNotification(notification)
     }
+  } catch (caughtError) {
+    const messageText = caughtError instanceof Error ? caughtError.message : String(caughtError)
 
-    const turnStart = await client.request<TurnStartResponse>('turn/start', {
-      threadId,
-      input: [{
-        type: 'text',
-        text,
-        text_elements: []
-      }],
-      cwd: selectedProject.value?.projectPath ?? null,
-      approvalPolicy: 'never'
-    })
-
-    currentTurnId = turnStart.turn.id
-    liveStream.turnId = turnStart.turn.id
+    clearThinkingPlaceholder()
+    untrackPendingUserMessage(optimisticMessageId)
+    removeOptimisticMessage(optimisticMessageId)
 
-    for (const notification of buffered.splice(0, buffered.length)) {
-      if (settleNotification(notification) && completionResolved) {
-        break
+    if (submissionMethod === '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
     }
 
-    await completion
-    status.value = 'ready'
+    restoreDraftIfPristine(text, submittedAttachments)
+    error.value = messageText
+  }
+}
+
+const stopActiveTurn = async () => {
+  if (!hasActiveTurnEngagement()) {
+    return
+  }
 
-    if (routeThreadId.value) {
-      await hydrateThread(threadId)
+  let liveStream: LiveStream | null = null
+
+  try {
+    liveStream = await ensurePendingLiveStream()
+    if (liveStream.interruptRequested) {
       return
     }
+
+    setLiveStreamInterruptRequested(liveStream, true)
+    error.value = null
+    const client = getClient(props.projectId)
+    const turnId = await waitForLiveStreamTurnId(liveStream)
+    await client.request('turn/interrupt', {
+      threadId: liveStream.threadId,
+      turnId
+    })
+    liveStream.interruptAcknowledged = true
   } catch (caughtError) {
-    unsubscribe?.()
-    if (session.liveStream?.unsubscribe === unsubscribe) {
-      session.liveStream = null
+    if (liveStream) {
+      setLiveStreamInterruptRequested(liveStream, false)
     }
     error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
-    status.value = 'error'
   }
 }
 
@@ -1335,6 +1811,7 @@ onMounted(() => {
     void refreshProjects()
   }
 
+  void loadPromptControls()
   void scheduleScrollToBottom('auto')
 })
 
@@ -1388,6 +1865,18 @@ watch(status, (nextStatus, previousStatus) => {
 
   void scheduleScrollToBottom(nextStatus === 'streaming' ? 'auto' : 'smooth')
 }, { flush: 'post' })
+
+watch([selectedModel, availableModels], () => {
+  const nextSelection = coercePromptSelection(effectiveModelList.value, selectedModel.value, selectedEffort.value)
+  if (selectedModel.value !== nextSelection.model) {
+    selectedModel.value = nextSelection.model
+    return
+  }
+
+  if (selectedEffort.value !== nextSelection.effort) {
+    selectedEffort.value = nextSelection.effort
+  }
+}, { flush: 'sync' })
 </script>
 
 <template>
@@ -1461,38 +1950,271 @@ watch(status, (nextStatus, previousStatus) => {
         compact
       >
         <template #content="{ message }">
-          <MessageContent :message="message as ChatMessage" />
+          <MessageContent
+            :message="message as ChatMessage"
+            :project-id="projectId"
+          />
         </template>
       </UChatMessages>
     </div>
 
     <div class="sticky bottom-0 shrink-0 border-t border-default bg-default/95 px-4 py-3 backdrop-blur md:px-6">
       <div class="mx-auto w-full max-w-5xl">
-        <TunnelNotice class="mb-3" />
-      <UAlert
-        v-if="error"
-        color="error"
-        variant="soft"
-        icon="i-lucide-circle-alert"
-        :title="error"
-        class="mb-3"
-      />
-
-      <UChatPrompt
-        v-model="input"
-        placeholder="Describe the change you want Codex to make"
-        :error="submitError"
-        :disabled="isBusy"
-        autoresize
-        @submit.prevent="sendMessage"
-        @keydown.enter="onPromptEnter"
-        @compositionstart="onCompositionStart"
-        @compositionend="onCompositionEnd"
-      >
-        <UChatPromptSubmit
-          :status="status"
+        <UAlert
+          v-if="composerError"
+          color="error"
+          variant="soft"
+          icon="i-lucide-circle-alert"
+          :title="composerError"
+          class="mb-3"
         />
-      </UChatPrompt>
+
+        <div
+          class="relative"
+          @dragenter="onDragEnter"
+          @dragleave="onDragLeave"
+          @dragover="onDragOver"
+          @drop="onDrop"
+        >
+          <div
+            v-if="isDragging"
+            class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-3xl border border-dashed border-primary/50 bg-primary/10 text-sm font-medium text-primary backdrop-blur-sm"
+          >
+            Drop images to attach them
+          </div>
+
+          <UChatPrompt
+            v-model="input"
+            placeholder="Describe the change you want Codex to make"
+            :error="submitError"
+            :disabled="isComposerDisabled"
+            autoresize
+            @submit.prevent="sendMessage"
+            @keydown.enter="onPromptEnter"
+            @compositionstart="onCompositionStart"
+            @compositionend="onCompositionEnd"
+            @paste="onPaste"
+          >
+            <template #header>
+              <div
+                v-if="attachments.length"
+                class="flex flex-wrap gap-2 pb-2"
+              >
+                <div
+                  v-for="attachment in attachments"
+                  :key="attachment.id"
+                  class="flex max-w-full items-center gap-2 rounded-2xl border border-default bg-elevated/35 px-2 py-1.5"
+                >
+                  <img
+                    :src="attachment.previewUrl"
+                    :alt="attachment.name"
+                    class="size-10 rounded-xl object-cover"
+                  >
+                  <div class="min-w-0">
+                    <div class="max-w-40 truncate text-xs font-medium text-highlighted">
+                      {{ attachment.name }}
+                    </div>
+                    <div class="text-[11px] text-muted">
+                      {{ formatAttachmentSize(attachment.size) }}
+                    </div>
+                  </div>
+                  <UButton
+                    type="button"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    icon="i-lucide-x"
+                    :disabled="isComposerDisabled"
+                    class="rounded-full"
+                    :aria-label="`Remove ${attachment.name}`"
+                    @click="removeAttachment(attachment.id)"
+                  />
+                </div>
+              </div>
+            </template>
+
+            <UChatPromptSubmit
+              :status="promptSubmitStatus"
+              @stop="stopActiveTurn"
+            />
+
+            <template #footer>
+              <input
+                ref="fileInput"
+                type="file"
+                accept="image/*"
+                class="hidden"
+                :disabled="isComposerDisabled"
+                @change="onFileInputChange"
+              >
+
+              <div class="flex w-full flex-wrap items-center gap-2 pt-1">
+                <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+                  <UButton
+                    type="button"
+                    color="neutral"
+                    variant="ghost"
+                    size="sm"
+                    icon="i-lucide-plus"
+                    :disabled="isComposerDisabled"
+                    class="size-8 shrink-0 justify-center rounded-full border border-default/70"
+                    :ui="{ leadingIcon: 'size-4', base: 'px-0' }"
+                    aria-label="Attach image"
+                    @click="openFilePicker"
+                  />
+
+                  <USelect
+                    v-model="selectedModel"
+                    :items="modelSelectItems"
+                    color="neutral"
+                    variant="ghost"
+                    size="sm"
+                    :loading="promptControlsLoading"
+                    :disabled="isComposerDisabled"
+                    class="min-w-0 flex-1 sm:max-w-52 sm:flex-none"
+                    :ui="{ base: 'rounded-full border border-default/70 bg-default/70', value: 'truncate', content: 'min-w-56' }"
+                  />
+
+                  <USelect
+                    v-model="selectedEffort"
+                    :items="effortSelectItems"
+                    color="neutral"
+                    variant="ghost"
+                    size="sm"
+                    :disabled="isComposerDisabled"
+                    class="min-w-0 flex-1 sm:max-w-36 sm:flex-none"
+                    :ui="{ base: 'rounded-full border border-default/70 bg-default/70', value: 'truncate' }"
+                  />
+                </div>
+
+                <div class="ml-auto flex shrink-0 items-center">
+                  <UPopover
+                    :content="{ side: 'top', align: 'end' }"
+                    arrow
+                  >
+                    <button
+                      type="button"
+                      class="flex h-8 shrink-0 items-center gap-2 px-0 text-left text-muted"
+                    >
+                      <span class="relative flex size-7 items-center justify-center">
+                        <svg
+                          viewBox="0 0 36 36"
+                          class="size-7 -rotate-90"
+                          aria-hidden="true"
+                        >
+                          <circle
+                            cx="18"
+                            cy="18"
+                            r="15.5"
+                            fill="none"
+                            stroke-width="3"
+                            pathLength="100"
+                            class="stroke-current text-muted/20"
+                            stroke-dasharray="100 100"
+                          />
+                          <circle
+                            cx="18"
+                            cy="18"
+                            r="15.5"
+                            fill="none"
+                            stroke-width="3"
+                            pathLength="100"
+                            class="stroke-current text-primary"
+                            stroke-linecap="round"
+                            :stroke-dasharray="`${contextUsedPercent} 100`"
+                          />
+                        </svg>
+                        <span class="absolute text-[9px] font-semibold text-highlighted">
+                          {{ contextIndicatorLabel }}
+                        </span>
+                      </span>
+
+                      <span class="text-[11px] leading-none text-muted">context window</span>
+                    </button>
+
+                    <template #content>
+                      <div class="w-72 space-y-3 p-4">
+                        <div class="space-y-1">
+                          <div class="text-xs font-semibold uppercase tracking-[0.22em] text-primary">
+                            Context Window
+                          </div>
+                          <div class="text-sm font-medium text-highlighted">
+                            {{ selectedModelOption?.displayName ?? 'Selected model' }}
+                          </div>
+                        </div>
+
+                        <div
+                          v-if="contextWindowState.contextWindow && contextWindowState.usedTokens !== null"
+                          class="grid grid-cols-2 gap-3 text-sm"
+                        >
+                          <div class="rounded-2xl border border-default bg-elevated/35 px-3 py-2">
+                            <div class="text-[11px] uppercase tracking-[0.18em] text-muted">
+                              Remaining
+                            </div>
+                            <div class="mt-1 font-semibold text-highlighted">
+                              {{ Math.round(contextWindowState.remainingPercent ?? 0) }}%
+                            </div>
+                            <div class="text-xs text-muted">
+                              {{ formatCompactTokenCount(contextWindowState.remainingTokens ?? 0) }} tokens
+                            </div>
+                          </div>
+                          <div class="rounded-2xl border border-default bg-elevated/35 px-3 py-2">
+                            <div class="text-[11px] uppercase tracking-[0.18em] text-muted">
+                              Used
+                            </div>
+                            <div class="mt-1 font-semibold text-highlighted">
+                              {{ formatCompactTokenCount(contextWindowState.usedTokens ?? 0) }}
+                            </div>
+                            <div class="text-xs text-muted">
+                              of {{ formatCompactTokenCount(contextWindowState.contextWindow) }}
+                            </div>
+                          </div>
+                        </div>
+
+                        <div
+                          v-else
+                          class="rounded-2xl border border-default bg-elevated/35 px-3 py-2 text-sm text-muted"
+                        >
+                          <div v-if="contextWindowState.contextWindow">
+                            Live token usage will appear after the next turn completes.
+                          </div>
+                          <div v-else>
+                            Context window details are not available from the runtime yet.
+                          </div>
+                        </div>
+
+                        <div class="grid grid-cols-2 gap-3 text-sm">
+                          <div class="rounded-2xl border border-default bg-elevated/35 px-3 py-2">
+                            <div class="text-[11px] uppercase tracking-[0.18em] text-muted">
+                              Input
+                            </div>
+                            <div class="mt-1 font-semibold text-highlighted">
+                              {{ formatCompactTokenCount(tokenUsage?.totalInputTokens ?? 0) }}
+                            </div>
+                            <div class="text-xs text-muted">
+                              cached {{ formatCompactTokenCount(tokenUsage?.totalCachedInputTokens ?? 0) }}
+                            </div>
+                          </div>
+                          <div class="rounded-2xl border border-default bg-elevated/35 px-3 py-2">
+                            <div class="text-[11px] uppercase tracking-[0.18em] text-muted">
+                              Output
+                            </div>
+                            <div class="mt-1 font-semibold text-highlighted">
+                              {{ formatCompactTokenCount(tokenUsage?.totalOutputTokens ?? 0) }}
+                            </div>
+                            <div class="text-xs text-muted">
+                              effort {{ formatReasoningEffortLabel(selectedEffort) }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </UPopover>
+                </div>
+              </div>
+            </template>
+          </UChatPrompt>
+        </div>
       </div>
     </div>
   </section>