@remit/web-client 0.0.143 → 0.0.145

package/src/lib/search-view.ts

@@ -10,6 +10,7 @@
  * on, so switching mailbox clears a stale query while a deep link or a saved
  * search that carries `q` still arrives with the query intact.
  */
+import { locationIsOnList } from "./mail-route";
 
 /**
  * The field text after a view transition, or `undefined` when nothing changes
@@ -36,19 +37,42 @@ export function committedSearchQuery(
 	return searchInput === "" ? "" : debouncedSearchInput;
 }
 
+export interface MirrorDecision {
+	/** The live field text. */
+	searchInput: string;
+	/** The debounced query the search APIs are running. */
+	committedQuery: string;
+	/** What the URL currently says the query is. */
+	urlQuery: string;
+	/** Where the router says the reader is, which is where a write would land. */
+	pathname: string;
+	/** The path of the list asking. */
+	listPath: string;
+}
+
 /**
- * Whether the committed query may be written back to the URL. Only a settled
- * one may: mid-debounce the committed value is the *previous* query, and
- * writing it would overwrite the URL that a deep link or a saved search just
- * arrived with — stripping `q` for as long as the debounce lasts, and taking
- * the search with it. The mirror waits for the field and the committed query to
- * agree, then writes only if the URL says something else.
+ * Whether a list may write the committed query into the URL.
+ *
+ * Only a settled query may: mid-debounce the committed value is the *previous*
+ * query, and writing it would overwrite the URL that a deep link or a saved
+ * search just arrived with — stripping `q` for as long as the debounce lasts,
+ * and taking the search with it. The mirror waits for the field and the
+ * committed query to agree, then writes only if the URL says something else.
+ *
+ * And only the list the reader is actually on may: a list stays mounted, effects
+ * and all, until the list they navigated to is ready to paint, by which time the
+ * address is already the new one. A write from the outgoing list in that window
+ * navigates back to itself, superseding the load in flight and replacing the
+ * entry the reader just pushed — they click Inbox and land on the brief.
  */
-export function shouldMirrorQuery(
-	searchInput: string,
-	committedQuery: string,
-	urlQuery: string,
-): boolean {
+export function shouldMirrorQuery({
+	searchInput,
+	committedQuery,
+	urlQuery,
+	pathname,
+	listPath,
+}: MirrorDecision): boolean {
+	if (!locationIsOnList(pathname, listPath)) return false;
 	if (committedQuery !== searchInput) return false;
 	return committedQuery !== urlQuery;
 }

package/src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { Route as OnboardingRouteImport } from './routes/onboarding'
 import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as MailIndexRouteImport } from './routes/mail/index'
 import { Route as MailMailboxIdRouteImport } from './routes/mail/$mailboxId'
+import { Route as MailBriefRouteImport } from './routes/mail/brief'
 import { Route as MailFlaggedRouteImport } from './routes/mail/flagged'
 import { Route as MailOutboxRouteImport } from './routes/mail/outbox'
 import { Route as SettingsIndexRouteImport } from './routes/settings/index'
@@ -26,6 +27,10 @@ import { Route as SettingsFoldersRouteImport } from './routes/settings/folders'
 import { Route as SettingsLabelsRouteImport } from './routes/settings/labels'
 import { Route as SettingsSendersRouteImport } from './routes/settings/senders'
 import { Route as SettingsSuggestedVipsRouteImport } from './routes/settings/suggested-vips'
+import { Route as MailMailboxIdIndexRouteImport } from './routes/mail/$mailboxId/index'
+import { Route as MailBriefIndexRouteImport } from './routes/mail/brief/index'
+import { Route as MailFlaggedIndexRouteImport } from './routes/mail/flagged/index'
+import { Route as MailOutboxIndexRouteImport } from './routes/mail/outbox/index'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
@@ -57,6 +62,11 @@ const MailMailboxIdRoute = MailMailboxIdRouteImport.update({
   path: '/$mailboxId',
   getParentRoute: () => MailRoute,
 } as any)
