diff --git a/output/playwright/verify-bug-032-approval-panel.mjs b/output/playwright/verify-bug-032-approval-panel.mjs
new file mode 100644
index 00000000..eef2a42a
--- /dev/null
+++ b/output/playwright/verify-bug-032-approval-panel.mjs
@@ -0,0 +1,592 @@
+import { chromium } from 'playwright'
+
+const BASE_URL = process.env.CODEXUI_BASE_URL || 'http://127.0.0.1:4176'
+const THREAD_ID = '0195f727-b3ce-b843-bcb7-04b36dc70451'
+const CWD = 'D:\\RENAT\\Documents\\codexui-fork'
+const DARK_MODE_KEY = 'codex-web-local.dark-mode.v1'
+const CREATED_AT = 1774680000
+const UPDATED_AT = 1774680300
+const APPROVAL_REQUEST_ID = 32032
+const APPROVAL_WRAPPED_COMMAND = '"C:\\\\Windows\\\\System32\\\\WindowsPowerShell\\\\v1.0\\\\powershell.exe" -Command "cmd /c \\"echo approval-test > %TEMP%\\\\codex-approval-test.txt\\""' 
+const APPROVAL_COMMAND = 'cmd /c "echo approval-test > %TEMP%\\\\codex-approval-test.txt"'
+const APPROVAL_PROMPT = 'Do you want to allow creating the requested approval test file in %TEMP% with one cmd command?'
+const FOLLOW_UP_MESSAGE = 'Please do this another way without writing outside the workspace.'
+const FOLLOW_UP_VISIBILITY_DELAY_MS = 2500
+
+const respondBodies = []
+const turnStartBodies = []
+
+function buildThread({
+  id,
+  name,
+  preview,
+  updatedAt,
+  createdAt,
+  inProgress = false,
+  turns = [],
+}) {
+  return {
+    id,
+    preview,
+    name,
+    cwd: CWD,
+    updatedAt,
+    createdAt,
+    modelProvider: 'openai',
+    path: null,
+    cliVersion: '0.0.0-dev',
+    source: 'appServer',
+    gitInfo: { branch: 'main' },
+    turns,
+    status: inProgress ? 'inProgress' : 'completed',
+    inProgress,
+    agentNickname: null,
+    agentRole: null,
+  }
+}
+
+function buildThreadListPayload() {
+  return {
+    data: [
+      buildThread({
+        id: THREAD_ID,
+        name: 'Run approval-test command',
+        preview: 'Approval request should replace the composer.',
+        updatedAt: UPDATED_AT,
+        createdAt: CREATED_AT,
+        inProgress: true,
+      }),
+    ],
+    nextCursor: null,
+  }
+}
+
+function buildThreadReadPayload(mockState) {
+  const followUpVisible =
+    mockState.followUpRequestedAtMs > 0 &&
+    Date.now() - mockState.followUpRequestedAtMs >= FOLLOW_UP_VISIBILITY_DELAY_MS
+
+  const turns = [
+    {
+      id: 'turn-approval-sequence',
+      status: 'inProgress',
+      items: [
+        {
+          type: 'userMessage',
+          id: 'user-approval-seed',
+          content: [
+            {
+              type: 'text',
+              text: 'Run the approval-test command and ask for approval first.',
+            },
+          ],
+        },
+        {
+          type: 'agentMessage',
+          id: 'assistant-explanation-1',
+          text: 'The desktop app emitted a pending approval request. CodexUI should show it as a bottom waiting panel instead of a chat message.',
+        },
+        {
+          type: 'agentMessage',
+          id: 'assistant-explanation-2',
+          text: 'This thread intentionally contains enough history to make the old top-of-chat rendering obvious if it ever regresses.',
+        },
+        {
+          type: 'agentMessage',
+          id: 'assistant-explanation-3',
+          text: 'When the request is answered, the normal composer should come back immediately.',
+        },
+      ],
+    },
+  ]
+
+  if (followUpVisible) {
+    turns.push({
+      id: 'turn-approval-follow-up',
+      status: 'inProgress',
+      items: [
+        {
+          type: 'userMessage',
+          id: 'user-follow-up-message',
+          content: [
+            {
+              type: 'text',
+              text: FOLLOW_UP_MESSAGE,
+            },
+          ],
+        },
+      ],
+    })
+  }
+
+  return {
+    thread: buildThread({
+      id: THREAD_ID,
+      name: 'Run approval-test command',
+      preview: 'Approval request should replace the composer.',
+      updatedAt: UPDATED_AT,
+      createdAt: CREATED_AT,
+      inProgress: true,
+      turns,
+    }),
+  }
+}
+
+function buildPendingApprovalRequest() {
+  return {
+    id: APPROVAL_REQUEST_ID,
+    method: 'item/commandExecution/requestApproval',
+    threadId: THREAD_ID,
+    turnId: 'turn-approval-sequence',
+    itemId: 'approval-item-1',
+    receivedAtIso: '2026-03-28T09:15:00.000Z',
+    params: {
+      id: APPROVAL_REQUEST_ID,
+      method: 'item/commandExecution/requestApproval',
+      threadId: THREAD_ID,
+      turnId: 'turn-approval-sequence',
+      itemId: 'approval-item-1',
+      reason: APPROVAL_PROMPT,
+      command: APPROVAL_WRAPPED_COMMAND,
+      cwd: CWD,
+      commandActions: [
+        {
+          type: 'unknown',
+          command: APPROVAL_COMMAND,
+        },
+      ],
+    },
+  }
+}
+
+function jsonResponse(body, status = 200) {
+  return {
+    status,
+    contentType: 'application/json',
+    body: JSON.stringify(body),
+  }
+}
+
+async function installApiMocks(page) {
+  const mockState = {
+    followUpRequestedAtMs: 0,
+  }
+
+  await page.route('**/codex-api/**', async (route) => {
+    const request = route.request()
+    const url = new URL(request.url())
+
+    if (url.pathname === '/codex-api/rpc' && request.method() === 'POST') {
+      const payload = JSON.parse(request.postData() || '{}')
+      const method = typeof payload.method === 'string' ? payload.method : ''
+
+      switch (method) {
+        case 'thread/list':
+          await route.fulfill(jsonResponse({ result: buildThreadListPayload() }))
+          return
+        case 'thread/read':
+          await route.fulfill(jsonResponse({ result: buildThreadReadPayload(mockState) }))
+          return
+        case 'thread/resume':
+        case 'turn/interrupt':
+        case 'setDefaultModel':
+        case 'config/batchWrite':
+          await route.fulfill(jsonResponse({ result: {} }))
+          return
+        case 'turn/start':
+          turnStartBodies.push(payload.params ?? null)
+          mockState.followUpRequestedAtMs = Date.now()
+          await route.fulfill(jsonResponse({ result: {} }))
+          return
+        case 'model/list':
+          await route.fulfill(jsonResponse({
+            result: {
+              data: [
+                { id: 'gpt-5.4' },
+                { id: 'gpt-5.4-mini' },
+              ],
+            },
+          }))
+          return
+        case 'config/read':
+          await route.fulfill(jsonResponse({
+            result: {
+              config: {
+                model: 'gpt-5.4',
+                model_reasoning_effort: 'high',
+                service_tier: 'default',
+              },
+            },
+          }))
+          return
+        case 'account/rateLimits/read':
+          await route.fulfill(jsonResponse({
+            result: {
+              rateLimits: null,
+              rateLimitsByLimitId: {},
+            },
+          }))
+          return
+        case 'skills/list':
+          await route.fulfill(jsonResponse({
+            result: {
+              data: [],
+            },
+          }))
+          return
+        default:
+          await route.fulfill(jsonResponse({ result: {} }))
+          return
+      }
+    }
+
+    if (url.pathname === '/codex-api/server-requests/pending' && request.method() === 'GET') {
+      await route.fulfill(jsonResponse({ data: [buildPendingApprovalRequest()] }))
+      return
+    }
+
+    if (url.pathname === '/codex-api/server-requests/respond' && request.method() === 'POST') {
+      respondBodies.push(JSON.parse(request.postData() || '{}'))
+      await route.fulfill(jsonResponse({ ok: true }))
+      return
+    }
+
+    if (url.pathname === '/codex-api/home-directory' && request.method() === 'GET') {
+      await route.fulfill(jsonResponse({ data: { path: 'D:\\RENAT\\Documents' } }))
+      return
+    }
+
+    if (url.pathname === '/codex-api/workspace-roots-state' && request.method() === 'GET') {
+      await route.fulfill(jsonResponse({
+        data: {
+          order: [CWD],
+          labels: { [CWD]: 'codexui-fork' },
+          active: [CWD],
+        },
+      }))
+      return
+    }
+
+    if (url.pathname === '/codex-api/project-root-suggestion' && request.method() === 'GET') {
+      await route.fulfill(jsonResponse({
+        data: {
+          name: 'codexui-fork-approval-test',
+          path: 'D:\\RENAT\\Documents\\codexui-fork-approval-test',
+        },
+      }))
+      return
+    }
+
+    if (url.pathname === '/codex-api/thread-read-state') {
+      await route.fulfill(jsonResponse({ data: {} }))
+      return
+    }
+
+    if (url.pathname === '/codex-api/thread-titles') {
+      await route.fulfill(jsonResponse({ data: { titles: {}, order: [] } }))
+      return
+    }
+
+    if (url.pathname === '/codex-api/transport-diagnostics' || url.pathname === '/codex-api/system-row-diagnostics') {
+      await route.fulfill(jsonResponse({ ok: true }))
+      return
+    }
+
+    await route.fulfill(jsonResponse({ data: {} }))
+  })
+}
+
+async function assertPendingPanelLayout(page, viewportLabel) {
+  await page.waitForSelector('.thread-pending-request-shell', { timeout: 15000 })
+  await page.waitForTimeout(2500)
+
+  const shell = page.locator('.composer-with-queue > .thread-pending-request .thread-pending-request-shell')
+  const shellCount = await shell.count()
+  if (shellCount !== 1) {
+    throw new Error(`[${viewportLabel}] Expected one pending request shell inside composer slot, found ${shellCount}`)
+  }
+
+  const nestedInConversation = await page.locator('.conversation-list .thread-pending-request').count()
+  if (nestedInConversation !== 0) {
+    throw new Error(`[${viewportLabel}] Pending request panel rendered inside the conversation list`)
+  }
+
+  const oldRequestCards = await page.locator('.conversation-list .request-card').count()
+  if (oldRequestCards !== 0) {
+    throw new Error(`[${viewportLabel}] Old top-of-chat request cards are still rendering`)
+  }
+
+  const composerCount = await page.locator('.thread-composer').count()
+  if (composerCount !== 0) {
+    throw new Error(`[${viewportLabel}] Thread composer should be hidden while approval is pending`)
+  }
+
+  const sidebarChip = page.locator('.thread-row-request-chip').first()
+  if (await sidebarChip.count() !== 1) {
+    throw new Error(`[${viewportLabel}] Expected an awaiting-approval chip in the sidebar`)
+  }
+
+  const promptText = (await shell.locator('.thread-pending-request-title').innerText()).replace(/\s+/gu, ' ').trim()
+  if (!promptText.includes('allow creating the requested approval test file')) {
+    throw new Error(`[${viewportLabel}] Unexpected approval prompt: ${promptText}`)
+  }
+
+  const eyebrowCount = await shell.locator('.thread-pending-request-eyebrow').count()
+  if (eyebrowCount !== 0) {
+    throw new Error(`[${viewportLabel}] Approval panel should not show an eyebrow label`)
+  }
+
+  const previewText = (await shell.locator('.thread-pending-request-command-line').innerText()).replace(/\s+/gu, ' ').trim()
+  if (previewText !== APPROVAL_COMMAND) {
+    throw new Error(`[${viewportLabel}] Approval preview should show the unwrapped command only, got: ${previewText}`)
+  }
+
+  if (previewText.includes('WindowsPowerShell')) {
+    throw new Error(`[${viewportLabel}] Approval preview leaked the PowerShell wrapper`)
+  }
+
+  const optionCount = await shell.locator('.thread-pending-request-option').count()
+  if (optionCount !== 2) {
+    throw new Error(`[${viewportLabel}] Expected exactly 2 clickable approval options, found ${optionCount}`)
+  }
+
+  const inlineInput = shell.locator('.thread-pending-request-inline-control')
+  if (await inlineInput.count() !== 1) {
+    throw new Error(`[${viewportLabel}] Expected an inline freeform input for option 3`)
+  }
+
+  const panelBox = await shell.boundingBox()
+  if (!panelBox) {
+    throw new Error(`[${viewportLabel}] Pending request panel was not visible`)
+  }
+
+  const queueBox = await page.locator('.composer-with-queue').boundingBox()
+  if (queueBox && panelBox.width < queueBox.width * 0.88) {
+    throw new Error(`[${viewportLabel}] Pending panel should span almost the full composer width`)
+  }
+
+  const viewport = page.viewportSize()
+  if (!viewport) {
+    throw new Error(`[${viewportLabel}] Missing viewport metadata`)
+  }
+
+  if (panelBox.y + panelBox.height > viewport.height + 6) {
+    throw new Error(`[${viewportLabel}] Pending panel overflowed past the viewport bottom`)
+  }
+
+  if (viewportLabel === 'desktop') {
+    const optionOneBox = await shell.locator('.thread-pending-request-option').nth(0).boundingBox()
+    const optionTwoBox = await shell.locator('.thread-pending-request-option').nth(1).boundingBox()
+    const inlineRowBox = await shell.locator('.thread-pending-request-inline-input').boundingBox()
+    const skipBox = await shell.locator('.thread-pending-request-secondary').boundingBox()
+    const sendBox = await shell.locator('.thread-pending-request-primary').boundingBox()
+
+    if (!optionOneBox || !optionTwoBox || !inlineRowBox || !skipBox || !sendBox) {
+      throw new Error('[desktop] Missing inline approval controls')
+    }
+
+    if (Math.abs(optionOneBox.x - optionTwoBox.x) >= 2 || Math.abs(optionOneBox.x - inlineRowBox.x) >= 2) {
+      throw new Error('[desktop] Approval options and inline option 3 should share the same left alignment')
+    }
+
+    const sameRow = Math.max(
+      Math.abs(inlineRowBox.y - skipBox.y),
+      Math.abs(inlineRowBox.y - sendBox.y),
+    ) < 18
+
+    if (!sameRow) {
+      throw new Error('[desktop] Option 3 input, Skip, and Send should stay on the same row')
+    }
+
+    const controlHeights = [
+      optionOneBox.height,
+      optionTwoBox.height,
+      inlineRowBox.height,
+      skipBox.height,
+      sendBox.height,
+    ]
+    const minHeight = Math.min(...controlHeights)
+    const maxHeight = Math.max(...controlHeights)
+
+    if (maxHeight - minHeight > 4) {
+      throw new Error(`[desktop] Approval controls should have matching compact heights, got: ${controlHeights.join(', ')}`)
+    }
+  }
+}
+
+async function createContext(browser, width, height) {
+  const context = await browser.newContext({ viewport: { width, height } })
+  await context.addInitScript(({ threadId, darkModeKey }) => {
+    localStorage.setItem('codex-web-local.selected-thread-id.v1', threadId)
+    localStorage.setItem(darkModeKey, 'dark')
+    Object.defineProperty(window, 'WebSocket', { configurable: true, writable: true, value: undefined })
+    Object.defineProperty(window, 'EventSource', { configurable: true, writable: true, value: undefined })
+    Object.defineProperty(Navigator.prototype, 'sendBeacon', {
+      configurable: true,
+      writable: true,
+      value: () => true,
+    })
+  }, { threadId: THREAD_ID, darkModeKey: DARK_MODE_KEY })
+  return context
+}
+
+async function runViewportVerification(browser, {
+  width,
+  height,
+  name,
+  screenshotPath,
+  submissionKind = null,
+}) {
+  const context = await createContext(browser, width, height)
+  const page = await context.newPage()
+  const pageErrors = []
+  const consoleMessages = []
+
+  page.on('pageerror', (error) => {
+    pageErrors.push(error.message)
+  })
+  page.on('console', (message) => {
+    if (message.type() === 'error') {
+      consoleMessages.push(message.text())
+    }
+  })
+
+  await installApiMocks(page)
+  await page.goto(`${BASE_URL}/#/thread/${THREAD_ID}`, { waitUntil: 'domcontentloaded' })
+  await assertPendingPanelLayout(page, name)
+
+  if (screenshotPath) {
+    await page.screenshot({ path: screenshotPath, fullPage: true })
+  }
+
+  if (submissionKind === 'acceptForSession') {
+    const initialRespondCount = respondBodies.length
+    await page.locator('.thread-pending-request-option').nth(1).click()
+    await page.locator('.thread-pending-request-primary').click()
+    await page.waitForFunction(
+      () => !document.querySelector('.thread-pending-request') && !!document.querySelector('.thread-composer'),
+      null,
+      { timeout: 10000 },
+    )
+
+    if (respondBodies.length !== initialRespondCount + 1) {
+      throw new Error(`[${name}] Expected one approval response payload, received ${respondBodies.length - initialRespondCount}`)
+    }
+
+    const approvalPayload = respondBodies.at(-1)
+    if (approvalPayload?.id !== APPROVAL_REQUEST_ID) {
+      throw new Error(`[${name}] Approval response used the wrong request id: ${JSON.stringify(approvalPayload)}`)
+    }
+
+    if (approvalPayload?.result?.decision !== 'acceptForSession') {
+      throw new Error(`[${name}] Expected acceptForSession reply, got: ${JSON.stringify(approvalPayload)}`)
+    }
+  }
+
+  if (submissionKind === 'declineWithMessage') {
+    const initialRespondCount = respondBodies.length
+    const initialTurnStartCount = turnStartBodies.length
+
+    await page.locator('.thread-pending-request-inline-control').fill(FOLLOW_UP_MESSAGE)
+    await page.locator('.thread-pending-request-primary').click()
+    await page.waitForFunction(
+      () => !document.querySelector('.thread-pending-request') && !!document.querySelector('.thread-composer'),
+      null,
+      { timeout: 10000 },
+    )
+
+    if (respondBodies.length !== initialRespondCount + 1) {
+      throw new Error(`[${name}] Expected one decline response payload, received ${respondBodies.length - initialRespondCount}`)
+    }
+
+    const approvalPayload = respondBodies.at(-1)
+    if (approvalPayload?.id !== APPROVAL_REQUEST_ID) {
+      throw new Error(`[${name}] Decline response used the wrong request id: ${JSON.stringify(approvalPayload)}`)
+    }
+
+    if (approvalPayload?.result?.decision !== 'decline') {
+      throw new Error(`[${name}] Expected decline reply, got: ${JSON.stringify(approvalPayload)}`)
+    }
+
+    if ('note' in (approvalPayload?.result ?? {})) {
+      throw new Error(`[${name}] Approval result should not include a note payload once follow-up text uses normal message send`)
+    }
+
+    if (turnStartBodies.length !== initialTurnStartCount + 1) {
+      throw new Error(`[${name}] Expected one follow-up turn/start payload, received ${turnStartBodies.length - initialTurnStartCount}`)
+    }
+
+    const turnStartPayload = turnStartBodies.at(-1)
+    if (turnStartPayload?.threadId !== THREAD_ID) {
+      throw new Error(`[${name}] Follow-up turn/start used the wrong thread: ${JSON.stringify(turnStartPayload)}`)
+    }
+
+    const firstInput = Array.isArray(turnStartPayload?.input) ? turnStartPayload.input[0] : null
+    if (firstInput?.type !== 'text' || firstInput?.text !== FOLLOW_UP_MESSAGE) {
+      throw new Error(`[${name}] Follow-up message should be sent through turn/start with the typed text, got: ${JSON.stringify(turnStartPayload)}`)
+    }
+
+    await page.waitForFunction(
+      (text) => document.body.innerText.includes(text),
+      FOLLOW_UP_MESSAGE,
+      { timeout: 10000 },
+    )
+  }
+
+  if (pageErrors.length > 0) {
+    throw new Error(`[${name}] Page errors: ${pageErrors.join(' | ')}`)
+  }
+
+  if (consoleMessages.length > 0) {
+    throw new Error(`[${name}] Console errors: ${consoleMessages.join(' | ')}`)
+  }
+
+  await context.close()
+}
+
+const browser = await chromium.launch({ headless: true })
+
+try {
+  await runViewportVerification(browser, {
+    width: 1440,
+    height: 1024,
+    name: 'desktop',
+    screenshotPath: 'output/playwright/bug-032-approval-panel-desktop.png',
+    submissionKind: 'declineWithMessage',
+  })
+
+  await runViewportVerification(browser, {
+    width: 375,
+    height: 812,
+    name: 'mobile',
+    screenshotPath: 'output/playwright/bug-032-approval-panel-mobile.png',
+  })
+
+  await runViewportVerification(browser, {
+    width: 768,
+    height: 1024,
+    name: 'tablet',
+    screenshotPath: 'output/playwright/bug-032-approval-panel-tablet.png',
+  })
+
+  await runViewportVerification(browser, {
+    width: 1280,
+    height: 900,
+    name: 'desktop-accept',
+    screenshotPath: null,
+    submissionKind: 'acceptForSession',
+  })
+
+  console.log(JSON.stringify({
+    ok: true,
+    screenshots: [
+      'output/playwright/bug-032-approval-panel-desktop.png',
+      'output/playwright/bug-032-approval-panel-mobile.png',
+      'output/playwright/bug-032-approval-panel-tablet.png',
+    ],
+    response: respondBodies.at(-1) ?? null,
+    followUpTurnStart: turnStartBodies.at(-1) ?? null,
+  }, null, 2))
+} finally {
+  await browser.close()
+}
diff --git a/src/App.vue b/src/App.vue
index d74b6e0d..09ecfb43 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -241,11 +241,10 @@
                 <ThreadConversation :messages="filteredMessages" :is-loading="isLoadingMessages"
                   :active-thread-id="composerThreadContextId" :cwd="composerCwd" :scroll-state="selectedThreadScrollState"
                   :live-overlay="liveOverlay"
