feat(web): unread badge on dashboard mesh cards

Universe page aggregates unread topic_message rows per mesh for the
viewing user. Counts messages newer than topic_member.last_read_at
(or all messages if the viewer never opened the topic) and excludes
anything the viewer authored. One JOIN-grouped query, not N+1.

Mesh card surfaces the count as a clay-rounded badge to the left of
the role chip — matches the per-topic badge style on the mesh detail
page so unread is the same visual idiom across the dashboard.

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

apps/web/src/modules/dashboard/universe/meshes-grid.tsx

@@ -13,6 +13,7 @@ interface MeshSummary {
   isOwner: boolean;
   memberCount: number;
   topicCount?: number;
+  unreadCount?: number;
   archivedAt: Date | string | null;
 }
 
@@ -113,15 +114,26 @@ const MeshCard = ({
             {isHero ? ` · id ${mesh.id.slice(0, 8)}…` : ""}
           </p>
         </div>
-        <span
-          className={[
-            "whitespace-nowrap rounded-sm border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.14em]",
-            roleClass(mesh.isOwner, mesh.myRole),
-            "border-[var(--cm-border)]",
-          ].join(" ")}
-        >
-          {mesh.archivedAt ? "archived" : mesh.isOwner ? "owner" : mesh.myRole}
-        </span>
+        <div className="flex items-center gap-2">
+          {mesh.unreadCount && mesh.unreadCount > 0 ? (
+            <span
+              className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-[var(--cm-clay)] px-1.5 text-[10px] font-medium text-white"
+              style={{ fontFamily: "var(--cm-font-mono)" }}
+              aria-label={`${mesh.unreadCount} unread across topics`}
+            >
+              {mesh.unreadCount > 99 ? "99+" : mesh.unreadCount}
+            </span>
+          ) : null}
+          <span
+            className={[
+              "whitespace-nowrap rounded-sm border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.14em]",
+              roleClass(mesh.isOwner, mesh.myRole),
+              "border-[var(--cm-border)]",
+            ].join(" ")}
+          >
+            {mesh.archivedAt ? "archived" : mesh.isOwner ? "owner" : mesh.myRole}
+          </span>
+        </div>
       </div>
 
       <div className="mb-4 flex flex-wrap items-center gap-1.5">