feat(dashboard): replace custom code blocks with shadcn Card on landing page

packages/dashboard/src/app/dashboard/analytics/page.tsx

@@ -3,6 +3,13 @@
 import type { AnalyticsResponse, ProjectResponse } from "@agentstate/shared";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { AreaChartCard } from "@/components/analytics/area-chart";
 import { RecentActivity } from "@/components/analytics/recent-activity";
 import { SummaryCards } from "@/components/analytics/summary-cards";
@@ -58,18 +65,21 @@ export default function AnalyticsPage() {
         </div>
         <div className="flex items-center gap-3">
           {projects.length > 1 && (
-            <select
+            <Select
               value={selectedProjectId}
-              onChange={(e) => setSelectedProjectId(e.target.value)}
-              className="text-xs h-8 px-2 rounded-md border border-input bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
-              aria-label="Select project"
+              onValueChange={(v) => setSelectedProjectId(v ?? "")}
             >
-              {projects.map((p) => (
-                <option key={p.id} value={p.id}>
-                  {p.name}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger className="h-8 w-[180px] text-xs" aria-label="Select project">
+                <SelectValue placeholder="Select project" />
+              </SelectTrigger>
+              <SelectContent>
+                {projects.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>
+                    {p.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )}
           <TimeRangeSelect value={range} onChange={setRange} />
         </div>

packages/dashboard/src/app/dashboard/conversations/page.tsx

@@ -5,8 +5,9 @@ import { ChevronDownIcon, ChevronRightIcon, MessageSquareIcon } from "lucide-rea
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { api } from "@/lib/api";
-import { ROLE_STYLES } from "@/lib/constants";
+import { ROLE_BADGE_VARIANTS } from "@/lib/constants";
 import { formatDate, formatDateShort } from "@/lib/format";
+import { Badge } from "@/components/ui/badge";
 
 type Conversation = ConversationResponse & { project_id: string };
 type Message = MessageResponse;
@@ -16,13 +17,11 @@ type Message = MessageResponse;
 // ---------------------------------------------------------------------------
 
 function RoleBadge({ role }: { role: string }) {
-  const cls = ROLE_STYLES[role] ?? ROLE_STYLES.system;
+  const variant = ROLE_BADGE_VARIANTS[role] ?? ROLE_BADGE_VARIANTS.system;
   return (
-    <span
-      className={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide shrink-0 ${cls}`}
-    >
+    <Badge variant={variant} className="text-[10px] font-semibold uppercase tracking-wide">
       {role}
-    </span>
+    </Badge>
   );
 }
 

packages/dashboard/src/app/dashboard/project/page.tsx

@@ -34,11 +34,12 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/lib/api";
-import { ROLE_STYLES } from "@/lib/constants";
+import { ROLE_BADGE_VARIANTS } from "@/lib/constants";
 
 type ProjectDetail = ProjectDetailResponse;
 type Conversation = ConversationResponse;
@@ -524,11 +525,12 @@ function ProjectContent() {
                                 {messagesCache[conv.id].length > 0 ? (
                                   messagesCache[conv.id].map((msg) => (
                                     <div key={msg.id} className="flex gap-3">
-                                      <span
-                                        className={`text-xs font-mono px-2 py-0.5 rounded shrink-0 mt-1 ${ROLE_STYLES[msg.role] ?? ROLE_STYLES.system}`}
+                                      <Badge
+                                        variant={ROLE_BADGE_VARIANTS[msg.role] ?? ROLE_BADGE_VARIANTS.system}
+                                        className="text-xs font-mono px-2 py-0.5 rounded shrink-0 mt-1"
                                       >
                                         {msg.role}
-                                      </span>
+                                      </Badge>
                                       <div className="min-w-0 flex-1">
                                         <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">
                                           {msg.content}

packages/dashboard/src/app/docs/page.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link";
 import { ArrowLeftIcon } from "lucide-react";
+import Link from "next/link";
 import { Footer } from "@/components/footer";
 
 const endpoints = [
@@ -88,7 +88,9 @@ export default function DocsPage() {
       <main className="flex-1">
         <div className="max-w-3xl mx-auto px-6 py-12">
           <div className="mb-6">
-            <h1 className="text-lg font-semibold tracking-tight text-foreground mb-1">API Reference</h1>
+            <h1 className="text-lg font-semibold tracking-tight text-foreground mb-1">
+              API Reference
+            </h1>
             <p className="text-sm text-muted-foreground">
               REST API. All endpoints require a Bearer token.
             </p>
@@ -99,12 +101,15 @@ export default function DocsPage() {
             <h2 className="text-xs font-mono text-muted-foreground uppercase tracking-widest mb-3">
               Authentication
             </h2>
-            <p className="text-sm text-muted-foreground mb-3">Pass your API key in every request:</p>
+            <p className="text-sm text-muted-foreground mb-3">
+              Pass your API key in every request:
+            </p>
             <pre className="font-mono text-xs text-foreground/80 bg-card border border-border rounded px-4 py-3">
               {`Authorization: Bearer <your-api-key>`}
             </pre>
             <p className="text-xs text-muted-foreground mt-3">
-              Base URL: <code className="font-mono text-foreground/70">https://agentstate.app/api</code>
+              Base URL:{" "}
+              <code className="font-mono text-foreground/70">https://agentstate.app/api</code>
             </p>
           </section>