@young1lin/dsh-ui-gitworkbench 0.1.2 → 0.1.4

package/src/client/GitWorkbenchPanel.tsx

@@ -57,6 +57,15 @@ import {
 } from './themes.ts'
 import { attachWordRanges, gutterSides, overlayRanges, parseRows, type Row, type RowWithRanges } from './diff-model.ts'
 import { layoutGraph, type GraphRow } from './commit-graph.ts'
+import { formatCommitDate } from './commit-filter.ts'
+import { chipsFromFilter, emptyQueryFilter, parseLogQuery, removeChip, serializeLogQuery } from './log-filter-query.ts'
+import { buildDirTree, searchPaths, type DirEntry } from './dir-tree.ts'
+import { filterFiles } from './file-filter.ts'
+import { addPath, buildIndex, checkedState, isCovered, removePath } from './path-select.ts'
+import { inCalRange, localTodayIso, monthGrid, weekdayLabels } from './calendar.ts'
+import { NO_PATHS, preferredFile } from './active-file.ts'
+import type { LogFilter } from '../log-filter.ts'
+import type { AuthorEntry } from '../shortlog.ts'
 import {
   fileCheckState, nextAction, nextBatch, pathsFor, rollUp, settledTicks, withPendingTicks,
   type CheckState, type Tick, type TickAction,
@@ -91,6 +100,12 @@ export interface GitCommit {
   readonly when: string
   /** Everything after the subject. Empty string when the commit has none. */
   readonly body: string
+  /** Author name (`%an`). Optional only because a pre-0.1.4 host half sends none. */
+  readonly authorName?: string
+  /** Committer name (`%cn`); equals the author except on rebases and patches a maintainer applied. */
+  readonly committerName?: string
+  /** Committer date, strict ISO 8601 (`%cI`) — the exact moment `when` summarizes. */
+  readonly dateIso?: string
   /** Abbreviated parent hashes, first parent first — the graph's edges. */
   readonly parents?: readonly string[]
   /** Branch and tag names pointing here, already stripped of git's decoration syntax. */
@@ -184,7 +199,7 @@ export interface GitOpResult {
 }
 
 /** The host endpoints under `gitWorkbench/` that change something. */
-export type GitOpName = 'stage' | 'unstage' | 'commit' | 'fetch' | 'pull' | 'push'
+export type GitOpName = 'stage' | 'unstage' | 'commit' | 'fetch' | 'pull' | 'push' | 'discardFile'
 
 /** Extra arguments an operation needs beyond the worktree path. */
 export interface GitOpPayload {
@@ -192,6 +207,22 @@ export interface GitOpPayload {
   readonly message?: string
   readonly amend?: boolean
   readonly mode?: 'ff-only' | 'rebase' | 'merge'
+  /** `discardFile` only, and deliberately singular: the one irreversible thing
+   *  the drawer does takes one file per call, so a mistaken click costs one
+   *  file. */
+  readonly path?: string
+  /** `discardFile` only: the effect the confirmation stated. The host refuses
+   *  if the file changed underneath the dialog and now means something else. */
+  readonly expectedEffect?: string
+}
+
+/** What the host says rolling one file back would do. */
+export interface DiscardPreview {
+  /** Absent when git reports nothing to roll back for that path. */
+  readonly effect?: 'restore' | 'delete' | 'recover' | 'unrename'
+  readonly irreversible?: boolean
+  readonly previousPath?: string
+  readonly error?: string
 }
 
 /** Translate a key of this plugin's namespace, with optional `{name}` params. */
@@ -205,12 +236,20 @@ type Props = PropsRuntime<'conversation.session.header.actions'> & {
   /** Binding only, no git — the probe the shut chip can afford to poll. */
   readonly fetchSessionBinding: (sessionId: string, signal: AbortSignal) => Promise<{ worktreePath: string | null; name: string | null } | null>
   readonly fetchCommitStats: (worktreePath: string | undefined, hash: string, signal: AbortSignal) => Promise<WorkbenchStats | null>
-  readonly fetchCommits: (worktreePath: string | undefined, ref: string, skip: number, limit: number, signal: AbortSignal) => Promise<{ commits: GitCommit[]; hasMore: boolean } | null>
+  readonly fetchCommits: (worktreePath: string | undefined, ref: string, skip: number, limit: number, filter: LogFilter, signal: AbortSignal) => Promise<{ commits: GitCommit[]; hasMore: boolean; error?: string } | null>
+  /** Author roster for the filter popup's user picker, busiest first — for the
+   *  ref the history walks, so every listed author actually has commits there. */
+  readonly fetchAuthors: (worktreePath: string | undefined, ref: string, signal: AbortSignal) => Promise<{ authors: readonly AuthorEntry[]; truncated: boolean } | null>
+  /** Every path on HEAD — the path picker's raw material. */
+  readonly fetchRepoTree: (worktreePath: string | undefined, signal: AbortSignal) => Promise<{ paths: string[]; truncated: boolean } | null>
   readonly fetchCompare: (worktreePath: string | undefined, base: string, head: string, signal: AbortSignal) => Promise<WorkbenchStats | null>
   readonly fetchStyle: (worktreePath: string | undefined, signal: AbortSignal) => Promise<StyleSettings | null>
   readonly saveStyle: (worktreePath: string | undefined, scope: StyleScope, entry: StyleEntry, signal: AbortSignal) => Promise<{ ok: boolean; error?: string }>
   readonly fetchSync: (worktreePath: string | undefined, signal: AbortSignal) => Promise<SyncStatus | null>
   readonly runGitOp: (op: GitOpName, worktreePath: string | undefined, payload: GitOpPayload, signal: AbortSignal) => Promise<GitOpResult>
+  /** What rolling this file back WOULD do, read fresh so the confirmation
+   *  states the real consequence rather than one derived from a polled row. */
+  readonly fetchDiscardPlan: (worktreePath: string | undefined, path: string, signal: AbortSignal) => Promise<DiscardPreview | null>
 }
 
 /**
@@ -415,7 +454,7 @@ const STATUS_BADGE: Record<GitFileStatus, string> = {
   renamed: css.stRenamed, deleted: css.stDeleted,
 }
 
-export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetchFileDiff, fetchWorktreeStatus, fetchSessionBinding, fetchCommitStats, fetchCommits, fetchCompare, fetchStyle, saveStyle, fetchSync, runGitOp }: Props) {
+export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetchFileDiff, fetchWorktreeStatus, fetchSessionBinding, fetchCommitStats, fetchCommits, fetchAuthors, fetchRepoTree, fetchCompare, fetchStyle, saveStyle, fetchSync, runGitOp, fetchDiscardPlan }: Props) {
   const worktreePath = useSessions((state: { byId?: Record<string, { cwd?: string } | undefined> }) =>
     state?.byId?.[sessionId]?.cwd) as string | undefined
   /** Whether the session's agent has a turn in flight — the store mirrors it
@@ -463,6 +502,25 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
   /** First page of the history list in flight — the pane says "loading", not
    *  "no commit history", which is a claim about the repository. */
   const [historyLoading, setHistoryLoading] = useState(false)
+  /** Why the history list is empty when it is git's word, not the log's: a
+   *  bad filter pattern or date, with the stderr tail to say so. */
+  const [historyError, setHistoryError] = useState<string | null>(null)
+  /** The history filter box's raw text. Parsed into the LogFilter the host
+   *  compiles into git log arguments — the funnel popup writes here too: one
+   *  grammar, one filter, however the criterion arrived. */
+  const [historyQuery, setHistoryQuery] = useState('')
+  const historyFilterKey = serializeLogQuery(parseLogQuery(historyQuery))
+  /** Debounced by KEY, not by text: "liam " and "liam" are the same query and
+   *  must not refetch. 300ms is a keystroke's pause, not a page's wait. */
+  const [liveFilterKey, setLiveFilterKey] = useState('')
+  useEffect(() => {
+    const id = window.setTimeout(() => setLiveFilterKey(historyFilterKey), 300)
+    return () => window.clearTimeout(id)
+  }, [historyFilterKey])
+  const liveFilter = useMemo(
+    () => (liveFilterKey.length === 0 ? emptyQueryFilter() : parseLogQuery(liveFilterKey)),
+    [liveFilterKey],
+  )
   const [loadingMore, setLoadingMore] = useState(false)
   /** In-flight marker for paging, read synchronously — see {@link loadMoreCommits}. */
   const loadingRef = useRef(false)
@@ -823,17 +881,19 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
     setCommitHash(null)
     setCommitStats(null)
     setHistoryLoading(true)
-    fetchCommits(statsPath, effectiveHistoryRef, 0, HISTORY_PAGE, ctrl.signal)
+    setHistoryError(null)
+    fetchCommits(statsPath, effectiveHistoryRef, 0, HISTORY_PAGE, liveFilter, ctrl.signal)
       .then(page => {
         if (!alive) return
         setHistoryLoading(false)
         if (page === null) return
         setHistoryCommits(page.commits)
         setHistoryHasMore(page.hasMore)
+        setHistoryError(page.error ?? null)
       })
       .catch(() => { if (alive) setHistoryLoading(false) })
     return () => { alive = false; ctrl.abort() }
-  }, [open, statsPath, effectiveHistoryRef, fetchCommits, gen])
+  }, [open, statsPath, effectiveHistoryRef, fetchCommits, gen, liveFilter])
 
   // Never leave the history pane empty: with a list loaded and nothing picked,
   // the newest commit is the selection.
