Add a Files section to room info listing all sent attachments (#33)

Lists files and images actually attached to sent messages in a room,
newest first, with click-through to a lightbox, preview modal, or direct
download depending on type. Queries through messages.image_id/file_id
so an upload that was never sent doesn't show up as a phantom entry.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/api/rooms.ts

@@ -4,6 +4,7 @@ import type {
   MessageFileInfo,
   MyRoomItem,
   Room,
+  RoomAttachment,
   RoomListItem,
   RoomMember,
   RoomRole,
@@ -54,6 +55,10 @@ export function listRoomMembers(roomId: string): Promise<RoomMember[]> {
   return apiFetch<RoomMember[]>(`/api/rooms/${roomId}/members`)
 }
 
+export function listRoomAttachments(roomId: string): Promise<RoomAttachment[]> {
+  return apiFetch<RoomAttachment[]>(`/api/rooms/${roomId}/attachments`)
+}
+
 export function addRoomMember(roomId: string, userId: string): Promise<RoomMember> {
   return apiFetch<RoomMember>(`/api/rooms/${roomId}/members`, {
     method: 'POST',

frontend/src/components/Composer.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } fro
 import { useOnlineStatus } from '../hooks/useOnlineStatus'
 import { uploadRoomFile, uploadRoomImage } from '../api/rooms'
 import { getUploadLimit } from '../api/uploads'
+import { formatFileSize } from '../lib/fileSize'
 import { EmojiPicker } from './EmojiPicker'
 import './Composer.css'
 
@@ -12,11 +13,6 @@ interface ComposerProps {
   onSend: (content: string, imageId?: string, fileId?: string) => void
 }
 
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
 
 export function Composer({ roomId, roomName, disabled, onSend }: ComposerProps) {
   const [value, setValue] = useState('')

frontend/src/components/MessageList.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { getRoomFileUrl, getRoomImageUrl } from '../api/rooms'
 import { useAuth } from '../context/AuthContext'
+import { formatFileSize } from '../lib/fileSize'
 import { avatarUrlFor, displayNameFor, senderColorIndex, statusFor } from '../lib/messageGrouping'
 import type { ChatMessageEnvelope, Message, MessageFileInfo, RoomMember } from '../types'
 import { EMOJI_PICKER_MAX_HEIGHT, EmojiPicker } from './EmojiPicker'
@@ -10,13 +11,7 @@ import { MessageContent } from './MessageContent'
 import { UserAvatar } from './UserAvatar'
 import './MessageList.css'
 
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
-function FileAttachmentIcon() {
+export function FileAttachmentIcon() {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
       <path

frontend/src/components/RoomInfoPanel.css

@@ -347,3 +347,58 @@
   opacity: 0.4;
   cursor: not-allowed;
 }
+
+.room-info-files {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: var(--sp-2);
+}
+
+.room-info-files-empty {
+  font-size: 0.78rem;
+  color: var(--ds-muted);
+}
+
+.room-info-file-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--ds-surface-2);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 7px 10px;
+  color: var(--ds-text);
+  text-decoration: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.room-info-file-row:hover {
+  border-color: var(--ds-accent);
+}
+
+.room-info-file-row svg {
+  flex: none;
+  color: var(--ds-muted);
+}
+
+.room-info-file-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.room-info-file-name {
+  font-size: 0.82rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.room-info-file-meta {
+  font-size: 0.7rem;
+  color: var(--ds-muted);
+  font-family: var(--mono);
+}

frontend/src/components/RoomInfoPanel.tsx

@@ -5,7 +5,10 @@ import {
   addRoomMember,
   changeMemberRole,
   deleteRoom,
+  getRoomFileUrl,
+  getRoomImageUrl,
   leaveRoom,
+  listRoomAttachments,
   removeMember,
   transferOwnership,
   updateRoom,
@@ -21,15 +24,21 @@ import {
 import { useAuth } from '../context/AuthContext'
 import { useResizableWidth } from '../hooks/useResizableWidth'
 import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth'
+import { formatFileSize } from '../lib/fileSize'
 import type {
   EventSubscription,
   EventType,
+  MessageFileInfo,
   MyRoomItem,
+  RoomAttachment,
   RoomMember,
   RoomRole,
   UserDirectoryEntry,
   WebhookIncoming,
 } from '../types'
+import { FilePreviewModal, getPreviewKind } from './FilePreviewModal'
+import { ImageLightbox } from './ImageLightbox'
+import { FileAttachmentIcon } from './MessageList'
 import { RoomAvatar } from './RoomAvatar'
 import { UserAvatar } from './UserAvatar'
 import { UserPicker } from './UserPicker'
@@ -70,6 +79,11 @@ export function RoomInfoPanel({
   const [inviteError, setInviteError] = useState<string | null>(null)
   const [directoryUsers, setDirectoryUsers] = useState<UserDirectoryEntry[]>([])
   const [busyUserId, setBusyUserId] = useState<string | null>(null)
+  const [filesOpen, setFilesOpen] = useState(false)
+  const [attachments, setAttachments] = useState<RoomAttachment[]>([])
+  const [attachmentsError, setAttachmentsError] = useState<string | null>(null)
+  const [previewFile, setPreviewFile] = useState<MessageFileInfo | null>(null)
+  const [lightboxSrc, setLightboxSrc] = useState<string | null>(null)
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [nameDraft, setNameDraft] = useState(room.name)
   const [descDraft, setDescDraft] = useState(room.description ?? '')
@@ -100,6 +114,18 @@ export function RoomInfoPanel({
     }
   }, [room.id, room.name, room.description, canManage])
 
+  useEffect(() => {
+    // Fetched lazily (only once expanded), not alongside the section above
+    // -- unlike webhooks/directory this is visible to every member, not
+    // just admins, so eagerly fetching on every room open would add a
+    // request most opens never need.
+    if (!filesOpen) return
+    setAttachmentsError(null)
+    listRoomAttachments(room.id)
+      .then(setAttachments)
+      .catch((err) => setAttachmentsError(err instanceof ApiError ? err.message : String(err)))
+  }, [filesOpen, room.id])
+
   async function handleAddMember(target: UserDirectoryEntry) {
     setInviteError(null)
     try {
@@ -292,6 +318,76 @@ export function RoomInfoPanel({
         })}
       </div>
 
+      <div className="room-info-section">
+        <button type="button" className="room-info-settings-toggle" onClick={() => setFilesOpen((v) => !v)}>
+          Files {filesOpen ? '−' : '+'}
+        </button>
+        {filesOpen && (
+          <div className="room-info-files">
+            {attachmentsError && <p className="room-info-error">{attachmentsError}</p>}
+            {!attachmentsError && attachments.length === 0 && (
+              <p className="room-info-files-empty">No files or images yet.</p>
+            )}
+            {attachments.map((a) => {
+              const label = a.filename ?? 'Image'
+              const meta = `${formatFileSize(a.size_bytes)} · ${a.uploaded_by}`
+              const inner = (
+                <>
+                  <FileAttachmentIcon />
+                  <span className="room-info-file-info">
+                    <span className="room-info-file-name">{label}</span>
+                    <span className="room-info-file-meta">{meta}</span>
+                  </span>
+                </>
+              )
+              const key = `${a.kind}-${a.id}`
+
+              if (a.kind === 'image') {
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    className="room-info-file-row"
+                    onClick={() => setLightboxSrc(getRoomImageUrl(room.id, a.id))}
+                  >
+                    {inner}
+                  </button>
+                )
+              }
+              if (getPreviewKind(a.filename ?? '')) {
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    className="room-info-file-row"
+                    onClick={() =>
+                      setPreviewFile({
+                        id: a.id,
+                        filename: a.filename ?? label,
+                        size_bytes: a.size_bytes,
+                        content_type: a.content_type,
+                      })
+                    }
+                  >
+                    {inner}
+                  </button>
+                )
+              }
+              return (
+                <a
+                  key={key}
+                  href={getRoomFileUrl(room.id, a.id)}
+                  download={a.filename ?? undefined}
+                  className="room-info-file-row"
+                >
+                  {inner}
+                </a>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
       {canManage && (
         <div className="room-info-section">
           <div className="room-info-label">Add someone</div>
@@ -444,6 +540,16 @@ export function RoomInfoPanel({
       >
         Leave room
       </button>
+
+      {lightboxSrc && <ImageLightbox src={lightboxSrc} onClose={() => setLightboxSrc(null)} />}
+      {previewFile && (
+        <FilePreviewModal
+          roomId={room.id}
+          file={previewFile}
+          kind={getPreviewKind(previewFile.filename) ?? 'text'}
+          onClose={() => setPreviewFile(null)}
+        />
+      )}
     </aside>
   )
 }

frontend/src/lib/fileSize.ts

@@ -0,0 +1,5 @@
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}

frontend/src/types.ts

@@ -49,6 +49,17 @@ export interface RoomMember {
   status: 'online' | 'offline'
 }
 
+export interface RoomAttachment {
+  id: string
+  kind: 'file' | 'image'
+  filename: string | null
+  content_type: string
+  size_bytes: number
+  uploaded_by: string
+  message_id: string
+  created_at: string
+}
+
 export type InviteStatus = 'pending' | 'accepted' | 'revoked'
 
 export interface ReactionSummary {