feat: inbox list collapses by thread, Gmail-style

Direct follow-up to conversation threading: once a reply-back correctly
joins its thread, it showed up as a second row in the inbox list -- same
conversation, two rows, reading as a duplicate. groupByThread (api.jsx)
collapses same-thread-id rows client-side over whatever page is already
loaded: since the list is always sorted created_at desc, the first message
seen for a thread_id is its latest and becomes the representative row,
with later same-thread messages folding into its count/anyUnread/
anyStarred. A message with no thread_id (a fresh Compose) keeps its own
single-message group.

Stated plainly, not silently: this is a page-local collapse, not a true
thread count -- a thread whose messages straddle a page boundary still
shows as separate rows on each page, since poche has no server-side GROUP
BY (same reason messageFieldFacets scans-and-aggregates in Go).

Selecting a collapsed row's checkbox selects every message id in that
group at once, so bulk star/archive/delete/tag act on the whole
conversation. A collapsed row's star icon does the same via a new
onStarThread(ids, star) handler that reuses the existing /api/bulk
star/unstar action with explicit ids -- no new backend surface, inherits
that endpoint's already-fixed ownership check for free.

Verified in a real browser: a 2-message inbound thread (+ a separate
outbound reply correctly excluded from the Inbox view's direction=in
filter) collapsed into one row with a "2" badge; clicking it opened the
latest message with the pane's ThreadStrip showing all three messages
including the outbound reply; the row checkbox selected both underlying
ids (toolbar showed "(2)"); starring the row starred both underlying
messages, confirmed via a direct query, without touching the outbound
reply that was never part of that row's group.

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

Author: javimosch

AGENTS.md

@@ -727,6 +727,55 @@ There is still no "Starred" folder/filter in the sidebar (only the
 retention-exemption behavior — starred messages are never auto-cleaned).
 Not a bug, just not built yet.
 
+## Inbox list collapses by thread, Gmail-style (2026-08-10)
+
+Direct follow-up to conversation threading above: once a reply-back
+correctly joins its thread (see that section), it showed up as a SECOND
+row in the inbox list — same conversation, two rows, which reads as a
+duplicate even though it isn't one. Gmail collapses same-thread rows into
+one, with a "(N)" count and the latest message's preview.
+
+`groupByThread` (api.jsx) does this client-side, over whatever page of
+messages is already loaded: since `buildListPath` always sorts
+`created_at` desc, a single pass is enough — the FIRST message seen for a
+`thread_id` is necessarily the latest, so it becomes the representative
+row; every later message with the same `thread_id` just increments that
+row's count and folds into its `anyUnread`/`anyStarred` flags. A message
+with no `thread_id` (a fresh Compose — see the known limitation above)
+gets its own single-message group, keyed by its own id, so nothing merges
+incorrectly.
+
+**Stated plainly, not silently**: this is a page-local collapse, not a
+true thread count. A thread whose messages straddle a page boundary still
+shows as separate rows on each page — poche has no server-side GROUP BY
+(same reason `messageFieldFacets` scans-and-aggregates in Go, see the
+address-badge section above), so a fully page-independent collapse isn't
+available without loading the whole mailbox per request.
+
+Selecting a collapsed row's checkbox selects EVERY message id in that
+group at once (`m.threadIds`, not just the one shown) — so bulk star/
+archive/delete/tag act on the whole conversation, matching what the
+toolbar's live "(N)" counts already implied. Clicking a collapsed row's
+star icon does the same via a new `onStarThread(ids, star)` handler
+(app.jsx) that reuses the EXISTING `/api/bulk` star/unstar action with
+explicit ids — no new backend endpoint, and it inherits that endpoint's
+already-fixed ownership check for free. `allIds`/`pageOn`/"select page"
+still operate over the raw, ungrouped message list, so their semantics
+("every message loaded on this page") stay exactly what they were before
+grouping existed — a grouped row's checkbox is just a derived view over
+the same underlying `checked` array.
+
+Verified in a real browser: seeded a 3-message thread (original inbound +
+our reply, direction=out, correctly excluded from the Inbox view's
+`direction=in` filter + a follow-up reply-back, direction=in); the Inbox
+list correctly showed ONE row for the two inbound messages with a "2"
+badge and the follow-up's own preview; clicking it opened the latest
+message with the pane's ThreadStrip showing all THREE messages including
+the outbound reply; the row checkbox selected both underlying ids at once
+(toolbar showed "(2)"); the star icon starred both underlying inbound
+messages via `onStarThread`, confirmed via a direct query — and did NOT
+touch the outbound reply, which was never part of that row's group.
+
 ## Compose formats (v0.3.3+)
 
 `POST /api/compose` takes `format`: `text` (default), `html`, or `markdown`.

