send a temp message to the stream for viewers already watching

js/components/src/lib/system-messages.ts

···
       { duration },
     ),
 
+  teleportArrival: (
+    streamerName: string,
+    count: number,
+  ): ChatMessageViewHydrated =>
+    createSystemMessage(
+      SystemMessageType.notification,
+      `${count} viewer${count !== 1 ? "s" : ""} teleported from ${streamerName}'s stream! Say hi!`,
+      { streamerName, count },
+    ),
+
   notification: (message: string): ChatMessageViewHydrated =>
     createSystemMessage(SystemMessageType.notification, message),
 };

js/components/src/livestream-store/websocket-consumer.tsx

···
   PlaceStreamSegment,
 } from "streamplace";
 import { SystemMessages } from "../lib/system-messages";
+import { formatHandleWithAt } from "../utils/format-handle";
 import { reduceChat } from "./chat";
 import { LivestreamState } from "./livestream-state";
 import { findProblems } from "./problems";
···
         activeTeleport: teleportRecord,
       };
     } else if (PlaceStreamLivestream.isTeleportArrival(message)) {
+      console.log("teleport succeeded");
+      // teleport has succeeded, we are now at the target stream
       const arrival = message as PlaceStreamLivestream.TeleportArrival;
-      // when receiving a teleportArrival, we're the target
-      // the source is teleporting to us
-      console.log("Received teleport arrival", arrival);
-      // TODO: show notification or UI for incoming teleport
+      const systemMessage = SystemMessages.teleportArrival(
+        formatHandleWithAt(arrival.source),
+        arrival.viewerCount,
+      );
+      // set proper times
+      systemMessage.indexedAt = arrival.startsAt;
+      systemMessage.record.createdAt = arrival.startsAt;
+
+      state = reduceChat(state, [systemMessage], []);
     } else if (PlaceStreamLivestream.isTeleportCanceled(message)) {
       // teleport was canceled (deleted or denied)
       state = {