feat(booth): overstay sessions, top-up pricing, and session/feed filters

Rework paid-but-grace-expired sessions and add booth filters.

Overstay (was "stuck"):
- Stop silently aging out a paid transient whose walk-back grace lapsed with no
  signed exit. Keep it listed with an OVERSTAY badge — a new parking period began
  (re-parked) or the car is faulty/abandoned; it is not a system fault.
- No free exit: reopenBarrier refuses server-side once a transient's payment grace
  has expired (allow only subscription OR paid-and-within-grace); the UI hides the
  Open-barrier button on overstay rows and routes to the pay/exit modal. Closes a
  hole where a stale payment authorized a free multi-day exit (operator-as-adversary).
- Price the overstay as a NEW period from grace-expiry -> now with its own daily-cap
  ladder, NOT "full stay minus paid" (which a daily cap collapsed to 0 — ticket
  1245791632490 owed ALL 0; now owes its real overstay). quote() gains periodStart +
  overstay; SessionLookup/ActiveSession gain `overstay`. handlePayAndExit charges
  whenever the session is payable (was: only if !alreadyPaid, skipping the overstay).

Filters (new ui/FilterBar): Active Sessions — search + status
(unpaid/paid/exiting/overstay) + transient-vs-subscriber. Live feed — search +
event (entry/exit/pay/void/anomaly) + direction + source (booth=manual vs reader).
All client-side over already-fetched data; matched/total count shown.

i18n parity (sq+en). Wiki: booth-exit-flow updated (overstay model, naming history,
no-free-exit security fix, new-period pricing; open question on grace-renewal noted).

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V

apps/web/src/BoothScreen.tsx

@@ -12,6 +12,7 @@ import { BoothPayModal } from "./BoothPayModal.js";
 import { ActiveSessions } from "./ActiveSessions.js";
 import { Modal } from "./ui/Modal.js";
 import { SnapshotStrip } from "./ui/SnapshotStrip.js";
+import { FilterBar, SegGroup, type SegOption } from "./ui/FilterBar.js";
 import { renderReason } from "./lib/reason.js";
 
 // The live operator booth view — the real-time heart of the console. Occupancy
@@ -33,6 +34,27 @@ const EVENT_STYLE: Record<string, { labelKey: string; color: string }> = {
   anomaly: { labelKey: "booth.evtAnomaly", color: "text-term-red" },
 };
 
