From 3e88733f59f98f6cd6ce492b48738a1379e79cbc Mon Sep 17 00:00:00 2001
From: Holke Brammer <103380539+holkexyz@users.noreply.github.com>
Date: Wed, 1 Jul 2026 11:29:14 +0200
Subject: [PATCH 1/4] fix(feedback): hide the floating button where it's
 redundant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The floating feedback button is the app's primary door into the feedback
modal, but it shouldn't appear in two places:

- On /welcome, which has its own contact CTA and minimal landing chrome.
- Wherever the mobile bottom nav is on screen — that bar already carries
  a Feedback entry, so the floating button duplicated it and overlapped
  the bar.

Centralize the bottom nav's show/hide rule in a new isBottomNavVisible
helper (not desktop + standalone + not /embed + not /welcome) so
<BottomNav> and <FeedbackTrigger> derive visibility from one predicate
and can't drift. Both resolve on the same hydration tick, so they hand
off with no window where the bar and the floating button both show. In a
regular mobile browser tab (no bottom bar) the floating button still
shows, as there's nothing to duplicate.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/layout/bottom-nav.tsx       | 22 ++++----------
 src/components/layout/feedback-trigger.tsx | 16 +++++++++-
 src/lib/layout/bottom-nav-visibility.ts    | 34 ++++++++++++++++++++++
 3 files changed, 55 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/layout/bottom-nav-visibility.ts

diff --git a/src/components/layout/bottom-nav.tsx b/src/components/layout/bottom-nav.tsx
index 63a8c00e..14c4a185 100644
--- a/src/components/layout/bottom-nav.tsx
+++ b/src/components/layout/bottom-nav.tsx
@@ -6,6 +6,7 @@ import { useFeedback } from "@/lib/feedback-context";
 import { useOrg } from "@/lib/groups/org-context";
 import { isRouteVisibleToActor } from "@/lib/groups/personal-only";
 import { useLayoutBreakpoints } from "@/hooks/use-layout-breakpoints";
