better-codex 0.2.1 → 0.2.2

package/apps/backend/src/server.ts

@@ -371,6 +371,25 @@ const app = new Elysia()
       }),
     }
   )
+  .delete(
+    '/threads/active/:threadId',
+    ({ params, query }) => {
+      const profileId = typeof query.profileId === 'string' ? query.profileId : undefined
+      if (!profileId) {
+        return { ok: false, error: 'profileId is required' }
+      }
+      threadActivity.markCompleted(profileId, params.threadId)
+      return { ok: true }
+    },
+    {
+      params: t.Object({
+        threadId: t.String(),
+      }),
+      query: t.Object({
+        profileId: t.String(),
+      }),
+    }
+  )
   .post(
     '/threads/reindex',
     async ({ body }) => {

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

@@ -3,7 +3,7 @@ import { useAppStore } from '../../store'
 import { type SelectOption } from '../ui'
 import { VirtualizedMessageList } from './virtualized-message-list'
 import { hubClient } from '../../services/hub-client'
-import type { ApprovalPolicy, Attachment, FileMention, MessageKind, ReasoningEffort, ReasoningSummary } from '../../types'
+import type { ApprovalPolicy, Attachment, FileMention, MessageKind, ReasoningEffort, ReasoningSummary, SandboxMode, SandboxPolicy } from '../../types'
 import { INIT_PROMPT } from '../../utils/init-prompt'
 import { filterSlashCommands, findSlashCommand, getSlashQuery, parseSlashInput, type SlashCommandDefinition } from '../../utils/slash-commands'
 import { approvalPolicyDescription, approvalPolicyLabel, normalizeApprovalPolicy } from '../../utils/approval-policy'
@@ -17,6 +17,22 @@ import { SessionDialogs } from '../session-view/session-dialogs'
 import { SessionEmpty } from '../session-view/session-empty'
 import { RateLimitBanner, isRateLimitError } from '../session-view/rate-limit-banner'
 
+const ALWAYS_ALLOW_SANDBOX_MODE: SandboxMode = 'workspace-write'
+const ALWAYS_ALLOW_SANDBOX_POLICY: SandboxPolicy = { type: 'workspaceWrite' }
+
+const resolveSandboxPolicy = (mode?: SandboxMode | null): SandboxPolicy | null => {
+  switch (mode) {
+    case 'danger-full-access':
+      return { type: 'dangerFullAccess' }
+    case 'read-only':
+      return { type: 'readOnly' }
+    case 'workspace-write':
+      return { type: 'workspaceWrite' }
+    default:
+      return null
+  }
+}
+
 export function SessionView() {
   const [inputValue, setInputValue] = useState('')
   const [slashIndex, setSlashIndex] = useState(0)
@@ -76,6 +92,7 @@ export function SessionView() {
     threadEfforts,
     threadApprovals,
     threadWebSearch,
+    threadSandboxes,
     threadTurnIds,
     threadTurnStartedAt,
     threadLastTurnDuration,
@@ -85,6 +102,7 @@ export function SessionView() {
     setThreadEffort,
     setThreadApproval,
     setThreadWebSearch,
+    setThreadSandbox,
     threadSummaries,
     setThreadSummary,
     threadCwds,
@@ -121,6 +139,7 @@ export function SessionView() {
   const selectedEffort = selectedThreadId ? threadEfforts[selectedThreadId] : undefined
   const effectiveEffort = selectedEffort ?? defaultEffort ?? null
   const selectedApproval = selectedThreadId ? threadApprovals[selectedThreadId] : undefined
+  const selectedSandbox = selectedThreadId ? threadSandboxes[selectedThreadId] : undefined
   const selectedSummary = selectedThreadId ? threadSummaries[selectedThreadId] : undefined
   const selectedCwd = selectedThreadId ? threadCwds[selectedThreadId] : undefined
   const selectedUsage = selectedThreadId ? threadTokenUsage[selectedThreadId] : undefined
@@ -212,6 +231,18 @@ export function SessionView() {
       description: approvalPolicyDescription(value),
     })
   )
+  const sandboxOptions: SelectOption[] = [
+    {
+      value: '',
+      label: 'Sandboxed',
+      description: 'Use configured sandbox settings',
+    },
+    {
+      value: 'danger-full-access',
+      label: 'Dangerously allow full access',
+      description: 'No filesystem sandbox (trusted only)',
+    },
+  ]
   const resumeCandidates = threadAccountId
     ? threads.filter((thread) => thread.accountId === threadAccountId)
     : []
@@ -439,6 +470,7 @@ export function SessionView() {
         summary: selectedSummary ?? null,
         cwd: selectedCwd ?? null,
         approvalPolicy: selectedApproval ?? null,
+        sandbox: selectedSandbox ?? null,
         createdAt: Date.now(),
       })
       setInputValue('')
@@ -473,13 +505,23 @@ export function SessionView() {
         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> } = {}
+        const startParams: {
+          model?: string
+          approvalPolicy?: ApprovalPolicy
+          sandbox?: SandboxMode
+          config?: Record<string, unknown>
+        } = {}
         if (defaultThreadModel?.id) {
           startParams.model = defaultThreadModel.id
         }
         if (selectedApproval) {
           startParams.approvalPolicy = selectedApproval
         }
+        if (selectedSandbox) {
+          startParams.sandbox = selectedSandbox
+        } else if (selectedApproval === 'never') {
+          startParams.sandbox = ALWAYS_ALLOW_SANDBOX_MODE
+        }
         if (selectedWebSearch) {
           startParams.config = { 'features.web_search_request': true }
         }
@@ -543,7 +585,8 @@ export function SessionView() {
           input.push({ type: 'image', url: attachment.url })
         }
       }
-      
+      const sandboxPolicyOverride = resolveSandboxPolicy(selectedSandbox)
+
       const params: {
         threadId: string
         input: Array<{ type: string; text?: string; url?: string; path?: string }>
@@ -552,6 +595,7 @@ export function SessionView() {
         summary?: ReasoningSummary
         cwd?: string
         approvalPolicy?: ApprovalPolicy
+        sandboxPolicy?: SandboxPolicy
       } = {
         threadId: actualThreadId,
         input,
@@ -565,6 +609,11 @@ export function SessionView() {
       if (selectedApproval) {
         params.approvalPolicy = selectedApproval
       }
+      if (sandboxPolicyOverride) {
+        params.sandboxPolicy = sandboxPolicyOverride
+      } else if (selectedApproval === 'never') {
+        params.sandboxPolicy = ALWAYS_ALLOW_SANDBOX_POLICY
+      }
       if (selectedSummary) {
         params.summary = selectedSummary
       }
@@ -587,13 +636,23 @@ export function SessionView() {
   const startNewThread = async (accountId: string, approvalOverride?: ApprovalPolicy | null, webSearch?: boolean) => {
     const accountModels = modelsByAccount[accountId] || []
     const defaultThreadModel = accountModels.find((model) => model.isDefault) ?? accountModels[0]
-    const params: { model?: string; approvalPolicy?: ApprovalPolicy; config?: Record<string, unknown> } = {}
+    const params: {
+      model?: string
+      approvalPolicy?: ApprovalPolicy
+      sandbox?: SandboxMode
+      config?: Record<string, unknown>
+    } = {}
     if (defaultThreadModel?.id) {
       params.model = defaultThreadModel.id
     }
     if (approvalOverride) {
       params.approvalPolicy = approvalOverride
     }
+    if (selectedSandbox) {
+      params.sandbox = selectedSandbox
+    } else if (approvalOverride === 'never') {
+      params.sandbox = ALWAYS_ALLOW_SANDBOX_MODE
+    }
     if (webSearch) {
       params.config = { 'features.web_search_request': true }
     }
@@ -642,6 +701,9 @@ export function SessionView() {
     if (effort) {
       setThreadEffort(threadId, effort)
     }
+    if (selectedSandbox) {
+      setThreadSandbox(threadId, selectedSandbox)
+    }
     if (selectedSummary) {
       setThreadSummary(threadId, selectedSummary)
     }
@@ -707,6 +769,7 @@ export function SessionView() {
       `Reasoning summary: ${selectedSummary ?? 'default'}`,
       `Working directory: ${selectedCwd || 'default'}`,
       `Approvals: ${selectedApproval ?? 'default'}`,
+      `Sandbox: ${selectedSandbox ?? 'default'}`,
       `Connection: ${connectionStatus}`,
     ]
     if (usageLine) {
@@ -1343,7 +1406,7 @@ export function SessionView() {
     }
   }
 
-  const handleSwitchThreadAccount = (newAccountId: string) => {
+  const handleSwitchThreadAccount = async (newAccountId: string) => {
     if (!selectedThreadId || !selectedThread) {
       return
     }
@@ -1360,6 +1423,27 @@ export function SessionView() {
     }
 
     const previousAccountId = selectedThread.accountId
+    const previousAccount = accounts.find((a) => a.id === previousAccountId)
+
+    // If a task is running on the current account, interrupt it first
+    if (isTaskRunning && previousAccount) {
+      const turnId = threadTurnIds[selectedThreadId]
+      if (turnId) {
+        try {
+          await hubClient.request(previousAccount.id, 'turn/interrupt', {
+            threadId: effectiveBackendThreadId,
+            turnId,
+          })
+          // Wait a moment for the interrupt to process
+          await new Promise((resolve) => setTimeout(resolve, 200))
+        } catch {
+          // Continue with switch even if interrupt fails
+          console.warn('Failed to interrupt turn before account switch')
+        }
+      }
+      // Reset thread status
+      updateThread(selectedThreadId, { status: 'idle' })
+    }
 
     // Mark this thread as having a pending account switch
     // The next message sent will start a fresh conversation on the new account
@@ -1488,6 +1572,17 @@ export function SessionView() {
         }}
         showModelSelect={models.length > 0}
         showEffortSelect={effortOptions.length > 0}
+        sandboxOptions={sandboxOptions}
+        effectiveSandbox={selectedSandbox ?? ''}
+        onSandboxChange={(value) => {
+          if (!selectedThreadId) return
+          if (!value) {
+            setThreadSandbox(selectedThreadId, null)
+            return
+          }
+          setThreadSandbox(selectedThreadId, value as SandboxMode)
+        }}
+        showSandboxSelect
         queuedCount={queuedCount}
         webSearchEnabled={webSearchEnabled}
         onWebSearchToggle={() => {

package/apps/web/src/components/layout/side-bar.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { useAppStore } from '../../store'
 import { hubClient } from '../../services/hub-client'
-import { Avatar, Button, Dialog, IconButton, Icons, SectionHeader, AlertDialog, PromptDialog, CopyDialog } from '../ui'
+import { refreshAccountSnapshot } from '../../utils/account-refresh'
+import { Avatar, Button, Dialog, IconButton, Icons, SectionHeader, AlertDialog, CopyDialog } from '../ui'
 import { AccountUsagePanel } from './account-usage-panel'
 import { SettingsDialog } from './settings-dialog'
 
@@ -9,13 +10,24 @@ interface SidebarProps {
   onNavigate?: () => void
 }
 
+type AuthMethod = 'chatgpt' | 'apiKey'
+
 export function Sidebar({ onNavigate }: SidebarProps) {
   const [isAdding, setIsAdding] = useState(false)
   const [isRemoving, setIsRemoving] = useState(false)
-  const [showPrompt, setShowPrompt] = useState(false)
+  const [showAddDialog, setShowAddDialog] = useState(false)
   const [showUsage, setShowUsage] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
   const [authPendingId, setAuthPendingId] = useState<string | null>(null)
+  const [authDialog, setAuthDialog] = useState<{
+    open: boolean
+    mode: 'create' | 'login'
+    accountId?: string
+    accountName?: string
+  }>({ open: false, mode: 'create' })
+  const [authMethod, setAuthMethod] = useState<AuthMethod>('chatgpt')
+  const [authApiKey, setAuthApiKey] = useState('')
+  const [newAccountName, setNewAccountName] = useState('')
   const [removeDialog, setRemoveDialog] = useState<{ open: boolean; accountId: string; name: string }>({
     open: false,
     accountId: '',
@@ -43,6 +55,8 @@ export function Sidebar({ onNavigate }: SidebarProps) {
     setShowAnalytics,
     showReviews,
     setShowReviews,
+    setAccountLoginId,
+    setModelsForAccount,
   } = useAppStore()
 
   const getStatusColor = (status: 'online' | 'degraded' | 'offline') => {
@@ -53,7 +67,13 @@ export function Sidebar({ onNavigate }: SidebarProps) {
     }
   }
 
-  const handleChatgptAuth = async (accountId: string) => {
+  const resetAuthDialog = () => {
+    setAuthMethod('chatgpt')
+    setAuthApiKey('')
+    setNewAccountName('')
+  }
+
+  const handleAccountAuth = async (accountId: string, method: AuthMethod, apiKey?: string): Promise<boolean> => {
     if (connectionStatus !== 'connected') {
       setAlertDialog({
         open: true,
@@ -61,27 +81,37 @@ export function Sidebar({ onNavigate }: SidebarProps) {
         message: 'Backend not connected. Start the hub and refresh the page.',
         variant: 'error',
       })
-      return
+      return false
     }
     setAuthPendingId(accountId)
     updateAccount(accountId, (prev) => ({ ...prev, status: 'degraded' }))
     try {
       const login = (await hubClient.request(accountId, 'account/login/start', {
-        type: 'chatgpt',
-      })) as { authUrl?: string }
+        type: method,
+        apiKey: method === 'apiKey' ? apiKey : undefined,
+      })) as { authUrl?: string; loginId?: string }
+      if (login?.loginId) {
+        setAccountLoginId(accountId, login.loginId)
+      }
       if (login?.authUrl) {
         const opened = window.open(login.authUrl, '_blank', 'noopener,noreferrer')
         if (!opened) {
           setCopyDialog({ open: true, url: login.authUrl })
         }
       }
+      if (method === 'apiKey') {
+        setAccountLoginId(accountId, null)
+        await refreshAccountSnapshot(accountId, updateAccount, setModelsForAccount)
+      }
+      return true
     } catch {
       setAlertDialog({
         open: true,
         title: 'Sign In Failed',
-        message: 'Unable to start ChatGPT sign-in. Please try again.',
+        message: `Unable to start ${method === 'apiKey' ? 'API key' : 'ChatGPT'} sign-in. Please try again.`,
         variant: 'error',
       })
+      return false
     } finally {
       setAuthPendingId(null)
     }
@@ -145,7 +175,13 @@ export function Sidebar({ onNavigate }: SidebarProps) {
                       type="button"
                       onClick={(e) => {
                         e.stopPropagation()
-                        void handleChatgptAuth(account.id)
+                        setAuthDialog({
+                          open: true,
+                          mode: 'login',
+                          accountId: account.id,
+                          accountName: account.name,
+                        })
+                        resetAuthDialog()
                       }}
                       disabled={authPendingId === account.id}
                       className="text-[10px] text-accent-green hover:text-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -209,56 +245,236 @@ export function Sidebar({ onNavigate }: SidebarProps) {
               })
               return
             }
-            setShowPrompt(true)
+            setShowAddDialog(true)
+            resetAuthDialog()
           }}
         >
           <Icons.Plus className="w-3.5 h-3.5" />
           Add Account
         </button>
 
-        <PromptDialog
-          open={showPrompt}
-          onClose={() => setShowPrompt(false)}
-          onSubmit={async (name) => {
-            if (isAdding) return
-            setIsAdding(true)
-            try {
-              const profile = await hubClient.createProfile(name)
-              addAccount({
-                id: profile.id,
-                name: profile.name,
-                email: '',
-                plan: 'Unknown',
-                status: 'offline',
-                rateLimit: 0,
-              })
-              setSelectedAccountId(profile.id)
-              await hubClient.startProfile(profile.id)
-              updateAccount(profile.id, (prev) => ({ ...prev, status: 'degraded' }))
-              const login = (await hubClient.request(profile.id, 'account/login/start', {
-                type: 'chatgpt',
-              })) as { authUrl?: string }
-              if (login?.authUrl) {
-                const opened = window.open(login.authUrl, '_blank', 'noopener,noreferrer')
-                if (!opened) {
-                  setCopyDialog({ open: true, url: login.authUrl })
+        <Dialog
+          open={showAddDialog}
+          onClose={() => {
+            setShowAddDialog(false)
+            resetAuthDialog()
+          }}
+          title="Add Account"
+        >
+          <form
+            onSubmit={async (event) => {
+              event.preventDefault()
+              if (isAdding) return
+              const name = newAccountName.trim()
+              if (!name) return
+              if (authMethod === 'apiKey' && !authApiKey.trim()) return
+              setIsAdding(true)
+              try {
+                const profile = await hubClient.createProfile(name)
+                addAccount({
+                  id: profile.id,
+                  name: profile.name,
+                  email: '',
+                  plan: 'Unknown',
+                  status: 'offline',
+                  rateLimit: 0,
+                })
+                setSelectedAccountId(profile.id)
+                await hubClient.startProfile(profile.id)
+                updateAccount(profile.id, (prev) => ({ ...prev, status: 'degraded' }))
+                const success = await handleAccountAuth(profile.id, authMethod, authApiKey.trim() || undefined)
+                if (success) {
+                  setShowAddDialog(false)
                 }
+              } catch {
+                setAlertDialog({
+                  open: true,
+                  title: 'Error',
+                  message: 'Failed to create account. Please try again.',
+                  variant: 'error',
+                })
+              } finally {
+                setIsAdding(false)
               }
-            } catch {
-              setAlertDialog({
-                open: true,
-                title: 'Error',
-                message: 'Failed to create account. Please try again.',
-                variant: 'error',
-              })
-            } finally {
-              setIsAdding(false)
-            }
+            }}
+          >
+            <div className="space-y-4">
+              <div className="space-y-1">
+                <div className="text-[10px] uppercase tracking-[0.2em] text-text-muted">Account name</div>
+                <input
+                  value={newAccountName}
+                  onChange={(event) => setNewAccountName(event.target.value)}
+                  placeholder="Personal, Team, or Client..."
+                  className="w-full bg-bg-tertiary border border-border rounded-lg px-3 py-2 text-sm text-text-primary placeholder:text-text-muted outline-none focus:border-text-muted transition-colors"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="text-[10px] uppercase tracking-[0.2em] text-text-muted">Sign-in method</div>
+                <div className="grid grid-cols-1 gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setAuthMethod('chatgpt')}
+                    className={`flex items-center justify-between gap-3 px-3 py-2 rounded-lg border text-left transition-colors ${
+                      authMethod === 'chatgpt'
+                        ? 'border-accent-green bg-accent-green/10 text-text-primary'
+                        : 'border-border bg-bg-tertiary text-text-secondary hover:bg-bg-hover'
+                    }`}
+                  >
+                    <div>
+                      <div className="text-xs font-semibold">ChatGPT sign-in</div>
+                      <div className="text-[10px] text-text-muted">Opens a browser window to authorize.</div>
+                    </div>
+                    <Icons.ArrowRight className="w-4 h-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setAuthMethod('apiKey')}
+                    className={`flex items-center justify-between gap-3 px-3 py-2 rounded-lg border text-left transition-colors ${
+                      authMethod === 'apiKey'
+                        ? 'border-accent-blue bg-accent-blue/10 text-text-primary'
+                        : 'border-border bg-bg-tertiary text-text-secondary hover:bg-bg-hover'
+                    }`}
+                  >
+                    <div>
+                      <div className="text-xs font-semibold">API key</div>
+                      <div className="text-[10px] text-text-muted">Use a key instead of browser auth.</div>
+                    </div>
+                    <Icons.Key className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+              {authMethod === 'apiKey' && (
+                <div className="space-y-1">
+                  <div className="text-[10px] uppercase tracking-[0.2em] text-text-muted">API key</div>
+                  <input
+                    type="password"
+                    value={authApiKey}
+                    onChange={(event) => setAuthApiKey(event.target.value)}
+                    placeholder="sk-..."
+                    className="w-full bg-bg-tertiary border border-border rounded-lg px-3 py-2 text-sm text-text-primary placeholder:text-text-muted outline-none focus:border-text-muted transition-colors"
+                  />
+                  <p className="text-[11px] text-text-muted">Stored locally by the hub.</p>
+                </div>
+              )}
+            </div>
+            <div className="flex justify-end gap-2 mt-5">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowAddDialog(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                disabled={
+                  isAdding ||
+                  !newAccountName.trim() ||
+                  (authMethod === 'apiKey' && !authApiKey.trim())
+                }
+              >
+                {isAdding ? 'Creating...' : 'Create & Connect'}
+              </Button>
+            </div>
+          </form>
+        </Dialog>
+
+        <Dialog
+          open={authDialog.open}
+          onClose={() => {
+            setAuthDialog({ open: false, mode: 'create' })
+            resetAuthDialog()
           }}
-          title="Add Account"
-          placeholder="Account name..."
-          submitLabel="Create"
-        />
+          title={`Sign in ${authDialog.accountName ? `• ${authDialog.accountName}` : ''}`}
+        >
+          <form
+            onSubmit={async (event) => {
+              event.preventDefault()
+              if (!authDialog.accountId) return
+              if (authMethod === 'apiKey' && !authApiKey.trim()) return
+              const success = await handleAccountAuth(
+                authDialog.accountId,
+                authMethod,
+                authApiKey.trim() || undefined
+              )
+              if (success) {
+                setAuthDialog({ open: false, mode: 'create' })
+              }
+            }}
+          >
+            <div className="space-y-4">
+              <div className="text-xs text-text-muted">
+                Choose how you want to authenticate this account. ChatGPT is the fastest option, but API keys work offline.
+              </div>
+              <div className="grid grid-cols-1 gap-2">
+                <button
+                  type="button"
+                  onClick={() => setAuthMethod('chatgpt')}
+                  className={`flex items-center justify-between gap-3 px-3 py-2 rounded-lg border text-left transition-colors ${
+                    authMethod === 'chatgpt'
+                      ? 'border-accent-green bg-accent-green/10 text-text-primary'
+                      : 'border-border bg-bg-tertiary text-text-secondary hover:bg-bg-hover'
+                  }`}
+                >
+                  <div>
+                    <div className="text-xs font-semibold">ChatGPT sign-in</div>
+                    <div className="text-[10px] text-text-muted">Opens a browser window to authorize.</div>
+                  </div>
+                  <Icons.ArrowRight className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setAuthMethod('apiKey')}
+                  className={`flex items-center justify-between gap-3 px-3 py-2 rounded-lg border text-left transition-colors ${
+                    authMethod === 'apiKey'
+                      ? 'border-accent-blue bg-accent-blue/10 text-text-primary'
+                      : 'border-border bg-bg-tertiary text-text-secondary hover:bg-bg-hover'
+                  }`}
+                >
+                  <div>
+                    <div className="text-xs font-semibold">API key</div>
+                    <div className="text-[10px] text-text-muted">Use a key instead of browser auth.</div>
+                  </div>
+                  <Icons.Key className="w-4 h-4" />
+                </button>
+              </div>
+              {authMethod === 'apiKey' && (
+                <div className="space-y-1">
+                  <div className="text-[10px] uppercase tracking-[0.2em] text-text-muted">API key</div>
+                  <input
+                    type="password"
+                    value={authApiKey}
+                    onChange={(event) => setAuthApiKey(event.target.value)}
+                    placeholder="sk-..."
+                    className="w-full bg-bg-tertiary border border-border rounded-lg px-3 py-2 text-sm text-text-primary placeholder:text-text-muted outline-none focus:border-text-muted transition-colors"
+                  />
+                  <p className="text-[11px] text-text-muted">Stored locally by the hub.</p>
+                </div>
+              )}
+            </div>
+            <div className="flex justify-end gap-2 mt-5">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setAuthDialog({ open: false, mode: 'create' })}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                disabled={
+                  !authDialog.accountId ||
+                  (authMethod === 'apiKey' && !authApiKey.trim()) ||
+                  authPendingId === authDialog.accountId
+                }
+              >
+                {authPendingId === authDialog.accountId ? 'Connecting...' : 'Connect'}
+              </Button>
+            </div>
+          </form>
+        </Dialog>
 
         <AlertDialog
           open={alertDialog.open}

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

@@ -379,7 +379,7 @@ function getActionType(msg: Message): AssistantAction['type'] {
     if (title.includes('read') || title.includes('view') || title.includes('list')) return 'explored'
     if (title.includes('edit') || title.includes('wrote') || title.includes('creat')) return 'edited'
     if (title.includes('ran') || title.includes('exec') || title.includes('command')) return 'ran'
-    return 'explored'
+    return 'chat'
   }
   return 'chat'
 }
@@ -444,15 +444,31 @@ function getActionLabel(type: AssistantAction['type'], messages: Message[]): { l
   }
 }
 
+const extractBoldHeadline = (content: string): string | null => {
+  const match = content.match(/\*\*(.+?)\*\*/)
+  return match ? match[1] : null
+}
+
 const extractReasoningHeadline = (content: string) => {
-  const match = content.match(/(?:^|\n)\s*\*\*(.+?)\*\*/u)
-  if (match?.[1]) {
-    return match[1].trim()
+  const boldHeadline = extractBoldHeadline(content)
+  if (boldHeadline) {
+    return boldHeadline
   }
   const firstLine = content.split('\n').map((line) => line.trim()).find(Boolean)
   return firstLine || null
 }
 
+const stripBoldHeadlines = (content: string): string => {
+  return content
+    .split('\n')
+    .filter((line) => {
+      const trimmed = line.trim()
+      return !/^\*\*.+?\*\*$/u.test(trimmed)
+    })
+    .join('\n')
+    .trim()
+}
+
 function groupMessagesIntoTurns(messages: Message[]): Turn[] {
   const turns: Turn[] = []
   let currentTurn: Turn | null = null
@@ -1054,8 +1070,8 @@ function ActionRow({ action }: { action: AssistantAction }) {
   }
   
   if (action.type === 'reasoning') {
-    const content = action.messages.map(m => m.content).join('\n\n')
-    const trimmed = content.trim().toLowerCase()
+    const rawContent = action.messages.map(m => m.content).join('\n\n')
+    const trimmed = rawContent.trim().toLowerCase()
     const isPlaceholder = !trimmed || trimmed === 'reasoning' || trimmed === 'reasoning summary' || trimmed === 'thinking'
     
     if (isPlaceholder) {
@@ -1065,6 +1081,12 @@ function ActionRow({ action }: { action: AssistantAction }) {
         </div>
       )
     }
+
+    const content = stripBoldHeadlines(rawContent)
+    
+    if (!content.trim()) {
+      return null
+    }
     
     return (
       <div>

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

@@ -23,37 +23,40 @@ export const SessionAuthBanner = ({
 
   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 flex flex-col gap-3">
-        <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 className="relative overflow-hidden rounded-2xl border border-border bg-bg-tertiary px-4 py-4 shadow-lg">
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(120%_120%_at_0%_0%,rgba(16,185,129,0.18),transparent_55%)]" />
+        <div className="relative flex flex-col gap-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>
+              <h3 className="text-sm font-semibold text-text-primary">Connect this account</h3>
+              <p className="text-xs text-text-muted mt-1">
+                {pending
+                  ? 'Waiting for sign-in to complete. Return here after authorizing the account.'
+                  : 'Choose ChatGPT for the fastest setup, or drop in an API key for direct access.'}
+              </p>
+            </div>
           </div>
-          <div>
-            <h3 className="text-sm font-semibold text-text-primary">Authenticate to start sessions</h3>
-            <p className="text-xs text-text-muted mt-1">
-              {pending
-                ? 'Waiting for sign-in to complete. Return here after authorizing the account.'
-                : 'This account is not signed in. Connect with ChatGPT or provide an API key to enable new sessions and messaging.'}
-            </p>
-          </div>
-        </div>
-        <div className="flex flex-wrap gap-2">
-          <Button variant="primary" size="sm" onClick={onChatgpt}>
-            Sign in with ChatGPT
-          </Button>
-          <Button variant="ghost" size="sm" onClick={onApiKey}>
-            Use API key
-          </Button>
-          {pending && onCancel && (
-            <Button variant="ghost" size="sm" onClick={onCancel}>
-              Cancel login
+          <div className="flex flex-wrap gap-2">
+            <Button variant="primary" size="sm" onClick={onChatgpt}>
+              Sign in with ChatGPT
             </Button>
-          )}
-          {onRefresh && (
-            <Button variant="ghost" size="sm" onClick={onRefresh}>
-              Check status
+            <Button variant="ghost" size="sm" onClick={onApiKey}>
+              Use API key
             </Button>
-          )}
+            {pending && onCancel && (
+              <Button variant="ghost" size="sm" onClick={onCancel}>
+                Cancel login
+              </Button>
+            )}
+            {onRefresh && (
+              <Button variant="ghost" size="sm" onClick={onRefresh}>
+                Check status
+              </Button>
+            )}
+          </div>
         </div>
       </div>
     </div>

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

@@ -28,6 +28,10 @@ interface SessionComposerProps {
   onEffortChange: (value: string) => void
   showModelSelect: boolean
   showEffortSelect: boolean
+  sandboxOptions: SelectOption[]
+  effectiveSandbox: string
+  onSandboxChange: (value: string) => void
+  showSandboxSelect: boolean
   queuedCount: number
   webSearchEnabled: boolean
   onWebSearchToggle: () => void
@@ -65,6 +69,10 @@ export const SessionComposer = ({
   onEffortChange,
   showModelSelect,
   showEffortSelect,
+  sandboxOptions,
+  effectiveSandbox,
+  onSandboxChange,
+  showSandboxSelect,
   queuedCount,
   webSearchEnabled,
   onWebSearchToggle,
@@ -292,6 +300,18 @@ export const SessionComposer = ({
                   label="Reasoning Effort"
                 />
               )}
+              {showSandboxSelect && (
+                <Select
+                  options={sandboxOptions}
+                  value={effectiveSandbox}
+                  onChange={onSandboxChange}
+                  placeholder="Sandbox"
+                  size="sm"
+                  disabled={!canInteract}
+                  className="min-w-[150px] sm:min-w-[220px] shrink-0"
+                  label="Sandbox"
+                />
+              )}
             </div>
             <div className="flex items-center gap-2 sm:gap-3 shrink-0">
               {queuedCount > 0 && (

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

@@ -196,4 +196,10 @@ export const Icons = {
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
     </svg>
   ),
+
+  Key: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 7a5 5 0 11-4.757 6.683L7 17H4v3h3v-2h2v-2l1.243-1.317A5 5 0 0115 7z" />
+    </svg>
+  ),
 }

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { hubClient, type HubProfile } from '../services/hub-client'
 import { useAppStore } from '../store'
-import type { Account, Thread } from '../types'
+import type { Account, Thread, SandboxMode, SandboxPolicy } from '../types'
 import { buildSystemMessage } from '../utils/item-format'
 import { accountStatusFromRead, parseUsage, refreshAccountSnapshot, fetchAllModels, type AccountReadResult, type RateLimitResult } from '../utils/account-refresh'
 
@@ -19,6 +19,21 @@ type ItemPayload = { id?: string; type?: string } & Record<string, unknown>
 const isThreadItem = (item: ItemPayload | undefined): item is { id: string; type: string } & Record<string, unknown> =>
   !!item && typeof item.id === 'string' && typeof item.type === 'string'
 
+const resolveSandboxPolicy = (mode?: SandboxMode | null): SandboxPolicy | null => {
+  switch (mode) {
+    case 'danger-full-access':
+      return { type: 'dangerFullAccess' }
+    case 'read-only':
+      return { type: 'readOnly' }
+    case 'workspace-write':
+      return { type: 'workspaceWrite' }
+    default:
+      return null
+  }
+}
+
+const ALWAYS_ALLOW_SANDBOX_POLICY: SandboxPolicy = { type: 'workspaceWrite' }
+
 const formatDate = (timestamp?: number): string => {
   if (!timestamp) {
     return ''
@@ -145,6 +160,9 @@ export const useHubConnection = () => {
       })
       updateThread(threadId, { status: 'active' })
       try {
+        const sandboxPolicy = resolveSandboxPolicy(next.sandbox)
+        const effectiveSandboxPolicy =
+          sandboxPolicy ?? (next.approvalPolicy === 'never' ? ALWAYS_ALLOW_SANDBOX_POLICY : null)
         await hubClient.request(profileId, 'turn/start', {
           threadId,
           input: [{ type: 'text', text: next.text }],
@@ -153,6 +171,7 @@ export const useHubConnection = () => {
           summary: next.summary ?? undefined,
           cwd: next.cwd ?? undefined,
           approvalPolicy: next.approvalPolicy ?? undefined,
+          sandboxPolicy: effectiveSandboxPolicy ?? undefined,
         })
       } catch (error) {
         console.error(error)

package/apps/web/src/hooks/use-thread-history.ts

@@ -189,6 +189,7 @@ export const useThreadHistory = () => {
     setThreadApproval,
     setThreadCwd,
     setThreadTurnId,
+    setThreadTurnStartedAt,
   } = useAppStore()
 
   const inFlight = useRef<Set<string>>(new Set())
@@ -238,12 +239,35 @@ export const useThreadHistory = () => {
 
         let activeTurn: TurnData | null = null
         for (let index = turns.length - 1; index >= 0; index -= 1) {
-          if (isTurnInProgress(turns[index]?.status)) {
+          const turnStatus = turns[index]?.status
+          if (isTurnInProgress(turnStatus)) {
             activeTurn = turns[index]
             break
           }
         }
+        
         setThreadTurnId(selectedThreadId, activeTurn?.id ?? null)
+        
+        // If there's an active turn, ensure startedAt is set (may have been set by hub connection)
+        if (activeTurn) {
+          const existingStartedAt = useAppStore.getState().threadTurnStartedAt[selectedThreadId]
+          if (!existingStartedAt) {
+            // Use current time as fallback if no startedAt was set
+            setThreadTurnStartedAt(selectedThreadId, Date.now())
+          }
+        } else {
+          // No active turn according to codex - check if backend thought it was active
+          const existingStartedAt = useAppStore.getState().threadTurnStartedAt[selectedThreadId]
+          if (existingStartedAt) {
+            // Backend had stale data - notify it to clear the active thread
+            console.log('[useThreadHistory] Clearing stale active thread from backend:', { threadId: selectedThreadId, profileId: thread.accountId })
+            hubClient.clearActiveThread({ profileId: thread.accountId, threadId: selectedThreadId }).catch((err) => {
+              console.error('[useThreadHistory] Failed to clear stale active thread:', err)
+            })
+          }
+          setThreadTurnStartedAt(selectedThreadId, null)
+        }
+        
         const nextStatus = thread.status === 'archived'
           ? 'archived'
           : activeTurn
@@ -294,6 +318,7 @@ export const useThreadHistory = () => {
     threads,
     updateThread,
     setThreadTurnId,
+    setThreadTurnStartedAt,
     setThreadCwd,
   ])
 }

package/apps/web/src/services/hub-client.ts

@@ -339,6 +339,15 @@ class HubClient {
     return data.threads ?? []
   }
 
+  async clearActiveThread(params: { profileId: string; threadId: string }): Promise<void> {
+    const url = new URL(`/threads/active/${params.threadId}`, HUB_URL)
+    url.searchParams.set('profileId', params.profileId)
+    const response = await fetch(url.toString(), { method: 'DELETE' })
+    if (!response.ok) {
+      throw new Error('Failed to clear active thread')
+    }
+  }
+
   async listReviews(params?: { profileId?: string; limit?: number; offset?: number }): Promise<ReviewSessionResult[]> {
     const url = new URL('/reviews', HUB_URL)
     if (params?.profileId) url.searchParams.set('profileId', params.profileId)

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

@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import type { Account, Thread, Message, ApprovalRequest, TabType, ModelInfo, ReasoningEffort, ReasoningSummary, ApprovalPolicy, QueuedMessage, ReviewSession } from '../types'
+import type { Account, Thread, Message, ApprovalRequest, TabType, ModelInfo, ReasoningEffort, ReasoningSummary, ApprovalPolicy, QueuedMessage, ReviewSession, SandboxMode } from '../types'
 
 interface AppState {
   accounts: Account[]
@@ -16,6 +16,7 @@ interface AppState {
   threadCwds: Record<string, string>
   threadApprovals: Record<string, ApprovalPolicy>
   threadWebSearch: Record<string, boolean>
+  threadSandboxes: Record<string, SandboxMode>
   threadTurnIds: Record<string, string>
   threadTurnStartedAt: Record<string, number>
   threadLastTurnDuration: Record<string, number>
@@ -56,6 +57,7 @@ interface AppState {
   setThreadSummary: (threadId: string, summary: ReasoningSummary) => void
   setThreadCwd: (threadId: string, cwd: string) => void
   setThreadApproval: (threadId: string, approval: ApprovalPolicy) => void
+  setThreadSandbox: (threadId: string, sandbox: SandboxMode | null) => void
   setThreadWebSearch: (threadId: string, enabled: boolean) => void
   setThreadTurnId: (threadId: string, turnId: string | null) => void
   setThreadTurnStartedAt: (threadId: string, startedAt: number | null) => void
@@ -106,12 +108,20 @@ export const useAppStore = create<AppState>((set, get) => ({
   threadCwds: {},
   threadApprovals: {},
   threadWebSearch: {},
+  threadSandboxes: {},
   threadTurnIds: {},
   threadTurnStartedAt: {},
   threadLastTurnDuration: {},
   threadTokenUsage: {},
   threadPendingAccountSwitch: {},
-  backendToUiThreadId: {},
+  backendToUiThreadId: (() => {
+    try {
+      const stored = localStorage.getItem('backendToUiThreadId')
+      return stored ? JSON.parse(stored) : {}
+    } catch {
+      return {}
+    }
+  })(),
   messages: {},
   queuedMessages: {},
   approvals: [],
@@ -150,6 +160,9 @@ export const useAppStore = create<AppState>((set, get) => ({
     const threadApprovals = Object.fromEntries(
       Object.entries(state.threadApprovals).filter(([threadId]) => remainingThreadIds.has(threadId))
     )
+    const threadSandboxes = Object.fromEntries(
+      Object.entries(state.threadSandboxes).filter(([threadId]) => remainingThreadIds.has(threadId))
+    )
     const threadTokenUsage = Object.fromEntries(
       Object.entries(state.threadTokenUsage).filter(([threadId]) => remainingThreadIds.has(threadId))
     )
@@ -173,6 +186,7 @@ export const useAppStore = create<AppState>((set, get) => ({
       threadSummaries,
       threadCwds,
       threadApprovals,
+      threadSandboxes,
       threadTokenUsage,
       modelsByAccount,
       accountLoginIds,
@@ -221,6 +235,9 @@ export const useAppStore = create<AppState>((set, get) => ({
     threadCwds: Object.fromEntries(
       Object.entries(state.threadCwds).filter(([threadId]) => threadId !== id)
     ),
+    threadSandboxes: Object.fromEntries(
+      Object.entries(state.threadSandboxes).filter(([threadId]) => threadId !== id)
+    ),
     threadTokenUsage: Object.fromEntries(
       Object.entries(state.threadTokenUsage).filter(([threadId]) => threadId !== id)
     ),
@@ -284,6 +301,19 @@ export const useAppStore = create<AppState>((set, get) => ({
       [threadId]: approval,
     },
   })),
+  setThreadSandbox: (threadId, sandbox) => set((state) => {
+    if (!sandbox) {
+      const next = { ...state.threadSandboxes }
+      delete next[threadId]
+      return { threadSandboxes: next }
+    }
+    return {
+      threadSandboxes: {
+        ...state.threadSandboxes,
+        [threadId]: sandbox,
+      },
+    }
+  }),
   setThreadWebSearch: (threadId, enabled) => set((state) => ({
     threadWebSearch: {
       ...state.threadWebSearch,
@@ -345,16 +375,21 @@ export const useAppStore = create<AppState>((set, get) => ({
     }
   }),
   setBackendToUiThreadId: (backendThreadId, uiThreadId) => set((state) => {
+    let newMapping: Record<string, string>
     if (uiThreadId === null) {
       const { [backendThreadId]: _, ...rest } = state.backendToUiThreadId
-      return { backendToUiThreadId: rest }
-    }
-    return {
-      backendToUiThreadId: {
+      newMapping = rest
+    } else {
+      newMapping = {
         ...state.backendToUiThreadId,
         [backendThreadId]: uiThreadId,
-      },
+      }
+    }
+    try {
+      localStorage.setItem('backendToUiThreadId', JSON.stringify(newMapping))
+    } catch {
     }
+    return { backendToUiThreadId: newMapping }
   }),
   resolveThreadId: (threadId: string): string => {
     const state = get()

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

@@ -6,6 +6,11 @@ export type TabType = 'sessions' | 'reviews' | 'archive'
 export type ReasoningEffort = 'none' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh'
 export type ReasoningSummary = 'auto' | 'concise' | 'detailed' | 'none'
 export type ApprovalPolicy = 'untrusted' | 'on-failure' | 'on-request' | 'never'
+export type SandboxMode = 'read-only' | 'workspace-write' | 'danger-full-access'
+export type SandboxPolicy =
+  | { type: 'dangerFullAccess' }
+  | { type: 'readOnly' }
+  | { type: 'workspaceWrite'; networkAccess?: boolean }
 export type ReviewStatus = 'pending' | 'running' | 'completed' | 'failed'
 
 export type CommandAction =
@@ -104,6 +109,7 @@ export interface QueuedMessage {
   summary?: ReasoningSummary | null
   cwd?: string | null
   approvalPolicy?: ApprovalPolicy | null
+  sandbox?: SandboxMode | null
   createdAt: number
 }
 

package/package.json

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