feat(web): add mobile chat component system

apps/web/package.json

@@ -7,7 +7,7 @@
     "dev": "react-router dev",
     "dev:tailscale": "react-router dev --host 0.0.0.0",
     "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "react-router typegen && tsc"
+    "check-types": "react-router typegen && tsc --noEmit"
   },
   "dependencies": {
     "@code/auth": "workspace:*",
@@ -39,7 +39,6 @@
     "react-router-devtools": "^6.2.1",
     "tailwindcss": "catalog:",
     "typescript": "^6",
-    "vite": "^7.3.6",
-    "vite-tsconfig-paths": "^6.1.1"
+    "vite": "^7.3.6"
   }
 }

apps/web/src/components/chat/assistant-identity.tsx

@@ -1,5 +1,4 @@
-import { MessageHeader } from "@code/ui/components/message";
-import { Sparkles } from "lucide-react";
+import { MobileChatAssistantLabel } from "@code/ui/components/mobile-chat";
 
 import type { AssistantResponseState } from "@/lib/chat/types";
 
@@ -8,20 +7,18 @@ interface AssistantIdentityProps {
 }
 
 export const AssistantIdentity = ({ state }: AssistantIdentityProps) => (
-  <MessageHeader className="mb-1.5 gap-2.5 px-0 text-xs font-medium text-foreground/70">
-    <span className="zopu-mark flex size-6 items-center justify-center rounded-lg">
-      <Sparkles className="size-3.5" />
-    </span>
-    Zopu
-    {state && (
-      <span className="response-state" data-state={state}>
-        <span aria-hidden="true" className="response-state-dots">
-          <i />
-          <i />
-          <i />
+  <MobileChatAssistantLabel
+    state={
+      state ? (
+        <span className="response-state" data-state={state}>
+          <span aria-hidden="true" className="response-state-dots">
+            <i />
+            <i />
+            <i />
+          </span>
+          {state === "thinking" ? "Thinking" : "Writing"}
         </span>
-        {state === "thinking" ? "Thinking" : "Writing"}
-      </span>
-    )}
-  </MessageHeader>
+      ) : undefined
+    }
+  />
 );

apps/web/src/components/chat/chat-composer.tsx

@@ -1,10 +1,5 @@
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupTextarea,
-} from "@code/ui/components/input-group";
-import { CircleAlert, LoaderCircle, Send } from "lucide-react";
+import { MobileChatComposer } from "@code/ui/components/mobile-chat";
+import { LoaderCircle } from "lucide-react";
 import type { ReactNode } from "react";
 
 import { useChatComposer } from "@/hooks/chat/use-chat-composer";
