@remit/web-client 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "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/FlaggedPane.tsx

@@ -17,7 +17,7 @@
  */
 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 { ReadingPaneEmpty, useAppShellLayout } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import {
@@ -128,14 +128,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 +160,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 +224,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/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}