@remit/web-client 0.0.15 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/BriefPane.tsx

@@ -14,7 +14,11 @@
  */
 import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { ReadingPaneEmpty, type SearchResult } from "@remit/ui";
+import {
+	ReadingPaneEmpty,
+	type SearchResult,
+	useAppShellLayout,
+} from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import {
@@ -184,14 +188,20 @@ function BriefList() {
  */
 function BriefReading() {
 	const { conversation } = useBriefPane();
-	const { onToggleIntelligence } = useMailContext();
+	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
+	// The rail's own width gate, not the shell tier: between 1024 and 1280 the
+	// reading pane is mounted but the rail is not, so "enabled" would promise an
+	// open that cannot happen.
+	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
+	const hasThread = Boolean(conversation);
+	const canToggleIntelligence = railFits && hasThread;
 
 	return (
 		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 			<MessageToolbar
-				hasThread={Boolean(conversation)}
-				intelligenceOpen={false}
-				showIntelligenceToggle={false}
+				hasThread={hasThread}
+				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
+				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
@@ -211,6 +221,24 @@ function BriefReading() {
 	);
 }
 
+/**
+ * Intelligence pane: IntelligencePane for the thread open in the brief.
+ * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
+ */
+function BriefIntelligence() {
+	const { selectedThread } = useBriefPane();
+	const { onToggleIntelligence } = useMailContext();
+
+	return (
+		<IntelligencePane
+			onClose={onToggleIntelligence}
+			thread={selectedThread}
+			mailboxId={selectedThread?.mailboxId}
+			accountId={selectedThread?.accountId}
+		/>
+	);
+}
+
 /**
  * Phone view: ConversationView when thread is open, or the DailyBrief list.
  */
@@ -272,6 +300,7 @@ function BriefPhone() {
 const BriefPane = Object.assign(BriefPaneProvider, {
 	List: BriefList,
 	Reading: BriefReading,
+	Intelligence: BriefIntelligence,
 	Phone: BriefPhone,
 });
 

package/src/components/mail/FlaggedList.tsx

@@ -1,28 +1,28 @@
 /**
  * FlaggedList — a FLAT, cross-account inbox of starred mail.
  *
- * Reads GET /threads with `starred=true`, which is served by the `byStarred`
- * index and returns every starred thread in the config across all non-muted
- * mailboxes, paged. Starredness is decided server-side from `hasStars`; the
- * client neither re-filters nor caps the set, so a starred thread outside the
- * newest inbox page still appears. Rendered as one continuous list (no category
+ * Reads the starred listing through `useStarredThreads` — GET /threads with
+ * `starred=true`, served by the `byStarred` index — which returns every starred
+ * thread in the config across all non-muted mailboxes, paged. `FlaggedPane`
+ * resolves the open thread from that same hook, so every row rendered here can
+ * be opened. Starredness is decided server-side from `hasStars`; the client
+ * neither re-filters nor caps the set, so a starred thread outside the newest
+ * inbox page still appears. Rendered as one continuous list (no category
  * sections). The shared `MailViewChrome` owns the `MailHeader` + filter
  * expando; the kit `MessageListPane` (flat, no `briefFilters`) owns the loading
  * / empty / error chrome and keyboard hints, with a consumer-supplied
  * `listBody` so the real rows render at every width.
  */
-import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { unifiedThreadOperationsListAllThreads } from "@remit/api-http-client/sdk.gen.ts";
 import {
 	ComfortableRow,
 	flaggedFilterConfig,
 	MessageListPane,
 	type ThreadRowData,
 } from "@remit/ui";
-import { useInfiniteQuery } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
+import { useStarredThreads } from "@/hooks/useStarredThreads";
 import {
 	matchesBriefSearch,
 	matchesSearchTokens,
@@ -72,7 +72,7 @@ export function FlaggedList({
 	}, []);
 
 	const {
-		data: threadsData,
+		threads,
 		isLoading,
 		isError,
 		error,
@@ -80,25 +80,7 @@ export function FlaggedList({
 		fetchNextPage,
 		hasNextPage,
 		isFetchingNextPage,
-	} = useInfiniteQuery({
-		queryKey: unifiedThreadOperationsListAllThreadsQueryKey({
-			query: { starred: true, order: "desc" },
-		}),
-		queryFn: async ({ pageParam }) => {
-			const { data } = await unifiedThreadOperationsListAllThreads({
-				query: {
-					starred: true,
-					order: "desc",
-					continuationToken: pageParam,
-				},
-				throwOnError: true,
-			});
-			return data;
-		},
-		initialPageParam: undefined as string | undefined,
-		getNextPageParam: (lastPage) => lastPage.continuationToken,
-		staleTime: 60_000,
-	});
+	} = useStarredThreads();
 
 	const { freeText: sq, tokens: queryTokens } = parseSearchTokens(
 		searchQuery.trim().toLowerCase(),
@@ -109,9 +91,7 @@ export function FlaggedList({
 		const predicates = Array.from(activeFilters)
 			.map((id) => FILTER_PREDICATES[id])
 			.filter((p): p is (t: ThreadRowData) => boolean => p != null);
-		return dedupeByThread(
-			(threadsData?.pages ?? []).flatMap((page) => page.items ?? []),
-		)
+		return dedupeByThread(threads)
 			.map(toThreadRowData)
 			.filter(
 				(t) =>
@@ -120,7 +100,7 @@ export function FlaggedList({
 					(!sq || matchesBriefSearch(t, sq)) &&
 					matchesSearchTokens(t, queryTokens),
 			);
-	}, [threadsData, selectedCategory, activeFilters, sq, queryTokens]);
+	}, [threads, selectedCategory, activeFilters, sq, queryTokens]);
 
 	const preset = useMemo(() => flaggedFilterConfig(), []);
 

package/src/components/mail/FlaggedPane.tsx

@@ -2,9 +2,14 @@
  * FlaggedPane — compound component for the Flagged virtual mailbox
  * (/mail/flagged route).
  *
- * Mirrors BriefPane: it reads the unified cross-account thread list to resolve
- * the open thread and owns the list / reading / phone slots. The list itself is
- * a FLAT inbox of starred mail (see `FlaggedList`), not the sectioned brief.
+ * Mirrors BriefPane in shape: it resolves the open thread and owns the list /
+ * reading / phone slots. The list itself is a FLAT inbox of starred mail (see
+ * `FlaggedList`), not the sectioned brief.
+ *
+ * The selection resolves from the starred listing, the same query that produced
+ * the rows. The unified listing is INBOX-scoped, so resolving against it left
+ * every starred thread filed elsewhere — Sent, an archive folder, anything past
+ * the inbox window — visible in the list but impossible to open (issue #70).
  *
  *   <FlaggedPane selectedMessageId={...}>
  *     <AppShellSlotted
@@ -15,10 +20,8 @@
  *
  * On phone, use `<FlaggedPane.Phone />` instead.
  */
-import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { ReadingPaneEmpty } from "@remit/ui";
-import { useQuery } from "@tanstack/react-query";
+import { ReadingPaneEmpty, useAppShellLayout } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
@@ -32,6 +35,7 @@ import { ConversationView } from "@/components/mail/ConversationView";
 import { FlaggedList } from "@/components/mail/FlaggedList";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
+import { useStarredThreads } from "@/hooks/useStarredThreads";
 import { useMailContext } from "@/lib/mail-context";
 
 /* ------------------------------------------------------------------ */
@@ -68,15 +72,12 @@ function FlaggedPaneProvider({
 }: FlaggedPaneProps) {
 	const navigate = useNavigate();
 
-	const { data: threadsData } = useQuery({
-		...unifiedThreadOperationsListAllThreadsOptions(),
-		staleTime: 60_000,
-	});
+	const { threads } = useStarredThreads();
 
 	const selectedThread = useMemo(() => {
 		if (!selectedMessageId) return undefined;
-		return threadsData?.items.find((t) => t.messageId === selectedMessageId);
-	}, [threadsData, selectedMessageId]);
+		return threads.find((t) => t.messageId === selectedMessageId);
+	}, [threads, selectedMessageId]);
 
 	const handleSelectMessage = useCallback(
 		(id: string) => {
@@ -128,14 +129,20 @@ function FlaggedListSlot() {
  */
 function FlaggedReading() {
 	const { selectedThread } = useFlaggedPane();
-	const { onToggleIntelligence } = useMailContext();
+	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
+	// The rail's own width gate, not the shell tier: between 1024 and 1280 the
+	// reading pane is mounted but the rail is not, so "enabled" would promise an
+	// open that cannot happen.
+	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
+	const hasThread = Boolean(selectedThread);
+	const canToggleIntelligence = railFits && hasThread;
 
 	return (
 		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 			<MessageToolbar
-				hasThread={Boolean(selectedThread)}
-				intelligenceOpen={false}
-				showIntelligenceToggle={false}
+				hasThread={hasThread}
+				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
+				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
@@ -154,6 +161,24 @@ function FlaggedReading() {
 	);
 }
 
+/**
+ * Intelligence pane: IntelligencePane for the open thread.
+ * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
+ */
+function FlaggedIntelligence() {
+	const { selectedThread } = useFlaggedPane();
+	const { onToggleIntelligence } = useMailContext();
+
+	return (
+		<IntelligencePane
+			onClose={onToggleIntelligence}
+			thread={selectedThread}
+			mailboxId={selectedThread?.mailboxId}
+			accountId={selectedThread?.accountId}
+		/>
+	);
+}
+
 /** Phone view: ConversationView when a thread is open, else the flat list. */
 function FlaggedPhone() {
 	const { selectedThread, onCloseThread } = useFlaggedPane();
@@ -200,6 +225,7 @@ function FlaggedPhone() {
 const FlaggedPane = Object.assign(FlaggedPaneProvider, {
 	List: FlaggedListSlot,
 	Reading: FlaggedReading,
+	Intelligence: FlaggedIntelligence,
 	Phone: FlaggedPhone,
 });
 

package/src/components/mail/MailboxPane.tsx

@@ -32,6 +32,7 @@ import {
 	ReadingPaneEmpty,
 	type RescueCandidate,
 	type SearchResult,
+	useAppShellLayout,
 } from "@remit/ui";
 import {
 	keepPreviousData,
@@ -179,7 +180,6 @@ interface MailboxPaneContextValue {
 	onSelectFilterCategory: (id: string) => void;
 	onToggleFilterAttribute: (id: string) => void;
 	onClearFilters: () => void;
-	showIntelligence: boolean;
 	intelligenceOpen: boolean;
 	onToggleIntelligence: () => void;
 	// List actions
@@ -782,13 +782,11 @@ function MailboxPaneProvider({
 		}
 	}, [normalizedSearchQuery, mailboxType, telemetry]);
 
-	const hasThread = Boolean(selectedThread);
 	const hasRemitDraftOpen =
 		isDraftsMailbox &&
 		composeState.isOpen &&
 		!!composeState.outboxMessageId &&
 		!selectedThread;
-	const showIntelligence = isDesktop && intelligenceOpen && hasThread;
 
 	useTriageKeyboard({
 		// A modal owns the keyboard outright. Suspending the layer is what keeps a
@@ -868,7 +866,6 @@ function MailboxPaneProvider({
 		onSelectFilterCategory,
 		onToggleFilterAttribute,
 		onClearFilters,
-		showIntelligence,
 		intelligenceOpen,
 		onToggleIntelligence,
 		onDeleteMessages: handleDeleteMessages,
@@ -1081,7 +1078,7 @@ function MailboxReading() {
 		selectedThread,
 		conversation,
 		hasRemitDraftOpen,
-		showIntelligence,
+		intelligenceOpen,
 		onToggleIntelligence,
 		toolbarComposeRequest,
 		onToolbarReply,
@@ -1094,9 +1091,12 @@ function MailboxReading() {
 		onToolbarMove,
 		composeState,
 	} = useMailboxPane();
-	const tier = useLayoutTier();
-	const isDesktop = tier === "desktop";
+	// The rail's own width gate, not the shell tier: between 1024 and 1280 the
+	// reading pane is mounted but the rail is not, so "enabled" would promise an
+	// open that cannot happen.
+	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
 	const hasThread = Boolean(conversation);
+	const canToggleIntelligence = railFits && hasThread;
 
 	const detailPane =
 		composeState.isOpen && !conversation ? (
@@ -1124,8 +1124,8 @@ function MailboxReading() {
 		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 			<MessageToolbar
 				hasThread={hasThread}
-				intelligenceOpen={showIntelligence}
-				showIntelligenceToggle={isDesktop && hasThread}
+				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
+				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
 				onReply={hasThread ? onToolbarReply : undefined}
 				onReplyAll={hasThread ? onToolbarReplyAll : undefined}

package/src/components/mail/MessageToolbar.render.test.ts

@@ -69,7 +69,7 @@ describe("MessageToolbar carries message context only (#49)", () => {
 			createElement(MessageToolbar, {
 				hasThread,
 				intelligenceOpen: false,
-				showIntelligenceToggle: true,
+				canToggleIntelligence: true,
 				onToggleIntelligence: () => undefined,
 			}) as never,
 		);
@@ -94,3 +94,31 @@ describe("MessageToolbar carries message context only (#49)", () => {
 		assert.match(html, /intelligence sidebar/);
 	});
 });
+
+/**
+ * The toggle holds its slot whatever the view and the selection are (#52); it
+ * reports "cannot act" by being disabled, not by leaving the bar.
+ */
+describe("MessageToolbar keeps the intelligence toggle in place (#52)", () => {
+	const render = (canToggleIntelligence: boolean): string =>
+		renderToString(
+			createElement(MessageToolbar, {
+				hasThread: false,
+				intelligenceOpen: false,
+				canToggleIntelligence,
+				onToggleIntelligence: () => undefined,
+			}) as never,
+		);
+
+	it("renders the toggle when it cannot open a rail", () => {
+		assert.match(render(false), /aria-label="Show intelligence sidebar"/);
+	});
+
+	it("disables it rather than dropping it from the bar", () => {
+		assert.match(render(false), /\sdisabled(=""|\s|>)/);
+	});
+
+	it("leaves it pressable once a rail can open", () => {
+		assert.equal(/\sdisabled(=""|\s|>)/.test(render(true)), false);
+	});
+});

package/src/components/mail/MessageToolbar.tsx

@@ -1,5 +1,8 @@
-import { Button, type MailAction, MailActionToolbar } from "@remit/ui";
-import { Info } from "lucide-react";
+import {
+	IntelligenceToggle,
+	type MailAction,
+	MailActionToolbar,
+} from "@remit/ui";
 import { useState } from "react";
 import { tooltipForAction } from "@/lib/keymap";
 import { MoveToTrigger } from "./MoveToTrigger";
@@ -13,19 +16,21 @@ import { MoveToTrigger } from "./MoveToTrigger";
  * Search, compose, bug report and the account menu are not message context;
  * they live in the app top bar above every pane (`MailTopBar`, #49).
  *
- * Buttons are always pressable (never `disabled`): with no thread open a press
- * is a no-op that surfaces a one-line inline explanation rather than greying
- * out (`doc/rules/ux.md`).
+ * The control set is fixed: every button occupies the same slot on every view
+ * and in every selection state (#52). The mail verbs stay pressable with no
+ * thread open — a press is a no-op that surfaces a one-line inline explanation
+ * (`doc/rules/ux.md`). The intelligence toggle greys out instead, because it
+ * has nothing to explain: it opens a rail, and there is no rail to open.
  */
 export interface MessageToolbarProps {
 	hasThread: boolean;
 	intelligenceOpen: boolean;
 	/**
-	 * Whether the intelligence toggle is shown at all. The rail is contextual
-	 * to an open message, so the toggle only appears once a thread is selected
-	 * (matches the remit-ui AppShell reference) — it never opens an empty rail.
+	 * Whether pressing the intelligence toggle would open a rail: the view has
+	 * one, the width allows it, and a thread is selected. The button renders
+	 * either way — disabled when false, never absent (#52).
 	 */
-	showIntelligenceToggle: boolean;
+	canToggleIntelligence: boolean;
 	onToggleIntelligence: () => void;
 
 	/* ---- wired action callbacks (omit to keep the no-op-explain behaviour) ---- */
@@ -60,7 +65,7 @@ const OPEN_FIRST = "Open a message first";
 export const MessageToolbar = ({
 	hasThread,
 	intelligenceOpen,
-	showIntelligenceToggle,
+	canToggleIntelligence,
 	onToggleIntelligence,
 	onReply,
 	onReplyAll,
@@ -103,24 +108,11 @@ export const MessageToolbar = ({
 				) : undefined
 			}
 		>
-			{showIntelligenceToggle && (
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={<Info className="size-4" />}
-					title="Intelligence"
-					aria-label={
-						intelligenceOpen
-							? "Hide intelligence sidebar"
-							: "Show intelligence sidebar"
-					}
-					aria-pressed={intelligenceOpen}
-					onClick={onToggleIntelligence}
-					className={
-						intelligenceOpen ? "bg-accent-2-soft text-accent-2" : undefined
-					}
-				/>
-			)}
+			<IntelligenceToggle
+				open={intelligenceOpen}
+				enabled={canToggleIntelligence}
+				onToggle={onToggleIntelligence}
+			/>
 		</MailActionToolbar>
 	);
 };

package/src/hooks/useStarredThreads.test.ts

@@ -0,0 +1,143 @@
+/**
+ * useStarredThreads — regression cover for issue #70.
+ *
+ * The Starred pane rendered its rows from `GET /threads?starred=true` but
+ * resolved the open thread from the unfiltered (INBOX-scoped) listing. Rows for
+ * starred mail filed outside INBOX therefore had nothing to resolve to and
+ * opened no reading pane.
+ *
+ * Strategy follows useRescueCandidates.test.ts: pre-seed a QueryClient under the
+ * key the hook generates and render it synchronously, so the queryFn never
+ * fires. The last two cases are the ones that fail if the wrong listing comes
+ * back — the unfiltered key is seeded alongside and must not be read.
+ */
+
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	starredThreadsQueryKey,
+	useStarredThreads,
+} from "./useStarredThreads.js";
+
+interface Page {
+	items: RemitImapThreadMessageResponse[];
+	continuationToken?: string;
+}
+
+function makeThread(
+	messageId: string,
+	overrides: Partial<RemitImapThreadMessageResponse> = {},
+): RemitImapThreadMessageResponse {
+	return {
+		messageId,
+		threadMessageId: `tm-${messageId}`,
+		threadId: `t-${messageId}`,
+		accountConfigId: "acc",
+		mailboxId: "mb-inbox",
+		sentDate: 1_000_000,
+		isRead: false,
+		hasAttachment: false,
+		hasStars: true,
+		isDeleted: false,
+		createdAt: 1_000_000,
+		updatedAt: 1_000_000,
+		fromName: "Anna de Vries",
+		fromEmail: "anna@example.nl",
+		subject: `subject ${messageId}`,
+		snippet: "…",
+		senderTrust: "vip",
+		...overrides,
+	} as RemitImapThreadMessageResponse;
+}
+
+/**
+ * Renders the hook against a cache holding `starredPages` under the starred key
+ * and `unfilteredItems` under the unfiltered one, so a hook reading the wrong
+ * listing returns the wrong threads instead of returning nothing.
+ */
+function renderHook(
+	starredPages: Page[],
+	unfilteredItems: RemitImapThreadMessageResponse[] = [],
+): RemitImapThreadMessageResponse[] {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	client.setQueryData(starredThreadsQueryKey(), {
+		pages: starredPages,
+		pageParams: starredPages.map((_, index) =>
+			index === 0 ? undefined : `page-${index}`,
+		),
+	});
+	client.setQueryData(unifiedThreadOperationsListAllThreadsQueryKey(), {
+		items: unfilteredItems,
+	});
+
+	let captured: RemitImapThreadMessageResponse[] = [];
+
+	function Capture() {
+		captured = useStarredThreads().threads;
+		return null;
+	}
+
+	renderToString(
+		createElement(
+			QueryClientProvider,
+			{ client },
+			createElement(Capture),
+		) as never,
+	);
+
+	return captured;
+}
+
+describe("starredThreadsQueryKey", () => {
+	test("asks for the starred listing, newest first", () => {
+		const [params] = starredThreadsQueryKey() as [
+			{ query?: { starred?: boolean; order?: string } },
+		];
+		assert.equal(params.query?.starred, true);
+		assert.equal(params.query?.order, "desc");
+	});
+});
+
+describe("useStarredThreads", () => {
+	test("returns no threads when the listing is empty", () => {
+		assert.deepEqual(renderHook([{ items: [] }]), []);
+	});
+
+	test("flattens every loaded page, in page order", () => {
+		const threads = renderHook([
+			{ items: [makeThread("m1"), makeThread("m2")], continuationToken: "p2" },
+			{ items: [makeThread("m3")] },
+		]);
+		assert.deepEqual(
+			threads.map((thread) => thread.messageId),
+			["m1", "m2", "m3"],
+		);
+	});
+
+	test("returns a starred thread that lives outside INBOX", () => {
+		// The case issue #70 could not open: starred, filed in Sent, and absent
+		// from the unfiltered listing the pane used to resolve against.
+		const sent = makeThread("m-sent", { mailboxId: "mb-sent" });
+		const threads = renderHook([{ items: [sent] }], [makeThread("m-inbox")]);
+		assert.deepEqual(
+			threads.map((thread) => thread.messageId),
+			["m-sent"],
+		);
+		assert.equal(
+			threads.find((thread) => thread.messageId === "m-sent")?.mailboxId,
+			"mb-sent",
+		);
+	});
+
+	test("does not read the unfiltered INBOX listing", () => {
+		const threads = renderHook([{ items: [] }], [makeThread("m-inbox")]);
+		assert.deepEqual(threads, []);
+	});
+});

package/src/hooks/useStarredThreads.ts

@@ -0,0 +1,78 @@
+/**
+ * The starred listing — `GET /threads?starred=true`, served by the `byStarred`
+ * index — as one hook, so the Starred pane's list and its selection resolve
+ * from the same query.
+ *
+ * The two are the same cache entry, not two requests: they share a query key,
+ * so `threads` here is exactly the set of rows the list rendered. Resolving a
+ * selection from any other listing reintroduces issue #70 — the INBOX-scoped
+ * unified listing cannot see a starred thread filed elsewhere, so its row is
+ * clickable but resolves to nothing and no reading pane opens.
+ */
+import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { unifiedThreadOperationsListAllThreads } from "@remit/api-http-client/sdk.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+export const starredThreadsQueryKey = () =>
+	unifiedThreadOperationsListAllThreadsQueryKey({
+		query: { starred: true, order: "desc" },
+	});
+
+interface StarredThreads {
+	/** Every starred thread across the pages loaded so far, newest first. */
+	threads: RemitImapThreadMessageResponse[];
+	isLoading: boolean;
+	isError: boolean;
+	error: unknown;
+	refetch: () => void;
+	fetchNextPage: () => void;
+	hasNextPage: boolean;
+	isFetchingNextPage: boolean;
+}
+
+export function useStarredThreads(): StarredThreads {
+	const {
+		data,
+		isLoading,
+		isError,
+		error,
+		refetch,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+	} = useInfiniteQuery({
+		queryKey: starredThreadsQueryKey(),
+		queryFn: async ({ pageParam }) => {
+			const { data: page } = await unifiedThreadOperationsListAllThreads({
+				query: {
+					starred: true,
+					order: "desc",
+					continuationToken: pageParam,
+				},
+				throwOnError: true,
+			});
+			return page;
+		},
+		initialPageParam: undefined as string | undefined,
+		getNextPageParam: (lastPage) => lastPage.continuationToken,
+		staleTime: 60_000,
+	});
+
+	const threads = useMemo(
+		() => (data?.pages ?? []).flatMap((page) => page.items ?? []),
+		[data],
+	);
+
+	return {
+		threads,
+		isLoading,
+		isError,
+		error,
+		refetch,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+	};
+}

package/src/routes/mail.tsx

@@ -298,7 +298,8 @@ function MailLayout() {
 					/>
 				</div>
 			) : onBriefRoute ? (
-				// Daily brief (/mail/) — no mailboxId param; 2-pane layout (no intelligence).
+				// Daily brief (/mail/) — no mailboxId param; same 3-pane layout as a
+				// mailbox: an open message has an intelligence rail here too (#52).
 				<BriefPane selectedMessageId={mobileSelectedMessageId}>
 					{isSinglePane ? (
 						<AppShellSlotted
@@ -316,7 +317,9 @@ function MailLayout() {
 							topBar={topBar}
 							list={<BriefPane.List />}
 							reading={<BriefPane.Reading />}
+							intelligence={<BriefPane.Intelligence />}
 							intelligenceOpen={intelligenceOpen}
+							hasThread={Boolean(mobileSelectedMessageId)}
 							overlay={overlayContent}
 							skeleton={<AppShellSkeleton />}
 							isLoading={isLoading || hasNoAccounts}
@@ -326,7 +329,7 @@ function MailLayout() {
 				</BriefPane>
 			) : onFlaggedRoute ? (
 				// Flagged virtual mailbox (/mail/flagged) — flat starred list across
-				// accounts; 2-pane layout (no intelligence), like the brief.
+				// accounts; same slots as the brief, intelligence rail included.
 				<FlaggedPane selectedMessageId={mobileSelectedMessageId}>
 					{isSinglePane ? (
 						<AppShellSlotted
@@ -344,7 +347,9 @@ function MailLayout() {
 							topBar={topBar}
 							list={<FlaggedPane.List />}
 							reading={<FlaggedPane.Reading />}
+							intelligence={<FlaggedPane.Intelligence />}
 							intelligenceOpen={intelligenceOpen}
+							hasThread={Boolean(mobileSelectedMessageId)}
 							overlay={overlayContent}
 							skeleton={<AppShellSkeleton />}
 							isLoading={isLoading || hasNoAccounts}
@@ -376,6 +381,7 @@ function MailLayout() {
 							reading={<MailboxPane.Reading />}
 							intelligence={<MailboxPane.Intelligence />}
 							intelligenceOpen={intelligenceOpen}
+							hasThread={Boolean(mobileSelectedMessageId)}
 							overlay={overlayContent}
 							skeleton={<AppShellSkeleton />}
 							isLoading={isLoading || hasNoAccounts}