diff --git a/apps/web/src/components/files/FilterControls.tsx b/apps/web/src/components/files/FilterControls.tsx
index 3eb0acc9..c5ba4985 100644
--- a/apps/web/src/components/files/FilterControls.tsx
+++ b/apps/web/src/components/files/FilterControls.tsx
@@ -1,98 +1,247 @@
 /**
- * The Files filter vocabulary (spec: "Files views"): Type (kind or device), Repo, PR state.
- * Each view composes the controls it needs; values live in the URL.
+ * The Files filter vocabulary (spec: "Files views"): Type, Device, Repo/Project,
+ * PR state, Merged only. Every view shows one bar: optional search, one
+ * Filters button (with a count) that opens a popover of sections, optional
+ * trailing controls, and the active filters as removable chips below.
+ * Values live in the URL.
  */
 import { Select } from "@uploads/ui";
+import { Checkbox } from "@uploads/ui/components/ui/checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "@uploads/ui/components/ui/popover";
+import { SlidersHorizontalIcon, XIcon } from "lucide-react";
+import type { ReactNode } from "react";
 import { FILE_SURFACES, type FileSurface, type FileTypeClass } from "@uploads/comment-render/scope";
 import {
   FILE_SURFACE_LABELS,
   FILE_TYPE_LABELS,
-  parseFileTypeParam,
-  parsePrStateParam,
-  parseSurfaceParam,
   type PrStateFilter,
 } from "../../lib/files-view-state";
 
-const SELECT_CLASS = "ul-select--sm min-h-9 max-w-full text-base sm:text-[13px] box-border";
 const FILE_TYPE_ORDER: FileTypeClass[] = ["screenshot", "video", "other"];
+const PR_STATE_LABELS: Record<PrStateFilter, string> = {
+  open: "Open",
+  merged: "Merged",
+  closed: "Closed",
+};
 
 export interface TypeFilter {
   type: FileTypeClass | null;
   surface: FileSurface | null;
 }
 
