update design

src/app/components/MarkdownContent.tsx

@@ -1,9 +1,13 @@
 "use client";
 
+import { useTheme } from "next-themes";
 import type { FC } from "react";
 import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import {
+  oneDark,
+  oneLight,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
 import remarkGfm from "remark-gfm";
 
 interface MarkdownContentProps {
@@ -15,6 +19,9 @@ export const MarkdownContent: FC<MarkdownContentProps> = ({
   content,
   className = "",
 }) => {
+  const { resolvedTheme } = useTheme();
+  const syntaxTheme = resolvedTheme === "dark" ? oneDark : oneLight;
+
   return (
     <div
       className={`prose prose-neutral dark:prose-invert max-w-none ${className}`}
@@ -136,7 +143,7 @@ export const MarkdownContent: FC<MarkdownContentProps> = ({
                   </span>
                 </div>
                 <SyntaxHighlighter
-                  style={oneDark}
+                  style={syntaxTheme}
                   language={match[1]}
                   PreTag="div"
                   className="!mt-0 !rounded-t-none !rounded-b-lg !border-t-0 !border !border-border"

src/app/components/RootErrorBoundary.tsx

@@ -1,15 +1,62 @@
 "use client";
 
+import { AlertCircle, Home, RefreshCw } from "lucide-react";
 import type { FC, PropsWithChildren } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
 export const RootErrorBoundary: FC<PropsWithChildren> = ({ children }) => {
   return (
     <ErrorBoundary
-      FallbackComponent={({ error }) => (
-        <div>
-          <h1>Error</h1>
-          <p>{error.message}</p>
+      FallbackComponent={({ error, resetErrorBoundary }) => (
+        <div className="flex min-h-screen items-center justify-center p-4">
+          <Card className="w-full max-w-2xl">
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <AlertCircle className="size-6 text-destructive" />
+                <div>
+                  <CardTitle>Something went wrong</CardTitle>
+                  <CardDescription>
+                    An unexpected error occurred in the application
+                  </CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Alert variant="destructive">
+                <AlertCircle />
+                <AlertTitle>Error Details</AlertTitle>
+                <AlertDescription>
+                  <code className="text-xs">{error.message}</code>
+                </AlertDescription>
+              </Alert>
+
+              <div className="flex gap-2">
+                <Button onClick={resetErrorBoundary} variant="default">
+                  <RefreshCw />
+                  Try Again
+                </Button>
+                <Button
+                  onClick={() => {
+                    window.location.href = "/";
+                  }}
+                  variant="outline"
+                >
+                  <Home />
+                  Go to Home
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
         </div>
       )}
     >

src/app/components/SSEEventListeners.tsx

@@ -12,14 +12,12 @@ export const SSEEventListeners: FC<PropsWithChildren> = ({ children }) => {
   const setSessionProcesses = useSetAtom(sessionProcessesAtom);
 
   useServerEventListener("sessionListChanged", async (event) => {
-    // invalidate session list
     await queryClient.invalidateQueries({
       queryKey: projectDetailQuery(event.projectId).queryKey,
     });
   });
 
   useServerEventListener("sessionChanged", async (event) => {
-    // invalidate session detail
     await queryClient.invalidateQueries({
       queryKey: sessionDetailQuery(event.projectId, event.sessionId).queryKey,
     });