@codori/client 0.0.5 → 0.0.6

package/app/components/ChatWorkspace.vue

@@ -8,6 +8,9 @@ import {
   removePendingUserMessageId,
   resolvePromptSubmitStatus,
   resolveTurnSubmissionMethod,
+  shouldSubmitViaTurnSteer,
+  shouldAwaitThreadHydration,
+  shouldRetrySteerWithTurnStart,
   shouldIgnoreNotificationAfterInterrupt
 } from '../utils/chat-turn-engagement'
 import { useChatAttachments, type DraftAttachment } from '../composables/useChatAttachments'
@@ -15,14 +18,14 @@ import { useChatSession, type LiveStream, type SubagentPanelState } from '../com
 import { useProjects } from '../composables/useProjects'
 import { useRpc } from '../composables/useRpc'
 import { useChatSubmitGuard } from '../composables/useChatSubmitGuard'
+import { resolveThreadSummaryTitle, useThreadSummaries } from '../composables/useThreadSummaries'
+import { resolveChatMessagesStatus, shouldAwaitAssistantOutput } from '../utils/chat-messages-status'
 import {
-  hideThinkingPlaceholder,
   ITEM_PART,
   eventToMessage,
   isSubagentActiveStatus,
   itemToMessages,
   replaceStreamingMessage,
-  showThinkingPlaceholder,
   threadToMessages,
   upsertStreamingMessage,
   type ChatMessage,
@@ -31,11 +34,13 @@ import {
   type ItemData,
   type McpToolCallItem
 } from '~~/shared/codex-chat'
-import { buildTurnStartInput } from '~~/shared/chat-attachments'
+import { buildTurnStartInput, type PersistedProjectAttachment } from '~~/shared/chat-attachments'
 import {
   type ConfigReadResponse,
   type ModelListResponse,
+  notificationThreadName,
   notificationThreadId,
+  notificationThreadUpdatedAt,
   notificationTurnId,
   type CodexRpcNotification,
   type CodexThread,
@@ -105,6 +110,7 @@ const input = ref('')
 const scrollViewport = ref<HTMLElement | null>(null)
 const pinnedToBottom = ref(true)
 const session = useChatSession(props.projectId)
+const { syncThreadSummary, updateThreadSummaryTitle } = useThreadSummaries(props.projectId)
 const {
   messages,
   subagentPanels,
@@ -128,6 +134,7 @@ 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 isBusy = computed(() =>
   status.value === 'submitted'
   || status.value === 'streaming'
@@ -149,6 +156,9 @@ const promptSubmitStatus = computed(() =>
 )
 const routeThreadId = computed(() => props.threadId ?? null)
 const projectTitle = computed(() => selectedProject.value?.projectId ?? props.projectId)
+const chatMessagesStatus = computed(() =>
+  resolveChatMessagesStatus(status.value, awaitingAssistantOutput.value)
+)
 const showWelcomeState = computed(() =>
   !routeThreadId.value
   && !activeThreadId.value
@@ -303,6 +313,7 @@ const loadPromptControls = async () => {
 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
 
 const isActiveTurnStatus = (value: string | null | undefined) => {
   if (!value) {
@@ -320,6 +331,14 @@ const currentLiveStream = () =>
 const hasActiveTurnEngagement = () =>
   Boolean(currentLiveStream() || session.pendingLiveStream)
 
+const shouldSubmitWithTurnSteer = () =>
+  shouldSubmitViaTurnSteer({
+    activeThreadId: activeThreadId.value,
+    liveStreamThreadId: session.liveStream?.threadId ?? null,
+    liveStreamTurnId: session.liveStream?.turnId ?? null,
+    status: status.value
+  })
+
 const rejectLiveStreamTurnWaiters = (liveStream: LiveStream, error: Error) => {
   const waiters = liveStream.turnIdWaiters.splice(0, liveStream.turnIdWaiters.length)
   for (const waiter of waiters) {
@@ -379,6 +398,25 @@ const waitForLiveStreamTurnId = async (liveStream: LiveStream) => {
   })
 }
 
+const queuePendingUserMessage = (liveStream: LiveStream, messageId: string) => {
+  if (liveStream.pendingUserMessageIds.includes(messageId)) {
+    return
+  }
+
+  liveStream.pendingUserMessageIds.push(messageId)
+}
+
+const replayBufferedNotifications = (liveStream: LiveStream) => {
+  for (const notification of liveStream.bufferedNotifications.splice(0, liveStream.bufferedNotifications.length)) {
+    const turnId = notificationTurnId(notification)
+    if (turnId && turnId !== liveStream.turnId) {
+      continue
+    }
+
+    applyNotification(notification)
+  }
+}
+
 const clearLiveStream = (reason?: Error) => {
   const liveStream = session.liveStream
   if (!liveStream) {
@@ -509,17 +547,13 @@ const removeOptimisticMessage = (messageId: string) => {
   optimisticAttachmentSnapshots.delete(messageId)
 }
 
-const clearThinkingPlaceholder = () => {
-  messages.value = hideThinkingPlaceholder(messages.value)
-}
-
-const ensureThinkingPlaceholder = () => {
-  messages.value = showThinkingPlaceholder(messages.value)
+const markAwaitingAssistantOutput = (nextValue: boolean) => {
+  awaitingAssistantOutput.value = nextValue
 }
 
-const clearThinkingPlaceholderForVisibleItem = (item: CodexThreadItem) => {
+const markAssistantOutputStartedForItem = (item: CodexThreadItem) => {
   if (item.type !== 'userMessage') {
-    clearThinkingPlaceholder()
+    markAwaitingAssistantOutput(false)
   }
 }
 
@@ -576,9 +610,42 @@ const clearPendingOptimisticMessages = (liveStream: LiveStream | null, options?:
   liveStream.pendingUserMessageIds = []
 }
 
-const resolveThreadTitle = (thread: { name: string | null, preview: string, id: string }) => {
-  const nextTitle = thread.name?.trim() || thread.preview.trim()
-  return nextTitle || `Thread ${thread.id}`
+const submitTurnStart = async (input: {
+  client: ReturnType<typeof getClient>
+  liveStream: LiveStream
+  text: string
+  submittedAttachments: DraftAttachment[]
+  uploadedAttachments?: PersistedProjectAttachment[]
+  optimisticMessageId: string
+  queueOptimisticMessage?: boolean
+}) => {
+  const {
+    client,
+    liveStream,
+    text,
+    submittedAttachments,
+    uploadedAttachments: existingUploadedAttachments,
+    optimisticMessageId,
+    queueOptimisticMessage: shouldQueueOptimisticMessage = true
+  } = input
+
+  if (shouldQueueOptimisticMessage) {
+    queuePendingUserMessage(liveStream, optimisticMessageId)
+  }
+
+  const uploadedAttachments = existingUploadedAttachments
+    ?? await uploadAttachments(liveStream.threadId, submittedAttachments)
+  const turnStart = await client.request<TurnStartResponse>('turn/start', {
+    threadId: liveStream.threadId,
+    input: buildTurnStartInput(text, uploadedAttachments),
+    cwd: selectedProject.value?.projectPath ?? null,
+    approvalPolicy: 'never',
+    ...buildTurnOverrides(selectedModel.value, selectedEffort.value)
+  })
+
+  tokenUsage.value = null
+  setLiveStreamTurnId(liveStream, turnStart.turn.id)
+  replayBufferedNotifications(liveStream)
 }
 
 const shortThreadId = (value: string) => value.slice(0, 8)
@@ -700,106 +767,120 @@ const ensureProjectRuntime = async () => {
 }
 
 const hydrateThread = async (threadId: string) => {
-  const requestVersion = loadVersion.value + 1
-  loadVersion.value = requestVersion
-  error.value = null
-  tokenUsage.value = null
+  const hydratePromise = (async () => {
+    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
+    try {
+      await ensureProjectRuntime()
+      const client = getClient(props.projectId)
+      activeThreadId.value = threadId
 
-    const existingLiveStream = session.liveStream
+      const existingLiveStream = session.liveStream
 
-    if (existingLiveStream && existingLiveStream.threadId !== threadId) {
-      clearLiveStream()
-    }
+      if (existingLiveStream && existingLiveStream.threadId !== threadId) {
+        clearLiveStream()
+      }
 
-    if (!session.liveStream) {
-      const nextLiveStream = createLiveStreamState(threadId)
+      if (!session.liveStream) {
+        const nextLiveStream = createLiveStreamState(threadId)
 
-      nextLiveStream.unsubscribe = client.subscribe((notification) => {
-        const targetThreadId = notificationThreadId(notification)
-        if (!targetThreadId) {
-          return
-        }
+        nextLiveStream.unsubscribe = client.subscribe((notification) => {
+          const targetThreadId = notificationThreadId(notification)
+          if (!targetThreadId) {
+            return
+          }
 
-        if (targetThreadId !== threadId) {
-          if (nextLiveStream.observedSubagentThreadIds.has(targetThreadId)) {
-            applySubagentNotification(targetThreadId, notification)
+          if (targetThreadId !== threadId) {
+            if (nextLiveStream.observedSubagentThreadIds.has(targetThreadId)) {
+              applySubagentNotification(targetThreadId, notification)
+            }
+            return
           }
-          return
-        }
 
-        if (!nextLiveStream.turnId) {
-          nextLiveStream.bufferedNotifications.push(notification)
-          return
-        }
+          if (!nextLiveStream.turnId) {
+            nextLiveStream.bufferedNotifications.push(notification)
+            return
+          }
 
-        const turnId = notificationTurnId(notification)
-        if (turnId && turnId !== nextLiveStream.turnId) {
-          return
-        }
+          const turnId = notificationTurnId(notification)
+          if (turnId && turnId !== nextLiveStream.turnId) {
+            return
+          }
 
-        applyNotification(notification)
-      })
+          applyNotification(notification)
+        })
 
-      setSessionLiveStream(nextLiveStream)
-    }
+        setSessionLiveStream(nextLiveStream)
+      }
 
-    const resumeResponse = await client.request<ThreadResumeResponse>('thread/resume', {
-      threadId,
-      cwd: selectedProject.value?.projectPath ?? null,
-      approvalPolicy: 'never',
-      persistExtendedHistory: true
-    })
-    const response = await client.request<ThreadReadResponse>('thread/read', {
-      threadId,
-      includeTurns: true
-    })
+      const resumeResponse = await client.request<ThreadResumeResponse>('thread/resume', {
+        threadId,
+        cwd: selectedProject.value?.projectPath ?? null,
+        approvalPolicy: 'never',
+        persistExtendedHistory: true
+      })
+      const response = await client.request<ThreadReadResponse>('thread/read', {
+        threadId,
+        includeTurns: true
+      })
 
-    if (loadVersion.value !== requestVersion) {
-      return
-    }
+      if (loadVersion.value !== requestVersion) {
+        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)
-    rebuildSubagentPanelsFromThread(response.thread)
-    const activeTurn = [...response.thread.turns].reverse().find(turn => isActiveTurnStatus(turn.status))
+      syncPromptSelectionFromThread(
+        resumeResponse.model ?? null,
+        (resumeResponse.reasoningEffort as ReasoningEffort | null | undefined) ?? null
+      )
+      activeThreadId.value = response.thread.id
+      threadTitle.value = resolveThreadSummaryTitle(response.thread)
+      syncThreadSummary(response.thread)
+      messages.value = threadToMessages(response.thread)
+      rebuildSubagentPanelsFromThread(response.thread)
+      markAwaitingAssistantOutput(false)
+      const activeTurn = [...response.thread.turns].reverse().find(turn => isActiveTurnStatus(turn.status))
 
-    if (!activeTurn) {
-      clearLiveStream()
-      status.value = 'ready'
-      return
-    }
+      if (!activeTurn) {
+        clearLiveStream()
+        status.value = 'ready'
+        return
+      }
+
+      if (!session.liveStream) {
+        status.value = 'streaming'
+        return
+      }
 
-    if (!session.liveStream) {
+      setLiveStreamTurnId(session.liveStream, activeTurn.id)
       status.value = 'streaming'
-      return
-    }
 
-    setLiveStreamTurnId(session.liveStream, activeTurn.id)
-    status.value = 'streaming'
+      const pendingNotifications = session.liveStream.bufferedNotifications.splice(0, session.liveStream.bufferedNotifications.length)
+      for (const notification of pendingNotifications) {
+        const turnId = notificationTurnId(notification)
+        if (turnId && turnId !== activeTurn.id) {
+          continue
+        }
 
-    const pendingNotifications = session.liveStream.bufferedNotifications.splice(0, session.liveStream.bufferedNotifications.length)
-    for (const notification of pendingNotifications) {
-      const turnId = notificationTurnId(notification)
-      if (turnId && turnId !== activeTurn.id) {
-        continue
+        applyNotification(notification)
       }
+    } catch (caughtError) {
+      clearLiveStream()
+      error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
+      status.value = 'error'
+    }
+  })()
 
-      applyNotification(notification)
+  pendingThreadHydration = hydratePromise
+
+  try {
+    await hydratePromise
+  } finally {
+    if (pendingThreadHydration === hydratePromise) {
+      pendingThreadHydration = null
     }
-  } catch (caughtError) {
-    clearLiveStream()
-    error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
-    status.value = 'error'
   }
 }
 
@@ -814,6 +895,7 @@ const resetDraftThread = () => {
   subagentPanels.value = []
   error.value = null
   tokenUsage.value = null
+  markAwaitingAssistantOutput(false)
   status.value = 'ready'
 }
 
@@ -835,7 +917,8 @@ const ensureThread = async () => {
   })
 
   activeThreadId.value = response.thread.id
-  threadTitle.value = resolveThreadTitle(response.thread)
+  threadTitle.value = resolveThreadSummaryTitle(response.thread)
+  syncThreadSummary(response.thread)
   return {
     threadId: response.thread.id,
     created: true
@@ -1422,6 +1505,24 @@ const applyNotification = (notification: CodexRpcNotification) => {
       pendingThreadId.value = pendingThreadId.value ?? nextThreadId
       return
     }
+    case 'thread/name/updated': {
+      const nextThreadId = notificationThreadId(notification)
+      const nextThreadName = notificationThreadName(notification)
+      if (!nextThreadId || !nextThreadName) {
+        return
+      }
+      const nextTitle = nextThreadName.trim()
+      if (!nextTitle) {
+        return
+      }
+
+      if (activeThreadId.value === nextThreadId) {
+        threadTitle.value = nextTitle
+      }
+
+      updateThreadSummaryTitle(nextThreadId, nextTitle, notificationThreadUpdatedAt(notification))
+      return
+    }
     case 'turn/started': {
       if (liveStream) {
         setLiveStreamTurnId(liveStream, notificationTurnId(notification))
@@ -1451,7 +1552,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
         status.value = 'streaming'
         return
       }
-      clearThinkingPlaceholderForVisibleItem(params.item)
+      markAssistantOutputStartedForItem(params.item)
       seedStreamingMessage(params.item)
       status.value = 'streaming'
       return
@@ -1461,7 +1562,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
       if (params.item.type === 'collabAgentToolCall') {
         applySubagentActivityItem(params.item)
       }
-      clearThinkingPlaceholderForVisibleItem(params.item)
+      markAssistantOutputStartedForItem(params.item)
       for (const nextMessage of itemToMessages(params.item)) {
         const confirmedMessage = {
           ...nextMessage,
@@ -1478,7 +1579,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     }
     case 'item/agentMessage/delta': {
       const params = notification.params as { itemId: string, delta: string }
-      clearThinkingPlaceholder()
+      markAwaitingAssistantOutput(false)
       appendTextPartDelta(params.itemId, params.delta, {
         id: params.itemId,
         role: 'assistant',
@@ -1494,7 +1595,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     }
     case 'item/plan/delta': {
       const params = notification.params as { itemId: string, delta: string }
-      clearThinkingPlaceholder()
+      markAwaitingAssistantOutput(false)
       appendTextPartDelta(params.itemId, params.delta, {
         id: params.itemId,
         role: 'assistant',
@@ -1511,7 +1612,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'item/reasoning/textDelta':
     case 'item/reasoning/summaryTextDelta': {
       const params = notification.params as { itemId: string, delta: string }
-      clearThinkingPlaceholder()
+      markAwaitingAssistantOutput(false)
       updateMessage(params.itemId, {
         id: params.itemId,
         role: 'assistant',
@@ -1619,7 +1720,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'error': {
       const params = notification.params as { error?: { message?: string } }
       const messageText = params.error?.message ?? 'The stream failed.'
-      clearThinkingPlaceholder()
+      markAwaitingAssistantOutput(false)
       pushEventMessage('stream.error', messageText)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
       clearLiveStream(new Error(messageText))
@@ -1630,7 +1731,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'turn/failed': {
       const params = notification.params as { error?: { message?: string } }
       const messageText = params.error?.message ?? 'The turn failed.'
-      clearThinkingPlaceholder()
+      markAwaitingAssistantOutput(false)
       pushEventMessage('turn.failed', messageText)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
       clearLiveStream(new Error(messageText))
@@ -1641,7 +1742,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'stream/error': {
       const params = notification.params as { message?: string }
       const messageText = params.message ?? 'The stream failed.'
-      clearThinkingPlaceholder()
+      markAwaitingAssistantOutput(false)
       pushEventMessage('stream.error', messageText)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
       clearLiveStream(new Error(messageText))
@@ -1650,7 +1751,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
       return
     }
     case 'turn/completed': {
-      clearThinkingPlaceholder()
+      markAwaitingAssistantOutput(false)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
       error.value = null
       status.value = 'ready'
@@ -1678,10 +1779,17 @@ const sendMessage = async () => {
     return
   }
 
+  if (pendingThreadHydration && shouldAwaitThreadHydration({
+    hasPendingThreadHydration: true,
+    routeThreadId: routeThreadId.value
+  })) {
+    await pendingThreadHydration
+  }
+
   pinnedToBottom.value = true
   error.value = null
   attachmentError.value = null
-  const submissionMethod = resolveTurnSubmissionMethod(hasActiveTurnEngagement())
+  const submissionMethod = resolveTurnSubmissionMethod(shouldSubmitWithTurnSteer())
   if (submissionMethod === 'turn/start') {
     status.value = 'submitted'
   }
@@ -1691,61 +1799,71 @@ const sendMessage = async () => {
   const optimisticMessageId = optimisticMessage.id
   rememberOptimisticAttachments(optimisticMessageId, submittedAttachments)
   messages.value = [...messages.value, optimisticMessage]
-  ensureThinkingPlaceholder()
+  markAwaitingAssistantOutput(shouldAwaitAssistantOutput(submissionMethod))
   let startedLiveStream: LiveStream | null = null
+  let executedSubmissionMethod = submissionMethod
 
   try {
     const client = getClient(props.projectId)
 
     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)
-      })
-      tokenUsage.value = null
+      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
+        }
+
+        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
     }
 
     const liveStream = await ensurePendingLiveStream()
     startedLiveStream = liveStream
-    const threadId = liveStream.threadId
-    const uploadedAttachments = await uploadAttachments(threadId, submittedAttachments)
-    liveStream.pendingUserMessageIds.push(optimisticMessageId)
-
-    const turnStart = await client.request<TurnStartResponse>('turn/start', {
-      threadId,
-      input: buildTurnStartInput(text, uploadedAttachments),
-      cwd: selectedProject.value?.projectPath ?? null,
-      approvalPolicy: 'never',
-      ...buildTurnOverrides(selectedModel.value, selectedEffort.value)
+    await submitTurnStart({
+      client,
+      liveStream,
+      text,
+      submittedAttachments,
+      optimisticMessageId
     })
-
-    tokenUsage.value = null
-    setLiveStreamTurnId(liveStream, turnStart.turn.id)
-
-    for (const notification of liveStream.bufferedNotifications.splice(0, liveStream.bufferedNotifications.length)) {
-      const turnId = notificationTurnId(notification)
-      if (turnId && turnId !== liveStream.turnId) {
-        continue
-      }
-
-      applyNotification(notification)
-    }
   } catch (caughtError) {
     const messageText = caughtError instanceof Error ? caughtError.message : String(caughtError)
 
-    clearThinkingPlaceholder()
+    markAwaitingAssistantOutput(false)
     untrackPendingUserMessage(optimisticMessageId)
     removeOptimisticMessage(optimisticMessageId)
 
-    if (submissionMethod === 'turn/start') {
+    if (executedSubmissionMethod === 'turn/start') {
       if (startedLiveStream && session.liveStream === startedLiveStream) {
         clearPendingOptimisticMessages(clearLiveStream(new Error(messageText)))
       }
@@ -1933,7 +2051,7 @@ watch([selectedModel, availableModels], () => {
       <UChatMessages
         v-else
         :messages="messages"
-        :status="status"
+        :status="chatMessagesStatus"
         :should-auto-scroll="false"
         :should-scroll-to-bottom="false"
         :auto-scroll="false"
@@ -1958,6 +2076,21 @@ watch([selectedModel, availableModels], () => {
             :project-id="projectId"
           />
         </template>
+        <template #indicator>
+          <div
+            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>
+        </template>
       </UChatMessages>
     </div>
 

package/app/components/ProjectSidebar.vue

@@ -3,6 +3,7 @@ import type { NavigationMenuItem } from '@nuxt/ui'
 import { useRoute } from '#imports'
 import { computed, onMounted } from 'vue'
 import { useProjects } from '../composables/useProjects'
+import { sortSidebarProjects } from '../utils/project-sidebar-order'
 import { toProjectRoute } from '~~/shared/codori'
 
 const props = defineProps<{
@@ -38,7 +39,7 @@ onMounted(() => {
 })
 
 const projectItems = computed<ProjectNavigationItem[][]>(() => [
-  projects.value.map(project => ({
+  sortSidebarProjects(projects.value, activeProjectId.value).map(project => ({
     label: project.projectId,
     icon: 'i-lucide-folder-git-2',
     to: toProjectRoute(project.projectId),

package/app/components/ThreadList.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 import { useRoute } from '#imports'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 import { useProjects } from '../composables/useProjects'
 import { useRpc } from '../composables/useRpc'
 import { useThreadPanel } from '../composables/useThreadPanel'
+import {
+  resolveThreadSummaryTitle,
+  useThreadSummaries,
+  type ThreadSummary
+} from '../composables/useThreadSummaries'
 import type { ThreadListResponse } from '~~/shared/codex-rpc'
 import { toProjectThreadRoute } from '~~/shared/codori'
 
@@ -13,12 +18,6 @@ const props = defineProps<{
   autoCloseOnSelect?: boolean
 }>()
 
-type ThreadSummary = {
-  id: string
-  title: string
-  updatedAt: number
-}
-
 type ThreadNavigationItem = NavigationMenuItem & {
   updatedAt: number
 }
@@ -27,20 +26,21 @@ const route = useRoute()
 const { loaded, refreshProjects, startProject, getProject } = useProjects()
 const { getClient } = useRpc()
 const { closePanel } = useThreadPanel()
-
-const threads = ref<ThreadSummary[]>([])
-const loading = ref(false)
-const error = ref<string | null>(null)
+const currentThreadSummaries = () => useThreadSummaries(props.projectId ?? '__missing-project__')
+const threads = computed(() => currentThreadSummaries().threads.value)
+const loading = computed(() => currentThreadSummaries().loading.value)
+const error = computed(() => currentThreadSummaries().error.value)
 
 const project = computed(() => getProject(props.projectId))
 
 const fetchThreads = async () => {
-  if (!props.projectId || loading.value) {
+  const threadSummaries = currentThreadSummaries()
+  if (!props.projectId || threadSummaries.loading.value) {
     return
   }
 
-  loading.value = true
-  error.value = null
+  threadSummaries.setLoading(true)
+  threadSummaries.setError(null)
 
   try {
     if (!loaded.value) {
@@ -57,17 +57,17 @@ const fetchThreads = async () => {
       cwd: project.value?.projectPath ?? null
     })
 
-    threads.value = response.data
+    threadSummaries.setThreads(response.data
       .map(thread => ({
         id: thread.id,
-        title: (thread.name ?? thread.preview.trim()) || thread.id,
+        title: resolveThreadSummaryTitle(thread),
         updatedAt: thread.updatedAt
       }))
-      .sort((left, right) => right.updatedAt - left.updatedAt)
+    )
   } catch (caughtError) {
-    error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
+    threadSummaries.setError(caughtError instanceof Error ? caughtError.message : String(caughtError))
   } finally {
-    loading.value = false
+    threadSummaries.setLoading(false)
   }
 }
 const activeThreadId = computed(() => {
@@ -80,7 +80,7 @@ const threadItems = computed<ThreadNavigationItem[][]>(() => {
     return [[]]
   }
 
-  return [threads.value.map(thread => ({
+  return [threads.value.map((thread: ThreadSummary) => ({
     label: thread.title,
     icon: 'i-lucide-message-square-text',
     to: toProjectThreadRoute(props.projectId!, thread.id),
@@ -104,7 +104,7 @@ onMounted(() => {
 })
 
 watch(() => props.projectId, () => {
-  threads.value = []
+  currentThreadSummaries().setThreads([])
   void fetchThreads()
 }, { immediate: true })
 

package/app/composables/useThreadSummaries.ts

@@ -0,0 +1,99 @@
+import { ref, type Ref } from 'vue'
+import type { CodexThread } from '~~/shared/codex-rpc'
+
+export type ThreadSummary = {
+  id: string
+  title: string
+  updatedAt: number
+}
+
+type ThreadSummariesState = {
+  threads: Ref<ThreadSummary[]>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+}
+
+type UseThreadSummariesResult = ThreadSummariesState & {
+  setThreads: (nextThreads: ThreadSummary[]) => void
+  setLoading: (nextLoading: boolean) => void
+  setError: (nextError: string | null) => void
+  syncThreadSummary: (thread: Pick<CodexThread, 'id' | 'name' | 'preview' | 'updatedAt'>) => void
+  updateThreadSummaryTitle: (threadId: string, title: string, updatedAt?: number) => void
+}
+
+const states = new Map<string, ThreadSummariesState>()
+
+export const resolveThreadSummaryTitle = (thread: Pick<CodexThread, 'id' | 'name' | 'preview'>) => {
+  const nextTitle = thread.name?.trim() || thread.preview.trim()
+  return nextTitle || `Thread ${thread.id}`
+}
+
+export const mergeThreadSummary = (threads: ThreadSummary[], nextThread: ThreadSummary) => {
+  const filtered = threads.filter(thread => thread.id !== nextThread.id)
+  return [...filtered, nextThread].sort((left, right) => right.updatedAt - left.updatedAt)
+}
+
+export const renameThreadSummary = (
+  threads: ThreadSummary[],
+  input: {
+    threadId: string
+    title: string
+    updatedAt?: number
+  }
+) => {
+  const nextTitle = input.title.trim()
+  if (!nextTitle) {
+    return threads
+  }
+
+  const existing = threads.find(thread => thread.id === input.threadId)
+  return mergeThreadSummary(threads, {
+    id: input.threadId,
+    title: nextTitle,
+    updatedAt: input.updatedAt ?? existing?.updatedAt ?? Date.now()
+  })
+}
+
+const createState = (): ThreadSummariesState => ({
+  threads: ref<ThreadSummary[]>([]),
+  loading: ref(false),
+  error: ref<string | null>(null)
+})
+
+const createApi = (state: ThreadSummariesState): UseThreadSummariesResult => ({
+  ...state,
+  setThreads: (nextThreads: ThreadSummary[]) => {
+    state.threads.value = [...nextThreads].sort((left, right) => right.updatedAt - left.updatedAt)
+  },
+  setLoading: (nextLoading: boolean) => {
+    state.loading.value = nextLoading
+  },
+  setError: (nextError: string | null) => {
+    state.error.value = nextError
+  },
+  syncThreadSummary: (thread: Pick<CodexThread, 'id' | 'name' | 'preview' | 'updatedAt'>) => {
+    state.threads.value = mergeThreadSummary(state.threads.value, {
+      id: thread.id,
+      title: resolveThreadSummaryTitle(thread),
+      updatedAt: thread.updatedAt
+    })
+  },
+  updateThreadSummaryTitle: (threadId: string, title: string, updatedAt?: number) => {
+    state.threads.value = renameThreadSummary(state.threads.value, {
+      threadId,
+      title,
+      updatedAt
+    })
+  }
+})
+
+export const useThreadSummaries = (projectId: string): UseThreadSummariesResult => {
+  const existing = states.get(projectId)
+  if (existing) {
+    return createApi(existing)
+  }
+
+  const state = createState()
+  states.set(projectId, state)
+  return createApi(state)
+}

package/app/utils/chat-messages-status.ts

@@ -0,0 +1,16 @@
+import type { ChatStatus } from '../composables/useChatSession'
+
+export const shouldAwaitAssistantOutput = (
+  submissionMethod: 'turn/start' | 'turn/steer'
+) => submissionMethod === 'turn/start'
+
+export const resolveChatMessagesStatus = (
+  status: ChatStatus,
+  awaitingAssistantOutput: boolean
+): ChatStatus => {
+  if (status === 'ready' || status === 'error') {
+    return status
+  }
+
+  return awaitingAssistantOutput ? 'submitted' : 'streaming'
+}

package/app/utils/chat-turn-engagement.ts

@@ -16,6 +16,35 @@ const interruptIgnoredMethods = new Set([
 export const resolveTurnSubmissionMethod = (hasActiveTurn: boolean) =>
   hasActiveTurn ? 'turn/steer' : 'turn/start'
 
+export const hasSteerableTurn = (input: {
+  activeThreadId: string | null
+  liveStreamThreadId: string | null
+  liveStreamTurnId: string | null
+}) =>
+  input.activeThreadId !== null
+  && input.liveStreamThreadId === input.activeThreadId
+  && input.liveStreamTurnId !== null
+
+export const shouldSubmitViaTurnSteer = (input: {
+  activeThreadId: string | null
+  liveStreamThreadId: string | null
+  liveStreamTurnId: string | null
+  status: PromptSubmitStatus
+}) =>
+  input.activeThreadId !== null
+  && input.liveStreamThreadId === input.activeThreadId
+  && (input.liveStreamTurnId !== null || input.status === 'submitted' || input.status === 'streaming')
+
+export const shouldAwaitThreadHydration = (input: {
+  hasPendingThreadHydration: boolean
+  routeThreadId: string | null
+}) =>
+  input.hasPendingThreadHydration
+  && input.routeThreadId !== null
+
+export const shouldRetrySteerWithTurnStart = (message: string) =>
+  /no active turn to steer/i.test(message)
+
 export const resolvePromptSubmitStatus = (input: {
   status: PromptSubmitStatus
   hasDraftContent: boolean
@@ -30,12 +59,50 @@ export const removeChatMessage = (messages: ChatMessage[], messageId: string) =>
 export const removePendingUserMessageId = (messageIds: string[], messageId: string) =>
   messageIds.filter(candidateId => candidateId !== messageId)
 
+const isEquivalentUserMessagePart = (
+  currentPart: ChatMessage['parts'][number],
+  confirmedPart: ChatMessage['parts'][number]
+) => {
+  if (currentPart.type === 'text' && confirmedPart.type === 'text') {
+    return currentPart.text === confirmedPart.text
+  }
+
+  if (currentPart.type === 'attachment' && confirmedPart.type === 'attachment') {
+    return currentPart.attachment.kind === confirmedPart.attachment.kind
+      && currentPart.attachment.name === confirmedPart.attachment.name
+  }
+
+  return false
+}
+
+const findOptimisticUserMessageIndex = (
+  messages: ChatMessage[],
+  optimisticMessageId: string,
+  confirmedMessage: ChatMessage
+) => {
+  const directIndex = messages.findIndex(message => message.id === optimisticMessageId)
+  if (directIndex !== -1) {
+    return directIndex
+  }
+
+  if (confirmedMessage.role !== 'user') {
+    return -1
+  }
+
+  return messages.findIndex(message =>
+    message.role === 'user'
+    && message.pending === true
+    && message.parts.length === confirmedMessage.parts.length
+    && message.parts.every((part, index) => isEquivalentUserMessagePart(part, confirmedMessage.parts[index]!))
+  )
+}
+
 export const reconcileOptimisticUserMessage = (
   messages: ChatMessage[],
   optimisticMessageId: string,
   confirmedMessage: ChatMessage
 ) => {
-  const index = messages.findIndex(message => message.id === optimisticMessageId)
+  const index = findOptimisticUserMessageIndex(messages, optimisticMessageId, confirmedMessage)
   if (index === -1) {
     return upsertStreamingMessage(messages, confirmedMessage)
   }

package/app/utils/project-sidebar-order.ts

@@ -0,0 +1,24 @@
+export const sortSidebarProjects = <T extends { projectId: string }>(
+  projects: T[],
+  activeProjectId: string | null
+) => {
+  const alphabeticalProjects = [...projects].sort((left, right) =>
+    left.projectId.localeCompare(right.projectId)
+  )
+
+  if (!activeProjectId) {
+    return alphabeticalProjects
+  }
+
+  const activeIndex = alphabeticalProjects.findIndex(project => project.projectId === activeProjectId)
+  if (activeIndex < 0) {
+    return alphabeticalProjects
+  }
+
+  const [activeProject] = alphabeticalProjects.splice(activeIndex, 1)
+  if (!activeProject) {
+    return alphabeticalProjects
+  }
+
+  return [activeProject, ...alphabeticalProjects]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codori/client",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": false,
   "description": "Codori Nuxt dashboard for project browsing, Codex chat, and thread resume.",
   "type": "module",

package/shared/codex-chat.ts

@@ -2,7 +2,6 @@ import type { CodexThread, CodexThreadItem, CodexUserInput } from './codex-rpc'
 
 export const EVENT_PART = 'data-thread-event' as const
 export const ITEM_PART = 'data-thread-item' as const
-export const THINKING_PLACEHOLDER_MESSAGE_ID = 'assistant-thinking-placeholder'
 
 export type ThreadEventData =
   | {
@@ -377,29 +376,3 @@ export const replaceStreamingMessage = (messages: ChatMessage[], nextMessage: Ch
   nextMessages.splice(existingIndex, 1, normalizedMessage)
   return nextMessages
 }
-
-export const buildThinkingPlaceholderMessage = (): ChatMessage => ({
-  id: THINKING_PLACEHOLDER_MESSAGE_ID,
-  role: 'assistant',
-  pending: true,
-  parts: [{
-    type: 'reasoning',
-    summary: ['Thinking...'],
-    content: [],
-    state: 'streaming'
-  }]
-})
-
-export const showThinkingPlaceholder = (messages: ChatMessage[]) =>
-  upsertStreamingMessage(messages, buildThinkingPlaceholderMessage())
-
-export const hideThinkingPlaceholder = (messages: ChatMessage[]) => {
-  const index = messages.findIndex(message => message.id === THINKING_PLACEHOLDER_MESSAGE_ID)
-  if (index === -1) {
-    return messages
-  }
-
-  const nextMessages = messages.slice()
-  nextMessages.splice(index, 1)
-  return nextMessages
-}

package/shared/codex-rpc.ts

@@ -259,6 +259,22 @@ export const notificationTurnId = (notification: CodexRpcNotification) => {
   return null
 }
 
+export const notificationThreadName = (notification: CodexRpcNotification) => {
+  const params = isObjectRecord(notification.params) ? notification.params : null
+  const thread = isObjectRecord(params?.thread) ? params.thread : null
+  const directName = thread?.name ?? params?.name ?? params?.title
+
+  return typeof directName === 'string' ? directName : null
+}
+
+export const notificationThreadUpdatedAt = (notification: CodexRpcNotification) => {
+  const params = isObjectRecord(notification.params) ? notification.params : null
+  const thread = isObjectRecord(params?.thread) ? params.thread : null
+  const directUpdatedAt = thread?.updatedAt ?? params?.updatedAt
+
+  return typeof directUpdatedAt === 'number' ? directUpdatedAt : undefined
+}
+
 export class CodexRpcClient {
   private readonly url: string