@@ -14,90 +9,31 @@ export const ChatComposer = ({ error, onSend, status }: ChatComposerProps) => {
   const busy = status === "submitted" || status === "streaming";
   const composer = useChatComposer({ busy, onSend });
 
-  let statusContent: ReactNode = (
-    <span className="hidden sm:inline">
-      Enter to send · Shift + Enter for a new line
-    </span>
-  );
+  let statusMessage: ReactNode;
   if (busy) {
-    statusContent = (
-      <>
-        <LoaderCircle className="size-3.5 animate-spin" />
+    statusMessage = (
+      <span className="inline-flex items-center gap-1.5">
+        <LoaderCircle className="size-3 animate-spin" />
         Zopu is responding
-      </>
-    );
-  }
-  if (error) {
-    statusContent = (
-      <span
-        id="composer-error"
-        className="flex items-center gap-1.5 text-destructive"
-      >
-        <CircleAlert className="size-3.5" />
-        {error.message || "Message failed to send"}
       </span>
     );
   }
 
   return (
-    <div className="composer-dock shrink-0 pb-[env(safe-area-inset-bottom)]">
-      <form
-        aria-label="Send a message"
-        className="mx-auto w-full max-w-3xl px-3 pb-3 sm:px-5 sm:pb-5"
-        onSubmit={composer.handleSubmit}
-      >
-        <InputGroup
-          className={`composer-shell overflow-hidden rounded-[1.5rem] border-border/70 bg-card/95 shadow-[0_16px_50px_-18px_rgb(0_0_0/0.38)] backdrop-blur-xl transition-[border-color,box-shadow] focus-within:border-foreground/20 focus-within:shadow-[0_18px_60px_-20px_rgb(0_0_0/0.48)] dark:bg-card/90 ${
-            composer.isFocused
-              ? "composer-shell-expanded"
-              : "composer-shell-compact"
-          }`}
-          data-disabled={busy || undefined}
-        >
-          <InputGroupTextarea
-            {...composer.inputProps}
-            aria-describedby={error ? "composer-error" : undefined}
-            aria-invalid={error ? true : undefined}
-            aria-label="Message Zopu"
-            className={`max-h-40 px-4 text-base leading-6 transition-[min-height,padding] duration-200 placeholder:text-muted-foreground/70 sm:px-5 ${
-              composer.isFocused
-                ? "min-h-24 pb-2 pt-4"
-                : "min-h-14 py-[0.95rem] pr-2"
-            }`}
-            disabled={busy}
-            placeholder="Ask anything…"
-            rows={1}
-          />
-          <InputGroupAddon
-            align="inline-end"
-            className={`shrink-0 self-end pr-2 transition-[padding] duration-200 ${
-              composer.isFocused ? "pb-2.5" : "pb-1.5"
-            }`}
-          >
-            <InputGroupButton
-              aria-label="Send message"
-              className="size-11 shrink-0 rounded-2xl bg-foreground text-background transition-all hover:scale-[1.03] hover:bg-foreground/85 active:scale-95 disabled:bg-muted disabled:text-muted-foreground sm:size-10 sm:rounded-xl"
-              disabled={!composer.canSend}
-              size="icon-sm"
-              type="submit"
-              variant="default"
-            >
-              {busy ? (
-                <LoaderCircle className="size-5 animate-spin" />
-              ) : (
-                <Send className="size-5" />
-              )}
-            </InputGroupButton>
-          </InputGroupAddon>
-        </InputGroup>
-        <div className="mt-2 flex min-h-4 items-center justify-center px-2 text-center text-[10px] text-muted-foreground/80 sm:text-[11px]">
-          {composer.isFocused || busy || error ? (
-            <span className="flex items-center gap-2">{statusContent}</span>
-          ) : (
-            <span>Zopu can make mistakes. Check important information.</span>
-          )}
-        </div>
-      </form>
-    </div>
+    <MobileChatComposer
+      busy={busy}
+      canSend={composer.canSend}
+      errorMessage={
+        error ? error.message || "Message failed to send" : undefined
+      }
+      onSubmit={composer.handleSubmit}
+      statusMessage={statusMessage}
+      textareaProps={{
+        ...composer.inputProps,
+        "aria-describedby": error ? "composer-error" : undefined,
+        "aria-invalid": error ? true : undefined,
+        disabled: busy,
+      }}
+    />
   );
 };

apps/web/src/components/chat/chat-conversation.tsx

@@ -9,7 +9,7 @@ import {
 } from "@code/ui/components/empty";
 import { MessageGroup } from "@code/ui/components/message";
 import { MessageScrollerItem } from "@code/ui/components/message-scroller";
-import { Sparkles } from "lucide-react";
+import { MobileChatMark } from "@code/ui/components/mobile-chat";
 
 import { SUGGESTIONS } from "@/lib/chat/constants";
 import type { ChatConversationProps } from "@/lib/chat/types";
@@ -25,23 +25,23 @@ export const ChatConversation = ({
 }: ChatConversationProps) => {
   if (historyReady && messages.length === 0) {
     return (
-      <Empty className="min-h-full items-start justify-end px-1 pb-7 pt-20 sm:items-center sm:justify-center sm:px-6 sm:py-20">
-        <EmptyMedia className="zopu-mark size-11 rounded-2xl" variant="icon">
-          <Sparkles className="size-5" />
+      <Empty className="min-h-full items-start justify-end px-0 pt-14 pb-5">
+        <EmptyMedia className="size-10 bg-transparent" variant="icon">
+          <MobileChatMark className="size-10 rounded-[12px] [&_svg]:size-5" />
         </EmptyMedia>
-        <EmptyHeader className="items-start text-left sm:items-center sm:text-center">
-          <EmptyTitle className="text-2xl font-semibold tracking-[-0.035em] sm:text-3xl">
+        <EmptyHeader className="items-start text-left">
+          <EmptyTitle className="text-[22px] font-semibold tracking-[-0.035em]">
             What can I help with?
           </EmptyTitle>
-          <EmptyDescription className="max-w-md text-[15px] leading-6">
+          <EmptyDescription className="max-w-[320px] text-[14px] leading-5">
             Think, write, plan, or explore an idea with Zopu.
           </EmptyDescription>
         </EmptyHeader>
-        <EmptyContent className="mt-3 grid w-full max-w-xl gap-2 sm:grid-cols-3">
+        <EmptyContent className="mt-3 grid w-full gap-2">
           {SUGGESTIONS.map(([title, prompt]) => (
             <Button
               key={title}
-              className="group h-auto min-h-16 w-full flex-col items-start justify-center gap-0.5 rounded-2xl border-border/60 bg-card/60 px-4 py-3 text-left shadow-sm transition-all hover:-translate-y-0.5 hover:border-foreground/20 hover:bg-card hover:shadow-md sm:min-h-24"
+              className="group h-auto min-h-14 w-full flex-col items-start justify-center gap-0.5 rounded-[16px] border-[#e7e7e4] bg-[#f7f7f5] px-4 py-3 text-left shadow-none transition-colors active:bg-[#eeeeeb]"
               onClick={() => onSuggestion(prompt)}
               variant="outline"
             >
@@ -57,7 +57,7 @@ export const ChatConversation = ({
   }
 
   return (
-    <MessageGroup className="gap-8 pb-5 md:gap-10 md:pb-8">
+    <MessageGroup className="gap-5 pb-5">
       {messages.map((message, index) => (
         <MessageScrollerItem
           key={message.id}

apps/web/src/components/chat/chat-header.tsx

@@ -1,32 +1,11 @@
-import { Sparkles } from "lucide-react";
+import { MobileChatHeader } from "@code/ui/components/mobile-chat";
 
-import { MODEL_LABEL, STATUS_COPY } from "@/lib/chat/constants";
-import { getStatusDotClass } from "@/lib/chat/transforms";
+import { STATUS_COPY } from "@/lib/chat/constants";
 import type { ChatHeaderProps } from "@/lib/chat/types";
 
 export const ChatHeader = ({ status }: ChatHeaderProps) => (
-  <header className="chat-header flex h-14 shrink-0 items-center border-b border-border/60 px-4 sm:h-16 sm:px-6">
-    <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
-      <div className="flex min-w-0 items-center gap-3">
-        <div className="zopu-mark flex size-9 shrink-0 items-center justify-center rounded-xl">
-          <Sparkles className="size-4" />
-        </div>
-        <div className="min-w-0">
-          <h1 className="truncate text-sm font-semibold tracking-tight sm:text-[15px]">
-            Zopu
-          </h1>
-          <p className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
-            <span
-              aria-hidden="true"
-              className={`size-1.5 rounded-full ${getStatusDotClass(status)}`}
-            />
-            <span aria-live="polite">{STATUS_COPY[status]}</span>
-          </p>
-        </div>
-      </div>
-      <p className="rounded-full border border-border/60 bg-card/50 px-2.5 py-1 text-[10px] font-medium tracking-wide text-muted-foreground sm:text-[11px]">
-        {MODEL_LABEL}
-      </p>
-    </div>
-  </header>
+  <MobileChatHeader
+    active={status !== "connecting" && status !== "error"}
+    statusLabel={STATUS_COPY[status]}
+  />
 );

apps/web/src/components/chat/chat-message.tsx

@@ -1,5 +1,7 @@
-import { Bubble, BubbleContent } from "@code/ui/components/bubble";
-import { Message, MessageContent } from "@code/ui/components/message";
+import {
+  MobileChatBubble,
+  MobileChatMessage,
+} from "@code/ui/components/mobile-chat";
 import type { ReactNode } from "react";
 import { Streamdown } from "streamdown";
 
@@ -37,42 +39,26 @@ export const ChatMessage = ({ message }: ChatMessageProps) => {
     );
   }
 
+  const sender = isUser ? "user" : "assistant";
+
   return (
-    <Message
-      align={isUser ? "end" : "start"}
-      className="chat-message text-[15px] md:text-base"
-    >
-      <MessageContent
-        className={
-          isUser
-            ? "max-w-[88%] sm:max-w-[76%] md:max-w-[68%]"
-            : "max-w-full md:max-w-[92%]"
-        }
-      >
+    <MobileChatMessage className="chat-message" sender={sender}>
+      <div className={isUser ? "max-w-full" : "w-full min-w-0"}>
         {!isUser && (
           <AssistantIdentity state={isStreaming ? "writing" : undefined} />
         )}
-        <Bubble
-          align={isUser ? "end" : "start"}
-          variant={isUser ? "secondary" : "ghost"}
-          className="max-w-full"
+        <MobileChatBubble
+          className={isUser ? "whitespace-pre-wrap" : undefined}
+          sender={sender}
         >
-          <BubbleContent
-            className={
-              isUser
-                ? "rounded-[1.35rem] rounded-br-md border border-border/60 bg-secondary/80 px-4 py-2.5 leading-6 text-foreground shadow-sm whitespace-pre-wrap dark:bg-secondary/70"
-                : "w-full max-w-none overflow-visible leading-7 text-foreground/95"
-            }
-          >
-            {message.parts.map((part) =>
-              part.type === "dynamic-tool" ? (
-                <ChatToolCall key={part.toolCallId} part={part} />
-              ) : null
-            )}
-            {content}
-          </BubbleContent>
-        </Bubble>
-      </MessageContent>
-    </Message>
+          {message.parts.map((part) =>
+            part.type === "dynamic-tool" ? (
+              <ChatToolCall key={part.toolCallId} part={part} />
+            ) : null
+          )}
+          {content}
+        </MobileChatBubble>
+      </div>
+    </MobileChatMessage>
   );
 };

apps/web/src/components/chat/chat-page.tsx

@@ -17,19 +17,19 @@ export const ChatPage = () => {
   const handleSendMessage = (message: string) => agent.sendMessage(message);
 
   return (
-    <section className="chat-surface flex h-full min-h-0 flex-col bg-background">
+    <section className="chat-surface flex h-full min-h-0 flex-col bg-[#fefefe]">
       <ChatHeader status={agent.status} />
 
       <main aria-label="Conversation" className="min-h-0 flex-1">
         <MessageScrollerProvider
           autoScroll
           defaultScrollPosition="end"
-          scrollEdgeThreshold={96}
-          scrollMargin={24}
+          scrollEdgeThreshold={72}
+          scrollMargin={18}
         >
           <MessageScroller>
             <MessageScrollerViewport aria-label="Chat messages">
-              <MessageScrollerContent className="mx-auto w-full max-w-3xl px-4 pb-8 pt-7 sm:px-6 sm:pb-10 sm:pt-10">
+              <MessageScrollerContent className="w-full px-4 pt-4 pb-6">
                 <ChatConversation
                   historyReady={agent.historyReady}
                   messages={agent.messages}
@@ -42,7 +42,7 @@ export const ChatPage = () => {
             </MessageScrollerViewport>
             <MessageScrollerButton
               aria-label="Scroll to latest message"
-              className="bottom-4 size-10 rounded-full border border-border/70 bg-card/95 shadow-lg backdrop-blur"
+              className="bottom-3 size-9 rounded-full border border-[#dededb] bg-[#fefefe]/95 shadow-sm backdrop-blur"
               direction="end"
             />
           </MessageScroller>

apps/web/src/components/chat/chat-thinking-response.tsx

@@ -1,16 +1,21 @@
-import { Message, MessageContent } from "@code/ui/components/message";
+import {
+  MobileChatBubble,
+  MobileChatMessage,
+} from "@code/ui/components/mobile-chat";
 
 import { AssistantIdentity } from "./assistant-identity";
 
 export const ChatThinkingResponse = () => (
-  <Message align="start" className="chat-message">
-    <MessageContent className="max-w-full md:max-w-[92%]">
+  <MobileChatMessage className="chat-message" sender="assistant">
+    <div className="w-full min-w-0">
       <AssistantIdentity state="thinking" />
-      <div className="thinking-line" aria-label="Zopu is thinking">
-        <span />
-        <span />
-        <span />
-      </div>
-    </MessageContent>
-  </Message>
+      <MobileChatBubble sender="assistant">
+        <div className="thinking-line" aria-label="Zopu is thinking">
+          <span />
+          <span />
+          <span />
+        </div>
+      </MobileChatBubble>
+    </div>
+  </MobileChatMessage>
 );

apps/web/src/components/chat/chat-tool-call.tsx

@@ -1,4 +1,5 @@
-import { Check, LoaderCircle, Terminal, TriangleAlert } from "lucide-react";
+import { MobileChatToolCall } from "@code/ui/components/mobile-chat";
+import { Search, SquareTerminal } from "lucide-react";
 
 import type { ChatToolCallProps } from "@/lib/chat/types";
 
@@ -7,35 +8,37 @@ export const ChatToolCall = ({ part }: ChatToolCallProps) => {
     typeof part.input === "string"
       ? part.input
       : JSON.stringify(part.input, null, 2);
-  let Icon = LoaderCircle;
-  let status = "Running";
+  let status = "running";
+  let tone: "error" | "neutral" | "success" = "neutral";
+
   if (part.state === "output-available") {
     detail =
       typeof part.output === "string"
         ? part.output
         : JSON.stringify(part.output, null, 2);
-    Icon = Check;
-    status = "Completed";
+    status = "done";
+    tone = "success";
   } else if (part.state === "output-error") {
     detail = part.errorText;
-    Icon = TriangleAlert;
-    status = "Failed";
+    status = "failed";
+    tone = "error";
   }
-  const isRunning = part.state === "input-available";
+
+  const isSearch = part.toolName.toLowerCase().includes("search");
 
   return (
-    <details className="group/tool overflow-hidden rounded-xl border border-border/60 bg-card/45 text-xs">
-      <summary className="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-muted-foreground marker:hidden">
-        <Terminal className="size-3.5 shrink-0" />
-        <span className="min-w-0 flex-1 truncate font-medium text-foreground/85">
-          {part.toolName}
-        </span>
-        <span>{status}</span>
-        <Icon className={`size-3.5 ${isRunning ? "animate-spin" : ""}`} />
-      </summary>
-      <pre className="max-h-72 overflow-auto border-t border-border/50 bg-background/60 px-3 py-2 font-mono text-[11px] leading-5 whitespace-pre-wrap text-muted-foreground">
-        {detail}
-      </pre>
-    </details>
+    <MobileChatToolCall
+      detail={detail}
+      icon={
+        isSearch ? (
+          <Search className="size-3" strokeWidth={2.2} />
+        ) : (
+          <SquareTerminal className="size-3" strokeWidth={2.2} />
+        )
+      }
+      status={status}
+      tone={tone}
+      toolName={part.toolName}
+    />
   );
 };

apps/web/src/index.css

@@ -7,48 +7,6 @@ body {
   overflow: hidden;
 }
 
-.chat-surface {
-  position: relative;
-  isolation: isolate;
-  background:
-    radial-gradient(
-      circle at 50% -12%,
-      oklch(0.72 0.045 255 / 9%),
-      transparent 32rem
-    ),
-    var(--background);
-}
-
-.chat-surface::before {
-  position: absolute;
-  z-index: -1;
-  inset: 0;
-  background-image: radial-gradient(
-    oklch(0.5 0 0 / 9%) 0.55px,
-    transparent 0.55px
-  );
-  background-size: 18px 18px;
-  mask-image: linear-gradient(to bottom, black, transparent 42%);
-  content: "";
-  pointer-events: none;
-}
-
-.chat-header {
-  background: color-mix(in oklch, var(--background) 88%, transparent);
-  backdrop-filter: blur(18px) saturate(1.25);
-}
-
-.zopu-mark {
-  border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
-  background:
-    linear-gradient(145deg, oklch(1 0 0 / 65%), transparent 55%),
-    color-mix(in oklch, var(--muted) 88%, var(--background));
-  color: var(--foreground);
-  box-shadow:
-    inset 0 1px 0 oklch(1 0 0 / 48%),
-    0 6px 18px -12px oklch(0 0 0 / 55%);
-}
-
 .chat-message {
   animation: chat-message-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
@@ -120,15 +78,6 @@ body {
   }
 }
 
-.composer-dock {
-  position: relative;
-  background: linear-gradient(to top, var(--background) 68%, transparent);
-}
-
-.composer-shell {
-  transform: translateZ(0);
-}
-
 @keyframes chat-message-enter {
   from {
     opacity: 0;

apps/web/src/root.tsx

@@ -1,5 +1,6 @@
 import { WebAuthProvider } from "@code/auth/web";
 import { env } from "@code/env/web";
+import { MobileViewport } from "@code/ui/components/mobile-chat";
 import { Toaster } from "@code/ui/components/sonner";
 import { FlueProvider } from "@flue/react";
 
@@ -76,7 +77,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => (
       <Meta />
       <Links />
     </head>
-    <body>
+    <body className="bg-[#11110f]">
       {children}
       <ScrollRestoration />
       <Scripts />
@@ -89,13 +90,14 @@ const App = () => (
     <WebAuthProvider>
       <ThemeProvider
         attribute="class"
-        defaultTheme="dark"
+        defaultTheme="light"
+        forcedTheme="light"
         disableTransitionOnChange
         storageKey="vite-ui-theme"
       >
-        <div className="h-svh min-h-0 overflow-hidden">
+        <MobileViewport>
           <Outlet />
-        </div>
+        </MobileViewport>
         <Toaster richColors />
       </ThemeProvider>
     </WebAuthProvider>

apps/web/src/routes/design.mobile-chat.tsx

@@ -0,0 +1,66 @@
+import {
+  MobileChatAssistantLabel,
+  MobileChatBubble,
+  MobileChatComposer,
+  MobileChatHeader,
+  MobileChatMessage,
+  MobileChatToolCall,
+  MobileChatToolResult,
+} from "@code/ui/components/mobile-chat";
+
+import type { Route } from "./+types/design.mobile-chat";
+
+export const meta = (_args: Route.MetaArgs) => [
+  { title: "Mobile chat components | Zopu" },
+  {
+    content: "Mobile component showcase for the Zopu chat experience",
+    name: "description",
+  },
+];
+
+const MobileChatShowcase = () => (
+  <section className="flex h-full min-h-0 flex-col bg-[#fefefe]">
+    <MobileChatHeader active statusLabel="Ready" />
+    <main className="min-h-0 flex-1 overflow-y-auto px-4 pt-4 pb-6">
+      <MobileChatMessage sender="user">
+        <MobileChatBubble sender="user">
+          Summarize Q3 and find recent AI news.
+        </MobileChatBubble>
+      </MobileChatMessage>
+
+      <MobileChatMessage className="mt-5" sender="assistant">
+        <div className="w-full min-w-0">
+          <MobileChatAssistantLabel />
+          <MobileChatBubble sender="assistant">
+            <MobileChatToolCall
+              status="done"
+              tone="success"
+              toolName="Web Search"
+            >
+              <MobileChatToolResult
+                source="news.ycombinator.com"
+                title="AI funding hits record highs in 2026"
+              />
+              <MobileChatToolResult
+                source="news.ycombinator.com"
+                title="Show HN: Series B raised for new AI lab"
+              />
+            </MobileChatToolCall>
+            <p>
+              Revenue grew 18% QoQ to $4.2M. Top risks: customer concentration,
+              sales cycles, and infra costs.
+            </p>
+          </MobileChatBubble>
+        </div>
+      </MobileChatMessage>
+    </main>
+
+    <MobileChatComposer
+      canSend
+      onSubmit={(event) => event.preventDefault()}
+      textareaProps={{}}
+    />
+  </section>
+);
+
+export default MobileChatShowcase;

apps/web/vite.config.ts

@@ -3,9 +3,11 @@ import path from "node:path";
 import { reactRouter } from "@react-router/dev/vite";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite-plus";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   envDir: path.resolve(import.meta.dirname, "../.."),
-  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+  plugins: [tailwindcss(), reactRouter()],
+  resolve: {
+    tsconfigPaths: true,
+  },
 });