added playground to agent

apps/dashboard/app/(app)/archived/page.tsx

@@ -0,0 +1,14 @@
+import { HomeLayout } from "@/features/app/home/layout";
+
+export default function ArchivedDemos() {
+  return (
+    <HomeLayout>
+      <div className="mx-auto flex min-h-full max-w-40 flex-1 flex-col items-center justify-center gap-2.5 text-center text-xs">
+        <p className="font-semibold">No Archived Demos</p>
+        <p className="text-balance font-medium text-muted-foreground">
+          All archived demos will be listed here.
+        </p>
+      </div>
+    </HomeLayout>
+  );
+}

apps/dashboard/app/(app)/demos/[slug]/page.tsx

@@ -4,8 +4,6 @@ import AppVideoEditor from "@/features/app/demo/video-editor";
 export default function DemoPage() {
   return (
     <div className="flex h-full min-h-0 flex-col">
-      {/*<AppHeader />*/}
-
       <AppVideoEditor />
 
       <footer className="mt-auto h-30 border-t">

apps/dashboard/app/(app)/layout.tsx

@@ -1,9 +1,11 @@
 import { TooltipProvider } from "@castfy/ui/components/tooltip";
+import Disconnected from "@/features/app/_layout/disconnected";
 
 export default function Lyout(props: LayoutProps<"/">) {
   return (
     <main className="@container min-h-screen">
       <TooltipProvider>{props.children}</TooltipProvider>
+      <Disconnected />
     </main>
   );
 }

apps/dashboard/app/(app)/page.tsx

@@ -5,7 +5,7 @@ import { HomeList } from "@/features/app/home/list";
 export default function Home() {
   return (
     <HomeLayout>
-      <div className="mx-auto grid min-w-165 max-w-390 grid-cols-[repeat(auto-fill,260px)] flex-col justify-center gap-10 px-12.5 pt-7.5 pb-15">
+      <div className="flex w-full flex-col gap-10">
         <HomeHeader />
         <HomeList />
       </div>

apps/dashboard/app/(public)/login/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import Link from "next/link";
+import { Suspense } from "react";
 import { siteConfig } from "@/config/site";
 import { LoginAccordion } from "@/features/public/login/login-accordion";
 import { LoginVideoBackground } from "@/features/public/login/login-video-background";
@@ -12,11 +13,19 @@ export const metadata: Metadata = {
   title: "Login",
 };
 
-export default async function Page() {
+export default function Page() {
+  return (
+    <Suspense>
+      <LoginPage />
+    </Suspense>
+  );
+}
+async function LoginPage() {
   const cookieStore = await cookies();
   const preferred = cookieStore.get(Cookies.PreferredSignInProvider);
 
-  let moreSignInOptions = null;
+  // biome-ignore lint/suspicious/noExplicitAny: <explanations
+  let moreSignInOptions: any = null;
   let preferredSignInOption = (
     <OAuthSignIn
       provider="google"

apps/dashboard/components/aspect-ratio/aspect-ratio-dropdown.tsx

@@ -0,0 +1,101 @@
+import { Button } from "@castfy/ui/components/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@castfy/ui/components/popover";
+import { ArrowDown01Icon } from "hugeicons-react";
+import React from "react";
+import { aspectRatios } from "@/lib/constants/aspect-ratios";
+import { useImageStore } from "@/lib/store";
+import { AspectRatioPicker } from "./aspect-ratio-picker";
+
+const popularRatios = ["1_1", "9_16", "16_9", "4_5", "og_image"];
+
+export const AspectRatioDropdown = () => {
+  const { selectedAspectRatio, setAspectRatio } = useImageStore();
+  const current = aspectRatios.find((ar) => ar.id === selectedAspectRatio);
+  const [open, setOpen] = React.useState(false);
+
+  const handleQuickSelect = (id: string) => {
+    setAspectRatio(id);
+  };
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <div className="space-y-3">
+        <PopoverTrigger asChild>
+          <Button
+            className="h-auto w-full justify-between border-border/50 px-3 py-2.5 hover:border-border hover:bg-accent/50"
+            variant="outline"
+          >
+            <div className="flex min-w-0 flex-1 items-center gap-2.5">
+              <div
+                className="shrink-0 rounded border border-primary/30 bg-primary/80"
+                style={{
+                  width: "24px",
+                  height: `${24 * (current?.ratio || 1)}px`,
+                  maxHeight: "24px",
+                  minHeight: "10px",
+                }}
+              />
+              <div className="min-w-0 flex-1 text-left">
+                <div className="truncate font-medium text-foreground text-sm">
+                  {current?.name || "Aspect Ratio"}
+                </div>
+                <div className="text-muted-foreground text-xs">
+                  {current
+                    ? `${current.width}:${current.height}`
+                    : "Select ratio"}
+                </div>
+              </div>
+            </div>
+            <ArrowDown01Icon
+              className="ml-2 shrink-0 text-muted-foreground"
+              size={16}
+            />
+          </Button>
+        </PopoverTrigger>
+
+        <div className="flex items-center gap-1.5">
+          <span className="text-muted-foreground text-xs">Quick:</span>
+          <div className="flex flex-1 items-center gap-1.5">
+            {popularRatios.map((id) => {
+              const ratio = aspectRatios.find((ar) => ar.id === id);
+              if (!ratio) {
+                return null;
+              }
+              const isSelected = selectedAspectRatio === id;
+              return (
+                <button
+                  className={`relative rounded-md border transition-all ${
+                    isSelected
+                      ? "border-primary bg-primary/10"
+                      : "border-border/50 hover:border-border hover:bg-accent/50"
+                  }`}
+                  key={id}
+                  onClick={() => handleQuickSelect(id)}
+                  style={{
+                    width: "32px",
+                    height: `${32 * ratio.ratio}px`,
+                    maxHeight: "32px",
+                    minHeight: "12px",
+                  }}
+                  title={`${ratio.name} (${ratio.width}:${ratio.height})`}
+                  type="button"
+                >
+                  {isSelected && (
+                    <div className="absolute inset-0 rounded-md bg-primary/20" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <PopoverContent align="start" className="w-[380px] p-0">
+        <AspectRatioPicker onSelect={() => setOpen(false)} />
+      </PopoverContent>
+    </Popover>
+  );
+};