From 74f67e5e1de63bb18cdaeb25df27e1442a8a2a78 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Fri, 6 Mar 2026 08:59:10 -0800
Subject: [PATCH 1/2] Inline pending approvals in composer header

Co-authored-by: codex <codex@users.noreply.github.com>
---
 apps/web/src/components/ChatView.tsx | 150 ++++++++++++++-------------
 1 file changed, 76 insertions(+), 74 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index f80a0553e3f0..1380a8b9d4b3 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -122,7 +122,7 @@ import {
 } from "../keybindings";
 import ChatMarkdown from "./ChatMarkdown";
 import ThreadTerminalDrawer from "./ThreadTerminalDrawer";
-import { Alert, AlertAction, AlertDescription, AlertTitle } from "./ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import {
   BotIcon,
   ChevronDownIcon,
@@ -134,7 +134,6 @@ import {
   DiffIcon,
   EllipsisIcon,
   FolderClosedIcon,
-  InfoIcon,
   LockIcon,
   LockOpenIcon,
   Undo2Icon,
@@ -891,8 +890,11 @@ export default function ChatView({ threadId }: ChatViewProps) {
     interactionMode === "plan" &&
     latestTurnSettled &&
     activeProposedPlan !== null;
+  const activePendingApproval = pendingApprovals[0] ?? null;
   const hasComposerHeader =
-    pendingUserInputs.length > 0 || (showPlanFollowUpPrompt && activeProposedPlan !== null);
+    activePendingApproval !== null ||
+    pendingUserInputs.length > 0 ||
+    (showPlanFollowUpPrompt && activeProposedPlan !== null);
   useEffect(() => {
     if (!activePendingProgress) {
       return;
@@ -3315,11 +3317,6 @@ export default function ChatView({ threadId }: ChatViewProps) {
       {/* Error banner */}
       <ProviderHealthBanner status={activeProviderStatus} />
       <ThreadErrorBanner error={activeThread.error} />
-      <PendingApprovalsPanel
-        pendingApprovals={pendingApprovals}
-        respondingRequestIds={respondingRequestIds}
-        onRespondToApproval={onRespondToApproval}
-      />
       <PlanModePanel activePlan={activePlan} />
 
       {/* Messages */}
@@ -3379,7 +3376,16 @@ export default function ChatView({ threadId }: ChatViewProps) {
             onDragLeave={onComposerDragLeave}
             onDrop={onComposerDrop}
           >
-            {pendingUserInputs.length > 0 ? (
+            {activePendingApproval ? (
+              <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
+                <ComposerPendingApprovalPanel
+                  approval={activePendingApproval}
+                  pendingCount={pendingApprovals.length}
+                  isResponding={respondingRequestIds.includes(activePendingApproval.requestId)}
+                  onRespondToApproval={onRespondToApproval}
+                />
+              </div>
+            ) : pendingUserInputs.length > 0 ? (
               <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
                 <ComposerPendingUserInputPanel
                   pendingUserInputs={pendingUserInputs}
@@ -3991,79 +3997,75 @@ const ProviderHealthBanner = memo(function ProviderHealthBanner({
   );
 });
 
-interface PendingApprovalsPanelProps {
-  pendingApprovals: PendingApproval[];
-  respondingRequestIds: ApprovalRequestId[];
+interface ComposerPendingApprovalPanelProps {
+  approval: PendingApproval;
+  pendingCount: number;
+  isResponding: boolean;
   onRespondToApproval: (
     requestId: ApprovalRequestId,
     decision: ProviderApprovalDecision,
   ) => Promise<void>;
 }
 
-const PendingApprovalsPanel = memo(function PendingApprovalsPanel({
-  pendingApprovals,
-  respondingRequestIds,
+const ComposerPendingApprovalPanel = memo(function ComposerPendingApprovalPanel({
+  approval,
+  pendingCount,
+  isResponding,
   onRespondToApproval,
-}: PendingApprovalsPanelProps) {
-  if (pendingApprovals.length === 0) return null;
-  return (
-    <div className="pt-3 mx-auto max-w-3xl space-y-2">
-      {pendingApprovals.map((approval) => {
-        const isResponding = respondingRequestIds.includes(approval.requestId);
+}: ComposerPendingApprovalPanelProps) {
+  const approvalSummary =
+    approval.requestKind === "command"
+      ? "Command approval requested"
+      : approval.requestKind === "file-read"
+        ? "File-read approval requested"
+        : "File-change approval requested";
 
-        return (
-          <Alert variant="warning" key={approval.requestId}>
-            <InfoIcon />
-            <AlertTitle className="text-xs">
-              {approval.requestKind === "command"
-                ? "Command approval requested"
-                : approval.requestKind === "file-read"
-                  ? "File-read approval requested"
-                  : "File-change approval requested"}
-            </AlertTitle>
-            <AlertDescription
-              className="truncate block font-mono text-[11px]"
-              title={approval.detail}
-            >
-              {approval.detail}
-            </AlertDescription>
-            <AlertAction className="col-start-2! -col-end-1! mt-1.5 sm:row-start-auto sm:row-end-auto">
-              <Button
-                size="xs"
-                variant="default"
-                disabled={isResponding}
-                onClick={() => void onRespondToApproval(approval.requestId, "accept")}
-              >
-                Approve once
-              </Button>
-              <Button
-                size="xs"
-                variant="outline"
-                disabled={isResponding}
-                onClick={() => void onRespondToApproval(approval.requestId, "acceptForSession")}
-              >
-                Always allow this session
-              </Button>
-              <Button
-                size="xs"
-                variant="destructive-outline"
-                disabled={isResponding}
-                onClick={() => void onRespondToApproval(approval.requestId, "decline")}
-              >
-                Decline
-              </Button>
-              <Button
-                size="xs"
-                variant="ghost"
-                disabled={isResponding}
-                onClick={() => void onRespondToApproval(approval.requestId, "cancel")}
-              >
-                Cancel turn
-              </Button>
-            </AlertAction>
-          </Alert>
-        );
-      })}
+  return (
+    <div className="px-4 py-3.5 sm:px-5 sm:py-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="uppercase text-sm tracking-[0.2em]">PENDING APPROVAL</span>
+        <span className="text-sm font-medium">{approvalSummary}</span>
+        {pendingCount > 1 ? (
+          <span className="text-xs text-muted-foreground">1/{pendingCount}</span>
+        ) : null}
+      </div>
+      <p className="mt-2 block truncate font-mono text-[11px] text-muted-foreground" title={approval.detail}>
+        {approval.detail}
+      </p>
+      <div className="mt-3 flex flex-wrap items-center justify-end gap-2">
+        <Button
+          size="xs"
+          variant="default"
+          disabled={isResponding}
+          onClick={() => void onRespondToApproval(approval.requestId, "accept")}
+        >
+          Approve once
+        </Button>
+        <Button
+          size="xs"
+          variant="outline"
+          disabled={isResponding}
+          onClick={() => void onRespondToApproval(approval.requestId, "acceptForSession")}
+        >
+          Always allow this session
+        </Button>
+        <Button
+          size="xs"
+          variant="destructive-outline"
+          disabled={isResponding}
+          onClick={() => void onRespondToApproval(approval.requestId, "decline")}
+        >
+          Decline
+        </Button>
+        <Button
+          size="xs"
+          variant="ghost"
+          disabled={isResponding}
+          onClick={() => void onRespondToApproval(approval.requestId, "cancel")}
+        >
+          Cancel turn
+        </Button>
+      </div>
     </div>
   );
 });

From 005dd9a12dd4c7059aa5afd7a44c8973e27ec735 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Fri, 6 Mar 2026 09:01:10 -0800
Subject: [PATCH 2/2] Streamline composer behavior during pending approvals

- Treat pending approvals as a dedicated composer state
- Disable prompt input and hide command menu/image chips while approval is active
- Move approval decision buttons into footer actions and simplify the header panel
---
 apps/web/src/components/ChatView.tsx | 561 ++++++++++++++-------------
 1 file changed, 293 insertions(+), 268 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 1380a8b9d4b3..446831c8a9c6 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -891,8 +891,9 @@ export default function ChatView({ threadId }: ChatViewProps) {
     latestTurnSettled &&
     activeProposedPlan !== null;
   const activePendingApproval = pendingApprovals[0] ?? null;
+  const isComposerApprovalState = activePendingApproval !== null;
   const hasComposerHeader =
-    activePendingApproval !== null ||
+    isComposerApprovalState ||
     pendingUserInputs.length > 0 ||
     (showPlanFollowUpPrompt && activeProposedPlan !== null);
   useEffect(() => {
@@ -3381,8 +3382,6 @@ export default function ChatView({ threadId }: ChatViewProps) {
                 <ComposerPendingApprovalPanel
                   approval={activePendingApproval}
                   pendingCount={pendingApprovals.length}
-                  isResponding={respondingRequestIds.includes(activePendingApproval.requestId)}
-                  onRespondToApproval={onRespondToApproval}
                 />
               </div>
             ) : pendingUserInputs.length > 0 ? (
@@ -3411,7 +3410,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                 hasComposerHeader ? "pt-2.5 sm:pt-3" : "pt-3.5 sm:pt-4",
               )}
             >
-              {composerMenuOpen && (
+              {composerMenuOpen && !isComposerApprovalState && (
                 <div className="absolute inset-x-0 bottom-full z-20 mb-2 px-1">
                   <ComposerCommandMenu
                     items={composerMenuItems}
@@ -3425,7 +3424,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                 </div>
               )}
 
-              {pendingUserInputs.length === 0 && composerImages.length > 0 && (
+              {!isComposerApprovalState && pendingUserInputs.length === 0 && composerImages.length > 0 && (
                 <div className="mb-3 flex flex-wrap gap-2">
                   {composerImages.map((image) => (
                     <div
@@ -3491,13 +3490,21 @@ export default function ChatView({ threadId }: ChatViewProps) {
               )}
               <ComposerPromptEditor
                 ref={composerEditorRef}
-                value={activePendingProgress ? activePendingProgress.customAnswer : prompt}
+                value={
+                  isComposerApprovalState
+                    ? ""
+                    : activePendingProgress
+                      ? activePendingProgress.customAnswer
+                      : prompt
+                }
                 cursor={composerCursor}
                 onChange={onPromptChange}
                 onCommandKeyDown={onComposerCommandKey}
                 onPaste={onComposerPaste}
                 placeholder={
-                  activePendingProgress
+                  isComposerApprovalState
+                    ? (activePendingApproval?.detail ?? "Resolve this approval request to continue")
+                    : activePendingProgress
                     ? "Type your own answer, or leave this blank to use the selected option"
                     : showPlanFollowUpPrompt && activeProposedPlan
                       ? "Add feedback to refine the plan, or leave this blank to implement it"
@@ -3505,247 +3512,257 @@ export default function ChatView({ threadId }: ChatViewProps) {
                         ? "Ask for follow-up changes or attach images"
                         : "Ask anything, @tag files/folders, or use /model"
                 }
-                disabled={isConnecting}
+                disabled={isConnecting || isComposerApprovalState}
               />
             </div>
 
             {/* Bottom toolbar */}
-            <div className="flex flex-wrap items-center justify-between gap-2 px-2.5 pb-2.5 sm:flex-nowrap sm:gap-0 sm:px-3 sm:pb-3">
-              <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:min-w-max sm:overflow-visible">
-                {/* Provider/model picker */}
-                <ProviderModelPicker
-                  provider={selectedProvider}
-                  model={selectedModelForPickerWithCustomFallback}
-                  lockedProvider={lockedProvider}
-                  modelOptionsByProvider={modelOptionsByProvider}
-                  onProviderModelChange={onProviderModelSelect}
+            {activePendingApproval ? (
+              <div className="flex items-center justify-end gap-2 px-2.5 pb-2.5 sm:px-3 sm:pb-3">
+                <ComposerPendingApprovalActions
+                  requestId={activePendingApproval.requestId}
+                  isResponding={respondingRequestIds.includes(activePendingApproval.requestId)}
+                  onRespondToApproval={onRespondToApproval}
                 />
-
-                {selectedProvider === "codex" && selectedEffort != null ? (
-                  <>
-                    <Separator orientation="vertical" className="mx-0.5 hidden h-4 sm:block" />
-                    <CodexTraitsPicker
-                      effort={selectedEffort}
-                      fastModeEnabled={selectedCodexFastModeEnabled}
-                      options={reasoningOptions}
-                      onEffortChange={onEffortSelect}
-                      onFastModeChange={onCodexFastModeChange}
-                    />
-                  </>
-                ) : null}
-
-                {/* Divider */}
-                <Separator orientation="vertical" className="mx-0.5 hidden h-4 sm:block" />
-
-                {/* Interaction mode toggle */}
-                <Button
-                  variant="ghost"
-                  className="shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 sm:px-3"
-                  size="sm"
-                  type="button"
-                  onClick={() =>
-                    void handleInteractionModeChange(
-                      interactionMode === "plan" ? "default" : "plan",
-                    )
-                  }
-                  title={
-                    interactionMode === "plan"
-                      ? "Plan mode — click to return to normal chat mode"
-                      : "Default mode — click to enter plan mode"
-                  }
-                >
-                  <BotIcon />
-                  <span className="sr-only sm:not-sr-only">
-                    {interactionMode === "plan" ? "Plan" : "Chat"}
-                  </span>
-                </Button>
-
-                {/* Divider */}
-                <Separator orientation="vertical" className="mx-0.5 hidden h-4 sm:block" />
-
-                {/* Runtime mode toggle */}
-                <Button
-                  variant="ghost"
-                  className="shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 sm:px-3"
-                  size="sm"
-                  type="button"
-                  onClick={() =>
-                    void handleRuntimeModeChange(
-                      runtimeMode === "full-access" ? "approval-required" : "full-access",
-                    )
-                  }
-                  title={
-                    runtimeMode === "full-access"
-                      ? "Full access — click to require approvals"
-                      : "Approval required — click for full access"
-                  }
-                >
-                  {runtimeMode === "full-access" ? <LockOpenIcon /> : <LockIcon />}
-                  <span className="sr-only sm:not-sr-only">
-                    {runtimeMode === "full-access" ? "Full access" : "Supervised"}
-                  </span>
-                </Button>
               </div>
+            ) : (
+              <div className="flex flex-wrap items-center justify-between gap-2 px-2.5 pb-2.5 sm:flex-nowrap sm:gap-0 sm:px-3 sm:pb-3">
+                <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:min-w-max sm:overflow-visible">
+                  {/* Provider/model picker */}
+                  <ProviderModelPicker
+                    provider={selectedProvider}
+                    model={selectedModelForPickerWithCustomFallback}
+                    lockedProvider={lockedProvider}
+                    modelOptionsByProvider={modelOptionsByProvider}
+                    onProviderModelChange={onProviderModelSelect}
+                  />
 
-              {/* Right side: send / stop button */}
-              <div className="flex shrink-0 items-center gap-2">
-                {isPreparingWorktree ? (
-                  <span className="text-muted-foreground/70 text-xs">Preparing worktree...</span>
-                ) : null}
-                {activePendingProgress ? (
-                  <div className="flex items-center gap-2">
-                    {activePendingProgress.questionIndex > 0 ? (
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        className="rounded-full"
-                        onClick={onPreviousActivePendingUserInputQuestion}
-                        disabled={activePendingIsResponding}
-                      >
-                        Previous
-                      </Button>
-                    ) : null}
-                    <Button
-                      type="submit"
-                      size="sm"
-                      className="rounded-full px-4"
-                      disabled={
-                        activePendingIsResponding ||
-                        (activePendingProgress.isLastQuestion
-                          ? !activePendingResolvedAnswers
-                          : !activePendingProgress.canAdvance)
-                      }
-                    >
-                      {activePendingIsResponding
-                        ? "Submitting..."
-                        : activePendingProgress.isLastQuestion
-                          ? "Submit answers"
-                          : "Next question"}
-                    </Button>
-                  </div>
-                ) : phase === "running" ? (
-                  <button
+                  {selectedProvider === "codex" && selectedEffort != null ? (
+                    <>
+                      <Separator orientation="vertical" className="mx-0.5 hidden h-4 sm:block" />
+                      <CodexTraitsPicker
+                        effort={selectedEffort}
+                        fastModeEnabled={selectedCodexFastModeEnabled}
+                        options={reasoningOptions}
+                        onEffortChange={onEffortSelect}
+                        onFastModeChange={onCodexFastModeChange}
+                      />
+                    </>
+                  ) : null}
+
+                  {/* Divider */}
+                  <Separator orientation="vertical" className="mx-0.5 hidden h-4 sm:block" />
+
+                  {/* Interaction mode toggle */}
+                  <Button
+                    variant="ghost"
+                    className="shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 sm:px-3"
+                    size="sm"
                     type="button"
-                    className="flex size-8 items-center justify-center rounded-full bg-rose-500/90 text-white transition-all duration-150 hover:bg-rose-500 hover:scale-105 sm:h-8 sm:w-8"
-                    onClick={() => void onInterrupt()}
-                    aria-label="Stop generation"
+                    onClick={() =>
+                      void handleInteractionModeChange(
+                        interactionMode === "plan" ? "default" : "plan",
+                      )
+                    }
+                    title={
+                      interactionMode === "plan"
+                        ? "Plan mode — click to return to normal chat mode"
+                        : "Default mode — click to enter plan mode"
+                    }
                   >
-                    <svg
-                      width="12"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      fill="currentColor"
-                      aria-hidden="true"
-                    >
-                      <rect x="2" y="2" width="8" height="8" rx="1.5" />
-                    </svg>
-                  </button>
-                ) : pendingUserInputs.length === 0 ? (
-                  showPlanFollowUpPrompt ? (
-                    prompt.trim().length > 0 ? (
+                    <BotIcon />
+                    <span className="sr-only sm:not-sr-only">
+                      {interactionMode === "plan" ? "Plan" : "Chat"}
+                    </span>
+                  </Button>
+
+                  {/* Divider */}
+                  <Separator orientation="vertical" className="mx-0.5 hidden h-4 sm:block" />
+
+                  {/* Runtime mode toggle */}
+                  <Button
+                    variant="ghost"
+                    className="shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 sm:px-3"
+                    size="sm"
+                    type="button"
+                    onClick={() =>
+                      void handleRuntimeModeChange(
+                        runtimeMode === "full-access" ? "approval-required" : "full-access",
+                      )
+                    }
+                    title={
+                      runtimeMode === "full-access"
+                        ? "Full access — click to require approvals"
+                        : "Approval required — click for full access"
+                    }
+                  >
+                    {runtimeMode === "full-access" ? <LockOpenIcon /> : <LockIcon />}
+                    <span className="sr-only sm:not-sr-only">
+                      {runtimeMode === "full-access" ? "Full access" : "Supervised"}
+                    </span>
+                  </Button>
+                </div>
+
+                {/* Right side: send / stop button */}
+                <div className="flex shrink-0 items-center gap-2">
+                  {isPreparingWorktree ? (
+                    <span className="text-muted-foreground/70 text-xs">Preparing worktree...</span>
+                  ) : null}
+                  {activePendingProgress ? (
+                    <div className="flex items-center gap-2">
+                      {activePendingProgress.questionIndex > 0 ? (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="rounded-full"
+                          onClick={onPreviousActivePendingUserInputQuestion}
+                          disabled={activePendingIsResponding}
+                        >
+                          Previous
+                        </Button>
+                      ) : null}
                       <Button
                         type="submit"
                         size="sm"
-                        className="h-9 rounded-full px-4 sm:h-8"
-                        disabled={isSendBusy || isConnecting}
+                        className="rounded-full px-4"
+                        disabled={
+                          activePendingIsResponding ||
+                          (activePendingProgress.isLastQuestion
+                            ? !activePendingResolvedAnswers
+                            : !activePendingProgress.canAdvance)
+                        }
                       >
-                        {isConnecting || isSendBusy ? "Sending..." : "Refine"}
+                        {activePendingIsResponding
+                          ? "Submitting..."
+                          : activePendingProgress.isLastQuestion
+                            ? "Submit answers"
+                            : "Next question"}
                       </Button>
-                    ) : (
-                      <div className="flex items-center">
+                    </div>
+                  ) : phase === "running" ? (
+                    <button
+                      type="button"
+                      className="flex size-8 items-center justify-center rounded-full bg-rose-500/90 text-white transition-all duration-150 hover:bg-rose-500 hover:scale-105 sm:h-8 sm:w-8"
+                      onClick={() => void onInterrupt()}
+                      aria-label="Stop generation"
+                    >
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      >
+                        <rect x="2" y="2" width="8" height="8" rx="1.5" />
+                      </svg>
+                    </button>
+                  ) : pendingUserInputs.length === 0 ? (
+                    showPlanFollowUpPrompt ? (
+                      prompt.trim().length > 0 ? (
                         <Button
                           type="submit"
                           size="sm"
-                          className="h-9 rounded-l-full rounded-r-none px-4 sm:h-8"
+                          className="h-9 rounded-full px-4 sm:h-8"
                           disabled={isSendBusy || isConnecting}
                         >
-                          {isConnecting || isSendBusy ? "Sending..." : "Implement"}
+                          {isConnecting || isSendBusy ? "Sending..." : "Refine"}
                         </Button>
-                        <Menu>
-                          <MenuTrigger
-                            render={
-                              <Button
-                                size="sm"
-                                variant="default"
-                                className="h-9 rounded-l-none rounded-r-full border-l-white/12 px-2 sm:h-8"
-                                aria-label="Implementation actions"
-                                disabled={isSendBusy || isConnecting}
-                              />
-                            }
+                      ) : (
+                        <div className="flex items-center">
+                          <Button
+                            type="submit"
+                            size="sm"
+                            className="h-9 rounded-l-full rounded-r-none px-4 sm:h-8"
+                            disabled={isSendBusy || isConnecting}
                           >
-                            <ChevronDownIcon className="size-3.5" />
-                          </MenuTrigger>
-                          <MenuPopup align="end" side="top">
-                            <MenuItem
-                              disabled={isSendBusy || isConnecting}
-                              onClick={() => void onImplementPlanInNewThread()}
+                            {isConnecting || isSendBusy ? "Sending..." : "Implement"}
+                          </Button>
+                          <Menu>
+                            <MenuTrigger
+                              render={
+                                <Button
+                                  size="sm"
+                                  variant="default"
+                                  className="h-9 rounded-l-none rounded-r-full border-l-white/12 px-2 sm:h-8"
+                                  aria-label="Implementation actions"
+                                  disabled={isSendBusy || isConnecting}
+                                />
+                              }
                             >
-                              Implement in new thread
-                            </MenuItem>
-                          </MenuPopup>
-                        </Menu>
-                      </div>
+                              <ChevronDownIcon className="size-3.5" />
+                            </MenuTrigger>
+                            <MenuPopup align="end" side="top">
+                              <MenuItem
+                                disabled={isSendBusy || isConnecting}
+                                onClick={() => void onImplementPlanInNewThread()}
+                              >
+                                Implement in new thread
+                              </MenuItem>
+                            </MenuPopup>
+                          </Menu>
+                        </div>
+                      )
+                    ) : (
+                      <button
+                        type="submit"
+                        className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:opacity-30 disabled:hover:scale-100 sm:h-8 sm:w-8"
+                        disabled={
+                          isSendBusy ||
+                          isConnecting ||
+                          (!prompt.trim() && composerImages.length === 0)
+                        }
+                        aria-label={
+                          isConnecting
+                            ? "Connecting"
+                            : isPreparingWorktree
+                              ? "Preparing worktree"
+                              : isSendBusy
+                                ? "Sending"
+                                : "Send message"
+                        }
+                      >
+                        {isConnecting || isSendBusy ? (
+                          <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 14 14"
+                            fill="none"
+                            className="animate-spin"
+                            aria-hidden="true"
+                          >
+                            <circle
+                              cx="7"
+                              cy="7"
+                              r="5.5"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeDasharray="20 12"
+                            />
+                          </svg>
+                        ) : (
+                          <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 14 14"
+                            fill="none"
+                            aria-hidden="true"
+                          >
+                            <path
+                              d="M7 11.5V2.5M7 2.5L3 6.5M7 2.5L11 6.5"
+                              stroke="currentColor"
+                              strokeWidth="1.8"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                        )}
+                      </button>
                     )
-                  ) : (
-                    <button
-                      type="submit"
-                      className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:opacity-30 disabled:hover:scale-100 sm:h-8 sm:w-8"
-                      disabled={
-                        isSendBusy ||
-                        isConnecting ||
-                        (!prompt.trim() && composerImages.length === 0)
-                      }
-                      aria-label={
-                        isConnecting
-                          ? "Connecting"
-                          : isPreparingWorktree
-                            ? "Preparing worktree"
-                            : isSendBusy
-                              ? "Sending"
-                              : "Send message"
-                      }
-                    >
-                      {isConnecting || isSendBusy ? (
-                        <svg
-                          width="14"
-                          height="14"
-                          viewBox="0 0 14 14"
-                          fill="none"
-                          className="animate-spin"
-                          aria-hidden="true"
-                        >
-                          <circle
-                            cx="7"
-                            cy="7"
-                            r="5.5"
-                            stroke="currentColor"
-                            strokeWidth="1.5"
-                            strokeLinecap="round"
-                            strokeDasharray="20 12"
-                          />
-                        </svg>
-                      ) : (
-                        <svg
-                          width="14"
-                          height="14"
-                          viewBox="0 0 14 14"
-                          fill="none"
-                          aria-hidden="true"
-                        >
-                          <path
-                            d="M7 11.5V2.5M7 2.5L3 6.5M7 2.5L11 6.5"
-                            stroke="currentColor"
-                            strokeWidth="1.8"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-                      )}
-                    </button>
-                  )
-                ) : null}
+                  ) : null}
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </form>
       </div>
@@ -4000,18 +4017,11 @@ const ProviderHealthBanner = memo(function ProviderHealthBanner({
 interface ComposerPendingApprovalPanelProps {
   approval: PendingApproval;
   pendingCount: number;
-  isResponding: boolean;
-  onRespondToApproval: (
-    requestId: ApprovalRequestId,
-    decision: ProviderApprovalDecision,
-  ) => Promise<void>;
 }
 
 const ComposerPendingApprovalPanel = memo(function ComposerPendingApprovalPanel({
   approval,
   pendingCount,
-  isResponding,
-  onRespondToApproval,
 }: ComposerPendingApprovalPanelProps) {
   const approvalSummary =
     approval.requestKind === "command"
@@ -4029,47 +4039,62 @@ const ComposerPendingApprovalPanel = memo(function ComposerPendingApprovalPanel(
           <span className="text-xs text-muted-foreground">1/{pendingCount}</span>
         ) : null}
       </div>
-      <p className="mt-2 block truncate font-mono text-[11px] text-muted-foreground" title={approval.detail}>
-        {approval.detail}
-      </p>
-      <div className="mt-3 flex flex-wrap items-center justify-end gap-2">
-        <Button
-          size="xs"
-          variant="default"
-          disabled={isResponding}
-          onClick={() => void onRespondToApproval(approval.requestId, "accept")}
-        >
-          Approve once
-        </Button>
-        <Button
-          size="xs"
-          variant="outline"
-          disabled={isResponding}
-          onClick={() => void onRespondToApproval(approval.requestId, "acceptForSession")}
-        >
-          Always allow this session
-        </Button>
-        <Button
-          size="xs"
-          variant="destructive-outline"
-          disabled={isResponding}
-          onClick={() => void onRespondToApproval(approval.requestId, "decline")}
-        >
-          Decline
-        </Button>
-        <Button
-          size="xs"
-          variant="ghost"
-          disabled={isResponding}
-          onClick={() => void onRespondToApproval(approval.requestId, "cancel")}
-        >
-          Cancel turn
-        </Button>
-      </div>
     </div>
   );
 });
 
+interface ComposerPendingApprovalActionsProps {
+  requestId: ApprovalRequestId;
+  isResponding: boolean;
+  onRespondToApproval: (
+    requestId: ApprovalRequestId,
+    decision: ProviderApprovalDecision,
+  ) => Promise<void>;
+}
+
+const ComposerPendingApprovalActions = memo(function ComposerPendingApprovalActions({
+  requestId,
+  isResponding,
+  onRespondToApproval,
+}: ComposerPendingApprovalActionsProps) {
+  return (
+    <>
+      <Button
+        size="sm"
+        variant="ghost"
+        disabled={isResponding}
+        onClick={() => void onRespondToApproval(requestId, "cancel")}
+      >
+        Cancel turn
+      </Button>
+      <Button
+        size="sm"
+        variant="destructive-outline"
+        disabled={isResponding}
+        onClick={() => void onRespondToApproval(requestId, "decline")}
+      >
+        Decline
+      </Button>
+      <Button
+        size="sm"
+        variant="outline"
+        disabled={isResponding}
+        onClick={() => void onRespondToApproval(requestId, "acceptForSession")}
+      >
+        Always allow this session
+      </Button>
+      <Button
+        size="sm"
+        variant="default"
+        disabled={isResponding}
+        onClick={() => void onRespondToApproval(requestId, "accept")}
+      >
+        Approve once
+      </Button>
+    </>
+  );
+});
+
 interface PlanModePanelProps {
   activePlan: ReturnType<typeof deriveActivePlanState>;
 }