malice

public

Star0

Fork 0

Watch0

79 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `7ebc2472a9e3`

tarball

atagen <boss@atagen.co>2026-10-25 10:35 UTC

17 files changed+923-106

threads: open threads in a side pane with room foldouts

Thread replies were invisible, because macltok's live timeline hides threaded events and malice never rendered thread summaries or opened thread timelines. Roots now carry a reply chip and a reply-in-thread action, and the pane runs on macltok's thread timeline for paginating, sending, editing, reacting and threaded receipts. Each room in the channels pane can fold out its threads, newest activity first. Pins go in dev.malice.pinned_threads account data so they follow the account, and the room search box matches thread text. Until macltok ships its per-room thread list, the foldout only knows threads whose roots are in loaded history.

Modified file: crates/malice-core/src/feed.rs+54 additions−1 deletions@@ -15,6 +15,7 @@ pub enum WireEvent {
         rooms: Vec<RoomSummary>,
         timelines: HashMap<String, Vector<TimelineItem>>,
         pinned: HashMap<String, Vector<TimelineItem>>,
+        threads: Vec<ThreadItems>,
         connection: String,
         encryption: Option<EncryptionState>,
         verification: Option<VerificationState>,
@@ -50,6 +51,15 @@ pub enum WireEvent {
     PinnedClosed {
         room_id: String,
     },
+    Thread {
+        room_id: String,
+        root_event_id: String,
+        items: Vector<TimelineItem>,
+    },
+    ThreadClosed {
+        room_id: String,
+        root_event_id: String,
+    },
     Connection {
         state: String,
     },
@@ -70,6 +80,13 @@ pub enum WireEvent {
     },
 }
 
+#[derive(Debug, Clone, Serialize)]
+pub struct ThreadItems {
+    pub room_id: String,
+    pub root_event_id: String,
+    pub items: Vector<TimelineItem>,
+}
+
 /// `macltok::Retain`'s wire form. macltok's own enum has no `rename_all`,
 /// so this exists to give it one.
 #[derive(Debug, Clone, Copy, Serialize)]
@@ -112,10 +129,26 @@ pub fn snapshot_event(state: &State) -> WireEvent {
             TimelineId::Room(_) | TimelineId::Thread { .. } => None,
         })
         .collect();
+    let threads = state
+        .timelines
+        .iter()
+        .filter_map(|(timeline_id, timeline)| match timeline_id {
+            TimelineId::Thread {
+                room_id,
+                root_event_id,
+            } => Some(ThreadItems {
+                room_id: room_id.as_str().to_owned(),
+                root_event_id: root_event_id.as_str().to_owned(),
+                items: timeline.items.clone(),
+            }),
+            TimelineId::Room(_) | TimelineId::Pinned(_) => None,
+        })
+        .collect();
     WireEvent::Snapshot {
         rooms: state.rooms.iter().cloned().collect(),
         timelines,
         pinned,
+        threads,
         connection: connection_label(&state.connection),
         encryption: state.encryption.clone(),
         verification: state.verification.clone(),
@@ -179,7 +212,27 @@ pub fn wire_events(change: &StateChange) -> Vec<WireEvent> {
             }],
             TimelineChange::Diverged => vec![],
         },
-        StateChange::Timeline { .. } => vec![],
+        StateChange::Timeline {
+            timeline_id:
+                TimelineId::Thread {
+                    room_id,
+                    root_event_id,
+                },
+            change,
+        } => match change {
+            TimelineChange::Reset { items } | TimelineChange::Changed { items, .. } => {
+                vec![WireEvent::Thread {
+                    room_id: room_id.as_str().to_owned(),
+                    root_event_id: root_event_id.as_str().to_owned(),
+                    items: items.clone(),
+                }]
+            }
+            TimelineChange::Closed => vec![WireEvent::ThreadClosed {
+                room_id: room_id.as_str().to_owned(),
+                root_event_id: root_event_id.as_str().to_owned(),
+            }],
+            TimelineChange::Diverged => vec![],
+        },
         StateChange::Connection(state) => vec![WireEvent::Connection {
             state: connection_label(state),
         }],

Modified file: crates/malice-core/src/request.rs+76 additions−18 deletions@@ -23,6 +23,17 @@ fn default_avatar_size() -> u32 {
     AVATAR_SIZE
 }
 