+import { isBottomNavVisible } from "@/lib/layout/bottom-nav-visibility";
 import Tooltip from "@/components/ui/tooltip";
 
 export default function BottomNav() {
@@ -15,22 +16,11 @@ export default function BottomNav() {
   const { activeOrg } = useOrg();
   const { isDesktop, isStandalone } = useLayoutBreakpoints();
 
-  // Unmount at ≥800px — the left rail is the primary nav on desktop and
-  // bottom-nav's focusable buttons would compete for tab order.
-  if (isDesktop) return null;
-
-  // Only show in installed / standalone mode (PWA or A2HS web clip).
-  // In a regular browser tab the address bar and OS gestures provide
-  // navigation; the bar also occludes content on /welcome for guests.
-  if (!isStandalone) return null;
-
-  // Embeds render bare (board-only) inside a third-party iframe.
-  if (pathname.startsWith("/embed")) return null;
-
-  // /welcome uses the minimal landing chrome (wordmark + sign-in) at every
-  // width — no bottom nav. Matches the mobile navbar + desktop-top-bar,
-  // which both return null on /welcome.
-  if (pathname === "/welcome") return null;
+  // Visibility is centralized in isBottomNavVisible so the floating
+  // <FeedbackTrigger> can hide itself under the exact same conditions
+  // (the bar already carries a Feedback entry). See the helper for the
+  // full per-condition rationale.
+  if (!isBottomNavVisible({ pathname, isDesktop, isStandalone })) return null;
 
   const isHome = pathname === "/home" || pathname.startsWith("/home/");
 
diff --git a/src/components/layout/feedback-trigger.tsx b/src/components/layout/feedback-trigger.tsx
index c0abb446..4bc289ba 100644
--- a/src/components/layout/feedback-trigger.tsx
+++ b/src/components/layout/feedback-trigger.tsx
@@ -1,8 +1,11 @@
 "use client"
 
 import { useCallback, useEffect, useState } from "react"
+import { usePathname } from "next/navigation"
 import { MessageSquare } from "lucide-react"
 import { useFeedback } from "@/lib/feedback-context"
+import { useLayoutBreakpoints } from "@/hooks/use-layout-breakpoints"
+import { isBottomNavVisible } from "@/lib/layout/bottom-nav-visibility"
 
 /**
  * Floating "Share Feedback" button, pinned bottom-right. It's the app's
@@ -15,6 +18,8 @@ import { useFeedback } from "@/lib/feedback-context"
  */
 export default function FeedbackTrigger() {
   const { isOpen, openFeedback } = useFeedback()
+  const pathname = usePathname()
+  const { isDesktop, isStandalone } = useLayoutBreakpoints()
   const [bottomOffset, setBottomOffset] = useState(20)
 
   const updatePosition = useCallback(() => {
@@ -62,7 +67,16 @@ export default function FeedbackTrigger() {
     }
   }, [updatePosition])
 
-  if (isOpen) return null
+  // Hidden on the marketing landing page (/welcome has its own contact
+  // CTA), and wherever the mobile bottom nav is on screen — that bar
+  // already carries a Feedback entry, so the floating button would
+  // duplicate it and overlap the bar.
+  if (
+    isOpen ||
+    pathname === "/welcome" ||
+    isBottomNavVisible({ pathname, isDesktop, isStandalone })
+  )
+    return null
 
   return (
     <button
diff --git a/src/lib/layout/bottom-nav-visibility.ts b/src/lib/layout/bottom-nav-visibility.ts
new file mode 100644
index 00000000..008f9830
--- /dev/null
+++ b/src/lib/layout/bottom-nav-visibility.ts
@@ -0,0 +1,34 @@
+/**
+ * Single source of truth for whether the mobile bottom navigation bar
+ * (<BottomNav>) is on screen for the current environment.
+ *
+ * Shared by <BottomNav>, which renders the bar, and <FeedbackTrigger>,
+ * which hides its floating "Feedback" button whenever the bar is present:
+ * the bar already carries a Feedback entry, so the floating button would
+ * be a redundant second door and would visually overlap the bar.
+ *
+ * The bar is shown only when ALL of these hold:
+ *  - not desktop (<800px): at >=800px the left rail / top bar own
+ *    navigation, and the bar's focusable buttons would compete for tab
+ *    order, so it unmounts.
+ *  - standalone (installed PWA / A2HS web clip): in a regular browser tab
+ *    the address bar and OS gestures provide navigation, and the bar
+ *    would occlude content (e.g. /welcome for guests).
+ *  - not an /embed route: embeds render bare (board-only) inside a
+ *    third-party iframe.
+ *  - not /welcome: the minimal landing chrome (wordmark + sign-in) has no
+ *    bottom nav at any width.
+ */
+export function isBottomNavVisible(params: {
+  pathname: string;
+  isDesktop: boolean;
+  isStandalone: boolean;
+}): boolean {
+  const { pathname, isDesktop, isStandalone } = params;
+  return (
+    !isDesktop &&
+    isStandalone &&
+    !pathname.startsWith("/embed") &&
+    pathname !== "/welcome"
+  );
+}

From 681c4bd2910639cb73920c4842db60f1ee34823e Mon Sep 17 00:00:00 2001
From: Holke Brammer <103380539+holkexyz@users.noreply.github.com>
Date: Thu, 2 Jul 2026 10:24:09 +0200
Subject: [PATCH 2/4] feat(endorsement-graph): show award-typed badges as amber
 toggleable links

The graph previously scanned only endorsement-typed badge awards. Now it
also loads badgeType "award" records and draws them as a second edge kind:

- The AllEndorsements indexer op takes an allowlisted badgeType variable
  (defaults to "endorsement" for older clients) and selects the strong-ref
  subject uri, since award-typed badges usually target records; the at://
  authority of that uri identifies the owning account for the edge. The
  strong-ref fallback is award-only so the endorsement graph is unchanged.
- The hook runs one scan per type concurrently, tags each deduped edge
  with its kind, and reports totalAwards. Node degrees and all mutual
  stats stay endorsement-scoped, matching every label that consumes them
  (Top endorsers, Most endorsed, the panel counts, node sizing); award
  edges never carry the mutual flag.
- Award links render in the theme-aware --color-warning with a slight
  always-on curve so they never hide under a parallel endorsement edge;
  the legend gains an Award row and the sidebar an Awards stat.
- Two checkboxes (Endorsements / Awards, both on by default) filter the
  view; the last checked one is disabled so one kind is always shown. The
  kind filter runs before the evaluator-reachability and mutual-only
  filters, and the hover adjacency, detail panel (with new Awarded /
  Awarded by sections), and search all derive from the filtered view so
  hidden edges can't leak into highlights, counts, or results.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/api/indexer/route.ts                  |  29 ++-
 src/app/styles/visualization.css              |  34 ++-
 .../visualization/endorsement-graph.tsx       | 214 ++++++++++++------
 .../visualization/endorsement-stats.tsx       |   6 +-
 src/hooks/use-endorsement-graph.ts            | Bin 13297 -> 16619 bytes
 5 files changed, 203 insertions(+), 80 deletions(-)

diff --git a/src/app/api/indexer/route.ts b/src/app/api/indexer/route.ts
index 3962ff50..d011ebfc 100644
--- a/src/app/api/indexer/route.ts
+++ b/src/app/api/indexer/route.ts
@@ -330,19 +330,23 @@ ${ACTIVITY_NODE_SELECTION}
     }
   `,
 
-  // Every endorsement-typed badge award across the network — backs the
-  // /endorsement-graph page. Returns the directed edge
-  // (issuer `did` → `subject` DID) plus the issuer's denormalised actor
+  // Every badge award of one `badgeType` across the network — backs the
+  // /endorsement-graph page, which scans once per type ("endorsement" and
+  // "award"; the proxy allowlists the value). Returns the directed edge
+  // (issuer `did` → `subject`) plus the issuer's denormalised actor
   // profile (same `issuer { ... }` join as ReceivedEndorsements, drops a
-  // per-issuer resolve fan-out). Subjects that never issued an award have
-  // no inline profile here, so the client resolves those DIDs via
+  // per-issuer resolve fan-out). The subject union carries the DID for
+  // account-targeted awards and the strong-ref `uri` for record-targeted
+  // ones (award-typed badges usually point at records; the at:// authority
+  // identifies the owning account). Subjects that never issued an award
+  // have no inline profile here, so the client resolves those DIDs via
   // NetworkActorsByDids. `excludeAuthorLabels` hides awards authored by
   // likely-test accounts, mirroring AwardCount so the graph matches the
   // public counters. Paginated; the client unions pages up to a cap.
   AllEndorsements: `
-    query AllEndorsements($first: Int!, $after: String) {
+    query AllEndorsements($badgeType: String!, $first: Int!, $after: String) {
       appCertifiedBadgeAward(
-        where: { badgeType: { eq: "endorsement" } }
+        where: { badgeType: { eq: $badgeType } }
         excludeAuthorLabels: ${JSON.stringify([...DEFAULT_HIDDEN_ORG_LABELS])}
         first: $first
         after: $after
@@ -357,6 +361,7 @@ ${ACTIVITY_NODE_SELECTION}
             subject {
               __typename
               ... on AppCertifiedDefsDid { did }
+              ... on ComAtprotoRepoStrongRef { uri }
             }
             issuer { did handle displayName avatarCid pds }
             response { state }
@@ -1605,9 +1610,15 @@ function buildVariables(
       return { viewer, degree: rawDegree }
     }
     case "AllEndorsements": {
-      // Zero required vars — paginated network-wide scan. Same clamp
-      // shape as the other 100-per-page reads (ReceivedEndorsements).
+      // Paginated network-wide scan, one badge type per pass. Strict
+      // allowlist on `badgeType` (defaults to "endorsement" for older
+      // clients) — anything else 400s here rather than fanning an
+      // arbitrary string out to the indexer. Same clamp shape as the
+      // other 100-per-page reads (ReceivedEndorsements).
+      const badgeType = vars.badgeType === undefined ? "endorsement" : vars.badgeType
+      if (badgeType !== "endorsement" && badgeType !== "award") return null
       return {
+        badgeType,
         first: clampFirst(vars.first, MAX_FIRST, 100),
         after: readString(vars.after, MAX_AFTER_LEN),
       }
diff --git a/src/app/styles/visualization.css b/src/app/styles/visualization.css
index 636a6050..fec88954 100644
--- a/src/app/styles/visualization.css
+++ b/src/app/styles/visualization.css
@@ -145,6 +145,17 @@
   min-width: 200px;
 }
 
+/* Endorsement/award checkboxes float over the canvas, so give the row the
+   same card chrome as the legend for readability. */
+.viz__kind-toggles {
+  gap: var(--space-3, 12px);
+  padding: var(--space-2, 8px) var(--space-3, 12px);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+}
+
 /* Layout + scope switchers fill the control panel so their segments read
    as one clear toggle rather than floating short. */
 .viz__layout-toggle,
@@ -263,6 +274,10 @@
   border-top-width: 3px;
 }
 
+.viz__legend-swatch--award {
+  border-top-color: var(--color-warning);
+}
+
 /* ---- Hover / selected node info panel ---- */
 .viz__panel {
   position: absolute;
@@ -446,6 +461,13 @@
   gap: var(--space-3, 12px);
 }
 
+/* With an odd cell count (5 since the Awards stat) the last cell spans the
+   2-column grid instead of orphaning at half width. The tablet range
+   overrides this — there the five cells share one row. */
+.viz__stats-grid > .viz__stat:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+}
+
 .viz__stat {
   display: flex;
   flex-direction: column;
@@ -560,7 +582,11 @@
   }
 
   .viz__stats-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .viz__stats-grid > .viz__stat:last-child:nth-child(odd) {
+    grid-column: auto;
   }
 }
 
@@ -573,6 +599,12 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  /* Back to 2 columns here, so the odd-count span applies again (the
+     tablet block above also matches this range and would otherwise win). */
+  .viz__stats-grid > .viz__stat:last-child:nth-child(odd) {
+    grid-column: 1 / -1;
+  }
+
   .viz__panel {
     width: 220px;
   }
diff --git a/src/components/visualization/endorsement-graph.tsx b/src/components/visualization/endorsement-graph.tsx
index 060fb229..41a68900 100644
--- a/src/components/visualization/endorsement-graph.tsx
+++ b/src/components/visualization/endorsement-graph.tsx
@@ -4,10 +4,14 @@
  * Canvas force-directed endorsement graph. Loaded client-only (it touches
  * `window`/`canvas`) — the parent imports it via `next/dynamic({ ssr: false })`.
  *
- * Nodes are user avatars sized by degree; edges are directed endorsements
- * (arrow points issuer -> subject). Mutual edges render in the accent colour
- * with a slight curvature so the two directions bow apart into a clearly
- * bidirectional lens; one-way edges are a single muted straight arrow.
+ * Nodes are user avatars sized by degree; edges are directed badges (arrow
+ * points issuer -> subject) of two kinds, toggled by a checkbox pair (at
+ * least one always on). Endorsement edges: mutual ones render in the accent
+ * colour with a slight curvature so the two directions bow apart into a
+ * clearly bidirectional lens; one-way ones are a single muted straight
+ * arrow. Award edges render in the warning (amber) colour and always carry
+ * a small curvature so they never hide under a parallel endorsement edge
+ * between the same pair.
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -19,6 +23,7 @@ import ForceGraph2D, {
 import Link from "next/link"
 import Avatar from "@/components/ui/avatar"
 import Button from "@/components/ui/button"
+import Checkbox from "@/components/ui/checkbox"
 import Input from "@/components/ui/input"
 import SegmentedControl from "@/components/ui/segmented-control"
 import { getInitials } from "@/lib/utils/initials"
@@ -53,9 +58,11 @@ interface EndorsementGraphProps {
 
 /**
  * Recompute sidebar stats over the visible (filtered) graph: per-node
- * given/received/mutual within the shown edges, total shown edges, and
- * mutual pairs. New node objects (not the canvas's) so the force
- * simulation isn't disturbed.
+ * given/received/mutual within the shown edges, total shown edges per
+ * kind, and mutual pairs. Node metrics stay endorsement-scoped (matching
+ * the hook and the endorsement-worded labels that consume them); award
+ * edges only feed `totalAwards`. New node objects (not the canvas's) so
+ * the force simulation isn't disturbed.
  */
 function computeFilteredStats(
   nodes: GraphNode[],
@@ -66,10 +73,17 @@ function computeFilteredStats(
   const received = new Map<string, Set<string>>()
   const mutualCount = new Map<string, number>()
   let mutualLinks = 0
+  let endorsementLinks = 0
+  let awardLinks = 0
   for (const l of links) {
     const s = linkEndId(l.source)
     const t = linkEndId(l.target)
     if (!s || !t) continue
+    if (l.kind === "award") {
+      awardLinks++
+      continue
+    }
+    endorsementLinks++
     ;(given.get(s) ?? given.set(s, new Set()).get(s)!).add(t)
     ;(received.get(t) ?? received.set(t, new Set()).get(t)!).add(s)
     if (l.mutual) {
@@ -85,7 +99,8 @@ function computeFilteredStats(
       mutual: mutualCount.get(n.id) ?? 0,
     })),
     links,
-    totalEndorsements: links.length,
+    totalEndorsements: endorsementLinks,
+    totalAwards: awardLinks,
     mutualPairs: Math.round(mutualLinks / 2),
     truncated,
   }
@@ -98,6 +113,8 @@ interface ThemeColors {
   disc: string
   discText: string
   accent: string
+  /** Award-typed edges — amber, distinct from both endorsement colours. */
+  award: string
   link: string
   bg: string
 }
@@ -112,6 +129,7 @@ function readThemeColors(): ThemeColors {
     disc: get("--bg-raised"),
     discText: get("--fg-secondary"),
     accent: get("--color-success"),
+    award: get("--color-warning"),
     link: get("--fg-muted"),
     bg: get("--bg-sunken"),
   }
@@ -253,6 +271,10 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
   // than the colours ref; updated alongside the ref on theme changes.
   const [bgColor, setBgColor] = useState<string | undefined>(undefined)
   const [onlyMutual, setOnlyMutual] = useState(false)
+  // Badge-kind checkboxes. Both on by default; the UI disables the last
+  // checked one so at least one kind is always shown.
+  const [showEndorsements, setShowEndorsements] = useState(true)
+  const [showAwards, setShowAwards] = useState(true)
   const [layout, setLayout] = useState<LayoutMode>("network")
   // Default on: only show the web reachable from the trusted evaluators
   // (any number of endorsement hops). Also hides stray disconnected
@@ -315,11 +337,27 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
     }
   }, [nodes])
 
-  // --- filtered working data (mutual-only toggle) ------------------------
+  // --- filtered working data (kind checkboxes + scope + mutual) ----------
   const data = useMemo(() => {
     let nds = nodes
     let lks = links
 
+    // 0. badge-kind filter — the endorsement/award checkbox pair. Runs
+    //    FIRST so the downstream filters (evaluator reachability, mutual-
+    //    only) only ever see edges of the kinds the user wants: with
+    //    awards unchecked the view is exactly the pre-award graph, and
+    //    reachability never flows through a hidden edge. Nodes left
+    //    without any visible edge drop out with their edges.
+    if (!showEndorsements || !showAwards) {
+      lks = lks.filter((l) => (l.kind === "award" ? showAwards : showEndorsements))
+      const keep = new Set<string>()
+      for (const l of lks) {
+        keep.add(linkEndId(l.source) ?? "")
+        keep.add(linkEndId(l.target) ?? "")
+      }
+      nds = nds.filter((n) => keep.has(n.id))
+    }
+
     // 1. connected-to-evaluators filter — keep only the nodes reachable
     //    from a trusted evaluator by following endorsements OUTWARD
     //    (issuer → subject): an evaluator, everyone they endorse, everyone
@@ -328,20 +366,21 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
     //    the evaluator set has loaded, or if none of them appear in the
     //    current graph (so we never blank the view out).
     //
-    //    Reachability is computed over the FULL graph — all nodes and all
-    //    edges — and runs BEFORE the mutual-only filter. Otherwise mutual-only
-    //    would drop one-way edges first, and an evaluator who only endorses
-    //    one-way would vanish from the seed set, leaving `seen` empty and this
-    //    whole filter a silent no-op (the reported bug).
+    //    Reachability is computed over the kind-filtered graph — all its
+    //    nodes and edges — and runs BEFORE the mutual-only filter. Otherwise
+    //    mutual-only would drop one-way edges first, and an evaluator who
+    //    only endorses one-way would vanish from the seed set, leaving
+    //    `seen` empty and this whole filter a silent no-op (the reported
+    //    bug).
     if (evaluatorConnectedOnly && evaluatorDids.length > 0) {
-      const fullNodeIds = new Set(nodes.map((n) => n.id))
+      const fullNodeIds = new Set(nds.map((n) => n.id))
       const adj = new Map<string, string[]>()
       const link2 = (k: string, v: string) => {
         const arr = adj.get(k)
         if (arr) arr.push(v)
         else adj.set(k, [v])
       }
-      for (const l of links) {
+      for (const l of lks) {
         const s = linkEndId(l.source)
         const t = linkEndId(l.target)
         if (!s || !t) continue
@@ -376,7 +415,9 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
 
     // 2. mutual-only filter — applied last, a pure display constraint on the
     //    (possibly evaluator-scoped) graph: keep mutual edges and the nodes
-    //    they touch.
+    //    they touch. Award edges never carry the mutual flag (mutuality is
+    //    an endorsement concept), so this filter hides them all — matching
+    //    the sidebar's endorsement-scoped "Mutual pairs" count.
     if (onlyMutual) {
       lks = lks.filter((l) => l.mutual)
       const keep = new Set<string>()
@@ -388,7 +429,7 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
     }
 
     return { nodes: nds, links: lks }
-  }, [nodes, links, onlyMutual, evaluatorConnectedOnly, evaluatorDids])
+  }, [nodes, links, onlyMutual, showEndorsements, showAwards, evaluatorConnectedOnly, evaluatorDids])
 
   // Mirror the visible (filtered) graph's stats up to the sidebar so its
   // counts + rankings track the active scope / mutual filters.
@@ -449,6 +490,9 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
   }, [layout, data, size.w])
 
   // --- adjacency for hover/selection highlight ---------------------------
+  // Built from the FILTERED links so hover dimming, focus zoom and the
+  // detail panel all agree with the active kind/scope/mutual filters —
+  // a hidden edge never keeps a neighbour lit or drags it into view.
   const adjacency = useMemo(() => {
     const map = new Map<string, Set<string>>()
     const add = (a: string, b: string) => {
@@ -459,7 +503,7 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
       }
       s.add(b)
     }
-    for (const l of links) {
+    for (const l of data.links) {
       const s = linkEndId(l.source)
       const t = linkEndId(l.target)
       if (s && t) {
@@ -468,7 +512,7 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
       }
     }
     return map
-  }, [links])
+  }, [data.links])
 
   const activeId = hoverId ?? selectedId
   const highlightNodes = useMemo(() => {
@@ -478,11 +522,13 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
     return set
   }, [activeId, adjacency])
 