@@ -1152,7 +1212,7 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
     loadingRef.current = true
     setLoadingMore(true)
     const ctrl = new AbortController()
-    fetchCommits(statsPath, effectiveHistoryRef, historyCommits.length, HISTORY_PAGE, ctrl.signal)
+    fetchCommits(statsPath, effectiveHistoryRef, historyCommits.length, HISTORY_PAGE, liveFilter, ctrl.signal)
       .then(page => {
         if (page === null) return
         setHistoryCommits(prev => [...prev, ...page.commits])
@@ -1197,6 +1257,11 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
           onLoadMoreCommits={loadMoreCommits}
           historyRef={effectiveHistoryRef}
           onHistoryRef={setHistoryRef}
+          historyQuery={historyQuery}
+          onHistoryQuery={setHistoryQuery}
+          historyError={historyError}
+          fetchAuthors={fetchAuthors}
+          fetchRepoTree={fetchRepoTree}
           branches={branches}
           worktreeBranches={worktreeBranches}
           branchesTruncated={branchesTruncated}
@@ -1238,6 +1303,7 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
           busy={busy}
           opResult={opResult}
           runOp={runOp}
+          fetchDiscardPlan={fetchDiscardPlan}
           pendingTicks={pendingTicks}
           onTick={queueTicks}
           fetchFileDiff={fetchDiffForView}
@@ -1353,6 +1419,16 @@ interface DrawerProps {
   /** Ref the history list walks. */
   historyRef: string
   onHistoryRef: (ref: string) => void
+  /** The history filter box's text — the single source of the LogFilter both
+   *  the box's grammar and the funnel popup write into. */
+  historyQuery: string
+  onHistoryQuery: (query: string) => void
+  /** git's complaint when the log failed (bad pattern/date), verbatim. */
+  historyError: string | null
+  /** Author roster for the funnel popup's user picker. */
+  fetchAuthors: (worktreePath: string | undefined, ref: string, signal: AbortSignal) => Promise<{ authors: readonly AuthorEntry[]; truncated: boolean } | null>
+  /** Every path on HEAD — the path picker's raw material. */
+  fetchRepoTree: (worktreePath: string | undefined, signal: AbortSignal) => Promise<{ paths: string[]; truncated: boolean } | null>
   /** Every local branch — the ref pickers' options, worktree or not. */
   branches: readonly string[]
   /** Branches that have a worktree, grouped to the top of every picker. */
@@ -1419,6 +1495,7 @@ interface DrawerProps {
   /** The last write operation's outcome, or null once a new one starts. */
   opResult: { op: GitOpName; result: GitOpResult } | null
   runOp: (op: GitOpName, payload?: GitOpPayload) => Promise<GitOpResult>
+  fetchDiscardPlan: (worktreePath: string | undefined, path: string, signal: AbortSignal) => Promise<DiscardPreview | null>
   /** Ticks awaiting their git call, keyed by path — overlaid over the file
    *  list so the click is on screen before git confirms it. */
   pendingTicks: ReadonlyMap<string, TickAction>
@@ -1432,7 +1509,7 @@ interface DrawerProps {
   onCollapsedChange: (next: Set<string>) => void
 }
 
-function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectCommit, hasMoreCommits, loadingMore, onLoadMoreCommits, historyRef, onHistoryRef, branches, worktreeBranches, branchesTruncated, baseRef, headRef, onBaseRef, onHeadRef, comparable, t, binding, worktrees, sessionPath, statsPath, onSwitchSource, segments, selected, onSelect, maximized, onToggleMaximized, theme, mode, family, onMode, onFamily, style, background, onStyle, width, onWidth, panes, onPane, onClose, onRefresh, commitDraft, onCommitDraft, commitAmend, onCommitAmend, sync, treeLoading, historyLoading, busy, opResult, runOp, pendingTicks, onTick, fetchFileDiff, viewKey, gen, collapsed, onCollapsedChange }: DrawerProps): ReactNode {
+function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectCommit, hasMoreCommits, loadingMore, onLoadMoreCommits, historyRef, onHistoryRef, historyQuery, onHistoryQuery, historyError, fetchAuthors, fetchRepoTree, branches, worktreeBranches, branchesTruncated, baseRef, headRef, onBaseRef, onHeadRef, comparable, t, binding, worktrees, sessionPath, statsPath, onSwitchSource, segments, selected, onSelect, maximized, onToggleMaximized, theme, mode, family, onMode, onFamily, style, background, onStyle, width, onWidth, panes, onPane, onClose, onRefresh, commitDraft, onCommitDraft, commitAmend, onCommitAmend, sync, treeLoading, historyLoading, busy, opResult, runOp, fetchDiscardPlan, pendingTicks, onTick, fetchFileDiff, viewKey, gen, collapsed, onCollapsedChange }: DrawerProps): ReactNode {
   // Empty stand-in while a commit's change set loads, so every hook below keeps a
   // stable shape and the panes simply render nothing.
   const body = shown ?? EMPTY_STATS
@@ -1445,12 +1522,22 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
    *  while a refresh lands over it. Derived once and handed to both the header
    *  and the tree: spelling it twice is what let the header get it wrong. */
   const pending = showsPending(treeLoading, body.files.length)
+  /** The history filter's paths, which decide what a commit OPENS on. Only the
+   *  history tab has one: the changes and compare trees are not filtered, and
+   *  steering their default selection by a query the reader cannot see from
+   *  there would be a spooky action. */
+  const activeFilterPaths = useMemo(
+    () => tab === 'history' ? parseLogQuery(historyQuery).paths : NO_PATHS,
+    [tab, historyQuery],
+  )
   // A selection the current source no longer lists (e.g. after a source or tab
-  // switch) falls back to the first file — never a dangling highlight.
-  const active = selected !== null && body.files.some(file => file.path === selected)
-    ? selected
-    : body.files[0]?.path ?? null
+  // switch) falls back to the filtered file, else the first — never a dangling
+  // highlight. See `active-file.ts` for the order and the reasoning.
+  const active = preferredFile(body.files, activeFilterPaths, selected)
   const activeFile = body.files.find(file => file.path === active) ?? null
+  /** The file whose roll-back is being asked about; `plan` is null while the
+   *  host is still being asked what it would do. */
+  const [discardPending, setDiscardPending] = useState<{ file: GitFile; plan: DiscardPreview | null } | null>(null)
   const [fetched, setFetched] = useState<Map<string, string>>(new Map())
   const [loading, setLoading] = useState(false)
   const bundled = active === null ? '' : segments.get(active) ?? ''
@@ -1481,6 +1568,50 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
 
   const selectAndReveal = (path: string): void => onSelect(path)
 
+  /**
+   * Roll-back, in two steps that are deliberately not one.
+   *
+   * The click asks the host what rolling this file back would DO, and only the
+   * answer opens the dialog. Deriving the wording from the clicked row instead
+   * would mean describing a file as the last poll saw it: the difference
+   * between "goes back to its committed content" and "leaves the disk and
+   * cannot come back" is the entire subject of the question being asked, and it
+   * is exactly the thing a stale row gets wrong.
+   *
+   * `recover` — a deleted file coming back — shows no dialog at all. It loses
+   * nothing, and a confirmation in front of a pure gain is how people learn to
+   * dismiss confirmations without reading them.
+   */
+  const askDiscard = (file: GitFile): void => {
+    setDiscardPending({ file, plan: null })
+    void (async () => {
+      const preview = await fetchDiscardPlan(statsPath, file.path, new AbortController().signal)
+      // Nothing to roll back means the row was stale — the tree lists only
+      // changed files, so a file with no change is one git has since seen
+      // settled. Refreshing is the honest answer: the row goes away, which is
+      // both the feedback and the fix. A banner saying "nothing happened"
+      // would leave the row that caused it sitting right there.
+      if (preview === null || preview.effect === undefined) {
+        setDiscardPending(null)
+        onRefresh()
+        return
+      }
+      if (preview.irreversible !== true) {
+        setDiscardPending(null)
+        void runOp('discardFile', { path: file.path, expectedEffect: preview.effect })
+        return
+      }
+      setDiscardPending({ file, plan: preview })
+    })()
+  }
+
+  const confirmDiscard = (): void => {
+    const pending = discardPending
+    if (pending === null || pending.plan === null) return
+    setDiscardPending(null)
+    void runOp('discardFile', { path: pending.file.path, expectedEffect: pending.plan.effect })
+  }
+
   const drawerRef = useRef<HTMLDivElement>(null)
   const commitsRef = useRef<HTMLDivElement>(null)
   const treeRef = useRef<HTMLDivElement>(null)
@@ -1684,6 +1815,7 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
               t={t} label={t('historyRefLabel')} value={historyRef}
               branches={branches} worktreeBranches={worktreeBranches} truncated={branchesTruncated}
               onPick={onHistoryRef}
+              allLabel={t('allBranches')}
             />
           </div>
         ) : null}
