Add room server

frontend/src/api.ts

@@ -383,4 +383,21 @@ export const api = {
     fetchJson<RepeaterLppTelemetryResponse>(`/contacts/${publicKey}/repeater/lpp-telemetry`, {
       method: 'POST',
     }),
+  roomLogin: (publicKey: string, password: string) =>
+    fetchJson<RepeaterLoginResponse>(`/contacts/${publicKey}/room/login`, {
+      method: 'POST',
+      body: JSON.stringify({ password }),
+    }),
+  roomStatus: (publicKey: string) =>
+    fetchJson<RepeaterStatusResponse>(`/contacts/${publicKey}/room/status`, {
+      method: 'POST',
+    }),
+  roomAcl: (publicKey: string) =>
+    fetchJson<RepeaterAclResponse>(`/contacts/${publicKey}/room/acl`, {
+      method: 'POST',
+    }),
+  roomLppTelemetry: (publicKey: string) =>
+    fetchJson<RepeaterLppTelemetryResponse>(`/contacts/${publicKey}/room/lpp-telemetry`, {
+      method: 'POST',
+    }),
 };

frontend/src/components/ChatHeader.tsx

@@ -19,6 +19,7 @@ import type {
   PathDiscoveryResponse,
   RadioConfig,
 } from '../types';
