feat(api+web): notification feed — recent @-mentions across meshes

Universe dashboard gets a "Recent mentions" section listing every
topic_message from the last 7 days that references the viewer via
`@<displayName>` (per-mesh — a user can carry different display
names in different meshes). One union'd OR query, capped at 20.

Each mention card links straight into the topic chat at the right
mesh. Snippet is the first 240 chars of the decoded ciphertext with
@-tokens highlighted in clay, matching the in-chat renderer.

GET /v1/notifications mirrors the same scan for api-key-authed
clients (CLI, bots) — accepts ?since=<ISO> for incremental polling.
Both paths use Postgres regex on the decoded base64 plaintext;
when per-topic encryption lands in v0.3.0 they'll move to a
notification table populated at write time.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/app/[locale]/dashboard/(user)/page.tsx

@@ -7,12 +7,13 @@ import {
 import { handle } from "@turbostarter/api/utils";
 import { db } from "@turbostarter/db/server";
 import {
+  mesh,
   meshMember,
   meshTopic,
   meshTopicMember,
   meshTopicMessage,
 } from "@turbostarter/db/schema/mesh";
-import { and, count, eq, inArray, isNull, or, sql } from "drizzle-orm";
+import { and, count, desc, eq, gt, inArray, isNull, or, sql } from "drizzle-orm";
 
 import { appConfig } from "~/config/app";
 import { pathsConfig } from "~/config/paths";
@@ -20,6 +21,7 @@ import { api } from "~/lib/api/server";
 import { getSession } from "~/lib/auth/server";
 import { getMetadata } from "~/lib/metadata";
 import { InvitationsSection } from "~/modules/dashboard/universe/invitations";
+import { MentionsSection } from "~/modules/dashboard/universe/mentions";
 import { MeshesGrid } from "~/modules/dashboard/universe/meshes-grid";
 import { UniverseWelcome } from "~/modules/dashboard/universe/welcome";
 
@@ -72,7 +74,11 @@ export default async function UniversePage() {
   // never opened this topic" — every message in such a topic is unread.
   const myMembers = user && meshIds.length
     ? await db
-        .select({ id: meshMember.id })
+        .select({
+          id: meshMember.id,
+          meshId: meshMember.meshId,
+          displayName: meshMember.displayName,
+        })
         .from(meshMember)
         .where(
           and(
@@ -120,6 +126,69 @@ export default async function UniversePage() {
     unreadCount: unreadMap.get(m.id) ?? 0,
   }));
 
+  // Recent @-mentions of the viewer across every mesh they belong to.
+  // Build a (memberId, regex) pair per mesh and OR them together so we
+  // catch users with different display names in different meshes. The
+  // ciphertext is base64 plaintext in v0.2.0; per-topic encryption in
+  // v0.3.0 will move this scan to a notification table populated at
+  // write time. 7-day window keeps the query bounded.
+  const mentionWindow = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
+  const mentionConditions = myMembers.map((m) => {
+    const escaped = m.displayName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const pattern = `(^|\\s|[^A-Za-z0-9_-])@${escaped}($|[^A-Za-z0-9_-])`;
+    return and(
+      eq(meshTopic.meshId, m.meshId),
+      sql`${meshTopicMessage.senderMemberId} <> ${m.id}`,
+      sql`convert_from(decode(${meshTopicMessage.ciphertext}, 'base64'), 'UTF8') ~* ${pattern}`,
+    );
+  });
+  const mentionRows = mentionConditions.length
+    ? await db
+        .select({
+          id: meshTopicMessage.id,
+          topicId: meshTopicMessage.topicId,
+          topicName: meshTopic.name,
+          meshId: meshTopic.meshId,
+          meshName: mesh.name,
+          senderName: meshMember.displayName,
+          ciphertext: meshTopicMessage.ciphertext,
+          createdAt: meshTopicMessage.createdAt,
+        })
+        .from(meshTopicMessage)
+        .innerJoin(meshTopic, eq(meshTopic.id, meshTopicMessage.topicId))
+        .innerJoin(mesh, eq(mesh.id, meshTopic.meshId))
+        .innerJoin(
+          meshMember,
+          eq(meshMember.id, meshTopicMessage.senderMemberId),
+        )
+        .where(
+          and(
+            isNull(meshTopic.archivedAt),
+            gt(meshTopicMessage.createdAt, mentionWindow),
+            or(...mentionConditions),
+          ),
+        )
+        .orderBy(desc(meshTopicMessage.createdAt))
+        .limit(20)
+    : [];
+
+  const decode = (b64: string) => {
+    try {
+      return Buffer.from(b64, "base64").toString("utf-8");
+    } catch {
+      return "[decode failed]";
+    }
+  };
+  const mentions = mentionRows.map((r) => ({
+    id: r.id,
+    meshId: r.meshId,
+    meshName: r.meshName,
+    topicName: r.topicName,
+    senderName: r.senderName,
+    snippet: decode(r.ciphertext).slice(0, 240),
+    createdAt: r.createdAt.toISOString(),
+  }));
+
   return (
     <div className="@container relative h-full p-6 md:p-10">
       {/* Subtle radial backdrop, matching marketing hero */}
@@ -143,6 +212,8 @@ export default async function UniversePage() {
           appBaseUrl={appConfig.url ?? "https://claudemesh.com"}
         />
 
+        <MentionsSection mentions={mentions} />
+
         <MeshesGrid meshes={meshesWithTopics} />
       </div>
     </div>

apps/web/src/modules/dashboard/universe/mentions.tsx

@@ -0,0 +1,113 @@
+import Link from "next/link";
+
+import { pathsConfig } from "~/config/paths";
+
+interface Mention {
+  id: string;
+  meshId: string;
+  meshName: string;
+  topicName: string;
+  senderName: string;
+  snippet: string;
+  createdAt: string;
+}
+
+const monoStyle = { fontFamily: "var(--cm-font-mono)" } as const;
+const serifStyle = { fontFamily: "var(--cm-font-serif)", fontWeight: 400 } as const;
+
+function fmtRelative(iso: string): string {
+  const ms = Date.now() - new Date(iso).getTime();
+  if (ms < 60_000) return "now";
+  if (ms < 3_600_000) return `${Math.floor(ms / 60_000)}m`;
+  if (ms < 86_400_000) return `${Math.floor(ms / 3_600_000)}h`;
+  return `${Math.floor(ms / 86_400_000)}d`;
+}
+
+/**
+ * Highlight @mentions in clay so the reader's eye lands on the call-out.
+ * Matches the in-chat renderer; kept inline here to avoid pulling the
+ * client component into the server-rendered universe page.
+ */
+function renderSnippet(text: string): React.ReactNode[] {
+  const parts: React.ReactNode[] = [];
+  const re = /(^|\s)(@[A-Za-z0-9_-]+)/g;
+  let lastIndex = 0;
+  let m: RegExpExecArray | null;
+  let key = 0;
+  while ((m = re.exec(text)) !== null) {
+    const start = m.index + (m[1]?.length ?? 0);
+    if (start > lastIndex) {
+      parts.push(<span key={key++}>{text.slice(lastIndex, start)}</span>);
+    }
+    parts.push(
+      <span key={key++} className="text-[var(--cm-clay)] font-medium">
+        {m[2]}
+      </span>,
+    );
+    lastIndex = start + (m[2]?.length ?? 0);
+  }
+  if (lastIndex < text.length) {
+    parts.push(<span key={key++}>{text.slice(lastIndex)}</span>);
+  }
+  return parts;
+}
+
+export const MentionsSection = ({ mentions }: { mentions: Mention[] }) => {
+  if (mentions.length === 0) return null;
+
+  return (
+    <section className="mb-14">
+      <div className="mb-6 flex items-baseline justify-between gap-6">
+        <h2
+          className="text-[28px] leading-none tracking-tight"
+          style={serifStyle}
+        >
+          Recent <span className="italic text-[var(--cm-clay)]">mentions</span>
+        </h2>
+        <span
+          className="text-[11px] uppercase tracking-[0.14em] text-[var(--cm-fg-tertiary)]"
+          style={monoStyle}
+        >
+          {mentions.length} · last 7 days
+        </span>
+      </div>
+
+      <ol className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+        {mentions.map((m) => (
+          <li key={m.id}>
+            <Link
+              href={pathsConfig.dashboard.user.meshes.topic(m.meshId, m.topicName)}
+              className="group flex flex-col gap-2 rounded-md border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] px-4 py-3 transition-colors hover:border-[var(--cm-border-hover)] hover:bg-[var(--cm-bg-hover)]"
+            >
+              <div
+                className="flex items-center gap-2 text-[10px] uppercase tracking-[0.12em] text-[var(--cm-fg-tertiary)]"
+                style={monoStyle}
+              >
+                <span className="text-[var(--cm-fg-secondary)]">{m.meshName}</span>
+                <span>·</span>
+                <span>
+                  <span className="text-[var(--cm-clay)]">#</span>
+                  {m.topicName}
+                </span>
+                <span>·</span>
+                <span>{fmtRelative(m.createdAt)}</span>
+                <span className="ml-auto opacity-0 transition-opacity group-hover:opacity-100">
+                  open →
+                </span>
+              </div>
+              <p className="text-[13px] text-[var(--cm-fg)] line-clamp-2">
+                <span
+                  className="text-[var(--cm-fg-secondary)]"
+                  style={monoStyle}
+                >
+                  {m.senderName}
+                </span>{" "}
+                {renderSnippet(m.snippet)}
+              </p>
+            </Link>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+};