support huddles (#106)

* add token endpoint for livekit

* fix: invalid type passed to hook

* fix: inject livekit env variables for orion

* fix: show controls indicator above stream # shortcut

* return livekit server url from api

* simple huddle implementation with streams

* set human name in livekit room context

* simplify deployment tooling

* join huddle with audio automatically

* feat: show when there is an active huddle

This introduces a webhook which listens to events from livekit and
updates our firestore stream particle. It keeps the client simple,
reacting to changes to firestore docs.

* use headphones icon for huddles

* fix: screenshare not working in electron

The default VideoConference component from livekit doesn't support
screenshare in electron. This attempts to compose our own layout with
livekit components ourselves and introduces our own flow for
screenshare.

js/src/features/compose/controls-indicator.tsx

@@ -1,5 +1,6 @@
 import { Video, Mic, Paperclip } from "lucide-react";
 import { useMediaSettingsStore } from "@/stores/media-settings-store";
+import { PropsWithChildren } from "react";
 
 interface ControlsIndicatorProps {
   type: "reply" | "new";
@@ -12,7 +13,8 @@ export default function ControlsIndicator({
   attachmentCount = 0,
   showEscape = false,
   onOpenAttachments,
-}: ControlsIndicatorProps) {
+  children
+}: PropsWithChildren<ControlsIndicatorProps>) {
   const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
   const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
 
@@ -82,6 +84,7 @@ export default function ControlsIndicator({
           {attachmentCount} {attachmentCount === 1 ? "attachment" : "attachments"}
         </button>
       )}
+      {children}
     </div>
   );
 }

js/src/features/network-root.tsx

