) {
+ return collectText(tree).replace(/\s+/g, " ").trim();
+}
+
+describe("the contact notice row", () => {
+ it("names the person with their badge and offers show and go to chat", () => {
+ const onShow = vi.fn();
+ const onGoToChat = vi.fn();
+ const tree = ContactNoticeRow({ notice, contact: undefined, onShow, onGoToChat });
+ expect(text(tree)).toBe("new message from Ada Lovelace PERSON show go to chat");
+ const [show, goToChat] = buttons(tree);
+ void show.props.onClick?.();
+ void goToChat.props.onClick?.();
+ expect(onShow).toHaveBeenCalledOnce();
+ expect(onGoToChat).toHaveBeenCalledOnce();
+ });
+
+ it("counts several messages, marks the contact's GSV, and prefers the local alias", () => {
+ const tree = ContactNoticeRow({ notice: { ...notice, byShip: true, count: 3 }, contact, onShow: vi.fn(), onGoToChat: vi.fn() });
+ expect(text(tree)).toBe("3 new messages from Ada GSV show go to chat");
+ expect(collectNodes(tree).some((node) => node.props.class === "sender-dot")).toBe(true);
+ });
+
+ it("falls back to the name the peer sent when the contact is not loaded", () => {
+ expect(noticeName(notice, undefined)).toBe("Ada Lovelace");
+ expect(noticeName(notice, contact)).toBe("Ada");
+ });
+});
diff --git a/web/src/app/features/instrument/zen/ContactNotice.tsx b/web/src/app/features/instrument/zen/ContactNotice.tsx
new file mode 100644
index 000000000..824acc9d8
--- /dev/null
+++ b/web/src/app/features/instrument/zen/ContactNotice.tsx
@@ -0,0 +1,97 @@
+import { contactDisplayName, type ContactSummary } from "@humansandmachines/gsv/protocol";
+import type { JSX } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import type { ConsoleAccount } from "../../../domain/system/consoleModels";
+import { useGateway } from "../../../services/gateway/GatewayProvider";
+import { randomId } from "../../../services/ids";
+import { FleetDialog } from "../fleet/FleetDialog";
+import { canConfigure } from "../settings/settingsModel";
+import type { ContactNotice } from "./useContactNotices";
+import "../shared/senderBadge.css";
+
+/* the same ceiling the People composer applies */
+const MAX_REPLY_BYTES = 32_768;
+
+/** The local alias when the person set one, else the name the peer sent. */
+export function noticeName(notice: ContactNotice, contact: ContactSummary | undefined): string {
+ return contact ? contactDisplayName(contact) : notice.displayName;
+}
+
+/* inline markup rather than a component, so the badge reads in the row's own tree */
+function senderBadge(byShip: boolean) {
+ return {byShip && }{byShip ? "GSV" : "PERSON"};
+}
+
+/** One line per contact with new messages: who wrote, how many, and what to do about it. */
+export function ContactNoticeRow({ notice, contact, onShow, onGoToChat }: {
+ notice: ContactNotice;
+ contact: ContactSummary | undefined;
+ onShow: () => void;
+ onGoToChat: () => void;
+}) {
+ const name = noticeName(notice, contact);
+ return (
+
+ {notice.count > 1 ? `${notice.count} new messages` : "new message"} from {name}{senderBadge(notice.byShip)}
+
+
+
+
+
+ );
+}
+
+/** The message itself with a reply beneath it; sending threads the reply to that message. */
+export function ContactNoticeDialog({ notice, contact, account, open, onClose, onSent }: {
+ notice: ContactNotice;
+ contact: ContactSummary | undefined;
+ account: ConsoleAccount | undefined;
+ open: boolean;
+ onClose: () => void;
+ onSent: () => void;
+}) {
+ const { client, connected } = useGateway();
+ const [text, setText] = useState("");
+ const [state, setState] = useState<"idle" | "sending" | "failed">("idle");
+ const [error, setError] = useState(null);
+ const name = noticeName(notice, contact);
+ const maySend = connected && !!account && !!contact && contact.state === "active" && !contact.blocked
+ && canConfigure(account, "contact.send") && (account.uid === 0 || account.uid === contact.ownerUid);
+ const tooLong = new TextEncoder().encode(text).length > MAX_REPLY_BYTES;
+ useEffect(() => {
+ if (!open) return;
+ setText(""); setState("idle"); setError(null);
+ }, [open, notice.messageId]);
+
+ const send = async () => {
+ const body = text.trim();
+ if (!maySend || !body || tooLong || state === "sending") return;
+ setState("sending"); setError(null);
+ try {
+ await client.contact.send({ contactId: notice.contactId, text: body, idempotencyKey: randomId(), replyTo: notice.reference });
+ onSent();
+ } catch (cause) {
+ setState("failed");
+ setError(cause instanceof Error ? cause.message : String(cause));
+ }
+ };
+
+ return (
+
+