Phase 7: Bot/extension system

Bot accounts (User rows with is_bot=True), scoped API tokens (read:messages,
write:messages, manage:rooms) authenticated via Authorization: Bearer on both
REST and the WS handshake, live bot WebSocket access on the same /ws/chat
endpoint humans use, message editing (WS "edit" envelope -> message_update
broadcast, fans out cross-instance for free via the existing broadcaster),
incoming webhooks (room-scoped, no auth beyond the URL token), and outgoing
webhooks/event subscriptions (HMAC-SHA256 signed, backgrounded delivery,
creation-time SSRF validation against private/loopback/link-local targets).

Token auth is additive, not a parallel system: a bearer-token-authenticated
bot goes through the exact same room-membership/role checks a session-
authenticated human does everywhere; only read:messages/write:messages are
separately scope-gated (the two message endpoints). manage:rooms scope
enforcement, full per-delivery SSRF re-validation, and bot API rate limiting
were explicitly scoped out (confirmed with the repo owner) as disproportionate
to this phase -- documented as known gaps in backend/README.md rather than
silently skipped.

Admin portal gains a Bots tab (create bots, issue/revoke scoped tokens,
cross-room webhook visibility); RoomInfoPanel gains room-scoped webhook/
subscription management, mirroring how invites already work there. The chat
UI also gets a minimal "edit your own message" affordance -- not asked for
by the issue, but the only practical way to exercise the edit pipeline by
hand instead of only via a scripted bot client.

Along the way: fixed a real bug caught while writing the incoming-webhook
test -- offline-push notification relied on the sender being "connected" to
exclude themselves, true for WS-originated messages but not for the new
webhook path, which has no WS connection for the attributed sender at all.
Now explicitly excluded. Also discovered the REST-only test fixture never
triggered ASGI lifespan, so app.state.broadcaster/presence didn't exist for
it; moved their construction out of the lifespan into create_app() itself
(Redis client construction is synchronous/lazy) so both the WS and
REST-only paths always have them.

New tests/test_bots.py, test_message_edit.py, test_webhooks.py (full suite
now 78/78, stable across repeated runs) plus a scripted end-to-end smoke
test (bot WS join/post/edit, incoming webhook, SSRF rejection, outgoing
delivery) and a full browser walkthrough of the new admin/room UI.

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

frontend/src/components/ChatPane.tsx