@@ -71,7 +71,7 @@ export default function NetworkRoot() {
       </div>
 
       <ComposeOverlay networkId={networkId!} onActiveChange={setComposeActive} />
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-center p-3">
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 flex justify-center p-3">
         <div className="pointer-events-auto">
           <ControlsIndicator type={"new"} />
         </div>

js/src/features/particles/particle-list-view.tsx

@@ -10,6 +10,7 @@ import {
   CircleCheck,
   StickyNote,
   Timer,
+  Headphones,
   type LucideIcon,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -94,13 +95,17 @@ function StreamRow({
   const userId = user?.id ?? "";
   const network = useNetwork(networkId);
 
-  useStreamAutoplay(latestChild, particle, networkId, network);
+  useStreamAutoplay(latestChild, particle, networkId, network ?? undefined);
 
   const expiringSoon = useExpiringSoon(
     particle.last_child_created_at,
     network?.message_retention_hours ?? 24,
   );
 
+  const hasActiveHuddle =
+    particle.huddle_active_participants && particle.huddle_active_participants.length > 0;
+  const huddleCount = particle.huddle_active_participants?.length ?? 0;
+
   const isDM =
     particle.visible_to.length === 2 &&
     particle.visible_to.every((v) => v.startsWith("human:"));
@@ -162,6 +167,7 @@ function StreamRow({
       className={cn(
         "flex w-full items-center gap-3 px-4 py-3 text-left cursor-pointer transition-colors hover:bg-accent",
         isSelected && "bg-accent",
+        hasActiveHuddle && "bg-gradient-to-r from-red-500/10 to-transparent",
       )}
     >
       {shortcutKey && (
@@ -188,7 +194,13 @@ function StreamRow({
           >
             {particle.properties.name}
           </p>
-          <div className="flex shrink-0 items-center gap-1">
+          <div className="flex shrink-0 items-center gap-1.5">
+            {hasActiveHuddle && (
+              <span className="flex items-center gap-1 rounded-full bg-red-500/15 px-1.5 py-0.5">
+                <Headphones className="size-3 text-red-400" />
+                <span className="text-[10px] font-medium text-red-400">{huddleCount}</span>
+              </span>
+            )}
             {expiringSoon && (
               <Timer className="size-3 text-muted-foreground/60" />
             )}

js/src/features/particles/stream-card.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useMemo } from "react";
-import { Timer } from "lucide-react";
+import { Timer, Headphones } from "lucide-react";
 import { cn, getInitials } from "@/lib/utils";
 import { useLiveLatestChild } from "@/hooks/use-particle";
 import { useAuthStore } from "@/stores/auth-store";
@@ -27,13 +27,17 @@ export const StreamCard = forwardRef<HTMLDivElement, StreamCardProps>(function S
   const userId = useAuthStore((s) => s.user?.id) ?? "";
   const network = useNetwork(networkId);
 
-  useStreamAutoplay(latestChild, particle, networkId, network);
+  useStreamAutoplay(latestChild, particle, networkId, network ?? undefined);
 
   const expiringSoon = useExpiringSoon(
     particle.last_child_created_at,
     network?.message_retention_hours ?? 24,
   );
 
+  const hasActiveHuddle =
+    particle.huddle_active_participants && particle.huddle_active_participants.length > 0;
+  const huddleCount = particle.huddle_active_participants?.length ?? 0;
+
   const isDM =
     particle.visible_to.length === 2 &&
     particle.visible_to.every((v) => v.startsWith("human:"));
@@ -94,10 +98,14 @@ export const StreamCard = forwardRef<HTMLDivElement, StreamCardProps>(function S
         "cursor-pointer overflow-hidden rounded-xl ring-1 ring-foreground/10 transition-all hover:ring-foreground/20",
         isUnseen && "ring-2 ring-primary",
         isSelected && "ring-2 ring-ring",
+        hasActiveHuddle && "ring-2 ring-red-500/70",
       )}
     >
       {/* Preview area */}
       <div className="relative aspect-[4/3] overflow-hidden bg-muted">
+        {hasActiveHuddle && (
+          <div className="pointer-events-none absolute inset-0 z-10 bg-gradient-to-b from-red-500/15 to-transparent" />
+        )}
         {shortcutKey && (
           <kbd className="absolute top-1.5 left-1.5 z-10 flex size-5 items-center justify-center rounded bg-black/50 font-mono text-xs text-white/70">
             {shortcutKey}
@@ -141,6 +149,12 @@ export const StreamCard = forwardRef<HTMLDivElement, StreamCardProps>(function S
           {particle.properties.name}
         </Small>
         <div className="ml-auto flex shrink-0 items-center gap-1.5">
+          {hasActiveHuddle && (
+            <span className="flex items-center gap-1 rounded-full bg-red-500/15 px-1.5 py-0.5">
+              <Headphones className="size-3 text-red-400" />
+              <span className="text-[10px] font-medium text-red-400">{huddleCount}</span>
+            </span>
+          )}
           {expiringSoon && (
             <Timer className="size-3 text-muted-foreground/60" />
           )}

js/src/features/particles/stream-view.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useEffectEvent, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuthStore } from "@/stores/auth-store";
+import { apiClient } from "@/api/client";
 import type { Particle } from "@/api/types";
 import { parseParticlePath, type ParticlePath } from "@/lib/particle-path";
 import { ComposeOverlay } from "@/features/compose/compose-overlay";
@@ -19,6 +20,7 @@ import { WindowControls } from "@/components/window-controls";
 import { RelativeTimestamp } from "@/components/relative-timestamp";
 import { useStreamPlayback } from "@/hooks/use-stream-playback";
 import { usePrefetchAdjacentMedia } from "@/hooks/use-prefetch-adjacent-media";
+import { getInitials } from "@/lib/utils";
 
 function getParticleDisplayName(particle: Particle): string {
   switch (particle.type) {
@@ -170,12 +172,19 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
           e.preventDefault();
           navigate(`/${networkId}`);
           break;
+        case "h": {
+          e.preventDefault();
+          apiClient.getLivekitToken(networkId, streamParticle.id).then(({ token, server_url }) => {
+            window.electronWindow.openHuddle({ token, serverUrl: server_url });
+          });
+          break;
+        }
       }
     }
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   },
-    [composeActive, next, prev, navigate, networkId],
+    [composeActive, next, prev, navigate, networkId, streamParticle.id],
   );
 
   // Click-to-navigate: left 30% = prev, right 70% = next
@@ -204,7 +213,14 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
         <p className="text-muted-foreground text-sm">
           No particles in this stream yet
         </p>
-        <ControlsIndicator type="reply" showEscape={true} />
+        <ControlsIndicator type="reply" showEscape={true}>
+          <span>
+            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+              H
+            </kbd>{" "}
+            huddle
+          </span>
+        </ControlsIndicator>
         <ComposeOverlay
           networkId={networkId}
           targetPath={path}
@@ -299,10 +315,14 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
 
       {/* Bottom-center: controls */}
       <div className="absolute inset-x-0 bottom-0 z-10 flex justify-center pb-3">
-        <ControlsIndicator
-          showEscape={true}
-          type="reply"
-        />
+        <ControlsIndicator type="reply" showEscape={true}>
+          <span>
+            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+              H
+            </kbd>{" "}
+            huddle
+          </span>
+        </ControlsIndicator>
       </div>
     </div>
   );
@@ -310,6 +330,16 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
 
 function TopBar({ networkId, particle, streamParticle }: { networkId: string; particle: Particle | null; streamParticle: Particle & { type: "stream" } }) {
   const navigate = useNavigate();
+  const network = useNetwork(networkId);
+
+  const huddleParticipants = streamParticle.huddle_active_participants ?? [];
+  const hasActiveHuddle = huddleParticipants.length > 0;
+
+  const handleJoinHuddle = () => {
+    apiClient.getLivekitToken(networkId, streamParticle.id).then(({ token, server_url }) => {
+      window.electronWindow.openHuddle({ token, serverUrl: server_url });
+    });
+  };
 
   return (
     <div className="drag-region flex flex-row px-4 gap-5 items-center">
@@ -336,6 +366,37 @@ function TopBar({ networkId, particle, streamParticle }: { networkId: string; pa
         </BreadcrumbList>
       </Breadcrumb>
 
+      {hasActiveHuddle && (
+        <button
+          onClick={handleJoinHuddle}
+          className="no-drag flex items-center gap-2 rounded-full bg-red-500/20 px-3 py-1 backdrop-blur-sm transition-colors hover:bg-red-500/30"
+        >
+          <span className="relative flex size-2">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-red-400 opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-red-500" />
+          </span>
+          <AvatarGroup>
+            {huddleParticipants.map((humanId) => {
+              const human = network?.humans?.find((h) => h.id === humanId);
+              const initials = human ? getInitials(human.email) : "?";
+              return (
+                <Tooltip key={humanId}>
+                  <TooltipTrigger asChild>
+                    <Avatar size="sm">
+                      <AvatarFallback className="bg-red-500/30 text-[8px] text-red-200">
+                        {initials}
+                      </AvatarFallback>
+                    </Avatar>
+                  </TooltipTrigger>
+                  <TooltipContent>{human?.email_prefix ?? humanId}</TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </AvatarGroup>
+          <span className="text-xs font-medium text-red-200">Join</span>
+        </button>
+      )}
+
       <Button
         variant="ghost"
         size="sm"