openvolo 0.1.2

package/src/app/dashboard/workflows/template-gallery.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Search,
+  Sparkles,
+  Trash2,
+  Bot,
+  Loader2,
+  Play,
+  DollarSign,
+  Clock,
+  Hash,
+} from "lucide-react";
+import { ActivateDialog } from "./activate-dialog";
+
+interface Template {
+  id: string;
+  name: string;
+  description: string | null;
+  templateType: string;
+  status: string;
+  systemPrompt: string | null;
+  targetPersona: string | null;
+  estimatedCost: number;
+  totalRuns: number;
+  lastRunAt: number | null;
+  config: string;
+}
+
+const TYPE_ICONS: Record<string, typeof Search> = {
+  prospecting: Search,
+  enrichment: Sparkles,
+  pruning: Trash2,
+  outreach: Bot,
+  engagement: Bot,
+  content: Bot,
+  nurture: Bot,
+};
+
+const TYPE_LABELS: Record<string, string> = {
+  prospecting: "Search",
+  enrichment: "Enrich",
+  pruning: "Prune",
+  outreach: "Sequence",
+  engagement: "Agent",
+  content: "Agent",
+  nurture: "Agent",
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  prospecting: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+  enrichment: "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300",
+  pruning: "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
+};
+
+function formatRelativeTime(unixSeconds: number): string {
+  const now = Math.floor(Date.now() / 1000);
+  const diff = now - unixSeconds;
+  if (diff < 60) return "just now";
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+export function TemplateGallery() {
+  const [templates, setTemplates] = useState<Template[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [activeTemplate, setActiveTemplate] = useState<Template | null>(null);
+  const [filter, setFilter] = useState<string>("all");
+
+  useEffect(() => {
+    fetch("/api/workflows/templates?pageSize=50")
+      .then((r) => r.json())
+      .then((data) => {
+        setTemplates(data.data ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const filteredTemplates =
+    filter === "all"
+      ? templates
+      : templates.filter((t) => {
+          if (filter === "search") return t.templateType === "prospecting";
+          if (filter === "enrich") return t.templateType === "enrichment";
+          if (filter === "prune") return t.templateType === "pruning";
+          return true;
+        });
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (templates.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Agent Templates</h2>
+        <div className="flex items-center gap-1">
+          {[
+            { key: "all", label: "All" },
+            { key: "search", label: "Search" },
+            { key: "enrich", label: "Enrich" },
+            { key: "prune", label: "Prune" },
+          ].map((tab) => (
+            <Button
+              key={tab.key}
+              variant={filter === tab.key ? "default" : "ghost"}
+              size="sm"
+              className="h-7 text-xs"
+              onClick={() => setFilter(tab.key)}
+            >
+              {tab.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {filteredTemplates.map((template) => {
+          const Icon = TYPE_ICONS[template.templateType] ?? Bot;
+          const typeLabel = TYPE_LABELS[template.templateType] ?? "Agent";
+          const typeColor = TYPE_COLORS[template.templateType] ?? "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300";
+
+          return (
+            <Card
+              key={template.id}
+              className="hover:border-primary/50 transition-colors"
+            >
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex items-center gap-2">
+                    <div className="rounded-md bg-muted p-1.5">
+                      <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+                    </div>
+                    <CardTitle className="text-sm">{template.name}</CardTitle>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className={`text-[10px] px-1.5 py-0 shrink-0 ${typeColor}`}
+                  >
+                    {typeLabel}
+                  </Badge>
+                </div>
+                <CardDescription className="text-xs line-clamp-2 mt-1">
+                  {template.description}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="pt-0 space-y-3">
+                <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <DollarSign className="h-3 w-3" />
+                    ~${template.estimatedCost.toFixed(2)}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Hash className="h-3 w-3" />
+                    {template.totalRuns} run{template.totalRuns !== 1 ? "s" : ""}
+                  </span>
+                  {template.lastRunAt && (
+                    <span className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" />
+                      {formatRelativeTime(template.lastRunAt)}
+                    </span>
+                  )}
+                </div>
+                <Button
+                  size="sm"
+                  className="w-full h-8"
+                  onClick={() => setActiveTemplate(template)}
+                >
+                  <Play className="mr-1.5 h-3 w-3" />
+                  Run
+                </Button>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {activeTemplate && (
+        <ActivateDialog
+          template={activeTemplate}
+          open={!!activeTemplate}
+          onClose={() => setActiveTemplate(null)}
+        />
+      )}
+    </div>
+  );
+}

package/src/app/dashboard/workflows/workflow-quick-actions.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from "@/components/ui/dropdown-menu";
+import { Loader2, Plus, RefreshCw, Sparkles, Mail } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+type SyncAction = {
+  label: string;
+  platform: string;
+  endpoint: string;
+  body: Record<string, unknown>;
+  icon: typeof RefreshCw;
+};
+
+const SYNC_ACTIONS: SyncAction[] = [
+  { label: "Sync X Tweets", platform: "x", endpoint: "/api/platforms/x/sync", body: { type: "tweets" }, icon: RefreshCw },
+  { label: "Sync X Mentions", platform: "x", endpoint: "/api/platforms/x/sync", body: { type: "mentions" }, icon: RefreshCw },
+  { label: "Sync X Contacts", platform: "x", endpoint: "/api/platforms/x/sync", body: { type: "contacts" }, icon: RefreshCw },
+  { label: "Sync Gmail Contacts", platform: "gmail", endpoint: "/api/platforms/gmail/sync", body: { type: "contacts" }, icon: Mail },
+  { label: "Sync Gmail Metadata", platform: "gmail", endpoint: "/api/platforms/gmail/sync", body: { type: "metadata" }, icon: Mail },
+  { label: "Sync LinkedIn", platform: "linkedin", endpoint: "/api/platforms/linkedin/sync", body: { type: "contacts" }, icon: RefreshCw },
+  { label: "Enrich X Profiles", platform: "x", endpoint: "/api/platforms/x/enrich", body: {}, icon: Sparkles },
+];
+
+export function WorkflowQuickActions() {
+  const [running, setRunning] = useState<string | null>(null);
+  const router = useRouter();
+
+  async function handleAction(action: SyncAction) {
+    setRunning(action.label);
+    try {
+      const res = await fetch(action.endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(action.body),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        if (data.workflowRunId) {
+          router.push(`/dashboard/workflows/${data.workflowRunId}`);
+          return;
+        }
+      }
+      // Refresh page to show new workflow
+      router.refresh();
+    } catch {
+      // Errors will be visible in the workflow run
+      router.refresh();
+    } finally {
+      setRunning(null);
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" disabled={!!running}>
+          {running ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <Plus className="mr-2 h-4 w-4" />
+          )}
+          {running ?? "Quick Action"}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>Platform Sync</DropdownMenuLabel>
+        {SYNC_ACTIONS.filter((a) => a.platform === "x" && a.endpoint.includes("sync")).map((action) => (
+          <DropdownMenuItem
+            key={action.label}
+            onClick={() => handleAction(action)}
+          >
+            <action.icon className="mr-2 h-4 w-4" />
+            {action.label}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        {SYNC_ACTIONS.filter((a) => a.platform === "gmail").map((action) => (
+          <DropdownMenuItem
+            key={action.label}
+            onClick={() => handleAction(action)}
+          >
+            <action.icon className="mr-2 h-4 w-4" />
+            {action.label}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        {SYNC_ACTIONS.filter((a) => a.platform === "linkedin").map((action) => (
+          <DropdownMenuItem
+            key={action.label}
+            onClick={() => handleAction(action)}
+          >
+            <action.icon className="mr-2 h-4 w-4" />
+            {action.label}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Enrichment</DropdownMenuLabel>
+        {SYNC_ACTIONS.filter((a) => a.endpoint.includes("enrich")).map((action) => (
+          <DropdownMenuItem
+            key={action.label}
+            onClick={() => handleAction(action)}
+          >
+            <action.icon className="mr-2 h-4 w-4" />
+            {action.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/app/dashboard/workflows/workflow-view-switcher.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Suspense } from "react";
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { List, Columns3, Rows3 } from "lucide-react";
+import { WorkflowListView } from "@/components/workflow-list-view";
+import { WorkflowKanbanView } from "@/components/workflow-kanban-view";
+import { WorkflowSwimlaneView } from "@/components/workflow-swimlane-view";
+import type { WorkflowRun } from "@/lib/db/types";
+
+function ViewSwitcherInner({ runs }: { runs: WorkflowRun[] }) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const currentView = searchParams.get("view") ?? "list";
+
+  function handleViewChange(view: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("view", view);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  }
+
+  return (
+    <Tabs value={currentView} onValueChange={handleViewChange}>
+      <TabsList>
+        <TabsTrigger value="list" className="gap-1.5">
+          <List className="h-3.5 w-3.5" />
+          List
+        </TabsTrigger>
+        <TabsTrigger value="kanban" className="gap-1.5">
+          <Columns3 className="h-3.5 w-3.5" />
+          Kanban
+        </TabsTrigger>
+        <TabsTrigger value="swimlane" className="gap-1.5">
+          <Rows3 className="h-3.5 w-3.5" />
+          Swimlane
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="list" className="mt-4">
+        <WorkflowListView runs={runs} />
+      </TabsContent>
+
+      <TabsContent value="kanban" className="mt-4">
+        <WorkflowKanbanView runs={runs} />
+      </TabsContent>
+
+      <TabsContent value="swimlane" className="mt-4">
+        <WorkflowSwimlaneView runs={runs} />
+      </TabsContent>
+    </Tabs>
+  );
+}
+
+export function WorkflowViewSwitcher({ runs }: { runs: WorkflowRun[] }) {
+  return (
+    <Suspense fallback={<WorkflowListView runs={runs} />}>
+      <ViewSwitcherInner runs={runs} />
+    </Suspense>
+  );
+}

package/src/app/globals.css

@@ -0,0 +1,232 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-body);
+  --font-mono: var(--font-mono);
+  --font-display: var(--font-display);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Animation keyframes */
+  --animate-shimmer: shimmer 2s linear infinite;
+  --animate-fade-slide-in: fadeSlideIn 0.5s ease-out forwards;
+}
+
+/* ─── Light mode: lavender-tinted neutrals ─── */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.995 0.005 270);
+  --foreground: oklch(0.17 0.02 270);
+  --card: oklch(1 0.003 270);
+  --card-foreground: oklch(0.17 0.02 270);
+  --popover: oklch(1 0.003 270);
+  --popover-foreground: oklch(0.17 0.02 270);
+  /* Primary: brand cyan */
+  --primary: oklch(0.55 0.18 195);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.96 0.01 270);
+  --secondary-foreground: oklch(0.22 0.02 270);
+  --muted: oklch(0.96 0.01 270);
+  --muted-foreground: oklch(0.52 0.02 270);
+  /* Accent: soft pink */
+  --accent: oklch(0.96 0.03 340);
+  --accent-foreground: oklch(0.22 0.02 270);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.91 0.01 270);
+  --input: oklch(0.91 0.01 270);
+  --ring: oklch(0.55 0.18 195);
+  /* Chart colors: brand gradient stops */
+  --chart-1: oklch(0.65 0.15 195);
+  --chart-2: oklch(0.65 0.12 280);
+  --chart-3: oklch(0.72 0.12 340);
+  --chart-4: oklch(0.72 0.13 45);
+  --chart-5: oklch(0.60 0.14 270);
+  --chart-6: oklch(0.58 0.16 150);
+  --chart-7: oklch(0.68 0.10 220);
+  --chart-8: oklch(0.75 0.08 100);
+  /* Sidebar */
+  --sidebar: oklch(0.985 0.008 270);
+  --sidebar-foreground: oklch(0.17 0.02 270);
+  --sidebar-primary: oklch(0.55 0.18 195);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.95 0.02 270);
+  --sidebar-accent-foreground: oklch(0.22 0.02 270);
+  --sidebar-border: oklch(0.91 0.01 270);
+  --sidebar-ring: oklch(0.55 0.18 195);
+}
+
+/* ─── Dark mode: deep indigo-tinted darks ─── */
+.dark {
+  --background: oklch(0.15 0.02 270);
+  --foreground: oklch(0.96 0.01 270);
+  --card: oklch(0.18 0.02 270);
+  --card-foreground: oklch(0.96 0.01 270);
+  --popover: oklch(0.18 0.02 270);
+  --popover-foreground: oklch(0.96 0.01 270);
+  --primary: oklch(0.65 0.18 195);
+  --primary-foreground: oklch(0.15 0.02 270);
+  --secondary: oklch(0.25 0.02 270);
+  --secondary-foreground: oklch(0.96 0.01 270);
+  --muted: oklch(0.25 0.02 270);
+  --muted-foreground: oklch(0.65 0.02 270);
+  --accent: oklch(0.25 0.03 340);
+  --accent-foreground: oklch(0.96 0.01 270);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.28 0.02 270);
+  --input: oklch(0.28 0.02 270);
+  --ring: oklch(0.65 0.18 195);
+  --chart-1: oklch(0.65 0.15 195);
+  --chart-2: oklch(0.65 0.12 280);
+  --chart-3: oklch(0.72 0.12 340);
+  --chart-4: oklch(0.72 0.13 45);
+  --chart-5: oklch(0.60 0.14 270);
+  --chart-6: oklch(0.58 0.16 150);
+  --chart-7: oklch(0.68 0.10 220);
+  --chart-8: oklch(0.75 0.08 100);
+  --sidebar: oklch(0.17 0.025 270);
+  --sidebar-foreground: oklch(0.96 0.01 270);
+  --sidebar-primary: oklch(0.65 0.18 195);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.25 0.03 270);
+  --sidebar-accent-foreground: oklch(0.96 0.01 270);
+  --sidebar-border: oklch(0.28 0.02 270);
+  --sidebar-ring: oklch(0.65 0.18 195);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* ─── Brand gradient utilities ─── */
+@layer utilities {
+  .gradient-brand {
+    background: linear-gradient(135deg, oklch(0.75 0.15 195), oklch(0.70 0.12 280), oklch(0.78 0.12 340), oklch(0.78 0.13 45));
+  }
+  .gradient-brand-subtle {
+    background: linear-gradient(135deg, oklch(0.95 0.04 195), oklch(0.94 0.03 280), oklch(0.96 0.03 340), oklch(0.96 0.03 45));
+  }
+  .dark .gradient-brand-subtle {
+    background: linear-gradient(135deg, oklch(0.25 0.04 195), oklch(0.24 0.03 280), oklch(0.26 0.03 340), oklch(0.26 0.03 45));
+  }
+  .text-gradient-brand {
+    background: linear-gradient(135deg, oklch(0.55 0.18 195), oklch(0.50 0.15 280), oklch(0.60 0.15 340));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  .border-gradient-brand {
+    border-image: linear-gradient(135deg, oklch(0.75 0.15 195), oklch(0.70 0.12 280), oklch(0.78 0.12 340), oklch(0.78 0.13 45)) 1;
+  }
+
+  /* Type scale */
+  .text-display {
+    font-family: var(--font-display);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+  }
+  .text-heading-1 {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: 1.875rem;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+  }
+  .text-heading-2 {
+    font-family: var(--font-display);
+    font-weight: 600;
+    font-size: 1.25rem;
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+  }
+  .text-heading-3 {
+    font-family: var(--font-display);
+    font-weight: 600;
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+  .text-label {
+    font-family: var(--font-display);
+    font-weight: 500;
+    font-size: 0.8125rem;
+    letter-spacing: 0.01em;
+    text-transform: uppercase;
+  }
+}
+
+/* ─── Animation keyframes ─── */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes stepSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-step-slide-in {
+  animation: stepSlideIn 0.3s ease-out both;
+}

package/src/app/layout.tsx

@@ -0,0 +1,57 @@
+import type { Metadata } from "next";
+import { Plus_Jakarta_Sans, Inter, JetBrains_Mono } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+import "./globals.css";
+
+const plusJakarta = Plus_Jakarta_Sans({
+  variable: "--font-display",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800"],
+});
+
+const inter = Inter({
+  variable: "--font-body",
+  subsets: ["latin"],
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "OpenVolo — AI-Native Social CRM",
+  description: "Manage X/Twitter and LinkedIn with Claude-powered agents",
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "any" },
+      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+    ],
+    apple: "/apple-touch-icon.png",
+  },
+  manifest: "/site.webmanifest",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${plusJakarta.variable} ${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/dashboard");
+}