-                  :pending-requests="selectedThreadServerRequests"
+                  :pending-requests="[]"
                   :is-turn-in-progress="isSelectedThreadInProgress"
                   :is-rolling-back="isRollingBack"
                   @update-scroll-state="onUpdateThreadScrollState"
-                  @respond-server-request="onRespondServerRequest"
                   @rollback="onRollback" />
               </div>
 
@@ -256,7 +255,14 @@
                   @steer="steerQueuedMessage"
                   @delete="removeQueuedMessage"
                 />
-                <ThreadComposer ref="threadComposerRef" :active-thread-id="composerThreadContextId"
+                <ThreadPendingRequestPanel
+                  v-if="selectedThreadPendingRequest"
+                  :request="selectedThreadPendingRequest"
+                  :request-count="selectedThreadServerRequests.length"
+                  :has-queue-above="selectedThreadQueuedMessages.length > 0"
+                  @respond-server-request="onRespondServerRequest"
+                />
+                <ThreadComposer v-else ref="threadComposerRef" :active-thread-id="composerThreadContextId"
                   :cwd="composerCwd"
                   :models="availableModelIds"
                   :selected-model="selectedModelId"
@@ -294,6 +300,7 @@ import SidebarThreadTree from './components/sidebar/SidebarThreadTree.vue'
 import ContentHeader from './components/content/ContentHeader.vue'
 import ThreadConversation from './components/content/ThreadConversation.vue'
 import ThreadComposer from './components/content/ThreadComposer.vue'