-/**
- * One select for what a file is: its kind (by extension) or the device it
- * shows (the classifier's `ai.surface`). Picking one clears the other, so the
- * bar keeps a single control; the URL keeps `type` and `surface` apart.
- */
-export function TypeSelect({
+export interface FilterChip {
+  key: string;
+  label: string;
+  onRemove: () => void;
+}
+
+export function FilterBar({
+  search,
+  trailing,
+  chips,
+  children,
+}: {
+  search?: ReactNode;
+  trailing?: ReactNode;
+  /** Active filters; their count badges the Filters button. */
+  chips: FilterChip[];
+  /** Popover body: FilterSection blocks. */
+  children: ReactNode;
+}) {
+  return (
+    <div className="wsp-filter grid gap-2">
+      <div className="flex items-stretch gap-2">
+        {search}
+        <Popover>
+          <PopoverTrigger
+            render={
+              <button
+                type="button"
+                aria-label={chips.length > 0 ? `Filters, ${chips.length} active` : "Filters"}
+                className={`flex min-h-9 flex-none items-center gap-2 rounded-[6px] border px-3 text-[13px] cursor-pointer box-border hover:text-fg ${chips.length > 0 ? "border-primary/50 bg-primary/10 text-fg" : "border-line bg-transparent text-muted-foreground"}`}
+              />
+            }
+          >
+            <SlidersHorizontalIcon className="size-4" aria-hidden="true" />
+            <span className="hidden sm:inline">Filters</span>
+            {chips.length > 0 && (
+              <span className="rounded-full bg-primary px-1.5 text-[11px] leading-[18px] text-primary-foreground tabular-nums">
+                {chips.length}
+              </span>
+            )}
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-[min(18rem,calc(100vw-2rem))] gap-3 p-3">
+            {children}
+          </PopoverContent>
+        </Popover>
+        {trailing}
+      </div>
+      {chips.length > 0 && (
+        <div className="flex flex-wrap items-center gap-1.5" aria-label="Active filters">
+          {chips.map((chip) => (
+            <button
+              key={chip.key}
+              type="button"
+              className="flex h-[26px] items-center gap-1 rounded-full border border-line bg-panel px-2.5 text-[12px] text-fg cursor-pointer hover:border-fg/40"
+              aria-label={`Remove filter: ${chip.label}`}
+              onClick={chip.onRemove}
+            >
+              {chip.label}
+              <XIcon className="size-3 text-muted-foreground" aria-hidden="true" />
+            </button>
+          ))}
+          {chips.length > 1 && (
+            <button
+              type="button"
+              className="text-btn ml-1 text-[12px]"
+              onClick={() => {
+                for (const chip of chips) chip.onRemove();
+              }}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FilterSection({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid gap-1.5">
+      <div className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">{label}</div>
+      {children}
+    </div>
+  );
+}
+
+/** Single choice as pills; pressing the active pill clears it. */
+function ChoicePills<T extends string>({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string;
+  options: readonly { value: T; label: string }[];
+  value: T | null;
+  onChange: (next: T | null) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-1.5" role="group" aria-label={label}>
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          aria-pressed={value === option.value}
+          className="rounded-full border border-line px-2.5 py-1 text-[13px] text-muted-foreground cursor-pointer hover:text-fg aria-pressed:border-primary aria-pressed:bg-primary/10 aria-pressed:text-fg"
+          onClick={() => onChange(value === option.value ? null : option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+const TYPE_OPTIONS = FILE_TYPE_ORDER.map((type) => ({
+  value: type,
+  label: FILE_TYPE_LABELS[type],
+}));
+const SURFACE_OPTIONS = FILE_SURFACES.map((surface) => ({
+  value: surface,
+  label: FILE_SURFACE_LABELS[surface],
+}));
+const STATE_OPTIONS = (["open", "merged", "closed"] as const).map((state) => ({
+  value: state,
+  label: PR_STATE_LABELS[state],
+}));
+
+/** Type (by extension) and Device (the classifier's `ai.surface`); they combine. */
+export function TypeSections({
   value,
   onChange,
 }: {
   value: TypeFilter;
   onChange: (next: TypeFilter) => void;
 }) {
-  const current = value.surface ? `surface:${value.surface}` : (value.type ?? "");
   return (
-    <Select
-      className={`${SELECT_CLASS} flex-[0_1_10rem] min-w-[9rem]`}
-      aria-label="Filter by type"
-      value={current}
-      onChange={(event) => {
-        const raw = event.target.value;
-        onChange(
-          raw.startsWith("surface:")
-            ? { type: null, surface: parseSurfaceParam(raw.slice("surface:".length)) }
-            : { type: parseFileTypeParam(raw), surface: null },
-        );
-      }}
-    >
-      <option value="">All types</option>
-      {FILE_TYPE_ORDER.map((type) => (
-        <option key={type} value={type}>
-          {FILE_TYPE_LABELS[type]}
-        </option>
-      ))}
-      <optgroup label="Device">
-        {FILE_SURFACES.map((surface) => (
-          <option key={surface} value={`surface:${surface}`}>
-            {FILE_SURFACE_LABELS[surface]}
-          </option>
-        ))}
-      </optgroup>
-    </Select>
+    <>
+      <FilterSection label="Type">
+        <ChoicePills
+          label="Filter by type"
+          options={TYPE_OPTIONS}
+          value={value.type}
+          onChange={(type) => onChange({ ...value, type })}
+        />
+      </FilterSection>
+      <FilterSection label="Device">
+        <ChoicePills
+          label="Filter by device"
+          options={SURFACE_OPTIONS}
+          value={value.surface}
+          onChange={(surface) => onChange({ ...value, surface })}
+        />
+      </FilterSection>
+    </>
   );
 }
 
-export function RepoSelect({
+export function typeChips(value: TypeFilter, onChange: (next: TypeFilter) => void): FilterChip[] {
+  const chips: FilterChip[] = [];
+  if (value.type) {
+    chips.push({
+      key: "type",
+      label: FILE_TYPE_LABELS[value.type],
+      onRemove: () => onChange({ ...value, type: null }),
+    });
+  }
+  if (value.surface) {
+    chips.push({
+      key: "surface",
+      label: FILE_SURFACE_LABELS[value.surface],
+      onRemove: () => onChange({ ...value, surface: null }),
+    });
+  }
+  return chips;
+}
+
+/** Repo (PR view) or project (By page) picker; "" means all. */
+export function ScopeSelect({
+  label,
+  allLabel,
   value,
   options,
   onChange,
 }: {
+  label: string;
+  allLabel: string;
   value: string;
   options: string[];
-  onChange: (repo: string) => void;
+  onChange: (next: string) => void;
 }) {
   const all = value && !options.includes(value) ? [...options, value] : options;
   return (
-    <Select
-      className={`${SELECT_CLASS} flex-[0_1_16rem] min-w-[12rem]`}
-      aria-label="Filter by repo"
-      value={value}
-      onChange={(event) => onChange(event.target.value)}
-    >
-      <option value="">All repos</option>
-      {all.map((repo) => (
-        <option key={repo} value={repo}>
-          {repo}
-        </option>
-      ))}
-    </Select>
+    <FilterSection label={label}>
+      <Select
+        className="ul-select--sm min-h-9 w-full text-base sm:text-[13px] box-border"
+        aria-label={`Filter by ${label.toLowerCase()}`}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        <option value="">{allLabel}</option>
+        {all.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </Select>
+    </FilterSection>
   );
 }
 
-export function PrStateSelect({
+export function PrStateSection({
   value,
   onChange,
 }: {
@@ -100,16 +249,32 @@ export function PrStateSelect({
   onChange: (state: PrStateFilter | null) => void;
 }) {
   return (
-    <Select
-      className={`${SELECT_CLASS} flex-[0_1_9rem] min-w-[8rem]`}
-      aria-label="Filter by pull request state"
-      value={value ?? ""}
-      onChange={(event) => onChange(parsePrStateParam(event.target.value))}
-    >
-      <option value="">Any state</option>
-      <option value="open">Open</option>
-      <option value="merged">Merged</option>
-      <option value="closed">Closed</option>
-    </Select>
+    <FilterSection label="State">
+      <ChoicePills
+        label="Filter by pull request state"
+        options={STATE_OPTIONS}
+        value={value}
+        onChange={onChange}
+      />
+    </FilterSection>
+  );
+}
+
+export function prStateLabel(state: PrStateFilter): string {
+  return PR_STATE_LABELS[state];
+}
+
+export function MergedOnlyCheckbox({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <label className="flex items-center gap-2 text-[13px] cursor-pointer">
+      <Checkbox checked={checked} onCheckedChange={(next) => onChange(next === true)} />
+      Merged only
+    </label>
   );
 }
diff --git a/apps/web/src/components/files/PathFilterBar.tsx b/apps/web/src/components/files/PathFilterBar.tsx
index ad3f41c8..eee201d9 100644
--- a/apps/web/src/components/files/PathFilterBar.tsx
+++ b/apps/web/src/components/files/PathFilterBar.tsx
@@ -1,9 +1,10 @@
 /**
- * By page filter bar: project select, path input with autocomplete
- * (Cmd/Ctrl-K, "/") that also matches `screen` names, Grouped/Recent, Merged only. Moved from
- * ScreenshotsByPath.tsx. The Type select leads the bar.
+ * By page filter bar: path input with autocomplete (Cmd/Ctrl-K, "/") that
+ * also matches `screen` names, then Filters (Type, Device, Project, Merged
+ * only) and a Grouped / Newest first icon toggle.
  */
-import { Input, Select } from "@uploads/ui";
+import { Input } from "@uploads/ui";
+import { LayoutGridIcon, Rows3Icon } from "lucide-react";
 import { Kbd } from "@uploads/ui/components/ui/kbd";
 import { useEffect, useState, type KeyboardEvent as ReactKeyboardEvent } from "react";
 import type { PathCatalogEntry } from "../../lib/api-client";
@@ -13,7 +14,21 @@ import {
   type GroupBy,
   type RecentView,
 } from "../../lib/workspace-screenshots";
-import { TypeSelect, type TypeFilter } from "./FilterControls";
+import {
+  FilterBar,
+  FilterSection,
+  MergedOnlyCheckbox,
+  ScopeSelect,
+  TypeSections,
+  typeChips,
+  type FilterChip,
+  type TypeFilter,
+} from "./FilterControls";
+
+const LAYOUT_OPTIONS: { sort: RecentView; label: string; Icon: typeof Rows3Icon }[] = [
+  { sort: "grouped", label: "Grouped by page", Icon: Rows3Icon },
+  { sort: "recent", label: "Newest first", Icon: LayoutGridIcon },
+];
 
 export function PathFilterBar({
   project,
@@ -49,7 +64,6 @@ export function PathFilterBar({
   onPickPath: (picked: { path: string; by: GroupBy }) => void;
   onMerged: (merged: boolean) => void;
 }) {
-  const options = project && !projects.includes(project) ? [...projects, project] : projects;
   const [suggestOpen, setSuggestOpen] = useState(false);
   const [active, setActive] = useState(-1);
   const value = path || q;
@@ -95,135 +109,126 @@ export function PathFilterBar({
     }
   };
 
+  const chips: FilterChip[] = [
+    ...typeChips(type, onType),
+    ...(project ? [{ key: "project", label: project, onRemove: () => onProject("") }] : []),
+    ...(merged ? [{ key: "merged", label: "Merged only", onRemove: () => onMerged(false) }] : []),
+  ];
+
   return (
-    <div className="wsp-filter flex flex-wrap items-stretch gap-2">
-      <TypeSelect value={type} onChange={onType} />
-      <Select
-        className="ul-select--sm wsp-filter__project flex-[0_1_16rem] min-w-[12rem] max-w-full min-h-9 text-base sm:text-[13px] box-border"
-        aria-label="Filter by project"
-        value={project}
-        onChange={(event) => onProject(event.target.value)}
-      >
-        <option value="">All projects</option>
-        {options.map((label) => (
-          <option key={label} value={label}>
-            {label}
-          </option>
-        ))}
-      </Select>
-      <div className="wsp-filter__qwrap relative flex flex-[1_1_16rem] min-w-0">
-        <Input
-          id="wsp-path-filter"
-          type="search"
-          className={`wsp-filter__q flex-1 min-w-0 min-h-9 px-3 py-1.5 text-base sm:text-[13px] rounded-[6px] box-border${value === "" ? " pr-14" : ""}`}
-          aria-label="Filter by path or screen"
-          aria-keyshortcuts="Meta+K Control+K Slash"
-          aria-expanded={open}
-          aria-controls="wsp-path-suggest"
-          aria-activedescendant={active >= 0 ? `wsp-path-suggest-${active}` : undefined}
-          role="combobox"
-          placeholder="Filter path or screen  e.g. /catalog"
-          value={value}
-          spellCheck={false}
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          onChange={(event) => {
-            setSuggestOpen(true);
-            setActive(-1);
-            onQuery(event.target.value);
-          }}
-          onFocus={() => setSuggestOpen(true)}
-          onBlur={() => {
-            // Delay so a mousedown on an option can land first.
-            window.setTimeout(() => setSuggestOpen(false), 120);
-          }}
-          onKeyDown={onKeyDown}
-        />
-        {value === "" && (
-          <Kbd className="absolute top-1/2 right-2.5 -translate-y-1/2">{modKbd}</Kbd>
-        )}
-        {open && (
-          <ul
-            className="wsp-suggest absolute top-[calc(100%+4px)] left-0 right-0 z-30 m-0 max-h-[280px] list-none overflow-y-auto rounded-[6px] border border-line bg-panel p-1 shadow-[0_8px_24px_rgb(0_0_0_/_0.25)]"
-            id="wsp-path-suggest"
-            role="listbox"
-            aria-label="Paths"
-          >
-            {suggestions.map((entry, index) => (
-              <li key={`${entry.by}\0${entry.path}`} role="presentation">
-                <button
-                  type="button"
-                  role="option"
-                  id={`wsp-path-suggest-${index}`}
-                  aria-selected={index === active}
-                  className={`wsp-suggest__opt flex w-full items-baseline gap-3 rounded-sm border-0 bg-none px-2 py-1.5 text-left font-[inherit] text-inherit cursor-pointer ${index === active ? "is-active bg-bg" : ""}`}
-                  onMouseDown={(event) => {
-                    event.preventDefault();
-                    pick(entry);
-                  }}
-                  onMouseEnter={() => setActive(index)}
-                >
-                  <span className="wsp-suggest__path text-[13px] font-semibold [overflow-wrap:anywhere]">
-                    {entry.path}
-                    {entry.by === "screen" && (
-                      <span className="ml-2 text-[11px] font-normal text-muted-foreground">
-                        screen
-                      </span>
-                    )}
-                  </span>
-                  <span className="wsp-suggest__count ml-auto text-[12px] whitespace-nowrap text-muted-foreground">
-                    {formatShotCount(entry.count)}
-                  </span>
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-      {/* One flex item so the two toggle groups wrap together as a cluster —
-          separately they wrap independently and "Merged only" ends up
-          orphaned on its own row. */}
-      <div className="wsp-filter__toggles flex flex-none items-stretch gap-2">
-        <div
-          className="wsp-toggle flex items-stretch overflow-hidden rounded-[6px] border border-line box-border"
-          role="group"
-          aria-label="Layout"
-        >
-          <button
-            type="button"
-            className="wsp-toggle__opt min-h-[34px] whitespace-nowrap border-0 bg-none px-3 text-[13px] text-muted-foreground cursor-pointer first:border-l-0 [&+&]:border-l [&+&]:border-line aria-pressed:bg-panel aria-pressed:text-fg hover:text-fg focus-visible:text-fg"
-            aria-pressed={sort === "grouped"}
-            onClick={() => onSort("grouped")}
-          >
-            Grouped
-          </button>
-          <button
-            type="button"
-            className="wsp-toggle__opt min-h-[34px] whitespace-nowrap border-0 bg-none px-3 text-[13px] text-muted-foreground cursor-pointer [&+&]:border-l [&+&]:border-line aria-pressed:bg-panel aria-pressed:text-fg hover:text-fg focus-visible:text-fg"
-            aria-pressed={sort === "recent"}
-            onClick={() => onSort("recent")}
-          >
-            Recent
-          </button>
+    <FilterBar
+      chips={chips}
+      search={
+        <div className="wsp-filter__qwrap relative flex flex-1 min-w-0">
+          <Input
+            id="wsp-path-filter"
+            type="search"
+            className={`wsp-filter__q flex-1 min-w-0 min-h-9 px-3 py-1.5 text-base sm:text-[13px] rounded-[6px] box-border${value === "" ? " sm:pr-14" : ""}`}
+            aria-label="Filter by path or screen"
+            aria-keyshortcuts="Meta+K Control+K Slash"
+            aria-expanded={open}
+            aria-controls="wsp-path-suggest"
+            aria-activedescendant={active >= 0 ? `wsp-path-suggest-${active}` : undefined}
+            role="combobox"
+            placeholder="Search paths and screens"
+            value={value}
+            spellCheck={false}
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            onChange={(event) => {
+              setSuggestOpen(true);
+              setActive(-1);
+              onQuery(event.target.value);
+            }}
+            onFocus={() => setSuggestOpen(true)}
+            onBlur={() => {
+              // Delay so a mousedown on an option can land first.
+              window.setTimeout(() => setSuggestOpen(false), 120);
+            }}
+            onKeyDown={onKeyDown}
+          />
+          {value === "" && (
+            <Kbd className="max-sm:hidden absolute top-1/2 right-2.5 -translate-y-1/2">
+              {modKbd}
+            </Kbd>
+          )}
+          {open && (
+            <ul
+              className="wsp-suggest absolute top-[calc(100%+4px)] left-0 right-0 z-30 m-0 max-h-[280px] list-none overflow-y-auto rounded-[6px] border border-line bg-panel p-1 shadow-[0_8px_24px_rgb(0_0_0_/_0.25)]"
+              id="wsp-path-suggest"
+              role="listbox"
+              aria-label="Paths"
+            >
+              {suggestions.map((entry, index) => (
+                <li key={`${entry.by}\0${entry.path}`} role="presentation">
+                  <button
+                    type="button"
+                    role="option"
+                    id={`wsp-path-suggest-${index}`}
+                    aria-selected={index === active}
+                    className={`wsp-suggest__opt flex w-full items-baseline gap-3 rounded-sm border-0 bg-none px-2 py-1.5 text-left font-[inherit] text-inherit cursor-pointer ${index === active ? "is-active bg-bg" : ""}`}
+                    onMouseDown={(event) => {
+                      event.preventDefault();
+                      pick(entry);
+                    }}
+                    onMouseEnter={() => setActive(index)}
+                  >
+                    <span className="wsp-suggest__path text-[13px] font-semibold [overflow-wrap:anywhere]">
+                      {entry.path}
+                      {entry.by === "screen" && (
+                        <span className="ml-2 text-[11px] font-normal text-muted-foreground">
+                          screen
+                        </span>
+                      )}
+                    </span>
+                    <span className="wsp-suggest__count ml-auto text-[12px] whitespace-nowrap text-muted-foreground">
+                      {formatShotCount(entry.count)}
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
-        {/* Persisted PR merge-state tagging: filters both the drill-in
-            (meta.gh.merged=true) and the grouped overview (?merged=1). */}
+      }
+      trailing={
         <div
-          className="wsp-toggle flex items-stretch overflow-hidden rounded-[6px] border border-line box-border"
+          className="wsp-toggle flex flex-none items-stretch overflow-hidden rounded-[6px] border border-line box-border"
           role="group"
-          aria-label="Merge filter"
+          aria-label="Layout"
         >
-          <button
-            type="button"
-            className="wsp-toggle__opt min-h-[34px] whitespace-nowrap border-0 bg-none px-3 text-[13px] text-muted-foreground cursor-pointer aria-pressed:bg-panel aria-pressed:text-fg hover:text-fg focus-visible:text-fg"
-            aria-pressed={merged}
-            onClick={() => onMerged(!merged)}
-          >
-            Merged only
-          </button>
+          {LAYOUT_OPTIONS.map(({ sort: option, label, Icon }) => (
+            <button
+              key={option}
+              type="button"
+              className="wsp-toggle__opt flex w-9 items-center justify-center border-0 bg-none text-muted-foreground cursor-pointer [&+&]:border-l [&+&]:border-line aria-pressed:bg-panel aria-pressed:text-fg hover:text-fg focus-visible:text-fg"
+              aria-pressed={sort === option}
+              aria-label={label}
+              title={label}
+              onClick={() => onSort(option)}
+            >
+              <Icon className="size-4" aria-hidden="true" />
+            </button>
+          ))}
         </div>
-      </div>
-    </div>
+      }
+    >
+      <TypeSections value={type} onChange={onType} />
+      {projects.length > 0 || project ? (
+        <ScopeSelect
+          label="Project"
+          allLabel="All projects"
+          value={project}
+          options={projects}
+          onChange={onProject}
+        />
+      ) : null}
+      {/* Persisted PR merge-state tagging: filters both the drill-in
+          (meta.gh.merged=true) and the grouped overview (?merged=1). */}
+      <FilterSection label="Pull requests">
+        <MergedOnlyCheckbox checked={merged} onChange={onMerged} />
+      </FilterSection>
+    </FilterBar>
   );
 }
diff --git a/apps/web/src/components/files/PullsView.tsx b/apps/web/src/components/files/PullsView.tsx
index e9dbb0b1..e20cf641 100644
--- a/apps/web/src/components/files/PullsView.tsx
+++ b/apps/web/src/components/files/PullsView.tsx
@@ -32,7 +32,14 @@ import { githubUrl } from "../../lib/gh-context";
 import type { WorkspaceInfoStatus } from "../../lib/workspace-file-row";
 import { lastUpdatedLabel } from "../../lib/workspace-screenshots";
 import { CommandEmpty, InlineEmpty, RowsSkeleton } from "./FilesEmpty";
-import { PrStateSelect, RepoSelect, TypeSelect } from "./FilterControls";
+import {
+  FilterBar,
+  PrStateSection,
+  ScopeSelect,
+  TypeSections,
+  prStateLabel,
+  typeChips,
+} from "./FilterControls";
 import { LoadMoreFooter } from "./LoadMoreFooter";
 import { RowOverflowMenu, useLiveLink, type LiveLinkControls } from "./LiveLink";
 import type { PreviewHandlers } from "./ShotThumb";
@@ -141,15 +148,33 @@ function PullsViewInner({
 
   return (
     <div className="wsp grid gap-6" aria-busy={list.status === "loading" || undefined}>
-      <div className="wsp-filter flex flex-wrap items-stretch gap-2">
-        <TypeSelect value={query} onChange={(next) => setQuery({ ...query, ...next })} />
-        <RepoSelect
+      <FilterBar
+        chips={[
+          ...typeChips(query, (next) => setQuery({ ...query, ...next })),
+          ...(query.repo
+            ? [{ key: "repo", label: query.repo, onRemove: () => setQuery({ ...query, repo: "" }) }]
+            : []),
+          ...(query.state
+            ? [
+                {
+                  key: "state",
+                  label: prStateLabel(query.state),
+                  onRemove: () => setQuery({ ...query, state: null }),
+                },
+              ]
+            : []),
+        ]}
+      >
+        <TypeSections value={query} onChange={(next) => setQuery({ ...query, ...next })} />
+        <ScopeSelect
+          label="Repo"
+          allLabel="All repos"
           value={query.repo}
           options={repoOptions}
           onChange={(repo) => setQuery({ ...query, repo })}
         />
-        <PrStateSelect value={query.state} onChange={(state) => setQuery({ ...query, state })} />
-      </div>
+        <PrStateSection value={query.state} onChange={(state) => setQuery({ ...query, state })} />
+      </FilterBar>
 
       {list.status === "loading" && !keptRows && <RowsSkeleton rows={4} />}
       {list.status === "error" && (
diff --git a/apps/web/src/components/files/ReposView.tsx b/apps/web/src/components/files/ReposView.tsx
index e8e3f0a4..4d0332fa 100644
--- a/apps/web/src/components/files/ReposView.tsx
+++ b/apps/web/src/components/files/ReposView.tsx
@@ -21,7 +21,7 @@ import {
 import type { WorkspaceInfoStatus } from "../../lib/workspace-file-row";
 import { lastUpdatedLabel } from "../../lib/workspace-screenshots";
 import { CommandEmpty, RowsSkeleton } from "./FilesEmpty";
-import { TypeSelect } from "./FilterControls";
+import { FilterBar, TypeSections, typeChips } from "./FilterControls";
 import { GitHubMark } from "./gh-glyphs";
 import { LoadMoreFooter } from "./LoadMoreFooter";
 import { RowOverflowMenu, useLiveLink, type LiveLinkControls } from "./LiveLink";
@@ -90,9 +90,9 @@ function ReposViewInner({
 
   return (
     <div className="wsp grid gap-6" aria-busy={list.status === "loading" || undefined}>
-      <div className="wsp-filter flex flex-wrap items-stretch gap-2">
-        <TypeSelect value={query} onChange={(next) => setQuery({ ...query, ...next })} />
-      </div>
+      <FilterBar chips={typeChips(query, (next) => setQuery({ ...query, ...next }))}>
+        <TypeSections value={query} onChange={(next) => setQuery({ ...query, ...next })} />
+      </FilterBar>
       {list.status === "loading" && <RowsSkeleton rows={4} />}
       {list.status === "error" && (
         <Callout tone="error" role="alert">
diff --git a/apps/web/src/components/files/ScopePage.tsx b/apps/web/src/components/files/ScopePage.tsx
index 8507114e..4be47583 100644
--- a/apps/web/src/components/files/ScopePage.tsx
+++ b/apps/web/src/components/files/ScopePage.tsx
@@ -52,7 +52,7 @@ import {
 import type { WorkspaceInfoStatus } from "../../lib/workspace-file-row";
 import { lastUpdatedLabel, pairedShotKeys } from "../../lib/workspace-screenshots";
 import { CommandEmpty, InlineEmpty, RowsSkeleton } from "./FilesEmpty";
-import { TypeSelect } from "./FilterControls";
+import { FilterBar, TypeSections, typeChips } from "./FilterControls";
 import { LoadMoreFooter } from "./LoadMoreFooter";
 import { useLiveLink } from "./LiveLink";
 import { ShotThumb, type PreviewHandlers } from "./ShotThumb";
@@ -326,25 +326,29 @@ function ScopePageInner({
         </section>
       )}
 
-      <div className="wsp-filter flex flex-wrap items-stretch gap-2">
-        <TypeSelect value={query} onChange={(next) => setQuery({ ...query, ...next })} />
-        {number !== null && (
-          <div
-            className="wsp-toggle flex items-stretch overflow-hidden rounded-[6px] border border-line box-border"
-            role="group"
-            aria-label="Grouping"
-          >
-            <button
-              type="button"
-              className="wsp-toggle__opt min-h-[34px] whitespace-nowrap border-0 bg-none px-3 text-[13px] text-muted-foreground cursor-pointer aria-pressed:bg-panel aria-pressed:text-fg hover:text-fg focus-visible:text-fg"
-              aria-pressed={query.groupByPath}
-              onClick={() => setQuery({ ...query, groupByPath: !query.groupByPath })}
+      <FilterBar
+        chips={typeChips(query, (next) => setQuery({ ...query, ...next }))}
+        trailing={
+          number !== null && (
+            <div
+              className="wsp-toggle flex flex-none items-stretch overflow-hidden rounded-[6px] border border-line box-border"
+              role="group"
+              aria-label="Grouping"
             >
-              Group by page
-            </button>
-          </div>
-        )}
-      </div>
+              <button
+                type="button"
+                className="wsp-toggle__opt min-h-[34px] whitespace-nowrap border-0 bg-none px-3 text-[13px] text-muted-foreground cursor-pointer aria-pressed:bg-panel aria-pressed:text-fg hover:text-fg focus-visible:text-fg"
+                aria-pressed={query.groupByPath}
+                onClick={() => setQuery({ ...query, groupByPath: !query.groupByPath })}
+              >
+                Group by page
+              </button>
+            </div>
+          )
+        }
+      >
+        <TypeSections value={query} onChange={(next) => setQuery({ ...query, ...next })} />
+      </FilterBar>
 
       {list.status === "loading" && (
         <div className={GRID_CLASS} aria-busy="true">
diff --git a/apps/web/src/lib/files-view-state.test.ts b/apps/web/src/lib/files-view-state.test.ts
index eea2155b..dc13cd70 100644
--- a/apps/web/src/lib/files-view-state.test.ts
+++ b/apps/web/src/lib/files-view-state.test.ts
@@ -246,6 +246,8 @@ describe("small mappers", () => {
     expect(typeEmptyNoun("screenshot")).toBe("screenshots");
     expect(typeEmptyNoun("video")).toBe("videos");
     expect(typeEmptyNoun("other")).toBe("other files");
+    expect(typeEmptyNoun(null, "mobile")).toBe("mobile files");
+    expect(typeEmptyNoun("video", "mobile")).toBe("mobile videos");
   });
 });
 
diff --git a/apps/web/src/lib/files-view-state.ts b/apps/web/src/lib/files-view-state.ts
index 3b2f50fe..55b028cb 100644
--- a/apps/web/src/lib/files-view-state.ts
+++ b/apps/web/src/lib/files-view-state.ts
@@ -220,11 +220,15 @@ export function typeEmptyNoun(
   type: FileTypeClass | null,
   surface: FileSurface | null = null,
 ): string {
-  if (surface) return `${FILE_SURFACE_LABELS[surface].toLowerCase()} files`;
-  if (type === "screenshot") return "screenshots";
-  if (type === "video") return "videos";
-  if (type === "other") return "other files";
-  return "files";
+  const noun =
+    type === "screenshot"
+      ? "screenshots"
+      : type === "video"
+        ? "videos"
+        : type === "other"
+          ? "other files"
+          : "files";
+  return surface ? `${FILE_SURFACE_LABELS[surface].toLowerCase()} ${noun}` : noun;
 }
 
 export type PullsEmptyCopy =