Preserve unsent chat drafts while permission prompts are active (#22)

* Initial plan

* fix: preserve chat draft during permission prompts

Co-authored-by: OpenSource03 <29690431+OpenSource03@users.noreply.github.com>

* fix: keep chat composer mounted during permission prompts

Co-authored-by: OpenSource03 <29690431+OpenSource03@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: OpenSource03 <29690431+OpenSource03@users.noreply.github.com>

Author: Copilot

src/components/AppLayout.tsx

@@ -19,8 +19,7 @@ import { AppSidebar } from "./AppSidebar";
 import { ChatHeader } from "./ChatHeader";
 import { ChatSearchBar } from "./ChatSearchBar";
 import { ChatView } from "./ChatView";
-import { InputBar } from "./InputBar";
-import { PermissionPrompt } from "./PermissionPrompt";
+import { BottomComposer } from "./BottomComposer";
 import { TodoPanel } from "./TodoPanel";
 import { BackgroundAgentsPanel } from "./BackgroundAgentsPanel";
 import { ToolPicker } from "./ToolPicker";
@@ -529,51 +528,45 @@ Link: ${issue.url}`;
                 }}
               />
               <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10">
-                {manager.pendingPermission ? (
-                  <PermissionPrompt
-                    key={manager.pendingPermission.requestId}
-                    request={manager.pendingPermission}
-                    onRespond={manager.respondPermission}
-                  />
-                ) : (
-                  <InputBar
-                    onSend={wrappedHandleSend}
-                    onStop={handleStop}
-                    isProcessing={manager.isProcessing}
-                    queuedCount={manager.queuedCount}
-                    model={settings.model}
-                    claudeEffort={settings.claudeEffort}
-                    planMode={settings.planMode}
-                    permissionMode={settings.permissionMode}
-                    onModelChange={handleModelChange}
-                    onClaudeModelEffortChange={handleClaudeModelEffortChange}
-                    onPlanModeChange={handlePlanModeChange}
-                    onPermissionModeChange={handlePermissionModeChange}
-                    projectPath={activeProjectPath}
-                    contextUsage={manager.contextUsage}
-                    isCompacting={manager.isCompacting}
-                    onCompact={manager.compact}
-                    agents={agents}
-                    selectedAgent={selectedAgent}
-                    onAgentChange={handleAgentChange}
-                    slashCommands={manager.slashCommands}
-                    acpConfigOptions={manager.acpConfigOptions}
-                    acpConfigOptionsLoading={manager.acpConfigOptionsLoading}
-                    onACPConfigChange={manager.setACPConfig}
-                    acpPermissionBehavior={settings.acpPermissionBehavior}
-                    onAcpPermissionBehaviorChange={settings.setAcpPermissionBehavior}
-                    supportedModels={manager.supportedModels}
-                    codexModelsLoadingMessage={manager.codexModelsLoadingMessage}
-                    codexEffort={manager.codexEffort}
-                    onCodexEffortChange={manager.setCodexEffort}
-                    codexModelData={manager.codexRawModels}
-                    grabbedElements={grabbedElements}
-                    onRemoveGrabbedElement={handleRemoveGrabbedElement}
-                    lockedEngine={lockedEngine}
-                    lockedAgentId={lockedAgentId}
-                    isIslandLayout={isIsland}
-                  />
-                )}
+                <BottomComposer
+                  pendingPermission={manager.pendingPermission}
+                  onRespondPermission={manager.respondPermission}
+                  onSend={wrappedHandleSend}
+                  onStop={handleStop}
+                  isProcessing={manager.isProcessing}
+                  queuedCount={manager.queuedCount}
+                  model={settings.model}
+                  claudeEffort={settings.claudeEffort}
+                  planMode={settings.planMode}
+                  permissionMode={settings.permissionMode}
+                  onModelChange={handleModelChange}
+                  onClaudeModelEffortChange={handleClaudeModelEffortChange}
+                  onPlanModeChange={handlePlanModeChange}
+                  onPermissionModeChange={handlePermissionModeChange}
+                  projectPath={activeProjectPath}
+                  contextUsage={manager.contextUsage}
+                  isCompacting={manager.isCompacting}
+                  onCompact={manager.compact}
+                  agents={agents}
+                  selectedAgent={selectedAgent}
+                  onAgentChange={handleAgentChange}
+                  slashCommands={manager.slashCommands}
+                  acpConfigOptions={manager.acpConfigOptions}
+                  acpConfigOptionsLoading={manager.acpConfigOptionsLoading}
+                  onACPConfigChange={manager.setACPConfig}
+                  acpPermissionBehavior={settings.acpPermissionBehavior}
+                  onAcpPermissionBehaviorChange={settings.setAcpPermissionBehavior}
+                  supportedModels={manager.supportedModels}
+                  codexModelsLoadingMessage={manager.codexModelsLoadingMessage}
+                  codexEffort={manager.codexEffort}
+                  onCodexEffortChange={manager.setCodexEffort}
+                  codexModelData={manager.codexRawModels}
+                  grabbedElements={grabbedElements}
+                  onRemoveGrabbedElement={handleRemoveGrabbedElement}
+                  lockedEngine={lockedEngine}
+                  lockedAgentId={lockedAgentId}
+                  isIslandLayout={isIsland}
+                />
               </div>
               </>
             ) : (

src/components/BottomComposer.test.tsx

@@ -0,0 +1,69 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import type { ComponentProps } from "react";
+import { BottomComposer } from "./BottomComposer";
+
+vi.mock("./InputBar", () => ({
+  InputBar: () => <div data-testid="input-bar">input-bar</div>,
+}));
+
+vi.mock("./PermissionPrompt", () => ({
+  PermissionPrompt: ({ request }: { request: { requestId: string } }) => (
+    <div data-testid="permission-prompt">{request.requestId}</div>
+  ),
+}));
+
+type BottomComposerProps = ComponentProps<typeof BottomComposer>;
+
+function createProps(
+  overrides: Partial<BottomComposerProps> = {},
+): BottomComposerProps {
+  return {
+    pendingPermission: null,
+    onRespondPermission: vi.fn(),
+    onSend: vi.fn(),
+    onStop: vi.fn(),
+    isProcessing: false,
+    model: "claude-sonnet-4",
+    claudeEffort: "high",
+    planMode: false,
+    permissionMode: "default",
+    onModelChange: vi.fn(),
+    onClaudeModelEffortChange: vi.fn(),
+    onPlanModeChange: vi.fn(),
+    onPermissionModeChange: vi.fn(),
+    queuedCount: 0,
+    ...overrides,
+  };
+}
+
+describe("BottomComposer", () => {
+  it("keeps the input bar mounted when there is no pending permission", () => {
+    const html = renderToStaticMarkup(<BottomComposer {...createProps()} />);
+
+    expect(html).toContain("aria-hidden=\"false\"");
+    expect(html).toContain("data-testid=\"input-bar\"");
+    expect(html).not.toContain("data-testid=\"permission-prompt\"");
+  });
+
+  it("keeps the input bar mounted while also rendering the permission prompt", () => {
+    const html = renderToStaticMarkup(
+      <BottomComposer
+        {...createProps({
+          pendingPermission: {
+            requestId: "req-1",
+            toolName: "bash",
+            toolInput: {},
+            toolUseId: "tool-1",
+          },
+        })}
+      />,
+    );
+
+    expect(html).toContain("data-testid=\"permission-prompt\"");
+    expect(html).toContain("req-1");
+    expect(html).toContain("aria-hidden=\"true\"");
+    expect(html).toContain("inert=\"\"");
+    expect(html).toContain("data-testid=\"input-bar\"");
+  });
+});

src/components/BottomComposer.tsx

@@ -0,0 +1,37 @@
+import type { ComponentProps } from "react";
+import { InputBar } from "./InputBar";
+import { PermissionPrompt } from "./PermissionPrompt";
+
+type InputBarProps = ComponentProps<typeof InputBar>;
+type PermissionPromptProps = ComponentProps<typeof PermissionPrompt>;
+
+interface BottomComposerProps extends InputBarProps {
+  pendingPermission: PermissionPromptProps["request"] | null;
+  onRespondPermission: PermissionPromptProps["onRespond"];
+}
+
+export function BottomComposer({
+  pendingPermission,
+  onRespondPermission,
+  ...inputBarProps
+}: BottomComposerProps) {
+  const hasPendingPermission = !!pendingPermission;
+
+  return (
+    <>
+      {pendingPermission ? (
+        <PermissionPrompt
+          key={pendingPermission.requestId}
+          request={pendingPermission}
+          onRespond={onRespondPermission}
+        />
+      ) : null}
+      <div
+        aria-hidden={hasPendingPermission}
+        inert={hasPendingPermission || undefined}
+      >
+        <InputBar {...inputBarProps} />
+      </div>
+    </>
+  );
+}