@@ -1713,6 +1845,13 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
                 hasMore={hasMoreCommits}
                 loadingMore={loadingMore}
                 onLoadMore={onLoadMoreCommits}
+                query={historyQuery}
+                onQueryChange={onHistoryQuery}
+                error={historyError}
+                statsPath={statsPath}
+                refName={historyRef}
+                fetchAuthors={fetchAuthors}
+                fetchRepoTree={fetchRepoTree}
               />
               <PaneDivider label={t('resizeCommits')} onDrag={paneDrag('commits', commitsRef)} />
             </>
@@ -1720,6 +1859,7 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
           <div ref={treeRef} className={css.treeCol} style={paneStyle(panes.tree)} data-gs-part="tree">
             <FileTree
               t={t}
+              scopeKey={viewKey}
               loading={pending}
               lead={tab === 'changes' ? t('workingTree') : undefined}
               files={tickedFiles}
@@ -1744,6 +1884,10 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
                 const paths = pathsFor(checked, action)
                 if (paths.length > 0) onTick(action, paths)
               } : undefined}
+              // Roll back, likewise working-tree only. The click does not act:
+              // it asks the host what the act WOULD be, and that answer is what
+              // the dialog states. See `askDiscard`.
+              onDiscard={tab === 'changes' ? askDiscard : undefined}
               footer={tab === 'changes'
                 ? (
                   <CommitBox
@@ -1776,6 +1920,75 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
               )}
           </div>
         </div>
