better-codex 0.2.0 → 0.2.1

package/apps/backend/src/core/jsonrpc.ts

@@ -59,10 +59,12 @@ export class JsonRpcConnection extends EventEmitter {
     })
 
     stdout.on('end', () => {
+      this.rejectAllPending(new Error('connection closed'))
       this.emit('close')
     })
 
     stdout.on('error', (error) => {
+      this.rejectAllPending(error)
       this.emit('error', error)
     })
 
@@ -161,6 +163,17 @@ export class JsonRpcConnection extends EventEmitter {
   private writeMessage(message: JsonRpcRequest | JsonRpcResponse | JsonRpcNotification): void {
     this.stdin.write(`${JSON.stringify(message)}\n`)
   }
+
+  private rejectAllPending(error: Error): void {
+    if (!this.pending.size) {
+      return
+    }
+    const message = error.message || 'connection closed'
+    for (const [, pending] of this.pending) {
+      pending.reject({ message })
+    }
+    this.pending.clear()
+  }
 }
 
 export type JsonRpcEventsMap = JsonRpcEvents

package/apps/web/src/components/layout/session-view.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useMemo } from 'react'
 import { useAppStore } from '../../store'
 import { type SelectOption } from '../ui'
 import { VirtualizedMessageList } from './virtualized-message-list'
@@ -15,6 +15,7 @@ import { SessionAuthBanner } from '../session-view/session-auth-banner'
 import { SessionComposer } from '../session-view/session-composer'
 import { SessionDialogs } from '../session-view/session-dialogs'
 import { SessionEmpty } from '../session-view/session-empty'
