"use client";
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";
import {
getMyMeshStreamResponseSchema,
type GetMyMeshStreamResponse,
} from "@turbostarter/api/schema";
import { handle } from "@turbostarter/api/utils";
import { api } from "~/lib/api/client";
import {
MeshStream,
type StreamMessage,
type StreamPeer,
} from "~/modules/marketing/home/mesh-stream";
const POLL_INTERVAL_MS = 4000;
const classifyTarget = (
target: string,
): "direct" | "ask_mesh" | "broadcast" => {
if (target === "*") return "broadcast";
if (target.startsWith("tag:")) return "ask_mesh";
return "direct";
};
const buildStream = (data: GetMyMeshStreamResponse) => {
const peers: StreamPeer[] = data.presences.map((p) => ({
id: p.memberId,
name: p.displayName ?? p.memberId.slice(0, 8),
status: p.status === "dnd" ? "dnd" : p.status,
machine: p.cwd,
surface: "terminal",
}));
const messages: StreamMessage[] = data.envelopes
.slice()
.reverse()
.map((e) => ({
key: e.id,
from: e.senderMemberId,
to: e.targetSpec,
type: classifyTarget(e.targetSpec),
ciphertext: e.ciphertextPreview,
createdAt: new Date(e.createdAt),
}));
return { peers, messages };
};
export const LiveStreamPanel = ({ meshId }: { meshId: string }) => {
const { data, isLoading, dataUpdatedAt, isFetching } = useQuery({
queryKey: ["mesh", "stream", meshId],
queryFn: () =>
handle(api.my.meshes[":id"].stream.$get, {
schema: getMyMeshStreamResponseSchema,
})({ param: { id: meshId } }),
refetchInterval: POLL_INTERVAL_MS,
refetchIntervalInBackground: false,
});
const { peers, messages } = useMemo(
() =>
data ? buildStream(data) : { peers: [], messages: [] },
[data],
);
const secondsAgo = dataUpdatedAt
? Math.max(0, Math.floor((Date.now() - dataUpdatedAt) / 1000))
: null;
const footer = (
{messages.length} envelopes · {peers.length} live peers
{isFetching ? "▶ polling…" : `↻ ${secondsAgo ?? "—"}s ago`}
{" · "}every {POLL_INTERVAL_MS / 1000}s
read-only · E2E encrypted
);
const emptyLabel = isLoading
? "Connecting to mesh…"
: "No envelopes yet. When your peers send messages they'll appear here.";
return (
live · polling every {POLL_INTERVAL_MS / 1000}s
);
};