+const MailBriefRoute = MailBriefRouteImport.update({
+  id: '/brief',
+  path: '/brief',
+  getParentRoute: () => MailRoute,
+} as any)
 const MailFlaggedRoute = MailFlaggedRouteImport.update({
   id: '/flagged',
   path: '/flagged',
@@ -112,15 +122,36 @@ const SettingsSuggestedVipsRoute = SettingsSuggestedVipsRouteImport.update({
   path: '/suggested-vips',
   getParentRoute: () => SettingsRoute,
 } as any)
+const MailMailboxIdIndexRoute = MailMailboxIdIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => MailMailboxIdRoute,
+} as any)
+const MailBriefIndexRoute = MailBriefIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => MailBriefRoute,
+} as any)
+const MailFlaggedIndexRoute = MailFlaggedIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => MailFlaggedRoute,
+} as any)
+const MailOutboxIndexRoute = MailOutboxIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => MailOutboxRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/mail': typeof MailRouteWithChildren
   '/onboarding': typeof OnboardingRoute
   '/settings': typeof SettingsRouteWithChildren
-  '/mail/$mailboxId': typeof MailMailboxIdRoute
-  '/mail/flagged': typeof MailFlaggedRoute
-  '/mail/outbox': typeof MailOutboxRoute
+  '/mail/$mailboxId': typeof MailMailboxIdRouteWithChildren
+  '/mail/brief': typeof MailBriefRouteWithChildren
+  '/mail/flagged': typeof MailFlaggedRouteWithChildren
+  '/mail/outbox': typeof MailOutboxRouteWithChildren
   '/settings/accounts': typeof SettingsAccountsRoute
   '/settings/advanced': typeof SettingsAdvancedRoute
   '/settings/appearance': typeof SettingsAppearanceRoute