+fn timeline_for(room_id: &str, thread_root: Option<&str>) -> Result<TimelineId, CoreError> {
+    let room_id = parse_room_id(room_id)?;
+    Ok(match thread_root {
+        Some(root) => TimelineId::Thread {
+            room_id,
+            root_event_id: parse_event_id(root)?,
+        },
+        None => TimelineId::Room(room_id),
+    })
+}
+
 fn parse_keyword(raw: &str) -> Result<String, CoreError> {
     let keyword = raw.trim();
     if keyword.is_empty() || keyword.chars().count() > 128 {
@@ -62,6 +73,8 @@ pub enum Request {
         mentions: Vec<String>,
         #[serde(default)]
         kind: SendKind,
+        #[serde(default)]
+        thread_root: Option<String>,
     },
     Edit {
         #[serde(default)]
@@ -74,6 +87,8 @@ pub enum Request {
         formatted_body: Option<String>,
         #[serde(default)]
         mentions: Vec<String>,
+        #[serde(default)]
+        thread_root: Option<String>,
     },
     Upload {
         room_id: String,
@@ -93,6 +108,8 @@ pub enum Request {
     Paginate {
         #[serde(default)]
         room_id: String,
+        #[serde(default)]
+        thread_root: Option<String>,
     },
     StartRecentHistory {
         room_id: String,
@@ -172,12 +189,16 @@ pub enum Request {
         key: String,
         #[serde(default)]
         shortcode: Option<String>,
+        #[serde(default)]
+        thread_root: Option<String>,
     },
     Read {
         #[serde(default)]
         room_id: String,
         #[serde(default)]
         event_id: String,
+        #[serde(default)]
+        thread_root: Option<String>,
     },
     Profile,
     SpaceChildren {
@@ -267,6 +288,16 @@ pub enum Request {
         event_id: String,
         #[serde(default)]
         reason: Option<String>,
+        #[serde(default)]
+        thread_root: Option<String>,
+    },
+    OpenThread {
+        room_id: String,
+        root_event_id: String,
+    },
+    CloseThread {
+        room_id: String,
+        root_event_id: String,
     },
     SetFavourite {
         room_id: String,
@@ -504,8 +535,9 @@ pub async fn dispatch(
             reply_to,
             mentions,
             kind,
+            thread_root,
         } => {
-            let room_id = parse_room_id(&room_id)?;
+            let timeline = timeline_for(&room_id, thread_root.as_deref())?;
             if body.trim().is_empty() {
                 return Err(CoreError::bad_request("body must not be empty"));
             }
@@ -529,9 +561,7 @@ pub async fn dispatch(
                     mentions,
                 },
             };
-            handle
-                .send_message(TimelineId::Room(room_id), content)
-                .await?;
+            handle.send_message(timeline, content).await?;
             Ok(Reply::Done)
         }
         Request::Upload {
@@ -566,9 +596,13 @@ pub async fn dispatch(
             handle.upload(upload).await?;
             Ok(Reply::Done)
         }
-        Request::Paginate { room_id } => {
-            let room_id = parse_room_id(&room_id)?;
-            handle.paginate(TimelineId::Room(room_id), 30).await?;
+        Request::Paginate {
+            room_id,
+            thread_root,
+        } => {
+            handle
+                .paginate(timeline_for(&room_id, thread_root.as_deref())?, 30)
+                .await?;
             Ok(Reply::Done)
         }
         Request::StartRecentHistory { room_id } => {
@@ -689,8 +723,9 @@ pub async fn dispatch(
             event_id,
             key,
             shortcode,
+            thread_root,
         } => {
-            let room_id = parse_room_id(&room_id)?;
+            let timeline = timeline_for(&room_id, thread_root.as_deref())?;
             let event_id = parse_event_id(&event_id)?;
             let key = key.trim();
             if !valid_reaction_key(key) {
@@ -708,7 +743,7 @@ pub async fn dispatch(
                 }
             };
             handle
-                .toggle_reaction(TimelineId::Room(room_id), event_id, key, shortcode)
+                .toggle_reaction(timeline, event_id, key, shortcode)
                 .await?;
             Ok(Reply::Done)
         }
@@ -718,8 +753,9 @@ pub async fn dispatch(
             body,
             formatted_body,
             mentions,
+            thread_root,
         } => {
-            let room_id = parse_room_id(&room_id)?;
+            let timeline = timeline_for(&room_id, thread_root.as_deref())?;
             let event_id = parse_event_id(&event_id)?;
             if body.trim().is_empty() {
                 return Err(CoreError::bad_request("body must not be empty"));
@@ -734,16 +770,19 @@ pub async fn dispatch(
                 },
                 mentions: parse_mentions(&mentions)?,
             };
-            handle
-                .edit_message(TimelineId::Room(room_id), event_id, content)
-                .await?;
+            handle.edit_message(timeline, event_id, content).await?;
             Ok(Reply::Done)
         }
-        Request::Read { room_id, event_id } => {
-            let room_id = parse_room_id(&room_id)?;
-            let event_id = parse_event_id(&event_id)?;
+        Request::Read {
+            room_id,
+            event_id,
+            thread_root,
+        } => {
             handle
-                .mark_read(TimelineId::Room(room_id), event_id)
+                .mark_read(
+                    timeline_for(&room_id, thread_root.as_deref())?,
+                    parse_event_id(&event_id)?,
+                )
                 .await?;
             Ok(Reply::Done)
         }
@@ -967,16 +1006,35 @@ pub async fn dispatch(
             room_id,
             event_id,
             reason,
+            thread_root,
         } => {
             handle
                 .redact(
-                    TimelineId::Room(parse_room_id(&room_id)?),
+                    timeline_for(&room_id, thread_root.as_deref())?,
                     parse_event_id(&event_id)?,
                     reason_text(reason)?,
                 )
                 .await?;
             Ok(Reply::Done)
         }
+        Request::OpenThread {
+            room_id,
+            root_event_id,
+        } => {
+            handle
+                .open_thread(parse_room_id(&room_id)?, parse_event_id(&root_event_id)?)
+                .await?;
+            Ok(Reply::Done)
+        }
+        Request::CloseThread {
+            room_id,
+            root_event_id,
+        } => {
+            handle
+                .close_thread(parse_room_id(&room_id)?, parse_event_id(&root_event_id)?)
+                .await?;
+            Ok(Reply::Done)
+        }
         Request::SetFavourite { room_id, favourite } => {
             handle
                 .set_favourite(parse_room_id(&room_id)?, favourite)

Modified file: crates/malice-server/src/routes.rs+17 additions@@ -47,12 +47,16 @@ struct SendBody {
     mentions: Vec<String>,
     #[serde(default)]
     kind: SendKind,
+    #[serde(default)]
+    thread_root: Option<String>,
 }
 
 #[derive(Debug, Deserialize)]
 struct PaginateBody {
     #[serde(default)]
     room_id: String,
+    #[serde(default)]
+    thread_root: Option<String>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -101,6 +105,8 @@ struct ReactBody {
     key: String,
     #[serde(default)]
     shortcode: Option<String>,
+    #[serde(default)]
+    thread_root: Option<String>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -115,6 +121,8 @@ struct EditBody {
     formatted_body: Option<String>,
     #[serde(default)]
     mentions: Vec<String>,
+    #[serde(default)]
+    thread_root: Option<String>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -123,6 +131,8 @@ struct ReadBody {
     room_id: String,
     #[serde(default)]
     event_id: String,
+    #[serde(default)]
+    thread_root: Option<String>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -445,6 +455,7 @@ async fn rooms_send(
                 reply_to: body.0.reply_to,
                 mentions: body.0.mentions,
                 kind: body.0.kind,
+                thread_root: body.0.thread_root,
             },
         )
         .await,
@@ -576,6 +587,8 @@ async fn post_command(
             | Request::Invite { .. }
             | Request::Direct { .. }
             | Request::Redact { .. }
+            | Request::OpenThread { .. }
+            | Request::CloseThread { .. }
             | Request::SetFavourite { .. }
             | Request::ReorderSpaces { .. }
             | Request::SetRoomDisplayName { .. }
@@ -692,6 +705,7 @@ async fn rooms_paginate(
             &user.mirror,
             Request::Paginate {
                 room_id: body.0.room_id,
+                thread_root: body.0.thread_root,
             },
         )
         .await,
@@ -849,6 +863,7 @@ async fn rooms_edit(
                 body: body.0.body,
                 formatted_body: body.0.formatted_body,
                 mentions: body.0.mentions,
+                thread_root: body.0.thread_root,
             },
         )
         .await,
@@ -873,6 +888,7 @@ async fn rooms_react(
                 event_id: body.0.event_id,
                 key: body.0.key,
                 shortcode: body.0.shortcode,
+                thread_root: body.0.thread_root,
             },
         )
         .await,
@@ -895,6 +911,7 @@ async fn rooms_read(
             Request::Read {
                 room_id: body.0.room_id,
                 event_id: body.0.event_id,
+                thread_root: body.0.thread_root,
             },
         )
         .await,

Modified file: web/src/App.svelte+155 additions−53 deletions@@ -6,6 +6,10 @@
   import MentionsInbox from './lib/MentionsInbox.svelte';
   import MxcAvatar from './lib/MxcAvatar.svelte';
   import PinButton from './lib/PinButton.svelte';
+  import ThreadPane from './lib/ThreadPane.svelte';
+  import RoomThreads from './lib/RoomThreads.svelte';
+  import { loadPinnedThreads, openThread, showThread, threadsByRoom } from './lib/threads';
+  import { threadMatches } from './lib/thread-index';
   import ContextMenu, { type MenuItem } from './lib/ContextMenu.svelte';
   import StickerPicker from './lib/StickerPicker.svelte';
   import PackManager from './lib/PackManager.svelte';
@@ -100,13 +104,15 @@
   import {
     MEMBERS_WIDTH,
     SIDE_WIDTH,
+    THREAD_WIDTH,
     lastSpaceRooms,
     lineHeight,
     membersWidth,
     messageSpacing,
     navFolded,
     railFolded,
-    sideWidth
+    sideWidth,
+    threadWidth
   } from './lib/appearance';
   import SettingsPanel from './lib/SettingsPanel.svelte';
   import { packsForRoom, parseEncryptionState, parseOwnProfile, parseVerificationState, contentPreview, senderLabel } from './lib/types';
@@ -194,6 +200,7 @@
     if (online && !wasOnline) {
       void loadQuickReactions();
       void loadKeywords();
+      void loadPinnedThreads();
       void loadPackPreferences();
       void loadUrlPreviewSettings();
     }
@@ -224,7 +231,9 @@
   $: visibleRooms = query
     ? baseRooms.filter(
         (r) =>
-          r.name.toLowerCase().includes(query) || r.room_id.toLowerCase().includes(query)
+          r.name.toLowerCase().includes(query) ||
+          r.room_id.toLowerCase().includes(query) ||
+          ($threadsByRoom[r.room_id] ?? []).some((t) => threadMatches(t, query))
       )
     : baseRooms;
   $: directRooms = pinnedFirst(visibleRooms.filter((r) => r.direct && !r.space && r.membership !== 'Invited'));
@@ -418,6 +427,7 @@
         void loadEncryption();
         void loadQuickReactions();
         void loadKeywords();
+        void loadPinnedThreads();
         void loadPackPreferences();
         void loadUrlPreviewSettings();
       } else {
@@ -476,6 +486,7 @@
     void loadEncryption();
     void loadQuickReactions();
     void loadKeywords();
+    void loadPinnedThreads();
     void loadPackPreferences();
     void loadUrlPreviewSettings();
   }
@@ -1481,8 +1492,29 @@
     return avatarByUser[userId] ?? null;
   }
 
+  $: threadView = $openThread && $openThread.room_id === $selectedRoomId ? $openThread : null;
+  $: if ($openThread && $openThread.room_id !== $selectedRoomId) void showThread(null);
+  let threadFolds: Record<string, boolean> = {};
+
+  function openThreadHere(rootEventId: string): void {
+    if (!$selectedRoomId) return;
+    membersOpen = false;
+    void showThread({ room_id: $selectedRoomId, root_event_id: rootEventId });
+  }
+
+  async function openThreadIn(roomId: string, rootEventId: string): Promise<void> {
+    if ($selectedRoomId !== roomId) await selectRoom(roomId);
+    if ($selectedRoomId === roomId) openThreadHere(rootEventId);
+  }
+
+  function threadFoldOpen(roomId: string, folds: Record<string, boolean>, q: string): boolean {
+    if (q) return ($threadsByRoom[roomId] ?? []).some((t) => threadMatches(t, q));
+    return !!folds[roomId];
+  }
+
   function toggleMembers(): void {
     membersOpen = !membersOpen;
+    if (membersOpen) void showThread(null);
     if (membersOpen && $selectedRoomId) {
       void loadMembers($selectedRoomId);
       void loadLevels($selectedRoomId);
@@ -1809,15 +1841,15 @@
 
   let resizing = false;
 
-  function startResize(ev: PointerEvent, pane: 'side' | 'members'): void {
+  function startResize(ev: PointerEvent, pane: 'side' | 'members' | 'thread'): void {
     if (ev.button !== 0) return;
     ev.preventDefault();
     const handle = ev.currentTarget as HTMLElement;
     handle.setPointerCapture(ev.pointerId);
-    const store = pane === 'side' ? sideWidth : membersWidth;
-    const range = pane === 'side' ? SIDE_WIDTH : MEMBERS_WIDTH;
+    const store = pane === 'side' ? sideWidth : pane === 'thread' ? threadWidth : membersWidth;
+    const range = pane === 'side' ? SIDE_WIDTH : pane === 'thread' ? THREAD_WIDTH : MEMBERS_WIDTH;
     const startX = ev.clientX;
-    const startWidth = pane === 'side' ? $sideWidth : $membersWidth;
+    const startWidth = pane === 'side' ? $sideWidth : pane === 'thread' ? $threadWidth : $membersWidth;
     resizing = true;
     const move = (e: PointerEvent) => {
       const delta = pane === 'side' ? e.clientX - startX : startX - e.clientX;
@@ -1834,8 +1866,9 @@
     handle.addEventListener('pointercancel', end);
   }
 
-  function resetWidth(pane: 'side' | 'members'): void {
+  function resetWidth(pane: 'side' | 'members' | 'thread'): void {
     if (pane === 'side') sideWidth.set(SIDE_WIDTH.default);
+    else if (pane === 'thread') threadWidth.set(THREAD_WIDTH.default);
     else membersWidth.set(MEMBERS_WIDTH.default);
   }
 
@@ -1932,10 +1965,10 @@
     in:fade={{ duration: motionDuration(220) }}
     class:nav-folded={$navFolded}
     class:rail-folded={$railFolded && selectedRoom}
-    class:members-open={selectedRoom && membersOpen}
+    class:members-open={selectedRoom && (membersOpen || threadView)}
     class:resizing
     style:--side-open={`${$sideWidth}px`}
-    style:--members-open={`${$membersWidth}px`}
+    style:--members-open={`${threadView ? $threadWidth : $membersWidth}px`}
     style:--msg-gap={`${$messageSpacing}px`}
     style:--msg-line-height={$lineHeight}
   >
@@ -2279,8 +2312,32 @@
                         </span>
                       {/if}
                     </button>
+                    {#if ($threadsByRoom[room.room_id] ?? []).length}
+                      <button
+                        type="button"
+                        class="fold-btn"
+                        class:open={threadFoldOpen(room.room_id, threadFolds, query)}
+                        aria-expanded={threadFoldOpen(room.room_id, threadFolds, query)}
+                        aria-label={`Threads in ${room.name}`}
+                        title="Threads"
+                        on:click={() => (threadFolds = { ...threadFolds, [room.room_id]: !threadFolds[room.room_id] })}
+                      >
+                        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M3 2l4 3-4 3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                      </button>
+                    {/if}
                     <PinButton pinned={room.favourite} label={room.name} onToggle={() => void togglePin(room)} />
                   </li>
+                  {#if threadFoldOpen(room.room_id, threadFolds, query)}
+                    <li>
+                      <RoomThreads
+                        roomId={room.room_id}
+                        threads={$threadsByRoom[room.room_id] ?? []}
+                        {query}
+                        activeRoot={threadView?.room_id === room.room_id ? threadView.root_event_id : null}
+                        onOpen={(root) => void openThreadIn(room.room_id, root)}
+                      />
+                    </li>
+                  {/if}
                 {/each}
               </ul>
             {/if}
@@ -2310,8 +2367,32 @@
                         </span>
                       {/if}
                     </button>
+                    {#if ($threadsByRoom[room.room_id] ?? []).length}
+                      <button
+                        type="button"
+                        class="fold-btn"
+                        class:open={threadFoldOpen(room.room_id, threadFolds, query)}
+                        aria-expanded={threadFoldOpen(room.room_id, threadFolds, query)}
+                        aria-label={`Threads in ${room.name}`}
+                        title="Threads"
+                        on:click={() => (threadFolds = { ...threadFolds, [room.room_id]: !threadFolds[room.room_id] })}
+                      >
+                        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M3 2l4 3-4 3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                      </button>
+                    {/if}
                     <PinButton pinned={room.favourite} label={room.name} onToggle={() => void togglePin(room)} />
                   </li>
+                  {#if threadFoldOpen(room.room_id, threadFolds, query)}
+                    <li>
+                      <RoomThreads
+                        roomId={room.room_id}
+                        threads={$threadsByRoom[room.room_id] ?? []}
+                        {query}
+                        activeRoot={threadView?.room_id === room.room_id ? threadView.root_event_id : null}
+                        onOpen={(root) => void openThreadIn(room.room_id, root)}
+                      />
+                    </li>
+                  {/if}
                 {/each}
               </ul>
             {/if}
@@ -2573,6 +2654,7 @@
                     onUser={(userId, x, y, asMenu) => void openUser(userId, x, y, asMenu)}
                     onCloneSticker={openCloneStickerMenu}
                     onMore={(ev, x, y) => void openMessageMenu(ev, x, y)}
+                    onOpenThread={selectedRoom.membership === 'Joined' || g.item.event.thread_summary ? openThreadHere : null}
                     onReply={selectedRoom.membership === 'Joined' ? startReply : null}
                     onJump={jumpTo}
                     onEdit={selectedRoom.membership === 'Joined' ? startEdit : null}
@@ -2813,53 +2895,73 @@
     </main>
 
     {#if selectedRoom}
-      <aside class="members" aria-hidden={!membersOpen} aria-label={`Members of ${selectedRoom.name}`}>
+      <aside class="members" aria-hidden={!membersOpen && !threadView} aria-label={threadView ? `Thread in ${selectedRoom.name}` : `Members of ${selectedRoom.name}`}>
         <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="pane-resize left" title="Drag to resize" on:pointerdown={(e) => startResize(e, 'members')} on:dblclick={() => resetWidth('members')}></div>
-        <div class="members-head">
-          <h2>Members</h2>
-          <button type="button" class="icon-btn" aria-label="Close members" on:click={() => (membersOpen = false)}>
-            <span aria-hidden="true">✕</span>
-          </button>
-        </div>
-        {#if $membersLoading && members.length === 0}
-          <p class="side-note">Loading members…</p>
-        {:else if members.length === 0}
-          <p class="side-note">No members loaded.</p>
-          {#if $selectedRoomId}
-            <button type="button" class="ghost-btn" on:click={() => $selectedRoomId && void loadMembers($selectedRoomId)}>
-              Retry
+        <div class="pane-resize left" title="Drag to resize" on:pointerdown={(e) => startResize(e, threadView ? 'thread' : 'members')} on:dblclick={() => resetWidth(threadView ? 'thread' : 'members')}></div>
+        {#if threadView}
+          <ThreadPane
+            roomId={threadView.room_id}
+            rootEventId={threadView.root_event_id}
+            roomName={selectedRoom.name}
+            joined={selectedRoom.membership === 'Joined'}
+            self={$sessionUser ?? null}
+            {people}
+            {senderAvatarFor}
+            quickReactions={usableQuickReactions}
+            packs={roomPacks}
+            linkPreviews={$linkPreviews}
+            {loadPreview}
+            onQuickChange={(list) => void changeQuickReactions(list)}
+            onUser={(userId, x, y, asMenu) => void openUser(userId, x, y, asMenu)}
+            onMore={(ev, x, y) => void openMessageMenu(ev, x, y)}
+            onClose={() => void showThread(null)}
+          />
+        {:else}
+          <div class="members-head">
+            <h2>Members</h2>
+            <button type="button" class="icon-btn" aria-label="Close members" on:click={() => (membersOpen = false)}>
+              <span aria-hidden="true">✕</span>
             </button>
+          </div>
+          {#if $membersLoading && members.length === 0}
+            <p class="side-note">Loading members…</p>
+          {:else if members.length === 0}
+            <p class="side-note">No members loaded.</p>
+            {#if $selectedRoomId}
+              <button type="button" class="ghost-btn" on:click={() => $selectedRoomId && void loadMembers($selectedRoomId)}>
+                Retry
+              </button>
+            {/if}
+          {:else}
+            <ul class="member-list">
+              {#each memberGroups as group (group.label)}
+                <li class="member-group">
+                  <h3 class="member-group-label">{group.label}<span>{group.members.length}</span></h3>
+                  <ul class="member-group-list">
+                    {#each group.members as member (member.user_id)}
+                      <li>
+                        <button
+                          type="button"
+                          class="member"
+                          on:click={(ev) => {
+                            const rect = ev.currentTarget.getBoundingClientRect();
+                            void openUser(member.user_id, rect.left - 308, rect.top, false);
+                          }}
+                          on:contextmenu|preventDefault={(ev) => void openUser(member.user_id, ev.clientX, ev.clientY, true)}
+                        >
+                          <MxcAvatar mxc={member.avatar} label={member.display_name || member.name || member.user_id} seed={member.user_id} size={28} />
+                          <span class="member-names">
+                            <span class="member-name"><EmojiText text={member.display_name || member.name} /></span>
+                            <span class="member-id">{member.user_id}</span>
+                          </span>
+                        </button>
+                      </li>
+                    {/each}
+                  </ul>
+                </li>
+              {/each}
+            </ul>
           {/if}
-        {:else}
-          <ul class="member-list">
-            {#each memberGroups as group (group.label)}
-              <li class="member-group">
-                <h3 class="member-group-label">{group.label}<span>{group.members.length}</span></h3>
-                <ul class="member-group-list">
-                  {#each group.members as member (member.user_id)}
-                    <li>
-                      <button
-                        type="button"
-                        class="member"
-                        on:click={(ev) => {
-                          const rect = ev.currentTarget.getBoundingClientRect();
-                          void openUser(member.user_id, rect.left - 308, rect.top, false);
-                        }}
-                        on:contextmenu|preventDefault={(ev) => void openUser(member.user_id, ev.clientX, ev.clientY, true)}
-                      >
-                        <MxcAvatar mxc={member.avatar} label={member.display_name || member.name || member.user_id} seed={member.user_id} size={28} />
-                        <span class="member-names">
-                          <span class="member-name"><EmojiText text={member.display_name || member.name} /></span>
-                          <span class="member-id">{member.user_id}</span>
-                        </span>
-                      </button>
-                    </li>
-                  {/each}
-                </ul>
-              </li>
-            {/each}
-          </ul>
         {/if}
       </aside>
     {/if}

Modified file: web/src/app.css+4 additions@@ -367,6 +367,10 @@ input, textarea { font: inherit; }
 .room-row:hover { background: var(--panel-2); color: var(--text); }
 .room-item { display: flex; align-items: center; gap: 2px; }
 .room-item > .room-row { flex: 1; min-width: 0; }
+.fold-btn { flex: none; display: grid; place-items: center; width: 20px; height: 24px; padding: 0; border: none; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; transition: color var(--pop), background var(--pop); }
+.fold-btn svg { transition: transform var(--pop); }
+.fold-btn.open svg { transform: rotate(90deg); }
+.fold-btn:hover { color: var(--text); background: var(--panel-2); }
 .rail-space.drop-before { box-shadow: 0 -6px 0 -3px var(--accent); }
 .rail-space.drop-after { box-shadow: 0 6px 0 -3px var(--accent); }
 .room-row.active { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }

Modified file: web/src/lib/MessageRow.svelte+26 additions@@ -36,8 +36,11 @@
   export let onUser: ((userId: string, x: number, y: number, menu: boolean) => void) | null = null;
   export let onCloneSticker: ((eventId: string, body: string, x: number, y: number) => void) | null = null;
   export let onMore: ((event: TimelineEvent, x: number, y: number) => void) | null = null;
+  export let onOpenThread: ((rootEventId: string) => void) | null = null;
 
   $: lag = lagLabel(event);
+  $: threadRoot = onOpenThread && interactive && event.event_id && !event.thread_root ? event.event_id : null;
+  $: threadReplies = event.thread_summary?.reply_count ?? 0;
 
   function lagLabel(event: TimelineEvent): string | null {
     const lag = event.delivery_lag_ms;
@@ -327,6 +330,17 @@
           ↩
         </button>
       {/if}
+      {#if threadRoot}
+        {@const root = threadRoot}
+        <button
+          type="button"
+          title="Reply in thread"
+          aria-label={`Reply in thread to message from ${displayName}`}
+          on:click|stopPropagation={() => onOpenThread?.(root)}
+        >
+          <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 3h11v7h-6l-3 3v-3h-2z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M5 6h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
+        </button>
+      {/if}
       {#if onEdit && editableBody !== null}
         <button type="button" title="Edit" aria-label="Edit your message" on:click|stopPropagation={edit}>
           ✎
@@ -471,6 +485,14 @@
         {/each}
       </div>
     {/if}
+    {#if threadRoot && threadReplies > 0}
+      {@const root = threadRoot}
+      {@const latest = event.thread_summary?.latest_event_timestamp_ms ?? null}
+      <button type="button" class="thread-chip" on:click|stopPropagation={() => onOpenThread?.(root)}>
+        <span class="thread-count">{threadReplies} {threadReplies === 1 ? 'reply' : 'replies'}</span>
+        {#if latest}<time datetime={new Date(latest).toISOString()}>{formatDay(latest)} {formatClock(latest)}</time>{/if}
+      </button>
+    {/if}
     {#if sent}<span class="sent-tick" title="Sent" aria-label="Sent">✓</span>{/if}
     {#if interactive && sendLabel(event.send_state)}
       <div class="msg-foot">
@@ -494,6 +516,10 @@
   .msg:hover, .msg.selected { background: var(--hover-faint); }
   .msg:hover .hover-time, .msg.selected .hover-time { opacity: 1; }
   .msg-foot { display: flex; align-items: center; gap: 8px; }
+  .thread-chip { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 4px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-soft); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; transition: border-color var(--pop), background var(--pop); }
+  .thread-chip:hover { border-color: var(--accent); background: var(--hover-faint); }
+  .thread-count { color: var(--accent); font-weight: 650; }
+  .thread-chip time { color: var(--muted); font-size: 11px; }
   .sendstate { font-size: 11px; color: var(--muted); }
   .sent-tick { position: absolute; right: 12px; bottom: 4px; font-size: 11px; color: var(--muted); }
   .sendstate.failed { color: var(--danger); }

Added file: web/src/lib/RoomThreads.svelte+61 additions@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+  import EmojiText from './EmojiText.svelte';
+  import PinButton from './PinButton.svelte';
+  import { formatClock, formatDay } from './format';
+  import { threadMatches } from './thread-index';
+  import type { ThreadEntry } from './thread-index';
+  import { togglePinnedThread } from './threads';
+
+  export let roomId: string;
+  export let threads: ThreadEntry[];
+  export let query = '';
+  export let activeRoot: string | null = null;
+  export let onOpen: (rootEventId: string) => void;
+
+  const COLLAPSED_LIMIT = 6;
+  let showAll = false;
+
+  $: matching = threads.filter((t) => threadMatches(t, query));
+  $: shown = query || showAll ? matching : matching.slice(0, COLLAPSED_LIMIT);
+  $: hidden = matching.length - shown.length;
+
+  function label(t: ThreadEntry): string {
+    return t.preview || (t.pinned ? 'Pinned thread' : 'Thread');
+  }
+</script>
+
+<ul class="thread-fold" transition:slide={{ duration: 140 }} aria-label="Threads">
+  {#each shown as t (t.root_event_id)}
+    <li class="thread-item">
+      <button
+        type="button"
+        class="thread-row"
+        class:active={activeRoot === t.root_event_id}
+        aria-current={activeRoot === t.root_event_id ? 'true' : undefined}
+        on:click={() => onOpen(t.root_event_id)}
+      >
+        <span class="thread-preview"><EmojiText text={label(t)} /></span>
+        {#if t.reply_count > 0}<span class="thread-meta">{t.reply_count}</span>{/if}
+        {#if t.latest_ms}<time class="thread-meta" datetime={new Date(t.latest_ms).toISOString()}>{formatDay(t.latest_ms)} {formatClock(t.latest_ms)}</time>{/if}
+      </button>
+      <PinButton pinned={t.pinned} label={`thread ${label(t)}`} onToggle={() => void togglePinnedThread(roomId, t.root_event_id)} />
+    </li>
+  {/each}
+  {#if hidden > 0}
+    <li><button type="button" class="thread-more" on:click={() => (showAll = true)}>{hidden} more</button></li>
+  {/if}
+</ul>
+
+<style>
+  .thread-fold { list-style: none; margin: 0 0 2px 22px; padding: 0 0 0 8px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
+  .thread-item { display: flex; align-items: center; gap: 2px; }
+  .thread-row { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; padding: 3px 6px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: background var(--pop), color var(--pop); }
+  .thread-row:hover { background: var(--panel-2); color: var(--text); }
+  .thread-row.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
+  .thread-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .thread-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .thread-meta { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
+  .thread-item:hover :global(.pin-btn), .thread-item :global(.pin-btn.pinned) { opacity: 1; }
+  .thread-more { border: none; background: transparent; color: var(--accent); font: inherit; font-size: 12px; padding: 2px 6px; cursor: pointer; }
+</style>

Added file: web/src/lib/ThreadPane.svelte+269 additions@@ -0,0 +1,269 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import MessageRow from './MessageRow.svelte';
+  import EmojiText from './EmojiText.svelte';
+  import { editMessage, markRead, paginateRoom, reactToMessage, sendMessage } from './api';
+  import { pushBanner, threadKey, threadTimelines, timelines } from './store';
+  import { pinnedThreads, togglePinnedThread } from './threads';
+  import type { ImagePack, LinkPreview, Person, QuickReaction, ReplyReference, TimelineEvent, TimelineItem } from './types';
+
+  export let roomId: string;
+  export let rootEventId: string;
+  export let roomName: string;
+  export let joined: boolean;
+  export let self: string | null;
+  export let people: Record<string, Person> = {};
+  export let senderAvatarFor: (userId: string) => string | null = () => null;
+  export let quickReactions: QuickReaction[] = [];
+  export let packs: ImagePack[] = [];
+  export let linkPreviews: Record<string, LinkPreview | null> = {};
+  export let loadPreview: ((url: string) => void) | null = null;
+  export let onQuickChange: (list: QuickReaction[]) => void = () => {};
+  export let onUser: ((userId: string, x: number, y: number, menu: boolean) => void) | null = null;
+  export let onMore: ((event: TimelineEvent, x: number, y: number) => void) | null = null;
+  export let onClose: () => void;
+
+  const GROUP_GAP_MS = 5 * 60 * 1000;
+
+  let list: HTMLDivElement | null = null;
+  let composerEl: HTMLTextAreaElement | null = null;
+  let draft = '';
+  let replyingTo: ReplyReference | null = null;
+  let editing: { eventId: string } | null = null;
+  let sending = false;
+  let paginating = false;
+  let reacting = false;
+  let stickToBottom = true;
+  let lastRead = '';
+
+  $: key = threadKey(roomId, rootEventId);
+  $: items = $threadTimelines[key] ?? [];
+  $: roomRoot = ($timelines[roomId] ?? []).find((item) => item.kind === 'event' && item.event.event_id === rootEventId) ?? null;
+  $: events = threadEvents(items, roomRoot);
+  $: hasStart = items.some((item) => item.kind === 'start');
+  $: pinned = ($pinnedThreads[roomId] ?? []).includes(rootEventId);
+  $: if (key) reset();
+  $: void follow(events);
+
+  function threadEvents(list: TimelineItem[], root: TimelineItem | null): TimelineEvent[] {
+    const out = list.flatMap((item) => (item.kind === 'event' ? [item.event] : []));
+    if (root?.kind === 'event' && !out.some((event) => event.event_id === rootEventId)) out.unshift(root.event);
+    return out;
+  }
+
+  function showSender(index: number): boolean {
+    if (index === 0) return true;
+    const prev = events[index - 1];
+    const cur = events[index];
+    return prev.sender.user_id !== cur.sender.user_id || Math.abs(cur.timestamp_ms - prev.timestamp_ms) > GROUP_GAP_MS;
+  }
+
+  function reset(): void {
+    draft = '';
+    replyingTo = null;
+    editing = null;
+    stickToBottom = true;
+    lastRead = '';
+  }
+
+  async function follow(_events: TimelineEvent[]): Promise<void> {
+    await tick();
+    if (list && stickToBottom) list.scrollTop = list.scrollHeight;
+    sendReceipt();
+  }
+
+  function sendReceipt(): void {
+    if (document.hidden || !document.hasFocus() || !stickToBottom) return;
+    const latest = [...events].reverse().find((event) => event.event_id);
+    if (!latest?.event_id || latest.event_id === lastRead) return;
+    lastRead = latest.event_id;
+    markRead(roomId, latest.event_id, rootEventId).catch(() => undefined);
+  }
+
+  function onScroll(): void {
+    if (!list) return;
+    const wasAtBottom = stickToBottom;
+    stickToBottom = list.scrollHeight - list.scrollTop - list.clientHeight < 2;
+    if (stickToBottom && !wasAtBottom) sendReceipt();
+    if (list.scrollTop < 60 && !hasStart) void paginate();
+  }
+
+  async function paginate(): Promise<void> {
+    if (paginating) return;
+    paginating = true;
+    try {
+      await paginateRoom(roomId, rootEventId);
+    } catch (e) {
+      pushBanner(e instanceof Error ? e.message : 'Loading older replies failed');
+    } finally {
+      paginating = false;
+    }
+  }
+
+  async function react(eventId: string, emoji: string, shortcode?: string): Promise<void> {
+    if (reacting) return;
+    reacting = true;
+    try {
+      await reactToMessage(roomId, eventId, emoji, shortcode, rootEventId);
+    } catch (e) {
+      pushBanner(e instanceof Error ? e.message : 'Reaction failed');
+    } finally {
+      reacting = false;
+    }
+  }
+
+  function startReply(target: ReplyReference): void {
+    editing = null;
+    replyingTo = target;
+    composerEl?.focus();
+  }
+
+  function startEdit(eventId: string, body: string): void {
+    replyingTo = null;
+    editing = { eventId };
+    draft = body;
+    void tick().then(() => composerEl?.focus());
+  }
+
+  async function submit(): Promise<void> {
+    const body = draft.trim();
+    if (!body || sending) return;
+    sending = true;
+    const reply = replyingTo;
+    const edit = editing;
+    try {
+      if (edit) await editMessage(roomId, edit.eventId, body, [], [], rootEventId);
+      else await sendMessage(roomId, body, reply?.event_id ?? null, [], 'text', [], rootEventId);
+      draft = '';
+      replyingTo = null;
+      editing = null;
+      stickToBottom = true;
+    } catch (e) {
+      pushBanner(e instanceof Error ? e.message : 'Sending to the thread failed');
+    } finally {
+      sending = false;
+    }
+  }
+
+  function onKey(e: KeyboardEvent): void {
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      void submit();
+    } else if (e.key === 'Escape' && (editing || replyingTo)) {
+      e.preventDefault();
+      if (editing) draft = '';
+      editing = null;
+      replyingTo = null;
+    }
+  }
+
+  function grow(node: HTMLTextAreaElement, _value: string) {
+    const fit = () => {
+      node.style.height = 'auto';
+      node.style.height = `${Math.min(node.scrollHeight, 200)}px`;
+    };
+    fit();
+    return { update: fit };
+  }
+</script>
+
+<svelte:window on:focus={sendReceipt} />
+<svelte:document on:visibilitychange={sendReceipt} />
+
+<aside class="thread-pane" aria-label={`Thread in ${roomName}`}>
+  <header class="thread-head">
+    <h2>Thread</h2>
+    <span class="thread-room"><EmojiText text={roomName} /></span>
+    <span class="spacer"></span>
+    <button
+      type="button"
+      class="icon-btn"
+      class:active={pinned}
+      aria-pressed={pinned}
+      aria-label={pinned ? 'Unpin thread' : 'Pin thread'}
+      title={pinned ? 'Unpin thread' : 'Pin thread'}
+      on:click={() => void togglePinnedThread(roomId, rootEventId)}
+    >
+      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M9 3h6l-1 6 4 4v2h-5v6l-1 1-1-1v-6H6v-2l4-4z" fill={pinned ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" /></svg>
+    </button>
+    <button type="button" class="icon-btn" aria-label="Close thread" on:click={onClose}>
+      <span aria-hidden="true">✕</span>
+    </button>
+  </header>
+  <div class="thread-list" bind:this={list} on:scroll={onScroll}>
+    {#if !hasStart && events.length > 1}
+      <button type="button" class="ghost-btn older" disabled={paginating} on:click={() => void paginate()}>
+        {paginating ? 'Loading…' : 'Load older replies'}
+      </button>
+    {/if}
+    {#if events.length === 0}
+      <p class="side-note">Loading thread…</p>
+    {/if}
+    {#each events as event, i (event.item_id || event.event_id)}
+      <div class:root={event.event_id === rootEventId}>
+        <MessageRow
+          itemId={`thread-${event.item_id || event.event_id}`}
+          {event}
+          showSender={showSender(i) || event.event_id === rootEventId}
+          senderAvatar={senderAvatarFor(event.sender.user_id) ?? event.sender.avatar}
+          {reacting}
+          onReact={(eventId, emoji, shortcode) => void react(eventId, emoji, shortcode)}
+          {quickReactions}
+          {packs}
+          {linkPreviews}
+          {loadPreview}
+          {onQuickChange}
+          {people}
+          {self}
+          {onUser}
+          {onMore}
+          onReply={joined ? startReply : null}
+          onEdit={joined ? startEdit : null}
+          editing={editing?.eventId === event.event_id}
+          showSent={false}
+        />
+      </div>
+    {/each}
+  </div>
+  {#if joined}
+    <form class="thread-composer" on:submit|preventDefault={() => void submit()}>
+      {#if replyingTo || editing}
+        <div class="thread-context">
+          <span>{editing ? 'Editing' : 'Replying'}</span>
+          <button type="button" class="icon-btn" aria-label="Cancel" on:click={() => { if (editing) draft = ''; editing = null; replyingTo = null; }}>
+            <span aria-hidden="true">✕</span>
+          </button>
+        </div>
+      {/if}
+      <div class="thread-input">
+        <textarea
+          bind:this={composerEl}
+          bind:value={draft}
+          use:grow={draft}
+          rows="1"
+          placeholder="Reply in thread"
+          aria-label="Reply in thread"
+          on:keydown={onKey}
+        ></textarea>
+        <button type="submit" class="primary-btn" disabled={sending || !draft.trim()}>{editing ? 'Save' : 'Send'}</button>
+      </div>
+    </form>
+  {/if}
+</aside>
+
+<style>
+  .thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--bg-elev, var(--bg)); border-left: 1px solid var(--border); animation: pop-in var(--pop); }
+  .thread-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
+  .thread-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
+  .thread-room { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .spacer { flex: 1; }
+  .icon-btn.active { color: var(--accent); }
+  .thread-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; }
+  .older { display: block; margin: 0 auto 8px; }
+  .root { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
+  .thread-composer { border-top: 1px solid var(--border); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
+  .thread-context { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
+  .thread-input { display: flex; align-items: flex-end; gap: 8px; }
+  .thread-input textarea { flex: 1; min-width: 0; resize: none; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); padding: 7px 9px; line-height: 1.4; }
+  .thread-input textarea:focus { outline: none; border-color: var(--accent); }
+</style>

Modified file: web/src/lib/api.ts+9 additions−8 deletions@@ -46,13 +46,14 @@ export const sendMessage = (
   reply_to: string | null = null,
   mentions: Mention[] = [],
   kind: SendKind = 'text',
-  emotes: Emote[] = []
-) => transport.sendMessage(room_id, body, formatBody(body, mentions, true, emotes), reply_to, mentionedUserIds(mentions), kind);
+  emotes: Emote[] = [],
+  thread_root: string | null = null
+) => transport.sendMessage(room_id, body, formatBody(body, mentions, true, emotes), reply_to, mentionedUserIds(mentions), kind, thread_root);
 export const runCommand = (request: CommandRequest) => transport.command(request);
 export const uploadAvatar = (file: File) => transport.uploadAvatar(file);
 export const uploadRoomAvatar = (room_id: string, file: File) => transport.uploadRoomAvatar(room_id, file);
 export const uploadMedia = (file: File) => transport.uploadMedia(file);
-export const paginateRoom = (room_id: string) => transport.paginateRoom(room_id);
+export const paginateRoom = (room_id: string, thread_root: string | null = null) => transport.paginateRoom(room_id, thread_root);
 export const eventContext = (room_id: string, event_id: string, limit?: number): Promise<EventContext> =>
   transport.eventContext(room_id, event_id, limit);
 export const eventContextBefore = (room_id: string, event_id: string, from: string, limit?: number): Promise<EventContextPage> =>
@@ -82,11 +83,11 @@ export function createRoom(name: string, topic?: string): Promise<{ room_id: str
 }
 
 export const leaveRoom = (room_id: string) => transport.leaveRoom(room_id);
-export const reactToMessage = (room_id: string, event_id: string, key: string, shortcode?: string) =>
-  transport.reactToMessage(room_id, event_id, key, shortcode);
-export const editMessage = (room_id: string, event_id: string, body: string, mentions: Mention[] = [], emotes: Emote[] = []) =>
-  transport.editMessage(room_id, event_id, body, formatBody(body, mentions, true, emotes), mentionedUserIds(mentions));
-export const markRead = (room_id: string, event_id: string) => transport.markRead(room_id, event_id);
+export const reactToMessage = (room_id: string, event_id: string, key: string, shortcode?: string, thread_root: string | null = null) =>
+  transport.reactToMessage(room_id, event_id, key, shortcode, thread_root);
+export const editMessage = (room_id: string, event_id: string, body: string, mentions: Mention[] = [], emotes: Emote[] = [], thread_root: string | null = null) =>
+  transport.editMessage(room_id, event_id, body, formatBody(body, mentions, true, emotes), mentionedUserIds(mentions), thread_root);
+export const markRead = (room_id: string, event_id: string, thread_root: string | null = null) => transport.markRead(room_id, event_id, thread_root);
 
 export function getMembers(room_id: string): Promise<{ members: MemberSummary[] }> {
   return transport.getMembers(room_id);

Modified file: web/src/lib/appearance.ts+2 additions@@ -32,10 +32,12 @@ export const railFolded = persisted('malice.railFolded', false, isBool);
 
 export const SIDE_WIDTH = { min: 200, max: 480, default: 260 };
 export const MEMBERS_WIDTH = { min: 200, max: 420, default: 240 };
+export const THREAD_WIDTH = { min: 300, max: 720, default: 400 };
 const widthIn = (range: { min: number; max: number }) => (v: unknown): v is number =>
   typeof v === 'number' && Number.isFinite(v) && v >= range.min && v <= range.max;
 export const sideWidth = persisted('malice.sideWidth', SIDE_WIDTH.default, widthIn(SIDE_WIDTH));
 export const membersWidth = persisted('malice.membersWidth', MEMBERS_WIDTH.default, widthIn(MEMBERS_WIDTH));
+export const threadWidth = persisted('malice.threadWidth', THREAD_WIDTH.default, widthIn(THREAD_WIDTH));
 export const messageSpacing = persisted('malice.messageSpacing', MESSAGE_SPACING_DEFAULT, isSpacing);
 
 export const LINE_HEIGHT_MIN = 1.1;

Modified file: web/src/lib/store.ts+30 additions@@ -47,6 +47,11 @@ export const rooms = writable<RoomSummary[]>([]);
 export const timelines = writable<Record<string, TimelineItem[]>>({});
 export const pinnedTimelines = writable<Record<string, TimelineItem[]>>({});
 export const pinnedTimelineVersions = writable<Record<string, number>>({});
+export const threadTimelines = writable<Record<string, TimelineItem[]>>({});
+
+export function threadKey(roomId: string, rootEventId: string): string {
+  return `${roomId}\u0000${rootEventId}`;
+}
 export const recentHistory = writable<Record<string, RecentHistoryState>>({});
 export interface EventContextState {
   room_id: string;
@@ -85,6 +90,7 @@ export function resetClientState(): void {
   timelines.set({});
   pinnedTimelines.set({});
   pinnedTimelineVersions.set({});
+  threadTimelines.set({});
   recentHistory.set({});
   eventContexts.set({});
   connection.set('connecting');
@@ -175,6 +181,14 @@ function handlePayload(text: string): void {
         return next;
       });
     }
+    if (Array.isArray(data['threads'])) {
+      const next: Record<string, TimelineItem[]> = {};
+      for (const entry of data['threads']) {
+        if (!isRecord(entry) || typeof entry['room_id'] !== 'string' || typeof entry['root_event_id'] !== 'string') continue;
+        next[threadKey(entry['room_id'], entry['root_event_id'])] = parseTimelineList(entry['items']);
+      }
+      threadTimelines.set(next);
+    }
     const rawPinned = data['pinned'];
     if (isRecord(rawPinned)) {
       const next: Record<string, TimelineItem[]> = {};
@@ -224,6 +238,22 @@ function handlePayload(text: string): void {
     }
     return;
   }
+  if (kind === 'thread' || kind === 'thread_closed') {
+    const roomId = data['room_id'];
+    const root = data['root_event_id'];
+    if (typeof roomId !== 'string' || typeof root !== 'string') return;
+    const key = threadKey(roomId, root);
+    if (kind === 'thread') {
+      const items = parseTimelineList(data['items']);
+      threadTimelines.update((all) => ({ ...all, [key]: items }));
+    } else {
+      threadTimelines.update((all) => {
+        const { [key]: _closed, ...rest } = all;
+        return rest;
+      });
+    }
+    return;
+  }
   if (kind === 'pinned_closed') {
     const roomId = data['room_id'];
     if (typeof roomId === 'string') {

Added file: web/src/lib/thread-index.ts+56 additions@@ -0,0 +1,56 @@
+import type { TimelineEvent, TimelineItem } from './types';
+
+export interface ThreadEntry {
+  room_id: string;
+  root_event_id: string;
+  preview: string;
+  sender: string;
+  reply_count: number;
+  latest_ms: number;
+  pinned: boolean;
+}
+
+function previewOf(event: TimelineEvent): string {
+  const content = event.content;
+  if (content.kind === 'Message') return content.message.media?.caption ?? content.message.body;
+  if (content.kind === 'Sticker') return content.body || 'Sticker';
+  if (content.kind === 'Poll') return content.question;
+  return '';
+}
+
+function entryFor(roomId: string, event: TimelineEvent, pinned: boolean): ThreadEntry | null {
+  if (!event.event_id || event.thread_root) return null;
+  return {
+    room_id: roomId,
+    root_event_id: event.event_id,
+    preview: previewOf(event),
+    sender: event.sender.display_name ?? event.sender.user_id,
+    reply_count: event.thread_summary?.reply_count ?? 0,
+    latest_ms: event.thread_summary?.latest_event_timestamp_ms ?? event.timestamp_ms,
+    pinned
+  };
+}
+
+/** Pinned threads first, then by latest activity. Pins whose root isn't loaded still get a row. */
+export function roomThreads(roomId: string, items: TimelineItem[], pinnedRoots: string[]): ThreadEntry[] {
+  const pinned = new Set(pinnedRoots);
+  const found = new Map<string, ThreadEntry>();
+  for (const item of items) {
+    if (item.kind !== 'event') continue;
+    const id = item.event.event_id;
+    if (!id || (!pinned.has(id) && (item.event.thread_summary?.reply_count ?? 0) === 0)) continue;
+    const entry = entryFor(roomId, item.event, pinned.has(id));
+    if (entry) found.set(id, entry);
+  }
+  for (const root of pinnedRoots) {
+    if (!found.has(root)) {
+      found.set(root, { room_id: roomId, root_event_id: root, preview: '', sender: '', reply_count: 0, latest_ms: 0, pinned: true });
+    }
+  }
+  return [...found.values()].sort((a, b) => Number(b.pinned) - Number(a.pinned) || b.latest_ms - a.latest_ms);
+}
+
+export function threadMatches(entry: ThreadEntry, query: string): boolean {
+  if (!query) return true;
+  return entry.preview.toLowerCase().includes(query) || entry.sender.toLowerCase().includes(query);
+}

Added file: web/src/lib/threads.ts+88 additions@@ -0,0 +1,88 @@
+import { derived, get, writable } from 'svelte/store';
+import { getAccountData, runCommand, setAccountData } from './api';
+import { pushBanner, sessionUser, timelines } from './store';
+import { roomThreads } from './thread-index';
+import type { ThreadEntry } from './thread-index';
+
+const PINNED_TYPE = 'dev.malice.pinned_threads';
+
+export interface OpenThread {
+  room_id: string;
+  root_event_id: string;
+}
+
+export const openThread = writable<OpenThread | null>(null);
+export const pinnedThreads = writable<Record<string, string[]>>({});
+
+export const threadsByRoom = derived([timelines, pinnedThreads], ([$timelines, $pinned]) => {
+  const out: Record<string, ThreadEntry[]> = {};
+  for (const roomId of new Set([...Object.keys($timelines), ...Object.keys($pinned)])) {
+    const list = roomThreads(roomId, $timelines[roomId] ?? [], $pinned[roomId] ?? []);
+    if (list.length) out[roomId] = list;
+  }
+  return out;
+});
+
+function parsePinned(raw: unknown): Record<string, string[]> {
+  if (typeof raw !== 'object' || raw === null) return {};
+  const rooms = (raw as Record<string, unknown>)['rooms'];
+  if (typeof rooms !== 'object' || rooms === null) return {};
+  const out: Record<string, string[]> = {};
+  for (const [roomId, list] of Object.entries(rooms)) {
+    if (Array.isArray(list)) out[roomId] = list.filter((id): id is string => typeof id === 'string');
+  }
+  return out;
+}
+
+export async function loadPinnedThreads(): Promise<void> {
+  try {
+    pinnedThreads.set(parsePinned(await getAccountData(PINNED_TYPE)));
+  } catch {
+    pinnedThreads.set({});
+  }
+}
+
+export async function togglePinnedThread(roomId: string, rootEventId: string): Promise<void> {
+  const before = get(pinnedThreads);
+  const list = before[roomId] ?? [];
+  const nextList = list.includes(rootEventId) ? list.filter((id) => id !== rootEventId) : [...list, rootEventId];
+  const next = { ...before, [roomId]: nextList };
+  if (nextList.length === 0) delete next[roomId];
+  pinnedThreads.set(next);
+  try {
+    await setAccountData(PINNED_TYPE, { rooms: next });
+  } catch (e) {
+    pinnedThreads.set(before);
+    pushBanner(e instanceof Error ? e.message : 'Pinning the thread failed');
+  }
+}
+
+let opened: OpenThread | null = null;
+
+/** The room must already be open, since macltok builds thread timelines inside it. */
+export async function showThread(target: OpenThread | null): Promise<void> {
+  const previous = opened;
+  if (previous && target && previous.room_id === target.room_id && previous.root_event_id === target.root_event_id) return;
+  opened = target;
+  openThread.set(target);
+  if (previous) runCommand({ op: 'close_thread', ...previous }).catch(() => undefined);
+  if (!target) return;
+  try {
+    await runCommand({ op: 'open_thread', ...target });
+  } catch (e) {
+    if (opened === target) {
+      opened = null;
+      openThread.set(null);
+    }
+    pushBanner(e instanceof Error ? e.message : 'Opening the thread failed');
+  }
+}
+
+let account: string | null | undefined;
+sessionUser.subscribe((user) => {
+  if (user === account) return;
+  account = user;
+  opened = null;
+  openThread.set(null);
+  pinnedThreads.set({});
+});

Modified file: web/src/lib/transport-http.ts+11 additions−10 deletions@@ -99,12 +99,13 @@ export class HttpTransport implements Transport {
     formatted_body: string | null,
     reply_to: string | null,
     mentions: string[],
-    kind: SendKind = 'text'
+    kind: SendKind = 'text',
+    thread_root: string | null = null
   ): Promise<void> {
-    return this.roomCommand(ROOM_COMMAND_PATHS.send, { room_id, body, formatted_body, reply_to, mentions, kind });
+    return this.roomCommand(ROOM_COMMAND_PATHS.send, { room_id, body, formatted_body, reply_to, mentions, kind, thread_root });
   }
-  paginateRoom(room_id: string): Promise<void> {
-    return this.roomCommand(ROOM_COMMAND_PATHS.paginate, { room_id });
+  paginateRoom(room_id: string, thread_root: string | null = null): Promise<void> {
+    return this.roomCommand(ROOM_COMMAND_PATHS.paginate, { room_id, thread_root });
   }
   async eventContext(room_id: string, event_id: string, limit = 20): Promise<EventContext> {
     const res = await fetch('/api/rooms/context', {
@@ -169,14 +170,14 @@ export class HttpTransport implements Transport {
   leaveRoom(room_id: string): Promise<void> {
     return this.roomCommand(ROOM_COMMAND_PATHS.leave, { room_id });
   }
-  editMessage(room_id: string, event_id: string, body: string, formatted_body: string | null, mentions: string[]): Promise<void> {
-    return this.roomCommand(ROOM_COMMAND_PATHS.edit, { room_id, event_id, body, formatted_body, mentions });
+  editMessage(room_id: string, event_id: string, body: string, formatted_body: string | null, mentions: string[], thread_root: string | null = null): Promise<void> {
+    return this.roomCommand(ROOM_COMMAND_PATHS.edit, { room_id, event_id, body, formatted_body, mentions, thread_root });
   }
-  reactToMessage(room_id: string, event_id: string, key: string, shortcode?: string): Promise<void> {
-    return this.roomCommand(ROOM_COMMAND_PATHS.react, shortcode ? { room_id, event_id, key, shortcode } : { room_id, event_id, key });
+  reactToMessage(room_id: string, event_id: string, key: string, shortcode?: string, thread_root: string | null = null): Promise<void> {
+    return this.roomCommand(ROOM_COMMAND_PATHS.react, { room_id, event_id, key, shortcode: shortcode ?? null, thread_root });
   }
-  markRead(room_id: string, event_id: string): Promise<void> {
-    return this.roomCommand(ROOM_COMMAND_PATHS.read, { room_id, event_id });
+  markRead(room_id: string, event_id: string, thread_root: string | null = null): Promise<void> {
+    return this.roomCommand(ROOM_COMMAND_PATHS.read, { room_id, event_id, thread_root });
   }
 
   async joinRoom(room: string): Promise<{ room_id: string }> {

Modified file: web/src/lib/transport-worker.ts+11 additions−10 deletions@@ -225,12 +225,13 @@ export class WorkerTransport implements Transport {
     formatted_body: string | null,
     reply_to: string | null,
     mentions: string[],
-    kind: SendKind = 'text'
+    kind: SendKind = 'text',
+    thread_root: string | null = null
   ): Promise<void> {
-    return this.client.call('send', { room_id, body, formatted_body, reply_to, mentions, kind });
+    return this.client.call('send', { room_id, body, formatted_body, reply_to, mentions, kind, thread_root });
   }
-  paginateRoom(room_id: string): Promise<void> {
-    return this.client.call('paginate', { room_id });
+  paginateRoom(room_id: string, thread_root: string | null = null): Promise<void> {
+    return this.client.call('paginate', { room_id, thread_root });
   }
   async mentionsPage(cursor: string | null = null, limit = 50): Promise<MentionsPage> {
     const parsed = parseMentionsPage(await this.client.call('mentions_page', { cursor, limit }));
@@ -284,14 +285,14 @@ export class WorkerTransport implements Transport {
   leaveRoom(room_id: string): Promise<void> {
     return this.client.call('leave', { room_id });
   }
-  editMessage(room_id: string, event_id: string, body: string, formatted_body: string | null, mentions: string[]): Promise<void> {
-    return this.client.call('edit', { room_id, event_id, body, formatted_body, mentions });
+  editMessage(room_id: string, event_id: string, body: string, formatted_body: string | null, mentions: string[], thread_root: string | null = null): Promise<void> {
+    return this.client.call('edit', { room_id, event_id, body, formatted_body, mentions, thread_root });
   }
-  reactToMessage(room_id: string, event_id: string, key: string, shortcode?: string): Promise<void> {
-    return this.client.call('react', shortcode ? { room_id, event_id, key, shortcode } : { room_id, event_id, key });
+  reactToMessage(room_id: string, event_id: string, key: string, shortcode?: string, thread_root: string | null = null): Promise<void> {
+    return this.client.call('react', { room_id, event_id, key, shortcode: shortcode ?? null, thread_root });
   }
-  markRead(room_id: string, event_id: string): Promise<void> {
-    return this.client.call('read', { room_id, event_id });
+  markRead(room_id: string, event_id: string, thread_root: string | null = null): Promise<void> {
+    return this.client.call('read', { room_id, event_id, thread_root });
   }
   getMembers(room_id: string): Promise<{ members: MemberSummary[] }> {
     return this.client.call('members', { room_id });

Modified file: web/src/lib/transport.ts+8 additions−6 deletions@@ -29,7 +29,8 @@ export type CommandRequest =
   | { op: 'set_avatar'; mxc: string | null }
   | { op: 'invite'; room_id: string; user_id: string }
   | { op: 'direct'; user_id: string }
-  | { op: 'redact'; room_id: string; event_id: string; reason: string | null }
+  | { op: 'redact'; room_id: string; event_id: string; reason: string | null; thread_root?: string | null }
+  | { op: 'open_thread' | 'close_thread'; room_id: string; root_event_id: string }
   | { op: 'set_favourite'; room_id: string; favourite: boolean }
   | { op: 'reorder_spaces'; order: string[] }
   | { op: 'set_room_display_name'; room_id: string; name: string | null }
@@ -111,9 +112,10 @@ export interface Transport {
     formatted_body: string | null,
     reply_to: string | null,
     mentions: string[],
-    kind?: SendKind
+    kind?: SendKind,
+    thread_root?: string | null
   ): Promise<void>;
-  paginateRoom(room_id: string): Promise<void>;
+  paginateRoom(room_id: string, thread_root?: string | null): Promise<void>;
   eventContext(room_id: string, event_id: string, limit?: number): Promise<EventContext>;
   eventContextBefore(room_id: string, event_id: string, from: string, limit?: number): Promise<EventContextPage>;
   eventContextAfter(room_id: string, event_id: string, from: string, limit?: number): Promise<EventContextPage>;
@@ -132,9 +134,9 @@ export interface Transport {
   joinRoom(room: string): Promise<{ room_id: string }>;
   createRoom(name: string, topic?: string): Promise<{ room_id: string }>;
   leaveRoom(room_id: string): Promise<void>;
-  editMessage(room_id: string, event_id: string, body: string, formatted_body: string | null, mentions: string[]): Promise<void>;
-  reactToMessage(room_id: string, event_id: string, key: string, shortcode?: string): Promise<void>;
-  markRead(room_id: string, event_id: string): Promise<void>;
+  editMessage(room_id: string, event_id: string, body: string, formatted_body: string | null, mentions: string[], thread_root?: string | null): Promise<void>;
+  reactToMessage(room_id: string, event_id: string, key: string, shortcode?: string, thread_root?: string | null): Promise<void>;
+  markRead(room_id: string, event_id: string, thread_root?: string | null): Promise<void>;
   getMembers(room_id: string): Promise<{ members: MemberSummary[] }>;
   getProfile(): Promise<{ display_name: string | null; avatar_url: string | null }>;
   getSpaceChildren(room_id: string): Promise<{ room_ids: string[] }>;

Added file: web/test/thread-index.test.ts+46 additions@@ -0,0 +1,46 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { roomThreads, threadMatches } from '../src/lib/thread-index.ts';
+import type { TimelineEvent, TimelineItem } from '../src/lib/types.ts';
+
+function root(id: string, body: string, replies: number, latest: number, extra: Partial<TimelineEvent> = {}): TimelineItem {
+  return {
+    kind: 'event',
+    event: {
+      item_id: id,
+      event_id: id,
+      timestamp_ms: 1,
+      sender: { user_id: '@a:x', display_name: 'Alice', avatar: null, name_ambiguous: false },
+      content: { kind: 'Message', message: { kind: 'Text', body, media: null } },
+      thread_root: null,
+      thread_summary: replies ? { reply_count: replies, latest_event_id: null, latest_event_timestamp_ms: latest } : null,
+      ...extra
+    } as TimelineEvent
+  };
+}
+
+test('threads sort by latest activity with pins first', () => {
+  const items = [root('$a', 'old thread', 2, 100), root('$b', 'new thread', 1, 300), root('$c', 'no replies', 0, 0), root('$d', 'pinned', 4, 50)];
+  const list = roomThreads('!r', items, ['$d']);
+  assert.deepEqual(list.map((t) => t.root_event_id), ['$d', '$b', '$a']);
+  assert.equal(list[0].pinned, true);
+});
+
+test('pinned threads outside the loaded timeline still get a row', () => {
+  const list = roomThreads('!r', [], ['$gone']);
+  assert.equal(list.length, 1);
+  assert.equal(list[0].root_event_id, '$gone');
+  assert.equal(list[0].preview, '');
+});
+
+test('replies inside a thread are not treated as roots', () => {
+  const reply = root('$r', 'reply', 3, 10, { thread_root: '$a' });
+  assert.equal(roomThreads('!r', [reply], []).length, 0);
+});
+
+test('search matches preview text and sender', () => {
+  const [entry] = roomThreads('!r', [root('$a', 'Deploy plan for Friday', 2, 10)], []);
+  assert.ok(threadMatches(entry, 'deploy'));
+  assert.ok(threadMatches(entry, 'alice'));
+  assert.equal(threadMatches(entry, 'lunch'), false);
+});

malice

Commit 7ebc2472a9e3

Commit `7ebc2472a9e3`