diff --git a/docs/cmd-j-scoped-jump-palette-plan.md b/docs/cmd-j-scoped-jump-palette-plan.md new file mode 100644 index 00000000..a93a02f2 --- /dev/null +++ b/docs/cmd-j-scoped-jump-palette-plan.md @@ -0,0 +1,480 @@ +# Design Document: Scoped Cmd+J Jump Palette for Worktrees and Browser Tabs + +**Status:** Draft +**Date:** 2026-04-15 + +## 1. Summary + +Extend Orca's existing `Cmd+J` / `Ctrl+Shift+J` worktree palette into a single app-wide jump surface with explicit scopes. The first release keeps the palette centered on two jobs: + +- jump to a worktree +- jump to an already-open browser page across any worktree + +The palette opens into a lightweight scope switcher with three modes: + +- `All` +- `Worktrees` +- `Browser Tabs` + +Users can press `Tab` / `Shift+Tab` to cycle scopes without leaving the keyboard. The default contract on open remains `Worktrees`, not `All`, so existing users still land in the familiar worktree-first flow before opting into broader search. Search results stay intentionally narrow: browser-only discovery is supported because the user explicitly needs to find already-open pages across worktrees, but the palette does not become a generic "everything" bucket in v1. + +## 1.1 Phase 0.5 Direction Lock + +Phase 0.5 locked three product decisions for v1: + +- `Cmd+J` still opens into `Worktrees` by default. +- Browser discovery indexes live open `BrowserPage`s, not just browser workspace containers. +- Browser ordering uses a simple context-first heuristic instead of true last-focused recency state. + +Why these decisions were chosen: + +- `Cmd+J` already has a strong worktree-switching contract in Orca. Making `All` the default would silently turn a familiar command into a mixed-ranking surface and force existing users to re-learn the first screen they see. +- The remembered object in the browser case is the page itself. Searching only browser workspace shells would miss the page-level titles and URLs users actually recall when they say "I know I already have this open somewhere." +- True global browser recency would require new focus-tracking state whose only initial consumer is palette ranking. A simple heuristic is easier to ship, easier to explain, and good enough for the first version of this discovery workflow. + +## 2. Problem + +Orca already supports multiple concurrent worktrees and persistent in-app browser tabs. Users can jump between worktrees with the existing `Cmd+J` palette, but they cannot quickly answer a more specific question: + +> "I know I already have this page open somewhere. Which worktree is it in, and how do I get back to it?" + +The current worktree palette is container-first. That works when the user remembers the worktree identity, but it breaks down when the remembered thing is a page title, host, or URL path. + +This is a discovery problem, not a recency problem. A cycle UI is poor at it because: + +- the user often does not know which worktree owns the target tab +- multiple browser tabs can share similar titles +- cycling scales badly once many worktrees have open tabs + +## 3. Goals + +- Preserve `Cmd+J` / `Ctrl+Shift+J` as Orca's single global jump entry point. +- Let users search open browser pages across all worktrees. +- Keep worktree search fast and familiar for existing users. +- Make scope switching explicit and keyboard-first. +- Avoid overcommitting Orca to a generic "search all open items" model before the product is ready to support terminals, editors, and commands consistently. +- Preserve the existing expectation that `Cmd+J` opens as a worktree-first jump flow. + +## 4. Non-Goals + +- Searching terminal scrollback or editor contents. +- Adding a persistent sidebar or browser-tab manager panel. +- Replacing local `Ctrl+Tab` behavior or introducing a new cycle UI. +- Expanding `Cmd+J` into files, terminals, editor tabs, or commands in this change. + +## 5. UX + +### 5.1 Entry Point + +Keep the existing shortcut: + +- macOS: `Cmd+J` +- Windows/Linux: `Ctrl+Shift+J` + +This shortcut already means "global jump" inside Orca and is already forwarded correctly even when an embedded browser guest owns focus. Reusing it preserves muscle memory and avoids proliferating navigation surfaces. + +### 5.2 Scope Model + +The palette header contains three explicit scope chips: + +- `All` +- `Worktrees` +- `Browser Tabs` + +Keyboard behavior: + +- `Tab`: next scope +- `Shift+Tab`: previous scope +- `Up` / `Down`: move selection within results +- `Enter`: activate selected result +- `Esc`: close palette + +Default scope on open: `Worktrees`. + +Why this shape: + +- one entry point is easier to remember than separate dialogs +- explicit scopes prevent a mixed list from becoming noisy +- `Tab` matches the mental model of "move across modes" without conflicting with list navigation +- opening in `Worktrees` preserves today's default behavior and makes `All` an explicit expansion, not a silent contract change + +### 5.3 Scope Semantics + +#### `All` + +Merged result list of: + +- open browser pages across all worktrees +- worktrees across all repos + +Ranking rules: + +- strong browser title matches rank above weak worktree metadata matches +- host/url matches get boosted when the query resembles a domain, URL, or path fragment +- exact worktree name matches still beat weak browser matches +- current worktree/current browser page receive a small context boost when otherwise tied +- browser results use the same heuristic ordering as `Browser Tabs`; v1 does not add hidden last-focused browser recency state just for this merged scope + +`All` is meant to feel smart, not exhaustive. + +#### `Worktrees` + +Equivalent to today's worktree palette behavior: + +- same global search semantics for worktree metadata +- same recent-first ordering for the default empty-query state +- same selection and activation behavior + +#### `Browser Tabs` + +Shows only open browser pages across all worktrees. The user-facing scope label stays `Browser Tabs`, but each row maps to a live `BrowserPage`, not a browser workspace shell. + +Empty query ordering: + +1. current browser page, if any +2. other open browser pages in the current worktree +3. browser pages in other worktrees, grouped by the existing worktree ordering and then sorted by title, falling back to URL + +This mode is the direct answer to "just show me all open browsers." + +Why this ordering: + +- it pulls the user's current context to the top without inventing new global recency state +- it stays stable enough that users can learn where results tend to land +- it keeps the implementation honest about what Orca already knows today versus what would require new focus-history plumbing + +### 5.4 Result Rows + +#### Browser tab row + +Primary text: + +- current page title, falling back to formatted URL when the title is blank or useless + +Secondary text: + +- host + trimmed path + +Context chips on the right: + +- repo name +- worktree display name + +Optional badges: + +- `Current Tab` +- `Current Worktree` + +Why this is required: + +- browser tab titles are often duplicated (`localhost`, `Settings`, `Dashboard`) +- users need immediate disambiguation without opening the result +- worktree context is the whole point of the feature +- each row represents the actual page the user remembers, while worktree and repo chips explain where that page lives + +#### Worktree row + +Keep the existing row structure: + +- worktree display name +- branch +- optional supporting text for comment / PR / issue +- repo badge + +This avoids making existing users relearn the palette. + +### 5.5 Empty States + +`All` + +- If no worktrees and no browser tabs exist: `No worktrees or open browser tabs` +- If query yields no results: `No matches in worktrees or browser tabs` + +`Worktrees` + +- Preserve existing copy + +`Browser Tabs` + +- No open browser tabs: `No open browser tabs` +- No query matches: `No browser tabs match your search` + +### 5.6 Activation Behavior + +Selecting a worktree result: + +- preserve current `activateAndRevealWorktree(worktreeId)` behavior + +Selecting a browser result: + +1. activate and reveal the owning worktree +2. focus the target browser workspace tab +3. select the target `BrowserPage` inside that workspace +4. set `activeTabType` to `browser` +5. close the palette +6. restore focus into the browser surface, not the terminal/editor fallback + +Why this ordering matters: + +- browser pages are subordinate to worktree activation in Orca's model +- worktree-first activation restores the right workspace state and sidebar visibility +- selecting a browser result should feel like "take me there directly," not "switch worktree and make me pick again" + +## 6. Data Model and Search Inputs + +### 6.1 Worktree Results + +Use the existing search surface: + +- `displayName` +- branch +- repo name +- comment +- linked PR number/title +- linked issue number/title + +### 6.2 Browser Tab Results + +Search only currently open browser pages, not history and not just browser workspace shells. + +For each browser result, index: + +- page title +- page URL +- formatted host/path +- owning browser workspace label, if available +- owning worktree display name +- owning repo display name + +Each open `BrowserPage` contributes its own result row. Browser workspaces still matter for ownership and activation, but they are context, not the searchable unit. + +This is intentionally limited to live open pages because Orca still is not an app-wide browsing history system. The goal is to help users recover something they already have open, not to introduce a second browsing history feature through the palette. + +### 6.3 Why Not Terminal Tabs Yet + +Terminal tabs are deliberately out of scope for text-first search in this change. + +Reasons: + +- terminal tab titles are less stable and less descriptive than browser titles +- the meaningful part of a terminal session often lives in scrollback, not tab metadata +- adding terminal tabs only because browser tabs are added would create a low-signal mixed palette + +This design keeps the palette honest: it supports browser-page search because that metadata makes the target genuinely searchable. If Orca later wants an "all open items" palette, that should be a deliberate follow-up with result quality standards for each item type. + +## 7. Architecture + +### 7.1 Existing Pieces Reused + +- `WorktreeJumpPalette.tsx` remains the base surface and interaction shell. +- Existing worktree search logic remains intact for the `Worktrees` scope. +- Browser search input comes from the live open `BrowserPage`s already held by renderer browser state. +- Browser activation continues to use the existing browser-workspace activation pathway after worktree activation, then selects the matching page inside that workspace. +- Main-process shortcut forwarding remains unchanged. + +### 7.2 New Search Model + +Add a palette view-model layer that produces typed results: + +```ts +type JumpPaletteScope = 'all' | 'worktrees' | 'browser-tabs' + +type JumpPaletteResult = + | { type: 'worktree'; worktreeId: string; score: number; ... } + | { + type: 'browser-page' + worktreeId: string + browserTabId: string + browserPageId: string + score: number + ... + } +``` + +The existing worktree search helper remains responsible for worktree scoring. A new browser-page search helper handles browser result scoring and formatting. The palette shell merges and sorts results only in `All`. + +Why split the search helpers: + +- worktree matching logic is already non-trivial and should not be regressed +- browser result ranking has different signals than worktree ranking +- typed results keep selection and rendering explicit instead of relying on ad hoc ID prefixes +- page-level browser hits need both workspace ownership and page identity for activation + +### 7.3 Focus and Close Semantics + +The existing palette already manages focus restoration carefully. That logic should be extended, not replaced. + +New rule: + +- if the selected result is a browser page, the post-close focus path targets the active browser surface +- otherwise preserve today's terminal/editor focus restoration behavior + +### 7.4 System Context + +```text ++------------------+ +-----------------------+ +| Main Process | | Renderer Store | +| shortcut forward | -----> | activeModal | +| Cmd+J / Ctrl+... | | worktreesByRepo | ++------------------+ | browser state | + | activeWorktreeId | + +-----------+-----------+ + | + v + +------------------------+ + | Cmd+J Jump Palette | + | scopes + search + list | + +-----+-------------+----+ + | | + worktree hit | | browser-page hit + v v + +------------------+ +---------------------+ + | activate/reveal | | activate/reveal | + | target worktree | | target worktree | + +------------------+ +----------+----------+ + | + v + +----------------------+ + | activate browser | + | workspace + page | + | focus browser pane | + +----------------------+ +``` + +### 7.5 Data Flows + +#### Happy path: browser-page search and jump + +```text +Cmd+J -> palette opens in Worktrees -> user switches to Browser Tabs -> +query matches browser page -> +user presses Enter -> activateAndRevealWorktree(worktreeId) -> +activate target browser workspace and page -> palette closes -> browser surface focused +``` + +#### Nil path: user opens palette with no browser pages + +```text +Cmd+J -> palette opens -> Browser Tabs scope selected -> +search model sees zero browser pages -> empty state shown -> no side effects +``` + +#### Empty path: query yields no browser or worktree matches + +```text +query typed -> search returns [] -> scope-specific empty state rendered -> +selection cleared or pinned to no result -> Enter does nothing +``` + +#### Upstream error path: selected browser page disappears before activation + +```text +user selects browser result -> store lookup fails because page/worktree closed -> +show toast error -> keep palette open if possible, otherwise close safely without switching +``` + +## 8. Alternatives Considered + +### 8.1 Dedicated browser-tab-only dialog + +Pros: + +- clearer mental model for the browser-specific job +- no mixed-result ranking complexity + +Cons: + +- adds another shortcut and another navigation surface +- weakens `Cmd+J` as the single place to jump around Orca + +Decision: rejected for now. The scoped palette gives the same utility with less surface area. + +### 8.2 Browser tabs only inside `Cmd+J`, no scopes + +Pros: + +- least new UI chrome + +Cons: + +- mixed results become harder to reason about +- users cannot quickly answer "just show me browser tabs" + +Decision: rejected. Explicit scopes are worth the small extra header chrome. + +### 8.3 Expand immediately to terminals, files, and commands + +Pros: + +- one "go to anything" story + +Cons: + +- scope explosion +- result quality is uneven across item types +- much higher design and implementation complexity + +Decision: rejected for v1. Start with the two jobs the user clearly asked for. + +### 8.4 Make `All` the default scope + +Pros: + +- makes browser discovery visible immediately +- creates a more obviously "global" first impression + +Cons: + +- breaks the current worktree-first contract of `Cmd+J` +- makes the first screen depend on mixed ranking logic instead of today's predictable worktree list + +Decision: rejected for v1. `All` remains available, but opening in `Worktrees` preserves muscle memory and keeps the expansion explicit. + +### 8.5 Search browser workspaces instead of live pages + +Pros: + +- simpler indexing model +- reuses the existing browser workspace abstraction directly + +Cons: + +- misses the page titles and URLs users actually remember +- treats the container as the search target even when the user wants a specific page inside it + +Decision: rejected. The palette should index the page the user is trying to recover, then use workspace and worktree context to explain where it lives. + +### 8.6 Add true browser recency tracking for v1 ranking + +Pros: + +- could produce sharper empty-query ordering over time + +Cons: + +- requires new state and focus bookkeeping for a thin initial payoff +- introduces ranking behavior that is harder to explain and debug + +Decision: rejected for v1. Start with a deterministic context-first heuristic and revisit true recency only if usage shows the heuristic is insufficient. + +## 9. Rollout + +### Phase 1 + +- Add scoped header to the existing `Cmd+J` palette +- Keep `Worktrees` as the default scope on open +- Preserve worktree-only behavior under the `Worktrees` scope +- Add browser-page search and activation +- Search live open `BrowserPage`s rather than browser workspace shells +- Add `All` merged ranking + +### Phase 2 (optional follow-up) + +- Evaluate whether users need additional scopes such as editor tabs or commands +- Only add a new scope if it has a clear, high-signal search model + +## 10. Open Questions + +- Whether a later iteration should remember a last-used non-default scope without changing the default-open `Worktrees` contract +- Whether browser-tab results should expose close actions from the palette in a later pass +- Whether `All` should group results visually by type or keep one flat ranked list diff --git a/src/renderer/src/components/WorktreeJumpPalette.tsx b/src/renderer/src/components/WorktreeJumpPalette.tsx index 0bc079cb..fad94560 100644 --- a/src/renderer/src/components/WorktreeJumpPalette.tsx +++ b/src/renderer/src/components/WorktreeJumpPalette.tsx @@ -1,6 +1,7 @@ /* oxlint-disable max-lines */ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { toast } from 'sonner' +import { Globe, Plus } from 'lucide-react' import { useAppStore } from '@/store' import { CommandDialog, @@ -9,7 +10,6 @@ import { CommandEmpty, CommandItem } from '@/components/ui/command' -import { Plus } from 'lucide-react' import { branchName } from '@/lib/git-utils' import { sortWorktreesRecent } from '@/components/sidebar/smart-sort' import StatusIndicator from '@/components/sidebar/StatusIndicator' @@ -17,11 +17,48 @@ import { cn } from '@/lib/utils' import { getWorktreeStatus, getWorktreeStatusLabel } from '@/lib/worktree-status' import { activateAndRevealWorktree } from '@/lib/worktree-activation' import { findWorktreeById } from '@/store/slices/worktree-helpers' -import { searchWorktrees, type MatchRange } from '@/lib/worktree-palette-search' -import type { Worktree } from '../../../shared/types' +import { + searchWorktrees, + type MatchRange, + type PaletteSearchResult +} from '@/lib/worktree-palette-search' +import { + isBlankBrowserUrl, + searchBrowserPages, + type BrowserPaletteSearchResult, + type SearchableBrowserPage +} from '@/lib/browser-palette-search' +import { + ORCA_BROWSER_FOCUS_REQUEST_EVENT, + queueBrowserFocusRequest +} from '@/components/browser-pane/browser-focus' +import type { BrowserPage, BrowserWorkspace, Worktree } from '../../../shared/types' import { isGitRepoKind } from '../../../shared/repo-kind' -// ─── Highlight helper ─────────────────────────────────────────────── +type PaletteScope = 'worktrees' | 'browser-tabs' + +type WorktreePaletteItem = { + id: string + type: 'worktree' + match: PaletteSearchResult + worktree: Worktree +} + +type BrowserPaletteItem = { + id: string + type: 'browser-page' + result: BrowserPaletteSearchResult +} + +type PaletteItem = WorktreePaletteItem | BrowserPaletteItem + +type BrowserSelection = { + worktree: Worktree + workspace: BrowserWorkspace + page: BrowserPage +} + +const SCOPE_ORDER: PaletteScope[] = ['worktrees', 'browser-tabs'] function HighlightedText({ text, @@ -62,7 +99,34 @@ function FooterKey({ children }: { children: React.ReactNode }): React.JSX.Eleme ) } -// ─── Component ────────────────────────────────────────────────────── +function nextScope(scope: PaletteScope, direction: 1 | -1): PaletteScope { + const index = SCOPE_ORDER.indexOf(scope) + const nextIndex = (index + direction + SCOPE_ORDER.length) % SCOPE_ORDER.length + return SCOPE_ORDER[nextIndex] +} + +function findBrowserSelection( + pageId: string, + workspaceId: string, + worktreeId: string +): BrowserSelection | null { + const state = useAppStore.getState() + const page = (state.browserPagesByWorkspace[workspaceId] ?? []).find((p) => p.id === pageId) + if (!page) { + return null + } + const workspace = (state.browserTabsByWorktree[worktreeId] ?? []).find( + (w) => w.id === workspaceId + ) + if (!workspace) { + return null + } + const worktree = findWorktreeById(state.worktreesByRepo, worktreeId) + if (!worktree) { + return null + } + return { page, workspace, worktree } +} export default function WorktreeJumpPalette(): React.JSX.Element | null { const visible = useAppStore((s) => s.activeModal === 'worktree-palette') @@ -74,22 +138,25 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null { const prCache = useAppStore((s) => s.prCache) const issueCache = useAppStore((s) => s.issueCache) const activeWorktreeId = useAppStore((s) => s.activeWorktreeId) + const activeTabType = useAppStore((s) => s.activeTabType) + const activeBrowserTabId = useAppStore((s) => s.activeBrowserTabId) const browserTabsByWorktree = useAppStore((s) => s.browserTabsByWorktree) + const browserPagesByWorkspace = useAppStore((s) => s.browserPagesByWorkspace) const [query, setQuery] = useState('') const [debouncedQuery, setDebouncedQuery] = useState('') - const [selectedWorktreeId, setSelectedWorktreeId] = useState('') + const [scope, setScope] = useState('worktrees') + const [selectedItemId, setSelectedItemId] = useState('') const previousWorktreeIdRef = useRef(null) + const previousActiveTabTypeRef = useRef<'browser' | 'editor' | 'terminal'>('terminal') + const previousBrowserPageIdRef = useRef(null) + const previousBrowserFocusTargetRef = useRef<'webview' | 'address-bar'>('webview') const wasVisibleRef = useRef(false) const skipRestoreFocusRef = useRef(false) const prevQueryRef = useRef('') + const prevScopeRef = useRef('worktrees') const listRef = useRef(null) - // Why: debounce the search query so the result list doesn't reshuffle on - // every keystroke while the user is still typing. The input stays responsive - // (controlled by `query`), but the heavier search + re-render is gated by - // `debouncedQuery`. 150ms is fast enough to feel instant on a pause, slow - // enough to skip intermediate keystrokes. useEffect(() => { const id = setTimeout(() => setDebouncedQuery(query), 150) return () => clearTimeout(id) @@ -98,7 +165,6 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null { const repoMap = useMemo(() => new Map(repos.map((r) => [r.id, r])), [repos]) const canCreateWorktree = useMemo(() => repos.some((repo) => isGitRepoKind(repo)), [repos]) - // All non-archived worktrees sorted by recent signals const sortedWorktrees = useMemo(() => { const all: Worktree[] = Object.values(worktreesByRepo) .flat() @@ -106,89 +172,193 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null { return sortWorktreesRecent(all, tabsByWorktree, repoMap, prCache) }, [worktreesByRepo, tabsByWorktree, repoMap, prCache]) - // Search results - const matches = useMemo( + const browserSortedWorktrees = useMemo(() => { + const all: Worktree[] = Object.values(worktreesByRepo).flat() + // Why: browser-tab search is explicitly cross-worktree, so it must keep + // indexing live browser pages even when their owning worktree is archived. + return sortWorktreesRecent(all, tabsByWorktree, repoMap, prCache) + }, [worktreesByRepo, tabsByWorktree, repoMap, prCache]) + + // Why: browser rows need worktree lookups for repo badge colors, and browser + // search intentionally includes archived worktrees. This map must cover all + // worktrees, not just the non-archived sortedWorktrees used for the Worktrees scope. + const worktreeMap = useMemo(() => { + const map = new Map() + for (const worktree of browserSortedWorktrees) { + map.set(worktree.id, worktree) + } + return map + }, [browserSortedWorktrees]) + + const worktreeOrder = useMemo( + () => new Map(browserSortedWorktrees.map((worktree, index) => [worktree.id, index])), + [browserSortedWorktrees] + ) + + const worktreeMatches = useMemo( () => searchWorktrees(sortedWorktrees, debouncedQuery.trim(), repoMap, prCache, issueCache), [sortedWorktrees, debouncedQuery, repoMap, prCache, issueCache] ) - const createWorktreeName = debouncedQuery.trim() - // Why: only surface the create-worktree action when the query yields no matches, - // so it doesn't clutter the list when existing worktrees already satisfy the search. - const showCreateAction = - canCreateWorktree && createWorktreeName.length > 0 && matches.length === 0 - // Build a map of worktreeId -> Worktree for quick lookup - const worktreeMap = useMemo(() => { - const map = new Map() - for (const w of sortedWorktrees) { - map.set(w.id, w) + const browserPageEntries = useMemo(() => { + const entries: SearchableBrowserPage[] = [] + for (const worktree of browserSortedWorktrees) { + const repoName = repoMap.get(worktree.repoId)?.displayName ?? '' + const worktreeSortIndex = worktreeOrder.get(worktree.id) ?? Number.MAX_SAFE_INTEGER + const workspaces = browserTabsByWorktree[worktree.id] ?? [] + for (const workspace of workspaces) { + const pages = browserPagesByWorkspace[workspace.id] ?? [] + for (const page of pages) { + entries.push({ + page, + workspace, + worktree, + repoName, + worktreeSortIndex, + isCurrentPage: + workspace.id === activeBrowserTabId && workspace.activePageId === page.id, + isCurrentWorktree: activeWorktreeId === worktree.id + }) + } + } } - return map - }, [sortedWorktrees]) + return entries + }, [ + activeBrowserTabId, + activeWorktreeId, + browserPagesByWorkspace, + browserTabsByWorktree, + browserSortedWorktrees, + repoMap, + worktreeOrder + ]) + + const browserMatches = useMemo( + () => searchBrowserPages(browserPageEntries, debouncedQuery.trim()), + [browserPageEntries, debouncedQuery] + ) + + const worktreeItems = useMemo( + () => + worktreeMatches + .map((match) => { + const worktree = worktreeMap.get(match.worktreeId) + if (!worktree) { + return null + } + return { + id: `worktree:${worktree.id}`, + type: 'worktree' as const, + match, + worktree + } + }) + .filter((item): item is WorktreePaletteItem => item !== null), + [worktreeMap, worktreeMatches] + ) + + const browserItems = useMemo( + () => + browserMatches.map((result) => ({ + id: `browser-page:${result.pageId}`, + type: 'browser-page' as const, + result + })), + [browserMatches] + ) + + const visibleItems = useMemo(() => { + if (scope === 'browser-tabs') { + return browserItems + } + return worktreeItems + }, [browserItems, scope, worktreeItems]) + + const createWorktreeName = debouncedQuery.trim() + const showCreateAction = + scope === 'worktrees' && + canCreateWorktree && + createWorktreeName.length > 0 && + worktreeItems.length === 0 - // Loading state: repos exist but worktreesByRepo is still empty const isLoading = repos.length > 0 && Object.keys(worktreesByRepo).length === 0 - const hasWorktrees = sortedWorktrees.length > 0 + const hasAnyWorktrees = sortedWorktrees.length > 0 + const hasAnyBrowserPages = browserPageEntries.length > 0 + const hasQuery = debouncedQuery.trim().length > 0 useEffect(() => { if (visible && !wasVisibleRef.current) { - // Why: this dialog opens from external store state, so session reset must - // follow the controlled `visible` flag instead of relying on Radix open callbacks. + // Why: the palette now supports multiple scopes, but Cmd+J still has a + // worktree-first contract. Reset to that scope on every open so browser + // exploration remains opt-in rather than sticky across sessions. previousWorktreeIdRef.current = activeWorktreeId + previousActiveTabTypeRef.current = activeTabType + previousBrowserPageIdRef.current = + activeWorktreeId && activeTabType === 'browser' + ? ((browserTabsByWorktree[activeWorktreeId] ?? []).find( + (workspace) => workspace.id === activeBrowserTabId + )?.activePageId ?? null) + : null + // Why: capture which browser surface had focus *before* Radix Dialog + // steals it. By onOpenAutoFocus time, document.activeElement has already + // moved to the dialog content, so address-bar detection must happen here. + previousBrowserFocusTargetRef.current = + activeTabType === 'browser' && + document.activeElement instanceof HTMLElement && + document.activeElement.closest('[data-orca-browser-address-bar="true"]') + ? 'address-bar' + : 'webview' skipRestoreFocusRef.current = false + prevQueryRef.current = '' + prevScopeRef.current = 'worktrees' + setScope('worktrees') setQuery('') setDebouncedQuery('') - setSelectedWorktreeId('') + setSelectedItemId('') } wasVisibleRef.current = visible - }, [visible, activeWorktreeId]) + }, [activeBrowserTabId, activeTabType, activeWorktreeId, browserTabsByWorktree, visible]) useEffect(() => { if (!visible) { return } const queryChanged = debouncedQuery !== prevQueryRef.current + const scopeChanged = scope !== prevScopeRef.current prevQueryRef.current = debouncedQuery + prevScopeRef.current = scope const firstSelectableId = showCreateAction ? '__create_worktree__' : null - // Why: when the search query changes, the results reorder to reflect new - // relevance ranking. Always snap the selection to the top result so the - // user sees the best match highlighted, and scroll the list to the top so - // the selected item is visible without the user having to scroll up. - if (queryChanged) { - if (matches.length > 0) { - setSelectedWorktreeId(matches[0].worktreeId) + if (queryChanged || scopeChanged) { + if (visibleItems.length > 0) { + setSelectedItemId(visibleItems[0].id) } else { - setSelectedWorktreeId(firstSelectableId ?? '') + setSelectedItemId(firstSelectableId ?? '') } listRef.current?.scrollTo(0, 0) return } - if (matches.length === 0) { - setSelectedWorktreeId(firstSelectableId ?? '') + if (visibleItems.length === 0) { + setSelectedItemId(firstSelectableId ?? '') return } - if (selectedWorktreeId === '__create_worktree__' && showCreateAction) { - return - } - if ( - !matches.some((match) => match.worktreeId === selectedWorktreeId) && - selectedWorktreeId !== firstSelectableId - ) { - // Why: the palette keeps live recent ordering while open. Control cmdk's - // selected value by worktree ID so background re-sorts keep the same - // logical worktree selected instead of drifting to a new visual index. - setSelectedWorktreeId(firstSelectableId ?? matches[0].worktreeId) - } - }, [visible, matches, selectedWorktreeId, showCreateAction, debouncedQuery]) - const focusActiveSurface = useCallback(() => { - // Why: double rAF — first waits for React to commit state (palette closes), - // second waits for the target worktree surface layout to settle after Radix - // Dialog unmounts. Pragmatic v1 choice per design doc Section 3.5. + if (selectedItemId === '__create_worktree__' && showCreateAction) { + return + } + + if ( + !visibleItems.some((item) => item.id === selectedItemId) && + selectedItemId !== firstSelectableId + ) { + setSelectedItemId(firstSelectableId ?? visibleItems[0].id) + } + }, [debouncedQuery, scope, selectedItemId, showCreateAction, visible, visibleItems]) + + const focusFallbackSurface = useCallback(() => { requestAnimationFrame(() => { requestAnimationFrame(() => { const xterm = document.querySelector('.xterm-helper-textarea') as HTMLElement | null @@ -196,7 +366,6 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null { xterm.focus() return } - // Fallback: try Monaco editor const monaco = document.querySelector('.monaco-editor textarea') as HTMLElement | null if (monaco) { monaco.focus() @@ -205,6 +374,18 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null { }) }, []) + const requestBrowserFocus = useCallback( + (detail: { pageId: string; target: 'webview' | 'address-bar' }) => { + queueBrowserFocusRequest(detail) + window.dispatchEvent( + new CustomEvent(ORCA_BROWSER_FOCUS_REQUEST_EVENT, { + detail + }) + ) + }, + [] + ) + const handleOpenChange = useCallback( (open: boolean) => { if (open) { @@ -212,96 +393,204 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null { } closeModal() - if (previousWorktreeIdRef.current && !skipRestoreFocusRef.current) { - focusActiveSurface() + if (skipRestoreFocusRef.current) { + return + } + if (previousActiveTabTypeRef.current === 'browser' && previousBrowserPageIdRef.current) { + // Why: dismissing Cmd+J from a browser surface should return focus to + // that page, not fall through to the generic terminal/editor fallback. + requestBrowserFocus({ + pageId: previousBrowserPageIdRef.current, + target: previousBrowserFocusTargetRef.current + }) + return + } + if (previousWorktreeIdRef.current) { + focusFallbackSurface() } }, - [closeModal, focusActiveSurface] + [closeModal, focusFallbackSurface, requestBrowserFocus] ) - const handleSelect = useCallback( + const handleSelectWorktree = useCallback( (worktreeId: string) => { - const state = useAppStore.getState() - const wt = findWorktreeById(state.worktreesByRepo, worktreeId) - if (!wt) { + const worktree = findWorktreeById(useAppStore.getState().worktreesByRepo, worktreeId) + if (!worktree) { toast.error('Worktree no longer exists') return } activateAndRevealWorktree(worktreeId) + skipRestoreFocusRef.current = true closeModal() - setSelectedWorktreeId('') - focusActiveSurface() + setSelectedItemId('') + focusFallbackSurface() }, - [closeModal, focusActiveSurface] + [closeModal, focusFallbackSurface] + ) + + const handleSelectBrowserPage = useCallback( + (result: BrowserPaletteSearchResult) => { + const { pageId, workspaceId, worktreeId } = result + const selection = findBrowserSelection(pageId, workspaceId, worktreeId) + if (!selection) { + toast.error('Browser page no longer exists') + return + } + // Why: capture the workspace and page info before activateAndRevealWorktree + // mutates store state. Store cascades during worktree activation can remap + // browser workspace state, making a second findBrowserSelection unreliable. + const { worktree, workspace, page } = selection + const activated = activateAndRevealWorktree(worktree.id) + if (!activated) { + toast.error('Worktree no longer exists') + return + } + + const state = useAppStore.getState() + state.setActiveBrowserTab(workspace.id) + state.setActiveBrowserPage(workspace.id, pageId) + skipRestoreFocusRef.current = true + closeModal() + setSelectedItemId('') + requestBrowserFocus({ + pageId, + target: isBlankBrowserUrl(page.url) ? 'address-bar' : 'webview' + }) + }, + [closeModal, requestBrowserFocus] + ) + + const handleSelectItem = useCallback( + (item: PaletteItem) => { + if (item.type === 'worktree') { + handleSelectWorktree(item.worktree.id) + } else { + handleSelectBrowserPage(item.result) + } + }, + [handleSelectBrowserPage, handleSelectWorktree] ) const handleCreateWorktree = useCallback(() => { - // Why: when Cmd+J hands off to the create dialog, that new modal owns focus. - // Re-running the palette's terminal/editor focus restore races the dialog's - // autofocus and can pull keyboard input away from the name field. skipRestoreFocusRef.current = true closeModal() - // Why: we open create-worktree in a microtask so Radix Dialog fully unmounts - // before the next modal mounts, avoiding stacked-dialog focus conflicts. queueMicrotask(() => openModal('create-worktree', createWorktreeName ? { prefilledName: createWorktreeName } : {}) ) }, [closeModal, createWorktreeName, openModal]) const handleCloseAutoFocus = useCallback((e: Event) => { - // Why: prevent Radix from stealing focus to the trigger element. We manage - // focus ourselves via the double-rAF approach. e.preventDefault() }, []) - // Result count for screen readers - const worktreeResultCount = matches.length - const actionCount = showCreateAction ? 1 : 0 + const handleOpenAutoFocus = useCallback((_event: Event) => { + // No-op: address-bar detection is handled in the visible effect before + // Radix steals focus. This callback exists only to satisfy the prop API. + }, []) + + const handleInputKeyDown = useCallback((event: React.KeyboardEvent) => { + if (event.key !== 'Tab') { + return + } + // Why: the scope chips are part of the palette's search model, not the + // browser's focus ring. Cycling them with Tab keeps the input focused and + // avoids turning scope changes into a pointer-only affordance. + event.preventDefault() + setScope((current) => nextScope(current, event.shiftKey ? -1 : 1)) + }, []) + + const title = scope === 'browser-tabs' ? 'Open Browser Tab' : 'Open Worktree' + const description = + scope === 'browser-tabs' + ? 'Search open browser pages across all worktrees' + : 'Search across all worktrees by name, branch, comment, PR, or issue' + const placeholder = + scope === 'browser-tabs' ? 'Search open browser tabs...' : 'Jump to worktree...' + + const resultCount = visibleItems.length + const emptyState = (() => { + if (scope === 'browser-tabs') { + return hasAnyBrowserPages && hasQuery + ? { + title: 'No browser tabs match your search', + subtitle: 'Try a page title, URL, worktree name, or repo name.' + } + : { + title: 'No open browser tabs', + subtitle: 'Open a page in Orca and it will show up here.' + } + } + return hasAnyWorktrees && hasQuery + ? { + title: 'No worktrees match your search', + subtitle: 'Try a name, branch, repo, comment, PR, or issue.' + } + : { + title: 'No active worktrees', + subtitle: 'Create one to get started, then jump back here any time.' + } + })() return ( - +
+ {SCOPE_ORDER.map((candidate) => { + const active = candidate === scope + const label = candidate === 'worktrees' ? 'Worktrees' : 'Browser Tabs' + return ( + + ) + })} +
+ {isLoading ? ( - ) : !hasWorktrees && !showCreateAction ? ( + ) : visibleItems.length === 0 && !showCreateAction ? ( - - - ) : matches.length === 0 && !showCreateAction ? ( - - + ) : ( <> @@ -321,107 +610,183 @@ export default function WorktreeJumpPalette(): React.JSX.Element | null { )} - {matches.length === 0 && query.trim() && ( -
- -
- )} - {matches.map((match) => { - const w = worktreeMap.get(match.worktreeId) - if (!w) { - return null + {visibleItems.map((item) => { + if (item.type === 'worktree') { + const worktree = item.worktree + const repo = repoMap.get(worktree.repoId) + const repoName = repo?.displayName ?? '' + const branch = branchName(worktree.branch) + const status = getWorktreeStatus( + tabsByWorktree[worktree.id] ?? [], + browserTabsByWorktree[worktree.id] ?? [] + ) + const statusLabel = getWorktreeStatusLabel(status) + const isCurrentWorktree = activeWorktreeId === worktree.id + + return ( + handleSelectItem(item)} + data-current={isCurrentWorktree ? 'true' : undefined} + className={cn( + 'group mx-0.5 flex cursor-pointer items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 text-left outline-none transition-[background-color,border-color,box-shadow]', + 'data-[selected=true]:border-border data-[selected=true]:bg-neutral-100 data-[selected=true]:text-foreground dark:data-[selected=true]:bg-neutral-800' + )} + > +
+
+
+
+
+
+ + {item.match.displayNameRange ? ( + + ) : ( + worktree.displayName + )} + + {isCurrentWorktree && ( + + Current + + )} + {worktree.isMainWorktree && ( + + primary + + )} + · + + {item.match.branchRange ? ( + + ) : ( + branch + )} + +
+ {item.match.supportingText && ( +
+ + {item.match.supportingText.label} + + + + +
+ )} +
+
+ {repoName && ( + + + )} +
+
+
+ + ) } - const repo = repoMap.get(w.repoId) - const repoName = repo?.displayName ?? '' - const branch = branchName(w.branch) - const status = getWorktreeStatus( - tabsByWorktree[w.id] ?? [], - browserTabsByWorktree[w.id] ?? [] - ) - const statusLabel = getWorktreeStatusLabel(status) - const isCurrentWorktree = activeWorktreeId === w.id + + const result = item.result + const browserWorktree = worktreeMap.get(result.worktreeId) + const browserRepo = browserWorktree ? repoMap.get(browserWorktree.repoId) : undefined + const browserRepoName = browserRepo?.displayName ?? result.repoName return ( handleSelect(w.id)} - data-current={isCurrentWorktree ? 'true' : undefined} + key={item.id} + value={item.id} + onSelect={() => handleSelectItem(item)} className={cn( 'group mx-0.5 flex cursor-pointer items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 text-left outline-none transition-[background-color,border-color,box-shadow]', 'data-[selected=true]:border-border data-[selected=true]:bg-neutral-100 data-[selected=true]:text-foreground dark:data-[selected=true]:bg-neutral-800' )} > -
-