@@ -131,13 +162,14 @@ export interface FileRoutesByFullPath {
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail/': typeof MailIndexRoute
   '/settings/': typeof SettingsIndexRoute
+  '/mail/$mailboxId/': typeof MailMailboxIdIndexRoute
+  '/mail/brief/': typeof MailBriefIndexRoute
+  '/mail/flagged/': typeof MailFlaggedIndexRoute
+  '/mail/outbox/': typeof MailOutboxIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/onboarding': typeof OnboardingRoute
-  '/mail/$mailboxId': typeof MailMailboxIdRoute
-  '/mail/flagged': typeof MailFlaggedRoute
-  '/mail/outbox': typeof MailOutboxRoute
   '/settings/accounts': typeof SettingsAccountsRoute
   '/settings/advanced': typeof SettingsAdvancedRoute
   '/settings/appearance': typeof SettingsAppearanceRoute
@@ -148,6 +180,10 @@ export interface FileRoutesByTo {
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail': typeof MailIndexRoute
   '/settings': typeof SettingsIndexRoute
+  '/mail/$mailboxId': typeof MailMailboxIdIndexRoute
+  '/mail/brief': typeof MailBriefIndexRoute
+  '/mail/flagged': typeof MailFlaggedIndexRoute
+  '/mail/outbox': typeof MailOutboxIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -155,9 +191,10 @@ export interface FileRoutesById {
   '/mail': typeof MailRouteWithChildren
   '/onboarding': typeof OnboardingRoute
   '/settings': typeof SettingsRouteWithChildren
-  '/mail/$mailboxId': typeof MailMailboxIdRoute
-  '/mail/flagged': typeof MailFlaggedRoute
-  '/mail/outbox': typeof MailOutboxRoute
+  '/mail/$mailboxId': typeof MailMailboxIdRouteWithChildren
+  '/mail/brief': typeof MailBriefRouteWithChildren
+  '/mail/flagged': typeof MailFlaggedRouteWithChildren
+  '/mail/outbox': typeof MailOutboxRouteWithChildren
   '/settings/accounts': typeof SettingsAccountsRoute
   '/settings/advanced': typeof SettingsAdvancedRoute
   '/settings/appearance': typeof SettingsAppearanceRoute
@@ -168,6 +205,10 @@ export interface FileRoutesById {
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail/': typeof MailIndexRoute
   '/settings/': typeof SettingsIndexRoute
+  '/mail/$mailboxId/': typeof MailMailboxIdIndexRoute
+  '/mail/brief/': typeof MailBriefIndexRoute
+  '/mail/flagged/': typeof MailFlaggedIndexRoute
+  '/mail/outbox/': typeof MailOutboxIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -177,6 +218,7 @@ export interface FileRouteTypes {
     | '/onboarding'
     | '/settings'
     | '/mail/$mailboxId'
+    | '/mail/brief'
     | '/mail/flagged'
     | '/mail/outbox'
     | '/settings/accounts'
@@ -189,13 +231,14 @@ export interface FileRouteTypes {
     | '/settings/suggested-vips'
     | '/mail/'
     | '/settings/'
+    | '/mail/$mailboxId/'
+    | '/mail/brief/'
+    | '/mail/flagged/'
+    | '/mail/outbox/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/onboarding'
-    | '/mail/$mailboxId'
-    | '/mail/flagged'
-    | '/mail/outbox'
     | '/settings/accounts'
     | '/settings/advanced'
     | '/settings/appearance'
@@ -206,6 +249,10 @@ export interface FileRouteTypes {
     | '/settings/suggested-vips'
     | '/mail'
     | '/settings'
+    | '/mail/$mailboxId'
+    | '/mail/brief'
+    | '/mail/flagged'
+    | '/mail/outbox'
   id:
     | '__root__'
     | '/'
@@ -213,6 +260,7 @@ export interface FileRouteTypes {
     | '/onboarding'
     | '/settings'
     | '/mail/$mailboxId'
+    | '/mail/brief'
     | '/mail/flagged'
     | '/mail/outbox'
     | '/settings/accounts'
@@ -225,6 +273,10 @@ export interface FileRouteTypes {
     | '/settings/suggested-vips'
     | '/mail/'
     | '/settings/'
+    | '/mail/$mailboxId/'
+    | '/mail/brief/'
+    | '/mail/flagged/'
+    | '/mail/outbox/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -278,6 +330,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailMailboxIdRouteImport
       parentRoute: typeof MailRoute
     }
+    '/mail/brief': {
+      id: '/mail/brief'
+      path: '/brief'
+      fullPath: '/mail/brief'
+      preLoaderRoute: typeof MailBriefRouteImport
+      parentRoute: typeof MailRoute
+    }
     '/mail/flagged': {
       id: '/mail/flagged'
       path: '/flagged'
@@ -355,20 +414,98 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsSuggestedVipsRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/mail/$mailboxId/': {
+      id: '/mail/$mailboxId/'
+      path: '/'
+      fullPath: '/mail/$mailboxId/'
+      preLoaderRoute: typeof MailMailboxIdIndexRouteImport
+      parentRoute: typeof MailMailboxIdRoute
+    }
+    '/mail/brief/': {
+      id: '/mail/brief/'
+      path: '/'
+      fullPath: '/mail/brief/'
+      preLoaderRoute: typeof MailBriefIndexRouteImport
+      parentRoute: typeof MailBriefRoute
+    }
+    '/mail/flagged/': {
+      id: '/mail/flagged/'
+      path: '/'
+      fullPath: '/mail/flagged/'
+      preLoaderRoute: typeof MailFlaggedIndexRouteImport
+      parentRoute: typeof MailFlaggedRoute
+    }
+    '/mail/outbox/': {
+      id: '/mail/outbox/'
+      path: '/'
+      fullPath: '/mail/outbox/'
+      preLoaderRoute: typeof MailOutboxIndexRouteImport
+      parentRoute: typeof MailOutboxRoute
+    }
   }
 }
 
+interface MailMailboxIdRouteChildren {
+  MailMailboxIdIndexRoute: typeof MailMailboxIdIndexRoute
+}
+
+const MailMailboxIdRouteChildren: MailMailboxIdRouteChildren = {
+  MailMailboxIdIndexRoute: MailMailboxIdIndexRoute,
+}
+
+const MailMailboxIdRouteWithChildren = MailMailboxIdRoute._addFileChildren(
+  MailMailboxIdRouteChildren,
+)
+
+interface MailBriefRouteChildren {
+  MailBriefIndexRoute: typeof MailBriefIndexRoute
+}
+
+const MailBriefRouteChildren: MailBriefRouteChildren = {
+  MailBriefIndexRoute: MailBriefIndexRoute,
+}
+
+const MailBriefRouteWithChildren = MailBriefRoute._addFileChildren(
+  MailBriefRouteChildren,
+)
+
+interface MailFlaggedRouteChildren {
+  MailFlaggedIndexRoute: typeof MailFlaggedIndexRoute
+}
+
+const MailFlaggedRouteChildren: MailFlaggedRouteChildren = {
+  MailFlaggedIndexRoute: MailFlaggedIndexRoute,
+}
+
+const MailFlaggedRouteWithChildren = MailFlaggedRoute._addFileChildren(
+  MailFlaggedRouteChildren,
+)
+
+interface MailOutboxRouteChildren {
+  MailOutboxIndexRoute: typeof MailOutboxIndexRoute
+}
+
+const MailOutboxRouteChildren: MailOutboxRouteChildren = {
+  MailOutboxIndexRoute: MailOutboxIndexRoute,
+}
+
+const MailOutboxRouteWithChildren = MailOutboxRoute._addFileChildren(
+  MailOutboxRouteChildren,
+)
+
 interface MailRouteChildren {
-  MailMailboxIdRoute: typeof MailMailboxIdRoute
-  MailFlaggedRoute: typeof MailFlaggedRoute
-  MailOutboxRoute: typeof MailOutboxRoute
+  MailMailboxIdRoute: typeof MailMailboxIdRouteWithChildren
+  MailBriefRoute: typeof MailBriefRouteWithChildren
+  MailFlaggedRoute: typeof MailFlaggedRouteWithChildren
+  MailOutboxRoute: typeof MailOutboxRouteWithChildren
   MailIndexRoute: typeof MailIndexRoute
 }
 
 const MailRouteChildren: MailRouteChildren = {
-  MailMailboxIdRoute: MailMailboxIdRoute,
-  MailFlaggedRoute: MailFlaggedRoute,
-  MailOutboxRoute: MailOutboxRoute,
+  MailMailboxIdRoute: MailMailboxIdRouteWithChildren,
+  MailBriefRoute: MailBriefRouteWithChildren,
+  MailFlaggedRoute: MailFlaggedRouteWithChildren,
+  MailOutboxRoute: MailOutboxRouteWithChildren,
   MailIndexRoute: MailIndexRoute,
 }
 

package/src/router.tsx

@@ -1,5 +1,6 @@
 import type { QueryClient } from "@tanstack/react-query";
 import { createRouter } from "@tanstack/react-router";
+import { AppShellSkeleton } from "./components/layout/AppShellSkeleton";
 import { recordRoute } from "./lib/route-breadcrumbs";
 import type { Telemetry } from "./lib/telemetry";
 import { routeTree } from "./routeTree.gen";
@@ -16,6 +17,22 @@ export const createAppRouter = (
 		routeTree,
 		context: { queryClient },
 		defaultPreload: "intent",
+		// A route arrives with its own code, and each mail list carries a whole pane
+		// in it. Without a pending state the router keeps the previous route on
+		// screen for that fetch and first mount, under the new address — so the list
+		// the reader has left stays interactive: a click routes through its handlers
+		// and takes them back to it, and the keyboard drives its cursor. Preloading
+		// on intent does not close that: it fires on hover and focus, so it only
+		// moves the window's start, and it never applies to the navigations the
+		// keyboard shortcuts make.
+		//
+		// 200ms is above a preloaded transition, which lands in tens of milliseconds
+		// and so paints no skeleton at all, and below the point where a stale list
+		// invites a click. Once shown it stays 300ms, so a transition that settles
+		// just after the threshold does not strobe.
+		defaultPendingComponent: AppShellSkeleton,
+		defaultPendingMs: 200,
+		defaultPendingMinMs: 300,
 	});
 
 	router.subscribe("onResolved", (event) => {

package/src/routes/index.tsx

@@ -2,6 +2,6 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({
 	beforeLoad: () => {
-		throw redirect({ to: "/mail" });
+		throw redirect({ to: "/mail/brief" });
 	},
 });

package/src/routes/mail/$mailboxId/index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { MailboxPane } from "@/components/mail/MailboxPane";
+
+function MailboxReadingPane() {
+	return <MailboxPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/$mailboxId/")({
+	component: MailboxReadingPane,
+});

package/src/routes/mail/$mailboxId.tsx

@@ -1,27 +1,35 @@
 /**
- * /mail/$mailboxId route — shell activation only.
+ * /mail/$mailboxId — one folder, the fullest of the four list layouts: list,
+ * reading pane and intelligence rail.
  *
- * The component returns null because rendering is lifted to `mail.tsx`
- * which reads the active mailboxId via `useRouterState` and mounts
- * `<MailboxPane>` directly into `<AppShellSlotted>` slots. TanStack Router
- * still needs this file to:
- *   - Register the route so URL matching works
- *   - Validate the search params so selectedMessageId is properly typed
+ * The literal lists are declared as siblings and TanStack matches literals
+ * first, so a mailbox id can never be read as one of them.
  */
-import { createFileRoute } from "@tanstack/react-router";
-import { z } from "zod";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { MailShell } from "@/components/layout/MailShell";
+import { MailboxPane } from "@/components/mail/MailboxPane";
+import { useSearchMirror } from "@/hooks/useSearchMirror";
+import { mailboxSearchSchema } from "@/lib/mail-search";
 
-// Search schema includes q from parent route for proper inheritance
-const mailboxSearchSchema = z.object({
-	selectedMessageId: z.string().optional(),
-	// A tapped semantic "Related" hit can point at a message outside the loaded
-	// list; carrying its thread lets the mailbox open it directly (the mailbox is
-	// the route param). See `buildConversationTarget`.
-	selectedThreadId: z.string().optional(),
-	q: z.string().optional(),
-});
+function MailboxLayout() {
+	const { mailboxId } = Route.useParams();
+	const { selectedMessageId } = Route.useSearch();
+	useSearchMirror({ to: "/mail/$mailboxId", params: { mailboxId } });
+
+	return (
+		<MailboxPane mailboxId={mailboxId} selectedMessageId={selectedMessageId}>
+			<MailShell
+				phone={<MailboxPane.Phone />}
+				list={<MailboxPane.List />}
+				reading={<Outlet />}
+				intelligence={<MailboxPane.Intelligence />}
+				hasThread={Boolean(selectedMessageId)}
+			/>
+		</MailboxPane>
+	);
+}
 
 export const Route = createFileRoute("/mail/$mailboxId")({
-	component: () => null,
+	component: MailboxLayout,
 	validateSearch: mailboxSearchSchema,
 });

package/src/routes/mail/brief/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * The brief's reading pane. It is a route because the pane belongs to the list
+ * it was opened from; the thread and message segments arrive under it.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { BriefPane } from "@/components/mail/BriefPane";
+
+function BriefReadingPane() {
+	return <BriefPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/brief/")({
+	component: BriefReadingPane,
+});

package/src/routes/mail/brief.tsx

@@ -0,0 +1,50 @@
+/**
+ * /mail/brief — the daily brief, one of the four list layouts.
+ *
+ * The route mounts the list and the shell around it, and the reading pane is
+ * the `Outlet`, so what the pane shows is whatever route is matched under this
+ * one rather than a decision made somewhere above.
+ */
+import {
+	createFileRoute,
+	type ErrorComponentProps,
+	Outlet,
+} from "@tanstack/react-router";
+import { MailShell } from "@/components/layout/MailShell";
+import { BriefPane } from "@/components/mail/BriefPane";
+import { ErrorState } from "@/components/ui/ErrorState";
+import { useSearchMirror } from "@/hooks/useSearchMirror";
+import { briefSearchSchema } from "@/lib/mail-search";
+
+const BriefError = ({ error, reset }: ErrorComponentProps) => (
+	<div className="flex h-full items-center justify-center bg-canvas p-4">
+		<ErrorState
+			title="Couldn't load your mailboxes"
+			error={error}
+			onRetry={reset}
+		/>
+	</div>
+);
+
+function BriefLayout() {
+	const { selectedMessageId } = Route.useSearch();
+	useSearchMirror({ to: "/mail/brief" });
+
+	return (
+		<BriefPane selectedMessageId={selectedMessageId}>
+			<MailShell
+				phone={<BriefPane.Phone />}
+				list={<BriefPane.List />}
+				reading={<Outlet />}
+				intelligence={<BriefPane.Intelligence />}
+				hasThread={Boolean(selectedMessageId)}
+			/>
+		</BriefPane>
+	);
+}
+
+export const Route = createFileRoute("/mail/brief")({
+	component: BriefLayout,
+	validateSearch: briefSearchSchema,
+	errorComponent: BriefError,
+});

package/src/routes/mail/flagged/index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { FlaggedPane } from "@/components/mail/FlaggedPane";
+
+function FlaggedReadingPane() {
+	return <FlaggedPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/flagged/")({
+	component: FlaggedReadingPane,
+});

package/src/routes/mail/flagged.tsx

@@ -1,16 +1,19 @@
 /**
- * /mail/flagged route (Flagged virtual mailbox) — shell activation only.
+ * /mail/flagged — the Flagged virtual mailbox, one of the four list layouts.
  *
- * The component returns null because rendering is lifted to `mail.tsx`, which
- * detects the flagged route via `useRouterState` and mounts `<FlaggedPane>`
- * directly into `<AppShellSlotted>` slots — the same pattern the brief uses.
+ * A flat starred list across accounts; same slots as the brief, intelligence
+ * rail included.
  */
 import {
 	createFileRoute,
 	type ErrorComponentProps,
+	Outlet,
 } from "@tanstack/react-router";
-import { z } from "zod";
+import { MailShell } from "@/components/layout/MailShell";
+import { FlaggedPane } from "@/components/mail/FlaggedPane";
 import { ErrorState } from "@/components/ui/ErrorState";
+import { useSearchMirror } from "@/hooks/useSearchMirror";
+import { flaggedSearchSchema } from "@/lib/mail-search";
 
 const FlaggedError = ({ error, reset }: ErrorComponentProps) => (
 	<div className="flex h-full items-center justify-center bg-canvas p-4">
@@ -22,16 +25,25 @@ const FlaggedError = ({ error, reset }: ErrorComponentProps) => (
 	</div>
 );
 
-// `q` is inherited from the parent /mail route; re-declared here so it survives
-// this route's own search validation and isn't dropped when navigating with a
-// functional search updater.
-const flaggedSearchSchema = z.object({
-	selectedMessageId: z.string().optional(),
-	q: z.string().optional(),
-});
+function FlaggedLayout() {
+	const { selectedMessageId } = Route.useSearch();
+	useSearchMirror({ to: "/mail/flagged" });
+
+	return (
+		<FlaggedPane selectedMessageId={selectedMessageId}>
+			<MailShell
+				phone={<FlaggedPane.Phone />}
+				list={<FlaggedPane.List />}
+				reading={<Outlet />}
+				intelligence={<FlaggedPane.Intelligence />}
+				hasThread={Boolean(selectedMessageId)}
+			/>
+		</FlaggedPane>
+	);
+}
 
 export const Route = createFileRoute("/mail/flagged")({
-	component: () => null,
+	component: FlaggedLayout,
 	validateSearch: flaggedSearchSchema,
 	errorComponent: FlaggedError,
 });

package/src/routes/mail/index.tsx

@@ -1,41 +1,14 @@
 /**
- * /mail/ route (Daily Brief) — shell activation only.
- *
- * The component returns null because rendering is lifted to `mail.tsx`
- * which detects the brief route via `useRouterState` and mounts
- * `<BriefPane>` directly into `<AppShellSlotted>` slots.
+ * `/mail` has no view of its own: the daily brief is one of the four lists and
+ * lives at its own path, so every link into the mail app that names no list
+ * lands here and is sent on to the brief carrying whatever it arrived with.
  */
-import {
-	createFileRoute,
-	type ErrorComponentProps,
-} from "@tanstack/react-router";
-import { z } from "zod";
-import { ErrorState } from "@/components/ui/ErrorState";
-
-const MailIndexError = ({ error, reset }: ErrorComponentProps) => (
-	<div className="flex h-full items-center justify-center bg-canvas p-4">
-		<ErrorState
-			title="Couldn't load your mailboxes"
-			error={error}
-			onRetry={reset}
-		/>
-	</div>
-);
-
-// `q` is inherited from the parent /mail route; re-declared here so it
-// survives this route's own search validation and isn't dropped when
-// navigating with a functional search updater.
-const briefSearchSchema = z.object({
-	selectedMessageId: z.string().optional(),
-	// A tapped semantic "Related" hit can point at a message outside the loaded
-	// brief list; carrying its thread + mailbox lets the brief open it directly.
-	selectedThreadId: z.string().optional(),
-	selectedMailboxId: z.string().optional(),
-	q: z.string().optional(),
-});
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { mailIndexSearchSchema } from "@/lib/mail-search";
 
 export const Route = createFileRoute("/mail/")({
-	component: () => null,
-	validateSearch: briefSearchSchema,
-	errorComponent: MailIndexError,
+	validateSearch: mailIndexSearchSchema,
+	beforeLoad: ({ search }) => {
+		throw redirect({ to: "/mail/brief", search, replace: true });
+	},
 });

package/src/routes/mail/outbox/index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { OutboxPane } from "@/components/mail/OutboxPane";
+
+function OutboxReadingPane() {
+	return <OutboxPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/outbox/")({
+	component: OutboxReadingPane,
+});