@codori/client 0.0.1

package/app/components/ChatWorkspace.vue

@@ -0,0 +1,1499 @@
+<script setup lang="ts">
+import { useRouter } from '#imports'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import MessageContent from './MessageContent.vue'
+import { useChatSession, type SubagentPanelState } from '../composables/useChatSession.js'
+import { useProjects } from '../composables/useProjects.js'
+import { useRpc } from '../composables/useRpc.js'
+import { useChatSubmitGuard } from '../composables/useChatSubmitGuard.js'
+import {
+  ITEM_PART,
+  eventToMessage,
+  isSubagentActiveStatus,
+  itemToMessages,
+  threadToMessages,
+  upsertStreamingMessage,
+  type ChatMessage,
+  type ChatPart,
+  type FileChangeItem,
+  type ItemData,
+  type McpToolCallItem
+} from '~~/shared/codex-chat.js'
+import {
+  notificationThreadId,
+  notificationTurnId,
+  type CodexRpcNotification,
+  type CodexThread,
+  type CodexThreadItem,
+  type ThreadReadResponse,
+  type ThreadResumeResponse,
+  type ThreadStartResponse,
+  type TurnStartResponse
+} from '~~/shared/codex-rpc.js'
+import { toProjectThreadRoute } from '~~/shared/codori.js'
+
+const props = defineProps<{
+  projectId: string
+  threadId?: string | null
+}>()
+
+const router = useRouter()
+const { getClient } = useRpc()
+const {
+  loaded,
+  refreshProjects,
+  getProject,
+  startProject
+} = useProjects()
+const {
+  onCompositionStart,
+  onCompositionEnd,
+  shouldSubmit
+} = useChatSubmitGuard()
+
+const input = ref('')
+const scrollViewport = ref<HTMLElement | null>(null)
+const pinnedToBottom = ref(true)
+const session = useChatSession(props.projectId)
+const {
+  messages,
+  subagentPanels,
+  status,
+  error,
+  activeThreadId,
+  threadTitle,
+  pendingThreadId,
+  autoRedirectThreadId,
+  loadVersion
+} = 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 routeThreadId = computed(() => props.threadId ?? null)
+const projectTitle = computed(() => selectedProject.value?.projectId ?? props.projectId)
+const showWelcomeState = computed(() =>
+  !routeThreadId.value
+  && !activeThreadId.value
+  && messages.value.length === 0
+  && !isBusy.value
+)
+
+const starterPrompts = computed(() => {
+  const project = projectTitle.value
+
+  return [
+    {
+      title: 'Map the codebase',
+      text: `Summarize the structure of ${project} and identify the main entry points.`
+    },
+    {
+      title: 'Find the next task',
+      text: `Inspect ${project} and suggest the highest-impact improvement to make next.`
+    },
+    {
+      title: 'Build a plan',
+      text: `Read ${project} and propose a concrete implementation plan for the next feature.`
+    }
+  ]
+})
+
+const subagentBootstrapPromises = new Map<string, Promise<void>>()
+
+const isActiveTurnStatus = (value: string | null | undefined) => {
+  if (!value) {
+    return false
+  }
+
+  return !/(completed|failed|error|cancelled|canceled|interrupted|stopped)/i.test(value)
+}
+
+const currentLiveStream = () =>
+  session.liveStream?.threadId === activeThreadId.value
+    ? session.liveStream
+    : null
+
+const clearLiveStream = () => {
+  session.liveStream?.unsubscribe?.()
+  session.liveStream = null
+}
+
+const stripOptimisticDraftMessages = () => {
+  messages.value = messages.value.filter(message => !message.id.startsWith('local-user-'))
+}
+
+const resolveThreadTitle = (thread: { name: string | null, preview: string, id: string }) => {
+  const nextTitle = thread.name?.trim() || thread.preview.trim()
+  return nextTitle || `Thread ${thread.id}`
+}
+
+const shortThreadId = (value: string) => value.slice(0, 8)
+
+const resolveSubagentName = (
+  threadId: string,
+  thread?: Pick<CodexThread, 'agentNickname' | 'name' | 'preview'> | null
+) => {
+  const candidate = thread?.agentNickname?.trim()
+    || thread?.name?.trim()
+    || thread?.preview?.trim()
+
+  if (candidate) {
+    return candidate
+  }
+
+  return `Agent ${shortThreadId(threadId)}`
+}
+
+const getSubagentPanel = (threadId: string) =>
+  subagentPanels.value.find(panel => panel.threadId === threadId)
+
+const createSubagentPanelState = (threadId: string): SubagentPanelState => ({
+  threadId,
+  name: resolveSubagentName(threadId),
+  status: null,
+  messages: [],
+  firstSeenAt: Date.now(),
+  lastSeenAt: Date.now(),
+  turnId: null,
+  bootstrapped: false,
+  bufferedNotifications: []
+})
+
+const upsertSubagentPanel = (
+  threadId: string,
+  updater: (panel: SubagentPanelState | undefined) => SubagentPanelState
+) => {
+  const current = getSubagentPanel(threadId)
+  const nextPanel = updater(current)
+  const index = subagentPanels.value.findIndex(panel => panel.threadId === threadId)
+
+  if (index === -1) {
+    subagentPanels.value = [...subagentPanels.value, nextPanel]
+    return nextPanel
+  }
+
+  subagentPanels.value = subagentPanels.value.map((panel, panelIndex) =>
+    panelIndex === index ? nextPanel : panel
+  )
+  return nextPanel
+}
+
+const rememberObservedSubagentThread = (threadId: string) => {
+  session.liveStream?.observedSubagentThreadIds.add(threadId)
+}
+
+const isTextPart = (part: ChatPart): part is Extract<ChatPart, { type: 'text' }> =>
+  part.type === 'text'
+
+const isItemPart = (part: ChatPart): part is Extract<ChatPart, { type: typeof ITEM_PART }> =>
+  part.type === ITEM_PART
+
+const getFallbackItemData = (message: ChatMessage) => {
+  const itemPart = message.parts.find(isItemPart)
+  if (!itemPart) {
+    throw new Error('Expected fallback item part.')
+  }
+
+  return itemPart.data
+}
+
+const updatePinnedState = () => {
+  const viewport = scrollViewport.value
+  if (!viewport) {
+    return
+  }
+
+  pinnedToBottom.value = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight < 80
+}
+
+const scrollToBottom = (behavior: ScrollBehavior = 'auto') => {
+  const viewport = scrollViewport.value
+  if (!viewport) {
+    return
+  }
+
+  viewport.scrollTo({
+    top: viewport.scrollHeight,
+    behavior
+  })
+}
+
+const scheduleScrollToBottom = async (behavior: ScrollBehavior = 'auto') => {
+  await nextTick()
+
+  if (!import.meta.client) {
+    scrollToBottom(behavior)
+    return
+  }
+
+  requestAnimationFrame(() => {
+    if (pinnedToBottom.value || isBusy.value) {
+      scrollToBottom(behavior)
+    }
+  })
+}
+
+const ensureProjectRuntime = async () => {
+  if (!loaded.value) {
+    await refreshProjects()
+  }
+
+  if (selectedProject.value?.status === 'running') {
+    return
+  }
+
+  await startProject(props.projectId)
+}
+
+const hydrateThread = async (threadId: string) => {
+  const requestVersion = loadVersion.value + 1
+  loadVersion.value = requestVersion
+  error.value = null
+
+  try {
+    await ensureProjectRuntime()
+    const client = getClient(props.projectId)
+    activeThreadId.value = threadId
+
+    const existingLiveStream = currentLiveStream()
+
+    if (!existingLiveStream) {
+      const nextLiveStream = {
+        threadId,
+        turnId: null,
+        bufferedNotifications: [] as CodexRpcNotification[],
+        observedSubagentThreadIds: new Set<string>(),
+        unsubscribe: null as (() => void) | null
+      }
+
+      nextLiveStream.unsubscribe = client.subscribe((notification) => {
+        const targetThreadId = notificationThreadId(notification)
+        if (!targetThreadId) {
+          return
+        }
+
+        if (targetThreadId !== threadId) {
+          if (nextLiveStream.observedSubagentThreadIds.has(targetThreadId)) {
+            applySubagentNotification(targetThreadId, notification)
+          }
+          return
+        }
+
+        if (!nextLiveStream.turnId) {
+          nextLiveStream.bufferedNotifications.push(notification)
+          return
+        }
+
+        const turnId = notificationTurnId(notification)
+        if (turnId && turnId !== nextLiveStream.turnId) {
+          return
+        }
+
+        applyNotification(notification)
+      })
+
+      session.liveStream = nextLiveStream
+    }
+
+    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
+    }
+
+    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))
+
+    if (!activeTurn) {
+      clearLiveStream()
+      status.value = 'ready'
+      return
+    }
+
+    if (!session.liveStream) {
+      status.value = 'streaming'
+      return
+    }
+
+    session.liveStream.turnId = 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
+      }
+
+      applyNotification(notification)
+    }
+  } catch (caughtError) {
+    clearLiveStream()
+    error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
+    status.value = 'error'
+  }
+}
+
+const resetDraftThread = () => {
+  clearLiveStream()
+  activeThreadId.value = null
+  threadTitle.value = null
+  pendingThreadId.value = null
+  autoRedirectThreadId.value = null
+  messages.value = []
+  subagentPanels.value = []
+  error.value = null
+  status.value = 'ready'
+}
+
+const ensureThread = async () => {
+  if (activeThreadId.value) {
+    return {
+      threadId: activeThreadId.value,
+      created: false
+    }
+  }
+
+  await ensureProjectRuntime()
+  const client = getClient(props.projectId)
+  const response = await client.request<ThreadStartResponse>('thread/start', {
+    cwd: selectedProject.value?.projectPath ?? null,
+    approvalPolicy: 'never',
+    experimentalRawEvents: false,
+    persistExtendedHistory: true
+  })
+
+  activeThreadId.value = response.thread.id
+  threadTitle.value = resolveThreadTitle(response.thread)
+  return {
+    threadId: response.thread.id,
+    created: true
+  }
+}
+
+const seedStreamingMessage = (item: CodexThreadItem) => {
+  const [seed] = itemToMessages(item)
+  if (!seed) {
+    return
+  }
+
+  messages.value = upsertStreamingMessage(messages.value, {
+    ...seed,
+    pending: true
+  })
+}
+
+const updateMessage = (
+  messageId: string,
+  fallbackMessage: ChatMessage,
+  transform: (message: ChatMessage) => ChatMessage
+) => {
+  const existing = messages.value.find(message => message.id === messageId)
+  messages.value = upsertStreamingMessage(messages.value, transform(existing ?? fallbackMessage))
+}
+
+const appendTextPartDelta = (
+  messageId: string,
+  delta: string,
+  fallbackMessage: ChatMessage
+) => {
+  updateMessage(messageId, fallbackMessage, (message) => {
+    const partIndex = message.parts.findIndex(isTextPart)
+    const existingTextPart = partIndex === -1 ? null : message.parts[partIndex] as Extract<ChatPart, { type: 'text' }>
+    const nextText = existingTextPart ? `${existingTextPart.text}${delta}` : delta
+    const nextTextPart: Extract<ChatPart, { type: 'text' }> = {
+      type: 'text',
+      text: nextText,
+      state: 'streaming'
+    }
+    const nextParts = partIndex === -1
+      ? [...message.parts, nextTextPart]
+      : message.parts.map((part, index) => index === partIndex ? nextTextPart : part)
+
+    return {
+      ...message,
+      pending: true,
+      parts: nextParts
+    }
+  })
+}
+
+const updateItemPart = (
+  messageId: string,
+  fallbackMessage: ChatMessage,
+  transform: (itemData: ItemData) => ItemData
+) => {
+  updateMessage(messageId, fallbackMessage, (message) => {
+    const partIndex = message.parts.findIndex(isItemPart)
+    const existingData = partIndex === -1 ? null : (message.parts[partIndex] as Extract<ChatPart, { type: typeof ITEM_PART }>).data
+    const nextData = transform(existingData ?? getFallbackItemData(fallbackMessage))
+    const nextPart: Extract<ChatPart, { type: typeof ITEM_PART }> = {
+      type: ITEM_PART,
+      data: nextData
+    }
+    const nextParts = partIndex === -1
+      ? [...message.parts, nextPart]
+      : message.parts.map((part, index) => index === partIndex ? nextPart : part)
+
+    return {
+      ...message,
+      pending: true,
+      parts: nextParts
+    }
+  })
+}
+
+const fallbackCommandMessage = (itemId: string): ChatMessage => ({
+  id: itemId,
+  role: 'system',
+  pending: true,
+  parts: [{
+    type: ITEM_PART,
+    data: {
+      kind: 'command_execution',
+      item: {
+        type: 'commandExecution',
+        id: itemId,
+        command: 'Command',
+        aggregatedOutput: '',
+        exitCode: null,
+        status: 'inProgress'
+      }
+    }
+  }]
+})
+
+const fallbackFileChangeMessage = (itemId: string): ChatMessage => ({
+  id: itemId,
+  role: 'system',
+  pending: true,
+  parts: [{
+    type: ITEM_PART,
+    data: {
+      kind: 'file_change',
+      item: {
+        type: 'fileChange',
+        id: itemId,
+        changes: [],
+        status: 'inProgress',
+        liveOutput: ''
+      }
+    }
+  }]
+})
+
+const fallbackMcpToolMessage = (itemId: string): ChatMessage => ({
+  id: itemId,
+  role: 'system',
+  pending: true,
+  parts: [{
+    type: ITEM_PART,
+    data: {
+      kind: 'mcp_tool_call',
+      item: {
+        type: 'mcpToolCall',
+        id: itemId,
+        server: 'mcp',
+        tool: 'tool',
+        arguments: null,
+        result: null,
+        error: null,
+        status: 'inProgress',
+        progressMessages: []
+      }
+    }
+  }]
+})
+
+const fallbackCommandItemData = (itemId: string) =>
+  getFallbackItemData(fallbackCommandMessage(itemId)) as Extract<ItemData, { kind: 'command_execution' }>
+
+const fallbackFileChangeItemData = (itemId: string) =>
+  getFallbackItemData(fallbackFileChangeMessage(itemId)) as Extract<ItemData, { kind: 'file_change' }>
+
+const fallbackMcpToolItemData = (itemId: string) =>
+  getFallbackItemData(fallbackMcpToolMessage(itemId)) as Extract<ItemData, { kind: 'mcp_tool_call' }>
+
+const pushEventMessage = (kind: 'turn.failed' | 'stream.error', messageText: string) => {
+  messages.value = upsertStreamingMessage(
+    messages.value,
+    eventToMessage(`event-${kind}-${Date.now()}`, kind === 'turn.failed'
+      ? {
+          kind,
+          error: {
+            message: messageText
+          }
+        }
+      : {
+          kind,
+          message: messageText
+        })
+  )
+}
+
+const updateSubagentPanelMessages = (
+  threadId: string,
+  updater: (panelMessages: ChatMessage[]) => ChatMessage[]
+) => {
+  upsertSubagentPanel(threadId, (panel) => {
+    const basePanel = panel ?? createSubagentPanelState(threadId)
+    return {
+      ...basePanel,
+      messages: updater(basePanel.messages),
+      lastSeenAt: Date.now()
+    }
+  })
+}
+
+const updateSubagentMessage = (
+  threadId: string,
+  messageId: string,
+  fallbackMessage: ChatMessage,
+  transform: (message: ChatMessage) => ChatMessage
+) => {
+  updateSubagentPanelMessages(threadId, (panelMessages) => {
+    const existing = panelMessages.find(message => message.id === messageId)
+    return upsertStreamingMessage(panelMessages, transform(existing ?? fallbackMessage))
+  })
+}
+
+const appendSubagentTextPartDelta = (
+  threadId: string,
+  messageId: string,
+  delta: string,
+  fallbackMessage: ChatMessage
+) => {
+  updateSubagentMessage(threadId, messageId, fallbackMessage, (message) => {
+    const partIndex = message.parts.findIndex(isTextPart)
+    const existingTextPart = partIndex === -1 ? null : message.parts[partIndex] as Extract<ChatPart, { type: 'text' }>
+    const nextText = existingTextPart ? `${existingTextPart.text}${delta}` : delta
+    const nextTextPart: Extract<ChatPart, { type: 'text' }> = {
+      type: 'text',
+      text: nextText,
+      state: 'streaming'
+    }
+    const nextParts = partIndex === -1
+      ? [...message.parts, nextTextPart]
+      : message.parts.map((part, index) => index === partIndex ? nextTextPart : part)
+
+    return {
+      ...message,
+      pending: true,
+      parts: nextParts
+    }
+  })
+}
+
+const updateSubagentItemPart = (
+  threadId: string,
+  messageId: string,
+  fallbackMessage: ChatMessage,
+  transform: (itemData: ItemData) => ItemData
+) => {
+  updateSubagentMessage(threadId, messageId, fallbackMessage, (message) => {
+    const partIndex = message.parts.findIndex(isItemPart)
+    const existingData = partIndex === -1 ? null : (message.parts[partIndex] as Extract<ChatPart, { type: typeof ITEM_PART }>).data
+    const nextData = transform(existingData ?? getFallbackItemData(fallbackMessage))
+    const nextPart: Extract<ChatPart, { type: typeof ITEM_PART }> = {
+      type: ITEM_PART,
+      data: nextData
+    }
+    const nextParts = partIndex === -1
+      ? [...message.parts, nextPart]
+      : message.parts.map((part, index) => index === partIndex ? nextPart : part)
+
+    return {
+      ...message,
+      pending: true,
+      parts: nextParts
+    }
+  })
+}
+
+const pushSubagentEventMessage = (threadId: string, kind: 'turn.failed' | 'stream.error', messageText: string) => {
+  updateSubagentPanelMessages(threadId, (panelMessages) =>
+    upsertStreamingMessage(
+      panelMessages,
+      eventToMessage(`subagent-event-${threadId}-${kind}-${Date.now()}`, kind === 'turn.failed'
+        ? {
+            kind,
+            error: {
+              message: messageText
+            }
+          }
+        : {
+            kind,
+            message: messageText
+          })
+    )
+  )
+}
+
+const seedSubagentStreamingMessage = (threadId: string, item: CodexThreadItem) => {
+  const [seed] = itemToMessages(item)
+  if (!seed) {
+    return
+  }
+
+  updateSubagentPanelMessages(threadId, (panelMessages) =>
+    upsertStreamingMessage(panelMessages, {
+      ...seed,
+      pending: true
+    })
+  )
+}
+
+const bootstrapSubagentPanel = async (threadId: string) => {
+  if (!threadId) {
+    return
+  }
+
+  const existingPromise = subagentBootstrapPromises.get(threadId)
+  if (existingPromise) {
+    await existingPromise
+    return
+  }
+
+  const bootstrapPromise = (async () => {
+    try {
+      await ensureProjectRuntime()
+      const client = getClient(props.projectId)
+      const response = await client.request<ThreadReadResponse>('thread/read', {
+        threadId,
+        includeTurns: true
+      })
+      const activeTurn = [...response.thread.turns].reverse().find(turn => isActiveTurnStatus(turn.status))
+      const pendingNotifications = getSubagentPanel(threadId)?.bufferedNotifications.slice() ?? []
+
+      upsertSubagentPanel(threadId, (panel) => {
+        const basePanel = panel ?? createSubagentPanelState(threadId)
+        return {
+          ...basePanel,
+          name: resolveSubagentName(threadId, response.thread),
+          messages: threadToMessages(response.thread),
+          turnId: activeTurn?.id ?? null,
+          bootstrapped: true,
+          bufferedNotifications: [],
+          status: panel?.status
+            ?? (activeTurn ? 'running' : basePanel.status)
+            ?? null,
+          lastSeenAt: Date.now()
+        }
+      })
+
+      for (const notification of pendingNotifications) {
+        applySubagentNotification(threadId, notification)
+      }
+    } catch {
+      upsertSubagentPanel(threadId, (panel) => ({
+        ...(panel ?? createSubagentPanelState(threadId)),
+        lastSeenAt: Date.now()
+      }))
+    } finally {
+      subagentBootstrapPromises.delete(threadId)
+    }
+  })()
+
+  subagentBootstrapPromises.set(threadId, bootstrapPromise)
+  await bootstrapPromise
+}
+
+const applySubagentActivityItem = (item: Extract<CodexThreadItem, { type: 'collabAgentToolCall' }>) => {
+  const orderedThreadIds = [
+    ...item.receiverThreadIds,
+    ...Object.keys(item.agentsStates).filter(threadId => !item.receiverThreadIds.includes(threadId))
+  ]
+
+  for (const threadId of orderedThreadIds) {
+    const agentState = item.agentsStates[threadId]
+    rememberObservedSubagentThread(threadId)
+    upsertSubagentPanel(threadId, (panel) => {
+      const basePanel = panel ?? createSubagentPanelState(threadId)
+      return {
+        ...basePanel,
+        status: agentState?.status ?? basePanel.status,
+        lastSeenAt: Date.now()
+      }
+    })
+  }
+
+  for (const threadId of orderedThreadIds) {
+    void bootstrapSubagentPanel(threadId)
+  }
+}
+
+const rebuildSubagentPanelsFromThread = (thread: CodexThread) => {
+  subagentPanels.value = []
+  for (const turn of thread.turns) {
+    for (const item of turn.items) {
+      if (item.type === 'collabAgentToolCall') {
+        applySubagentActivityItem(item)
+      }
+    }
+  }
+}
+
+const applySubagentNotification = (threadId: string, notification: CodexRpcNotification) => {
+  const panel = getSubagentPanel(threadId)
+  if (!panel) {
+    return
+  }
+
+  if (!panel.bootstrapped) {
+    upsertSubagentPanel(threadId, (existingPanel) => ({
+      ...(existingPanel ?? createSubagentPanelState(threadId)),
+      bufferedNotifications: [...(existingPanel?.bufferedNotifications ?? []), notification],
+      lastSeenAt: Date.now()
+    }))
+    return
+  }
+
+  const turnId = notificationTurnId(notification)
+  if (panel.turnId && turnId && turnId !== panel.turnId && notification.method !== 'turn/started') {
+    return
+  }
+
+  switch (notification.method) {
+    case 'turn/started': {
+      upsertSubagentPanel(threadId, (existingPanel) => ({
+        ...(existingPanel ?? createSubagentPanelState(threadId)),
+        turnId: notificationTurnId(notification),
+        status: existingPanel?.status === 'completed' ? existingPanel.status : 'running',
+        lastSeenAt: Date.now()
+      }))
+      return
+    }
+    case 'item/started': {
+      const params = notification.params as { item: CodexThreadItem }
+      if (params.item.type === 'collabAgentToolCall') {
+        applySubagentActivityItem(params.item)
+      }
+      seedSubagentStreamingMessage(threadId, params.item)
+      return
+    }
+    case 'item/completed': {
+      const params = notification.params as { item: CodexThreadItem }
+      if (params.item.type === 'collabAgentToolCall') {
+        applySubagentActivityItem(params.item)
+      }
+      for (const nextMessage of itemToMessages(params.item)) {
+        updateSubagentPanelMessages(threadId, (panelMessages) =>
+          upsertStreamingMessage(panelMessages, {
+            ...nextMessage,
+            pending: false
+          })
+        )
+      }
+      return
+    }
+    case 'item/agentMessage/delta':
+    case 'item/plan/delta': {
+      const params = notification.params as { itemId: string, delta: string }
+      appendSubagentTextPartDelta(threadId, params.itemId, params.delta, {
+        id: params.itemId,
+        role: 'assistant',
+        pending: true,
+        parts: [{
+          type: 'text',
+          text: '',
+          state: 'streaming'
+        }]
+      })
+      return
+    }
+    case 'item/reasoning/textDelta':
+    case 'item/reasoning/summaryTextDelta': {
+      const params = notification.params as { itemId: string, delta: string }
+      updateSubagentMessage(threadId, params.itemId, {
+        id: params.itemId,
+        role: 'assistant',
+        pending: true,
+        parts: [{
+          type: 'reasoning',
+          summary: [],
+          content: [],
+          state: 'streaming'
+        }]
+      }, (message) => {
+        const partIndex = message.parts.findIndex(part => part.type === 'reasoning')
+        const existingPart = partIndex === -1
+          ? {
+              type: 'reasoning' as const,
+              summary: [],
+              content: []
+            }
+          : message.parts[partIndex] as Extract<ChatPart, { type: 'reasoning' }>
+        const nextPart: Extract<ChatPart, { type: 'reasoning' }> = {
+          type: 'reasoning',
+          summary: notification.method === 'item/reasoning/summaryTextDelta'
+            ? [...existingPart.summary, params.delta]
+            : existingPart.summary,
+          content: notification.method === 'item/reasoning/textDelta'
+            ? [...existingPart.content, params.delta]
+            : existingPart.content,
+          state: 'streaming'
+        }
+        const nextParts = partIndex === -1
+          ? [...message.parts, nextPart]
+          : message.parts.map((part, index) => index === partIndex ? nextPart : part)
+
+        return {
+          ...message,
+          pending: true,
+          parts: nextParts
+        }
+      })
+      return
+    }
+    case 'item/commandExecution/outputDelta': {
+      const params = notification.params as { itemId: string, delta: string }
+      const fallbackItem = fallbackCommandItemData(params.itemId)
+      updateSubagentItemPart(threadId, params.itemId, fallbackCommandMessage(params.itemId), (itemData) => ({
+        kind: 'command_execution',
+        item: {
+          ...(itemData.kind === 'command_execution' ? itemData.item : fallbackItem.item),
+          aggregatedOutput: `${(itemData.kind === 'command_execution' ? itemData.item.aggregatedOutput : '') ?? ''}${params.delta}`,
+          status: 'inProgress'
+        }
+      }))
+      return
+    }
+    case 'item/fileChange/outputDelta': {
+      const params = notification.params as { itemId: string, delta: string }
+      const fallbackItem = fallbackFileChangeItemData(params.itemId)
+      updateSubagentItemPart(threadId, params.itemId, fallbackFileChangeMessage(params.itemId), (itemData) => {
+        const baseItem: FileChangeItem = itemData.kind === 'file_change'
+          ? itemData.item
+          : fallbackItem.item
+        return {
+          kind: 'file_change',
+          item: {
+            ...baseItem,
+            liveOutput: `${baseItem.liveOutput ?? ''}${params.delta}`,
+            status: 'inProgress'
+          }
+        }
+      })
+      return
+    }
+    case 'item/mcpToolCall/progress': {
+      const params = notification.params as { itemId: string, message: string }
+      const fallbackItem = fallbackMcpToolItemData(params.itemId)
+      updateSubagentItemPart(threadId, params.itemId, fallbackMcpToolMessage(params.itemId), (itemData) => {
+        const baseItem: McpToolCallItem = itemData.kind === 'mcp_tool_call'
+          ? itemData.item
+          : fallbackItem.item
+        return {
+          kind: 'mcp_tool_call',
+          item: {
+            ...baseItem,
+            progressMessages: [...(baseItem.progressMessages ?? []), params.message],
+            status: 'inProgress'
+          }
+        }
+      })
+      return
+    }
+    case 'turn/completed': {
+      upsertSubagentPanel(threadId, (existingPanel) => ({
+        ...(existingPanel ?? createSubagentPanelState(threadId)),
+        turnId: null,
+        status: isSubagentActiveStatus(existingPanel?.status ?? null)
+          ? 'completed'
+          : existingPanel?.status ?? null,
+        lastSeenAt: Date.now()
+      }))
+      return
+    }
+    case 'turn/failed': {
+      const params = notification.params as { error?: { message?: string } }
+      const messageText = params.error?.message ?? 'The turn failed.'
+      pushSubagentEventMessage(threadId, 'turn.failed', messageText)
+      upsertSubagentPanel(threadId, (existingPanel) => ({
+        ...(existingPanel ?? createSubagentPanelState(threadId)),
+        status: 'errored',
+        turnId: null,
+        lastSeenAt: Date.now()
+      }))
+      return
+    }
+    case 'stream/error': {
+      const params = notification.params as { message?: string }
+      const messageText = params.message ?? 'The stream failed.'
+      pushSubagentEventMessage(threadId, 'stream.error', messageText)
+      upsertSubagentPanel(threadId, (existingPanel) => ({
+        ...(existingPanel ?? createSubagentPanelState(threadId)),
+        status: 'errored',
+        turnId: null,
+        lastSeenAt: Date.now()
+      }))
+      return
+    }
+    default:
+      return
+  }
+}
+
+const applyNotification = (notification: CodexRpcNotification) => {
+  switch (notification.method) {
+    case 'thread/started': {
+      const nextThreadId = notificationThreadId(notification)
+      if (!nextThreadId) {
+        return
+      }
+
+      activeThreadId.value = nextThreadId
+      pendingThreadId.value = pendingThreadId.value ?? nextThreadId
+      return
+    }
+    case 'turn/started': {
+      messages.value = upsertStreamingMessage(
+        messages.value,
+        eventToMessage(`event-turn-started-${notificationTurnId(notification) ?? Date.now()}`, {
+          kind: 'turn.started'
+        })
+      )
+      status.value = 'streaming'
+      return
+    }
+    case 'item/started': {
+      const params = notification.params as { item: CodexThreadItem }
+      if (params.item.type === 'collabAgentToolCall') {
+        applySubagentActivityItem(params.item)
+      }
+      seedStreamingMessage(params.item)
+      status.value = 'streaming'
+      return
+    }
+    case 'item/completed': {
+      const params = notification.params as { item: CodexThreadItem }
+      if (params.item.type === 'collabAgentToolCall') {
+        applySubagentActivityItem(params.item)
+      }
+      if (params.item.type === 'userMessage') {
+        stripOptimisticDraftMessages()
+      }
+      for (const nextMessage of itemToMessages(params.item)) {
+        messages.value = upsertStreamingMessage(messages.value, {
+          ...nextMessage,
+          pending: false
+        })
+      }
+      return
+    }
+    case 'item/agentMessage/delta': {
+      const params = notification.params as { itemId: string, delta: string }
+      appendTextPartDelta(params.itemId, params.delta, {
+        id: params.itemId,
+        role: 'assistant',
+        pending: true,
+        parts: [{
+          type: 'text',
+          text: '',
+          state: 'streaming'
+        }]
+      })
+      status.value = 'streaming'
+      return
+    }
+    case 'item/plan/delta': {
+      const params = notification.params as { itemId: string, delta: string }
+      appendTextPartDelta(params.itemId, params.delta, {
+        id: params.itemId,
+        role: 'assistant',
+        pending: true,
+        parts: [{
+          type: 'text',
+          text: '',
+          state: 'streaming'
+        }]
+      })
+      status.value = 'streaming'
+      return
+    }
+    case 'item/reasoning/textDelta':
+    case 'item/reasoning/summaryTextDelta': {
+      const params = notification.params as { itemId: string, delta: string }
+      updateMessage(params.itemId, {
+        id: params.itemId,
+        role: 'assistant',
+        pending: true,
+        parts: [{
+          type: 'reasoning',
+          summary: [],
+          content: [],
+          state: 'streaming'
+        }]
+      }, (message) => {
+        const partIndex = message.parts.findIndex(part => part.type === 'reasoning')
+        const existingPart = partIndex === -1
+          ? {
+              type: 'reasoning' as const,
+              summary: [],
+              content: []
+            }
+          : message.parts[partIndex] as Extract<ChatPart, { type: 'reasoning' }>
+        const nextPart: Extract<ChatPart, { type: 'reasoning' }> = {
+          type: 'reasoning',
+          summary: notification.method === 'item/reasoning/summaryTextDelta'
+            ? [...existingPart.summary, params.delta]
+            : existingPart.summary,
+          content: notification.method === 'item/reasoning/textDelta'
+            ? [...existingPart.content, params.delta]
+            : existingPart.content,
+          state: 'streaming'
+        }
+        const nextParts = partIndex === -1
+          ? [...message.parts, nextPart]
+          : message.parts.map((part, index) => index === partIndex ? nextPart : part)
+
+        return {
+          ...message,
+          pending: true,
+          parts: nextParts
+        }
+      })
+      status.value = 'streaming'
+      return
+    }
+    case 'item/commandExecution/outputDelta': {
+      const params = notification.params as { itemId: string, delta: string }
+      const fallbackItem = fallbackCommandItemData(params.itemId)
+      updateItemPart(params.itemId, fallbackCommandMessage(params.itemId), (itemData) => ({
+        kind: 'command_execution',
+        item: {
+          ...(itemData.kind === 'command_execution' ? itemData.item : fallbackItem.item),
+          aggregatedOutput: `${(itemData.kind === 'command_execution' ? itemData.item.aggregatedOutput : '') ?? ''}${params.delta}`,
+          status: 'inProgress'
+        }
+      }))
+      status.value = 'streaming'
+      return
+    }
+    case 'item/fileChange/outputDelta': {
+      const params = notification.params as { itemId: string, delta: string }
+      const fallbackItem = fallbackFileChangeItemData(params.itemId)
+      updateItemPart(params.itemId, fallbackFileChangeMessage(params.itemId), (itemData) => {
+        const baseItem: FileChangeItem = itemData.kind === 'file_change'
+          ? itemData.item
+          : fallbackItem.item
+        return {
+          kind: 'file_change',
+          item: {
+            ...baseItem,
+            liveOutput: `${baseItem.liveOutput ?? ''}${params.delta}`,
+            status: 'inProgress'
+          }
+        }
+      })
+      status.value = 'streaming'
+      return
+    }
+    case 'item/mcpToolCall/progress': {
+      const params = notification.params as { itemId: string, message: string }
+      const fallbackItem = fallbackMcpToolItemData(params.itemId)
+      updateItemPart(params.itemId, fallbackMcpToolMessage(params.itemId), (itemData) => {
+        const baseItem: McpToolCallItem = itemData.kind === 'mcp_tool_call'
+          ? itemData.item
+          : fallbackItem.item
+        return {
+          kind: 'mcp_tool_call',
+          item: {
+            ...baseItem,
+            progressMessages: [...(baseItem.progressMessages ?? []), params.message],
+            status: 'inProgress'
+          }
+        }
+      })
+      status.value = 'streaming'
+      return
+    }
+    case 'turn/failed': {
+      const params = notification.params as { error?: { message?: string } }
+      const messageText = params.error?.message ?? 'The turn failed.'
+      pushEventMessage('turn.failed', messageText)
+      clearLiveStream()
+      error.value = messageText
+      status.value = 'error'
+      return
+    }
+    case 'stream/error': {
+      const params = notification.params as { message?: string }
+      const messageText = params.message ?? 'The stream failed.'
+      pushEventMessage('stream.error', messageText)
+      clearLiveStream()
+      error.value = messageText
+      status.value = 'error'
+      return
+    }
+    case 'turn/completed': {
+      status.value = 'ready'
+      clearLiveStream()
+      return
+    }
+    default:
+      return
+  }
+}
+
+const sendMessage = async () => {
+  const text = input.value.trim()
+  if (!text) {
+    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]
+  }
+  let unsubscribe: (() => void) | 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
+    }
+
+    clearLiveStream()
+
+    const completion = new Promise<void>((resolve, reject) => {
+      resolveCompletion = resolve
+      rejectCompletion = (caughtError: Error) => reject(caughtError)
+    })
+
+    const liveStream = {
+      threadId,
+      turnId: null as string | null,
+      bufferedNotifications: buffered,
+      observedSubagentThreadIds: new Set<string>(),
+      unsubscribe: null as (() => void) | null
+    }
+
+    unsubscribe = client.subscribe((notification) => {
+      const targetThreadId = notificationThreadId(notification)
+      if (!targetThreadId) {
+        return
+      }
+
+      if (targetThreadId !== threadId) {
+        if (liveStream.observedSubagentThreadIds.has(targetThreadId)) {
+          applySubagentNotification(targetThreadId, notification)
+        }
+        return
+      }
+
+      if (!currentTurnId) {
+        buffered.push(notification)
+        return
+      }
+
+      settleNotification(notification)
+    })
+    liveStream.unsubscribe = unsubscribe
+    session.liveStream = liveStream
+
+    if (created && !routeThreadId.value) {
+      pendingThreadId.value = threadId
+    }
+
+    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
+
+    for (const notification of buffered.splice(0, buffered.length)) {
+      if (settleNotification(notification) && completionResolved) {
+        break
+      }
+    }
+
+    await completion
+    status.value = 'ready'
+
+    if (routeThreadId.value) {
+      await hydrateThread(threadId)
+      return
+    }
+  } catch (caughtError) {
+    unsubscribe?.()
+    if (session.liveStream?.unsubscribe === unsubscribe) {
+      session.liveStream = null
+    }
+    error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
+    status.value = 'error'
+  }
+}
+
+const sendStarterPrompt = async (text: string) => {
+  if (isBusy.value) {
+    return
+  }
+
+  input.value = text
+  await sendMessage()
+}
+
+const onPromptEnter = (event: KeyboardEvent) => {
+  if (!shouldSubmit(event)) {
+    return
+  }
+
+  event.preventDefault()
+  void sendMessage()
+}
+
+onMounted(() => {
+  if (!loaded.value) {
+    void refreshProjects()
+  }
+
+  void scheduleScrollToBottom('auto')
+})
+
+watch(() => props.threadId ?? null, (threadId) => {
+  if (!threadId) {
+    if (isBusy.value || pendingThreadId.value) {
+      return
+    }
+
+    resetDraftThread()
+    return
+  }
+
+  if (
+    autoRedirectThreadId.value === threadId
+    && activeThreadId.value === threadId
+    && isBusy.value
+  ) {
+    autoRedirectThreadId.value = null
+    pendingThreadId.value = null
+    return
+  }
+
+  void hydrateThread(threadId)
+}, { immediate: true })
+
+watch(pendingThreadId, async (threadId) => {
+  if (!threadId) {
+    return
+  }
+
+  if (routeThreadId.value === threadId) {
+    pendingThreadId.value = null
+    autoRedirectThreadId.value = null
+    return
+  }
+
+  autoRedirectThreadId.value = threadId
+  await router.push(toProjectThreadRoute(props.projectId, threadId))
+  pendingThreadId.value = null
+})
+
+watch(messages, () => {
+  void scheduleScrollToBottom(status.value === 'streaming' ? 'auto' : 'smooth')
+}, { flush: 'post' })
+
+watch(status, (nextStatus, previousStatus) => {
+  if (nextStatus === previousStatus) {
+    return
+  }
+
+  void scheduleScrollToBottom(nextStatus === 'streaming' ? 'auto' : 'smooth')
+}, { flush: 'post' })
+</script>
+
+<template>
+  <section class="flex h-full min-h-0 flex-col bg-default">
+    <div
+      ref="scrollViewport"
+      class="min-h-0 flex-1 overflow-y-auto"
+      @scroll="updatePinnedState"
+    >
+      <div
+        v-if="showWelcomeState"
+        class="flex min-h-full items-center justify-center px-6 py-10"
+      >
+        <div class="flex w-full max-w-4xl flex-col items-center gap-10 text-center">
+          <div class="space-y-4">
+            <div class="text-xs font-medium uppercase tracking-[0.28em] text-primary">
+              Ready To Code
+            </div>
+            <div class="space-y-2">
+              <h1 class="text-balance text-4xl font-semibold tracking-tight text-highlighted md:text-5xl">
+                Let's build
+              </h1>
+              <p class="text-balance text-3xl font-medium tracking-tight text-toned md:text-4xl">
+                {{ projectTitle }}
+              </p>
+            </div>
+            <p class="mx-auto max-w-2xl text-base leading-7 text-muted md:text-lg">
+              Start with a goal, a bug, or a question. Codori will start the runtime when needed and keep the thread ready to continue.
+            </p>
+          </div>
+
+          <div class="grid w-full gap-3 md:grid-cols-3">
+            <button
+              v-for="prompt in starterPrompts"
+              :key="prompt.title"
+              type="button"
+              class="rounded-3xl border border-default/70 bg-elevated/25 px-5 py-5 text-left transition hover:border-primary/30 hover:bg-elevated/45"
+              @click="sendStarterPrompt(prompt.text)"
+            >
+              <div class="text-sm font-semibold text-highlighted">
+                {{ prompt.title }}
+              </div>
+              <p class="mt-3 text-sm leading-6 text-muted">
+                {{ prompt.text }}
+              </p>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <UChatMessages
+        v-else
+        :messages="messages"
+        :status="status"
+        :should-auto-scroll="false"
+        :should-scroll-to-bottom="false"
+        :auto-scroll="false"
+        :spacing-offset="140"
+        :user="{
+          ui: {
+            root: 'scroll-mt-4',
+            container: 'gap-3 pb-8',
+            content: 'px-4 py-3 rounded-2xl min-h-12'
+          }
+        }"
+        :ui="{
+          root: 'min-h-full px-4 py-5 md:px-6',
+          message: 'max-w-none',
+          content: 'w-full max-w-5xl'
+        }"
+        compact
+      >
+        <template #content="{ message }">
+          <MessageContent :message="message as ChatMessage" />
+        </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"
+        />
+      </UChatPrompt>
+      </div>
+    </div>
+  </section>
+</template>