feat(dashboard): shadcn/ui redesign — landing page, dashboard spacing, chat components (#339)

* feat(dashboard): add shadcn semantic token aliases to design system

Co-Authored-By: Duyet Le <me@duyet.net>
Co-Authored-By: duyetbot <bot@duyet.net>

* feat(dashboard): rebuild landing page with shadcn-style blocks

Split hero with code demo, numbered workflow, feature grid, CTA band,
rich footer. Consistent max-w-6xl px-6 container across sections.
Drops the Anthropic-brand experiment (Poppins/Lora, warm palette).

Co-Authored-By: Duyet Le <me@duyet.net>
Co-Authored-By: duyetbot <bot@duyet.net>

* feat(dashboard): shadcn chat components for conversations + spacing normalization

New Message/Bubble primitives (shadcn June 2026 chat component API),
conversation view rebuilt on them; dashboard pages normalized to
consistent px-6/gap-6 shells and bg-card/border-border surfaces.

Co-Authored-By: Duyet Le <me@duyet.net>
Co-Authored-By: duyetbot <bot@duyet.net>

---------

Co-authored-by: duyetbot <bot@duyet.net>

Author: duyet

packages/dashboard/src/components/analytics/area-chart.tsx

@@ -173,7 +173,7 @@ export function AreaChartCard({
   }, []);
 
   return (
-    <Card className="flex flex-col gap-4 p-5">
+    <Card className="flex flex-col gap-4 p-6">
       <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="flex flex-col gap-1">
           <p className="font-mono text-[11px] uppercase tracking-[0.1em] text-fg-4">{title}</p>

packages/dashboard/src/components/analytics/summary-cards.tsx

@@ -83,7 +83,7 @@ export function SummaryCards({
       {stats.map((s) => {
         const IconComp = s.icon;
         return (
-          <Card key={s.label} className="flex flex-col gap-4 p-5">
+          <Card key={s.label} className="flex flex-col gap-4 p-6">
             <div className="flex items-start justify-between gap-2">
               <div className="flex flex-col gap-1.5">
                 <p className="font-mono text-[11px] uppercase tracking-[0.1em] text-fg-4">

packages/dashboard/src/components/dashboard/analytics/_metric-card.tsx

@@ -23,7 +23,7 @@ export function MetricCard({
   iconColor = "text-accent",
 }: MetricCardProps) {
   return (
-    <Card className="flex h-full flex-col gap-4 p-5">
+    <Card className="flex h-full flex-col gap-4 p-6">
       <div className="flex items-start justify-between gap-2">
         <div className="flex flex-col gap-1">
           <h3 className="text-[14px] font-medium text-fg">{title}</h3>

packages/dashboard/src/components/dashboard/analytics/_top-conversations.tsx

@@ -36,7 +36,7 @@ export function TopConversations({ conversations, limit = 5 }: TopConversationsP
   }
 
   return (
-    <Card className="h-full p-5">
+    <Card className="h-full p-6">
       <div className="flex flex-col gap-1">
         <h3 className="text-[14px] font-medium text-fg">Top Conversations</h3>
         <p className="font-mono text-[11px] uppercase tracking-[0.1em] text-fg-4">

packages/dashboard/src/components/dashboard/analytics/analytics-page-content.tsx

@@ -36,7 +36,7 @@ export function AnalyticsPageContent() {
   const loading = loadingProjects || loadingAnalytics;
 
   return (
-    <div className="flex flex-col gap-6 px-4 lg:px-6">
+    <div className="flex flex-col gap-6 px-6 py-6 lg:px-8">
       <AnalyticsHeader range={range} onRangeChange={setRange} />
 
       {loading && <AnalyticsLoading hasData={!!data} />}

packages/dashboard/src/components/dashboard/conversations/conversations-page.tsx

@@ -17,8 +17,8 @@ function PageHeader({
   return (
     <header className="mb-[22px] flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
       <div className="flex max-w-2xl flex-col gap-1.5">
-        <h1 className="text-[26px] tracking-tight text-fg">{title}</h1>
-        <p className="text-[14.5px] leading-6 text-fg-3">{description}</p>
+        <h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
+        <p className="text-sm text-muted-foreground">{description}</p>
       </div>
       {actions && <div className="flex flex-wrap items-center gap-2 sm:justify-end">{actions}</div>}
     </header>
@@ -53,7 +53,7 @@ function ConversationsContent() {
   const showLoadMore = hasMore && conversations.length > 0;
 
   return (
-    <div className="px-5 sm:px-7">
+    <div className="flex flex-col gap-6 px-6 py-6 lg:px-8">
       <PageHeader
         title="Conversations"
         description={

packages/dashboard/src/components/dashboard/domains/domains-content.tsx

@@ -41,7 +41,7 @@ export function DomainsContent() {
     <Suspense
       fallback={<div className="h-32 animate-pulse rounded-[var(--radius-lg)] bg-panel2" />}
     >
-      <div className="flex flex-col gap-component px-4 py-7 lg:px-6">
+      <div className="flex flex-col gap-6 px-6 py-6 lg:px-8">
         <PageHeader
           title="Custom Domains"
           description="Add a custom domain to serve your project from your own domain with SSL."

packages/dashboard/src/components/dashboard/integrate/integrate-content.tsx

@@ -135,7 +135,7 @@ export default function IntegrateContent() {
   const isCurl = fw === "rest";
 
   return (
-    <div className="flex flex-col gap-5 px-4 lg:px-6">
+    <div className="flex flex-col gap-6 px-6 py-6 lg:px-8">
       <PageHeader
         title="Integrate"
         description="Pick your framework — copy the adapter and you're persisting state."

packages/dashboard/src/components/dashboard/keys/keys-page.tsx

@@ -82,7 +82,7 @@ function KeysContent() {
   };
 
   return (
-    <div className="flex flex-col space-y-section page-padding section-padding">
+    <div className="flex flex-col gap-6 px-6 py-6 lg:px-8">
       <PageHeader
         title="API Keys"
         description="Project-scoped keys your agents use to authenticate against the API. Keep them secret."
@@ -100,7 +100,7 @@ function KeysContent() {
       />
 
       {/* Active project selector — shares ProjectScope with the sidebar */}
-      <Card className="flex flex-col gap-2 p-4 sm:flex-row sm:items-center sm:justify-between">
+      <Card className="flex flex-col gap-2 p-6 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-2.5">
           <span className="as-label-sm text-fg-4">Project</span>
           {loadingProjects ? (

packages/dashboard/src/components/dashboard/organizations/create/_create-org-loading.tsx

@@ -3,7 +3,7 @@ import { Card } from "@/components/ui/card";
 
 export function CreateOrgLoading() {
   return (
-    <div className="page-padding flex flex-col gap-section py-7">
+    <div className="flex flex-col gap-6 px-6 py-6 lg:px-8">
       <div className="flex items-start gap-3">
         <span className="mt-0.5 grid size-8 shrink-0 place-items-center rounded-[var(--radius)] text-fg-4">
           <ArrowLeftIcon className="size-4" aria-hidden="true" />