+import ThreadPendingRequestPanel from './components/content/ThreadPendingRequestPanel.vue'
 import QueuedMessages from './components/content/QueuedMessages.vue'
 import RateLimitStatus from './components/content/RateLimitStatus.vue'
 import ComposerDropdown from './components/content/ComposerDropdown.vue'
@@ -316,7 +323,7 @@ import {
   openProjectRoot,
   searchThreads,
 } from './api/codexGateway'
-import type { ReasoningEffort, SpeedMode, ThreadScrollState } from './types/codex'
+import type { ReasoningEffort, SpeedMode, ThreadScrollState, UiServerRequest, UiServerRequestReply } from './types/codex'
 import type { ComposerDraftPayload, ThreadComposerExposed } from './components/content/ThreadComposer.vue'
 import type { GithubTipsScope, GithubTrendingProject, TelegramStatus } from './api/codexGateway'
 
@@ -579,6 +586,10 @@ const latestUserTurnIndex = computed(() => {
 })
 const liveOverlay = computed(() => selectedLiveOverlay.value)
 const composerThreadContextId = computed(() => (isHomeRoute.value ? '__new-thread__' : selectedThreadId.value))
+const selectedThreadPendingRequest = computed<UiServerRequest | null>(() => {
+  const rows = selectedThreadServerRequests.value
+  return rows.length > 0 ? rows[rows.length - 1] : null
+})
 const composerCwd = computed(() => {
   if (isHomeRoute.value) return newThreadCwd.value.trim()
   return selectedThread.value?.cwd?.trim() ?? ''
@@ -793,8 +804,20 @@ function onUpdateThreadScrollState(payload: { threadId: string; state: ThreadScr
   setThreadScrollState(payload.threadId, payload.state)
 }
 
-function onRespondServerRequest(payload: { id: number; result?: unknown; error?: { code?: number; message: string } }): void {
-  void respondToPendingServerRequest(payload)
+function onRespondServerRequest(payload: UiServerRequestReply): void {
+  void handleServerRequestResponse(payload)
+}
+
+async function handleServerRequestResponse(payload: UiServerRequestReply): Promise<void> {
+  const responded = await respondToPendingServerRequest(payload)
+  const followUpMessageText = payload.followUpMessageText?.trim() ?? ''
+  if (!responded || !followUpMessageText || isHomeRoute.value) return
+
+  try {
+    await sendMessageToSelectedThread(followUpMessageText, [], [], 'steer', [])
+  } catch {
+    // sendMessageToSelectedThread already surfaces the error through shared state.
+  }
 }
 
 function setSidebarCollapsed(nextValue: boolean): void {
diff --git a/src/components/content/ThreadPendingRequestPanel.vue b/src/components/content/ThreadPendingRequestPanel.vue
new file mode 100644
index 00000000..79d6362e
--- /dev/null
+++ b/src/components/content/ThreadPendingRequestPanel.vue
@@ -0,0 +1,629 @@
+<template>
+  <section v-if="request" class="thread-pending-request">
+    <article
+      class="thread-pending-request-shell"
+      :class="{ 'thread-pending-request-shell--no-top-radius': hasQueueAbove }"
+    >
+      <template v-if="isApprovalRequest(request)">
+        <p class="thread-pending-request-title">{{ requestPanelPrompt(request) }}</p>
+        <p
+          v-if="requestPreview(request)"
+          class="thread-pending-request-command-line"
+          :title="requestPreview(request)"
+        >
+          {{ requestPreview(request) }}
+        </p>
+
+        <section class="thread-pending-request-approval">
+          <div class="thread-pending-request-options" role="radiogroup" aria-label="Approval choices">
+            <button
+              v-for="(option, index) in approvalOptions"
+              :key="option.id"
+              type="button"
+              class="thread-pending-request-option"
+              :class="{ 'is-selected': selectedApprovalDecision === option.id }"
+              :aria-pressed="selectedApprovalDecision === option.id"
+              @click="onSelectApprovalOption(option.id)"
+            >
+              <span class="thread-pending-request-option-index">{{ index + 1 }}.</span>
+              <span class="thread-pending-request-option-label">{{ option.label }}</span>
+            </button>
+          </div>
+
+          <footer class="thread-pending-request-footer thread-pending-request-footer--approval">
+            <label
+              class="thread-pending-request-inline-input"
+              :class="{ 'is-active': selectedApprovalDecision === 'decline' || approvalFreeformText.length > 0 }"
+            >
+              <span class="thread-pending-request-option-index">3.</span>
+              <input
+                class="thread-pending-request-inline-control"
+                type="text"
+                :value="approvalFreeformText"
+                placeholder="No, and tell Codex what to do differently"
+                @focus="onFocusApprovalOther"
+                @input="onApprovalOtherInput"
+                @keydown.enter.prevent="onSubmitApproval(request)"
+              />
+            </label>
+
+            <button type="button" class="thread-pending-request-secondary" @click="onRespondApproval(request, 'cancel')">
+              Skip
+            </button>
+            <button type="button" class="thread-pending-request-primary" @click="onSubmitApproval(request)">
+              Send
+            </button>
+          </footer>
+        </section>
+      </template>
+
+      <template v-else>
+        <header class="thread-pending-request-header">
+          <div class="thread-pending-request-heading">
+            <p class="thread-pending-request-eyebrow">{{ requestPanelTitle(request) }}</p>
+            <p class="thread-pending-request-title">{{ requestPanelPrompt(request) }}</p>
+          </div>
+          <span v-if="(requestCount ?? 0) > 1" class="thread-pending-request-counter">{{ requestCount ?? 0 }} pending</span>
+        </header>
+
+        <div v-if="requestPreview(request)" class="thread-pending-request-preview">
+          <code class="thread-pending-request-preview-code">{{ requestPreview(request) }}</code>
+        </div>
+
+        <section v-if="request.method === 'item/tool/requestUserInput'" class="thread-pending-request-user-input">
+          <div
+            v-for="question in readToolQuestions(request)"
+            :key="`${request.id}:${question.id}`"
+            class="thread-pending-request-question"
+          >
+            <p class="thread-pending-request-question-title">{{ question.header || question.question }}</p>
+            <p v-if="question.question" class="thread-pending-request-question-text">{{ question.question }}</p>
+
+            <div v-if="question.options.length > 0" class="thread-pending-request-question-options">
+              <label class="thread-pending-request-select-wrap">
+                <span class="thread-pending-request-select-label">Choice</span>
+                <select
+                  class="thread-pending-request-select"
+                  :value="readQuestionAnswer(request.id, question.id, question.options[0]?.label || '')"
+                  @change="onQuestionAnswerChange(request.id, question.id, $event)"
+                >
+                  <option
+                    v-for="option in question.options"
+                    :key="`${request.id}:${question.id}:${option.label}`"
+                    :value="option.label"
+                  >
+                    {{ option.label }}
+                  </option>
+                </select>
+              </label>
+
+              <p
+                v-if="selectedOptionDescription(request.id, question.id, question.options)"
+                class="thread-pending-request-question-description"
+              >
+                {{ selectedOptionDescription(request.id, question.id, question.options) }}
+              </p>
+            </div>
+
+            <label v-if="question.isOther" class="thread-pending-request-input-wrap">
+              <span class="thread-pending-request-select-label">Other answer</span>
+              <input
+                class="thread-pending-request-input"
+                type="text"
+                :value="readQuestionOtherAnswer(request.id, question.id)"
+                placeholder="Other answer"
+                @input="onQuestionOtherAnswerInput(request.id, question.id, $event)"
+              />
+            </label>
+          </div>
+
+          <footer class="thread-pending-request-footer">
+            <button type="button" class="thread-pending-request-primary" @click="onRespondToolRequestUserInput(request)">
+              Send
+            </button>
+          </footer>
+        </section>
+
+        <section v-else-if="request.method === 'item/tool/call'" class="thread-pending-request-actions">
+          <button type="button" class="thread-pending-request-primary" @click="onRespondToolCallFailure(request)">
+            Fail Tool Call
+          </button>
+          <button type="button" class="thread-pending-request-secondary" @click="onRespondToolCallSuccess(request)">
+            Success (Empty)
+          </button>
+        </section>
+
+        <section v-else class="thread-pending-request-actions">
+          <button type="button" class="thread-pending-request-primary" @click="onRespondEmptyResult(request)">
+            Return Empty Result
+          </button>
+          <button type="button" class="thread-pending-request-secondary" @click="onRejectUnknownRequest(request)">
+            Reject Request
+          </button>
+        </section>
+      </template>
+    </article>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { UiServerRequest, UiServerRequestReply } from '../../types/codex'
+
+type ApprovalDecision = 'accept' | 'acceptForSession' | 'decline' | 'cancel'
+
+type ApprovalOption = {
+  id: Exclude<ApprovalDecision, 'cancel' | 'decline'>
+  label: string
+}
+
+type ParsedToolQuestion = {
+  id: string
+  header: string
+  question: string
+  isOther: boolean
+  options: Array<{ label: string; description: string }>
+}
+
+const props = defineProps<{
+  request: UiServerRequest | null
+  requestCount?: number
+  hasQueueAbove?: boolean
+}>()
+
+const emit = defineEmits<{
+  respondServerRequest: [payload: UiServerRequestReply]
+}>()
+
+const selectedApprovalDecision = ref<ApprovalDecision>('accept')
+const approvalFreeformText = ref('')
+const toolQuestionAnswers = ref<Record<string, string>>({})
+const toolQuestionOtherAnswers = ref<Record<string, string>>({})
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readString(value: unknown): string {
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+function isCommandApprovalRequest(request: UiServerRequest): boolean {
+  return request.method === 'item/commandExecution/requestApproval' || request.method === 'execCommandApproval'
+}
+
+function isFileApprovalRequest(request: UiServerRequest): boolean {
+  return request.method === 'item/fileChange/requestApproval' || request.method === 'applyPatchApproval'
+}
+
+function isApprovalRequest(request: UiServerRequest): boolean {
+  return isCommandApprovalRequest(request) || isFileApprovalRequest(request)
+}
+
+function readRequestReason(request: UiServerRequest): string {
+  const params = asRecord(request.params)
+  return readString(params?.reason) || readString(params?.prompt)
+}
+
+function requestPanelTitle(request: UiServerRequest): string {
+  if (isApprovalRequest(request)) return 'Awaiting approval'
+  if (request.method === 'item/tool/requestUserInput') return 'Awaiting response'
+  if (request.method === 'item/tool/call') return 'Tool call waiting for response'
+  return request.method
+}
+
+function requestPanelPrompt(request: UiServerRequest): string {
+  const explicit = readRequestReason(request)
+  if (explicit) return explicit
+  if (isCommandApprovalRequest(request)) return 'Do you want to run this command?'
+  if (isFileApprovalRequest(request)) return 'Do you want to make these changes?'
+  if (request.method === 'item/tool/requestUserInput') return 'Codex needs your answer before it can continue.'
+  return 'Codex is waiting for a response before it can continue.'
+}
+
+function unwrapApprovalCommand(value: string): string {
+  const trimmed = value.trim()
+  if (!trimmed) return ''
+
+  const powershellMatch = trimmed.match(/-Command\s+(.+)$/i)
+  const rawCommand = powershellMatch?.[1]?.trim() ?? trimmed
+  const unquoted = rawCommand.startsWith('"') && rawCommand.endsWith('"')
+    ? rawCommand.slice(1, -1)
+    : rawCommand
+
+  return unquoted
+    .replace(/\\"/g, '"')
+    .replace(/`"/g, '"')
+    .replace(/""/g, '"')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function requestPreview(request: UiServerRequest): string {
+  const params = asRecord(request.params)
+  if (!params) return ''
+
+  if (isCommandApprovalRequest(request)) {
+    const commandActions = Array.isArray(params.commandActions) ? params.commandActions : []
+    const command = commandActions
+      .map((action) => asRecord(action))
+      .map((action) => readString(action?.command))
+      .find((value) => value.length > 0)
+
+    if (command) return command.replace(/\s+/g, ' ').trim()
+    return unwrapApprovalCommand(readString(params.command))
+  }
+
+  if (isFileApprovalRequest(request)) {
+    return readString(params.grantRoot).replace(/\s+/g, ' ').trim()
+  }
+
+  return ''
+}
+
+function approvalOptionsForRequest(request: UiServerRequest | null): ApprovalOption[] {
+  if (!request || !isApprovalRequest(request)) return []
+  return [
+    { id: 'accept', label: 'Yes' },
+    { id: 'acceptForSession', label: 'Yes for Session' },
+  ]
+}
+
+const approvalOptions = computed(() => approvalOptionsForRequest(props.request))
+
+watch(
+  () => props.request?.id ?? 0,
+  () => {
+    approvalFreeformText.value = ''
+    toolQuestionAnswers.value = {}
+    toolQuestionOtherAnswers.value = {}
+    selectedApprovalDecision.value = approvalOptions.value[0]?.id ?? 'accept'
+  },
+  { immediate: true },
+)
+
+watch(
+  approvalOptions,
+  (nextOptions) => {
+    if (selectedApprovalDecision.value === 'decline') return
+    if (!nextOptions.some((option) => option.id === selectedApprovalDecision.value)) {
+      selectedApprovalDecision.value = nextOptions[0]?.id ?? 'accept'
+    }
+  },
+  { immediate: true },
+)
+
+function toolQuestionKey(requestId: number, questionId: string): string {
+  return `${String(requestId)}:${questionId}`
+}
+
+function readToolQuestions(request: UiServerRequest): ParsedToolQuestion[] {
+  const params = asRecord(request.params)
+  const questions = Array.isArray(params?.questions) ? params.questions : []
+  const parsed: ParsedToolQuestion[] = []
+
+  for (const row of questions) {
+    const question = asRecord(row)
+    if (!question) continue
+
+    const id = readString(question.id)
+    if (!id) continue
+
+    const options = Array.isArray(question.options)
+      ? question.options
+        .map((option) => asRecord(option))
+        .map((option) => ({
+          label: readString(option?.label),
+          description: readString(option?.description),
+        }))
+        .filter((option) => option.label.length > 0)
+      : []
+
+    parsed.push({
+      id,
+      header: readString(question.header),
+      question: readString(question.question),
+      isOther: question.isOther === true,
+      options,
+    })
+  }
+
+  return parsed
+}
+
+function readQuestionAnswer(requestId: number, questionId: string, fallback: string): string {
+  const key = toolQuestionKey(requestId, questionId)
+  const saved = toolQuestionAnswers.value[key]
+  if (typeof saved === 'string' && saved.length > 0) return saved
+  return fallback
+}
+
+function readQuestionOtherAnswer(requestId: number, questionId: string): string {
+  return toolQuestionOtherAnswers.value[toolQuestionKey(requestId, questionId)] ?? ''
+}
+
+function onQuestionAnswerChange(requestId: number, questionId: string, event: Event): void {
+  const target = event.target
+  if (!(target instanceof HTMLSelectElement)) return
+  const key = toolQuestionKey(requestId, questionId)
+  toolQuestionAnswers.value = {
+    ...toolQuestionAnswers.value,
+    [key]: target.value,
+  }
+}
+
+function onQuestionOtherAnswerInput(requestId: number, questionId: string, event: Event): void {
+  const target = event.target
+  if (!(target instanceof HTMLInputElement)) return
+  const key = toolQuestionKey(requestId, questionId)
+  toolQuestionOtherAnswers.value = {
+    ...toolQuestionOtherAnswers.value,
+    [key]: target.value,
+  }
+}
+
+function selectedOptionDescription(
+  requestId: number,
+  questionId: string,
+  options: Array<{ label: string; description: string }>,
+): string {
+  const selected = readQuestionAnswer(requestId, questionId, options[0]?.label || '')
+  return options.find((option) => option.label === selected)?.description ?? ''
+}
+
+function onSelectApprovalOption(decision: ApprovalOption['id']): void {
+  selectedApprovalDecision.value = decision
+}
+
+function onFocusApprovalOther(): void {
+  selectedApprovalDecision.value = 'decline'
+}
+
+function onApprovalOtherInput(event: Event): void {
+  const target = event.target
+  if (!(target instanceof HTMLInputElement)) return
+  approvalFreeformText.value = target.value
+  selectedApprovalDecision.value = 'decline'
+}
+
+function onRespondApproval(request: UiServerRequest, decision: ApprovalDecision): void {
+  emit('respondServerRequest', {
+    id: request.id,
+    result: { decision },
+  })
+}
+
+function onSubmitApproval(request: UiServerRequest): void {
+  const note = approvalFreeformText.value.trim()
+  const decision: ApprovalDecision = note.length > 0 ? 'decline' : selectedApprovalDecision.value
+
+  emit('respondServerRequest', {
+    id: request.id,
+    result: {
+      decision,
+    },
+    followUpMessageText: note || undefined,
+  })
+}
+
+function onRespondToolRequestUserInput(request: UiServerRequest): void {
+  const questions = readToolQuestions(request)
+  const answers: Record<string, { answers: string[] }> = {}
+
+  for (const question of questions) {
+    const selected = readQuestionAnswer(request.id, question.id, question.options[0]?.label || '')
+    const other = readQuestionOtherAnswer(request.id, question.id).trim()
+    const values = [selected, other].map((value) => value.trim()).filter((value) => value.length > 0)
+    answers[question.id] = { answers: values }
+  }
+
+  emit('respondServerRequest', {
+    id: request.id,
+    result: { answers },
+  })
+}
+
+function onRespondToolCallFailure(request: UiServerRequest): void {
+  emit('respondServerRequest', {
+    id: request.id,
+    result: {
+      success: false,
+      contentItems: [
+        {
+          type: 'inputText',
+          text: 'Tool call rejected from CodexUI.',
+        },
+      ],
+    },
+  })
+}
+
+function onRespondToolCallSuccess(request: UiServerRequest): void {
+  emit('respondServerRequest', {
+    id: request.id,
+    result: {
+      success: true,
+      contentItems: [],
+    },
+  })
+}
+
+function onRespondEmptyResult(request: UiServerRequest): void {
+  emit('respondServerRequest', {
+    id: request.id,
+    result: {},
+  })
+}
+
+function onRejectUnknownRequest(request: UiServerRequest): void {
+  emit('respondServerRequest', {
+    id: request.id,
+    error: {
+      code: -32000,
+      message: 'Rejected from CodexUI.',
+    },
+  })
+}
+</script>
+
+<style scoped>
+@reference "tailwindcss";
+
+.thread-pending-request {
+  @apply w-full px-2 sm:px-6;
+}
+
+.thread-pending-request-shell {
+  @apply w-full rounded-[1.75rem] border border-zinc-700 bg-zinc-900 px-4 py-4 sm:px-5 sm:py-4 text-zinc-100 shadow-xl;
+}
+
+.thread-pending-request-shell--no-top-radius {
+  @apply rounded-t-none border-t-0;
+}
+
+.thread-pending-request-header {
+  @apply flex items-start justify-between gap-3;
+}
+
+.thread-pending-request-heading {
+  @apply min-w-0 flex-1 flex flex-col gap-1;
+}
+
+.thread-pending-request-eyebrow {
+  @apply m-0 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400;
+}
+
+.thread-pending-request-title {
+  @apply m-0 text-[clamp(0.94rem,2vw,1.2rem)] leading-relaxed text-zinc-50 whitespace-pre-wrap break-words;
+}
+
+.thread-pending-request-counter {
+  @apply shrink-0 rounded-full border border-zinc-700 bg-zinc-800 px-2 py-0.5 text-[11px] text-zinc-400;
+}
+
+.thread-pending-request-command-line,
+.thread-pending-request-preview {
+  @apply mt-3 rounded-xl bg-zinc-800/85 px-4 py-3 text-sm font-medium text-zinc-100;
+}
+
+.thread-pending-request-preview-code {
+  @apply block truncate whitespace-nowrap font-mono;
+}
+
+.thread-pending-request-approval,
+.thread-pending-request-user-input {
+  @apply mt-3 flex flex-col gap-2.5;
+}
+
+.thread-pending-request-options {
+  @apply flex flex-col gap-1.5;
+}
+
+.thread-pending-request-option {
+  @apply flex h-12 w-full items-center gap-3 rounded-2xl border border-zinc-800 bg-transparent px-4 text-left transition hover:border-zinc-600 hover:bg-zinc-800/70;
+}
+
+.thread-pending-request-option.is-selected {
+  @apply border-zinc-500 bg-zinc-800/95;
+  box-shadow: inset 0 0 0 1px rgba(244, 244, 245, 0.14);
+}
+
+.thread-pending-request-option-index {
+  @apply shrink-0 text-base font-medium leading-none text-zinc-500;
+}
+
+.thread-pending-request-option-label {
+  @apply min-w-0 truncate text-sm leading-none text-zinc-50;
+}
+
+.thread-pending-request-inline-input {
+  @apply flex h-12 min-w-0 flex-1 items-center gap-3 rounded-2xl border border-zinc-800 bg-zinc-800/70 px-4 text-sm text-zinc-400 transition focus-within:border-zinc-500 focus-within:bg-zinc-800/90;
+}
+
+.thread-pending-request-inline-input.is-active {
+  @apply text-zinc-100;
+}
+
+.thread-pending-request-inline-control {
+  @apply w-full min-w-0 border-none bg-transparent p-0 text-sm leading-none text-zinc-100 outline-none placeholder:text-zinc-500;
+}
+
+.thread-pending-request-question {
+  @apply rounded-2xl border border-zinc-800 bg-zinc-900/75 px-3 py-3;
+}
+
+.thread-pending-request-question-title {
+  @apply m-0 text-sm font-medium leading-relaxed text-zinc-50;
+}
+
+.thread-pending-request-question-text,
+.thread-pending-request-question-description {
+  @apply m-0 mt-1 text-xs leading-relaxed text-zinc-400;
+}
+
+.thread-pending-request-question-options,
+.thread-pending-request-input-wrap {
+  @apply mt-3 flex flex-col gap-1.5;
+}
+
+.thread-pending-request-select-wrap {
+  @apply flex flex-col gap-1.5;
+}
+
+.thread-pending-request-select-label {
+  @apply text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-500;
+}
+
+.thread-pending-request-select,
+.thread-pending-request-input {
+  @apply h-11 rounded-xl border border-zinc-700 bg-zinc-950 px-3 text-sm text-zinc-100 outline-none;
+}
+
+.thread-pending-request-select:focus,
+.thread-pending-request-input:focus {
+  @apply border-zinc-500;
+  box-shadow: 0 0 0 1px rgba(244, 244, 245, 0.18);
+}
+
+.thread-pending-request-input::placeholder {
+  @apply text-zinc-500;
+}
+
+.thread-pending-request-actions,
+.thread-pending-request-footer {
+  @apply mt-3 flex items-center justify-end gap-2;
+}
+
+.thread-pending-request-footer--approval {
+  @apply mt-0 items-stretch gap-2.5;
+}
+
+.thread-pending-request-primary,
+.thread-pending-request-secondary {
+  @apply h-12 shrink-0 rounded-full border px-5 text-sm font-medium transition;
+}
+
+.thread-pending-request-primary {
+  @apply border-zinc-100 bg-zinc-100 text-zinc-950 hover:bg-white;
+}
+
+.thread-pending-request-secondary {
+  @apply border-zinc-700 bg-transparent text-zinc-300 hover:border-zinc-500 hover:bg-zinc-800;
+}
+
+@media (max-width: 640px) {
+  .thread-pending-request-shell {
+    @apply rounded-[1.5rem] px-3 py-3;
+  }
+
+  .thread-pending-request-footer--approval {
+    @apply flex-wrap;
+  }
+
+  .thread-pending-request-inline-input {
+    @apply basis-full;
+  }
+}
+</style>
diff --git a/src/components/sidebar/SidebarThreadTree.vue b/src/components/sidebar/SidebarThreadTree.vue
index 516f8f12..1b85e7ca 100644
--- a/src/components/sidebar/SidebarThreadTree.vue
+++ b/src/components/sidebar/SidebarThreadTree.vue
@@ -11,7 +11,7 @@
           >
             <template #left>
               <span class="thread-left-stack">
-                <span v-if="thread.inProgress || thread.unread" class="thread-status-indicator" :data-state="getThreadState(thread)" />
+                <span v-if="shouldShowThreadIndicator(thread)" class="thread-status-indicator" :data-state="getThreadState(thread)" />
                 <button class="thread-pin-button" type="button" title="pin" @click="togglePin(thread.id)">
                   <IconTablerPin class="thread-icon" />
                 </button>
@@ -19,8 +19,17 @@
             </template>
             <button class="thread-main-button" type="button" @click="onSelect(thread.id)">
               <span class="thread-row-title-wrap">
-                <span class="thread-row-title">{{ thread.title }}</span>
-                <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" title="Worktree thread" />
+                <span class="thread-row-title-line">
+                  <span class="thread-row-title">{{ thread.title }}</span>
+                  <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" title="Worktree thread" />
+                  <span
+                    v-if="thread.pendingRequestState"
+                    class="thread-row-request-chip"
+                    :data-state="thread.pendingRequestState"
+                  >
+                    {{ threadRequestLabel(thread) }}
+                  </span>
+                </span>
               </span>
             </button>
             <template #right>
@@ -109,7 +118,7 @@
           <template #left>
             <span class="thread-left-stack">
               <span
-                v-if="thread.inProgress || thread.unread"
+                v-if="shouldShowThreadIndicator(thread)"
                 class="thread-status-indicator"
                 :data-state="getThreadState(thread)"
               />
@@ -120,8 +129,17 @@
           </template>
           <button class="thread-main-button" type="button" @click="onSelect(thread.id)">
             <span class="thread-row-title-wrap">
-              <span class="thread-row-title">{{ thread.title }}</span>
-              <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" title="Worktree thread" />
+              <span class="thread-row-title-line">
+                <span class="thread-row-title">{{ thread.title }}</span>
+                <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" title="Worktree thread" />
+                <span
+                  v-if="thread.pendingRequestState"
+                  class="thread-row-request-chip"
+                  :data-state="thread.pendingRequestState"
+                >
+                  {{ threadRequestLabel(thread) }}
+                </span>
+              </span>
             </span>
           </button>
           <template #right>
@@ -258,7 +276,7 @@
                 <template #left>
                   <span class="thread-left-stack">
                     <span
-                      v-if="thread.inProgress || thread.unread"
+                      v-if="shouldShowThreadIndicator(thread)"
                       class="thread-status-indicator"
                       :data-state="getThreadState(thread)"
                     />
@@ -269,8 +287,17 @@
                 </template>
                 <button class="thread-main-button" type="button" @click="onSelect(thread.id)">
                   <span class="thread-row-title-wrap">
-                    <span class="thread-row-title">{{ thread.title }}</span>
-                    <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" title="Worktree thread" />
+                    <span class="thread-row-title-line">
+                      <span class="thread-row-title">{{ thread.title }}</span>
+                      <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" title="Worktree thread" />
+                      <span
+                        v-if="thread.pendingRequestState"
+                        class="thread-row-request-chip"
+                        :data-state="thread.pendingRequestState"
+                      >
+                        {{ threadRequestLabel(thread) }}
+                      </span>
+                    </span>
                   </span>
                 </button>
                 <template #right>
@@ -1249,7 +1276,17 @@ function hasThreads(group: UiProjectGroup): boolean {
   return projectThreads(group).length > 0
 }
 
-function getThreadState(thread: UiThread): 'working' | 'unread' | 'idle' {
+function shouldShowThreadIndicator(thread: UiThread): boolean {
+  return Boolean(thread.pendingRequestState) || thread.inProgress || thread.unread
+}
+
+function threadRequestLabel(thread: UiThread): string {
+  return thread.pendingRequestState === 'approval' ? 'Ожидает одобрения' : 'Ожидает ответа'
+}
+
+function getThreadState(thread: UiThread): 'awaiting-approval' | 'awaiting-response' | 'working' | 'unread' | 'idle' {
+  if (thread.pendingRequestState === 'approval') return 'awaiting-approval'
+  if (thread.pendingRequestState === 'response') return 'awaiting-response'
   if (thread.inProgress) return 'working'
   if (thread.unread) return 'unread'
   return 'idle'
@@ -1468,17 +1505,33 @@ onBeforeUnmount(() => {
 }
 
 .thread-row-title-wrap {
-  @apply min-w-0 inline-flex items-center gap-1;
+  @apply min-w-0 inline-flex w-full items-center;
+}
+
+.thread-row-title-line {
+  @apply min-w-0 inline-flex w-full items-center gap-1.5;
 }
 
 .thread-row-title {
-  @apply block text-sm leading-5 font-normal text-zinc-800 truncate whitespace-nowrap;
+  @apply min-w-0 block flex-1 text-sm leading-5 font-normal text-zinc-800 truncate whitespace-nowrap;
 }
 
 .thread-row-worktree-icon {
   @apply w-3 h-3 text-zinc-500 shrink-0;
 }
 
+.thread-row-request-chip {
+  @apply inline-flex shrink-0 items-center rounded-full border px-2.5 py-1 text-[11px] font-medium leading-none;
+}
+
+.thread-row-request-chip[data-state='approval'] {
+  @apply border-emerald-500/20 bg-emerald-500/15 text-emerald-700;
+}
+
+.thread-row-request-chip[data-state='response'] {
+  @apply border-sky-200 bg-sky-50 text-sky-700;
+}
+
 .thread-status-indicator {
   @apply w-2.5 h-2.5 rounded-full;
 }
@@ -1550,10 +1603,22 @@ onBeforeUnmount(() => {
   @apply border-2 border-zinc-500 border-t-transparent bg-transparent animate-spin;
 }
 
+.thread-status-indicator[data-state='awaiting-approval'] {
+  @apply bg-emerald-500;
+}
+
+.thread-status-indicator[data-state='awaiting-response'] {
+  @apply bg-sky-500;
+}
+
 .thread-row:hover .thread-status-indicator[data-state='unread'],
 .thread-row:hover .thread-status-indicator[data-state='working'],
+.thread-row:hover .thread-status-indicator[data-state='awaiting-approval'],
+.thread-row:hover .thread-status-indicator[data-state='awaiting-response'],
 .thread-row:focus-within .thread-status-indicator[data-state='unread'],
-.thread-row:focus-within .thread-status-indicator[data-state='working'] {
+.thread-row:focus-within .thread-status-indicator[data-state='working'],
+.thread-row:focus-within .thread-status-indicator[data-state='awaiting-approval'],
+.thread-row:focus-within .thread-status-indicator[data-state='awaiting-response'] {
   @apply opacity-0;
 }
 
diff --git a/src/composables/useDesktopState.ts b/src/composables/useDesktopState.ts
index 4526c518..488a323e 100644
--- a/src/composables/useDesktopState.ts
+++ b/src/composables/useDesktopState.ts
@@ -30,6 +30,7 @@ import {
 } from '../api/codexGateway'
 import type {
   CommandExecutionData,
+  UiPendingRequestState,
   ReasoningEffort,
   SpeedMode,
   ThreadScrollState,
@@ -54,6 +55,7 @@ const PROJECT_ORDER_STORAGE_KEY = 'codex-web-local.project-order.v1'
 const PROJECT_DISPLAY_NAME_STORAGE_KEY = 'codex-web-local.project-display-name.v1'
 const EVENT_SYNC_DEBOUNCE_MS = 220
 const RATE_LIMIT_REFRESH_DEBOUNCE_MS = 500
+const TURN_START_FOLLOW_UP_SYNC_DELAY_MS = 3000
 const REASONING_EFFORT_OPTIONS: ReasoningEffort[] = ['none', 'minimal', 'low', 'medium', 'high', 'xhigh']
 const GLOBAL_SERVER_REQUEST_SCOPE = '__global__'
 const MODEL_FALLBACK_ID = 'gpt-5.2-codex'
@@ -512,7 +514,8 @@ function areThreadFieldsEqual(first: UiThread, second: UiThread): boolean {
     first.updatedAtIso === second.updatedAtIso &&
     first.preview === second.preview &&
     first.unread === second.unread &&
-    first.inProgress === second.inProgress
+    first.inProgress === second.inProgress &&
+    first.pendingRequestState === second.pendingRequestState
   )
 }
 
@@ -694,6 +697,7 @@ export function useDesktopState() {
   let stopNotificationStream: (() => void) | null = null
   let eventSyncTimer: number | null = null
   let rateLimitRefreshTimer: number | null = null
+  const delayedTurnSyncTimerByThreadId = new Map<string, number>()
   let rateLimitRefreshPromise: Promise<void> | null = null
   let pendingThreadsRefresh = false
   const pendingThreadMessageRefresh = new Set<string>()
@@ -1001,6 +1005,25 @@ export function useDesktopState() {
     }, RATE_LIMIT_REFRESH_DEBOUNCE_MS)
   }
 
+  function clearDelayedTurnSync(threadId: string): void {
+    if (!threadId || typeof window === 'undefined') return
+    const timerId = delayedTurnSyncTimerByThreadId.get(threadId)
+    if (timerId === undefined) return
+    window.clearTimeout(timerId)
+    delayedTurnSyncTimerByThreadId.delete(threadId)
+  }
+
+  function scheduleDelayedTurnSync(threadId: string): void {
+    if (!threadId || typeof window === 'undefined') return
+    clearDelayedTurnSync(threadId)
+    const timerId = window.setTimeout(() => {
+      delayedTurnSyncTimerByThreadId.delete(threadId)
+      pendingThreadMessageRefresh.add(threadId)
+      void syncFromNotifications()
+    }, TURN_START_FOLLOW_UP_SYNC_DELAY_MS)
+    delayedTurnSyncTimerByThreadId.set(threadId, timerId)
+  }
+
   function applyCachedTitlesToGroups(groups: UiProjectGroup[]): UiProjectGroup[] {
     const titles = threadTitleById.value
     if (Object.keys(titles).length === 0) return groups
@@ -1013,12 +1036,36 @@ export function useDesktopState() {
     }))
   }
 
+  function getThreadPendingRequests(threadId: string): UiServerRequest[] {
+    if (!threadId) return []
+    return Array.isArray(pendingServerRequestsByThreadId.value[threadId])
+      ? pendingServerRequestsByThreadId.value[threadId]
+      : []
+  }
+
+  function isApprovalRequestMethod(method: string): boolean {
+    return (
+      method === 'item/commandExecution/requestApproval' ||
+      method === 'item/fileChange/requestApproval' ||
+      method === 'execCommandApproval' ||
+      method === 'applyPatchApproval'
+    )
+  }
+
+  function readPendingRequestState(requests: UiServerRequest[]): UiPendingRequestState | null {
+    if (requests.some((request) => isApprovalRequestMethod(request.method))) {
+      return 'approval'
+    }
+    return requests.length > 0 ? 'response' : null
+  }
+
   function applyThreadFlags(): void {
     const withTitles = applyCachedTitlesToGroups(sourceGroups.value)
     const flaggedGroups: UiProjectGroup[] = withTitles.map((group) => ({
       projectName: group.projectName,
       threads: group.threads.map((thread) => {
         const inProgress = inProgressById.value[thread.id] === true
+        const pendingRequestState = readPendingRequestState(getThreadPendingRequests(thread.id))
         const isSelected = selectedThreadId.value === thread.id
         const lastReadIso = readStateByThreadId.value[thread.id]
         const unreadByEvent = eventUnreadByThreadId.value[thread.id] === true
@@ -1028,6 +1075,7 @@ export function useDesktopState() {
           ...thread,
           inProgress,
           unread,
+          pendingRequestState,
         }
       }),
     }))
@@ -1463,6 +1511,7 @@ export function useDesktopState() {
       ...pendingServerRequestsByThreadId.value,
       [threadId]: nextRows.sort((first, second) => first.receivedAtIso.localeCompare(second.receivedAtIso)),
     }
+    applyThreadFlags()
   }
 
   function removePendingServerRequestById(requestId: number): void {
@@ -1474,6 +1523,7 @@ export function useDesktopState() {
       }
     }
     pendingServerRequestsByThreadId.value = next
+    applyThreadFlags()
   }
 
   function handleServerRequestNotification(notification: RpcNotification): boolean {
@@ -2525,6 +2575,7 @@ export function useDesktopState() {
       pendingThreadMessageRefresh.add(threadId)
       pendingThreadsRefresh = true
       await syncFromNotifications()
+      scheduleDelayedTurnSync(threadId)
     } catch (unknownError) {
       throw unknownError
     }
@@ -2849,15 +2900,17 @@ export function useDesktopState() {
     }
   }
 
-  async function respondToPendingServerRequest(reply: UiServerRequestReply): Promise<void> {
+  async function respondToPendingServerRequest(reply: UiServerRequestReply): Promise<boolean> {
     try {
       await replyToServerRequest(reply.id, {
         result: reply.result,
         error: reply.error,
       })
       removePendingServerRequestById(reply.id)
+      return true
     } catch (unknownError) {
       error.value = unknownError instanceof Error ? unknownError.message : 'Failed to reply to server request'
+      return false
     }
   }
 
@@ -2878,6 +2931,12 @@ export function useDesktopState() {
       window.clearTimeout(rateLimitRefreshTimer)
       rateLimitRefreshTimer = null
     }
+    if (typeof window !== 'undefined') {
+      for (const timerId of delayedTurnSyncTimerByThreadId.values()) {
+        window.clearTimeout(timerId)
+      }
+    }
+    delayedTurnSyncTimerByThreadId.clear()
     activeReasoningItemId = ''
     shouldAutoScrollOnNextAgentEvent = false
     persistedMessagesByThreadId.value = {}
diff --git a/src/types/codex.ts b/src/types/codex.ts
index 6d692ba7..d4440e81 100644
--- a/src/types/codex.ts
+++ b/src/types/codex.ts
@@ -70,8 +70,11 @@ export type UiThread = {
   preview: string
   unread: boolean
   inProgress: boolean
+  pendingRequestState?: UiPendingRequestState | null
 }
 
+export type UiPendingRequestState = 'approval' | 'response'
+
 export type CommandExecutionData = {
   command: string
   cwd: string | null
@@ -108,6 +111,7 @@ export type UiServerRequest = {
 export type UiServerRequestReply = {
   id: number
   result?: unknown
+  followUpMessageText?: string
   error?: {
     code?: number
     message: string