ui/js/api.jsx

@@ -272,6 +272,49 @@ function rowFromItem(it) {
   return Object.assign({ id: it.id }, doc);
 }
 
+// groupByThread collapses a message list into one row per conversation, so
+// a follow-up reply doesn't show up as a second, seemingly-duplicate inbox
+// row (see the message pane's ThreadStrip for the full conversation, and
+// AGENTS.md's threading section for how thread_id is kept consistent).
+// `items` must already be sorted newest-first (buildListPath always sorts
+// created_at desc) — that ordering is what lets this collapse in one pass:
+// the FIRST message seen for a thread_id is necessarily its latest, so it
+// becomes the representative row and everything after just adds to its
+// count/unread/starred state. Messages without a thread_id (a fresh
+// Compose — see AGENTS.md's known limitation) each form their own
+// single-message group, keyed by their own id.
+//
+// Important limitation, stated plainly rather than silently: this only
+// collapses threads within the messages already loaded on the CURRENT
+// page. A thread whose messages straddle a page boundary will still show
+// as separate rows on each page — poche has no server-side GROUP BY (see
+// messageFieldFacets' own comment on this), so a fully page-independent
+// collapse isn't available without loading the whole mailbox up front.
+function groupByThread(items) {
+  const order = [];
+  const byThread = new Map();
+  for (const m of items) {
+    const key = m.thread_id || m.id;
+    let g = byThread.get(key);
+    if (!g) {
+      g = Object.assign({}, m, {
+        threadIds: [m.id],
+        threadCount: 1,
+        anyUnread: !!m.unread,
+        anyStarred: !!m.starred,
+      });
+      byThread.set(key, g);
+      order.push(g);
+    } else {
+      g.threadIds.push(m.id);
+      g.threadCount += 1;
+      if (m.unread) g.anyUnread = true;
+      if (m.starred) g.anyStarred = true;
+    }
+  }
+  return order;
+}
+
 function tagNamesFromPage(data) {
   return (data?.items || [])
     .map((it) => {

ui/js/app-layout.jsx

@@ -37,6 +37,7 @@ function AppLayout({
   busy,
   onToggleUnread,
   onStar,
+  onStarThread,
   onArchive,
   onUnarchive,
   onDelete,
@@ -167,6 +168,7 @@ function AppLayout({
             selected={selected}
             onSelect={setSelected}
             onStar={onStar}
+            onStarThread={onStarThread}
             loading={loading}
             checked={checked}
             setChecked={setChecked}

ui/js/app.jsx

@@ -301,6 +301,24 @@ function App() {
       .finally(() => setBusy(false));
   };
 
+  // Stars/unstars every message in a collapsed thread row at once (see
+  // groupByThread, api.jsx) — matches Gmail's own "starring a conversation
+  // stars every message in it" behavior. Reuses the bulk endpoint's
+  // existing per-id star/unstar action rather than adding new backend
+  // surface: it already accepts explicit ids and is already
+  // ownership-checked (see messages.go/bulk.go's cross-tenant IDOR fixes).
+  const onStarThread = (ids, star) => {
+    if (!token || !ids || !ids.length) return;
+    setBusy(true);
+    bulkFetch(token, { action: star ? "star" : "unstar", ids })
+      .then(refreshAfter)
+      .catch((e) => {
+        console.error(e);
+        alert(String(e.message || e));
+      })
+      .finally(() => setBusy(false));
+  };
+
   const onReply = (text, from, format) => {
     if (!msg) return Promise.resolve();
     setBusy(true);
@@ -409,6 +427,7 @@ function App() {
       busy={busy}
       onToggleUnread={onToggleUnread}
       onStar={onStar}
+      onStarThread={onStarThread}
       onArchive={() => runOne("archive")}
       onUnarchive={() => runOne("unarchive")}
       onDelete={() => runOne("delete")}

ui/js/components.jsx

@@ -336,6 +336,7 @@ function MessageList({
   selected,
   onSelect,
   onStar,
+  onStarThread,
   loading,
   checked,
   setChecked,
@@ -344,9 +345,16 @@ function MessageList({
   setSelectAllPages,
 }) {
   const { t, lang } = useI18n();
+  // "select page"/select-all-pages still operate on every raw message id
+  // loaded, not one per collapsed row — checking a single grouped row below
+  // adds/removes its whole threadIds set, so the two stay consistent.
   const allIds = items.map((m) => m.id);
   const pageOn = allIds.length > 0 && allIds.every((id) => checked.includes(id));
   const multiPage = total > allIds.length && allIds.length > 0;
+  // Collapses same-thread rows (e.g. a received message + your reply to it)
+  // into one — see groupByThread's own comment (api.jsx) for what this does
+  // and does NOT do (page-local only, not a true server-side thread count).
+  const groups = groupByThread(items);
 
   if (loading) return <div className="p-6 text-ink-muted text-sm">{t("loading")}</div>;
   if (!items.length) {
@@ -377,9 +385,9 @@ function MessageList({
           </label>
         )}
       </div>
-      {items.map((m) => {
+      {groups.map((m) => {
         const active = selected === m.id;
-        const on = selectAllPages || checked.includes(m.id);
+        const on = selectAllPages || m.threadIds.every((id) => checked.includes(id));
         return (
           <div
             key={m.id}
@@ -396,26 +404,32 @@ function MessageList({
                 e.stopPropagation();
                 setSelectAllPages(false);
                 setChecked(
-                  e.target.checked ? checked.concat([m.id]) : checked.filter((x) => x !== m.id)
+                  e.target.checked
+                    ? checked.concat(m.threadIds.filter((id) => !checked.includes(id)))
+                    : checked.filter((x) => !m.threadIds.includes(x))
                 );
               }}
             />
             <button
               className={
                 "text-base leading-none shrink-0 " +
-                (m.starred ? "text-accent" : "text-ink-dim hover:text-accent")
+                (m.anyStarred ? "text-accent" : "text-ink-dim hover:text-accent")
               }
-              title={m.starred ? "Unstar" : "Star"}
+              title={m.anyStarred ? "Unstar" : "Star"}
               onClick={(e) => {
                 e.stopPropagation();
-                onStar(m.id, !m.starred);
+                if (m.threadCount > 1) {
+                  onStarThread(m.threadIds, !m.anyStarred);
+                } else {
+                  onStar(m.id, !m.anyStarred);
+                }
               }}
             >
-              {m.starred ? "★" : "☆"}
+              {m.anyStarred ? "★" : "☆"}
             </button>
             <button className="flex-1 min-w-0 text-left" onClick={() => onSelect(m.id)}>
               <div className="flex items-baseline justify-between gap-2">
-                <span className={"text-sm truncate " + (m.unread ? "font-semibold text-ink" : "text-ink-muted")}>
+                <span className={"text-sm truncate " + (m.anyUnread ? "font-semibold text-ink" : "text-ink-muted")}>
                   {m.direction === "out" ? t("to_prefix", m.to_addr || "") : m.from_addr}
                 </span>
                 <span className="text-[0.76rem] font-mono text-ink-dim shrink-0 tabular-nums">
@@ -424,9 +438,14 @@ function MessageList({
               </div>
               <div className="flex items-baseline gap-1.5 mt-0.5 min-w-0">
                 {m.direction !== "out" && m.to_addr && <AddressBadge address={m.to_addr} />}
-                <span className={"text-sm truncate " + (m.unread ? "text-ink" : "text-ink-muted")}>
+                <span className={"text-sm truncate " + (m.anyUnread ? "text-ink" : "text-ink-muted")}>
                   {m.subject}
                 </span>
+                {m.threadCount > 1 && (
+                  <span className="shrink-0 text-[0.7rem] font-mono text-ink-dim px-1 rounded bg-paper-line/60">
+                    {m.threadCount}
+                  </span>
+                )}
               </div>
               <div className="text-xs text-ink-dim truncate mt-0.5">{m.preview}</div>
             </button>