+  // Visible nodes only — so a selection or search can't resolve to a node
+  // the active filters removed from the canvas.
   const nodeById = useMemo(() => {
     const m = new Map<string, GraphNode>()
-    for (const n of nodes) m.set(n.id, n)
+    for (const n of data.nodes) m.set(n.id, n)
     return m
-  }, [nodes])
+  }, [data.nodes])
 
   // --- focus requests from the sidebar / search --------------------------
   // Fit the clicked node together with everyone it's connected to into
@@ -507,12 +553,13 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [focusReq.nonce])
 
-  // Accounts matching the search box, ranked by degree. Drives the
-  // results dropdown.
+  // VISIBLE accounts matching the search box, ranked by degree. Drives the
+  // results dropdown; filtered-out accounts don't appear (selecting one
+  // would zoom to nothing).
   const searchResults = useMemo(() => {
     const q = search.trim().toLowerCase()
     if (!q) return [] as GraphNode[]
-    return nodes
+    return data.nodes
       .filter(
         (n) =>
           (n.handle && n.handle.toLowerCase().includes(q)) ||
@@ -520,7 +567,7 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
       )
       .sort((a, b) => b.given + b.received - (a.given + a.received))
       .slice(0, 8)
-  }, [search, nodes])
+  }, [search, data.nodes])
 
   const selectSearchResult = useCallback(
     (did: string) => {
@@ -615,6 +662,7 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
         const on = s != null && t != null && highlightNodes.has(s) && highlightNodes.has(t)
         if (!on) return c.border
       }
+      if (link.kind === "award") return c.award
       return link.mutual ? c.accent : c.link
     },
     [highlightNodes],
