fix(web): <mod>-w closes focused right panel tabs instead of entire window

apps/web/src/components/ChatView.tsx

@@ -168,7 +168,7 @@ import {
  PaperclipIcon,
  WifiOffIcon,
 } from "lucide-react";
-import { cn, randomHex } from "~/lib/utils";
+import { cn, isMacPlatform, randomHex } from "~/lib/utils";
 import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "~/workspaceTitlebar";
 import { stackedThreadToast, toastManager } from "./ui/toast";
 import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
@@ -194,6 +194,7 @@ import { useNewThreadHandler } from "../hooks/useHandleNewThread";
 import { resolveAppModelSelectionForInstance } from "../modelSelection";
 import { getTerminalFocusOwner } from "../lib/terminalFocus";
 import { preventRepeatedTerminalCloseShortcut } from "../lib/terminalCloseShortcut";
+import { isPreviewFocused } from "../lib/previewFocus";
 import { resolveNewDraftStartFromOrigin } from "../lib/chatThreadActions";
 import {
  derivePhysicalProjectKey,
@@ -4699,6 +4700,29 @@ function ChatViewContent(props: ChatViewProps) {
  return;
  }
  const terminalFocusOwner = getTerminalFocusOwner();
+ const modKey = isMacPlatform(navigator.platform)
+ ? event.metaKey && !event.ctrlKey
+ : event.ctrlKey && !event.metaKey;
+ const activeBrowserTabId =
+ activeRightPanelSurface?.kind === "preview" ? activeRightPanelSurface.resourceId : null;
+ if (
+ activeRightPanelSurface &&
+ event.key.toLowerCase() === "w" &&
+ modKey &&
+ !event.altKey &&
+ !event.shiftKey &&
+ isPreviewFocused(activeBrowserTabId)
+ ) {
+ event.preventDefault();
+ event.stopPropagation();
+ if (!event.repeat) {
+ document
+ .querySelector<HTMLElement>("[data-right-panel-surface-content]")
+ ?.focus({ preventScroll: true });
+ closeRightPanelSurface(activeRightPanelSurface);
+ }
+ return;
+ }
  if (event.defaultPrevented && terminalFocusOwner === null) {
  return;
  }
@@ -4833,6 +4857,7 @@ function ChatViewContent(props: ChatViewProps) {
  activeThreadId,
  closeTerminal,
  closePanelTerminal,
+ closeRightPanelSurface,
  createNewTerminal,
  setTerminalOpen,
  runProjectScript,

apps/web/src/components/RightPanelTabs.tsx

@@ -750,7 +750,11 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
  </ScrollArea>
  {props.layoutControls}
  </div>
- <div className="flex min-h-0 flex-1 flex-col" data-right-panel-surface-content>
+ <div
+ tabIndex={-1}
+ className="flex min-h-0 flex-1 flex-col outline-none"
+ data-right-panel-surface-content
+ >
  {props.activeSurfaceId === null ? (
  <RightPanelEmptyState
  onAddBrowser={props.onAddBrowser}

apps/web/src/lib/previewFocus.test.ts

@@ -0,0 +1,44 @@
+import { afterEach, describe, expect, it } from "vite-plus/test";
+
+import { isPreviewFocused } from "./previewFocus";
+
+class MockHTMLElement {
+ isConnected = true;
+ tagName = "WEBVIEW";
+ previewTabId = "mini-player-tab";
+
+ closest(): null {
+ return null;
+ }
+
+ getAttribute(name: string): string | null {
+ return name === "data-preview-server-tab" ? this.previewTabId : null;
+ }
+}
+
+const originalDocument = globalThis.document;
+const originalHTMLElement = globalThis.HTMLElement;
+
+afterEach(() => {
+ if (originalDocument === undefined) {
+ delete (globalThis as { document?: Document }).document;
+ } else {
+ globalThis.document = originalDocument;
+ }
+ if (originalHTMLElement === undefined) {
+ delete (globalThis as { HTMLElement?: typeof HTMLElement }).HTMLElement;
+ } else {
+ globalThis.HTMLElement = originalHTMLElement;
+ }
+});
+
+describe("isPreviewFocused", () => {
+ it("only accepts a webview that matches the requested browser tab", () => {
+ const webview = new MockHTMLElement();
+ globalThis.HTMLElement = MockHTMLElement as unknown as typeof HTMLElement;
+ globalThis.document = { activeElement: webview } as unknown as Document;
+
+ expect(isPreviewFocused("right-panel-tab")).toBe(false);
+ expect(isPreviewFocused("mini-player-tab")).toBe(true);
+ });
+});

apps/web/src/lib/previewFocus.ts

@@ -4,12 +4,20 @@
  * `<webview>` focus events — the embedded page).
  *
  * Used by the global keybinding handler to gate `preview.refresh` and
- * `preview.focusUrl` to only fire while the preview owns focus.
+ * `preview.focusUrl` to only fire while the preview owns focus. When a tab id
+ * is provided, focused webviews must belong to that tab; panel DOM still
+ * counts regardless of the active surface kind.
  */
-export function isPreviewFocused(): boolean {
+export function isPreviewFocused(activeBrowserTabId?: string | null): boolean {
  const activeElement = document.activeElement;
  if (!(activeElement instanceof HTMLElement)) return false;
  if (!activeElement.isConnected) return false;
- if (activeElement.tagName.toLowerCase() === "webview") return true;
+ if (activeElement.tagName.toLowerCase() === "webview") {
+ return (
+ activeBrowserTabId === undefined ||
+ (activeBrowserTabId !== null &&
+ activeElement.getAttribute("data-preview-server-tab") === activeBrowserTabId)
+ );
+ }
  return activeElement.closest("[data-preview-panel-mode]") !== null;
 }