@@ -43,6 +43,17 @@ export function ChatPane({ room, members, isMobile, onBack, onToggleInfo, infoOp
   const onMessage = useCallback((envelope: ServerEnvelope) => {
     if (envelope.type === 'message') {
       setLive((prev) => [...prev, envelope])
+    } else if (envelope.type === 'message_update') {
+      setHistory((prev) =>
+        prev.map((m) =>
+          m.id === envelope.id ? { ...m, content: envelope.content, edited_at: envelope.edited_at } : m,
+        ),
+      )
+      setLive((prev) =>
+        prev.map((m) =>
+          m.id === envelope.id ? { ...m, content: envelope.content, edited_at: envelope.edited_at } : m,
+        ),
+      )
     } else if (envelope.type === 'error') {
       setWsError(envelope.detail)
     }
@@ -50,7 +61,7 @@ export function ChatPane({ room, members, isMobile, onBack, onToggleInfo, infoOp
 
   const onUnauthenticated = useCallback(() => navigate('/login'), [navigate])
 
-  const { connected, send } = useChatSocket({ roomId: room.id, onMessage, onUnauthenticated })
+  const { connected, send, sendEdit } = useChatSocket({ roomId: room.id, onMessage, onUnauthenticated })
 
   return (
     <section className="chat-pane">
@@ -88,7 +99,7 @@ export function ChatPane({ room, members, isMobile, onBack, onToggleInfo, infoOp
         </p>
       )}
 
-      <MessageList messages={[...history, ...live]} members={members} />
+      <MessageList messages={[...history, ...live]} members={members} onEdit={sendEdit} />
       <Composer roomName={room.name} disabled={!connected} onSend={send} />
     </section>
   )

frontend/src/components/MessageList.css

@@ -42,6 +42,7 @@
 }
 
 .message-bubble {
+  position: relative;
   background: var(--ds-surface-2);
   color: var(--ds-text);
   padding: 8px 12px;
@@ -56,9 +57,45 @@
   background: var(--ds-accent-2);
 }
 
+.message-edit-link {
+  display: none;
+  position: absolute;
+  top: -18px;
+  right: 0;
+  background: transparent;
+  border: none;
+  color: var(--ds-muted);
+  font-size: 0.68rem;
+  cursor: pointer;
+  padding: 2px 4px;
+}
+
+.message-edit-link:hover {
+  color: var(--ds-text);
+}
+
+.message-bubble:hover .message-edit-link {
+  display: inline;
+}
+
+.message-edit-input {
+  background: var(--ds-surface-2);
+  border: 1px solid var(--ds-accent);
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: 0.88rem;
+  color: var(--ds-text);
+  font-family: var(--sans);
+  width: 100%;
+}
+
 .message-time {
   font-size: 0.68rem;
   color: var(--ds-muted);
   margin-top: 3px;
   font-family: var(--mono);
 }
+
+.message-edited {
+  font-style: italic;
+}

frontend/src/components/MessageList.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useAuth } from '../context/AuthContext'
 import { senderColorIndex } from '../lib/messageGrouping'
 import type { ChatMessageEnvelope, Message, RoomMember } from '../types'
@@ -8,16 +8,30 @@ import './MessageList.css'
 interface MessageListProps {
   messages: (Message | ChatMessageEnvelope)[]
   members: RoomMember[]
+  onEdit: (messageId: string, content: string) => void
 }
 
-export function MessageList({ messages, members }: MessageListProps) {
+export function MessageList({ messages, members, onEdit }: MessageListProps) {
   const { user } = useAuth()
   const bottomRef = useRef<HTMLDivElement>(null)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [draft, setDraft] = useState('')
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ block: 'end' })
   }, [messages.length])
 
+  function startEdit(msg: Message | ChatMessageEnvelope) {
+    setEditingId(msg.id)
+    setDraft(msg.content)
+  }
+
+  function commitEdit(messageId: string) {
+    const trimmed = draft.trim()
+    if (trimmed) onEdit(messageId, trimmed)
+    setEditingId(null)
+  }
+
   return (
     <div className="message-list">
       {messages.map((msg, i) => {
@@ -25,6 +39,7 @@ export function MessageList({ messages, members }: MessageListProps) {
         const prev = messages[i - 1]
         const showAvatar = !mine && (!prev || prev.user_id !== msg.user_id)
         const showName = showAvatar
+        const editing = editingId === msg.id
 
         return (
           <div key={msg.id} className={`message-row${mine ? ' message-row-mine' : ''}`}>
@@ -37,9 +52,36 @@ export function MessageList({ messages, members }: MessageListProps) {
             )}
             <div className="message-bubble-wrap">
               {showName && <div className="message-author">{msg.username}</div>}
-              <div className={`message-bubble${mine ? ' message-bubble-mine' : ''}`}>{msg.content}</div>
+              {editing ? (
+                <input
+                  autoFocus
+                  className="message-edit-input"
+                  value={draft}
+                  onChange={(e) => setDraft(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') commitEdit(msg.id)
+                    if (e.key === 'Escape') setEditingId(null)
+                  }}
+                  onBlur={() => commitEdit(msg.id)}
+                />
+              ) : (
+                <div className={`message-bubble${mine ? ' message-bubble-mine' : ''}`}>
+                  {msg.content}
+                  {mine && (
+                    <button
+                      type="button"
+                      className="message-edit-link"
+                      onClick={() => startEdit(msg)}
+                      aria-label="Edit message"
+                    >
+                      Edit
+                    </button>
+                  )}
+                </div>
+              )}
               <div className="message-time">
                 {new Date(msg.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+                {msg.edited_at && <span className="message-edited"> (edited)</span>}
               </div>
             </div>
           </div>

frontend/src/components/RoomInfoPanel.css

@@ -206,6 +206,90 @@
   resize: vertical;
 }
 
+.room-info-integrations {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+  margin-top: var(--sp-2);
+}
+
+.room-info-integration-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.room-info-webhook-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  font-size: 0.78rem;
+}
+
+.room-info-webhook-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.room-info-webhook-info code {
+  background: var(--ds-surface-2);
+  padding: 3px 6px;
+  border-radius: 6px;
+  font-size: 0.72rem;
+  word-break: break-all;
+}
+
+.room-info-webhook-desc {
+  color: var(--ds-muted);
+  font-size: 0.74rem;
+}
+
+.room-info-subscription-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.room-info-subscription-form input {
+  background: var(--ds-surface-2);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 7px 10px;
+  color: var(--ds-text);
+  font-size: 0.82rem;
+}
+
+.room-info-event-types {
+  display: flex;
+  gap: var(--sp-3);
+  flex-wrap: wrap;
+}
+
+.room-info-event-type-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.74rem;
+  font-family: var(--mono);
+  color: var(--ds-muted);
+}
+
+.room-info-signing-secret {
+  font-size: 0.76rem;
+  color: var(--ds-accent);
+  margin: 0;
+}
+
+.room-info-signing-secret code {
+  background: var(--ds-surface-2);
+  padding: 3px 6px;
+  border-radius: 6px;
+  word-break: break-all;
+}
+
 .room-info-danger-link {
   background: transparent;
   border: none;

frontend/src/components/RoomInfoPanel.tsx

@@ -9,12 +9,30 @@ import {
   transferOwnership,
   updateRoom,
 } from '../api/rooms'
+import {
+  createEventSubscription,
+  createIncomingWebhook,
+  listEventSubscriptions,
+  listIncomingWebhooks,
+  revokeEventSubscription,
+  revokeIncomingWebhook,
+} from '../api/webhooks'
 import { useAuth } from '../context/AuthContext'
-import type { Invite, MyRoomItem, RoomMember, RoomRole } from '../types'
+import type {
+  EventSubscription,
+  EventType,
+  Invite,
+  MyRoomItem,
+  RoomMember,
+  RoomRole,
+  WebhookIncoming,
+} from '../types'
 import { RoomAvatar } from './RoomAvatar'
 import { UserAvatar } from './UserAvatar'
 import './RoomInfoPanel.css'
 
+const EVENT_TYPES: EventType[] = ['message.created', 'message.updated']
+
 interface RoomInfoPanelProps {
   room: MyRoomItem
   members: RoomMember[]
@@ -46,6 +64,15 @@ export function RoomInfoPanel({
   const [descDraft, setDescDraft] = useState(room.description ?? '')
   const [roomError, setRoomError] = useState<string | null>(null)
 
+  const [integrationsOpen, setIntegrationsOpen] = useState(false)
+  const [incomingWebhooks, setIncomingWebhooks] = useState<WebhookIncoming[]>([])
+  const [webhookDescription, setWebhookDescription] = useState('')
+  const [eventSubscriptions, setEventSubscriptions] = useState<EventSubscription[]>([])
+  const [targetUrl, setTargetUrl] = useState('')
+  const [selectedEventTypes, setSelectedEventTypes] = useState<EventType[]>([])
+  const [newSigningSecret, setNewSigningSecret] = useState<string | null>(null)
+  const [integrationsError, setIntegrationsError] = useState<string | null>(null)
+
   const canManage = myRole === 'admin' || myRole === 'owner'
 
   useEffect(() => {
@@ -53,8 +80,12 @@ export function RoomInfoPanel({
     setDescDraft(room.description ?? '')
     if (canManage) {
       listRoomInvites(room.id).then(setPendingInvites).catch(() => setPendingInvites([]))
+      listIncomingWebhooks(room.id).then(setIncomingWebhooks).catch(() => setIncomingWebhooks([]))
+      listEventSubscriptions(room.id).then(setEventSubscriptions).catch(() => setEventSubscriptions([]))
     } else {
       setPendingInvites([])
+      setIncomingWebhooks([])
+      setEventSubscriptions([])
     }
   }, [room.id, room.name, room.description, canManage])
 
@@ -77,6 +108,50 @@ export function RoomInfoPanel({
     setPendingInvites(await listRoomInvites(room.id))
   }
 
+  async function handleCreateWebhook(e: FormEvent) {
+    e.preventDefault()
+    setIntegrationsError(null)
+    try {
+      await createIncomingWebhook(room.id, webhookDescription.trim())
+      setWebhookDescription('')
+      setIncomingWebhooks(await listIncomingWebhooks(room.id))
+    } catch (err) {
+      setIntegrationsError(err instanceof ApiError ? err.message : String(err))
+    }
+  }
+
+  async function handleRevokeWebhook(webhookId: string) {
+    await revokeIncomingWebhook(room.id, webhookId)
+    setIncomingWebhooks(await listIncomingWebhooks(room.id))
+  }
+
+  function toggleEventType(eventType: EventType) {
+    setSelectedEventTypes((prev) =>
+      prev.includes(eventType) ? prev.filter((t) => t !== eventType) : [...prev, eventType],
+    )
+  }
+
+  async function handleCreateSubscription(e: FormEvent) {
+    e.preventDefault()
+    setIntegrationsError(null)
+    const url = targetUrl.trim()
+    if (!url || selectedEventTypes.length === 0) return
+    try {
+      const created = await createEventSubscription(room.id, selectedEventTypes, url)
+      setNewSigningSecret(created.signing_secret)
+      setTargetUrl('')
+      setSelectedEventTypes([])
+      setEventSubscriptions(await listEventSubscriptions(room.id))
+    } catch (err) {
+      setIntegrationsError(err instanceof ApiError ? err.message : String(err))
+    }
+  }
+
+  async function handleRevokeSubscription(subscriptionId: string) {
+    await revokeEventSubscription(room.id, subscriptionId)
+    setEventSubscriptions(await listEventSubscriptions(room.id))
+  }
+
   async function handleRemove(userId: string) {
     setBusyUserId(userId)
     try {
@@ -252,6 +327,105 @@ export function RoomInfoPanel({
         </div>
       )}
 
+      {canManage && (
+        <div className="room-info-section">
+          <button
+            type="button"
+            className="room-info-settings-toggle"
+            onClick={() => setIntegrationsOpen((v) => !v)}
+          >
+            Integrations {integrationsOpen ? '−' : '+'}
+          </button>
+          {integrationsOpen && (
+            <div className="room-info-integrations">
+              {integrationsError && <p className="room-info-error">{integrationsError}</p>}
+
+              <div className="room-info-integration-group">
+                <div className="room-info-label">Incoming webhooks</div>
+                {incomingWebhooks.map((w) => (
+                  <div key={w.id} className="room-info-webhook-row">
+                    <div className="room-info-webhook-info">
+                      <code>{`${window.location.origin}/api/webhooks/incoming/${w.token}`}</code>
+                      {w.description && <span className="room-info-webhook-desc">{w.description}</span>}
+                    </div>
+                    <button
+                      type="button"
+                      className="room-info-danger-link"
+                      onClick={() => handleRevokeWebhook(w.id)}
+                    >
+                      Revoke
+                    </button>
+                  </div>
+                ))}
+                <form className="room-info-invite-form" onSubmit={handleCreateWebhook}>
+                  <input
+                    type="text"
+                    placeholder="Description (optional)"
+                    value={webhookDescription}
+                    onChange={(e) => setWebhookDescription(e.target.value)}
+                  />
+                  <button type="submit" className="btn-secondary">
+                    Add
+                  </button>
+                </form>
+              </div>
+
+              <div className="room-info-integration-group">
+                <div className="room-info-label">Outgoing event subscriptions</div>
+                {eventSubscriptions.map((s) => (
+                  <div key={s.id} className="room-info-webhook-row">
+                    <div className="room-info-webhook-info">
+                      <code>{s.target_url}</code>
+                      <span className="room-info-webhook-desc">{s.event_types.join(', ')}</span>
+                    </div>
+                    <button
+                      type="button"
+                      className="room-info-danger-link"
+                      onClick={() => handleRevokeSubscription(s.id)}
+                    >
+                      Revoke
+                    </button>
+                  </div>
+                ))}
+                <form className="room-info-subscription-form" onSubmit={handleCreateSubscription}>
+                  <input
+                    type="text"
+                    placeholder="https://example.com/hook"
+                    value={targetUrl}
+                    onChange={(e) => setTargetUrl(e.target.value)}
+                  />
+                  <div className="room-info-event-types">
+                    {EVENT_TYPES.map((eventType) => (
+                      <label key={eventType} className="room-info-event-type-checkbox">
+                        <input
+                          type="checkbox"
+                          checked={selectedEventTypes.includes(eventType)}
+                          onChange={() => toggleEventType(eventType)}
+                        />
+                        {eventType}
+                      </label>
+                    ))}
+                  </div>
+                  <button
+                    type="submit"
+                    className="btn-secondary"
+                    disabled={!targetUrl.trim() || selectedEventTypes.length === 0}
+                  >
+                    Add
+                  </button>
+                </form>
+                {newSigningSecret && (
+                  <p className="room-info-signing-secret">
+                    New signing secret (copy it now, it won't be shown again):{' '}
+                    <code>{newSigningSecret}</code>
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
       {myRole === 'owner' && (
         <div className="room-info-section">
           <button