fix: properly handle fallback avatar and names

This is especially helpful in the case of members who were removed from
a network

js/src/components/composing-indicator.tsx

@@ -1,4 +1,5 @@
 import type { Human } from "@/api/types";
+import { resolveHumanDisplay } from "@/lib/humans";
 import type { ComposingUser } from "@/features/particles/stream-presence-context";
 
 interface ComposingIndicatorProps {
@@ -22,8 +23,7 @@ export function ComposingIndicator({
       style={{ writingMode: "vertical-rl" }}
     >
       {users.map((u) => {
-        const human = networkHumans?.find((h) => h.id === u.humanId);
-        const name = human?.email_prefix ?? u.humanId;
+        const { displayName } = resolveHumanDisplay(u.humanId, networkHumans);
         const modeLabel = u.mode === "typing" ? "typing" : "recording";
 
         return (
@@ -37,7 +37,7 @@ export function ComposingIndicator({
               <span className="size-1 rounded-full bg-white/70 animate-bounce [animation-delay:300ms]" />
             </span>
             <span className="whitespace-nowrap text-[10px] text-white/50">
-              {name} {modeLabel}
+              {displayName} {modeLabel}
             </span>
           </div>
         );

js/src/features/particles/deleted-particle-view.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { Trash2 } from "lucide-react";
 import type { Particle } from "@/api/types";
 import { useNetwork } from "@/hooks/use-networks";
+import { resolveHumanDisplay } from "@/lib/humans";
 
 // How long to linger on a tombstone before auto-advancing. Matches the
 // "reading" cadence of a short text particle.
@@ -24,8 +25,8 @@ export function DeletedParticleView({
   const deleterId =
     "deleted_by_human_id" in particle ? particle.deleted_by_human_id : undefined;
   const deleter = deleterId
-    ? network?.humans?.find((h) => h.id === deleterId)
-    : undefined;
+    ? resolveHumanDisplay(deleterId, network?.humans)
+    : null;
 
   useEffect(() => {
     if (paused) return;
@@ -42,7 +43,7 @@ export function DeletedParticleView({
           This particle was deleted
         </p>
         {deleter && (
-          <p className="text-white/40 text-xs">by {deleter.email_prefix}</p>
+          <p className="text-white/40 text-xs">by {deleter.displayName}</p>
         )}
       </div>
     </div>

js/src/features/particles/fallback-particle-view.tsx

@@ -7,6 +7,8 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { FileIcon, HelpCircleIcon, ScrollTextIcon, BookOpenIcon } from "lucide-react";
+import { useNetwork } from "@/hooks/use-networks";
+import { resolveHumanDisplay } from "@/lib/humans";
 
 const TYPE_META: Record<string, { icon: typeof FileIcon; label: string }> = {
   quest: { icon: ScrollTextIcon, label: "Quest" },
@@ -16,9 +18,12 @@ const TYPE_META: Record<string, { icon: typeof FileIcon; label: string }> = {
 
 interface FallbackParticleViewProps {
   particle: Particle;
+  networkId: string;
 }
 
-export function FallbackParticleView({ particle }: FallbackParticleViewProps) {
+export function FallbackParticleView({ particle, networkId }: FallbackParticleViewProps) {
+  const network = useNetwork(networkId);
+  const creator = resolveHumanDisplay(particle.created_by_human_id, network?.humans);
   const meta = TYPE_META[particle.type] ?? {
     icon: HelpCircleIcon,
     label: particle.type,
@@ -51,7 +56,7 @@ export function FallbackParticleView({ particle }: FallbackParticleViewProps) {
         </CardHeader>
         <CardContent>
           <p className="text-muted-foreground text-xs">
-            From {particle.created_by_human_id}
+            From {creator.displayName}
           </p>
         </CardContent>
       </Card>

js/src/features/particles/particle-list-view.tsx

@@ -18,6 +18,7 @@ import { useLiveLatestChild } from "@/hooks/use-particle";
 import { useAuthStore } from "@/stores/auth-store";
 import { particlePath } from "@/lib/particle-path";
 import { getInitials } from "@/lib/utils";
+import { resolveHumanDisplay } from "@/lib/humans";
 import { RelativeTimestamp } from "@/components/relative-timestamp";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Separator } from "@/components/ui/separator";
@@ -174,9 +175,11 @@ const StreamRow = memo(function StreamRow({
     }
     // Group stream
     if (isCurrentUser) return "You: ";
-    const creator = network?.humans?.find((h) => h.id === latestChild.created_by_human_id);
-    const name = creator?.email_prefix ?? latestChild.created_by_human_id;
-    const capitalized = name.charAt(0).toUpperCase() + name.slice(1);
+    const { displayName } = resolveHumanDisplay(
+      latestChild.created_by_human_id,
+      network?.humans,
+    );
+    const capitalized = displayName.charAt(0).toUpperCase() + displayName.slice(1);
     return `${capitalized}: `;
   }, [latestChild, userId, isDM, network]);
 

js/src/features/particles/particle-view-resolver.tsx

@@ -1,6 +1,10 @@
-import { useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+import { Lock } from "lucide-react";
 import { useLiveParticle } from "@/hooks/use-particle";
 import { particlePath } from "@/lib/particle-path";
+import { Button } from "@/components/ui/button";
 
 import { StreamView } from "@/features/particles/stream-view";
 import { FolderView } from "@/features/particles/folder-view";
@@ -26,22 +30,11 @@ export default function ParticleViewResolver() {
     );
   }
 
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-destructive text-sm">Failed to load particle</p>
-      </div>
-    );
-  }
-
-  if (!particle) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-muted-foreground text-sm">
-          Particle: {segments.join(" / ")}
-        </p>
-      </div>
-    );
+  if (error || !particle) {
+    // Errors here are almost always Firestore permission-denied — the user lost
+    // access to the network or to a custom-visibility particle. The React Router
+    // stays on the dead route, so without an explicit escape the user is stuck.
+    return <InaccessibleParticle />;
   }
 
   switch (particle.type) {
@@ -59,3 +52,28 @@ export default function ParticleViewResolver() {
       );
   }
 }
+
+function InaccessibleParticle() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    // Refresh the networks list so the home page reflects current access.
+    queryClient.invalidateQueries({ queryKey: ["networks"] });
+  }, [queryClient]);
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-4 p-8 text-center">
+      <Lock className="text-muted-foreground size-8" />
+      <div className="flex max-w-sm flex-col gap-1">
+        <p className="text-sm font-medium">This particle isn't available</p>
+        <p className="text-muted-foreground text-xs">
+          It may have been deleted, or your access was removed.
+        </p>
+      </div>
+      <Button size="sm" onClick={() => navigate("/", { replace: true })}>
+        Go home
+      </Button>
+    </div>
+  );
+}

js/src/features/particles/reaction-bar.tsx

@@ -3,6 +3,7 @@ import { Plus, X } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { REACTION_EMOJIS, type Reactions } from "@/api/types";
 import { cn } from "@/lib/utils";
+import { resolveHumanDisplay } from "@/lib/humans";
 import type { Human } from "@/api/types";
 
 interface ReactionBarProps {
@@ -17,10 +18,7 @@ function getReactorNames(
   humans?: Human[],
 ): string {
   return humanIds
-    .map((id) => {
-      const human = humans?.find((h) => h.id === id);
-      return human?.email_prefix ?? id;
-    })
+    .map((id) => resolveHumanDisplay(id, humans).displayName)
     .join(", ");
 }
 

js/src/features/particles/stream-members-overlay.tsx

@@ -12,6 +12,7 @@ import { updateParticleVisibleTo } from "@/lib/firestore-particles";
 import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
 import { useNetwork } from "@/hooks/use-networks";
 import { cn, getInitials } from "@/lib/utils";
+import { resolveHumanDisplay } from "@/lib/humans";
 import type { Particle } from "@/api/types";
 import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store";
 
@@ -158,7 +159,7 @@ export function StreamMembersOverlay({
           <ScrollArea className="min-h-0 flex-1">
             <ul className="flex flex-col gap-0.5 pr-2">
               {memberIds.map((id) => {
-                const human = humans.find((h) => h.id === id);
+                const display = resolveHumanDisplay(id, humans);
                 const isCreatorRow = id === creatorId;
                 const canRemove =
                   isCreator && visibility.mode === "custom" && !isCreatorRow;
@@ -169,11 +170,16 @@ export function StreamMembersOverlay({
                   >
                     <Avatar size="sm">
                       <AvatarFallback className="text-[10px]">
-                        {human ? getInitials(human.email) : "?"}
+                        {display.initials}
                       </AvatarFallback>
                     </Avatar>
-                    <span className="flex-1 truncate">
-                      {human?.email_prefix ?? id}
+                    <span
+                      className={cn(
+                        "flex-1 truncate",
+                        !display.exists && "italic text-white/40",
+                      )}
+                    >
+                      {display.displayName}
                     </span>
                     {isCreatorRow && (
                       <span className="text-[10px] uppercase tracking-wider text-white/30">
@@ -185,7 +191,7 @@ export function StreamMembersOverlay({
                         type="button"
                         onClick={() => removeMember(id)}
                         className="rounded p-1 text-white/30 opacity-0 transition-opacity hover:bg-white/10 hover:text-white/70 group-hover:opacity-100"
-                        aria-label={`Remove ${human?.email_prefix ?? id}`}
+                        aria-label={`Remove ${display.displayName}`}
                       >
                         <X className="size-3.5" />
                       </button>

js/src/features/particles/stream-top-bar.tsx

@@ -24,7 +24,7 @@ import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbS
 import { WindowControls } from "@/components/window-controls";
 import { RelativeTimestamp } from "@/components/relative-timestamp";
 import { useStreamPresence } from "@/features/particles/stream-presence-context";
-import { getInitials } from "@/lib/utils";
+import { resolveHumanDisplay } from "@/lib/humans";
 
 function getParticleDisplayName(particle: Particle): string {
   switch (particle.type) {
@@ -112,18 +112,17 @@ export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
           </span>
           <AvatarGroup>
             {huddleParticipants.map((humanId) => {
-              const human = network?.humans?.find((h) => h.id === humanId);
-              const initials = human ? getInitials(human.email) : "?";
+              const display = resolveHumanDisplay(humanId, network?.humans);
               return (
                 <Tooltip key={humanId}>
                   <TooltipTrigger asChild>
                     <Avatar size="sm">
                       <AvatarFallback className="bg-red-500/30 text-[8px] text-red-200">
-                        {initials}
+                        {display.initials}
                       </AvatarFallback>
                     </Avatar>
                   </TooltipTrigger>
-                  <TooltipContent>{human?.email ?? humanId}</TooltipContent>
+                  <TooltipContent>{display.email}</TooltipContent>
                 </Tooltip>
               );
             })}
@@ -267,7 +266,7 @@ function MembersIndicator({
                 {shownMembers.map((human) => (
                   <Avatar key={human.id} size="sm">
                     <AvatarFallback className="text-[8px]">
-                      {getInitials(human.email)}
+                      {resolveHumanDisplay(human.id, humans).initials}
                     </AvatarFallback>
                   </Avatar>
                 ))}
@@ -289,19 +288,17 @@ function MembersIndicator({
 function ParticleBreadcrumbContent({ particle, networkId }: { particle: Particle; networkId: string }) {
   const network = useNetwork(networkId);
   const { onlineHumanIds } = useStreamPresence();
-  const creator = network?.humans?.find((h) => h.id === particle.created_by_human_id);
-  const prefix = creator?.email_prefix ?? particle.created_by_human_id;
-  const initials = prefix.slice(0, 2).toUpperCase();
+  const display = resolveHumanDisplay(particle.created_by_human_id, network?.humans);
   const isOnline = particle.created_by_human_id ? onlineHumanIds.has(particle.created_by_human_id) : false;
 
   return (
     <span className="flex items-center gap-1.5">
       <Avatar size="sm" className={isOnline ? "ring-2 ring-green-500" : ""}>
         <AvatarFallback>
-          {initials}
+          {display.initials}
         </AvatarFallback>
       </Avatar>
-      {prefix} - <RelativeTimestamp date={particle.created_at} />
+      {display.displayName} - <RelativeTimestamp date={particle.created_at} />
     </span>
   );
 }

js/src/features/particles/stream-view.tsx

@@ -405,7 +405,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
           />
         );
       default:
-        return <FallbackParticleView particle={particle} />;
+        return <FallbackParticleView particle={particle} networkId={networkId} />;
     }
   }
 

js/src/hooks/use-stream-autoplay.ts

@@ -4,7 +4,7 @@ import type { Network, Particle, StreamProperties } from "@/api/types";
 import { apiClient } from "@/api/client";
 import { useAuthStore } from "@/stores/auth-store";
 import { useAutoplayStore } from "@/stores/autoplay-store";
-import { getInitials } from "@/lib/utils";
+import { resolveHumanDisplay } from "@/lib/humans";
 
 /**
  * Triggers autoplay when a stream's latest child changes to a new media particle.
@@ -44,9 +44,10 @@ export function useStreamAutoplay(
     if (latestChild.type !== "media") return;
 
     const particle = latestChild;
-    const creator = network?.humans?.find((h) => h.id === particle.created_by_human_id);
-    const senderName = creator?.email_prefix ?? particle.created_by_human_id;
-    const senderInitials = creator ? getInitials(creator.email) : particle.created_by_human_id.slice(0, 2).toUpperCase();
+    const { displayName, initials } = resolveHumanDisplay(
+      particle.created_by_human_id,
+      network?.humans,
+    );
 
     apiClient.getParticleDownloadUrl(particle.properties.object_id).then((downloadUrl) => {
       window.electronAutoplay.play({
@@ -56,8 +57,8 @@ export function useStreamAutoplay(
         downloadUrl,
         mimeType: particle.properties.mime_type,
         durationMs: particle.properties.duration_ms,
-        senderName,
-        senderInitials,
+        senderName: displayName,
+        senderInitials: initials,
       });
     }).catch(() => {
       // Failed to get download URL — skip autoplay silently

js/src/lib/humans.ts

@@ -0,0 +1,43 @@
+import type { Human } from "@/api/types";
+import { getInitials } from "@/lib/utils";
+
+export const REMOVED_MEMBER_LABEL = "Removed member";
+export const REMOVED_MEMBER_INITIALS = "–";
+
+export interface HumanDisplay {
+  /** True when the human was found in the provided list. */
+  exists: boolean;
+  /** Short name for inline text (e.g. message sender). */
+  displayName: string;
+  /** Full email or fallback label for tooltips. */
+  email: string;
+  /** Initials for avatar fallback. */
+  initials: string;
+}
+
+/**
+ * Resolve a human's display info by id, falling back consistently when the
+ * human has been removed from the network. Member content (particles, reactions,
+ * etc.) is retained after removal, so every render path needs a graceful fallback
+ * instead of leaking raw ids into the UI.
+ */
+export function resolveHumanDisplay(
+  humanId: string | null | undefined,
+  humans: Human[] | undefined,
+): HumanDisplay {
+  const human = humanId ? humans?.find((h) => h.id === humanId) : undefined;
+  if (!human) {
+    return {
+      exists: false,
+      displayName: REMOVED_MEMBER_LABEL,
+      email: REMOVED_MEMBER_LABEL,
+      initials: REMOVED_MEMBER_INITIALS,
+    };
+  }
+  return {
+    exists: true,
+    displayName: human.email_prefix,
+    email: human.email,
+    initials: getInitials(human.email),
+  };
+}