refactor(hub): migrate dashboard to shadcn components

Replace manual CSS classes with shadcn Card, CardHeader, CardTitle,
CardContent, and Badge components. Remove inline <style> block —
use Tailwind utility classes via shadcn theme tokens. Add Biome
formatting across all components.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/ui/attachment.tsx

@@ -1,10 +1,10 @@
-import * as React from "react"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
 const attachmentVariants = cva(
   "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
@@ -21,8 +21,8 @@ const attachmentVariants = cva(
         vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
       },
     },
-  }
-)
+  },
+);
 
 function Attachment({
   className,
@@ -32,7 +32,7 @@ function Attachment({
   ...props
 }: React.ComponentProps<"div"> &
   VariantProps<typeof attachmentVariants> & {
-    state?: "idle" | "uploading" | "processing" | "error" | "done"
+    state?: "idle" | "uploading" | "processing" | "error" | "done";
   }) {
   return (
     <div
@@ -43,7 +43,7 @@ function Attachment({
       className={cn(attachmentVariants({ size, orientation }), className)}
       {...props}
     />
-  )
+  );
 }
 
 const attachmentMediaVariants = cva(
@@ -59,8 +59,8 @@ const attachmentMediaVariants = cva(
     defaultVariants: {
       variant: "icon",
     },
-  }
-)
+  },
+);
 
 function AttachmentMedia({
   className,
@@ -74,7 +74,7 @@ function AttachmentMedia({
       className={cn(attachmentMediaVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function AttachmentContent({
@@ -86,11 +86,11 @@ function AttachmentContent({
       data-slot="attachment-content"
       className={cn(
         "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AttachmentTitle({
@@ -102,11 +102,11 @@ function AttachmentTitle({
       data-slot="attachment-title"
       className={cn(
         "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AttachmentDescription({
@@ -119,11 +119,11 @@ function AttachmentDescription({
       className={cn(
         "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
         "max-w-full",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AttachmentActions({
@@ -135,11 +135,11 @@ function AttachmentActions({
       data-slot="attachment-actions"
       className={cn(
         "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AttachmentAction({
@@ -156,7 +156,7 @@ function AttachmentAction({
       className={cn(className)}
       {...props}
     />
-  )
+  );
 }
 
 function AttachmentTrigger({
@@ -172,13 +172,13 @@ function AttachmentTrigger({
         type: render ? type : (type ?? "button"),
         className: cn("absolute inset-0 z-10 outline-none", className),
       },
-      props
+      props,
     ),
     render,
     state: {
       slot: "attachment-trigger",
     },
-  })
+  });
 }
 
 function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -187,11 +187,11 @@ function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="attachment-group"
       className={cn(
         "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -204,4 +204,4 @@ export {
   AttachmentActions,
   AttachmentAction,
   AttachmentTrigger,
-}
+};