diff --git a/app/message-indicator.tsx b/app/message-indicator.tsx
new file mode 100644
index 0000000..d0e1f53
--- /dev/null
+++ b/app/message-indicator.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { listLocalChatMessages } from "../lib/chat-client-db";
+
+const REFRESH_INTERVAL_MS = 15_000;
+
+async function pendingMessageIds() {
+ const messageIds = new Set
();
+ let cursor: string | null = null;
+
+ do {
+ const url = cursor ? `/api/chat/inbox?cursor=${encodeURIComponent(cursor)}` : "/api/chat/inbox";
+ const response = await fetch(url, { cache: "no-store" });
+ if (!response.ok) return messageIds;
+
+ const page = (await response.json()) as {
+ messages?: Array<{ id?: unknown }>;
+ nextCursor?: string | null;
+ };
+
+ for (const message of page.messages ?? []) {
+ if (typeof message.id === "string") messageIds.add(message.id);
+ }
+ cursor = page.nextCursor ?? null;
+ } while (cursor);
+
+ return messageIds;
+}
+
+export default function MessageIndicator({ userId }: Readonly<{ userId: string }>) {
+ const [unreadCount, setUnreadCount] = useState(0);
+
+ const refresh = useCallback(async () => {
+ if (typeof indexedDB === "undefined") return;
+
+ try {
+ const [localMessages, pendingIds] = await Promise.all([
+ listLocalChatMessages(userId),
+ pendingMessageIds(),
+ ]);
+ const unreadIds = new Set(
+ localMessages.filter((message) => message.unread).map((message) => message.id),
+ );
+ for (const messageId of Array.from(pendingIds)) unreadIds.add(messageId);
+ setUnreadCount(unreadIds.size);
+ } catch {
+ // Realtime and the messages inbox remain usable if a badge refresh fails.
+ }
+ }, [userId]);
+
+ useEffect(() => {
+ void refresh();
+ const channel =
+ typeof BroadcastChannel === "undefined"
+ ? null
+ : new BroadcastChannel(`shardup-chat-${userId}`);
+ if (channel) channel.onmessage = () => void refresh();
+ const interval = window.setInterval(() => void refresh(), REFRESH_INTERVAL_MS);
+ const onFocus = () => void refresh();
+ window.addEventListener("focus", onFocus);
+ window.addEventListener("online", onFocus);
+
+ return () => {
+ channel?.close();
+ window.clearInterval(interval);
+ window.removeEventListener("focus", onFocus);
+ window.removeEventListener("online", onFocus);
+ };
+ }, [refresh, userId]);
+
+ const label = unreadCount > 0 ? `Messages, ${unreadCount} unread` : "Messages";
+
+ return (
+
+ );
+}
diff --git a/app/messages/layout.tsx b/app/messages/layout.tsx
new file mode 100644
index 0000000..1560b38
--- /dev/null
+++ b/app/messages/layout.tsx
@@ -0,0 +1 @@
+export { default } from "../public-section-layout";
diff --git a/app/messages/messages-client.tsx b/app/messages/messages-client.tsx
new file mode 100644
index 0000000..2953fdc
--- /dev/null
+++ b/app/messages/messages-client.tsx
@@ -0,0 +1,500 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+ createOptimisticChatMessage,
+ failOptimisticChatMessage,
+ listLocalChatMessages,
+ markChatAcknowledged,
+ markLocalConversationRead,
+ pendingChatAcknowledgements,
+ reconcileOptimisticChatMessage,
+ storeIncomingMessage,
+ type IncomingChatEnvelope,
+ type LocalChatMessage,
+ type LocalChatSender,
+} from "../../lib/chat-client-db";
+
+type MemberOption = LocalChatSender;
+type ClientConversationType = "DIRECT" | "GROUP";
+type ClientMemberRole = "OWNER" | "MEMBER";
+
+type ConversationSummary = {
+ id: string;
+ type: ClientConversationType;
+ title: string | null;
+ lastActivityAt: string;
+ members: Array;
+};
+
+type Props = {
+ currentUser: LocalChatSender;
+ conversations: ConversationSummary[];
+ members: MemberOption[];
+ initialConversationId: string | null;
+ initialRecipientId: string | null;
+};
+
+function conversationName(conversation: ConversationSummary, currentUserId: string) {
+ if (conversation.type === "GROUP") return conversation.title || "Group";
+ return (
+ conversation.members.find((member) => member.id !== currentUserId)?.name || "Direct message"
+ );
+}
+
+function isIncomingEnvelope(value: unknown): value is IncomingChatEnvelope {
+ if (!value || typeof value !== "object") return false;
+ const envelope = value as Partial;
+ return (
+ typeof envelope.id === "string" &&
+ typeof envelope.conversationId === "string" &&
+ typeof envelope.body === "string" &&
+ typeof envelope.createdAt === "string" &&
+ typeof envelope.signature === "string" &&
+ Boolean(envelope.sender && typeof envelope.sender.id === "string")
+ );
+}
+
+export default function MessagesClient({
+ currentUser,
+ conversations,
+ members,
+ initialConversationId,
+ initialRecipientId,
+}: Props) {
+ const router = useRouter();
+ const [selectedId, setSelectedId] = useState(
+ initialConversationId &&
+ conversations.some((conversation) => conversation.id === initialConversationId)
+ ? initialConversationId
+ : (conversations[0]?.id ?? null),
+ );
+ const [localMessages, setLocalMessages] = useState([]);
+ const [connection, setConnection] = useState<"connecting" | "live" | "polling">("connecting");
+ const [sendError, setSendError] = useState(null);
+ const [composeMode, setComposeMode] = useState<"closed" | "direct" | "group">("closed");
+ const [creating, setCreating] = useState(false);
+ const startedRecipient = useRef(false);
+ const broadcastRef = useRef(null);
+ const selectedIdRef = useRef(selectedId);
+
+ const refreshLocal = useCallback(async () => {
+ setLocalMessages(await listLocalChatMessages(currentUser.id));
+ }, [currentUser.id]);
+
+ const notifyLocalChange = useCallback(() => {
+ broadcastRef.current?.postMessage("changed");
+ void refreshLocal();
+ }, [refreshLocal]);
+
+ const flushAcknowledgements = useCallback(async () => {
+ const messageIds = await pendingChatAcknowledgements(currentUser.id);
+ if (messageIds.length === 0) return;
+
+ for (let offset = 0; offset < messageIds.length; offset += 100) {
+ const batch = messageIds.slice(offset, offset + 100);
+ const response = await fetch("/api/chat/ack", {
+ method: "POST",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify({ messageIds: batch }),
+ });
+ if (response.ok) await markChatAcknowledged(currentUser.id, batch);
+ }
+ }, [currentUser.id]);
+
+ const storeAndAcknowledge = useCallback(
+ async (envelopes: IncomingChatEnvelope[]) => {
+ for (const envelope of envelopes) await storeIncomingMessage(currentUser.id, envelope);
+ const openConversationId = selectedIdRef.current;
+ if (
+ openConversationId &&
+ envelopes.some((envelope) => envelope.conversationId === openConversationId)
+ ) {
+ await markLocalConversationRead(currentUser.id, openConversationId);
+ }
+ await flushAcknowledgements();
+ notifyLocalChange();
+ },
+ [currentUser.id, flushAcknowledgements, notifyLocalChange],
+ );
+
+ const recoverInbox = useCallback(async () => {
+ let cursor: string | null = null;
+ do {
+ const url = cursor
+ ? `/api/chat/inbox?cursor=${encodeURIComponent(cursor)}`
+ : "/api/chat/inbox";
+ const response = await fetch(url, { cache: "no-store" });
+ if (!response.ok) return;
+ const page = (await response.json()) as {
+ messages?: unknown[];
+ nextCursor?: string | null;
+ };
+ const envelopes = (page.messages ?? []).filter(isIncomingEnvelope);
+ if (envelopes.length > 0) await storeAndAcknowledge(envelopes);
+ cursor = page.nextCursor ?? null;
+ } while (cursor);
+ await flushAcknowledgements();
+ }, [flushAcknowledgements, storeAndAcknowledge]);
+
+ useEffect(() => {
+ void refreshLocal();
+ const channel = new BroadcastChannel(`shardup-chat-${currentUser.id}`);
+ channel.onmessage = () => void refreshLocal();
+ broadcastRef.current = channel;
+ return () => channel.close();
+ }, [currentUser.id, refreshLocal]);
+
+ useEffect(() => {
+ let socket: WebSocket | null = null;
+ let stopped = false;
+ let retryTimer: ReturnType | null = null;
+ let retryDelay = 1000;
+
+ const connect = async () => {
+ setConnection("connecting");
+ try {
+ const response = await fetch("/api/chat/token", { method: "POST" });
+ if (!response.ok) throw new Error("Token unavailable");
+ const credentials = (await response.json()) as { token: string; socketUrl: string | null };
+ if (!credentials.socketUrl) {
+ setConnection("polling");
+ await recoverInbox();
+ return;
+ }
+
+ socket = new WebSocket(credentials.socketUrl, ["shardup-chat", credentials.token]);
+ socket.onopen = () => {
+ retryDelay = 1000;
+ setConnection("live");
+ void recoverInbox();
+ };
+ socket.onmessage = (event) => {
+ try {
+ const payload = JSON.parse(String(event.data)) as { type?: string; envelope?: unknown };
+ if (payload.type === "message" && isIncomingEnvelope(payload.envelope)) {
+ void storeAndAcknowledge([payload.envelope]);
+ }
+ } catch {
+ // Ignore malformed transport frames; the inbox remains authoritative.
+ }
+ };
+ socket.onclose = () => {
+ if (stopped) return;
+ setConnection("polling");
+ retryTimer = setTimeout(() => {
+ retryDelay = Math.min(retryDelay * 2, 30_000);
+ void connect();
+ }, retryDelay);
+ };
+ } catch {
+ setConnection("polling");
+ await recoverInbox();
+ }
+ };
+
+ void connect();
+ const recovery = setInterval(() => void recoverInbox(), 15_000);
+ const onOnline = () => {
+ void recoverInbox();
+ if (!socket || socket.readyState === WebSocket.CLOSED) void connect();
+ };
+ window.addEventListener("online", onOnline);
+
+ return () => {
+ stopped = true;
+ clearInterval(recovery);
+ if (retryTimer) clearTimeout(retryTimer);
+ window.removeEventListener("online", onOnline);
+ socket?.close();
+ };
+ }, [currentUser.id, recoverInbox, storeAndAcknowledge]);
+
+ useEffect(() => {
+ selectedIdRef.current = selectedId;
+ if (!selectedId) return;
+ void markLocalConversationRead(currentUser.id, selectedId).then(notifyLocalChange);
+ void fetch("/api/chat/read", {
+ method: "POST",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify({ conversationId: selectedId }),
+ });
+ }, [currentUser.id, notifyLocalChange, selectedId]);
+
+ useEffect(() => {
+ if (!initialRecipientId || startedRecipient.current) return;
+ startedRecipient.current = true;
+ void (async () => {
+ const response = await fetch("/api/chat/conversations", {
+ method: "POST",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify({
+ type: "DIRECT",
+ recipientId: initialRecipientId,
+ }),
+ });
+ if (!response.ok) return;
+ const result = (await response.json()) as { conversationId: string };
+ setSelectedId(result.conversationId);
+ router.replace(`/messages?conversation=${encodeURIComponent(result.conversationId)}`);
+ router.refresh();
+ })();
+ }, [initialRecipientId, router]);
+
+ const selected = conversations.find((conversation) => conversation.id === selectedId) ?? null;
+ const selectedMessages = localMessages.filter((message) => message.conversationId === selectedId);
+ const latestByConversation = useMemo(() => {
+ const latest = new Map();
+ for (const message of localMessages) latest.set(message.conversationId, message);
+ return latest;
+ }, [localMessages]);
+
+ const selectConversation = (conversationId: string) => {
+ setSelectedId(conversationId);
+ router.replace(`/messages?conversation=${encodeURIComponent(conversationId)}`, {
+ scroll: false,
+ });
+ };
+
+ const sendMessage = async (event: React.FormEvent) => {
+ event.preventDefault();
+ if (!selectedId) return;
+ const form = event.currentTarget;
+ const formData = new FormData(form);
+ const body = String(formData.get("body") ?? "").trim();
+ if (!body) return;
+
+ setSendError(null);
+ form.reset();
+ const clientMessageId = crypto.randomUUID();
+ const createdAt = new Date().toISOString();
+ await createOptimisticChatMessage(currentUser.id, {
+ conversationId: selectedId,
+ clientMessageId,
+ sender: currentUser,
+ body,
+ createdAt,
+ });
+ notifyLocalChange();
+
+ try {
+ const response = await fetch("/api/chat/messages", {
+ method: "POST",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify({ conversationId: selectedId, clientMessageId, body }),
+ });
+ if (!response.ok) throw new Error("Message was not accepted");
+ const result = (await response.json()) as { messageId: string; createdAt: string };
+ await reconcileOptimisticChatMessage(
+ currentUser.id,
+ clientMessageId,
+ result.messageId,
+ result.createdAt,
+ );
+ notifyLocalChange();
+ router.refresh();
+ } catch {
+ await failOptimisticChatMessage(currentUser.id, clientMessageId);
+ setSendError("Message was not sent. Check your connection and try again.");
+ notifyLocalChange();
+ }
+ };
+
+ const createConversation = async (event: React.FormEvent) => {
+ event.preventDefault();
+ setCreating(true);
+ const form = event.currentTarget;
+ const formData = new FormData(form);
+ const payload =
+ composeMode === "direct"
+ ? { type: "DIRECT", recipientId: String(formData.get("recipientId")) }
+ : {
+ type: "GROUP",
+ title: String(formData.get("title")),
+ memberIds: formData.getAll("memberIds").map(String),
+ };
+
+ const response = await fetch("/api/chat/conversations", {
+ method: "POST",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify(payload),
+ });
+ setCreating(false);
+ if (!response.ok) {
+ setSendError("Conversation could not be created.");
+ return;
+ }
+ const result = (await response.json()) as { conversationId: string };
+ setComposeMode("closed");
+ setSelectedId(result.conversationId);
+ router.push(`/messages?conversation=${encodeURIComponent(result.conversationId)}`);
+ router.refresh();
+ };
+
+ return (
+
+
+
+
+
+ {selected ? (
+ <>
+
+
+ {selectedMessages.length ? (
+ selectedMessages.map((message) => (
+
+
+ {message.outgoing ? "You" : message.sender.name}
+
+
+ {message.body}
+ {message.status === "sending" ? Sending... : null}
+ {message.status === "failed" ? (
+ Not sent
+ ) : null}
+
+ ))
+ ) : (
+
+
No messages on this browser
+
Delivered history stays on the device that received it.
+
+ )}
+
{sendError}
: null}
+
+ ) : (
+
+
Select a conversation
+
Your delivered messages are kept only in this browser.
+