+import { CONTACT_TYPE_ROOM } from '../types';
 
 interface ChatHeaderProps {
   conversation: Conversation;
@@ -84,6 +85,7 @@ export function ChatHeader({
     conversation.type === 'contact'
       ? contacts.find((contact) => contact.public_key === conversation.id)
       : null;
+  const activeContactIsRoomServer = activeContact?.type === CONTACT_TYPE_ROOM;
   const activeContactIsPrefixOnly = activeContact
     ? isPrefixOnlyContact(activeContact.public_key)
     : false;
@@ -230,7 +232,7 @@ export function ChatHeader({
         </span>
       </span>
       <div className="flex items-center justify-end gap-0.5 flex-shrink-0">
-        {conversation.type === 'contact' && (
+        {conversation.type === 'contact' && !activeContactIsRoomServer && (
           <button
             className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={() => setPathDiscoveryOpen(true)}
@@ -245,7 +247,7 @@ export function ChatHeader({
             <Route className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
           </button>
         )}
-        {conversation.type === 'contact' && (
+        {conversation.type === 'contact' && !activeContactIsRoomServer && (
           <button
             className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={onTrace}
@@ -260,7 +262,7 @@ export function ChatHeader({
             <DirectTraceIcon className="h-4 w-4 text-muted-foreground" />
           </button>
         )}
-        {notificationsSupported && (
+        {notificationsSupported && !activeContactIsRoomServer && (
           <button
             className="flex items-center gap-1 rounded px-1 py-1 hover:bg-accent text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={onToggleNotifications}

frontend/src/components/ConversationPane.tsx

@@ -1,9 +1,10 @@
-import { lazy, Suspense, useMemo, type Ref } from 'react';
+import { lazy, Suspense, useEffect, useMemo, useState, type Ref } from 'react';
 
 import { ChatHeader } from './ChatHeader';
 import { MessageInput, type MessageInputHandle } from './MessageInput';
 import { MessageList } from './MessageList';
 import { RawPacketFeedView } from './RawPacketFeedView';
+import { RoomServerPanel } from './RoomServerPanel';
 import type {
   Channel,
   Contact,
@@ -16,7 +17,7 @@ import type {
   RadioConfig,
 } from '../types';
 import type { RawPacketStatsSessionState } from '../utils/rawPacketStats';
-import { CONTACT_TYPE_REPEATER } from '../types';
+import { CONTACT_TYPE_REPEATER, CONTACT_TYPE_ROOM } from '../types';
 import { isPrefixOnlyContact, isUnknownFullKeyContact } from '../utils/pubkey';
 
 const RepeaterDashboard = lazy(() =>
@@ -131,6 +132,7 @@ export function ConversationPane({
   onSendMessage,
   onToggleNotifications,
 }: ConversationPaneProps) {
+  const [roomAuthenticated, setRoomAuthenticated] = useState(false);
   const activeContactIsRepeater = useMemo(() => {
     if (!activeConversation || activeConversation.type !== 'contact') return false;
     const contact = contacts.find((candidate) => candidate.public_key === activeConversation.id);
@@ -140,6 +142,10 @@ export function ConversationPane({
     if (!activeConversation || activeConversation.type !== 'contact') return null;
     return contacts.find((candidate) => candidate.public_key === activeConversation.id) ?? null;
   }, [activeConversation, contacts]);
+  const activeContactIsRoom = activeContact?.type === CONTACT_TYPE_ROOM;
+  useEffect(() => {
+    setRoomAuthenticated(false);
+  }, [activeConversation?.id]);
   const isPrefixOnlyActiveContact = activeContact
     ? isPrefixOnlyContact(activeContact.public_key)
     : false;
@@ -218,6 +224,8 @@ export function ConversationPane({
     );
   }
 
+  const showRoomChat = !activeContactIsRoom || roomAuthenticated;
+
   return (
     <>
       <ChatHeader
@@ -245,35 +253,40 @@ export function ConversationPane({
       {activeConversation.type === 'contact' && isUnknownFullKeyActiveContact && (
         <ContactResolutionBanner variant="unknown-full-key" />
       )}
-      <MessageList
-        key={activeConversation.id}
-        messages={messages}
-        contacts={contacts}
-        loading={messagesLoading}
-        loadingOlder={loadingOlder}
-        hasOlderMessages={hasOlderMessages}
-        unreadMarkerLastReadAt={
-          activeConversation.type === 'channel' ? unreadMarkerLastReadAt : undefined
-        }
-        onDismissUnreadMarker={
-          activeConversation.type === 'channel' ? onDismissUnreadMarker : undefined
-        }
-        onSenderClick={activeConversation.type === 'channel' ? onSenderClick : undefined}
-        onLoadOlder={onLoadOlder}
-        onResendChannelMessage={
-          activeConversation.type === 'channel' ? onResendChannelMessage : undefined
-        }
-        radioName={config?.name}
-        config={config}
-        onOpenContactInfo={onOpenContactInfo}
-        targetMessageId={targetMessageId}
-        onTargetReached={onTargetReached}
-        hasNewerMessages={hasNewerMessages}
-        loadingNewer={loadingNewer}
-        onLoadNewer={onLoadNewer}
-        onJumpToBottom={onJumpToBottom}
-      />
-      {activeConversation.type === 'contact' && isPrefixOnlyActiveContact ? null : (
+      {activeContactIsRoom && activeContact && (
+        <RoomServerPanel contact={activeContact} onAuthenticatedChange={setRoomAuthenticated} />
+      )}
+      {showRoomChat && (
+        <MessageList
+          key={activeConversation.id}
+          messages={messages}
+          contacts={contacts}
+          loading={messagesLoading}
+          loadingOlder={loadingOlder}
+          hasOlderMessages={hasOlderMessages}
+          unreadMarkerLastReadAt={
+            activeConversation.type === 'channel' ? unreadMarkerLastReadAt : undefined
+          }
+          onDismissUnreadMarker={
+            activeConversation.type === 'channel' ? onDismissUnreadMarker : undefined
+          }
+          onSenderClick={activeConversation.type === 'channel' ? onSenderClick : undefined}
+          onLoadOlder={onLoadOlder}
+          onResendChannelMessage={
+            activeConversation.type === 'channel' ? onResendChannelMessage : undefined
+          }
+          radioName={config?.name}
+          config={config}
+          onOpenContactInfo={onOpenContactInfo}
+          targetMessageId={targetMessageId}
+          onTargetReached={onTargetReached}
+          hasNewerMessages={hasNewerMessages}
+          loadingNewer={loadingNewer}
+          onLoadNewer={onLoadNewer}
+          onJumpToBottom={onJumpToBottom}
+        />
+      )}
+      {showRoomChat && !(activeConversation.type === 'contact' && isPrefixOnlyActiveContact) ? (
         <MessageInput
           ref={messageInputRef}
           onSend={onSendMessage}
@@ -286,7 +299,7 @@ export function ConversationPane({
               : `Message ${activeConversation.name}...`
           }
         />
-      )}
+      ) : null}
     </>
   );
 }

frontend/src/components/MessageList.tsx

@@ -9,7 +9,7 @@ import {
   type ReactNode,
 } from 'react';
 import type { Contact, Message, MessagePath, RadioConfig } from '../types';
-import { CONTACT_TYPE_REPEATER } from '../types';
+import { CONTACT_TYPE_REPEATER, CONTACT_TYPE_ROOM } from '../types';
 import { formatTime, parseSenderFromText } from '../utils/messageParser';
 import { formatHopCounts, type SenderInfo } from '../utils/pathUtils';
 import { getDirectContactRoute } from '../utils/pathUtils';
@@ -500,6 +500,33 @@ export function MessageList({
     contact: Contact | null,
     parsedSender: string | null
   ): SenderInfo => {
+    if (
+      msg.type === 'PRIV' &&
+      contact?.type === CONTACT_TYPE_ROOM &&
+      (msg.sender_key || msg.sender_name)
+    ) {
+      const authorContact =
+        (msg.sender_key
+          ? contacts.find((candidate) => candidate.public_key === msg.sender_key)
+          : null) || (msg.sender_name ? getContactByName(msg.sender_name) : null);
+      if (authorContact) {
+        const directRoute = getDirectContactRoute(authorContact);
+        return {
+          name: authorContact.name || msg.sender_name || authorContact.public_key.slice(0, 12),
+          publicKeyOrPrefix: authorContact.public_key,
+          lat: authorContact.lat,
+          lon: authorContact.lon,
+          pathHashMode: directRoute?.path_hash_mode ?? null,
+        };
+      }
+      return {
+        name: msg.sender_name || msg.sender_key || 'Unknown',
+        publicKeyOrPrefix: msg.sender_key || '',
+        lat: null,
+        lon: null,
+        pathHashMode: null,
+      };
+    }
     if (msg.type === 'PRIV' && contact) {
       const directRoute = getDirectContactRoute(contact);
       return {
@@ -584,6 +611,8 @@ export function MessageList({
     isCorruptChannelMessage: boolean
   ): string => {
     if (msg.outgoing) return '__outgoing__';
+    if (msg.type === 'PRIV' && msg.sender_key) return `key:${msg.sender_key}`;
+    if (msg.type === 'PRIV' && senderName) return `name:${senderName}`;
     if (msg.type === 'PRIV' && msg.conversation_key) return msg.conversation_key;
     if (msg.sender_key) return `key:${msg.sender_key}`;
     if (senderName) return `name:${senderName}`;
@@ -612,18 +641,24 @@ export function MessageList({
           // For DMs, look up contact; for channel messages, use parsed sender
           const contact = msg.type === 'PRIV' ? getContact(msg.conversation_key) : null;
           const isRepeater = contact?.type === CONTACT_TYPE_REPEATER;
+          const isRoomServer = contact?.type === CONTACT_TYPE_ROOM;
 
           // Skip sender parsing for repeater messages (CLI responses often have colons)
-          const { sender, content } = isRepeater
-            ? { sender: null, content: msg.text }
-            : parseSenderFromText(msg.text);
+          const { sender, content } =
+            isRepeater || (isRoomServer && msg.type === 'PRIV')
+              ? { sender: null, content: msg.text }
+              : parseSenderFromText(msg.text);
+          const directSenderName =
+            msg.type === 'PRIV' && isRoomServer ? msg.sender_name || null : null;
           const channelSenderName = msg.type === 'CHAN' ? msg.sender_name || sender : null;
           const channelSenderContact =
             msg.type === 'CHAN' && channelSenderName ? getContactByName(channelSenderName) : null;
           const isCorruptChannelMessage = isCorruptUnnamedChannelMessage(msg, sender);
           const displaySender = msg.outgoing
             ? 'You'
-            : contact?.name ||
+            : directSenderName ||
+              (isRoomServer && msg.sender_key ? msg.sender_key.slice(0, 8) : null) ||
+              contact?.name ||
               channelSenderName ||
               (isCorruptChannelMessage
                 ? CORRUPT_SENDER_LABEL
@@ -636,15 +671,22 @@ export function MessageList({
             displaySender !== CORRUPT_SENDER_LABEL;
 
           // Determine if we should show avatar (first message in a chunk from same sender)
-          const currentSenderKey = getSenderKey(msg, channelSenderName, isCorruptChannelMessage);
+          const currentSenderKey = getSenderKey(
+            msg,
+            directSenderName || channelSenderName,
+            isCorruptChannelMessage
+          );
           const prevMsg = sortedMessages[index - 1];
           const prevParsedSender = prevMsg ? parseSenderFromText(prevMsg.text).sender : null;
           const prevSenderKey = prevMsg
             ? getSenderKey(
                 prevMsg,
-                prevMsg.type === 'CHAN'
-                  ? prevMsg.sender_name || prevParsedSender
-                  : prevParsedSender,
+                prevMsg.type === 'PRIV' &&
+                  getContact(prevMsg.conversation_key)?.type === CONTACT_TYPE_ROOM
+                  ? prevMsg.sender_name
+                  : prevMsg.type === 'CHAN'
+                    ? prevMsg.sender_name || prevParsedSender
+                    : prevParsedSender,
                 isCorruptUnnamedChannelMessage(prevMsg, prevParsedSender)
               )
             : null;
@@ -658,9 +700,14 @@ export function MessageList({
           let avatarVariant: 'default' | 'corrupt' = 'default';
           if (!msg.outgoing) {
             if (msg.type === 'PRIV' && msg.conversation_key) {
-              // DM: use conversation_key (sender's public key)
-              avatarName = contact?.name || null;
-              avatarKey = msg.conversation_key;
+              if (isRoomServer) {
+                avatarName = directSenderName;
+                avatarKey =
+                  msg.sender_key || (avatarName ? `name:${avatarName}` : msg.conversation_key);
+              } else {
+                avatarName = contact?.name || null;
+                avatarKey = msg.conversation_key;
+              }
             } else if (isCorruptChannelMessage) {
               avatarName = CORRUPT_SENDER_LABEL;
               avatarKey = `corrupt:${msg.id}`;
@@ -725,7 +772,12 @@ export function MessageList({
                           type="button"
                           className="avatar-action-button rounded-full border-none bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                           aria-label={avatarActionLabel}
-                          onClick={() => onOpenContactInfo(avatarKey, msg.type === 'CHAN')}
+                          onClick={() =>
+                            onOpenContactInfo(
+                              avatarKey,
+                              msg.type === 'CHAN' || (msg.type === 'PRIV' && isRoomServer)
+                            )
+                          }
                         >
                           <ContactAvatar
                             name={avatarName}
@@ -780,7 +832,7 @@ export function MessageList({
                           onClick={() =>
                             setSelectedPath({
                               paths: msg.paths!,
-                              senderInfo: getSenderInfo(msg, contact, sender),
+                              senderInfo: getSenderInfo(msg, contact, directSenderName || sender),
                             })
                           }
                         />
@@ -806,7 +858,7 @@ export function MessageList({
                             onClick={() =>
                               setSelectedPath({
                                 paths: msg.paths!,
-                                senderInfo: getSenderInfo(msg, contact, sender),
+                                senderInfo: getSenderInfo(msg, contact, directSenderName || sender),
                               })
                             }
                           />

frontend/src/components/RepeaterLogin.tsx

@@ -8,6 +8,10 @@ interface RepeaterLoginProps {
   error: string | null;
   onLogin: (password: string) => Promise<void>;
   onLoginAsGuest: () => Promise<void>;
+  description?: string;
+  passwordPlaceholder?: string;
+  loginLabel?: string;
+  guestLabel?: string;
 }
 
 export function RepeaterLogin({
@@ -16,6 +20,10 @@ export function RepeaterLogin({
   error,
   onLogin,
   onLoginAsGuest,
+  description = 'Log in to access repeater dashboard',
+  passwordPlaceholder = 'Repeater password...',
+  loginLabel = 'Login with Password',
+  guestLabel = 'Login as Guest / ACLs',
 }: RepeaterLoginProps) {
   const [password, setPassword] = useState('');
 
@@ -33,7 +41,7 @@ export function RepeaterLogin({
       <div className="w-full max-w-sm space-y-6">
         <div className="text-center space-y-1">
           <h2 className="text-lg font-semibold">{repeaterName}</h2>
-          <p className="text-sm text-muted-foreground">Log in to access repeater dashboard</p>
+          <p className="text-sm text-muted-foreground">{description}</p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4" autoComplete="off">
@@ -46,7 +54,7 @@ export function RepeaterLogin({
             data-bwignore="true"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            placeholder="Repeater password..."
+            placeholder={passwordPlaceholder}
             aria-label="Repeater password"
             disabled={loading}
             autoFocus
@@ -60,7 +68,7 @@ export function RepeaterLogin({
 
           <div className="flex flex-col gap-2">
             <Button type="submit" disabled={loading} className="w-full">
-              {loading ? 'Logging in...' : 'Login with Password'}
+              {loading ? 'Logging in...' : loginLabel}
             </Button>
             <Button
               type="button"
@@ -69,7 +77,7 @@ export function RepeaterLogin({
               className="w-full"
               onClick={onLoginAsGuest}
             >
-              Login as Guest / ACLs
+              {guestLabel}
             </Button>
           </div>
         </form>

frontend/src/components/RoomServerPanel.tsx

@@ -0,0 +1,289 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { api } from '../api';
+import { toast } from './ui/sonner';
+import { Button } from './ui/button';
+import type {
+  Contact,
+  PaneState,
+  RepeaterAclResponse,
+  RepeaterLppTelemetryResponse,
+  RepeaterStatusResponse,
+} from '../types';
+import { TelemetryPane } from './repeater/RepeaterTelemetryPane';
+import { AclPane } from './repeater/RepeaterAclPane';
+import { LppTelemetryPane } from './repeater/RepeaterLppTelemetryPane';
+import { ConsolePane } from './repeater/RepeaterConsolePane';
+import { RepeaterLogin } from './RepeaterLogin';
+
+interface RoomServerPanelProps {
+  contact: Contact;
+  onAuthenticatedChange?: (authenticated: boolean) => void;
+}
+
+type RoomPaneKey = 'status' | 'acl' | 'lppTelemetry';
+
+type RoomPaneData = {
+  status: RepeaterStatusResponse | null;
+  acl: RepeaterAclResponse | null;
+  lppTelemetry: RepeaterLppTelemetryResponse | null;
+};
+
+type RoomPaneStates = Record<RoomPaneKey, PaneState>;
+
+type ConsoleEntry = {
+  command: string;
+  response: string;
+  timestamp: number;
+  outgoing: boolean;
+};
+
+const INITIAL_PANE_STATE: PaneState = {
+  loading: false,
+  attempt: 0,
+  error: null,
+  fetched_at: null,
+};
+
+function createInitialPaneStates(): RoomPaneStates {
+  return {
+    status: { ...INITIAL_PANE_STATE },
+    acl: { ...INITIAL_PANE_STATE },
+    lppTelemetry: { ...INITIAL_PANE_STATE },
+  };
+}
+
+export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPanelProps) {
+  const [loginLoading, setLoginLoading] = useState(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [loginMessage, setLoginMessage] = useState<string | null>(null);
+  const [authenticated, setAuthenticated] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [paneData, setPaneData] = useState<RoomPaneData>({
+    status: null,
+    acl: null,
+    lppTelemetry: null,
+  });
+  const [paneStates, setPaneStates] = useState<RoomPaneStates>(createInitialPaneStates);
+  const [consoleHistory, setConsoleHistory] = useState<ConsoleEntry[]>([]);
+  const [consoleLoading, setConsoleLoading] = useState(false);
+
+  useEffect(() => {
+    setLoginLoading(false);
+    setLoginError(null);
+    setLoginMessage(null);
+    setAuthenticated(false);
+    setAdvancedOpen(false);
+    setPaneData({
+      status: null,
+      acl: null,
+      lppTelemetry: null,
+    });
+    setPaneStates(createInitialPaneStates());
+    setConsoleHistory([]);
+    setConsoleLoading(false);
+  }, [contact.public_key]);
+
+  useEffect(() => {
+    onAuthenticatedChange?.(authenticated);
+  }, [authenticated, onAuthenticatedChange]);
+
+  const refreshPane = useCallback(
+    async <K extends RoomPaneKey>(pane: K, loader: () => Promise<RoomPaneData[K]>) => {
+      setPaneStates((prev) => ({
+        ...prev,
+        [pane]: {
+          ...prev[pane],
+          loading: true,
+          attempt: prev[pane].attempt + 1,
+          error: null,
+        },
+      }));
+
+      try {
+        const data = await loader();
+        setPaneData((prev) => ({ ...prev, [pane]: data }));
+        setPaneStates((prev) => ({
+          ...prev,
+          [pane]: {
+            loading: false,
+            attempt: prev[pane].attempt,
+            error: null,
+            fetched_at: Date.now(),
+          },
+        }));
+      } catch (err) {
+        setPaneStates((prev) => ({
+          ...prev,
+          [pane]: {
+            ...prev[pane],
+            loading: false,
+            error: err instanceof Error ? err.message : 'Unknown error',
+          },
+        }));
+      }
+    },
+    []
+  );
+
+  const performLogin = useCallback(
+    async (password: string) => {
+      if (loginLoading) return;
+
+      setLoginLoading(true);
+      setLoginError(null);
+      setLoginMessage(null);
+      try {
+        const result = await api.roomLogin(contact.public_key, password);
+        setAuthenticated(result.authenticated);
+        setLoginMessage(
+          result.message ??
+            (result.authenticated
+              ? 'Login confirmed. You can now send room messages and open admin tools.'
+              : 'Login request sent, but authentication was not confirmed.')
+        );
+        if (result.authenticated) {
+          toast.success('Room login confirmed');
+        } else {
+          toast(result.message ?? 'Room login was not confirmed');
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Unknown error';
+        setAuthenticated(false);
+        setLoginError(message);
+        toast.error('Room login failed', { description: message });
+      } finally {
+        setLoginLoading(false);
+      }
+    },
+    [contact.public_key, loginLoading]
+  );
+
+  const handleLogin = useCallback(
+    async (password: string) => {
+      await performLogin(password);
+    },
+    [performLogin]
+  );
+
+  const handleLoginAsGuest = useCallback(async () => {
+    await performLogin('');
+  }, [performLogin]);
+
+  const handleConsoleCommand = useCallback(
+    async (command: string) => {
+      setConsoleLoading(true);
+      const timestamp = Date.now();
+      setConsoleHistory((prev) => [
+        ...prev,
+        { command, response: command, timestamp, outgoing: true },
+      ]);
+      try {
+        const response = await api.sendRepeaterCommand(contact.public_key, command);
+        setConsoleHistory((prev) => [
+          ...prev,
+          {
+            command,
+            response: response.response,
+            timestamp: Date.now(),
+            outgoing: false,
+          },
+        ]);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Unknown error';
+        setConsoleHistory((prev) => [
+          ...prev,
+          {
+            command,
+            response: `(error) ${message}`,
+            timestamp: Date.now(),
+            outgoing: false,
+          },
+        ]);
+      } finally {
+        setConsoleLoading(false);
+      }
+    },
+    [contact.public_key]
+  );
+
+  const panelTitle = useMemo(() => contact.name || contact.public_key.slice(0, 12), [contact]);
+
+  if (!authenticated) {
+    return (
+      <div className="flex-1 overflow-y-auto">
+        <RepeaterLogin
+          repeaterName={panelTitle}
+          loading={loginLoading}
+          error={loginError}
+          onLogin={handleLogin}
+          onLoginAsGuest={handleLoginAsGuest}
+          description="Log in with the room password or use ACL/guest access to enter this room server"
+          passwordPlaceholder="Room server password..."
+          guestLabel="Login with ACL / Guest"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <section className="border-b border-border bg-muted/20 px-4 py-3">
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+          <div className="space-y-1">
+            <div className="text-sm font-medium">Room Server Controls</div>
+            <p className="text-xs text-muted-foreground">
+              Room access is active. Use the chat history and message box below to participate, and
+              open admin tools when needed.
+            </p>
+            {loginMessage && <p className="text-xs text-muted-foreground">{loginMessage}</p>}
+          </div>
+          <div className="flex w-full flex-col gap-2 sm:flex-row lg:w-auto">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleLoginAsGuest}
+              disabled={loginLoading}
+            >
+              Refresh ACL Login
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setAdvancedOpen((prev) => !prev)}
+            >
+              {advancedOpen ? 'Hide Tools' : 'Show Tools'}
+            </Button>
+          </div>
+        </div>
+
+        {advancedOpen && (
+          <div className="grid gap-3 xl:grid-cols-2">
+            <TelemetryPane
+              data={paneData.status}
+              state={paneStates.status}
+              onRefresh={() => refreshPane('status', () => api.roomStatus(contact.public_key))}
+            />
+            <AclPane
+              data={paneData.acl}
+              state={paneStates.acl}
+              onRefresh={() => refreshPane('acl', () => api.roomAcl(contact.public_key))}
+            />
+            <LppTelemetryPane
+              data={paneData.lppTelemetry}
+              state={paneStates.lppTelemetry}
+              onRefresh={() =>
+                refreshPane('lppTelemetry', () => api.roomLppTelemetry(contact.public_key))
+              }
+            />
+            <ConsolePane
+              history={consoleHistory}
+              loading={consoleLoading}
+              onSend={handleConsoleCommand}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

frontend/src/components/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
   X,
 } from 'lucide-react';
 import {
+  CONTACT_TYPE_ROOM,
   CONTACT_TYPE_REPEATER,
   type Contact,
   type Channel,
@@ -57,6 +58,7 @@ type CollapseState = {
   favorites: boolean;
   channels: boolean;
   contacts: boolean;
+  rooms: boolean;
   repeaters: boolean;
 };
 
@@ -67,6 +69,7 @@ const DEFAULT_COLLAPSE_STATE: CollapseState = {
   favorites: false,
   channels: false,
   contacts: false,
+  rooms: false,
   repeaters: false,
 };
 
@@ -80,6 +83,7 @@ function loadCollapsedState(): CollapseState {
       favorites: parsed.favorites ?? DEFAULT_COLLAPSE_STATE.favorites,
       channels: parsed.channels ?? DEFAULT_COLLAPSE_STATE.channels,
       contacts: parsed.contacts ?? DEFAULT_COLLAPSE_STATE.contacts,
+      rooms: parsed.rooms ?? DEFAULT_COLLAPSE_STATE.rooms,
       repeaters: parsed.repeaters ?? DEFAULT_COLLAPSE_STATE.repeaters,
     };
   } catch {
@@ -157,6 +161,7 @@ export function Sidebar({
   const [favoritesCollapsed, setFavoritesCollapsed] = useState(initialCollapsedState.favorites);
   const [channelsCollapsed, setChannelsCollapsed] = useState(initialCollapsedState.channels);
   const [contactsCollapsed, setContactsCollapsed] = useState(initialCollapsedState.contacts);
+  const [roomsCollapsed, setRoomsCollapsed] = useState(initialCollapsedState.rooms);
   const [repeatersCollapsed, setRepeatersCollapsed] = useState(initialCollapsedState.repeaters);
   const collapseSnapshotRef = useRef<CollapseState | null>(null);
   const sectionSortSourceRef = useRef(initialSectionSortState.source);
@@ -352,12 +357,23 @@ export function Sidebar({
   const sortedNonRepeaterContacts = useMemo(
     () =>
       sortContactsByOrder(
-        uniqueContacts.filter((c) => c.type !== CONTACT_TYPE_REPEATER),
+        uniqueContacts.filter(
+          (c) => c.type !== CONTACT_TYPE_REPEATER && c.type !== CONTACT_TYPE_ROOM
+        ),
         sectionSortOrders.contacts
       ),
     [uniqueContacts, sectionSortOrders.contacts, sortContactsByOrder]
   );
 
+  const sortedRooms = useMemo(
+    () =>
+      sortContactsByOrder(
+        uniqueContacts.filter((c) => c.type === CONTACT_TYPE_ROOM),
+        sectionSortOrders.rooms
+      ),
+    [uniqueContacts, sectionSortOrders.rooms, sortContactsByOrder]
+  );
+
   const sortedRepeaters = useMemo(
     () =>
       sortRepeatersByOrder(
@@ -392,6 +408,17 @@ export function Sidebar({
     [sortedNonRepeaterContacts, query]
   );
 
+  const filteredRooms = useMemo(
+    () =>
+      query
+        ? sortedRooms.filter(
+            (c) =>
+              c.name?.toLowerCase().includes(query) || c.public_key.toLowerCase().includes(query)
+          )
+        : sortedRooms,
+    [sortedRooms, query]
+  );
+
   const filteredRepeaters = useMemo(
     () =>
       query
@@ -412,6 +439,7 @@ export function Sidebar({
           favorites: favoritesCollapsed,
           channels: channelsCollapsed,
           contacts: contactsCollapsed,
+          rooms: roomsCollapsed,
           repeaters: repeatersCollapsed,
         };
       }
@@ -421,12 +449,14 @@ export function Sidebar({
         favoritesCollapsed ||
         channelsCollapsed ||
         contactsCollapsed ||
+        roomsCollapsed ||
         repeatersCollapsed
       ) {
         setToolsCollapsed(false);
         setFavoritesCollapsed(false);
         setChannelsCollapsed(false);
         setContactsCollapsed(false);
+        setRoomsCollapsed(false);
         setRepeatersCollapsed(false);
       }
       return;
@@ -439,6 +469,7 @@ export function Sidebar({
       setFavoritesCollapsed(prev.favorites);
       setChannelsCollapsed(prev.channels);
       setContactsCollapsed(prev.contacts);
+      setRoomsCollapsed(prev.rooms);
       setRepeatersCollapsed(prev.repeaters);
     }
   }, [
@@ -447,6 +478,7 @@ export function Sidebar({
     favoritesCollapsed,
     channelsCollapsed,
     contactsCollapsed,
+    roomsCollapsed,
     repeatersCollapsed,
   ]);
 
@@ -458,6 +490,7 @@ export function Sidebar({
       favorites: favoritesCollapsed,
       channels: channelsCollapsed,
       contacts: contactsCollapsed,
+      rooms: roomsCollapsed,
       repeaters: repeatersCollapsed,
     };
 
@@ -472,45 +505,56 @@ export function Sidebar({
     favoritesCollapsed,
     channelsCollapsed,
     contactsCollapsed,
+    roomsCollapsed,
     repeatersCollapsed,
   ]);
 
   // Separate favorites from regular items, and build combined favorites list
-  const { favoriteItems, nonFavoriteChannels, nonFavoriteContacts, nonFavoriteRepeaters } =
-    useMemo(() => {
-      const favChannels = filteredChannels.filter((c) => isFavorite(favorites, 'channel', c.key));
-      const favContacts = [...filteredNonRepeaterContacts, ...filteredRepeaters].filter((c) =>
-        isFavorite(favorites, 'contact', c.public_key)
-      );
-      const nonFavChannels = filteredChannels.filter(
-        (c) => !isFavorite(favorites, 'channel', c.key)
-      );
-      const nonFavContacts = filteredNonRepeaterContacts.filter(
-        (c) => !isFavorite(favorites, 'contact', c.public_key)
-      );
-      const nonFavRepeaters = filteredRepeaters.filter(
-        (c) => !isFavorite(favorites, 'contact', c.public_key)
-      );
+  const {
+    favoriteItems,
+    nonFavoriteChannels,
+    nonFavoriteContacts,
+    nonFavoriteRooms,
+    nonFavoriteRepeaters,
+  } = useMemo(() => {
+    const favChannels = filteredChannels.filter((c) => isFavorite(favorites, 'channel', c.key));
+    const favContacts = [
+      ...filteredNonRepeaterContacts,
+      ...filteredRooms,
+      ...filteredRepeaters,
+    ].filter((c) => isFavorite(favorites, 'contact', c.public_key));
+    const nonFavChannels = filteredChannels.filter((c) => !isFavorite(favorites, 'channel', c.key));
+    const nonFavContacts = filteredNonRepeaterContacts.filter(
+      (c) => !isFavorite(favorites, 'contact', c.public_key)
+    );
+    const nonFavRooms = filteredRooms.filter(
+      (c) => !isFavorite(favorites, 'contact', c.public_key)
+    );
+    const nonFavRepeaters = filteredRepeaters.filter(
+      (c) => !isFavorite(favorites, 'contact', c.public_key)
+    );
 
-      const items: FavoriteItem[] = [
-        ...favChannels.map((channel) => ({ type: 'channel' as const, channel })),
-        ...favContacts.map((contact) => ({ type: 'contact' as const, contact })),
-      ];
+    const items: FavoriteItem[] = [
+      ...favChannels.map((channel) => ({ type: 'channel' as const, channel })),
+      ...favContacts.map((contact) => ({ type: 'contact' as const, contact })),
+    ];
 
-      return {
-        favoriteItems: sortFavoriteItemsByOrder(items, sectionSortOrders.favorites),
-        nonFavoriteChannels: nonFavChannels,
-        nonFavoriteContacts: nonFavContacts,
-        nonFavoriteRepeaters: nonFavRepeaters,
-      };
-    }, [
-      filteredChannels,
-      filteredNonRepeaterContacts,
-      filteredRepeaters,
-      favorites,
-      sectionSortOrders.favorites,
-      sortFavoriteItemsByOrder,
-    ]);
+    return {
+      favoriteItems: sortFavoriteItemsByOrder(items, sectionSortOrders.favorites),
+      nonFavoriteChannels: nonFavChannels,
+      nonFavoriteContacts: nonFavContacts,
+      nonFavoriteRooms: nonFavRooms,
+      nonFavoriteRepeaters: nonFavRepeaters,
+    };
+  }, [
+    filteredChannels,
+    filteredNonRepeaterContacts,
+    filteredRooms,
+    filteredRepeaters,
+    favorites,
+    sectionSortOrders.favorites,
+    sortFavoriteItemsByOrder,
+  ]);
 
   const buildChannelRow = (channel: Channel, keyPrefix: string): ConversationRow => ({
     key: `${keyPrefix}-${channel.key}`,
@@ -638,11 +682,13 @@ export function Sidebar({
   );
   const channelRows = nonFavoriteChannels.map((channel) => buildChannelRow(channel, 'chan'));
   const contactRows = nonFavoriteContacts.map((contact) => buildContactRow(contact, 'contact'));
+  const roomRows = nonFavoriteRooms.map((contact) => buildContactRow(contact, 'room'));
   const repeaterRows = nonFavoriteRepeaters.map((contact) => buildContactRow(contact, 'repeater'));
 
   const favoritesUnreadCount = getSectionUnreadCount(favoriteRows);
   const channelsUnreadCount = getSectionUnreadCount(channelRows);
   const contactsUnreadCount = getSectionUnreadCount(contactRows);
+  const roomsUnreadCount = getSectionUnreadCount(roomRows);
   const repeatersUnreadCount = getSectionUnreadCount(repeaterRows);
   const favoritesHasMention = sectionHasMention(favoriteRows);
   const channelsHasMention = sectionHasMention(channelRows);
@@ -899,6 +945,21 @@ export function Sidebar({
           </>
         )}
 
+        {/* Room Servers */}
+        {nonFavoriteRooms.length > 0 && (
+          <>
+            {renderSectionHeader(
+              'Room Servers',
+              roomsCollapsed,
+              () => setRoomsCollapsed((prev) => !prev),
+              'rooms',
+              roomsUnreadCount,
+              roomsUnreadCount > 0
+            )}
+            {(isSearching || !roomsCollapsed) && roomRows.map((row) => renderConversationRow(row))}
+          </>
+        )}
+
         {/* Repeaters */}
         {nonFavoriteRepeaters.length > 0 && (
           <>
@@ -916,6 +977,7 @@ export function Sidebar({
 
         {/* Empty state */}
         {nonFavoriteContacts.length === 0 &&
+          nonFavoriteRooms.length === 0 &&
           nonFavoriteChannels.length === 0 &&
           nonFavoriteRepeaters.length === 0 &&
           favoriteItems.length === 0 && (

frontend/src/test/chatHeaderKeyVisibility.test.tsx

@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import { ChatHeader } from '../components/ChatHeader';
 import type { Channel, Contact, Conversation, Favorite, PathDiscoveryResponse } from '../types';
+import { CONTACT_TYPE_ROOM } from '../types';
 import { PUBLIC_CHANNEL_KEY } from '../utils/publicChannel';
 
 function makeChannel(key: string, name: string, isHashtag: boolean): Channel {
@@ -170,6 +171,38 @@ describe('ChatHeader key visibility', () => {
     expect(onToggleNotifications).toHaveBeenCalledTimes(1);
   });
 
+  it('hides trace and notification controls for room-server contacts', () => {
+    const pubKey = '41'.repeat(32);
+    const contact: Contact = {
+      public_key: pubKey,
+      name: 'Ops Board',
+      type: CONTACT_TYPE_ROOM,
+      flags: 0,
+      direct_path: null,
+      direct_path_len: -1,
+      direct_path_hash_mode: -1,
+      last_advert: null,
+      lat: null,
+      lon: null,
+      last_seen: null,
+      on_radio: false,
+      last_contacted: null,
+      last_read_at: null,
+      first_seen: null,
+    };
+    const conversation: Conversation = { type: 'contact', id: pubKey, name: 'Ops Board' };
+
+    render(
+      <ChatHeader {...baseProps} conversation={conversation} channels={[]} contacts={[contact]} />
+    );
+
+    expect(screen.queryByRole('button', { name: 'Path Discovery' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Direct Trace' })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Enable notifications for this conversation' })
+    ).not.toBeInTheDocument();
+  });
+
   it('hides the delete button for the canonical Public channel', () => {
     const channel = makeChannel(PUBLIC_CHANNEL_KEY, 'Public', false);
     const conversation: Conversation = { type: 'channel', id: PUBLIC_CHANNEL_KEY, name: 'Public' };

frontend/src/test/contactAvatar.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { getContactAvatar } from '../utils/contactAvatar';
-import { CONTACT_TYPE_REPEATER } from '../types';
+import { CONTACT_TYPE_REPEATER, CONTACT_TYPE_ROOM } from '../types';
 
 describe('getContactAvatar', () => {
   it('returns complete avatar info', () => {
@@ -30,6 +30,13 @@ describe('getContactAvatar', () => {
     expect(avatar1.background).toBe(avatar2.background);
   });
 
+  it('returns room avatar for type=3', () => {
+    const avatar = getContactAvatar('Ops Board', 'abc123def456', CONTACT_TYPE_ROOM);
+    expect(avatar.text).toBe('🛖');
+    expect(avatar.background).toBe('#6b4f2a');
+    expect(avatar.textColor).toBe('#ffffff');
+  });
+
   it('non-repeater types use normal avatar', () => {
     const avatar0 = getContactAvatar('John', 'abc123', 0);
     const avatar1 = getContactAvatar('John', 'abc123', 1);

frontend/src/test/conversationPane.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { ConversationPane } from '../components/ConversationPane';
@@ -41,6 +41,21 @@ vi.mock('../components/RepeaterDashboard', () => ({
   RepeaterDashboard: () => <div data-testid="repeater-dashboard" />,
 }));
 
+vi.mock('../components/RoomServerPanel', () => ({
+  RoomServerPanel: ({
+    onAuthenticatedChange,
+  }: {
+    onAuthenticatedChange?: (value: boolean) => void;
+  }) => (
+    <div>
+      <div data-testid="room-server-panel" />
+      <button type="button" onClick={() => onAuthenticatedChange?.(true)}>
+        Authenticate room
+      </button>
+    </div>
+  ),
+}));
+
 vi.mock('../components/MapView', () => ({
   MapView: () => <div data-testid="map-view" />,
 }));
@@ -216,6 +231,54 @@ describe('ConversationPane', () => {
     });
   });
 
+  it('gates room chat behind room login controls until authenticated', async () => {
+    render(
+      <ConversationPane
+        {...createProps({
+          activeConversation: {
+            type: 'contact',
+            id: 'cc'.repeat(32),
+            name: 'Ops Board',
+          },
+          contacts: [
+            {
+              public_key: 'cc'.repeat(32),
+              name: 'Ops Board',
+              type: 3,
+              flags: 0,
+              direct_path: null,
+              direct_path_len: -1,
+              direct_path_hash_mode: -1,
+              last_advert: null,
+              lat: null,
+              lon: null,
+              last_seen: null,
+              on_radio: false,
+              last_contacted: null,
+              last_read_at: null,
+              first_seen: null,
+            },
+          ],
+        })}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('room-server-panel')).toBeInTheDocument();
+      expect(screen.getByTestId('chat-header')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('message-list')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('message-input')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Authenticate room' }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-list')).toBeInTheDocument();
+      expect(screen.getByTestId('message-input')).toBeInTheDocument();
+    });
+  });
+
   it('passes unread marker props to MessageList only for channel conversations', async () => {
     render(
       <ConversationPane

frontend/src/test/messageList.test.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { MessageList } from '../components/MessageList';
-import type { Message } from '../types';
+import { CONTACT_TYPE_ROOM, type Contact, type Message } from '../types';
 
 const scrollIntoViewMock = vi.fn();
 const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
@@ -81,6 +81,46 @@ describe('MessageList channel sender rendering', () => {
     expect(screen.getByText('A')).toBeInTheDocument();
   });
 
+  it('renders room-server DM messages using stored sender attribution instead of the room contact', () => {
+    const roomContact: Contact = {
+      public_key: 'ab'.repeat(32),
+      name: 'Ops Board',
+      type: CONTACT_TYPE_ROOM,
+      flags: 0,
+      direct_path: null,
+      direct_path_len: -1,
+      direct_path_hash_mode: -1,
+      last_advert: null,
+      lat: null,
+      lon: null,
+      last_seen: null,
+      on_radio: false,
+      last_contacted: null,
+      last_read_at: null,
+      first_seen: null,
+    };
+
+    render(
+      <MessageList
+        messages={[
+          createMessage({
+            type: 'PRIV',
+            conversation_key: roomContact.public_key,
+            text: 'status update: ready',
+            sender_name: 'Alice',
+            sender_key: '12'.repeat(32),
+          }),
+        ]}
+        contacts={[roomContact]}
+        loading={false}
+      />
+    );
+
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.queryByText('Ops Board')).not.toBeInTheDocument();
+    expect(screen.getByText('status update: ready')).toBeInTheDocument();
+  });
+
   it('gives clickable sender avatars an accessible label', () => {
     render(
       <MessageList

frontend/src/test/sidebar.test.tsx

@@ -2,7 +2,13 @@ import { fireEvent, render, screen, waitFor, within } from '@testing-library/rea
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { Sidebar } from '../components/Sidebar';
-import { CONTACT_TYPE_REPEATER, type Channel, type Contact, type Favorite } from '../types';
+import {
+  CONTACT_TYPE_REPEATER,
+  CONTACT_TYPE_ROOM,
+  type Channel,
+  type Contact,
+  type Favorite,
+} from '../types';
 import { getStateKey, type ConversationTimes } from '../utils/conversationState';
 import { PUBLIC_CHANNEL_KEY } from '../utils/publicChannel';
 
@@ -51,16 +57,19 @@ function renderSidebar(overrides?: {
   isConversationNotificationsEnabled?: (type: 'channel' | 'contact', id: string) => boolean;
 }) {
   const aliceName = 'Alice';
+  const roomName = 'Ops Board';
   const publicChannel = makeChannel('AA'.repeat(16), 'Public');
   const flightChannel = makeChannel('BB'.repeat(16), '#flight');
   const opsChannel = makeChannel('CC'.repeat(16), '#ops');
   const alice = makeContact('11'.repeat(32), aliceName);
+  const board = makeContact('33'.repeat(32), roomName, CONTACT_TYPE_ROOM);
   const relay = makeContact('22'.repeat(32), 'Relay', CONTACT_TYPE_REPEATER);
 
   const unreadCounts = overrides?.unreadCounts ?? {
     [getStateKey('channel', flightChannel.key)]: 2,
     [getStateKey('channel', opsChannel.key)]: 1,
     [getStateKey('contact', alice.public_key)]: 3,
+    [getStateKey('contact', board.public_key)]: 5,
     [getStateKey('contact', relay.public_key)]: 4,
   };
 
@@ -69,7 +78,7 @@ function renderSidebar(overrides?: {
 
   const view = render(
     <Sidebar
-      contacts={[alice, relay]}
+      contacts={[alice, board, relay]}
       channels={channels}
       activeConversation={null}
       onSelectConversation={vi.fn()}
@@ -87,7 +96,7 @@ function renderSidebar(overrides?: {
     />
   );
 
-  return { ...view, flightChannel, opsChannel, aliceName };
+  return { ...view, flightChannel, opsChannel, aliceName, roomName };
 }
 
 function getSectionHeaderContainer(title: string): HTMLElement {
@@ -108,6 +117,7 @@ describe('Sidebar section summaries', () => {
     expect(within(getSectionHeaderContainer('Favorites')).getByText('2')).toBeInTheDocument();
     expect(within(getSectionHeaderContainer('Channels')).getByText('1')).toBeInTheDocument();
     expect(within(getSectionHeaderContainer('Contacts')).getByText('3')).toBeInTheDocument();
+    expect(within(getSectionHeaderContainer('Room Servers')).getByText('5')).toBeInTheDocument();
     expect(within(getSectionHeaderContainer('Repeaters')).getByText('4')).toBeInTheDocument();
   });
 
@@ -169,16 +179,25 @@ describe('Sidebar section summaries', () => {
     );
   });
 
+  it('renders room servers in their own section', () => {
+    const { roomName } = renderSidebar();
+
+    expect(screen.getByRole('button', { name: 'Room Servers' })).toBeInTheDocument();
+    expect(screen.getByText(roomName)).toBeInTheDocument();
+  });
+
   it('expands collapsed sections during search and restores collapse state after clearing search', async () => {
-    const { opsChannel, aliceName } = renderSidebar();
+    const { opsChannel, aliceName, roomName } = renderSidebar();
 
     fireEvent.click(screen.getByRole('button', { name: 'Tools' }));
     fireEvent.click(screen.getByRole('button', { name: 'Channels' }));
     fireEvent.click(screen.getByRole('button', { name: 'Contacts' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Room Servers' }));
 
     expect(screen.queryByText('Packet Feed')).not.toBeInTheDocument();
     expect(screen.queryByText(opsChannel.name)).not.toBeInTheDocument();
     expect(screen.queryByText(aliceName)).not.toBeInTheDocument();
+    expect(screen.queryByText(roomName)).not.toBeInTheDocument();
 
     const search = screen.getByLabelText('Search conversations');
     fireEvent.change(search, { target: { value: 'alice' } });
@@ -193,19 +212,22 @@ describe('Sidebar section summaries', () => {
       expect(screen.queryByText('Packet Feed')).not.toBeInTheDocument();
       expect(screen.queryByText(opsChannel.name)).not.toBeInTheDocument();
       expect(screen.queryByText(aliceName)).not.toBeInTheDocument();
+      expect(screen.queryByText(roomName)).not.toBeInTheDocument();
     });
   });
 
   it('persists collapsed section state across unmount and remount', () => {
-    const { opsChannel, aliceName, unmount } = renderSidebar();
+    const { opsChannel, aliceName, roomName, unmount } = renderSidebar();
 
     fireEvent.click(screen.getByRole('button', { name: 'Tools' }));
     fireEvent.click(screen.getByRole('button', { name: 'Channels' }));
     fireEvent.click(screen.getByRole('button', { name: 'Contacts' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Room Servers' }));
 
     expect(screen.queryByText('Packet Feed')).not.toBeInTheDocument();
     expect(screen.queryByText(opsChannel.name)).not.toBeInTheDocument();
     expect(screen.queryByText(aliceName)).not.toBeInTheDocument();
+    expect(screen.queryByText(roomName)).not.toBeInTheDocument();
 
     unmount();
     renderSidebar();
@@ -213,6 +235,7 @@ describe('Sidebar section summaries', () => {
     expect(screen.queryByText('Packet Feed')).not.toBeInTheDocument();
     expect(screen.queryByText(opsChannel.name)).not.toBeInTheDocument();
     expect(screen.queryByText(aliceName)).not.toBeInTheDocument();
+    expect(screen.queryByText(roomName)).not.toBeInTheDocument();
   });
 
   it('renders same-name channels when keys differ and allows selecting both', () => {
@@ -289,6 +312,12 @@ describe('Sidebar section summaries', () => {
     const alphaChannel = makeChannel('CC'.repeat(16), '#alpha');
     const zed = makeContact('11'.repeat(32), 'Zed', 1, { last_advert: 150 });
     const amy = makeContact('22'.repeat(32), 'Amy');
+    const zebraRoom = makeContact('55'.repeat(32), 'Zebra Room', CONTACT_TYPE_ROOM, {
+      last_seen: 100,
+    });
+    const alphaRoom = makeContact('66'.repeat(32), 'Alpha Room', CONTACT_TYPE_ROOM, {
+      last_advert: 300,
+    });
     const relayZulu = makeContact('33'.repeat(32), 'Zulu Relay', CONTACT_TYPE_REPEATER, {
       last_seen: 100,
     });
@@ -297,7 +326,7 @@ describe('Sidebar section summaries', () => {
     });
 
     const props = {
-      contacts: [zed, amy, relayZulu, relayAlpha],
+      contacts: [zed, amy, zebraRoom, alphaRoom, relayZulu, relayAlpha],
       channels: [publicChannel, zebraChannel, alphaChannel],
       activeConversation: null,
       onSelectConversation: vi.fn(),
@@ -306,6 +335,7 @@ describe('Sidebar section summaries', () => {
         [getStateKey('channel', zebraChannel.key)]: 300,
         [getStateKey('channel', alphaChannel.key)]: 100,
         [getStateKey('contact', zed.public_key)]: 200,
+        [getStateKey('contact', zebraRoom.public_key)]: 350,
       },
       unreadCounts: {},
       mentions: {},
@@ -328,18 +358,26 @@ describe('Sidebar section summaries', () => {
         .getAllByText(/Relay$/)
         .map((node) => node.textContent)
         .filter((text): text is string => Boolean(text));
+    const getRoomsOrder = () =>
+      screen
+        .getAllByText(/Room$/)
+        .map((node) => node.textContent)
+        .filter((text): text is string => Boolean(text));
 
     const { unmount } = render(<Sidebar {...props} />);
 
     expect(getChannelsOrder()).toEqual(['#zebra', '#alpha']);
     expect(getContactsOrder()).toEqual(['Zed', 'Amy']);
+    expect(getRoomsOrder()).toEqual(['Zebra Room', 'Alpha Room']);
     expect(getRepeatersOrder()).toEqual(['Alpha Relay', 'Zulu Relay']);
 
     fireEvent.click(screen.getByRole('button', { name: 'Sort Channels alphabetically' }));
     fireEvent.click(screen.getByRole('button', { name: 'Sort Contacts alphabetically' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Sort Room Servers alphabetically' }));
 
     expect(getChannelsOrder()).toEqual(['#alpha', '#zebra']);
     expect(getContactsOrder()).toEqual(['Amy', 'Zed']);
+    expect(getRoomsOrder()).toEqual(['Alpha Room', 'Zebra Room']);
     expect(getRepeatersOrder()).toEqual(['Alpha Relay', 'Zulu Relay']);
 
     unmount();
@@ -347,9 +385,49 @@ describe('Sidebar section summaries', () => {
 
     expect(getChannelsOrder()).toEqual(['#alpha', '#zebra']);
     expect(getContactsOrder()).toEqual(['Amy', 'Zed']);
+    expect(getRoomsOrder()).toEqual(['Alpha Room', 'Zebra Room']);
     expect(getRepeatersOrder()).toEqual(['Alpha Relay', 'Zulu Relay']);
   });
 
+  it('sorts room servers like contacts by DM recency first, then advert recency', () => {
+    const publicChannel = makeChannel(PUBLIC_CHANNEL_KEY, 'Public');
+    const dmRecentRoom = makeContact('77'.repeat(32), 'DM Recent Room', CONTACT_TYPE_ROOM, {
+      last_advert: 100,
+    });
+    const advertOnlyRoom = makeContact('88'.repeat(32), 'Advert Only Room', CONTACT_TYPE_ROOM, {
+      last_seen: 300,
+    });
+    const noRecencyRoom = makeContact('99'.repeat(32), 'No Recency Room', CONTACT_TYPE_ROOM);
+
+    render(
+      <Sidebar
+        contacts={[noRecencyRoom, advertOnlyRoom, dmRecentRoom]}
+        channels={[publicChannel]}
+        activeConversation={null}
+        onSelectConversation={vi.fn()}
+        onNewMessage={vi.fn()}
+        lastMessageTimes={{
+          [getStateKey('contact', dmRecentRoom.public_key)]: 400,
+        }}
+        unreadCounts={{}}
+        mentions={{}}
+        showCracker={false}
+        crackerRunning={false}
+        onToggleCracker={vi.fn()}
+        onMarkAllRead={vi.fn()}
+        favorites={[]}
+        legacySortOrder="recent"
+      />
+    );
+
+    const roomRows = screen
+      .getAllByText(/Room$/)
+      .map((node) => node.textContent)
+      .filter((text): text is string => Boolean(text));
+
+    expect(roomRows).toEqual(['DM Recent Room', 'Advert Only Room', 'No Recency Room']);
+  });
+
   it('sorts contacts by DM recency first, then advert recency, then no-recency at the bottom', () => {
     const publicChannel = makeChannel(PUBLIC_CHANNEL_KEY, 'Public');
     const dmRecent = makeContact('11'.repeat(32), 'DM Recent', 1, { last_advert: 100 });

frontend/src/types.ts

@@ -352,6 +352,7 @@ export interface MigratePreferencesResponse {
 
 /** Contact type constants */
 export const CONTACT_TYPE_REPEATER = 2;
+export const CONTACT_TYPE_ROOM = 3;
 
 export interface NeighborInfo {
   pubkey_prefix: string;

frontend/src/utils/contactAvatar.ts

@@ -3,18 +3,24 @@
  *
  * Uses the contact's public key to generate a consistent background color,
  * and extracts initials or emoji from the name for display.
- * Repeaters (type=2) always show 🛜 with a gray background.
+ * Repeaters (type=2) and room servers (type=3) always show a fixed glyph.
  */
 
-import { CONTACT_TYPE_REPEATER } from '../types';
+import { CONTACT_TYPE_REPEATER, CONTACT_TYPE_ROOM } from '../types';
 
-// Repeater avatar styling
+// Fixed contact-type avatar styling
 const REPEATER_AVATAR = {
   text: '🛜',
   background: '#444444',
   textColor: '#ffffff',
 };
 
+const ROOM_AVATAR = {
+  text: '🛖',
+  background: '#6b4f2a',
+  textColor: '#ffffff',
+};
+
 // DJB2 hash function for strings
 export function hashString(str: string): number {
   let hash = 0;
@@ -103,7 +109,7 @@ function getAvatarColor(publicKey: string): {
 
 /**
  * Get all avatar properties for a contact.
- * Repeaters (type=2) always get a special gray avatar with 🛜.
+ * Repeaters and room servers always get a special fixed avatar.
  */
 export function getContactAvatar(
   name: string | null,
@@ -114,10 +120,12 @@ export function getContactAvatar(
   background: string;
   textColor: string;
 } {
-  // Repeaters always get the repeater avatar
   if (contactType === CONTACT_TYPE_REPEATER) {
     return REPEATER_AVATAR;
   }
+  if (contactType === CONTACT_TYPE_ROOM) {
+    return ROOM_AVATAR;
+  }
 
   const text = getAvatarText(name, publicKey);
   const colors = getAvatarColor(publicKey);

frontend/src/utils/conversationState.ts

@@ -15,7 +15,7 @@ const SIDEBAR_SECTION_SORT_ORDERS_KEY = 'remoteterm-sidebar-section-sort-orders'
 
 export type ConversationTimes = Record<string, number>;
 export type SortOrder = 'recent' | 'alpha';
-export type SidebarSortableSection = 'favorites' | 'channels' | 'contacts' | 'repeaters';
+export type SidebarSortableSection = 'favorites' | 'channels' | 'contacts' | 'rooms' | 'repeaters';
 export type SidebarSectionSortOrders = Record<SidebarSortableSection, SortOrder>;
 
 // In-memory cache of last message times (loaded from server on init)
@@ -116,6 +116,7 @@ export function buildSidebarSectionSortOrders(
     favorites: defaultOrder,
     channels: defaultOrder,
     contacts: defaultOrder,
+    rooms: defaultOrder,
     repeaters: defaultOrder,
   };
 }
@@ -133,6 +134,7 @@ export function loadLocalStorageSidebarSectionSortOrders(): SidebarSectionSortOr
       favorites: parsed.favorites === 'alpha' ? 'alpha' : 'recent',
       channels: parsed.channels === 'alpha' ? 'alpha' : 'recent',
       contacts: parsed.contacts === 'alpha' ? 'alpha' : 'recent',
+      rooms: parsed.rooms === 'alpha' ? 'alpha' : 'recent',
       repeaters: parsed.repeaters === 'alpha' ? 'alpha' : 'recent',
     };
   } catch {