@@ -624,23 +672,32 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
   const hoverNode = hoverId ? nodeById.get(hoverId) ?? null : null
   const panelNode = hoverNode ?? selectedNode
 
+  // Panel neighbour strips, split by badge kind so the "Endorsed" headings
+  // stay truthful and an account connected by both an endorsement AND an
+  // award shows up once per section (unique keys within each strip).
+  // Derived from the filtered links, like the adjacency map above.
   const neighbourList = useMemo(() => {
-    if (!panelNode) return { endorsed: [] as GraphNode[], endorsedBy: [] as GraphNode[] }
-    const endorsed: GraphNode[] = []
-    const endorsedBy: GraphNode[] = []
-    for (const l of links) {
+    const empty = {
+      endorsed: [] as GraphNode[],
+      endorsedBy: [] as GraphNode[],
+      awarded: [] as GraphNode[],
+      awardedBy: [] as GraphNode[],
+    }
+    if (!panelNode) return empty
+    const { endorsed, endorsedBy, awarded, awardedBy } = empty
+    for (const l of data.links) {
       const s = linkEndId(l.source)
       const t = linkEndId(l.target)
       if (s === panelNode.id && t) {
         const n = nodeById.get(t)
-        if (n) endorsed.push(n)
+        if (n) (l.kind === "award" ? awarded : endorsed).push(n)
       } else if (t === panelNode.id && s) {
         const n = nodeById.get(s)
-        if (n) endorsedBy.push(n)
+        if (n) (l.kind === "award" ? awardedBy : endorsedBy).push(n)
       }
     }
-    return { endorsed, endorsedBy }
-  }, [panelNode, links, nodeById])
+    return { endorsed, endorsedBy, awarded, awardedBy }
+  }, [panelNode, data.links, nodeById])
 
   // --- draggable panel ---------------------------------------------------
   const onPanelPointerDown = useCallback(
@@ -715,8 +772,15 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
           nodeCanvasObject={paintNode}
           nodePointerAreaPaint={paintPointerArea}
           linkColor={linkColor}
-          linkWidth={(l: FGLink) => (l.mutual ? 1.6 : 0.8)}
-          linkCurvature={(l: FGLink) => (l.mutual ? 0.2 : 0)}
+          linkWidth={(l: FGLink) => (l.kind === "award" ? 1.1 : l.mutual ? 1.6 : 0.8)}
+          // Award edges always curve a little so they never draw exactly on
+          // top of a parallel endorsement edge between the same pair. A
+          // reciprocal award pair bows apart naturally: curvature is
+          // relative to each link's direction, so the two opposite arrows
+          // bend to opposite sides (award edges never carry `mutual`).
+          linkCurvature={(l: FGLink) =>
+            l.kind === "award" ? 0.14 : l.mutual ? 0.2 : 0
+          }
           linkDirectionalArrowLength={3.2}
           linkDirectionalArrowRelPos={1}
           onNodeHover={(n: FGNode | null) => setHoverId(n ? (n.id as string) : null)}
@@ -807,6 +871,22 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
             Mutual only
           </Button>
         </div>
+        {/* Badge-kind toggles. The last checked box is disabled so at
+            least one kind is always visible. */}
+        <div className="viz__control-row viz__kind-toggles">
+          <Checkbox
+            label="Endorsements"
+            checked={showEndorsements}
+            disabled={showEndorsements && !showAwards}
+            onChange={(e) => setShowEndorsements(e.target.checked)}
+          />
+          <Checkbox
+            label="Awards"
+            checked={showAwards}
+            disabled={showAwards && !showEndorsements}
+            onChange={(e) => setShowAwards(e.target.checked)}
+          />
+        </div>
         <div className="viz__legend" aria-hidden="true">
           <div className="viz__legend-row">
             <span className="viz__legend-swatch viz__legend-swatch--uni" />
@@ -816,6 +896,10 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
             <span className="viz__legend-swatch viz__legend-swatch--mutual" />
             <span>Mutual endorsement</span>
           </div>
+          <div className="viz__legend-row">
+            <span className="viz__legend-swatch viz__legend-swatch--award" />
+            <span>Award</span>
+          </div>
         </div>
       </div>
 
@@ -953,40 +1037,32 @@ export default function EndorsementGraph({ nodes, links, focusReq, truncated = f
             </div>
           </div>
 
-          {neighbourList.endorsed.length > 0 && (
-            <div>
-              <div className="viz__panel-section-title">Endorsed ({neighbourList.endorsed.length})</div>
-              <div className="viz__neighbours">
-                {neighbourList.endorsed.slice(0, 12).map((n) => (
-                  <span key={n.id} className="viz__neighbour" title={n.displayName || n.id}>
-                    <Avatar
-                      src={n.avatarUrl || undefined}
-                      size="sm"
-                      fallbackInitials={getInitials(n.displayName, n.handle)}
-                    />
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {neighbourList.endorsedBy.length > 0 && (
-            <div>
-              <div className="viz__panel-section-title">
-                Endorsed by ({neighbourList.endorsedBy.length})
-              </div>
-              <div className="viz__neighbours">
-                {neighbourList.endorsedBy.slice(0, 12).map((n) => (
-                  <span key={n.id} className="viz__neighbour" title={n.displayName || n.id}>
-                    <Avatar
-                      src={n.avatarUrl || undefined}
-                      size="sm"
-                      fallbackInitials={getInitials(n.displayName, n.handle)}
-                    />
-                  </span>
-                ))}
+          {(
+            [
+              ["Endorsed", neighbourList.endorsed],
+              ["Endorsed by", neighbourList.endorsedBy],
+              ["Awarded", neighbourList.awarded],
+              ["Awarded by", neighbourList.awardedBy],
+            ] as const
+          ).map(([title, list]) =>
+            list.length > 0 ? (
+              <div key={title}>
+                <div className="viz__panel-section-title">
+                  {title} ({list.length})
+                </div>
+                <div className="viz__neighbours">
+                  {list.slice(0, 12).map((n) => (
+                    <span key={n.id} className="viz__neighbour" title={n.displayName || n.id}>
+                      <Avatar
+                        src={n.avatarUrl || undefined}
+                        size="sm"
+                        fallbackInitials={getInitials(n.displayName, n.handle)}
+                      />
+                    </span>
+                  ))}
+                </div>
               </div>
-            </div>
+            ) : null,
           )}
 
           <Link
diff --git a/src/components/visualization/endorsement-stats.tsx b/src/components/visualization/endorsement-stats.tsx
index f17ebab8..ba4d42e3 100644
--- a/src/components/visualization/endorsement-stats.tsx
+++ b/src/components/visualization/endorsement-stats.tsx
@@ -60,7 +60,7 @@ function Rank({
 }
 
 export default function EndorsementStats({ graph, onFocus }: EndorsementStatsProps) {
-  const { nodes, totalEndorsements, mutualPairs } = graph
+  const { nodes, totalEndorsements, totalAwards, mutualPairs } = graph
 
   const stats = useMemo(() => {
     const participants = nodes.length
@@ -96,6 +96,10 @@ export default function EndorsementStats({ graph, onFocus }: EndorsementStatsPro
           <span className="viz__stat-value">{totalEndorsements.toLocaleString()}</span>
           <span className="viz__stat-label">Endorsements</span>
         </div>
+        <div className="viz__stat">
+          <span className="viz__stat-value">{totalAwards.toLocaleString()}</span>
+          <span className="viz__stat-label">Awards</span>
+        </div>
         <div className="viz__stat">
           <span className="viz__stat-value">{stats.participants.toLocaleString()}</span>
           <span className="viz__stat-label">People</span>
diff --git a/src/hooks/use-endorsement-graph.ts b/src/hooks/use-endorsement-graph.ts
index 67f75e1d8ae16b1878943575572468fb1b67f4b7..e76f8da20ac9ca1781cd546c1ad9ae476bb7dcf8 100644
GIT binary patch
delta 3962
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
U(>(llsX14iKx+8owfE=#2eGa-mH+?%

delta 772
zcmZ8fO=}ZT6lIcV(}}?-k~UPrZ6=wdrkP50Q6jM)8c|CtL~B<<UNSGq=wv3m_hK9B
zAZ~OeSS|>zRB+*bs%}MpgG+JKh2Td2fH;#$wKy>I-rRdQ_uRwz@ksjBe)fI$XJ!mK
zgv)RSQ&JJ{NU7uA9jK+-jMFZ)1U``RD?s%&)u8HqIc#+(qdrP>C@^}TdPpE9w}EaO
zTyP+aLdzuWHr1it?TbD!>!^pSvjrbKILuxWgC5m=vf<Mp-UJ|9gz5M#G=aZE>F7Zd
zPluIS(1Rvn%<!c63JlKsl;!;$0ur5CHtQ18;NJWmvs;Ggp)Av|C=}`e9Ckp{G;r!O
z?s}vY!PW6A_;Fm|d%1_b*aTv1YHYL)ZXSDlbfoEeynrX-Q}`sl;O@uYNjR4{?`|h<
zg>WO8KE;i;Ma;!AEH`W>ZVvz4x5+n>yE$2lEH!P53vaMx>y(!RMm`II^{plmo>m7c
ze$^1rqN3SZHqB+<30??@@#(p1?vXTx62T6oi@e{sOPeBtiRs(8Gp$N8zRCc8$}D17
zIk_eWeh_Vh162jzZ@UG5YnpE8P^nZP!v!;}b_N#zYnH+4o2HBxl(X1Xs<@{t<qze9
z%fm6k7R0Rniw!RpWf|AAH}GXPi662xjOFG-j*ORb8uDBgU*uA_m#bk^y{tGhBdN~t
zbOOr2uX}Xh*;2=cD&TAH{j5&nS9LxN&WsCrH<Auu2RW<^qq<55T=Q~WsN-5Gjk~24
V{8GB=Dw->~`*V8K-B@@Y{R5?B{|^8F


From 1b24c9bb21ca96d21ec8c8faef361ceab3a929a4 Mon Sep 17 00:00:00 2001
From: Holke Brammer <103380539+holkexyz@users.noreply.github.com>
Date: Thu, 2 Jul 2026 10:31:18 +0200
Subject: [PATCH 3/4] docs(help): explain what certified.app is
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New section between the intro and the walk-through: certified.app is a
view into the whole Certified network — every account, the activities
and impact data they publish, and the connections between them — with
the data living in each account's AT Protocol repo rather than in the
app. Links to Explore and the endorsement graph as starting points.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/help/page.tsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/app/help/page.tsx b/src/app/help/page.tsx
index a3e9afc0..f52d89ee 100644
--- a/src/app/help/page.tsx
+++ b/src/app/help/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Link from "next/link";
 import PageTitle from "@/components/layout/page-title";
 import HelpFeedbackLink from "@/components/help/help-feedback-link";
 import HelpTourButton from "@/components/help/help-tour-button";
@@ -47,6 +48,38 @@ export default function HelpPage() {
             </p>
           </section>
 
+          <section>
+            <h2 className="font-headline text-h2 text-[var(--fg-primary)] mb-4">
+              What is certified.app?
+            </h2>
+            <p className="mb-4">
+              certified.app is a view into the whole Certified network. It brings together every
+              account on the network, the activities and impact data they publish, and the
+              connections between them — who endorses whom, who follows whom, and who works
+              together in which group. The data itself doesn&apos;t live in this app: each account
+              keeps its own records on the AT Protocol, and certified.app reads across all of them
+              to show the network in one place. Other compatible apps can present the same network
+              in their own way.
+            </p>
+            <p>
+              A good place to start browsing is{" "}
+              <Link
+                href="/explore"
+                className="text-[var(--color-accent)] underline hover:text-[var(--color-accent-hover)]"
+              >
+                Explore
+              </Link>
+              , and the{" "}
+              <Link
+                href="/endorsement-graph"
+                className="text-[var(--color-accent)] underline hover:text-[var(--color-accent-hover)]"
+              >
+                endorsement graph
+              </Link>{" "}
+              draws the network&apos;s connections as an interactive map.
+            </p>
+          </section>
+
           <section>
             <h2 className="font-headline text-h2 text-[var(--fg-primary)] mb-4">
               Take the walk-through

From 7f9c14add7538899a9b1da02a9bbab5a59c7819d Mon Sep 17 00:00:00 2001
From: Holke Brammer <103380539+holkexyz@users.noreply.github.com>
Date: Thu, 2 Jul 2026 10:40:14 +0200
Subject: [PATCH 4/4] docs(help): tighten the certified.app section

Drop the Explore / endorsement-graph pointer paragraph and say
"on AT Protocol" without the article.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/help/page.tsx | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/app/help/page.tsx b/src/app/help/page.tsx
index f52d89ee..a0b0df98 100644
--- a/src/app/help/page.tsx
+++ b/src/app/help/page.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import PageTitle from "@/components/layout/page-title";
 import HelpFeedbackLink from "@/components/help/help-feedback-link";
 import HelpTourButton from "@/components/help/help-tour-button";
@@ -52,32 +51,15 @@ export default function HelpPage() {
             <h2 className="font-headline text-h2 text-[var(--fg-primary)] mb-4">
               What is certified.app?
             </h2>
-            <p className="mb-4">
+            <p>
               certified.app is a view into the whole Certified network. It brings together every
               account on the network, the activities and impact data they publish, and the
               connections between them — who endorses whom, who follows whom, and who works
               together in which group. The data itself doesn&apos;t live in this app: each account
-              keeps its own records on the AT Protocol, and certified.app reads across all of them
+              keeps its own records on AT Protocol, and certified.app reads across all of them
               to show the network in one place. Other compatible apps can present the same network
               in their own way.
             </p>
-            <p>
-              A good place to start browsing is{" "}
-              <Link
-                href="/explore"
-                className="text-[var(--color-accent)] underline hover:text-[var(--color-accent-hover)]"
-              >
-                Explore
-              </Link>
-              , and the{" "}
-              <Link
-                href="/endorsement-graph"
-                className="text-[var(--color-accent)] underline hover:text-[var(--color-accent-hover)]"
-              >
-                endorsement graph
-              </Link>{" "}
-              draws the network&apos;s connections as an interactive map.
-            </p>
           </section>
 
           <section>