diff --git a/app/_genes/GeneQueryDialog.tsx b/app/_genes/GeneQueryDialog.tsx
new file mode 100644
index 00000000..a1108ee4
--- /dev/null
+++ b/app/_genes/GeneQueryDialog.tsx
@@ -0,0 +1,312 @@
+"use client";
+// THE way a reader enters genes: one dialog for every place a page asks for a gene list or an OQL
+// query. Search (genes, their aliases, gene sets), the query as text, a check of every entry as it
+// is typed (does it parse, is each symbol a gene, an alias of one, or neither), and the lists this
+// browser has used or saved. `mode` decides what the text is: "oql" — each entry a gene and what
+// counts as altered in it — or "genes", cBioPortal's gene list, where `[A B]` is one merged row.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { BookmarkPlus, Check, CircleAlert, History, Search, Star, Trash2, TriangleAlert, X } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../_ui/dialog";
+import { Button } from "../_ui/button";
+import { Input } from "../_ui/input";
+import { Textarea } from "../_ui/textarea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../_ui/tabs";
+import { SEG_TAB, SEG_TABS, TB, FIELD } from "../_ui/toolbar.ts";
+import { formatGeneList, MAX_GENE_SYMBOLS, type GeneTrackSpec } from "../../lib/gene-tracks.ts";
+import { checkGeneQuery, replaceSymbol, OQL_HELP, OQL_REFUSED, type GeneQueryMode, type QueryCheck } from "../../lib/gene-query.ts";
+import type { GeneCheck, GeneHit, GeneSetHit } from "../../lib/genes.ts";
+import { api } from "../lab/api.ts";
+import { useGeneLists, type GeneList } from "./gene-lists.ts";
+import { cn } from "../../lib/cn";
+
+// ---- the catalog, asked once per symbol per page ----------------------------------------------
+
+const known = new Map<string, GeneCheck>();
+
+/** each symbol's check, fetched for those not yet asked; `pending` while any is in flight */
+function useSymbolChecks(symbols: string[]): { checks: Map<string, GeneCheck>; pending: boolean; error: string | null } {
+  const [, bump] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const missing = symbols.filter((s) => !known.has(s));
+  const key = missing.join(",");
+  useEffect(() => {
+    if (!key) return;
+    let live = true;
+    setError(null);
+    const t = setTimeout(() => {
+      api.genes({ symbols: key.split(",") }).then((r) => r.json()).then((j) => {
+        if (j.error) throw new Error(j.error);
+        for (const c of j.checks as GeneCheck[]) known.set(c.symbol, c);
+        if (live) bump((n) => n + 1);
+      }).catch((e) => { if (live) setError(String(e.message || e)); });
+    }, 250);
+    return () => { live = false; clearTimeout(t); };
+  }, [key]);
+  return { checks: known, pending: missing.length > 0 && !error, error };
+}
+
+function useSearch(q: string): { genes: GeneHit[]; sets: GeneSetHit[]; loading: boolean } {
+  const [res, setRes] = useState<{ q: string; genes: GeneHit[]; sets: GeneSetHit[] }>({ q: "", genes: [], sets: [] });
+  useEffect(() => {
+    if (!q.trim()) return;
+    let live = true;
+    const t = setTimeout(() => {
+      api.genes({ search: q }).then((r) => r.json()).then((j) => { if (live && !j.error) setRes({ q, genes: j.genes, sets: j.sets }); }).catch(() => {});
+    }, 200);
+    return () => { live = false; clearTimeout(t); };
+  }, [q]);
+  return { genes: res.q === q ? res.genes : [], sets: res.q === q ? res.sets : [], loading: !!q.trim() && res.q !== q };
+}
+
+// ---- the dialog -----------------------------------------------------------------------------
+
+export interface GeneQueryDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  /** what the query is for, under the title */
+  description?: string;
+  mode: GeneQueryMode;
+  /** the query as the page holds it */
+  value: string;
+  /** the query applied: its text, as the reader left it, and what it says */
+  onApply: (text: string, check: QueryCheck) => void;
+  /** the fewest and most distinct genes the place it is for takes */
+  min?: number;
+  max?: number;
+  /** in "genes" mode, whether `[A B]` merged rows are taken (the oncoprint's) */
+  groups?: boolean;
+}
+
+export function GeneQueryDialog(p: GeneQueryDialogProps) {
+  return (
+    <Dialog open={p.open} onOpenChange={p.onOpenChange}>
+      {p.open && <GeneQueryBody {...p} />}
+    </Dialog>
+  );
+}
+
+const PLACEHOLDER: Record<GeneQueryMode, string> = {
+  oql: "KRAS: MUT\nBRAF: V600E\nCDKN2A: HOMDEL",
+  genes: "TP53 KRAS PIK3CA",
+};
+
+function GeneQueryBody({ onOpenChange, title, description, mode, value, onApply, min = 1, max = 30, groups = false }: GeneQueryDialogProps) {
+  const [text, setText] = useState(value);
+  const [q, setQ] = useState("");
+  const [setError, setSetError] = useState<string | null>(null);
+  const [saving, setSaving] = useState<string | null>(null);
+  const area = useRef<HTMLTextAreaElement>(null);
+  const lists = useGeneLists();
+  const check = useMemo(() => checkGeneQuery(text, mode), [text, mode]);
+  const { checks, pending, error: checkError } = useSymbolChecks(check.genes);
+  const found = useSearch(q);
+
+  const sep = mode === "oql" ? "\n" : " ";
+  const append = (more: string[]) => {
+    const have = new Set(check.genes);
+    const add = more.map((g) => g.toUpperCase()).filter((g) => !have.has(g));
+    if (!add.length) return;
+    setText((t) => (t.trim() ? t.replace(/\s+$/, "") + sep : "") + add.join(sep));
+    setQ("");
+    area.current?.focus();
+  };
+  const addSet = (name: string) => {
+    setSetError(null);
+    api.genes({ geneset: name }).then((r) => r.json()).then((j) => { if (j.error) setSetError(j.error); else append(j.members); })
+      .catch((e) => setSetError(String(e.message || e)));
+  };
+
+  // what stands between the text and Apply, each said in words
+  const aliases = check.genes.map((g) => checks.get(g)).filter((c): c is GeneCheck => c?.status === "alias");
+  const unknown = check.genes.map((g) => checks.get(g)).filter((c): c is GeneCheck => c?.status === "unknown");
+  const entryErrors = check.entries.filter((e) => e.error);
+  const problems = [
+    check.error,
+    mode === "genes" && !groups && check.tracks?.some((t) => typeof t !== "string") ? "merged rows ([A B]) are the oncoprint's; list each gene on its own here" : null,
+    ...entryErrors.map((e) => e.text + " — " + e.error),
+    ...unknown.map((c) => c.symbol + " is not a gene symbol"),
+    ...aliases.map((c) => c.symbol + " is an alias of " + c.hugo!.join(" / ")),
+    !check.genes.length ? "enter at least " + (min === 1 ? "one gene" : min + " genes") : null,
+    check.genes.length && check.genes.length < min ? "this takes at least " + min + " genes; there are " + check.genes.length : null,
+    check.genes.length > max ? "this takes at most " + max + " genes; there are " + check.genes.length : null,
+  ].filter(Boolean) as string[];
+  const blocked = problems.length > 0 || pending;
+  const fixAll = () => setText((t) => aliases.reduce((acc, c) => c.hugo!.length === 1 ? replaceSymbol(acc, c.symbol, c.hugo![0]) : acc, t));
+
+  const apply = () => { lists.remember(text, mode); onApply(text.trim(), check); onOpenChange(false); };
+  const mine = (l: GeneList) => l.mode === mode;
+
+  return (
+    <DialogContent data-tw className="gene-query-dialog gap-4 sm:max-w-4xl" onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !blocked) apply(); }}>
+      <DialogHeader>
+        <DialogTitle className="text-lg">{title}</DialogTitle>
+        <DialogDescription className="text-md">
+          {description || (mode === "oql" ? "One gene per line, optionally with what counts as altered in it (OQL)." : "Gene symbols separated by spaces" + (groups ? "; [A B] draws A and B as one row." : "."))}
+        </DialogDescription>
+      </DialogHeader>
+      <div className="grid min-w-0 gap-4 md:grid-cols-[minmax(0,1fr)_17rem]">
+        {/* ---- the query ---- */}
+        <div className="flex min-w-0 flex-col gap-2.5">
+          <div className="relative">
+            <Search className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
+            <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="search genes, aliases or gene sets…" aria-label="search genes"
+              className={cn(FIELD, "h-9 pl-8")}
+              onKeyDown={(e) => { if (e.key === "Enter" && found.genes[0]) { e.preventDefault(); append([found.genes[0].symbol]); } }} />
+            {q.trim() && (
+              <div role="listbox" aria-label="matching genes" className="absolute inset-x-0 top-full z-10 mt-1 max-h-72 overflow-y-auto rounded-md border bg-popover p-1 shadow-md">
+                {found.loading && <div className="waiting px-2 py-1.5"><span className="spinner" /> searching…</div>}
+                {!found.loading && !found.genes.length && !found.sets.length && <div className="px-2 py-1.5 text-sm text-muted-foreground">no gene or gene set matches “{q}”</div>}
+                {found.genes.map((g) => (
+                  <button key={g.symbol} type="button" role="option" aria-selected={false} onClick={() => append([g.symbol])}
+                    className="flex w-full items-baseline gap-2 rounded-sm border-0 bg-transparent px-2 py-1 text-left hover:bg-accent">
+                    <span className="font-mono text-md font-medium">{g.symbol}</span>
+                    <span className="text-sm text-muted-foreground">{g.aliasOf ? "for “" + g.aliasOf + "” (alias)" : g.type}</span>
+                    {check.genes.includes(g.symbol.toUpperCase()) && <Check className="ml-auto size-3.5 text-primary" aria-label="already in the query" />}
+                  </button>
+                ))}
+                {found.sets.length > 0 && <div className="mt-1 border-t px-2 pt-1.5 pb-0.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase">Gene sets</div>}
+                {found.sets.map((s) => (
+                  <button key={s.name} type="button" role="option" aria-selected={false} disabled={s.size > 30} onClick={() => addSet(s.name)}
+                    title={s.size > 30 ? "has " + s.size + " genes; a query takes at most 30" : "add its " + s.size + " genes"}
+                    className="flex w-full items-baseline gap-2 rounded-sm border-0 bg-transparent px-2 py-1 text-left hover:bg-accent disabled:opacity-50 disabled:hover:bg-transparent">
+                    <span className="min-w-0 truncate font-mono text-sm">{s.name}</span>
+                    <span className="ml-auto shrink-0 text-sm text-muted-foreground tabular-nums">{s.size} genes</span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          {setError && <p className="m-0 text-sm text-destructive">{setError}</p>}
+          <Textarea ref={area} value={text} onChange={(e) => setText(e.target.value)} spellCheck={false} rows={6}
+            aria-label={mode === "oql" ? "OQL query" : "gene list"} placeholder={PLACEHOLDER[mode] + (groups ? " [\"RTK\" EGFR ERBB2 MET]" : "")}
+            className="min-h-36 bg-paper font-mono text-md md:text-md" />
+          {/* every entry as it reads */}
+          <div className="rounded-md border" aria-live="polite">
+            <div className="flex items-center gap-2 border-b px-2.5 py-1.5 text-sm text-muted-foreground">
+              <span className="font-semibold tracking-wide uppercase">Check</span>
+              <span className="tabular-nums">{check.genes.length} gene{check.genes.length === 1 ? "" : "s"}</span>
+              {pending && <span className="waiting"><span className="spinner" /> checking symbols…</span>}
+              {checkError && <span className="text-destructive">could not check symbols: {checkError}</span>}
+              {aliases.some((c) => c.hugo!.length === 1) && (
+                <Button variant="link" size="inline" className="ml-auto" onClick={fixAll}>use the official symbols</Button>
+              )}
+            </div>
+            <ul className="m-0 max-h-48 list-none overflow-y-auto p-0">
+              {check.error && <li className="flex gap-2 px-2.5 py-1 text-sm text-destructive"><CircleAlert className="mt-0.5 size-3.5 shrink-0" />{check.error}</li>}
+              {!check.entries.length && !check.error && <li className="px-2.5 py-1.5 text-sm text-muted-foreground">nothing entered yet</li>}
+              {check.entries.map((e, i) => {
+                const cs = e.genes.map((g) => checks.get(g));
+                const bad = e.error || cs.some((c) => c?.status === "unknown");
+                const alias = cs.find((c) => c?.status === "alias");
+                const wait = cs.some((c) => !c);
+                return (
+                  <li key={i} className="flex items-baseline gap-2 border-b px-2.5 py-1 text-sm last:border-b-0">
+                    {bad ? <CircleAlert className="size-3.5 shrink-0 translate-y-0.5 text-destructive" aria-label="problem" />
+                      : alias ? <TriangleAlert className="size-3.5 shrink-0 translate-y-0.5 text-mark" aria-label="alias" />
+                      : wait ? <span className="spinner shrink-0" />
+                      : <Check className="size-3.5 shrink-0 translate-y-0.5 text-primary" aria-label="ok" />}
+                    <code className="shrink-0 font-mono text-md">{e.text}</code>
+                    <span className={cn("min-w-0", bad ? "text-destructive" : "text-muted-foreground")}>
+                      {e.error ? e.error
+                        : cs.filter((c) => c?.status === "unknown").length ? cs.filter((c) => c?.status === "unknown").map((c) => c!.symbol).join(", ") + " is not a gene symbol"
+                        : alias ? <>alias of {alias.hugo!.map((h, k) => <span key={h}>{k ? " / " : ""}
+                            <Button variant="link" size="inline" className="font-mono" onClick={() => setText((t) => replaceSymbol(t, alias.symbol, h))}>{h}</Button></span>)} — click to use it</>
+                        : e.meaning}
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+        {/* ---- lists and help ---- */}
+        <Tabs defaultValue={lists.recent.some(mine) || lists.saved.some(mine) ? "recent" : "help"} className="min-w-0 gap-2.5">
+          <TabsList className={SEG_TABS} aria-label="gene lists and help">
+            <TabsTrigger value="recent" className={SEG_TAB}><History />Recent</TabsTrigger>
+            <TabsTrigger value="saved" className={SEG_TAB}><Star />Saved</TabsTrigger>
+            <TabsTrigger value="help" className={SEG_TAB}>{mode === "oql" ? "OQL help" : "Syntax"}</TabsTrigger>
+          </TabsList>
+          <TabsContent value="recent" className="m-0">
+            <ListOf items={lists.recent.filter(mine)} empty="Queries you apply are kept here, in this browser." onUse={setText}
+              onRemove={(l) => lists.forget(l.at)} />
+          </TabsContent>
+          <TabsContent value="saved" className="m-0">
+            <ListOf items={lists.saved.filter(mine)} empty="Save a query you will reuse — “Save list…” below. Saved in this browser." onUse={setText}
+              onRemove={(l) => lists.unsave(l.name!)} />
+          </TabsContent>
+          <TabsContent value="help" className="m-0">
+            {mode === "oql" ? (
+              <div className="flex flex-col gap-1">
+                {OQL_HELP.map((h) => (
+                  <button key={h.q} type="button" onClick={() => setText((t) => (t.trim() ? t.replace(/\s+$/, "") + "\n" : "") + h.q)}
+                    title="add this line to the query" className="rounded-sm border-0 bg-transparent px-1.5 py-1 text-left hover:bg-accent">
+                    <code className="block font-mono text-sm font-medium">{h.q}</code>
+                    <span className="block text-xs text-muted-foreground">{h.means}</span>
+                  </button>
+                ))}
+                <p className="mt-1.5 mb-0 text-xs text-muted-foreground">Entries on separate lines (or split by “;”) are alternatives: a patient is altered if any of them matches. {OQL_REFUSED}</p>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-2 text-sm text-muted-foreground">
+                <p className="m-0">Symbols separated by spaces, commas or new lines: <code className="font-mono">TP53 KRAS PIK3CA</code>.</p>
+                {groups && <p className="m-0"><code className="font-mono">[EGFR ERBB2]</code> draws both as one merged row; a label goes first in quotes: <code className="font-mono">[&quot;RTK&quot; EGFR ERBB2 MET]</code>.</p>}
+                <p className="m-0">Per-gene OQL (<code className="font-mono">TP53: MUT</code>) is not taken here — a row draws every alteration type its gene has. To restrict the patients, give the view a cohort with an OQL clause.</p>
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+      </div>
+      <DialogFooter className="items-center gap-2 sm:justify-between">
+        {saving == null
+          ? <Button variant="outline" size="sm" className={TB} disabled={!check.genes.length} onClick={() => setSaving("")}><BookmarkPlus />Save list…</Button>
+          : <form className="flex items-center gap-1.5" onSubmit={(e) => { e.preventDefault(); if (saving.trim()) { lists.save(saving, text, mode); setSaving(null); } }}>
+              <Input autoFocus value={saving} onChange={(e) => setSaving(e.target.value)} placeholder="name this list" aria-label="list name" className={cn(FIELD, "w-48")} />
+              <Button size="sm" className={cn(TB, "font-medium")} type="submit" disabled={!saving.trim()}>Save</Button>
+              <Button variant="ghost" size="icon-xs" type="button" aria-label="cancel saving" onClick={() => setSaving(null)}><X /></Button>
+            </form>}
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground" title={problems.join("\n")}>
+            {pending ? "checking symbols…" : problems.length ? problems.length + " to fix" : ""}
+          </span>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+          <Button onClick={apply} disabled={blocked} title={blocked ? (pending ? "waiting for the symbols to be checked" : problems.join("\n")) : "apply (⌘/Ctrl+Enter)"}>Apply</Button>
+        </div>
+      </DialogFooter>
+    </DialogContent>
+  );
+}
+
+function ListOf({ items, empty, onUse, onRemove }: { items: GeneList[]; empty: string; onUse: (text: string) => void; onRemove: (l: GeneList) => void }) {
+  if (!items.length) return <p className="m-0 text-sm text-muted-foreground">{empty}</p>;
+  return (
+    <ul className="m-0 flex max-h-80 list-none flex-col gap-1 overflow-y-auto p-0">
+      {items.map((l) => (
+        <li key={l.name ?? l.at} className="group flex items-start gap-1 rounded-sm hover:bg-accent">
+          <button type="button" className="min-w-0 flex-1 border-0 bg-transparent px-1.5 py-1 text-left" onClick={() => onUse(l.text)} title={"use this query:\n" + l.text}>
+            {l.name && <span className="block text-sm font-medium">{l.name}</span>}
+            <code className="line-clamp-2 block font-mono text-xs break-all text-muted-foreground">{l.text.replace(/\n/g, "; ")}</code>
+          </button>
+          <Button variant="ghost" size="icon-xs" className="mt-1 opacity-0 group-hover:opacity-100 focus-visible:opacity-100" aria-label="remove from this list" onClick={() => onRemove(l)}><Trash2 /></Button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/** the dialog over a gene view's `genes` — the lab's gene views and the oncoprint card alike */
+export function ViewGenesDialog({ view, open, onOpenChange, onGenes }: {
+  view: { kind?: string; genes?: unknown } | null; open: boolean; onOpenChange: (open: boolean) => void;
+  onGenes: (genes: GeneTrackSpec[]) => void;
+}) {
+  const kind = view?.kind || "view";
+  // co-occurrence and co-expression are pairwise: one gene yields no pairs
+  const min = kind === "cooccurrence" || kind === "coexpression" ? 2 : 1;
+  return (
+    <GeneQueryDialog open={open && !!view} onOpenChange={onOpenChange} title={"Genes — " + (VIEW_NOUN[kind] || kind)} mode="genes"
+      value={formatGeneList(view?.genes)} min={min} max={MAX_GENE_SYMBOLS} groups={kind === "oncoprint"}
+      description={min === 2 ? "This view compares genes in pairs, so it needs at least two." : undefined}
+      onApply={(_, c) => { if (c.tracks) onGenes(c.tracks); }} />
+  );
+}
+const VIEW_NOUN: Record<string, string> = { oncoprint: "oncoprint", compare: "compare", cooccurrence: "co-occurrence", coexpression: "co-expression", hotspots: "lollipop" };
diff --git a/app/_genes/gene-lists.ts b/app/_genes/gene-lists.ts
new file mode 100644
index 00000000..95be38ce
--- /dev/null
+++ b/app/_genes/gene-lists.ts
@@ -0,0 +1,48 @@
+"use client";
+// The gene queries this browser has used (recent, kept automatically) and the ones the reader named
+// (saved), for the gene query dialog. Browser storage on purpose for now: a convenience per reader,
+// never part of a document, and the page works the same when storage is blocked.
+import { useCallback, useSyncExternalStore } from "react";
+import type { GeneQueryMode } from "../../lib/gene-query.ts";
+
+export interface GeneList { text: string; mode: GeneQueryMode; name?: string; at: number }
+interface Store { recent: GeneList[]; saved: GeneList[] }
+
+const KEY = "cbio-lab:gene-lists:v1";
+const RECENT_KEPT = 10;
+const EMPTY: Store = { recent: [], saved: [] };
+
+let cache: Store | null = null;
+const listeners = new Set<() => void>();
+
+function read(): Store {
+  if (cache) return cache;
+  try {
+    const j = JSON.parse(window.localStorage.getItem(KEY) || "null");
+    cache = j && Array.isArray(j.recent) && Array.isArray(j.saved) ? j : EMPTY;
+  } catch { cache = EMPTY; }
+  return cache!;
+}
+function write(next: Store) {
+  cache = next;
+  try { window.localStorage.setItem(KEY, JSON.stringify(next)); } catch { /* storage blocked: kept for this page only */ }
+  listeners.forEach((l) => l());
+}
+const same = (a: string, b: string) => a.replace(/\s+/g, " ").trim().toUpperCase() === b.replace(/\s+/g, " ").trim().toUpperCase();
+
+export function useGeneLists() {
+  const store = useSyncExternalStore((l) => { listeners.add(l); return () => listeners.delete(l); }, read, () => EMPTY);
+  /** a query that was applied: first in recent, once */
+  const remember = useCallback((text: string, mode: GeneQueryMode) => {
+    if (!text.trim()) return;
+    const s = read();
+    write({ ...s, recent: [{ text: text.trim(), mode, at: Date.now() }, ...s.recent.filter((r) => !(r.mode === mode && same(r.text, text)))].slice(0, RECENT_KEPT) });
+  }, []);
+  const save = useCallback((name: string, text: string, mode: GeneQueryMode) => {
+    const s = read();
+    write({ ...s, saved: [{ name: name.trim(), text: text.trim(), mode, at: Date.now() }, ...s.saved.filter((r) => r.name !== name.trim())] });
+  }, []);
+  const unsave = useCallback((name: string) => { const s = read(); write({ ...s, saved: s.saved.filter((r) => r.name !== name) }); }, []);
+  const forget = useCallback((at: number) => { const s = read(); write({ ...s, recent: s.recent.filter((r) => r.at !== at) }); }, []);
+  return { recent: store.recent, saved: store.saved, remember, save, unsave, forget };
+}
diff --git a/app/_oncoprint/OncoprintCard.tsx b/app/_oncoprint/OncoprintCard.tsx
index 0836140e..3b8e5dad 100644
--- a/app/_oncoprint/OncoprintCard.tsx
+++ b/app/_oncoprint/OncoprintCard.tsx
@@ -8,21 +8,19 @@
 import React, { useState } from "react";
 import OncoprintFigure, { type ColumnSelection } from "./OncoprintFigure.tsx";
 import { figureDisplayOf, withFigureDisplay, sortKeysOf, withSortKeys, sortKeyText } from "./view-display.ts";
-import { formatGeneList, geneSymbols, normalizeGeneTracks, parseGeneList, type GeneTrackSpec } from "../../lib/gene-tracks.ts";
+import { normalizeGeneTracks, type GeneTrackSpec } from "../../lib/gene-tracks.ts";
 import { heatmapTrackLabel, STUDY_TRACK } from "../../lib/profile-names.ts";
 import { isCustomAttr, attributeLabel, parseCustomAttr } from "../../lib/custom-data-names.ts";
 import type { UnpackedContract } from "../../lib/oncoprint-binary.ts";
 import type { UploadBinding } from "../lab/custom-data-client.ts";
-import { Plus, Rows3 } from "lucide-react";
+import { Rows3 } from "lucide-react";
 import { Button } from "../_ui/button";
-import { RemoveBadge } from "../_ui/remove-badge";
 import { Checkbox } from "../_ui/checkbox";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../_ui/dialog";
+import { ViewGenesDialog } from "../_genes/GeneQueryDialog.tsx";
 import { GearMenu } from "../_ui/gear-menu.tsx";
 import { Input } from "../_ui/input";
 import { OptionSelect } from "../_ui/choice.tsx";
 import { Tabs, TabsList, TabsTrigger } from "../_ui/tabs";
-import { Textarea } from "../_ui/textarea";
 import { FIELD, TB } from "../_ui/toolbar.ts";
 import { cn } from "../../lib/cn";
 
@@ -103,77 +101,6 @@ export const setDisplayKey = (v: V, key: string, value: unknown): V => {
   return next;
 };
 
-// ---- the gene list editor (any gene view; merged rows are the oncoprint's) -----------------------
-
-export function GeneListEditor({ view, busy, onGenes }: { view: V; busy: boolean; onGenes: (next: GeneTrackSpec[]) => void }) {
-  const [add, setAdd] = useState("");
-  const [text, setText] = useState<string | null>(null);
-  const [textErr, setTextErr] = useState<string | null>(null);
-  const list: GeneTrackSpec[] = view.genes || [];
-  // a list that cannot be read is still editable as text, which is how it gets fixed
-  let rows: { label: string; members: string[] }[] = [];
-  let listErr: string | null = null;
-  try { rows = normalizeGeneTracks(list).tracks; } catch (e) { listErr = String((e as Error).message || e); }
-  const symbols = geneSymbols(list);
-  // co-occurrence and co-expression are pairwise: one gene yields no pairs
-  const floor = (view.kind === "cooccurrence" || view.kind === "coexpression") ? 2 : 1;
-  const merges = view.kind === "oncoprint";
-  const drop = (label: string) => onGenes(list.filter((e) => geneRowLabel(e) !== label));
-  const commit = () => {
-    const g = add.trim().toUpperCase();
-    if (!g || symbols.includes(g)) { setAdd(""); return; }
-    onGenes([...list, g]);
-    setAdd("");
-  };
-  const applyText = () => {
-    try { onGenes(parseGeneList(text || "")); setTextErr(null); setText(null); }
-    catch (e) { setTextErr(String((e as Error).message || e)); }
-  };
-  return (
-    <div className="setcol">
-      <span className="meta">{rows.length} of 12 rows{merges && symbols.length !== rows.length ? " · " + symbols.length + " genes" : ""} — click one to remove it</span>
-      {listErr && <span className="mark">{listErr}</span>}
-      <div className="flex flex-wrap gap-1.5">
-        {rows.map(r => (
-          <span key={r.label} className={r.members.length > 1 ? "inline-flex items-center rounded-full border border-dashed border-primary pr-2" : "contents"}>
-            <RemoveBadge label={r.label} disabled={busy || rows.length <= floor} className={r.members.length > 1 ? "border-transparent bg-transparent" : undefined}
-              title={rows.length <= floor
-                ? (floor === 2 ? "this view compares pairs, so it needs at least two genes" : "a view needs at least one gene")
-                : r.members.length > 1 ? "remove this merged row (" + r.members.join(", ") + ")" : "remove " + r.label}
-              onClick={() => drop(r.label)} />
-            {merges && r.members.length > 1 && (
-              <Button type="button" variant="link" size="inline" disabled={busy}
-                title="draw each of these genes as its own row" onClick={() => onGenes(splitGeneTrack(view, r.label).genes)}>split</Button>
-            )}
-          </span>
-        ))}
-      </div>
-      <div className="setrow">
-        <Input list="view-genes" placeholder="add a gene…" value={add} disabled={busy || rows.length >= 12} className={cn(FIELD, "w-40 uppercase placeholder:normal-case")}
-          onChange={e => setAdd(e.target.value.toUpperCase())}
-          onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); commit(); } }} />
-        <Button type="button" variant="outline" size="sm" className={TB} disabled={busy || !add.trim() || rows.length >= 12}
-          onClick={commit}><Plus />add</Button>
-      </div>
-      {merges && (
-        <details onToggle={(e) => { if ((e.target as HTMLDetailsElement).open && text === null) setText(formatGeneList(list)); }}>
-          <summary className="meta">edit as text — cBioPortal&apos;s gene list, where <code>[TP53 MDM2]</code> is one merged row</summary>
-          <div className="setcol" style={{ marginTop: "0.3rem" }}>
-            <Textarea value={text ?? formatGeneList(list)} spellCheck={false} rows={3} disabled={busy}
-              onChange={(e) => setText(e.target.value)} className="min-h-16 bg-muted font-mono text-md md:text-md" />
-            <div className="setrow">
-              <Button type="button" variant="outline" size="sm" className={TB} disabled={busy} onClick={applyText}>apply</Button>
-              <Button type="button" variant="link" size="inline" onClick={() => { setText(formatGeneList(list)); setTextErr(null); }}>reset</Button>
-              <span className="meta">a label is optional: <code>[&quot;TP53 pathway&quot; TP53 MDM2]</code></span>
-            </div>
-            {textErr && <span className="mark">{textErr}</span>}
-          </div>
-        </details>
-      )}
-    </div>
-  );
-}
-
 /**
  * A control whose options are still being fetched. It stands where the select will be, so the
  * toolbar doesn't jump when the options arrive, and it says what it is waiting for — an empty
@@ -371,13 +298,7 @@ export function OncoprintCard({ view, spec, busy, cohortNames, catalog, onView,
         </>}
       />
       {!onGenes && (
-        <Dialog open={genesOpen} onOpenChange={setGenesOpen}>
-          <DialogContent aria-describedby={undefined} className="genedialog gap-3 sm:max-w-md">
-            <DialogHeader><DialogTitle className="text-base">Genes</DialogTitle></DialogHeader>
-            <GeneListEditor view={view} busy={busy} onGenes={(g) => edit(withGenes(view, g))} />
-            <DialogFooter><DialogClose asChild><Button>Done</Button></DialogClose></DialogFooter>
-          </DialogContent>
-        </Dialog>
+        <ViewGenesDialog view={view} open={genesOpen} onOpenChange={setGenesOpen} onGenes={(g) => edit(withGenes(view, g))} />
       )}
     </>
   );
diff --git a/app/_studies/study-list.tsx b/app/_studies/study-list.tsx
new file mode 100644
index 00000000..1cba3c52
--- /dev/null
+++ b/app/_studies/study-list.tsx
@@ -0,0 +1,111 @@
+"use client";
+// The study list as Explore draws it — a search over name, id and cancer type, capability filters,
+// and one row per study — for every page that asks for studies: Explore's picker (several, staged)
+// and the Results page's query (one).
+import { Checkbox } from "../_ui/checkbox";
+import { Button } from "../_ui/button";
+import { Input } from "../_ui/input";
+import { RadioGroup, RadioGroupItem } from "../_ui/radio-group";
+import { CHIP } from "../_ui/toolbar.ts";
+import type { StudyInfo } from "../lab/use-catalogs.ts";
+
+/** the capability filters, each a test on a study row */
+export const STUDY_CAPS: [string, string, (s: StudyInfo) => boolean][] = [
+  ["timeline", "timeline events", (s) => s.timelinePatients > 0],
+  ["mrna", "mRNA", (s) => !!s.caps?.mrna],
+  ["protein", "protein", (s) => !!s.caps?.protein],
+  ["ga", "generic assay", (s) => !!s.caps?.ga],
+  ["oncokb", "OncoKB-synced", (s) => !!s.oncokb],
+  ["peer", "other instance", (s) => !!s.instance && s.instance !== "a"],
+];
+
+/** the most rows drawn; the rest are counted and the search narrows them */
+export const STUDY_ROWS_SHOWN = 200;
+
+export function filterStudies(studies: StudyInfo[], query: string, caps: Set<string>): StudyInfo[] {
+  const q = query.trim().toLowerCase();
+  return studies.filter((s) =>
+    (!q || (s.name + " " + s.id + " " + (s.cancerType || "")).toLowerCase().includes(q)) &&
+    STUDY_CAPS.every(([k, , pred]) => !caps.has(k) || pred(s)));
+}
+
+/** the search box, the capability chips and the count; `children` are the caller's own actions on the matches */
+export function StudySearch({ query, onQuery, caps, onCaps, matches, total, children }: {
+  query: string; onQuery: (q: string) => void; caps: Set<string>; onCaps: (next: Set<string>) => void;
+  matches: number; total: number; children?: React.ReactNode;
+}) {
+  return (
+    <div className="row g5 center mt-2.5 mb-2.5">
+      <Input placeholder="search name, id, or cancer type…" value={query} onChange={(e) => onQuery(e.target.value)} aria-label="search studies"
+        className="h-8 min-w-64 flex-1 text-md md:text-md" />
+      {STUDY_CAPS.map(([k, label]) => (
+        <Button key={k} variant="outline" size="xs" className={CHIP} aria-pressed={caps.has(k)}
+          onClick={() => { const n = new Set(caps); if (n.has(k)) n.delete(k); else n.add(k); onCaps(n); }}>
+          {label}
+        </Button>
+      ))}
+      <span className="meta">{matches.toLocaleString()} of {total.toLocaleString()}</span>
+      {children}
+    </div>
+  );
+}
+
+function StudyName({ s }: { s: StudyInfo }) {
+  return (
+    <span className="studyname">
+      <strong>{s.name}</strong>
+      {s.instance && s.instance !== "a" && <span className="peerbadge" title={"held by the federated peer " + s.instanceLabel}>⧉ {s.instanceLabel}</span>}
+    </span>
+  );
+}
+
+/**
+ * One row per matching study, in one grid so every column lines up. `pick` "many" ticks
+ * checkboxes; "one" is a radio group. `actions` draws a row's own buttons (Explore's per-study
+ * icons), which act on that study alone.
+ */
+export function StudyRows({ hits, loading, pick, selected, onToggle, actions }: {
+  hits: StudyInfo[]; loading?: boolean;
+  pick: "many" | "one"; selected: string[]; onToggle: (id: string) => void;
+  actions?: (id: string) => React.ReactNode;
+}) {
+  const head = hits.length > 0 && (
+    <div className="study-row study-head" aria-hidden>
+      <span /><span>Study</span><span>Cancer type</span><span className="pts">Patients</span><span />
+    </div>
+  );
+  const more = hits.length > STUDY_ROWS_SHOWN &&
+    <p className="note studylist-note">Showing the {STUDY_ROWS_SHOWN} largest of {hits.length.toLocaleString()} matches — refine the search.</p>;
+  const cells = (s: StudyInfo) => <>
+    <StudyName s={s} />
+    <span className="meta">{s.cancerType}</span>
+    <span className="meta pts">{s.patients.toLocaleString()}</span>
+    {actions ? actions(s.id) : <span />}
+  </>;
+  return <>
+    {loading && <div className="loading-block"><span className="spinner" /> Loading studies…</div>}
+    {pick === "many" ? (
+      <div className="scrollbox studylist">
+        {head}
+        {hits.slice(0, STUDY_ROWS_SHOWN).map((s) => (
+          <label key={s.id} title={s.name + " (" + s.id + ")"} className={"study-row" + (selected.includes(s.id) ? " sel" : "")}>
+            <Checkbox checked={selected.includes(s.id)} onCheckedChange={() => onToggle(s.id)} aria-label={"stage " + s.name} />
+            {cells(s)}
+          </label>
+        ))}
+        {more}
+      </div>
+    ) : (
+      <RadioGroup value={selected[0] ?? ""} onValueChange={onToggle} aria-label="study" className="scrollbox studylist gap-x-2.5 gap-y-0">
+        {head}
+        {hits.slice(0, STUDY_ROWS_SHOWN).map((s) => (
+          <label key={s.id} title={s.name + " (" + s.id + ")"} className={"study-row" + (selected.includes(s.id) ? " sel" : "")}>
+            <RadioGroupItem value={s.id} aria-label={s.name} className="p-0" />
+            {cells(s)}
+          </label>
+        ))}
+        {more}
+      </RadioGroup>
+    )}
+  </>;
+}
diff --git a/app/_ui/toolbar.ts b/app/_ui/toolbar.ts
index b7dc3c00..ae17535d 100644
--- a/app/_ui/toolbar.ts
+++ b/app/_ui/toolbar.ts
@@ -9,6 +9,9 @@ export const CHIP = "rounded-pill px-2.5 text-sm font-normal aria-pressed:border
 /** a text or number field in a view toolbar */
 export const FIELD = "h-ctl bg-card text-md md:text-md";
 
+/** a page's own sections (the lab's Explore / Saved / Analysis, a portal page's tabs): a line tab one step larger than LINE_TAB */
+export const PAGE_TAB = "h-auto flex-none rounded-none px-3.5 pt-2 pb-1.5 text-base leading-normal after:bottom-[-1px] data-[state=active]:text-accent-foreground data-[state=active]:after:bg-primary";
+
 /** a row of page tabs underlined by a rule (TabsList variant "line"), and one of its tabs */
 export const LINE_TABS = "w-full flex-wrap justify-start gap-1.5 border-b border-border p-0 group-data-[orientation=horizontal]/tabs:h-auto";
 export const LINE_TAB = "h-auto flex-none rounded-none px-3 pt-1.5 pb-1.5 text-md after:bottom-[-1px] data-[state=active]:text-accent-foreground data-[state=active]:after:bg-primary";
diff --git a/app/api/genes/route.ts b/app/api/genes/route.ts
new file mode 100644
index 00000000..c3051ef8
--- /dev/null
+++ b/app/api/genes/route.ts
@@ -0,0 +1,14 @@
+import { parseBody, GenesRequest } from "../../../lib/api-schemas.ts";
+import { checkGenes, searchGenes, geneSetMembers } from "../../../lib/genes.ts";
+
+// The gene catalog behind the gene query dialog (lib/genes.ts): reference data, no patient rows.
+export async function POST(req: Request) {
+  try {
+    const body = parseBody(GenesRequest, await req.json());
+    if (body.geneset) return Response.json({ members: await geneSetMembers(body.geneset) });
+    if (body.search != null) return Response.json(await searchGenes(body.search));
+    return Response.json({ checks: await checkGenes(body.symbols || []) });
+  } catch (e) {
+    return Response.json({ error: String((e as Error)?.message || e) }, { status: 400 });
+  }
+}
diff --git a/app/globals.css b/app/globals.css
index ef37af5c..560de628 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -867,13 +867,13 @@ main.analysis-main { max-width: min(132rem, 100%); }
 
 /* Name-a-cohort dialog. Native <dialog>, so Esc, focus trapping and the
    backdrop are the platform's rather than ours. */
-.genedialog, .exportdialog {
+.exportdialog {
   border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
   color: var(--ink); padding: 1rem 1.1rem; min-width: 20rem; max-width: 26rem;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
 }
-.genedialog::backdrop, .exportdialog::backdrop { background: rgba(0, 0, 0, 0.32); }
-.genedialog h3, .exportdialog h3 { margin: 0 0 0.5rem; font-size: var(--t-base); }
+.exportdialog::backdrop { background: rgba(0, 0, 0, 0.32); }
+.exportdialog h3 { margin: 0 0 0.5rem; font-size: var(--t-base); }
 /* "+ Add cohort" on a view: the analysis's cohorts, the library, or Explore, as three tabs */
 .acd-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; grid-template-columns: fit-content(16rem) minmax(8rem, 1fr) fit-content(40%) auto; column-gap: var(--s3); }
 .acd-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: var(--s1) 0; border-top: 1px solid var(--line); }
@@ -998,11 +998,7 @@ button.customtag:hover { text-decoration: underline; }
 }
 .customlist td { vertical-align: top; }
 .customlist td.meta { white-space: normal; }
-.genedialog { min-width: 24rem; max-width: 30rem; }
-.genedialog .setcol > .meta { color: var(--muted); font-size: var(--t-sm); }
-.genedialog textarea { width: 100%; box-sizing: border-box; }
-.genedialog .setrow, .exportdialog .setrow { display: flex; gap: 0.4rem; margin-top: 0.5rem; align-items: center; }
-.genedialog .setrow input { flex: 1; min-width: 0; }
+.exportdialog .setrow { display: flex; gap: 0.4rem; margin-top: 0.5rem; align-items: center; }
 /* most of the viewport, so the preview is big enough to actually judge the export by — capped
    and scrollable so a poster-sized export never pushes the dialog itself past the viewport.
    Scoped to [open]: an author `display` on a bare .exportdialog would beat the UA stylesheet's
@@ -1557,14 +1553,6 @@ td.camp-links { flex-direction: column; align-items: flex-start; gap: var(--s1);
 .xc-cell { fill: var(--accent); }
 .xc-brush { fill: color-mix(in srgb, var(--accent) 15%, transparent); stroke: var(--accent); stroke-dasharray: 3 2; }
 
-/* the portal pages (app/portal): cBioPortal's Results and Comparison layouts */
-.portal-main { max-width: 1400px; margin: 0 auto; padding: var(--s4); }
-.portal-head h1 { font-size: var(--t-xl); margin: var(--s2) 0; }
-.portal-head a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
-.portal-cohorts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
-.portal-view { margin-top: var(--s3); }
-.portal-view .vtitle { font-size: var(--t-md); margin: 0 0 var(--s2); }
-
 /* the portal-style card bodies (app/lab/portal-bodies.tsx) */
 .pb-scroll { overflow-x: auto; }
 .pb-row { display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap; }
@@ -1583,9 +1571,6 @@ td.camp-links { flex-direction: column; align-items: flex-start; gap: var(--s1);
 .ds-controls .spacer { flex: 1; }
 .ds-table .ds-dl a { color: var(--accent-ink); }
 .ds-table .ds-study { min-width: 20rem; }
-.portal-group { color: #fff; border-radius: var(--r-sm); padding: 1px var(--s2); font-size: var(--t-xs); }
-.portal-head .portal-summary { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-sm); }
-.portal-chooser { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); }
 .pb-loading { opacity: 0.45; transition: opacity 0.15s; }
 
 .pb-pager .tbz { flex-wrap: wrap; }
diff --git a/app/lab/analysis-sections.tsx b/app/lab/analysis-sections.tsx
index 19129d44..c59d26ab 100644
--- a/app/lab/analysis-sections.tsx
+++ b/app/lab/analysis-sections.tsx
@@ -13,10 +13,9 @@ import { cn } from "../../lib/cn";
 import { TB } from "../_ui/toolbar.ts";
 import { SaveToLibraryDialog } from "./dialogs.tsx";
 import { ListCohortDialog, type SignInState } from "./list-cohort.tsx";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../_ui/dialog";
 import { Textarea } from "../_ui/textarea";
 import CohortPills from "./pills";
-import { GeneListEditor } from "../_oncoprint/OncoprintCard.tsx";
+import { ViewGenesDialog } from "../_genes/GeneQueryDialog.tsx";
 import type { GeneTrackSpec } from "../../lib/gene-tracks.ts";
 import type { AnalysisDoc, AnalysisResult, CohortDef, PartitionDef } from "../../lib/types.ts";
 import type { CustomDataFocus } from "./custom-data-dialog.tsx";
@@ -113,23 +112,11 @@ export interface AnalysisCtx {
 
 
 export function GenesDialog({ ctx }: { ctx: AnalysisCtx }) {
-  const { busy, doc, genesFor, setGenesFor, setViewGenes } = ctx;
-  return (
-    <Dialog open={genesFor != null} onOpenChange={(open) => { if (!open) setGenesFor(null); }}>
-      {genesFor != null && (
-        <DialogContent aria-describedby={undefined} className="genedialog gap-3 sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle className="text-base">Genes <span className="font-normal text-muted-foreground">— {String(((doc.views || [])[genesFor] as any)?.kind || "view")}</span></DialogTitle>
-          </DialogHeader>
-          {/* the DOCUMENT's view, never the result (a result's genes are {gene, driverPct, …}) */}
-          <GeneListEditor view={(doc.views || [])[genesFor] || {}} busy={busy} onGenes={(g) => setViewGenes(genesFor, g)} />
-          <DialogFooter>
-            <DialogClose asChild><Button>Done</Button></DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      )}
-    </Dialog>
-  );
+  const { doc, genesFor, setGenesFor, setViewGenes } = ctx;
+  // the DOCUMENT's view, never the result (a result's genes are {gene, driverPct, …})
+  const view = genesFor != null ? (doc.views || [])[genesFor] || null : null;
+  return <ViewGenesDialog view={view as { kind?: string; genes?: unknown } | null} open={genesFor != null}
+    onOpenChange={(open) => { if (!open) setGenesFor(null); }} onGenes={(g) => { if (genesFor != null) setViewGenes(genesFor, g); }} />;
 }
 
 export function CustomDataWarning({ ctx }: { ctx: AnalysisCtx }) {
diff --git a/app/lab/api.ts b/app/lab/api.ts
index 81f3e84b..60386d2f 100644
--- a/app/lab/api.ts
+++ b/app/lab/api.ts
@@ -6,7 +6,7 @@
 // They return the Response, as fetch does: a caller still decides how to read it (JSON, the
 // binary contract, a file) and what an error status means for it.
 import type {
-  AnalysisBody, NotebookBody, ExploreBody, OncoprintBody, OncoprintDetailBody, PatientsOfBody, PartitionBody, ViewPageBody, TableBody, CellExplorerBody, LockBody,
+  AnalysisBody, NotebookBody, ExploreBody, OncoprintBody, OncoprintDetailBody, PatientsOfBody, PartitionBody, ViewPageBody, TableBody, CellExplorerBody, LockBody, GenesBody,
 } from "../../lib/api-schemas.ts";
 import { withCustomData, type UploadBinding } from "./custom-data-client.ts";
 import type { ArtifactKind } from "../../lib/artifacts.ts";
@@ -74,6 +74,9 @@ export const api = {
   /** Every study this deployment can reach, with its counts and capabilities. */
   studies: (opts: Opts = {}) => fetch("/api/studies", { signal: opts.signal }),
 
+  /** The gene catalog: symbols checked, genes and gene sets searched, a gene set's members. */
+  genes: (body: GenesBody, opts: Opts = {}) => post("/api/genes", body, opts.signal),
+
   /** One study's timeline vocabulary and declared survival endpoints. */
   catalog: (study: string, opts: Opts = {}) => fetch("/api/catalog?study=" + encodeURIComponent(study), { signal: opts.signal }),
 
diff --git a/app/lab/explore-sections.tsx b/app/lab/explore-sections.tsx
index a7550d7d..9497d283 100644
--- a/app/lab/explore-sections.tsx
+++ b/app/lab/explore-sections.tsx
@@ -24,6 +24,7 @@ import { Input } from "../_ui/input";
 import { Choice } from "../_ui/choice.tsx";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../_ui/dialog";
 import { Tabs, TabsList, TabsTrigger } from "../_ui/tabs";
+import { StudySearch, StudyRows, filterStudies } from "../_studies/study-list.tsx";
 
 /** The most studies "add all" stages at once (each adds dozens of queries to Explore's facets). */
 export const ADD_ALL_LIMIT = 30;
@@ -71,14 +72,6 @@ export function StudyPicker({ ctx }: { ctx: ExploreCtx }) {
   const { addMode, analyzeDraft, exDraftStudies, exPanelOpen, exSel, exStudies, explore, exploreBusy, sCaps, sQuery, setExDraftStudies, setExPanelOpen, setExploreStudies, setSCaps, setSQuery, setStudyChipsOpen, studies, studyChipsOpen } = ctx;
   return <>
     {(() => {
-      const CAP_FILTERS: [string, string, (s: any) => boolean][] = [
-        ["timeline", "timeline events", (s: any) => s.timelinePatients > 0],
-        ["mrna", "mRNA", (s: any) => s.caps && s.caps.mrna],
-        ["protein", "protein", (s: any) => s.caps && s.caps.protein],
-        ["ga", "generic assay", (s: any) => s.caps && s.caps.ga],
-        ["oncokb", "OncoKB-synced", (s: any) => s.oncokb],
-        ["peer", "other instance", (s: any) => s.instance && s.instance !== "a"]
-      ];
       const byId = new Map(studies.map((s) => [s.id, s] as const));
       const selPts = exStudies.reduce((n: number, id: string) => n + (byId.get(id)?.patients ?? 0), 0);
       const ready = exStudies.length > 0;      // a study alone is enough to analyse
@@ -99,10 +92,7 @@ export function StudyPicker({ ctx }: { ctx: ExploreCtx }) {
         setExPanelOpen(false);
         setExploreStudies(staged);
       };
-      const q = sQuery.trim().toLowerCase();
-      const hits = studies.filter(s =>
-        (!q || (s.name + " " + s.id + " " + (s.cancerType || "")).toLowerCase().includes(q)) &&
-        CAP_FILTERS.every(([k, , pred]) => !sCaps.has(k) || pred(s)));
+      const hits = filterStudies(studies, sQuery, sCaps);
       return (
         <div className="card">
           <div className="row center g5">
@@ -162,16 +152,7 @@ export function StudyPicker({ ctx }: { ctx: ExploreCtx }) {
           </div>
           {/* with nothing selected the picker is simply open: there is nothing else to do here */}
           {(exPanelOpen || exStudies.length === 0) && <>
-            <div className="row g5 center mt-2.5 mb-2.5">
-              <Input placeholder="search name, id, or cancer type…" value={sQuery} onChange={e => setSQuery(e.target.value)}
-                className="h-8 min-w-64 flex-1 text-md md:text-md" />
-              {CAP_FILTERS.map(([k, label]) => (
-                <Button key={k} variant="outline" size="xs" className={CHIP} aria-pressed={sCaps.has(k)}
-                  onClick={() => setSCaps(prev => { const n = new Set(prev); if (n.has(k)) n.delete(k); else n.add(k); return n; })}>
-                  {label}
-                </Button>
-              ))}
-              <span className="meta">{hits.length.toLocaleString()} of {studies.length.toLocaleString()}</span>
+            <StudySearch query={sQuery} onQuery={setSQuery} caps={sCaps} onCaps={setSCaps} matches={hits.length} total={studies.length}>
               {/* "all matches", not "all 200 drawn": the list renders the 200 largest, and a button
                   that selected only those would disagree with the count beside it. Refused, with the
                   limit named, when it would stage more than ADD_ALL_LIMIT studies: every study adds
@@ -191,7 +172,7 @@ export function StudyPicker({ ctx }: { ctx: ExploreCtx }) {
               })()}
               <Button variant="ghost" size="xs" className={CHIP} disabled={!staged.length}
                 onClick={() => setExDraftStudies([])}>clear</Button>
-            </div>
+            </StudySearch>
             <div className="row applybar center g5">
               <strong>{staged.length.toLocaleString()}</strong>
               <span className="meta">
@@ -205,29 +186,8 @@ export function StudyPicker({ ctx }: { ctx: ExploreCtx }) {
                 Submit
               </Button>
             </div>
-            {!studies.length && <div className="loading-block"><span className="spinner" /> Loading studies…</div>}
-            {/* One grid for the whole list (each row a subgrid), so every column lines up
-                however wide its cells are, and every row renders every cell. */}
-            <div className="scrollbox studylist">
-              {hits.length > 0 && <div className="study-row study-head" aria-hidden>
-                <span /><span>Study</span><span>Cancer type</span>
-                <span className="pts">Patients</span><span />
-              </div>}
-              {hits.slice(0, 200).map(s => (
-                <label key={s.id} title={s.name + " (" + s.id + ")"} className={"study-row" + (staged.includes(s.id) ? " sel" : "")}>
-                  <Checkbox checked={staged.includes(s.id)} onCheckedChange={() => toggleStaged(s.id)} aria-label={"stage " + s.name} />
-                  <span className="studyname">
-                    <strong>{s.name}</strong>
-                    {s.instance && s.instance !== "a" &&
-                      <span className="peerbadge" title={"held by the federated peer " + s.instanceLabel}>⧉ {s.instanceLabel}</span>}
-                  </span>
-                  <span className="meta">{s.cancerType}</span>
-                  <span className="meta pts">{s.patients.toLocaleString()}</span>
-                  <StudyActions id={s.id} ctx={ctx} />
-                </label>
-              ))}
-              {hits.length > 200 && <p className="note studylist-note">Showing the 200 largest of {hits.length.toLocaleString()} matches — refine the search.</p>}
-            </div>
+            <StudyRows hits={hits} loading={!studies.length} pick="many" selected={staged} onToggle={toggleStaged}
+              actions={(id) => <StudyActions id={id} ctx={ctx} />} />
           </>}
         </div>
       );
diff --git a/app/lab/page.tsx b/app/lab/page.tsx
index aaee065d..321dd3f7 100644
--- a/app/lab/page.tsx
+++ b/app/lab/page.tsx
@@ -44,6 +44,7 @@ import { cellExplorerFor } from "../../lib/cell-explorer.ts";
 import { Tabs, TabsList, TabsTrigger } from "../_ui/tabs";
 import { Button } from "../_ui/button";
 import { Input } from "../_ui/input";
+import { PAGE_TAB } from "../_ui/toolbar.ts";
 
 const TABS = ["explore", "cohorts", "analysis", "examples"] as const;
 const TAB_LABELS: [typeof TABS[number], string][] = [["explore", "Explore"], ["cohorts", "Saved"], ["analysis", "Analysis"], ["examples", "Examples"]];
@@ -417,7 +418,7 @@ export default function AnalysisPage() {
         <Tabs value={tab} className="mb-4" onValueChange={(v) => openTab(v as typeof TABS[number])}>
           <TabsList variant="line" aria-label="lab sections" className="w-full justify-start gap-1.5 border-b border-border p-0 group-data-[orientation=horizontal]/tabs:h-auto">
             {TAB_LABELS.map(([t, label]) => <TabsTrigger key={t} value={t} onClick={() => { if (t === tab) openTab(t); }}
-              className="h-auto flex-none rounded-none px-3.5 pt-2 pb-1.5 text-base leading-normal after:bottom-[-1px] data-[state=active]:text-accent-foreground data-[state=active]:after:bg-primary">{label}</TabsTrigger>)}
+              className={PAGE_TAB}>{label}</TabsTrigger>)}
           </TabsList>
         </Tabs>
         {error && <div className="error">{error}</div>}
diff --git a/app/lab/plot-controls.tsx b/app/lab/plot-controls.tsx
new file mode 100644
index 00000000..6843214f
--- /dev/null
+++ b/app/lab/plot-controls.tsx
@@ -0,0 +1,83 @@
+"use client";
+// The plot view's settings bar, shared by the lab's plot card and the portal pages' Plots tab:
+// both axes (with a log scale for a numeric one), a box plot's colour and ring, the highlighted
+// cohorts, the unit and the axis swap. Every control is an edit to the view, handed to `update`.
+import { ArrowLeftRight } from "lucide-react";
+import { AxisPicker, HighlightPicker } from "./view-chrome.tsx";
+import { Button } from "../_ui/button";
+import { Checkbox } from "../_ui/checkbox";
+import { Choice } from "../_ui/choice.tsx";
+import { TB } from "../_ui/toolbar.ts";
+
+type Update = (fn: (view: any) => any) => void;
+
+function LogToggle({ spec, side, numeric, busy, update }: { spec: any; side: "x" | "y"; numeric: boolean; busy: boolean; update: Update }) {
+  const axis = spec[side];
+  if (!numeric || !axis || !("source" in axis) || (axis.source !== "clinical" && axis.source !== "molecular")) return null;
+  return (
+    <label className="chk" title={"draw " + side + " on a log scale — log10(value + 1), so zero stays on the axis and a negative value is left out"}>
+      <Checkbox checked={!!axis.log} disabled={busy}
+        onCheckedChange={(c) => update((vv) => {
+          const a = { ...vv[side] };
+          if (c === true) a.log = true; else delete a.log;
+          return { ...vv, [side]: a };
+        })} />
+      log
+    </label>
+  );
+}
+
+export function PlotControls({ spec, plot, attrs, profiles, loading, busy, highlightOptions, update }: {
+  /** the view as the document holds it */
+  spec: any;
+  /** the last result's plot, for which shape is on screen */
+  plot?: { shape: string; x: { kind: string }; y: { kind: string } };
+  attrs: { attribute: string; kind: string }[]; profiles: string[]; loading?: boolean; busy: boolean;
+  /** the cohorts that may be highlighted: every one but the plotted one and a split */
+  highlightOptions: { name: string; label: string; depth: number }[];
+  update: Update;
+}) {
+  const chosen: string[] = Array.isArray(spec.highlight) ? spec.highlight : [];
+  // Every control here changes what is DRAWN and costs a query, so there is one zone and it says
+  // so — the same toolbar the oncoprint uses.
+  return (
+    <div className="viewtb">
+      <div className="tbz">
+        <span className="tbl" title="these change what is drawn, and re-run the query">data</span>
+        <AxisPicker side="x" axis={spec.x} attrs={attrs} profiles={profiles} loading={loading} busy={busy}
+          onChange={(a) => update((vv) => ({ ...vv, x: a }))} />
+        <LogToggle spec={spec} side="x" numeric={plot?.x.kind === "num"} busy={busy} update={update} />
+      </div>
+      <div className="tbz">
+        <AxisPicker side="y" axis={spec.y} attrs={attrs} profiles={profiles} loading={loading} busy={busy}
+          onChange={(a) => update((vv) => ({ ...vv, y: a }))} />
+        <LogToggle spec={spec} side="y" numeric={plot?.y.kind === "num"} busy={busy} update={update} />
+      </div>
+      {/* colour/ring only affect a box plot's violin — a scatter's density and a contingency table
+          have no per-case colour to split, so they are offered only once a box is on screen */}
+      {plot?.shape === "box" && <div className="tbz">
+        <span className="tbl" title="colours each group's violin by a category">colour</span>
+        <AxisPicker side="fill" axis={spec.colorBy} allowNone categorical attrs={attrs} profiles={profiles} loading={loading} busy={busy}
+          onChange={(a) => update((vv) => { const n = { ...vv }; if (a) n.colorBy = a; else delete n.colorBy; return n; })} />
+        <AxisPicker side="ring" axis={spec.ringBy} allowNone categorical attrs={attrs} profiles={profiles} loading={loading} busy={busy}
+          onChange={(a) => update((vv) => { const n = { ...vv }; if (a) n.ringBy = a; else delete n.ringBy; return n; })} />
+      </div>}
+      {plot?.shape !== "table" && (highlightOptions.length > 0 || chosen.length > 0) && <div className="tbz">
+        <HighlightPicker chosen={chosen} options={highlightOptions} busy={busy}
+          onChange={(next) => update((vv) => { const n = { ...vv }; if (next.length) n.highlight = next; else delete n.highlight; return n; })} />
+      </div>}
+      <div className="tbz">
+        <label className="tbfield" title="what a point is; patient mode averages a patient's samples">unit <Choice size="ctl"
+          value={spec.unit || "patient"} disabled={busy}
+          onChange={(u) => update((vv) => ({ ...vv, unit: u }))}
+          options={[["patient", "patients"], ["sample", "samples"]]} /></label>
+        {/* a box plot is always drawn categories-on-x, values-on-y whichever axis is which in the
+            document, so swapping would change nothing a reader can see */}
+        <Button variant="outline" size="sm" className={TB} disabled={busy || plot?.shape === "box"}
+          title={plot?.shape === "box" ? "a box plot is always drawn by category, whichever axis holds it — nothing to swap"
+            : "put the x axis on y and the y axis on x"}
+          onClick={() => update((vv) => ({ ...vv, x: vv.y, y: vv.x }))}><ArrowLeftRight />swap</Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/lab/view-cards.tsx b/app/lab/view-cards.tsx
index 2d7c88fc..689273db 100644
--- a/app/lab/view-cards.tsx
+++ b/app/lab/view-cards.tsx
@@ -12,9 +12,10 @@ import type { AnalysisDoc, AnalysisResult, OncoprintView, ExploreResult } from "
 import { pDigits } from "../../lib/chart/format.ts";
 import { MethodPanel } from "./method-panel.tsx";
 import { viewRequest } from "./use-analysis.ts";
-import { AxisPicker, HighlightPicker, ViewHelpButton, SplitByNote, PickMenu, CohortPicker, DrawnCohorts, ViewHead, ViewMenu, Latency, SeriesSwatch, Participation } from "./view-chrome.tsx";
+import { AxisPicker, ViewHelpButton, SplitByNote, PickMenu, CohortPicker, DrawnCohorts, ViewHead, ViewMenu, Latency, SeriesSwatch, Participation } from "./view-chrome.tsx";
 import { ViewFigure } from "./figure.tsx";
-import { ArrowLeftRight, Plus, Settings2, X } from "lucide-react";
+import { PlotControls } from "./plot-controls.tsx";
+import { Plus, Settings2, X } from "lucide-react";
 import { Button } from "../_ui/button";
 import { ErrorAlert } from "../_ui/error-alert.tsx";
 import { Checkbox } from "../_ui/checkbox";
@@ -648,83 +649,18 @@ function SequenceKeyHint({ ctx, v, vi }: CardProps) {
 }
 
 /** a numeric plot axis on a log scale: log10(v + 1), so a zero stays on the axis (lib/plot.ts) */
-function LogToggle({ ctx, vi, side, numeric }: { ctx: ViewCtx; vi: number; side: "x" | "y"; numeric: boolean }) {
-  const axis = ctx.docView(vi)[side];
-  if (!numeric || !axis || !("source" in axis) || (axis.source !== "clinical" && axis.source !== "molecular")) return null;
-  return (
-    <label className="chk" title={"draw " + side + " on a log scale — log10(value + 1), so zero stays on the axis and a negative value is left out"}>
-      <Checkbox checked={!!axis.log} disabled={ctx.busy}
-        onCheckedChange={(c) => ctx.updateView(vi, (vv: any) => {
-          const a = { ...vv[side] };
-          if (c === true) a.log = true; else delete a.log;
-          return { ...vv, [side]: a };
-        })} />
-      log
-    </label>
-  );
-}
-
 function PlotCard({ ctx, v, vi }: CardProps) {
   const { attrsLoading, busy, catalogAttrs, cohortChoice, docView, menuOpenRef, profileOptions, updateView } = ctx;
+  // every cohort the document evaluates, but the plotted one and a split (which stands for several groups, not one set of cases)
+  const ch = cohortChoice(vi, docView(vi), 1);
+  const highlightOptions = ch.nodes.filter((nd) => nd.kind !== "split" && nd.name !== ch.drawn[0])
+    .map((nd) => ({ name: nd.name, label: nd.label, depth: nd.depth }));
   return <>
     {v.kind === "plot" && <>
-      <ViewHead menuStore={menuOpenRef.current} v={v} title="Plot" cohorts={cohortChoice(vi, docView(vi), 1)} {...placement(ctx, vi)}
+      <ViewHead menuStore={menuOpenRef.current} v={v} title="Plot" cohorts={ch} {...placement(ctx, vi)}
         sub={v.plot ? <>{v.plot.shape === "scatter" ? "density" : v.plot.shape === "box" ? "box" : "contingency"} · {v.plot.n.toLocaleString()} {(docView(vi).unit || "patient")}s</> : "two axes over the same cases"} />
-      {/* Every control here changes what is DRAWN and costs a query, so there is one
-          zone and it says so — the same toolbar the oncoprint uses. */}
-      <div className="viewtb">
-        <div className="tbz">
-          <span className="tbl" title="these change what is drawn, and re-run the query">data</span>
-          <AxisPicker side="x" axis={docView(vi).x} attrs={catalogAttrs()} profiles={profileOptions()} loading={attrsLoading()} busy={busy}
-            onChange={(a) => updateView(vi, (vv: any) => ({ ...vv, x: a }))} />
-          <LogToggle ctx={ctx} vi={vi} side="x" numeric={v.plot?.x.kind === "num"} />
-        </div>
-        <div className="tbz">
-          <AxisPicker side="y" axis={docView(vi).y} attrs={catalogAttrs()} profiles={profileOptions()} loading={attrsLoading()} busy={busy}
-            onChange={(a) => updateView(vi, (vv: any) => ({ ...vv, y: a }))} />
-          <LogToggle ctx={ctx} vi={vi} side="y" numeric={v.plot?.y.kind === "num"} />
-        </div>
-        {/* colour/ring only affect a box plot's violin — a scatter's density and a
-            contingency table have no per-case colour to split, so the controls would
-            sit there doing nothing until a box shape is actually on screen */}
-        {v.plot?.shape === "box" && <div className="tbz">
-          <span className="tbl" title="colours each group's violin by a category">colour</span>
-          <AxisPicker side="fill" axis={docView(vi).colorBy} allowNone categorical
-            attrs={catalogAttrs()} profiles={profileOptions()} loading={attrsLoading()} busy={busy}
-            onChange={(a) => updateView(vi, (vv: any) => { const n = { ...vv }; if (a) n.colorBy = a; else delete n.colorBy; return n; })} />
-          <AxisPicker side="ring" axis={docView(vi).ringBy} allowNone categorical
-            attrs={catalogAttrs()} profiles={profileOptions()} loading={attrsLoading()} busy={busy}
-            onChange={(a) => updateView(vi, (vv: any) => { const n = { ...vv }; if (a) n.ringBy = a; else delete n.ringBy; return n; })} />
-        </div>}
-        {v.plot?.shape !== "table" && (() => {
-          // every cohort the document evaluates, but the plotted one and a split (which stands for
-          // several groups, not one set of cases)
-          const ch = cohortChoice(vi, docView(vi), 1);
-          const plotted = ch.drawn[0];
-          const options = ch.nodes.filter((nd) => nd.kind !== "split" && nd.name !== plotted)
-            .map((nd) => ({ name: nd.name, label: nd.label, depth: nd.depth }));
-          const chosen: string[] = Array.isArray(docView(vi).highlight) ? docView(vi).highlight : [];
-          if (!options.length && !chosen.length) return null;
-          return <div className="tbz">
-            <HighlightPicker chosen={chosen} options={options} busy={busy}
-              onChange={(next) => updateView(vi, (vv: any) => { const n = { ...vv }; if (next.length) n.highlight = next; else delete n.highlight; return n; })} />
-          </div>;
-        })()}
-        <div className="tbz">
-          <label className="tbfield" title="what a point is; patient mode averages a patient's samples">unit <Choice size="ctl"
-            value={docView(vi).unit || "patient"} disabled={busy}
-            onChange={(u) => updateView(vi, (vv: any) => ({ ...vv, unit: u }))}
-            options={[["patient", "patients"], ["sample", "samples"]]} /></label>
-          {/* a box plot is always drawn categories-on-x, values-on-y regardless of
-              which axis is which in the document (lib/federation.ts's box branch
-              routes by kind, not by x/y) — swapping which is "x" changes nothing a
-              reader can see, so the button is disabled rather than pretending to act */}
-          <Button variant="outline" size="sm" className={TB} disabled={busy || v.plot?.shape === "box"}
-            title={v.plot?.shape === "box" ? "a box plot is always drawn by category, whichever axis holds it — nothing to swap"
-              : "put the x axis on y and the y axis on x"}
-            onClick={() => updateView(vi, (vv: any) => ({ ...vv, x: vv.y, y: vv.x }))}><ArrowLeftRight />swap</Button>
-        </div>
-      </div>
+      <PlotControls spec={docView(vi)} plot={v.plot} attrs={catalogAttrs()} profiles={profileOptions()} loading={attrsLoading()} busy={busy}
+        highlightOptions={highlightOptions} update={(fn) => updateView(vi, fn)} />
       <ViewFigure v={v} empty={v.plot?.note || "nothing to draw"} />
     </>}
   </>;
diff --git a/app/portal/PortalTabs.tsx b/app/portal/PortalTabs.tsx
index 65e292ab..97ef8a19 100644
--- a/app/portal/PortalTabs.tsx
+++ b/app/portal/PortalTabs.tsx
@@ -7,15 +7,16 @@
 import { ViewFigure } from "../lab/figure.tsx";
 import { useEffect, useRef, useState } from "react";
 import type { AnalysisDoc, AnalysisResult, View } from "../../lib/types";
-import { SERIES } from "../../lib/svg-kit";
 import { HotspotsBody } from "../_lollipop/HotspotsBody.tsx";
-import { KindCardBody, KindCardControls, hasKindCard, drawsOwnWaiting } from "../lab/kind-cards";
+import { KindCardBody, KindCardControls, hasKindCard, drawsOwnWaiting, figureView } from "../lab/kind-cards";
 import { dataPart } from "../_oncoprint/view-display.ts";
 import { OncoprintCard, type TrackCatalog } from "../_oncoprint/OncoprintCard.tsx";
 import type { PageTab } from "./page-doc";
 import { api } from "../lab/api.ts";
 import { Tabs, TabsList, TabsTrigger } from "../_ui/tabs";
-import { LINE_TAB, LINE_TABS, SEG_TAB, SEG_TABS } from "../_ui/toolbar.ts";
+import { LINE_TABS, PAGE_TAB, SEG_TAB, SEG_TABS } from "../_ui/toolbar.ts";
+import { ViewHead } from "../lab/view-chrome.tsx";
+import { PlotControls } from "../lab/plot-controls.tsx";
 import { cn } from "../../lib/cn";
 
 type Patch = Record<string, unknown>;
@@ -23,8 +24,8 @@ type Patch = Record<string, unknown>;
 
 type TabState = { sent: string; result?: AnalysisResult; error?: string; loading: boolean };
 
-export function PortalTabs({ doc, tabs, titles, left, open, onOpen, onDoc, onCounts, catalog }: {
-  doc: AnalysisDoc; tabs: PageTab[]; titles: string[]; left: string[];
+export function PortalTabs({ doc, tabs, titles, open, onOpen, onDoc, onCounts, catalog }: {
+  doc: AnalysisDoc; tabs: PageTab[]; titles: string[];
   /** what the oncoprint's Tracks menu can offer: the study's attributes and profiles */
   catalog: TrackCatalog;
   /** the open tab, "Title" or "Title › Sub" */
@@ -37,6 +38,8 @@ export function PortalTabs({ doc, tabs, titles, left, open, onOpen, onDoc, onCou
 }) {
   const [state, setState] = useState<Record<string, TabState>>({});
   const gen = useRef<Record<string, number>>({});
+  // which header menus are open, kept outside the cards so a re-render does not close them
+  const menus = useRef(new Map<string, boolean>());
   const views = doc.views || [];
 
   const [mainTitle, subTitle] = open.split(" › ");
@@ -71,51 +74,50 @@ export function PortalTabs({ doc, tabs, titles, left, open, onOpen, onDoc, onCou
     const mine = link(idx.map((j) => j === i ? next : views[j]), k);
     onDoc({ ...doc, views: views.map((v, j) => { const m = idx.indexOf(j); return m >= 0 ? mine[m] : v; }) });
   };
-  const counts = Object.values(state).find((s) => s.result)?.result?.cohorts;
   const st = state[key];
   const spinning = (k: string) => Object.entries(state).some(([x, s]) => (x === k || x.startsWith(k + " › ")) && s.loading);
+  const chooser = tab && !sub ? tab.chooser : undefined;
+  const chooseFrom = (o: string) => {
+    const next = chooser!.apply(idx.map((i) => views[i]), o);
+    onDoc({ ...doc, views: views.map((v, j) => { const k = idx.indexOf(j); return k >= 0 ? next[k] : v; }) });
+  };
   return (
     <div className="portal">
-      <div className="portal-cohorts">
-        <strong className="meta">Groups:</strong>
-        {Object.keys(doc.cohorts || {}).map((n, i) => (
-          <span key={n} className="portal-group" style={{ background: SERIES[i % SERIES.length] }}>{n}{counts && counts[n] ? " (" + counts[n].count.toLocaleString() + ")" : ""}</span>
-        ))}
-        {left.length > 0 && <span className="meta">left out: {left.join("; ")}</span>}
-      </div>
-      <Tabs value={tab?.title ?? ""} onValueChange={onOpen} className="my-3">
+      <Tabs data-tw value={tab?.title ?? ""} onValueChange={onOpen} className="mb-4">
         <TabsList variant="line" aria-label="results tabs" className={LINE_TABS}>
           {tabs.map((t) => (
-            <TabsTrigger key={t.title} value={t.title} className={LINE_TAB}>
+            <TabsTrigger key={t.title} value={t.title} className={PAGE_TAB}>
               {t.title}{spinning(t.title) && <span className="spinner" />}
             </TabsTrigger>
           ))}
         </TabsList>
       </Tabs>
-      {tab?.sub && (
-        <Tabs value={sub?.title ?? ""} onValueChange={(v) => onOpen(tab.title + " › " + v)} className="-mt-1 mb-3">
-          <TabsList variant="line" aria-label={tab.title + " tabs"} className={LINE_TABS}>
-            {tab.sub.map((t) => (
-              <TabsTrigger key={t.title} value={t.title} className={cn(LINE_TAB, "px-2.5 pt-1 pb-1 text-sm")}>
-                {t.title}{spinning(tab.title + " › " + t.title) && <span className="spinner" />}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
+      {(tab?.sub || chooser) && (
+        <div className="viewtb mt-0 mb-4">
+          {tab?.sub && (
+            <div className="tbz">
+              <Tabs value={sub?.title ?? ""} onValueChange={(v) => onOpen(tab.title + " › " + v)}>
+                <TabsList aria-label={tab.title + " tabs"} className={SEG_TABS}>
+                  {tab.sub.map((t) => (
+                    <TabsTrigger key={t.title} value={t.title} className={SEG_TAB}>
+                      {t.title}{spinning(tab.title + " › " + t.title) && <span className="spinner" />}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+            </div>
+          )}
+          {chooser && (
+            <div className="tbz"><span className="tbl">{chooser.label}</span>
+              <Tabs value={chooser.value(idx.map((i) => views[i]))} onValueChange={chooseFrom}>
+                <TabsList aria-label={chooser.label} className={SEG_TABS}>
+                  {chooser.options.map((o) => <TabsTrigger key={o} value={o} className={cn(SEG_TAB, "font-mono")}>{o}</TabsTrigger>)}
+                </TabsList>
+              </Tabs>
+            </div>
+          )}
+        </div>
       )}
-      {tab && !sub && tab.chooser && (() => {
-        const ch = tab.chooser, mine = idx.map((i) => views[i]), on = ch.value(mine);
-        return (
-          <div className="portal-chooser">
-            <span className="meta">{ch.label}</span>
-            <Tabs value={on} onValueChange={(o) => { const next = ch.apply(mine, o); onDoc({ ...doc, views: views.map((v, j) => { const k = idx.indexOf(j); return k >= 0 ? next[k] : v; }) }); }}>
-              <TabsList aria-label={ch.label} className={SEG_TABS}>
-                {ch.options.map((o) => <TabsTrigger key={o} value={o} className={SEG_TAB}>{o}</TabsTrigger>)}
-              </TabsList>
-            </Tabs>
-          </div>
-        );
-      })()}
       {idx.map((vi, i) => {
         const spec = views[vi] as unknown as Record<string, unknown>;
         // a result belongs to the request that produced it; while a newer one runs, the cover says so
@@ -130,17 +132,22 @@ export function PortalTabs({ doc, tabs, titles, left, open, onOpen, onDoc, onCou
           ? <OncoprintCard view={spec} spec={v.spec} uploads={doc.uploads} busy={busy} cohortNames={Object.keys(doc.cohorts || {})} catalog={catalog}
               onView={(n) => edit(vi, n as unknown as View)} note={v.note} studies={v.studies} />
           : v && !v.error ? KindCardBody({ c: { ...mc, v } }) : null;
+        const drawn = Array.isArray(spec.cohorts) ? (spec.cohorts as string[]) : Object.keys(doc.cohorts || {});
         return (
-          <section key={key + vi} className="card viewcard portal-view">
-            {idx.length > 1 && <h3 className="vtitle">{titles[vi]}</h3>}
-            {hasKindCard(spec.kind) && <KindCardControls c={mc} />}
+          <section key={key + vi} className={cn("card viewcard", busy && !v && "viewloading")} aria-busy={busy || undefined}>
+            <ViewHead menuStore={menus.current} v={v && !v.error ? v : { kind: spec.kind }} title={titles[vi]}
+              sub={drawn.length ? drawn.join(drawn.length === 2 ? " vs " : ", ") : undefined} />
+            {hasKindCard(spec.kind as string) && <KindCardControls c={mc} />}
+            {spec.kind === "plot" && <PlotControls spec={spec} plot={v && !v.error ? v.plot : undefined} attrs={catalog.attrs} profiles={catalog.profiles}
+              loading={catalog.loading} busy={busy} update={(fn) => edit(vi, fn(spec))}
+              highlightOptions={Object.keys(doc.cohorts || {}).filter((n) => n !== drawn[0]).map((n) => ({ name: n, label: n, depth: 0 }))} />}
             {busy && !v && <div className="skeleton skeleton-view" />}
             {busy && v && !(drawsOwnWaiting(v.kind) && !v.error) && <div className="view-updating"><span className="spinner" /> updating…</div>}
             {!busy && st?.error && <p className="note">{st.error}</p>}
             {v && v.error && <p className="note">{v.error}</p>}
             {v && !v.error && (body
               ? <>{body}{v.caveat && <p className="note vfoot">{v.caveat}</p>}</>
-              : <ViewFigure v={v} />)}
+              : <ViewFigure v={figureView(spec, v)} />)}
           </section>
         );
       })}
diff --git a/app/portal/comparison/page.tsx b/app/portal/comparison/page.tsx
index 902fc441..d3dee03d 100644
--- a/app/portal/comparison/page.tsx
+++ b/app/portal/comparison/page.tsx
@@ -3,12 +3,14 @@
 // arrive in an analysis document (?doc=, the lab's own link encoding); the page's views replace
 // any the link carries unless they are this page's own (a link made on this page), so every
 // setting changed here travels in the same ?doc= (page-doc.ts).
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import type { AnalysisDoc, View } from "../../../lib/types";
 import { PortalTabs } from "../PortalTabs";
 import { useStudyKnown, expressionProfile, type StudyKnown } from "../study-known";
 import { arrange, decodeDoc, usePageDoc, type PageLayout } from "../page-doc";
+import { PortalHeader, PortalSummary } from "../portal-chrome.tsx";
+import { fmtInt } from "../../../lib/chart/format.ts";
 
 const CLINICAL_SHOWN = 8;
 
@@ -39,18 +41,21 @@ export default function ComparisonPage() {
   const { known, error } = useStudyKnown(study);
   const fresh = useMemo(() => linked && known && names.length >= 2 && names.length <= 6 ? comparisonLayout(linked, study, known) : null, [linked, known, study, names.length]);
   const page = usePageDoc(fresh, linked);
-  const head = <header className="portal-head"><a href="/lab">cbio-lab</a> <span className="meta">· Group comparison</span>
-    <div className="portal-summary"><div>
-      <h1>{known ? known.name : study || "Comparison"}</h1>
-      {known && <span>{names.length} groups: {names.join(", ")}</span>}
-    </div></div></header>;
-  if (!linked || !study) return <main className="portal-main">{head}<p className="note">This page compares the cohorts of an analysis document passed as <code>?doc=</code> (the lab&apos;s own link encoding); none was given.</p></main>;
-  if (names.length < 2 || names.length > 6) return <main className="portal-main">{head}<p className="note">a comparison page compares 2 to 6 cohorts; this analysis has {names.length}</p></main>;
-  if (error) return <main className="portal-main">{head}<p className="note">{error}</p></main>;
-  if (!fresh || !page.doc) return <main className="portal-main">{head}<div className="loading-block"><span className="spinner" /> loading {study}…</div></main>;
-  return <main className="portal-main">{head}
+  const [counts, setCounts] = useState<Record<string, number> | null>(null);
+  const shell = (body: React.ReactNode) => <><PortalHeader page="group comparison" /><main className="analysis-main">{body}</main></>;
+  if (!linked || !study) return shell(<p className="note">This page compares the cohorts of an analysis document passed as <code>?doc=</code> (the lab&apos;s own link encoding); none was given.</p>);
+  if (names.length < 2 || names.length > 6) return shell(<p className="note">a comparison page compares 2 to 6 cohorts; this analysis has {names.length}</p>);
+  if (error) return shell(<div className="error">{error}</div>);
+  const ready = !!(fresh && page.doc);
+  return shell(<>
+    <PortalSummary eyebrow="Group comparison" title={known ? known.name : study} study={study}
+      detail={known && <span className="tabular-nums">{fmtInt(known.samples)} samples · {fmtInt(known.patients)} patients</span>}
+      groups={names} counts={counts} left={fresh?.left || []} />
     {page.note && <p className="note">{page.note}</p>}
-    <PortalTabs doc={page.doc} tabs={fresh.tabs} titles={fresh.titles} left={fresh.left} open={page.open} onOpen={page.openTab} onDoc={page.update}
-      catalog={{ attrs: known!.attrs, profiles: known!.profiles, loading: false }} />
-  </main>;
+    {!ready
+      ? <><div className="skeleton mb-4 h-10" /><div className="card viewcard viewloading" aria-busy="true"><div className="skeleton skeleton-view" /></div></>
+      : <PortalTabs doc={page.doc!} tabs={fresh!.tabs} titles={fresh!.titles} open={page.open} onOpen={page.openTab} onDoc={page.update}
+          catalog={{ attrs: known!.attrs, profiles: known!.profiles, loading: false }}
+          onCounts={(c) => setCounts((o) => o || c)} />}
+  </>);
 }
diff --git a/app/portal/layout.tsx b/app/portal/layout.tsx
index 15973bec..f60c5c2f 100644
--- a/app/portal/layout.tsx
+++ b/app/portal/layout.tsx
@@ -1,7 +1,9 @@
 // The portal pages are client components rendered from the URL's search params; under Cache
-// Components that request-time read streams inside a Suspense boundary.
+// Components that request-time read streams inside a Suspense boundary. The query cache is the
+// lab's, so the study list is fetched once whichever page asks for it.
 import { Suspense } from "react";
+import { LabProviders } from "../lab/providers.tsx";
 
 export default function PortalLayout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <LabProviders><Suspense>{children}</Suspense></LabProviders>;
 }
diff --git a/app/portal/portal-chrome.tsx b/app/portal/portal-chrome.tsx
new file mode 100644
index 00000000..dd3826aa
--- /dev/null
+++ b/app/portal/portal-chrome.tsx
@@ -0,0 +1,86 @@
+"use client";
+// The chrome the portal pages share: the app's header (the lab's own), the summary card over the
+// tabs (the study, the query, the groups and their sizes).
+import { SeriesSwatch } from "../lab/view-chrome.tsx";
+import { Badge } from "../_ui/badge";
+import { fmtInt, fmtPct } from "../../lib/chart/format.ts";
+
+/** the app's header, as the lab draws it, naming which portal page this is */
+export function PortalHeader({ page }: { page: string }) {
+  return (
+    <header>
+      <h1><a href="/lab" className="text-foreground no-underline">cbio-lab</a></h1>
+      <span className="sub">{page}</span>
+      <span className="spacer" />
+      <a className="toplink" href="/lab?tab=explore">explore studies</a>
+      <a className="toplink" href="/lab?tab=analysis">analysis</a>
+      <a className="toplink" href="/verification">how we verify</a>
+    </header>
+  );
+}
+
+/** one group's swatch, name and size; the swatch is the colour the figures draw it in */
+function GroupChip({ name, i, n }: { name: string; i: number; n?: number }) {
+  return (
+    <span className="inline-flex h-7 items-center gap-1.5 rounded-pill border bg-paper px-2.5 text-sm">
+      <SeriesSwatch i={i} />
+      <span className="font-medium">{name}</span>
+      {n != null && <span className="text-muted-foreground tabular-nums">{fmtInt(n)}</span>}
+    </span>
+  );
+}
+
+/**
+ * The card over a portal page's tabs: what was asked (the study and, on the Results page, the
+ * genes), the headline answer beside it, and the groups every tab compares — with what the page
+ * left out for this study, so a missing tab is never silent.
+ */
+export function PortalSummary({ eyebrow, title, study, detail, genes, groups, counts, left, stat, action, children }: {
+  eyebrow: string; title: string; study: string; detail?: React.ReactNode; genes?: string[];
+  groups: string[]; counts: Record<string, number> | null; left: string[];
+  /** the headline number, right of the title */
+  stat?: { value: number; of: number; label: string } | null;
+  /** a control over the whole page (the Results page's "Modify query"), at the end of the groups row */
+  action?: React.ReactNode;
+  /** below the groups: the query form when it is open */
+  children?: React.ReactNode;
+}) {
+  return (
+    <section data-tw className="mb-4 rounded-lg border bg-card px-4.5 py-4">
+      <div className="flex flex-wrap items-start justify-between gap-x-9 gap-y-4">
+        <div className="min-w-0 flex-1 basis-96">
+          <div className="text-sm font-semibold tracking-[0.12em] text-muted-foreground uppercase">{eyebrow}</div>
+          <h2 className="mt-1 mb-1.5 font-serif text-xl font-semibold">{title}</h2>
+          <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1.5 text-md text-muted-foreground">
+            <span className="font-mono text-sm">{study}</span>
+            {detail && <><span aria-hidden="true">·</span>{detail}</>}
+            {genes && genes.length > 0 && <>
+              <span aria-hidden="true">·</span>
+              <span className="inline-flex flex-wrap gap-1">{genes.map((g) => <Badge key={g} variant="outline" className="font-mono">{g}</Badge>)}</span>
+            </>}
+          </div>
+        </div>
+        {stat && (
+          <div className="min-w-56 sm:text-right">
+            <div className="text-2xl leading-tight font-semibold text-accent-foreground tabular-nums">
+              {fmtInt(stat.value)} <span className="text-lg font-normal text-muted-foreground">({fmtPct(stat.of ? 100 * stat.value / stat.of : 0)})</span>
+            </div>
+            <div className="text-sm text-muted-foreground">{stat.label}</div>
+            <div className="mt-1.5 h-1.5 w-56 sm:ml-auto overflow-hidden rounded-pill bg-muted" aria-hidden="true">
+              <div className="h-full rounded-pill bg-primary" style={{ width: Math.min(100, stat.of ? 100 * stat.value / stat.of : 0) + "%" }} />
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="mt-4 flex flex-wrap items-center gap-2.5 border-t pt-2.5">
+        <span className="text-sm font-semibold tracking-[0.12em] text-muted-foreground uppercase">Groups</span>
+        {groups.length ? groups.map((n, i) => <GroupChip key={n} name={n} i={i} n={counts?.[n]} />) : <span className="skeleton h-7 w-48" />}
+        <span className="ml-auto flex flex-wrap items-center justify-end gap-2.5">
+          {left.length > 0 && <span className="text-sm text-muted-foreground" title="tabs this page leaves out for this study">not shown: {left.join("; ")}</span>}
+          {action}
+        </span>
+      </div>
+      {children}
+    </section>
+  );
+}
diff --git a/app/portal/query-editor.tsx b/app/portal/query-editor.tsx
new file mode 100644
index 00000000..d939b375
--- /dev/null
+++ b/app/portal/query-editor.tsx
@@ -0,0 +1,68 @@
+"use client";
+// The Results page's query, as cBioPortal's home page asks it: a study from the same list Explore
+// shows, and a gene query (OQL) entered through the app's gene query dialog. Submitting opens the
+// page for that query; nothing on the current page changes until then.
+import { useState } from "react";
+import { Pencil } from "lucide-react";
+import { Button } from "../_ui/button";
+import { StudySearch, StudyRows, filterStudies } from "../_studies/study-list.tsx";
+import { GeneQueryDialog } from "../_genes/GeneQueryDialog.tsx";
+import { useStudies } from "../lab/use-catalogs.ts";
+import { checkGeneQuery } from "../../lib/gene-query.ts";
+import { cn } from "../../lib/cn";
+
+/** the most genes a Results page takes: the oncoprint's rows */
+export const RESULTS_MAX_GENES = 12;
+
+const LABEL = "text-sm font-semibold tracking-[0.12em] text-muted-foreground uppercase";
+
+export function QueryEditor({ study: study0, query: query0, className }: { study: string; query: string; className?: string }) {
+  const studies = useStudies();
+  const [study, setStudy] = useState(study0);
+  const [query, setQuery] = useState(query0);
+  const [search, setSearch] = useState("");
+  const [caps, setCaps] = useState<Set<string>>(() => new Set());
+  const [genesOpen, setGenesOpen] = useState(false);
+  const hits = filterStudies(studies, search, caps);
+  const chosen = studies.find((s) => s.id === study);
+  const check = checkGeneQuery(query, "oql");
+  const why = !study ? "choose a study" : !check.genes.length ? "enter at least one gene"
+    : check.error || check.entries.find((e) => e.error)?.error
+    || (check.genes.length > RESULTS_MAX_GENES ? "a results page takes at most " + RESULTS_MAX_GENES + " genes; this has " + check.genes.length : null);
+  const href = "/portal/results?" + new URLSearchParams({ study, genes: query.trim() }).toString();
+  return (
+    <div data-tw className={cn("grid gap-x-6 gap-y-4 lg:grid-cols-[minmax(0,1fr)_22rem]", className)}>
+      <div className="min-w-0">
+        <div className="flex items-baseline gap-2.5">
+          <span className={LABEL}>Study</span>
+          <span className="min-w-0 truncate text-md">{chosen ? <><strong className="font-semibold">{chosen.name}</strong> <span className="text-muted-foreground">· {chosen.patients.toLocaleString()} patients</span></> : study || <span className="text-muted-foreground">none chosen</span>}</span>
+        </div>
+        <StudySearch query={search} onQuery={setSearch} caps={caps} onCaps={setCaps} matches={hits.length} total={studies.length} />
+        <StudyRows hits={hits} loading={!studies.length} pick="one" selected={study ? [study] : []} onToggle={setStudy} />
+      </div>
+      <div className="flex min-w-0 flex-col gap-2.5">
+        <span className={LABEL}>Genes</span>
+        <button type="button" onClick={() => setGenesOpen(true)} aria-label="edit the gene query"
+          className="min-h-28 rounded-md border bg-paper px-3 py-2 text-left hover:border-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none">
+          {check.entries.length
+            ? <ul className="m-0 list-none p-0">{check.entries.map((e, i) => (
+                <li key={i} className="flex items-baseline gap-2 text-sm">
+                  <code className={cn("font-mono text-md", e.error && "text-destructive")}>{e.text}</code>
+                  <span className="min-w-0 truncate text-muted-foreground">{e.error || e.meaning}</span>
+                </li>))}</ul>
+            : <span className="text-md text-muted-foreground">Click to enter genes or an OQL query…</span>}
+        </button>
+        <Button variant="outline" size="sm" className="self-start" onClick={() => setGenesOpen(true)}><Pencil />Edit genes / OQL…</Button>
+        <div className="mt-auto flex items-center gap-2.5 border-t pt-2.5">
+          <Button asChild={!why} disabled={!!why} title={why || "open the results for this query"}>
+            {why ? <span>Submit query</span> : <a href={href}>Submit query</a>}
+          </Button>
+          {why && <span className="text-sm text-muted-foreground">{why}</span>}
+        </div>
+      </div>
+      <GeneQueryDialog open={genesOpen} onOpenChange={setGenesOpen} title="Genes to query" mode="oql" value={query} max={RESULTS_MAX_GENES}
+        description="A patient is altered if any line matches. A bare gene means any alteration in it; add OQL to be specific."
+        onApply={(text) => setQuery(text)} />
+    </div>
+  );
+}
diff --git a/app/portal/results/page.tsx b/app/portal/results/page.tsx
index 892570b7..50cfd397 100644
--- a/app/portal/results/page.tsx
+++ b/app/portal/results/page.tsx
@@ -10,9 +10,12 @@ import { useStudyKnown, expressionProfile, type StudyKnown } from "../study-know
 import { arrange, decodeDoc, usePageDoc, type PageLayout } from "../page-doc";
 import { ALTERATION_CELLS, cellLabel } from "../../../lib/lollipop";
 import { Button } from "../../_ui/button";
-import { Input } from "../../_ui/input";
-import { FIELD } from "../../_ui/toolbar.ts";
-import { cn } from "../../../lib/cn";
+import { TB } from "../../_ui/toolbar.ts";
+import { Pencil } from "lucide-react";
+import { fmtInt } from "../../../lib/chart/format.ts";
+import { PortalHeader, PortalSummary } from "../portal-chrome.tsx";
+import { QueryEditor, RESULTS_MAX_GENES } from "../query-editor.tsx";
+import { checkGeneQuery } from "../../../lib/gene-query.ts";
 
 const CLINICAL_SHOWN = 8;
 
@@ -39,13 +42,14 @@ function linkMutations(vs: View[], changed: number): View[] {
 }
 
 /** The Results page as the portal has it, for this study and genes. */
-function resultsLayout(study: string, genes: string[], known: StudyKnown): PageLayout {
+function resultsLayout(study: string, entries: string[], genes: string[], known: StudyKnown): PageLayout {
+  // the query decides the groups, entry by entry; the views draw its genes
   const cohorts: Record<string, CohortDef> = {
-    Altered: { all: [{ any: genes.map((g) => ({ kind: "oql", q: g })) }] } as CohortDef,
-    Unaltered: { all: genes.map((g) => ({ not: { kind: "oql", q: g } })) } as CohortDef,
+    Altered: { all: [{ any: entries.map((q) => ({ kind: "oql", q })) }] } as CohortDef,
+    Unaltered: { all: entries.map((q) => ({ not: { kind: "oql", q } })) } as CohortDef,
   };
   const expr = expressionProfile(known.profiles);
-  // the portal correlates over every queried sample, not one group
+  // the portal plots and correlates over every queried sample, not one group
   if (expr) cohorts["All patients"] = { all: [] } as CohortDef;
   const both = ["Altered", "Unaltered"];
   const v = (title: string, view: Record<string, unknown>) => ({ title, view: view as unknown as View });
@@ -54,7 +58,7 @@ function resultsLayout(study: string, genes: string[], known: StudyKnown): PageL
     { title: "Oncoprint", views: [v("Oncoprint", { kind: "oncoprint", genes, cohorts: both })] },
     { title: "Cancer Types Summary", views: [v("Cancer types summary", { kind: "cancertypes", genes, cohorts: ["Altered"] })] },
     ...(genes.length >= 2 ? [{ title: "Mutual Exclusivity", views: [v("Mutual exclusivity", { kind: "cooccurrence", genes, cohorts: both })] }] : []),
-    ...(expr ? [{ title: "Plots", views: [v(genes[0] + " copy number vs mRNA", { kind: "plot", x: { source: "alteration", gene: genes[0], by: "cna" }, y: { source: "molecular", profileType: expr, gene: genes[0] }, cohorts: both })] }] : []),
+    ...(expr ? [{ title: "Plots", views: [v("Plot", { kind: "plot", x: { source: "alteration", gene: genes[0], by: "cna" }, y: { source: "molecular", profileType: expr, gene: genes[0] }, cohorts: ["All patients"], highlight: ["Altered"] })] }] : []),
     // the portal's Mutations tab: one gene at a time, its lollipop over its mutation table
     { title: "Mutations", views: [v("Mutation diagram", { kind: "hotspots", genes: [genes[0]], cohorts: ["Altered"] }),
         v("Mutation table", { kind: "mutations", gene: genes[0], cohorts: ["Altered"] })],
@@ -78,37 +82,44 @@ function resultsLayout(study: string, genes: string[], known: StudyKnown): PageL
 export default function ResultsPage() {
   const q = useSearchParams();
   const study = (q.get("study") || "").replace(/[^A-Za-z0-9._-]/g, "");
-  const genesParam = q.get("genes") || "";
-  const genes = useMemo(() => [...new Set(genesParam.split(/[\s,;]+/).map((g) => g.trim().toUpperCase()).filter((g) => /^[A-Z0-9][A-Z0-9.-]{0,19}$/.test(g)))], [genesParam]);
+  const queryText = q.get("genes") || "";
+  const check = useMemo(() => checkGeneQuery(queryText, "oql"), [queryText]);
+  const genes = check.genes;
+  const queryError = check.error || check.entries.filter((e) => e.error).map((e) => e.text + ": " + e.error).join("; ") || null;
+  const filtered = check.entries.some((e) => e.meaning !== "any alteration");
   const linked = useMemo(() => decodeDoc(q.get("doc")), []);   // eslint-disable-line react-hooks/exhaustive-deps
   const { known, error } = useStudyKnown(study);
-  const fresh = useMemo(() => known && genes.length && genes.length <= 12 ? resultsLayout(study, genes, known) : null, [known, study, genes]);
+  const fresh = useMemo(() => known && genes.length && genes.length <= RESULTS_MAX_GENES && !queryError ? resultsLayout(study, check.entries.map((e) => e.text), genes, known) : null, [known, study, check, genes, queryError]);
   const page = usePageDoc(fresh, linked);
   const [counts, setCounts] = useState<Record<string, number> | null>(null);
+  const [editing, setEditing] = useState(false);
+  const queried = known?.patients || 0;
   const altered = counts?.Altered;
-  const head = <header className="portal-head"><a href="/lab">cbio-lab</a> <span className="meta">· Results</span>
-    <div className="portal-summary">
-      <div>
-        <h1>{known ? known.name : study || "Results"}</h1>
-        {known && <span>All samples ({known.samples.toLocaleString()} samples / {known.patients.toLocaleString()} patients) — {genes.join(", ")}</span>}
-      </div>
-      {known && altered != null && <strong>Queried genes are altered in {altered.toLocaleString()} ({Math.round(100 * altered / (known.patients || 1))}%) of queried patients</strong>}
-    </div></header>;
-  if (!study || !genes.length) return (
-    <main className="portal-main">{head}
-      <form className="card" method="get">
-        <label className="tbfield">study <Input name="study" defaultValue={study} placeholder="msk_chord_2024" className={cn(FIELD, "w-48")} /></label>{" "}
-        <label className="tbfield">genes <Input name="genes" defaultValue={genes.join(" ")} placeholder="KRAS NRAS BRAF" className={cn(FIELD, "w-48")} /></label>{" "}
-        <Button size="sm" className="h-ctl px-3 text-md" type="submit">show</Button>
-      </form>
-    </main>);
-  if (genes.length > 12) return <main className="portal-main">{head}<p className="note">a results page takes at most 12 genes, the oncoprint&apos;s rows; this asks for {genes.length}</p></main>;
-  if (error) return <main className="portal-main">{head}<p className="note">{error}</p></main>;
-  if (!fresh || !page.doc) return <main className="portal-main">{head}<div className="loading-block"><span className="spinner" /> loading {study}…</div></main>;
-  return <main className="portal-main">{head}
+  const shell = (body: React.ReactNode) => <><PortalHeader page="query results" /><main className="analysis-main">{body}</main></>;
+  if (!study || !genes.length) return shell(
+    <section data-tw className="mb-4 rounded-lg border bg-card px-4.5 py-4">
+      <div className="text-sm font-semibold tracking-[0.12em] text-muted-foreground uppercase">Query</div>
+      <p className="mt-1 mb-4 text-md text-muted-foreground">A study and up to {RESULTS_MAX_GENES} genes: the page shows the patients altered in any of them against the rest, tab by tab, as cBioPortal&apos;s Results page does.</p>
+      <QueryEditor study={study} query={queryText} />
+    </section>);
+  if (queryError) return shell(<><div className="error">this query cannot be read — {queryError}</div><QueryEditor study={study} query={queryText} /></>);
+  if (genes.length > RESULTS_MAX_GENES) return shell(<p className="note">a results page takes at most {RESULTS_MAX_GENES} genes, the oncoprint&apos;s rows; this asks for {genes.length}</p>);
+  if (error) return shell(<div className="error">{error}</div>);
+  const ready = !!(fresh && page.doc);
+  return shell(<>
+    <PortalSummary eyebrow="Query results" title={known ? known.name : study} study={study} genes={check.entries.map((e) => e.text)}
+      detail={known && <span className="tabular-nums">{fmtInt(known.samples)} samples · {fmtInt(known.patients)} patients</span>}
+      groups={Object.keys(fresh?.doc.cohorts || {})} counts={counts} left={fresh?.left || []}
+      stat={altered != null && queried ? { value: altered, of: queried, label: "queried patients altered in " + (check.entries.length === 1 ? check.entries[0].text : "any of the " + check.entries.length + " query lines") } : null}
+      action={<Button variant="outline" size="sm" className={TB} aria-expanded={editing} onClick={() => setEditing((e) => !e)}><Pencil />Modify query</Button>}>
+      {filtered && <p className="mt-2.5 mb-0 text-sm text-muted-foreground">The query&apos;s OQL decides who is Altered; the oncoprint and the gene tabs draw every alteration of {genes.length === 1 ? "its gene" : "its genes"}.</p>}
+      {editing && <QueryEditor study={study} query={queryText} className="mt-4 border-t pt-4" />}
+    </PortalSummary>
     {page.note && <p className="note">{page.note}</p>}
-    <PortalTabs doc={page.doc} tabs={fresh.tabs} titles={fresh.titles} left={fresh.left} open={page.open} onOpen={page.openTab} onDoc={page.update}
-      catalog={{ attrs: known!.attrs, profiles: known!.profiles, loading: false }}
-      onCounts={(c) => setCounts((o) => o || c)} />
-  </main>;
+    {!ready
+      ? <><div className="skeleton mb-4 h-10" /><div className="card viewcard viewloading" aria-busy="true"><div className="skeleton skeleton-view" /></div></>
+      : <PortalTabs doc={page.doc!} tabs={fresh!.tabs} titles={fresh!.titles} open={page.open} onOpen={page.openTab} onDoc={page.update}
+          catalog={{ attrs: known!.attrs, profiles: known!.profiles, loading: false }}
+          onCounts={(c) => setCounts((o) => o || c)} />}
+  </>);
 }
diff --git a/e2e-lab-races.cjs b/e2e-lab-races.cjs
index 9df082b3..49c99cb7 100644
--- a/e2e-lab-races.cjs
+++ b/e2e-lab-races.cjs
@@ -94,9 +94,12 @@ async function labRaces(browser, ok, BASE) {
       const onFail = (r) => { if (r.url().includes("/api/analysis")) failed++; };
       page.on("request", onReq); page.on("response", onRes); page.on("requestfailed", onFail);
       await page.locator(".viewcard .genesbtn").first().click();
-      const pills = await page.locator("[role=dialog].genedialog [data-slot=badge]", { hasText: "TP53" }).count();
-      await page.locator("[role=dialog].genedialog [data-slot=badge]", { hasText: "TP53" }).click(); // re-runs this view
-      await page.locator("[role=dialog].genedialog").getByRole("button", { name: "Done" }).click();
+      const dlg = page.locator("[role=dialog].gene-query-dialog");
+      const listed = await dlg.locator("textarea").inputValue();
+      const pills = listed.split(/\s+/).filter((g) => g === "TP53").length;
+      await dlg.locator("textarea").fill(listed.split(/\s+/).filter((g) => g && g !== "TP53").join(" "));
+      await page.waitForFunction(() => { const b = [...document.querySelectorAll("[role=dialog].gene-query-dialog button")].find((x) => x.textContent === "Apply"); return b && !b.disabled; }, null, { timeout: 60000 });
+      await dlg.getByRole("button", { name: "Apply" }).click(); // re-runs this view
       await until(async () => !(await genesOf()).includes("TP53"), "the re-run without TP53", 60000).catch(() => {});
       const after = await genesOf();
       // on a failure, whether the edit reached the document says which half went wrong; a further
@@ -120,12 +123,11 @@ async function labRaces(browser, ok, BASE) {
     //    inside the page component would be a new component every render, and lose it.
     {
       await page.locator(".viewcard .genesbtn").first().click();
-      const input = page.locator("[role=dialog].genedialog input[placeholder='add a gene…']");
+      const input = page.locator("[role=dialog].gene-query-dialog input[aria-label='search genes']");
       await input.click();
       await input.type("BRC");
       await tool(page, "analysis_set_details", { notes: "re-render while typing" });
       await settled(page);
-      // (focus is not asserted: the input is disabled while the edit runs, which blurs it)
       const kept = await input.inputValue().catch(() => null);
       await page.keyboard.press("Escape");
       ok("lab: text being typed in a dialog survives the page re-rendering", kept === "BRC", JSON.stringify(kept));
diff --git a/e2e.cjs b/e2e.cjs
index b809989c..323499fb 100644
--- a/e2e.cjs
+++ b/e2e.cjs
@@ -503,11 +503,16 @@ async function main() {
         })).toString("base64")));
         await page.waitForSelector("button.genesbtn", { timeout: 300000 });
         await page.locator("button.genesbtn").first().click();
-        await page.waitForSelector("[role=dialog].genedialog", { timeout: 30000 });
-        const panel = page.locator("[role=dialog].genedialog");
-        const before = await panel.locator("[data-slot=badge]").count();
-        await panel.locator("input[list=view-genes]").fill("PIK3CA");
-        await panel.locator('button:has-text("add")').click();
+        await page.waitForSelector("[role=dialog].gene-query-dialog", { timeout: 30000 });
+        const panel = page.locator("[role=dialog].gene-query-dialog");
+        // the dialog starts from the view's genes, as text, and applies the text as left
+        const text = panel.locator("textarea");
+        const startText = await text.inputValue();
+        const before = startText.trim().split(/\s+/).length;
+        await text.fill(startText.trim() + " PIK3CA");
+        const apply = panel.getByRole("button", { name: "Apply" });
+        await page.waitForFunction(() => { const b = [...document.querySelectorAll("[role=dialog].gene-query-dialog button")].find((x) => x.textContent === "Apply"); return b && !b.disabled; }, null, { timeout: 60000 });
+        await apply.click();
         const genesNow = async () => page.evaluate(() => {
           const v = (JSON.parse(document.querySelector("#docjson").value).views || [])
             .find((x) => x.kind === "compare");
@@ -523,7 +528,11 @@ async function main() {
         // appended, not replaced — reading the RESULT's `genes` field instead of
         // the document's once wiped the list down to the one just typed
         const appended = added.length === before + 1 && added.includes("TP53");
-        await panel.locator("[data-slot=badge]", { hasText: "KRAS" }).first().click();
+        await page.locator("button.genesbtn").first().click();
+        await panel.locator("textarea").waitFor({ timeout: 30000 });
+        await panel.locator("textarea").fill(added.filter((g) => g !== "KRAS").join(" "));
+        await page.waitForFunction(() => { const b = [...document.querySelectorAll("[role=dialog].gene-query-dialog button")].find((x) => x.textContent === "Apply"); return b && !b.disabled; }, null, { timeout: 60000 });
+        await panel.getByRole("button", { name: "Apply" }).click();
         await page.waitForFunction(() => {
           const ta = document.querySelector("#docjson"); if (!ta) return false;
           try { return !(JSON.parse(ta.value).views || [])
diff --git a/lib/api-schemas.ts b/lib/api-schemas.ts
index 4af4e5ec..b6c32316 100644
--- a/lib/api-schemas.ts
+++ b/lib/api-schemas.ts
@@ -127,6 +127,16 @@ export const LockRequest = z.object({
   ...customData,
 });
 
+/**
+ * POST /api/genes — the gene catalog for the gene query dialog: check `symbols` (gene, alias of
+ * one, or unknown), search genes and gene sets by `search`, or list `geneset`'s members.
+ */
+export const GenesRequest = z.object({
+  symbols: z.array(z.string()).optional(),
+  search: z.string().max(40).optional(),
+  geneset: z.string().max(200).optional(),
+});
+
 /** A spec or a document goes out with the fields the envelope does not name. */
 type Open<T> = T & Record<string, unknown>;
 export type AnalysisBody = z.input<typeof AnalysisRequest>;
@@ -141,6 +151,7 @@ export type MembersBody = z.input<typeof MembersRequest>;
 export type ViewPageBody = z.input<typeof ViewPageRequest>;
 export type TableBody = z.input<typeof TableRequest>;
 export type LockBody = z.input<typeof LockRequest>;
+export type GenesBody = z.input<typeof GenesRequest>;
 
 /**
  * The body, checked against its envelope, with its defaults filled in and every field the
diff --git a/lib/gene-query.ts b/lib/gene-query.ts
new file mode 100644
index 00000000..52362961
--- /dev/null
+++ b/lib/gene-query.ts
@@ -0,0 +1,117 @@
+// What a gene query typed into a page says, checked entry by entry as it is typed: an OQL query
+// (each line or ";"-separated entry a gene and what counts as altered in it) or a plain gene list
+// (cBioPortal's, where `[A B]` is one merged row). Pure and browser-safe; the symbols it finds are
+// checked against the warehouse's gene table separately (POST /api/genes).
+import { parseOql, type OqlSpec } from "./oql-parse.ts";
+import { parseGeneList, geneSymbols, normalizeGeneTracks, MAX_GENE_TRACKS, type GeneTrackSpec } from "./gene-tracks.ts";
+
+export type GeneQueryMode = "oql" | "genes";
+
+export interface QueryEntry {
+  /** the entry as typed */
+  text: string;
+  /** the symbols it names, upper-cased */
+  genes: string[];
+  /** what it selects, in words, when it parses */
+  meaning?: string;
+  error?: string;
+}
+
+export interface QueryCheck {
+  entries: QueryEntry[];
+  /** every symbol, in order of first appearance */
+  genes: string[];
+  /** what is wrong with the query as a whole (too many entries, unbalanced brackets) */
+  error?: string;
+  /** the gene list's rows, in "genes" mode, when it parses */
+  tracks?: GeneTrackSpec[];
+}
+
+/** the most entries an OQL query takes (lib/oql-parse.ts) */
+export const MAX_OQL_ENTRIES = 30;
+
+const CLASS_WORDS: Record<string, string> = {
+  missense: "missense", nonsense: "nonsense", nonstart: "nonstart", nonstop: "nonstop", frameshift: "frameshift",
+  inframe: "in-frame", splice: "splice", promoter: "promoter", trunc: "truncating",
+};
+
+/** one OQL alteration, in words */
+export function describeSpec(s: OqlSpec): string {
+  const drv = s.driver ? " (drivers only)" : "";
+  const range = s.range ? " at positions " + (s.range.start ?? "") + "–" + (s.range.end ?? "") + (s.range.contained ? ", wholly inside" : "") : "";
+  switch (s.type) {
+    case "MUT": return (s.pchange ? s.pchange + " mutations" : s.cls ? CLASS_WORDS[s.cls] + " mutations" : "mutations") + range + drv;
+    case "CNA": return (s.cna === 2 ? "amplification" : s.cna === -2 ? "deep deletion" : "amplification or deep deletion") + drv;
+    case "SV": return "structural variants" + drv;
+    case "EXP": return "mRNA z " + s.op + " " + s.z;
+    case "PROT": return "protein z " + s.op + " " + s.z;
+    default: return s.driver ? "any driver alteration" : "any alteration";
+  }
+}
+
+export function checkGeneQuery(text: string, mode: GeneQueryMode): QueryCheck {
+  if (mode === "genes") {
+    try {
+      const tracks = parseGeneList(text);
+      const entries: QueryEntry[] = tracks.map((t) => typeof t === "string"
+        ? { text: t, genes: [t.toUpperCase()], meaning: "its own row" }
+        : { text: "[" + (t.label ? '"' + t.label + '" ' : "") + t.genes.join(" ") + "]", genes: t.genes.map((g) => g.toUpperCase()), meaning: "one merged row" });
+      let error: string | undefined;
+      try { normalizeGeneTracks(tracks); } catch (e) { error = String((e as Error).message || e); }
+      if (!error && tracks.length > MAX_GENE_TRACKS) error = "a gene list takes at most " + MAX_GENE_TRACKS + " rows; this has " + tracks.length;
+      return { entries, genes: geneSymbols(tracks).map((g) => g.toUpperCase()), tracks, error };
+    } catch (e) {
+      return { entries: [], genes: [], error: String((e as Error).message || e) };
+    }
+  }
+  const parts = text.split(/[;\n]/).flatMap(splitBareGenes);
+  const entries: QueryEntry[] = parts.map((p) => {
+    const head = (p.match(/^([A-Za-z0-9.-]+)/)?.[1] || "").toUpperCase();
+    try {
+      const [e] = parseOql(p);
+      return { text: p, genes: [e.gene], meaning: e.specs.map(describeSpec).join(" or ") };
+    } catch (err) {
+      return { text: p, genes: head ? [head] : [], error: String((err as Error).message || err).replace(/^OQL:?\s*/, "") };
+    }
+  });
+  const genes = [...new Set(entries.flatMap((e) => e.genes))];
+  const error = parts.length > MAX_OQL_ENTRIES ? "a query takes at most " + MAX_OQL_ENTRIES + " entries; this has " + parts.length : undefined;
+  return { entries, genes, error };
+}
+
+/**
+ * One line of OQL as the portal reads it: genes separated by spaces or commas, the last of them
+ * optionally followed by ":" and what counts as altered — "KRAS NRAS BRAF" is three entries,
+ * "TP53 KRAS: MUT" two.
+ */
+function splitBareGenes(line: string): string[] {
+  const t = line.trim();
+  if (!t) return [];
+  const m = t.match(/^((?:[A-Za-z0-9.-]+[\s,]+)*)([A-Za-z0-9.-]+\s*:.*)$/);
+  if (m) return [...m[1].split(/[\s,]+/).filter(Boolean), m[2].trim()];
+  return t.includes(":") ? [t] : t.split(/[\s,]+/).filter(Boolean);
+}
+
+/** `symbol` replaced by `by` wherever it stands as a gene in the query text, whatever its case */
+export function replaceSymbol(text: string, symbol: string, by: string): string {
+  const esc = symbol.replace(/[.*+?^${}()|[\]\\-]/g, "\\$&");
+  return text.replace(new RegExp("(^|[\\s,;\\[\\n])" + esc + "(?=$|[\\s,;:\\]\\n])", "gim"), "$1" + by);
+}
+
+/** OQL as this deployment answers it: one example per construct, with what it selects */
+export const OQL_HELP: { q: string; means: string }[] = [
+  { q: "TP53", means: "any alteration in TP53" },
+  { q: "KRAS: MUT", means: "any KRAS mutation" },
+  { q: "KRAS: G12C", means: "one protein change (shorthand for MUT=G12C)" },
+  { q: "BRAF: MUT=V600E", means: "one protein change" },
+  { q: "TP53: TRUNC", means: "truncating mutations; also MISSENSE, NONSENSE, FRAMESHIFT, INFRAME, SPLICE, NONSTART, NONSTOP, PROMOTER" },
+  { q: "ERBB2: AMP", means: "amplification (high-level, +2)" },
+  { q: "CDKN2A: HOMDEL", means: "deep deletion (−2)" },
+  { q: "ALK: FUSION", means: "structural variants" },
+  { q: "EGFR: DRIVER", means: "any alteration OncoKB calls oncogenic" },
+  { q: "KRAS: MUT_DRIVER AMP", means: "driver mutations, or amplification (space = or)" },
+  { q: "BRCA2: TRUNC_(1400-)", means: "truncating mutations from position 1400 on; (a-b), (-b), * for wholly inside" },
+];
+
+/** what the deployment refuses, and why — said up front so a pasted portal query is not a surprise */
+export const OQL_REFUSED = "Not answered here: GAIN and HETLOSS (only high-level copy number is stored), GERMLINE and SOMATIC (public studies are germline-stripped). Each is refused with that reason rather than approximated.";
diff --git a/lib/genes.ts b/lib/genes.ts
new file mode 100644
index 00000000..d671f3b4
--- /dev/null
+++ b/lib/genes.ts
@@ -0,0 +1,86 @@
+// The warehouse's gene catalog, for the gene query dialog: is a symbol a gene (HUGO), an alias of
+// one, or neither; genes and gene sets matching what is being typed; a gene set's members.
+// Reference data only — no patient, sample or study is read here.
+import { chQuery, DB } from "./ch.ts";
+import { sq } from "./compiler.ts";
+
+export type GeneStatus = "gene" | "alias" | "unknown";
+export interface GeneCheck {
+  symbol: string; status: GeneStatus;
+  /** the HUGO symbol(s) an alias stands for; one, mostly */
+  hugo?: string[];
+  type?: string;
+}
+export interface GeneHit { symbol: string; type: string; aliasOf?: string }
+export interface GeneSetHit { name: string; size: number; description: string }
+
+/** symbols a request may check at once; a gene query names at most 32 */
+export const MAX_CHECK = 64;
+/** the largest gene set offered whole: an OQL query takes 30 entries, a gene list 32 symbols */
+export const MAX_SET_GENES = 30;
+
+const SYMBOL_RE = /^[A-Za-z0-9][A-Za-z0-9.-]{0,19}$/;
+
+export async function checkGenes(symbols: string[]): Promise<GeneCheck[]> {
+  const asked = [...new Set(symbols.map((s) => String(s).trim().toUpperCase()).filter(Boolean))];
+  if (asked.length > MAX_CHECK) throw new Error("a request checks at most " + MAX_CHECK + " symbols; this has " + asked.length);
+  const bad = asked.filter((s) => !SYMBOL_RE.test(s));
+  const ok = asked.filter((s) => SYMBOL_RE.test(s));
+  if (!ok.length) return bad.map((symbol) => ({ symbol, status: "unknown" }));
+  const list = ok.map(sq).join(", ");
+  const [genes, aliases] = await Promise.all([
+    chQuery<{ s: string; type: string }>(
+      "SELECT upper(hugo_gene_symbol) AS s, any(ifNull(type, '')) AS type FROM " + DB + ".gene\n" +
+      "WHERE upper(hugo_gene_symbol) IN (" + list + ") AND entrez_gene_id > 0 GROUP BY s"),
+    chQuery<{ a: string; hugo: string[] }>(
+      "SELECT upper(a.gene_alias) AS a, groupUniqArray(g.hugo_gene_symbol) AS hugo FROM " + DB + ".gene_alias a\n" +
+      "JOIN " + DB + ".gene g ON g.entrez_gene_id = a.entrez_gene_id\n" +
+      "WHERE upper(a.gene_alias) IN (" + list + ") AND a.entrez_gene_id > 0 GROUP BY a"),
+  ]);
+  const isGene = new Map(genes.data.map((r) => [r.s, r.type]));
+  const aliasOf = new Map(aliases.data.map((r) => [r.a, r.hugo.slice().sort()]));
+  return asked.map((symbol): GeneCheck => {
+    if (isGene.has(symbol)) return { symbol, status: "gene", type: isGene.get(symbol) || undefined };
+    const hugo = aliasOf.get(symbol);
+    if (hugo?.length) return { symbol, status: "alias", hugo };
+    return { symbol, status: "unknown" };
+  });
+}
+
+/** genes whose symbol (or an alias) starts with `q`, protein-coding first; gene sets whose name holds it */
+export async function searchGenes(q0: string): Promise<{ genes: GeneHit[]; sets: GeneSetHit[] }> {
+  const q = q0.trim().toUpperCase();
+  if (!/^[A-Z0-9][A-Z0-9._ -]{0,39}$/.test(q)) return { genes: [], sets: [] };
+  const sym = q.replace(/[ _]/g, "");
+  const [genes, aliases, sets] = await Promise.all([
+    SYMBOL_RE.test(sym) ? chQuery<{ s: string; type: string }>(
+      "SELECT hugo_gene_symbol AS s, any(ifNull(type, '')) AS type FROM " + DB + ".gene\n" +
+      "WHERE startsWith(upper(hugo_gene_symbol), " + sq(sym) + ") AND entrez_gene_id > 0 GROUP BY s\n" +
+      "ORDER BY type = 'protein-coding' DESC, length(s), s LIMIT 10") : Promise.resolve({ data: [] }),
+    SYMBOL_RE.test(sym) ? chQuery<{ a: string; s: string }>(
+      "SELECT any(a.gene_alias) AS a, g.hugo_gene_symbol AS s FROM " + DB + ".gene_alias a\n" +
+      "JOIN " + DB + ".gene g ON g.entrez_gene_id = a.entrez_gene_id\n" +
+      "WHERE upper(a.gene_alias) = " + sq(sym) + " AND a.entrez_gene_id > 0 GROUP BY s LIMIT 3") : Promise.resolve({ data: [] }),
+    q.length >= 3 ? chQuery<{ name: string; size: string; description: string }>(
+      "SELECT s.name AS name, count() AS size, any(s.description) AS description FROM " + DB + ".geneset s\n" +
+      "JOIN " + DB + ".geneset_gene sg ON sg.geneset_id = s.id\n" +
+      "WHERE positionCaseInsensitive(s.name, " + sq(q.replace(/ /g, "_")) + ") > 0 GROUP BY name\n" +
+      "ORDER BY size <= " + MAX_SET_GENES + " DESC, length(name), name LIMIT 8") : Promise.resolve({ data: [] }),
+  ]);
+  const out: GeneHit[] = aliases.data.filter((r) => r.s.toUpperCase() !== sym).map((r) => ({ symbol: r.s, type: "", aliasOf: r.a }));
+  for (const r of genes.data) if (!out.some((h) => h.symbol === r.s)) out.push({ symbol: r.s, type: r.type });
+  return { genes: out, sets: sets.data.map((r) => ({ name: r.name, size: Number(r.size), description: r.description })) };
+}
+
+/** a gene set's member symbols, refused past MAX_SET_GENES with the limit named */
+export async function geneSetMembers(name: string): Promise<string[]> {
+  const r = await chQuery<{ s: string }>(
+    "SELECT DISTINCT g.hugo_gene_symbol AS s FROM " + DB + ".geneset s\n" +
+    "JOIN " + DB + ".geneset_gene sg ON sg.geneset_id = s.id\n" +
+    "JOIN " + DB + ".gene g ON g.entrez_gene_id = sg.entrez_gene_id\n" +
+    "WHERE s.name = " + sq(name) + " ORDER BY s");
+  if (!r.data.length) throw new Error("no gene set named “" + name + "”");
+  if (r.data.length > MAX_SET_GENES)
+    throw new Error("“" + name + "” has " + r.data.length + " genes; a query takes at most " + MAX_SET_GENES + " — add the ones you want one by one");
+  return r.data.map((x) => x.s);
+}
diff --git a/lib/oql-parse.ts b/lib/oql-parse.ts
new file mode 100644
index 00000000..1fa83402
--- /dev/null
+++ b/lib/oql-parse.ts
@@ -0,0 +1,110 @@
+// The OQL parser alone: text -> entries, or an Error that says what is wrong. Pure and
+// browser-safe, so a gene query can be checked as it is typed; lib/oql.ts compiles the entries
+// to SQL and re-exports this. The grammar it accepts is described at the top of lib/oql.ts.
+
+export type OqlSpecType = "MUT" | "CNA" | "SV" | "ANY" | "EXP" | "PROT";
+/** The portal's RANGE modifier: protein positions, either bound open; `contained` is its `*`. */
+export interface OqlRange { start?: number; end?: number; contained: boolean }
+export interface OqlSpec {
+  type: OqlSpecType; driver?: boolean;
+  pchange?: string; cls?: string; cna?: number;
+  op?: string; z?: number;
+  range?: OqlRange;
+}
+export interface OqlEntry { gene: string; specs: OqlSpec[] }
+
+const GENE_RE = /^[A-Za-z0-9][A-Za-z0-9.-]{0,19}$/;
+const CLASS_MAP: Record<string, string> = {
+  MISSENSE: "missense", NONSENSE: "nonsense", NONSTART: "nonstart", NONSTOP: "nonstop", FRAMESHIFT: "frameshift",
+  INFRAME: "inframe", SPLICE: "splice", PROMOTER: "promoter", TRUNC: "trunc"
+};
+
+const REJECT: Record<string, string> = {
+  GAIN: "GAIN is not supported: only high-level CNA (amp/deep-deletion, ±2) is stored",
+  HETLOSS: "HETLOSS is not supported: only high-level CNA (±2) is stored",
+
+  GERMLINE: "GERMLINE is not supported: public studies are germline-stripped",
+  SOMATIC: "SOMATIC modifier is not supported (all stored mutations are somatic/unknown)"
+};
+
+// -> [{gene, specs: [{type:'MUT'|'CNA'|'SV'|'ANY', pchange?, cls?, cna?, driver}]}]
+export function parseOql(q: string): OqlEntry[] {
+  if (typeof q !== "string" || !q.trim()) throw new Error("empty OQL");
+  if (q.length > 1000) throw new Error("OQL too long");
+  const entries = q.split(/[;\n]/).map(s => s.trim()).filter(Boolean);
+  // Each entry compiles to its own UNION-DISTINCT'd subquery (see below), so cost scales
+  // roughly linearly rather than sitting at a wall near any particular number — 30 covers a
+  // full pathway gene set (e.g. a 20-30 gene DDR panel) with room to spare, not a measured
+  // ceiling.
+  if (!entries.length || entries.length > 30) throw new Error("OQL: 1-30 gene entries");
+  return entries.map(entry => {
+    const m = entry.match(/^([A-Za-z0-9.-]+)\s*(?::\s*(.*))?$/);
+    if (!m || !GENE_RE.test(m[1])) throw new Error("OQL: bad gene entry '" + entry.slice(0, 40) + "'");
+    const gene = m[1].toUpperCase();
+    const specText = (m[2] || "").trim();
+    if (!specText) return { gene, specs: [{ type: "ANY", driver: false }] };
+    const specs = specText.split(/\s+/).map(tok => parseSpec(tok, entry));
+    return { gene, specs };
+  });
+}
+
+// A range sits among a token's "_"-joined modifiers, or right after "MUT=" (the portal's
+// grammar: modifiers in any order around the mutation, joined by "_").
+const RANGE_RE = /(^|_|=)\((\d*)-(\d*)(\*?)\)(_|$)/;
+
+function parseSpec(tok0: string, entry: string): OqlSpec {
+  const rm = tok0.match(RANGE_RE);
+  if (!rm) return parseSpecNoRange(tok0, entry);
+  const [whole, lead, a, b, star, trail] = rm;
+  const rest = tok0.slice(0, rm.index) + (lead === "=" ? "=" : lead && trail ? "_" : "") + tok0.slice(rm.index! + whole.length);
+  if (RANGE_RE.test(rest)) throw new Error("OQL '" + entry + "': at most one position range per alteration");
+  if (a === "" && b === "") throw new Error("OQL '" + entry + "': a position range needs a start, an end, or both, e.g. (1400-) or (1-500)");
+  const range: OqlRange = { contained: star === "*" };
+  if (a !== "") range.start = Number(a);
+  if (b !== "") range.end = Number(b);
+  if (range.start != null && range.end != null && range.start > range.end)
+    throw new Error("OQL '" + entry + "': position range (" + a + "-" + b + ") starts after it ends");
+  // A range alone, or with only DRIVER, is any mutation in that range (the portal's reading).
+  const restU = rest.toUpperCase();
+  const base = rest === "" || restU === "MUT=" ? { type: "MUT" as const, driver: false }
+    : restU === "DRIVER" || restU === "MUT=DRIVER" ? { type: "MUT" as const, driver: true }
+    : parseSpecNoRange(rest, entry);
+  if (base.type !== "MUT")
+    throw new Error("OQL '" + entry + "': a position range applies only to mutations, not to " + rest);
+  return { ...base, range };
+}
+
+function parseSpecNoRange(tok0: string, entry: string): OqlSpec {
+  if (/[()]/.test(tok0)) throw new Error("OQL '" + entry + "': unrecognized token '" + tok0.slice(0, 20) + "' — a position range is written (a-b), (a-) or (-b), optionally with * for fully contained");
+  let tok = tok0.toUpperCase();
+  let driver = false;
+  // DRIVER as prefix/suffix modifier (DRIVER_G12D, G12D_DRIVER, MUT=DRIVER_G12D, TRUNC_DRIVER…)
+  if (tok.startsWith("DRIVER_")) { driver = true; tok = tok.slice(7); }
+  if (tok.endsWith("_DRIVER")) { driver = true; tok = tok.slice(0, -7); }
+  if (tok === "DRIVER") return { type: "ANY", driver: true };
+  const em = tok.match(/^(EXP|PROT)([<>]=?)(-?\d+(?:\.\d+)?)$/);
+  if (em) return { type: em[1] as OqlSpecType, op: em[2], z: Number(em[3]) };
+  if (tok === "EXP" || tok === "PROT") throw new Error("OQL " + tok + " needs a threshold, e.g. " + tok + ">2");
+  for (const k of Object.keys(REJECT)) {
+    if (tok === k || tok.startsWith(k + "_") || tok.endsWith("_" + k)) throw new Error("OQL '" + entry + "': " + REJECT[k]);
+  }
+  if (tok === "MUT") return { type: "MUT", driver };
+  if (tok.startsWith("MUT=")) {
+    let rest = tok0.slice(4); // preserve original case of protein change
+    let restU = rest.toUpperCase();
+    if (restU.startsWith("DRIVER_")) { driver = true; rest = rest.slice(7); restU = restU.slice(7); }
+    if (restU.endsWith("_DRIVER")) { driver = true; rest = rest.slice(0, -7); restU = restU.slice(0, -7); }
+    if (CLASS_MAP[restU]) return { type: "MUT", cls: CLASS_MAP[restU], driver };
+    if (!/^[A-Za-z0-9*_.-]{1,40}$/.test(rest)) throw new Error("OQL: bad protein change '" + rest.slice(0, 20) + "'");
+    return { type: "MUT", pchange: rest, driver };
+  }
+  if (CLASS_MAP[tok]) return { type: "MUT", cls: CLASS_MAP[tok], driver };
+  if (tok === "AMP") return { type: "CNA", cna: 2, driver };
+  if (tok === "HOMDEL") return { type: "CNA", cna: -2, driver };
+  if (tok === "CNA") return { type: "CNA", driver };
+  if (tok === "FUSION") return { type: "SV", driver };
+  // bare token = protein change shorthand (KRAS: G12D)
+  if (/^[A-Za-z0-9*_.-]{1,40}$/.test(tok0.replace(/^DRIVER_|_DRIVER$/gi, "")))
+    return { type: "MUT", pchange: tok0.replace(/^DRIVER_|_DRIVER$/gi, ""), driver };
+  throw new Error("OQL: unrecognized token '" + tok0.slice(0, 20) + "' in '" + entry + "'");
+}
diff --git a/lib/oql.ts b/lib/oql.ts
index 72664839..389799f4 100644
--- a/lib/oql.ts
+++ b/lib/oql.ts
@@ -14,22 +14,10 @@
 import { DB, STUDY } from "./ch.ts";
 import { sq } from "./compiler.ts";
 
-export type OqlSpecType = "MUT" | "CNA" | "SV" | "ANY" | "EXP" | "PROT";
-/** The portal's RANGE modifier: protein positions, either bound open; `contained` is its `*`. */
-export interface OqlRange { start?: number; end?: number; contained: boolean }
-export interface OqlSpec {
-  type: OqlSpecType; driver?: boolean;
-  pchange?: string; cls?: string; cna?: number;
-  op?: string; z?: number;
-  range?: OqlRange;
-}
-export interface OqlEntry { gene: string; specs: OqlSpec[] }
-
-const GENE_RE = /^[A-Za-z0-9][A-Za-z0-9.-]{0,19}$/;
-const CLASS_MAP: Record<string, string> = {
-  MISSENSE: "missense", NONSENSE: "nonsense", NONSTART: "nonstart", NONSTOP: "nonstop", FRAMESHIFT: "frameshift",
-  INFRAME: "inframe", SPLICE: "splice", PROMOTER: "promoter", TRUNC: "trunc"
-};
+export { parseOql } from "./oql-parse.ts";
+export type { OqlSpecType, OqlRange, OqlSpec, OqlEntry } from "./oql-parse.ts";
+import type { OqlRange, OqlSpec } from "./oql-parse.ts";
+import { parseOql } from "./oql-parse.ts";
 
 /**
  * A mutation's class as cBioPortal's OQL sees it — cbioportal-frontend's getMutationSubType and
@@ -54,96 +42,6 @@ const mutClassSql = (type: string, change: string): string =>
   "multiIf(lower(" + type + ") = 'fusion', 'none', lower(" + change + ") = 'promoter', 'promoter', " +
   PORTAL_TYPE_CLASS.map(([cls, types]) => "lower(" + type + ") IN (" + types.map(sq).join(", ") + "), " + sq(cls)).join(", ") +
   ", 'other')";
-const REJECT: Record<string, string> = {
-  GAIN: "GAIN is not supported: only high-level CNA (amp/deep-deletion, ±2) is stored",
-  HETLOSS: "HETLOSS is not supported: only high-level CNA (±2) is stored",
-
-  GERMLINE: "GERMLINE is not supported: public studies are germline-stripped",
-  SOMATIC: "SOMATIC modifier is not supported (all stored mutations are somatic/unknown)"
-};
-
-// -> [{gene, specs: [{type:'MUT'|'CNA'|'SV'|'ANY', pchange?, cls?, cna?, driver}]}]
-export function parseOql(q: string): OqlEntry[] {
-  if (typeof q !== "string" || !q.trim()) throw new Error("empty OQL");
-  if (q.length > 1000) throw new Error("OQL too long");
-  const entries = q.split(/[;\n]/).map(s => s.trim()).filter(Boolean);
-  // Each entry compiles to its own UNION-DISTINCT'd subquery (see below), so cost scales
-  // roughly linearly rather than sitting at a wall near any particular number — 30 covers a
-  // full pathway gene set (e.g. a 20-30 gene DDR panel) with room to spare, not a measured
-  // ceiling.
-  if (!entries.length || entries.length > 30) throw new Error("OQL: 1-30 gene entries");
-  return entries.map(entry => {
-    const m = entry.match(/^([A-Za-z0-9.-]+)\s*(?::\s*(.*))?$/);
-    if (!m || !GENE_RE.test(m[1])) throw new Error("OQL: bad gene entry '" + entry.slice(0, 40) + "'");
-    const gene = m[1].toUpperCase();
-    const specText = (m[2] || "").trim();
-    if (!specText) return { gene, specs: [{ type: "ANY", driver: false }] };
-    const specs = specText.split(/\s+/).map(tok => parseSpec(tok, entry));
-    return { gene, specs };
-  });
-}
-
-// A range sits among a token's "_"-joined modifiers, or right after "MUT=" (the portal's
-// grammar: modifiers in any order around the mutation, joined by "_").
-const RANGE_RE = /(^|_|=)\((\d*)-(\d*)(\*?)\)(_|$)/;
-
-function parseSpec(tok0: string, entry: string): OqlSpec {
-  const rm = tok0.match(RANGE_RE);
-  if (!rm) return parseSpecNoRange(tok0, entry);
-  const [whole, lead, a, b, star, trail] = rm;
-  const rest = tok0.slice(0, rm.index) + (lead === "=" ? "=" : lead && trail ? "_" : "") + tok0.slice(rm.index! + whole.length);
-  if (RANGE_RE.test(rest)) throw new Error("OQL '" + entry + "': at most one position range per alteration");
-  if (a === "" && b === "") throw new Error("OQL '" + entry + "': a position range needs a start, an end, or both, e.g. (1400-) or (1-500)");
-  const range: OqlRange = { contained: star === "*" };
-  if (a !== "") range.start = Number(a);
-  if (b !== "") range.end = Number(b);
-  if (range.start != null && range.end != null && range.start > range.end)
-    throw new Error("OQL '" + entry + "': position range (" + a + "-" + b + ") starts after it ends");
-  // A range alone, or with only DRIVER, is any mutation in that range (the portal's reading).
-  const restU = rest.toUpperCase();
-  const base = rest === "" || restU === "MUT=" ? { type: "MUT" as const, driver: false }
-    : restU === "DRIVER" || restU === "MUT=DRIVER" ? { type: "MUT" as const, driver: true }
-    : parseSpecNoRange(rest, entry);
-  if (base.type !== "MUT")
-    throw new Error("OQL '" + entry + "': a position range applies only to mutations, not to " + rest);
-  return { ...base, range };
-}
-
-function parseSpecNoRange(tok0: string, entry: string): OqlSpec {
-  if (/[()]/.test(tok0)) throw new Error("OQL '" + entry + "': unrecognized token '" + tok0.slice(0, 20) + "' — a position range is written (a-b), (a-) or (-b), optionally with * for fully contained");
-  let tok = tok0.toUpperCase();
-  let driver = false;
-  // DRIVER as prefix/suffix modifier (DRIVER_G12D, G12D_DRIVER, MUT=DRIVER_G12D, TRUNC_DRIVER…)
-  if (tok.startsWith("DRIVER_")) { driver = true; tok = tok.slice(7); }
-  if (tok.endsWith("_DRIVER")) { driver = true; tok = tok.slice(0, -7); }
-  if (tok === "DRIVER") return { type: "ANY", driver: true };
-  const em = tok.match(/^(EXP|PROT)([<>]=?)(-?\d+(?:\.\d+)?)$/);
-  if (em) return { type: em[1] as OqlSpecType, op: em[2], z: Number(em[3]) };
-  if (tok === "EXP" || tok === "PROT") throw new Error("OQL " + tok + " needs a threshold, e.g. " + tok + ">2");
-  for (const k of Object.keys(REJECT)) {
-    if (tok === k || tok.startsWith(k + "_") || tok.endsWith("_" + k)) throw new Error("OQL '" + entry + "': " + REJECT[k]);
-  }
-  if (tok === "MUT") return { type: "MUT", driver };
-  if (tok.startsWith("MUT=")) {
-    let rest = tok0.slice(4); // preserve original case of protein change
-    let restU = rest.toUpperCase();
-    if (restU.startsWith("DRIVER_")) { driver = true; rest = rest.slice(7); restU = restU.slice(7); }
-    if (restU.endsWith("_DRIVER")) { driver = true; rest = rest.slice(0, -7); restU = restU.slice(0, -7); }
-    if (CLASS_MAP[restU]) return { type: "MUT", cls: CLASS_MAP[restU], driver };
-    if (!/^[A-Za-z0-9*_.-]{1,40}$/.test(rest)) throw new Error("OQL: bad protein change '" + rest.slice(0, 20) + "'");
-    return { type: "MUT", pchange: rest, driver };
-  }
-  if (CLASS_MAP[tok]) return { type: "MUT", cls: CLASS_MAP[tok], driver };
-  if (tok === "AMP") return { type: "CNA", cna: 2, driver };
-  if (tok === "HOMDEL") return { type: "CNA", cna: -2, driver };
-  if (tok === "CNA") return { type: "CNA", driver };
-  if (tok === "FUSION") return { type: "SV", driver };
-  // bare token = protein change shorthand (KRAS: G12D)
-  if (/^[A-Za-z0-9*_.-]{1,40}$/.test(tok0.replace(/^DRIVER_|_DRIVER$/gi, "")))
-    return { type: "MUT", pchange: tok0.replace(/^DRIVER_|_DRIVER$/gi, ""), driver };
-  throw new Error("OQL: unrecognized token '" + tok0.slice(0, 20) + "' in '" + entry + "'");
-}
-
 function specCond(spec: OqlSpec): string {
   const conds: string[] = [];
   if (spec.type === "MUT") {
diff --git a/test/gene-query.test.ts b/test/gene-query.test.ts
new file mode 100644
index 00000000..44285b49
--- /dev/null
+++ b/test/gene-query.test.ts
@@ -0,0 +1,57 @@
+// The gene query dialog's checker (lib/gene-query.ts): an OQL query or a gene list read entry by
+// entry, each with what it selects or what is wrong with it, and symbol replacement that touches
+// only genes.
+import { test, describe } from "node:test";
+import assert from "node:assert/strict";
+import { checkGeneQuery, replaceSymbol } from "../lib/gene-query.ts";
+import { parseOql } from "../lib/oql.ts";
+import { parseOql as parsePure } from "../lib/oql-parse.ts";
+
+describe("gene query: OQL", () => {
+  test("each line is an entry, described in words", () => {
+    const c = checkGeneQuery("KRAS: G12C\nTP53\nERBB2: AMP; CDKN2A: HOMDEL", "oql");
+    assert.deepEqual(c.genes, ["KRAS", "TP53", "ERBB2", "CDKN2A"]);
+    assert.deepEqual(c.entries.map((e) => e.meaning), ["G12C mutations", "any alteration", "amplification", "deep deletion"]);
+    assert.equal(c.error, undefined);
+  });
+  test("a bad entry is reported on its own line, and the rest still read", () => {
+    const c = checkGeneQuery("TP53\nBRAF: GAIN", "oql");
+    assert.equal(c.entries[0].error, undefined);
+    assert.match(c.entries[1].error!, /GAIN is not supported/);
+    assert.deepEqual(c.genes, ["TP53", "BRAF"]);
+  });
+  test("genes separated by spaces or commas are entries of their own, as on the portal", () => {
+    assert.deepEqual(checkGeneQuery("KRAS,NRAS BRAF", "oql").entries.map((e) => e.text), ["KRAS", "NRAS", "BRAF"]);
+    assert.deepEqual(checkGeneQuery("TP53 KRAS: MUT AMP", "oql").entries.map((e) => [e.text, e.meaning]),
+      [["TP53", "any alteration"], ["KRAS: MUT AMP", "mutations or amplification"]]);
+  });
+  test("a gene named twice counts once", () => {
+    assert.deepEqual(checkGeneQuery("KRAS: MUT\nKRAS: AMP", "oql").genes, ["KRAS"]);
+  });
+  test("past 30 entries the query is refused, with the limit named", () => {
+    const c = checkGeneQuery(Array.from({ length: 31 }, (_, i) => "G" + i).join("\n"), "oql");
+    assert.match(c.error!, /at most 30 entries; this has 31/);
+  });
+  test("the browser-safe parser is the one the engine uses", () => {
+    assert.equal(parseOql, parsePure);
+  });
+});
+
+describe("gene query: gene list", () => {
+  test("merged rows are one entry", () => {
+    const c = checkGeneQuery('TP53 ["RTK" EGFR ERBB2]', "genes");
+    assert.deepEqual(c.entries.map((e) => e.meaning), ["its own row", "one merged row"]);
+    assert.deepEqual(c.genes, ["TP53", "EGFR", "ERBB2"]);
+    assert.equal(c.tracks!.length, 2);
+  });
+  test("per-gene OQL is refused in a gene list, saying why", () => {
+    assert.match(checkGeneQuery("TP53: MUT", "genes").error!, /per-track OQL/);
+  });
+});
+
+describe("gene query: replacing a symbol", () => {
+  test("only where it stands as a gene, whatever its case", () => {
+    assert.equal(replaceSymbol("p53: MUT\nKRAS: P53X", "P53", "TP53"), "TP53: MUT\nKRAS: P53X");
+    assert.equal(replaceSymbol("TP53 her2 [HER2 EGFR]", "HER2", "ERBB2"), "TP53 ERBB2 [ERBB2 EGFR]");
+  });
+});