+        {discardPending?.plan != null ? (
+          <DiscardConfirm
+            t={t}
+            file={discardPending.file}
+            plan={discardPending.plan}
+            onCancel={() => setDiscardPending(null)}
+            onConfirm={confirmDiscard}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * The one dialog in this drawer, because this is the one act it cannot undo.
+ *
+ * It never asks a generic "are you sure": the body names the file and states
+ * which of the three consequences is about to happen, in the host's own reading
+ * of that file taken moments ago. Cancel holds the initial focus and Escape
+ * closes, because the default answer to an irreversible question is no.
+ *
+ * There is deliberately no "don't ask again". This is the only path in the
+ * drawer with nothing behind it, and a checkbox whose whole function is to
+ * switch off the last guard is a feature that eventually gets clicked.
+ */
+function DiscardConfirm({ t, file, plan, onCancel, onConfirm }: {
+  t: Translate
+  file: GitFile
+  plan: DiscardPreview
+  onCancel: () => void
+  onConfirm: () => void
+}): ReactNode {
+  const cancelRef = useRef<HTMLButtonElement>(null)
+  useEffect(() => { cancelRef.current?.focus() }, [])
+  useEffect(() => {
+    // Capture phase: the drawer's own Escape handler closes the whole drawer,
+    // and answering a question about deleting a file should not also dismiss
+    // the thing that asked it.
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key !== 'Escape') return
+      event.stopPropagation()
+      onCancel()
+    }
+    window.addEventListener('keydown', onKey, true)
+    return () => { window.removeEventListener('keydown', onKey, true) }
+  }, [onCancel])
+
+  const body = plan.effect === 'delete'
+    ? t('discardBodyDelete', { path: file.path })
+    : plan.effect === 'unrename'
+      ? t('discardBodyUnrename', { path: file.path, previousPath: plan.previousPath ?? '' })
+      : t('discardBodyRestore', { path: file.path, added: file.addedLines, deleted: file.deletedLines })
+
+  return (
+    <div className={css.confirmScrim} onClick={onCancel}>
+      <div
+        className={css.confirmBox}
+        role="alertdialog"
+        aria-modal="true"
+        aria-label={t('discardTitle')}
+        onClick={event => event.stopPropagation()}
+      >
+        <div className={css.confirmTitle}>{t('discardTitle')}</div>
+        <div className={css.confirmBody}>{body}</div>
+        <div className={css.confirmActions}>
+          <button ref={cancelRef} type="button" className={css.btn} onClick={onCancel}>{t('discardCancel')}</button>
+          <button type="button" className={`${css.btn} ${css.btnDanger}`} onClick={onConfirm}>{t('discardConfirm')}</button>
+        </div>
       </div>
     </div>
   )
@@ -2260,7 +2473,13 @@ function useDismissable(open: boolean, setOpen: Dispatch<SetStateAction<boolean>
  * checked-out branch is the likeliest thing to want. Enter takes the first
  * match, so a distinctive substring plus Enter reaches any branch in the list.
  */
-function RefPicker({ t, label, value, branches, worktreeBranches, truncated, onPick }: {
+/** Sentinel ref meaning "walk every ref" — same string the host special-cases
+ *  into `--all`. A real ref cannot begin with a dash, so it collides with
+ *  nothing; defined separately on both halves (client bundles import no host
+ *  values), tied by this comment and the probe. */
+const ALL_REFS = '--all'
+
+function RefPicker({ t, label, value, branches, worktreeBranches, truncated, onPick, allLabel }: {
   t: Translate
   label: string
   value: string
@@ -2270,6 +2489,10 @@ function RefPicker({ t, label, value, branches, worktreeBranches, truncated, onP
   /** Whether the host cut the branch list short. */
   truncated: boolean
   onPick: (ref: string) => void
+  /** When set, an "all branches" entry is offered above the list and shown for
+   *  the {@link ALL_REFS} sentinel — the history picker's answer to "search
+   *  must not require knowing which branch holds the commit". */
+  allLabel?: string
 }): ReactNode {
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
@@ -2312,7 +2535,7 @@ function RefPicker({ t, label, value, branches, worktreeBranches, truncated, onP
         title={value.length > 0 ? value : undefined}
         onClick={() => setOpen(isOpen => !isOpen)}
       >
-        <Elided text={value.length > 0 ? value : '—'} className={css.refValue} />
+        <Elided text={value === ALL_REFS && allLabel !== undefined ? allLabel : (value.length > 0 ? value : '—')} className={css.refValue} />
         <span className={css.refCaret}>▾</span>
       </button>
       {open ? (
@@ -2326,11 +2549,24 @@ function RefPicker({ t, label, value, branches, worktreeBranches, truncated, onP
             onKeyDown={event => { if (event.key === 'Enter' && first !== undefined) choose(first) }}
           />
           <div className={css.refList} role="listbox" aria-label={label}>
+            {allLabel !== undefined && (needle.length === 0 || allLabel.toLowerCase().includes(needle)) ? (
+              <button
+                type="button"
+                role="option"
+                aria-selected={value === ALL_REFS}
+                className={value === ALL_REFS ? `${css.refRow} ${css.refRowActive}` : css.refRow}
+                title={allLabel}
+                onClick={() => choose(ALL_REFS)}
+              >
+                <span className={css.refRowSpacer} />
+                <Elided text={allLabel} className={css.refRowName} />
+              </button>
+            ) : null}
             {checkedOut.length > 0 && rest.length > 0 ? <div className={css.refGroup}>{t('refWorktrees')}</div> : null}
             {checkedOut.map(ref => row(ref, true))}
             {checkedOut.length > 0 && rest.length > 0 ? <div className={css.refGroup}>{t('refBranches')}</div> : null}
             {rest.map(ref => row(ref, false))}
-            {matched.length === 0 ? <div className={css.refEmpty}>{t('refNone')}</div> : null}
+            {matched.length === 0 && !(allLabel !== undefined && needle.length > 0 && allLabel.toLowerCase().includes(needle)) ? <div className={css.refEmpty}>{t('refNone')}</div> : null}
           </div>
           <div className={css.refFoot}>
             {t('refCount', { shown: matched.length, total: branches.length })}
@@ -2430,6 +2666,53 @@ function SyncGlyph({ of }: { of: keyof typeof SYNC_GLYPH }): ReactNode {
   )
 }
 
+/**
+ * Filter this list: a magnifier, not the funnel above the commit list. The two
+ * are deliberately different glyphs because they do different things — the
+ * funnel asks git for a different set of commits, this only hides rows already
+ * on screen — and the drawer shows both at once.
+ */
+function FilterGlyph(): ReactNode {
+  return (
+    <svg
+      width="13" height="13" viewBox="0 0 16 16"
+      fill="none" stroke="currentColor" strokeWidth="1.25"
+      strokeLinecap="round" strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="7" cy="7" r="4" />
+      <path d="M10 10l3.5 3.5" />
+    </svg>
+  )
+}
+
+/** Nothing folded. A constant so the filtered tree does not allocate a new Set
+ *  on every render and re-run `TreeChildren`'s memo. */
+const EMPTY_COLLAPSED: ReadonlySet<string> = new Set<string>()
+
+/**
+ * Roll back: the counter-clockwise arc every editor and VCS uses for undo,
+ * drawn in the same New UI idiom as the node glyphs beside it — 16px grid,
+ * 1px stroke, no fill — so the row does not mix an outlined file icon with a
+ * solid action icon.
+ */
+function RollbackGlyph(): ReactNode {
+  return (
+    <svg
+      width="14" height="14" viewBox="0 0 16 16"
+      fill="none" stroke="currentColor" strokeWidth="1.25"
+      strokeLinecap="round" strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {/* The arc, open at the upper left where the head goes. */}
+      <path d="M3.5 6.5a5 5 0 1 0 1.9-2.2" />
+      {/* The head: a corner, not a triangle — a filled arrowhead this small
+          turns into a dot at 1x. */}
+      <path d="M2.6 3.2v3.4h3.4" />
+    </svg>
+  )
+}
+
 const PULL_MODES = ['ff-only', 'rebase', 'merge'] as const
 type PullMode = typeof PULL_MODES[number]
 
@@ -2817,6 +3100,10 @@ function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
   const enterTimer = useRef(0)
   const leaveTimer = useRef(0)
   const body = commit.body ?? ''
+  const authorName = commit.authorName ?? ''
+  const committerName = commit.committerName ?? ''
+  // The viewer's own locale and timezone — that is the whole point of the line.
+  const exactDate = formatCommitDate(commit.dateIso ?? '')
 
   const cancel = (): void => {
     window.clearTimeout(enterTimer.current)
@@ -2870,6 +3157,7 @@ function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
         >
           <span className={css.commitTop}>
             <code className={css.commitHash}>{commit.hash}</code>
+            {authorName.length > 0 ? <span className={css.commitAuthor}>{authorName}</span> : null}
             <span className={css.commitWhen}>{commit.when}</span>
           </span>
           <span className={css.commitSubjectRow}>
@@ -2902,6 +3190,19 @@ function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
             <span className={css.commitWhen}>{commit.when}</span>
             <CopyCommitButton t={t} text={commitMessageText(commit)} />
           </div>
+          {/* Who and exactly when. The row summarizes ("3 weeks ago"); the
+              hover card is where the precise question gets a precise answer —
+              full date in the VIEWER's timezone, author, and the committer
+              whenever git recorded someone other than the author. */}
+          {authorName.length > 0 || committerName.length > 0 || exactDate.length > 0 ? (
+            <div className={css.commitPopMeta}>
+              {authorName.length > 0 ? <span>{t('commitAuthor')}: {authorName}</span> : null}
+              {committerName.length > 0 && committerName !== authorName ? (
+                <span>{t('commitCommitter')}: {committerName}</span>
+              ) : null}
+              {exactDate.length > 0 ? <span>{t('commitDate')}: {exactDate}</span> : null}
+            </div>
+          ) : null}
           <div className={css.commitPopSubject}>{commit.subject}</div>
           {body.length > 0 ? <pre className={css.commitPopBody}>{body}</pre> : null}
         </div>,
@@ -2911,6 +3212,207 @@ function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
   )
 }
 
+/** The filter's own calendar — a hand-rolled 6×7 Monday-first grid (pure
+ *  arithmetic in `calendar.ts`), because the native date input renders as the
+ *  platform's bare widget and the bundle's purity gate forbids pulling in a
+ *  library. Picking a day hands `yyyy-mm-dd` to the bound the segmented
+ *  control armed; the host expands it to the whole day. */
+function FilterCalendar({ year, month, after, before, locale, onPick, onShift }: {
+  year: number
+  month: number
+  /** Current bounds, to mark the picked days (approxidate text never matches
+   *  an iso, so a preset like "1 week ago" simply marks nothing). */
+  after: string
+  before: string
+  /** BCP-47 tag from the drawer's own dictionary (`filterLocale`), NOT the
+   *  browser's — those disagree the moment the UI language is not the OS one,
+   *  and the grid printed its month in the other language. */
+  locale: string
+  onPick: (iso: string) => void
+  onShift: (deltaMonths: number) => void
+}): ReactNode {
+  const grid = monthGrid(year, month, localTodayIso())
+  const title = new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }).format(new Date(year, month, 1))
+  return (
+    <div className={css.cal}>
+      <div className={css.calHead}>
+        <button type="button" className={css.calNav} aria-label="‹" onClick={() => onShift(-1)}>‹</button>
+        <span className={css.calTitle}>{title}</span>
+        <button type="button" className={css.calNav} aria-label="›" onClick={() => onShift(1)}>›</button>
+      </div>
+      <div className={css.calWeek}>
+        {weekdayLabels(locale).map((label, index) => <span key={index}>{label}</span>)}
+      </div>
+      <div className={css.calGrid}>
+        {grid.flat().map(cell => cell === null ? null : (
+          <button
+            key={cell.iso}
+            type="button"
+            aria-label={cell.iso}
+            title={cell.iso}
+            className={[
+              cell.inMonth ? '' : css.calOut,
+              cell.isToday ? css.calToday : '',
+              // Between the bounds, not one of them: the two endpoints alone
+              // never showed which days the filter actually admits. Both
+              // bounds are iso here or the comparison is simply false, which
+              // is what an approxidate preset should render as.
+              inCalRange(cell.iso, after, before) ? css.calIn : '',
+              cell.iso === after || cell.iso === before ? css.calMark : '',
+            ].filter(cls => cls.length > 0).join(' ')}
+            onClick={() => onPick(cell.iso)}
+          ><span>{cell.day}</span></button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * The two node glyphs, in IntelliJ's New UI icon idiom: a 16px grid, 1px
+ * strokes, no fill, rounded joins — outlines, where the old UI shipped filled
+ * silhouettes. Hand-drawn here rather than imported, because the bundle purity
+ * gate forbids an icon package and the drawer needs exactly these two; they
+ * are shapes in that language, not JetBrains' own assets.
+ *
+ * `strokeWidth` is 1 against a viewBox that renders 1:1 at 16px, so every
+ * stroke lands on a whole pixel instead of straddling two.
+ *
+ * Every place the drawer names a file or a directory uses these: the path
+ * picker in the history filter, and the file tree behind all three tabs. The
+ * CLASS names keep their `path` prefix — `scripts/verify_history_feature.py`
+ * selects the picker's file rows by `label:has([class*="pathFileGlyph"])`.
+ */
+function PathDirGlyph(): ReactNode {
+  return (
+    <svg
+      className={css.pathDirGlyph}
+      width="16" height="16" viewBox="0 0 16 16"
+      fill="none" stroke="currentColor" strokeWidth="1"
+      strokeLinejoin="round" strokeLinecap="round"
+      aria-hidden="true"
+    >
+      {/* Body, with the tab stepping up over the left third. The step is a
+          full 2px: at 1.3px it read as a rounded rectangle with a nick in it
+          rather than a folder. Every straight edge sits on a .5 coordinate so
+          a 1px stroke lands on one pixel instead of straddling two. */}
+      <path d="M2.5 12.75V4.25A.75.75 0 0 1 3.25 3.5H6l1.6 2h5.15A.75.75 0 0 1 13.5 6.25v6.5a.75.75 0 0 1-.75.75H3.25a.75.75 0 0 1-.75-.75Z" />
+    </svg>
+  )
+}
+
+function PathFileGlyph(): ReactNode {
+  return (
+    <svg
+      className={css.pathFileGlyph}
+      width="16" height="16" viewBox="0 0 16 16"
+      fill="none" stroke="currentColor" strokeWidth="1"
+      strokeLinejoin="round" strokeLinecap="round"
+      aria-hidden="true"
+    >
+      {/* Sheet, cut back at the top-right for the fold. Narrower and one step
+          taller than the folder, sharing its optical band, so the two never
+          look like different-sized icons in one column. */}
+      <path d="M3.5 12.75V3.25A.75.75 0 0 1 4.25 2.5H9l3.5 3.5v6.75a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75Z" />
+      {/* The fold itself — the corner turned back on the sheet. */}
+      <path d="M9 2.5v2.75a.75.75 0 0 0 .75.75h2.75" />
+    </svg>
+  )
+}
+
+/** Files shown per expanded directory. The search box is the way to a file in
+ *  a crowded directory; the tree shows enough to browse without flooding the
+ *  list, and says so when it cut the tail. */
+const PATH_FILES_SHOWN = 100
+
+/** Horizontal step per nesting level in the path picker. The whole indent now
+ *  comes from this one number: `.pathChildren` used to add a margin and a rail
+ *  of its own on top of it, so every level cost 29px and a 320px popover ran
+ *  out of width three directories deep. */
+const PATH_INDENT = 14
+
+/** One level of the path picker's directory tree — directories (chevron,
+ *  subtree count) then their files (doc glyph, leaf rows). Collapsed subtrees
+ *  are not in the DOM at all, so a monorepo costs only what the reader has
+ *  opened. */
+/** A checkbox that also carries the tree's third state — `indeterminate` is a
+ *  DOM property, not an attribute, so it is set through the ref. */
+function TriStateCheckbox({ state, onChange, ariaLabel }: {
+  state: 'on' | 'off' | 'partial'
+  onChange: () => void
+  ariaLabel: string
+}): ReactNode {
+  return (
+    <input
+      type="checkbox"
+      aria-label={ariaLabel}
+      checked={state === 'on'}
+      ref={el => { if (el !== null) el.indeterminate = state === 'partial' }}
+      onChange={onChange}
+    />
+  )
+}
+
+function PathTreeRows({ dirs, depth, expanded, stateOf, onToggleOpen, onTogglePath }: {
+  dirs: readonly DirEntry[]
+  depth: number
+  expanded: readonly string[]
+  /** Derived on/partial/off for any row path — the single source of truth. */
+  stateOf: (path: string) => 'on' | 'off' | 'partial'
+  onToggleOpen: (path: string) => void
+  onTogglePath: (path: string) => void
+}): ReactNode {
+  return (
+    <>
+      {dirs.map(dir => {
+        const open = expanded.includes(dir.path)
+        const expandable = dir.children.length > 0 || dir.files.length > 0
+        const shown = dir.files.slice(0, PATH_FILES_SHOWN)
+        return (
+          <div key={dir.path} className={css.pathNode}>
+            <div className={css.funnelRow} style={{ paddingLeft: depth * PATH_INDENT + 4 }}>
+              <button
+                type="button"
+                className={css.funnelChevron}
+                disabled={!expandable}
+                aria-expanded={open}
+                onClick={() => onToggleOpen(dir.path)}
+              >{expandable ? (open ? '▾' : '▸') : ''}</button>
+              <TriStateCheckbox state={stateOf(dir.path)} ariaLabel={dir.path} onChange={() => onTogglePath(dir.path)} />
+              <PathDirGlyph />
+              <span className={css.funnelName} title={dir.path}>{dir.name}</span>
+              <span className={css.funnelCount}>{dir.fileCount}</span>
+            </div>
+            {open ? (
+              <div className={css.pathChildren}>
+                <PathTreeRows
+                  dirs={dir.children}
+                  depth={depth + 1}
+                  expanded={expanded}
+                  stateOf={stateOf}
+                  onToggleOpen={onToggleOpen}
+                  onTogglePath={onTogglePath}
+                />
+                {shown.map(file => (
+                  <label key={file} className={css.funnelRow} style={{ paddingLeft: (depth + 1) * PATH_INDENT + 4 }}>
+                    <span className={css.funnelChevron} aria-hidden="true" />
+                    <TriStateCheckbox state={stateOf(`${dir.path}/${file}`)} ariaLabel={`${dir.path}/${file}`} onChange={() => onTogglePath(`${dir.path}/${file}`)} />
+                    <PathFileGlyph />
+                    <span className={css.funnelName} title={`${dir.path}/${file}`}>{file}</span>
+                  </label>
+                ))}
+                {dir.files.length > PATH_FILES_SHOWN ? (
+                  <div className={css.funnelMore}>+{dir.files.length - PATH_FILES_SHOWN}</div>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
 /**
  * The commit log as its own full-height pane.
  *
@@ -2929,7 +3431,7 @@ function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
  * what GitHub and GitLens do. The observer is rebuilt whenever the list grows,
  * so a page too short to fill the pane immediately triggers the next one.
  */
-function CommitList({ paneRef, style, t, loading, commits, active, onSelect, hasMore, loadingMore, onLoadMore }: {
+function CommitList({ paneRef, style, t, loading, commits, active, onSelect, hasMore, loadingMore, onLoadMore, query, onQueryChange, error, statsPath, refName, fetchAuthors, fetchRepoTree }: {
   /** The pane element, which the divider beside it measures from. Not named
    *  `ref`: React reserves that on a function component, so it would be stripped
    *  from props and never reach this element. */
@@ -2946,12 +3448,160 @@ function CommitList({ paneRef, style, t, loading, commits, active, onSelect, has
   hasMore: boolean
   loadingMore: boolean
   onLoadMore: () => void
+  /** The filter box's text. Parsed here for chips; the parent debounces the
+   *  same parse into the server-side fetch. */
+  query: string
+  onQueryChange: (query: string) => void
+  /** git's complaint when the log itself failed (bad pattern/date), verbatim. */
+  error: string | null
+  /** Which tree the author roster counts — the drawer's current source. */
+  statsPath: string | undefined
+  /** Which ref the roster and the list both walk — the picker's people are the
+   *  list's people, so a tick can never name someone with nothing to show. */
+  refName: string
+  fetchAuthors: (worktreePath: string | undefined, ref: string, signal: AbortSignal) => Promise<{ authors: readonly AuthorEntry[]; truncated: boolean } | null>
+  fetchRepoTree: (worktreePath: string | undefined, signal: AbortSignal) => Promise<{ paths: string[]; truncated: boolean } | null>
 }): ReactNode {
   const scrollRef = useRef<HTMLDivElement>(null)
   const sentinelRef = useRef<HTMLDivElement>(null)
+  // One grammar, one filter: chips are the parsed criteria, and removing one
+  // rewrites the box through that same grammar.
+  const filterModel = useMemo(() => parseLogQuery(query), [query])
+  const chips = chipsFromFilter(filterModel)
+  // What the panel is currently asking git for. Each tab shows its own share
+  // so the two sections nobody is looking at still say they hold something,
+  // and the footer shows the total — the chip row that used to be the only
+  // feedback sits BEHIND the popup, so the ticks looked inert until it closed.
+  // A date bound counts as one criterion each; free text is the box's, not
+  // the popup's, so it stays out of both.
+  const dateCount = (filterModel.after.length > 0 ? 1 : 0) + (filterModel.before.length > 0 ? 1 : 0)
+  const selectedCount = filterModel.users.length + filterModel.paths.length + dateCount
+
+  // ---- funnel popup: user picker + date bounds + path tree --------------
+  const [funnelOpen, setFunnelOpen] = useState(false)
+  const [authors, setAuthors] = useState<{ authors: readonly AuthorEntry[]; truncated: boolean } | null>(null)
+  const [authorsQuery, setAuthorsQuery] = useState('')
+  const [pathTree, setPathTree] = useState<{ dirs: readonly DirEntry[]; paths: readonly string[]; truncated: boolean } | null>(null)
+  const [expandedDirs, setExpandedDirs] = useState<readonly string[]>([])
+  const [pathsQuery, setPathsQuery] = useState('')
+  // The popup shows ONE section at a time (tabs), so a roster of dozens
+  // cannot grow the panel past the paths section — every section is reachable
+  // in one click whatever the others hold.
+  const [funnelSection, setFunnelSection] = useState<'users' | 'date' | 'paths'>('users')
+  // The calendar's displayed month, and which bound a picked day lands in.
+  const [calMonth, setCalMonth] = useState(() => { const now = new Date(); return { year: now.getFullYear(), month: now.getMonth() } })
+  const [calBound, setCalBound] = useState<'after' | 'before'>('after')
+
+  // The panel is PORTALLED to the drawer overlay (position: fixed, clamped to
+  // the viewport — the commits pane can be narrower than the panel, and an
+  // absolute panel anchored at its right edge runs off-screen). Dismissal
+  // therefore checks TWO refs: the anchor button and the panel itself; a
+  // single useDismissable root would see every click inside the portalled
+  // panel as "outside" and close it out from under the click.
+  const funnelAnchorRef = useRef<HTMLDivElement>(null)
+  const funnelPanelRef = useRef<HTMLDivElement>(null)
+  const [funnelBox, setFunnelBox] = useState<{ top: number; left: number; maxHeight: number } | null>(null)
+
+  useEffect(() => {
+    if (!funnelOpen) { setFunnelBox(null); return }
+    const onDown = (event: MouseEvent): void => {
+      const target = event.target as Node
+      if (funnelAnchorRef.current?.contains(target) === true) return
+      if (funnelPanelRef.current?.contains(target) === true) return
+      setFunnelOpen(false)
+    }
+    const onKey = (event: KeyboardEvent): void => { if (event.key === 'Escape') setFunnelOpen(false) }
+    // Bound on the next tick: the opening click is still travelling.
+    const id = window.setTimeout(() => document.addEventListener('mousedown', onDown), 0)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      window.clearTimeout(id)
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [funnelOpen])
+
+  useEffect(() => {
+    if (!funnelOpen) return
+    const rect = funnelAnchorRef.current?.getBoundingClientRect()
+    if (rect === undefined) return
+    const width = 300
+    const left = Math.max(12, Math.min(rect.left + rect.width - width, window.innerWidth - width - 12))
+    const top = rect.bottom + 4
+    setFunnelBox({ top, left, maxHeight: Math.max(160, window.innerHeight - top - 16) })
+  }, [funnelOpen])
+
+  // The roster and the tree are fetched when the funnel OPENS (not when the
+  // pane mounts — most visits never filter) and again when the source or the
+  // ref moves: the roster counts the very history the list walks, so the two
+  // can never disagree about who has commits.
+  useEffect(() => {
+    if (!funnelOpen) return
+    const ctrl = new AbortController()
+    setAuthors(null)
+    setPathTree(null)
+    fetchAuthors(statsPath, refName, ctrl.signal).then(roster => {
+      if (!ctrl.signal.aborted) setAuthors(roster)
+    }).catch(() => {})
+    fetchRepoTree(statsPath, ctrl.signal).then(tree => {
+      if (!ctrl.signal.aborted && tree !== null) {
+        setPathTree({ dirs: buildDirTree(tree.paths), paths: tree.paths, truncated: tree.truncated })
+      }
+    }).catch(() => {})
+    return () => { ctrl.abort() }
+  }, [funnelOpen, statsPath, refName, fetchAuthors, fetchRepoTree])
+
+  /** Every funnel interaction writes the filter through the box's grammar, so
+   *  the box, the chips and the fetch can never disagree about the query. */
+  const applyFilter = (next: LogFilter): void => { onQueryChange(serializeLogQuery(next)) }
+  const toggleUser = (name: string): void => {
+    const has = filterModel.users.includes(name)
+    applyFilter({
+      ...filterModel,
+      users: has ? filterModel.users.filter(user => user !== name) : [...filterModel.users, name],
+    })
+  }
+  // Checkbox-tree semantics: ticking a folder covers its subtree (and absorbs
+  // the files already ticked inside it); unticking a file under a checked
+  // folder cascades out. Rows DERIVE their state — on/partial/off — from the
+  // set, so a folder tick visibly checks everything under it.
+  const pathIndex = useMemo(
+    () => (pathTree === null ? null : buildIndex(pathTree.paths)),
+    [pathTree],
+  )
+  const pathState = (path: string): 'on' | 'off' | 'partial' =>
+    pathIndex === null ? 'off' : checkedState(filterModel.paths, path, pathIndex)
+  const togglePath = (path: string): void => {
+    if (pathIndex === null) return
+    applyFilter({
+      ...filterModel,
+      paths: isCovered(filterModel.paths, path)
+        ? removePath(filterModel.paths, path, pathIndex)
+        : addPath(filterModel.paths, path),
+    })
+  }
+  const toggleDirOpen = (path: string): void => {
+    setExpandedDirs(prev => prev.includes(path) ? prev.filter(p => p !== path) : [...prev, path])
+  }
+  const needle = authorsQuery.trim().toLowerCase()
+  const matchedAuthors = authors === null
+    ? []
+    : needle.length === 0
+      ? authors.authors
+      : authors.authors.filter(entry =>
+        entry.name.toLowerCase().includes(needle) || entry.email.toLowerCase().includes(needle))
+  const DATE_PRESETS: readonly { key: WorkbenchKey; value: string }[] = [
+    { key: 'filterToday', value: 'midnight' },
+    { key: 'filterLast7', value: '1 week ago' },
+    { key: 'filterLast30', value: '30 days ago' },
+  ]
   // Recomputed only when a page lands. The layout is a single pass over the
   // loaded prefix, and every row's geometry depends on the rows above it, so
   // there is nothing finer to memoise than the whole list.
+  //
+  // Filtering does not suspend the graph: the server returns one contiguous
+  // walk of the FILTERED log, so lanes stay truthful — unlike a client-side
+  // filter, which would break the very walk it draws from.
   const graph = useMemo(
     () => layoutGraph(commits.map(commit => ({ hash: commit.hash, parents: commit.parents ?? [] }))),
     [commits],
@@ -2978,9 +3628,251 @@ function CommitList({ paneRef, style, t, loading, commits, active, onSelect, has
           worse than none. */}
       <div className={css.paneHead}>
         <span className={css.paneTitle}>{t('historyLabel')}</span>
+        <div className={css.funnel} ref={funnelAnchorRef}>
+          <button
+            type="button"
+            className={funnelOpen || chips.length > 0 ? `${css.funnelButton} ${css.funnelButtonActive}` : css.funnelButton}
+            aria-expanded={funnelOpen}
+            onClick={() => setFunnelOpen(isOpen => !isOpen)}
+          >{t('filterBy')} ▾</button>
+        </div>
+        <input
+          className={css.commitFilter}
+          type="search"
+          value={query}
+          onChange={event => onQueryChange(event.target.value)}
+          placeholder={t('historyFilterPlaceholder')}
+          aria-label={t('historyFilterPlaceholder')}
+          spellCheck={false}
+        />
       </div>
+      {funnelOpen && funnelBox !== null ? createPortal(
+        <div
+          ref={funnelPanelRef}
+          className={css.funnelPop}
+          style={funnelBox}
+          role="dialog"
+          aria-label={t('filterBy')}
+        >
+          {/* One section at a time: a roster of dozens cannot grow the panel
+              past the other sections, and each tab carries its own active
+              count so the criteria are visible without visiting the tab. */}
+          <div className={css.funnelTabs} role="tablist">
+            <button
+              type="button" role="tab" aria-selected={funnelSection === 'users'}
+              className={funnelSection === 'users' ? `${css.funnelTab} ${css.funnelTabActive}` : css.funnelTab}
+              onClick={() => setFunnelSection('users')}
+            >
+              {t('filterUsers')}
+              {filterModel.users.length > 0 ? <span className={css.funnelTabCount}>{filterModel.users.length}</span> : null}
+            </button>
+            <button
+              type="button" role="tab" aria-selected={funnelSection === 'date'}
+              className={funnelSection === 'date' ? `${css.funnelTab} ${css.funnelTabActive}` : css.funnelTab}
+              onClick={() => setFunnelSection('date')}
+            >
+              {t('filterDate')}
+              {dateCount > 0 ? <span className={css.funnelTabCount}>{dateCount}</span> : null}
+            </button>
+            <button
+              type="button" role="tab" aria-selected={funnelSection === 'paths'}
+              className={funnelSection === 'paths' ? `${css.funnelTab} ${css.funnelTabActive}` : css.funnelTab}
+              onClick={() => setFunnelSection('paths')}
+            >
+              {t('filterPaths')}
+              {filterModel.paths.length > 0 ? <span className={css.funnelTabCount}>{filterModel.paths.length}</span> : null}
+            </button>
+          </div>
+          {funnelSection === 'users' ? (
+            <div className={css.funnelPane}>
+              <input
+                className={css.funnelSearch}
+                type="search"
+                value={authorsQuery}
+                onChange={event => setAuthorsQuery(event.target.value)}
+                placeholder={t('filterUserSearch')}
+                aria-label={t('filterUserSearch')}
+                spellCheck={false}
+              />
+              <div className={css.funnelList}>
+                {authors === null ? (
+                  <div className={css.funnelMore}>{t('loading')}</div>
+                ) : matchedAuthors.length === 0 ? (
+                  <div className={css.funnelMore}>{authors.authors.length === 0 ? t('noCommits') : t('historyNoMatch')}</div>
+                ) : matchedAuthors.map(entry => (
+                  <label key={`${entry.name}\x1f${entry.email}`} className={css.funnelRow}>
+                    <input
+                      type="checkbox"
+                      checked={filterModel.users.includes(entry.name)}
+                      onChange={() => toggleUser(entry.name)}
+                    />
+                    <span className={css.funnelName} title={`${entry.name} <${entry.email}>`}>{entry.name}</span>
+                    <span className={css.funnelCount}>{entry.count}</span>
+                  </label>
+                ))}
+                {authors?.truncated === true ? (
+                  <div className={css.funnelMore}>{t('filterAuthorsMore')}</div>
+                ) : null}
+              </div>
+            </div>
+          ) : null}
+          {funnelSection === 'date' ? (
+            <div className={css.funnelPane}>
+              <div className={css.funnelPresets}>
+                {DATE_PRESETS.map(preset => (
+                  <button
+                    key={preset.key}
+                    type="button"
+                    className={filterModel.after === preset.value ? `${css.funnelPreset} ${css.funnelPresetActive}` : css.funnelPreset}
+                    onClick={() => applyFilter({ ...filterModel, after: filterModel.after === preset.value ? '' : preset.value })}
+                  >{t(preset.key)}</button>
+                ))}
+              </div>
+              {/* Which bound a picked day lands in — the calendar is one, the
+                  range is two picks apart. Captioned, and shaped as a rect
+                  track rather than the tab strip's pills: two identical pill
+                  rows six pixels apart never said they meant different
+                  things. */}
+              <span className={css.funnelCaption}>{t('filterCalendarSets')}</span>
+              <div className={css.funnelBounds} role="group" aria-label={t('filterCalendarSets')}>
+                <button
+                  type="button"
+                  aria-pressed={calBound === 'after'}
+                  className={calBound === 'after' ? `${css.funnelBoundBtn} ${css.funnelBoundBtnActive}` : css.funnelBoundBtn}
+                  onClick={() => setCalBound('after')}
+                >{t('filterAfter')}</button>
+                <button
+                  type="button"
+                  aria-pressed={calBound === 'before'}
+                  className={calBound === 'before' ? `${css.funnelBoundBtn} ${css.funnelBoundBtnActive}` : css.funnelBoundBtn}
+                  onClick={() => setCalBound('before')}
+                >{t('filterBefore')}</button>
+              </div>
+              <FilterCalendar
+                year={calMonth.year}
+                month={calMonth.month}
+                after={filterModel.after}
+                before={filterModel.before}
+                locale={t('filterLocale')}
+                onPick={iso => applyFilter({ ...filterModel, [calBound]: iso })}
+                onShift={delta => setCalMonth(current => {
+                  const next = new Date(current.year, current.month + delta, 1)
+                  return { year: next.getFullYear(), month: next.getMonth() }
+                })}
+              />
+              <div className={css.funnelBoundRows}>
+                <span className={css.funnelBoundRow}>
+                  <span className={css.funnelBoundKey}>{t('filterAfter')}</span>
+                  <span className={filterModel.after.length > 0 ? `${css.funnelBoundVal} ${css.funnelBoundValSet}` : css.funnelBoundVal}>
+                    {filterModel.after.length > 0 ? filterModel.after : '—'}
+                  </span>
+                  {filterModel.after.length > 0 ? (
+                    <button type="button" className={css.funnelBoundClear} aria-label={t('filterAfter')} onClick={() => applyFilter({ ...filterModel, after: '' })}>×</button>
+                  ) : null}
+                </span>
+                <span className={css.funnelBoundRow}>
+                  <span className={css.funnelBoundKey}>{t('filterBefore')}</span>
+                  <span className={filterModel.before.length > 0 ? `${css.funnelBoundVal} ${css.funnelBoundValSet}` : css.funnelBoundVal}>
+                    {filterModel.before.length > 0 ? filterModel.before : '—'}
+                  </span>
+                  {filterModel.before.length > 0 ? (
+                    <button type="button" className={css.funnelBoundClear} aria-label={t('filterBefore')} onClick={() => applyFilter({ ...filterModel, before: '' })}>×</button>
+                  ) : null}
+                </span>
+              </div>
+            </div>
+          ) : null}
+          {funnelSection === 'paths' ? (
+            <div className={css.funnelPane}>
+              <input
+                className={css.funnelSearch}
+                type="search"
+                value={pathsQuery}
+                onChange={event => setPathsQuery(event.target.value)}
+                placeholder={t('filterPathSearch')}
+                aria-label={t('filterPathSearch')}
+                spellCheck={false}
+              />
+              <div className={css.funnelList}>
+                {pathTree === null ? (
+                  <div className={css.funnelMore}>{t('loading')}</div>
+                ) : pathsQuery.trim().length > 0 ? (
+                  /* Search results are FLAT — the honest shape for hits (same
+                     argument as the filtered commit list), each row ticking a
+                     pathspec directly: files first, then directories. */
+                  (() => {
+                    const hits = searchPaths(pathTree.paths, pathsQuery).slice(0, 200)
+                    if (hits.length === 0) return <div className={css.funnelMore}>{t('historyNoMatch')}</div>
+                    return (
+                      <>
+                        {hits.map(hit => (
+                          <label key={hit.path} className={css.funnelRow}>
+                            <TriStateCheckbox state={pathState(hit.path)} ariaLabel={hit.path} onChange={() => togglePath(hit.path)} />
+                            {hit.isFile ? <PathFileGlyph /> : <PathDirGlyph />}
+                            <span className={css.funnelName} title={hit.path}>{hit.path}</span>
+                          </label>
+                        ))}
+                        {searchPaths(pathTree.paths, pathsQuery).length > 200 ? (
+                          <div className={css.funnelMore}>{t('filterPathsMore')}</div>
+                        ) : null}
+                      </>
+                    )
+                  })()
+                ) : pathTree.dirs.length === 0 ? (
+                  <div className={css.funnelMore}>{t('noCommits')}</div>
+                ) : (
+                  <PathTreeRows
+                    dirs={pathTree.dirs}
+                    depth={0}
+                    expanded={expandedDirs}
+                    stateOf={pathState}
+                    onToggleOpen={toggleDirOpen}
+                    onTogglePath={togglePath}
+                  />
+                )}
+                {pathTree?.truncated === true ? (
+                  <div className={css.funnelMore}>{t('filterPathsMore')}</div>
+                ) : null}
+              </div>
+            </div>
+          ) : null}
+          {/* The panel's own readout. Clearing goes through the box's grammar
+              like every other funnel interaction, so one query string stays
+              the single source of truth. */}
+          <div className={css.funnelFoot}>
+            <span className={selectedCount > 0 ? `${css.funnelFootCount} ${css.funnelFootCountOn}` : css.funnelFootCount}>
+              {t('filterSelected', { count: selectedCount })}
+            </span>
+            <button
+              type="button"
+              className={css.funnelFootClear}
+              disabled={selectedCount === 0}
+              onClick={() => onQueryChange('')}
+            >{t('filterClearAll')}</button>
+          </div>
+        </div>,
+        funnelAnchorRef.current?.closest('[data-gs-part="overlay"]') ?? (typeof document === 'undefined' ? null : document.body),
+      ) : null}
+      {chips.length > 0 ? (
+        <div className={css.filterChips}>
+          {chips.map(chip => (
+            <span key={`${chip.kind}\x1f${chip.value}`} className={css.filterChip}>
+              <span className={css.filterChipLabel}>{chip.kind}:{chip.value}</span>
+              <button
+                type="button"
+                className={css.filterChipRemove}
+                aria-label={`${chip.kind} ${chip.value}`}
+                onClick={() => onQueryChange(serializeLogQuery(removeChip(filterModel, chip.kind, chip.value)))}
+              >×</button>
+            </span>
+          ))}
+          <button type="button" className={css.filterClear} onClick={() => onQueryChange('')}>{t('filterClearAll')}</button>
+        </div>
+      ) : null}
       {commits.length === 0 ? (
-        <div className={css.empty}>{loading ? t('loading') : t('noCommits')}</div>
+        <div className={css.empty}>
+          {loading ? t('loading') : error !== null ? error : chips.length > 0 ? t('historyNoMatch') : t('noCommits')}
+        </div>
       ) : (
         <div className={css.commits} role="listbox" aria-label={t('historyLabel')} ref={scrollRef}>
           {commits.map((commit, index) => (
@@ -3118,12 +4010,32 @@ interface FileTreeProps {
   /** Add or remove files from the commit set. Undefined outside the working-tree
    *  view, where what a commit contains was decided long ago. */
   onCheck?: (files: readonly GitFile[], state: CheckState) => void
+  /** Roll one file back to HEAD; working-tree view only. */
+  onDiscard?: (file: GitFile) => void
   /** Rendered under the tree in the working-tree view only. */
   footer?: ReactNode
+  /** Names what this list is OF — the working tree, or one commit, or one
+   *  comparison. The filter clears when it changes: a query typed against a
+   *  140-file commit would otherwise carry over to the next commit and hide
+   *  most of it, with nothing on screen saying why. */
+  scopeKey: string
 }
 
-function FileTree({ t, loading, lead, files, active, onSelect, collapsed, onCollapsedChange, onCheck, footer }: FileTreeProps): ReactNode {
-  const tree = useMemo(() => buildTree(files), [files])
+function FileTree({ t, loading, lead, files, active, onSelect, collapsed, onCollapsedChange, onCheck, onDiscard, footer, scopeKey }: FileTreeProps): ReactNode {
+  /**
+   * The filter over this list. Local, because it describes a way of LOOKING at
+   * the pane rather than anything the drawer stores: closing and reopening on
+   * an unfiltered list is what someone expects, and a query kept in the panel
+   * would have to be cleared from four places instead of one.
+   */
+  const [query, setQuery] = useState('')
+  const [filterOpen, setFilterOpen] = useState(false)
+  const filterRef = useRef<HTMLInputElement>(null)
+  useEffect(() => { setQuery(''); setFilterOpen(false) }, [scopeKey])
+
+  const shownFiles = useMemo(() => filterFiles(files, query), [files, query])
+  const filtering = shownFiles !== files
+  const tree = useMemo(() => buildTree(shownFiles), [shownFiles])
   /** Default: a dir collapses when it holds more than 12 files anywhere below it. */
   const effective = collapsed ?? defaultCollapsed(tree)
 
@@ -3169,16 +4081,41 @@ function FileTree({ t, loading, lead, files, active, onSelect, collapsed, onColl
               state={tree.check}
               label={tree.check === 'on' ? t('unstageAll') : t('stageAll')}
               indent={0}
-              onToggle={() => onCheck(files, tree.check)}
+              // `shownFiles`, not `files`: a tick IS a git call, and the root
+              // one must stage exactly the rows it sits above. Reaching past a
+              // filter into files the pane is hiding is how "stage all" ends up
+              // meaning something the reader never saw.
+              onToggle={() => onCheck(shownFiles, tree.check)}
             />
           ) : null}
           <span className={css.treeLabel}>
             {loading === true
               ? t('loading')
-              : `${lead !== undefined ? `${lead} · ` : ''}${t('files', { count: files.length })}`}
+              : `${lead !== undefined ? `${lead} · ` : ''}${filtering
+                ? t('filesFiltered', { shown: shownFiles.length, count: files.length })
+                : t('files', { count: files.length })}`}
           </span>
         </div>
         <div className={css.treeActions} data-gs-part="tree-actions">
+          {/* Filtering is about the list, so it sits with the list's own two
+              controls rather than in the drawer chrome — and it stays lit while
+              a query is set, because a pane showing 6 of 140 files with no
+              visible reason is the one way this feature can mislead. */}
+          <button
+            type="button"
+            className={filterOpen || filtering ? `${css.treeIcon} ${css.treeIconOn}` : css.treeIcon}
+            data-gs-part="filter-files"
+            title={t('filterFiles')} aria-label={t('filterFiles')}
+            aria-pressed={filterOpen}
+            onClick={() => {
+              // Closing is also clearing. A hidden box still holding a query
+              // would leave the pane filtered with its only explanation
+              // folded away.
+              if (filterOpen) { setQuery(''); setFilterOpen(false); return }
+              setFilterOpen(true)
+              window.setTimeout(() => filterRef.current?.focus(), 0)
+            }}
+          ><FilterGlyph /></button>
           {/* Icon-only, with the label on `title`/`aria-label`: the glyph is the
               same one the rows carry, so each button previews its own result. */}
           <button
@@ -3193,13 +4130,47 @@ function FileTree({ t, loading, lead, files, active, onSelect, collapsed, onColl
           ><span className={css.treeIconGlyph}>▸</span></button>
         </div>
       </div>
+      {filterOpen ? (
+        <div className={css.treeFilter}>
+          <input
+            ref={filterRef}
+            className={css.treeFilterInput}
+            type="text"
+            value={query}
+            placeholder={t('filterFilesPlaceholder')}
+            aria-label={t('filterFiles')}
+            spellCheck={false}
+            onChange={event => setQuery(event.target.value)}
+            onKeyDown={event => {
+              if (event.key !== 'Escape') return
+              // Escape belongs to the box while it has something to undo;
+              // only an already-empty box lets it through to close the drawer.
+              if (query.length > 0) { event.stopPropagation(); setQuery(''); return }
+              event.stopPropagation()
+              setFilterOpen(false)
+            }}
+          />
+          {query.length > 0 ? (
+            <button
+              type="button" className={css.treeFilterClear}
+              title={t('filterFilesClear')} aria-label={t('filterFilesClear')}
+              onClick={() => { setQuery(''); filterRef.current?.focus() }}
+            >×</button>
+          ) : null}
+        </div>
+      ) : null}
       {loading === true ? (
         <div className={css.treeEmpty} data-gs-part="tree-loading">{t('loading')}</div>
+      ) : filtering && shownFiles.length === 0 ? (
+        <div className={css.treeEmpty} data-gs-part="tree-no-match">{t('filterNoMatch')}</div>
       ) : (
         <ul className={css.tree}>
+          {/* A filtered tree ignores the fold state entirely: the reader asked
+              for these files, and leaving them behind a directory they
+              collapsed twenty minutes ago reads as "no matches". */}
           <TreeChildren
-            node={tree} depth={0} active={active} collapsed={effective}
-            onToggle={toggleOne} onSelect={onSelect} onCheck={onCheck} stageLabels={stageLabels}
+            node={tree} depth={0} active={active} collapsed={filtering ? EMPTY_COLLAPSED : effective}
+            onToggle={toggleOne} onSelect={onSelect} onCheck={onCheck} onDiscard={onDiscard} stageLabels={stageLabels} discardLabel={t('discardAction')}
           />
         </ul>
       )}
@@ -3277,17 +4248,25 @@ interface TreeChildrenProps {
   node: DirNode
   depth: number
   active: string | null
-  collapsed: Set<string>
+  /** Read-only: a filtered tree is handed a shared empty set rather than a copy. */
+  collapsed: ReadonlySet<string>
   onToggle: (path: string) => void
   onSelect: (path: string) => void
   /** Add or remove files from the commit set. Undefined outside the working-tree
    *  view, where what a commit contains was decided long ago. */
   onCheck?: (files: readonly GitFile[], state: CheckState) => void
+  /** Roll one file back to HEAD. Undefined outside the working-tree view for
+   *  the same reason `onCheck` is: a commit's files are history, and there is
+   *  nothing there to roll back. Directories never offer it — the irreversible
+   *  action does not get a gesture that takes a subtree with it. */
+  onDiscard?: (file: GitFile) => void
   /** Pre-translated, so the row does not have to carry `t` for two strings. */
   stageLabels: { stage: string; unstage: string }
+  /** Label for the roll-back action, pre-translated like `stageLabels`. */
+  discardLabel?: string
 }
 
-function TreeChildren({ node, depth, active, collapsed, onToggle, onSelect, onCheck, stageLabels }: TreeChildrenProps): ReactNode {
+function TreeChildren({ node, depth, active, collapsed, onToggle, onSelect, onCheck, onDiscard, stageLabels, discardLabel }: TreeChildrenProps): ReactNode {
   const dirNodes = [...node.dirs.values()].sort((a, b) => a.name.localeCompare(b.name))
   const fileNodes = [...node.files].sort((a, b) => basePart(a.path).localeCompare(basePart(b.path)))
   const checkColumn = onCheck !== undefined ? TREE_CHECK_W : 0
@@ -3318,6 +4297,7 @@ function TreeChildren({ node, depth, active, collapsed, onToggle, onSelect, onCh
                 title={dir.path}
               >
                 <span className={`${css.chevron} ${open ? css.chevronOpen : ''}`}>▸</span>
+                <PathDirGlyph />
                 <span className={css.treeDirName}>{dir.name}</span>
                 <span className={css.treeDirCount}>{dir.fileCount}</span>
                 <span className={css.treeDirCounts}>
@@ -3333,7 +4313,7 @@ function TreeChildren({ node, depth, active, collapsed, onToggle, onSelect, onCh
                 // row's tick — so the tick's width is part of the offset.
                 style={{ [RAIL_VAR]: `${checkColumn + TREE_BASE_INDENT + depth * TREE_INDENT + TREE_RAIL_OFFSET}px` } as CSSProperties}
               >
-                <TreeChildren node={dir} depth={depth + 1} active={active} collapsed={collapsed} onToggle={onToggle} onSelect={onSelect} onCheck={onCheck} stageLabels={stageLabels} />
+                <TreeChildren node={dir} depth={depth + 1} active={active} collapsed={collapsed} onToggle={onToggle} onSelect={onSelect} onCheck={onCheck} onDiscard={onDiscard} stageLabels={stageLabels} discardLabel={discardLabel} />
               </ul>
             ) : null}
           </li>
@@ -3358,7 +4338,13 @@ function TreeChildren({ node, depth, active, collapsed, onToggle, onSelect, onCh
               onClick={() => onSelect(file.path)}
               title={file.previousPath !== undefined ? `${file.previousPath} → ${file.path}` : file.path}
             >
-              <span className={`${css.fileStatus} ${STATUS_BADGE[file.status]}`}>{statusGlyph(file.status)}</span>
+              {/* Icon then name, status on the right with the line counts.
+                  The badge used to lead, which put two glyphs side by side the
+                  moment the row gained a file icon; both IDEA and VS Code read
+                  left-to-right as "what this is, then what happened to it",
+                  and the badge still lands in an aligned column — `.filePath`
+                  is the only flexible child. */}
+              <PathFileGlyph />
               <span className={css.filePath}>{basePart(file.path)}</span>
               {file.binary ? <span className={css.fileBinary}>BIN</span> : (
                 <span className={css.fileCounts}>
@@ -3366,7 +4352,19 @@ function TreeChildren({ node, depth, active, collapsed, onToggle, onSelect, onCh
                   <span className={css.fileCountDel}>{file.deletedLines > 0 ? `−${file.deletedLines}` : ''}</span>
                 </span>
               )}
+              <span className={`${css.fileStatus} ${STATUS_BADGE[file.status]}`}>{statusGlyph(file.status)}</span>
             </button>
+            {onDiscard !== undefined ? (
+              /* Outside the row button, not inside it: a button in a button is
+                 invalid, and clicking roll-back must not also select the file. */
+              <button
+                type="button"
+                className={css.fileDiscard}
+                title={discardLabel}
+                aria-label={`${discardLabel ?? ''} ${file.path}`}
+                onClick={event => { event.stopPropagation(); onDiscard(file) }}
+              ><RollbackGlyph /></button>
+            ) : null}
           </li>
         )
       })}