fix(app): sync keyboard pane focus with active panel (#141)

* fix(app): move keyboard focus to target pane on keyboard navigation (#137)

Add a pane focus registry so each panel type can expose its own focus
callback. When keyboard shortcuts navigate between panes, the workspace
screen calls the target panel's registered focus function, moving DOM
focus to the correct input element.

- Agent panels register a callback that focuses the message input
- Terminal panels register a callback that triggers terminal focus
- Panel-internal focus logic stays inside each panel type
- No DOM selectors or panel knowledge in shared infrastructure

* fix(app): simplify workspace pane focus handoff
This commit is contained in:
Mohamed Boudra
2026-03-24 15:02:02 +08:00
committed by GitHub
parent c6aff35db2
commit 77cdfbcb06
6 changed files with 151 additions and 6 deletions
@@ -12,6 +12,7 @@ import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-
import { buildDraftStoreKey } from "@/stores/draft-keys";
import type { Agent } from "@/stores/session-store";
import { encodeImages } from "@/utils/encode-images";
import { shouldAutoFocusWorkspaceDraftComposer } from "@/screens/workspace/workspace-draft-pane-focus";
import type {
AgentCapabilityFlags,
AgentSessionConfig,
@@ -33,6 +34,7 @@ type WorkspaceDraftAgentTabProps = {
workspaceId: string;
tabId: string;
draftId: string;
isPaneFocused: boolean;
onCreated: (snapshot: AgentSnapshotPayload) => void;
onOpenWorkspaceFile: (input: { filePath: string }) => void;
};
@@ -42,6 +44,7 @@ export function WorkspaceDraftAgentTab({
workspaceId,
tabId,
draftId,
isPaneFocused,
onCreated,
onOpenWorkspaceFile,
}: WorkspaceDraftAgentTabProps) {
@@ -251,7 +254,7 @@ export function WorkspaceDraftAgentTab({
images={draftInput.images}
onChangeImages={draftInput.setImages}
clearDraft={draftInput.clear}
autoFocus={!isSubmitting}
autoFocus={shouldAutoFocusWorkspaceDraftComposer({ isPaneFocused, isSubmitting })}
onAddImages={handleAddImagesCallback}
commandDraftConfig={draftCommandConfig}
statusControls={{
@@ -0,0 +1,31 @@
import { describe, expect, it } from "vitest";
import { shouldAutoFocusWorkspaceDraftComposer } from "./workspace-draft-pane-focus";
describe("shouldAutoFocusWorkspaceDraftComposer", () => {
it("focuses the draft composer when the pane is focused and idle", () => {
expect(
shouldAutoFocusWorkspaceDraftComposer({
isPaneFocused: true,
isSubmitting: false,
}),
).toBe(true);
});
it("does not focus the draft composer when the pane is unfocused", () => {
expect(
shouldAutoFocusWorkspaceDraftComposer({
isPaneFocused: false,
isSubmitting: false,
}),
).toBe(false);
});
it("does not focus the draft composer while the draft is submitting", () => {
expect(
shouldAutoFocusWorkspaceDraftComposer({
isPaneFocused: true,
isSubmitting: true,
}),
).toBe(false);
});
});
@@ -0,0 +1,6 @@
export function shouldAutoFocusWorkspaceDraftComposer(input: {
isPaneFocused: boolean;
isSubmitting: boolean;
}): boolean {
return input.isPaneFocused && !input.isSubmitting;
}