+import { RateLimitBanner, isRateLimitError } from '../session-view/rate-limit-banner'
 
 export function SessionView() {
   const [inputValue, setInputValue] = useState('')
@@ -37,6 +38,8 @@ export function SessionView() {
   const [pendingCwd, setPendingCwd] = useState('')
   const [pendingApproval, setPendingApproval] = useState<ApprovalPolicy>('on-request')
   const [showApiKeyPrompt, setShowApiKeyPrompt] = useState(false)
+  const [showAccountSwitchDialog, setShowAccountSwitchDialog] = useState(false)
+  const [rateLimitBannerDismissed, setRateLimitBannerDismissed] = useState(false)
   // Attachments and file mentions state
   const [attachments, setAttachments] = useState<Attachment[]>([])
   const [fileMentions, setFileMentions] = useState<FileMention[]>([])
@@ -77,6 +80,7 @@ export function SessionView() {
     threadTurnStartedAt,
     threadLastTurnDuration,
     threadTokenUsage,
+    threadPendingAccountSwitch,
     setThreadModel,
     setThreadEffort,
     setThreadApproval,
@@ -93,6 +97,8 @@ export function SessionView() {
     connectionStatus,
     setMessagesForThread,
     setAccountLoginId,
+    setThreadPendingAccountSwitch,
+    setBackendToUiThreadId,
   } = useAppStore()
 
   const selectedThread = threads.find((thread) => thread.id === selectedThreadId)
@@ -119,6 +125,9 @@ export function SessionView() {
   const selectedCwd = selectedThreadId ? threadCwds[selectedThreadId] : undefined
   const selectedUsage = selectedThreadId ? threadTokenUsage[selectedThreadId] : undefined
   const webSearchEnabled = selectedThreadId ? threadWebSearch[selectedThreadId] ?? false : false
+  const selectedWebSearch = webSearchEnabled
+  // Get the effective backend thread ID (may differ from UI thread ID after account switch)
+  const effectiveBackendThreadId = selectedThread?.backendThreadId ?? selectedThreadId
   const isAccountReady = account?.status === 'online'
   const isAuthPending = account?.status === 'degraded'
   const canInteract = connectionStatus === 'connected' && !isArchived && isAccountReady
@@ -143,6 +152,34 @@ export function SessionView() {
   const mentionQuery = getMentionQuery(inputValue)
   const mentionMenuOpen = mentionQuery !== null && !slashMenuOpen
   const mentionMatches = mentionMenuOpen ? fileSearchResults : []
+
+  // Rate limit detection - check recent messages for rate limit errors
+  const rateLimitError = useMemo(() => {
+    if (!threadMessages.length) return null
+    // Check the last 5 messages for rate limit errors
+    const recentMessages = threadMessages.slice(-5)
+    for (const msg of recentMessages) {
+      if (msg.role === 'assistant' && msg.title === 'Error' && isRateLimitError(msg.content)) {
+        return msg.content
+      }
+    }
+    return null
+  }, [threadMessages])
+
+  // Get accounts available for switching (online accounts other than current)
+  const switchableAccounts = useMemo(() => {
+    return accounts.filter(
+      (a) => a.id !== threadAccountId && a.status === 'online'
+    )
+  }, [accounts, threadAccountId])
+
+  // Show rate limit banner when error detected and not dismissed
+  const showRateLimitBanner = !!rateLimitError && !rateLimitBannerDismissed && switchableAccounts.length > 0
+
+  // Reset banner dismissed state when thread changes
+  useEffect(() => {
+    setRateLimitBannerDismissed(false)
+  }, [selectedThreadId])
   
   const modelOptions = models.map((model): SelectOption => ({
     value: model.id,
@@ -426,6 +463,69 @@ export function SessionView() {
     try {
       updateThread(selectedThreadId, { status: 'active' })
       
+      // Check if this thread has a pending account switch
+      // If so, we need to start a new thread on the new account
+      const pendingSwitch = threadPendingAccountSwitch[selectedThreadId]
+      let actualThreadId = selectedThreadId
+      
+      if (pendingSwitch) {
+        // Start a new thread on the new account
+        const newAccountId = selectedThread.accountId
+        const accountModels = modelsByAccount[newAccountId] || []
+        const defaultThreadModel = accountModels.find((model) => model.isDefault) ?? accountModels[0]
+        const startParams: { model?: string; approvalPolicy?: ApprovalPolicy; config?: Record<string, unknown> } = {}
+        if (defaultThreadModel?.id) {
+          startParams.model = defaultThreadModel.id
+        }
+        if (selectedApproval) {
+          startParams.approvalPolicy = selectedApproval
+        }
+        if (selectedWebSearch) {
+          startParams.config = { 'features.web_search_request': true }
+        }
+        
+        const result = (await hubClient.request(newAccountId, 'thread/start', startParams)) as {
+          thread?: {
+            id: string
+            preview?: string
+            modelProvider?: string
+            createdAt?: number
+          }
+          reasoningEffort?: ReasoningEffort | null
+          approvalPolicy?: ApprovalPolicy | null
+        }
+        
+        if (!result.thread) {
+          throw new Error('Failed to start new thread on switched account')
+        }
+        
+        // Use the new backend thread ID for this turn
+        actualThreadId = result.thread.id
+        
+        // Map the backend thread ID to the UI thread ID so events get routed correctly
+        setBackendToUiThreadId(actualThreadId, selectedThreadId)
+        
+        // Update the local thread to use the new backend thread ID
+        // We keep the same local thread but update its properties
+        updateThread(selectedThreadId, { 
+          backendThreadId: actualThreadId,
+          status: 'active',
+        })
+        
+        // Clear the pending switch flag
+        setThreadPendingAccountSwitch(selectedThreadId, null)
+        
+        // Add a system message noting the new thread was created
+        addMessage(selectedThreadId, {
+          id: `sys-new-thread-${Date.now()}`,
+          role: 'assistant',
+          content: `New conversation started on this account. Previous context from ${pendingSwitch.previousAccountId} is shown for reference but not available to the model.`,
+          kind: 'tool',
+          title: 'New Conversation',
+          timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        })
+      }
+      
       // Build input array with text, images, and file references
       const input: Array<{ type: string; text?: string; url?: string; path?: string }> = []
       
@@ -453,7 +553,7 @@ export function SessionView() {
         cwd?: string
         approvalPolicy?: ApprovalPolicy
       } = {
-        threadId: selectedThreadId,
+        threadId: actualThreadId,
         input,
       }
       if (effectiveModel) {
@@ -656,14 +756,14 @@ export function SessionView() {
   }
 
   const runReviewCommand = async (instructions?: string) => {
-    if (!selectedThreadId || !account) {
+    if (!selectedThreadId || !account || !effectiveBackendThreadId) {
       return
     }
     const target = instructions
       ? { type: 'custom', instructions }
       : { type: 'uncommittedChanges' }
     await hubClient.request(account.id, 'review/start', {
-      threadId: selectedThreadId,
+      threadId: effectiveBackendThreadId,
       target,
       delivery: 'inline',
     })
@@ -792,6 +892,36 @@ export function SessionView() {
           setShowApprovalsDialog(true)
           return
         }
+        case 'switch': {
+          // If an account name is provided, try to switch directly
+          if (rest) {
+            const targetAccount = accounts.find(
+              (a) => a.name.toLowerCase() === rest.toLowerCase() ||
+                     a.id === rest
+            )
+            if (targetAccount && targetAccount.status === 'online' && targetAccount.id !== threadAccountId) {
+              handleSwitchThreadAccount(targetAccount.id)
+              return
+            }
+            if (targetAccount && targetAccount.id === threadAccountId) {
+              addSystemMessage('tool', '/switch', `Already using account: ${targetAccount.name}`)
+              return
+            }
+            if (targetAccount && targetAccount.status !== 'online') {
+              addSystemMessage('tool', '/switch', `Account "${targetAccount.name}" is not authenticated.`)
+              return
+            }
+            addSystemMessage('tool', '/switch', `Account "${rest}" not found.`)
+            return
+          }
+          // Show dialog if no account specified
+          if (switchableAccounts.length === 0) {
+            addSystemMessage('tool', '/switch', 'No other authenticated accounts available to switch to.')
+            return
+          }
+          setShowAccountSwitchDialog(true)
+          return
+        }
         case 'review': {
           await runReviewCommand(rest || undefined)
           return
@@ -966,12 +1096,12 @@ export function SessionView() {
   }
 
   const handleArchive = async () => {
-    if (!selectedThreadId || !selectedThread || !canInteract) {
+    if (!selectedThreadId || !selectedThread || !canInteract || !effectiveBackendThreadId) {
       return
     }
     try {
       await hubClient.request(selectedThread.accountId, 'thread/archive', {
-        threadId: selectedThreadId,
+        threadId: effectiveBackendThreadId,
       })
       updateThread(selectedThreadId, { status: 'archived' })
       clearQueuedMessages(selectedThreadId)
@@ -1123,7 +1253,7 @@ export function SessionView() {
   }
 
   const handleInterruptTurn = async () => {
-    if (!account || !selectedThreadId) {
+    if (!account || !selectedThreadId || !effectiveBackendThreadId) {
       return
     }
     const turnId = threadTurnIds[selectedThreadId]
@@ -1132,7 +1262,7 @@ export function SessionView() {
     }
     try {
       await hubClient.request(account.id, 'turn/interrupt', {
-        threadId: selectedThreadId,
+        threadId: effectiveBackendThreadId,
         turnId,
       })
     } catch {
@@ -1213,6 +1343,55 @@ export function SessionView() {
     }
   }
 
+  const handleSwitchThreadAccount = (newAccountId: string) => {
+    if (!selectedThreadId || !selectedThread) {
+      return
+    }
+    
+    const newAccount = accounts.find((a) => a.id === newAccountId)
+    if (!newAccount || newAccount.status !== 'online') {
+      setAlertDialog({
+        open: true,
+        title: 'Account Unavailable',
+        message: 'Selected account is not authenticated. Please sign in first.',
+        variant: 'warning',
+      })
+      return
+    }
+
+    const previousAccountId = selectedThread.accountId
+
+    // Mark this thread as having a pending account switch
+    // The next message sent will start a fresh conversation on the new account
+    setThreadPendingAccountSwitch(selectedThreadId, {
+      originalThreadId: selectedThreadId,
+      previousAccountId,
+    })
+
+    // Update thread's accountId
+    updateThread(selectedThreadId, { accountId: newAccountId })
+
+    // Reset model selection to the new account's default model
+    const newAccountModels = modelsByAccount[newAccountId] || []
+    const newDefaultModel = newAccountModels.find((m) => m.isDefault) ?? newAccountModels[0]
+    if (newDefaultModel) {
+      setThreadModel(selectedThreadId, newDefaultModel.id)
+      if (newDefaultModel.defaultReasoningEffort) {
+        setThreadEffort(selectedThreadId, newDefaultModel.defaultReasoningEffort)
+      }
+    }
+
+    // Add a system message to indicate the switch
+    addMessage(selectedThreadId, {
+      id: `sys-switch-${Date.now()}`,
+      role: 'assistant',
+      content: `Switched to account: ${newAccount.name}. Your next message will start a new conversation using this account.`,
+      kind: 'tool',
+      title: 'Account Switch',
+      timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+    })
+  }
+
   if (!selectedThread) {
     return <SessionEmpty onNewSession={handleEmptyNewSession} />
   }
@@ -1221,11 +1400,14 @@ export function SessionView() {
     <main className="flex-1 flex flex-col h-full bg-bg-primary overflow-hidden">
       <SessionHeader
         title={selectedThread.title}
+        accountId={selectedThread.accountId}
         accountName={account?.name}
+        accounts={accounts}
         model={selectedThread.model}
         status={selectedThread.status}
         canInteract={canInteract}
         onArchive={handleArchive}
+        onSwitchAccount={handleSwitchThreadAccount}
       />
       <SessionAuthBanner
         visible={!isAccountReady}
@@ -1235,6 +1417,14 @@ export function SessionView() {
         onCancel={account?.id && accountLoginIds[account.id] ? handleCancelAuth : undefined}
         onRefresh={account ? () => void refreshAccountStatus(account.id) : undefined}
       />
+      <RateLimitBanner
+        visible={showRateLimitBanner}
+        currentAccount={account}
+        availableAccounts={switchableAccounts}
+        errorMessage={rateLimitError ?? undefined}
+        onSwitchAccount={handleSwitchThreadAccount}
+        onDismiss={() => setRateLimitBannerDismissed(true)}
+      />
       <VirtualizedMessageList
         messages={threadMessages}
         approvals={pendingApprovals}
@@ -1347,6 +1537,11 @@ export function SessionView() {
         onCloseResumeDialog={() => setShowResumeDialog(false)}
         resumeCandidates={resumeCandidates}
         onResumeThread={handleResumeThread}
+        showAccountSwitchDialog={showAccountSwitchDialog}
+        onCloseAccountSwitchDialog={() => setShowAccountSwitchDialog(false)}
+        currentAccount={account}
+        switchableAccounts={switchableAccounts}
+        onSwitchAccount={handleSwitchThreadAccount}
         showFeedbackDialog={showFeedbackDialog}
         onCloseFeedbackDialog={() => setShowFeedbackDialog(false)}
         feedbackCategory={feedbackCategory}

package/apps/web/src/components/layout/virtualized-message-list.tsx

@@ -374,6 +374,7 @@ function getActionType(msg: Message): AssistantAction['type'] {
       return exploratory ? 'explored' : 'ran'
     }
     const title = msg.title?.toLowerCase() ?? ''
+    if (title.includes('account switch') || title.includes('new conversation')) return 'chat'
     if (title.includes('web search')) return 'searched'
     if (title.includes('read') || title.includes('view') || title.includes('list')) return 'explored'
     if (title.includes('edit') || title.includes('wrote') || title.includes('creat')) return 'edited'
@@ -678,8 +679,10 @@ export function VirtualizedMessageList({
   useEffect(() => {
     if (items.length > 0 && !initialScrollDone.current) {
       initialScrollDone.current = true
-      requestAnimationFrame(() => {
-        virtualizer.scrollToIndex(items.length - 1, { align: 'end' })
+      queueMicrotask(() => {
+        requestAnimationFrame(() => {
+          virtualizer.scrollToIndex(items.length - 1, { align: 'end' })
+        })
       })
     }
   }, [items.length, virtualizer])
@@ -707,7 +710,9 @@ export function VirtualizedMessageList({
 
     if (items.length > 0 && hasNewItems && !userHasScrolled && initialScrollDone.current) {
       isAutoScrolling.current = true
-      virtualizer.scrollToIndex(items.length - 1, { align: 'end', behavior: 'smooth' })
+      queueMicrotask(() => {
+        virtualizer.scrollToIndex(items.length - 1, { align: 'end', behavior: 'smooth' })
+      })
       setTimeout(() => {
         isAutoScrolling.current = false
       }, 500)
@@ -719,11 +724,13 @@ export function VirtualizedMessageList({
       return
     }
     isAutoScrolling.current = true
-    requestAnimationFrame(() => {
-      virtualizer.scrollToIndex(items.length - 1, { align: 'end' })
-      setTimeout(() => {
-        isAutoScrolling.current = false
-      }, 200)
+    queueMicrotask(() => {
+      requestAnimationFrame(() => {
+        virtualizer.scrollToIndex(items.length - 1, { align: 'end' })
+        setTimeout(() => {
+          isAutoScrolling.current = false
+        }, 200)
+      })
     })
   }, [isTaskRunning, userHasScrolled, lastMessageSignature, items.length, virtualizer])
 
@@ -731,7 +738,9 @@ export function VirtualizedMessageList({
     if (items.length > 0) {
       setUserHasScrolled(false)
       isAutoScrolling.current = true
-      virtualizer.scrollToIndex(items.length - 1, { align: 'end', behavior: 'smooth' })
+      queueMicrotask(() => {
+        virtualizer.scrollToIndex(items.length - 1, { align: 'end', behavior: 'smooth' })
+      })
       setTimeout(() => {
         isAutoScrolling.current = false
       }, 500)

package/apps/web/src/components/session-view/rate-limit-banner.tsx

@@ -0,0 +1,178 @@
+import { useState, useEffect } from 'react'
+import { Icons, Button } from '../ui'
+import type { Account } from '../../types'
+
+interface RateLimitBannerProps {
+  visible: boolean
+  currentAccount?: Account
+  availableAccounts: Account[]
+  errorMessage?: string
+  onSwitchAccount: (accountId: string) => void
+  onDismiss: () => void
+}
+
+export const isRateLimitError = (message: string): boolean => {
+  const lowerMessage = message.toLowerCase()
+  return (
+    lowerMessage.includes('rate limit') ||
+    lowerMessage.includes('usage limit') ||
+    lowerMessage.includes('quota exceeded') ||
+    lowerMessage.includes('too many requests') ||
+    lowerMessage.includes('request limit') ||
+    lowerMessage.includes('hit your usage limit') ||
+    lowerMessage.includes('limit reached') ||
+    lowerMessage.includes('try again') && lowerMessage.includes('limit')
+  )
+}
+
+export const RateLimitBanner = ({
+  visible,
+  currentAccount,
+  availableAccounts,
+  errorMessage,
+  onSwitchAccount,
+  onDismiss,
+}: RateLimitBannerProps) => {
+  const [selectedAccountId, setSelectedAccountId] = useState<string | null>(null)
+
+  // Auto-select first available account
+  useEffect(() => {
+    if (availableAccounts.length > 0 && !selectedAccountId) {
+      // Prefer accounts with lower usage
+      const sorted = [...availableAccounts].sort((a, b) => {
+        const aUsage = a.usage?.primary?.usedPercent ?? 0
+        const bUsage = b.usage?.primary?.usedPercent ?? 0
+        return aUsage - bUsage
+      })
+      setSelectedAccountId(sorted[0]?.id ?? null)
+    }
+  }, [availableAccounts, selectedAccountId])
+
+  if (!visible) {
+    return null
+  }
+
+  const handleSwitch = () => {
+    if (selectedAccountId) {
+      onSwitchAccount(selectedAccountId)
+      onDismiss()
+    }
+  }
+
+  const extractResetTime = (message: string): string | null => {
+    const patterns = [
+      /try again (?:at|after) ([^.]+)/i,
+      /resets? (?:at|in) ([^.]+)/i,
+      /available (?:at|after) ([^.]+)/i,
+    ]
+    for (const pattern of patterns) {
+      const match = message.match(pattern)
+      if (match) {
+        return match[1].trim()
+      }
+    }
+    return null
+  }
+
+  const resetTime = errorMessage ? extractResetTime(errorMessage) : null
+
+  return (
+    <div className="px-4 py-3 border-b border-border bg-bg-secondary/70">
+      <div className="bg-bg-tertiary border border-border rounded-xl p-4">
+        <div className="flex items-start gap-3">
+          <div className="w-9 h-9 rounded-lg bg-bg-primary border border-border flex items-center justify-center">
+            <Icons.Warning className="w-4 h-4 text-yellow-500" />
+          </div>
+          
+          <div className="flex-1 min-w-0">
+            <h3 className="text-sm font-semibold text-text-primary">
+              Usage Limit Reached
+            </h3>
+            <p className="text-xs text-text-muted mt-1">
+              {currentAccount?.name || 'Current account'} has hit its usage limit.
+              {resetTime && (
+                <span className="block mt-0.5">
+                  Resets: <span className="text-text-secondary">{resetTime}</span>
+                </span>
+              )}
+            </p>
+
+            {availableAccounts.length > 0 ? (
+              <div className="mt-3">
+                <p className="text-xs text-text-secondary mb-2">
+                  Continue with another account:
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {availableAccounts.map((account) => (
+                    <button
+                      key={account.id}
+                      onClick={() => setSelectedAccountId(account.id)}
+                      className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all ${
+                        selectedAccountId === account.id
+                          ? 'bg-accent-green-soft border-accent-green/50 text-accent-green'
+                          : 'bg-bg-secondary border-border hover:border-text-muted text-text-secondary'
+                      }`}
+                    >
+                      <div className={`w-2 h-2 rounded-full ${
+                        account.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+                      }`} />
+                      <span className="text-xs font-medium">{account.name}</span>
+                      {account.usage?.primary && (
+                        <span className={`text-[10px] ${
+                          account.usage.primary.usedPercent >= 80 ? 'text-yellow-500' :
+                          account.usage.primary.usedPercent >= 60 ? 'text-text-muted' :
+                          'text-accent-green'
+                        }`}>
+                          {Math.round(account.usage.primary.usedPercent)}%
+                        </span>
+                      )}
+                    </button>
+                  ))}
+                </div>
+                
+                <div className="flex items-center gap-2 mt-3">
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    onClick={handleSwitch}
+                    disabled={!selectedAccountId}
+                  >
+                    <Icons.ArrowRight className="w-3.5 h-3.5" />
+                    Switch Account
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onDismiss}
+                  >
+                    Dismiss
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="mt-3 flex items-center gap-2">
+                <p className="text-xs text-text-muted">
+                  No other accounts available. Add more accounts in the sidebar or wait for the limit to reset.
+                </p>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onDismiss}
+                >
+                  Dismiss
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <button
+            onClick={onDismiss}
+            className="shrink-0 p-1 rounded hover:bg-bg-hover transition-colors"
+          >
+            <Icons.X className="w-4 h-4 text-text-muted" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/apps/web/src/components/session-view/session-dialogs.tsx

@@ -1,5 +1,5 @@
-import type { ApprovalPolicy, ReasoningEffort, ReasoningSummary } from '../../types'
-import { AlertDialog, Button, CopyDialog, Dialog, PromptDialog, Select, type SelectOption } from '../ui'
+import type { Account, ApprovalPolicy, ReasoningEffort, ReasoningSummary } from '../../types'
+import { AlertDialog, Button, CopyDialog, Dialog, Icons, PromptDialog, Select, type SelectOption } from '../ui'
 
 interface SessionDialogsProps {
   showModelDialog: boolean
@@ -32,6 +32,11 @@ interface SessionDialogsProps {
   onCloseResumeDialog: () => void
   resumeCandidates: Array<{ id: string; title: string; preview: string }>
   onResumeThread: (threadId: string) => void
+  showAccountSwitchDialog: boolean
+  onCloseAccountSwitchDialog: () => void
+  currentAccount?: Account
+  switchableAccounts: Account[]
+  onSwitchAccount: (accountId: string) => void
   showFeedbackDialog: boolean
   onCloseFeedbackDialog: () => void
   feedbackCategory: string
@@ -81,6 +86,11 @@ export const SessionDialogs = ({
   onCloseResumeDialog,
   resumeCandidates,
   onResumeThread,
+  showAccountSwitchDialog,
+  onCloseAccountSwitchDialog,
+  currentAccount,
+  switchableAccounts,
+  onSwitchAccount,
   showFeedbackDialog,
   onCloseFeedbackDialog,
   feedbackCategory,
@@ -212,6 +222,87 @@ export const SessionDialogs = ({
         </div>
       </Dialog>
 
+      <Dialog open={showAccountSwitchDialog} onClose={onCloseAccountSwitchDialog} title="Switch Account">
+        <div className="space-y-3">
+          <p className="text-xs text-text-muted">
+            Continue this thread with a different account. The conversation history will be preserved.
+          </p>
+          
+          {currentAccount && (
+            <div className="p-3 rounded-lg bg-bg-tertiary border border-border">
+              <div className="flex items-center gap-2">
+                <div className={`w-2 h-2 rounded-full ${
+                  currentAccount.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+                }`} />
+                <span className="text-xs font-medium text-text-primary">{currentAccount.name}</span>
+                <span className="text-[10px] text-text-muted ml-auto">current</span>
+              </div>
+              {currentAccount.usage?.primary && (
+                <div className="mt-2 flex items-center gap-2">
+                  <div className="flex-1 h-1 bg-bg-primary rounded-full overflow-hidden">
+                    <div 
+                      className={`h-full rounded-full transition-all ${
+                        currentAccount.usage.primary.usedPercent >= 90 ? 'bg-accent-red' :
+                        currentAccount.usage.primary.usedPercent >= 80 ? 'bg-accent-orange' :
+                        'bg-accent-green'
+                      }`}
+                      style={{ width: `${Math.min(100, currentAccount.usage.primary.usedPercent)}%` }}
+                    />
+                  </div>
+                  <span className="text-[10px] text-text-muted">
+                    {Math.round(currentAccount.usage.primary.usedPercent)}% used
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="space-y-2 max-h-[200px] overflow-y-auto">
+            {switchableAccounts.length === 0 && (
+              <div className="text-xs text-text-muted py-4 text-center">
+                No other authenticated accounts available.
+              </div>
+            )}
+            {switchableAccounts.map((account) => (
+              <button
+                key={account.id}
+                type="button"
+                onClick={() => {
+                  onSwitchAccount(account.id)
+                  onCloseAccountSwitchDialog()
+                }}
+                className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg border border-border bg-bg-tertiary hover:bg-bg-hover hover:border-text-muted/40 transition-colors"
+              >
+                <div className={`w-2 h-2 rounded-full ${
+                  account.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+                }`} />
+                <div className="flex-1 min-w-0 text-left">
+                  <div className="text-xs font-medium text-text-primary truncate">{account.name}</div>
+                  {account.usage?.primary && (
+                    <div className="mt-1 flex items-center gap-2">
+                      <div className="flex-1 h-1 bg-bg-primary rounded-full overflow-hidden">
+                        <div 
+                          className={`h-full rounded-full transition-all ${
+                            account.usage.primary.usedPercent >= 90 ? 'bg-accent-red' :
+                            account.usage.primary.usedPercent >= 80 ? 'bg-accent-orange' :
+                            'bg-accent-green'
+                          }`}
+                          style={{ width: `${Math.min(100, account.usage.primary.usedPercent)}%` }}
+                        />
+                      </div>
+                      <span className="text-[10px] text-text-muted">
+                        {Math.round(account.usage.primary.usedPercent)}%
+                      </span>
+                    </div>
+                  )}
+                </div>
+                <Icons.ArrowRight className="w-4 h-4 text-text-muted shrink-0" />
+              </button>
+            ))}
+          </div>
+        </div>
+      </Dialog>
+
       <Dialog open={showFeedbackDialog} onClose={onCloseFeedbackDialog} title="Send Feedback">
         <div className="space-y-3">
           <Select

package/apps/web/src/components/session-view/session-header.tsx

@@ -1,30 +1,49 @@
 import { IconButton, Icons } from '../ui'
+import { ThreadAccountSwitcher } from './thread-account-switcher'
+import type { Account } from '../../types'
 
 interface SessionHeaderProps {
   title: string
+  accountId?: string
   accountName?: string
+  accounts?: Account[]
   model?: string
   status?: string
   canInteract: boolean
   onArchive: () => void
+  onSwitchAccount?: (accountId: string) => void
 }
 
 export const SessionHeader = ({
   title,
+  accountId,
   accountName,
+  accounts = [],
   model,
   status,
   canInteract,
   onArchive,
+  onSwitchAccount,
 }: SessionHeaderProps) => {
   const isActive = status === 'active'
+  const showAccountSwitcher = accounts.length > 1 && accountId && onSwitchAccount
 
   return (
     <header className="hidden md:flex px-4 py-3 border-b border-border items-center justify-between shrink-0 gap-4">
       <div className="min-w-0 flex-1 overflow-hidden">
         <h2 className="text-sm font-semibold text-text-primary truncate">{title}</h2>
-        <div className="flex items-center gap-2 mt-0.5 text-[10px] text-text-muted">
-          <span className="truncate max-w-[100px]">{accountName || 'Unknown account'}</span>
+        <div className="flex items-center gap-1 mt-0.5 text-[10px] text-text-muted">
+          {showAccountSwitcher ? (
+            <ThreadAccountSwitcher
+              currentAccountId={accountId}
+              currentAccountName={accountName}
+              accounts={accounts}
+              disabled={isActive}
+              onSwitch={onSwitchAccount}
+            />
+          ) : (
+            <span className="truncate max-w-[100px] px-2 py-1">{accountName || 'Unknown account'}</span>
+          )}
           <span>·</span>
           <span>{model || 'unknown'}</span>
           <span>·</span>

package/apps/web/src/components/session-view/thread-account-switcher.tsx

@@ -0,0 +1,191 @@
+import { useState, useRef, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { Icons } from '../ui'
+import type { Account } from '../../types'
+
+interface ThreadAccountSwitcherProps {
+  currentAccountId: string
+  currentAccountName?: string
+  accounts: Account[]
+  disabled?: boolean
+  onSwitch: (accountId: string) => void
+}
+
+export const ThreadAccountSwitcher = ({
+  currentAccountId,
+  currentAccountName,
+  accounts,
+  disabled,
+  onSwitch,
+}: ThreadAccountSwitcherProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 })
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  // Filter to only show other accounts that are online
+  const availableAccounts = accounts.filter(
+    (account) => account.id !== currentAccountId && account.status === 'online'
+  )
+
+  // Update dropdown position when opening
+  useEffect(() => {
+    if (isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      setDropdownPosition({
+        top: rect.bottom + 4,
+        left: rect.left,
+      })
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (
+        buttonRef.current && !buttonRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  const handleSwitch = (accountId: string) => {
+    onSwitch(accountId)
+    setIsOpen(false)
+  }
+
+  const currentAccount = accounts.find((a) => a.id === currentAccountId)
+  const hasRateLimitWarning = currentAccount?.usage?.primary?.usedPercent 
+    ? currentAccount.usage.primary.usedPercent >= 80 
+    : false
+
+  const dropdownContent = isOpen && availableAccounts.length > 0 && (
+    <div 
+      ref={dropdownRef}
+      className="fixed min-w-[200px] bg-bg-elevated border border-border rounded-lg shadow-lg py-1 z-[9999]"
+      style={{ top: dropdownPosition.top, left: dropdownPosition.left }}
+    >
+      <div className="px-3 py-2 border-b border-border">
+        <p className="text-[10px] text-text-muted font-medium uppercase tracking-wide">
+          Switch Account
+        </p>
+        <p className="text-[10px] text-text-muted mt-0.5">
+          Continue this thread with another account
+        </p>
+      </div>
+      
+      {/* Current account */}
+      <div className="px-3 py-2 bg-bg-secondary/50">
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${
+            currentAccount?.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+          }`} />
+          <span className="text-xs text-text-primary font-medium">
+            {currentAccountName}
+          </span>
+          <span className="text-[10px] text-text-muted ml-auto">current</span>
+        </div>
+        {currentAccount?.usage?.primary && (
+          <div className="mt-1.5 flex items-center gap-2">
+            <div className="flex-1 h-1 bg-bg-tertiary rounded-full overflow-hidden">
+              <div 
+                className={`h-full rounded-full transition-all ${
+                  currentAccount.usage.primary.usedPercent >= 90 ? 'bg-accent-red' :
+                  currentAccount.usage.primary.usedPercent >= 80 ? 'bg-yellow-500' :
+                  'bg-accent-green'
+                }`}
+                style={{ width: `${Math.min(100, currentAccount.usage.primary.usedPercent)}%` }}
+              />
+            </div>
+            <span className="text-[9px] text-text-muted">
+              {Math.round(currentAccount.usage.primary.usedPercent)}%
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Available accounts */}
+      <div className="py-1">
+        {availableAccounts.map((account) => (
+          <button
+            key={account.id}
+            onClick={() => handleSwitch(account.id)}
+            className="w-full flex items-center gap-2 px-3 py-2 hover:bg-bg-hover transition-colors text-left"
+          >
+            <div className={`w-2 h-2 rounded-full ${
+              account.status === 'online' ? 'bg-accent-green' : 'bg-text-muted'
+            }`} />
+            <div className="flex-1 min-w-0">
+              <span className="text-xs text-text-primary block truncate">
+                {account.name}
+              </span>
+              {account.usage?.primary && (
+                <div className="mt-1 flex items-center gap-2">
+                  <div className="flex-1 h-1 bg-bg-tertiary rounded-full overflow-hidden">
+                    <div 
+                      className={`h-full rounded-full transition-all ${
+                        account.usage.primary.usedPercent >= 90 ? 'bg-accent-red' :
+                        account.usage.primary.usedPercent >= 80 ? 'bg-yellow-500' :
+                        'bg-accent-green'
+                      }`}
+                      style={{ width: `${Math.min(100, account.usage.primary.usedPercent)}%` }}
+                    />
+                  </div>
+                  <span className="text-[9px] text-text-muted">
+                    {Math.round(account.usage.primary.usedPercent)}%
+                  </span>
+                </div>
+              )}
+            </div>
+            <Icons.ArrowRight className="w-3 h-3 text-text-muted shrink-0" />
+          </button>
+        ))}
+      </div>
+
+      {hasRateLimitWarning && (
+        <div className="px-3 py-2 border-t border-border bg-yellow-500/5">
+          <p className="text-[10px] text-yellow-500">
+            <Icons.Warning className="w-3 h-3 inline mr-1" />
+            Current account is near rate limit. Consider switching.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`group flex items-center gap-1.5 px-2 py-1 rounded-md transition-colors ${
+          disabled 
+            ? 'opacity-50 cursor-not-allowed' 
+            : 'hover:bg-bg-hover cursor-pointer'
+        } ${hasRateLimitWarning ? 'text-yellow-500' : ''}`}
+        title={availableAccounts.length > 0 ? 'Switch account for this thread' : 'No other accounts available'}
+      >
+        <span className={`truncate max-w-[100px] text-[10px] ${hasRateLimitWarning ? 'text-yellow-500' : 'text-text-muted'}`}>
+          {currentAccountName || 'Unknown account'}
+        </span>
+        {hasRateLimitWarning && (
+          <Icons.Warning className="w-3 h-3 text-yellow-500 shrink-0" />
+        )}
+        {availableAccounts.length > 0 && !disabled && (
+          <Icons.ChevronDown className={`w-3 h-3 text-text-muted transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+        )}
+      </button>
+
+      {dropdownContent && createPortal(dropdownContent, document.body)}
+    </div>
+  )
+}

package/apps/web/src/components/ui/icons.tsx

@@ -184,4 +184,16 @@ export const Icons = {
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
     </svg>
   ),
+
+  ArrowRight: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+    </svg>
+  ),
+
+  Switch: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+    </svg>
+  ),
 }

package/apps/web/src/hooks/use-hub-connection.ts

@@ -78,10 +78,16 @@ export const useHubConnection = () => {
     setAccountLoginId,
     upsertReviewSession,
     updateReviewSession,
+    resolveThreadId,
   } = useAppStore()
 
   const nowTimestamp = () => new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 
+  const resolve = (backendThreadId: string | undefined): string | undefined => {
+    if (!backendThreadId) return undefined
+    return resolveThreadId(backendThreadId)
+  }
+
   const addSystemMessage = (threadId: string, title: string, content: string) => {
     addMessage(threadId, {
       id: `sys-${Date.now()}-${Math.random().toString(16).slice(2)}`,
@@ -238,7 +244,8 @@ export const useHubConnection = () => {
             }
 
             if (method === 'turn/started' && params && typeof params === 'object') {
-              const { threadId, turn } = params as { threadId?: string; turn?: { id?: string } }
+              const { threadId: rawThreadId, turn } = params as { threadId?: string; turn?: { id?: string } }
+              const threadId = resolve(rawThreadId)
               if (threadId) {
                 updateThread(threadId, { status: 'active' })
                 setThreadTurnStartedAt(threadId, Date.now())
@@ -249,7 +256,8 @@ export const useHubConnection = () => {
             }
 
             if (method === 'turn/completed' && params && typeof params === 'object') {
-              const { threadId, turn } = params as { threadId?: string; turn?: { id?: string; status?: string } }
+              const { threadId: rawThreadId, turn } = params as { threadId?: string; turn?: { id?: string; status?: string } }
+              const threadId = resolve(rawThreadId)
               // console.log('[HubConnection] turn/completed event for thread:', threadId)
               if (threadId) {
                 const startedAt = useAppStore.getState().threadTurnStartedAt[threadId]
@@ -271,7 +279,8 @@ export const useHubConnection = () => {
             }
 
             if (method === 'turn/diff/updated' && params && typeof params === 'object') {
-              const { threadId, turnId, diff } = params as { threadId?: string; turnId?: string; diff?: string }
+              const { threadId: rawThreadId, turnId, diff } = params as { threadId?: string; turnId?: string; diff?: string }
+              const threadId = resolve(rawThreadId)
               if (threadId && diff) {
                 const content = diff.length > 4000 ? `${diff.slice(0, 4000)}\n…` : diff
                 upsertMessage(threadId, {
@@ -287,12 +296,13 @@ export const useHubConnection = () => {
             }
 
             if (method === 'turn/plan/updated' && params && typeof params === 'object') {
-              const { threadId, turnId, plan, explanation } = params as {
+              const { threadId: rawThreadId, turnId, plan, explanation } = params as {
                 threadId?: string
                 turnId?: string
                 plan?: Array<{ step?: string; status?: string }>
                 explanation?: string
               }
+              const threadId = resolve(rawThreadId)
               if (threadId && Array.isArray(plan)) {
                 const steps = plan
                   .map((entry) => `${entry.status ?? 'pending'} · ${entry.step ?? ''}`.trim())
@@ -311,7 +321,8 @@ export const useHubConnection = () => {
             }
 
             if (method === 'thread/tokenUsage/updated' && params && typeof params === 'object') {
-              const { threadId } = params as { threadId?: string }
+              const { threadId: rawThreadId } = params as { threadId?: string }
+              const threadId = resolve(rawThreadId)
               const usage = (params as { usage?: unknown }).usage ?? (params as { tokenUsage?: unknown }).tokenUsage
               if (threadId && usage) {
                 setThreadTokenUsage(threadId, usage)
@@ -319,73 +330,80 @@ export const useHubConnection = () => {
             }
 
             if (method === 'item/agentMessage/delta' && params && typeof params === 'object') {
-              const { threadId, itemId, delta } = params as {
+              const { threadId: rawThreadId, itemId, delta } = params as {
                 threadId?: string
                 itemId?: string
                 delta?: string
               }
+              const threadId = resolve(rawThreadId)
               if (threadId && itemId && delta) {
                 appendMessageDelta(threadId, itemId, delta)
               }
             }
 
             if (method === 'item/reasoning/summaryTextDelta' && params && typeof params === 'object') {
-              const { threadId, itemId, delta } = params as {
+              const { threadId: rawThreadId, itemId, delta } = params as {
                 threadId?: string
                 itemId?: string
                 delta?: string
               }
+              const threadId = resolve(rawThreadId)
               if (threadId && itemId && delta) {
                 appendMessageDelta(threadId, itemId, delta)
               }
             }
 
             if (method === 'item/reasoning/summaryPartAdded' && params && typeof params === 'object') {
-              const { threadId, itemId } = params as { threadId?: string; itemId?: string }
+              const { threadId: rawThreadId, itemId } = params as { threadId?: string; itemId?: string }
+              const threadId = resolve(rawThreadId)
               if (threadId && itemId) {
                 appendMessageDelta(threadId, itemId, '\n\n')
               }
             }
 
             if (method === 'item/reasoning/textDelta' && params && typeof params === 'object') {
-              const { threadId, itemId, delta } = params as {
+              const { threadId: rawThreadId, itemId, delta } = params as {
                 threadId?: string
                 itemId?: string
                 delta?: string
               }
+              const threadId = resolve(rawThreadId)
               if (threadId && itemId && delta) {
                 appendMessageDelta(threadId, itemId, delta)
               }
             }
 
             if (method === 'item/commandExecution/outputDelta' && params && typeof params === 'object') {
-              const { threadId, itemId, delta } = params as {
+              const { threadId: rawThreadId, itemId, delta } = params as {
                 threadId?: string
                 itemId?: string
                 delta?: string
               }
+              const threadId = resolve(rawThreadId)
               if (threadId && itemId && delta) {
                 appendMessageDelta(threadId, itemId, delta)
               }
             }
 
             if (method === 'item/fileChange/outputDelta' && params && typeof params === 'object') {
-              const { threadId, itemId, delta } = params as {
+              const { threadId: rawThreadId, itemId, delta } = params as {
                 threadId?: string
                 itemId?: string
                 delta?: string
               }
+              const threadId = resolve(rawThreadId)
               if (threadId && itemId && delta) {
                 appendMessageDelta(threadId, itemId, delta)
               }
             }
 
             if (method === 'item/started' && params && typeof params === 'object') {
-              const { item, threadId, turnId } = params as {
+              const { item, threadId: rawThreadId, turnId } = params as {
                 item?: ItemPayload & { review?: string }
                 threadId?: string
                 turnId?: string
               }
+              const threadId = resolve(rawThreadId)
               if (threadId && item?.type === 'agentMessage' && item.id) {
                 ensureAssistantMessage(threadId, item.id)
                 return
@@ -411,11 +429,12 @@ export const useHubConnection = () => {
             }
 
             if (method === 'item/completed' && params && typeof params === 'object') {
-              const { item, threadId, turnId } = params as {
+              const { item, threadId: rawThreadId, turnId } = params as {
                 item?: ItemPayload & { review?: string }
                 threadId?: string
                 turnId?: string
               }
+              const threadId = resolve(rawThreadId)
               if (threadId && item?.type === 'exitedReviewMode') {
                 const sessionId = turnId ?? item.id
                 if (sessionId) {
@@ -436,7 +455,8 @@ export const useHubConnection = () => {
             }
 
             if (method === 'error' && params && typeof params === 'object') {
-              const { threadId, error } = params as { threadId?: string; error?: { message?: string } }
+              const { threadId: rawThreadId, error } = params as { threadId?: string; error?: { message?: string } }
+              const threadId = resolve(rawThreadId)
               if (threadId) {
                 const message = error?.message ?? 'Unknown error.'
                 addSystemMessage(threadId, 'Error', message)
@@ -467,11 +487,12 @@ export const useHubConnection = () => {
                 parsedCmd?: string
                 command?: string[]
               }
+              const resolvedThreadId = resolve(parsed.threadId) ?? ''
               addApproval({
                 id: parsed.itemId ?? String(id),
                 requestId: id,
                 profileId,
-                threadId: parsed.threadId ?? '',
+                threadId: resolvedThreadId,
                 type: 'command',
                 payload: parsed.parsedCmd ?? parsed.command?.join(' ') ?? 'Command approval required',
                 status: 'pending',
@@ -484,11 +505,12 @@ export const useHubConnection = () => {
                 threadId?: string
                 reason?: string
               }
+              const resolvedThreadId = resolve(parsed.threadId) ?? ''
               addApproval({
                 id: parsed.itemId ?? String(id),
                 requestId: id,
                 profileId,
-                threadId: parsed.threadId ?? '',
+                threadId: resolvedThreadId,
                 type: 'file',
                 payload: parsed.reason ?? 'File changes requested',
                 status: 'pending',

package/apps/web/src/store/index.ts

@@ -20,6 +20,8 @@ interface AppState {
   threadTurnStartedAt: Record<string, number>
   threadLastTurnDuration: Record<string, number>
   threadTokenUsage: Record<string, unknown>
+  threadPendingAccountSwitch: Record<string, { originalThreadId: string; previousAccountId: string }>
+  backendToUiThreadId: Record<string, string>
   
   messages: Record<string, Message[]>
   queuedMessages: Record<string, QueuedMessage[]>
@@ -59,6 +61,9 @@ interface AppState {
   setThreadTurnStartedAt: (threadId: string, startedAt: number | null) => void
   setThreadLastTurnDuration: (threadId: string, duration: number | null) => void
   setThreadTokenUsage: (threadId: string, usage: unknown) => void
+  setThreadPendingAccountSwitch: (threadId: string, pending: { originalThreadId: string; previousAccountId: string } | null) => void
+  setBackendToUiThreadId: (backendThreadId: string, uiThreadId: string | null) => void
+  resolveThreadId: (threadId: string) => string
   
   addMessage: (threadId: string, message: Message) => void
   appendAgentDelta: (threadId: string, messageId: string, delta: string) => void
@@ -87,7 +92,7 @@ interface AppState {
   closeMobileDrawers: () => void
 }
 
-export const useAppStore = create<AppState>((set) => ({
+export const useAppStore = create<AppState>((set, get) => ({
   accounts: [],
   selectedAccountId: null,
   connectionStatus: 'idle',
@@ -105,6 +110,8 @@ export const useAppStore = create<AppState>((set) => ({
   threadTurnStartedAt: {},
   threadLastTurnDuration: {},
   threadTokenUsage: {},
+  threadPendingAccountSwitch: {},
+  backendToUiThreadId: {},
   messages: {},
   queuedMessages: {},
   approvals: [],
@@ -325,6 +332,34 @@ export const useAppStore = create<AppState>((set) => ({
       [threadId]: usage,
     },
   })),
+  setThreadPendingAccountSwitch: (threadId, pending) => set((state) => {
+    if (pending === null) {
+      const { [threadId]: _, ...rest } = state.threadPendingAccountSwitch
+      return { threadPendingAccountSwitch: rest }
+    }
+    return {
+      threadPendingAccountSwitch: {
+        ...state.threadPendingAccountSwitch,
+        [threadId]: pending,
+      },
+    }
+  }),
+  setBackendToUiThreadId: (backendThreadId, uiThreadId) => set((state) => {
+    if (uiThreadId === null) {
+      const { [backendThreadId]: _, ...rest } = state.backendToUiThreadId
+      return { backendToUiThreadId: rest }
+    }
+    return {
+      backendToUiThreadId: {
+        ...state.backendToUiThreadId,
+        [backendThreadId]: uiThreadId,
+      },
+    }
+  }),
+  resolveThreadId: (threadId: string): string => {
+    const state = get()
+    return state.backendToUiThreadId[threadId] ?? threadId
+  },
 
   addMessage: (threadId, message) => set((state) => ({
     messages: {

package/apps/web/src/types/index.ts

@@ -83,6 +83,7 @@ export interface Thread {
   createdAt: string
   status: ThreadStatus
   messageCount: number
+  backendThreadId?: string
 }
 
 export interface Message {

package/apps/web/src/utils/slash-commands.ts

@@ -4,6 +4,7 @@ export type SlashCommandId =
   | 'cwd'
   | 'approvals'
   | 'skills'
+  | 'switch'
   | 'review'
   | 'new'
   | 'resume'
@@ -32,6 +33,7 @@ export const SLASH_COMMANDS: SlashCommandDefinition[] = [
   { id: 'cwd', description: 'set working directory for the thread', availableDuringTask: false },
   { id: 'approvals', description: 'choose what Codex can do without approval', availableDuringTask: false },
   { id: 'skills', description: 'browse and insert skills', availableDuringTask: true },
+  { id: 'switch', description: 'switch to a different account for this thread', availableDuringTask: false },
   { id: 'review', description: 'review my current changes and find issues', availableDuringTask: false },
   { id: 'new', description: 'start a new chat during a conversation', availableDuringTask: false },
   { id: 'resume', description: 'resume a saved chat', availableDuringTask: false },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "better-codex",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Web launcher for Codex Hub",
   "bin": {
     "better-codex": "bin/better-codex.cjs"