Add multi-agent chat selection and routing

client/app.tsx

@@ -1,13 +1,17 @@
 import { type Handle } from 'remix/component'
 import { clientRoutes } from './routes/index.tsx'
-import { getPathname, listenToRouterNavigation, Router } from './client-router.tsx'
+import {
+	getPathname,
+	listenToRouterNavigation,
+	Router,
+} from './client-router.tsx'
 import {
 	fetchSessionInfo,
 	type SessionInfo,
 	type SessionStatus,
 } from './session.ts'
 import { buildAuthLink } from './auth-links.ts'
-import { colors, spacing, typography } from './styles/tokens.ts'
+import { colors, mq, spacing, typography } from './styles/tokens.ts'
 
 export function App(handle: Handle) {
 	let session: SessionInfo | null = null
@@ -97,6 +101,11 @@ export function App(handle: Handle) {
 					minHeight: isChatLayout ? '100vh' : undefined,
 					fontFamily: typography.fontFamily,
 					boxSizing: 'border-box',
+					[mq.mobile]: {
+						padding: isChatLayout
+							? `${spacing.md} ${spacing.md} ${spacing.sm}`
+							: spacing.lg,
+					},
 				}}
 			>
 				<nav
@@ -105,6 +114,10 @@ export function App(handle: Handle) {
 						gap: spacing.md,
 						flexWrap: 'wrap',
 						marginBottom: isChatLayout ? spacing.lg : spacing.xl,
+						[mq.mobile]: {
+							gap: spacing.sm,
+							marginBottom: isChatLayout ? spacing.md : spacing.lg,
+						},
 					}}
 				>
 					<a href="/" css={navLinkCss}>