+// Live-feed filter category for an event type. Several ledger types collapse into a
+// few operator-meaningful buckets; the rest (barrier/shift/cash) fall outside the
+// filter and only show under "all".
+type FeedCat = "entry" | "exit" | "pay" | "void" | "anomaly";
+function feedCat(type: string): FeedCat | null {
+  switch (type) {
+    case "vehicle_entry":
+      return "entry";
+    case "vehicle_exit":
+      return "exit";
+    case "payment":
+      return "pay";
+    case "void":
+      return "void";
+    case "anomaly":
+      return "anomaly";
+    default:
+      return null;
+  }
+}
+
 function hhmmss(iso: string): string {
   // Local time-of-day, terminal style. Defensive against a bad timestamp.
   const d = new Date(iso);
@@ -372,6 +394,12 @@ export function BoothScreen() {
   // The ledger event open in the read-only detail modal (null = closed).
   const [detailEvent, setDetailEvent] = useState<LedgerEvent | null>(null);
 
+  // Live-feed filters: free-text search, event category, and direction/source.
+  const [feedSearch, setFeedSearch] = useState("");
+  const [feedType, setFeedType] = useState<FeedCat | "">("");
+  const [feedDir, setFeedDir] = useState<"entry" | "exit" | "">("");
+  const [feedSrc, setFeedSrc] = useState<"booth" | "reader" | "">("");
+
   // Live overlays from the WS store.
   const liveOcc = useLiveStore((s) => s.occupancy);
   const liveFeed = useLiveStore((s) => s.feed);
@@ -385,11 +413,45 @@ export function BoothScreen() {
   const seen = new Set(liveFeed.map((e) => e.id));
   const history = (eventsQuery.data?.events ?? []).filter((e) => !seen.has(e.id));
   const merged = [...liveFeed, ...history].slice(0, 200);
-  const events =
+  const scoped =
     shiftOpen && shiftStart
       ? merged.filter((e) => e.occurredAt >= shiftStart)
       : [];
 
+  // Apply the live-feed filters. Source maps to booth (operator-initiated `manual`)
+  // vs reader (device-initiated: wiegand/lpr/qr/ticket). Search spans identity,
+  // subscriber label, and any advisory plate on the payload.
+  const fq = feedSearch.trim().toLowerCase();
+  const events = scoped.filter((e) => {
+    if (feedType && feedCat(e.type) !== feedType) return false;
+    if (feedDir && e.direction !== feedDir) return false;
+    if (feedSrc) {
+      const isBooth = e.source === "manual";
+      if (feedSrc === "booth" ? !isBooth : isBooth) return false;
+    }
+    if (fq) {
+      const hay = `${e.identity ?? ""} ${e.subscriberLabel ?? ""} ${e.payload?.plate ?? ""}`.toLowerCase();
+      if (!hay.includes(fq)) return false;
+    }
+    return true;
+  });
+
+  const feedTypeOpts: SegOption<FeedCat>[] = [
+    { value: "entry", label: t("booth.fEvtEntry") },
+    { value: "exit", label: t("booth.fEvtExit") },
+    { value: "pay", label: t("booth.fEvtPay") },
+    { value: "void", label: t("booth.fEvtVoid") },
+    { value: "anomaly", label: t("booth.fEvtAnomaly") },
+  ];
+  const feedDirOpts: SegOption<"entry" | "exit">[] = [
+    { value: "entry", label: t("booth.fDirEntry") },
+    { value: "exit", label: t("booth.fDirExit") },
+  ];
+  const feedSrcOpts: SegOption<"booth" | "reader">[] = [
+    { value: "booth", label: t("booth.fSrcBooth") },
+    { value: "reader", label: t("booth.fSrcReader") },
+  ];
+
   return (
     <div className="grid h-full grid-cols-1 gap-3 lg:grid-cols-[minmax(320px,1fr)_2fr] lg:grid-rows-[auto_1fr]">
       {/* Ticket input spans both columns at the top — the operator's primary action. */}
@@ -417,19 +479,40 @@ export function BoothScreen() {
         title={t("booth.liveFeed")}
         right={
           <span className="text-[10px] uppercase tracking-wider text-term-muted">
-            {events.length} {t("booth.events")}
+            {events.length}
+            {events.length !== scoped.length ? `/${scoped.length}` : ""} {t("booth.events")}
           </span>
         }
         className="min-h-0"
       >
-        <div className="h-full overflow-y-auto pr-1">
-          {!shiftOpen ? (
-            <div className="text-term-amber">{t("shift.gateTitle")}</div>
-          ) : events.length === 0 ? (
-            <div className="text-term-muted">{eventsQuery.isLoading ? t("common.loading") : t("booth.noEventsYet")}</div>
-          ) : (
-            events.map((e) => <EventRow key={e.id} e={e} onOpen={setDetailEvent} />)
+        <div className="flex h-full flex-col">
+          {shiftOpen && (
+            <FilterBar search={feedSearch} onSearch={setFeedSearch} searchPlaceholder={t("booth.filterSearchFeed")}>
+              <SegGroup
+                value={feedType}
+                options={feedTypeOpts}
+                onChange={setFeedType}
+                allLabel={t("booth.filterAll")}
+              />
+              <SegGroup value={feedDir} options={feedDirOpts} onChange={setFeedDir} allLabel={t("booth.filterAll")} />
+              <SegGroup value={feedSrc} options={feedSrcOpts} onChange={setFeedSrc} allLabel={t("booth.filterAll")} />
+            </FilterBar>
           )}
+          <div className="min-h-0 flex-1 overflow-y-auto pr-1">
+            {!shiftOpen ? (
+              <div className="text-term-amber">{t("shift.gateTitle")}</div>
+            ) : events.length === 0 ? (
+              <div className="text-term-muted">
+                {eventsQuery.isLoading
+                  ? t("common.loading")
+                  : scoped.length === 0
+                    ? t("booth.noEventsYet")
+                    : t("booth.noMatch")}
+              </div>
+            ) : (
+              events.map((e) => <EventRow key={e.id} e={e} onOpen={setDetailEvent} />)
+            )}
+          </div>
         </div>
       </Panel>