- From {particle.created_by_human_id}
+ From {creator.displayName}
diff --git a/js/src/features/particles/particle-list-view.tsx b/js/src/features/particles/particle-list-view.tsx
index ae9d1a4..9b06cce 100644
--- a/js/src/features/particles/particle-list-view.tsx
+++ b/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]);
diff --git a/js/src/features/particles/particle-view-resolver.tsx b/js/src/features/particles/particle-view-resolver.tsx
index 7c984a1..36a1c7b 100644
--- a/js/src/features/particles/particle-view-resolver.tsx
+++ b/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 (
-
-
Failed to load particle
-
- );
- }
-
- if (!particle) {
- return (
-
-
- Particle: {segments.join(" / ")}
-
-
- );
+ 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 ;
}
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 (
+
+
+
+
This particle isn't available
+
+ It may have been deleted, or your access was removed.
+
+
+
+
+ );
+}
diff --git a/js/src/features/particles/reaction-bar.tsx b/js/src/features/particles/reaction-bar.tsx
index 2c9bdf3..d04c077 100644
--- a/js/src/features/particles/reaction-bar.tsx
+++ b/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(", ");
}
diff --git a/js/src/features/particles/stream-members-overlay.tsx b/js/src/features/particles/stream-members-overlay.tsx
index f9ba7e2..c95a089 100644
--- a/js/src/features/particles/stream-members-overlay.tsx
+++ b/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({
{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({
>
- {human ? getInitials(human.email) : "?"}
+ {display.initials}
-
- {human?.email_prefix ?? id}
+
+ {display.displayName}
{isCreatorRow && (
@@ -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}`}
>
diff --git a/js/src/features/particles/stream-top-bar.tsx b/js/src/features/particles/stream-top-bar.tsx
index 3dc0fb4..f028032 100644
--- a/js/src/features/particles/stream-top-bar.tsx
+++ b/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) {
{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 (
- {initials}
+ {display.initials}
- {human?.email ?? humanId}
+ {display.email}
);
})}
@@ -267,7 +266,7 @@ function MembersIndicator({
{shownMembers.map((human) => (
- {getInitials(human.email)}
+ {resolveHumanDisplay(human.id, humans).initials}
))}
@@ -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 (
- {initials}
+ {display.initials}
- {prefix} -
+ {display.displayName} -
);
}
diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx
index ba8f83e..3bfe371 100644
--- a/js/src/features/particles/stream-view.tsx
+++ b/js/src/features/particles/stream-view.tsx
@@ -405,7 +405,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
/>
);
default:
- return ;
+ return ;
}
}
diff --git a/js/src/firebase.ts b/js/src/firebase.ts
index 8825944..a8e931f 100644
--- a/js/src/firebase.ts
+++ b/js/src/firebase.ts
@@ -1,9 +1,12 @@
import { initializeApp } from 'firebase/app';
+import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { appConfig } from "@/config/env";
export const firebaseApp = initializeApp(appConfig.firebase);
+export const firebaseAuth = getAuth(firebaseApp);
+
export const firestoreDb = getFirestore(firebaseApp);
// simplifying setup to debug production issues
// export const firestoreDb = initializeFirestore(firebaseApp,
diff --git a/js/src/hooks/use-invitations.ts b/js/src/hooks/use-member-management.ts
similarity index 84%
rename from js/src/hooks/use-invitations.ts
rename to js/src/hooks/use-member-management.ts
index dbf1c42..fb0547f 100644
--- a/js/src/hooks/use-invitations.ts
+++ b/js/src/hooks/use-member-management.ts
@@ -50,3 +50,13 @@ export function useRevokeInvitation(networkId: string) {
},
});
}
+
+export function useRemoveMember(networkId: string) {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: (humanId: string) => apiClient.removeMember(networkId, humanId),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["networks"] });
+ },
+ });
+}
diff --git a/js/src/hooks/use-stream-autoplay.ts b/js/src/hooks/use-stream-autoplay.ts
index 7a74433..16f8235 100644
--- a/js/src/hooks/use-stream-autoplay.ts
+++ b/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
diff --git a/js/src/lib/humans.ts b/js/src/lib/humans.ts
new file mode 100644
index 0000000..543fdb6
--- /dev/null
+++ b/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),
+ };
+}
diff --git a/js/src/stores/auth-store.ts b/js/src/stores/auth-store.ts
index 252b5bd..426cb20 100644
--- a/js/src/stores/auth-store.ts
+++ b/js/src/stores/auth-store.ts
@@ -1,8 +1,19 @@
import { create } from "zustand";
+import { signInWithCustomToken, signOut as firebaseSignOut } from "firebase/auth";
import { apiClient, ApiError } from "@/api/client";
import type { Human } from "@/api/types";
+import { firebaseAuth } from "@/firebase";
import { useSessionStore } from "./session-store";
+async function signInToFirebase() {
+ try {
+ const { token } = await apiClient.getFirebaseToken();
+ await signInWithCustomToken(firebaseAuth, token);
+ } catch (e) {
+ console.error("Failed to sign in to Firebase", e);
+ }
+}
+
type AuthStatus = "idle" | "restoring" | "unauthenticated" | "authenticated";
interface AuthState {
@@ -37,6 +48,7 @@ export const useAuthStore = create((set) => ({
set({ status: "restoring" });
try {
const user = await apiClient.me();
+ await signInToFirebase();
set({ status: "authenticated", user });
} catch {
useSessionStore.getState().clearToken();
@@ -63,6 +75,7 @@ export const useAuthStore = create((set) => ({
try {
const { human, token } = await apiClient.signIn({ email, code });
useSessionStore.getState().setToken(token);
+ await signInToFirebase();
set({ status: "authenticated", user: human });
} catch (e) {
const message =
@@ -81,6 +94,9 @@ export const useAuthStore = create((set) => ({
} catch {
// Best-effort — sign out locally regardless
} finally {
+ await firebaseSignOut(firebaseAuth).catch((e) =>
+ console.error("Firebase sign-out failed", e),
+ );
useSessionStore.getState().clearToken();
set({
status: "unauthenticated",
--
2.54.0
From 99c7861af8846396f2e2fc033b041145111e63fb Mon Sep 17 00:00:00 2001
From: Claude
Date: Thu, 16 Apr 2026 22:27:53 +0000
Subject: [PATCH 2/2] feat: surface privacy policy and terms in sign-in and
settings
Adds an implicit-consent disclaimer under the sign-in "Continue" button
and a new "Legal" section in the settings page. Both link out to the
policies hosted on flowylabs.ai via the existing openExternal bridge.
https://claude.ai/code/session_01U6gT7XFQ8Rtm3FStsHG63j
---
js/src/features/auth/email-step.tsx | 21 +++++++++++++++++++++
js/src/features/settings-page.tsx | 19 +++++++++++++++++--
js/src/lib/constants.ts | 3 +++
3 files changed, 41 insertions(+), 2 deletions(-)
diff --git a/js/src/features/auth/email-step.tsx b/js/src/features/auth/email-step.tsx
index 9008cb7..0ddfc8e 100644
--- a/js/src/features/auth/email-step.tsx
+++ b/js/src/features/auth/email-step.tsx
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { H3, Muted } from "@/components/ui/typography";
+import { PRIVACY_URL, TERMS_URL } from "@/lib/constants";
import { useAuthStore } from "@/stores/auth-store";
interface EmailStepProps {
@@ -56,6 +57,26 @@ export function EmailStep({ onCodeSent }: EmailStepProps) {
+
+
+ By continuing, you agree to our{" "}
+ {" "}
+ and{" "}
+
+ .
+
);
}
diff --git a/js/src/features/settings-page.tsx b/js/src/features/settings-page.tsx
index 8a0b988..6d9a706 100644
--- a/js/src/features/settings-page.tsx
+++ b/js/src/features/settings-page.tsx
@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
-import { ChevronRight, LogOut, User, Info, Shield, Mail, Mic, LifeBuoy } from "lucide-react";
+import { ChevronRight, LogOut, User, Info, Shield, Mail, Mic, LifeBuoy, FileText } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
@@ -11,7 +11,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
import { CopyableEmail } from "@/components/copyable-email";
import { useAuthStore } from "@/stores/auth-store";
import { apiClient } from "@/api/client";
-import { SUPPORT_EMAIL } from "@/lib/constants";
+import { PRIVACY_URL, SUPPORT_EMAIL, TERMS_URL } from "@/lib/constants";
import { ArrowLeft } from "lucide-react";
interface SettingsRowProps {
@@ -167,6 +167,21 @@ export default function SettingsPage() {
+
+ }
+ label="Privacy Policy"
+ onClick={() => window.electronLink.openExternal(PRIVACY_URL)}
+ />
+ }
+ label="Terms of Service"
+ onClick={() => window.electronLink.openExternal(TERMS_URL)}
+ />
+
+
+
+