From 109f3bbb913c2c16dd4f3a160eaaa5526b73a4b5 Mon Sep 17 00:00:00 2001
From: Andrew Lisowski <lisowski54@gmail.com>
Date: Sat, 17 Oct 2026 12:35:02 -0700
Subject: [PATCH 1/4] Add filterable /apps browse page and header navigation

Discovery was split across tags, categories, ecosystems, lexicons and
search pages, none reachable from the header. Replace them with one
/apps list with a filter sidebar (tags, shared data, rating, extras,
category) whose state lives in the URL.

- Header gets Browse / Tags / Shared data links and an inline search
  box; mobile gets the hamburger menu back.
- /apps/all, /search, /apps/$tag, /categories/$categoryId and
  /ecosystems/$app/all 301 to the equivalent /apps preset; internal
  links point there directly.
- New getBrowseListings server fn returns every non-protocol listing
  with the fields the facets need; filtering/sorting is client-side.
- Remove the server fns and helpers only the old pages used.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/AppTagCard.tsx                 |   5 +-
 src/components/BrowseFilterPanel.tsx          | 381 ++++++++++
 src/components/EcosystemCategoryCard.tsx      |   5 +-
 src/components/SiteFooter.tsx                 |   7 +-
 src/components/SiteHeader.tsx                 |  73 +-
 .../ecosystem-listing-grid.styles.tsx         |  16 -
 src/i18n/locales/en-XA/common.json            |   8 +-
 src/i18n/locales/en/common.json               |   8 +-
 .../api-directory-listings.functions.ts       | 193 ++---
 src/lib/app-tag-metadata.ts                   |  26 -
 src/lib/browse-listings.test.ts               | 201 +++++
 src/lib/browse-listings.ts                    | 607 +++++++++++++++
 src/lib/directory-categories.ts               |  25 -
 src/routeTree.gen.ts                          |  21 +
 src/routes/_header-layout.apps.$tag.tsx       | 403 +---------
 src/routes/_header-layout.apps.all.tsx        | 388 +---------
 src/routes/_header-layout.apps.index.tsx      | 677 +++++++++++++++++
 src/routes/_header-layout.apps.lexicons.tsx   |   4 +-
 src/routes/_header-layout.apps.tags.tsx       |   4 +-
 .../_header-layout.categories.$categoryId.tsx | 707 +-----------------
 .../_header-layout.ecosystems.$app.all.tsx    | 300 +-------
 .../_header-layout.ecosystems.$app.index.tsx  |  14 +-
 src/routes/_header-layout.index.tsx           |  15 +-
 ...eader-layout.products.$productId.index.tsx |  10 +-
 src/routes/_header-layout.search.tsx          | 405 +---------
 25 files changed, 2103 insertions(+), 2400 deletions(-)
 create mode 100644 src/components/BrowseFilterPanel.tsx
 delete mode 100644 src/components/ecosystem-listing-grid.styles.tsx
 create mode 100644 src/lib/browse-listings.test.ts
 create mode 100644 src/lib/browse-listings.ts
 create mode 100644 src/routes/_header-layout.apps.index.tsx

diff --git a/src/components/AppTagCard.tsx b/src/components/AppTagCard.tsx
index f93d236..dcb5dfc 100644
--- a/src/components/AppTagCard.tsx
+++ b/src/components/AppTagCard.tsx
@@ -317,9 +317,8 @@ export function AppTagCard({ tag, isFeatured }: AppTagCardProps) {
 
   return (
     <RouterLink
-      to="/apps/$tag"
-      params={{ tag: getAppTagSlug(tag.tag) }}
-      search={{ sort: "popular" }}
+      to="/apps"
+      search={{ tag: getAppTagSlug(tag.tag) }}
       {...stylex.props(
         styles.cardLink,
         styles.cardShadow,
diff --git a/src/components/BrowseFilterPanel.tsx b/src/components/BrowseFilterPanel.tsx
new file mode 100644
index 0000000..73abced
--- /dev/null
+++ b/src/components/BrowseFilterPanel.tsx
@@ -0,0 +1,381 @@
+import * as stylex from "@stylexjs/stylex";
+import { useState } from "react";
+
+import type {
+  BrowseFacet,
+  BrowseFacetOption,
+  BrowseFacets,
+  BrowseFilters,
+} from "../lib/browse-listings";
+
+import { Avatar } from "../design-system/avatar";
+import { Button } from "../design-system/button";
+import { Checkbox } from "../design-system/checkbox";
+import {
+  Disclosure,
+  DisclosurePanel,
+  DisclosureTitle,
+} from "../design-system/disclosure";
+import { Flex } from "../design-system/flex";
+import { SearchField } from "../design-system/search-field";
+import { uiColor } from "../design-system/theme/color.stylex";
+import {
+  gap,
+  horizontalSpace,
+} from "../design-system/theme/semantic-spacing.stylex";
+import { fontSize } from "../design-system/theme/typography.stylex";
+import { SmallBody } from "../design-system/typography";
+import { getAppTagEmoji } from "../lib/app-tag-visuals";
+import { getInitials } from "../lib/get-initials";
+
+const COLLAPSED_OPTION_COUNT = 8;
+const COLLAPSED_ECOSYSTEM_COUNT = 3;
+
+const styles = stylex.create({
+  optionLabel: {
+    alignItems: "center",
+    columnGap: gap["md"],
+    display: "flex",
+  },
+  optionCount: {
+    color: uiColor.text1,
+    fontSize: fontSize["xs"],
+    fontVariantNumeric: "tabular-nums",
+  },
+  childOption: {
+    paddingLeft: horizontalSpace["4xl"],
+  },
+  emoji: {
+    fontSize: fontSize["sm"],
+    lineHeight: 1,
+  },
+  ecosystemIcon: {
+    height: "1.25rem",
+    width: "1.25rem",
+  },
+  facetHint: {
+    color: uiColor.text1,
+  },
+});
+
+interface BrowseFilterPanelProps {
+  facets: BrowseFacets;
+  filters: BrowseFilters;
+  onToggle: (facet: BrowseFacet, value: string) => void;
+}
+
+export function BrowseFilterPanel({
+  facets,
+  filters,
+  onToggle,
+}: BrowseFilterPanelProps) {
+  const isSelected = (facet: BrowseFacet, value: string) => {
+    switch (facet) {
+      case "minRating": {
+        return filters.minRating === Number(value);
+      }
+      case "extras": {
+        return (filters.extras as Array<string>).includes(value);
+      }
+      default: {
+        return filters[facet].includes(value);
+      }
+    }
+  };
+
+  return (
+    <Flex direction="column" gap="md">
+      <SearchableFacetSection
+        title="Tags"
+        facet="tags"
+        options={facets.tags}
+        isSelected={isSelected}
+        onToggle={onToggle}
+        selectedCount={filters.tags.length}
+        defaultExpanded
+        renderIcon={(option) => (
+          <span aria-hidden {...stylex.props(styles.emoji)}>
+            {getAppTagEmoji(option.label.toLowerCase())}
+          </span>
+        )}
+      />
+
+      {facets.data.length > 0 ? (
+        <SearchableFacetSection
+          title="Works with data from"
+          hint="Apps that read or write the same records, so your data carries across them."
+          facet="data"
+          options={facets.data}
+          isSelected={isSelected}
+          onToggle={onToggle}
+          selectedCount={filters.data.length}
+        />
+      ) : null}
+
+      <FacetSection
+        title="Rating"
+        selectedCount={filters.minRating == null ? 0 : 1}
+        defaultExpanded
+      >
+        {facets.minRating.map((option) => (
+          <FacetOption
+            key={option.id}
+            option={option}
+            isSelected={isSelected("minRating", option.id)}
+            onToggle={() => onToggle("minRating", option.id)}
+          />
+        ))}
+      </FacetSection>
+
+      <FacetSection title="Extras" selectedCount={filters.extras.length}>
+        {facets.extras.map((option) => (
+          <FacetOption
+            key={option.id}
+            option={option}
+            isSelected={isSelected("extras", option.id)}
+            onToggle={() => onToggle("extras", option.id)}
+          />
+        ))}
+      </FacetSection>
+
+      <CategoryFacetSection
+        options={facets.categories}
+        selectedCount={filters.categories.length}
+        isSelected={(value) => isSelected("categories", value)}
+        onToggle={(value) => onToggle("categories", value)}
+      />
+    </Flex>
+  );
+}
+
+/**
+ * Category tree: standalone apps, app ecosystems (largest first, the rest behind "show all"),
+ * then protocol tooling. Ecosystems list their tool categories underneath.
+ */
+function CategoryFacetSection({
+  options,
+  selectedCount,
+  isSelected,
+  onToggle,
+}: {
+  options: Array<BrowseFacetOption>;
+  selectedCount: number;
+  isSelected: (value: string) => boolean;
+  onToggle: (value: string) => void;
+}) {
+  const [showAll, setShowAll] = useState(false);
+  const isOptionActive = (option: BrowseFacetOption) =>
+    isSelected(option.id) ||
+    Boolean(option.children?.some((child) => isSelected(child.id)));
+
+  const ecosystems = options.filter(
+    (option) => option.iconUrl !== undefined && option.children,
+  );
+  const visibleEcosystems = new Set(
+    (showAll
+      ? ecosystems
+      : ecosystems.filter(
+          (option, index) =>
+            index < COLLAPSED_ECOSYSTEM_COUNT || isOptionActive(option),
+        )
+    ).map((option) => option.id),
+  );
+  const visible = options.filter(
+    (option) =>
+      !ecosystems.includes(option) || visibleEcosystems.has(option.id),
+  );
+
+  return (
+    <FacetSection title="Category" selectedCount={selectedCount}>
+      {visible.map((option) => (
+        <Flex key={option.id} direction="column" gap="md">
+          <FacetOption
+            option={option}
+            isSelected={isSelected(option.id)}
+            onToggle={() => onToggle(option.id)}
+            icon={
+              option.iconUrl === undefined ? undefined : (
+                <Avatar
+                  alt=""
+                  fallback={getInitials(option.label)}
+                  size="sm"
+                  src={option.iconUrl ?? undefined}
+                  style={styles.ecosystemIcon}
+                />
+              )
+            }
+          />
+          {option.children
+            ?.filter((child) => child.count > 0 || isSelected(child.id))
+            .map((child) => (
+              <FacetOption
+                key={child.id}
+                option={child}
+                isSelected={isSelected(child.id)}
+                onToggle={() => onToggle(child.id)}
+                style={styles.childOption}
+              />
+            ))}
+        </Flex>
+      ))}
+      {ecosystems.length > COLLAPSED_ECOSYSTEM_COUNT ? (
+        <div>
+          <Button
+            size="sm"
+            variant="tertiary"
+            onPress={() => setShowAll((value) => !value)}
+          >
+            {showAll
+              ? "Show fewer ecosystems"
+              : `Show all ${ecosystems.length} ecosystems`}
+          </Button>
+        </div>
+      ) : null}
+    </FacetSection>
+  );
+}
+
+/** Collapsed by default unless it has a selection; pass `defaultExpanded` to override. */
+function FacetSection({
+  title,
+  selectedCount,
+  defaultExpanded = selectedCount > 0,
+  hint,
+  children,
+}: {
+  title: string;
+  selectedCount: number;
+  defaultExpanded?: boolean;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Disclosure defaultExpanded={defaultExpanded}>
+      <DisclosureTitle>
+        {selectedCount > 0 ? `${title} (${selectedCount})` : title}
+      </DisclosureTitle>
+      <DisclosurePanel>
+        <Flex direction="column" gap="md">
+          {hint ? <SmallBody style={styles.facetHint}>{hint}</SmallBody> : null}
+          {children}
+        </Flex>
+      </DisclosurePanel>
+    </Disclosure>
+  );
+}
+
+/** Long facets (tags, data) get an inline filter box and a "show all" toggle. */
+function SearchableFacetSection({
+  title,
+  hint,
+  facet,
+  options,
+  selectedCount,
+  defaultExpanded,
+  isSelected,
+  onToggle,
+  renderIcon,
+}: {
+  title: string;
+  hint?: string;
+  defaultExpanded?: boolean;
+  facet: BrowseFacet;
+  options: Array<BrowseFacetOption>;
+  selectedCount: number;
+  isSelected: (facet: BrowseFacet, value: string) => boolean;
+  onToggle: (facet: BrowseFacet, value: string) => void;
+  renderIcon?: (option: BrowseFacetOption) => React.ReactNode;
+}) {
+  const [query, setQuery] = useState("");
+  const [showAll, setShowAll] = useState(false);
+  const normalizedQuery = query.trim().toLowerCase();
+
+  const available = options.filter(
+    (option) => option.count > 0 || isSelected(facet, option.id),
+  );
+  const matching = normalizedQuery
+    ? available.filter((option) =>
+        option.label.toLowerCase().includes(normalizedQuery),
+      )
+    : available;
+  const selectedFirst = matching.toSorted(
+    (a, b) => Number(isSelected(facet, b.id)) - Number(isSelected(facet, a.id)),
+  );
+  const visible =
+    showAll || normalizedQuery
+      ? selectedFirst
+      : selectedFirst.slice(0, COLLAPSED_OPTION_COUNT);
+
+  if (available.length === 0) {
+    return null;
+  }
+
+  return (
+    <FacetSection
+      title={title}
+      selectedCount={selectedCount}
+      defaultExpanded={defaultExpanded}
+      hint={hint}
+    >
+      {available.length > COLLAPSED_OPTION_COUNT ? (
+        <SearchField
+          aria-label={`Filter ${title.toLowerCase()}`}
+          placeholder={`Find (${available.length})`}
+          value={query}
+          onChange={setQuery}
+          size="sm"
+          variant="secondary"
+        />
+      ) : null}
+      {visible.map((option) => (
+        <FacetOption
+          key={option.id}
+          option={option}
+          isSelected={isSelected(facet, option.id)}
+          onToggle={() => onToggle(facet, option.id)}
+          icon={renderIcon?.(option)}
+        />
+      ))}
+      {!normalizedQuery && available.length > COLLAPSED_OPTION_COUNT ? (
+        <div>
+          <Button
+            size="sm"
+            variant="tertiary"
+            onPress={() => setShowAll((value) => !value)}
+          >
+            {showAll ? "Show fewer" : `Show all ${available.length}`}
+          </Button>
+        </div>
+      ) : null}
+    </FacetSection>
+  );
+}
+
+function FacetOption({
+  option,
+  isSelected,
+  onToggle,
+  icon,
+  style,
+}: {
+  option: BrowseFacetOption;
+  isSelected: boolean;
+  onToggle: () => void;
+  icon?: React.ReactNode;
+  style?: stylex.StyleXStyles;
+}) {
+  return (
+    <Checkbox
+      isSelected={isSelected}
+      isDisabled={option.count === 0 && !isSelected}
+      onChange={onToggle}
+      style={style}
+    >
+      <span {...stylex.props(styles.optionLabel)}>
+        {icon}
+        <span>{option.label}</span>
+        <span {...stylex.props(styles.optionCount)}>{option.count}</span>
+      </span>
+    </Checkbox>
+  );
+}
diff --git a/src/components/EcosystemCategoryCard.tsx b/src/components/EcosystemCategoryCard.tsx
index 6d15652..c44e42d 100644
--- a/src/components/EcosystemCategoryCard.tsx
+++ b/src/components/EcosystemCategoryCard.tsx
@@ -186,9 +186,8 @@ export function EcosystemCategoryCard({
 
   return (
     <RouterLink
-      to="/categories/$categoryId"
-      params={{ categoryId: category.id }}
-      search={{ sort: "popular" }}
+      to="/apps"
+      search={{ in: category.id }}
       {...stylex.props(styles.card, getSoftAccentSurface(accent))}
     >
       <div aria-hidden="true" {...stylex.props(styles.emojiBackdrop)}>
diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx
index 6af9e70..d7db065 100644
--- a/src/components/SiteFooter.tsx
+++ b/src/components/SiteFooter.tsx
@@ -10,8 +10,7 @@ const FOOTER_LINK_GROUPS = [
   {
     links: [
       { href: "/about", label: "About" },
-      { href: "/home", label: "Home" },
-      { href: "/search", label: "Search" },
+      { href: "/", label: "Home" },
       { href: "/developers/atproto", label: "Developer API" },
       { href: "/products/manage", label: "Manage listings" },
     ],
@@ -19,8 +18,8 @@ const FOOTER_LINK_GROUPS = [
   {
     title: "Apps",
     links: [
-      { href: "/apps/all", label: "All Apps" },
-      { href: "/apps/tags", label: "Categories" },
+      { href: "/apps", label: "Browse apps" },
+      { href: "/apps/tags", label: "Tags" },
       { href: "/apps/lexicons", label: "Shared data" },
     ],
   },
diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx
index 49d222d..b5c6430 100644
--- a/src/components/SiteHeader.tsx
+++ b/src/components/SiteHeader.tsx
@@ -1,15 +1,24 @@
 import * as stylex from "@stylexjs/stylex";
 import { useQuery } from "@tanstack/react-query";
-import { createLink } from "@tanstack/react-router";
+import { createLink, useNavigate } from "@tanstack/react-router";
 import { notificationApi } from "#/integrations/tanstack-query/api-notification.functions.ts";
 import { user } from "#/integrations/tanstack-query/api-user.functions.ts";
 import { useNotificationReadState } from "#/lib/notification-read-state.ts";
 import { Search } from "lucide-react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Flex } from "../design-system/flex";
 import { IconButton } from "../design-system/icon-button";
-import { Navbar, NavbarAction, NavbarLogo } from "../design-system/navbar";
+import {
+  Navbar,
+  NavbarAction,
+  NavbarLink,
+  NavbarLogo,
+  NavbarNavigation,
+} from "../design-system/navbar";
+import { SearchField } from "../design-system/search-field";
+import { breakpoints } from "../design-system/theme/media-queries.stylex";
 import { fontSize } from "../design-system/theme/typography.stylex";
 import { AtStoreLogo } from "./AtStoreLogo";
 import { LanguageSwitcher } from "./LanguageSwitcher";
@@ -17,6 +26,7 @@ import { NavbarAuth } from "./NavbarAuth";
 import { NotificationsBell } from "./NotificationsBell";
 
 const NavbarLogoLink = createLink(NavbarLogo);
+const NavbarLinkLink = createLink(NavbarLink);
 const IconButtonLink = createLink(IconButton);
 
 const styles = stylex.create({
@@ -27,8 +37,44 @@ const styles = stylex.create({
     fontSize: fontSize["2xl"],
     rowGap: "8px",
   },
+  searchField: {
+    display: {
+      default: "none",
+      [breakpoints.lg]: "block",
+    },
+    width: "18rem",
+  },
+  searchButton: {
+    display: {
+      default: "flex",
+      [breakpoints.lg]: "none",
+    },
+  },
 });
 
+function HeaderSearch() {
+  const navigate = useNavigate();
+  const { t } = useTranslation("common");
+  const [query, setQuery] = useState("");
+
+  return (
+    <div {...stylex.props(styles.searchField)}>
+      <SearchField
+        aria-label={t("siteHeader.searchListingsLabel")}
+        placeholder={t("siteHeader.searchPlaceholder")}
+        value={query}
+        onChange={setQuery}
+        onSubmit={(value) => {
+          const q = value.trim();
+          void navigate({ to: "/apps", search: q ? { q } : {} });
+          setQuery("");
+        }}
+        variant="secondary"
+      />
+    </div>
+  );
+}
+
 export function SiteHeader() {
   const { data: session } = useQuery(user.getSessionQueryOptions);
   const { data: notifications } = useQuery({
@@ -42,19 +88,36 @@ export function SiteHeader() {
   const { t } = useTranslation("common");
 
   return (
-    <Navbar hideHamburgerButton={true}>
+    <Navbar>
       <NavbarLogoLink to="/" style={styles.logoContent} hasUnderline={false}>
         <AtStoreLogo variant="navbar" />
       </NavbarLogoLink>
 
+      <NavbarNavigation>
+        <NavbarLinkLink
+          to="/apps"
+          activeOptions={{ exact: true, includeSearch: false }}
+          activeProps={{ isActive: true }}
+        >
+          {t("siteHeader.nav.browse")}
+        </NavbarLinkLink>
+        <NavbarLinkLink to="/apps/tags" activeProps={{ isActive: true }}>
+          {t("siteHeader.nav.tags")}
+        </NavbarLinkLink>
+        <NavbarLinkLink to="/apps/lexicons" activeProps={{ isActive: true }}>
+          {t("siteHeader.nav.sharedData")}
+        </NavbarLinkLink>
+      </NavbarNavigation>
+
       <NavbarAction alwaysVisible={true}>
         <Flex align="center" gap="md">
+          <HeaderSearch />
           <IconButtonLink
-            to="/search"
-            search={{ sort: "popular" }}
+            to="/apps"
             label={t("siteHeader.searchListingsLabel")}
             variant="tertiary"
             size="lg"
+            style={styles.searchButton}
           >
             <Search />
           </IconButtonLink>
diff --git a/src/components/ecosystem-listing-grid.styles.tsx b/src/components/ecosystem-listing-grid.styles.tsx
deleted file mode 100644
index 351529a..0000000
--- a/src/components/ecosystem-listing-grid.styles.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as stylex from "@stylexjs/stylex";
-
-import { breakpoints } from "../design-system/theme/media-queries.stylex";
-import { gap } from "../design-system/theme/semantic-spacing.stylex";
-
-export const ecosystemListingGridStyles = stylex.create({
-  grid: {
-    gap: gap["xl"],
-    display: "grid",
-    gridTemplateColumns: {
-      default: "1fr",
-      [breakpoints.sm]: "repeat(2, minmax(0, 1fr))",
-      [breakpoints.lg]: "repeat(3, minmax(0, 1fr))",
-    },
-  },
-});
diff --git a/src/i18n/locales/en-XA/common.json b/src/i18n/locales/en-XA/common.json
index 9419d82..4afc619 100644
--- a/src/i18n/locales/en-XA/common.json
+++ b/src/i18n/locales/en-XA/common.json
@@ -1,6 +1,12 @@
 {
   "siteHeader": {
-    "searchListingsLabel": "[~~ Šéåŕçĥ ļîšţîñĝš ~~]"
+    "searchListingsLabel": "[~~ Šéåŕçĥ ļîšţîñĝš ~~]",
+    "searchPlaceholder": "[~~ Šéåŕçĥ åþþš… ~~]",
+    "nav": {
+      "browse": "[~~ Ɓŕöŵšé ~~]",
+      "tags": "[~~ Ţåĝš ~~]",
+      "sharedData": "[~~ Šĥåŕéð ðåţå ~~]"
+    }
   },
   "languageSwitcher": {
     "ariaLabel": "[~~ Çĥåñĝé ļåñĝüåĝé ~~]",
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
index d55339f..5eca3c7 100644
--- a/src/i18n/locales/en/common.json
+++ b/src/i18n/locales/en/common.json
@@ -1,6 +1,12 @@
 {
   "siteHeader": {
-    "searchListingsLabel": "Search listings"
+    "searchListingsLabel": "Search listings",
+    "searchPlaceholder": "Search apps…",
+    "nav": {
+      "browse": "Browse",
+      "tags": "Tags",
+      "sharedData": "Shared data"
+    }
   },
   "languageSwitcher": {
     "ariaLabel": "Change language",
diff --git a/src/integrations/tanstack-query/api-directory-listings.functions.ts b/src/integrations/tanstack-query/api-directory-listings.functions.ts
index a0c60c2..be59a00 100644
--- a/src/integrations/tanstack-query/api-directory-listings.functions.ts
+++ b/src/integrations/tanstack-query/api-directory-listings.functions.ts
@@ -71,6 +71,7 @@ import {
   compareOAuthLexiconKeysForDisplayOrder,
   extractOAuthLexiconKeysForStorefrontProbe,
   filterLexiconKeysForCrossAppMatching,
+  isRepoLexiconKeyForLexiconHub,
   normalizeLexiconClusterKeysForHub,
   parseOAuthLexiconKey,
 } from "#/lib/oauth-scope-lexicon-keys";
@@ -99,15 +100,13 @@ import {
 } from "drizzle-orm";
 import { z } from "zod";
 
+import type { BrowseListing } from "../../lib/browse-listings";
 import type {
   DirectoryCategoryAccent,
   DirectoryCategoryTreeNode,
 } from "../../lib/directory-categories";
 
-import {
-  findAppTagBySlug,
-  formatAppTagLabel,
-} from "../../lib/app-tag-metadata";
+import { formatAppTagLabel } from "../../lib/app-tag-metadata";
 import {
   normalizeAppTags,
   popularTagsFromAllAssignments,
@@ -774,11 +773,6 @@ const updateDirectoryListingAppTagsInput = z.object({
   appTags: z.array(z.string()).max(64),
 });
 
-const getAppsByTagPageInput = z.object({
-  tag: z.string().trim().min(1),
-  sort: listingSortInput,
-});
-
 const getRelatedDirectoryListingsInput = z.object({
   id: z.string().trim().min(1),
   limit: z.number().int().min(1).max(8).default(4),
@@ -1469,12 +1463,6 @@ function buildAppTagGroups(
     });
 }
 
-function buildAllApps(rows: Array<DirectoryListingRow>) {
-  return dedupeListings(rows.filter((row) => isBrowseableAppRow(row))).map(
-    (row) => toListingCard(row),
-  );
-}
-
 function isHomePageFeaturedAppRow(
   row: Pick<DirectoryListingRow, "categorySlugs">,
 ) {
@@ -2305,92 +2293,6 @@ const getAllDirectoryListingAppTagsQueryOptions = queryOptions({
   queryFn: async () => getAllDirectoryListingAppTags(),
 });
 
-const getAllAppsInput = z.object({
-  sort: listingSortInput,
-});
-
-const getAllApps = createServerFn({ method: "GET" })
-  .middleware([dbMiddleware])
-  .inputValidator(getAllAppsInput)
-  .handler(async ({ data, context }) => {
-    const input = getAllAppsInput.parse(data);
-    const table = context.schema.storeListings;
-    const rows = await context.db
-      .select(getListingSelect(table))
-      .from(table)
-      .where(
-        listingPublicWhere(
-          table,
-          sqlCategorySlugsMatchesLike(table.categorySlugs, "apps/%"),
-        ),
-      )
-      .orderBy(
-        ...(input.sort === "newest"
-          ? [desc(table.createdAt)]
-          : input.sort === "alphabetical"
-            ? [asc(table.name)]
-            : orderByPopularListingSort(table)),
-      );
-
-    return buildAllApps(rows);
-  });
-
-function getAllAppsQueryOptions(input: z.input<typeof getAllAppsInput> = {}) {
-  const normalizedInput = getAllAppsInput.parse(input);
-
-  return queryOptions({
-    queryKey: ["storeListings", "allApps", normalizedInput],
-    queryFn: async () => getAllApps({ data: normalizedInput }),
-  });
-}
-
-const getAppsByTagPage = createServerFn({ method: "GET" })
-  .middleware([dbMiddleware])
-  .inputValidator(getAppsByTagPageInput)
-  .handler(async ({ data, context }) => {
-    const input = getAppsByTagPageInput.parse(data);
-    const table = context.schema.storeListings;
-    const rows = await context.db
-      .select(getListingSelect(table))
-      .from(table)
-      .where(
-        listingPublicWhere(
-          table,
-          sqlCategorySlugsMatchesLike(table.categorySlugs, "apps/%"),
-        ),
-      )
-      .orderBy(
-        ...(input.sort === "newest"
-          ? [desc(table.createdAt)]
-          : input.sort === "alphabetical"
-            ? [asc(table.name)]
-            : orderByPopularListingSort(table)),
-      );
-
-    const groups = buildAppTagGroups(rows, { preserveListingOrder: true });
-    const tag = findAppTagBySlug(
-      groups.map((group) => group.tag),
-      input.tag,
-    );
-
-    if (!tag) {
-      return null;
-    }
-
-    return groups.find((group) => group.tag === tag) ?? null;
-  });
-
-function getAppsByTagPageQueryOptions(
-  input: z.input<typeof getAppsByTagPageInput>,
-) {
-  const normalizedInput = getAppsByTagPageInput.parse(input);
-
-  return queryOptions({
-    queryKey: ["storeListings", "appsByTagPage", normalizedInput],
-    queryFn: async () => getAppsByTagPage({ data: normalizedInput }),
-  });
-}
-
 const getAppsOAuthLexiconSummaries = createServerFn({ method: "GET" })
   .middleware([dbMiddleware])
   .handler(async ({ context }) => {
@@ -2719,46 +2621,70 @@ function getLexiconCompatibleAppsPageQueryOptions(
   });
 }
 
-const getAllListingsInput = z.object({
-  sort: listingSortInput,
-});
+const BROWSE_SEARCH_TEXT_MAX_LENGTH = 200;
 
-const getAllListings = createServerFn({ method: "GET" })
+/**
+ * Every public non-protocol listing with the fields `/apps` filters and sorts on. Returned in "popular"
+ * order (`popularRank`) so the client can re-sort without another round trip.
+ */
+const getBrowseListings = createServerFn({ method: "GET" })
   .middleware([dbMiddleware])
-  .inputValidator(getAllListingsInput)
-  .handler(async ({ data, context }) => {
-    const input = getAllListingsInput.parse(data);
+  .handler(async ({ context }): Promise<Array<BrowseListing>> => {
     const table = context.schema.storeListings;
+    const probe = context.schema.storeListingOAuthProbes;
     const rows = await context.db
-      .select(getListingSelect(table))
+      .select({
+        ...getListingSelect(table),
+        links: table.links,
+        favoriteCount: table.favoriteCount,
+        createdAt: table.createdAt,
+        updatedAt: table.updatedAt,
+        oauthLexiconKeys: probe.oauthLexiconKeys,
+      })
       .from(table)
+      .leftJoin(probe, eq(probe.storeListingId, table.id))
       .where(
         listingPublicWhere(
           table,
           sql`not (${sqlCategorySlugsMatchesLike(table.categorySlugs, "protocol/%")})`,
         ),
       )
-      .orderBy(
-        ...(input.sort === "newest"
-          ? [desc(table.createdAt)]
-          : input.sort === "alphabetical"
-            ? [asc(table.name)]
-            : orderByPopularListingSort(table)),
-      );
-
-    return rows.map((row) => toListingCard(row));
-  });
+      .orderBy(...orderByPopularListingSort(table));
 
-function getAllListingsQueryOptions(
-  input: z.input<typeof getAllListingsInput> = {},
-) {
-  const normalizedInput = getAllListingsInput.parse(input);
+    return rows.map((row, index) => {
+      const card = toListingCard(row);
+      const dataNsids = (row.oauthLexiconKeys ?? [])
+        .filter((key) => isRepoLexiconKeyForLexiconHub(key))
+        .flatMap((key) => parseOAuthLexiconKey(key)?.nsid ?? []);
+      const linkTypes = new Set(row.links.map((link) => link.type));
 
-  return queryOptions({
-    queryKey: ["storeListings", "allListings", normalizedInput],
-    queryFn: async () => getAllListings({ data: normalizedInput }),
+      return {
+        id: card.id,
+        name: card.name,
+        slug: getDirectoryListingSlug(card),
+        iconUrl: card.iconUrl,
+        tagline: card.tagline,
+        searchText: card.description.slice(0, BROWSE_SEARCH_TEXT_MAX_LENGTH),
+        categorySlugs: card.categorySlugs,
+        appTags: card.appTags,
+        rating: card.rating,
+        reviewCount: card.reviewCount,
+        favoriteCount: row.favoriteCount,
+        productAccountHandle: card.productAccountHandle,
+        createdAt: row.createdAt.toISOString(),
+        updatedAt: row.updatedAt.toISOString(),
+        popularRank: index,
+        dataNsids: [...new Set(dataNsids)],
+        hasSourceLink: linkTypes.has("source"),
+        acceptsDonations: linkTypes.has("donate"),
+      };
+    });
   });
-}
+
+const getBrowseListingsQueryOptions = queryOptions({
+  queryKey: ["storeListings", "browse"] as const,
+  queryFn: async () => getBrowseListings(),
+});
 
 const getDirectoryListingDetail = createServerFn({ method: "GET" })
   .middleware([dbMiddleware])
@@ -5528,10 +5454,7 @@ function isSlugUniqueViolation(err: unknown): boolean {
       constraint_name?: unknown;
       cause?: unknown;
     };
-    if (
-      e.code === "23505" &&
-      e.constraint_name === "store_listings_slug_idx"
-    ) {
+    if (e.code === "23505" && e.constraint_name === "store_listings_slug_idx") {
       return true;
     }
     cur = e.cause;
@@ -7848,14 +7771,10 @@ export const directoryListingApi = {
   getDirectoryCategoryTreeQueryOptions,
   getDirectoryCategoryPage,
   getDirectoryCategoryPageQueryOptions,
-  getAllApps,
-  getAllAppsQueryOptions,
   getAppsByTag,
   getAppsByTagQueryOptions,
   getAllDirectoryListingAppTags,
   getAllDirectoryListingAppTagsQueryOptions,
-  getAppsByTagPage,
-  getAppsByTagPageQueryOptions,
   getAppsOAuthLexiconSummaries,
   getAppsOAuthLexiconSummariesQueryOptions,
   getAppsByLexiconPage,
@@ -7867,8 +7786,8 @@ export const directoryListingApi = {
   getRelatedAppsBySharedLexiconKeysQueryOptions,
   getLexiconCompatibleAppsPage,
   getLexiconCompatibleAppsPageQueryOptions,
-  getAllListings,
-  getAllListingsQueryOptions,
+  getBrowseListings,
+  getBrowseListingsQueryOptions,
   getDirectoryListingDetail,
   getDirectoryListingDetailQueryOptions,
   getDirectoryListingDetailBySlug,
diff --git a/src/lib/app-tag-metadata.ts b/src/lib/app-tag-metadata.ts
index 673f00e..3bc2987 100644
--- a/src/lib/app-tag-metadata.ts
+++ b/src/lib/app-tag-metadata.ts
@@ -27,15 +27,6 @@ const APP_TAG_DESCRIPTIONS: Record<string, string> = {
     "General-purpose helpers that make everyday Bluesky usage more convenient, efficient, or easier to customize.",
 };
 
-function normalizeAppTagSlug(slug: string) {
-  return slug
-    .trim()
-    .toLowerCase()
-    .replaceAll(/[_\s]+/g, "-")
-    .replaceAll(/-+/g, "-")
-    .replaceAll(/^-+|-+$/g, "");
-}
-
 export function formatAppTagLabel(tag: string) {
   return tag.replaceAll(/\b\w/g, (character) => character.toUpperCase());
 }
@@ -61,20 +52,3 @@ export function getAppTagSlug(tag: string) {
 export function getAppTagHref(tag: string) {
   return `/apps/${getAppTagSlug(tag)}`;
 }
-
-export function findAppTagBySlug(tags: Iterable<string>, slug: string) {
-  const normalizedSlug = normalizeAppTagSlug(slug);
-
-  for (const tag of tags) {
-    const normalizedTag = normalizeAppTag(tag);
-    if (!normalizedTag) {
-      continue;
-    }
-
-    if (getAppTagSlug(normalizedTag) === normalizedSlug) {
-      return normalizedTag;
-    }
-  }
-
-  return null;
-}
diff --git a/src/lib/browse-listings.test.ts b/src/lib/browse-listings.test.ts
new file mode 100644
index 0000000..506272b
--- /dev/null
+++ b/src/lib/browse-listings.test.ts
@@ -0,0 +1,201 @@
+import { describe, expect, it } from "vitest";
+
+import type { BrowseListing } from "./browse-listings";
+
+import {
+  buildBrowseFacets,
+  getBrowseFilters,
+  listingMatchesFilters,
+  sortBrowseListings,
+  toggleBrowseFilter,
+  validateBrowseSearch,
+} from "./browse-listings";
+
+function listing(overrides: Partial<BrowseListing>): BrowseListing {
+  return {
+    id: overrides.name ?? "id",
+    name: "Listing",
+    slug: "listing",
+    iconUrl: null,
+    tagline: "",
+    searchText: "",
+    categorySlugs: [],
+    appTags: [],
+    rating: null,
+    reviewCount: 0,
+    favoriteCount: 0,
+    productAccountHandle: null,
+    createdAt: "2026-01-01T00:00:00.000Z",
+    updatedAt: "2026-01-01T00:00:00.000Z",
+    popularRank: 0,
+    dataNsids: [],
+    hasSourceLink: false,
+    acceptsDonations: false,
+    ...overrides,
+  };
+}
+
+const graysky = listing({
+  name: "Graysky",
+  categorySlugs: ["apps/bluesky/client"],
+  appTags: ["social"],
+  rating: 4.7,
+  reviewCount: 10,
+  popularRank: 1,
+  dataNsids: ["app.bsky.feed.post"],
+});
+const smokeSignal = listing({
+  name: "Smoke Signal",
+  categorySlugs: ["apps/smoke-signal"],
+  appTags: ["events", "community"],
+  rating: 4.2,
+  reviewCount: 3,
+  popularRank: 0,
+  dataNsids: ["events.smokesignal.calendar.event", "app.bsky.feed.post"],
+  hasSourceLink: true,
+});
+const pds = listing({
+  name: "Stratos",
+  categorySlugs: ["protocol/pds"],
+  appTags: ["developer tool"],
+  popularRank: 2,
+});
+const all = [graysky, smokeSignal, pds];
+
+describe("validateBrowseSearch", () => {
+  it("drops defaults and invalid values", () => {
+    expect(
+      validateBrowseSearch({
+        sort: "popular",
+        page: "1",
+        rating: "2",
+        has: "open-source,nope",
+        tag: " social , social,games ",
+      }),
+    ).toEqual({
+      q: undefined,
+      in: undefined,
+      tag: "social,games",
+      data: undefined,
+      rating: undefined,
+      has: "open-source",
+      sort: undefined,
+      page: undefined,
+    });
+  });
+
+  it("keeps non-default sort, rating and page", () => {
+    const search = validateBrowseSearch({ sort: "rating", rating: 4, page: 3 });
+    expect(search.sort).toBe("rating");
+    expect(search.rating).toBe(4);
+    expect(search.page).toBe(3);
+  });
+});
+
+describe("listingMatchesFilters", () => {
+  const match = (search: Record<string, unknown>) =>
+    all
+      .filter((l) =>
+        listingMatchesFilters(
+          l,
+          getBrowseFilters(validateBrowseSearch(search)),
+        ),
+      )
+      .map((l) => l.name);
+
+  it("treats `apps` as top-level apps only", () => {
+    expect(match({ in: "apps" })).toEqual(["Smoke Signal"]);
+  });
+
+  it("matches a category and its descendants", () => {
+    expect(match({ in: "apps/bluesky" })).toEqual(["Graysky"]);
+    expect(match({ in: "protocol" })).toEqual(["Stratos"]);
+  });
+
+  it("ORs within a facet and ANDs across facets", () => {
+    expect(match({ tag: "social,events" })).toEqual([
+      "Graysky",
+      "Smoke Signal",
+    ]);
+    expect(match({ tag: "social,events", has: "open-source" })).toEqual([
+      "Smoke Signal",
+    ]);
+  });
+
+  it("matches tags by slug", () => {
+    expect(match({ tag: "developer" })).toEqual(["Stratos"]);
+  });
+
+  it("groups data by producer", () => {
+    expect(match({ data: "app.bsky" })).toEqual(["Graysky", "Smoke Signal"]);
+    expect(match({ data: "events.smokesignal" })).toEqual(["Smoke Signal"]);
+  });
+
+  it("searches name, tags and category labels", () => {
+    expect(match({ q: "client" })).toEqual(["Graysky"]);
+    expect(match({ q: "COMMUNITY" })).toEqual(["Smoke Signal"]);
+  });
+
+  it("filters by minimum rating", () => {
+    expect(match({ rating: 4.5 })).toEqual(["Graysky"]);
+  });
+});
+
+describe("sortBrowseListings", () => {
+  it("sorts by popular rank by default", () => {
+    expect(sortBrowseListings(all, "popular").map((l) => l.name)).toEqual([
+      "Smoke Signal",
+      "Graysky",
+      "Stratos",
+    ]);
+  });
+
+  it("puts unrated listings last when sorting by rating", () => {
+    expect(sortBrowseListings(all, "rating").map((l) => l.name)).toEqual([
+      "Graysky",
+      "Smoke Signal",
+      "Stratos",
+    ]);
+  });
+});
+
+describe("buildBrowseFacets", () => {
+  it("counts each facet ignoring its own selection", () => {
+    const facets = buildBrowseFacets(all, getBrowseFilters({ tag: "social" }));
+    expect(facets.tags.find((t) => t.id === "events")?.count).toBe(1);
+    expect(facets.categories.find((c) => c.id === "apps")?.count).toBe(0);
+  });
+
+  it("builds ecosystem branches without protocol tooling", () => {
+    const facets = buildBrowseFacets(all, getBrowseFilters({}));
+    const bluesky = facets.categories.find((c) => c.id === "apps/bluesky");
+    expect(bluesky?.children?.map((c) => c.id)).toEqual([
+      "apps/bluesky/client",
+    ]);
+    expect(facets.categories.map((c) => c.id)).toEqual([
+      "apps",
+      "apps/bluesky",
+    ]);
+  });
+
+  it("only offers data producers shared by two or more listings", () => {
+    const facets = buildBrowseFacets(all, getBrowseFilters({}));
+    expect(facets.data.map((d) => d.id)).toEqual(["app.bsky"]);
+    expect(facets.data[0]?.label).toBe("bsky.app");
+  });
+});
+
+describe("toggleBrowseFilter", () => {
+  it("adds and removes values and resets the page", () => {
+    const added = toggleBrowseFilter(
+      { tag: "social", page: 3 },
+      "tags",
+      "games",
+    );
+    expect(added).toEqual({ tag: "social,games", page: undefined });
+    expect(toggleBrowseFilter(added, "tags", "social").tag).toBe("games");
+    expect(toggleBrowseFilter({ rating: 4 }, "minRating", "4").rating).toBe(
+      undefined,
+    );
+  });
+});
diff --git a/src/lib/browse-listings.ts b/src/lib/browse-listings.ts
new file mode 100644
index 0000000..9ac69e3
--- /dev/null
+++ b/src/lib/browse-listings.ts
@@ -0,0 +1,607 @@
+import { formatAppTagLabel, getAppTagSlug } from "./app-tag-metadata";
+import { getDirectoryCategoryOption } from "./directory-categories";
+import { getLexiconProducerSiteFromRepoNsid } from "./lexicon-producer-site";
+
+/** Card projection for `/apps` — everything the sidebar facets and sorts need, client-side. */
+export interface BrowseListing {
+  id: string;
+  name: string;
+  slug: string;
+  iconUrl: string | null;
+  tagline: string;
+  /** Truncated full description; only used for text search. */
+  searchText: string;
+  categorySlugs: Array<string>;
+  appTags: Array<string>;
+  rating: number | null;
+  reviewCount: number;
+  favoriteCount: number;
+  productAccountHandle: string | null;
+  createdAt: string;
+  updatedAt: string;
+  /** Position in the server's "popular" ordering (trending score). */
+  popularRank: number;
+  /** Repo collection NSIDs requested in the listing's OAuth scopes. */
+  dataNsids: Array<string>;
+  hasSourceLink: boolean;
+  acceptsDonations: boolean;
+}
+
+export const BROWSE_SORTS = [
+  "popular",
+  "rating",
+  "reviews",
+  "favorites",
+  "newest",
+  "updated",
+  "alphabetical",
+] as const;
+export type BrowseSort = (typeof BROWSE_SORTS)[number];
+
+export const BROWSE_SORT_LABELS: Record<BrowseSort, string> = {
+  popular: "Trending",
+  rating: "Top rated",
+  reviews: "Most reviewed",
+  favorites: "Most favorited",
+  newest: "Newest",
+  updated: "Recently updated",
+  alphabetical: "A–Z",
+};
+
+export const BROWSE_EXTRAS = ["open-source", "donations", "official"] as const;
+export type BrowseExtra = (typeof BROWSE_EXTRAS)[number];
+
+export const BROWSE_EXTRA_LABELS: Record<BrowseExtra, string> = {
+  "open-source": "Open source",
+  donations: "Accepts donations",
+  official: "Has official account",
+};
+
+export const BROWSE_MIN_RATINGS = [4.5, 4, 3] as const;
+
+export const BROWSE_PAGE_SIZE = 24;
+
+/**
+ * `/apps` URL state. Multi-value params are comma-joined strings so URLs stay readable
+ * (`?tag=social,games&in=apps/bluesky`) instead of JSON-encoded arrays.
+ */
+export interface BrowseSearch {
+  q?: string;
+  /** Category ids; `apps` means top-level apps (`apps/<name>` exactly). */
+  in?: string;
+  /** App tag slugs from `getAppTagSlug`. */
+  tag?: string;
+  /** Lexicon producer group keys, e.g. `app.bsky`. */
+  data?: string;
+  rating?: number;
+  has?: string;
+  sort?: BrowseSort;
+  page?: number;
+}
+
+export interface BrowseFilters {
+  query: string;
+  categories: Array<string>;
+  tags: Array<string>;
+  data: Array<string>;
+  minRating: number | null;
+  extras: Array<BrowseExtra>;
+}
+
+export type BrowseFacet =
+  | "categories"
+  | "tags"
+  | "data"
+  | "minRating"
+  | "extras";
+
+export const TOP_LEVEL_APPS_CATEGORY = "apps";
+
+function asTrimmedString(value: unknown): string | undefined {
+  if (typeof value === "number") return String(value);
+  if (typeof value !== "string") return undefined;
+  const trimmed = value.trim();
+  return trimmed || undefined;
+}
+
+function splitList(value: string | undefined): Array<string> {
+  if (!value) return [];
+  return [
+    ...new Set(
+      value
+        .split(",")
+        .map((part) => part.trim())
+        .filter(Boolean),
+    ),
+  ];
+}
+
+export function joinList(values: Iterable<string>): string | undefined {
+  const joined = [...values].join(",");
+  return joined || undefined;
+}
+
+function isOneOf<T extends string>(
+  values: ReadonlyArray<T>,
+  value: unknown,
+): value is T {
+  return typeof value === "string" && values.includes(value as T);
+}
+
+export function validateBrowseSearch(
+  search: Record<string, unknown>,
+): BrowseSearch {
+  const rating = Number(search.rating);
+  const page = Number(search.page);
+
+  return {
+    q: asTrimmedString(search.q),
+    in: joinList(splitList(asTrimmedString(search.in))),
+    tag: joinList(splitList(asTrimmedString(search.tag))),
+    data: joinList(splitList(asTrimmedString(search.data))),
+    rating: (BROWSE_MIN_RATINGS as ReadonlyArray<number>).includes(rating)
+      ? rating
+      : undefined,
+    has: joinList(
+      splitList(asTrimmedString(search.has)).filter((v) =>
+        isOneOf(BROWSE_EXTRAS, v),
+      ),
+    ),
+    sort:
+      isOneOf(BROWSE_SORTS, search.sort) && search.sort !== "popular"
+        ? search.sort
+        : undefined,
+    page: Number.isInteger(page) && page > 1 ? page : undefined,
+  };
+}
+
+export function getBrowseFilters(search: BrowseSearch): BrowseFilters {
+  return {
+    query: search.q?.trim().toLowerCase() ?? "",
+    categories: splitList(search.in),
+    tags: splitList(search.tag),
+    data: splitList(search.data),
+    minRating: search.rating ?? null,
+    extras: splitList(search.has).filter((v): v is BrowseExtra =>
+      isOneOf(BROWSE_EXTRAS, v),
+    ),
+  };
+}
+
+export function countActiveBrowseFilters(filters: BrowseFilters): number {
+  return (
+    filters.categories.length +
+    filters.tags.length +
+    filters.data.length +
+    (filters.minRating == null ? 0 : 1) +
+    filters.extras.length
+  );
+}
+
+function isTopLevelAppSlug(slug: string) {
+  const parts = slug.split("/");
+  return parts[0] === "apps" && parts.length === 2;
+}
+
+export function listingMatchesCategory(
+  listing: Pick<BrowseListing, "categorySlugs">,
+  categoryId: string,
+): boolean {
+  if (categoryId === TOP_LEVEL_APPS_CATEGORY) {
+    return listing.categorySlugs.some(isTopLevelAppSlug);
+  }
+  return listing.categorySlugs.some(
+    (slug) => slug === categoryId || slug.startsWith(`${categoryId}/`),
+  );
+}
+
+export function getDataGroupKey(nsid: string): string | null {
+  return getLexiconProducerSiteFromRepoNsid(nsid)?.groupKey ?? null;
+}
+
+function listingDataGroups(listing: Pick<BrowseListing, "dataNsids">) {
+  const groups = new Set<string>();
+  for (const nsid of listing.dataNsids) {
+    const key = getDataGroupKey(nsid);
+    if (key) groups.add(key);
+  }
+  return groups;
+}
+
+function matchesQuery(listing: BrowseListing, query: string) {
+  if (!query) return true;
+  return [
+    listing.name,
+    listing.tagline,
+    listing.searchText,
+    listing.productAccountHandle ?? "",
+    ...listing.appTags,
+    ...listing.categorySlugs.map(
+      (slug) => getDirectoryCategoryOption(slug)?.pathLabel ?? slug,
+    ),
+  ].some((value) => value.toLowerCase().includes(query));
+}
+
+function matchesFacet(
+  listing: BrowseListing,
+  filters: BrowseFilters,
+  facet: BrowseFacet,
+): boolean {
+  switch (facet) {
+    case "categories": {
+      return (
+        filters.categories.length === 0 ||
+        filters.categories.some((id) => listingMatchesCategory(listing, id))
+      );
+    }
+    case "tags": {
+      return (
+        filters.tags.length === 0 ||
+        listing.appTags.some((tag) => filters.tags.includes(getAppTagSlug(tag)))
+      );
+    }
+    case "data": {
+      if (filters.data.length === 0) return true;
+      const groups = listingDataGroups(listing);
+      return filters.data.some((key) => groups.has(key));
+    }
+    case "minRating": {
+      return (
+        filters.minRating == null ||
+        (listing.rating != null && listing.rating >= filters.minRating)
+      );
+    }
+    case "extras": {
+      return filters.extras.every((extra) => listingHasExtra(listing, extra));
+    }
+    default: {
+      const _exhaustive: never = facet;
+      return _exhaustive;
+    }
+  }
+}
+
+export function listingHasExtra(
+  listing: BrowseListing,
+  extra: BrowseExtra,
+): boolean {
+  switch (extra) {
+    case "open-source": {
+      return listing.hasSourceLink;
+    }
+    case "donations": {
+      return listing.acceptsDonations;
+    }
+    case "official": {
+      return Boolean(listing.productAccountHandle);
+    }
+    default: {
+      const _exhaustive: never = extra;
+      return _exhaustive;
+    }
+  }
+}
+
+const FACETS: Array<BrowseFacet> = [
+  "categories",
+  "tags",
+  "data",
+  "minRating",
+  "extras",
+];
+
+/** Within a facet values are OR'd; across facets they are AND'd. `except` skips one facet (for counts). */
+export function listingMatchesFilters(
+  listing: BrowseListing,
+  filters: BrowseFilters,
+  except?: BrowseFacet,
+): boolean {
+  if (!matchesQuery(listing, filters.query)) return false;
+  return FACETS.every(
+    (facet) => facet === except || matchesFacet(listing, filters, facet),
+  );
+}
+
+function compareNullableDesc(a: number | null, b: number | null) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  return b - a;
+}
+
+function byPopular(a: BrowseListing, b: BrowseListing) {
+  return a.popularRank - b.popularRank;
+}
+
+function byCountThenLabel(a: BrowseFacetOption, b: BrowseFacetOption) {
+  return b.count - a.count || a.label.localeCompare(b.label);
+}
+
+export function sortBrowseListings(
+  listings: ReadonlyArray<BrowseListing>,
+  sort: BrowseSort,
+): Array<BrowseListing> {
+  return listings.toSorted((a, b) => {
+    switch (sort) {
+      case "popular": {
+        return byPopular(a, b);
+      }
+      case "rating": {
+        return (
+          compareNullableDesc(a.rating, b.rating) ||
+          b.reviewCount - a.reviewCount ||
+          byPopular(a, b)
+        );
+      }
+      case "reviews": {
+        return b.reviewCount - a.reviewCount || byPopular(a, b);
+      }
+      case "favorites": {
+        return b.favoriteCount - a.favoriteCount || byPopular(a, b);
+      }
+      case "newest": {
+        return b.createdAt.localeCompare(a.createdAt) || byPopular(a, b);
+      }
+      case "updated": {
+        return b.updatedAt.localeCompare(a.updatedAt) || byPopular(a, b);
+      }
+      case "alphabetical": {
+        return a.name.localeCompare(b.name);
+      }
+      default: {
+        const _exhaustive: never = sort;
+        return _exhaustive;
+      }
+    }
+  });
+}
+
+export interface BrowseFacetOption {
+  id: string;
+  label: string;
+  count: number;
+  /** Secondary text, e.g. the producer host for data groups. */
+  detail?: string;
+  iconUrl?: string | null;
+  children?: Array<BrowseFacetOption>;
+}
+
+export interface BrowseFacets {
+  categories: Array<BrowseFacetOption>;
+  tags: Array<BrowseFacetOption>;
+  data: Array<BrowseFacetOption>;
+  minRating: Array<BrowseFacetOption>;
+  extras: Array<BrowseFacetOption>;
+}
+
+function tally<T>(
+  listings: ReadonlyArray<BrowseListing>,
+  keysOf: (listing: BrowseListing) => Iterable<T>,
+): Map<T, number> {
+  const counts = new Map<T, number>();
+  for (const listing of listings) {
+    for (const key of new Set(keysOf(listing))) {
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+  }
+  return counts;
+}
+
+function categoryLabel(id: string) {
+  return getDirectoryCategoryOption(id)?.label ?? id;
+}
+
+/** Category tree: top-level apps, then each app ecosystem with its tool categories. */
+function buildCategoryOptions(
+  all: ReadonlyArray<BrowseListing>,
+  scoped: ReadonlyArray<BrowseListing>,
+): Array<BrowseFacetOption> {
+  const ecosystems = new Map<string, Set<string>>();
+  const iconByCategory = new Map<string, string | null>();
+
+  for (const listing of all) {
+    for (const slug of listing.categorySlugs) {
+      const parts = slug.split("/");
+      if (parts[0] === "apps" && parts.length === 2) {
+        iconByCategory.set(slug, listing.iconUrl);
+      } else if (parts[0] === "apps" && parts.length >= 3) {
+        const root = parts.slice(0, 2).join("/");
+        const children = ecosystems.get(root) ?? new Set();
+        children.add(parts.slice(0, 3).join("/"));
+        ecosystems.set(root, children);
+      }
+    }
+  }
+
+  const count = (id: string) =>
+    scoped.filter((listing) => listingMatchesCategory(listing, id)).length;
+  const toOption = (id: string): BrowseFacetOption => ({
+    id,
+    label: categoryLabel(id),
+    count: count(id),
+  });
+  const options: Array<BrowseFacetOption> = [
+    {
+      id: TOP_LEVEL_APPS_CATEGORY,
+      label: "Standalone apps",
+      count: count(TOP_LEVEL_APPS_CATEGORY),
+    },
+  ];
+
+  const ecosystemOptions = [...ecosystems.entries()].map(
+    ([root, children]) => ({
+      ...toOption(root),
+      iconUrl: iconByCategory.get(root) ?? null,
+      children: [...children]
+        .map((id) => toOption(id))
+        .toSorted(byCountThenLabel),
+    }),
+  );
+  options.push(...ecosystemOptions.toSorted(byCountThenLabel));
+
+  return options;
+}
+
+export function buildBrowseFacets(
+  listings: ReadonlyArray<BrowseListing>,
+  filters: BrowseFilters,
+): BrowseFacets {
+  const scopedFor = (facet: BrowseFacet) =>
+    listings.filter((listing) =>
+      listingMatchesFilters(listing, filters, facet),
+    );
+
+  const tagScoped = scopedFor("tags");
+  const tagLabels = new Map<string, string>();
+  for (const listing of listings) {
+    for (const tag of listing.appTags) {
+      tagLabels.set(getAppTagSlug(tag), tag);
+    }
+  }
+  const tagCounts = tally(tagScoped, (listing) =>
+    listing.appTags.map(getAppTagSlug),
+  );
+  const tags = [...tagLabels.entries()]
+    .map(([slug, tag]) => ({
+      id: slug,
+      label: formatAppTagLabel(tag),
+      count: tagCounts.get(slug) ?? 0,
+    }))
+    .toSorted((a, b) => b.count - a.count || a.label.localeCompare(b.label));
+
+  // Only producers whose data is used by 2+ listings: that's what makes it "shared".
+  const allDataCounts = tally(listings, listingDataGroups);
+  const dataCounts = tally(scopedFor("data"), listingDataGroups);
+  const data = [...allDataCounts.entries()]
+    .filter(([, total]) => total >= 2)
+    .map(([key]) => {
+      const site = getLexiconProducerSiteFromRepoNsid(key);
+      return {
+        id: key,
+        label: site?.siteLabel ?? key,
+        count: dataCounts.get(key) ?? 0,
+      };
+    })
+    .toSorted((a, b) => b.count - a.count || a.label.localeCompare(b.label));
+
+  const ratingScoped = scopedFor("minRating");
+  const minRating = BROWSE_MIN_RATINGS.map((min) => ({
+    id: String(min),
+    label: `${min}★ & up`,
+    count: ratingScoped.filter(
+      (listing) => listing.rating != null && listing.rating >= min,
+    ).length,
+  }));
+
+  const extrasScoped = scopedFor("extras");
+  const extras = BROWSE_EXTRAS.map((extra) => ({
+    id: extra,
+    label: BROWSE_EXTRA_LABELS[extra],
+    count: extrasScoped.filter((listing) => listingHasExtra(listing, extra))
+      .length,
+  }));
+
+  return {
+    categories: buildCategoryOptions(listings, scopedFor("categories")),
+    tags,
+    data,
+    minRating,
+    extras,
+  };
+}
+
+/** `apps/bluesky/client` → `Bluesky › Client`; protocol paths keep their root. */
+export function getBrowseCategoryLabel(categoryId: string): string {
+  if (categoryId === TOP_LEVEL_APPS_CATEGORY) return "Standalone apps";
+  const option = getDirectoryCategoryOption(categoryId);
+  if (!option) return categoryId;
+  const labels =
+    option.pathIds[0] === "apps"
+      ? option.pathLabels.slice(1)
+      : option.pathLabels;
+  return labels.join(" › ");
+}
+
+/** Human label for a selected filter value (active-filter chips). */
+export function getBrowseFilterValueLabel(
+  facet: BrowseFacet,
+  value: string,
+  listings: ReadonlyArray<BrowseListing>,
+): string {
+  switch (facet) {
+    case "categories": {
+      return getBrowseCategoryLabel(value);
+    }
+    case "tags": {
+      for (const listing of listings) {
+        for (const tag of listing.appTags) {
+          if (getAppTagSlug(tag) === value) return formatAppTagLabel(tag);
+        }
+      }
+      return formatAppTagLabel(value.replaceAll("-", " "));
+    }
+    case "data": {
+      return getLexiconProducerSiteFromRepoNsid(value)?.siteLabel ?? value;
+    }
+    case "minRating": {
+      return `${value}★ & up`;
+    }
+    case "extras": {
+      return isOneOf(BROWSE_EXTRAS, value) ? BROWSE_EXTRA_LABELS[value] : value;
+    }
+    default: {
+      const _exhaustive: never = facet;
+      return _exhaustive;
+    }
+  }
+}
+
+/** Search params for `/apps` with one facet value toggled; resets pagination. */
+export function toggleBrowseFilter(
+  search: BrowseSearch,
+  facet: BrowseFacet,
+  value: string,
+): BrowseSearch {
+  const toggleIn = (current: string | undefined) => {
+    const values = splitList(current);
+    return joinList(
+      values.includes(value)
+        ? values.filter((v) => v !== value)
+        : [...values, value],
+    );
+  };
+
+  const next: BrowseSearch = { ...search, page: undefined };
+  switch (facet) {
+    case "categories": {
+      next.in = toggleIn(search.in);
+      break;
+    }
+    case "tags": {
+      next.tag = toggleIn(search.tag);
+      break;
+    }
+    case "data": {
+      next.data = toggleIn(search.data);
+      break;
+    }
+    case "minRating": {
+      const rating = Number(value);
+      next.rating = search.rating === rating ? undefined : rating;
+      break;
+    }
+    case "extras": {
+      next.has = toggleIn(search.has);
+      break;
+    }
+    default: {
+      const _exhaustive: never = facet;
+      return _exhaustive;
+    }
+  }
+  return next;
+}
+
+export function clearBrowseFilters(search: BrowseSearch): BrowseSearch {
+  return { q: search.q, sort: search.sort };
+}
diff --git a/src/lib/directory-categories.ts b/src/lib/directory-categories.ts
index 30f529a..6c6b10d 100644
--- a/src/lib/directory-categories.ts
+++ b/src/lib/directory-categories.ts
@@ -159,21 +159,6 @@ export function shouldOmitUrlMentionsForBlueskyPlatformListing(
   return primaryCategorySlug(categorySlugs) === "apps/bluesky";
 }
 
-export function getDirectoryBrowsePath(categoryId: string | null | undefined) {
-  const option = getDirectoryCategoryOption(categoryId);
-  const rootCategoryId = option?.pathIds[0];
-
-  if (rootCategoryId === "apps") {
-    return "/apps/all";
-  }
-
-  if (rootCategoryId === "protocol") {
-    return "/protocol/all";
-  }
-
-  return "/categories/all";
-}
-
 /**
  * Returns the app root category id `apps/{app}` when `categorySlug` is anywhere under that app
  * (e.g. `apps/bluesky/tools` → `apps/bluesky`). Otherwise `null`.
@@ -203,16 +188,6 @@ export function getAppSegmentFromEcosystemRootCategoryId(
   return parts[1];
 }
 
-/** `/ecosystems/{appSegment}` — `appSegment` should match normalized category segments (e.g. `bluesky`). */
-export function getEcosystemPathFromAppSegment(appSegment: string): string {
-  const normalized = normalizeCategorySegment(appSegment);
-  return `/ecosystems/${normalized}`;
-}
-
-export function getEcosystemAllPathFromAppSegment(appSegment: string): string {
-  return `${getEcosystemPathFromAppSegment(appSegment)}/all`;
-}
-
 /**
  * Builds `apps/{segment}` from a dynamic route param (normalized).
  */
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index ab7c68d..47f35f8 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -23,6 +23,7 @@ import { Route as HeaderLayoutSearchRouteImport } from './routes/_header-layout.
 import { Route as HeaderLayoutNotificationsRouteImport } from './routes/_header-layout.notifications'
 import { Route as HeaderLayoutAdminLayoutRouteImport } from './routes/_header-layout._admin-layout'
 import { Route as LocaleAboutRouteImport } from './routes/$locale.about'
+import { Route as HeaderLayoutAppsIndexRouteImport } from './routes/_header-layout.apps.index'
 import { Route as HeaderLayoutProfileActorRouteImport } from './routes/_header-layout.profile.$actor'
 import { Route as HeaderLayoutProductsManageRouteImport } from './routes/_header-layout.products.manage'
 import { Route as HeaderLayoutProductsCreateRouteImport } from './routes/_header-layout.products.create'
@@ -130,6 +131,11 @@ const LocaleAboutRoute = LocaleAboutRouteImport.update({
   path: '/about',
   getParentRoute: () => LocaleRoute,
 } as any)
+const HeaderLayoutAppsIndexRoute = HeaderLayoutAppsIndexRouteImport.update({
+  id: '/apps/',
+  path: '/apps/',
+  getParentRoute: () => HeaderLayoutRoute,
+} as any)
 const HeaderLayoutProfileActorRoute =
   HeaderLayoutProfileActorRouteImport.update({
     id: '/profile/$actor',
@@ -371,6 +377,7 @@ export interface FileRoutesByFullPath {
   '/products/create': typeof HeaderLayoutProductsCreateRoute
   '/products/manage': typeof HeaderLayoutProductsManageRoute
   '/profile/$actor': typeof HeaderLayoutProfileActorRoute
+  '/apps/': typeof HeaderLayoutAppsIndexRoute
   '/admin/add-listing': typeof HeaderLayoutAdminLayoutAdminAddListingRoute
   '/admin/admins': typeof HeaderLayoutAdminLayoutAdminAdminsRoute
   '/admin/home-page-hero': typeof HeaderLayoutAdminLayoutAdminHomePageHeroRoute
@@ -422,6 +429,7 @@ export interface FileRoutesByTo {
   '/products/create': typeof HeaderLayoutProductsCreateRoute
   '/products/manage': typeof HeaderLayoutProductsManageRoute
   '/profile/$actor': typeof HeaderLayoutProfileActorRoute
+  '/apps': typeof HeaderLayoutAppsIndexRoute
   '/admin/add-listing': typeof HeaderLayoutAdminLayoutAdminAddListingRoute
   '/admin/admins': typeof HeaderLayoutAdminLayoutAdminAdminsRoute
   '/admin/home-page-hero': typeof HeaderLayoutAdminLayoutAdminHomePageHeroRoute
@@ -475,6 +483,7 @@ export interface FileRoutesById {
   '/_header-layout/products/create': typeof HeaderLayoutProductsCreateRoute
   '/_header-layout/products/manage': typeof HeaderLayoutProductsManageRoute
   '/_header-layout/profile/$actor': typeof HeaderLayoutProfileActorRoute
+  '/_header-layout/apps/': typeof HeaderLayoutAppsIndexRoute
   '/_header-layout/_admin-layout/admin/add-listing': typeof HeaderLayoutAdminLayoutAdminAddListingRoute
   '/_header-layout/_admin-layout/admin/admins': typeof HeaderLayoutAdminLayoutAdminAdminsRoute
   '/_header-layout/_admin-layout/admin/home-page-hero': typeof HeaderLayoutAdminLayoutAdminHomePageHeroRoute
@@ -528,6 +537,7 @@ export interface FileRouteTypes {
     | '/products/create'
     | '/products/manage'
     | '/profile/$actor'
+    | '/apps/'
     | '/admin/add-listing'
     | '/admin/admins'
     | '/admin/home-page-hero'
@@ -579,6 +589,7 @@ export interface FileRouteTypes {
     | '/products/create'
     | '/products/manage'
     | '/profile/$actor'
+    | '/apps'
     | '/admin/add-listing'
     | '/admin/admins'
     | '/admin/home-page-hero'
@@ -631,6 +642,7 @@ export interface FileRouteTypes {
     | '/_header-layout/products/create'
     | '/_header-layout/products/manage'
     | '/_header-layout/profile/$actor'
+    | '/_header-layout/apps/'
     | '/_header-layout/_admin-layout/admin/add-listing'
     | '/_header-layout/_admin-layout/admin/admins'
     | '/_header-layout/_admin-layout/admin/home-page-hero'
@@ -775,6 +787,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LocaleAboutRouteImport
       parentRoute: typeof LocaleRoute
     }
+    '/_header-layout/apps/': {
+      id: '/_header-layout/apps/'
+      path: '/apps'
+      fullPath: '/apps/'
+      preLoaderRoute: typeof HeaderLayoutAppsIndexRouteImport
+      parentRoute: typeof HeaderLayoutRoute
+    }
     '/_header-layout/profile/$actor': {
       id: '/_header-layout/profile/$actor'
       path: '/profile/$actor'
@@ -1128,6 +1147,7 @@ interface HeaderLayoutRouteChildren {
   HeaderLayoutProductsCreateRoute: typeof HeaderLayoutProductsCreateRoute
   HeaderLayoutProductsManageRoute: typeof HeaderLayoutProductsManageRoute
   HeaderLayoutProfileActorRoute: typeof HeaderLayoutProfileActorRoute
+  HeaderLayoutAppsIndexRoute: typeof HeaderLayoutAppsIndexRoute
   HeaderLayoutEcosystemsAppAllRoute: typeof HeaderLayoutEcosystemsAppAllRoute
   HeaderLayoutProductsProductIdEditRoute: typeof HeaderLayoutProductsProductIdEditRoute
   HeaderLayoutProductsProductIdLexiconCompatibleRoute: typeof HeaderLayoutProductsProductIdLexiconCompatibleRoute
@@ -1154,6 +1174,7 @@ const HeaderLayoutRouteChildren: HeaderLayoutRouteChildren = {
   HeaderLayoutProductsCreateRoute: HeaderLayoutProductsCreateRoute,
   HeaderLayoutProductsManageRoute: HeaderLayoutProductsManageRoute,
   HeaderLayoutProfileActorRoute: HeaderLayoutProfileActorRoute,
+  HeaderLayoutAppsIndexRoute: HeaderLayoutAppsIndexRoute,
   HeaderLayoutEcosystemsAppAllRoute: HeaderLayoutEcosystemsAppAllRoute,
   HeaderLayoutProductsProductIdEditRoute:
     HeaderLayoutProductsProductIdEditRoute,
diff --git a/src/routes/_header-layout.apps.$tag.tsx b/src/routes/_header-layout.apps.$tag.tsx
index 4fdd345..d922f19 100644
--- a/src/routes/_header-layout.apps.$tag.tsx
+++ b/src/routes/_header-layout.apps.$tag.tsx
@@ -1,395 +1,18 @@
-import * as stylex from "@stylexjs/stylex";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import {
-  Link as RouterLink,
-  createFileRoute,
-  createLink,
-  notFound,
-  useRouter,
-} from "@tanstack/react-router";
-import { StarRating } from "#/design-system/star-rating";
-import { ChevronLeft } from "lucide-react";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
-import type {
-  DirectoryAppTagGroup,
-  DirectoryListingCard,
-} from "../integrations/tanstack-query/api-directory-listings.functions";
-
-import { AppTagCard } from "../components/AppTagCard";
-import { AppTagHero } from "../components/AppTagHero";
-import { FeaturedListingFallbackCard } from "../components/FeaturedListingFallbackCard";
-import { FeaturedListingGrid } from "../components/FeaturedListingGrid";
-import { HeroImage } from "../components/HeroImage";
-import { Avatar } from "../design-system/avatar";
-import { Card } from "../design-system/card";
-import { Flex } from "../design-system/flex";
-import { Grid } from "../design-system/grid";
-import { Link } from "../design-system/link";
-import { Page } from "../design-system/page";
-import { Select, SelectItem } from "../design-system/select";
-import { breakpoints } from "../design-system/theme/media-queries.stylex";
-import {
-  gap,
-  horizontalSpace,
-  verticalSpace,
-} from "../design-system/theme/semantic-spacing.stylex";
-import { Body, SmallBody } from "../design-system/typography";
-import { Text } from "../design-system/typography/text";
-import { directoryListingApi } from "../integrations/tanstack-query/api-directory-listings.functions";
-import {
-  formatAppTagCount,
-  formatAppTagLabel,
-  getAppTagDescription,
-} from "../lib/app-tag-metadata";
-import { getAppTagAccent, getAppTagEmoji } from "../lib/app-tag-visuals";
-import { getDirectoryListingSlug } from "../lib/directory-listing-slugs";
-import { getInitials } from "../lib/get-initials";
-import { getDirectoryListingHeroImageAlt } from "../lib/listing-copy";
-import { buildAppTagOgImageUrl, buildRouteOgMeta } from "../lib/og-meta";
-
-const sortOptions = [
-  { id: "popular", label: "Popular" },
-  { id: "newest", label: "Newest" },
-  { id: "alphabetical", label: "Alphabetical" },
-] as const;
+import { getAppTagSlug } from "../lib/app-tag-metadata";
+import { validateBrowseSearch } from "../lib/browse-listings";
 
+/** Legacy tag landing page — now `/apps?tag=<slug>`, which renders the same tag hero. */
 export const Route = createFileRoute("/_header-layout/apps/$tag")({
-  validateSearch: (
-    search,
-  ): { sort: "popular" | "newest" | "alphabetical" } => ({
-    sort:
-      search.sort === "newest"
-        ? "newest"
-        : search.sort === "alphabetical"
-          ? "alphabetical"
-          : "popular",
-  }),
-  loaderDeps: ({ search }) => ({
-    sort: search.sort,
-  }),
-  loader: async ({ context, params, deps }) => {
-    const data = await context.queryClient.ensureQueryData(
-      directoryListingApi.getAppsByTagPageQueryOptions({
-        tag: params.tag,
-        sort: deps.sort,
-      }),
-    );
-
-    if (!data) {
-      throw notFound();
-    }
-
-    return {
-      tag: params.tag,
-      ogTitle: `${formatAppTagLabel(data.tag)} apps | at-store`,
-      ogDescription: getAppTagDescription(data.tag),
-      ogImage: buildAppTagOgImageUrl({
-        tag: data.tag,
-        label: formatAppTagLabel(data.tag),
-        kind: "App Tag",
-        count: data.count,
-      }),
-    };
-  },
-  head: ({ loaderData }) =>
-    buildRouteOgMeta({
-      title: loaderData?.ogTitle ?? "App tag | at-store",
-      description:
-        loaderData?.ogDescription ||
-        "Explore listings grouped under this app workflow tag.",
-      image: loaderData?.ogImage,
-    }),
-  component: AppsTagPage,
-});
-
-const LinkLink = createLink(Link);
-
-const styles = stylex.create({
-  pageContent: {
-    gap: {
-      default: gap["6xl"],
-      [breakpoints.xl]: gap["7xl"],
-    },
-  },
-  listingTagline: {
-    flexGrow: 1,
-  },
-  page: {
-    paddingBottom: verticalSpace["10xl"],
-    paddingTop: verticalSpace["6xl"],
-  },
-  navLinks: {
-    flexWrap: "wrap",
-  },
-  sortSelect: {
-    flexGrow: {
-      default: 1,
-      [breakpoints.sm]: 0,
-    },
-    minWidth: "12rem",
-  },
-  listingLink: {
-    textDecoration: "none",
-    display: "block",
-    position: "relative",
-    zIndex: 1,
-    height: "100%",
-  },
-  listingLinkFeatured: {
-    zIndex: 0,
-  },
-  listingCard: {
-    boxSizing: "border-box",
-    height: "100%",
-    width: "100%",
-  },
-
-  listingCardBody: {
-    gap: gap["4xl"],
-    position: "relative",
-    height: "100%",
-    paddingBottom: verticalSpace["xl"],
-    paddingLeft: horizontalSpace["xl"],
-    paddingRight: horizontalSpace["xl"],
-    paddingTop: verticalSpace["xl"],
-  },
-  listingHeader: {
-    gap: gap["2xl"],
-    position: "relative",
-    zIndex: 1,
-  },
-  listingInfo: {
-    flexBasis: "0%",
-    flexGrow: "1",
-    flexShrink: "1",
-    minWidth: 0,
-  },
-  relatedSection: {
-    gap: gap["5xl"],
-    paddingTop: verticalSpace["6xl"],
-  },
-  relatedHeader: {
-    maxWidth: "44rem",
-  },
-  relatedDescription: {
-    maxWidth: "40rem",
-  },
-  relatedGrid: {
-    gap: gap["2xl"],
-    display: "grid",
-    gridTemplateColumns: {
-      default: "1fr",
-      [breakpoints.sm]: "repeat(2, minmax(0, 1fr))",
-      [breakpoints.md]: "repeat(4, minmax(0, 1fr))",
-    },
+  beforeLoad: ({ params, search }) => {
+    throw redirect({
+      to: "/apps",
+      search: {
+        tag: getAppTagSlug(params.tag.replaceAll("-", " ")),
+        sort: validateBrowseSearch(search).sort,
+      },
+      statusCode: 301,
+    });
   },
 });
-
-function AppsTagPage() {
-  const search = Route.useSearch();
-  const router = useRouter();
-  const { tag } = Route.useLoaderData();
-  const { data } = useSuspenseQuery(
-    directoryListingApi.getAppsByTagPageQueryOptions({
-      tag,
-      sort: search.sort,
-    }),
-  );
-  const { data: allGroups } = useSuspenseQuery(
-    directoryListingApi.getAppsByTagQueryOptions,
-  );
-
-  if (!data) {
-    throw notFound();
-  }
-
-  const relatedTags = getRelatedAppTagGroups(data, allGroups);
-
-  return (
-    <Page.Root variant="large" style={styles.page}>
-      <Flex direction="column" style={styles.pageContent}>
-        <Flex direction="column" gap="4xl">
-          <Flex gap="xl" style={styles.navLinks}>
-            <LinkLink to="/apps/tags">
-              <ChevronLeft />
-              All tags
-            </LinkLink>
-          </Flex>
-
-          <AppTagHero
-            eyebrow={formatAppTagCount(data.count)}
-            title={formatAppTagLabel(data.tag)}
-            description={getAppTagDescription(data.tag)}
-            accent={getAppTagAccent(data.tag)}
-            emojis={[getAppTagEmoji(data.tag)]}
-            action={
-              <Select
-                aria-label="Sort apps in tag"
-                items={sortOptions}
-                placeholder="Sort apps"
-                size="lg"
-                style={styles.sortSelect}
-                value={search.sort}
-                variant="secondary"
-                onChange={(key) => {
-                  if (
-                    key !== "popular" &&
-                    key !== "newest" &&
-                    key !== "alphabetical"
-                  ) {
-                    return;
-                  }
-
-                  void router.navigate({
-                    to: "/apps/$tag",
-                    params: { tag },
-                    search: { sort: key },
-                  });
-                }}
-              >
-                {(item) => <SelectItem>{item.label}</SelectItem>}
-              </Select>
-            }
-          />
-        </Flex>
-
-        <FeaturedListingGrid
-          items={data.listings}
-          getKey={(listing) => `${data.tag}-${listing.id}`}
-          canFeature={(listing) => Boolean(listing.heroImageUrl)}
-          renderItem={(listing, { featured }) => (
-            <AppTagListingCard featured={featured} listing={listing} />
-          )}
-        />
-
-        {relatedTags.length > 0 ? (
-          <RelatedTagsSection groups={relatedTags} />
-        ) : null}
-      </Flex>
-    </Page.Root>
-  );
-}
-
-function AppTagListingCard({
-  listing,
-  featured = false,
-}: {
-  listing: DirectoryListingCard;
-  featured?: boolean;
-}) {
-  return (
-    <RouterLink
-      to="/products/$productId"
-      params={{ productId: getDirectoryListingSlug(listing) }}
-      {...stylex.props(
-        styles.listingLink,
-        featured && styles.listingLinkFeatured,
-      )}
-    >
-      {featured ? (
-        listing.heroImageUrl ? (
-          <HeroImage
-            alt={getDirectoryListingHeroImageAlt(listing)}
-            glowIntensity={0.8}
-            src={listing.heroImageUrl}
-          />
-        ) : (
-          <FeaturedListingFallbackCard listing={listing} />
-        )
-      ) : (
-        <Card style={[styles.listingCard]}>
-          <Flex direction="column" style={[styles.listingCardBody]}>
-            <Flex gap="2xl" align="center" style={styles.listingHeader}>
-              <Avatar
-                alt={listing.name}
-                fallback={getInitials(listing.name)}
-                size="xl"
-                src={listing.iconUrl || undefined}
-              />
-              <Flex direction="column" gap="xl" style={styles.listingInfo}>
-                <Text size="xl" weight="semibold">
-                  {listing.name}
-                </Text>
-                <SmallBody variant="secondary">
-                  @
-                  {listing.productAccountHandle?.replace(/^@/, "") || "unknown"}
-                </SmallBody>
-              </Flex>
-            </Flex>
-            <Body variant="secondary" style={styles.listingTagline}>
-              {listing.tagline}
-            </Body>
-            <Flex align="center" justify="end" gap="lg">
-              <SmallBody variant="secondary">
-                {listing.rating == null ? "—" : listing.rating.toFixed(1)}
-              </SmallBody>
-              <StarRating
-                rating={listing.rating}
-                reviewCount={listing.reviewCount}
-                showReviewCount
-              />
-            </Flex>
-          </Flex>
-        </Card>
-      )}
-    </RouterLink>
-  );
-}
-
-function RelatedTagsSection({
-  groups,
-}: {
-  groups: Array<DirectoryAppTagGroup>;
-}) {
-  return (
-    <Flex direction="column" style={styles.relatedSection}>
-      <Flex direction="column" gap="4xl" style={styles.relatedHeader}>
-        <Text size="3xl" weight="semibold">
-          Related tags to explore
-        </Text>
-        <Body variant="secondary" style={styles.relatedDescription}>
-          Explore adjacent workflows and neighboring collections that share apps
-          with this tag.
-        </Body>
-      </Flex>
-      <Grid style={styles.relatedGrid}>
-        {groups.map((group) => (
-          <AppTagCard key={group.tag} tag={group} />
-        ))}
-      </Grid>
-    </Flex>
-  );
-}
-
-function getRelatedAppTagGroups(
-  currentGroup: DirectoryAppTagGroup,
-  groups: Array<DirectoryAppTagGroup>,
-) {
-  const currentListingIds = new Set(
-    currentGroup.listings.map((listing) => listing.id),
-  );
-
-  return groups
-    .filter((group) => group.tag !== currentGroup.tag)
-    .toSorted((left, right) => {
-      const leftOverlap = left.listings.reduce(
-        (count, listing) => count + Number(currentListingIds.has(listing.id)),
-        0,
-      );
-      const rightOverlap = right.listings.reduce(
-        (count, listing) => count + Number(currentListingIds.has(listing.id)),
-        0,
-      );
-
-      if (rightOverlap !== leftOverlap) {
-        return rightOverlap - leftOverlap;
-      }
-
-      if (right.count !== left.count) {
-        return right.count - left.count;
-      }
-
-      return left.tag.localeCompare(right.tag);
-    })
-    .slice(0, 4);
-}
diff --git a/src/routes/_header-layout.apps.all.tsx b/src/routes/_header-layout.apps.all.tsx
index a66df80..61a1da9 100644
--- a/src/routes/_header-layout.apps.all.tsx
+++ b/src/routes/_header-layout.apps.all.tsx
@@ -1,384 +1,14 @@
-import * as stylex from "@stylexjs/stylex";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import {
-  Link as RouterLink,
-  createFileRoute,
-  createLink,
-  useRouter,
-} from "@tanstack/react-router";
-import { Badge } from "#/design-system/badge";
-import { ChevronLeft } from "lucide-react";
-import { useMemo, useState } from "react";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
-import type { DirectoryListingCard } from "../integrations/tanstack-query/api-directory-listings.functions";
-
-import { AppTagHero } from "../components/AppTagHero";
-import { Avatar } from "../design-system/avatar";
-import { Card } from "../design-system/card";
-import { Flex } from "../design-system/flex";
-import { Grid } from "../design-system/grid";
-import { Link } from "../design-system/link";
-import { Page } from "../design-system/page";
-import { SearchField } from "../design-system/search-field";
-import { Select, SelectItem } from "../design-system/select";
-import { StarRating } from "../design-system/star-rating";
-import { breakpoints } from "../design-system/theme/media-queries.stylex";
-import {
-  gap,
-  horizontalSpace,
-  verticalSpace,
-} from "../design-system/theme/semantic-spacing.stylex";
-import { Body, SmallBody } from "../design-system/typography";
-import { Text } from "../design-system/typography/text";
-import { directoryListingApi } from "../integrations/tanstack-query/api-directory-listings.functions";
-import { formatAppTagLabel, getAppTagSlug } from "../lib/app-tag-metadata";
-import { getDirectoryListingSlug } from "../lib/directory-listing-slugs";
-import { getInitials } from "../lib/get-initials";
-import { buildRouteOgMeta } from "../lib/og-meta";
-
-const LinkLink = createLink(Link);
-
-const sortOptions = [
-  { id: "popular", label: "Trending" },
-  { id: "newest", label: "Newest" },
-  { id: "alphabetical", label: "Alphabetical" },
-] as const;
+import { validateBrowseSearch } from "../lib/browse-listings";
 
+/** Legacy "all apps" list — now the unfiltered `/apps` browse page. */
 export const Route = createFileRoute("/_header-layout/apps/all")({
-  validateSearch: (
-    search,
-  ): { sort: "popular" | "newest" | "alphabetical" } => ({
-    sort:
-      search.sort === "newest"
-        ? "newest"
-        : search.sort === "alphabetical"
-          ? "alphabetical"
-          : "popular",
-  }),
-  loaderDeps: ({ search }) => ({
-    sort: search.sort,
-  }),
-  loader: ({ context, deps }) =>
-    context.queryClient.ensureQueryData(
-      directoryListingApi.getAllAppsQueryOptions({
-        sort: deps.sort,
-      }),
-    ),
-  head: () =>
-    buildRouteOgMeta({
-      title: "All apps | at-store",
-      description:
-        "Browse the full Bluesky app catalog and filter by search, popularity, or newest listings.",
-    }),
-  component: AppsAllPage,
-});
-
-const styles = stylex.create({
-  page: {
-    paddingBottom: verticalSpace["10xl"],
-    paddingTop: verticalSpace["6xl"],
-  },
-  navLinks: {
-    flexWrap: "wrap",
-  },
-  searchField: {
-    flexGrow: 1,
-    maxWidth: "40rem",
-  },
-  resultsHeader: {
-    flexWrap: "wrap",
-    justifyContent: "space-between",
-  },
-  resultsActions: {
-    alignItems: "center",
-    flexWrap: "wrap",
-  },
-  resultCount: {
-    letterSpacing: "0.16em",
-    textTransform: "uppercase",
-  },
-  sortSelect: {
-    minWidth: "12rem",
-  },
-  listingGrid: {
-    gap: gap["xl"],
-    display: "grid",
-    gridTemplateColumns: {
-      default: "1fr",
-      [breakpoints.sm]: "repeat(2, minmax(0, 1fr))",
-      [breakpoints.lg]: "repeat(3, minmax(0, 1fr))",
-    },
-  },
-  listingLink: {
-    gap: gap["4xl"],
-    textDecoration: "none",
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-  },
-  listingCard: {
-    contentVisibility: "auto",
-    height: "100%",
-  },
-  listingCardBody: {
-    gap: gap["4xl"],
-    height: "100%",
-    paddingBottom: verticalSpace["4xl"],
-    paddingLeft: horizontalSpace["4xl"],
-    paddingRight: horizontalSpace["4xl"],
-    paddingTop: verticalSpace["4xl"],
-  },
-  listingHeader: {
-    gap: gap["2xl"],
-  },
-  listingInfo: {
-    flexBasis: "0%",
-    flexGrow: "1",
-    flexShrink: "1",
-    minWidth: 0,
-  },
-  listingTagline: {
-    flexGrow: 1,
-  },
-  listingFooter: {
-    alignItems: "center",
-  },
-  listingMainLink: {
-    textDecoration: "none",
-    color: "inherit",
-    display: "flex",
-    flexBasis: "0%",
-    flexDirection: "column",
-    flexGrow: "1",
-    flexShrink: "1",
-    minHeight: 0,
-  },
-  listingTags: {
-    flexWrap: "wrap",
-    rowGap: gap.sm,
-    maxWidth: "100%",
-  },
-  listingFooterRating: {
-    flexShrink: 0,
-  },
-  emptyState: {
-    gap: gap["lg"],
-    maxWidth: "40rem",
-  },
-  listingTagLink: {
-    textDecoration: "none",
+  beforeLoad: ({ search }) => {
+    throw redirect({
+      to: "/apps",
+      search: { sort: validateBrowseSearch(search).sort },
+      statusCode: 301,
+    });
   },
 });
-
-function AppsAllPage() {
-  const search = Route.useSearch();
-  const router = useRouter();
-  const { data: apps } = useSuspenseQuery(
-    directoryListingApi.getAllAppsQueryOptions({
-      sort: search.sort,
-    }),
-  );
-  const [query, setQuery] = useState("");
-  const normalizedQuery = query.trim().toLowerCase();
-
-  const filteredApps = useMemo(() => {
-    if (!normalizedQuery) {
-      return apps;
-    }
-
-    return apps.filter((listing) =>
-      [
-        listing.name,
-        listing.tagline,
-        listing.category,
-        listing.description,
-        ...listing.appTags,
-      ].some((value) => value.toLowerCase().includes(normalizedQuery)),
-    );
-  }, [apps, normalizedQuery]);
-
-  return (
-    <Page.Root variant="large" style={styles.page}>
-      <Flex direction="column" gap="7xl">
-        <Flex direction="column" gap="4xl">
-          <Flex gap="xl" justify="between" style={styles.navLinks}>
-            <LinkLink to="/home">
-              <ChevronLeft />
-              Home
-            </LinkLink>
-            <LinkLink to="/apps/tags">Browse by tag</LinkLink>
-          </Flex>
-
-          <AppTagHero
-            eyebrow={`${apps.length} curated app listings`}
-            title="Browse All Apps"
-            description="Scan the full Bluesky app catalog in one place, then narrow it down with search or jump into editorial collections by tag."
-          />
-        </Flex>
-
-        <Flex direction="column" gap="2xl">
-          <Flex align="center" gap="sm" style={styles.resultsHeader}>
-            <Flex
-              direction="row"
-              gap="2xl"
-              align="center"
-              style={styles.searchField}
-            >
-              <SearchField
-                aria-label="Search all apps"
-                onChange={setQuery}
-                placeholder="Search apps"
-                value={query}
-                variant="secondary"
-                size="lg"
-              />
-              <SmallBody style={styles.resultCount}>
-                {getResultsLabel(
-                  filteredApps.length,
-                  apps.length,
-                  normalizedQuery,
-                )}
-              </SmallBody>
-            </Flex>
-            <Flex gap="xl" style={styles.resultsActions}>
-              <Select
-                aria-label="Sort apps"
-                items={sortOptions}
-                placeholder="Sort apps"
-                size="lg"
-                style={styles.sortSelect}
-                value={search.sort}
-                variant="secondary"
-                onChange={(key) => {
-                  if (
-                    key !== "popular" &&
-                    key !== "newest" &&
-                    key !== "alphabetical"
-                  ) {
-                    return;
-                  }
-
-                  void router.navigate({
-                    to: "/apps/all",
-                    search: { sort: key },
-                  });
-                }}
-              >
-                {(item) => <SelectItem>{item.label}</SelectItem>}
-              </Select>
-            </Flex>
-          </Flex>
-
-          {filteredApps.length > 0 ? (
-            <Grid style={styles.listingGrid}>
-              {filteredApps.map((listing) => (
-                <AllAppsListingCard key={listing.id} listing={listing} />
-              ))}
-            </Grid>
-          ) : (
-            <Flex direction="column" style={styles.emptyState}>
-              <Text size="2xl" weight="semibold">
-                No apps matched your search
-              </Text>
-              <Body variant="secondary">
-                Try a different keyword, or browse the editorial collections to
-                explore by workflow instead.
-              </Body>
-            </Flex>
-          )}
-        </Flex>
-      </Flex>
-    </Page.Root>
-  );
-}
-
-function AllAppsListingCard({ listing }: { listing: DirectoryListingCard }) {
-  return (
-    <Card style={styles.listingCard}>
-      <Flex direction="column" style={styles.listingCardBody}>
-        <RouterLink
-          to="/products/$productId"
-          params={{ productId: getDirectoryListingSlug(listing) }}
-          {...stylex.props(styles.listingLink, styles.listingMainLink)}
-        >
-          <Flex gap="2xl" align="center" style={styles.listingHeader}>
-            <Avatar
-              alt={listing.name}
-              fallback={getInitials(listing.name)}
-              size="xl"
-              src={listing.iconUrl || undefined}
-            />
-            <Flex direction="column" gap="xl" style={styles.listingInfo}>
-              <Text size="xl" weight="semibold">
-                {listing.name}
-              </Text>
-              <Flex align="center" gap="lg">
-                <SmallBody variant="secondary">
-                  @
-                  {listing.productAccountHandle?.replace(/^@/, "") || "unknown"}
-                </SmallBody>
-              </Flex>
-            </Flex>
-          </Flex>
-
-          <Body variant="secondary" style={styles.listingTagline}>
-            {listing.tagline}
-          </Body>
-        </RouterLink>
-
-        <Flex
-          justify="between"
-          gap="xl"
-          align="start"
-          style={styles.listingFooter}
-        >
-          <Flex align="center" gap="sm" style={styles.listingTags}>
-            {listing.appTags.length > 0 ? (
-              listing.appTags.map((tag) => (
-                <RouterLink
-                  key={tag}
-                  to="/apps/$tag"
-                  params={{ tag: getAppTagSlug(tag) }}
-                  search={{ sort: "popular" }}
-                  {...stylex.props(styles.listingTagLink)}
-                >
-                  <Badge
-                    size="sm"
-                    variant="primary"
-                    style={styles.listingTagLink}
-                  >
-                    {formatAppTagLabel(tag)}
-                  </Badge>
-                </RouterLink>
-              ))
-            ) : (
-              <SmallBody variant="secondary">—</SmallBody>
-            )}
-          </Flex>
-          <Flex align="center" gap="sm" style={styles.listingFooterRating}>
-            <SmallBody variant="secondary">
-              {listing.rating == null ? "—" : listing.rating.toFixed(1)}
-            </SmallBody>
-            <StarRating
-              rating={listing.rating}
-              reviewCount={listing.reviewCount}
-              showReviewCount
-            />
-          </Flex>
-        </Flex>
-      </Flex>
-    </Card>
-  );
-}
-
-function getResultsLabel(
-  filteredCount: number,
-  totalCount: number,
-  hasQuery: string,
-) {
-  if (!hasQuery) {
-    return `${totalCount} apps`;
-  }
-
-  return `Showing ${filteredCount} of ${totalCount} apps`;
-}
diff --git a/src/routes/_header-layout.apps.index.tsx b/src/routes/_header-layout.apps.index.tsx
new file mode 100644
index 0000000..f312cfb
--- /dev/null
+++ b/src/routes/_header-layout.apps.index.tsx
@@ -0,0 +1,677 @@
+import * as stylex from "@stylexjs/stylex";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  Link as RouterLink,
+  createFileRoute,
+  createLink,
+} from "@tanstack/react-router";
+import { Heart, SearchX, SlidersHorizontal, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import type {
+  BrowseFacet,
+  BrowseFilters,
+  BrowseListing,
+  BrowseSearch,
+  BrowseSort,
+} from "../lib/browse-listings";
+
+import { BrowseFilterPanel } from "../components/BrowseFilterPanel";
+import { Avatar } from "../design-system/avatar";
+import { Badge } from "../design-system/badge";
+import { Button } from "../design-system/button";
+import { Card } from "../design-system/card";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+} from "../design-system/drawer";
+import {
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateDescription,
+  EmptyStateImage,
+  EmptyStateTitle,
+} from "../design-system/empty-state";
+import { Flex } from "../design-system/flex";
+import { Page } from "../design-system/page";
+import { Pagination } from "../design-system/pagination";
+import { SearchField } from "../design-system/search-field";
+import { Select, SelectItem } from "../design-system/select";
+import { StarRating } from "../design-system/star-rating";
+import { uiColor } from "../design-system/theme/color.stylex";
+import { breakpoints } from "../design-system/theme/media-queries.stylex";
+import {
+  gap,
+  horizontalSpace,
+  verticalSpace,
+} from "../design-system/theme/semantic-spacing.stylex";
+import { Body, Heading1, SmallBody } from "../design-system/typography";
+import { Text } from "../design-system/typography/text";
+import { directoryListingApi } from "../integrations/tanstack-query/api-directory-listings.functions";
+import {
+  formatAppTagLabel,
+  getAppTagDescription,
+  getAppTagSlug,
+} from "../lib/app-tag-metadata";
+import { getAppTagEmoji } from "../lib/app-tag-visuals";
+import {
+  BROWSE_PAGE_SIZE,
+  BROWSE_SORTS,
+  BROWSE_SORT_LABELS,
+  TOP_LEVEL_APPS_CATEGORY,
+  buildBrowseFacets,
+  clearBrowseFilters,
+  countActiveBrowseFilters,
+  getBrowseCategoryLabel,
+  getBrowseFilterValueLabel,
+  getBrowseFilters,
+  listingMatchesFilters,
+  sortBrowseListings,
+  toggleBrowseFilter,
+  validateBrowseSearch,
+} from "../lib/browse-listings";
+import { getDirectoryCategoryOption } from "../lib/directory-categories";
+import { getInitials } from "../lib/get-initials";
+import { buildAppTagOgImageUrl, buildRouteOgMeta } from "../lib/og-meta";
+
+const BadgeLink = createLink(Badge);
+
+const QUERY_DEBOUNCE_MS = 250;
+
+const sortOptions = BROWSE_SORTS.map((id) => ({
+  id,
+  label: BROWSE_SORT_LABELS[id],
+}));
+
+/** When the only filter is a single tag, find the stored tag text for its slug. */
+function getSingleTagPreset(
+  search: BrowseSearch,
+  listings: ReadonlyArray<BrowseListing>,
+) {
+  const filters = getBrowseFilters(search);
+  if (
+    filters.query ||
+    filters.tags.length !== 1 ||
+    countActiveBrowseFilters(filters) !== 1
+  ) {
+    return null;
+  }
+  const slug = filters.tags[0];
+  const matching = listings.filter((listing) =>
+    listing.appTags.some((tag) => getAppTagSlug(tag) === slug),
+  );
+  const tag = matching[0]?.appTags.find((t) => getAppTagSlug(t) === slug);
+  return tag ? { tag, count: matching.length } : null;
+}
+
+function getSingleCategoryPreset(search: BrowseSearch) {
+  const filters = getBrowseFilters(search);
+  if (
+    filters.query ||
+    filters.categories.length !== 1 ||
+    countActiveBrowseFilters(filters) !== 1
+  ) {
+    return null;
+  }
+  const id = filters.categories[0];
+  if (!id || id === TOP_LEVEL_APPS_CATEGORY) {
+    return null;
+  }
+  return getDirectoryCategoryOption(id);
+}
+
+export const Route = createFileRoute("/_header-layout/apps/")({
+  validateSearch: validateBrowseSearch,
+  loaderDeps: ({ search }) => ({ tag: search.tag, in: search.in }),
+  loader: async ({ context, deps }) => {
+    const listings = await context.queryClient.ensureQueryData(
+      directoryListingApi.getBrowseListingsQueryOptions,
+    );
+
+    const tagPreset = getSingleTagPreset(deps, listings);
+    if (tagPreset) {
+      const label = formatAppTagLabel(tagPreset.tag);
+      return {
+        ogTitle: `${label} apps | at-store`,
+        ogDescription: getAppTagDescription(tagPreset.tag),
+        ogImage: buildAppTagOgImageUrl({
+          tag: tagPreset.tag,
+          label,
+          kind: "App Tag",
+          count: tagPreset.count,
+        }),
+      };
+    }
+
+    const categoryPreset = getSingleCategoryPreset(deps);
+    if (categoryPreset) {
+      return {
+        ogTitle: `${categoryPreset.label} | at-store`,
+        ogDescription: categoryPreset.description,
+        ogImage: undefined,
+      };
+    }
+
+    return {
+      ogTitle: "Browse apps | at-store",
+      ogDescription:
+        "Every app, client, feed and developer tool on the Atmosphere in one list. Filter by category, tag, shared data, rating and more.",
+      ogImage: undefined,
+    };
+  },
+  head: ({ loaderData }) =>
+    buildRouteOgMeta({
+      title: loaderData?.ogTitle ?? "Browse apps | at-store",
+      description:
+        loaderData?.ogDescription ??
+        "Browse every app on the Atmosphere with filters.",
+      image: loaderData?.ogImage,
+    }),
+  component: BrowseAppsPage,
+});
+
+const styles = stylex.create({
+  page: {
+    paddingBottom: verticalSpace["10xl"],
+    paddingTop: verticalSpace["6xl"],
+  },
+  layout: {
+    alignItems: "start",
+    columnGap: gap["7xl"],
+    display: "grid",
+    gridTemplateColumns: {
+      default: "minmax(0, 1fr)",
+      [breakpoints.lg]: "16rem minmax(0, 1fr)",
+    },
+    rowGap: gap["4xl"],
+  },
+  sidebar: {
+    display: {
+      default: "none",
+      [breakpoints.lg]: "block",
+    },
+    position: "sticky",
+    maxHeight: "calc(100vh - 6rem)",
+    overflowY: "auto",
+    top: verticalSpace["6xl"],
+  },
+  mobileFilters: {
+    display: {
+      default: "block",
+      [breakpoints.lg]: "none",
+    },
+  },
+  toolbar: {
+    flexWrap: "wrap",
+  },
+  searchField: {
+    flexBasis: "16rem",
+    flexGrow: 1,
+  },
+  sortSelect: {
+    minWidth: "12rem",
+  },
+  chips: {
+    flexWrap: "wrap",
+  },
+  resultCount: {
+    color: uiColor.text1,
+  },
+  row: {
+    contentVisibility: "auto",
+  },
+  rowBody: {
+    alignItems: "flex-start",
+    columnGap: gap["3xl"],
+    display: "grid",
+    gridTemplateColumns: {
+      default: "auto minmax(0, 1fr)",
+      [breakpoints.md]: "auto minmax(0, 1fr) auto",
+    },
+    rowGap: gap["md"],
+    paddingBottom: verticalSpace["3xl"],
+    paddingLeft: horizontalSpace["3xl"],
+    paddingRight: horizontalSpace["3xl"],
+    paddingTop: verticalSpace["3xl"],
+  },
+  rowLink: {
+    textDecoration: {
+      default: "none",
+      ":hover": "underline",
+    },
+    color: "inherit",
+  },
+  rowMeta: {
+    flexWrap: "wrap",
+    rowGap: gap["sm"],
+  },
+  badgeLink: {
+    textDecoration: "none",
+  },
+  rowStats: {
+    alignItems: {
+      default: "center",
+      [breakpoints.md]: "flex-end",
+    },
+    columnGap: gap["2xl"],
+    display: "flex",
+    flexDirection: {
+      default: "row",
+      [breakpoints.md]: "column",
+    },
+    flexWrap: "wrap",
+    gridColumnEnd: {
+      default: "span 2",
+      [breakpoints.md]: "auto",
+    },
+    gridColumnStart: {
+      default: "1",
+      [breakpoints.md]: "auto",
+    },
+    rowGap: gap["sm"],
+    whiteSpace: "nowrap",
+  },
+  statLine: {
+    gap: gap["xs"],
+    alignItems: "center",
+    color: uiColor.text1,
+    display: "inline-flex",
+  },
+  emptyState: {
+    padding: verticalSpace["10xl"],
+  },
+});
+
+function BrowseAppsPage() {
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const { data: listings } = useSuspenseQuery(
+    directoryListingApi.getBrowseListingsQueryOptions,
+  );
+
+  const filters = useMemo(() => getBrowseFilters(search), [search]);
+  const sort: BrowseSort = search.sort ?? "popular";
+
+  const results = useMemo(
+    () =>
+      sortBrowseListings(
+        listings.filter((listing) => listingMatchesFilters(listing, filters)),
+        sort,
+      ),
+    [listings, filters, sort],
+  );
+  const facets = useMemo(
+    () => buildBrowseFacets(listings, filters),
+    [listings, filters],
+  );
+
+  const totalPages = Math.max(1, Math.ceil(results.length / BROWSE_PAGE_SIZE));
+  const page = Math.min(search.page ?? 1, totalPages);
+  const pageResults = results.slice(
+    (page - 1) * BROWSE_PAGE_SIZE,
+    page * BROWSE_PAGE_SIZE,
+  );
+
+  const toggleFilter = (facet: BrowseFacet, value: string) => {
+    void navigate({
+      search: (prev) => toggleBrowseFilter(prev, facet, value),
+      resetScroll: false,
+    });
+  };
+  const clearFilters = () => {
+    void navigate({
+      search: (prev) => clearBrowseFilters(prev),
+      resetScroll: false,
+    });
+  };
+
+  const activeFilterCount = countActiveBrowseFilters(filters);
+  const filterPanel = (
+    <BrowseFilterPanel
+      facets={facets}
+      filters={filters}
+      onToggle={toggleFilter}
+    />
+  );
+
+  return (
+    <Page.Root variant="large" style={styles.page}>
+      <Flex direction="column" gap="7xl">
+        <BrowseHeader />
+
+        <div {...stylex.props(styles.layout)}>
+          <aside aria-label="Filters" {...stylex.props(styles.sidebar)}>
+            {filterPanel}
+          </aside>
+
+          <Flex direction="column" gap="2xl">
+            <Flex align="center" gap="xl" style={styles.toolbar}>
+              <div {...stylex.props(styles.searchField)}>
+                <BrowseQueryField query={search.q ?? ""} />
+              </div>
+              <div {...stylex.props(styles.mobileFilters)}>
+                <Drawer
+                  direction="left"
+                  trigger={
+                    <Button variant="secondary" size="lg">
+                      <SlidersHorizontal />
+                      {activeFilterCount > 0
+                        ? `Filters (${activeFilterCount})`
+                        : "Filters"}
+                    </Button>
+                  }
+                >
+                  <DrawerHeader>Filters</DrawerHeader>
+                  <DrawerBody>{filterPanel}</DrawerBody>
+                  <DrawerFooter>
+                    <Flex gap="md" justify="between">
+                      <Button
+                        variant="tertiary"
+                        isDisabled={activeFilterCount === 0}
+                        onPress={clearFilters}
+                      >
+                        Clear all
+                      </Button>
+                      <Button slot="close">
+                        {`Show ${results.length} ${results.length === 1 ? "app" : "apps"}`}
+                      </Button>
+                    </Flex>
+                  </DrawerFooter>
+                </Drawer>
+              </div>
+              <Select
+                aria-label="Sort apps"
+                items={sortOptions}
+                size="lg"
+                style={styles.sortSelect}
+                value={sort}
+                variant="secondary"
+                onChange={(key) => {
+                  const next = BROWSE_SORTS.find((id) => id === key);
+                  if (!next) return;
+                  void navigate({
+                    search: (prev) => ({
+                      ...prev,
+                      sort: next === "popular" ? undefined : next,
+                      page: undefined,
+                    }),
+                    resetScroll: false,
+                  });
+                }}
+              >
+                {(item) => <SelectItem>{item.label}</SelectItem>}
+              </Select>
+            </Flex>
+
+            <ActiveFilterChips
+              filters={filters}
+              listings={listings}
+              onRemove={toggleFilter}
+              onClear={clearFilters}
+            />
+
+            <SmallBody style={styles.resultCount}>
+              {results.length === listings.length
+                ? `${listings.length} apps`
+                : `${results.length} of ${listings.length} apps`}
+            </SmallBody>
+
+            {pageResults.length > 0 ? (
+              <Flex direction="column" gap="xl">
+                {pageResults.map((listing) => (
+                  <BrowseListingRow key={listing.id} listing={listing} />
+                ))}
+              </Flex>
+            ) : (
+              <EmptyState size="lg" style={styles.emptyState}>
+                <EmptyStateImage>
+                  <SearchX size={64} strokeWidth={2} />
+                </EmptyStateImage>
+                <EmptyStateTitle>No apps match these filters</EmptyStateTitle>
+                <EmptyStateDescription>
+                  Try removing a filter or searching for something broader.
+                </EmptyStateDescription>
+                <EmptyStateActions>
+                  <Button
+                    variant="secondary"
+                    onPress={() =>
+                      void navigate({ search: {}, resetScroll: false })
+                    }
+                  >
+                    Clear search and filters
+                  </Button>
+                </EmptyStateActions>
+              </EmptyState>
+            )}
+
+            {totalPages > 1 ? (
+              <Pagination
+                totalPages={totalPages}
+                selectedPage={page}
+                onSelectedPageChange={(next) => {
+                  void navigate({
+                    search: (prev) => ({
+                      ...prev,
+                      page: next > 1 ? next : undefined,
+                    }),
+                  });
+                }}
+              />
+            ) : null}
+          </Flex>
+        </div>
+      </Flex>
+    </Page.Root>
+  );
+}
+
+function BrowseHeader() {
+  return (
+    <Flex direction="column" gap="2xl">
+      <Heading1>Browse apps</Heading1>
+      <Body variant="secondary">
+        Every app, client and feed on the Atmosphere in one list. Narrow it down
+        with the filters.
+      </Body>
+    </Flex>
+  );
+}
+
+/** Text search kept in the URL (`?q=`), debounced so typing doesn't spam history. */
+function BrowseQueryField({ query }: { query: string }) {
+  const navigate = Route.useNavigate();
+  const [draft, setDraft] = useState(query);
+
+  useEffect(() => {
+    setDraft(query);
+  }, [query]);
+
+  useEffect(() => {
+    const next = draft.trim();
+    if (next === query) return;
+    const timeout = setTimeout(() => {
+      void navigate({
+        search: (prev) => ({ ...prev, q: next || undefined, page: undefined }),
+        replace: true,
+        resetScroll: false,
+      });
+    }, QUERY_DEBOUNCE_MS);
+    return () => clearTimeout(timeout);
+  }, [draft, query, navigate]);
+
+  return (
+    <SearchField
+      aria-label="Search apps"
+      placeholder="Search apps, tags, developers…"
+      value={draft}
+      onChange={setDraft}
+      size="lg"
+      variant="secondary"
+    />
+  );
+}
+
+function ActiveFilterChips({
+  filters,
+  listings,
+  onRemove,
+  onClear,
+}: {
+  filters: BrowseFilters;
+  listings: ReadonlyArray<BrowseListing>;
+  onRemove: (facet: BrowseFacet, value: string) => void;
+  onClear: () => void;
+}) {
+  const chips: Array<{ facet: BrowseFacet; value: string }> = [
+    ...filters.categories.map((value) => ({
+      facet: "categories" as const,
+      value,
+    })),
+    ...filters.tags.map((value) => ({ facet: "tags" as const, value })),
+    ...filters.data.map((value) => ({ facet: "data" as const, value })),
+    ...(filters.minRating == null
+      ? []
+      : [{ facet: "minRating" as const, value: String(filters.minRating) }]),
+    ...filters.extras.map((value) => ({ facet: "extras" as const, value })),
+  ];
+
+  if (chips.length === 0) {
+    return null;
+  }
+
+  return (
+    <Flex align="center" gap="md" style={styles.chips}>
+      {chips.map(({ facet, value }) => {
+        const label = getBrowseFilterValueLabel(facet, value, listings);
+        return (
+          <Button
+            key={`${facet}:${value}`}
+            size="sm"
+            variant="secondary"
+            aria-label={`Remove filter: ${label}`}
+            onPress={() => onRemove(facet, value)}
+          >
+            {label}
+            <X />
+          </Button>
+        );
+      })}
+      <Button size="sm" variant="tertiary" onPress={onClear}>
+        Clear all
+      </Button>
+    </Flex>
+  );
+}
+
+const relativeTimeFormat = new Intl.RelativeTimeFormat("en", {
+  numeric: "auto",
+});
+
+function formatUpdatedAgo(iso: string) {
+  const days = Math.round((Date.parse(iso) - Date.now()) / 86_400_000);
+  if (days > -30) return relativeTimeFormat.format(days, "day");
+  if (days > -365) {
+    return relativeTimeFormat.format(Math.round(days / 30), "month");
+  }
+  return relativeTimeFormat.format(Math.round(days / 365), "year");
+}
+
+function addFilter(search: BrowseSearch, facet: BrowseFacet, value: string) {
+  const filters = getBrowseFilters(search);
+  const selected =
+    facet === "categories"
+      ? filters.categories
+      : facet === "tags"
+        ? filters.tags
+        : [];
+  return selected.includes(value)
+    ? search
+    : toggleBrowseFilter(search, facet, value);
+}
+
+function BrowseListingRow({ listing }: { listing: BrowseListing }) {
+  const productParams = { productId: listing.slug };
+  const handle = listing.productAccountHandle?.replace(/^@/, "");
+  // Top-level apps are their own `apps/<name>` category, so only badge ecosystem tools and protocol.
+  const category = listing.categorySlugs.find(
+    (slug) => !(slug.startsWith("apps/") && slug.split("/").length === 2),
+  );
+
+  return (
+    <Card style={styles.row}>
+      <div {...stylex.props(styles.rowBody)}>
+        <RouterLink to="/products/$productId" params={productParams}>
+          <Avatar
+            alt={listing.name}
+            fallback={getInitials(listing.name)}
+            size="xl"
+            src={listing.iconUrl || undefined}
+          />
+        </RouterLink>
+
+        <Flex direction="column" gap="md">
+          <Flex align="center" gap="md" style={styles.rowMeta}>
+            <RouterLink
+              to="/products/$productId"
+              params={productParams}
+              {...stylex.props(styles.rowLink)}
+            >
+              <Text size="lg" weight="semibold">
+                {listing.name}
+              </Text>
+            </RouterLink>
+            {handle ? (
+              <SmallBody variant="secondary">@{handle}</SmallBody>
+            ) : null}
+          </Flex>
+          <Body variant="secondary">{listing.tagline}</Body>
+          <Flex align="center" gap="sm" style={styles.rowMeta}>
+            {category ? (
+              <BadgeLink
+                to="/apps"
+                search={(prev: BrowseSearch) =>
+                  addFilter(prev, "categories", category)
+                }
+                size="sm"
+                style={styles.badgeLink}
+              >
+                {getBrowseCategoryLabel(category)}
+              </BadgeLink>
+            ) : null}
+            {listing.appTags.map((tag) => (
+              <BadgeLink
+                key={tag}
+                to="/apps"
+                search={(prev: BrowseSearch) =>
+                  addFilter(prev, "tags", getAppTagSlug(tag))
+                }
+                size="sm"
+                variant="primary"
+                style={styles.badgeLink}
+              >
+                {getAppTagEmoji(tag)} {formatAppTagLabel(tag)}
+              </BadgeLink>
+            ))}
+          </Flex>
+        </Flex>
+
+        <div {...stylex.props(styles.rowStats)}>
+          <StarRating
+            rating={listing.rating}
+            reviewCount={listing.reviewCount}
+            showReviewCount
+          />
+          <SmallBody style={styles.statLine}>
+            <Heart size={12} aria-hidden />
+            {`${listing.favoriteCount} ${listing.favoriteCount === 1 ? "favorite" : "favorites"}`}
+          </SmallBody>
+          <SmallBody variant="secondary">
+            Updated {formatUpdatedAgo(listing.updatedAt)}
+          </SmallBody>
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/routes/_header-layout.apps.lexicons.tsx b/src/routes/_header-layout.apps.lexicons.tsx
index 962a03c..444ccf9 100644
--- a/src/routes/_header-layout.apps.lexicons.tsx
+++ b/src/routes/_header-layout.apps.lexicons.tsx
@@ -290,9 +290,7 @@ function AppsLexiconsHubPage() {
               All tags
             </LinkLink>
 
-            <LinkLink to="/apps/all" search={{ sort: "popular" }}>
-              All apps
-            </LinkLink>
+            <LinkLink to="/apps">All apps</LinkLink>
           </Flex>
 
           <AppTagHero
diff --git a/src/routes/_header-layout.apps.tags.tsx b/src/routes/_header-layout.apps.tags.tsx
index 2d2d3cc..59be0e6 100644
--- a/src/routes/_header-layout.apps.tags.tsx
+++ b/src/routes/_header-layout.apps.tags.tsx
@@ -77,9 +77,7 @@ function AppsAllPage() {
               Home
             </LinkLink>
 
-            <LinkLink to="/apps/all" search={{ sort: "popular" }}>
-              All apps
-            </LinkLink>
+            <LinkLink to="/apps">All apps</LinkLink>
           </Flex>
 
           <AppTagHero
diff --git a/src/routes/_header-layout.categories.$categoryId.tsx b/src/routes/_header-layout.categories.$categoryId.tsx
index 67198f5..6e69344 100644
--- a/src/routes/_header-layout.categories.$categoryId.tsx
+++ b/src/routes/_header-layout.categories.$categoryId.tsx
@@ -1,699 +1,18 @@
-import type { LucideIcon } from "lucide-react";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
-import * as stylex from "@stylexjs/stylex";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import {
-  Link as RouterLink,
-  createFileRoute,
-  createLink,
-  notFound,
-  useRouter,
-} from "@tanstack/react-router";
-import { HeroImage } from "#/components/HeroImage";
-import { StarRating } from "#/design-system/star-rating";
-import {
-  AppWindow,
-  BarChart3,
-  ChevronLeft,
-  Code2,
-  RadioTower,
-} from "lucide-react";
-
-import type {
-  DirectoryCategoryPageData,
-  DirectoryListingCard,
-} from "../integrations/tanstack-query/api-directory-listings.functions";
-import type { AppTagAccent } from "../lib/app-tag-visuals";
-import type {
-  DirectoryCategoryAccent,
-  DirectoryCategoryTreeNode,
-} from "../lib/directory-categories";
-
-import { AppTagHero } from "../components/AppTagHero";
-import { EcosystemCategoryCard } from "../components/EcosystemCategoryCard";
-import { FeaturedListingFallbackCard } from "../components/FeaturedListingFallbackCard";
-import { FeaturedListingGrid } from "../components/FeaturedListingGrid";
-import { Avatar } from "../design-system/avatar";
-import { Card } from "../design-system/card";
-import { Flex } from "../design-system/flex";
-import { Grid } from "../design-system/grid";
-import { Link } from "../design-system/link";
-import { Page } from "../design-system/page";
-import { Select, SelectItem } from "../design-system/select";
-import { uiColor } from "../design-system/theme/color.stylex";
-import { blue } from "../design-system/theme/colors/blue.stylex";
-import { indigo as green } from "../design-system/theme/colors/indigo.stylex";
-import { pink } from "../design-system/theme/colors/pink.stylex";
-import { purple } from "../design-system/theme/colors/purple.stylex";
-import { breakpoints } from "../design-system/theme/media-queries.stylex";
-import { radius } from "../design-system/theme/radius.stylex";
-import {
-  gap,
-  horizontalSpace,
-  verticalSpace,
-} from "../design-system/theme/semantic-spacing.stylex";
-import { shadow } from "../design-system/theme/shadow.stylex";
-import { Body, Heading1, SmallBody } from "../design-system/typography";
-import { Text } from "../design-system/typography/text";
-import { directoryListingApi } from "../integrations/tanstack-query/api-directory-listings.functions";
-import {
-  getAppSegmentFromEcosystemRootCategoryId,
-  getDirectoryBrowsePath,
-} from "../lib/directory-categories";
-import { getDirectoryListingSlug } from "../lib/directory-listing-slugs";
-import { getEcosystemCategoryEmoji } from "../lib/ecosystem-category-emoji";
-import { getInitials } from "../lib/get-initials";
-import { getDirectoryListingHeroImageAlt } from "../lib/listing-copy";
-import { buildAppTagOgImageUrl, buildRouteOgMeta } from "../lib/og-meta";
-
-const AppLink = createLink(Link);
-const sortOptions = [
-  { id: "popular", label: "Popular" },
-  { id: "newest", label: "Newest" },
-  { id: "alphabetical", label: "Alphabetical" },
-] as const;
+import { validateBrowseSearch } from "../lib/browse-listings";
+import { getDirectoryCategoryOption } from "../lib/directory-categories";
 
+/** Legacy category page — now the `/apps?in=<category>` filter (category plus descendants). */
 export const Route = createFileRoute("/_header-layout/categories/$categoryId")({
-  validateSearch: (
-    search,
-  ): { sort: "popular" | "newest" | "alphabetical" } => ({
-    sort:
-      search.sort === "newest"
-        ? "newest"
-        : search.sort === "alphabetical"
-          ? "alphabetical"
-          : "popular",
-  }),
-  loaderDeps: ({ search }) => ({
-    sort: search.sort,
-  }),
-  loader: async ({ context, params, deps }) => {
-    const data = await context.queryClient.ensureQueryData(
-      directoryListingApi.getDirectoryCategoryPageQueryOptions({
-        categoryId: params.categoryId,
-        sort: deps.sort,
-      }),
-    );
-
-    if (!data) {
-      throw notFound();
-    }
-
-    const category = data.category;
-
-    return {
-      categoryId: params.categoryId,
-      ogTitle: `${category.label} | at-store`,
-      ogDescription: category.description,
-      /**
-       * OG card mirrors the `AppTagCard` look — accent + emoji from the category label via
-       * `/og/tag` (Satori). In-app hero uses the same accent family + `getEcosystemCategoryEmoji`.
-       */
-      ogImage: buildAppTagOgImageUrl({
-        tag: category.label,
-        label: category.label,
-        kind: "Category",
-        count: data.listings.length,
-      }),
-    };
-  },
-  head: ({ loaderData }) =>
-    buildRouteOgMeta({
-      title: loaderData?.ogTitle ?? "Category | at-store",
-      description:
-        loaderData?.ogDescription ||
-        "Browse listings assigned to this directory category.",
-      image: loaderData?.ogImage,
-    }),
-  component: CategoryPage,
-});
-
-const styles = stylex.create({
-  listingAvatar: {
-    borderRadius: radius["lg"],
-  },
-  page: {
-    paddingBottom: verticalSpace["10xl"],
-    paddingTop: verticalSpace["6xl"],
-  },
-  pageContent: {
-    gap: {
-      default: gap["6xl"],
-      [breakpoints.xl]: gap["7xl"],
-    },
-  },
-  navLinks: {
-    flexWrap: "wrap",
-  },
-  sortSelect: {
-    flexGrow: {
-      default: 1,
-      [breakpoints.sm]: 0,
-    },
-    minWidth: "12rem",
-  },
-  eyebrow: {
-    letterSpacing: "0.16em",
-    textTransform: "uppercase",
-  },
-  childGrid: {
-    gap: gap["2xl"],
-    display: "grid",
-    gridTemplateColumns: {
-      default: "1fr",
-      [breakpoints.sm]: "repeat(2, minmax(0, 1fr))",
-      [breakpoints.lg]: "repeat(3, minmax(0, 1fr))",
-    },
-  },
-  childCardLink: {
-    textDecoration: "none",
-    display: "block",
-  },
-  childCard: {
-    borderRadius: radius.xl,
-    borderStyle: "solid",
-    borderWidth: 1,
-    cornerShape: "squircle",
-    gap: gap["3xl"],
-    boxShadow: shadow.lg,
-    color: "white",
-    display: "flex",
-    flexDirection: "column",
-    minHeight: "12rem",
-    paddingBottom: verticalSpace["4xl"],
-    paddingLeft: horizontalSpace["4xl"],
-    paddingRight: horizontalSpace["4xl"],
-    paddingTop: verticalSpace["4xl"],
-  },
-  childIcon: {
-    borderColor: `color-mix(in srgb, ${uiColor.border1} 65%, transparent)`,
-    borderRadius: radius.md,
-    borderStyle: "solid",
-    borderWidth: 1,
-    alignItems: "center",
-    backdropFilter: "blur(10px)",
-    backgroundColor: `color-mix(in srgb, ${uiColor.component1} 36%, transparent)`,
-    display: "inline-flex",
-    justifyContent: "center",
-    height: "2.5rem",
-    width: "2.5rem",
-  },
-  childDescription: {
-    color: uiColor.textContrast,
-  },
-  relatedSection: {
-    gap: gap["5xl"],
-    paddingTop: verticalSpace["6xl"],
-  },
-  relatedHeader: {
-    maxWidth: "44rem",
-  },
-  relatedDescription: {
-    maxWidth: "40rem",
-  },
-  listingLink: {
-    textDecoration: "none",
-    display: "block",
-    position: "relative",
-    zIndex: 1,
-    height: "100%",
-  },
-  listingLinkFeatured: {
-    zIndex: 0,
-  },
-  listingCard: {
-    borderRadius: radius["2xl"],
-    boxSizing: "border-box",
-    height: "100%",
-    paddingBottom: verticalSpace["2xl"],
-    paddingLeft: horizontalSpace["2xl"],
-    paddingRight: horizontalSpace["2xl"],
-    paddingTop: verticalSpace["2xl"],
-    width: "100%",
-  },
-  listingCardBody: {
-    gap: gap["4xl"],
-    position: "relative",
-    height: "100%",
-    paddingBottom: verticalSpace["xl"],
-    paddingLeft: horizontalSpace["xl"],
-    paddingRight: horizontalSpace["xl"],
-    paddingTop: verticalSpace["xl"],
-  },
-  listingHeader: {
-    gap: gap["2xl"],
-    position: "relative",
-    zIndex: 1,
-  },
-  listingInfo: {
-    flexBasis: "0%",
-    flexGrow: "1",
-    flexShrink: "1",
-    minWidth: 0,
-  },
-  listingTagline: {
-    flexGrow: 1,
-  },
-  featuredImageFrame: {
-    inset: 0,
-    objectFit: "cover",
-    position: "absolute",
-    height: "100%",
-    width: "100%",
-  },
-  emptyState: {
-    gap: gap["lg"],
-    maxWidth: "40rem",
-  },
-  softBlueSurface: {
-    borderColor: blue.border1,
-    backgroundImage: `linear-gradient(135deg, ${blue.border2} 0%, ${blue.solid1} 100%)`,
-  },
-  softPinkSurface: {
-    borderColor: pink.border1,
-    backgroundImage: `linear-gradient(135deg, ${pink.border2} 0%, ${pink.solid1} 100%)`,
-  },
-  softPurpleSurface: {
-    borderColor: purple.border1,
-    backgroundImage: `linear-gradient(135deg, ${purple.border2} 0%, ${purple.solid1} 100%)`,
-  },
-  softGreenSurface: {
-    borderColor: green.border1,
-    backgroundImage: `linear-gradient(135deg, ${green.border2} 0%, ${green.solid1} 100%)`,
+  beforeLoad: ({ params, search }) => {
+    throw redirect({
+      to: "/apps",
+      search: {
+        in: getDirectoryCategoryOption(params.categoryId)?.id,
+        sort: validateBrowseSearch(search).sort,
+      },
+      statusCode: 301,
+    });
   },
 });
-
-function CategoryPage() {
-  const search = Route.useSearch();
-  const router = useRouter();
-  const { categoryId } = Route.useLoaderData();
-  const { data } = useSuspenseQuery(
-    directoryListingApi.getDirectoryCategoryPageQueryOptions({
-      categoryId,
-      sort: search.sort,
-    }),
-  );
-  const { data: categoryTree } = useSuspenseQuery(
-    directoryListingApi.getDirectoryCategoryTreeQueryOptions,
-  );
-
-  if (!data) {
-    throw notFound();
-  }
-
-  const category = data.category;
-  const browsePath = getDirectoryBrowsePath(category.id);
-  const [, AppName] = category.pathLabels;
-  const appSegment =
-    category.pathIds[0] === "apps" && category.pathIds[1]
-      ? getAppSegmentFromEcosystemRootCategoryId(
-          `${category.pathIds[0]}/${category.pathIds[1]}`,
-        )
-      : null;
-  const otherAppCategories = getOtherAppCategories(data, categoryTree);
-
-  return (
-    <Page.Root variant="large" style={styles.page}>
-      <Flex direction="column" style={styles.pageContent}>
-        <Flex direction="column" gap="4xl">
-          <Flex gap="xl" style={styles.navLinks}>
-            {appSegment ? (
-              <AppLink to="/ecosystems/$app" params={{ app: appSegment }}>
-                <ChevronLeft />
-                Back to {AppName} Ecosystem
-              </AppLink>
-            ) : (
-              <AppLink to={browsePath as never}>
-                <ChevronLeft />
-                Back to categories
-              </AppLink>
-            )}
-          </Flex>
-
-          <AppTagHero
-            eyebrow={formatCount(category.count)}
-            title={category.label}
-            description={category.description}
-            accent={mapCategoryAccentToTagAccent(category.accent)}
-            emojis={buildCategoryHeroEmojis(category)}
-            action={
-              <Select
-                aria-label="Sort category listings"
-                items={sortOptions}
-                placeholder="Sort listings"
-                size="lg"
-                style={styles.sortSelect}
-                value={search.sort}
-                variant="secondary"
-                onChange={(key) => {
-                  if (
-                    key !== "popular" &&
-                    key !== "newest" &&
-                    key !== "alphabetical"
-                  ) {
-                    return;
-                  }
-
-                  void router.navigate({
-                    to: "/categories/$categoryId",
-                    params: { categoryId },
-                    search: { sort: key },
-                  });
-                }}
-              >
-                {(item) => <SelectItem>{item.label}</SelectItem>}
-              </Select>
-            }
-          />
-        </Flex>
-
-        {data.listings.length > 0 ? (
-          <FeaturedListingGrid
-            items={data.listings}
-            getKey={(listing) => listing.id}
-            canFeature={(listing) => Boolean(listing.heroImageUrl)}
-            renderItem={(listing, { featured }) => (
-              <CategoryListingCard featured={featured} listing={listing} />
-            )}
-          />
-        ) : (
-          <Flex direction="column" style={styles.emptyState}>
-            <Body variant="secondary">
-              No listings are assigned to this branch yet.
-            </Body>
-            {import.meta.env.DEV ? (
-              <AppLink to={"/dev/categories" as never}>
-                Open the dev recategorization panel to assign some.
-              </AppLink>
-            ) : null}
-          </Flex>
-        )}
-
-        {category.children.length > 0 ? (
-          <Flex direction="column" gap="2xl">
-            <Heading1>Subcategories</Heading1>
-            <Grid style={styles.childGrid}>
-              {category.children.map((child) => (
-                <ChildCategoryCard key={child.id} category={child} />
-              ))}
-            </Grid>
-          </Flex>
-        ) : null}
-
-        {otherAppCategories.length > 0 ? (
-          <RelatedAppCategoriesSection categories={otherAppCategories} />
-        ) : null}
-      </Flex>
-    </Page.Root>
-  );
-}
-
-function RelatedAppCategoriesSection({
-  categories,
-}: {
-  categories: Array<DirectoryCategoryTreeNode>;
-}) {
-  return (
-    <Flex direction="column" style={styles.relatedSection}>
-      <Flex direction="column" gap="4xl" style={styles.relatedHeader}>
-        <Text size="3xl" weight="semibold">
-          Other app categories
-        </Text>
-        <Body variant="secondary" style={styles.relatedDescription}>
-          Explore neighboring app categories to discover more tools in adjacent
-          workflows.
-        </Body>
-      </Flex>
-      <Grid style={styles.childGrid}>
-        {categories.map((category) => (
-          <EcosystemCategoryCard key={category.id} category={category} />
-        ))}
-      </Grid>
-    </Flex>
-  );
-}
-
-function ChildCategoryCard({
-  category,
-}: {
-  category: DirectoryCategoryTreeNode;
-}) {
-  const CategoryIcon = getCategoryIcon(category.label);
-
-  return (
-    <RouterLink
-      to="/categories/$categoryId"
-      params={{ categoryId: category.id }}
-      search={{ sort: "popular" }}
-      {...stylex.props(styles.childCardLink)}
-    >
-      <div
-        {...stylex.props(
-          styles.childCard,
-          getSoftAccentSurface(category.accent),
-        )}
-      >
-        <div {...stylex.props(styles.childIcon)}>
-          <CategoryIcon size={18} strokeWidth={2.25} />
-        </div>
-        <Flex direction="column" gap="lg">
-          <SmallBody style={styles.eyebrow}>
-            {category.pathLabels.slice(0, -1).join(" / ")}
-          </SmallBody>
-          <Text size="2xl" weight="semibold">
-            {category.label}
-          </Text>
-          <Body style={styles.childDescription}>{category.description}</Body>
-          <Text weight="semibold">{formatCount(category.count)}</Text>
-        </Flex>
-      </div>
-    </RouterLink>
-  );
-}
-
-function CategoryListingCard({
-  listing,
-  featured = false,
-}: {
-  listing: DirectoryListingCard;
-  featured?: boolean;
-}) {
-  return (
-    <RouterLink
-      to="/products/$productId"
-      params={{ productId: getDirectoryListingSlug(listing) }}
-      {...stylex.props(
-        styles.listingLink,
-        featured && styles.listingLinkFeatured,
-      )}
-    >
-      {featured ? (
-        listing.heroImageUrl ? (
-          <HeroImage
-            alt={getDirectoryListingHeroImageAlt(listing)}
-            glowIntensity={0.8}
-            src={listing.heroImageUrl}
-          />
-        ) : (
-          <FeaturedListingFallbackCard listing={listing} />
-        )
-      ) : (
-        <Card style={[styles.listingCard]}>
-          {featured && listing.heroImageUrl ? (
-            <img
-              src={listing.heroImageUrl}
-              alt=""
-              aria-hidden="true"
-              {...stylex.props(styles.featuredImageFrame)}
-            />
-          ) : null}
-          <Flex direction="column" style={[styles.listingCardBody]}>
-            <Flex gap="2xl" align="center" style={styles.listingHeader}>
-              <Avatar
-                alt={listing.name}
-                fallback={getInitials(listing.name)}
-                size="xl"
-                src={listing.iconUrl || undefined}
-                style={styles.listingAvatar}
-              />
-              <Flex direction="column" gap="md" style={styles.listingInfo}>
-                <Text size="xl" weight="semibold">
-                  {listing.name}
-                </Text>
-                <Flex align="center" gap="lg">
-                  <SmallBody variant="secondary">
-                    {listing.rating == null ? "—" : listing.rating.toFixed(1)}
-                  </SmallBody>
-                  <StarRating
-                    rating={listing.rating}
-                    reviewCount={listing.reviewCount}
-                    showReviewCount
-                  />
-                </Flex>
-              </Flex>
-            </Flex>
-            <Body variant="secondary" style={styles.listingTagline}>
-              {listing.tagline}
-            </Body>
-          </Flex>
-        </Card>
-      )}
-    </RouterLink>
-  );
-}
-
-function getCategoryIcon(label: string): LucideIcon {
-  if (label === "Analytics") return BarChart3;
-  if (label === "Protocol" || label === "Tools") return Code2;
-  if (label === "PDS" || label === "AppView") return RadioTower;
-
-  return AppWindow;
-}
-
-function getSoftAccentSurface(accent: DirectoryCategoryAccent) {
-  if (accent === "pink") return styles.softPinkSurface;
-  if (accent === "purple") return styles.softPurpleSurface;
-  if (accent === "green") return styles.softGreenSurface;
-
-  return styles.softBlueSurface;
-}
-
-function formatCount(count: number) {
-  return `${count} ${count === 1 ? "listing" : "listings"}`;
-}
-
-function getOtherAppCategories(
-  pageData: DirectoryCategoryPageData,
-  categoryTree: Array<DirectoryCategoryTreeNode>,
-) {
-  const currentCategory = pageData.category;
-  if (currentCategory.pathIds[0] !== "apps") {
-    return [];
-  }
-
-  const ecosystemRootId = currentCategory.pathIds.slice(0, 2).join("/");
-  const parentCategoryId = currentCategory.pathIds.slice(0, -1).join("/");
-  const ecosystemRootNode = findCategoryNodeById(categoryTree, ecosystemRootId);
-  const parentNode = findCategoryNodeById(categoryTree, parentCategoryId);
-  if (!ecosystemRootNode) {
-    return [];
-  }
-
-  const siblingCategories =
-    parentNode?.children.filter((node) => node.id !== currentCategory.id) ?? [];
-
-  const ecosystemCategories = flattenCategoryNodes(
-    ecosystemRootNode.children,
-  ).filter((node) => node.id !== currentCategory.id);
-
-  const allCandidates = [...siblingCategories, ...ecosystemCategories];
-  const seen = new Set<string>();
-
-  return allCandidates
-    .filter((category) => category.count > 0)
-    .filter((category) => {
-      if (seen.has(category.id)) {
-        return false;
-      }
-      seen.add(category.id);
-      return true;
-    })
-    .toSorted((left, right) => {
-      if (right.count !== left.count) {
-        return right.count - left.count;
-      }
-
-      return left.label.localeCompare(right.label);
-    })
-    .slice(0, 3);
-}
-
-function flattenCategoryNodes(
-  nodes: Array<DirectoryCategoryTreeNode>,
-): Array<DirectoryCategoryTreeNode> {
-  const flattened: Array<DirectoryCategoryTreeNode> = [];
-  for (const node of nodes) {
-    flattened.push(node);
-    flattened.push(...flattenCategoryNodes(node.children));
-  }
-  return flattened;
-}
-
-function findCategoryNodeById(
-  nodes: Array<DirectoryCategoryTreeNode>,
-  categoryId: string,
-): DirectoryCategoryTreeNode | null {
-  for (const node of nodes) {
-    if (node.id === categoryId) {
-      return node;
-    }
-
-    const match = findCategoryNodeById(node.children, categoryId);
-    if (match) {
-      return match;
-    }
-  }
-
-  return null;
-}
-
-/**
- * Bridge `DirectoryCategoryAccent` (the 4-color accent baked into directory metadata) over
- * to the broader `AppTagAccent` palette used by `AppTagHero` / `AppTagCard`.
- *
- * "green" maps to `indigo` to stay visually consistent with `EcosystemCategoryCard`, which
- * (for legacy reasons) imports `indigo as green` and renders the green-accent surface using
- * the indigo palette. Changing one without the other would make the hero and the tile cards
- * disagree on what "green" looks like.
- */
-function mapCategoryAccentToTagAccent(
-  accent: DirectoryCategoryAccent,
-): AppTagAccent {
-  switch (accent) {
-    case "blue": {
-      return "blue";
-    }
-    case "pink": {
-      return "pink";
-    }
-    case "purple": {
-      return "purple";
-    }
-    case "green": {
-      return "indigo";
-    }
-  }
-}
-
-/**
- * Build the emoji list for the hero's scatter. Anchors on the category's own emoji, then
- * walks `children` (and grandchildren if the immediate child layer is too narrow) to add
- * distinct glyphs. Mirrors the approach in `EcosystemCategoryCard.pickSlotEmojis` so the
- * page hero and the children-tile grid below it share the same vocabulary.
- */
-function buildCategoryHeroEmojis(
-  category: DirectoryCategoryTreeNode,
-): Array<string> {
-  const anchor = getEcosystemCategoryEmoji(category.label);
-  const seen = new Set<string>([anchor]);
-  const pool: Array<string> = [anchor];
-
-  const visit = (nodes: Array<DirectoryCategoryTreeNode>) => {
-    for (const node of nodes) {
-      const emoji = getEcosystemCategoryEmoji(node.label);
-      if (seen.has(emoji)) continue;
-      seen.add(emoji);
-      pool.push(emoji);
-    }
-  };
-
-  visit(category.children);
-  if (pool.length < 5) {
-    for (const child of category.children) {
-      visit(child.children);
-      if (pool.length >= 5) break;
-    }
-  }
-
-  return pool;
-}
diff --git a/src/routes/_header-layout.ecosystems.$app.all.tsx b/src/routes/_header-layout.ecosystems.$app.all.tsx
index a4bd417..4d99755 100644
--- a/src/routes/_header-layout.ecosystems.$app.all.tsx
+++ b/src/routes/_header-layout.ecosystems.$app.all.tsx
@@ -1,292 +1,18 @@
-import * as stylex from "@stylexjs/stylex";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import {
-  createFileRoute,
-  createLink,
-  notFound,
-  useRouter,
-} from "@tanstack/react-router";
-import { ChevronLeft, SearchX } from "lucide-react";
-import { useMemo, useState } from "react";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
-import { AppTagHero } from "../components/AppTagHero";
-import { ecosystemListingGridStyles } from "../components/ecosystem-listing-grid.styles";
-import { EcosystemListingCard } from "../components/EcosystemListingCard";
-import {
-  EmptyState,
-  EmptyStateDescription,
-  EmptyStateImage,
-  EmptyStateTitle,
-} from "../design-system/empty-state";
-import { Flex } from "../design-system/flex";
-import { Grid } from "../design-system/grid";
-import { Link } from "../design-system/link";
-import { Page } from "../design-system/page";
-import { SearchField } from "../design-system/search-field";
-import { Select, SelectItem } from "../design-system/select";
-import {
-  gap,
-  verticalSpace,
-} from "../design-system/theme/semantic-spacing.stylex";
-import { SmallBody } from "../design-system/typography";
-import { directoryListingApi } from "../integrations/tanstack-query/api-directory-listings.functions";
-import {
-  getAppEcosystemCategoryIdFromRouteParam,
-  getAppSegmentFromEcosystemRootCategoryId,
-} from "../lib/directory-categories";
-import {
-  formatEcosystemListingCount,
-  pickListingImageForCategoryBranch,
-} from "../lib/ecosystem-listings";
-import { buildRouteOgMeta } from "../lib/og-meta";
-
-const AppLink = createLink(Link);
-const sortOptions = [
-  { id: "popular", label: "Trending" },
-  { id: "newest", label: "Newest" },
-  { id: "alphabetical", label: "Alphabetical" },
-] as const;
+import { validateBrowseSearch } from "../lib/browse-listings";
+import { getAppEcosystemCategoryIdFromRouteParam } from "../lib/directory-categories";
 
+/** Legacy "all tools in ecosystem" list — now `/apps?in=apps/<app>`. */
 export const Route = createFileRoute("/_header-layout/ecosystems/$app/all")({
-  validateSearch: (
-    search,
-  ): { sort: "popular" | "newest" | "alphabetical" } => ({
-    sort:
-      search.sort === "newest"
-        ? "newest"
-        : search.sort === "alphabetical"
-          ? "alphabetical"
-          : "popular",
-  }),
-  loaderDeps: ({ search }) => ({
-    sort: search.sort,
-  }),
-  loader: async ({ context, params, deps }) => {
-    const categoryId = getAppEcosystemCategoryIdFromRouteParam(params.app);
-    if (!categoryId) {
-      throw notFound();
-    }
-
-    const data = await context.queryClient.ensureQueryData(
-      directoryListingApi.getDirectoryCategoryPageQueryOptions({
-        categoryId,
-        sort: deps.sort,
-      }),
-    );
-
-    if (!data) {
-      throw notFound();
-    }
-
-    const { category, listings } = data;
-    const heroImage = pickListingImageForCategoryBranch(category.id, listings);
-
-    return {
-      app: params.app,
-      ogTitle: `${category.label} ecosystem listings | at-store`,
-      ogDescription: `Search every listing filed under ${category.pathLabels.join(" / ")}.`,
-      ogImage: heroImage,
-    };
-  },
-  head: ({ loaderData }) =>
-    buildRouteOgMeta({
-      title: loaderData?.ogTitle ?? "Ecosystem listings | at-store",
-      description:
-        loaderData?.ogDescription ||
-        "Search listings within this ecosystem on at-store.",
-      image: loaderData?.ogImage,
-    }),
-  component: EcosystemAllPage,
-});
-
-const styles = stylex.create({
-  page: {
-    paddingBottom: verticalSpace["10xl"],
-    paddingTop: verticalSpace["6xl"],
-  },
-  navLinks: {
-    flexWrap: "wrap",
-  },
-  searchSection: {
-    gap: gap["3xl"],
-  },
-  resultsHeader: {
-    flexWrap: "wrap",
-    justifyContent: "space-between",
-  },
-  resultCount: {
-    letterSpacing: "0.16em",
-    textTransform: "uppercase",
-  },
-  resultsActions: {
-    alignItems: "center",
-    flexWrap: "wrap",
-  },
-  sortSelect: {
-    minWidth: "12rem",
-  },
-  emptyState: {
-    padding: verticalSpace["10xl"],
-  },
-  searchFieldRow: {
-    flexGrow: 1,
-    maxWidth: "40rem",
+  beforeLoad: ({ params, search }) => {
+    throw redirect({
+      to: "/apps",
+      search: {
+        in: getAppEcosystemCategoryIdFromRouteParam(params.app) ?? undefined,
+        sort: validateBrowseSearch(search).sort,
+      },
+      statusCode: 301,
+    });
   },
 });
-
-function EcosystemAllPage() {
-  const search = Route.useSearch();
-  const router = useRouter();
-  const { app } = Route.useLoaderData();
-  const categoryId = getAppEcosystemCategoryIdFromRouteParam(app);
-  if (!categoryId) {
-    throw notFound();
-  }
-
-  const appSegment = getAppSegmentFromEcosystemRootCategoryId(categoryId);
-  if (!appSegment) {
-    throw notFound();
-  }
-
-  const { data } = useSuspenseQuery(
-    directoryListingApi.getDirectoryCategoryPageQueryOptions({
-      categoryId,
-      sort: search.sort,
-    }),
-  );
-
-  if (!data) {
-    throw notFound();
-  }
-
-  const { category, listings } = data;
-  const heroImage = pickListingImageForCategoryBranch(category.id, listings);
-
-  const [query, setQuery] = useState("");
-  const normalizedQuery = query.trim().toLowerCase();
-
-  const filteredListings = useMemo(() => {
-    if (!normalizedQuery) {
-      return listings;
-    }
-
-    return listings.filter((listing) =>
-      [
-        listing.name,
-        listing.tagline,
-        listing.category,
-        listing.description,
-      ].some((value) => value.toLowerCase().includes(normalizedQuery)),
-    );
-  }, [listings, normalizedQuery]);
-
-  const [, AppName] = category.pathLabels;
-
-  return (
-    <Page.Root variant="large" style={styles.page}>
-      <Flex direction="column" gap="7xl">
-        <Flex direction="column" gap="4xl">
-          <Flex gap="xl" style={styles.navLinks}>
-            <AppLink to="/ecosystems/$app" params={{ app: appSegment }}>
-              <ChevronLeft />
-              Back to {AppName} Ecosystem
-            </AppLink>
-          </Flex>
-
-          <AppTagHero
-            description={`Search every listing filed under ${category.pathLabels.join(" / ")} — clients, tools, and more.`}
-            eyebrow={formatEcosystemListingCount(listings.length)}
-            imageSrc={heroImage}
-            title={`Search ${category.label} ecosystem`}
-          />
-        </Flex>
-
-        <Flex direction="column" gap="2xl" style={styles.searchSection}>
-          <Flex align="center" gap="md" style={styles.resultsHeader}>
-            <Flex
-              align="center"
-              direction="row"
-              gap="2xl"
-              style={styles.searchFieldRow}
-            >
-              <SearchField
-                aria-label={`Search listings in ${category.label}`}
-                onChange={setQuery}
-                placeholder="Search listings"
-                value={query}
-                variant="secondary"
-                size="lg"
-              />
-              <SmallBody style={styles.resultCount}>
-                {getResultsLabel(
-                  filteredListings.length,
-                  listings.length,
-                  normalizedQuery,
-                )}
-              </SmallBody>
-            </Flex>
-            <Flex gap="xl" style={styles.resultsActions}>
-              <Select
-                aria-label="Sort ecosystem listings"
-                items={sortOptions}
-                placeholder="Sort listings"
-                size="lg"
-                style={styles.sortSelect}
-                value={search.sort}
-                variant="secondary"
-                onChange={(key) => {
-                  if (
-                    key !== "popular" &&
-                    key !== "newest" &&
-                    key !== "alphabetical"
-                  ) {
-                    return;
-                  }
-
-                  void router.navigate({
-                    to: "/ecosystems/$app/all",
-                    params: { app },
-                    search: { sort: key },
-                  });
-                }}
-              >
-                {(item) => <SelectItem>{item.label}</SelectItem>}
-              </Select>
-            </Flex>
-          </Flex>
-
-          {filteredListings.length > 0 ? (
-            <Grid style={ecosystemListingGridStyles.grid}>
-              {filteredListings.map((listing) => (
-                <EcosystemListingCard key={listing.id} listing={listing} />
-              ))}
-            </Grid>
-          ) : (
-            <EmptyState size="lg" style={styles.emptyState}>
-              <EmptyStateImage>
-                <SearchX size={64} strokeWidth={2} />
-              </EmptyStateImage>
-              <EmptyStateTitle>No listings matched your search</EmptyStateTitle>
-              <EmptyStateDescription>
-                Try a different keyword or browse categories from the ecosystem
-                home page.
-              </EmptyStateDescription>
-            </EmptyState>
-          )}
-        </Flex>
-      </Flex>
-    </Page.Root>
-  );
-}
-
-function getResultsLabel(
-  filteredCount: number,
-  totalCount: number,
-  normalizedQuery: string,
-) {
-  if (!normalizedQuery) {
-    return `${totalCount} listings`;
-  }
-
-  return `Showing ${filteredCount} of ${totalCount} listings`;
-}
diff --git a/src/routes/_header-layout.ecosystems.$app.index.tsx b/src/routes/_header-layout.ecosystems.$app.index.tsx
index 99f2c04..89b79d9 100644
--- a/src/routes/_header-layout.ecosystems.$app.index.tsx
+++ b/src/routes/_header-layout.ecosystems.$app.index.tsx
@@ -23,7 +23,6 @@ import { directoryListingApi } from "../integrations/tanstack-query/api-director
 import {
   getAppEcosystemCategoryIdFromRouteParam,
   getAppSegmentFromEcosystemRootCategoryId,
-  getEcosystemAllPathFromAppSegment,
 } from "../lib/directory-categories";
 import {
   formatEcosystemListingCount,
@@ -166,11 +165,7 @@ function EcosystemIndexPage() {
               {category.label}
             </AppLink>
 
-            <AppLink
-              to="/ecosystems/$app/all"
-              params={{ app: appSegment }}
-              search={{ sort: "popular" }}
-            >
+            <AppLink to="/apps" search={{ in: category.id }}>
               All tools
             </AppLink>
           </Flex>
@@ -200,7 +195,7 @@ function EcosystemIndexPage() {
             <Body variant="secondary">
               This ecosystem does not have nested category sections yet.
             </Body>
-            <AppLink to={getEcosystemAllPathFromAppSegment(appSegment)}>
+            <AppLink to="/apps" search={{ in: category.id }}>
               Search all listings in this ecosystem
             </AppLink>
           </Flex>
@@ -235,9 +230,8 @@ function EcosystemCategorySection({
             </Body>
           </Flex>
           <ButtonLink
-            to="/categories/$categoryId"
-            params={{ categoryId: category.id }}
-            search={{ sort: "popular" }}
+            to="/apps"
+            search={{ in: category.id }}
             size="lg"
             variant="secondary"
           >
diff --git a/src/routes/_header-layout.index.tsx b/src/routes/_header-layout.index.tsx
index 2916c7d..dbb0a9c 100644
--- a/src/routes/_header-layout.index.tsx
+++ b/src/routes/_header-layout.index.tsx
@@ -435,8 +435,7 @@ function HomePage() {
           <SectionHeader
             eyebrow="Popular Right Now"
             title="Trending across the ecosystem"
-            to="/apps/all"
-            search={{ sort: "popular" }}
+            to="/apps"
           />
           <Grid
             style={[
@@ -461,7 +460,7 @@ function HomePage() {
           <SectionHeader
             eyebrow="New & Noteworthy"
             title="Fresh apps just added"
-            to="/apps/all"
+            to="/apps"
             search={{ sort: "newest" }}
           />
           <Grid style={styles.newGrid}>
@@ -485,9 +484,9 @@ type SectionHeaderProps =
   | {
       eyebrow: string;
       title: string;
-      to: "/apps/all";
-      search: {
-        sort: "popular" | "newest";
+      to: "/apps";
+      search?: {
+        sort?: "newest";
       };
     };
 
@@ -495,9 +494,9 @@ function SectionHeader({ eyebrow, title, to, search }: SectionHeaderProps) {
   let action: React.ReactNode;
 
   switch (to) {
-    case "/apps/all": {
+    case "/apps": {
       action = (
-        <AppLink to="/apps/all" search={search}>
+        <AppLink to="/apps" search={search ?? {}}>
           See All <ChevronRight />
         </AppLink>
       );
diff --git a/src/routes/_header-layout.products.$productId.index.tsx b/src/routes/_header-layout.products.$productId.index.tsx
index 8fd938b..6872343 100644
--- a/src/routes/_header-layout.products.$productId.index.tsx
+++ b/src/routes/_header-layout.products.$productId.index.tsx
@@ -867,9 +867,8 @@ function HeroSection({
       {subproductCategories.map((option) => (
         <RouterLink
           key={option.id}
-          to="/categories/$categoryId"
-          params={{ categoryId: option.id }}
-          search={{ sort: "popular" }}
+          to="/apps"
+          search={{ in: option.id }}
           {...stylex.props(styles.tagLink)}
         >
           <Badge size="sm" variant="default">
@@ -880,9 +879,8 @@ function HeroSection({
       {listing.appTags.map((tag) => (
         <RouterLink
           key={tag}
-          to="/apps/$tag"
-          params={{ tag: getAppTagSlug(tag) }}
-          search={{ sort: "popular" }}
+          to="/apps"
+          search={{ tag: getAppTagSlug(tag) }}
           {...stylex.props(styles.tagLink)}
         >
           <Badge size="sm" variant="primary">
diff --git a/src/routes/_header-layout.search.tsx b/src/routes/_header-layout.search.tsx
index 712507d..a8efe20 100644
--- a/src/routes/_header-layout.search.tsx
+++ b/src/routes/_header-layout.search.tsx
@@ -1,404 +1,11 @@
-import * as stylex from "@stylexjs/stylex";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import {
-  Link as RouterLink,
-  createFileRoute,
-  createLink,
-  useRouter,
-} from "@tanstack/react-router";
-import { ChevronLeft, SearchX } from "lucide-react";
-import { useMemo, useState } from "react";
-import { useFocusRing } from "react-aria";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
-import type { DirectoryListingCard } from "../integrations/tanstack-query/api-directory-listings.functions";
-
-import { AppTagHero } from "../components/AppTagHero";
-import { Avatar } from "../design-system/avatar";
-import { Badge } from "../design-system/badge";
-import { Card } from "../design-system/card";
-import {
-  EmptyState,
-  EmptyStateDescription,
-  EmptyStateImage,
-  EmptyStateTitle,
-} from "../design-system/empty-state";
-import { Flex } from "../design-system/flex";
-import { Grid } from "../design-system/grid";
-import { Link } from "../design-system/link";
-import { Page } from "../design-system/page";
-import { SearchField } from "../design-system/search-field";
-import { Select, SelectItem } from "../design-system/select";
-import { StarRating } from "../design-system/star-rating";
-import { blue } from "../design-system/theme/colors/blue.stylex";
-import { breakpoints } from "../design-system/theme/media-queries.stylex";
-import {
-  gap,
-  horizontalSpace,
-  verticalSpace,
-} from "../design-system/theme/semantic-spacing.stylex";
-import { Body, SmallBody } from "../design-system/typography";
-import { Text } from "../design-system/typography/text";
-import { directoryListingApi } from "../integrations/tanstack-query/api-directory-listings.functions";
-import { formatAppTagLabel } from "../lib/app-tag-metadata";
-import { getDirectoryCategoryOption } from "../lib/directory-categories";
-import { getDirectoryListingSlug } from "../lib/directory-listing-slugs";
-import { getInitials } from "../lib/get-initials";
-import { buildRouteOgMeta } from "../lib/og-meta";
-
-const LinkLink = createLink(Link);
-
-const sortOptions = [
-  { id: "popular", label: "Trending" },
-  { id: "newest", label: "Newest" },
-  { id: "alphabetical", label: "Alphabetical" },
-] as const;
+import { validateBrowseSearch } from "../lib/browse-listings";
 
+/** Legacy search page — search now lives on `/apps?q=`. */
 export const Route = createFileRoute("/_header-layout/search")({
-  validateSearch: (
-    search,
-  ): { sort: "popular" | "newest" | "alphabetical" } => ({
-    sort:
-      search.sort === "newest"
-        ? "newest"
-        : search.sort === "alphabetical"
-          ? "alphabetical"
-          : "popular",
-  }),
-  loaderDeps: ({ search }) => ({
-    sort: search.sort,
-  }),
-  loader: ({ context, deps }) =>
-    context.queryClient.ensureQueryData(
-      directoryListingApi.getAllListingsQueryOptions({
-        sort: deps.sort,
-      }),
-    ),
-  head: () =>
-    buildRouteOgMeta({
-      title: "Search all listings | at-store",
-      description:
-        "Search across the full at-store directory in one place, including every public app listing.",
-    }),
-  component: SearchPage,
-});
-
-const styles = stylex.create({
-  page: {
-    paddingBottom: verticalSpace["10xl"],
-    paddingTop: verticalSpace["6xl"],
-  },
-  navLinks: {
-    flexWrap: "wrap",
-  },
-  resultsHeader: {
-    flexWrap: "wrap",
-    justifyContent: "space-between",
-  },
-  resultsActions: {
-    alignItems: "center",
-    flexWrap: "wrap",
-  },
-  resultCount: {
-    letterSpacing: "0.16em",
-    textTransform: "uppercase",
-  },
-  sortSelect: {
-    minWidth: "12rem",
-  },
-  searchFieldRow: {
-    flexGrow: 1,
-    maxWidth: "44rem",
-  },
-  listingGrid: {
-    gap: gap["xl"],
-    display: "grid",
-    gridTemplateColumns: {
-      default: "1fr",
-      [breakpoints.sm]: "repeat(2, minmax(0, 1fr))",
-      [breakpoints.lg]: "repeat(3, minmax(0, 1fr))",
-    },
-  },
-  listingCard: {
-    contentVisibility: "auto",
-    height: "100%",
-  },
-  listingCardBody: {
-    gap: gap["4xl"],
-    height: "100%",
-    paddingBottom: verticalSpace["4xl"],
-    paddingLeft: horizontalSpace["4xl"],
-    paddingRight: horizontalSpace["4xl"],
-    paddingTop: verticalSpace["4xl"],
-  },
-  listingLink: {
-    gap: gap["4xl"],
-    outline: "none",
-    textDecoration: "none",
-    color: "inherit",
-    display: "flex",
-    flexBasis: "0%",
-    flexDirection: "column",
-    flexGrow: "1",
-    flexShrink: "1",
-    minHeight: 0,
-  },
-  listingCardFocus: {
-    borderColor: blue.border3,
-  },
-  content: {
-    gap: gap["4xl"],
-    display: "flex",
-    flexBasis: "0%",
-    flexDirection: "column",
-    flexGrow: "1",
-    flexShrink: "1",
-    minHeight: 0,
-  },
-  listingHeader: {
-    gap: gap["2xl"],
-  },
-  listingInfo: {
-    flexBasis: "0%",
-    flexGrow: "1",
-    flexShrink: "1",
-    minWidth: 0,
-  },
-  listingTagline: {
-    flexGrow: 1,
-  },
-  listingFooter: {
-    alignItems: "center",
-  },
-  listingTags: {
-    flexWrap: "wrap",
-    rowGap: gap.sm,
-    maxWidth: "100%",
-  },
-  listingFooterRating: {
-    flexShrink: 0,
-  },
-  emptyState: {
-    padding: verticalSpace["10xl"],
+  beforeLoad: ({ search }) => {
+    const { q, sort } = validateBrowseSearch(search);
+    throw redirect({ to: "/apps", search: { q, sort }, statusCode: 301 });
   },
 });
-
-function SearchPage() {
-  const search = Route.useSearch();
-  const router = useRouter();
-  const { data: listings } = useSuspenseQuery(
-    directoryListingApi.getAllListingsQueryOptions({
-      sort: search.sort,
-    }),
-  );
-  const [query, setQuery] = useState("");
-  const normalizedQuery = query.trim().toLowerCase();
-
-  const filteredListings = useMemo(() => {
-    if (!normalizedQuery) {
-      return listings;
-    }
-
-    return listings.filter((listing) =>
-      [
-        listing.name,
-        listing.tagline,
-        listing.category,
-        listing.description,
-        ...listing.appTags,
-      ].some((value) => value.toLowerCase().includes(normalizedQuery)),
-    );
-  }, [listings, normalizedQuery]);
-
-  return (
-    <Page.Root variant="large" style={styles.page}>
-      <Flex direction="column" gap="7xl">
-        <Flex direction="column" gap="4xl">
-          <Flex gap="xl" justify="between" style={styles.navLinks}>
-            <LinkLink to="/home">
-              <ChevronLeft />
-              Home
-            </LinkLink>
-          </Flex>
-
-          <AppTagHero
-            eyebrow={`${listings.length} total listings`}
-            title="Search all listings"
-            description="Find any listing in one place across apps in the directory."
-          />
-        </Flex>
-
-        <Flex direction="column" gap="2xl">
-          <Flex align="center" gap="sm" style={styles.resultsHeader}>
-            <Flex
-              align="center"
-              direction="row"
-              gap="2xl"
-              style={styles.searchFieldRow}
-            >
-              <SearchField
-                aria-label="Search all listings"
-                onChange={setQuery}
-                placeholder="Search listings"
-                value={query}
-                variant="secondary"
-                size="lg"
-              />
-              <SmallBody style={styles.resultCount}>
-                {getResultsLabel(
-                  filteredListings.length,
-                  listings.length,
-                  normalizedQuery,
-                )}
-              </SmallBody>
-            </Flex>
-            <Flex gap="xl" style={styles.resultsActions}>
-              <Select
-                aria-label="Sort all listings"
-                items={sortOptions}
-                placeholder="Sort listings"
-                size="lg"
-                style={styles.sortSelect}
-                value={search.sort}
-                variant="secondary"
-                onChange={(key) => {
-                  if (
-                    key !== "popular" &&
-                    key !== "newest" &&
-                    key !== "alphabetical"
-                  ) {
-                    return;
-                  }
-
-                  void router.navigate({
-                    to: "/search",
-                    search: { sort: key },
-                  });
-                }}
-              >
-                {(item) => <SelectItem>{item.label}</SelectItem>}
-              </Select>
-            </Flex>
-          </Flex>
-
-          {filteredListings.length > 0 ? (
-            <Grid style={styles.listingGrid}>
-              {filteredListings.map((listing) => (
-                <ListingSearchCard key={listing.id} listing={listing} />
-              ))}
-            </Grid>
-          ) : (
-            <EmptyState size="lg" style={styles.emptyState}>
-              <EmptyStateImage>
-                <SearchX size={64} strokeWidth={2} />
-              </EmptyStateImage>
-              <EmptyStateTitle>No listings matched your search</EmptyStateTitle>
-              <EmptyStateDescription>
-                Try a different keyword to search across the full directory.
-              </EmptyStateDescription>
-            </EmptyState>
-          )}
-        </Flex>
-      </Flex>
-    </Page.Root>
-  );
-}
-
-function ListingSearchCard({ listing }: { listing: DirectoryListingCard }) {
-  const listingPathLabel = getDirectoryCategoryOption(
-    listing.categorySlug,
-  )?.pathLabel;
-  const categorySegments = (listing.categorySlug ?? "")
-    .split("/")
-    .filter(Boolean);
-  const isAppListing =
-    categorySegments[0] === "apps" || categorySegments[0] === "app";
-  const isTopLevelAppListing = isAppListing && categorySegments.length === 2;
-  const appSubpathLabel =
-    isAppListing && categorySegments.length >= 3
-      ? categorySegments.slice(1).join("/")
-      : null;
-
-  const { focusProps, isFocusVisible } = useFocusRing({});
-
-  return (
-    <RouterLink
-      {...stylex.props(styles.listingLink)}
-      to="/products/$productId"
-      params={{ productId: getDirectoryListingSlug(listing) }}
-      {...focusProps}
-    >
-      <Card
-        style={[styles.listingCard, isFocusVisible && styles.listingCardFocus]}
-      >
-        <Flex direction="column" style={styles.listingCardBody}>
-          <div {...stylex.props(styles.content)}>
-            <Flex gap="2xl" align="center" style={styles.listingHeader}>
-              <Avatar
-                alt={listing.name}
-                fallback={getInitials(listing.name)}
-                size="xl"
-                src={listing.iconUrl || undefined}
-              />
-              <Flex direction="column" gap="xl" style={styles.listingInfo}>
-                <Text size="xl" weight="semibold">
-                  {listing.name}
-                </Text>
-                <SmallBody variant="secondary">
-                  @
-                  {listing.productAccountHandle?.replace(/^@/, "") || "unknown"}
-                </SmallBody>
-              </Flex>
-            </Flex>
-
-            <Body variant="secondary" style={styles.listingTagline}>
-              {listing.tagline}
-            </Body>
-          </div>
-
-          <Flex
-            justify="between"
-            gap="xl"
-            align="start"
-            style={styles.listingFooter}
-          >
-            <Flex align="center" gap="sm" style={styles.listingTags}>
-              {isTopLevelAppListing && listing.appTags.length > 0 ? (
-                listing.appTags.map((tag) => (
-                  <Badge key={tag} size="sm" variant="primary">
-                    {formatAppTagLabel(tag)}
-                  </Badge>
-                ))
-              ) : (
-                <Badge size="sm" variant="primary">
-                  {appSubpathLabel ?? listingPathLabel ?? listing.category}
-                </Badge>
-              )}
-            </Flex>
-            <Flex align="center" gap="sm" style={styles.listingFooterRating}>
-              <SmallBody variant="secondary">
-                {listing.rating == null ? "—" : listing.rating.toFixed(1)}
-              </SmallBody>
-              <StarRating
-                rating={listing.rating}
-                reviewCount={listing.reviewCount}
-                showReviewCount
-              />
-            </Flex>
-          </Flex>
-        </Flex>
-      </Card>
-    </RouterLink>
-  );
-}
-
-function getResultsLabel(
-  filteredCount: number,
-  totalCount: number,
-  normalizedQuery: string,
-) {
-  if (!normalizedQuery) {
-    return `${totalCount} listings`;
-  }
-
-  return `Showing ${filteredCount} of ${totalCount} listings`;
-}

From 83eb1e17cfb014562c2601ecb0cd9ea386323770 Mon Sep 17 00:00:00 2001
From: Andrew Lisowski <lisowski54@gmail.com>
Date: Sat, 17 Oct 2026 12:40:29 -0700
Subject: [PATCH 2/4] Filter, facet and paginate /apps on the server

The page used to ship every listing (~170 KB gzipped) and filter in the
browser. Now getBrowsePage runs the same pure logic server-side and
returns one page of trimmed cards plus facet counts (~30 KB gzipped for
the whole HTML). The catalog is cached in memory for 60s so filter
clicks don't each hit the database, and text search covers the full
description again since it no longer has to be shipped to the client.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../api-directory-listings.functions.ts       | 163 +++++++++++-------
 src/lib/browse-listings.test.ts               |  38 ++++
 src/lib/browse-listings.ts                    |  82 ++++++++-
 src/routes/_header-layout.apps.index.tsx      |  80 +++------
 4 files changed, 241 insertions(+), 122 deletions(-)

diff --git a/src/integrations/tanstack-query/api-directory-listings.functions.ts b/src/integrations/tanstack-query/api-directory-listings.functions.ts
index be59a00..86e32a7 100644
--- a/src/integrations/tanstack-query/api-directory-listings.functions.ts
+++ b/src/integrations/tanstack-query/api-directory-listings.functions.ts
@@ -100,7 +100,7 @@ import {
 } from "drizzle-orm";
 import { z } from "zod";
 
-import type { BrowseListing } from "../../lib/browse-listings";
+import type { BrowseListing, BrowseSearch } from "../../lib/browse-listings";
 import type {
   DirectoryCategoryAccent,
   DirectoryCategoryTreeNode,
@@ -113,6 +113,10 @@ import {
   suggestAppTagsFromListing,
   suggestedTagsForListing,
 } from "../../lib/app-tags";
+import {
+  queryBrowseListings,
+  validateBrowseSearch,
+} from "../../lib/browse-listings";
 import {
   buildDirectoryCategoryTree,
   findDirectoryCategoryNode,
@@ -2621,70 +2625,108 @@ function getLexiconCompatibleAppsPageQueryOptions(
   });
 }
 
-const BROWSE_SEARCH_TEXT_MAX_LENGTH = 200;
-
 /**
- * Every public non-protocol listing with the fields `/apps` filters and sorts on. Returned in "popular"
- * order (`popularRank`) so the client can re-sort without another round trip.
+ * Every public non-protocol listing with the fields `/apps` filters and sorts on, in "popular"
+ * order (`popularRank`).
  */
-const getBrowseListings = createServerFn({ method: "GET" })
-  .middleware([dbMiddleware])
-  .handler(async ({ context }): Promise<Array<BrowseListing>> => {
-    const table = context.schema.storeListings;
-    const probe = context.schema.storeListingOAuthProbes;
-    const rows = await context.db
-      .select({
-        ...getListingSelect(table),
-        links: table.links,
-        favoriteCount: table.favoriteCount,
-        createdAt: table.createdAt,
-        updatedAt: table.updatedAt,
-        oauthLexiconKeys: probe.oauthLexiconKeys,
-      })
-      .from(table)
-      .leftJoin(probe, eq(probe.storeListingId, table.id))
-      .where(
-        listingPublicWhere(
-          table,
-          sql`not (${sqlCategorySlugsMatchesLike(table.categorySlugs, "protocol/%")})`,
-        ),
-      )
-      .orderBy(...orderByPopularListingSort(table));
+async function loadBrowseListings(context: {
+  db: Database;
+  schema: typeof dbSchema;
+}): Promise<Array<BrowseListing>> {
+  const table = context.schema.storeListings;
+  const probe = context.schema.storeListingOAuthProbes;
+  const rows = await context.db
+    .select({
+      ...getListingSelect(table),
+      links: table.links,
+      favoriteCount: table.favoriteCount,
+      createdAt: table.createdAt,
+      updatedAt: table.updatedAt,
+      oauthLexiconKeys: probe.oauthLexiconKeys,
+    })
+    .from(table)
+    .leftJoin(probe, eq(probe.storeListingId, table.id))
+    .where(
+      listingPublicWhere(
+        table,
+        sql`not (${sqlCategorySlugsMatchesLike(table.categorySlugs, "protocol/%")})`,
+      ),
+    )
+    .orderBy(...orderByPopularListingSort(table));
 
-    return rows.map((row, index) => {
-      const card = toListingCard(row);
-      const dataNsids = (row.oauthLexiconKeys ?? [])
-        .filter((key) => isRepoLexiconKeyForLexiconHub(key))
-        .flatMap((key) => parseOAuthLexiconKey(key)?.nsid ?? []);
-      const linkTypes = new Set(row.links.map((link) => link.type));
+  return rows.map((row, index) => {
+    const card = toListingCard(row);
+    const dataNsids = (row.oauthLexiconKeys ?? [])
+      .filter((key) => isRepoLexiconKeyForLexiconHub(key))
+      .flatMap((key) => parseOAuthLexiconKey(key)?.nsid ?? []);
+    const linkTypes = new Set(row.links.map((link) => link.type));
 
-      return {
-        id: card.id,
-        name: card.name,
-        slug: getDirectoryListingSlug(card),
-        iconUrl: card.iconUrl,
-        tagline: card.tagline,
-        searchText: card.description.slice(0, BROWSE_SEARCH_TEXT_MAX_LENGTH),
-        categorySlugs: card.categorySlugs,
-        appTags: card.appTags,
-        rating: card.rating,
-        reviewCount: card.reviewCount,
-        favoriteCount: row.favoriteCount,
-        productAccountHandle: card.productAccountHandle,
-        createdAt: row.createdAt.toISOString(),
-        updatedAt: row.updatedAt.toISOString(),
-        popularRank: index,
-        dataNsids: [...new Set(dataNsids)],
-        hasSourceLink: linkTypes.has("source"),
-        acceptsDonations: linkTypes.has("donate"),
-      };
-    });
+    return {
+      id: card.id,
+      name: card.name,
+      slug: getDirectoryListingSlug(card),
+      iconUrl: card.iconUrl,
+      tagline: card.tagline,
+      searchText: card.description,
+      categorySlugs: card.categorySlugs,
+      appTags: card.appTags,
+      rating: card.rating,
+      reviewCount: card.reviewCount,
+      favoriteCount: row.favoriteCount,
+      productAccountHandle: card.productAccountHandle,
+      createdAt: row.createdAt.toISOString(),
+      updatedAt: row.updatedAt.toISOString(),
+      popularRank: index,
+      dataNsids: [...new Set(dataNsids)],
+      hasSourceLink: linkTypes.has("source"),
+      acceptsDonations: linkTypes.has("donate"),
+    };
   });
+}
 
-const getBrowseListingsQueryOptions = queryOptions({
-  queryKey: ["storeListings", "browse"] as const,
-  queryFn: async () => getBrowseListings(),
-});
+/** Facets need the whole catalog, so keep it in memory briefly instead of re-querying per filter click. */
+const BROWSE_LISTINGS_CACHE_TTL_MS = 60 * 1000;
+let browseListingsCache: {
+  expiresAt: number;
+  listings: Promise<Array<BrowseListing>>;
+} | null = null;
+
+function getCachedBrowseListings(context: {
+  db: Database;
+  schema: typeof dbSchema;
+}) {
+  const now = Date.now();
+  if (!browseListingsCache || browseListingsCache.expiresAt <= now) {
+    const listings = loadBrowseListings(context);
+    browseListingsCache = {
+      expiresAt: now + BROWSE_LISTINGS_CACHE_TTL_MS,
+      listings,
+    };
+    // Don't cache failures.
+    listings.catch(() => {
+      if (browseListingsCache?.listings === listings)
+        browseListingsCache = null;
+    });
+  }
+  return browseListingsCache.listings;
+}
+
+/** One page of `/apps` results plus facet counts; filtering runs here so the client never loads the catalog. */
+const getBrowsePage = createServerFn({ method: "GET" })
+  .middleware([dbMiddleware])
+  .inputValidator((data: BrowseSearch) =>
+    validateBrowseSearch(data as Record<string, unknown>),
+  )
+  .handler(async ({ data, context }) =>
+    queryBrowseListings(await getCachedBrowseListings(context), data),
+  );
+
+function getBrowsePageQueryOptions(search: BrowseSearch) {
+  return queryOptions({
+    queryKey: ["storeListings", "browsePage", search],
+    queryFn: async () => getBrowsePage({ data: search }),
+  });
+}
 
 const getDirectoryListingDetail = createServerFn({ method: "GET" })
   .middleware([dbMiddleware])
@@ -7786,8 +7828,7 @@ export const directoryListingApi = {
   getRelatedAppsBySharedLexiconKeysQueryOptions,
   getLexiconCompatibleAppsPage,
   getLexiconCompatibleAppsPageQueryOptions,
-  getBrowseListings,
-  getBrowseListingsQueryOptions,
+  getBrowsePageQueryOptions,
   getDirectoryListingDetail,
   getDirectoryListingDetailQueryOptions,
   getDirectoryListingDetailBySlug,
diff --git a/src/lib/browse-listings.test.ts b/src/lib/browse-listings.test.ts
index 506272b..8a85f58 100644
--- a/src/lib/browse-listings.test.ts
+++ b/src/lib/browse-listings.test.ts
@@ -6,6 +6,7 @@ import {
   buildBrowseFacets,
   getBrowseFilters,
   listingMatchesFilters,
+  queryBrowseListings,
   sortBrowseListings,
   toggleBrowseFilter,
   validateBrowseSearch,
@@ -199,3 +200,40 @@ describe("toggleBrowseFilter", () => {
     );
   });
 });
+
+describe("queryBrowseListings", () => {
+  const many = Array.from({ length: 30 }, (_, index) =>
+    listing({
+      id: `l${index}`,
+      name: `Listing ${index}`,
+      popularRank: index,
+      searchText: "a very long description",
+      appTags: index % 2 === 0 ? ["social"] : ["games"],
+    }),
+  );
+
+  it("returns one page of trimmed cards with totals", () => {
+    const page = queryBrowseListings(many, { page: 2 });
+    expect(page.total).toBe(30);
+    expect(page.totalListings).toBe(30);
+    expect(page.totalPages).toBe(2);
+    expect(page.page).toBe(2);
+    expect(page.results.map((r) => r.id)).toEqual([
+      "l24",
+      "l25",
+      "l26",
+      "l27",
+      "l28",
+      "l29",
+    ]);
+    expect(page.results[0]).not.toHaveProperty("searchText");
+  });
+
+  it("clamps out-of-range pages and filters before paginating", () => {
+    const page = queryBrowseListings(many, { tag: "games", page: 9 });
+    expect(page.total).toBe(15);
+    expect(page.totalPages).toBe(1);
+    expect(page.page).toBe(1);
+    expect(page.facets.tags.find((t) => t.id === "social")?.count).toBe(15);
+  });
+});
diff --git a/src/lib/browse-listings.ts b/src/lib/browse-listings.ts
index 9ac69e3..75aadf3 100644
--- a/src/lib/browse-listings.ts
+++ b/src/lib/browse-listings.ts
@@ -27,6 +27,23 @@ export interface BrowseListing {
   acceptsDonations: boolean;
 }
 
+/** What a result row renders — the server only sends these fields for the current page. */
+export type BrowseListingCard = Pick<
+  BrowseListing,
+  | "id"
+  | "name"
+  | "slug"
+  | "iconUrl"
+  | "tagline"
+  | "categorySlugs"
+  | "appTags"
+  | "rating"
+  | "reviewCount"
+  | "favoriteCount"
+  | "productAccountHandle"
+  | "updatedAt"
+>;
+
 export const BROWSE_SORTS = [
   "popular",
   "rating",
@@ -526,19 +543,17 @@ export function getBrowseCategoryLabel(categoryId: string): string {
 export function getBrowseFilterValueLabel(
   facet: BrowseFacet,
   value: string,
-  listings: ReadonlyArray<BrowseListing>,
+  facets: Pick<BrowseFacets, "tags">,
 ): string {
   switch (facet) {
     case "categories": {
       return getBrowseCategoryLabel(value);
     }
     case "tags": {
-      for (const listing of listings) {
-        for (const tag of listing.appTags) {
-          if (getAppTagSlug(tag) === value) return formatAppTagLabel(tag);
-        }
-      }
-      return formatAppTagLabel(value.replaceAll("-", " "));
+      return (
+        facets.tags.find((option) => option.id === value)?.label ??
+        formatAppTagLabel(value.replaceAll("-", " "))
+      );
     }
     case "data": {
       return getLexiconProducerSiteFromRepoNsid(value)?.siteLabel ?? value;
@@ -605,3 +620,56 @@ export function toggleBrowseFilter(
 export function clearBrowseFilters(search: BrowseSearch): BrowseSearch {
   return { q: search.q, sort: search.sort };
 }
+
+export interface BrowsePage {
+  results: Array<BrowseListingCard>;
+  /** Listings matching the current search and filters. */
+  total: number;
+  /** All browseable listings, ignoring search and filters. */
+  totalListings: number;
+  page: number;
+  totalPages: number;
+  facets: BrowseFacets;
+}
+
+function toBrowseListingCard(listing: BrowseListing): BrowseListingCard {
+  return {
+    id: listing.id,
+    name: listing.name,
+    slug: listing.slug,
+    iconUrl: listing.iconUrl,
+    tagline: listing.tagline,
+    categorySlugs: listing.categorySlugs,
+    appTags: listing.appTags,
+    rating: listing.rating,
+    reviewCount: listing.reviewCount,
+    favoriteCount: listing.favoriteCount,
+    productAccountHandle: listing.productAccountHandle,
+    updatedAt: listing.updatedAt,
+  };
+}
+
+/** Filter, facet, sort and paginate — runs server-side so the client only gets one page. */
+export function queryBrowseListings(
+  listings: ReadonlyArray<BrowseListing>,
+  search: BrowseSearch,
+): BrowsePage {
+  const filters = getBrowseFilters(search);
+  const matching = sortBrowseListings(
+    listings.filter((listing) => listingMatchesFilters(listing, filters)),
+    search.sort ?? "popular",
+  );
+  const totalPages = Math.max(1, Math.ceil(matching.length / BROWSE_PAGE_SIZE));
+  const page = Math.min(search.page ?? 1, totalPages);
+
+  return {
+    results: matching
+      .slice((page - 1) * BROWSE_PAGE_SIZE, page * BROWSE_PAGE_SIZE)
+      .map((listing) => toBrowseListingCard(listing)),
+    total: matching.length,
+    totalListings: listings.length,
+    page,
+    totalPages,
+    facets: buildBrowseFacets(listings, filters),
+  };
+}
diff --git a/src/routes/_header-layout.apps.index.tsx b/src/routes/_header-layout.apps.index.tsx
index f312cfb..9a2fdab 100644
--- a/src/routes/_header-layout.apps.index.tsx
+++ b/src/routes/_header-layout.apps.index.tsx
@@ -10,8 +10,9 @@ import { useEffect, useMemo, useState } from "react";
 
 import type {
   BrowseFacet,
+  BrowseFacets,
   BrowseFilters,
-  BrowseListing,
+  BrowseListingCard,
   BrowseSearch,
   BrowseSort,
 } from "../lib/browse-listings";
@@ -57,18 +58,14 @@ import {
 } from "../lib/app-tag-metadata";
 import { getAppTagEmoji } from "../lib/app-tag-visuals";
 import {
-  BROWSE_PAGE_SIZE,
   BROWSE_SORTS,
   BROWSE_SORT_LABELS,
   TOP_LEVEL_APPS_CATEGORY,
-  buildBrowseFacets,
   clearBrowseFilters,
   countActiveBrowseFilters,
   getBrowseCategoryLabel,
   getBrowseFilterValueLabel,
   getBrowseFilters,
-  listingMatchesFilters,
-  sortBrowseListings,
   toggleBrowseFilter,
   validateBrowseSearch,
 } from "../lib/browse-listings";
@@ -85,11 +82,8 @@ const sortOptions = BROWSE_SORTS.map((id) => ({
   label: BROWSE_SORT_LABELS[id],
 }));
 
-/** When the only filter is a single tag, find the stored tag text for its slug. */
-function getSingleTagPreset(
-  search: BrowseSearch,
-  listings: ReadonlyArray<BrowseListing>,
-) {
+/** When the only filter is a single tag, recover its stored (lowercase) text and count. */
+function getSingleTagPreset(search: BrowseSearch, facets: BrowseFacets) {
   const filters = getBrowseFilters(search);
   if (
     filters.query ||
@@ -98,12 +92,10 @@ function getSingleTagPreset(
   ) {
     return null;
   }
-  const slug = filters.tags[0];
-  const matching = listings.filter((listing) =>
-    listing.appTags.some((tag) => getAppTagSlug(tag) === slug),
-  );
-  const tag = matching[0]?.appTags.find((t) => getAppTagSlug(t) === slug);
-  return tag ? { tag, count: matching.length } : null;
+  const option = facets.tags.find((tag) => tag.id === filters.tags[0]);
+  return option
+    ? { tag: option.label.toLowerCase(), count: option.count }
+    : null;
 }
 
 function getSingleCategoryPreset(search: BrowseSearch) {
@@ -124,13 +116,13 @@ function getSingleCategoryPreset(search: BrowseSearch) {
 
 export const Route = createFileRoute("/_header-layout/apps/")({
   validateSearch: validateBrowseSearch,
-  loaderDeps: ({ search }) => ({ tag: search.tag, in: search.in }),
+  loaderDeps: ({ search }) => search,
   loader: async ({ context, deps }) => {
-    const listings = await context.queryClient.ensureQueryData(
-      directoryListingApi.getBrowseListingsQueryOptions,
+    const { facets } = await context.queryClient.ensureQueryData(
+      directoryListingApi.getBrowsePageQueryOptions(deps),
     );
 
-    const tagPreset = getSingleTagPreset(deps, listings);
+    const tagPreset = getSingleTagPreset(deps, facets);
     if (tagPreset) {
       const label = formatAppTagLabel(tagPreset.tag);
       return {
@@ -287,33 +279,13 @@ const styles = stylex.create({
 function BrowseAppsPage() {
   const search = Route.useSearch();
   const navigate = Route.useNavigate();
-  const { data: listings } = useSuspenseQuery(
-    directoryListingApi.getBrowseListingsQueryOptions,
-  );
+  const {
+    data: { results, total, totalListings, page, totalPages, facets },
+  } = useSuspenseQuery(directoryListingApi.getBrowsePageQueryOptions(search));
 
   const filters = useMemo(() => getBrowseFilters(search), [search]);
   const sort: BrowseSort = search.sort ?? "popular";
 
-  const results = useMemo(
-    () =>
-      sortBrowseListings(
-        listings.filter((listing) => listingMatchesFilters(listing, filters)),
-        sort,
-      ),
-    [listings, filters, sort],
-  );
-  const facets = useMemo(
-    () => buildBrowseFacets(listings, filters),
-    [listings, filters],
-  );
-
-  const totalPages = Math.max(1, Math.ceil(results.length / BROWSE_PAGE_SIZE));
-  const page = Math.min(search.page ?? 1, totalPages);
-  const pageResults = results.slice(
-    (page - 1) * BROWSE_PAGE_SIZE,
-    page * BROWSE_PAGE_SIZE,
-  );
-
   const toggleFilter = (facet: BrowseFacet, value: string) => {
     void navigate({
       search: (prev) => toggleBrowseFilter(prev, facet, value),
@@ -375,7 +347,7 @@ function BrowseAppsPage() {
                         Clear all
                       </Button>
                       <Button slot="close">
-                        {`Show ${results.length} ${results.length === 1 ? "app" : "apps"}`}
+                        {`Show ${total} ${total === 1 ? "app" : "apps"}`}
                       </Button>
                     </Flex>
                   </DrawerFooter>
@@ -407,20 +379,20 @@ function BrowseAppsPage() {
 
             <ActiveFilterChips
               filters={filters}
-              listings={listings}
+              facets={facets}
               onRemove={toggleFilter}
               onClear={clearFilters}
             />
 
             <SmallBody style={styles.resultCount}>
-              {results.length === listings.length
-                ? `${listings.length} apps`
-                : `${results.length} of ${listings.length} apps`}
+              {total === totalListings
+                ? `${totalListings} apps`
+                : `${total} of ${totalListings} apps`}
             </SmallBody>
 
-            {pageResults.length > 0 ? (
+            {results.length > 0 ? (
               <Flex direction="column" gap="xl">
-                {pageResults.map((listing) => (
+                {results.map((listing) => (
                   <BrowseListingRow key={listing.id} listing={listing} />
                 ))}
               </Flex>
@@ -515,12 +487,12 @@ function BrowseQueryField({ query }: { query: string }) {
 
 function ActiveFilterChips({
   filters,
-  listings,
+  facets,
   onRemove,
   onClear,
 }: {
   filters: BrowseFilters;
-  listings: ReadonlyArray<BrowseListing>;
+  facets: BrowseFacets;
   onRemove: (facet: BrowseFacet, value: string) => void;
   onClear: () => void;
 }) {
@@ -544,7 +516,7 @@ function ActiveFilterChips({
   return (
     <Flex align="center" gap="md" style={styles.chips}>
       {chips.map(({ facet, value }) => {
-        const label = getBrowseFilterValueLabel(facet, value, listings);
+        const label = getBrowseFilterValueLabel(facet, value, facets);
         return (
           <Button
             key={`${facet}:${value}`}
@@ -591,7 +563,7 @@ function addFilter(search: BrowseSearch, facet: BrowseFacet, value: string) {
     : toggleBrowseFilter(search, facet, value);
 }
 
-function BrowseListingRow({ listing }: { listing: BrowseListing }) {
+function BrowseListingRow({ listing }: { listing: BrowseListingCard }) {
   const productParams = { productId: listing.slug };
   const handle = listing.productAccountHandle?.replace(/^@/, "");
   // Top-level apps are their own `apps/<name>` category, so only badge ecosystem tools and protocol.

From 5ead98a676b3d2dd3d3b714af2f79bf34526db8c Mon Sep 17 00:00:00 2001
From: Andrew Lisowski <lisowski54@gmail.com>
Date: Sat, 17 Oct 2026 12:46:31 -0700
Subject: [PATCH 3/4] Add /apps filters to fyi.atstore.directory.searchListings

searchListings now accepts the same filters as the browse page (tag,
category, data, minRating, has) and sorts (rating, reviews, favorites,
updated), and runs on the shared, cached browse logic instead of a
separate ilike query. Only the requested page's rows are loaded for the
full card shape. All new params are optional, so existing callers keep
working.

Tag params (web and API) now accept raw tag text or slugs and are
canonicalized to slugs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../fyi/atstore/directory/searchListings.json | 47 ++++++++-
 .../api-directory-listings.functions.ts       | 32 +++---
 src/lexicons/generated/bundle.ts              | 60 +++++++++++-
 src/lib/browse-listings.test.ts               |  7 ++
 src/lib/browse-listings.ts                    | 26 ++++-
 .../_header-layout.developers.atproto.tsx     |  3 +-
 .../atstore-xrpc-handler.server.ts            | 97 ++++++++++---------
 7 files changed, 206 insertions(+), 66 deletions(-)

diff --git a/lexicons/fyi/atstore/directory/searchListings.json b/lexicons/fyi/atstore/directory/searchListings.json
index 7949915..7f1407d 100644
--- a/lexicons/fyi/atstore/directory/searchListings.json
+++ b/lexicons/fyi/atstore/directory/searchListings.json
@@ -75,7 +75,7 @@
     },
     "main": {
       "type": "query",
-      "description": "Directory listing search and pagination (verified listings with a listing.detail AT URI only).",
+      "description": "Directory listing search and pagination (verified listings with a listing.detail AT URI only). Filters match the at-store /apps page: values within one filter are OR'd, different filters are AND'd.",
       "parameters": {
         "type": "params",
         "properties": {
@@ -87,7 +87,50 @@
             "type": "string",
             "maxLength": 24,
             "default": "popular",
-            "enum": ["popular", "newest", "alphabetical"]
+            "enum": [
+              "popular",
+              "rating",
+              "reviews",
+              "favorites",
+              "newest",
+              "updated",
+              "alphabetical"
+            ],
+            "description": "popular = trending score; rating = average rating (unrated last); reviews = review count; favorites = favorite count; newest = created; updated = last updated; alphabetical = name."
+          },
+          "tag": {
+            "type": "array",
+            "maxLength": 20,
+            "items": { "type": "string", "maxLength": 256 },
+            "description": "App tags to match (any). Accepts the tag text from appTags or its slug, e.g. 'developer tool' or 'developer'."
+          },
+          "category": {
+            "type": "array",
+            "maxLength": 20,
+            "items": { "type": "string", "maxLength": 512 },
+            "description": "Category paths to match (any), including descendants, e.g. 'apps/bluesky' or 'apps/bluesky/client'. 'apps' matches top-level apps only."
+          },
+          "data": {
+            "type": "array",
+            "maxLength": 20,
+            "items": { "type": "string", "maxLength": 256 },
+            "description": "Lexicon producers whose records the listing reads or writes (any), as the first two NSID segments, e.g. 'app.bsky'."
+          },
+          "minRating": {
+            "type": "string",
+            "maxLength": 8,
+            "knownValues": ["3", "4", "4.5"],
+            "description": "Only listings with an average rating at or above this value."
+          },
+          "has": {
+            "type": "array",
+            "maxLength": 3,
+            "items": {
+              "type": "string",
+              "maxLength": 32,
+              "knownValues": ["open-source", "donations", "official"]
+            },
+            "description": "Required extras (all): open-source (has a source link), donations (has a donate link), official (has a product account)."
           },
           "limit": {
             "type": "integer",
diff --git a/src/integrations/tanstack-query/api-directory-listings.functions.ts b/src/integrations/tanstack-query/api-directory-listings.functions.ts
index 86e32a7..72e5bef 100644
--- a/src/integrations/tanstack-query/api-directory-listings.functions.ts
+++ b/src/integrations/tanstack-query/api-directory-listings.functions.ts
@@ -2626,8 +2626,8 @@ function getLexiconCompatibleAppsPageQueryOptions(
 }
 
 /**
- * Every public non-protocol listing with the fields `/apps` filters and sorts on, in "popular"
- * order (`popularRank`).
+ * Every verified listing with the fields browse filters and sorts on, in "popular" order
+ * (`popularRank`). Shared by `/apps` and `fyi.atstore.directory.searchListings`.
  */
 async function loadBrowseListings(context: {
   db: Database;
@@ -2646,12 +2646,7 @@ async function loadBrowseListings(context: {
     })
     .from(table)
     .leftJoin(probe, eq(probe.storeListingId, table.id))
-    .where(
-      listingPublicWhere(
-        table,
-        sql`not (${sqlCategorySlugsMatchesLike(table.categorySlugs, "protocol/%")})`,
-      ),
-    )
+    .where(listingPublicWhere(table))
     .orderBy(...orderByPopularListingSort(table));
 
   return rows.map((row, index) => {
@@ -2678,6 +2673,7 @@ async function loadBrowseListings(context: {
       updatedAt: row.updatedAt.toISOString(),
       popularRank: index,
       dataNsids: [...new Set(dataNsids)],
+      hasAtUri: Boolean(row.atUri?.trim()),
       hasSourceLink: linkTypes.has("source"),
       acceptsDonations: linkTypes.has("donate"),
     };
@@ -2711,15 +2707,26 @@ function getCachedBrowseListings(context: {
   return browseListingsCache.listings;
 }
 
-/** One page of `/apps` results plus facet counts; filtering runs here so the client never loads the catalog. */
+function isProtocolListing(listing: Pick<BrowseListing, "categorySlugs">) {
+  return listing.categorySlugs.some((slug) => slug.startsWith("protocol/"));
+}
+
+/**
+ * One page of `/apps` results plus facet counts; filtering runs here so the client never loads
+ * the catalog. Protocol tooling is left out of the web browse page.
+ */
 const getBrowsePage = createServerFn({ method: "GET" })
   .middleware([dbMiddleware])
   .inputValidator((data: BrowseSearch) =>
     validateBrowseSearch(data as Record<string, unknown>),
   )
-  .handler(async ({ data, context }) =>
-    queryBrowseListings(await getCachedBrowseListings(context), data),
-  );
+  .handler(async ({ data, context }) => {
+    const listings = await getCachedBrowseListings(context);
+    return queryBrowseListings(
+      listings.filter((listing) => !isProtocolListing(listing)),
+      data,
+    );
+  });
 
 function getBrowsePageQueryOptions(search: BrowseSearch) {
   return queryOptions({
@@ -7793,6 +7800,7 @@ export async function refreshListingPageSnapshot(
 }
 
 export const directoryListingXrpcHelpers = {
+  getCachedBrowseListings,
   listingPublicWhere,
   listingXrpcPublicWhere,
   getListingSelect,
diff --git a/src/lexicons/generated/bundle.ts b/src/lexicons/generated/bundle.ts
index 3e6ef8a..12b921a 100644
--- a/src/lexicons/generated/bundle.ts
+++ b/src/lexicons/generated/bundle.ts
@@ -413,7 +413,7 @@ export const lexicons = [
       },
       "main": {
         "type": "query",
-        "description": "Directory listing search and pagination (verified listings with a listing.detail AT URI only).",
+        "description": "Directory listing search and pagination (verified listings with a listing.detail AT URI only). Filters match the at-store /apps page: values within one filter are OR'd, different filters are AND'd.",
         "parameters": {
           "type": "params",
           "properties": {
@@ -427,9 +427,65 @@ export const lexicons = [
               "default": "popular",
               "enum": [
                 "popular",
+                "rating",
+                "reviews",
+                "favorites",
                 "newest",
+                "updated",
                 "alphabetical"
-              ]
+              ],
+              "description": "popular = trending score; rating = average rating (unrated last); reviews = review count; favorites = favorite count; newest = created; updated = last updated; alphabetical = name."
+            },
+            "tag": {
+              "type": "array",
+              "maxLength": 20,
+              "items": {
+                "type": "string",
+                "maxLength": 256
+              },
+              "description": "App tags to match (any). Accepts the tag text from appTags or its slug, e.g. 'developer tool' or 'developer'."
+            },
+            "category": {
+              "type": "array",
+              "maxLength": 20,
+              "items": {
+                "type": "string",
+                "maxLength": 512
+              },
+              "description": "Category paths to match (any), including descendants, e.g. 'apps/bluesky' or 'apps/bluesky/client'. 'apps' matches top-level apps only."
+            },
+            "data": {
+              "type": "array",
+              "maxLength": 20,
+              "items": {
+                "type": "string",
+                "maxLength": 256
+              },
+              "description": "Lexicon producers whose records the listing reads or writes (any), as the first two NSID segments, e.g. 'app.bsky'."
+            },
+            "minRating": {
+              "type": "string",
+              "maxLength": 8,
+              "knownValues": [
+                "3",
+                "4",
+                "4.5"
+              ],
+              "description": "Only listings with an average rating at or above this value."
+            },
+            "has": {
+              "type": "array",
+              "maxLength": 3,
+              "items": {
+                "type": "string",
+                "maxLength": 32,
+                "knownValues": [
+                  "open-source",
+                  "donations",
+                  "official"
+                ]
+              },
+              "description": "Required extras (all): open-source (has a source link), donations (has a donate link), official (has a product account)."
             },
             "limit": {
               "type": "integer",
diff --git a/src/lib/browse-listings.test.ts b/src/lib/browse-listings.test.ts
index 8a85f58..0ae3863 100644
--- a/src/lib/browse-listings.test.ts
+++ b/src/lib/browse-listings.test.ts
@@ -30,6 +30,7 @@ function listing(overrides: Partial<BrowseListing>): BrowseListing {
     updatedAt: "2026-01-01T00:00:00.000Z",
     popularRank: 0,
     dataNsids: [],
+    hasAtUri: true,
     hasSourceLink: false,
     acceptsDonations: false,
     ...overrides,
@@ -85,6 +86,12 @@ describe("validateBrowseSearch", () => {
     });
   });
 
+  it("canonicalizes raw tags and slugs", () => {
+    expect(
+      validateBrowseSearch({ tag: "developer tool,personal-page,Social" }).tag,
+    ).toBe("developer,personal-page,social");
+  });
+
   it("keeps non-default sort, rating and page", () => {
     const search = validateBrowseSearch({ sort: "rating", rating: 4, page: 3 });
     expect(search.sort).toBe("rating");
diff --git a/src/lib/browse-listings.ts b/src/lib/browse-listings.ts
index 75aadf3..79680ec 100644
--- a/src/lib/browse-listings.ts
+++ b/src/lib/browse-listings.ts
@@ -23,6 +23,8 @@ export interface BrowseListing {
   popularRank: number;
   /** Repo collection NSIDs requested in the listing's OAuth scopes. */
   dataNsids: Array<string>;
+  /** Has a published `fyi.atstore.listing.detail` record (required for XRPC results). */
+  hasAtUri: boolean;
   hasSourceLink: boolean;
   acceptsDonations: boolean;
 }
@@ -154,7 +156,12 @@ export function validateBrowseSearch(
   return {
     q: asTrimmedString(search.q),
     in: joinList(splitList(asTrimmedString(search.in))),
-    tag: joinList(splitList(asTrimmedString(search.tag))),
+    // Accept raw tags ("developer tool") or slugs ("developer-tool") and canonicalize.
+    tag: joinList(
+      splitList(asTrimmedString(search.tag)).map((tag) =>
+        getAppTagSlug(tag.replaceAll("-", " ")),
+      ),
+    ),
     data: joinList(splitList(asTrimmedString(search.data))),
     rating: (BROWSE_MIN_RATINGS as ReadonlyArray<number>).includes(rating)
       ? rating
@@ -649,16 +656,25 @@ function toBrowseListingCard(listing: BrowseListing): BrowseListingCard {
   };
 }
 
-/** Filter, facet, sort and paginate — runs server-side so the client only gets one page. */
-export function queryBrowseListings(
+/** Every listing matching `search`, in `search.sort` order (no pagination). */
+export function filterAndSortBrowseListings(
   listings: ReadonlyArray<BrowseListing>,
   search: BrowseSearch,
-): BrowsePage {
+): Array<BrowseListing> {
   const filters = getBrowseFilters(search);
-  const matching = sortBrowseListings(
+  return sortBrowseListings(
     listings.filter((listing) => listingMatchesFilters(listing, filters)),
     search.sort ?? "popular",
   );
+}
+
+/** Filter, facet, sort and paginate — runs server-side so the client only gets one page. */
+export function queryBrowseListings(
+  listings: ReadonlyArray<BrowseListing>,
+  search: BrowseSearch,
+): BrowsePage {
+  const filters = getBrowseFilters(search);
+  const matching = filterAndSortBrowseListings(listings, search);
   const totalPages = Math.max(1, Math.ceil(matching.length / BROWSE_PAGE_SIZE));
   const page = Math.min(search.page ?? 1, totalPages);
 
diff --git a/src/routes/_header-layout.developers.atproto.tsx b/src/routes/_header-layout.developers.atproto.tsx
index eb52073..1a10872 100644
--- a/src/routes/_header-layout.developers.atproto.tsx
+++ b/src/routes/_header-layout.developers.atproto.tsx
@@ -41,7 +41,8 @@ const METHOD_ROWS: ReadonlyArray<{
   {
     nsid: ATSTORE_XRPC_METHOD.directorySearchListings,
     method: "GET",
-    summary: "Search public listings with pagination (`q`, `sort`, `cursor`).",
+    summary:
+      "Search and filter public listings, same filters as /apps (`q`, `sort`, `tag`, `category`, `data`, `minRating`, `has`, `limit`, `cursor`).",
   },
   {
     nsid: ATSTORE_XRPC_METHOD.directoryGetListing,
diff --git a/src/server/atproto-xrpc/atstore-xrpc-handler.server.ts b/src/server/atproto-xrpc/atstore-xrpc-handler.server.ts
index f075907..d23e437 100644
--- a/src/server/atproto-xrpc/atstore-xrpc-handler.server.ts
+++ b/src/server/atproto-xrpc/atstore-xrpc-handler.server.ts
@@ -7,8 +7,13 @@ import { directoryListingXrpcHelpers } from "#/integrations/tanstack-query/api-d
 import { parseAtUriParts } from "#/lib/atproto/at-uri";
 import { ATSTORE_XRPC_METHOD, NSID } from "#/lib/atproto/nsids";
 import { fetchBlueskyPublicProfileFields } from "#/lib/bluesky-public-profile";
+import {
+  filterAndSortBrowseListings,
+  joinList,
+  validateBrowseSearch,
+} from "#/lib/browse-listings";
 import { getAtprotoSessionForRequest } from "#/middleware/auth";
-import { asc, desc, eq, ilike, or, sql } from "drizzle-orm";
+import { desc, eq, inArray, or, sql } from "drizzle-orm";
 
 const LEGACY_DETAIL_SQL = {
   rawCategoryHint: sql<string | null>`null::text`.as("rawCategoryHint"),
@@ -113,15 +118,22 @@ async function handleDescribe() {
   });
 }
 
+/** Repeated XRPC array params (`?tag=a&tag=b`), also accepting comma-joined values. */
+function getListParam(url: URL, name: string): string | undefined {
+  return joinList(
+    url.searchParams
+      .getAll(name)
+      .flatMap((value) => value.split(","))
+      .map((value) => value.trim())
+      .filter(Boolean),
+  );
+}
+
+/**
+ * Filters and sorts with the same logic as `/apps` (over the cached catalog), then loads full
+ * card rows for just the requested page.
+ */
 async function handleSearchListings(url: URL) {
-  const q = url.searchParams.get("q")?.trim();
-  const sortRaw = url.searchParams.get("sort")?.trim() ?? "popular";
-  const sort =
-    sortRaw === "newest"
-      ? "newest"
-      : sortRaw === "alphabetical"
-        ? "alphabetical"
-        : "popular";
   const limitParam = Number(url.searchParams.get("limit") ?? "24");
   const limit = Number.isFinite(limitParam)
     ? Math.min(100, Math.max(1, Math.floor(limitParam)))
@@ -133,49 +145,46 @@ async function handleSearchListings(url: URL) {
   }
   const start = offset ?? 0;
 
-  const table = schema.storeListings;
+  const search = validateBrowseSearch({
+    q: url.searchParams.get("q") ?? undefined,
+    sort: url.searchParams.get("sort") ?? undefined,
+    tag: getListParam(url, "tag"),
+    in: getListParam(url, "category"),
+    data: getListParam(url, "data"),
+    rating: url.searchParams.get("minRating") ?? undefined,
+    has: getListParam(url, "has"),
+  });
+
   const {
+    getCachedBrowseListings,
     listingXrpcPublicWhere,
     getListingSelect,
-    orderByPopularListingSort,
     toListingCardXrpc,
   } = directoryListingXrpcHelpers;
 
-  const searchClause = q
-    ? or(
-        ilike(table.name, `%${q}%`),
-        ilike(table.tagline, `%${q}%`),
-        ilike(table.fullDescription, `%${q}%`),
-        ilike(
-          sql<string>`array_to_string(${table.categorySlugs}, ' ')`,
-          `%${q}%`,
-        ),
-        ilike(sql<string>`array_to_string(${table.appTags}, ' ')`, `%${q}%`),
-      )
-    : undefined;
-
-  const listingSelect = getListingSelect(table);
-  const orderBy =
-    sort === "newest"
-      ? [desc(table.createdAt)]
-      : sort === "alphabetical"
-        ? [asc(table.name)]
-        : orderByPopularListingSort(table);
-
-  const rows = await db
-    .select(listingSelect)
-    .from(table)
-    .where(listingXrpcPublicWhere(table, searchClause))
-    .orderBy(...orderBy)
-    .offset(start)
-    .limit(limit + 1);
-
-  const hasMore = rows.length > limit;
-  const slice = hasMore ? rows.slice(0, limit) : rows;
-  const listings = slice.map((row) =>
-    listingCardXrpcJson(toListingCardXrpc(row)),
+  const catalog = await getCachedBrowseListings({ db, schema });
+  const matching = filterAndSortBrowseListings(
+    catalog.filter((listing) => listing.hasAtUri),
+    search,
   );
+  const pageIds = matching
+    .slice(start, start + limit)
+    .map((listing) => listing.id);
 
+  const table = schema.storeListings;
+  const rows =
+    pageIds.length === 0
+      ? []
+      : await db
+          .select(getListingSelect(table))
+          .from(table)
+          .where(listingXrpcPublicWhere(table, inArray(table.id, pageIds)));
+  const rowsById = new Map(rows.map((row) => [row.id, row]));
+  const listings = pageIds
+    .flatMap((id) => rowsById.get(id) ?? [])
+    .map((row) => listingCardXrpcJson(toListingCardXrpc(row)));
+
+  const hasMore = matching.length > start + limit;
   return xrpcJson({
     listings,
     ...(hasMore ? { cursor: encodeOffsetCursor(start + limit) } : {}),

From fe5e2e8145c20ca493ad747e34412ad8df81d957 Mon Sep 17 00:00:00 2001
From: Andrew Lisowski <lisowski54@gmail.com>
Date: Sat, 17 Oct 2026 12:53:39 -0700
Subject: [PATCH 4/4] Fix pre-existing format and lint failures

CI's format and lint jobs were already failing on main. Run oxfmt and
oxlint --fix, then fix the rest by hand:

- Replace non-null assertions in generate-listing-copy with nullable
  "good copy" values (same behavior: not-weak implies non-empty).
- Use Boolean-free null filters, named Anthropic import, replaceAll
  with a string.
- site-brand-icon: oxfmt lowercases hex literals while
  unicorn/number-literal-case wants uppercase; disable the rule for
  that file, matching the existing og.* override.
- lex:gen now formats the generated bundle so regenerating it doesn't
  break format:check.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 config/oxlint/overrides.json       |    6 +-
 package.json                       |    2 +-
 scripts/generate-listing-copy.ts   |  542 ++++-----
 scripts/generate-listing-images.ts |   27 +-
 src/lexicons/generated/bundle.ts   | 1644 ++++++++++++++--------------
 src/lib/gemini-flash-image-gen.ts  |   62 +-
 src/lib/listing-icon-prompts.ts    |   18 +-
 src/lib/listing-page-screenshot.ts |   52 +-
 src/lib/site-brand-icon.ts         |  667 +++++------
 9 files changed, 1521 insertions(+), 1499 deletions(-)

diff --git a/config/oxlint/overrides.json b/config/oxlint/overrides.json
index 3c2dfe0..6a69991 100644
--- a/config/oxlint/overrides.json
+++ b/config/oxlint/overrides.json
@@ -320,7 +320,11 @@
       "plugins": ["typescript"]
     },
     {
-      "files": ["src/routes/og.review.tsx", "src/routes/og.tag.tsx"],
+      "files": [
+        "src/lib/site-brand-icon.ts",
+        "src/routes/og.review.tsx",
+        "src/routes/og.tag.tsx"
+      ],
       "rules": {
         "unicorn/number-literal-case": "off"
       }
diff --git a/package.json b/package.json
index b9a0eac..d213bfd 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "db:studio": "drizzle-kit studio",
     "db:backup": "tsx -r dotenv/config scripts/db-backup.ts",
     "db:seed": "tsx -r dotenv/config scripts/db-seed.ts",
-    "lex:gen": "bash -c 'mkdir -p src/lexicons/generated && pnpm exec lex gen-ts-obj lexicons/fyi/atstore/directory/searchListings.json lexicons/fyi/atstore/directory/getListing.json lexicons/fyi/atstore/reviews/listForListing.json lexicons/fyi/atstore/server/describe.json lexicons/fyi/atstore/profile.json lexicons/fyi/atstore/listing/detail.json lexicons/fyi/atstore/listing/review.json lexicons/fyi/atstore/listing/reviewReply.json lexicons/fyi/atstore/listing/favorite.json lexicons/fyi/atstore/auth/basic.json lexicons/fyi/atstore/auth/thirdPartyReviews.json > src/lexicons/generated/bundle.ts'",
+    "lex:gen": "bash -c 'mkdir -p src/lexicons/generated && pnpm exec lex gen-ts-obj lexicons/fyi/atstore/directory/searchListings.json lexicons/fyi/atstore/directory/getListing.json lexicons/fyi/atstore/reviews/listForListing.json lexicons/fyi/atstore/server/describe.json lexicons/fyi/atstore/profile.json lexicons/fyi/atstore/listing/detail.json lexicons/fyi/atstore/listing/review.json lexicons/fyi/atstore/listing/reviewReply.json lexicons/fyi/atstore/listing/favorite.json lexicons/fyi/atstore/auth/basic.json lexicons/fyi/atstore/auth/thirdPartyReviews.json > src/lexicons/generated/bundle.ts && pnpm exec oxfmt src/lexicons/generated/bundle.ts'",
     "lex:lint": "node scripts/goat-lex.mjs lex lint",
     "lex:check-dns": "node scripts/goat-lex.mjs lex check-dns",
     "lex:status": "node scripts/goat-lex.mjs lex status",
diff --git a/scripts/generate-listing-copy.ts b/scripts/generate-listing-copy.ts
index 09d0841..9a49b95 100644
--- a/scripts/generate-listing-copy.ts
+++ b/scripts/generate-listing-copy.ts
@@ -1,119 +1,129 @@
 #!/usr/bin/env node
-import 'dotenv/config'
+import "dotenv/config";
+import { Anthropic } from "@anthropic-ai/sdk";
+import { desc, eq } from "drizzle-orm";
+import { chromium } from "playwright";
 
-import Anthropic from '@anthropic-ai/sdk'
-import { desc, eq } from 'drizzle-orm'
-import { chromium } from 'playwright'
-
-import { db, dbClient } from '../src/db/index.server'
-import { storeListings } from '../src/db/schema'
+import { db, dbClient } from "../src/db/index.server";
+import { storeListings } from "../src/db/schema";
 import {
   isMeaningfulListingCopy,
   sanitizeListingDescription,
   sanitizeListingTagline,
   stripEmbeddedListingMetadata,
-} from '../src/lib/listing-copy'
+} from "../src/lib/listing-copy";
 
-const DEFAULT_MODEL = 'claude-sonnet-4-20250514'
+const DEFAULT_MODEL = "claude-sonnet-4-20250514";
 const GENERIC_TAGLINE_PATTERNS = [
   /^a tool for the bluesky and at protocol ecosystem\.?$/i,
   /^a bluesky client\.?$/i,
   /^alternative bluesky client\.?$/i,
   /^find your community\.?$/i,
-]
+];
 
 type CandidateListing = {
-  id: string
-  name: string
-  sourceUrl: string
-  externalUrl: string | null
-  tagline: string | null
-  fullDescription: string | null
-  rawCategoryHint: string | null
-  scope: string | null
-  productType: string | null
-  domain: string | null
-}
+  id: string;
+  name: string;
+  sourceUrl: string;
+  externalUrl: string | null;
+  tagline: string | null;
+  fullDescription: string | null;
+  rawCategoryHint: string | null;
+  scope: string | null;
+  productType: string | null;
+  domain: string | null;
+};
 
 function taxonomyHintsFromCategorySlugs(
   slugs: string[] | null | undefined,
-): Pick<CandidateListing, 'rawCategoryHint' | 'scope' | 'productType' | 'domain'> {
-  const primary = slugs?.[0]?.trim()
+): Pick<
+  CandidateListing,
+  "rawCategoryHint" | "scope" | "productType" | "domain"
+> {
+  const primary = slugs?.[0]?.trim();
   if (!primary) {
-    return { rawCategoryHint: null, scope: null, productType: null, domain: null }
-  }
-  const parts = primary.split('/').map((s) => s.trim()).filter(Boolean)
+    return {
+      rawCategoryHint: null,
+      scope: null,
+      productType: null,
+      domain: null,
+    };
+  }
+  const parts = primary
+    .split("/")
+    .map((s) => s.trim())
+    .filter(Boolean);
   return {
     rawCategoryHint: null,
     scope: primary,
     productType: parts[0] ?? null,
     domain: parts[1] ?? null,
-  }
+  };
 }
 
 type ScriptArgs = {
-  dryRun: boolean
-  force: boolean
-  limit: number | null
-  id: string | null
-  help: boolean
-}
+  dryRun: boolean;
+  force: boolean;
+  limit: number | null;
+  id: string | null;
+  help: boolean;
+};
 
 type ExtractedPageCopy = {
-  finalUrl: string
-  title: string | null
-  metaDescription: string | null
-  ogDescription: string | null
-  headings: string[]
-  paragraphs: string[]
-}
+  finalUrl: string;
+  title: string | null;
+  metaDescription: string | null;
+  ogDescription: string | null;
+  headings: Array<string>;
+  paragraphs: Array<string>;
+};
 
 type GeneratedCopy = {
-  tagline: string
-  fullDescription: string
-}
+  tagline: string;
+  fullDescription: string;
+};
 
-function parseArgs(argv: string[]): ScriptArgs {
+function parseArgs(argv: Array<string>): ScriptArgs {
   const out: ScriptArgs = {
     dryRun: false,
     force: false,
     limit: null,
     id: null,
     help: false,
-  }
+  };
 
   for (let i = 0; i < argv.length; i++) {
-    const arg = argv[i]
-    if (arg === '--help' || arg === '-h') {
-      out.help = true
-      continue
+    const arg = argv[i];
+    if (arg === "--help" || arg === "-h") {
+      out.help = true;
+      continue;
     }
-    if (arg === '--dry-run') {
-      out.dryRun = true
-      continue
+    if (arg === "--dry-run") {
+      out.dryRun = true;
+      continue;
     }
-    if (arg === '--force') {
-      out.force = true
-      continue
+    if (arg === "--force") {
+      out.force = true;
+      continue;
     }
-    if (arg === '--limit' || arg === '-l') {
-      const raw = argv[++i]
-      const value = Number.parseInt(raw ?? '', 10)
+    if (arg === "--limit" || arg === "-l") {
+      const raw = argv[++i];
+      const value = Number.parseInt(raw ?? "", 10);
       if (!Number.isFinite(value) || value <= 0) {
-        throw new Error(`Invalid --limit value "${raw ?? ''}"`)
+        throw new Error(`Invalid --limit value "${raw ?? ""}"`);
       }
-      out.limit = value
-      continue
+      out.limit = value;
+      continue;
     }
-    if (arg === '--id') {
-      out.id = argv[++i] ?? null
-      continue
+    if (arg === "--id") {
+      out.id = argv[++i] ?? null;
+      continue;
     }
 
-    throw new Error(`Unknown argument: ${arg}`)
+    throw new Error(`Unknown argument: ${arg}`);
   }
 
-  return out
+  return out;
 }
 
 function printHelp(): void {
@@ -130,103 +140,105 @@ Options:
 Environment:
   ANTHROPIC_API_KEY or ANTHROPIC_KEY   Required when fallback generation is needed
   ANTHROPIC_MODEL                      Optional (default: ${DEFAULT_MODEL})
-`)
+`);
 }
 
 function getAnthropicApiKey(): string {
-  const key = process.env.ANTHROPIC_API_KEY ?? process.env.ANTHROPIC_KEY ?? ''
+  const key = process.env.ANTHROPIC_API_KEY ?? process.env.ANTHROPIC_KEY ?? "";
   if (!key) {
     throw new Error(
-      'Missing API key: set ANTHROPIC_API_KEY (or ANTHROPIC_KEY) in the environment.',
-    )
+      "Missing API key: set ANTHROPIC_API_KEY (or ANTHROPIC_KEY) in the environment.",
+    );
   }
-  return key
+  return key;
 }
 
 function normalizeText(value: string | null | undefined): string | null {
   if (!value) {
-    return null
+    return null;
   }
 
-  const cleaned = stripEmbeddedListingMetadata(value)
+  const cleaned = stripEmbeddedListingMetadata(value);
   if (!cleaned) {
-    return null
+    return null;
   }
 
   return cleaned
-    .replace(/\u00a0/g, ' ')
-    .replace(/[ \t]{2,}/g, ' ')
-    .replace(/\n{3,}/g, '\n\n')
-    .trim()
+    .replaceAll("\u00A0", " ")
+    .replaceAll(/[ \t]{2,}/g, " ")
+    .replaceAll(/\n{3,}/g, "\n\n")
+    .trim();
 }
 
-function dedupeStrings(values: Array<string | null | undefined>): string[] {
-  const seen = new Set<string>()
-  const out: string[] = []
+function dedupeStrings(
+  values: Array<string | null | undefined>,
+): Array<string> {
+  const seen = new Set<string>();
+  const out: Array<string> = [];
 
   for (const value of values) {
-    const cleaned = normalizeText(value)
-    if (!cleaned) continue
-    const key = cleaned.toLowerCase()
-    if (seen.has(key)) continue
-    seen.add(key)
-    out.push(cleaned)
+    const cleaned = normalizeText(value);
+    if (!cleaned) continue;
+    const key = cleaned.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(cleaned);
   }
 
-  return out
+  return out;
 }
 
 function shortenToSentence(value: string, maxLength = 160): string {
-  const cleaned = normalizeText(value) ?? value.trim()
+  const cleaned = normalizeText(value) ?? value.trim();
   if (cleaned.length <= maxLength) {
-    return cleaned
+    return cleaned;
   }
 
-  const sentenceMatch = cleaned.match(/^(.{30,200}?[.!?])(?:\s|$)/)
+  const sentenceMatch = cleaned.match(/^(.{30,200}?[.!?])(?:\s|$)/);
   if (sentenceMatch?.[1] && sentenceMatch[1].length <= maxLength) {
-    return sentenceMatch[1].trim()
+    return sentenceMatch[1].trim();
   }
 
-  return `${cleaned.slice(0, maxLength - 1).trimEnd()}…`
+  return `${cleaned.slice(0, maxLength - 1).trimEnd()}…`;
 }
 
 function isWeakTagline(value: string | null | undefined): boolean {
-  const cleaned = sanitizeListingTagline(value)
+  const cleaned = sanitizeListingTagline(value);
   if (!cleaned) {
-    return true
+    return true;
   }
   if (cleaned.length < 24) {
-    return true
+    return true;
   }
-  return GENERIC_TAGLINE_PATTERNS.some((pattern) => pattern.test(cleaned))
+  return GENERIC_TAGLINE_PATTERNS.some((pattern) => pattern.test(cleaned));
 }
 
 function hasEmbeddedMetadata(value: string | null | undefined): boolean {
-  const raw = typeof value === 'string' ? value.trim() : ''
+  const raw = typeof value === "string" ? value.trim() : "";
   if (!raw) {
-    return false
+    return false;
   }
 
-  return sanitizeListingDescription(raw) !== raw
+  return sanitizeListingDescription(raw) !== raw;
 }
 
 function isWeakDescription(value: string | null | undefined): boolean {
-  const cleaned = sanitizeListingDescription(value)
+  const cleaned = sanitizeListingDescription(value);
   if (!cleaned) {
-    return true
+    return true;
   }
   if (cleaned.length < 80) {
-    return true
+    return true;
   }
   if (hasEmbeddedMetadata(value)) {
-    return true
+    return true;
   }
-  return !isMeaningfulListingCopy(cleaned, { minLength: 80 })
+  return !isMeaningfulListingCopy(cleaned, { minLength: 80 });
 }
 
 function needsCopyRefresh(listing: CandidateListing, force: boolean): boolean {
   if (force) {
-    return true
+    return true;
   }
 
   return (
@@ -234,34 +246,34 @@ function needsCopyRefresh(listing: CandidateListing, force: boolean): boolean {
     isWeakDescription(listing.fullDescription) ||
     hasEmbeddedMetadata(listing.tagline) ||
     hasEmbeddedMetadata(listing.fullDescription)
-  )
+  );
 }
 
 function getListingUrl(listing: CandidateListing): string {
-  return listing.externalUrl || listing.sourceUrl
+  return listing.externalUrl || listing.sourceUrl;
 }
 
 function isLikelyBoilerplateText(value: string): boolean {
-  const normalized = value.trim().toLowerCase()
+  const normalized = value.trim().toLowerCase();
   if (normalized.length < 30) {
-    return true
+    return true;
   }
 
   return (
-    normalized.includes('cookie') ||
-    normalized.includes('privacy policy') ||
-    normalized.includes('terms of service') ||
-    normalized.includes('all rights reserved') ||
-    normalized.includes('sign in') ||
-    normalized.includes('log in') ||
-    normalized.includes('create account')
-  )
+    normalized.includes("cookie") ||
+    normalized.includes("privacy policy") ||
+    normalized.includes("terms of service") ||
+    normalized.includes("all rights reserved") ||
+    normalized.includes("sign in") ||
+    normalized.includes("log in") ||
+    normalized.includes("create account")
+  );
 }
 
 async function extractPageCopy(url: string): Promise<ExtractedPageCopy> {
   const browser = await chromium.launch({
     headless: true,
-  })
+  });
 
   try {
     const page = await browser.newPage({
@@ -269,47 +281,57 @@ async function extractPageCopy(url: string): Promise<ExtractedPageCopy> {
         width: 1440,
         height: 960,
       },
-    })
+    });
 
     await page.goto(url, {
-      waitUntil: 'domcontentloaded',
+      waitUntil: "domcontentloaded",
       timeout: 30_000,
-    })
-    await page.waitForTimeout(2_500)
-
-    const [title, finalUrl, metaDescription, ogDescription, headings, paragraphs] =
-      await Promise.all([
-        page.title(),
-        page.url(),
-        page
-          .locator('meta[name="description"]')
-          .first()
-          .getAttribute('content')
-          .catch(() => null),
-        page
-          .locator('meta[property="og:description"]')
-          .first()
-          .getAttribute('content')
-          .catch(() => null),
-        page
-          .locator('main h1, main h2, main h3, article h1, article h2, article h3, [role="main"] h1, [role="main"] h2, [role="main"] h3, body h1, body h2, body h3')
-          .evaluateAll((nodes) =>
-            nodes
-              .map((node) => node.textContent ?? '')
-              .map((value) => value.replace(/\s+/g, ' ').trim())
-              .filter((value) => value.length > 0)
-              .slice(0, 10),
-          ),
-        page
-          .locator('main p, main li, article p, article li, [role="main"] p, [role="main"] li, body p, body li')
-          .evaluateAll((nodes) =>
-            nodes
-              .map((node) => node.textContent ?? '')
-              .map((value) => value.replace(/\s+/g, ' ').trim())
-              .filter((value) => value.length >= 30)
-              .slice(0, 24),
-          ),
-      ])
+    });
+    await page.waitForTimeout(2500);
+
+    const [
+      title,
+      finalUrl,
+      metaDescription,
+      ogDescription,
+      headings,
+      paragraphs,
+    ] = await Promise.all([
+      page.title(),
+      page.url(),
+      page
+        .locator('meta[name="description"]')
+        .first()
+        .getAttribute("content")
+        .catch(() => null),
+      page
+        .locator('meta[property="og:description"]')
+        .first()
+        .getAttribute("content")
+        .catch(() => null),
+      page
+        .locator(
+          'main h1, main h2, main h3, article h1, article h2, article h3, [role="main"] h1, [role="main"] h2, [role="main"] h3, body h1, body h2, body h3',
+        )
+        .evaluateAll((nodes) =>
+          nodes
+            .map((node) => node.textContent ?? "")
+            .map((value) => value.replaceAll(/\s+/g, " ").trim())
+            .filter((value) => value.length > 0)
+            .slice(0, 10),
+        ),
+      page
+        .locator(
+          'main p, main li, article p, article li, [role="main"] p, [role="main"] li, body p, body li',
+        )
+        .evaluateAll((nodes) =>
+          nodes
+            .map((node) => node.textContent ?? "")
+            .map((value) => value.replaceAll(/\s+/g, " ").trim())
+            .filter((value) => value.length >= 30)
+            .slice(0, 24),
+        ),
+    ]);
 
     return {
       finalUrl,
@@ -318,9 +340,9 @@ async function extractPageCopy(url: string): Promise<ExtractedPageCopy> {
       ogDescription,
       headings: dedupeStrings(headings),
       paragraphs: dedupeStrings(paragraphs),
-    }
+    };
   } finally {
-    await browser.close()
+    await browser.close();
   }
 }
 
@@ -331,53 +353,57 @@ function chooseSiteTagline(extracted: ExtractedPageCopy): string | null {
     extracted.headings[1],
     extracted.paragraphs[0],
     extracted.title,
-  ])
+  ]);
 
   for (const candidate of candidates) {
-    if (isLikelyBoilerplateText(candidate)) continue
-    if (candidate.length < 24) continue
-    return shortenToSentence(candidate, 140)
+    if (isLikelyBoilerplateText(candidate)) continue;
+    if (candidate.length < 24) continue;
+    return shortenToSentence(candidate, 140);
   }
 
-  return null
+  return null;
 }
 
 function chooseSiteDescription(extracted: ExtractedPageCopy): string | null {
-  const parts: string[] = []
+  const parts: Array<string> = [];
 
   for (const paragraph of extracted.paragraphs) {
-    if (isLikelyBoilerplateText(paragraph)) continue
-    if (parts.some((existing) => existing.toLowerCase() === paragraph.toLowerCase())) {
-      continue
+    if (isLikelyBoilerplateText(paragraph)) continue;
+    if (
+      parts.some(
+        (existing) => existing.toLowerCase() === paragraph.toLowerCase(),
+      )
+    ) {
+      continue;
     }
-    parts.push(paragraph)
-    if (parts.join('\n\n').length >= 420) {
-      break
+    parts.push(paragraph);
+    if (parts.join("\n\n").length >= 420) {
+      break;
     }
   }
 
-  const joined = normalizeText(parts.join('\n\n'))
+  const joined = normalizeText(parts.join("\n\n"));
   if (joined && joined.length >= 80) {
-    return joined
+    return joined;
   }
 
   const fallback = dedupeStrings([
     extracted.metaDescription,
     extracted.ogDescription,
     extracted.paragraphs[0],
-  ])[0]
+  ])[0];
 
-  return fallback ?? null
+  return fallback ?? null;
 }
 
 async function generateCopyWithAnthropic(input: {
-  listing: CandidateListing
-  extracted: ExtractedPageCopy
-  preferredTagline: string | null
-  preferredDescription: string | null
+  listing: CandidateListing;
+  extracted: ExtractedPageCopy;
+  preferredTagline: string | null;
+  preferredDescription: string | null;
 }): Promise<GeneratedCopy> {
-  const client = new Anthropic({ apiKey: getAnthropicApiKey() })
-  const model = process.env.ANTHROPIC_MODEL ?? DEFAULT_MODEL
+  const client = new Anthropic({ apiKey: getAnthropicApiKey() });
+  const model = process.env.ANTHROPIC_MODEL ?? DEFAULT_MODEL;
 
   const payload = {
     name: input.listing.name,
@@ -388,7 +414,9 @@ async function generateCopyWithAnthropic(input: {
     productType: input.listing.productType,
     domain: input.listing.domain,
     currentTagline: sanitizeListingTagline(input.listing.tagline),
-    currentDescription: sanitizeListingDescription(input.listing.fullDescription),
+    currentDescription: sanitizeListingDescription(
+      input.listing.fullDescription,
+    ),
     preferredTagline: input.preferredTagline,
     preferredDescription: input.preferredDescription,
     pageTitle: input.extracted.title,
@@ -396,7 +424,7 @@ async function generateCopyWithAnthropic(input: {
     ogDescription: input.extracted.ogDescription,
     headings: input.extracted.headings.slice(0, 8),
     paragraphs: input.extracted.paragraphs.slice(0, 10),
-  }
+  };
 
   const message = await client.messages.create({
     model,
@@ -414,94 +442,96 @@ Rules:
 - Return JSON only with keys "tagline" and "fullDescription".`,
     messages: [
       {
-        role: 'user',
+        role: "user",
         content: [
           {
-            type: 'text',
+            type: "text",
             text: JSON.stringify(payload),
           },
         ],
       },
     ],
-  })
+  });
 
   const text = message.content
-    .filter((block) => block.type === 'text')
-    .map((block) => ('text' in block ? block.text : ''))
-    .join('')
-    .trim()
+    .filter((block) => block.type === "text")
+    .map((block) => ("text" in block ? block.text : ""))
+    .join("")
+    .trim();
 
-  const parsed = parseJsonObject(text)
-  const tagline = sanitizeListingTagline(String(parsed.tagline ?? ''))
+  const parsed = parseJsonObject(text);
+  const tagline = sanitizeListingTagline(String(parsed.tagline ?? ""));
   const fullDescription = sanitizeListingDescription(
-    String(parsed.fullDescription ?? ''),
-  )
+    String(parsed.fullDescription ?? ""),
+  );
 
   if (!tagline || !fullDescription) {
-    throw new Error('Model returned incomplete listing copy')
+    throw new Error("Model returned incomplete listing copy");
   }
 
   return {
     tagline,
     fullDescription,
-  }
+  };
 }
 
 function parseJsonObject(text: string): Record<string, unknown> {
   const cleaned = text
-    .replace(/^```(?:json)?\s*/i, '')
-    .replace(/\s*```$/i, '')
-    .trim()
-  const start = cleaned.indexOf('{')
-  const end = cleaned.lastIndexOf('}')
-  const slice = start >= 0 && end > start ? cleaned.slice(start, end + 1) : cleaned
-  const parsed: unknown = JSON.parse(slice)
-  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
-    throw new Error('Expected JSON object from model')
-  }
-  return parsed as Record<string, unknown>
+    .replace(/^```(?:json)?\s*/i, "")
+    .replace(/\s*```$/i, "")
+    .trim();
+  const start = cleaned.indexOf("{");
+  const end = cleaned.lastIndexOf("}");
+  const slice =
+    start !== -1 && end > start ? cleaned.slice(start, end + 1) : cleaned;
+  const parsed: unknown = JSON.parse(slice);
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new Error("Expected JSON object from model");
+  }
+  return parsed as Record<string, unknown>;
 }
 
-async function buildImprovedCopy(
-  listing: CandidateListing,
-): Promise<{
-  tagline: string
-  fullDescription: string
-  usedModel: boolean
+async function buildImprovedCopy(listing: CandidateListing): Promise<{
+  tagline: string;
+  fullDescription: string;
+  usedModel: boolean;
 }> {
-  const extracted = await extractPageCopy(getListingUrl(listing))
+  const extracted = await extractPageCopy(getListingUrl(listing));
 
-  const siteTagline = chooseSiteTagline(extracted)
-  const siteDescription = chooseSiteDescription(extracted)
+  const siteTagline = chooseSiteTagline(extracted);
+  const siteDescription = chooseSiteDescription(extracted);
 
-  const hasGoodSiteTagline = !isWeakTagline(siteTagline)
-  const hasGoodSiteDescription = !isWeakDescription(siteDescription)
+  // Not weak implies non-empty, so these are null exactly when the site copy is unusable.
+  const goodSiteTagline = isWeakTagline(siteTagline) ? null : siteTagline;
+  const goodSiteDescription = isWeakDescription(siteDescription)
+    ? null
+    : siteDescription;
 
-  if (hasGoodSiteTagline && hasGoodSiteDescription) {
+  if (goodSiteTagline && goodSiteDescription) {
     return {
-      tagline: siteTagline!,
-      fullDescription: siteDescription!,
+      tagline: goodSiteTagline,
+      fullDescription: goodSiteDescription,
       usedModel: false,
-    }
+    };
   }
 
   const generated = await generateCopyWithAnthropic({
     listing,
     extracted,
-    preferredTagline: hasGoodSiteTagline ? siteTagline : null,
-    preferredDescription: hasGoodSiteDescription ? siteDescription : null,
-  })
+    preferredTagline: goodSiteTagline,
+    preferredDescription: goodSiteDescription,
+  });
 
   return {
-    tagline: hasGoodSiteTagline ? siteTagline! : generated.tagline,
-    fullDescription: hasGoodSiteDescription
-      ? siteDescription!
-      : generated.fullDescription,
+    tagline: goodSiteTagline ?? generated.tagline,
+    fullDescription: goodSiteDescription ?? generated.fullDescription,
     usedModel: true,
-  }
+  };
 }
 
-async function getCandidateListings(args: ScriptArgs): Promise<CandidateListing[]> {
+async function getCandidateListings(
+  args: ScriptArgs,
+): Promise<Array<CandidateListing>> {
   const rows = await db
     .select({
       id: storeListings.id,
@@ -513,7 +543,7 @@ async function getCandidateListings(args: ScriptArgs): Promise<CandidateListing[
       categorySlugs: storeListings.categorySlugs,
     })
     .from(storeListings)
-    .orderBy(desc(storeListings.updatedAt), desc(storeListings.createdAt))
+    .orderBy(desc(storeListings.updatedAt), desc(storeListings.createdAt));
 
   return rows
     .map((row) => ({
@@ -527,24 +557,24 @@ async function getCandidateListings(args: ScriptArgs): Promise<CandidateListing[
     }))
     .filter((row) => (args.id ? row.id === args.id : true))
     .filter((row) => needsCopyRefresh(row, args.force))
-    .slice(0, args.limit ?? Number.POSITIVE_INFINITY)
+    .slice(0, args.limit ?? Number.POSITIVE_INFINITY);
 }
 
 async function processListing(
   listing: CandidateListing,
   args: ScriptArgs,
 ): Promise<void> {
-  console.log(`Processing ${listing.name} (${listing.id})`)
+  console.log(`Processing ${listing.name} (${listing.id})`);
 
-  const nextCopy = await buildImprovedCopy(listing)
+  const nextCopy = await buildImprovedCopy(listing);
   console.log(
-    `Prepared copy for ${listing.name} using ${nextCopy.usedModel ? 'site + model' : 'site copy'}.`,
-  )
+    `Prepared copy for ${listing.name} using ${nextCopy.usedModel ? "site + model" : "site copy"}.`,
+  );
 
   if (args.dryRun) {
-    console.log(`Tagline: ${nextCopy.tagline}`)
-    console.log(`Description: ${nextCopy.fullDescription}`)
-    return
+    console.log(`Tagline: ${nextCopy.tagline}`);
+    console.log(`Description: ${nextCopy.fullDescription}`);
+    return;
   }
 
   await db
@@ -554,41 +584,41 @@ async function processListing(
       fullDescription: nextCopy.fullDescription,
       updatedAt: new Date(),
     })
-    .where(eq(storeListings.id, listing.id))
+    .where(eq(storeListings.id, listing.id));
 
-  console.log(`Updated store_listings copy for ${listing.name}.`)
+  console.log(`Updated store_listings copy for ${listing.name}.`);
 }
 
 async function main(): Promise<void> {
-  const args = parseArgs(process.argv.slice(2))
+  const args = parseArgs(process.argv.slice(2));
   if (args.help) {
-    printHelp()
-    process.exit(0)
+    printHelp();
+    process.exit(0);
   }
 
-  const candidates = await getCandidateListings(args)
+  const candidates = await getCandidateListings(args);
   if (candidates.length === 0) {
-    console.log('No listings need copy refresh.')
-    return
+    console.log("No listings need copy refresh.");
+    return;
   }
 
-  console.log(`Found ${candidates.length} listing(s) to process.`)
+  console.log(`Found ${candidates.length} listing(s) to process.`);
 
   for (const listing of candidates) {
     try {
-      await processListing(listing, args)
+      await processListing(listing, args);
     } catch (error) {
-      console.error(`Failed for ${listing.name} (${listing.id}).`)
-      console.error(error)
+      console.error(`Failed for ${listing.name} (${listing.id}).`);
+      console.error(error);
     }
   }
 }
 
 await main()
   .catch((error) => {
-    console.error(error)
-    process.exitCode = 1
+    console.error(error);
+    process.exitCode = 1;
   })
   .finally(async () => {
-    await dbClient.end({ timeout: 5 })
-  })
+    await dbClient.end({ timeout: 5 });
+  });
diff --git a/scripts/generate-listing-images.ts b/scripts/generate-listing-images.ts
index bd7d61d..1b56c3e 100644
--- a/scripts/generate-listing-images.ts
+++ b/scripts/generate-listing-images.ts
@@ -1,11 +1,10 @@
 #!/usr/bin/env node
 import "dotenv/config";
-
+import { desc, eq } from "drizzle-orm";
+import { createHash } from "node:crypto";
 import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
 import path from "node:path";
-import { createHash } from "node:crypto";
 
-import { desc, eq } from "drizzle-orm";
 import { db, dbClient } from "../src/db/index.server";
 import { storeListings } from "../src/db/schema";
 import { geminiFlashGenerateImageFromPromptAndImage } from "../src/lib/gemini-flash-image-gen";
@@ -39,7 +38,7 @@ type CandidateListing = {
   sourceUrl: string;
   externalUrl: string | null;
   iconUrl: string | null;
-  screenshotUrls: string[];
+  screenshotUrls: Array<string>;
   tagline: string | null;
   fullDescription: string | null;
   productType: string | null;
@@ -89,7 +88,7 @@ type ManualListingRecord = {
   sourceUrl: string;
   externalUrl: string | null;
   iconUrl: string | null;
-  screenshotUrls: string[];
+  screenshotUrls: Array<string>;
   tagline: string | null;
   fullDescription: string | null;
   rawCategoryHint: string | null;
@@ -101,7 +100,7 @@ type ManualListingRecord = {
   categorySlug?: string | null;
 };
 
-function parseArgs(argv: string[]): ScriptArgs {
+function parseArgs(argv: Array<string>): ScriptArgs {
   const out: ScriptArgs = {
     concurrency: 4,
     dryRun: false,
@@ -293,7 +292,7 @@ function parseManualListingRecord(
   const screenshotUrls = Array.isArray(row.screenshotUrls)
     ? row.screenshotUrls.map((entry, screenshotIndex) => {
         if (typeof entry !== "string") {
-          throw new Error(
+          throw new TypeError(
             `Row ${rowIndex}: expected screenshotUrls[${screenshotIndex}] to be a string`,
           );
         }
@@ -331,13 +330,13 @@ function parseManualListingRecord(
 
 async function readManualListingRecords(
   inputPath: string,
-): Promise<ManualListingRecord[]> {
+): Promise<Array<ManualListingRecord>> {
   const absoluteInputPath = path.resolve(process.cwd(), inputPath);
   const raw = await readFile(absoluteInputPath, "utf8");
   const data: unknown = JSON.parse(raw);
 
   if (!Array.isArray(data)) {
-    throw new Error(`Expected ${inputPath} to contain a JSON array`);
+    throw new TypeError(`Expected ${inputPath} to contain a JSON array`);
   }
 
   return data.map((row, index) => parseManualListingRecord(row, index));
@@ -380,7 +379,7 @@ function buildMarketingPrompt(
     listing.scope ? `Scope: ${listing.scope}` : null,
     listing.fullDescription ? `Description: ${listing.fullDescription}` : null,
   ]
-    .filter((value): value is string => Boolean(value))
+    .filter((value) => value !== null)
     .join("\n");
 
   return `Create a polished product-marketing image for this software listing using the provided website screenshot as reference.
@@ -422,7 +421,7 @@ function buildIconPrompt(listing: CandidateListing, pageUrl: string): string {
     listing.scope ? `Scope: ${listing.scope}` : null,
     listing.fullDescription ? `Description: ${listing.fullDescription}` : null,
   ]
-    .filter((value): value is string => Boolean(value))
+    .filter((value) => value !== null)
     .join("\n");
 
   return `Create a polished product icon for this software listing using the provided website screenshot as reference.
@@ -676,10 +675,10 @@ async function saveGeneratedImage(
 
 async function getCandidateListings(
   args: ScriptArgs,
-): Promise<CandidateListing[]> {
+): Promise<Array<CandidateListing>> {
   if (args.input) {
     const manualRows = await readManualListingRecords(args.input);
-    const candidates: CandidateListing[] = [];
+    const candidates: Array<CandidateListing> = [];
 
     for (const row of manualRows) {
       if (args.id && row.sourceUrl !== args.id) {
@@ -773,7 +772,7 @@ async function getCandidateListings(
     .from(storeListings)
     .orderBy(desc(storeListings.updatedAt), desc(storeListings.createdAt));
 
-  const candidates: CandidateListing[] = [];
+  const candidates: Array<CandidateListing> = [];
 
   for (const row of rows) {
     if (args.id && row.id !== args.id) {
diff --git a/src/lexicons/generated/bundle.ts b/src/lexicons/generated/bundle.ts
index 12b921a..4b52b20 100644
--- a/src/lexicons/generated/bundle.ts
+++ b/src/lexicons/generated/bundle.ts
@@ -1,75 +1,65 @@
 export const lexicons = [
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.authBasic",
-    "description": "Permission set for AT Store write access.",
-    "defs": {
-      "main": {
-        "type": "permission-set",
-        "title": "Full AT Store Access",
-        "detail": "Provides full access to AT Store profile, listings, reviews, and favorites.",
-        "permissions": [
+    lexicon: 1,
+    id: "fyi.atstore.authBasic",
+    description: "Permission set for AT Store write access.",
+    defs: {
+      main: {
+        type: "permission-set",
+        title: "Full AT Store Access",
+        detail:
+          "Provides full access to AT Store profile, listings, reviews, and favorites.",
+        permissions: [
           {
-            "type": "permission",
-            "resource": "repo",
-            "collection": [
+            type: "permission",
+            resource: "repo",
+            collection: [
               "fyi.atstore.profile",
               "fyi.atstore.listing.detail",
               "fyi.atstore.listing.review",
               "fyi.atstore.listing.reviewReply",
-              "fyi.atstore.listing.favorite"
+              "fyi.atstore.listing.favorite",
             ],
-            "action": [
-              "create",
-              "update",
-              "delete"
-            ]
-          }
-        ]
-      }
-    }
+            action: ["create", "update", "delete"],
+          },
+        ],
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.authThirdPartyReviews",
-    "description": "OAuth permission bundle for third-party apps that publish AT Store profile self plus listing reviews on the user's repo; reads use public directory XRPC.",
-    "defs": {
-      "main": {
-        "type": "permission-set",
-        "title": "Submit AT Store reviews",
-        "detail": "Create reviews on AT Store listings",
-        "permissions": [
+    lexicon: 1,
+    id: "fyi.atstore.authThirdPartyReviews",
+    description:
+      "OAuth permission bundle for third-party apps that publish AT Store profile self plus listing reviews on the user's repo; reads use public directory XRPC.",
+    defs: {
+      main: {
+        type: "permission-set",
+        title: "Submit AT Store reviews",
+        detail: "Create reviews on AT Store listings",
+        permissions: [
           {
-            "type": "permission",
-            "resource": "repo",
-            "collection": [
-              "fyi.atstore.profile"
-            ],
-            "action": [
-              "create"
-            ]
+            type: "permission",
+            resource: "repo",
+            collection: ["fyi.atstore.profile"],
+            action: ["create"],
           },
           {
-            "type": "permission",
-            "resource": "repo",
-            "collection": [
-              "fyi.atstore.listing.review"
-            ],
-            "action": [
-              "create"
-            ]
-          }
-        ]
-      }
-    }
+            type: "permission",
+            resource: "repo",
+            collection: ["fyi.atstore.listing.review"],
+            action: ["create"],
+          },
+        ],
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.directory.getListing",
-    "defs": {
-      "listingCardGet": {
-        "type": "object",
-        "required": [
+    lexicon: 1,
+    id: "fyi.atstore.directory.getListing",
+    defs: {
+      listingCardGet: {
+        type: "object",
+        required: [
           "uri",
           "name",
           "tagline",
@@ -84,110 +74,103 @@ export const lexicons = [
           "heroImageUrl",
           "categorySlug",
           "rating",
-          "productAccountHandle"
+          "productAccountHandle",
         ],
-        "nullable": [
+        nullable: [
           "iconUrl",
           "heroImageUrl",
           "categorySlug",
           "rating",
-          "productAccountHandle"
+          "productAccountHandle",
         ],
-        "properties": {
-          "uri": {
-            "type": "string",
-            "format": "at-uri",
-            "maxLength": 2560,
-            "description": "AT URI of the fyi.atstore.listing.detail record."
-          },
-          "name": {
-            "type": "string",
-            "maxLength": 640
-          },
-          "tagline": {
-            "type": "string",
-            "maxLength": 2000
-          },
-          "description": {
-            "type": "string",
-            "maxLength": 20000
-          },
-          "iconUrl": {
-            "type": "string",
-            "maxLength": 8192
-          },
-          "heroImageUrl": {
-            "type": "string",
-            "maxLength": 8192
-          },
-          "categorySlug": {
-            "type": "string",
-            "maxLength": 512
-          },
-          "categorySlugs": {
-            "type": "array",
-            "items": {
-              "type": "string",
-              "maxLength": 512
-            }
-          },
-          "category": {
-            "type": "string",
-            "maxLength": 640
-          },
-          "accent": {
-            "type": "string",
-            "maxLength": 16,
-            "knownValues": [
-              "blue",
-              "pink",
-              "purple",
-              "green"
-            ]
-          },
-          "rating": {
-            "type": "string",
-            "maxLength": 16
-          },
-          "reviewCount": {
-            "type": "integer"
-          },
-          "priceLabel": {
-            "type": "string",
-            "maxLength": 32
-          },
-          "productAccountHandle": {
-            "type": "string",
-            "maxLength": 512
-          },
-          "appTags": {
-            "type": "array",
-            "items": {
-              "type": "string",
-              "maxLength": 256
-            }
-          }
-        }
+        properties: {
+          uri: {
+            type: "string",
+            format: "at-uri",
+            maxLength: 2560,
+            description: "AT URI of the fyi.atstore.listing.detail record.",
+          },
+          name: {
+            type: "string",
+            maxLength: 640,
+          },
+          tagline: {
+            type: "string",
+            maxLength: 2000,
+          },
+          description: {
+            type: "string",
+            maxLength: 20000,
+          },
+          iconUrl: {
+            type: "string",
+            maxLength: 8192,
+          },
+          heroImageUrl: {
+            type: "string",
+            maxLength: 8192,
+          },
+          categorySlug: {
+            type: "string",
+            maxLength: 512,
+          },
+          categorySlugs: {
+            type: "array",
+            items: {
+              type: "string",
+              maxLength: 512,
+            },
+          },
+          category: {
+            type: "string",
+            maxLength: 640,
+          },
+          accent: {
+            type: "string",
+            maxLength: 16,
+            knownValues: ["blue", "pink", "purple", "green"],
+          },
+          rating: {
+            type: "string",
+            maxLength: 16,
+          },
+          reviewCount: {
+            type: "integer",
+          },
+          priceLabel: {
+            type: "string",
+            maxLength: 32,
+          },
+          productAccountHandle: {
+            type: "string",
+            maxLength: 512,
+          },
+          appTags: {
+            type: "array",
+            items: {
+              type: "string",
+              maxLength: 256,
+            },
+          },
+        },
       },
-      "listingLinkRow": {
-        "type": "object",
-        "required": [
-          "uri"
-        ],
-        "properties": {
-          "label": {
-            "type": "string",
-            "maxLength": 640
-          },
-          "uri": {
-            "type": "string",
-            "maxLength": 2048
-          }
-        }
+      listingLinkRow: {
+        type: "object",
+        required: ["uri"],
+        properties: {
+          label: {
+            type: "string",
+            maxLength: 640,
+          },
+          uri: {
+            type: "string",
+            maxLength: 2048,
+          },
+        },
       },
-      "listingDetailResponse": {
-        "type": "object",
-        "required": [
+      listingDetailResponse: {
+        type: "object",
+        required: [
           "listing",
           "isStoreManaged",
           "repoDid",
@@ -197,9 +180,9 @@ export const lexicons = [
           "externalUrl",
           "sourceUrl",
           "createdAt",
-          "updatedAt"
+          "updatedAt",
         ],
-        "nullable": [
+        nullable: [
           "repoDid",
           "productAccountDid",
           "sourceTagline",
@@ -207,111 +190,113 @@ export const lexicons = [
           "externalUrl",
           "sourceUrl",
           "createdAt",
-          "updatedAt"
+          "updatedAt",
         ],
-        "properties": {
-          "listing": {
-            "type": "ref",
-            "ref": "#listingCardGet"
-          },
-          "isStoreManaged": {
-            "type": "boolean"
-          },
-          "repoDid": {
-            "type": "string",
-            "maxLength": 2048
-          },
-          "productAccountDid": {
-            "type": "string",
-            "maxLength": 2048
-          },
-          "sourceTagline": {
-            "type": "string",
-            "maxLength": 20000
-          },
-          "sourceFullDescription": {
-            "type": "string",
-            "maxLength": 20000
-          },
-          "screenshots": {
-            "type": "array",
-            "items": {
-              "type": "string",
-              "maxLength": 4096
-            }
-          },
-          "externalUrl": {
-            "type": "string",
-            "maxLength": 2048
-          },
-          "sourceUrl": {
-            "type": "string",
-            "maxLength": 8192
-          },
-          "createdAt": {
-            "type": "string",
-            "maxLength": 64
-          },
-          "updatedAt": {
-            "type": "string",
-            "maxLength": 64
-          },
-          "links": {
-            "type": "array",
-            "items": {
-              "type": "ref",
-              "ref": "#listingLinkRow"
-            }
-          }
-        }
+        properties: {
+          listing: {
+            type: "ref",
+            ref: "#listingCardGet",
+          },
+          isStoreManaged: {
+            type: "boolean",
+          },
+          repoDid: {
+            type: "string",
+            maxLength: 2048,
+          },
+          productAccountDid: {
+            type: "string",
+            maxLength: 2048,
+          },
+          sourceTagline: {
+            type: "string",
+            maxLength: 20000,
+          },
+          sourceFullDescription: {
+            type: "string",
+            maxLength: 20000,
+          },
+          screenshots: {
+            type: "array",
+            items: {
+              type: "string",
+              maxLength: 4096,
+            },
+          },
+          externalUrl: {
+            type: "string",
+            maxLength: 2048,
+          },
+          sourceUrl: {
+            type: "string",
+            maxLength: 8192,
+          },
+          createdAt: {
+            type: "string",
+            maxLength: 64,
+          },
+          updatedAt: {
+            type: "string",
+            maxLength: 64,
+          },
+          links: {
+            type: "array",
+            items: {
+              type: "ref",
+              ref: "#listingLinkRow",
+            },
+          },
+        },
       },
-      "main": {
-        "type": "query",
-        "description": "Fetch one public verified listing. Provide exactly one of `uri` (fyi.atstore.listing.detail AT URI) or `externalUrl` (unique storefront URL); `externalUrl` uses the same matching rules as the former resolve endpoint.",
-        "parameters": {
-          "type": "params",
-          "properties": {
-            "uri": {
-              "type": "string",
-              "format": "at-uri",
-              "maxLength": 2560,
-              "description": "AT URI of the fyi.atstore.listing.detail record."
+      main: {
+        type: "query",
+        description:
+          "Fetch one public verified listing. Provide exactly one of `uri` (fyi.atstore.listing.detail AT URI) or `externalUrl` (unique storefront URL); `externalUrl` uses the same matching rules as the former resolve endpoint.",
+        parameters: {
+          type: "params",
+          properties: {
+            uri: {
+              type: "string",
+              format: "at-uri",
+              maxLength: 2560,
+              description: "AT URI of the fyi.atstore.listing.detail record.",
+            },
+            externalUrl: {
+              type: "string",
+              maxLength: 2048,
+              description:
+                "Listing external_url / product URL as stored on the record; must match at most one public listing.",
             },
-            "externalUrl": {
-              "type": "string",
-              "maxLength": 2048,
-              "description": "Listing external_url / product URL as stored on the record; must match at most one public listing."
-            }
-          }
+          },
         },
-        "output": {
-          "encoding": "application/json",
-          "schema": {
-            "type": "ref",
-            "ref": "#listingDetailResponse"
-          }
+        output: {
+          encoding: "application/json",
+          schema: {
+            type: "ref",
+            ref: "#listingDetailResponse",
+          },
         },
-        "errors": [
+        errors: [
           {
-            "name": "ListingNotFound"
+            name: "ListingNotFound",
           },
           {
-            "name": "InvalidParams"
+            name: "InvalidParams",
           },
           {
-            "name": "AmbiguousResolution"
-          }
-        ]
-      }
-    }
+            name: "AmbiguousResolution",
+          },
+        ],
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.directory.searchListings",
-    "defs": {
-      "listingCardSearch": {
-        "type": "object",
-        "required": [
+    lexicon: 1,
+    id: "fyi.atstore.directory.searchListings",
+    defs: {
+      listingCardSearch: {
+        type: "object",
+        required: [
           "uri",
           "name",
           "tagline",
@@ -326,220 +311,213 @@ export const lexicons = [
           "heroImageUrl",
           "categorySlug",
           "rating",
-          "productAccountHandle"
+          "productAccountHandle",
         ],
-        "nullable": [
+        nullable: [
           "iconUrl",
           "heroImageUrl",
           "categorySlug",
           "rating",
-          "productAccountHandle"
+          "productAccountHandle",
         ],
-        "properties": {
-          "uri": {
-            "type": "string",
-            "format": "at-uri",
-            "maxLength": 2560,
-            "description": "AT URI of the fyi.atstore.listing.detail record."
-          },
-          "name": {
-            "type": "string",
-            "maxLength": 640
-          },
-          "tagline": {
-            "type": "string",
-            "maxLength": 2000
-          },
-          "description": {
-            "type": "string",
-            "maxLength": 20000
-          },
-          "iconUrl": {
-            "type": "string",
-            "maxLength": 8192
-          },
-          "heroImageUrl": {
-            "type": "string",
-            "maxLength": 8192
-          },
-          "categorySlug": {
-            "type": "string",
-            "maxLength": 512
-          },
-          "categorySlugs": {
-            "type": "array",
-            "items": {
-              "type": "string",
-              "maxLength": 512
-            }
-          },
-          "category": {
-            "type": "string",
-            "maxLength": 640
-          },
-          "accent": {
-            "type": "string",
-            "maxLength": 16,
-            "knownValues": [
-              "blue",
-              "pink",
-              "purple",
-              "green"
-            ]
-          },
-          "rating": {
-            "type": "string",
-            "maxLength": 16
-          },
-          "reviewCount": {
-            "type": "integer"
-          },
-          "priceLabel": {
-            "type": "string",
-            "maxLength": 32
-          },
-          "productAccountHandle": {
-            "type": "string",
-            "maxLength": 512
-          },
-          "appTags": {
-            "type": "array",
-            "items": {
-              "type": "string",
-              "maxLength": 256
-            }
-          }
-        }
-      },
-      "main": {
-        "type": "query",
-        "description": "Directory listing search and pagination (verified listings with a listing.detail AT URI only). Filters match the at-store /apps page: values within one filter are OR'd, different filters are AND'd.",
-        "parameters": {
-          "type": "params",
-          "properties": {
-            "q": {
-              "type": "string",
-              "maxLength": 512
+        properties: {
+          uri: {
+            type: "string",
+            format: "at-uri",
+            maxLength: 2560,
+            description: "AT URI of the fyi.atstore.listing.detail record.",
+          },
+          name: {
+            type: "string",
+            maxLength: 640,
+          },
+          tagline: {
+            type: "string",
+            maxLength: 2000,
+          },
+          description: {
+            type: "string",
+            maxLength: 20000,
+          },
+          iconUrl: {
+            type: "string",
+            maxLength: 8192,
+          },
+          heroImageUrl: {
+            type: "string",
+            maxLength: 8192,
+          },
+          categorySlug: {
+            type: "string",
+            maxLength: 512,
+          },
+          categorySlugs: {
+            type: "array",
+            items: {
+              type: "string",
+              maxLength: 512,
             },
-            "sort": {
-              "type": "string",
-              "maxLength": 24,
-              "default": "popular",
-              "enum": [
+          },
+          category: {
+            type: "string",
+            maxLength: 640,
+          },
+          accent: {
+            type: "string",
+            maxLength: 16,
+            knownValues: ["blue", "pink", "purple", "green"],
+          },
+          rating: {
+            type: "string",
+            maxLength: 16,
+          },
+          reviewCount: {
+            type: "integer",
+          },
+          priceLabel: {
+            type: "string",
+            maxLength: 32,
+          },
+          productAccountHandle: {
+            type: "string",
+            maxLength: 512,
+          },
+          appTags: {
+            type: "array",
+            items: {
+              type: "string",
+              maxLength: 256,
+            },
+          },
+        },
+      },
+      main: {
+        type: "query",
+        description:
+          "Directory listing search and pagination (verified listings with a listing.detail AT URI only). Filters match the at-store /apps page: values within one filter are OR'd, different filters are AND'd.",
+        parameters: {
+          type: "params",
+          properties: {
+            q: {
+              type: "string",
+              maxLength: 512,
+            },
+            sort: {
+              type: "string",
+              maxLength: 24,
+              default: "popular",
+              enum: [
                 "popular",
                 "rating",
                 "reviews",
                 "favorites",
                 "newest",
                 "updated",
-                "alphabetical"
+                "alphabetical",
               ],
-              "description": "popular = trending score; rating = average rating (unrated last); reviews = review count; favorites = favorite count; newest = created; updated = last updated; alphabetical = name."
-            },
-            "tag": {
-              "type": "array",
-              "maxLength": 20,
-              "items": {
-                "type": "string",
-                "maxLength": 256
+              description:
+                "popular = trending score; rating = average rating (unrated last); reviews = review count; favorites = favorite count; newest = created; updated = last updated; alphabetical = name.",
+            },
+            tag: {
+              type: "array",
+              maxLength: 20,
+              items: {
+                type: "string",
+                maxLength: 256,
               },
-              "description": "App tags to match (any). Accepts the tag text from appTags or its slug, e.g. 'developer tool' or 'developer'."
-            },
-            "category": {
-              "type": "array",
-              "maxLength": 20,
-              "items": {
-                "type": "string",
-                "maxLength": 512
+              description:
+                "App tags to match (any). Accepts the tag text from appTags or its slug, e.g. 'developer tool' or 'developer'.",
+            },
+            category: {
+              type: "array",
+              maxLength: 20,
+              items: {
+                type: "string",
+                maxLength: 512,
               },
-              "description": "Category paths to match (any), including descendants, e.g. 'apps/bluesky' or 'apps/bluesky/client'. 'apps' matches top-level apps only."
-            },
-            "data": {
-              "type": "array",
-              "maxLength": 20,
-              "items": {
-                "type": "string",
-                "maxLength": 256
+              description:
+                "Category paths to match (any), including descendants, e.g. 'apps/bluesky' or 'apps/bluesky/client'. 'apps' matches top-level apps only.",
+            },
+            data: {
+              type: "array",
+              maxLength: 20,
+              items: {
+                type: "string",
+                maxLength: 256,
               },
-              "description": "Lexicon producers whose records the listing reads or writes (any), as the first two NSID segments, e.g. 'app.bsky'."
-            },
-            "minRating": {
-              "type": "string",
-              "maxLength": 8,
-              "knownValues": [
-                "3",
-                "4",
-                "4.5"
-              ],
-              "description": "Only listings with an average rating at or above this value."
-            },
-            "has": {
-              "type": "array",
-              "maxLength": 3,
-              "items": {
-                "type": "string",
-                "maxLength": 32,
-                "knownValues": [
-                  "open-source",
-                  "donations",
-                  "official"
-                ]
+              description:
+                "Lexicon producers whose records the listing reads or writes (any), as the first two NSID segments, e.g. 'app.bsky'.",
+            },
+            minRating: {
+              type: "string",
+              maxLength: 8,
+              knownValues: ["3", "4", "4.5"],
+              description:
+                "Only listings with an average rating at or above this value.",
+            },
+            has: {
+              type: "array",
+              maxLength: 3,
+              items: {
+                type: "string",
+                maxLength: 32,
+                knownValues: ["open-source", "donations", "official"],
               },
-              "description": "Required extras (all): open-source (has a source link), donations (has a donate link), official (has a product account)."
+              description:
+                "Required extras (all): open-source (has a source link), donations (has a donate link), official (has a product account).",
             },
-            "limit": {
-              "type": "integer",
-              "minimum": 1,
-              "maximum": 100,
-              "default": 24
+            limit: {
+              type: "integer",
+              minimum: 1,
+              maximum: 100,
+              default: 24,
             },
-            "cursor": {
-              "type": "string",
-              "maxLength": 512
-            }
-          }
+            cursor: {
+              type: "string",
+              maxLength: 512,
+            },
+          },
         },
-        "output": {
-          "encoding": "application/json",
-          "schema": {
-            "type": "object",
-            "required": [
-              "listings"
-            ],
-            "properties": {
-              "cursor": {
-                "type": "string",
-                "maxLength": 512
+        output: {
+          encoding: "application/json",
+          schema: {
+            type: "object",
+            required: ["listings"],
+            properties: {
+              cursor: {
+                type: "string",
+                maxLength: 512,
+              },
+              listings: {
+                type: "array",
+                items: {
+                  type: "ref",
+                  ref: "#listingCardSearch",
+                },
               },
-              "listings": {
-                "type": "array",
-                "items": {
-                  "type": "ref",
-                  "ref": "#listingCardSearch"
-                }
-              }
-            }
-          }
+            },
+          },
         },
-        "errors": [
+        errors: [
           {
-            "name": "InvalidCursor"
-          }
-        ]
-      }
-    }
+            name: "InvalidCursor",
+          },
+        ],
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.listing.detail",
-    "defs": {
-      "main": {
-        "type": "record",
-        "description": "Public protocol or app listing in the AT Store directory. Images are stored as repo blobs (Kitchen-style); the web app caches HTTPS URLs in Postgres separately.",
-        "key": "tid",
-        "record": {
-          "type": "object",
-          "required": [
+    lexicon: 1,
+    id: "fyi.atstore.listing.detail",
+    defs: {
+      main: {
+        type: "record",
+        description:
+          "Public protocol or app listing in the AT Store directory. Images are stored as repo blobs (Kitchen-style); the web app caches HTTPS URLs in Postgres separately.",
+        key: "tid",
+        record: {
+          type: "object",
+          required: [
             "slug",
             "name",
             "tagline",
@@ -547,132 +525,135 @@ export const lexicons = [
             "icon",
             "categorySlug",
             "createdAt",
-            "updatedAt"
+            "updatedAt",
           ],
-          "properties": {
-            "slug": {
-              "type": "string",
-              "minLength": 1,
-              "maxLength": 512,
-              "description": "Stable URL slug; unique within the publishing account."
-            },
-            "name": {
-              "type": "string",
-              "maxLength": 640
-            },
-            "tagline": {
-              "type": "string",
-              "maxLength": 300
-            },
-            "description": {
-              "type": "string",
-              "maxLength": 20000
-            },
-            "externalUrl": {
-              "type": "string",
-              "format": "uri",
-              "maxLength": 2048,
-              "description": "Primary product or project URL."
-            },
-            "icon": {
-              "type": "blob",
-              "accept": [
+          properties: {
+            slug: {
+              type: "string",
+              minLength: 1,
+              maxLength: 512,
+              description:
+                "Stable URL slug; unique within the publishing account.",
+            },
+            name: {
+              type: "string",
+              maxLength: 640,
+            },
+            tagline: {
+              type: "string",
+              maxLength: 300,
+            },
+            description: {
+              type: "string",
+              maxLength: 20000,
+            },
+            externalUrl: {
+              type: "string",
+              format: "uri",
+              maxLength: 2048,
+              description: "Primary product or project URL.",
+            },
+            icon: {
+              type: "blob",
+              accept: [
                 "image/png",
                 "image/jpeg",
                 "image/webp",
                 "image/gif",
-                "image/svg+xml"
+                "image/svg+xml",
               ],
-              "maxSize": 2000000,
-              "description": "Square / app icon (uploaded to repo via com.atproto.repo.uploadBlob)."
+              maxSize: 2000000,
+              description:
+                "Square / app icon (uploaded to repo via com.atproto.repo.uploadBlob).",
             },
-            "heroImage": {
-              "type": "blob",
-              "accept": [
+            heroImage: {
+              type: "blob",
+              accept: [
                 "image/png",
                 "image/jpeg",
                 "image/webp",
                 "image/gif",
-                "image/svg+xml"
+                "image/svg+xml",
               ],
-              "maxSize": 12000000,
-              "description": "Hero / cover image blob."
-            },
-            "screenshots": {
-              "type": "array",
-              "maxLength": 20,
-              "items": {
-                "type": "blob",
-                "accept": [
+              maxSize: 12000000,
+              description: "Hero / cover image blob.",
+            },
+            screenshots: {
+              type: "array",
+              maxLength: 20,
+              items: {
+                type: "blob",
+                accept: [
                   "image/png",
                   "image/jpeg",
                   "image/webp",
                   "image/gif",
-                  "image/svg+xml"
+                  "image/svg+xml",
                 ],
-                "maxSize": 12000000
-              }
-            },
-            "categorySlug": {
-              "type": "array",
-              "minLength": 1,
-              "maxLength": 32,
-              "items": {
-                "type": "string",
-                "maxLength": 256
+                maxSize: 12000000,
               },
-              "description": "Browse category keys (e.g. protocol/pds). First entry is the primary category for legacy surfaces."
-            },
-            "createdAt": {
-              "type": "string",
-              "format": "datetime"
             },
-            "updatedAt": {
-              "type": "string",
-              "format": "datetime"
-            },
-            "appTags": {
-              "type": "array",
-              "maxLength": 64,
-              "items": {
-                "type": "string",
-                "maxLength": 96
-              }
-            },
-            "productAccountDid": {
-              "type": "string",
-              "maxLength": 2048,
-              "description": "Bluesky DID for the product, app, or tool (not the AT Store publisher). Handle is resolved and stored in Postgres only."
+            categorySlug: {
+              type: "array",
+              minLength: 1,
+              maxLength: 32,
+              items: {
+                type: "string",
+                maxLength: 256,
+              },
+              description:
+                "Browse category keys (e.g. protocol/pds). First entry is the primary category for legacy surfaces.",
+            },
+            createdAt: {
+              type: "string",
+              format: "datetime",
+            },
+            updatedAt: {
+              type: "string",
+              format: "datetime",
+            },
+            appTags: {
+              type: "array",
+              maxLength: 64,
+              items: {
+                type: "string",
+                maxLength: 96,
+              },
             },
-            "migratedFromAtUri": {
-              "type": "string",
-              "format": "at-uri",
-              "maxLength": 8192,
-              "description": "When this listing.detail record supersedes a prior record in another repo (e.g. moved from the AT Store publisher to a product owner PDS), the at:// URI of that prior fyi.atstore.listing.detail record."
+            productAccountDid: {
+              type: "string",
+              maxLength: 2048,
+              description:
+                "Bluesky DID for the product, app, or tool (not the AT Store publisher). Handle is resolved and stored in Postgres only.",
+            },
+            migratedFromAtUri: {
+              type: "string",
+              format: "at-uri",
+              maxLength: 8192,
+              description:
+                "When this listing.detail record supersedes a prior record in another repo (e.g. moved from the AT Store publisher to a product owner PDS), the at:// URI of that prior fyi.atstore.listing.detail record.",
+            },
+            links: {
+              type: "array",
+              maxLength: 12,
+              description:
+                "Relevant links for the app, including trust/compliance, support, and project resources.",
+              items: {
+                type: "ref",
+                ref: "#link",
+              },
             },
-            "links": {
-              "type": "array",
-              "maxLength": 12,
-              "description": "Relevant links for the app, including trust/compliance, support, and project resources.",
-              "items": {
-                "type": "ref",
-                "ref": "#link"
-              }
-            }
-          }
-        }
+          },
+        },
       },
-      "link": {
-        "type": "object",
-        "required": [
-          "type",
-          "url"
-        ],
-        "properties": {
-          "type": {
-            "type": "string",
-            "maxLength": 32,
-            "knownValues": [
+      link: {
+        type: "object",
+        required: ["type", "url"],
+        properties: {
+          type: {
+            type: "string",
+            maxLength: 32,
+            knownValues: [
               "privacy",
               "terms",
               "support",
@@ -685,172 +666,168 @@ export const lexicons = [
               "community",
               "donate",
               "license",
-              "other"
+              "other",
             ],
-            "description": "The kind of link."
-          },
-          "url": {
-            "type": "string",
-            "format": "uri",
-            "maxLength": 2048,
-            "description": "The destination URL."
-          },
-          "label": {
-            "type": "string",
-            "maxLength": 100,
-            "maxGraphemes": 50,
-            "description": "Optional human-readable label, especially useful when type is 'other'."
-          }
-        }
-      }
-    }
+            description: "The kind of link.",
+          },
+          url: {
+            type: "string",
+            format: "uri",
+            maxLength: 2048,
+            description: "The destination URL.",
+          },
+          label: {
+            type: "string",
+            maxLength: 100,
+            maxGraphemes: 50,
+            description:
+              "Optional human-readable label, especially useful when type is 'other'.",
+          },
+        },
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.listing.favorite",
-    "defs": {
-      "main": {
-        "type": "record",
-        "description": "A user favorite for an AT Store listing. Subject must be the at:// URI of a fyi.atstore.listing.detail record.",
-        "key": "any",
-        "record": {
-          "type": "object",
-          "required": [
-            "subject",
-            "createdAt"
-          ],
-          "properties": {
-            "subject": {
-              "type": "string",
-              "format": "at-uri",
-              "description": "AT URI of the fyi.atstore.listing.detail record being favorited."
+    lexicon: 1,
+    id: "fyi.atstore.listing.favorite",
+    defs: {
+      main: {
+        type: "record",
+        description:
+          "A user favorite for an AT Store listing. Subject must be the at:// URI of a fyi.atstore.listing.detail record.",
+        key: "any",
+        record: {
+          type: "object",
+          required: ["subject", "createdAt"],
+          properties: {
+            subject: {
+              type: "string",
+              format: "at-uri",
+              description:
+                "AT URI of the fyi.atstore.listing.detail record being favorited.",
+            },
+            createdAt: {
+              type: "string",
+              format: "datetime",
             },
-            "createdAt": {
-              "type": "string",
-              "format": "datetime"
-            }
-          }
-        }
-      }
-    }
+          },
+        },
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.listing.review",
-    "defs": {
-      "main": {
-        "type": "record",
-        "description": "A user review of an AT Store directory listing. Subject must be the at:// URI of a fyi.atstore.listing.detail record.",
-        "key": "tid",
-        "record": {
-          "type": "object",
-          "required": [
-            "subject",
-            "rating",
-            "createdAt"
-          ],
-          "properties": {
-            "subject": {
-              "type": "string",
-              "format": "at-uri",
-              "description": "AT URI of the fyi.atstore.listing.detail record being reviewed."
-            },
-            "rating": {
-              "type": "integer",
-              "minimum": 1,
-              "maximum": 5,
-              "description": "Star rating 1–5."
+    lexicon: 1,
+    id: "fyi.atstore.listing.review",
+    defs: {
+      main: {
+        type: "record",
+        description:
+          "A user review of an AT Store directory listing. Subject must be the at:// URI of a fyi.atstore.listing.detail record.",
+        key: "tid",
+        record: {
+          type: "object",
+          required: ["subject", "rating", "createdAt"],
+          properties: {
+            subject: {
+              type: "string",
+              format: "at-uri",
+              description:
+                "AT URI of the fyi.atstore.listing.detail record being reviewed.",
+            },
+            rating: {
+              type: "integer",
+              minimum: 1,
+              maximum: 5,
+              description: "Star rating 1–5.",
+            },
+            text: {
+              type: "string",
+              maxLength: 8000,
+              description:
+                "Optional written review; omit for a stars-only rating.",
+            },
+            createdAt: {
+              type: "string",
+              format: "datetime",
             },
-            "text": {
-              "type": "string",
-              "maxLength": 8000,
-              "description": "Optional written review; omit for a stars-only rating."
-            },
-            "createdAt": {
-              "type": "string",
-              "format": "datetime"
-            }
-          }
-        }
-      }
-    }
+          },
+        },
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.listing.reviewReply",
-    "defs": {
-      "main": {
-        "type": "record",
-        "description": "A reply on a fyi.atstore.listing.review. Threads are linear (no per-reply parent). By convention, only the listing owner or the review author should post replies; the AT Store app drops replies from any other DID at ingest and at render. The PDS does not enforce this — other indexers MAY surface unauthorized replies if they choose.",
-        "key": "tid",
-        "record": {
-          "type": "object",
-          "required": [
-            "subject",
-            "text",
-            "createdAt"
-          ],
-          "properties": {
-            "subject": {
-              "type": "string",
-              "format": "at-uri",
-              "description": "AT URI of the fyi.atstore.listing.review this reply belongs to."
-            },
-            "text": {
-              "type": "string",
-              "minLength": 1,
-              "maxLength": 8000
+    lexicon: 1,
+    id: "fyi.atstore.listing.reviewReply",
+    defs: {
+      main: {
+        type: "record",
+        description:
+          "A reply on a fyi.atstore.listing.review. Threads are linear (no per-reply parent). By convention, only the listing owner or the review author should post replies; the AT Store app drops replies from any other DID at ingest and at render. The PDS does not enforce this — other indexers MAY surface unauthorized replies if they choose.",
+        key: "tid",
+        record: {
+          type: "object",
+          required: ["subject", "text", "createdAt"],
+          properties: {
+            subject: {
+              type: "string",
+              format: "at-uri",
+              description:
+                "AT URI of the fyi.atstore.listing.review this reply belongs to.",
+            },
+            text: {
+              type: "string",
+              minLength: 1,
+              maxLength: 8000,
+            },
+            createdAt: {
+              type: "string",
+              format: "datetime",
             },
-            "createdAt": {
-              "type": "string",
-              "format": "datetime"
-            }
-          }
-        }
-      }
-    }
+          },
+        },
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.profile",
-    "defs": {
-      "main": {
-        "type": "record",
-        "description": "AT Store app profile for discovery and TAP ingestion (Kitchen-style).",
-        "key": "literal:self",
-        "record": {
-          "type": "object",
-          "required": [
-            "displayName"
-          ],
-          "properties": {
-            "displayName": {
-              "type": "string",
-              "maxLength": 640,
-              "description": "Human-readable name for the store / app."
-            },
-            "description": {
-              "type": "string",
-              "maxLength": 4000,
-              "description": "Longer description shown in directory surfaces."
+    lexicon: 1,
+    id: "fyi.atstore.profile",
+    defs: {
+      main: {
+        type: "record",
+        description:
+          "AT Store app profile for discovery and TAP ingestion (Kitchen-style).",
+        key: "literal:self",
+        record: {
+          type: "object",
+          required: ["displayName"],
+          properties: {
+            displayName: {
+              type: "string",
+              maxLength: 640,
+              description: "Human-readable name for the store / app.",
+            },
+            description: {
+              type: "string",
+              maxLength: 4000,
+              description: "Longer description shown in directory surfaces.",
+            },
+            website: {
+              type: "string",
+              format: "uri",
+              maxLength: 2048,
             },
-            "website": {
-              "type": "string",
-              "format": "uri",
-              "maxLength": 2048
-            }
-          }
-        }
-      }
-    }
+          },
+        },
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.reviews.listForListing",
-    "defs": {
-      "listingReviewView": {
-        "type": "object",
-        "required": [
+    lexicon: 1,
+    id: "fyi.atstore.reviews.listForListing",
+    defs: {
+      listingReviewView: {
+        type: "object",
+        required: [
           "id",
           "authorDid",
           "rating",
@@ -860,177 +837,176 @@ export const lexicons = [
           "text",
           "authorDisplayName",
           "authorHandle",
-          "authorAvatarUrl"
+          "authorAvatarUrl",
         ],
-        "nullable": [
+        nullable: [
           "text",
           "authorDisplayName",
           "authorHandle",
-          "authorAvatarUrl"
+          "authorAvatarUrl",
         ],
-        "properties": {
-          "id": {
-            "type": "string",
-            "maxLength": 64
-          },
-          "authorDid": {
-            "type": "string",
-            "format": "did",
-            "maxLength": 2048
-          },
-          "rating": {
-            "type": "integer",
-            "minimum": 1,
-            "maximum": 5
-          },
-          "text": {
-            "type": "string",
-            "maxLength": 8000
-          },
-          "reviewCreatedAt": {
-            "type": "string",
-            "format": "datetime",
-            "maxLength": 64
-          },
-          "authorDisplayName": {
-            "type": "string",
-            "maxLength": 640
-          },
-          "authorHandle": {
-            "type": "string",
-            "maxLength": 512
-          },
-          "authorAvatarUrl": {
-            "type": "string",
-            "maxLength": 8192
-          },
-          "replyCount": {
-            "type": "integer"
-          },
-          "canReply": {
-            "type": "boolean"
-          }
-        }
+        properties: {
+          id: {
+            type: "string",
+            maxLength: 64,
+          },
+          authorDid: {
+            type: "string",
+            format: "did",
+            maxLength: 2048,
+          },
+          rating: {
+            type: "integer",
+            minimum: 1,
+            maximum: 5,
+          },
+          text: {
+            type: "string",
+            maxLength: 8000,
+          },
+          reviewCreatedAt: {
+            type: "string",
+            format: "datetime",
+            maxLength: 64,
+          },
+          authorDisplayName: {
+            type: "string",
+            maxLength: 640,
+          },
+          authorHandle: {
+            type: "string",
+            maxLength: 512,
+          },
+          authorAvatarUrl: {
+            type: "string",
+            maxLength: 8192,
+          },
+          replyCount: {
+            type: "integer",
+          },
+          canReply: {
+            type: "boolean",
+          },
+        },
       },
-      "main": {
-        "type": "query",
-        "description": "List reviews for a directory listing (mirrored Tap data plus profile enrichment).",
-        "parameters": {
-          "type": "params",
-          "required": [
-            "uri"
-          ],
-          "properties": {
-            "uri": {
-              "type": "string",
-              "format": "at-uri",
-              "maxLength": 2560,
-              "description": "AT URI of the fyi.atstore.listing.detail record."
+      main: {
+        type: "query",
+        description:
+          "List reviews for a directory listing (mirrored Tap data plus profile enrichment).",
+        parameters: {
+          type: "params",
+          required: ["uri"],
+          properties: {
+            uri: {
+              type: "string",
+              format: "at-uri",
+              maxLength: 2560,
+              description: "AT URI of the fyi.atstore.listing.detail record.",
+            },
+            limit: {
+              type: "integer",
+              minimum: 1,
+              maximum: 100,
+              default: 50,
+            },
+            cursor: {
+              type: "string",
+              maxLength: 512,
             },
-            "limit": {
-              "type": "integer",
-              "minimum": 1,
-              "maximum": 100,
-              "default": 50
-            },
-            "cursor": {
-              "type": "string",
-              "maxLength": 512
-            }
-          }
+          },
         },
-        "output": {
-          "encoding": "application/json",
-          "schema": {
-            "type": "object",
-            "required": [
-              "reviews"
-            ],
-            "properties": {
-              "cursor": {
-                "type": "string",
-                "maxLength": 512
+        output: {
+          encoding: "application/json",
+          schema: {
+            type: "object",
+            required: ["reviews"],
+            properties: {
+              cursor: {
+                type: "string",
+                maxLength: 512,
+              },
+              reviews: {
+                type: "array",
+                items: {
+                  type: "ref",
+                  ref: "#listingReviewView",
+                },
               },
-              "reviews": {
-                "type": "array",
-                "items": {
-                  "type": "ref",
-                  "ref": "#listingReviewView"
-                }
-              }
-            }
-          }
+            },
+          },
         },
-        "errors": [
+        errors: [
           {
-            "name": "ListingNotFound"
+            name: "ListingNotFound",
           },
           {
-            "name": "InvalidParams"
+            name: "InvalidParams",
           },
           {
-            "name": "InvalidCursor"
-          }
-        ]
-      }
-    }
+            name: "InvalidCursor",
+          },
+        ],
+      },
+    },
   },
   {
-    "lexicon": 1,
-    "id": "fyi.atstore.server.describe",
-    "defs": {
-      "main": {
-        "type": "query",
-        "description": "Describe this deployment's public XRPC surface and defaults.",
-        "parameters": {
-          "type": "params",
-          "properties": {}
+    lexicon: 1,
+    id: "fyi.atstore.server.describe",
+    defs: {
+      main: {
+        type: "query",
+        description:
+          "Describe this deployment's public XRPC surface and defaults.",
+        parameters: {
+          type: "params",
+          properties: {},
         },
-        "output": {
-          "encoding": "application/json",
-          "schema": {
-            "type": "object",
-            "required": [
+        output: {
+          encoding: "application/json",
+          schema: {
+            type: "object",
+            required: [
               "service",
               "publicReads",
               "reviewsWrittenOnAuthorRepo",
               "defaultListingLimit",
               "maxListingLimit",
               "maxReviewLimit",
-              "methods"
+              "methods",
             ],
-            "properties": {
-              "service": {
-                "type": "string",
-                "maxLength": 256
+            properties: {
+              service: {
+                type: "string",
+                maxLength: 256,
               },
-              "publicReads": {
-                "type": "boolean"
+              publicReads: {
+                type: "boolean",
               },
-              "reviewsWrittenOnAuthorRepo": {
-                "type": "boolean",
-                "description": "When true, listing reviews are created via com.atproto.repo.createRecord on the author's PDS (fyi.atstore.listing.review); this service does not expose a write procedure for reviews."
+              reviewsWrittenOnAuthorRepo: {
+                type: "boolean",
+                description:
+                  "When true, listing reviews are created via com.atproto.repo.createRecord on the author's PDS (fyi.atstore.listing.review); this service does not expose a write procedure for reviews.",
               },
-              "defaultListingLimit": {
-                "type": "integer"
+              defaultListingLimit: {
+                type: "integer",
               },
-              "maxListingLimit": {
-                "type": "integer"
+              maxListingLimit: {
+                type: "integer",
               },
-              "maxReviewLimit": {
-                "type": "integer"
+              maxReviewLimit: {
+                type: "integer",
               },
-              "methods": {
-                "type": "array",
-                "items": {
-                  "type": "string",
-                  "maxLength": 512
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-]
+              methods: {
+                type: "array",
+                items: {
+                  type: "string",
+                  maxLength: 512,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+];
diff --git a/src/lib/gemini-flash-image-gen.ts b/src/lib/gemini-flash-image-gen.ts
index f897398..560630a 100644
--- a/src/lib/gemini-flash-image-gen.ts
+++ b/src/lib/gemini-flash-image-gen.ts
@@ -2,55 +2,55 @@
  * Gemini 3.1 Flash image preview — shared by hero/icon server flows and CLI scripts.
  */
 const ENDPOINT =
-  'https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-image-preview:generateContent'
+  "https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-image-preview:generateContent";
 
-export type GeminiInlineImageMime = 'image/png' | 'image/jpeg' | 'image/webp'
+export type GeminiInlineImageMime = "image/png" | "image/jpeg" | "image/webp";
 
 function getGeminiApiKey(): string {
-  const key = process.env.GEMINI_API_KEY ?? process.env.GOOGLE_API_KEY ?? ''
+  const key = process.env.GEMINI_API_KEY ?? process.env.GOOGLE_API_KEY ?? "";
   if (!key) {
     throw new Error(
-      'Missing GEMINI_API_KEY or GOOGLE_API_KEY in the environment for image generation.',
-    )
+      "Missing GEMINI_API_KEY or GOOGLE_API_KEY in the environment for image generation.",
+    );
   }
-  return key
+  return key;
 }
 
 export async function geminiFlashGenerateImageFromPromptAndImage(input: {
-  prompt: string
-  imageBytes: Buffer
-  imageMimeType: GeminiInlineImageMime
+  prompt: string;
+  imageBytes: Buffer;
+  imageMimeType: GeminiInlineImageMime;
 }): Promise<{ buffer: Buffer; mimeType: string }> {
-  const apiKey = getGeminiApiKey()
+  const apiKey = getGeminiApiKey();
   const response = await fetch(ENDPOINT, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'x-goog-api-key': apiKey,
-      'Content-Type': 'application/json',
+      "x-goog-api-key": apiKey,
+      "Content-Type": "application/json",
     },
     body: JSON.stringify({
       contents: [
         {
-          role: 'user',
+          role: "user",
           parts: [
             { text: input.prompt },
             {
               inlineData: {
                 mimeType: input.imageMimeType,
-                data: input.imageBytes.toString('base64'),
+                data: input.imageBytes.toString("base64"),
               },
             },
           ],
         },
       ],
       generationConfig: {
-        responseModalities: ['IMAGE'],
+        responseModalities: ["IMAGE"],
       },
     }),
-  })
+  });
 
   if (!response.ok) {
-    throw new Error(`Gemini image request failed: ${await response.text()}`)
+    throw new Error(`Gemini image request failed: ${await response.text()}`);
   }
 
   const json = (await response.json()) as {
@@ -58,24 +58,26 @@ export async function geminiFlashGenerateImageFromPromptAndImage(input: {
       content?: {
         parts?: Array<{
           inlineData?: {
-            data?: string
-            mimeType?: string
-          }
-        }>
-      }
-    }>
-  }
+            data?: string;
+            mimeType?: string;
+          };
+        }>;
+      };
+    }>;
+  };
 
   const imagePart = json.candidates?.[0]?.content?.parts?.find(
     (part) => part.inlineData?.data,
-  )?.inlineData
+  )?.inlineData;
 
   if (!imagePart?.data) {
-    throw new Error(`No image data returned by Gemini: ${JSON.stringify(json)}`)
+    throw new Error(
+      `No image data returned by Gemini: ${JSON.stringify(json)}`,
+    );
   }
 
   return {
-    buffer: Buffer.from(imagePart.data, 'base64'),
-    mimeType: imagePart.mimeType ?? 'image/png',
-  }
+    buffer: Buffer.from(imagePart.data, "base64"),
+    mimeType: imagePart.mimeType ?? "image/png",
+  };
 }
diff --git a/src/lib/listing-icon-prompts.ts b/src/lib/listing-icon-prompts.ts
index 968f80b..004009d 100644
--- a/src/lib/listing-icon-prompts.ts
+++ b/src/lib/listing-icon-prompts.ts
@@ -3,12 +3,12 @@
  */
 
 export function buildIconPolishFromSiteAssetPrompt(input: {
-  name: string
-  pageUrl: string
-  tagline: string | null
-  productType: string | null
-  domain: string | null
-  scope: string | null
+  name: string;
+  pageUrl: string;
+  tagline: string | null;
+  productType: string | null;
+  domain: string | null;
+  scope: string | null;
 }): string {
   const meta = [
     `Name: ${input.name}`,
@@ -18,8 +18,8 @@ export function buildIconPolishFromSiteAssetPrompt(input: {
     input.domain ? `Domain: ${input.domain}` : null,
     input.scope ? `Scope: ${input.scope}` : null,
   ]
-    .filter((v): v is string => Boolean(v))
-    .join('\n')
+    .filter((v) => v !== null)
+    .join("\n");
 
   return `You are given an existing site icon, favicon, or logo image (it may be very small, pixelated, or multi-resolution .ico).
 
@@ -37,5 +37,5 @@ Constraints:
 - No new readable text; keep any text from the source only if it was already there, unchanged in wording.
 
 Listing metadata:
-${meta}`
+${meta}`;
 }
diff --git a/src/lib/listing-page-screenshot.ts b/src/lib/listing-page-screenshot.ts
index 3d45ed9..b8019d9 100644
--- a/src/lib/listing-page-screenshot.ts
+++ b/src/lib/listing-page-screenshot.ts
@@ -2,74 +2,74 @@
  * Full Chromium screenshot of a listing URL for Gemini image generation.
  * Waits past `domcontentloaded` so SPAs and lazy assets can paint.
  */
-const VIEWPORT = { width: 1440, height: 960 } as const
+const VIEWPORT = { width: 1440, height: 960 } as const;
 
 /** Desktop Chrome UA — avoids some sites serving empty shells to headless defaults. */
 const BROWSER_USER_AGENT =
-  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36";
 
 export async function captureListingPageScreenshotForGeneration(
   url: string,
 ): Promise<Buffer> {
-  const { chromium } = await import(/* @vite-ignore */ 'playwright')
+  const { chromium } = await import(/* @vite-ignore */ "playwright");
   const browser = await chromium.launch({
     headless: true,
-  })
+  });
 
   try {
     const context = await browser.newContext({
       viewport: VIEWPORT,
       deviceScaleFactor: 1,
       userAgent: BROWSER_USER_AGENT,
-      locale: 'en-US',
+      locale: "en-US",
       ignoreHTTPSErrors:
-        process.env.PLAYWRIGHT_IGNORE_HTTPS_ERRORS === '1' ||
-        process.env.PLAYWRIGHT_IGNORE_HTTPS_ERRORS === 'true',
-    })
+        process.env.PLAYWRIGHT_IGNORE_HTTPS_ERRORS === "1" ||
+        process.env.PLAYWRIGHT_IGNORE_HTTPS_ERRORS === "true",
+    });
 
-    const page = await context.newPage()
+    const page = await context.newPage();
 
     await page.goto(url.trim(), {
-      waitUntil: 'load',
+      waitUntil: "load",
       timeout: 60_000,
-    })
+    });
 
     try {
-      await page.waitForLoadState('networkidle', { timeout: 25_000 })
+      await page.waitForLoadState("networkidle", { timeout: 25_000 });
     } catch {
       /* Long-polling, analytics, or SSE — still take a representative frame */
     }
 
     await page.emulateMedia({
-      colorScheme: 'light',
-      reducedMotion: 'reduce',
-    })
+      colorScheme: "light",
+      reducedMotion: "reduce",
+    });
 
     await page.evaluate(async () => {
       try {
         if (document.fonts) {
-          await document.fonts.ready
+          await document.fonts.ready;
         }
       } catch {
         /* ignore */
       }
-    })
+    });
 
-    await page.waitForTimeout(2_000)
+    await page.waitForTimeout(2000);
 
     await page.evaluate(() => {
-      window.scrollTo(0, 0)
-    })
+      window.scrollTo(0, 0);
+    });
 
     const buffer = await page.screenshot({
-      type: 'png',
+      type: "png",
       fullPage: false,
-      animations: 'disabled',
-    })
+      animations: "disabled",
+    });
 
-    await context.close()
-    return buffer
+    await context.close();
+    return buffer;
   } finally {
-    await browser.close()
+    await browser.close();
   }
 }
diff --git a/src/lib/site-brand-icon.ts b/src/lib/site-brand-icon.ts
index 0b85ba7..e139de7 100644
--- a/src/lib/site-brand-icon.ts
+++ b/src/lib/site-brand-icon.ts
@@ -2,30 +2,30 @@
  * Discover a site logo (common /logo paths, manifest, link icons, meta) or favicon,
  * then normalize to a square PNG suitable for directory icons (upscale small assets).
  */
-import * as cheerio from 'cheerio'
-import sharp from 'sharp'
+import * as cheerio from "cheerio";
+import sharp from "sharp";
 
 /** Many hosts only serve /favicon.ico to browser-like clients. */
 const BROWSER_LIKE_USER_AGENT =
-  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36";
 
-const TANGLED_HOST = 'tangled.org'
+const TANGLED_HOST = "tangled.org";
 
 function tangledHostnameNormalized(host: string): string {
-  return host.toLowerCase().replace(/^www\./, '')
+  return host.toLowerCase().replace(/^www\./, "");
 }
 
 /** e.g. https://tangled.org/owner/repo — not the marketing homepage only. */
 export function isTangledRepositoryPageUrl(pageUrl: string): boolean {
   try {
-    const u = new URL(pageUrl.trim())
+    const u = new URL(pageUrl.trim());
     if (tangledHostnameNormalized(u.hostname) !== TANGLED_HOST) {
-      return false
+      return false;
     }
-    const parts = u.pathname.split('/').filter(Boolean)
-    return parts.length >= 2
+    const parts = u.pathname.split("/").filter(Boolean);
+    return parts.length >= 2;
   } catch {
-    return false
+    return false;
   }
 }
 
@@ -35,401 +35,402 @@ export function isTangledRepositoryPageUrl(pageUrl: string): boolean {
  */
 function isTangledSiteWideBrandingIconAsset(assetUrl: string): boolean {
   try {
-    const u = new URL(assetUrl)
+    const u = new URL(assetUrl);
     if (tangledHostnameNormalized(u.hostname) !== TANGLED_HOST) {
-      return false
+      return false;
     }
-    const p = u.pathname.toLowerCase()
-    if (p === '/favicon.ico' || p.startsWith('/favicon')) {
-      return true
+    const p = u.pathname.toLowerCase();
+    if (p === "/favicon.ico" || p.startsWith("/favicon")) {
+      return true;
     }
-    if (p.includes('apple-touch-icon')) {
-      return true
+    if (p.includes("apple-touch-icon")) {
+      return true;
     }
-    if (p.includes('android-chrome') || p.includes('mstile')) {
-      return true
+    if (p.includes("android-chrome") || p.includes("mstile")) {
+      return true;
     }
-    if (p.startsWith('/static/logos/') || p.startsWith('/static/favicon')) {
-      return true
+    if (p.startsWith("/static/logos/") || p.startsWith("/static/favicon")) {
+      return true;
     }
     // Root marketing logos on the Tangled host (not repo-specific assets).
     if (
-      p === '/logo.svg' ||
-      p === '/logo.png' ||
-      p === '/logo.webp' ||
-      p === '/logo@2x.png' ||
-      p === '/images/logo.png' ||
-      p === '/images/logo.svg' ||
-      p === '/assets/logo.png' ||
-      p === '/assets/logo.svg' ||
-      p === '/static/logo.png' ||
-      p === '/static/logo.svg' ||
-      p === '/brand/logo.png' ||
-      p === '/brand/logo.svg' ||
-      p === '/img/logo.png' ||
-      p === '/img/logo.svg'
+      p === "/logo.svg" ||
+      p === "/logo.png" ||
+      p === "/logo.webp" ||
+      p === "/logo@2x.png" ||
+      p === "/images/logo.png" ||
+      p === "/images/logo.svg" ||
+      p === "/assets/logo.png" ||
+      p === "/assets/logo.svg" ||
+      p === "/static/logo.png" ||
+      p === "/static/logo.svg" ||
+      p === "/brand/logo.png" ||
+      p === "/brand/logo.svg" ||
+      p === "/img/logo.png" ||
+      p === "/img/logo.svg"
     ) {
-      return true
+      return true;
     }
-    return false
+    return false;
   } catch {
-    return false
+    return false;
   }
 }
-const PAGE_TIMEOUT_MS = 20_000
-const ICON_TIMEOUT_MS = 15_000
-const MANIFEST_TIMEOUT_MS = 10_000
-const OUTPUT_SIZE = 512
+const PAGE_TIMEOUT_MS = 20_000;
+const ICON_TIMEOUT_MS = 15_000;
+const MANIFEST_TIMEOUT_MS = 10_000;
+const OUTPUT_SIZE = 512;
 
 type IconSource =
-  | 'site-logo-path'
-  | 'manifest'
-  | 'apple-touch-icon'
-  | 'icon-link'
-  | 'meta-image'
-  | 'favicon'
+  | "site-logo-path"
+  | "manifest"
+  | "apple-touch-icon"
+  | "icon-link"
+  | "meta-image"
+  | "favicon";
 
 type IconCandidate = {
-  url: string
-  source: IconSource
-  rel: string | null
-  sizes: string | null
-  purpose: string | null
-  score: number
-}
+  url: string;
+  source: IconSource;
+  rel: string | null;
+  sizes: string | null;
+  purpose: string | null;
+  score: number;
+};
 
 function resolveUrl(href: string, base: string): string {
   try {
-    return new URL(href, base).href
+    return new URL(href, base).href;
   } catch {
-    return href
+    return href;
   }
 }
 
 function normalizeSpace(value: string | null | undefined): string | null {
-  if (typeof value !== 'string') return null
-  const normalized = value.trim().replace(/\s+/g, ' ')
-  return normalized.length > 0 ? normalized : null
+  if (typeof value !== "string") return null;
+  const normalized = value.trim().replaceAll(/\s+/g, " ");
+  return normalized.length > 0 ? normalized : null;
 }
 
 function looksLikeImageUrl(url: string): boolean {
   try {
-    if (url.startsWith('data:image/')) return true
-    const pathname = new URL(url).pathname.toLowerCase()
-    return /\.(avif|gif|ico|jpe?g|png|svg|webp)$/.test(pathname)
+    if (url.startsWith("data:image/")) return true;
+    const pathname = new URL(url).pathname.toLowerCase();
+    return /\.(avif|gif|ico|jpe?g|png|svg|webp)$/.test(pathname);
   } catch {
-    return false
+    return false;
   }
 }
 
 function getUrlHintScore(url: string): number {
-  const haystack = url.toLowerCase()
-  let score = 0
+  const haystack = url.toLowerCase();
+  let score = 0;
   if (
     /(icon|icons|app-icon|appicon|favicon|apple-touch|tileimage|maskable)/.test(
       haystack,
     )
   ) {
-    score += 55
+    score += 55;
   }
   if (/(logo|avatar|brandmark|mark)\b/.test(haystack)) {
-    score += 35
+    score += 35;
   }
   if (/(banner|card|cover|hero|social|share|screenshot)/.test(haystack)) {
-    score -= 90
+    score -= 90;
   }
-  if (haystack.endsWith('.svg')) {
-    score += 40
+  if (haystack.endsWith(".svg")) {
+    score += 40;
   }
-  if (haystack.includes('favicon.ico')) {
-    score += 90
+  if (haystack.includes("favicon.ico")) {
+    score += 90;
   }
-  return score
+  return score;
 }
 
 function parseLargestIconSize(sizes: string | null): {
-  largest: number | null
-  hasAny: boolean
-  hasNonSquare: boolean
+  largest: number | null;
+  hasAny: boolean;
+  hasNonSquare: boolean;
 } {
   if (!sizes) {
-    return { largest: null, hasAny: false, hasNonSquare: false }
+    return { largest: null, hasAny: false, hasNonSquare: false };
   }
-  const normalized = sizes.toLowerCase().trim()
-  if (normalized.includes('any')) {
-    return { largest: null, hasAny: true, hasNonSquare: false }
+  const normalized = sizes.toLowerCase().trim();
+  if (normalized.includes("any")) {
+    return { largest: null, hasAny: true, hasNonSquare: false };
   }
-  let largest: number | null = null
-  let hasNonSquare = false
+  let largest: number | null = null;
+  let hasNonSquare = false;
   for (const token of normalized.split(/\s+/)) {
-    const match = token.match(/^(\d+)x(\d+)$/)
-    if (!match) continue
-    const width = Number.parseInt(match[1] ?? '0', 10)
-    const height = Number.parseInt(match[2] ?? '0', 10)
-    if (!Number.isFinite(width) || !Number.isFinite(height)) continue
-    if (width !== height) hasNonSquare = true
-    const candidateSize = Math.max(width, height)
+    const match = token.match(/^(\d+)x(\d+)$/);
+    if (!match) continue;
+    const width = Number.parseInt(match[1] ?? "0", 10);
+    const height = Number.parseInt(match[2] ?? "0", 10);
+    if (!Number.isFinite(width) || !Number.isFinite(height)) continue;
+    if (width !== height) hasNonSquare = true;
+    const candidateSize = Math.max(width, height);
     if (largest === null || candidateSize > largest) {
-      largest = candidateSize
+      largest = candidateSize;
     }
   }
-  return { largest, hasAny: false, hasNonSquare }
+  return { largest, hasAny: false, hasNonSquare };
 }
 
-function scoreCandidate(candidate: Omit<IconCandidate, 'score'>): number {
+function scoreCandidate(candidate: Omit<IconCandidate, "score">): number {
   let score =
-    candidate.source === 'site-logo-path'
+    candidate.source === "site-logo-path"
       ? 520
-      : candidate.source === 'manifest'
+      : candidate.source === "manifest"
         ? 500
-        : candidate.source === 'apple-touch-icon'
+        : candidate.source === "apple-touch-icon"
           ? 430
-          : candidate.source === 'icon-link'
+          : candidate.source === "icon-link"
             ? 360
-            : candidate.source === 'meta-image'
+            : candidate.source === "meta-image"
               ? 220
-              : 160
+              : 160;
 
-  const rel = candidate.rel?.toLowerCase() ?? ''
-  const purpose = candidate.purpose?.toLowerCase() ?? ''
-  const sizeInfo = parseLargestIconSize(candidate.sizes)
+  const rel = candidate.rel?.toLowerCase() ?? "";
+  const purpose = candidate.purpose?.toLowerCase() ?? "";
+  const sizeInfo = parseLargestIconSize(candidate.sizes);
 
-  if (rel.includes('apple-touch-icon')) score += 40
-  if (rel.includes('shortcut')) score += 10
-  if (rel.includes('mask-icon')) score -= 180
-  if (purpose.includes('maskable')) score += 35
-  if (purpose.includes('monochrome')) score -= 40
+  if (rel.includes("apple-touch-icon")) score += 40;
+  if (rel.includes("shortcut")) score += 10;
+  if (rel.includes("mask-icon")) score -= 180;
+  if (purpose.includes("maskable")) score += 35;
+  if (purpose.includes("monochrome")) score -= 40;
 
   if (sizeInfo.hasAny) {
-    score += 60
+    score += 60;
   } else if (sizeInfo.largest !== null) {
-    if (sizeInfo.largest >= 512) score += 120
-    else if (sizeInfo.largest >= 256) score += 90
-    else if (sizeInfo.largest >= 192) score += 70
-    else if (sizeInfo.largest >= 96) score += 40
-    else if (sizeInfo.largest >= 32) score += 20
+    if (sizeInfo.largest >= 512) score += 120;
+    else if (sizeInfo.largest >= 256) score += 90;
+    else if (sizeInfo.largest >= 192) score += 70;
+    else if (sizeInfo.largest >= 96) score += 40;
+    else if (sizeInfo.largest >= 32) score += 20;
   }
 
-  if (sizeInfo.hasNonSquare) score -= 70
-  score += getUrlHintScore(candidate.url)
+  if (sizeInfo.hasNonSquare) score -= 70;
+  score += getUrlHintScore(candidate.url);
 
-  return score
+  return score;
 }
 
-function makeCandidate(
-  input: Omit<IconCandidate, 'score'>,
-): IconCandidate {
+function makeCandidate(input: Omit<IconCandidate, "score">): IconCandidate {
   return {
     ...input,
     score: scoreCandidate(input),
-  }
+  };
 }
 
-function collectSiteLogoPathCandidates(baseUrl: string): IconCandidate[] {
+function collectSiteLogoPathCandidates(baseUrl: string): Array<IconCandidate> {
   const paths = [
-    '/logo.svg',
-    '/logo.png',
-    '/logo.webp',
-    '/logo@2x.png',
-    '/images/logo.png',
-    '/images/logo.svg',
-    '/assets/logo.png',
-    '/assets/logo.svg',
-    '/static/logo.png',
-    '/static/logo.svg',
-    '/brand/logo.png',
-    '/brand/logo.svg',
-    '/img/logo.png',
-    '/img/logo.svg',
-    '/android-chrome-512x512.png',
-    '/favicons/android-chrome-512x512.png',
-  ]
+    "/logo.svg",
+    "/logo.png",
+    "/logo.webp",
+    "/logo@2x.png",
+    "/images/logo.png",
+    "/images/logo.svg",
+    "/assets/logo.png",
+    "/assets/logo.svg",
+    "/static/logo.png",
+    "/static/logo.svg",
+    "/brand/logo.png",
+    "/brand/logo.svg",
+    "/img/logo.png",
+    "/img/logo.svg",
+    "/android-chrome-512x512.png",
+    "/favicons/android-chrome-512x512.png",
+  ];
 
   return paths.map((href) =>
     makeCandidate({
       url: resolveUrl(href, baseUrl),
-      source: 'site-logo-path',
-      rel: 'site-logo',
-      sizes: href.includes('512') ? '512x512' : null,
+      source: "site-logo-path",
+      rel: "site-logo",
+      sizes: href.includes("512") ? "512x512" : null,
       purpose: null,
     }),
-  )
+  );
 }
 
 function collectLinkedIconCandidates(
   $: cheerio.CheerioAPI,
   baseUrl: string,
-): IconCandidate[] {
-  const candidates: IconCandidate[] = []
-  $('link[rel][href]').each((_, element) => {
-    const rel = normalizeSpace($(element).attr('rel'))
-    const href = normalizeSpace($(element).attr('href'))
-    if (!rel || !href) return
-    const relLower = rel.toLowerCase()
-    if (relLower.includes('manifest')) return
-    if (!/\b(icon|apple-touch-icon|mask-icon|fluid-icon)\b/.test(relLower)) return
-
-    const source: IconSource = relLower.includes('apple-touch-icon')
-      ? 'apple-touch-icon'
-      : relLower.includes('icon')
-        ? 'icon-link'
-        : 'favicon'
+): Array<IconCandidate> {
+  const candidates: Array<IconCandidate> = [];
+  $("link[rel][href]").each((_, element) => {
+    const rel = normalizeSpace($(element).attr("rel"));
+    const href = normalizeSpace($(element).attr("href"));
+    if (!rel || !href) return;
+    const relLower = rel.toLowerCase();
+    if (relLower.includes("manifest")) return;
+    if (!/\b(icon|apple-touch-icon|mask-icon|fluid-icon)\b/.test(relLower))
+      return;
+
+    const source: IconSource = relLower.includes("apple-touch-icon")
+      ? "apple-touch-icon"
+      : relLower.includes("icon")
+        ? "icon-link"
+        : "favicon";
 
     candidates.push(
       makeCandidate({
         url: resolveUrl(href, baseUrl),
         source,
         rel,
-        sizes: normalizeSpace($(element).attr('sizes')),
+        sizes: normalizeSpace($(element).attr("sizes")),
         purpose: null,
       }),
-    )
-  })
-  return candidates
+    );
+  });
+  return candidates;
 }
 
 function collectMetaImageCandidates(
   $: cheerio.CheerioAPI,
   baseUrl: string,
-): IconCandidate[] {
-  const candidates: IconCandidate[] = []
-  $('meta[content]').each((_, element) => {
-    const rawContent = normalizeSpace($(element).attr('content'))
-    if (!rawContent) return
+): Array<IconCandidate> {
+  const candidates: Array<IconCandidate> = [];
+  $("meta[content]").each((_, element) => {
+    const rawContent = normalizeSpace($(element).attr("content"));
+    if (!rawContent) return;
     const prop =
-      normalizeSpace($(element).attr('property')) ||
-      normalizeSpace($(element).attr('name')) ||
-      normalizeSpace($(element).attr('itemprop'))
-    if (!prop) return
-    const propLower = prop.toLowerCase()
+      normalizeSpace($(element).attr("property")) ||
+      normalizeSpace($(element).attr("name")) ||
+      normalizeSpace($(element).attr("itemprop"));
+    if (!prop) return;
+    const propLower = prop.toLowerCase();
     if (
       ![
-        'msapplication-tileimage',
-        'og:image',
-        'og:image:url',
-        'twitter:image',
-        'twitter:image:src',
-        'image',
+        "msapplication-tileimage",
+        "og:image",
+        "og:image:url",
+        "twitter:image",
+        "twitter:image:src",
+        "image",
       ].includes(propLower)
     ) {
-      return
+      return;
     }
-    const resolvedUrl = resolveUrl(rawContent, baseUrl)
+    const resolvedUrl = resolveUrl(rawContent, baseUrl);
     const iconLike =
-      propLower === 'msapplication-tileimage' ||
+      propLower === "msapplication-tileimage" ||
       /(icon|logo|avatar|favicon|apple-touch|tileimage|app-icon|appicon)/.test(
         `${propLower} ${resolvedUrl}`.toLowerCase(),
-      )
-    if (!iconLike) return
+      );
+    if (!iconLike) return;
     candidates.push(
       makeCandidate({
         url: resolvedUrl,
-        source: 'meta-image',
+        source: "meta-image",
         rel: prop,
         sizes: null,
         purpose: null,
       }),
-    )
-  })
-  return candidates
+    );
+  });
+  return candidates;
 }
 
 async function collectManifestCandidates(
   $: cheerio.CheerioAPI,
   baseUrl: string,
-): Promise<IconCandidate[]> {
-  const manifestUrls = new Set<string>()
-  $('link[rel][href]').each((_, element) => {
-    const rel = normalizeSpace($(element).attr('rel'))?.toLowerCase()
-    const href = normalizeSpace($(element).attr('href'))
-    if (!rel || !href) return
-    if (!rel.split(/\s+/).includes('manifest')) return
-    manifestUrls.add(resolveUrl(href, baseUrl))
-  })
-
-  const candidates: IconCandidate[] = []
+): Promise<Array<IconCandidate>> {
+  const manifestUrls = new Set<string>();
+  $("link[rel][href]").each((_, element) => {
+    const rel = normalizeSpace($(element).attr("rel"))?.toLowerCase();
+    const href = normalizeSpace($(element).attr("href"));
+    if (!rel || !href) return;
+    if (!rel.split(/\s+/).includes("manifest")) return;
+    manifestUrls.add(resolveUrl(href, baseUrl));
+  });
+
+  const candidates: Array<IconCandidate> = [];
   for (const manifestUrl of manifestUrls) {
     try {
       const response = await fetch(manifestUrl, {
-        redirect: 'follow',
+        redirect: "follow",
         headers: {
-          'user-agent': BROWSER_LIKE_USER_AGENT,
-          accept: 'application/manifest+json,application/json,text/plain,*/*',
+          "user-agent": BROWSER_LIKE_USER_AGENT,
+          accept: "application/manifest+json,application/json,text/plain,*/*",
         },
         signal: AbortSignal.timeout(MANIFEST_TIMEOUT_MS),
-      })
-      if (!response.ok) continue
+      });
+      if (!response.ok) continue;
       const manifest = (await response.json()) as {
         icons?: Array<{
-          src?: string
-          sizes?: string
-          purpose?: string
-        }>
-      }
+          src?: string;
+          sizes?: string;
+          purpose?: string;
+        }>;
+      };
       for (const icon of manifest.icons ?? []) {
-        const src = normalizeSpace(icon?.src)
-        if (!src) continue
+        const src = normalizeSpace(icon?.src);
+        if (!src) continue;
         candidates.push(
           makeCandidate({
             url: resolveUrl(src, response.url || manifestUrl),
-            source: 'manifest',
-            rel: 'manifest',
+            source: "manifest",
+            rel: "manifest",
             sizes: normalizeSpace(icon?.sizes),
             purpose: normalizeSpace(icon?.purpose),
           }),
-        )
+        );
       }
     } catch {
       /* ignore */
     }
   }
-  return candidates
+  return candidates;
 }
 
-function collectConventionalFallbackCandidates(baseUrl: string): IconCandidate[] {
+function collectConventionalFallbackCandidates(
+  baseUrl: string,
+): Array<IconCandidate> {
   const fallbackSpecs: Array<{
-    href: string
-    source: IconSource
-    rel: string
-    sizes: string | null
+    href: string;
+    source: IconSource;
+    rel: string;
+    sizes: string | null;
   }> = [
     {
-      href: '/apple-touch-icon.png',
-      source: 'apple-touch-icon',
-      rel: 'apple-touch-icon',
-      sizes: '180x180',
+      href: "/apple-touch-icon.png",
+      source: "apple-touch-icon",
+      rel: "apple-touch-icon",
+      sizes: "180x180",
     },
     {
-      href: '/apple-touch-icon-precomposed.png',
-      source: 'apple-touch-icon',
-      rel: 'apple-touch-icon-precomposed',
-      sizes: '180x180',
+      href: "/apple-touch-icon-precomposed.png",
+      source: "apple-touch-icon",
+      rel: "apple-touch-icon-precomposed",
+      sizes: "180x180",
     },
     {
-      href: '/favicon-32x32.png',
-      source: 'favicon',
-      rel: 'favicon',
-      sizes: '32x32',
+      href: "/favicon-32x32.png",
+      source: "favicon",
+      rel: "favicon",
+      sizes: "32x32",
     },
     {
-      href: '/favicon-16x16.png',
-      source: 'favicon',
-      rel: 'favicon',
-      sizes: '16x16',
+      href: "/favicon-16x16.png",
+      source: "favicon",
+      rel: "favicon",
+      sizes: "16x16",
     },
     {
-      href: '/favicon.png',
-      source: 'favicon',
-      rel: 'favicon',
+      href: "/favicon.png",
+      source: "favicon",
+      rel: "favicon",
       sizes: null,
     },
     {
-      href: '/favicon.ico',
-      source: 'favicon',
-      rel: 'favicon',
+      href: "/favicon.ico",
+      source: "favicon",
+      rel: "favicon",
       sizes: null,
     },
-  ]
+  ];
 
   return fallbackSpecs.map((spec) =>
     makeCandidate({
@@ -439,31 +440,39 @@ function collectConventionalFallbackCandidates(baseUrl: string): IconCandidate[]
       sizes: spec.sizes,
       purpose: null,
     }),
-  )
+  );
 }
 
-function dedupeCandidates(candidates: IconCandidate[]): IconCandidate[] {
-  const bestByUrl = new Map<string, IconCandidate>()
+function dedupeCandidates(
+  candidates: Array<IconCandidate>,
+): Array<IconCandidate> {
+  const bestByUrl = new Map<string, IconCandidate>();
   for (const candidate of candidates) {
-    const existing = bestByUrl.get(candidate.url)
+    const existing = bestByUrl.get(candidate.url);
     if (!existing || candidate.score > existing.score) {
-      bestByUrl.set(candidate.url, candidate)
+      bestByUrl.set(candidate.url, candidate);
     }
   }
-  return [...bestByUrl.values()].sort(
+  return [...bestByUrl.values()].toSorted(
     (left, right) =>
       right.score - left.score || left.url.localeCompare(right.url),
-  )
+  );
 }
 
 function bufferLooksLikeHtml(buffer: Buffer): boolean {
-  const prefix = buffer.toString('utf8', 0, Math.min(buffer.length, 256)).trimStart()
-  return /^(<!doctype html\b|<html\b|<head\b|<body\b)/i.test(prefix)
+  const prefix = buffer
+    .toString("utf8", 0, Math.min(buffer.length, 256))
+    .trimStart();
+  return /^(<!doctype html\b|<html\b|<head\b|<body\b)/i.test(prefix);
 }
 
 /** Windows ICO: reserved 0, type 1 */
 function bufferLooksLikeIco(buffer: Buffer): boolean {
-  return buffer.length >= 6 && buffer.readUInt16LE(0) === 0 && buffer.readUInt16LE(2) === 1
+  return (
+    buffer.length >= 6 &&
+    buffer.readUInt16LE(0) === 0 &&
+    buffer.readUInt16LE(2) === 1
+  );
 }
 
 function bufferLooksLikePng(buffer: Buffer): boolean {
@@ -473,7 +482,7 @@ function bufferLooksLikePng(buffer: Buffer): boolean {
     buffer[1] === 0x50 &&
     buffer[2] === 0x4e &&
     buffer[3] === 0x47
-  )
+  );
 }
 
 async function probeImageUrl(
@@ -481,64 +490,66 @@ async function probeImageUrl(
 ): Promise<{ contentType: string; bytes: Buffer; finalUrl: string } | null> {
   try {
     const response = await fetch(url, {
-      redirect: 'follow',
+      redirect: "follow",
       headers: {
-        'user-agent': BROWSER_LIKE_USER_AGENT,
+        "user-agent": BROWSER_LIKE_USER_AGENT,
         accept:
-          'image/avif,image/webp,image/apng,image/svg+xml,image/x-icon,image/vnd.microsoft.icon,image/*,*/*;q=0.8',
+          "image/avif,image/webp,image/apng,image/svg+xml,image/x-icon,image/vnd.microsoft.icon,image/*,*/*;q=0.8",
       },
       signal: AbortSignal.timeout(ICON_TIMEOUT_MS),
-    })
+    });
     if (!response.ok) {
-      return null
+      return null;
     }
-    const contentType = (response.headers.get('content-type') ?? '')
-      .split(';')[0]
+    const contentType = (response.headers.get("content-type") ?? "")
+      .split(";")[0]
       .trim()
-      .toLowerCase()
-    const finalUrl = response.url || url
-    const body = Buffer.from(await response.arrayBuffer())
-    const isImageByType = contentType.startsWith('image/')
-    const pathLooksLikeIco =
-      (() => {
-        try {
-          return new URL(finalUrl).pathname.toLowerCase().endsWith('.ico')
-        } catch {
-          return false
-        }
-      })()
-    const looksLikeJpeg = body.length >= 2 && body[0] === 0xff && body[1] === 0xd8
+      .toLowerCase();
+    const finalUrl = response.url || url;
+    const body = Buffer.from(await response.arrayBuffer());
+    const isImageByType = contentType.startsWith("image/");
+    const pathLooksLikeIco = (() => {
+      try {
+        return new URL(finalUrl).pathname.toLowerCase().endsWith(".ico");
+      } catch {
+        return false;
+      }
+    })();
+    const looksLikeJpeg =
+      body.length >= 2 && body[0] === 0xff && body[1] === 0xd8;
     const sniffBinaryImage =
-      bufferLooksLikeIco(body) || bufferLooksLikePng(body) || looksLikeJpeg
+      bufferLooksLikeIco(body) || bufferLooksLikePng(body) || looksLikeJpeg;
     const isPotentialImageByUrl =
       looksLikeImageUrl(finalUrl) &&
-      (contentType === '' ||
-        contentType === 'application/octet-stream' ||
-        contentType === 'binary/octet-stream' ||
-        contentType === 'text/plain')
+      (contentType === "" ||
+        contentType === "application/octet-stream" ||
+        contentType === "binary/octet-stream" ||
+        contentType === "text/plain");
     const isImage =
       isImageByType ||
-      (isPotentialImageByUrl && !bufferLooksLikeHtml(body) && (sniffBinaryImage || pathLooksLikeIco)) ||
-      (pathLooksLikeIco && sniffBinaryImage && !bufferLooksLikeHtml(body))
+      (isPotentialImageByUrl &&
+        !bufferLooksLikeHtml(body) &&
+        (sniffBinaryImage || pathLooksLikeIco)) ||
+      (pathLooksLikeIco && sniffBinaryImage && !bufferLooksLikeHtml(body));
     if (!isImage) {
-      return null
+      return null;
     }
 
-    let effectiveType = contentType || 'application/octet-stream'
-    if (bufferLooksLikeIco(body) && !effectiveType.includes('icon')) {
-      effectiveType = 'image/vnd.microsoft.icon'
+    let effectiveType = contentType || "application/octet-stream";
+    if (bufferLooksLikeIco(body) && !effectiveType.includes("icon")) {
+      effectiveType = "image/vnd.microsoft.icon";
     }
-    if (bufferLooksLikePng(body) && !effectiveType.startsWith('image/')) {
-      effectiveType = 'image/png'
+    if (bufferLooksLikePng(body) && !effectiveType.startsWith("image/")) {
+      effectiveType = "image/png";
     }
 
     return {
       contentType: effectiveType,
       bytes: body,
       finalUrl,
-    }
+    };
   } catch {
-    return null
+    return null;
   }
 }
 
@@ -546,20 +557,20 @@ async function fetchHtmlDocument(
   pageUrl: string,
 ): Promise<{ finalUrl: string; html: string }> {
   const response = await fetch(pageUrl, {
-    redirect: 'follow',
+    redirect: "follow",
     headers: {
-      'user-agent': BROWSER_LIKE_USER_AGENT,
-      accept: 'text/html,application/xhtml+xml',
+      "user-agent": BROWSER_LIKE_USER_AGENT,
+      accept: "text/html,application/xhtml+xml",
     },
     signal: AbortSignal.timeout(PAGE_TIMEOUT_MS),
-  })
+  });
   if (!response.ok) {
-    throw new Error(`HTTP ${response.status} while fetching ${pageUrl}`)
+    throw new Error(`HTTP ${response.status} while fetching ${pageUrl}`);
   }
   return {
     finalUrl: response.url || pageUrl,
     html: await response.text(),
-  }
+  };
 }
 
 /**
@@ -568,15 +579,15 @@ async function fetchHtmlDocument(
 export async function discoverSiteBrandIconAsset(
   pageUrl: string,
 ): Promise<{ bytes: Buffer; contentType: string } | null> {
-  let document: { finalUrl: string; html: string }
+  let document: { finalUrl: string; html: string };
   try {
-    document = await fetchHtmlDocument(pageUrl)
+    document = await fetchHtmlDocument(pageUrl);
   } catch {
-    return null
+    return null;
   }
 
-  const $ = cheerio.load(document.html)
-  const baseUrl = document.finalUrl
+  const $ = cheerio.load(document.html);
+  const baseUrl = document.finalUrl;
 
   const rankedCandidates = dedupeCandidates([
     ...collectSiteLogoPathCandidates(baseUrl),
@@ -584,26 +595,26 @@ export async function discoverSiteBrandIconAsset(
     ...collectLinkedIconCandidates($, baseUrl),
     ...collectMetaImageCandidates($, baseUrl),
     ...collectConventionalFallbackCandidates(baseUrl),
-  ])
+  ]);
 
-  const skipTangledPlatformIcons = isTangledRepositoryPageUrl(baseUrl)
+  const skipTangledPlatformIcons = isTangledRepositoryPageUrl(baseUrl);
 
   for (const candidate of rankedCandidates) {
-    const probed = await probeImageUrl(candidate.url)
-    if (!probed) continue
+    const probed = await probeImageUrl(candidate.url);
+    if (!probed) continue;
     if (
       skipTangledPlatformIcons &&
       isTangledSiteWideBrandingIconAsset(probed.finalUrl)
     ) {
-      continue
+      continue;
     }
     return {
       bytes: probed.bytes,
       contentType: probed.contentType,
-    }
+    };
   }
 
-  return null
+  return null;
 }
 
 /**
@@ -613,30 +624,30 @@ export async function rasterizeBrandIconForGeminiInput(
   bytes: Buffer,
   contentType: string,
 ): Promise<Buffer> {
-  const ct = contentType.toLowerCase().split(';')[0].trim()
+  const ct = contentType.toLowerCase().split(";")[0].trim();
 
-  if (ct === 'image/png' || ct === 'image/jpeg' || ct === 'image/webp') {
-    const meta = await sharp(bytes, { failOn: 'none' }).metadata()
-    const maxDim = Math.max(meta.width ?? 0, meta.height ?? 0)
+  if (ct === "image/png" || ct === "image/jpeg" || ct === "image/webp") {
+    const meta = await sharp(bytes, { failOn: "none" }).metadata();
+    const maxDim = Math.max(meta.width ?? 0, meta.height ?? 0);
     if (maxDim > 1024) {
-      return sharp(bytes, { failOn: 'none' })
-        .resize(1024, 1024, { fit: 'inside', withoutEnlargement: true })
+      return sharp(bytes, { failOn: "none" })
+        .resize(1024, 1024, { fit: "inside", withoutEnlargement: true })
         .png()
-        .toBuffer()
+        .toBuffer();
     }
-    if (ct === 'image/png') {
-      return bytes
+    if (ct === "image/png") {
+      return bytes;
     }
-    return sharp(bytes, { failOn: 'none' }).png().toBuffer()
+    return sharp(bytes, { failOn: "none" }).png().toBuffer();
   }
 
-  return sharp(bytes, { density: 400, failOn: 'none' })
+  return sharp(bytes, { density: 400, failOn: "none" })
     .resize(1024, 1024, {
-      fit: 'inside',
+      fit: "inside",
       background: { r: 0, g: 0, b: 0, alpha: 0 },
     })
     .png()
-    .toBuffer()
+    .toBuffer();
 }
 
 /**
@@ -647,16 +658,16 @@ export async function upscaleBrandIconToSquarePng(
 ): Promise<Buffer> {
   return sharp(input, {
     density: 400,
-    failOn: 'none',
+    failOn: "none",
   })
     .resize(OUTPUT_SIZE, OUTPUT_SIZE, {
-      fit: 'contain',
-      position: 'centre',
+      fit: "contain",
+      position: "centre",
       background: { r: 0, g: 0, b: 0, alpha: 0 },
       kernel: sharp.kernel.lanczos3,
     })
     .png({ compressionLevel: 9, effort: 7 })
-    .toBuffer()
+    .toBuffer();
 }
 
 /**
@@ -665,16 +676,16 @@ export async function upscaleBrandIconToSquarePng(
  */
 export async function tryGetSiteBrandIconPng(
   pageUrl: string,
-): Promise<{ buffer: Buffer; mimeType: 'image/png' } | null> {
-  const raw = await discoverSiteBrandIconAsset(pageUrl)
-  if (!raw) return null
+): Promise<{ buffer: Buffer; mimeType: "image/png" } | null> {
+  const raw = await discoverSiteBrandIconAsset(pageUrl);
+  if (!raw) return null;
   try {
-    const png = await upscaleBrandIconToSquarePng(raw.bytes)
+    const png = await upscaleBrandIconToSquarePng(raw.bytes);
     if (png.length > 0) {
-      return { buffer: png, mimeType: 'image/png' }
+      return { buffer: png, mimeType: "image/png" };
     }
   } catch {
     /* ignore */
   }
-  return null
+  return null;
 }