feat: M13 UX polish — collection search, table keyboard, auto-focus, dirty guard (#T1300-T1303,T1307)

Four parallel agents shipped five tasks in one pass. All typecheck + 226 tests green.

T1300 — Collection sidebar search/filter
  New search input at top of sidebar. Real-time case-insensitive filter
  on request name + URL + method prefix ("GET /users" works). Folders
  auto-expand when filtering, hide when zero descendants match. Cmd+Shift+F
  focuses from anywhere, Cmd+F when sidebar has focus, ESC clears and
  returns focus to tree. Empty state with "Clear filter" button.
  Files: Sidebar.tsx, store.ts, App.tsx

T1301 — Headers/Params: Shift+Enter inserts row below
  Shift+Enter in any Key or Value cell inserts a new empty row below and
  focuses the new Key cell. Works in both Headers and Params tabs. Uses
  requestAnimationFrame to focus after React commits. preventDefault stops
  accidental request send.
  Files: HeadersEditor.tsx, ParamsEditor.tsx, RequestBuilder.tsx, store.ts

T1302 — Headers/Params: auto-append row on Tab from last row
  Tab from the Key cell of the last row (when non-empty) silently appends
  a new empty row. Browser Tab focus naturally lands on Value of the
  current row. If last row is already blank, no append. If autocomplete
  dropdown is open, Tab inserts the variable instead.
  Files: HeadersEditor.tsx, ParamsEditor.tsx, HighlightedInput.tsx

T1303 — Cmd+N auto-focus URL input
  newTab() in the store now bumps focusUrlTick in the same set() call.
  RequestBuilder's existing useEffect on focusUrlTick fires focus+select
  on the URL ref. restoreHistoryEntry() and openRequest() do NOT bump
  the tick, so restored tabs never steal focus.
  Files: store.ts

T1307 — Dirty-tab close guard unification + "don't ask again"
  New useDirtyTabGuard hook centralizes all close paths. Every trigger
  (middle-click, Cmd+W, close button, context menu Close/Close Others/
  Close Right/Close All, Cmd+Shift+W, command palette) now goes through
  the guard. ConfirmDialog gains an optional "Don't ask again for this
  session" checkbox. Session-scoped useRef, resets on restart.
  Bug fixed: Cmd+W and command palette "Close tab" previously bypassed
  the dirty check entirely.
  Files: useDirtyTabGuard.tsx (new), TabBar.tsx, Dialog.tsx, App.tsx, commands.ts

Infrastructure:
  - New developer-ux agent definition (.claude/agents/developer-ux.md)
    for keyboard/focus/guard/micro-interaction tasks
  - pre-push hook gains build:packages step before typecheck to prevent
    stale .d.ts errors

Author: mertbekci

.claude/agents/developer-ux.md

@@ -0,0 +1,64 @@
+---
+name: developer-ux
+description: Use for UX polish tasks — keyboard shortcuts, focus management, tab close guards, micro-interactions, dirty state handling, empty states, loading skeletons. Complements developer-ui which builds the components; this agent wires the interactions.
+tools: Read, Write, Edit, Glob, Grep, Bash
+model: sonnet
+---
+
+You are the UX Developer for Scrapeman. developer-ui builds the components, you make them feel right.
+
+## Your lane
+- `apps/desktop/src/renderer/` — hooks, Zustand store actions, keyboard handlers, focus management, dialog triggers
+- Tab lifecycle (open, close, switch, restore, dirty guard)
+- Keyboard shortcuts (registration, conflict resolution, platform-aware symbols)
+- Focus management (auto-focus on mount, trap in dialogs, restore on close)
+- Micro-interactions (hover states, transition timing, toast placement)
+- Empty states and loading skeletons
+- Accessibility (aria labels, screen reader announcements, reduced-motion)
+
+## What you do NOT touch
+- HTTP core, auth, proxy logic (developer-core)
+- Complex new component trees from scratch (developer-ui builds those, you wire them)
+- Main-process IPC handlers (developer-core)
+- File format parsing (developer-core)
+
+## Relationship with developer-ui
+You and developer-ui work the same directory but different concerns. Avoid editing the same file in the same session. Coordinate via task dependencies in `planning/tasks.yaml`:
+- If your task depends on a component developer-ui is building, wait for it or stub the interface.
+- If developer-ui's component needs keyboard handling, they leave a `// TODO(developer-ux): wire shortcut` comment and you pick it up.
+
+## Task contract
+Every task has acceptance criteria in `planning/tasks.yaml`. Before coding:
+1. Read the task and its dependencies.
+2. Identify which existing components you are wiring (grep for them, read them, understand the state shape).
+3. If the component does not exist yet and your task depends on it, stop and report the dependency.
+
+Before finishing:
+1. Every keyboard shortcut works on mac (Cmd) AND windows/linux (Ctrl).
+2. Focus is never lost after an interaction (close dialog → focus returns to trigger, close tab → focus moves to next tab).
+3. No flash of incorrect state (dirty indicator appears before the save completes, not after).
+4. Transitions are 150-200ms ease-out, never blocking.
+5. Test: can you complete the entire flow without touching the mouse?
+
+## Operating principles
+1. **Keyboard first.** If it cannot be done from the keyboard, it is not done.
+2. **Consistent guards.** If one close path shows a confirmation, ALL close paths show it. No surprises.
+3. **Session memory.** "Don't ask again" preferences are session-scoped by default (reset on restart). Only persist to disk if the PM spec says so.
+4. **Platform parity.** Cmd on mac, Ctrl on win/linux. No shortcuts that conflict with OS defaults.
+5. **Code comments in English** regardless of chat language.
+
+## Typical tasks for you
+- T1303 Cmd+N auto-focus URL input
+- T1307 Dirty-tab close guard unification + "don't ask again"
+- Keyboard shortcut registration and conflict resolution
+- Focus trap in modals/dialogs
+- Tab close, reorder, restore focus management
+- Toast/notification timing and stacking
+
+## When invoked
+- State which task ID(s) you are working on.
+- Read the relevant component source first (you wire existing components, you rarely create new ones).
+- Implement, test the keyboard flow end-to-end, report what changed.
+
+## Style
+Obsessed with feel. If the cursor lands in the wrong place after a shortcut, the task is not done.

apps/desktop/src/renderer/src/App.tsx

@@ -16,6 +16,7 @@ import { usePlatform } from './hooks/usePlatform.js';
 import { useShortcuts, type Shortcut } from './hooks/useShortcuts.js';
 import { useTheme } from './hooks/useTheme.js';
 import { UpdateBanner } from './components/UpdateBanner.js';
+import { useDirtyTabGuard } from './hooks/useDirtyTabGuard.js';
 
 export function App(): JSX.Element {
   const workspace = useAppStore((s) => s.workspace);
@@ -25,7 +26,6 @@ export function App(): JSX.Element {
   const loadEnvironments = useAppStore((s) => s.loadEnvironments);
   const recents = useAppStore((s) => s.recents);
   const newTab = useAppStore((s) => s.newTab);
-  const closeTab = useAppStore((s) => s.closeTab);
   const duplicateTab = useAppStore((s) => s.duplicateTab);
   const activateTabByIndex = useAppStore((s) => s.activateTabByIndex);
   const reopenClosedTab = useAppStore((s) => s.reopenClosedTab);
@@ -34,10 +34,13 @@ export function App(): JSX.Element {
   const saveOrPrompt = useAppStore((s) => s.saveOrPrompt);
   const focusUrl = useAppStore((s) => s.focusUrl);
   const focusSearch = useAppStore((s) => s.focusSearch);
+  const focusSidebarSearch = useAppStore((s) => s.focusSidebarSearch);
   const toggleHiddenRequest = useAppStore((s) => s.toggleHiddenRequest);
   const tabs = useAppStore((s) => s.tabs);
   const isRepo = useAppStore((s) => s.gitStatus?.isRepo === true);
 
+  const guard = useDirtyTabGuard();
+
   useEffect(() => {
     void loadRecents();
   }, [loadRecents]);
@@ -81,14 +84,24 @@ export function App(): JSX.Element {
             {
               combo: 'mod+w',
               description: 'Close tab',
-              handler: () => activeTabId && closeTab(activeTabId),
+              handler: () => guard.requestCloseActive(),
+            },
+            {
+              combo: 'mod+shift+w',
+              description: 'Close all tabs',
+              handler: () => guard.requestCloseAll(),
             },
             {
               combo: 'mod+d',
               description: 'Duplicate tab',
               handler: () => activeTabId && duplicateTab(activeTabId),
             },
             { combo: 'mod+l', description: 'Focus URL bar', handler: () => focusUrl() },
+            {
+              combo: 'mod+shift+f',
+              description: 'Focus collection search',
+              handler: () => focusSidebarSearch(),
+            },
             {
               combo: 'mod+f',
               description: 'Find in response',
@@ -142,14 +155,15 @@ export function App(): JSX.Element {
     ],
     [
       newTab,
-      closeTab,
+      guard,
       duplicateTab,
       activateTabByIndex,
       reopenClosedTab,
       activeTabId,
       saveOrPrompt,
       focusUrl,
       focusSearch,
+      focusSidebarSearch,
       toggleHiddenRequest,
       tabs,
       isRepo,
@@ -184,8 +198,10 @@ export function App(): JSX.Element {
       toggleTheme,
       toggleSplit: () =>
         setSplitOrientation((o) => (o === 'horizontal' ? 'vertical' : 'horizontal')),
+      requestCloseActive: () => guard.requestCloseActive(),
+      requestCloseAll: () => guard.requestCloseAll(),
     }),
-    [toggleTheme],
+    [toggleTheme, guard],
   );
   const commands = useCommands(commandExtras);
 
@@ -276,7 +292,7 @@ export function App(): JSX.Element {
           second={
             <div className="flex h-full flex-col overflow-hidden">
               <UpdateBanner />
-              <TabBar />
+              <TabBar guard={guard} />
               <div className="flex-1 overflow-hidden">
                 <SplitPane
                   orientation={splitOrientation}

apps/desktop/src/renderer/src/commands.ts

@@ -12,13 +12,14 @@ export interface Command {
 export interface CommandExtras {
   toggleTheme: () => void;
   toggleSplit: () => void;
+  requestCloseActive: () => void;
+  requestCloseAll: () => void;
 }
 
 export function useCommands(extras: CommandExtras): Command[] {
   const send = useAppStore((s) => s.send);
   const saveOrPrompt = useAppStore((s) => s.saveOrPrompt);
   const newTab = useAppStore((s) => s.newTab);
-  const closeTab = useAppStore((s) => s.closeTab);
   const duplicateTab = useAppStore((s) => s.duplicateTab);
   const activeTabId = useAppStore((s) => s.activeTabId);
   const focusUrl = useAppStore((s) => s.focusUrl);
@@ -68,9 +69,7 @@ export function useCommands(extras: CommandExtras): Command[] {
         title: 'Close tab',
         section: 'Tabs',
         shortcut: 'mod+w',
-        run: () => {
-          if (activeTabId) closeTab(activeTabId);
-        },
+        run: () => extras.requestCloseActive(),
       },
       {
         id: 'tab.duplicate',
@@ -121,7 +120,6 @@ export function useCommands(extras: CommandExtras): Command[] {
       send,
       saveOrPrompt,
       newTab,
-      closeTab,
       duplicateTab,
       activeTabId,
       focusUrl,

apps/desktop/src/renderer/src/components/HeadersEditor.tsx

@@ -1,18 +1,70 @@
+import { useCallback, useRef } from 'react';
 import type { HeaderRow } from '../store.js';
 import { HighlightedInput } from '../ui/HighlightedInput.js';
 import { CellContextMenu } from '../ui/CellContextMenu.js';
 
 export function HeadersEditor({
   rows,
   onAdd,
+  onInsertAfter,
   onUpdate,
   onRemove,
 }: {
   rows: HeaderRow[];
   onAdd: () => void;
+  /** Insert a new empty row below the given row id. Returns the new row id. */
+  onInsertAfter: (afterId: string) => string;
   onUpdate: (id: string, patch: Partial<HeaderRow>) => void;
   onRemove: (id: string) => void;
 }): JSX.Element {
+  // Refs map: rowId -> key input element, used to focus after insert.
+  const keyRefs = useRef<Record<string, HTMLInputElement | null>>({});
+
+  const focusKeyCell = useCallback(
+    (rowId: string) => {
+      // Use requestAnimationFrame so the new row has been rendered first.
+      requestAnimationFrame(() => {
+        keyRefs.current[rowId]?.focus();
+      });
+    },
+    [],
+  );
+
+  const handleKeyKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>, row: HeaderRow) => {
+      // T1301: Shift+Enter → insert row below, focus its Key cell.
+      if (e.key === 'Enter' && e.shiftKey) {
+        e.preventDefault();
+        const newId = onInsertAfter(row.id);
+        focusKeyCell(newId);
+        return;
+      }
+      // T1302: Tab from Key cell of last row when key is non-empty →
+      // append new row. Focus stays on the Value cell (natural Tab target).
+      if (e.key === 'Tab' && !e.shiftKey) {
+        const isLastRow = rows[rows.length - 1]?.id === row.id;
+        if (isLastRow && row.key.trim().length > 0) {
+          // Append without preventing default so Tab still moves focus
+          // to the Value cell of this row.
+          onAdd();
+        }
+      }
+    },
+    [rows, onAdd, onInsertAfter, focusKeyCell],
+  );
+
+  const handleValueKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>, row: HeaderRow) => {
+      // T1301: Shift+Enter → insert row below, focus its Key cell.
+      if (e.key === 'Enter' && e.shiftKey) {
+        e.preventDefault();
+        const newId = onInsertAfter(row.id);
+        focusKeyCell(newId);
+      }
+    },
+    [onInsertAfter, focusKeyCell],
+  );
+
   return (
     <div className="flex flex-col">
       <div className="grid grid-cols-[32px_1fr_1.5fr_32px] items-center border-b border-line bg-bg-subtle px-3 text-[10px] font-semibold uppercase tracking-wider text-ink-4">
@@ -35,10 +87,12 @@ export function HeadersEditor({
             />
           </div>
           <input
+            ref={(el) => { keyRefs.current[row.id] = el; }}
             type="text"
             value={row.key}
             placeholder="Header"
             onChange={(e) => onUpdate(row.id, { key: e.target.value })}
+            onKeyDown={(e) => handleKeyKeyDown(e, row)}
             className="h-8 bg-transparent pr-2 font-mono text-xs text-ink-1 outline-none placeholder:text-ink-4"
           />
           <CellContextMenu
@@ -49,6 +103,7 @@ export function HeadersEditor({
               <HighlightedInput
                 value={row.value}
                 onChange={(e) => onUpdate(row.id, { value: e.target.value })}
+                onKeyDown={(e) => handleValueKeyDown(e, row)}
                 placeholder="Bearer {{token}}"
                 variant="cell"
               />

apps/desktop/src/renderer/src/components/ParamsEditor.tsx

@@ -1,18 +1,70 @@
+import { useCallback, useRef } from 'react';
 import type { ParamRow } from '../store.js';
 import { HighlightedInput } from '../ui/HighlightedInput.js';
 import { CellContextMenu } from '../ui/CellContextMenu.js';
 
 export function ParamsEditor({
   rows,
   onAdd,
+  onInsertAfter,
   onUpdate,
   onRemove,
 }: {
   rows: ParamRow[];
   onAdd: () => void;
+  /** Insert a new empty row below the given row id. Returns the new row id. */
+  onInsertAfter: (afterId: string) => string;
   onUpdate: (id: string, patch: Partial<ParamRow>) => void;
   onRemove: (id: string) => void;
 }): JSX.Element {
+  // Refs map: rowId -> HTMLInputElement for key cell focus after insert.
+  const keyRefs = useRef<Record<string, HTMLInputElement | null>>({});
+
+  const focusKeyCell = useCallback(
+    (rowId: string) => {
+      // Use requestAnimationFrame so the new row has been rendered first.
+      requestAnimationFrame(() => {
+        keyRefs.current[rowId]?.focus();
+      });
+    },
+    [],
+  );
+
+  const handleKeyKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>, row: ParamRow) => {
+      // T1301: Shift+Enter → insert row below, focus its Key cell.
+      if (e.key === 'Enter' && e.shiftKey) {
+        e.preventDefault();
+        const newId = onInsertAfter(row.id);
+        focusKeyCell(newId);
+        return;
+      }
+      // T1302: Tab from Key cell of last row when key is non-empty →
+      // append new row. Focus stays on the Value cell (natural Tab target).
+      if (e.key === 'Tab' && !e.shiftKey) {
+        const isLastRow = rows[rows.length - 1]?.id === row.id;
+        if (isLastRow && row.key.trim().length > 0) {
+          // Append without preventing default so Tab still moves focus
+          // to the Value cell of this row.
+          onAdd();
+        }
+      }
+    },
+    [rows, onAdd, onInsertAfter, focusKeyCell],
+  );
+
+  const handleValueKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>, row: ParamRow) => {
+      // T1301: Shift+Enter → insert row below, focus its Key cell.
+      if (e.key === 'Enter' && e.shiftKey) {
+        e.preventDefault();
+        const newId = onInsertAfter(row.id);
+        focusKeyCell(newId);
+      }
+    },
+    [onInsertAfter, focusKeyCell],
+  );
+
   return (
     <div className="flex flex-col">
       <div className="grid grid-cols-[32px_1fr_1.5fr_32px] items-center border-b border-line bg-bg-subtle px-3 text-[10px] font-semibold uppercase tracking-wider text-ink-4">
@@ -35,10 +87,12 @@ export function ParamsEditor({
             />
           </div>
           <input
+            ref={(el) => { keyRefs.current[row.id] = el; }}
             type="text"
             value={row.key}
             placeholder="key"
             onChange={(e) => onUpdate(row.id, { key: e.target.value })}
+            onKeyDown={(e) => handleKeyKeyDown(e, row)}
             className="h-8 bg-transparent pr-2 font-mono text-xs text-ink-1 outline-none placeholder:text-ink-4"
           />
           <CellContextMenu
@@ -49,6 +103,7 @@ export function ParamsEditor({
               <HighlightedInput
                 value={row.value}
                 onChange={(e) => onUpdate(row.id, { value: e.target.value })}
+                onKeyDown={(e) => handleValueKeyDown(e, row)}
                 placeholder="value or {{var}}"
                 variant="cell"
               />