diff --git a/apps/app/components.json b/apps/app/components.json
new file mode 100644
index 000000000..3781d892e
--- /dev/null
+++ b/apps/app/components.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-luma",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": true,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "inverted-translucent",
+  "menuAccent": "subtle",
+  "registries": {}
+}
diff --git a/apps/app/package.json b/apps/app/package.json
index 4d32d41a5..0ea8e6dfe 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -36,11 +36,14 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.148",
+    "@base-ui/react": "^1.4.1",
     "@codemirror/commands": "^6.8.0",
     "@codemirror/lang-markdown": "^6.3.3",
     "@codemirror/language": "^6.11.0",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.0",
+    "@fontsource-variable/geist": "^5.2.8",
+    "@fontsource-variable/ibm-plex-sans": "^5.2.8",
     "@lexical/react": "^0.35.0",
     "@opencode-ai/sdk": "^1.4.9",
     "@openwork/types": "workspace:*",
@@ -56,6 +59,8 @@
     "@tauri-apps/plugin-process": "~2.3.1",
     "@tauri-apps/plugin-updater": "~2.9.0",
     "ai": "^6.0.146",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "fuzzysort": "^3.1.0",
     "jsonc-parser": "^3.2.1",
     "lexical": "^0.35.0",
@@ -66,11 +71,15 @@
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.14.1",
     "remark-gfm": "^4.0.1",
+    "shadcn": "^4.6.0",
     "streamdown": "^2.5.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
     "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^25.6.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.0.4",
diff --git a/apps/app/src/app/index.css b/apps/app/src/app/index.css
index 975208451..7a46243ed 100644
--- a/apps/app/src/app/index.css
+++ b/apps/app/src/app/index.css
@@ -3,38 +3,87 @@
 
 @import "../styles/colors.css";
 
+@import "tw-animate-css";
+
+@import "shadcn/tailwind.css";
+
+@import "@fontsource-variable/geist";
+
+@import "@fontsource-variable/ibm-plex-sans";
+
+@custom-variant dark (&:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
+
 :root {
   color-scheme: light;
-  --dls-surface: #ffffff;
-  --dls-sidebar: #f9fafb;
-  --dls-app-bg: #ffffff;
-  --dls-border: #f3f4f6;
-  --dls-accent: #011627;
-  --dls-accent-hover: #000000;
-  --dls-accent-rgb: 1 22 39;
-  --dls-text-primary: #111827;
-  --dls-text-secondary: #6b7280;
-  --dls-hover: #f3f4f6;
-  --dls-active: #eef2f7;
+  --dls-surface: var(--slate-1);
+  --dls-sidebar: var(--slate-2);
+  --dls-app-bg: var(--slate-1);
+  --dls-background: var(--slate-1);
+  --dls-canvas: var(--slate-2);
+  --dls-surface-muted: var(--slate-3);
+  --dls-border: var(--slate-6);
+  --dls-accent: var(--blue-9);
+  --dls-accent-hover: var(--blue-10);
+  --dls-accent-rgb: 0 144 255;
+  --dls-secondary-rgb: 96 100 108;
+  --dls-text-primary: var(--slate-12);
+  --dls-text-secondary: var(--slate-11);
+  --dls-hover: var(--slate-3);
+  --dls-active: var(--slate-5);
   --dls-radius: 16px;
   --dls-radius-lg: 24px;
   --dls-shell-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
   --dls-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+  --background: var(--slate-1);
+  --foreground: var(--slate-12);
+  --card: var(--slate-1);
+  --card-foreground: var(--slate-12);
+  --popover: var(--slate-1);
+  --popover-foreground: var(--slate-12);
+  --primary-foreground: white;
+  --secondary: var(--slate-3);
+  --secondary-foreground: var(--slate-12);
+  --muted: var(--slate-3);
+  --muted-foreground: var(--slate-11);
+  --accent: var(--slate-3);
+  --accent-foreground: var(--slate-12);
+  --destructive: var(--red-9);
+  --border: var(--slate-5);
+  --input: var(--slate-6);
+  --ring: var(--slate-8);
+  --chart-1: var(--sky-9);
+  --chart-2: var(--blue-9);
+  --chart-3: var(--indigo-9);
+  --chart-4: var(--violet-9);
+  --chart-5: var(--purple-9);
+  --radius: 0.45rem;
+  --sidebar: var(--slate-2);
+  --sidebar-foreground: var(--slate-12);
+  --sidebar-primary: var(--blue-9);
+  --sidebar-primary-foreground: white;
+  --sidebar-accent: var(--slate-3);
+  --sidebar-accent-foreground: var(--slate-12);
+  --sidebar-border: var(--slate-6);
+  --sidebar-ring: var(--slate-8);
 }
 
 [data-theme="dark"] {
   color-scheme: dark;
-  --dls-surface: #121212;
-  --dls-sidebar: #1a1a1a;
-  --dls-app-bg: #161616;
-  --dls-border: #262626;
-  --dls-accent: #3b82f6;
-  --dls-accent-hover: #2563eb;
-  --dls-accent-rgb: 59 130 246;
-  --dls-text-primary: #ededed;
-  --dls-text-secondary: #9ca3af;
-  --dls-hover: #1f1f1f;
-  --dls-active: #2d2d2d;
+  --dls-surface: var(--slate-1);
+  --dls-sidebar: var(--slate-2);
+  --dls-app-bg: var(--slate-1);
+  --dls-background: var(--slate-1);
+  --dls-canvas: var(--slate-2);
+  --dls-surface-muted: var(--slate-3);
+  --dls-border: var(--slate-6);
+  --dls-accent: var(--blue-9);
+  --dls-accent-hover: var(--blue-10);
+  --dls-accent-rgb: 59 142 247;
+  --dls-secondary-rgb: 176 180 186;
+  --dls-text-primary: var(--slate-12);
+  --dls-text-secondary: var(--slate-11);
+  --dls-hover: var(--slate-3);
+  --dls-active: var(--slate-5);
   --dls-shell-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
   --dls-card-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
 }
@@ -42,10 +91,12 @@
 html,
 body {
   height: 100%;
+  overflow: hidden;
 }
 
 #root {
   height: 100%;
+  overflow: hidden;
 }
 
 html {
@@ -105,7 +156,7 @@ body {
   justify-content: center;
   border-radius: 9999px;
   background: var(--dls-accent);
-  color: #ffffff;
+  color: white;
   box-shadow: 0 8px 20px -16px rgba(var(--dls-accent-rgb), 0.45);
 }
 
@@ -160,21 +211,21 @@ body {
 }
 
 .ow-status-pill-positive {
-  border: 1px solid rgba(16, 185, 129, 0.16);
-  background: #ecfdf5;
-  color: #047857;
+  border: 1px solid var(--green-a6);
+  background: var(--green-3);
+  color: var(--green-11);
 }
 
 .ow-status-pill-warning {
-  border: 1px solid rgba(245, 158, 11, 0.16);
-  background: #fffbeb;
-  color: #b45309;
+  border: 1px solid var(--amber-a6);
+  background: var(--amber-3);
+  color: var(--amber-11);
 }
 
 .ow-status-pill-neutral {
-  border: 1px solid #e5e7eb;
-  background: #f9fafb;
-  color: #6b7280;
+  border: 1px solid var(--slate-6);
+  background: var(--slate-2);
+  color: var(--slate-11);
 }
 
 .ow-icon-tile {
@@ -182,8 +233,8 @@ body {
   align-items: center;
   justify-content: center;
   border-radius: 0.85rem;
-  background: #f4f6f8;
-  color: #011627;
+  background: var(--slate-3);
+  color: var(--slate-12);
 }
 
 .ow-icon-tile-muted {
@@ -191,8 +242,8 @@ body {
   align-items: center;
   justify-content: center;
   border-radius: 0.85rem;
-  background: #f1f5f9;
-  color: #6b7280;
+  background: var(--slate-3);
+  color: var(--slate-11);
 }
 
 .ow-input {
@@ -200,13 +251,13 @@ body {
   width: 100%;
   border: 0;
   border-radius: 0.9rem;
-  background: #fbfbfc;
-  box-shadow: inset 0 0 0 1px #eceef1;
+  background: var(--slate-1);
+  box-shadow: inset 0 0 0 1px var(--slate-6);
   color: var(--dls-text-primary);
 }
 
 .ow-input::placeholder {
-  color: #9ca3af;
+  color: var(--slate-11);
 }
 
 .ow-input:focus {
@@ -256,22 +307,22 @@ select:disabled {
 /* Highlight animation for just-saved command */
 @keyframes command-highlight {
   0% {
-    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6);
-    border-color: rgba(99, 102, 241, 0.8);
+    box-shadow: 0 0 0 0 var(--indigo-a9);
+    border-color: var(--indigo-a9);
   }
   50% {
-    box-shadow: 0 0 0 8px rgba(99, 102, 241, 0);
-    border-color: rgba(99, 102, 241, 0.4);
+    box-shadow: 0 0 0 8px var(--indigo-a1);
+    border-color: var(--indigo-a7);
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
-    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 0 0 var(--indigo-a1);
+    border-color: var(--slate-a3);
   }
 }
 
 .command-just-saved {
   animation: command-highlight 2s ease-out;
-  border-color: rgba(99, 102, 241, 0.8);
+  border-color: var(--indigo-a9);
 }
 
 @keyframes progress-shimmer {
@@ -317,3 +368,92 @@ select:disabled {
     background-color: rgba(var(--dls-accent-rgb), 0.6);
   }
 }
+
+.dark,
+[data-theme="dark"] {
+  --background: var(--slate-1);
+  --foreground: var(--slate-12);
+  --card: var(--slate-2);
+  --card-foreground: var(--slate-12);
+  --popover: var(--slate-2);
+  --popover-foreground: var(--slate-12);
+  --primary-foreground: var(--slate-12);
+  --secondary: var(--slate-3);
+  --secondary-foreground: var(--slate-12);
+  --muted: var(--slate-3);
+  --muted-foreground: var(--slate-10);
+  --accent: var(--slate-3);
+  --accent-foreground: var(--slate-12);
+  --destructive: var(--red-9);
+  --border: var(--slate-3);
+  --input: var(--slate-6);
+  --ring: var(--slate-8);
+  --chart-1: var(--sky-9);
+  --chart-2: var(--blue-9);
+  --chart-3: var(--indigo-9);
+  --chart-4: var(--violet-9);
+  --chart-5: var(--purple-9);
+  --sidebar: var(--slate-2);
+  --sidebar-foreground: var(--slate-12);
+  --sidebar-primary: var(--blue-9);
+  --sidebar-primary-foreground: var(--slate-12);
+  --sidebar-accent: var(--slate-3);
+  --sidebar-accent-foreground: var(--slate-12);
+  --sidebar-border: var(--slate-6);
+  --sidebar-ring: var(--slate-8);
+}
+
+@theme inline {
+  --font-sans: 'Geist Variable', sans-serif;
+  --font-heading: 'IBM Plex Sans Variable', sans-serif;
+  --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-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(--dls-accent);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
diff --git a/apps/app/src/components/ui/accordion.tsx b/apps/app/src/components/ui/accordion.tsx
new file mode 100644
index 000000000..2faf916dc
--- /dev/null
+++ b/apps/app/src/components/ui/accordion.tsx
@@ -0,0 +1,75 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn(
+        "flex w-full flex-col relative rounded-xl border border-border bg-clip-padding shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] bg-muted/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent px-4 py-2 text-start text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 px-4 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/apps/app/src/components/ui/button.tsx b/apps/app/src/components/ui/button.tsx
new file mode 100644
index 000000000..a14483c12
--- /dev/null
+++ b/apps/app/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 relative",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80 bg-clip-padding shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        outline:
+          "border-border bg-muted/20 hover:bg-muted hover:border-foreground/20 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-muted/20 dark:hover:bg-input/30 dark:hover:border-input/80 bg-clip-padding shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "border-border text-destructive hover:bg-destructive/10 hover:border-destructive/40 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:border-border dark:hover:bg-destructive/10 dark:border-destructive/40 dark:focus-visible:ring-destructive/40 bg-clip-padding shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5 rounded-xl",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 rounded-xl",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3 rounded-xl",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/apps/app/src/components/ui/collapsible.tsx b/apps/app/src/components/ui/collapsible.tsx
new file mode 100644
index 000000000..4b242f71d
--- /dev/null
+++ b/apps/app/src/components/ui/collapsible.tsx
@@ -0,0 +1,19 @@
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  )
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/apps/app/src/components/ui/dialog.tsx b/apps/app/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..c470012e6
--- /dev/null
+++ b/apps/app/src/components/ui/dialog.tsx
@@ -0,0 +1,158 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 start-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-popover p-6 text-sm text-popover-foreground shadow-xl ring-1 ring-foreground/5 duration-100 outline-none sm:max-w-md dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 end-4 bg-secondary"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/apps/app/src/components/ui/field.tsx b/apps/app/src/components/ui/field.tsx
new file mode 100644
index 000000000..b2ff34345
--- /dev/null
+++ b/apps/app/src/components/ui/field.tsx
@@ -0,0 +1,236 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-input/30 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-start text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = React.useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ms-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/apps/app/src/components/ui/input-group.tsx b/apps/app/src/components/ui/input-group.tsx
new file mode 100644
index 000000000..eb309f606
--- /dev/null
+++ b/apps/app/src/components/ui/input-group.tsx
@@ -0,0 +1,153 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-xl border border-border bg-muted/20 dark:bg-transparent hover:bg-input/40 dark:hover:bg-input/20 transition-[color,box-shadow,background-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-3xl **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first ps-3 has-[>button]:-ms-1 has-[>kbd]:-ms-1",
+        "inline-end": "order-last pe-3 has-[>button]:-me-1 has-[>kbd]:-me-1",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 rounded-4xl text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-xl px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 rounded-xl p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset"
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2.5 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/apps/app/src/components/ui/input.tsx b/apps/app/src/components/ui/input.tsx
new file mode 100644
index 000000000..5477e9dec
--- /dev/null
+++ b/apps/app/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-lg border border-transparent bg-input/50 px-3 py-1 text-base transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/apps/app/src/components/ui/label.tsx b/apps/app/src/components/ui/label.tsx
new file mode 100644
index 000000000..e1380df93
--- /dev/null
+++ b/apps/app/src/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/apps/app/src/components/ui/popover.tsx b/apps/app/src/components/ui/popover.tsx
new file mode 100644
index 000000000..822ad391f
--- /dev/null
+++ b/apps/app/src/components/ui/popover.tsx
@@ -0,0 +1,88 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-3xl bg-popover p-4 text-sm text-popover-foreground shadow-lg ring-1 ring-foreground/5 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("text-base font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/apps/app/src/components/ui/select.tsx b/apps/app/src/components/ui/select.tsx
new file mode 100644
index 000000000..4e812e149
--- /dev/null
+++ b/apps/app/src/components/ui/select.tsx
@@ -0,0 +1,205 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1.5 p-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-start", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-3xl border border-border bg-input/50 px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = false,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn(
+                                            "dark isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!",
+                                            className
+                                          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-3 py-2.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-2xl py-2 pe-8 ps-3 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn(
+        "pointer-events-none -mx-1.5 my-1.5 h-px bg-border",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/app/src/components/ui/separator.tsx b/apps/app/src/components/ui/separator.tsx
new file mode 100644
index 000000000..4f65961bb
--- /dev/null
+++ b/apps/app/src/components/ui/separator.tsx
@@ -0,0 +1,23 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/apps/app/src/components/ui/sheet.tsx b/apps/app/src/components/ui/sheet.tsx
new file mode 100644
index 000000000..4b789f1a5
--- /dev/null
+++ b/apps/app/src/components/ui/sheet.tsx
@@ -0,0 +1,136 @@
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/30 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-xl transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=left]:data-ending-style:translate-x-[-2.5rem] rtl:data-[side=left]:data-ending-style:-translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] rtl:data-[side=left]:data-starting-style:-translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=right]:data-ending-style:translate-x-[2.5rem] rtl:data-[side=right]:data-ending-style:-translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] rtl:data-[side=right]:data-starting-style:-translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 end-4 bg-secondary"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/apps/app/src/components/ui/sidebar.tsx b/apps/app/src/components/ui/sidebar.tsx
new file mode 100644
index 000000000..baf7e46a9
--- /dev/null
+++ b/apps/app/src/components/ui/sidebar.tsx
@@ -0,0 +1,715 @@
+"use client"
+
+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 { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (isMobile && collapsible !== "none") {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        "group peer text-sidebar-foreground",
+        collapsible === "none" ? "block" : "hidden md:block"
+      )}
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          collapsible === "none" && "flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon className="rtl:rotate-180 size-3.5" />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize rtl:in-data-[side=left]:cursor-e-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 rtl:group-data-[collapsible=offcanvas]:-translate-x-0 group-data-[collapsible=offcanvas]:after:start-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-input/50 shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn(
+        "flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:var(--radius-xl)] group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex h-8 shrink-0 items-center rounded-xl px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-label",
+      sidebar: "group-label",
+    },
+  })
+}
+
+function SidebarGroupAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-3.5 end-3 flex aspect-square w-5 items-center justify-center rounded-xl p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-action",
+      sidebar: "group-action",
+    },
+  })
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-xl px-3 py-2 text-start text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-9 text-sm",
+        sm: "h-8 text-xs",
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar()
+  const comp = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: "sidebar-menu-button",
+      sidebar: "menu-button",
+      size,
+      active: isActive,
+    },
+  })
+
+  if (!tooltip) {
+    return comp
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  render,
+  showOnHover = false,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    showOnHover?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-1.5 end-1 flex aspect-square w-5 items-center justify-center rounded-xl p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          showOnHover &&
+            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-action",
+      sidebar: "menu-action",
+    },
+  })
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-xl px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-xl px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-xl"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px rtl:-translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  render,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: useRender.ComponentProps<"a"> &
+  React.ComponentProps<"a"> & {
+    size?: "sm" | "md"
+    isActive?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn(
+          "flex h-7 min-w-0 -translate-x-px rtl:translate-x-px items-center gap-2 overflow-hidden rounded-xl px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-sub-button",
+      sidebar: "menu-sub-button",
+      size,
+      active: isActive,
+    },
+  })
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/apps/app/src/components/ui/skeleton.tsx b/apps/app/src/components/ui/skeleton.tsx
new file mode 100644
index 000000000..d59858390
--- /dev/null
+++ b/apps/app/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-2xl bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/apps/app/src/components/ui/tabs.tsx b/apps/app/src/components/ui/tabs.tsx
new file mode 100644
index 000000000..c64fa15c8
--- /dev/null
+++ b/apps/app/src/components/ui/tabs.tsx
@@ -0,0 +1,80 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-1 text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "p-0",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 rounded-lg border border-transparent! px-3 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:rounded-2xl group-data-vertical/tabs:px-3 group-data-vertical/tabs:py-1.5 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/apps/app/src/components/ui/textarea.tsx b/apps/app/src/components/ui/textarea.tsx
new file mode 100644
index 000000000..b10f21bf4
--- /dev/null
+++ b/apps/app/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-2xl border border-transparent bg-input/50 px-3 py-3 text-base transition-[color,box-shadow,background-color] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/apps/app/src/components/ui/tooltip.tsx b/apps/app/src/components/ui/tooltip.tsx
new file mode 100644
index 000000000..007e2b205
--- /dev/null
+++ b/apps/app/src/components/ui/tooltip.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-xl bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-start-1 data-[side=inline-end]:translate-x-[1.5px] rtl:data-[side=inline-end]:-translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-end-1 data-[side=inline-start]:translate-x-[-1.5px] rtl:data-[side=inline-start]:-translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] rtl:data-[side=left]:-translate-x-[-1.5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] rtl:data-[side=right]:-translate-x-[1.5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/apps/app/src/hooks/use-mobile.ts b/apps/app/src/hooks/use-mobile.ts
new file mode 100644
index 000000000..4acadd43b
--- /dev/null
+++ b/apps/app/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/app/src/hooks/use-translate.ts b/apps/app/src/hooks/use-translate.ts
new file mode 100644
index 000000000..311872ab4
--- /dev/null
+++ b/apps/app/src/hooks/use-translate.ts
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { currentLocale, t } from "@/i18n";
+
+export function useTranslate() {
+  const tr = React.useCallback((key: string) => t(key, currentLocale()), []);
+  const tx = React.useCallback(
+    (key: string, params?: Record<string, string | number>) =>
+      t(key, currentLocale(), params),
+    [],
+  );
+
+  return React.useMemo(() => ({ tr, tx }), [tr, tx]);
+}
diff --git a/apps/app/src/i18n/locales/en.ts b/apps/app/src/i18n/locales/en.ts
index 166391e77..da43073db 100644
--- a/apps/app/src/i18n/locales/en.ts
+++ b/apps/app/src/i18n/locales/en.ts
@@ -361,8 +361,8 @@ export default {
   "dashboard.workspace_folder_title": "Workspace folder",
   "dashboard.workspace_not_ready_title": "This workspace is not ready to connect yet.",
   "dashboard.workspaces": "Workspaces",
-  "den.active_org_hint": "Cloud workers are scoped to the selected org.",
-  "den.active_org_title": "Active org",
+  "den.active_org_hint": "Choose an organization to access shared Cloud workers, providers, and skills.",
+  "den.active_org_title": "Active organization",
   "den.auto_reconnect_hint": "Finish auth in your browser and OpenWork will reconnect here automatically.",
   "den.checking_session": "Checking session",
   "den.choose_org_for_providers": "Choose an org to view cloud providers.",
@@ -382,13 +382,14 @@ export default {
   "den.cloud_skill_imported_detail": "Installed locally as {name}.",
   "den.cloud_skill_removed_detail": "This cloud skill was removed upstream. Uninstall the local {name} copy.",
   "den.cloud_skill_sync_detail": "A newer cloud version is available for {name}. Update the local copy to stay in sync.",
-  "den.cloud_skills_hint": "Browse individual cloud skills you can access, install them locally, and update them when the remote version changes.",
+  "den.cloud_skills_hint": "Browse cloud skills you can access, install, and sync changes.",
   "den.cloud_skills_title": "Skills",
   "den.cloud_providers_hint": "Import managed LLM providers into opencode.jsonc and use the org credential in this workspace.",
   "den.cloud_providers_title": "Cloud providers",
-  "den.cloud_section_desc": "Sign in, pick an org, and open Cloud workers.",
+  "den.cloud_section_desc": "Sign in, pick an organization, and open Cloud workers.",
   "den.cloud_section_title": "OpenWork Cloud",
   "den.cloud_sleep_hint": "Sign in to OpenWork Cloud to keep your tasks alive even when your computer sleeps.",
+  "den.cloud_signed_in_desc": "You are signed in and ready to use OpenWork Cloud.",
   "den.cloud_workers_hint": "Open workers directly into OpenWork using the same remote-connect flow the app already uses elsewhere.",
   "den.cloud_workers_title": "Cloud workers",
   "den.create_account": "Create account",
@@ -459,7 +460,7 @@ export default {
   "den.status_browser_signup": "Finish account creation in your browser to connect OpenWork.",
   "den.status_cloud_signed_in_as": "Connected OpenWork Cloud as {email}.",
   "den.status_cloud_signin_done": "Connected OpenWork Cloud.",
-  "den.status_loaded_orgs": "Loaded {count} org{plural}.",
+  "den.status_loaded_orgs": "Connected {count} organization{plural}.",
   "den.status_loaded_skills": "Loaded {count} cloud skill{plural} for {name}.",
   "den.status_loaded_workers": "Loaded {count} worker{plural} for {name}.",
   "den.status_no_skills": "No cloud skills found for {name}.",
diff --git a/apps/app/src/index.react.tsx b/apps/app/src/index.react.tsx
index ba443c0e5..4ea7da98f 100644
--- a/apps/app/src/index.react.tsx
+++ b/apps/app/src/index.react.tsx
@@ -1,9 +1,10 @@
 /** @jsxImportSource react */
-import React from "react";
+import * as React from "react";
 import ReactDOM from "react-dom/client";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, HashRouter } from "react-router-dom";
 
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { initializeDenBootstrapConfig } from "./app/lib/den";
 import { getOpenWorkDeployment } from "./app/lib/openwork-deployment";
 import { bootstrapTheme } from "./app/theme";
@@ -39,13 +40,15 @@ const Router = isDesktopRuntime() ? HashRouter : BrowserRouter;
 ReactDOM.createRoot(root).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <PlatformProvider value={platform}>
-        <AppProviders>
-          <Router>
-            <AppRoot />
-          </Router>
-        </AppProviders>
-      </PlatformProvider>
+      <TooltipProvider>
+        <PlatformProvider value={platform}>
+          <AppProviders>
+            <Router>
+              <AppRoot />
+            </Router>
+          </AppProviders>
+        </PlatformProvider>
+      </TooltipProvider>
     </QueryClientProvider>
   </React.StrictMode>,
 );
diff --git a/apps/app/src/lib/utils.ts b/apps/app/src/lib/utils.ts
new file mode 100644
index 000000000..a5ef19350
--- /dev/null
+++ b/apps/app/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/app/src/react-app/domains/settings/cloud/cloud-account-section.tsx b/apps/app/src/react-app/domains/settings/cloud/cloud-account-section.tsx
new file mode 100644
index 000000000..09c4f4408
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/cloud/cloud-account-section.tsx
@@ -0,0 +1,130 @@
+/** @jsxImportSource react */
+import { LogOut } from "lucide-react";
+
+import type { DenOrgSummary, DenUser } from "../../../../app/lib/den";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  RefreshButton,
+  SettingsNotice,
+  SettingsSectionHeaderDescription,
+} from "../settings-section";
+import { useTranslate } from "@/hooks/use-translate";
+
+export interface CloudAccountSectionProps {
+  activeOrgId: string;
+  authBusy: boolean;
+  orgs: DenOrgSummary[];
+  orgsBusy: boolean;
+  orgsError: string | null;
+  sessionBusy: boolean;
+  user: DenUser | null;
+  onActiveOrgChange: (orgId: string) => void;
+  onRefreshOrgs: () => void | Promise<void>;
+  onSignOut: () => void | Promise<void>;
+}
+
+export function CloudAccountSection({
+  activeOrgId,
+  authBusy,
+  orgs,
+  orgsBusy,
+  orgsError,
+  sessionBusy,
+  user,
+  onActiveOrgChange,
+  onRefreshOrgs,
+  onSignOut,
+}: CloudAccountSectionProps) {
+  const { tr } = useTranslate();
+  const activeOrgOptions = orgs.map((org) => ({
+    value: org.id,
+    label: `${org.name} ${org.role === "owner" ? tr("den.org_owner_suffix") : tr("den.org_member_suffix")}`,
+  }));
+  const handleActiveOrgChange = (orgId: string | null) => {
+    if (orgId === null) {
+      return;
+    }
+
+    onActiveOrgChange(orgId);
+  };
+
+  return (
+    <section className="flex flex-col gap-y-8">
+      <div>
+        <div className="text-sm font-medium text-dls-text">{tr("den.cloud_account_title")}</div>
+        <SettingsSectionHeaderDescription>{tr("den.cloud_account_hint")}</SettingsSectionHeaderDescription>
+      </div>
+
+      <div className="flex flex-col gap-8">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0 flex flex-col gap-y-1">
+            <div className="truncate text-sm font-medium text-dls-text">
+              {user?.name ? user.name : user?.email}
+            </div>
+            <div className="truncate text-xs text-muted-foreground">{user?.email}</div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            className="shrink-0"
+            onClick={() => void onSignOut()}
+            disabled={[authBusy, sessionBusy].some(Boolean)}
+          >
+            <LogOut className="size-4" />
+            {authBusy ? tr("den.signing_out") : tr("den.sign_out")}
+          </Button>
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0 flex flex-col gap-y-1">
+            <div className="text-sm font-medium text-dls-text">{tr("den.active_org_title")}</div>
+            <div className=" text-xs text-muted-foreground">{tr("den.active_org_hint")}</div>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            <div className="w-[260px] max-w-full">
+              <Select
+                value={activeOrgId}
+                items={activeOrgOptions}
+                onValueChange={handleActiveOrgChange}
+                disabled={[orgsBusy, orgs.length === 0].some(Boolean)}
+              >
+                <SelectTrigger
+                  className="w-full"
+                  aria-label={tr("den.active_org_title")}
+                >
+                  <SelectValue placeholder={tr("den.no_org_selected")} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {activeOrgOptions.map((org) => (
+                      <SelectItem key={org.value} value={org.value}>
+                        {org.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <RefreshButton
+              busy={orgsBusy}
+              disabled={orgsBusy}
+              onRefresh={onRefreshOrgs}
+            >
+              {tr("den.refresh")}
+            </RefreshButton>
+          </div>
+        </div>
+      </div>
+
+      {orgsError ? <SettingsNotice tone="error">{orgsError}</SettingsNotice> : null}
+    </section>
+  );
+}
diff --git a/apps/app/src/react-app/domains/settings/cloud/dev-mode.tsx b/apps/app/src/react-app/domains/settings/cloud/dev-mode.tsx
new file mode 100644
index 000000000..dfddde2b6
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/cloud/dev-mode.tsx
@@ -0,0 +1,57 @@
+/** @jsxImportSource react */
+import { ArrowUpRight } from "lucide-react";
+
+import { DEFAULT_DEN_BASE_URL } from "../../../../app/lib/den";
+import { Button } from "../../../design-system/button";
+import { TextInput } from "../../../design-system/text-input";
+import { useTranslate } from "@/hooks/use-translate";
+
+type CloudDevModeProps = {
+  authBusy: boolean;
+  baseUrlDraft: string;
+  onApplyBaseUrl: () => void;
+  onBaseUrlDraftChange: (value: string) => void;
+  onOpenControlPlane: () => void;
+  onResetBaseUrl: () => void;
+  sessionBusy: boolean;
+};
+
+export function CloudDevMode(props: CloudDevModeProps) {
+  const { tr } = useTranslate();
+  const controlsDisabled = [props.authBusy, props.sessionBusy].some(Boolean);
+
+  return (
+    <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
+      <TextInput
+        label={tr("den.cloud_control_plane_url_label")}
+        value={props.baseUrlDraft}
+        onChange={(event) => props.onBaseUrlDraftChange(event.currentTarget.value)}
+        placeholder={DEFAULT_DEN_BASE_URL}
+        hint={tr("den.cloud_control_plane_url_hint")}
+        disabled={controlsDisabled}
+      />
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          variant="outline"
+          className="h-9 px-3 text-xs"
+          onClick={props.onResetBaseUrl}
+          disabled={controlsDisabled}
+        >
+          {tr("den.cloud_control_plane_reset")}
+        </Button>
+        <Button
+          variant="secondary"
+          className="h-9 px-3 text-xs"
+          onClick={props.onApplyBaseUrl}
+          disabled={controlsDisabled}
+        >
+          {tr("den.cloud_control_plane_save")}
+        </Button>
+        <Button variant="outline" className="h-9 px-3 text-xs" onClick={props.onOpenControlPlane}>
+          {tr("den.cloud_control_plane_open")}
+          <ArrowUpRight size={13} />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/app/src/react-app/domains/settings/cloud/sections.tsx b/apps/app/src/react-app/domains/settings/cloud/sections.tsx
new file mode 100644
index 000000000..bf5a86c3c
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/cloud/sections.tsx
@@ -0,0 +1,1124 @@
+/** @jsxImportSource react */
+import type { CloudImportedPlugin, CloudImportedProvider, CloudImportedSkill, CloudImportedSkillHub } from "../../../../app/cloud/import-state";
+import type {
+  DenOrgMarketplaceResolved,
+  DenOrgLlmProvider,
+  DenOrgPlugin,
+  DenOrgSkillHub,
+} from "../../../../app/lib/den";
+import type { DenOrgSkillCard } from "../../../../app/types";
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
+import { cva } from "class-variance-authority";
+import fuzzysort from "fuzzysort";
+import * as React from "react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  RefreshButton,
+  SettingsSection,
+  SettingsNotice,
+  SettingsPill,
+  SettingsSectionHeader,
+  SettingsSectionHeaderActions,
+  SettingsSectionHeaderContent,
+  SettingsSectionHeaderDescription,
+  SettingsSectionHeaderTitle,
+} from "../settings-section";
+import {
+  SettingsList,
+  SettingsListItemActions,
+  SettingsListEmptyState,
+  SettingsListItem,
+  SettingsListItemContent,
+  SettingsListItemDescription,
+  SettingsListTitle,
+  SettingsListItemTitle,
+  SettingsListSearchInput,
+} from "../settings-list";
+import { useTranslate } from "@/hooks/use-translate";
+
+type ResourceActionKind = "import" | "remove" | "sync";
+
+export type CloudSkillHubRow = {
+  key: string;
+  hubId: string;
+  name: string;
+  hub: DenOrgSkillHub | null;
+  imported: CloudImportedSkillHub | null;
+  status: "available" | "imported" | "out_of_sync" | "removed_from_cloud";
+  liveSkillCount: number;
+  importedSkillCount: number;
+};
+
+export type CloudProviderRow = {
+  key: string;
+  cloudProviderId: string;
+  provider: DenOrgLlmProvider | null;
+  imported: CloudImportedProvider | null;
+  status: "available" | "imported" | "out_of_sync" | "removed_from_cloud";
+  name: string;
+};
+
+export type CloudSkillRow = {
+  key: string;
+  cloudSkillId: string;
+  skill: DenOrgSkillCard | null;
+  imported: CloudImportedSkill | null;
+  status: "available" | "installed" | "out_of_sync" | "removed_from_cloud";
+  title: string;
+  installedName: string | null;
+};
+
+export type CloudPluginRow = {
+  marketplaceId: string;
+  plugin: DenOrgPlugin;
+  imported: CloudImportedPlugin | null;
+  status: "available" | "imported" | "out_of_sync";
+};
+
+export type CloudWorker = {
+  workerId: string;
+  workerName: string;
+  status: string;
+  instanceUrl: string | null;
+  provider: string | null;
+  isMine: boolean;
+  createdAt: string | null;
+};
+
+const statusBadgeVariants = cva("", {
+  variants: {
+    tone: {
+      ready: "border-green-7/30 bg-green-3/20 text-green-11",
+      warning: "border-amber-7/30 bg-amber-3/20 text-amber-11",
+      error: "border-red-7/30 bg-red-3/20 text-red-11",
+      neutral: "border-gray-6/60 bg-gray-3/20 text-gray-11",
+    },
+  },
+});
+
+const skillSearchKeys = ["title"];
+const pluginSearchKeys = ["plugin.name"];
+const workerSearchKeys = ["workerName"];
+const nameSearchKeys = ["name"];
+
+function resourceStatusTone(status: string) {
+  switch (status) {
+    case "installed":
+    case "imported":
+      return "ready" as const;
+    case "out_of_sync":
+      return "warning" as const;
+    case "removed_from_cloud":
+      return "error" as const;
+    default:
+      return "neutral" as const;
+  }
+}
+
+function workerStatusValue(status: string) {
+  return status.trim().toLowerCase() || "unknown";
+}
+
+function workerStatusMeta(status: string, tr: (key: string) => string) {
+  const normalized = workerStatusValue(status);
+
+  switch (normalized) {
+    case "healthy":
+      return { label: tr("dashboard.worker_status_ready"), tone: "ready" as const, canOpen: true };
+    case "provisioning":
+      return { label: tr("dashboard.worker_status_starting"), tone: "warning" as const, canOpen: false };
+    case "failed":
+      return { label: tr("dashboard.worker_status_attention"), tone: "error" as const, canOpen: false };
+    case "stopped":
+      return { label: tr("dashboard.worker_status_stopped"), tone: "neutral" as const, canOpen: false };
+    default:
+      return {
+        label: normalized
+          ? `${normalized.slice(0, 1).toUpperCase()}${normalized.slice(1)}`
+          : tr("dashboard.worker_status_unknown"),
+        tone: "neutral" as const,
+        canOpen: normalized === "ready",
+      };
+  }
+}
+
+interface UseSearchProps<T> {
+  items: T[];
+  keys: string[];
+  query: string;
+}
+
+function useSearch<T>({ items, keys, query }: UseSearchProps<T>) {
+  return React.useMemo(() => {
+    if (!query.trim()) {
+      return items;
+    }
+
+    return fuzzysort.go(query, items, { keys }).map((result) => result.obj);
+  }, [items, keys, query]);
+}
+
+interface CloudSkillListItemProps {
+  actionId: string | null;
+  actionKind: ResourceActionKind | null;
+  row: CloudSkillRow;
+  onImportSkill: (cloudSkillId: string, title: string) => void | Promise<void>;
+  onRemoveSkill: (cloudSkillId: string, title: string) => void | Promise<void>;
+  onSyncSkill: (cloudSkillId: string, title: string) => void | Promise<void>;
+}
+
+function CloudSkillListItem({
+  actionId,
+  actionKind,
+  row,
+  onImportSkill,
+  onRemoveSkill,
+  onSyncSkill,
+}: CloudSkillListItemProps) {
+  const { tr, tx } = useTranslate();
+  const actionBusy = actionId === row.cloudSkillId;
+  const actionLabel = !actionBusy
+    ? null
+    : actionKind === "import"
+      ? tr("den.importing")
+      : actionKind === "sync"
+        ? tr("den.syncing")
+        : tr("den.removing");
+
+  return (
+    <SettingsListItem>
+      <SettingsListItemContent>
+        <SettingsListTitle>
+          <SettingsListItemTitle>{row.title}</SettingsListItemTitle>
+          {row.skill?.hubName ? <SettingsPill>{tx("skills.cloud_hub_label", { name: row.skill.hubName })}</SettingsPill> : null}
+          {row.skill?.shared === "public" ? <SettingsPill>{tr("skills.cloud_shared_public")}</SettingsPill> : null}
+          {row.skill?.shared === null && !row.skill?.hubName ? <SettingsPill>{tr("den.private_badge")}</SettingsPill> : null}
+          {row.installedName ? <SettingsPill>{tx("den.installed_name_badge", { name: row.installedName })}</SettingsPill> : null}
+          {row.status !== "available" ? (
+            <SettingsPill className={statusBadgeVariants({ tone: resourceStatusTone(row.status) })}>
+              {row.status === "installed"
+                ? tr("den.imported_badge")
+                : row.status === "out_of_sync"
+                  ? tr("den.out_of_sync_badge")
+                  : tr("den.removed_from_cloud_badge")}
+            </SettingsPill>
+          ) : null}
+        </SettingsListTitle>
+        <SettingsListItemDescription>
+          {row.status === "available"
+            ? tx("den.cloud_skill_detail", { title: row.title })
+            : row.status === "installed"
+              ? tx("den.cloud_skill_imported_detail", { name: row.installedName ?? row.title })
+              : row.status === "out_of_sync"
+                ? tx("den.cloud_skill_sync_detail", { name: row.installedName ?? row.title })
+                : tx("den.cloud_skill_removed_detail", { name: row.installedName ?? row.title })}
+        </SettingsListItemDescription>
+      </SettingsListItemContent>
+      <SettingsListItemActions>
+        {row.status === "out_of_sync" && row.skill ? (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => void onSyncSkill(row.cloudSkillId, row.title)}
+            disabled={actionId !== null}
+          >
+            {actionBusy && actionKind === "sync" ? tr("den.syncing") : tr("den.sync")}
+          </Button>
+        ) : null}
+        {row.status === "available" && row.skill ? (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void onImportSkill(row.cloudSkillId, row.title)}
+            disabled={actionId !== null}
+          >
+            {actionBusy ? actionLabel : tr("den.import_skill")}
+          </Button>
+        ) : null}
+        {row.status !== "available" ? (
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={() => void onRemoveSkill(row.cloudSkillId, row.title)}
+            disabled={actionId !== null}
+          >
+            {actionBusy ? actionLabel : tr("den.uninstall")}
+          </Button>
+        ) : null}
+      </SettingsListItemActions>
+    </SettingsListItem>
+  );
+}
+
+interface MarketplacePluginListItemProps {
+  actionId: string | null;
+  row: CloudPluginRow;
+  onImportPlugin: (marketplaceId: string | null, plugin: DenOrgPlugin) => void | Promise<void>;
+}
+
+function MarketplacePluginListItem({
+  actionId,
+  row,
+  onImportPlugin,
+}: MarketplacePluginListItemProps) {
+  const { tr } = useTranslate();
+  const actionBusy = actionId === row.plugin.id;
+  const counts = Object.entries(row.plugin.componentCounts)
+    .filter(([, count]) => count > 0)
+    .map(([type, count]) => `${count} ${type}${count === 1 ? "" : "s"}`);
+
+  return (
+    <SettingsListItem>
+      <SettingsListItemContent>
+        <SettingsListTitle>
+          <SettingsListItemTitle>{row.plugin.name}</SettingsListItemTitle>
+          {row.status !== "available" ? (
+            <SettingsPill className={statusBadgeVariants({ tone: resourceStatusTone(row.status) })}>
+              {row.status === "imported" ? tr("den.imported_badge") : tr("den.out_of_sync_badge")}
+            </SettingsPill>
+          ) : null}
+          {counts.map((label) => (
+            <SettingsPill key={label}>{label}</SettingsPill>
+          ))}
+        </SettingsListTitle>
+        <SettingsListItemDescription>
+          {row.plugin.description || "No description provided."}
+        </SettingsListItemDescription>
+        {row.imported?.files.length ? (
+          <div className="mt-1 truncate text-xs text-muted-foreground">
+            Installed files: {row.imported.files.map((file) => file.path).join(", ")}
+          </div>
+        ) : null}
+      </SettingsListItemContent>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => void onImportPlugin(row.marketplaceId, row.plugin)}
+        disabled={actionId !== null}
+      >
+        {actionBusy ? tr("den.importing") : row.status === "available" ? tr("den.import_provider") : tr("den.sync")}
+      </Button>
+    </SettingsListItem>
+  );
+}
+
+interface CloudWorkerListItemProps {
+  openingWorkerId: string | null;
+  worker: CloudWorker;
+  onOpenWorker: (workerId: string, workerName: string) => void | Promise<void>;
+}
+
+function CloudWorkerListItem({ openingWorkerId, worker, onOpenWorker }: CloudWorkerListItemProps) {
+  const { tr, tx } = useTranslate();
+  const status = workerStatusMeta(worker.status, tr);
+
+  return (
+    <SettingsListItem>
+      <SettingsListItemContent>
+        <SettingsListTitle>
+          <SettingsListItemTitle>{worker.workerName}</SettingsListItemTitle>
+          <SettingsPill className={statusBadgeVariants({ tone: status.tone })}>
+            {status.label}
+          </SettingsPill>
+        </SettingsListTitle>
+        <SettingsListItemDescription>
+          {[
+            worker.isMine ? tr("den.worker_mine_badge") : null,
+            worker.provider ? tx("den.worker_provider_label", { provider: worker.provider }) : tr("den.worker_secondary_cloud"),
+            worker.instanceUrl,
+          ].filter(Boolean).join(" · ")}
+        </SettingsListItemDescription>
+      </SettingsListItemContent>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => void onOpenWorker(worker.workerId, worker.workerName)}
+        disabled={[openingWorkerId !== null, !status.canOpen].some(Boolean)}
+        title={!status.canOpen ? tr("den.worker_not_ready_title") : undefined}
+      >
+        {openingWorkerId === worker.workerId ? tr("den.opening") : tr("den.open")}
+      </Button>
+    </SettingsListItem>
+  );
+}
+
+interface SkillHubListItemProps {
+  actionId: string | null;
+  actionKind: ResourceActionKind | null;
+  row: CloudSkillHubRow;
+  onImport: (hubId: string) => void | Promise<void>;
+  onRemove: (hubId: string) => void | Promise<void>;
+  onSync: (hubId: string) => void | Promise<void>;
+}
+
+function SkillHubListItem({ actionId, actionKind, row, onImport, onRemove, onSync }: SkillHubListItemProps) {
+  const { tr, tx } = useTranslate();
+  const actionBusy = actionId === row.hubId;
+  const actionLabel = !actionBusy
+    ? null
+    : actionKind === "import"
+      ? tr("den.importing")
+      : actionKind === "sync"
+        ? tr("den.syncing")
+        : tr("den.removing");
+
+  return (
+    <SettingsListItem>
+      <SettingsListItemContent>
+        <SettingsListTitle>
+          <SettingsListItemTitle>{row.name}</SettingsListItemTitle>
+          <SettingsPill>
+            {tx("den.skill_hub_skills_badge", {
+              count: row.hub?.skills.length ?? row.importedSkillCount,
+            })}
+          </SettingsPill>
+          {row.status !== "available" ? (
+            <SettingsPill className={statusBadgeVariants({ tone: resourceStatusTone(row.status) })}>
+              {row.status === "imported"
+                ? tr("den.imported_badge")
+                : row.status === "out_of_sync"
+                  ? tr("den.out_of_sync_badge")
+                  : tr("den.removed_from_cloud_badge")}
+            </SettingsPill>
+          ) : null}
+        </SettingsListTitle>
+        <SettingsListItemDescription>
+          {row.status === "available"
+            ? tx("den.skill_hub_detail", { count: row.liveSkillCount })
+            : row.status === "imported"
+              ? tx("den.skill_hub_imported_detail", { count: row.importedSkillCount })
+              : row.status === "out_of_sync"
+                ? tx("den.skill_hub_sync_detail", {
+                    liveCount: row.liveSkillCount,
+                    importedCount: row.importedSkillCount,
+                  })
+                : tx("den.skill_hub_removed_detail", { importedCount: row.importedSkillCount })}
+        </SettingsListItemDescription>
+      </SettingsListItemContent>
+      <SettingsListItemActions>
+        {row.status === "out_of_sync" && row.hub ? (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void onSync(row.hubId)}
+            disabled={actionId !== null}
+          >
+            {actionBusy && actionKind === "sync" ? tr("den.syncing") : tr("den.sync")}
+          </Button>
+        ) : null}
+        {row.status === "available" && row.hub ? (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void onImport(row.hubId)}
+            disabled={actionId !== null}
+          >
+            {actionBusy ? actionLabel : tr("den.import_all")}
+          </Button>
+        ) : null}
+        {row.status !== "available" ? (
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={() => void onRemove(row.hubId)}
+            disabled={actionId !== null}
+          >
+            {actionBusy ? actionLabel : row.status === "removed_from_cloud" ? tr("den.uninstall") : tr("common.remove")}
+          </Button>
+        ) : null}
+      </SettingsListItemActions>
+    </SettingsListItem>
+  );
+}
+
+interface CloudProviderListItemProps {
+  actionId: string | null;
+  actionKind: ResourceActionKind | null;
+  row: CloudProviderRow;
+  onImport: (cloudProviderId: string, providerName: string) => void | Promise<void>;
+  onRemove: (cloudProviderId: string, providerName: string) => void | Promise<void>;
+  onSync: (cloudProviderId: string, providerName: string) => void | Promise<void>;
+}
+
+function CloudProviderListItem({ actionId, actionKind, row, onImport, onRemove, onSync }: CloudProviderListItemProps) {
+  const { tr, tx } = useTranslate();
+  const actionBusy = actionId === row.cloudProviderId;
+  const actionLabel = !actionBusy
+    ? null
+    : actionKind === "import"
+      ? tr("den.importing")
+      : actionKind === "sync"
+        ? tr("den.syncing")
+        : tr("den.removing");
+
+  return (
+    <SettingsListItem>
+      <SettingsListItemContent>
+        <SettingsListTitle>
+          <SettingsListItemTitle>{row.name}</SettingsListItemTitle>
+          {row.status !== "available" ? (
+            <SettingsPill className={statusBadgeVariants({ tone: resourceStatusTone(row.status) })}>
+              {row.status === "imported"
+                ? tr("den.imported_badge")
+                : row.status === "out_of_sync"
+                  ? tr("den.out_of_sync_badge")
+                  : tr("den.removed_from_cloud_badge")}
+            </SettingsPill>
+          ) : null}
+        </SettingsListTitle>
+        <SettingsListItemDescription>
+          {[
+            row.provider?.providerId ?? row.imported?.providerId,
+            row.provider?.hasApiKey ? tr("den.credentials_ready_badge") : null,
+            row.status === "removed_from_cloud"
+              ? tx("den.cloud_provider_removed_detail", {
+                  providerId: row.imported?.providerId ?? row.name,
+                })
+              : row.status === "out_of_sync"
+                ? tx("den.cloud_provider_sync_detail", {
+                    count: row.provider?.models.length ?? 0,
+                    source: row.provider?.source === "custom" ? "custom" : "managed",
+                  })
+                : tx("den.cloud_provider_detail", {
+                    count: row.provider?.models.length ?? 0,
+                    source: row.provider?.source === "custom" ? "custom" : "managed",
+                  }),
+          ].filter(Boolean).join(" · ")}
+        </SettingsListItemDescription>
+      </SettingsListItemContent>
+      <SettingsListItemActions>
+        {row.status === "out_of_sync" && row.provider ? (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void onSync(row.cloudProviderId, row.name)}
+            disabled={actionId !== null}
+          >
+            {actionBusy && actionKind === "sync" ? tr("den.syncing") : tr("den.sync")}
+          </Button>
+        ) : null}
+        {row.status === "available" && row.provider ? (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void onImport(row.cloudProviderId, row.name)}
+            disabled={actionId !== null}
+          >
+            {actionBusy ? actionLabel : tr("den.import_provider")}
+          </Button>
+        ) : null}
+        {row.status !== "available" ? (
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={() => void onRemove(row.cloudProviderId, row.name)}
+            disabled={actionId !== null}
+          >
+            {actionBusy ? actionLabel : row.status === "removed_from_cloud" ? tr("den.uninstall") : tr("common.remove")}
+          </Button>
+        ) : null}
+      </SettingsListItemActions>
+    </SettingsListItem>
+  );
+}
+
+export interface CloudSkillsSectionProps {
+  actionError: string | null;
+  actionId: string | null;
+  actionKind: ResourceActionKind | null;
+  activeOrgName: string;
+  busy: boolean;
+  hasActiveOrg: boolean;
+  rows: CloudSkillRow[];
+  statusError: string | null;
+  onImportSkill: (cloudSkillId: string, title: string) => void | Promise<void>;
+  onRefresh: () => void | Promise<void>;
+  onRemoveSkill: (cloudSkillId: string, title: string) => void | Promise<void>;
+  onSyncSkill: (cloudSkillId: string, title: string) => void | Promise<void>;
+}
+
+export function CloudSkillsSection({
+  actionError,
+  actionId,
+  actionKind,
+  busy,
+  hasActiveOrg,
+  rows,
+  statusError,
+  onImportSkill,
+  onRefresh,
+  onRemoveSkill,
+  onSyncSkill,
+}: CloudSkillsSectionProps) {
+  const { tr } = useTranslate();
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const visibleRows = useSearch({ items: rows, keys: skillSearchKeys, query: searchQuery });
+  const skillGroups = [
+    { value: "available", label: "Available", rows: visibleRows.filter((row) => row.status === "available") },
+    { value: "out_of_sync", label: tr("den.out_of_sync_badge"), rows: visibleRows.filter((row) => row.status === "out_of_sync") },
+    { value: "installed", label: tr("skills.cloud_status_installed"), rows: visibleRows.filter((row) => row.status === "installed") },
+    { value: "removed_from_cloud", label: tr("den.removed_from_cloud_badge"), rows: visibleRows.filter((row) => row.status === "removed_from_cloud") },
+  ].filter((group) => group.rows.length > 0);
+
+  return (
+    <SettingsSection>
+      <SettingsSectionHeader>
+        <SettingsSectionHeaderContent>
+          <SettingsSectionHeaderTitle>
+            {tr("den.cloud_skills_title")}
+          </SettingsSectionHeaderTitle>
+          <SettingsSectionHeaderDescription>{tr("den.cloud_skills_hint")}</SettingsSectionHeaderDescription>
+        </SettingsSectionHeaderContent>
+        <SettingsSectionHeaderActions>
+          <RefreshButton
+            busy={busy}
+            disabled={[busy, !hasActiveOrg].some(Boolean)}
+            onRefresh={onRefresh}
+          >
+            {tr("den.refresh")}
+          </RefreshButton>
+        </SettingsSectionHeaderActions>
+      </SettingsSectionHeader>
+
+      {actionError ?? statusError ? (
+        <SettingsNotice tone="error">{actionError ?? statusError}</SettingsNotice>
+      ) : null}
+
+      {!busy && rows.length === 0 ? (
+        <SettingsListEmptyState>
+          {hasActiveOrg ? tr("den.no_cloud_skills") : tr("den.choose_org_for_skills")}
+        </SettingsListEmptyState>
+      ) : null}
+
+      {rows.length > 0 ? (
+        <>
+          <Field>
+            <FieldLabel className="sr-only" htmlFor="cloud-skill-search">
+              Search
+            </FieldLabel>
+            <SettingsListSearchInput
+              id="cloud-skill-search"
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.currentTarget.value)}
+            />
+            <FieldDescription className="sr-only">Search for a skill.</FieldDescription>
+          </Field>
+
+          {visibleRows.length > 0 ? (
+            <Accordion multiple defaultValue={["available", "out_of_sync"]}>
+              {skillGroups.map((group) => (
+                <AccordionItem key={group.value} value={group.value}>
+                  <AccordionTrigger className="items-center hover:no-underline group gap-x-3">
+                    <span className="group-hover:underline">{group.label}</span>
+                    <SettingsPill>{group.rows.length}</SettingsPill>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-1.5 pb-1.5">
+                    <SettingsList>
+                      {group.rows.map((row) => (
+                        <CloudSkillListItem
+                          key={row.key}
+                          actionId={actionId}
+                          actionKind={actionKind}
+                          row={row}
+                          onImportSkill={onImportSkill}
+                          onRemoveSkill={onRemoveSkill}
+                          onSyncSkill={onSyncSkill}
+                        />
+                      ))}
+                    </SettingsList>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          ) : (
+            <SettingsListEmptyState>No skills match your search.</SettingsListEmptyState>
+          )}
+        </>
+      ) : null}
+    </SettingsSection>
+  );
+}
+
+export interface MarketplacePluginsSectionProps {
+  actionError: string | null;
+  actionId: string | null;
+  activeMarketplaceId: string | null;
+  activeOrgName: string;
+  busy: boolean;
+  hasActiveOrg: boolean;
+  marketplaces: DenOrgMarketplaceResolved[];
+  rowsByMarketplace: Record<string, CloudPluginRow[]>;
+  statusError: string | null;
+  onImportPlugin: (marketplaceId: string | null, plugin: DenOrgPlugin) => void | Promise<void>;
+  onRefresh: () => void | Promise<void>;
+  onSelectMarketplace: (marketplaceId: string) => void;
+}
+
+export function MarketplacePluginsSection({
+  actionError,
+  actionId,
+  activeMarketplaceId,
+  busy,
+  hasActiveOrg,
+  marketplaces,
+  rowsByMarketplace,
+  statusError,
+  onImportPlugin,
+  onRefresh,
+  onSelectMarketplace,
+}: MarketplacePluginsSectionProps) {
+  const { tr } = useTranslate();
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const selectedMarketplace =
+    marketplaces.find((entry) => entry.marketplace.id === activeMarketplaceId) ?? marketplaces[0] ?? null;
+  const selectedRows = selectedMarketplace ? rowsByMarketplace[selectedMarketplace.marketplace.id] ?? [] : [];
+  const visibleRows = useSearch({ items: selectedRows, keys: pluginSearchKeys, query: searchQuery });
+  const pluginGroups = [
+    { value: "available", label: "Available", rows: visibleRows.filter((row) => row.status === "available") },
+    { value: "out_of_sync", label: tr("den.out_of_sync_badge"), rows: visibleRows.filter((row) => row.status === "out_of_sync") },
+    { value: "imported", label: tr("den.imported_badge"), rows: visibleRows.filter((row) => row.status === "imported") },
+  ].filter((group) => group.rows.length > 0);
+
+  return (
+    <SettingsSection>
+      <SettingsSectionHeader>
+        <SettingsSectionHeaderContent>
+          <SettingsSectionHeaderTitle>
+            Marketplaces & Plugins
+          </SettingsSectionHeaderTitle>
+          <SettingsSectionHeaderDescription>
+            Browse organization marketplaces and import plugin files into this workspace.
+          </SettingsSectionHeaderDescription>
+        </SettingsSectionHeaderContent>
+        <SettingsSectionHeaderActions>
+          <RefreshButton
+            busy={busy}
+            disabled={[busy, !hasActiveOrg].some(Boolean)}
+            onRefresh={onRefresh}
+          >
+            {tr("den.refresh")}
+          </RefreshButton>
+        </SettingsSectionHeaderActions>
+      </SettingsSectionHeader>
+
+      {actionError ?? statusError ? (
+        <SettingsNotice tone="error">{actionError ?? statusError}</SettingsNotice>
+      ) : null}
+
+      {!busy && marketplaces.length === 0 ? (
+        <SettingsListEmptyState>
+          {hasActiveOrg ? "No marketplaces are available yet." : "Choose an organization to view marketplaces."}
+        </SettingsListEmptyState>
+      ) : null}
+
+      {marketplaces.length > 0 ? (
+        <Tabs
+          value={selectedMarketplace?.marketplace.id}
+          onValueChange={onSelectMarketplace}
+          className="gap-y-3"
+        >
+          <TabsList className="max-w-full justify-start overflow-x-auto">
+            {marketplaces.map((entry) => (
+              <TabsTrigger
+                key={entry.marketplace.id}
+                value={entry.marketplace.id}
+                className="flex-none"
+              >
+                {entry.marketplace.name}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          <Field>
+            <FieldLabel className="sr-only" htmlFor="marketplace-plugin-search">
+              Search
+            </FieldLabel>
+            <SettingsListSearchInput
+              id="marketplace-plugin-search"
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.currentTarget.value)}
+            />
+            <FieldDescription className="sr-only">Search for a plugin.</FieldDescription>
+          </Field>
+
+          <TabsContent value={selectedMarketplace?.marketplace.id}>
+            {visibleRows.length > 0 ? (
+              <Accordion multiple defaultValue={["available", "out_of_sync"]}>
+                {pluginGroups.map((group) => (
+                  <AccordionItem key={group.value} value={group.value}>
+                    <AccordionTrigger className="items-center hover:no-underline group gap-x-3">
+                      <span className="group-hover:underline">{group.label}</span>
+                      <SettingsPill>{group.rows.length}</SettingsPill>
+                    </AccordionTrigger>
+                    <AccordionContent className="px-1.5 pb-1.5">
+                      <SettingsList>
+                        {group.rows.map((row) => (
+                          <MarketplacePluginListItem
+                            key={row.plugin.id}
+                            actionId={actionId}
+                            row={row}
+                            onImportPlugin={onImportPlugin}
+                          />
+                        ))}
+                      </SettingsList>
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            ) : null}
+
+            {selectedRows.length > 0 && visibleRows.length === 0 ? (
+              <SettingsListEmptyState>No plugins match your search.</SettingsListEmptyState>
+            ) : null}
+
+            {selectedMarketplace && selectedRows.length === 0 ? (
+              <SettingsListEmptyState>This marketplace does not have plugins yet.</SettingsListEmptyState>
+            ) : null}
+          </TabsContent>
+        </Tabs>
+      ) : null}
+    </SettingsSection>
+  );
+}
+
+export interface CloudWorkersSectionProps {
+  activeOrgName: string;
+  openingWorkerId: string | null;
+  refreshDisabled: boolean;
+  workers: CloudWorker[];
+  workersBusy: boolean;
+  workersError: string | null;
+  onOpenWorker: (workerId: string, workerName: string) => void | Promise<void>;
+  onRefreshWorkers: () => void | Promise<void>;
+}
+
+export function CloudWorkersSection({
+  openingWorkerId,
+  refreshDisabled,
+  workers,
+  workersBusy,
+  workersError,
+  onOpenWorker,
+  onRefreshWorkers,
+}: CloudWorkersSectionProps) {
+  const { tr } = useTranslate();
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const visibleWorkers = useSearch({ items: workers, keys: workerSearchKeys, query: searchQuery });
+  const workerGroups: { value: string; label: string; rows: CloudWorker[] }[] = [];
+
+  for (const worker of visibleWorkers) {
+    const value = workerStatusValue(worker.status);
+    const group = workerGroups.find((entry) => entry.value === value);
+
+    if (group) {
+      group.rows.push(worker);
+    } else {
+      workerGroups.push({ value, label: workerStatusMeta(worker.status, tr).label, rows: [worker] });
+    }
+  }
+
+  const workerDefaultGroups = workerGroups.filter((group) => group.value !== "stopped").map((group) => group.value);
+
+  return (
+    <SettingsSection>
+      <SettingsSectionHeader>
+        <SettingsSectionHeaderContent>
+          <SettingsSectionHeaderTitle>
+            {tr("den.cloud_workers_title")}
+          </SettingsSectionHeaderTitle>
+          <SettingsSectionHeaderDescription>{tr("den.cloud_workers_hint")}</SettingsSectionHeaderDescription>
+        </SettingsSectionHeaderContent>
+        <SettingsSectionHeaderActions>
+          <RefreshButton
+            busy={workersBusy}
+            disabled={refreshDisabled}
+            onRefresh={onRefreshWorkers}
+          >
+            {tr("den.refresh")}
+          </RefreshButton>
+        </SettingsSectionHeaderActions>
+      </SettingsSectionHeader>
+
+      {workersError ? <SettingsNotice tone="error">{workersError}</SettingsNotice> : null}
+
+      {!workersBusy && workers.length === 0 ? (
+        <SettingsListEmptyState>{tr("den.no_cloud_workers")}</SettingsListEmptyState>
+      ) : null}
+
+      {workers.length > 0 ? (
+        <>
+          <Field>
+            <FieldLabel className="sr-only" htmlFor="cloud-worker-search">
+              Search
+            </FieldLabel>
+            <SettingsListSearchInput
+              id="cloud-worker-search"
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.currentTarget.value)}
+            />
+            <FieldDescription className="sr-only">Search for a worker.</FieldDescription>
+          </Field>
+
+          {visibleWorkers.length > 0 ? (
+            <Accordion multiple defaultValue={workerDefaultGroups}>
+              {workerGroups.map((group) => (
+                <AccordionItem key={group.value} value={group.value}>
+                  <AccordionTrigger className="items-center hover:no-underline group gap-x-3">
+                    <span className="group-hover:underline">{group.label}</span>
+                    <SettingsPill>{group.rows.length}</SettingsPill>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-1.5 pb-1.5">
+                    <SettingsList>
+                      {group.rows.map((worker) => (
+                        <CloudWorkerListItem
+                          key={worker.workerId}
+                          openingWorkerId={openingWorkerId}
+                          worker={worker}
+                          onOpenWorker={onOpenWorker}
+                        />
+                      ))}
+                    </SettingsList>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          ) : (
+            <SettingsListEmptyState>No workers match your search.</SettingsListEmptyState>
+          )}
+        </>
+      ) : null}
+    </SettingsSection>
+  );
+}
+
+export interface SkillHubsSectionProps {
+  actionError: string | null;
+  actionId: string | null;
+  actionKind: ResourceActionKind | null;
+  activeOrgName: string;
+  busy: boolean;
+  hasActiveOrg: boolean;
+  rows: CloudSkillHubRow[];
+  statusError: string | null;
+  onImport: (hubId: string) => void | Promise<void>;
+  onRefresh: () => void | Promise<void>;
+  onRemove: (hubId: string) => void | Promise<void>;
+  onSync: (hubId: string) => void | Promise<void>;
+}
+
+export function SkillHubsSection({
+  actionError,
+  actionId,
+  actionKind,
+  busy,
+  hasActiveOrg,
+  rows,
+  statusError,
+  onImport,
+  onRefresh,
+  onRemove,
+  onSync,
+}: SkillHubsSectionProps) {
+  const { tr } = useTranslate();
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const visibleRows = useSearch({ items: rows, keys: nameSearchKeys, query: searchQuery });
+  const skillHubGroups = [
+    { value: "available", label: "Available", rows: visibleRows.filter((row) => row.status === "available") },
+    { value: "out_of_sync", label: tr("den.out_of_sync_badge"), rows: visibleRows.filter((row) => row.status === "out_of_sync") },
+    { value: "imported", label: tr("den.imported_badge"), rows: visibleRows.filter((row) => row.status === "imported") },
+    { value: "removed_from_cloud", label: tr("den.removed_from_cloud_badge"), rows: visibleRows.filter((row) => row.status === "removed_from_cloud") },
+  ].filter((group) => group.rows.length > 0);
+
+  return (
+    <SettingsSection>
+      <SettingsSectionHeader>
+        <SettingsSectionHeaderContent>
+          <SettingsSectionHeaderTitle>
+            {tr("den.skill_hubs_title")}
+          </SettingsSectionHeaderTitle>
+          <SettingsSectionHeaderDescription>{tr("den.skill_hubs_hint")}</SettingsSectionHeaderDescription>
+        </SettingsSectionHeaderContent>
+        <SettingsSectionHeaderActions>
+          <RefreshButton
+            busy={busy}
+            disabled={[busy, !hasActiveOrg].some(Boolean)}
+            onRefresh={onRefresh}
+          >
+            {tr("den.refresh")}
+          </RefreshButton>
+        </SettingsSectionHeaderActions>
+      </SettingsSectionHeader>
+
+      {actionError ?? statusError ? (
+        <SettingsNotice tone="error">{actionError ?? statusError}</SettingsNotice>
+      ) : null}
+
+      {!busy && rows.length === 0 ? (
+        <SettingsListEmptyState>
+          {hasActiveOrg ? tr("den.no_skill_hubs") : tr("den.choose_org_for_skill_hubs")}
+        </SettingsListEmptyState>
+      ) : null}
+
+      {rows.length > 0 ? (
+        <>
+          <Field>
+            <FieldLabel className="sr-only" htmlFor="skill-hub-search">
+              Search
+            </FieldLabel>
+            <SettingsListSearchInput
+              id="skill-hub-search"
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.currentTarget.value)}
+            />
+            <FieldDescription className="sr-only">Search for a skill hub.</FieldDescription>
+          </Field>
+
+          {visibleRows.length > 0 ? (
+            <Accordion multiple defaultValue={["available", "out_of_sync"]}>
+              {skillHubGroups.map((group) => (
+                <AccordionItem key={group.value} value={group.value}>
+                  <AccordionTrigger className="items-center hover:no-underline group gap-x-3">
+                    <span className="group-hover:underline">{group.label}</span>
+                    <SettingsPill>{group.rows.length}</SettingsPill>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-1.5 pb-1.5">
+                    <SettingsList>
+                      {group.rows.map((row) => (
+                        <SkillHubListItem
+                          key={row.key}
+                          actionId={actionId}
+                          actionKind={actionKind}
+                          row={row}
+                          onImport={onImport}
+                          onRemove={onRemove}
+                          onSync={onSync}
+                        />
+                      ))}
+                    </SettingsList>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          ) : (
+            <SettingsListEmptyState>No skill hubs match your search.</SettingsListEmptyState>
+          )}
+        </>
+      ) : null}
+    </SettingsSection>
+  );
+}
+
+export interface CloudProvidersSectionProps {
+  actionError: string | null;
+  actionId: string | null;
+  actionKind: ResourceActionKind | null;
+  activeOrgName: string;
+  busy: boolean;
+  hasActiveOrg: boolean;
+  rows: CloudProviderRow[];
+  onImport: (cloudProviderId: string, providerName: string) => void | Promise<void>;
+  onRefresh: () => void | Promise<void>;
+  onRemove: (cloudProviderId: string, providerName: string) => void | Promise<void>;
+  onSync: (cloudProviderId: string, providerName: string) => void | Promise<void>;
+}
+
+export function CloudProvidersSection({
+  actionError,
+  actionId,
+  actionKind,
+  busy,
+  hasActiveOrg,
+  rows,
+  onImport,
+  onRefresh,
+  onRemove,
+  onSync,
+}: CloudProvidersSectionProps) {
+  const { tr } = useTranslate();
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const visibleRows = useSearch({ items: rows, keys: nameSearchKeys, query: searchQuery });
+  const providerGroups = [
+    { value: "available", label: "Available", rows: visibleRows.filter((row) => row.status === "available") },
+    { value: "out_of_sync", label: tr("den.out_of_sync_badge"), rows: visibleRows.filter((row) => row.status === "out_of_sync") },
+    { value: "imported", label: tr("den.imported_badge"), rows: visibleRows.filter((row) => row.status === "imported") },
+    { value: "removed_from_cloud", label: tr("den.removed_from_cloud_badge"), rows: visibleRows.filter((row) => row.status === "removed_from_cloud") },
+  ].filter((group) => group.rows.length > 0);
+
+  return (
+    <SettingsSection>
+      <SettingsSectionHeader>
+        <SettingsSectionHeaderContent>
+          <SettingsSectionHeaderTitle>
+            {tr("den.cloud_providers_title")}
+          </SettingsSectionHeaderTitle>
+          <SettingsSectionHeaderDescription>{tr("den.cloud_providers_hint")}</SettingsSectionHeaderDescription>
+        </SettingsSectionHeaderContent>
+        <SettingsSectionHeaderActions>
+          <RefreshButton
+            busy={busy}
+            disabled={[busy, !hasActiveOrg].some(Boolean)}
+            onRefresh={onRefresh}
+          >
+            {tr("den.refresh")}
+          </RefreshButton>
+        </SettingsSectionHeaderActions>
+      </SettingsSectionHeader>
+
+      {actionError ? <SettingsNotice tone="error">{actionError}</SettingsNotice> : null}
+
+      {!busy && rows.length === 0 ? (
+        <SettingsListEmptyState>
+          {hasActiveOrg ? tr("den.no_cloud_providers") : tr("den.choose_org_for_providers")}
+        </SettingsListEmptyState>
+      ) : null}
+
+      {rows.length > 0 ? (
+        <>
+          <Field>
+            <FieldLabel className="sr-only" htmlFor="cloud-provider-search">
+              Search
+            </FieldLabel>
+            <SettingsListSearchInput
+              id="cloud-provider-search"
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.currentTarget.value)}
+            />
+            <FieldDescription className="sr-only">Search for a provider.</FieldDescription>
+          </Field>
+
+          {visibleRows.length > 0 ? (
+            <Accordion multiple defaultValue={["available", "imported", "out_of_sync"]}>
+              {providerGroups.map((group) => (
+                <AccordionItem key={group.value} value={group.value}>
+                  <AccordionTrigger className="items-center hover:no-underline group gap-x-3">
+                    <span className="group-hover:underline">{group.label}</span>
+                    <SettingsPill>{group.rows.length}</SettingsPill>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-1.5 pb-1.5">
+                    <SettingsList>
+                      {group.rows.map((row) => (
+                        <CloudProviderListItem
+                          key={row.key}
+                          actionId={actionId}
+                          actionKind={actionKind}
+                          row={row}
+                          onImport={onImport}
+                          onRemove={onRemove}
+                          onSync={onSync}
+                        />
+                      ))}
+                    </SettingsList>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          ) : (
+            <SettingsListEmptyState>No providers match your search.</SettingsListEmptyState>
+          )}
+        </>
+      ) : null}
+    </SettingsSection>
+  );
+}
diff --git a/apps/app/src/react-app/domains/settings/panels/den-settings-panel.tsx b/apps/app/src/react-app/domains/settings/panels/den-settings-panel.tsx
index 9bd9222c4..9fe881303 100644
--- a/apps/app/src/react-app/domains/settings/panels/den-settings-panel.tsx
+++ b/apps/app/src/react-app/domains/settings/panels/den-settings-panel.tsx
@@ -1,26 +1,14 @@
 /** @jsxImportSource react */
-import { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  ArrowUpRight,
-  Boxes,
-  Brain,
-  Cloud,
-  KeyRound,
-  LogOut,
-  Package,
-  RefreshCcw,
-  Server,
-  Users,
-} from "lucide-react";
-
-import { currentLocale, t } from "../../../../i18n";
+import * as React from "react";
+import { ArrowUpRight } from "lucide-react";
+
 import {
   buildDenAuthUrl,
   clearDenSession,
   DEFAULT_DEN_BASE_URL,
   DenApiError,
-  type DenOrgLlmProvider,
   type DenOrgMarketplaceResolved,
+  type DenOrgLlmProvider,
   type DenOrgPlugin,
   type DenOrgSkillHub,
   type DenUser,
@@ -38,46 +26,42 @@ import {
 } from "../../../../app/lib/den-session-events";
 import type { CloudImportedPlugin, CloudImportedProvider, CloudImportedSkill, CloudImportedSkillHub } from "../../../../app/cloud/import-state";
 import type { DenOrgSkillCard, SkillCard } from "../../../../app/types";
-import { Button } from "../../../design-system/button";
-import { SelectMenu } from "../../../design-system/select-menu";
-import { TextInput } from "../../../design-system/text-input";
-
-type CloudSkillHubRow = {
-  key: string;
-  hubId: string;
-  name: string;
-  hub: DenOrgSkillHub | null;
-  imported: CloudImportedSkillHub | null;
-  status: "available" | "imported" | "out_of_sync" | "removed_from_cloud";
-  liveSkillCount: number;
-  importedSkillCount: number;
-};
-
-type CloudProviderRow = {
-  key: string;
-  cloudProviderId: string;
-  provider: DenOrgLlmProvider | null;
-  imported: CloudImportedProvider | null;
-  status: "available" | "imported" | "out_of_sync" | "removed_from_cloud";
-  name: string;
-};
-
-type CloudSkillRow = {
-  key: string;
-  cloudSkillId: string;
-  skill: DenOrgSkillCard | null;
-  imported: CloudImportedSkill | null;
-  status: "available" | "installed" | "out_of_sync" | "removed_from_cloud";
-  title: string;
-  installedName: string | null;
-};
-
-type CloudPluginRow = {
-  marketplaceId: string;
-  plugin: DenOrgPlugin;
-  imported: CloudImportedPlugin | null;
-  status: "available" | "imported" | "out_of_sync";
-};
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  CloudProvidersSection,
+  CloudSkillsSection,
+  CloudWorkersSection,
+  MarketplacePluginsSection,
+  SkillHubsSection,
+  type CloudPluginRow,
+  type CloudProviderRow,
+  type CloudSkillHubRow,
+  type CloudSkillRow,
+} from "../cloud/sections";
+import { CloudAccountSection } from "../cloud/cloud-account-section";
+import { CloudDevMode } from "../cloud/dev-mode";
+import {
+  SettingsSection,
+  SettingsInset,
+  SettingsNotice,
+  SettingsSectionHeader,
+  SettingsSectionHeaderActions,
+  SettingsSectionHeaderContent,
+  SettingsSectionHeaderDescription,
+  SettingsSectionHeaderTitle,
+  SettingsStack,
+  SettingsStatusBadge,
+} from "../settings-section";
+import { useStatusToasts } from "../../shell-feedback/status-toasts";
+import { useTranslate } from "@/hooks/use-translate";
 
 type AsyncResult = { ok: boolean; message: string };
 
@@ -121,61 +105,11 @@ export type DenSettingsPanelProps = {
   removeCloudProvider: (cloudProviderId: string) => Promise<string | void>;
 };
 
-const settingsPanelClass = "ow-soft-card rounded-[28px] p-5 md:p-6";
-const settingsPanelSoftClass = "ow-soft-card-quiet rounded-2xl p-4";
-const headerBadgeClass =
-  "inline-flex min-h-8 items-center gap-2 rounded-xl border border-dls-border bg-dls-hover px-3 text-[13px] font-medium text-dls-text shadow-sm";
-const headerStatusBadgeClass =
-  "inline-flex min-h-10 min-w-[132px] items-center justify-center gap-2 rounded-2xl border border-dls-border bg-dls-hover px-4 text-center text-sm font-medium text-dls-text shadow-sm";
-const sectionPillClass =
-  "inline-flex items-center gap-1.5 rounded-full border border-dls-border bg-dls-hover px-2.5 py-1 text-[11px] font-medium text-dls-secondary";
-const softNoticeClass =
-  "rounded-xl border border-dls-border bg-dls-hover px-3 py-2 text-xs text-dls-secondary";
-const quietControlClass =
-  "border border-dls-border bg-dls-hover text-dls-text shadow-sm";
-const errorBannerClass =
-  "rounded-xl border border-red-7/30 bg-red-1/40 px-3 py-2 text-xs text-red-11";
-
 const sortStrings = (values: string[]) => [...values].sort();
 
 const sameStringList = (a: string[], b: string[]) =>
   a.length === b.length && a.every((value, index) => value === b[index]);
 
-function statusBadgeClass(kind: "ready" | "warning" | "neutral" | "error") {
-  switch (kind) {
-    case "ready":
-      return "border-green-7/30 bg-green-3/20 text-green-11";
-    case "warning":
-      return "border-amber-7/30 bg-amber-3/20 text-amber-11";
-    case "error":
-      return "border-red-7/30 bg-red-3/20 text-red-11";
-    default:
-      return "border-gray-6/60 bg-gray-3/20 text-gray-11";
-  }
-}
-
-function workerStatusMeta(status: string, tr: (key: string) => string) {
-  const normalized = status.trim().toLowerCase();
-  switch (normalized) {
-    case "healthy":
-      return { label: tr("dashboard.worker_status_ready"), tone: "ready" as const, canOpen: true };
-    case "provisioning":
-      return { label: tr("dashboard.worker_status_starting"), tone: "warning" as const, canOpen: false };
-    case "failed":
-      return { label: tr("dashboard.worker_status_attention"), tone: "error" as const, canOpen: false };
-    case "stopped":
-      return { label: tr("dashboard.worker_status_stopped"), tone: "neutral" as const, canOpen: false };
-    default:
-      return {
-        label: normalized
-          ? `${normalized.slice(0, 1).toUpperCase()}${normalized.slice(1)}`
-          : tr("dashboard.worker_status_unknown"),
-        tone: "neutral" as const,
-        canOpen: normalized === "ready",
-      };
-  }
-}
-
 function parseManualAuthInput(value: string) {
   const trimmed = value.trim();
   if (!trimmed) return null;
@@ -203,34 +137,148 @@ function parseManualAuthInput(value: string) {
   return trimmed.length >= 12 ? { grant: trimmed } : null;
 }
 
-export function DenSettingsPanel(props: DenSettingsPanelProps) {
-  const tr = useCallback((key: string) => t(key, currentLocale()), []);
-  const tx = useCallback(
-    (key: string, params?: Record<string, string | number>) =>
-      t(key, currentLocale(), params),
-    [],
+interface DenSignedOutPanelProps {
+  authBusy: boolean;
+  authError: string | null;
+  onClearAuthError: () => void;
+  onOpenBrowserAuth: (mode: "sign-in" | "sign-up") => void;
+  onSubmitManualAuth: (input: string) => Promise<boolean>;
+  sessionBusy: boolean;
+}
+
+function DenSignedOutPanel({
+  authBusy,
+  authError,
+  onClearAuthError,
+  onOpenBrowserAuth,
+  onSubmitManualAuth,
+  sessionBusy,
+}: DenSignedOutPanelProps) {
+  const { tr } = useTranslate();
+  const [manualAuthOpen, setManualAuthOpen] = React.useState(false);
+  const [manualAuthInput, setManualAuthInput] = React.useState("");
+  const controlsDisabled = [authBusy, sessionBusy].some(Boolean);
+
+  const submitManualAuth = async () => {
+    const ok = await onSubmitManualAuth(manualAuthInput);
+    if (!ok) return;
+    setManualAuthInput("");
+    setManualAuthOpen(false);
+  };
+
+  return (
+    <SettingsSection>
+      <SettingsSectionHeader>
+        <SettingsSectionHeaderContent>
+          <SettingsSectionHeaderTitle>{tr("den.signin_title")}</SettingsSectionHeaderTitle>
+          <SettingsSectionHeaderDescription className="max-w-[54ch]">
+            {tr("den.cloud_sleep_hint")}
+          </SettingsSectionHeaderDescription>
+        </SettingsSectionHeaderContent>
+      </SettingsSectionHeader>
+
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-wrap items-center gap-2">
+          <Button onClick={() => onOpenBrowserAuth("sign-in")}>
+            {tr("den.signin_button")}
+            <ArrowUpRight size={13} />
+          </Button>
+          <Button variant="outline" onClick={() => onOpenBrowserAuth("sign-up")}>
+            {tr("den.create_account")}
+            <ArrowUpRight size={13} />
+          </Button>
+        </div>
+
+        <Collapsible
+          open={manualAuthOpen}
+          onOpenChange={(open) => {
+            setManualAuthOpen(open);
+            onClearAuthError();
+          }}
+          disabled={controlsDisabled}
+          className="flex flex-col gap-3"
+        >
+          <CollapsibleTrigger
+            render={<Button variant="ghost" size="sm" className="w-fit self-start" disabled={controlsDisabled} />}
+          >
+            {manualAuthOpen ? tr("den.hide_signin_code") : tr("den.paste_signin_code")}
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <SettingsInset className="flex flex-col gap-y-3">
+              <Field data-disabled={controlsDisabled}>
+                <FieldLabel htmlFor="den-signin-link">{tr("den.signin_link_label")}</FieldLabel>
+                <Input
+                  id="den-signin-link"
+                  value={manualAuthInput}
+                  onChange={(event) => setManualAuthInput(event.currentTarget.value)}
+                  placeholder={tr("den.signin_link_placeholder")}
+                  disabled={controlsDisabled}
+                />
+                <FieldDescription className="text-xs">{tr("den.signin_link_hint")}</FieldDescription>
+              </Field>
+              <div className="flex flex-wrap items-center gap-2">
+                <Button
+                  onClick={() => void submitManualAuth()}
+                  disabled={[controlsDisabled, !manualAuthInput.trim()].some(Boolean)}
+                >
+                  {authBusy ? tr("den.finishing") : tr("den.finish_signin")}
+                </Button>
+              </div>
+            </SettingsInset>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+
+      {authError ? <SettingsNotice tone="error">{authError}</SettingsNotice> : null}
+
+      <SettingsInset className="text-sm text-gray-10">
+        {tr("den.auto_reconnect_hint")}
+      </SettingsInset>
+    </SettingsSection>
   );
+}
 
-  const initial = useMemo(() => readDenSettings(), []);
+export function DenSettingsPanel(props: DenSettingsPanelProps) {
+  const { tr, tx } = useTranslate();
+  const { showToast } = useStatusToasts();
+
+  const initial = React.useMemo(() => readDenSettings(), []);
   const initialBaseUrl = initial.baseUrl || DEFAULT_DEN_BASE_URL;
 
-  const [baseUrl, setBaseUrl] = useState(initialBaseUrl);
-  const [baseUrlDraft, setBaseUrlDraft] = useState(initialBaseUrl);
-  const [baseUrlError, setBaseUrlError] = useState<string | null>(null);
-  const [authToken, setAuthToken] = useState(initial.authToken?.trim() || "");
-  const [activeOrgId, setActiveOrgId] = useState(initial.activeOrgId?.trim() || "");
-  const [authBusy, setAuthBusy] = useState(false);
-  const [manualAuthOpen, setManualAuthOpen] = useState(false);
-  const [manualAuthInput, setManualAuthInput] = useState("");
-  const [sessionBusy, setSessionBusy] = useState(false);
-  const [orgsBusy, setOrgsBusy] = useState(false);
-  const [workersBusy, setWorkersBusy] = useState(false);
-  const [openingWorkerId, setOpeningWorkerId] = useState<string | null>(null);
-  const [user, setUser] = useState<DenUser | null>(null);
-  const [orgs, setOrgs] = useState<
+  // Connection settings
+  const [baseUrl, setBaseUrl] = React.useState(initialBaseUrl);
+  const [baseUrlDraft, setBaseUrlDraft] = React.useState(initialBaseUrl);
+  const [baseUrlError, setBaseUrlError] = React.useState<string | null>(null);
+  const [authToken, setAuthToken] = React.useState(initial.authToken?.trim() || "");
+  const client = React.useMemo(
+    () => createDenClient({ baseUrl, token: authToken }),
+    [authToken, baseUrl],
+  );
+
+  // Auth session
+  const [authBusy, setAuthBusy] = React.useState(false);
+  const [sessionBusy, setSessionBusy] = React.useState(false);
+  const [user, setUser] = React.useState<DenUser | null>(null);
+  const [statusMessage, setStatusMessage] = React.useState<string | null>(null);
+  const [authError, setAuthError] = React.useState<string | null>(null);
+
+  // Organizations
+  const [activeOrgId, setActiveOrgId] = React.useState(initial.activeOrgId?.trim() || "");
+  const [orgsBusy, setOrgsBusy] = React.useState(false);
+  const [orgs, setOrgs] = React.useState<
     Array<{ id: string; name: string; slug: string; role: "owner" | "admin" | "member" }>
   >([]);
-  const [workers, setWorkers] = useState<
+  const [orgsError, setOrgsError] = React.useState<string | null>(null);
+  const activeOrg = React.useMemo(
+    () => orgs.find((org) => org.id === activeOrgId) ?? null,
+    [activeOrgId, orgs],
+  );
+  const activeOrgName = activeOrg?.name || tr("den.no_org_selected");
+
+  // Workers
+  const [workersBusy, setWorkersBusy] = React.useState(false);
+  const [openingWorkerId, setOpeningWorkerId] = React.useState<string | null>(null);
+  const [workers, setWorkers] = React.useState<
     Array<{
       workerId: string;
       workerName: string;
@@ -241,43 +289,35 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
       createdAt: string | null;
     }>
   >([]);
-  const [statusMessage, setStatusMessage] = useState<string | null>(null);
-  const [authError, setAuthError] = useState<string | null>(null);
-  const [orgsError, setOrgsError] = useState<string | null>(null);
-  const [workersError, setWorkersError] = useState<string | null>(null);
-  const [skillHubsBusy, setSkillHubsBusy] = useState(false);
-  const [skillHubActionId, setSkillHubActionId] = useState<string | null>(null);
-  const [skillHubActionKind, setSkillHubActionKind] = useState<"import" | "remove" | "sync" | null>(null);
-  const [skillHubActionError, setSkillHubActionError] = useState<string | null>(null);
-  const [skillsBusy, setSkillsBusy] = useState(false);
-  const [skillActionId, setSkillActionId] = useState<string | null>(null);
-  const [skillActionKind, setSkillActionKind] = useState<"import" | "remove" | "sync" | null>(null);
-  const [skillActionError, setSkillActionError] = useState<string | null>(null);
-  const [marketplacesBusy, setMarketplacesBusy] = useState(false);
-  const [activeMarketplaceId, setActiveMarketplaceId] = useState<string | null>(null);
-  const [pluginActionId, setPluginActionId] = useState<string | null>(null);
-  const [pluginActionError, setPluginActionError] = useState<string | null>(null);
-  const [providersBusy, setProvidersBusy] = useState(false);
-  const [providerActionId, setProviderActionId] = useState<string | null>(null);
-  const [providerActionKind, setProviderActionKind] = useState<"import" | "remove" | "sync" | null>(null);
-  const [providerActionError, setProviderActionError] = useState<string | null>(null);
-
-  const activeOrg = useMemo(
-    () => orgs.find((org) => org.id === activeOrgId) ?? null,
-    [activeOrgId, orgs],
-  );
+  const [workersError, setWorkersError] = React.useState<string | null>(null);
+
+  // Skill hubs
+  const [skillHubsBusy, setSkillHubsBusy] = React.useState(false);
+  const [skillHubActionId, setSkillHubActionId] = React.useState<string | null>(null);
+  const [skillHubActionKind, setSkillHubActionKind] = React.useState<"import" | "remove" | "sync" | null>(null);
+  const [skillHubActionError, setSkillHubActionError] = React.useState<string | null>(null);
+
+  // Skills
+  const [skillsBusy, setSkillsBusy] = React.useState(false);
+  const [skillActionId, setSkillActionId] = React.useState<string | null>(null);
+  const [skillActionKind, setSkillActionKind] = React.useState<"import" | "remove" | "sync" | null>(null);
+  const [skillActionError, setSkillActionError] = React.useState<string | null>(null);
+
+  // Marketplaces and plugins
+  const [marketplacesBusy, setMarketplacesBusy] = React.useState(false);
+  const [activeMarketplaceId, setActiveMarketplaceId] = React.useState<string | null>(null);
+  const [pluginActionId, setPluginActionId] = React.useState<string | null>(null);
+  const [pluginActionError, setPluginActionError] = React.useState<string | null>(null);
+
+  // Providers
+  const [providersBusy, setProvidersBusy] = React.useState(false);
+  const [providerActionId, setProviderActionId] = React.useState<string | null>(null);
+  const [providerActionKind, setProviderActionKind] = React.useState<"import" | "remove" | "sync" | null>(null);
+  const [providerActionError, setProviderActionError] = React.useState<string | null>(null);
+
   const isSignedIn = Boolean(user && authToken.trim());
-  const activeOrgName = activeOrg?.name || tr("den.no_org_selected");
-  const activeOrgOptions = useMemo(
-    () =>
-      orgs.map((org) => ({
-        value: org.id,
-        label: `${org.name} ${org.role === "owner" ? tr("den.org_owner_suffix") : tr("den.org_member_suffix")}`,
-      })),
-    [orgs, tr],
-  );
 
-  const syncCurrentDenSettings = useCallback(() => {
+  const syncCurrentDenSettings = React.useCallback(() => {
     const resolved = resolveDenBaseUrls(baseUrl);
     writeDenSettings({
       baseUrl: resolved.baseUrl,
@@ -289,12 +329,8 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     });
   }, [activeOrg, activeOrgId, authToken, baseUrl]);
 
-  const client = useMemo(
-    () => createDenClient({ baseUrl, token: authToken }),
-    [authToken, baseUrl],
-  );
-
-  const installedSkillNames = useMemo(
+  // Derived extension rows
+  const installedSkillNames = React.useMemo(
     () => new Set(props.extensions.skills().map((skill) => skill.name)),
     [props.extensions],
   );
@@ -306,7 +342,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
   const liveMarketplaces = props.extensions.cloudOrgMarketplaces();
   const importedPlugins = props.extensions.importedCloudPlugins();
 
-  const skillHubRows = useMemo<CloudSkillHubRow[]>(() => {
+  const skillHubRows = React.useMemo<CloudSkillHubRow[]>(() => {
     const rows: CloudSkillHubRow[] = liveSkillHubs.map((hub) => {
       const imported = skillHubImports[hub.id] ?? null;
       const currentSkillIds = sortStrings(hub.skills.map((skill) => skill.id));
@@ -345,7 +381,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     return rows;
   }, [liveSkillHubs, skillHubImports]);
 
-  const skillRows = useMemo<CloudSkillRow[]>(() => {
+  const skillRows = React.useMemo<CloudSkillRow[]>(() => {
     const rows: CloudSkillRow[] = liveSkills.map((skill) => {
       const imported = importedSkills[skill.id] ?? null;
       const remoteUpdatedAt = skill.updatedAt ? Date.parse(skill.updatedAt) : Number.NaN;
@@ -388,7 +424,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     return rows.sort((a, b) => a.title.localeCompare(b.title));
   }, [importedSkills, installedSkillNames, liveSkills]);
 
-  const providerRows = useMemo<CloudProviderRow[]>(() => {
+  const providerRows = React.useMemo<CloudProviderRow[]>(() => {
     const rows: CloudProviderRow[] = props.cloudOrgProviders.map((provider) => {
       const imported = props.importedCloudProviders[provider.id] ?? null;
       const status = !imported
@@ -424,7 +460,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     return rows;
   }, [props.cloudOrgProviders, props.importedCloudProviders]);
 
-  const marketplacePluginRows = useMemo<Record<string, CloudPluginRow[]>>(() => {
+  const marketplacePluginRows = React.useMemo<Record<string, CloudPluginRow[]>>(() => {
     const next: Record<string, CloudPluginRow[]> = {};
     for (const marketplace of liveMarketplaces) {
       next[marketplace.marketplace.id] = marketplace.plugins.map((plugin) => {
@@ -440,12 +476,8 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     return next;
   }, [importedPlugins, liveMarketplaces]);
 
-  const selectedMarketplace = useMemo(() => {
-    if (liveMarketplaces.length === 0) return null;
-    return liveMarketplaces.find((entry) => entry.marketplace.id === activeMarketplaceId) ?? liveMarketplaces[0];
-  }, [activeMarketplaceId, liveMarketplaces]);
-
-  const summaryTone = useMemo(() => {
+  // Summary status
+  const summaryTone = React.useMemo(() => {
     if (
       authError ||
       workersError ||
@@ -475,10 +507,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     isSignedIn,
     orgsBusy,
     orgsError,
+    marketplacesBusy,
     providerActionError,
-    pluginActionError,
     providersBusy,
-    marketplacesBusy,
+    pluginActionError,
     sessionBusy,
     skillActionError,
     skillHubActionError,
@@ -488,18 +520,20 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     workersError,
   ]);
 
-  const summaryLabel = useMemo(() => {
+  const summaryLabel = React.useMemo(() => {
     if (authError) return tr("den.needs_attention");
     if (sessionBusy) return tr("den.checking_session");
     if (isSignedIn) return tr("dashboard.connected");
     return tr("den.signed_out");
   }, [authError, isSignedIn, sessionBusy, tr]);
 
-  const clearSessionState = useCallback(() => {
+  // Shared reset helpers
+  const clearSessionState = React.useCallback(() => {
     setUser(null);
     setOrgs([]);
     setWorkers([]);
     setActiveOrgId("");
+    setActiveMarketplaceId(null);
     setOrgsError(null);
     setWorkersError(null);
     setSkillHubActionError(null);
@@ -509,7 +543,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     setProviderActionKind(null);
   }, []);
 
-  const clearSignedInState = useCallback(
+  const clearSignedInState = React.useCallback(
     (message?: string | null) => {
       clearDenSession({ includeBaseUrls: !props.developerMode });
       if (!props.developerMode) {
@@ -531,15 +565,17 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     [clearSessionState, props.developerMode],
   );
 
-  useEffect(() => {
+  // Settings persistence
+  React.useEffect(() => {
     syncCurrentDenSettings();
   }, [syncCurrentDenSettings]);
 
-  const openControlPlane = useCallback(() => {
+  // Connection settings actions
+  const openControlPlane = React.useCallback(() => {
     props.openLink(resolveDenBaseUrls(baseUrl).baseUrl);
   }, [baseUrl, props]);
 
-  const openBrowserAuth = useCallback(
+  const openBrowserAuth = React.useCallback(
     (mode: "sign-in" | "sign-up") => {
       props.openLink(buildDenAuthUrl(baseUrl, mode));
       setStatusMessage(
@@ -552,7 +588,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     [baseUrl, props, tr],
   );
 
-  const applyBaseUrl = useCallback(() => {
+  const applyBaseUrl = React.useCallback(() => {
     const normalized = normalizeDenBaseUrl(baseUrlDraft);
     if (!normalized) {
       setBaseUrlError(tr("den.error_base_url"));
@@ -571,7 +607,47 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     clearSignedInState(tr("den.status_base_url_updated"));
   }, [baseUrl, baseUrlDraft, clearSignedInState, tr]);
 
-  const refreshOrgs = useCallback(
+  // Auth session query candidate: user, sessionBusy, authError
+  React.useEffect(() => {
+    const token = authToken.trim();
+    if (!token) {
+      setSessionBusy(false);
+      clearSessionState();
+      setAuthError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setSessionBusy(true);
+    setAuthError(null);
+
+    void createDenClient({ baseUrl, token })
+      .getSession()
+      .then((nextUser) => {
+        if (cancelled) return;
+        setUser(nextUser);
+        setStatusMessage(tx("den.status_signed_in_as", { email: nextUser.email }));
+      })
+      .catch((error) => {
+        if (cancelled) return;
+        if (error instanceof DenApiError && error.status === 401) {
+          clearSignedInState();
+        } else {
+          clearSessionState();
+        }
+        setAuthError(error instanceof Error ? error.message : tr("den.error_no_session"));
+      })
+      .finally(() => {
+        if (!cancelled) setSessionBusy(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [authToken, baseUrl, clearSessionState, clearSignedInState, tr, tx]);
+
+  // Organizations query candidate: orgs, orgsBusy, orgsError
+  const refreshOrgs = React.useCallback(
     async (quiet = false) => {
       if (!authToken.trim()) {
         setOrgs([]);
@@ -607,12 +683,13 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
           );
         }
         if (!quiet && response.orgs.length > 0) {
-          setStatusMessage(
-            tx("den.status_loaded_orgs", {
+          showToast({
+            title: tx("den.status_loaded_orgs", {
               count: response.orgs.length,
               plural: response.orgs.length === 1 ? "" : "s",
             }),
-          );
+            tone: "info",
+          });
         }
       } catch (error) {
         setOrgsError(error instanceof Error ? error.message : tr("den.error_load_orgs"));
@@ -620,10 +697,16 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setOrgsBusy(false);
       }
     },
-    [activeOrgId, authToken, baseUrl, client, tr, tx],
+    [activeOrgId, authToken, baseUrl, client, showToast, tr, tx],
   );
 
-  const refreshWorkers = useCallback(
+  React.useEffect(() => {
+    if (!user) return;
+    void refreshOrgs(true);
+  }, [refreshOrgs, user]);
+
+  // Workers query candidate: workers, workersBusy, workersError
+  const refreshWorkers = React.useCallback(
     async (quiet = false) => {
       const orgId = activeOrgId.trim();
       if (!authToken.trim() || !orgId) {
@@ -638,8 +721,8 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         const nextWorkers = await client.listWorkers(orgId, 20);
         setWorkers(nextWorkers);
         if (!quiet) {
-          setStatusMessage(
-            nextWorkers.length > 0
+          showToast({
+            title: nextWorkers.length > 0
               ? tx("den.status_loaded_workers", {
                   count: nextWorkers.length,
                   plural: nextWorkers.length === 1 ? "" : "s",
@@ -648,7 +731,8 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
               : tx("den.status_no_workers", {
                   name: activeOrg?.name ?? tr("den.active_org_title"),
                 }),
-          );
+            tone: "info",
+          });
         }
       } catch (error) {
         setWorkersError(error instanceof Error ? error.message : tr("den.error_load_workers"));
@@ -656,10 +740,16 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setWorkersBusy(false);
       }
     },
-    [activeOrg, activeOrgId, authToken, client, tr, tx],
+    [activeOrg, activeOrgId, authToken, client, showToast, tr, tx],
   );
 
-  const refreshSkillHubs = useCallback(
+  React.useEffect(() => {
+    if (!user || !activeOrgId.trim()) return;
+    void refreshWorkers(true);
+  }, [activeOrgId, refreshWorkers, user]);
+
+  // Skill hubs query candidate: skillHubsBusy, skillHubActionError
+  const refreshSkillHubs = React.useCallback(
     async (quiet = false) => {
       const orgId = activeOrgId.trim();
       if (!authToken.trim() || !orgId) return;
@@ -672,11 +762,12 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         await props.extensions.refreshCloudOrgSkillHubs({ force: true });
         if (!quiet) {
           const count = props.extensions.cloudOrgSkillHubs().length;
-          setStatusMessage(
-            count > 0
+          showToast({
+            title: count > 0
               ? `Loaded ${count} cloud skill hub${count === 1 ? "" : "s"} for ${activeOrg?.name ?? tr("den.active_org_title")}.`
               : `No cloud skill hubs are available for ${activeOrg?.name ?? tr("den.active_org_title")}.`,
-          );
+            tone: "info",
+          });
         }
       } catch (error) {
         if (!quiet) {
@@ -691,7 +782,13 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     [activeOrg, activeOrgId, authToken, props.extensions, syncCurrentDenSettings, tr],
   );
 
-  const refreshSkills = useCallback(
+  React.useEffect(() => {
+    if (!user || !activeOrgId.trim()) return;
+    void refreshSkillHubs(true);
+  }, [activeOrgId, refreshSkillHubs, user]);
+
+  // Skills query candidate: skillsBusy, skillActionError
+  const refreshSkills = React.useCallback(
     async (quiet = false) => {
       const orgId = activeOrgId.trim();
       if (!authToken.trim() || !orgId) return;
@@ -704,8 +801,8 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         await props.extensions.refreshCloudOrgSkills({ force: true });
         if (!quiet) {
           const count = props.extensions.cloudOrgSkills().length;
-          setStatusMessage(
-            count > 0
+          showToast({
+            title: count > 0
               ? tx("den.status_loaded_skills", {
                   count,
                   plural: count === 1 ? "" : "s",
@@ -714,7 +811,8 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
               : tx("den.status_no_skills", {
                   name: activeOrg?.name ?? tr("den.active_org_title"),
                 }),
-          );
+            tone: "info",
+          });
         }
       } catch (error) {
         if (!quiet) {
@@ -727,136 +825,87 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     [activeOrg, activeOrgId, authToken, props.extensions, syncCurrentDenSettings, tr, tx],
   );
 
-  const refreshProviders = useCallback(
+  React.useEffect(() => {
+    if (!user || !activeOrgId.trim()) return;
+    void refreshSkills(true);
+  }, [activeOrgId, refreshSkills, user]);
+
+  // Marketplaces query candidate: marketplacesBusy, pluginActionError
+  const refreshMarketplaces = React.useCallback(
     async (quiet = false) => {
       const orgId = activeOrgId.trim();
       if (!authToken.trim() || !orgId) return;
 
-      setProvidersBusy(true);
-      setProviderActionError(null);
+      setMarketplacesBusy(true);
+      if (!quiet) setPluginActionError(null);
 
       try {
-        syncCurrentDenSettings();
-        const items = await props.refreshCloudOrgProviders({ force: !quiet });
+        await props.extensions.refreshCloudOrgMarketplaces({ force: true });
         if (!quiet) {
-          setStatusMessage(
-            items.length > 0
-              ? `Loaded ${items.length} cloud provider${items.length === 1 ? "" : "s"} for ${activeOrg?.name ?? tr("den.active_org_title")}.`
-              : `No cloud providers are available for ${activeOrg?.name ?? tr("den.active_org_title")}.`,
-          );
+          const count = props.extensions.cloudOrgMarketplaces().length;
+          showToast({
+            title: count > 0
+              ? `Loaded ${count} marketplace${count === 1 ? "" : "s"} for ${activeOrg?.name ?? tr("den.active_org_title")}.`
+              : `No marketplaces are available for ${activeOrg?.name ?? tr("den.active_org_title")}.`,
+            tone: "info",
+          });
         }
       } catch (error) {
         if (!quiet) {
-          setProviderActionError(
-            error instanceof Error ? error.message : "Failed to load cloud providers.",
-          );
+          setPluginActionError(error instanceof Error ? error.message : "Failed to load marketplaces.");
         }
       } finally {
-        setProvidersBusy(false);
+        setMarketplacesBusy(false);
       }
     },
-    [activeOrg, activeOrgId, authToken, props, syncCurrentDenSettings, tr],
+    [activeOrg, activeOrgId, authToken, props.extensions, showToast, tr],
   );
 
-  const refreshMarketplaces = useCallback(
+  React.useEffect(() => {
+    if (!user || !activeOrgId.trim()) return;
+    void refreshMarketplaces(true);
+  }, [activeOrgId, refreshMarketplaces, user]);
+
+  // Providers query candidate: providersBusy, providerActionError
+  const refreshProviders = React.useCallback(
     async (quiet = false) => {
       const orgId = activeOrgId.trim();
       if (!authToken.trim() || !orgId) return;
 
-      setMarketplacesBusy(true);
-      if (!quiet) setPluginActionError(null);
+      setProvidersBusy(true);
+      setProviderActionError(null);
 
       try {
         syncCurrentDenSettings();
-        await props.extensions.refreshCloudOrgMarketplaces({ force: true });
+        const items = await props.refreshCloudOrgProviders({ force: !quiet });
         if (!quiet) {
-          const count = props.extensions.cloudOrgMarketplaces().length;
-          setStatusMessage(
-            count > 0
-              ? `Loaded ${count} marketplace${count === 1 ? "" : "s"} for ${activeOrg?.name ?? tr("den.active_org_title")}.`
-              : `No marketplaces are available for ${activeOrg?.name ?? tr("den.active_org_title")}.`,
-          );
+          showToast({
+            title: items.length > 0
+              ? `Loaded ${items.length} cloud provider${items.length === 1 ? "" : "s"} for ${activeOrg?.name ?? tr("den.active_org_title")}.`
+              : `No cloud providers are available for ${activeOrg?.name ?? tr("den.active_org_title")}.`,
+            tone: "info",
+          });
         }
       } catch (error) {
         if (!quiet) {
-          setPluginActionError(error instanceof Error ? error.message : "Failed to load marketplaces.");
+          setProviderActionError(
+            error instanceof Error ? error.message : "Failed to load cloud providers.",
+          );
         }
       } finally {
-        setMarketplacesBusy(false);
+        setProvidersBusy(false);
       }
     },
-    [activeOrg, activeOrgId, authToken, props.extensions, syncCurrentDenSettings, tr],
+    [activeOrg, activeOrgId, authToken, props, syncCurrentDenSettings, tr],
   );
 
-  useEffect(() => {
-    const token = authToken.trim();
-    if (!token) {
-      setSessionBusy(false);
-      clearSessionState();
-      setAuthError(null);
-      return;
-    }
-
-    let cancelled = false;
-    setSessionBusy(true);
-    setAuthError(null);
-
-    void createDenClient({ baseUrl, token })
-      .getSession()
-      .then((nextUser) => {
-        if (cancelled) return;
-        setUser(nextUser);
-        setStatusMessage(tx("den.status_signed_in_as", { email: nextUser.email }));
-      })
-      .catch((error) => {
-        if (cancelled) return;
-        if (error instanceof DenApiError && error.status === 401) {
-          clearSignedInState();
-        } else {
-          clearSessionState();
-        }
-        setAuthError(error instanceof Error ? error.message : tr("den.error_no_session"));
-      })
-      .finally(() => {
-        if (!cancelled) setSessionBusy(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [authToken, baseUrl, clearSessionState, clearSignedInState, tr, tx]);
-
-  useEffect(() => {
-    if (!user) return;
-    void refreshOrgs(true);
-  }, [refreshOrgs, user]);
-
-  useEffect(() => {
-    if (!user || !activeOrgId.trim()) return;
-    void refreshWorkers(true);
-  }, [activeOrgId, refreshWorkers, user]);
-
-  useEffect(() => {
-    if (!user || !activeOrgId.trim()) return;
-    void refreshSkillHubs(true);
-  }, [activeOrgId, refreshSkillHubs, user]);
-
-  useEffect(() => {
-    if (!user || !activeOrgId.trim()) return;
-    void refreshSkills(true);
-  }, [activeOrgId, refreshSkills, user]);
-
-  useEffect(() => {
-    if (!user || !activeOrgId.trim()) return;
-    void refreshMarketplaces(true);
-  }, [activeOrgId, refreshMarketplaces, user]);
-
-  useEffect(() => {
+  React.useEffect(() => {
     if (!user || !activeOrgId.trim()) return;
     void refreshProviders(true);
   }, [activeOrgId, refreshProviders, user]);
 
-  useEffect(() => {
+  // External auth handoff events
+  React.useEffect(() => {
     const handler = (event: Event) => {
       const customEvent = event as CustomEvent<DenSessionUpdatedDetail>;
       const nextSettings = readDenSettings();
@@ -889,11 +938,12 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     return () => window.removeEventListener(denSessionUpdatedEvent, handler as EventListener);
   }, [clearSessionState, tr, tx]);
 
-  const submitManualAuth = useCallback(async () => {
-    const parsed = parseManualAuthInput(manualAuthInput);
+  // Auth mutations: manual sign-in and sign-out
+  const submitManualAuth = React.useCallback(async (input: string) => {
+    const parsed = parseManualAuthInput(input);
     if (!parsed || authBusy) {
       if (!parsed) setAuthError(tr("den.error_paste_valid_code"));
-      return;
+      return false;
     }
 
     const nextBaseUrl = parsed.baseUrl ?? baseUrl;
@@ -920,8 +970,6 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         activeOrgName: null,
       });
 
-      setManualAuthInput("");
-      setManualAuthOpen(false);
       dispatchDenSessionUpdated({
         status: "success",
         baseUrl: nextBaseUrl,
@@ -929,17 +977,19 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         user: result.user,
         email: result.user?.email ?? null,
       });
+      return true;
     } catch (error) {
       dispatchDenSessionUpdated({
         status: "error",
         message: error instanceof Error ? error.message : tr("den.error_signin_failed"),
       });
+      return false;
     } finally {
       setAuthBusy(false);
     }
-  }, [authBusy, baseUrl, manualAuthInput, props.developerMode, tr]);
+  }, [authBusy, baseUrl, props.developerMode, tr]);
 
-  const signOut = useCallback(async () => {
+  const signOut = React.useCallback(async () => {
     if (authBusy) return;
 
     setAuthBusy(true);
@@ -956,7 +1006,34 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
     clearSignedInState(tr("den.status_signed_out"));
   }, [authBusy, authToken, clearSignedInState, client, tr]);
 
-  const handleOpenWorker = useCallback(
+  // Organization mutation: active org switch
+  const handleActiveOrgChange = React.useCallback(
+    (nextId: string) => {
+      const nextOrg = orgs.find((org) => org.id === nextId) ?? null;
+      setActiveOrgId(nextId);
+      writeDenSettings({
+        baseUrl,
+        authToken: authToken ? authToken : null,
+        activeOrgId: nextId ? nextId : null,
+        activeOrgSlug: nextOrg?.slug ?? null,
+        activeOrgName: nextOrg?.name ?? null,
+      });
+      // Sync Better-Auth's active org so the next request resolves against `nextId`.
+      if (nextId) {
+        void ensureDenActiveOrganization({
+          forceServerSync: true,
+        }).catch(() => null);
+      }
+      showToast({
+        title: tx("den.org_switched", { name: nextOrg?.name ?? tr("den.active_org_title") }),
+        tone: "success",
+      });
+    },
+    [authToken, baseUrl, orgs, showToast, tr, tx],
+  );
+
+  // Worker mutation: open remote workspace
+  const handleOpenWorker = React.useCallback(
     async (workerId: string, workerName: string) => {
       const orgId = activeOrgId.trim();
       if (!orgId) {
@@ -985,7 +1062,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
           throw new Error(tx("den.error_open_worker", { name: workerName }));
         }
 
-        setStatusMessage(tx("den.status_opened_worker", { name: workerName }));
+        showToast({
+          title: tx("den.status_opened_worker", { name: workerName }),
+          tone: "success",
+        });
       } catch (error) {
         setWorkersError(
           error instanceof Error
@@ -996,30 +1076,11 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setOpeningWorkerId(null);
       }
     },
-    [activeOrgId, client, props, tr, tx],
+    [activeOrgId, client, props, showToast, tr, tx],
   );
 
-  const handleActiveOrgChange = useCallback(
-    (nextId: string) => {
-      const nextOrg = orgs.find((org) => org.id === nextId) ?? null;
-      setActiveOrgId(nextId);
-      writeDenSettings({
-        baseUrl,
-        authToken: authToken || null,
-        activeOrgId: nextId || null,
-        activeOrgSlug: nextOrg?.slug ?? null,
-        activeOrgName: nextOrg?.name ?? null,
-      });
-      // Sync Better-Auth's active org so the next request resolves against `nextId`.
-      if (nextId) {
-        void ensureDenActiveOrganization({ forceServerSync: true }).catch(() => null);
-      }
-      setStatusMessage(tx("den.org_switched", { name: nextOrg?.name ?? tr("den.active_org_title") }));
-    },
-    [authToken, baseUrl, orgs, tr, tx],
-  );
-
-  const handleImportSkillHub = useCallback(
+  // Skill hub mutations
+  const handleImportSkillHub = React.useCallback(
     async (hubId: string) => {
       const hub = props.extensions.cloudOrgSkillHubs().find((entry) => entry.id === hubId);
       if (!hub || skillHubActionId) return;
@@ -1031,7 +1092,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
       try {
         const result = await props.extensions.importCloudOrgSkillHub(hub);
         if (!result.ok) throw new Error(result.message);
-        setStatusMessage(`${result.message} ${tr("den.reload_workspace")}`);
+        showToast({ title: `${result.message} ${tr("den.reload_workspace")}`, tone: "success" });
       } catch (error) {
         setSkillHubActionError(error instanceof Error ? error.message : `Failed to import ${hub.name}.`);
       } finally {
@@ -1039,10 +1100,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setSkillHubActionKind(null);
       }
     },
-    [props.extensions, skillHubActionId, tr],
+    [props.extensions, showToast, skillHubActionId, tr],
   );
 
-  const handleRemoveSkillHub = useCallback(
+  const handleRemoveSkillHub = React.useCallback(
     async (hubId: string) => {
       const imported = props.extensions.importedCloudSkillHubs()[hubId];
       if (!imported || skillHubActionId) return;
@@ -1054,7 +1115,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
       try {
         const result = await props.extensions.removeCloudOrgSkillHub(hubId);
         if (!result.ok) throw new Error(result.message);
-        setStatusMessage(`${result.message} ${tr("den.reload_workspace")}`);
+        showToast({ title: `${result.message} ${tr("den.reload_workspace")}`, tone: "success" });
       } catch (error) {
         setSkillHubActionError(error instanceof Error ? error.message : `Failed to remove ${imported.name}.`);
       } finally {
@@ -1062,10 +1123,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setSkillHubActionKind(null);
       }
     },
-    [props.extensions, skillHubActionId, tr],
+    [props.extensions, showToast, skillHubActionId, tr],
   );
 
-  const handleSyncSkillHub = useCallback(
+  const handleSyncSkillHub = React.useCallback(
     async (hubId: string) => {
       const hub = props.extensions.cloudOrgSkillHubs().find((entry) => entry.id === hubId);
       if (!hub || skillHubActionId) return;
@@ -1077,7 +1138,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
       try {
         const result = await props.extensions.syncCloudOrgSkillHub(hub);
         if (!result.ok) throw new Error(result.message);
-        setStatusMessage(`${result.message} ${tr("den.reload_workspace")}`);
+        showToast({ title: `${result.message} ${tr("den.reload_workspace")}`, tone: "success" });
       } catch (error) {
         setSkillHubActionError(error instanceof Error ? error.message : `Failed to sync ${hub.name}.`);
       } finally {
@@ -1085,10 +1146,11 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setSkillHubActionKind(null);
       }
     },
-    [props.extensions, skillHubActionId, tr],
+    [props.extensions, showToast, skillHubActionId, tr],
   );
 
-  const handleImportSkill = useCallback(
+  // Skill mutations
+  const handleImportSkill = React.useCallback(
     async (cloudSkillId: string, title: string) => {
       const skill = props.extensions.cloudOrgSkills().find((entry) => entry.id === cloudSkillId);
       if (!skill || skillActionId) return;
@@ -1100,7 +1162,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
       try {
         const result = await props.extensions.installCloudOrgSkill(skill);
         if (!result.ok) throw new Error(result.message);
-        setStatusMessage(`${result.message} ${tr("den.reload_workspace")}`);
+        showToast({ title: `${result.message} ${tr("den.reload_workspace")}`, tone: "success" });
       } catch (error) {
         setSkillActionError(
           error instanceof Error ? error.message : tx("den.import_skill_failed", { name: title }),
@@ -1110,10 +1172,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setSkillActionKind(null);
       }
     },
-    [props.extensions, skillActionId, tr, tx],
+    [props.extensions, showToast, skillActionId, tr, tx],
   );
 
-  const handleRemoveSkill = useCallback(
+  const handleRemoveSkill = React.useCallback(
     async (cloudSkillId: string, title: string) => {
       if (skillActionId) return;
 
@@ -1124,7 +1186,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
       try {
         const result = await props.extensions.removeCloudOrgSkill(cloudSkillId);
         if (!result.ok) throw new Error(result.message);
-        setStatusMessage(`${result.message} ${tr("den.reload_workspace")}`);
+        showToast({ title: `${result.message} ${tr("den.reload_workspace")}`, tone: "success" });
       } catch (error) {
         setSkillActionError(
           error instanceof Error ? error.message : tx("den.remove_skill_failed", { name: title }),
@@ -1134,10 +1196,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setSkillActionKind(null);
       }
     },
-    [props.extensions, skillActionId, tr, tx],
+    [props.extensions, showToast, skillActionId, tr, tx],
   );
 
-  const handleSyncSkill = useCallback(
+  const handleSyncSkill = React.useCallback(
     async (cloudSkillId: string, title: string) => {
       const skill = props.extensions.cloudOrgSkills().find((entry) => entry.id === cloudSkillId);
       if (!skill || skillActionId) return;
@@ -1149,7 +1211,7 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
       try {
         const result = await props.extensions.syncCloudOrgSkill(skill);
         if (!result.ok) throw new Error(result.message);
-        setStatusMessage(`${result.message} ${tr("den.reload_workspace")}`);
+        showToast({ title: `${result.message} ${tr("den.reload_workspace")}`, tone: "success" });
       } catch (error) {
         setSkillActionError(
           error instanceof Error ? error.message : tx("den.sync_skill_failed", { name: title }),
@@ -1159,10 +1221,11 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setSkillActionKind(null);
       }
     },
-    [props.extensions, skillActionId, tr, tx],
+    [props.extensions, showToast, skillActionId, tr, tx],
   );
 
-  const handleImportPlugin = useCallback(
+  // Marketplace plugin mutations
+  const handleImportPlugin = React.useCallback(
     async (marketplaceId: string | null, plugin: DenOrgPlugin) => {
       if (pluginActionId) return;
 
@@ -1172,17 +1235,18 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
       try {
         const result = await props.extensions.importCloudOrgPlugin(marketplaceId, plugin);
         if (!result.ok) throw new Error(result.message);
-        setStatusMessage(`${result.message} ${tr("den.reload_workspace")}`);
+        showToast({ title: `${result.message} ${tr("den.reload_workspace")}`, tone: "success" });
       } catch (error) {
         setPluginActionError(error instanceof Error ? error.message : `Failed to import ${plugin.name}.`);
       } finally {
         setPluginActionId(null);
       }
     },
-    [pluginActionId, props.extensions, tr],
+    [pluginActionId, props.extensions, showToast, tr],
   );
 
-  const handleImportProvider = useCallback(
+  // Provider mutations
+  const handleImportProvider = React.useCallback(
     async (cloudProviderId: string, providerName: string) => {
       if (providerActionId) return;
 
@@ -1192,7 +1256,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
 
       try {
         const message = await props.connectCloudProvider(cloudProviderId);
-        setStatusMessage(`${message || tx("den.imported_provider", { name: providerName })} ${tr("den.reload_workspace")}`);
+        showToast({
+          title: `${message || tx("den.imported_provider", { name: providerName })} ${tr("den.reload_workspace")}`,
+          tone: "success",
+        });
       } catch (error) {
         setProviderActionError(
           error instanceof Error ? error.message : tx("den.import_provider_failed", { name: providerName }),
@@ -1202,10 +1269,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setProviderActionKind(null);
       }
     },
-    [props, providerActionId, tr, tx],
+    [props, providerActionId, showToast, tr, tx],
   );
 
-  const handleRemoveProvider = useCallback(
+  const handleRemoveProvider = React.useCallback(
     async (cloudProviderId: string, providerName: string) => {
       if (providerActionId) return;
 
@@ -1215,7 +1282,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
 
       try {
         const message = await props.removeCloudProvider(cloudProviderId);
-        setStatusMessage(`${message || tx("den.removed_provider", { name: providerName })} ${tr("den.reload_workspace")}`);
+        showToast({
+          title: `${message || tx("den.removed_provider", { name: providerName })} ${tr("den.reload_workspace")}`,
+          tone: "success",
+        });
       } catch (error) {
         setProviderActionError(
           error instanceof Error ? error.message : tx("den.remove_provider_failed", { name: providerName }),
@@ -1225,10 +1295,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setProviderActionKind(null);
       }
     },
-    [props, providerActionId, tr, tx],
+    [props, providerActionId, showToast, tr, tx],
   );
 
-  const handleSyncProvider = useCallback(
+  const handleSyncProvider = React.useCallback(
     async (cloudProviderId: string, providerName: string) => {
       if (providerActionId) return;
 
@@ -1238,7 +1308,10 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
 
       try {
         await props.connectCloudProvider(cloudProviderId);
-        setStatusMessage(`${tx("den.synced_provider", { name: providerName })} ${tr("den.reload_workspace")}`);
+        showToast({
+          title: `${tx("den.synced_provider", { name: providerName })} ${tr("den.reload_workspace")}`,
+          tone: "success",
+        });
       } catch (error) {
         setProviderActionError(
           error instanceof Error ? error.message : tx("den.sync_provider_failed", { name: providerName }),
@@ -1248,743 +1321,162 @@ export function DenSettingsPanel(props: DenSettingsPanelProps) {
         setProviderActionKind(null);
       }
     },
-    [props, providerActionId, tr, tx],
+    [props, providerActionId, showToast, tr, tx],
   );
 
   return (
-    <div className="space-y-6">
-      <div className={`${settingsPanelClass} space-y-4`}>
-        <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-          <div className="space-y-2">
-            <div className={headerBadgeClass}>
-              <Cloud size={13} className="text-dls-secondary" />
-              {tr("den.cloud_section_title")}
-            </div>
-            <div>
-              <div className="text-sm font-medium text-dls-text">
-                {tr("den.cloud_section_desc")}
-              </div>
-              <div className="mt-1 max-w-[60ch] text-xs text-dls-secondary">
+    <SettingsStack>
+      <Separator />
+
+      <SettingsSection>
+        <SettingsSectionHeader>
+          <SettingsSectionHeaderContent>
+            <SettingsSectionHeaderTitle>{tr("den.cloud_section_title")}
+
+            <SettingsStatusBadge tone={summaryTone} label={summaryLabel} />
+
+            </SettingsSectionHeaderTitle>
+            <SettingsSectionHeaderDescription className="">
+              {tr(isSignedIn ? "den.cloud_signed_in_desc" : "den.cloud_section_desc")}
+            </SettingsSectionHeaderDescription>
+            {!isSignedIn ? (
+              <SettingsSectionHeaderDescription className="text-xs">
                 {tr("den.cloud_sleep_hint")}
-              </div>
-            </div>
-          </div>
-          <div className={headerStatusBadgeClass}>
-            <span
-              className={`h-2 w-2 rounded-full ${
-                summaryTone === "ready"
-                  ? "bg-green-500"
-                  : summaryTone === "warning"
-                    ? "bg-amber-500"
-                    : summaryTone === "error"
-                      ? "bg-red-500"
-                      : "bg-gray-400"
-              }`}
-            />
-            {summaryLabel}
-          </div>
-        </div>
+              </SettingsSectionHeaderDescription>
+            ) : null}
+          </SettingsSectionHeaderContent>
+        </SettingsSectionHeader>
 
         {props.developerMode ? (
-          <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
-            <TextInput
-              label={tr("den.cloud_control_plane_url_label")}
-              value={baseUrlDraft}
-              onChange={(event) => setBaseUrlDraft(event.currentTarget.value)}
-              placeholder={DEFAULT_DEN_BASE_URL}
-              hint={tr("den.cloud_control_plane_url_hint")}
-              disabled={authBusy || sessionBusy}
-            />
-            <div className="flex flex-wrap items-center gap-2">
-              <Button
-                variant="outline"
-                className="h-9 px-3 text-xs"
-                onClick={() => setBaseUrlDraft(baseUrl)}
-                disabled={authBusy || sessionBusy}
-              >
-                {tr("den.cloud_control_plane_reset")}
-              </Button>
-              <Button
-                variant="secondary"
-                className="h-9 px-3 text-xs"
-                onClick={applyBaseUrl}
-                disabled={authBusy || sessionBusy}
-              >
-                {tr("den.cloud_control_plane_save")}
-              </Button>
-              <Button variant="outline" className="h-9 px-3 text-xs" onClick={openControlPlane}>
-                {tr("den.cloud_control_plane_open")}
-                <ArrowUpRight size={13} />
-              </Button>
-            </div>
-          </div>
+          <CloudDevMode
+            authBusy={authBusy}
+            baseUrlDraft={baseUrlDraft}
+            onApplyBaseUrl={applyBaseUrl}
+            onBaseUrlDraftChange={setBaseUrlDraft}
+            onOpenControlPlane={openControlPlane}
+            onResetBaseUrl={() => setBaseUrlDraft(baseUrl)}
+            sessionBusy={sessionBusy}
+          />
         ) : null}
 
-        {baseUrlError ? <div className={errorBannerClass}>{baseUrlError}</div> : null}
+        {baseUrlError ? <SettingsNotice tone="error">{baseUrlError}</SettingsNotice> : null}
 
-        {statusMessage && !authError && !workersError && !orgsError ? (
-          <div className={softNoticeClass}>{statusMessage}</div>
+        {statusMessage && !authError && !workersError && !orgsError && !pluginActionError ? (
+          <SettingsNotice>{statusMessage}</SettingsNotice>
         ) : null}
-      </div>
-
-      {!isSignedIn ? (
-        <div className={`${settingsPanelClass} space-y-4`}>
-          <div className="space-y-2">
-            <div className="text-sm font-medium text-dls-text">{tr("den.signin_title")}</div>
-            <div className="max-w-[54ch] text-sm text-dls-secondary">
-              {tr("den.cloud_sleep_hint")}
-            </div>
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2">
-            <Button variant="secondary" onClick={() => openBrowserAuth("sign-in")}>
-              {tr("den.signin_button")}
-              <ArrowUpRight size={13} />
-            </Button>
-            <Button
-              variant="outline"
-              className="h-9 px-3 text-xs"
-              onClick={() => openBrowserAuth("sign-up")}
-            >
-              {tr("den.create_account")}
-              <ArrowUpRight size={13} />
-            </Button>
-            <Button
-              variant="outline"
-              className="h-9 px-3 text-xs"
-              onClick={() => {
-                setManualAuthOpen((value) => !value);
-                setAuthError(null);
-              }}
-              disabled={authBusy || sessionBusy}
-            >
-              {manualAuthOpen ? tr("den.hide_signin_code") : tr("den.paste_signin_code")}
-            </Button>
-          </div>
-
-          {manualAuthOpen ? (
-            <div className={`${settingsPanelSoftClass} space-y-3`}>
-              <TextInput
-                label={tr("den.signin_link_label")}
-                value={manualAuthInput}
-                onChange={(event) => setManualAuthInput(event.currentTarget.value)}
-                placeholder={tr("den.signin_link_placeholder")}
-                disabled={authBusy || sessionBusy}
-                hint={tr("den.signin_link_hint")}
-              />
-              <div className="flex flex-wrap items-center gap-2">
-                <Button
-                  variant="secondary"
-                  className="h-9 px-3 text-xs"
-                  onClick={() => void submitManualAuth()}
-                  disabled={authBusy || sessionBusy || !manualAuthInput.trim()}
-                >
-                  {authBusy ? tr("den.finishing") : tr("den.finish_signin")}
-                </Button>
-                <div className="text-[11px] text-dls-secondary">{tr("den.signin_code_note")}</div>
-              </div>
-            </div>
-          ) : null}
-
-          {authError ? <div className={errorBannerClass}>{authError}</div> : null}
-
-          <div className={`${settingsPanelSoftClass} text-sm text-gray-10`}>
-            {tr("den.auto_reconnect_hint")}
-          </div>
-        </div>
-      ) : (
-        <div className="space-y-6">
-          <div className={`${settingsPanelClass} space-y-4`}>
-            <div>
-              <div className="text-sm font-medium text-dls-text">{tr("den.cloud_account_title")}</div>
-              <div className="mt-1 text-xs text-dls-secondary">{tr("den.cloud_account_hint")}</div>
-            </div>
-
-            <div className="flex flex-col gap-3">
-              <div className="ow-soft-card-quiet flex flex-col gap-3 rounded-xl p-3 sm:flex-row sm:items-center sm:justify-between">
-                <div className="min-w-0">
-                  <div className="truncate text-sm font-medium text-dls-text">{user?.name || user?.email}</div>
-                  <div className="truncate text-xs text-dls-secondary">{user?.email}</div>
-                </div>
-                <Button
-                  variant="outline"
-                  className={`h-10 shrink-0 px-4 text-sm ${quietControlClass}`}
-                  onClick={() => void signOut()}
-                  disabled={authBusy || sessionBusy}
-                >
-                  <LogOut size={13} className="mr-1.5" />
-                  {authBusy ? tr("den.signing_out") : tr("den.sign_out")}
-                </Button>
-              </div>
-
-              <div className="ow-soft-card-quiet flex flex-col gap-3 rounded-xl p-3 sm:flex-row sm:items-center sm:justify-between">
-                <div className="min-w-0">
-                  <div className="text-sm font-medium text-dls-text">{tr("den.active_org_title")}</div>
-                  <div className="truncate text-xs text-dls-secondary">{tr("den.active_org_hint")}</div>
-                </div>
-                <div className="flex shrink-0 items-center gap-2">
-                  <div className="w-[260px] max-w-full">
-                    <SelectMenu
-                      value={activeOrgId}
-                      options={activeOrgOptions}
-                      onChange={handleActiveOrgChange}
-                      disabled={orgsBusy || orgs.length === 0}
-                      placeholder={tr("den.no_org_selected")}
-                      ariaLabel={tr("den.active_org_title")}
-                    />
-                  </div>
-                  <Button
-                    variant="outline"
-                    className={`h-10 px-4 text-sm ${quietControlClass}`}
-                    onClick={() => void refreshOrgs()}
-                    disabled={orgsBusy}
-                  >
-                    <RefreshCcw size={13} className={orgsBusy ? "animate-spin" : ""} />
-                  </Button>
-                </div>
-              </div>
-            </div>
-
-            {orgsError ? <div className={errorBannerClass}>{orgsError}</div> : null}
-          </div>
-
-          <div className={`${settingsPanelClass} space-y-4`}>
-            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-              <div>
-                <div className="flex items-center gap-2 text-sm font-medium text-dls-text">
-                  <Boxes size={15} className="text-dls-secondary" />
-                  Marketplaces & Plugins
-                </div>
-                <div className="mt-1 text-xs text-dls-secondary">
-                  Browse organization marketplaces and import plugin files into this workspace.
-                </div>
-              </div>
-              <div className="flex flex-wrap items-center gap-2">
-                <div className={sectionPillClass}>
-                  <Users size={12} />
-                  {activeOrgName}
-                </div>
-                <Button
-                  variant="outline"
-                  className="h-8 px-3 text-xs"
-                  onClick={() => void refreshMarketplaces()}
-                  disabled={marketplacesBusy || !activeOrgId.trim()}
-                >
-                  <RefreshCcw size={13} className={marketplacesBusy ? "animate-spin" : ""} />
-                  {tr("den.refresh")}
-                </Button>
-              </div>
-            </div>
-
-            {pluginActionError || props.extensions.cloudOrgMarketplacesStatus() ? (
-              <div className={errorBannerClass}>{pluginActionError || props.extensions.cloudOrgMarketplacesStatus()}</div>
-            ) : null}
-
-            {!marketplacesBusy && liveMarketplaces.length === 0 ? (
-              <div className={`${settingsPanelSoftClass} border-dashed py-6 text-center text-sm text-dls-secondary`}>
-                {activeOrgId.trim() ? "No marketplaces are available yet." : "Choose an organization to view marketplaces."}
-              </div>
-            ) : null}
-
-            {liveMarketplaces.length > 0 ? (
-              <div className="space-y-3">
-                <div className="flex gap-2 overflow-x-auto pb-1">
-                  {liveMarketplaces.map((entry) => {
-                    const selected = selectedMarketplace?.marketplace.id === entry.marketplace.id;
-                    return (
-                      <button
-                        key={entry.marketplace.id}
-                        type="button"
-                        onClick={() => setActiveMarketplaceId(entry.marketplace.id)}
-                        className={`shrink-0 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
-                          selected
-                            ? "border-dls-border bg-dls-hover text-dls-text shadow-sm"
-                            : "border-dls-border bg-dls-hover text-dls-secondary hover:text-dls-text"
-                        }`}
-                      >
-                        {entry.marketplace.name}
-                      </button>
-                    );
-                  })}
-                </div>
-
-                {selectedMarketplace ? (
-                  <div className="space-y-1">
-                    {(marketplacePluginRows[selectedMarketplace.marketplace.id] ?? []).map((row) => {
-                      const actionBusy = pluginActionId === row.plugin.id;
-                      const counts = Object.entries(row.plugin.componentCounts)
-                        .filter(([, count]) => count > 0)
-                        .map(([type, count]) => `${count} ${type}${count === 1 ? "" : "s"}`);
-                      return (
-                        <div
-                          key={row.plugin.id}
-                          className="flex flex-col gap-3 rounded-xl px-3 py-3 text-left text-[13px] transition-colors hover:bg-dls-hover sm:flex-row sm:items-center sm:justify-between"
-                        >
-                          <div className="min-w-0 pr-4">
-                            <div className="flex flex-wrap items-center gap-2">
-                              <span className="truncate font-medium text-dls-text">{row.plugin.name}</span>
-                              {row.status !== "available" ? (
-                                <span className={sectionPillClass}>
-                                  {row.status === "imported" ? tr("den.imported_badge") : tr("den.out_of_sync_badge")}
-                                </span>
-                              ) : null}
-                              {counts.length > 0 ? counts.map((label) => <span key={label} className={sectionPillClass}>{label}</span>) : null}
-                            </div>
-                            <div className="mt-0.5 text-[11px] text-dls-secondary">
-                              {row.plugin.description || "No description provided."}
-                            </div>
-                            {row.imported?.files.length ? (
-                              <div className="mt-1 truncate text-[11px] text-dls-secondary">
-                                Installed files: {row.imported.files.map((file) => file.path).join(", ")}
-                              </div>
-                            ) : null}
-                          </div>
-                          <Button
-                            variant={row.status === "available" ? "secondary" : "outline"}
-                            className="h-8 shrink-0 px-4 text-xs"
-                            onClick={() => void handleImportPlugin(row.marketplaceId, row.plugin)}
-                            disabled={pluginActionId !== null}
-                          >
-                            {actionBusy ? tr("den.importing") : row.status === "available" ? "Import plugin" : "Sync plugin"}
-                          </Button>
-                        </div>
-                      );
-                    })}
-                    {(marketplacePluginRows[selectedMarketplace.marketplace.id] ?? []).length === 0 ? (
-                      <div className={`${settingsPanelSoftClass} border-dashed py-6 text-center text-sm text-dls-secondary`}>
-                        This marketplace does not have plugins yet.
-                      </div>
-                    ) : null}
-                  </div>
-                ) : null}
-              </div>
-            ) : null}
-          </div>
-
-          <div className={`${settingsPanelClass} space-y-4`}>
-            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-              <div>
-                <div className="flex items-center gap-2 text-sm font-medium text-dls-text">
-                  <Package size={15} className="text-dls-secondary" />
-                  {tr("den.cloud_skills_title")}
-                </div>
-                <div className="mt-1 text-xs text-dls-secondary">{tr("den.cloud_skills_hint")}</div>
-              </div>
-              <div className="flex flex-wrap items-center gap-2">
-                <div className={sectionPillClass}>
-                  <Users size={12} />
-                  {activeOrgName}
-                </div>
-                <Button
-                  variant="outline"
-                  className="h-8 px-3 text-xs"
-                  onClick={() => void refreshSkills()}
-                  disabled={skillsBusy || !activeOrgId.trim()}
-                >
-                  <RefreshCcw size={13} className={skillsBusy ? "animate-spin" : ""} />
-                  {tr("den.refresh")}
-                </Button>
-              </div>
-            </div>
-
-            {skillActionError || props.extensions.cloudOrgSkillsStatus() ? (
-              <div className={errorBannerClass}>{skillActionError || props.extensions.cloudOrgSkillsStatus()}</div>
-            ) : null}
-
-            {!skillsBusy && skillRows.length === 0 ? (
-              <div className={`${settingsPanelSoftClass} border-dashed py-6 text-center text-sm text-dls-secondary`}>
-                {activeOrgId.trim() ? tr("den.no_cloud_skills") : tr("den.choose_org_for_skills")}
-              </div>
-            ) : null}
-
-            <div className="space-y-1">
-              {skillRows.map((row) => {
-                const actionBusy = skillActionId === row.cloudSkillId;
-                const actionLabel = !actionBusy
-                  ? null
-                  : skillActionKind === "import"
-                    ? tr("den.importing")
-                    : skillActionKind === "sync"
-                      ? tr("den.syncing")
-                      : tr("den.removing");
-
-                return (
-                  <div
-                    key={row.key}
-                    className="flex items-center justify-between rounded-xl px-3 py-2 text-left text-[13px] transition-colors hover:bg-dls-hover"
-                  >
-                    <div className="min-w-0 pr-4">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="truncate font-medium text-dls-text">{row.title}</span>
-                        {row.skill?.hubName ? (
-                          <span className={sectionPillClass}>{tx("skills.cloud_hub_label", { name: row.skill.hubName })}</span>
-                        ) : null}
-                        {row.skill?.shared === "org" ? <span className={sectionPillClass}>{tr("skills.cloud_shared_org")}</span> : null}
-                        {row.skill?.shared === "public" ? <span className={sectionPillClass}>{tr("skills.cloud_shared_public")}</span> : null}
-                        {row.skill?.shared === null && !row.skill?.hubName ? <span className={sectionPillClass}>{tr("den.private_badge")}</span> : null}
-                        {row.installedName ? (
-                          <span className={sectionPillClass}>{tx("den.installed_name_badge", { name: row.installedName })}</span>
-                        ) : null}
-                        {row.status !== "available" ? (
-                          <span className={sectionPillClass}>
-                            {row.status === "installed"
-                              ? tr("den.imported_badge")
-                              : row.status === "out_of_sync"
-                                ? tr("den.out_of_sync_badge")
-                                : tr("den.removed_from_cloud_badge")}
-                          </span>
-                        ) : null}
-                      </div>
-                      <div className="mt-0.5 truncate text-[11px] text-dls-secondary">
-                        {row.status === "available"
-                          ? tx("den.cloud_skill_detail", { title: row.title })
-                          : row.status === "installed"
-                            ? tx("den.cloud_skill_imported_detail", { name: row.installedName ?? row.title })
-                            : row.status === "out_of_sync"
-                              ? tx("den.cloud_skill_sync_detail", { name: row.installedName ?? row.title })
-                              : tx("den.cloud_skill_removed_detail", { name: row.installedName ?? row.title })}
-                      </div>
-                    </div>
-                    <div className="flex shrink-0 items-center gap-2">
-                      {row.status === "out_of_sync" && row.skill ? (
-                        <Button
-                          variant="secondary"
-                          className="h-8 px-4 text-xs"
-                          onClick={() => void handleSyncSkill(row.cloudSkillId, row.title)}
-                          disabled={skillActionId !== null}
-                        >
-                          {actionBusy && skillActionKind === "sync" ? tr("den.syncing") : tr("den.sync")}
-                        </Button>
-                      ) : null}
-                      <Button
-                        variant={row.status === "available" ? "secondary" : "outline"}
-                        className="h-8 px-4 text-xs"
-                        onClick={() => {
-                          if (row.status === "available" && row.skill) {
-                            return void handleImportSkill(row.cloudSkillId, row.title);
-                          }
-                          return void handleRemoveSkill(row.cloudSkillId, row.title);
-                        }}
-                        disabled={skillActionId !== null}
-                      >
-                        {actionBusy ? actionLabel : row.status === "available" ? tr("den.import_skill") : tr("den.uninstall")}
-                      </Button>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          <div className={`${settingsPanelClass} space-y-4`}>
-            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-              <div>
-                <div className="flex items-center gap-2 text-sm font-medium text-dls-text">
-                  <Server size={15} className="text-dls-secondary" />
-                  {tr("den.cloud_workers_title")}
-                </div>
-                <div className="mt-1 text-xs text-dls-secondary">{tr("den.cloud_workers_hint")}</div>
-              </div>
-              <div className="flex flex-wrap items-center gap-2">
-                <div className={sectionPillClass}>
-                  <Users size={12} />
-                  {activeOrgName}
-                </div>
-                <Button
-                  variant="outline"
-                  className="h-8 px-3 text-xs"
-                  onClick={() => void refreshWorkers()}
-                  disabled={workersBusy || !activeOrgId.trim()}
-                >
-                  <RefreshCcw size={13} className={workersBusy ? "animate-spin" : ""} />
-                  {tr("den.refresh")}
-                </Button>
-              </div>
-            </div>
-
-            {workersError ? <div className={errorBannerClass}>{workersError}</div> : null}
 
-            {!workersBusy && workers.length === 0 ? (
-              <div className={`${settingsPanelSoftClass} border-dashed py-6 text-center text-sm text-dls-secondary`}>
-                {tr("den.no_cloud_workers")}
-              </div>
-            ) : null}
-
-            <div className="space-y-1">
-              {workers.map((worker) => {
-                const status = workerStatusMeta(worker.status, tr);
-                return (
-                  <div
-                    key={worker.workerId}
-                    className="flex items-center justify-between rounded-xl px-3 py-2 text-left text-[13px] transition-colors hover:bg-dls-hover"
-                  >
-                    <div className="min-w-0 pr-4">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="truncate font-medium text-dls-text">{worker.workerName}</span>
-                        <span
-                          className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium ${statusBadgeClass(status.tone)}`}
-                        >
-                          {status.label}
-                        </span>
-                        {worker.isMine ? <span className={sectionPillClass}>{tr("den.worker_mine_badge")}</span> : null}
-                      </div>
-                      <div className="mt-0.5 truncate text-[11px] text-dls-secondary">
-                        {worker.provider ? tx("den.worker_provider_label", { provider: worker.provider }) : tr("den.worker_secondary_cloud")}
-                        {worker.instanceUrl ? <span> · {worker.instanceUrl}</span> : null}
-                      </div>
-                    </div>
-                    <Button
-                      variant="secondary"
-                      className="h-8 shrink-0 px-4 text-xs"
-                      onClick={() => void handleOpenWorker(worker.workerId, worker.workerName)}
-                      disabled={openingWorkerId !== null || !status.canOpen}
-                      title={!status.canOpen ? tr("den.worker_not_ready_title") : undefined}
-                    >
-                      {openingWorkerId === worker.workerId ? tr("den.opening") : tr("den.open")}
-                    </Button>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          <div className={`${settingsPanelClass} space-y-4`}>
-            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-              <div>
-                <div className="flex items-center gap-2 text-sm font-medium text-dls-text">
-                  <Boxes size={15} className="text-dls-secondary" />
-                  {tr("den.skill_hubs_title")}
-                </div>
-                <div className="mt-1 text-xs text-dls-secondary">{tr("den.skill_hubs_hint")}</div>
-              </div>
-              <div className="flex flex-wrap items-center gap-2">
-                <div className={sectionPillClass}>
-                  <Users size={12} />
-                  {activeOrgName}
-                </div>
-                <Button
-                  variant="outline"
-                  className="h-8 px-3 text-xs"
-                  onClick={() => void refreshSkillHubs()}
-                  disabled={skillHubsBusy || !activeOrgId.trim()}
-                >
-                  <RefreshCcw size={13} className={skillHubsBusy ? "animate-spin" : ""} />
-                  {tr("den.refresh")}
-                </Button>
-              </div>
-            </div>
-
-            {skillHubActionError || props.extensions.cloudOrgSkillHubsStatus() ? (
-              <div className={errorBannerClass}>{skillHubActionError || props.extensions.cloudOrgSkillHubsStatus()}</div>
-            ) : null}
-
-            {!skillHubsBusy && skillHubRows.length === 0 ? (
-              <div className={`${settingsPanelSoftClass} border-dashed py-6 text-center text-sm text-dls-secondary`}>
-                {activeOrgId.trim() ? tr("den.no_skill_hubs") : tr("den.choose_org_for_skill_hubs")}
-              </div>
-            ) : null}
-
-            <div className="space-y-1">
-              {skillHubRows.map((row) => {
-                const actionBusy = skillHubActionId === row.hubId;
-                const actionLabel = !actionBusy
-                  ? null
-                  : skillHubActionKind === "import"
-                    ? tr("den.importing")
-                    : skillHubActionKind === "sync"
-                      ? tr("den.syncing")
-                      : tr("den.removing");
-
-                return (
-                  <div
-                    key={row.key}
-                    className="flex items-center justify-between rounded-xl px-3 py-2 text-left text-[13px] transition-colors hover:bg-dls-hover"
-                  >
-                    <div className="min-w-0 pr-4">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="truncate font-medium text-dls-text">{row.name}</span>
-                        <span className={sectionPillClass}>
-                          {tx("den.skill_hub_skills_badge", { count: row.hub?.skills.length ?? row.importedSkillCount })}
-                        </span>
-                        {row.status !== "available" ? (
-                          <span className={sectionPillClass}>
-                            {row.status === "imported"
-                              ? tr("den.imported_badge")
-                              : row.status === "out_of_sync"
-                                ? tr("den.out_of_sync_badge")
-                                : tr("den.removed_from_cloud_badge")}
-                          </span>
-                        ) : null}
-                      </div>
-                      <div className="mt-0.5 truncate text-[11px] text-dls-secondary">
-                        {row.status === "available"
-                          ? tx("den.skill_hub_detail", { count: row.liveSkillCount })
-                          : row.status === "imported"
-                            ? tx("den.skill_hub_imported_detail", { count: row.importedSkillCount })
-                            : row.status === "out_of_sync"
-                              ? tx("den.skill_hub_sync_detail", {
-                                  liveCount: row.liveSkillCount,
-                                  importedCount: row.importedSkillCount,
-                                })
-                              : tx("den.skill_hub_removed_detail", { importedCount: row.importedSkillCount })}
-                      </div>
-                    </div>
-                    <div className="flex shrink-0 items-center gap-2">
-                      {row.status === "out_of_sync" && row.hub ? (
-                        <Button
-                          variant="secondary"
-                          className="h-8 px-4 text-xs"
-                          onClick={() => void handleSyncSkillHub(row.hubId)}
-                          disabled={skillHubActionId !== null}
-                        >
-                          {actionBusy && skillHubActionKind === "sync" ? tr("den.syncing") : tr("den.sync")}
-                        </Button>
-                      ) : null}
-                      <Button
-                        variant={row.status === "available" ? "secondary" : "outline"}
-                        className="h-8 px-4 text-xs"
-                        onClick={() => {
-                          if (row.status === "available" && row.hub) return void handleImportSkillHub(row.hubId);
-                          return void handleRemoveSkillHub(row.hubId);
-                        }}
-                        disabled={skillHubActionId !== null}
-                      >
-                        {actionBusy
-                          ? actionLabel
-                          : row.status === "available"
-                            ? tr("den.import_all")
-                            : row.status === "removed_from_cloud"
-                              ? tr("den.uninstall")
-                              : tr("common.remove")}
-                      </Button>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          <div className={`${settingsPanelClass} space-y-4`}>
-            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-              <div>
-                <div className="flex items-center gap-2 text-sm font-medium text-dls-text">
-                  <Brain size={15} className="text-dls-secondary" />
-                  {tr("den.cloud_providers_title")}
-                </div>
-                <div className="mt-1 text-xs text-dls-secondary">{tr("den.cloud_providers_hint")}</div>
-              </div>
-              <div className="flex flex-wrap items-center gap-2">
-                <div className={sectionPillClass}>
-                  <Users size={12} />
-                  {activeOrgName}
-                </div>
-                <Button
-                  variant="outline"
-                  className="h-8 px-3 text-xs"
-                  onClick={() => void refreshProviders()}
-                  disabled={providersBusy || !activeOrgId.trim()}
-                >
-                  <RefreshCcw size={13} className={providersBusy ? "animate-spin" : ""} />
-                  {tr("den.refresh")}
-                </Button>
-              </div>
-            </div>
+        {isSignedIn ? (
+          <>
+            <CloudAccountSection
+              activeOrgId={activeOrgId}
+              authBusy={authBusy}
+              orgs={orgs}
+              orgsBusy={orgsBusy}
+              orgsError={orgsError}
+              sessionBusy={sessionBusy}
+              user={user}
+              onActiveOrgChange={handleActiveOrgChange}
+              onRefreshOrgs={refreshOrgs}
+              onSignOut={signOut}
+            />
+          </>
+        ) : null}
+      </SettingsSection>
 
-            {providerActionError ? <div className={errorBannerClass}>{providerActionError}</div> : null}
+      <Separator />
 
-            {!providersBusy && providerRows.length === 0 ? (
-              <div className={`${settingsPanelSoftClass} border-dashed py-6 text-center text-sm text-dls-secondary`}>
-                {activeOrgId.trim() ? tr("den.no_cloud_providers") : tr("den.choose_org_for_providers")}
-              </div>
-            ) : null}
 
-            <div className="space-y-1">
-              {providerRows.map((row) => {
-                const actionBusy = providerActionId === row.cloudProviderId;
-                const actionLabel = !actionBusy
-                  ? null
-                  : providerActionKind === "import"
-                    ? tr("den.importing")
-                    : providerActionKind === "sync"
-                      ? tr("den.syncing")
-                      : tr("den.removing");
-
-                return (
-                  <div
-                    key={row.key}
-                    className="flex items-center justify-between rounded-xl px-3 py-2 text-left text-[13px] transition-colors hover:bg-dls-hover"
-                  >
-                    <div className="min-w-0 pr-4">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="truncate font-medium text-dls-text">{row.name}</span>
-                        <span className={sectionPillClass}>
-                          <KeyRound size={12} />
-                          {row.provider?.providerId ?? row.imported?.providerId}
-                        </span>
-                        {row.provider?.hasApiKey ? <span className={sectionPillClass}>{tr("den.credentials_ready_badge")}</span> : null}
-                        {row.status !== "available" ? (
-                          <span className={sectionPillClass}>
-                            {row.status === "imported"
-                              ? tr("den.imported_badge")
-                              : row.status === "out_of_sync"
-                                ? tr("den.out_of_sync_badge")
-                                : tr("den.removed_from_cloud_badge")}
-                          </span>
-                        ) : null}
-                      </div>
-                      <div className="mt-0.5 truncate text-[11px] text-dls-secondary">
-                        {row.status === "removed_from_cloud"
-                          ? tx("den.cloud_provider_removed_detail", { providerId: row.imported?.providerId ?? row.name })
-                          : row.status === "out_of_sync"
-                            ? tx("den.cloud_provider_sync_detail", {
-                                count: row.provider?.models.length ?? 0,
-                                source: row.provider?.source === "custom" ? "custom" : "managed",
-                              })
-                            : tx("den.cloud_provider_detail", {
-                                count: row.provider?.models.length ?? 0,
-                                source: row.provider?.source === "custom" ? "custom" : "managed",
-                              })}
-                      </div>
-                    </div>
-                    <div className="flex shrink-0 items-center gap-2">
-                      {row.status === "out_of_sync" && row.provider ? (
-                        <Button
-                          variant="secondary"
-                          className="h-8 px-4 text-xs"
-                          onClick={() => void handleSyncProvider(row.cloudProviderId, row.name)}
-                          disabled={providerActionId !== null}
-                        >
-                          {actionBusy && providerActionKind === "sync" ? tr("den.syncing") : tr("den.sync")}
-                        </Button>
-                      ) : null}
-                      <Button
-                        variant={row.status === "available" ? "secondary" : "outline"}
-                        className="h-8 px-4 text-xs"
-                        onClick={() => {
-                          if (row.status === "available" && row.provider) {
-                            return void handleImportProvider(row.cloudProviderId, row.name);
-                          }
-                          return void handleRemoveProvider(row.cloudProviderId, row.name);
-                        }}
-                        disabled={providerActionId !== null}
-                      >
-                        {actionBusy
-                          ? actionLabel
-                          : row.status === "available"
-                            ? tr("den.import_provider")
-                            : row.status === "removed_from_cloud"
-                              ? tr("den.uninstall")
-                              : tr("common.remove")}
-                      </Button>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
+      {!isSignedIn ? (
+        <DenSignedOutPanel
+          authBusy={authBusy}
+          authError={authError}
+          onClearAuthError={() => setAuthError(null)}
+          onOpenBrowserAuth={openBrowserAuth}
+          onSubmitManualAuth={submitManualAuth}
+          sessionBusy={sessionBusy}
+        />
+      ) : (
+        <div className="flex flex-col gap-y-8">
+          <CloudSkillsSection
+            actionError={skillActionError}
+            actionId={skillActionId}
+            actionKind={skillActionKind}
+            activeOrgName={activeOrgName}
+            busy={skillsBusy}
+            hasActiveOrg={Boolean(activeOrgId.trim())}
+            rows={skillRows}
+            statusError={props.extensions.cloudOrgSkillsStatus()}
+            onImportSkill={handleImportSkill}
+            onRefresh={refreshSkills}
+            onRemoveSkill={handleRemoveSkill}
+            onSyncSkill={handleSyncSkill}
+          />
+
+          <Separator />
+
+          <MarketplacePluginsSection
+            actionError={pluginActionError}
+            actionId={pluginActionId}
+            activeMarketplaceId={activeMarketplaceId}
+            activeOrgName={activeOrgName}
+            busy={marketplacesBusy}
+            hasActiveOrg={Boolean(activeOrgId.trim())}
+            marketplaces={liveMarketplaces}
+            rowsByMarketplace={marketplacePluginRows}
+            statusError={props.extensions.cloudOrgMarketplacesStatus()}
+            onImportPlugin={handleImportPlugin}
+            onRefresh={refreshMarketplaces}
+            onSelectMarketplace={setActiveMarketplaceId}
+          />
+
+          <Separator />
+
+          <CloudWorkersSection
+            activeOrgName={activeOrgName}
+            openingWorkerId={openingWorkerId}
+            refreshDisabled={[workersBusy, !activeOrgId.trim()].some(Boolean)}
+            workers={workers}
+            workersBusy={workersBusy}
+            workersError={workersError}
+            onOpenWorker={handleOpenWorker}
+            onRefreshWorkers={refreshWorkers}
+          />
+
+          <Separator />
+
+          <SkillHubsSection
+            actionError={skillHubActionError}
+            actionId={skillHubActionId}
+            actionKind={skillHubActionKind}
+            activeOrgName={activeOrgName}
+            busy={skillHubsBusy}
+            hasActiveOrg={Boolean(activeOrgId.trim())}
+            rows={skillHubRows}
+            statusError={props.extensions.cloudOrgSkillHubsStatus()}
+            onImport={handleImportSkillHub}
+            onRefresh={refreshSkillHubs}
+            onRemove={handleRemoveSkillHub}
+            onSync={handleSyncSkillHub}
+          />
+
+          <Separator />
+
+          <CloudProvidersSection
+            actionError={providerActionError}
+            actionId={providerActionId}
+            actionKind={providerActionKind}
+            activeOrgName={activeOrgName}
+            busy={providersBusy}
+            hasActiveOrg={Boolean(activeOrgId.trim())}
+            rows={providerRows}
+            onImport={handleImportProvider}
+            onRefresh={refreshProviders}
+            onRemove={handleRemoveProvider}
+            onSync={handleSyncProvider}
+          />
         </div>
       )}
-    </div>
+    </SettingsStack>
   );
 }
 
diff --git a/apps/app/src/react-app/domains/settings/settings-list.tsx b/apps/app/src/react-app/domains/settings/settings-list.tsx
new file mode 100644
index 000000000..ee93ae24b
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/settings-list.tsx
@@ -0,0 +1,114 @@
+/** @jsxImportSource react */
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+import { SettingsInset } from "./settings-section";
+import { SearchIcon } from "lucide-react"
+
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+} from "@/components/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+
+export interface SettingsListProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SettingsList({ children, className }: SettingsListProps) {
+  return <div className={cn("flex flex-col gap-y-2", className)}>{children}</div>;
+}
+
+interface SettingsListEmptyStateProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SettingsListEmptyState({ children, className }: SettingsListEmptyStateProps) {
+  return (
+    <SettingsInset className={cn("border-dashed py-6 text-center text-sm text-muted-foreground", className)}>
+      {children}
+    </SettingsInset>
+  );
+}
+
+
+export interface SettingsListTitleProps {
+  children: React.ReactNode;
+}
+
+export function SettingsListTitle({ children }: SettingsListTitleProps) {
+  return <div className="flex flex-wrap items-center gap-2">{children}</div>;
+}
+
+export interface SettingsListItemTitleProps {
+  children: React.ReactNode;
+}
+
+export function SettingsListItemTitle({ children }: SettingsListItemTitleProps) {
+  return <span className="truncate font-medium text-dls-text">{children}</span>;
+}
+
+export interface SettingsListItemProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SettingsListItem({ children, className }: SettingsListItemProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-muted/10 hover:border-border border border-transparent",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SettingsListItemContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SettingsListItemContent({ children, className }: SettingsListItemContentProps) {
+  return <div className={cn("flex min-w-0 flex-col gap-y-1 pr-4", className)}>{children}</div>;
+}
+
+interface SettingsListItemActionsProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SettingsListItemActions({ children, className }: SettingsListItemActionsProps) {
+  return <div className={cn("flex shrink-0 items-center gap-2", className)}>{children}</div>;
+}
+
+interface SettingsListItemDescriptionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SettingsListItemDescription({ children, className }: SettingsListItemDescriptionProps) {
+  return <div className={cn("mt-0.5 text-muted-foreground text-xs truncate", className)}>{children}</div>;
+}
+
+export function SettingsListSearchInput({
+  placeholder = "Search...",
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <InputGroup>
+      <InputGroupInput placeholder={placeholder} {...props} />
+      <InputGroupAddon align="inline-start">
+        <SearchIcon className="text-muted-foreground" />
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}
diff --git a/apps/app/src/react-app/domains/settings/settings-section.tsx b/apps/app/src/react-app/domains/settings/settings-section.tsx
new file mode 100644
index 000000000..44b125e99
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/settings-section.tsx
@@ -0,0 +1,178 @@
+/** @jsxImportSource react */
+import type * as React from "react";
+import { RefreshCcw } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type SettingsTone = "ready" | "warning" | "neutral" | "error";
+
+export interface SpinnerProps {
+  className?: string;
+  size?: number;
+  spinning?: boolean;
+}
+
+export function Spinner({
+  className,
+  size = 13,
+  spinning = true,
+}: SpinnerProps) {
+  return <RefreshCcw size={size} className={cn(spinning && "animate-spin", className)} />;
+}
+
+export interface RefreshButtonProps extends Omit<React.ComponentProps<typeof Button>, "onClick"> {
+  busy: boolean;
+  onRefresh: () => void | Promise<void>;
+}
+
+export function RefreshButton({
+  busy,
+  children,
+  className,
+  onRefresh,
+  ...props
+}: RefreshButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={(
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className={cn("text-muted-foreground", className)}
+            onClick={() => void onRefresh()}
+            {...props}
+          >
+            <span className="sr-only">{children}</span>
+            <Spinner className="size-3.5" spinning={busy} />
+          </Button>
+        )}
+      />
+      <TooltipContent>{children}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export interface SettingsLayoutProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SettingsStack({ children, className }: SettingsLayoutProps) {
+  return <div className={cn("flex w-full max-w-3xl flex-col gap-y-6", className)}>{children}</div>;
+}
+
+export function SettingsSection({ children, className }: SettingsLayoutProps) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function SettingsInset({ children, className }: SettingsLayoutProps) {
+  return (
+    <div className={cn("border border-dls-border rounded-2xl p-4", className)}>
+      {children}
+    </div>
+  );
+}
+
+
+export function SettingsPill({ children, className }: SettingsLayoutProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border border-dls-border bg-dls-hover px-2.5 py-1 text-xs font-medium text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+const statusDotVariants = cva("", {
+  variants: {
+    tone: {
+      ready: "bg-green-9",
+      warning: "bg-amber-9",
+      error: "bg-red-9",
+      neutral: "bg-gray-8",
+    },
+  },
+});
+
+export interface SettingsStatusBadgeProps {
+  label: string;
+  tone: SettingsTone;
+  className?: string;
+}
+
+export function SettingsStatusBadge({ label, tone, className }: SettingsStatusBadgeProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-8 items-center justify-start gap-2 text-center font-medium rounded-xl px-3 py-0 text-xs text-muted-foreground shrink-0",
+        className,
+      )}
+    >
+      <span className={cn("h-2 w-2 rounded-full", statusDotVariants({ tone }))} />
+      {label}
+    </div>
+  );
+}
+
+export interface SettingsNoticeProps extends SettingsLayoutProps {
+  tone?: "neutral" | "error";
+}
+
+export function SettingsNotice({
+  children,
+  tone = "neutral",
+  className,
+}: SettingsNoticeProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border border-dls-border bg-dls-hover px-3 py-2 text-xs text-muted-foreground",
+        tone === "error" && "border-red-7/30 bg-red-1/40 text-red-11",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type SettingsSectionHeaderProps = SettingsLayoutProps;
+
+export function SettingsSectionHeader({ children, className }: SettingsSectionHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-3 md:flex-row md:items-start justify-between", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function SettingsSectionHeaderContent({ children, className }: SettingsLayoutProps) {
+  return <div className={cn("flex flex-col gap-1", className)}>{children}</div>;
+}
+
+export function SettingsSectionHeaderTitle({ children, className }: SettingsLayoutProps) {
+  return (
+    <div className={cn("flex items-center gap-2 text-base font-medium text-dls-text", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function SettingsSectionHeaderDescription({ children, className }: SettingsLayoutProps) {
+  return <div className={cn("text-sm text-muted-foreground", className)}>{children}</div>;
+}
+
+export function SettingsSectionHeaderActions({ children, className }: SettingsLayoutProps) {
+  return <div className={cn("flex flex-wrap items-center gap-2", className)}>{children}</div>;
+}
diff --git a/apps/app/src/react-app/domains/settings/shell/panel.tsx b/apps/app/src/react-app/domains/settings/shell/panel.tsx
new file mode 100644
index 000000000..087952aeb
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/shell/panel.tsx
@@ -0,0 +1,123 @@
+/** @jsxImportSource react */
+import type * as React from "react";
+import { RefreshCcw } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "../../../design-system/button";
+
+type SettingsContentProps = {
+  children: React.ReactNode;
+};
+
+export function SettingsContent(props: SettingsContentProps) {
+  return <div className="min-w-0 min-h-0 flex-1 overflow-y-auto flex flex-col gap-8 p-8 items-center">{props.children}</div>;
+}
+
+type SettingsPanelProps = {
+  children: React.ReactNode;
+};
+
+export function SettingsPanel(props: SettingsPanelProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-3 md:flex-row md:items-center md:justify-between lg:max-w-3xl w-full",
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+type SettingsPanelHeadingProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function SettingsPanelHeading(props: SettingsPanelHeadingProps) {
+  return <div className={cn("flex flex-col gap-y-1", props.className)}>{props.children}</div>;
+}
+
+type SettingsPanelTitleProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function SettingsPanelTitle(props: SettingsPanelTitleProps) {
+  return <h2 className={cn("text-xl font-semibold tracking-tight", props.className)}>{props.children}</h2>;
+}
+
+type SettingsPanelDescriptionProps = {
+  children: React.ReactNode;
+};
+
+export function SettingsPanelDescription(props: SettingsPanelDescriptionProps) {
+  return <p className="text-sm text-muted-foreground">{props.children}</p>;
+}
+
+type SettingsPanelToolbarProps = {
+  children: React.ReactNode;
+};
+
+export function SettingsPanelToolbar(props: SettingsPanelToolbarProps) {
+  return <div className="mt-4 flex flex-col gap-y-2 md:mt-0 md:max-w-sm md:text-right">{props.children}</div>;
+}
+
+type SettingsPanelToolbarActionsProps = {
+  children: React.ReactNode;
+};
+
+export function SettingsPanelToolbarActions(props: SettingsPanelToolbarActionsProps) {
+  return <div className="flex flex-wrap items-center gap-2 md:justify-end">{props.children}</div>;
+}
+
+type SettingsPanelToolbarStatusProps = {
+  tone?: string;
+  title?: string;
+  spinning?: boolean;
+  children: React.ReactNode;
+};
+
+export function SettingsPanelToolbarStatus(props: SettingsPanelToolbarStatusProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs shadow-sm",
+        props.tone ?? "bg-gray-4/60 text-gray-11 border-gray-7/50",
+      )}
+      title={props.title}
+    >
+      {props.spinning ? <RefreshCcw size={12} className="animate-spin" /> : null}
+      <span className="tabular-nums whitespace-nowrap">{props.children}</span>
+    </div>
+  );
+}
+
+type SettingsPanelToolbarButtonProps = {
+  disabled?: boolean;
+  title?: string;
+  onClick?: () => void;
+  children: React.ReactNode;
+};
+
+export function SettingsPanelToolbarButton(props: SettingsPanelToolbarButtonProps) {
+  return (
+    <Button
+      variant="outline"
+      className="h-8 rounded-full border-gray-6/60 bg-gray-1/70 px-3 py-0 text-xs hover:bg-gray-2/70"
+      onClick={props.onClick}
+      disabled={props.disabled}
+      title={props.title}
+    >
+      {props.children}
+    </Button>
+  );
+}
+
+type SettingsPanelToolbarMessageProps = {
+  children: React.ReactNode;
+};
+
+export function SettingsPanelToolbarMessage(props: SettingsPanelToolbarMessageProps) {
+  return <div className="text-xs leading-relaxed text-amber-11/90 md:max-w-sm">{props.children}</div>;
+}
diff --git a/apps/app/src/react-app/domains/settings/shell/settings-page.tsx b/apps/app/src/react-app/domains/settings/shell/settings-page.tsx
index 8ecaac1e1..61689a0cb 100644
--- a/apps/app/src/react-app/domains/settings/shell/settings-page.tsx
+++ b/apps/app/src/react-app/domains/settings/shell/settings-page.tsx
@@ -1,13 +1,69 @@
 /** @jsxImportSource react */
-import type { ReactNode } from "react";
-import { RefreshCcw } from "lucide-react";
+import type * as React from "react";
+import {
+  Bug,
+  Cloud,
+  Cog,
+  Paintbrush,
+  Puzzle,
+  RefreshCcw,
+  ShieldCheck,
+  Sparkles,
+  Terminal,
+  Wrench,
+} from "lucide-react";
 
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/components/ui/sidebar";
 import { t } from "../../../../i18n";
 import type { SettingsTab } from "../../../../app/types";
-import { Button } from "../../../design-system/button";
+import {
+  SettingsContent,
+  SettingsPanel,
+  SettingsPanelDescription,
+  SettingsPanelHeading,
+  SettingsPanelTitle,
+  SettingsPanelToolbar,
+  SettingsPanelToolbarActions,
+  SettingsPanelToolbarButton,
+  SettingsPanelToolbarMessage,
+  SettingsPanelToolbarStatus,
+} from "./panel";
 
-const settingsRailClass = "rounded-[24px] border border-dls-border bg-dls-sidebar p-3";
-const settingsPanelClass = "rounded-[28px] border border-dls-border bg-dls-surface p-5 md:p-6";
+export function getSettingsTabIcon(tab: SettingsTab) {
+  switch (tab) {
+    case "den":
+      return Cloud;
+    case "skills":
+      return Sparkles;
+    case "extensions":
+      return Puzzle;
+    case "environment":
+      return Terminal;
+    case "advanced":
+      return Wrench;
+    case "appearance":
+      return Paintbrush;
+    case "updates":
+      return RefreshCcw;
+    case "recovery":
+      return ShieldCheck;
+    case "debug":
+      return Bug;
+    default:
+      return Cog;
+  }
+}
 
 export function getSettingsTabLabel(tab: SettingsTab) {
   switch (tab) {
@@ -82,7 +138,7 @@ type SettingsPageProps = {
   updateToolbarDisabled?: boolean;
   updateRestartBlockedMessage?: string | null;
   onUpdateToolbarAction?: () => void;
-  children: ReactNode;
+  children: React.ReactNode;
 };
 
 export function SettingsPage(props: SettingsPageProps) {
@@ -90,97 +146,95 @@ export function SettingsPage(props: SettingsPageProps) {
   const globalTabs = getGlobalSettingsTabs(props.developerMode);
 
   return (
-    <section className="space-y-6 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-8 md:space-y-0">
-      <aside className="space-y-6 md:sticky md:top-4 md:self-start">
-        <div className={settingsRailClass}>
-          <div className="mb-2 px-2 text-[11px] font-medium uppercase tracking-[0.18em] text-gray-8">
-            {t("settings.group_workspace")}
-          </div>
-          <div className="space-y-1">
-            {workspaceTabs.map((tab) => (
-              <button
-                key={tab}
-                type="button"
-                className={`flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-left text-[13px] font-medium transition-colors ${
-                  props.activeTab === tab
-                    ? "bg-dls-surface text-dls-text shadow-sm"
-                    : "text-gray-10 hover:bg-dls-surface/50 hover:text-dls-text"
-                }`}
-                onClick={() => props.onSelectTab(tab)}
-              >
-                <span>{getSettingsTabLabel(tab)}</span>
-              </button>
-            ))}
-          </div>
-        </div>
+    <SidebarProvider className="relative min-h-full min-w-0">
+        <Sidebar collapsible="none" className="absolute inset-0">
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>{t("settings.group_workspace")}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {workspaceTabs.map((tab) => {
+                    const Icon = getSettingsTabIcon(tab);
+                    return (
+                      <SidebarMenuItem key={tab}>
+                        <SidebarMenuButton
+                          type="button"
+                          isActive={props.activeTab === tab}
+                          onClick={() => props.onSelectTab(tab)}
+                        >
+                          <Icon />
+                          <span>{getSettingsTabLabel(tab)}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    );
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
 
-        <div className={settingsRailClass}>
-          <div className="mb-2 px-2 text-[11px] font-medium uppercase tracking-[0.18em] text-gray-8">
-            {t("settings.group_global")}
-          </div>
-          <div className="space-y-1">
-            {globalTabs.map((tab) => (
-              <button
-                key={tab}
-                type="button"
-                className={`flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-left text-[13px] font-medium transition-colors ${
-                  props.activeTab === tab
-                    ? "bg-dls-surface text-dls-text shadow-sm"
-                    : "text-gray-10 hover:bg-dls-surface/50 hover:text-dls-text"
-                }`}
-                onClick={() => props.onSelectTab(tab)}
-              >
-                <span>{getSettingsTabLabel(tab)}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-      </aside>
+            <SidebarGroup>
+              <SidebarGroupLabel>{t("settings.group_global")}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {globalTabs.map((tab) => {
+                    const Icon = getSettingsTabIcon(tab);
+                    return (
+                      <SidebarMenuItem key={tab}>
+                        <SidebarMenuButton
+                          type="button"
+                          isActive={props.activeTab === tab}
+                          onClick={() => props.onSelectTab(tab)}
+                        >
+                          <Icon />
+                          <span>{getSettingsTabLabel(tab)}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    );
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
 
-      <div className="min-w-0 space-y-6">
-        <div className={`${settingsPanelClass} flex flex-col gap-3 md:flex-row md:items-center md:justify-between`}>
-          <div className="space-y-1">
-            <h2 className="text-lg font-semibold tracking-tight text-gray-12">
-              {getSettingsTabLabel(props.activeTab)}
-            </h2>
-            <p className="text-sm text-gray-9">
-              {getSettingsTabDescription(props.activeTab)}
-            </p>
-          </div>
+        <SidebarInset className="h-full min-w-0 w-full max-w-full overflow-hidden">
+        <SettingsContent>
+          <SettingsPanel>
+            <SettingsPanelHeading>
+              <SettingsPanelTitle>{getSettingsTabLabel(props.activeTab)}</SettingsPanelTitle>
+              <SettingsPanelDescription>{getSettingsTabDescription(props.activeTab)}</SettingsPanelDescription>
+            </SettingsPanelHeading>
 
-          {props.showUpdateToolbar && props.activeTab === "general" ? (
-            <div className="mt-4 space-y-2 md:mt-0 md:max-w-sm md:text-right">
-              <div className="flex flex-wrap items-center gap-2 md:justify-end">
-                <div
-                  className={`flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs shadow-sm ${props.updateToolbarTone ?? "bg-gray-4/60 text-gray-11 border-gray-7/50"}`}
-                  title={props.updateToolbarTitle}
-                >
-                  {props.updateToolbarSpinning ? <RefreshCcw size={12} className="animate-spin" /> : null}
-                  <span className="tabular-nums whitespace-nowrap">{props.updateToolbarLabel}</span>
-                </div>
-                {props.updateToolbarActionLabel ? (
-                  <Button
-                    variant="outline"
-                    className="h-8 rounded-full border-gray-6/60 bg-gray-1/70 px-3 py-0 text-xs hover:bg-gray-2/70"
-                    onClick={props.onUpdateToolbarAction}
-                    disabled={props.updateToolbarDisabled}
-                    title={props.updateRestartBlockedMessage ?? ""}
+            {props.showUpdateToolbar && props.activeTab === "general" ? (
+              <SettingsPanelToolbar>
+                <SettingsPanelToolbarActions>
+                  <SettingsPanelToolbarStatus
+                    tone={props.updateToolbarTone}
+                    title={props.updateToolbarTitle}
+                    spinning={props.updateToolbarSpinning}
                   >
-                    {props.updateToolbarActionLabel}
-                  </Button>
+                    {props.updateToolbarLabel}
+                  </SettingsPanelToolbarStatus>
+                  {props.updateToolbarActionLabel ? (
+                    <SettingsPanelToolbarButton
+                      onClick={props.onUpdateToolbarAction}
+                      disabled={props.updateToolbarDisabled}
+                      title={props.updateRestartBlockedMessage ?? ""}
+                    >
+                      {props.updateToolbarActionLabel}
+                    </SettingsPanelToolbarButton>
+                  ) : null}
+                </SettingsPanelToolbarActions>
+                {props.updateRestartBlockedMessage ? (
+                  <SettingsPanelToolbarMessage>{props.updateRestartBlockedMessage}</SettingsPanelToolbarMessage>
                 ) : null}
-              </div>
-              {props.updateRestartBlockedMessage ? (
-                <div className="text-xs leading-relaxed text-amber-11/90 md:max-w-sm">
-                  {props.updateRestartBlockedMessage}
-                </div>
-              ) : null}
-            </div>
-          ) : null}
-        </div>
+              </SettingsPanelToolbar>
+            ) : null}
+          </SettingsPanel>
 
-        {props.children}
-      </div>
-    </section>
+          {props.children}
+        </SettingsContent>
+        </SidebarInset>
+    </SidebarProvider>
   );
 }
diff --git a/apps/app/src/react-app/domains/settings/shell/settings-shell.tsx b/apps/app/src/react-app/domains/settings/shell/settings-shell.tsx
index 8db062c43..511f7e5cf 100644
--- a/apps/app/src/react-app/domains/settings/shell/settings-shell.tsx
+++ b/apps/app/src/react-app/domains/settings/shell/settings-shell.tsx
@@ -1,28 +1,29 @@
 /** @jsxImportSource react */
-import type { ComponentProps, PointerEventHandler, ReactNode } from "react";
+import type * as React from "react";
 import { X } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
 import { t } from "../../../../i18n";
 import { SettingsPage, getSettingsTabLabel } from "./settings-page";
 import { WorkspaceSessionList } from "../../session/sidebar/workspace-session-list";
 
-type SettingsPageChromeProps = Omit<ComponentProps<typeof SettingsPage>, "children">;
+type SettingsPageChromeProps = Omit<React.ComponentProps<typeof SettingsPage>, "children">;
 
 export type SettingsShellProps = SettingsPageChromeProps & {
   selectedWorkspaceName: string;
   headerStatus?: string;
   busyHint?: string | null;
-  workspaceSessionListProps: ComponentProps<typeof WorkspaceSessionList>;
+  workspaceSessionListProps: React.ComponentProps<typeof WorkspaceSessionList>;
   onClose: () => void;
-  sidebarTopSlot?: ReactNode;
-  headerLeadingSlot?: ReactNode;
+  sidebarTopSlot?: React.ReactNode;
+  headerLeadingSlot?: React.ReactNode;
   sidebarWidth?: number;
-  onSidebarResizeStart?: PointerEventHandler<HTMLDivElement>;
-  children: ReactNode;
+  onSidebarResizeStart?: React.PointerEventHandler<HTMLDivElement>;
+  children: React.ReactNode;
   error?: string | null;
-  errorSlot?: ReactNode;
-  modalSlot?: ReactNode;
-  footer?: ReactNode;
+  errorSlot?: React.ReactNode;
+  modalSlot?: React.ReactNode;
+  footer?: React.ReactNode;
 };
 
 export function SettingsShell(props: SettingsShellProps) {
@@ -49,46 +50,45 @@ export function SettingsShell(props: SettingsShellProps) {
           ) : null}
         </aside>
 
-        <main className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-[24px] border border-dls-border bg-dls-surface shadow-[var(--dls-shell-shadow)]">
-          <div className="flex-1 overflow-y-auto">
-            <header className="sticky top-0 z-10 flex h-12 items-center justify-between border-b border-dls-border bg-dls-surface px-4 md:px-6">
-              <div className="flex min-w-0 items-center gap-3">
-                {props.headerLeadingSlot}
-                <h1 className="truncate text-[15px] font-semibold text-dls-text">{title}</h1>
-                <span className="hidden truncate text-[13px] text-dls-secondary lg:inline">
-                  {props.selectedWorkspaceName}
+        <main className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-[24px] border border-dls-border bg-dls-surface">
+          <header className="shrink-0 flex h-12 items-center justify-between border-b border-dls-border bg-dls-surface px-4 md:px-6">
+            <div className="flex min-w-0 items-center gap-3">
+              {props.headerLeadingSlot}
+              <h1 className="truncate text-[15px] font-semibold text-dls-text">{title}</h1>
+              <span className="hidden truncate text-[13px] text-dls-secondary lg:inline">
+                {props.selectedWorkspaceName}
+              </span>
+              {props.developerMode && props.headerStatus ? (
+                <span className="hidden text-[12px] text-dls-secondary lg:inline">
+                  {props.headerStatus}
                 </span>
-                {props.developerMode && props.headerStatus ? (
-                  <span className="hidden text-[12px] text-dls-secondary lg:inline">
-                    {props.headerStatus}
-                  </span>
-                ) : null}
-                {props.busyHint ? (
-                  <span className="hidden text-[12px] text-dls-secondary lg:inline">
-                    {props.busyHint}
-                  </span>
-                ) : null}
-              </div>
-              <div className="flex items-center text-gray-10">
-                <button
-                  type="button"
-                  className="flex h-9 w-9 items-center justify-center rounded-md text-gray-10 transition-colors hover:bg-gray-2/70 hover:text-dls-text"
-                  onClick={props.onClose}
-                  title={t("dashboard.close_settings")}
-                  aria-label={t("dashboard.close_settings")}
-                >
-                  <X size={18} />
-                </button>
-              </div>
-            </header>
-
-            <div className="w-full space-y-10 p-6 md:p-10">
-              <SettingsPage {...props}>{props.children}</SettingsPage>
+              ) : null}
+              {props.busyHint ? (
+                <span className="hidden text-[12px] text-dls-secondary lg:inline">
+                  {props.busyHint}
+                </span>
+              ) : null}
+            </div>
+            <div className="flex items-center text-gray-10">
+              <Button
+                variant="ghost"
+                type="button"
+                className="flex h-9 w-9 items-center justify-center rounded-md text-gray-10 transition-colors hover:bg-gray-2/70 hover:text-dls-text"
+                onClick={props.onClose}
+                title={t("dashboard.close_settings")}
+                aria-label={t("dashboard.close_settings")}
+              >
+                <X size={18} />
+              </Button>
             </div>
+          </header>
+
+          <div className="flex min-h-0 flex-1 flex-col">
+            <SettingsPage {...props}>{props.children}</SettingsPage>
 
             {props.error ? (
               <div className="mx-auto max-w-5xl px-6 pb-24 md:px-10 md:pb-10">
-                <div className="space-y-3 rounded-2xl border border-red-7/20 bg-red-1/40 px-5 py-4 text-sm text-red-12">
+                <div className="flex flex-col gap-y-3 rounded-2xl border border-red-7/20 bg-red-1/40 px-5 py-4 text-sm text-red-12">
                   <div>{props.error}</div>
                   {props.errorSlot}
                 </div>
diff --git a/apps/app/src/react-app/domains/settings/shell/tabs.tsx b/apps/app/src/react-app/domains/settings/shell/tabs.tsx
new file mode 100644
index 000000000..ac634a3d8
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/shell/tabs.tsx
@@ -0,0 +1,68 @@
+/** @jsxImportSource react */
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+type TabsSidebarProps = {
+  children: React.ReactNode;
+};
+
+export function TabsSidebar(props: TabsSidebarProps) {
+  return (
+    <aside className={cn("space-y-6 md:sticky md:top-4 md:self-start")}>{props.children}</aside>
+  );
+}
+
+type TabsGroupProps = {
+  children: React.ReactNode;
+};
+
+export function TabsGroup(props: TabsGroupProps) {
+  return (
+    <div className={cn("rounded-[24px] border border-dls-border bg-dls-sidebar p-3")}>
+      {props.children}
+    </div>
+  );
+}
+
+type TabsGroupTitleProps = {
+  children: React.ReactNode;
+};
+
+export function TabsGroupTitle(props: TabsGroupTitleProps) {
+  return (
+    <div className={cn("mb-2 px-2 text-[11px] font-medium uppercase tracking-[0.18em] text-gray-8")}>
+      {props.children}
+    </div>
+  );
+}
+
+type TabsListProps = {
+  children: React.ReactNode;
+};
+
+export function TabsList(props: TabsListProps) {
+  return <div className={cn("space-y-1")}>{props.children}</div>;
+}
+
+type TabsTriggerProps = {
+  active: boolean;
+  onSelect: () => void;
+  children: React.ReactNode;
+};
+
+export function TabsTrigger(props: TabsTriggerProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-left text-[13px] font-medium transition-colors text-gray-10 hover:bg-dls-surface/50 hover:text-dls-text",
+        props.active &&
+          "bg-dls-surface text-dls-text shadow-sm hover:bg-dls-surface hover:text-dls-text",
+      )}
+      onClick={props.onSelect}
+    >
+      <span>{props.children}</span>
+    </button>
+  );
+}
diff --git a/apps/app/src/react-app/domains/settings/state/extensions-store.ts b/apps/app/src/react-app/domains/settings/state/extensions-store.ts
index df9c3db18..b22a03d9e 100644
--- a/apps/app/src/react-app/domains/settings/state/extensions-store.ts
+++ b/apps/app/src/react-app/domains/settings/state/extensions-store.ts
@@ -1,4 +1,4 @@
-import { useSyncExternalStore } from "react";
+import * as React from "react";
 
 import { applyEdits, modify } from "jsonc-parser";
 
@@ -1004,7 +1004,7 @@ export function createExtensionsStore(options: {
       mutateState((current) => ({
         ...current,
         cloudOrgSkills: catalog,
-        cloudOrgSkillsStatus: catalog.length ? null : translate("skills.cloud_org_empty"),
+        cloudOrgSkillsStatus: null,
         cloudOrgSkillsContextKey: loadKey,
       }));
       cloudOrgSkillsLoaded = true;
@@ -1064,7 +1064,7 @@ export function createExtensionsStore(options: {
       mutateState((current) => ({
         ...current,
         cloudOrgSkillHubs: hubs,
-        cloudOrgSkillHubsStatus: hubs.length ? null : "No organization skill hubs are available yet.",
+        cloudOrgSkillHubsStatus: null,
       }));
       cloudOrgSkillHubsLoaded = true;
       cloudOrgSkillHubsLoadKey = loadKey;
@@ -1126,7 +1126,7 @@ export function createExtensionsStore(options: {
       mutateState((current) => ({
         ...current,
         cloudOrgMarketplaces: resolved,
-        cloudOrgMarketplacesStatus: resolved.length ? null : "No organization marketplaces are available yet.",
+        cloudOrgMarketplacesStatus: null,
       }));
       cloudOrgMarketplacesLoaded = true;
       cloudOrgMarketplacesLoadKey = loadKey;
@@ -2482,5 +2482,5 @@ export function createExtensionsStore(options: {
 }
 
 export function useExtensionsStoreSnapshot(store: ExtensionsStore) {
-  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return React.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
diff --git a/apps/app/tailwind.config.ts b/apps/app/tailwind.config.ts
index abca95d01..69116bbe7 100644
--- a/apps/app/tailwind.config.ts
+++ b/apps/app/tailwind.config.ts
@@ -11,6 +11,9 @@ safelist: [
       ...radixColors,
       dls: {
         surface: "var(--dls-surface)",
+        background: "var(--dls-background)",
+        canvas: "var(--dls-canvas)",
+        "surface-muted": "var(--dls-surface-muted)",
         sidebar: "var(--dls-sidebar)",
         border: "var(--dls-border)",
         accent: "var(--dls-accent)",
diff --git a/apps/app/tsconfig.json b/apps/app/tsconfig.json
index 4af588d31..f3719f9cf 100644
--- a/apps/app/tsconfig.json
+++ b/apps/app/tsconfig.json
@@ -7,16 +7,22 @@
     "jsx": "react-jsx",
     "jsxImportSource": "react",
     "moduleResolution": "Bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "strict": true,
     "skipLibCheck": true,
-    "types": ["vite/client"]
+    "types": ["vite/client", "node"]
   },
   "include": [
     "src/index.react.tsx",
+    "src/components/**/*",
     "src/i18n/**/*",
+    "src/lib/**/*",
     "src/react-app/**/*",
     "src/app/lib/**/*",
     "src/app/bundles/**/*",
diff --git a/apps/app/vite.config.ts b/apps/app/vite.config.ts
index 53e9e5742..b3b96cdc1 100644
--- a/apps/app/vite.config.ts
+++ b/apps/app/vite.config.ts
@@ -102,4 +102,9 @@ export default defineConfig({
   build: {
     target: "esnext",
   },
+  resolve: {
+    alias: {
+      "@": resolve(appRoot, "src"),
+    },
+  },
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6cdcf3fd5..17e7adef1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,9 @@ importers:
       '@ai-sdk/react':
         specifier: ^3.0.148
         version: 3.0.148(react@19.2.4)(zod@4.3.6)
+      '@base-ui/react':
+        specifier: ^1.4.1
+        version: 1.4.1(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@codemirror/commands':
         specifier: ^6.8.0
         version: 6.10.2
@@ -37,6 +40,12 @@ importers:
       '@codemirror/view':
         specifier: ^6.38.0
         version: 6.39.14
+      '@fontsource-variable/geist':
+        specifier: ^5.2.8
+        version: 5.2.8
+      '@fontsource-variable/ibm-plex-sans':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@lexical/react':
         specifier: ^0.35.0
         version: 0.35.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(yjs@13.6.30)
@@ -82,6 +91,12 @@ importers:
       ai:
         specifier: ^6.0.146
         version: 6.0.146(zod@4.3.6)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       fuzzysort:
         specifier: ^3.1.0
         version: 3.1.0
@@ -112,16 +127,28 @@ importers:
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
+      shadcn:
+        specifier: ^4.6.0
+        version: 4.6.0(@types/node@25.6.0)(typescript@5.9.3)
       streamdown:
         specifier: ^2.5.0
         version: 2.5.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      tailwind-merge:
+        specifier: ^3.5.0
+        version: 3.5.0
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       zustand:
         specifier: ^5.0.12
         version: 5.0.12(@types/react@19.2.14)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.18
-        version: 4.1.18(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
+        version: 4.1.18(vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
+      '@types/node':
+        specifier: ^25.6.0
+        version: 25.6.0
       '@types/react':
         specifier: ^19.2.2
         version: 19.2.14
@@ -130,7 +157,7 @@ importers:
         version: 19.2.3(@types/react@19.2.14)
       '@vitejs/plugin-react':
         specifier: ^5.0.4
-        version: 5.2.0(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
+        version: 5.2.0(vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       tailwindcss:
         specifier: ^4.1.18
         version: 4.1.18
@@ -139,7 +166,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^6.0.1
-        version: 6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+        version: 6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   apps/desktop:
     dependencies:
@@ -398,7 +425,7 @@ importers:
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.18
-        version: 4.1.18(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
+        version: 4.1.18(vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       tailwindcss:
         specifier: ^4.1.18
         version: 4.1.18
@@ -407,10 +434,10 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^6.0.1
-        version: 6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+        version: 6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
       vite-plugin-solid:
         specifier: ^2.11.0
-        version: 2.11.10(solid-js@1.9.9)(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
+        version: 2.11.10(solid-js@1.9.9)(vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
 
   apps/ui-demo:
     dependencies:
@@ -432,13 +459,13 @@ importers:
         version: 19.2.3(@types/react@19.2.14)
       '@vitejs/plugin-react':
         specifier: ^5.0.4
-        version: 5.2.0(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
+        version: 5.2.0(vite@7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
       vite:
         specifier: ^7.1.12
-        version: 7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+        version: 7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   ee/apps/den-api:
     dependencies:
@@ -1145,6 +1172,33 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@base-ui/react@1.4.1':
+    resolution: {integrity: sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.2.8':
+    resolution: {integrity: sha512-jvOi+c+ftGlGotNcKnzPVg2IhCaDTB6/6R3JeqdjdXktuAJi3wKH9T7+svuaKh1mmfVU11UWzUZVH74JDfi/wQ==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@better-auth/api-key@1.5.6':
     resolution: {integrity: sha512-jr3m4/caFxn9BuY9pGDJ4B1HP1Qoqmyd7heBHm4KUFel+a9Whe/euROgZ/L+o7mbmUdZtreneaU15dpn0tJZ5g==}
     peerDependencies:
@@ -1300,9 +1354,19 @@ packages:
   '@dimforge/rapier2d-simd-compat@0.17.3':
     resolution: {integrity: sha512-bijvwWz6NHsNj5e5i1vtd3dU2pDhthSaTUZSh14DUGGKJfw8eMnlWZsxwHBxB/a3AXVNDjL9abuHw1k9FGR+jg==}
 
+  '@dotenvx/dotenvx@1.64.0':
+    resolution: {integrity: sha512-6+xRpZaWuHXEqnhBjae+VmQI9Uaqw5Uzu/ScpO+W7ww9Zp3lHSNBoNjFcUxhrCyc7pRGQzyDjhKzloqrPHERiQ==}
+    hasBin: true
+
   '@drizzle-team/brocli@0.10.2':
     resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}
 
+  '@ecies/ciphers@0.2.6':
+    resolution: {integrity: sha512-patgsRPKGkhhoBjETV4XxD0En4ui5fbX0hzayqI3M8tvNMGUoUvmyYAIWwlxBc1KX5cturfqByYdj5bYGRpN9g==}
+    engines: {bun: '>=1', deno: '>=2.7.10', node: '>=16'}
+    peerDependencies:
+      '@noble/ciphers': ^1.0.0
+
   '@electron/asar@3.4.1':
     resolution: {integrity: sha512-i4/rNPRS84t0vSRa2HorerGRXWyF4vThfHesw0dmcWHp+cspK743UanA0suA5Q5y8kzY2y6YKrvbIUn69BCAiA==}
     engines: {node: '>=10.12.0'}
@@ -1810,6 +1874,12 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@fontsource-variable/geist@5.2.8':
+    resolution: {integrity: sha512-cJ6m9e+8MQ5dCYJsLylfZrgBh6KkG4bOLckB35Tr9J/EqdkEM6QllH5PxqP1dhTvFup+HtMRPuz9xOjxXJggxw==}
+
+  '@fontsource-variable/ibm-plex-sans@5.2.8':
+    resolution: {integrity: sha512-n5PF2iFa0CZT0QYTPzxvZ39opC9LnU0zdoRccoADbs+Dtsd+lbXOZF7RNuIPHcQX1dKjF63sxnRImQIB5eD0Ag==}
+
   '@gar/promisify@1.1.3':
     resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
 
@@ -2027,6 +2097,41 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@inquirer/ansi@2.0.5':
+    resolution: {integrity: sha512-doc2sWgJpbFQ64UflSVd17ibMGDuxO1yKgOgLMwavzESnXjFWJqUeG8saYosqKpHp4kWiM5x1nXvEjbpx90gzw==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+
+  '@inquirer/confirm@6.0.12':
+    resolution: {integrity: sha512-h9FgGun3QwVYNj5TWIZZ+slii73bMoBFjPfVIGtnFuL4t8gBiNDV9PcSfIzkuxvgquJKt9nr1QzszpBzTbH8Og==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@11.1.9':
+    resolution: {integrity: sha512-BDE4fG22uYh1bGSifcj7JSx119TVYNViMhMu85usp4Fswrzh6M0DV3yld64jA98uOAa2GSQ4Bg4bZRm2d2cwSg==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@2.0.5':
+    resolution: {integrity: sha512-NsSs4kzfm12lNetHwAn3GEuH317IzpwrMCbOuMIVytpjnJ90YYHNwdRgYGuKmVxwuIqSgqk3M5qqQt1cDk0tGQ==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+
+  '@inquirer/type@4.0.5':
+    resolution: {integrity: sha512-aetVUNeKNc/VriqXlw1NRSW0zhMBB0W4bNbWRJgzRl/3d0QNDQFfk0GO5SDdtjMZVg6o8ZKEiadd7SCCzoOn5Q==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
   '@isaacs/balanced-match@4.0.1':
     resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
     engines: {node: 20 || >=22}
@@ -2293,6 +2398,10 @@ packages:
       '@cfworker/json-schema':
         optional: true
 
+  '@mswjs/interceptors@0.41.8':
+    resolution: {integrity: sha512-pRLMNKTSGRoLq+KnEB/7OY5vijw1XmcheAAOiv6pj7W1FG32kAGqj1C/RK/cqxRGr1Fh+zBi8sDur8kj3EQv6A==}
+    engines: {node: '>=18'}
+
   '@next/env@14.2.35':
     resolution: {integrity: sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==}
 
@@ -2452,10 +2561,22 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@noble/ciphers@1.3.0':
+    resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
+    engines: {node: ^14.21.3 || >=16}
+
   '@noble/ciphers@2.1.1':
     resolution: {integrity: sha512-bysYuiVfhxNJuldNXlFEitTVdNnYUc+XNJZd7Qm2a5j1vZHgY+fazadNFWFaMK/2vye0JVlxV3gHmC0WDfAOQw==}
     engines: {node: '>= 20.19.0'}
 
+  '@noble/curves@1.9.7':
+    resolution: {integrity: sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/hashes@1.8.0':
+    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
+    engines: {node: ^14.21.3 || >=16}
+
   '@noble/hashes@2.0.1':
     resolution: {integrity: sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==}
     engines: {node: '>= 20.19.0'}
@@ -2481,6 +2602,18 @@ packages:
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     deprecated: This functionality has been moved to @npmcli/fs
 
+  '@open-draft/deferred-promise@2.2.0':
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+
+  '@open-draft/deferred-promise@3.0.0':
+    resolution: {integrity: sha512-XW375UK8/9SqUVNVa6M0yEy8+iTi4QN5VZ7aZuRFQmy76LRwI9wy5F4YIBU6T+eTe2/DNDo8tqu8RHlwLHM6RA==}
+
+  '@open-draft/logger@0.3.0':
+    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
+
+  '@open-draft/until@2.1.0':
+    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
+
   '@opencode-ai/sdk@1.4.9':
     resolution: {integrity: sha512-S8WQLuBFu2WwvSc1wupsV4qskniBA+JN1VaZZs52BPWwiN2zQFTD5/6dMh6oiYOMDtPjKsTFZ6qLFxDvVPNggQ==}
 
@@ -2899,10 +3032,17 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
   '@sindresorhus/is@4.6.0':
     resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
     engines: {node: '>=10'}
 
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
   '@slack/logger@4.0.0':
     resolution: {integrity: sha512-Wz7QYfPAlG/DR+DfABddUZeNgoeY7d1J39OCR2jR+v7VBsB8ezulDK5szTnDDPDwLH5IWhLvXIHlCFZV7MSKgA==}
     engines: {node: '>= 18', npm: '>= 8.6.0'}
@@ -3453,6 +3593,9 @@ packages:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
 
+  '@ts-morph/common@0.27.0':
+    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
+
   '@turbo/darwin-64@2.8.20':
     resolution: {integrity: sha512-FQ9EX1xMU5nbwjxXxM3yU88AQQ6Sqc6S44exPRroMcx9XZHqqppl5ymJF0Ig/z3nvQNwDmz1Gsnvxubo+nXWjQ==}
     cpu: [x64]
@@ -3642,6 +3785,9 @@ packages:
   '@types/node@25.4.0':
     resolution: {integrity: sha512-9wLpoeWuBlcbBpOY3XmzSTG3oscB6xjBEEtn+pYXTfhyXhIxC5FsBer2KTopBlvKEiW9l13po9fq+SJY/5lkhw==}
 
+  '@types/node@25.6.0':
+    resolution: {integrity: sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==}
+
   '@types/plist@3.0.5':
     resolution: {integrity: sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==}
 
@@ -3668,6 +3814,12 @@ packages:
   '@types/retry@0.12.0':
     resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
 
+  '@types/set-cookie-parser@2.4.10':
+    resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
+
+  '@types/statuses@2.0.6':
+    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -3677,6 +3829,9 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
+  '@types/validate-npm-package-name@4.0.2':
+    resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
+
   '@types/verror@1.10.11':
     resolution: {integrity: sha512-RlDm9K7+o5stv0Co8i8ZRGxDbrTxhJtgjqjFyVh/tXQyl/rYtTKlnTvZ88oSTeYREWurwx20Js4kTuKCsFkUtg==}
 
@@ -3845,6 +4000,10 @@ packages:
     resolution: {integrity: sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==}
     engines: {node: '>=0.8'}
 
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
   astral-regex@2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
@@ -4150,6 +4309,10 @@ packages:
     resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
 
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
   camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
@@ -4164,6 +4327,10 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
   character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
@@ -4220,6 +4387,9 @@ packages:
   cjs-module-lexer@2.2.0:
     resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -4228,6 +4398,10 @@ packages:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
 
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
   cli-spinners@2.9.2:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
@@ -4236,6 +4410,10 @@ packages:
     resolution: {integrity: sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==}
     engines: {node: '>=8'}
 
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -4254,6 +4432,9 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -4272,6 +4453,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
   commander@12.1.0:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
@@ -4362,6 +4547,15 @@ packages:
   cose-base@2.2.0:
     resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
 
+  cosmiconfig@9.0.1:
+    resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   crc-32@1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
     engines: {node: '>=0.8'}
@@ -4545,6 +4739,10 @@ packages:
   dagre-d3-es@7.0.14:
     resolution: {integrity: sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==}
 
+  data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+
   dayjs@1.11.20:
     resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
 
@@ -4564,6 +4762,18 @@ packages:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
 
+  dedent@1.7.2:
+    resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
   default-browser-id@5.0.1:
     resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
     engines: {node: '>=18'}
@@ -4769,6 +4979,10 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  eciesjs@0.4.18:
+    resolution: {integrity: sha512-wG99Zcfcys9fZux7Cft8BAX/YrOJLJSZ3jyYPfhZHqN2E+Ffx+QXBDsv3gubEgPtV6dTzJMSQUwk1H98/t/0wQ==}
+    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -4802,6 +5016,9 @@ packages:
     engines: {node: '>= 12.20.55'}
     hasBin: true
 
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -4833,6 +5050,9 @@ packages:
   err-code@2.0.3:
     resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
 
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -4887,6 +5107,11 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   estree-util-is-identifier-name@3.0.0:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
@@ -4916,6 +5141,14 @@ packages:
     resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
     engines: {node: '>=18.0.0'}
 
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  execa@9.6.1:
+    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
   exif-parser@0.1.12:
     resolution: {integrity: sha512-c2bQfLNbMzLPmzQuOr8fy0csy84WmwnER81W88DzTp9CYNPJ6yzOj2EZAh9pywYpqHnshVLHQJ8WzldAyfY+Iw==}
 
@@ -4961,9 +5194,18 @@ packages:
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
+  fast-string-truncated-width@3.0.3:
+    resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
+
+  fast-string-width@3.0.2:
+    resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
+
   fast-uri@3.1.0:
     resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
 
+  fast-wrap-ansi@0.2.0:
+    resolution: {integrity: sha512-rLV8JHxTyhVmFYhBJuMujcrHqOT2cnO5Zxj37qROj23CP39GXubJRBUFF0z8KFK77Uc0SukZUf7JZhsVEQ6n8w==}
+
   fast-xml-builder@1.1.3:
     resolution: {integrity: sha512-1o60KoFw2+LWKQu3IdcfcFlGTW4dpqEWmjhYec6H82AYZU2TVBXep6tMl8Z1Y+wM+ZrzCwe3BZ9Vyd9N2rIvmg==}
 
@@ -4986,6 +5228,14 @@ packages:
       picomatch:
         optional: true
 
+  fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
   file-type@16.5.4:
     resolution: {integrity: sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==}
     engines: {node: '>=10'}
@@ -5028,6 +5278,10 @@ packages:
     resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
     engines: {node: '>= 6'}
 
+  formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+
   forwarded-parse@2.1.2:
     resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
 
@@ -5114,10 +5368,18 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
+  get-east-asian-width@1.5.0:
+    resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
+    engines: {node: '>=18'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-own-enumerable-keys@1.0.0:
+    resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
+    engines: {node: '>=14.16'}
+
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -5126,6 +5388,14 @@ packages:
     resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
     engines: {node: '>=8'}
 
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
   get-tsconfig@4.13.1:
     resolution: {integrity: sha512-EoY1N2xCn44xU6750Sx7OjOIT59FkmstNc3X6y5xpz7D5cBtZRe/3pSlTkDJgqsOk3WwZPkWfonhhUJfttQo3w==}
 
@@ -5189,6 +5459,10 @@ packages:
     resolution: {integrity: sha512-7arRRoOtOh9UwMwANZ475kJrWV6P3/EGNooeHlY0/SwZv4t3ZZ3Uiz9cAXK8Zg9xSdgmm8T21kx6n7SZaWvOcw==}
     engines: {node: ^12.20.0 || >=14.13.1}
 
+  graphql@16.13.2:
+    resolution: {integrity: sha512-5bJ+nf/UCpAjHM8i06fl7eLyVC9iuNAjm9qzkiu2ZGhM0VscSvS6WDPfAwkdkBuoXGM9FJSbKl6wylMwP9Ktig==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
   hachure-fill@0.5.2:
     resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
 
@@ -5238,6 +5512,9 @@ packages:
   hastscript@9.0.1:
     resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
 
+  headers-polyfill@5.0.1:
+    resolution: {integrity: sha512-1TJ6Fih/b8h5TIcv+1+Hw0PDQWJTKDKzFZzcKOiW1wJza3XoAQlkCuXLbymPYB8+ZQyw8mHvdw560e8zVFIWyA==}
+
   homedir-polyfill@1.0.3:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
@@ -5310,6 +5587,14 @@ packages:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
   humanize-ms@1.2.1:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
 
@@ -5329,12 +5614,20 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
   image-q@4.0.0:
     resolution: {integrity: sha512-PfJGVgIfKQJuq3s0tTDOKtztksibuUEbJQIYT3by6wctQo+Rdlh7ef4evJ5NCdxY4CfMbvFkocEwbl4BF8RlJw==}
 
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
   import-in-the-middle@2.0.6:
     resolution: {integrity: sha512-3vZV3jX0XRFW3EJDTwzWoZa+RH1b8eTTx6YOCjglrLyPuepwoBti1k3L2dKwdCUrnVEfc5CuRuGstaC/uQJJaw==}
 
@@ -5380,6 +5673,9 @@ packages:
   is-alphanumerical@2.0.1:
     resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
 
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -5435,6 +5731,10 @@ packages:
     resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
     engines: {node: '>=8'}
 
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
   is-lambda@1.0.1:
     resolution: {integrity: sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==}
 
@@ -5445,6 +5745,10 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-obj@3.0.0:
+    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
+    engines: {node: '>=12'}
+
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -5455,14 +5759,30 @@ packages:
   is-property@1.0.2:
     resolution: {integrity: sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==}
 
+  is-regexp@3.1.0:
+    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
+    engines: {node: '>=12'}
+
   is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
 
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
   is-unicode-supported@0.1.0:
     resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
     engines: {node: '>=10'}
 
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
   is-what@4.1.16:
     resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
     engines: {node: '>=12.13'}
@@ -5485,6 +5805,10 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  isexe@3.1.5:
+    resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
+    engines: {node: '>=18'}
+
   isomorphic-ws@5.0.0:
     resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
     peerDependencies:
@@ -5538,6 +5862,9 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -5580,6 +5907,14 @@ packages:
   khroma@2.1.0:
     resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
 
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
   kysely@0.28.15:
     resolution: {integrity: sha512-r2clcf7HLWvDXaVUEvQymXJY4i3bSOIV3xsL/Upy3ZfSv5HeKsk9tsqbBptLvth5qHEIhxeHTA2jNLyQABkLBA==}
     engines: {node: '>=20.0.0'}
@@ -5739,6 +6074,10 @@ packages:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
 
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
+
   long@5.3.2:
     resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
 
@@ -5870,6 +6209,9 @@ packages:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
 
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -5995,6 +6337,10 @@ packages:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   mimic-response@1.0.1:
     resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
     engines: {node: '>=4'}
@@ -6093,6 +6439,20 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  msw@2.14.2:
+    resolution: {integrity: sha512-D2bTe0tpuf9nw4DA39wFaqUD/hRPKj0DKpo2lAqu+A47Ifg4+h0hbfn6QxVOsiUY2uhgEN6TTpGSHDsc+ysYNg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      typescript: '>= 4.8.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  mute-stream@3.0.0:
+    resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
   mysql2@3.17.4:
     resolution: {integrity: sha512-RnfuK5tyIuaiPMWOCTTl4vQX/mQXqSA8eoIbwvWccadvPGvh+BYWWVecInMS5s7wcLUkze8LqJzwB/+A4uwuAA==}
     engines: {node: '>= 8.0'}
@@ -6191,6 +6551,11 @@ packages:
   node-api-version@0.2.1:
     resolution: {integrity: sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==}
 
+  node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
+
   node-fetch-native@1.6.7:
     resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
 
@@ -6203,6 +6568,10 @@ packages:
       encoding:
         optional: true
 
+  node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   node-gyp@9.4.1:
     resolution: {integrity: sha512-OQkWKbjQKbGkMf/xqI1jjy3oCTgMKJac58G2+bjZb3fza6gW2YrCSdMQYaoTb70crvE//Gngr4f0AgVHmqHvBQ==}
     engines: {node: ^12.13 || ^14.13 || >=16}
@@ -6228,6 +6597,14 @@ packages:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
 
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
   npmlog@6.0.2:
     resolution: {integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -6254,6 +6631,10 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
+  object-treeify@1.1.33:
+    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
+    engines: {node: '>= 10'}
+
   ohash@2.0.11:
     resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
 
@@ -6275,6 +6656,10 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
   open@11.0.0:
     resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
     engines: {node: '>=20'}
@@ -6286,6 +6671,13 @@ packages:
     resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
     engines: {node: '>=10'}
 
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
+
+  outvariant@1.4.3:
+    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
+
   p-cancelable@2.1.1:
     resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
     engines: {node: '>=8'}
@@ -6335,6 +6727,10 @@ packages:
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
   parse-bmfont-ascii@1.0.6:
     resolution: {integrity: sha512-U4RrVsUFCleIOBsIGYOMKjn9PavsGOXxbvYGtMOEfnId0SVNsgehXh1DxUdVPLoxd5mvcEtvmKs2Mmf0Mpa1ZA==}
 
@@ -6347,6 +6743,14 @@ packages:
   parse-entities@4.0.2:
     resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
 
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
   parse-passwd@1.0.0:
     resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
     engines: {node: '>=0.10.0'}
@@ -6358,6 +6762,9 @@ packages:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-data-parser@0.1.0:
     resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
 
@@ -6377,6 +6784,10 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -6384,6 +6795,9 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
   path-to-regexp@8.4.2:
     resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
 
@@ -6415,6 +6829,10 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
   pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
@@ -6537,6 +6955,10 @@ packages:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -6556,6 +6978,10 @@ packages:
     resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
     engines: {node: '>=20'}
 
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
   prismjs@1.30.0:
     resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
     engines: {node: '>=6'}
@@ -6586,6 +7012,10 @@ packages:
     resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
     engines: {node: '>=10'}
 
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
@@ -6727,6 +7157,10 @@ packages:
     resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
     engines: {node: '>= 12.13.0'}
 
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
   rehype-harden@1.1.8:
     resolution: {integrity: sha512-Qn7vR1xrf6fZCrkm9TDWi/AB4ylrHy+jqsNm1EHOAmbARYA6gsnVJBq/sdBh6kmT4NEZxH5vgIjrscefJAOXcw==}
 
@@ -6770,9 +7204,16 @@ packages:
   reselect@4.1.8:
     resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==}
 
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
   resolve-alpn@1.2.1:
     resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
 
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
   resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
@@ -6792,6 +7233,10 @@ packages:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
 
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
   retry@0.12.0:
     resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
     engines: {node: '>= 4'}
@@ -6800,6 +7245,9 @@ packages:
     resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
     engines: {node: '>= 4'}
 
+  rettime@0.11.11:
+    resolution: {integrity: sha512-ILJRqVWBCTlg9r42fFgwVZx1gnFAcQF8mRoMkbgQfIrjEDf9nbBFDFx00oloOa+Q869FUtaYDXZvEfnecQSCoQ==}
+
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -6924,6 +7372,10 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
+  shadcn@4.6.0:
+    resolution: {integrity: sha512-4XeMwFf8ZZxmqQQp+U+Nsq2M+cY4Da8Joo/EaMdHVc4uVuWSTJoeidlZ3gDjyxXCjYB1FLcxYwR4lYQAH8emOg==}
+    hasBin: true
+
   sharp@0.34.5:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -6971,6 +7423,9 @@ packages:
     resolution: {integrity: sha512-kWJDCr9EWtZ+/EYYM5MareWj2cRnZGF93YDNpH4jQiHB+hBIZnfPFSQiVMzZOdk+zXWqTZ/9fTeQNu2DqeiudA==}
     engines: {node: '>=20.12.2'}
 
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
   slice-ansi@3.0.0:
     resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==}
     engines: {node: '>=8'}
@@ -7046,6 +7501,10 @@ packages:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
   stream-browserify@3.0.0:
     resolution: {integrity: sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==}
 
@@ -7059,6 +7518,9 @@ packages:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
 
+  strict-event-emitter@0.5.1:
+    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -7067,6 +7529,10 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
@@ -7076,6 +7542,10 @@ packages:
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
+  stringify-object@5.0.0:
+    resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
+    engines: {node: '>=14.16'}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -7084,6 +7554,18 @@ packages:
     resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
     engines: {node: '>=12'}
 
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
   strnum@2.2.0:
     resolution: {integrity: sha512-Y7Bj8XyJxnPAORMZj/xltsfo55uOiyHcU2tnAVzHUnSJR/KsEX+9RoDeXEnsXtl/CX4fAcrt64gZ13aGaWPeBg==}
 
@@ -7154,6 +7636,10 @@ packages:
   tabbable@6.4.0:
     resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
 
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
@@ -7202,6 +7688,9 @@ packages:
     resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
     engines: {node: '>=18'}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
   tiny-typed-emitter@2.1.0:
     resolution: {integrity: sha512-qVtvMxeXbVej0cQWKqVSSAHmKZEHAvxdF8HEUBFWts8h+xEo5m/lEiPakuyZ3BnCBjOD8i24kzNOiOLLgsSxhA==}
 
@@ -7219,6 +7708,13 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tldts-core@7.0.30:
+    resolution: {integrity: sha512-uiHN8PIB1VmWyS98eZYja4xzlYqeFZVjb4OuYlJQnZAuJhMw4PbKQOKgHKhBdJR3FE/t5mUQ1Kd80++B+qhD1Q==}
+
+  tldts@7.0.30:
+    resolution: {integrity: sha512-ELrFxuqsDdHUwoh0XxDbxuLD3Wnz49Z57IFvTtvWy1hJdcMZjXLIuonjilCiWHlT2GbE4Wlv1wKVTzDFnXH1aw==}
+    hasBin: true
+
   tmp-promise@3.0.3:
     resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
 
@@ -7238,6 +7734,10 @@ packages:
     resolution: {integrity: sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==}
     engines: {node: '>=10'}
 
+  tough-cookie@6.0.1:
+    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
+    engines: {node: '>=16'}
+
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
@@ -7261,6 +7761,13 @@ packages:
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
+  ts-morph@26.0.0:
+    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -7292,10 +7799,17 @@ packages:
     resolution: {integrity: sha512-Rb4qk5YT8RUwwdXtkLpkVhNEe/lor6+WV7S5tTlLpxSz6MjV5Qi8jGNn4gS6NAvrYGA/rNrE6YUQM85sCZUDbQ==}
     hasBin: true
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   type-fest@0.13.1:
     resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
     engines: {node: '>=10'}
 
+  type-fest@5.6.0:
+    resolution: {integrity: sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA==}
+    engines: {node: '>=20'}
+
   type-is@2.0.1:
     resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
     engines: {node: '>= 0.6'}
@@ -7329,10 +7843,17 @@ packages:
   undici-types@7.18.2:
     resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
 
+  undici-types@7.19.2:
+    resolution: {integrity: sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==}
+
   undici@5.29.0:
     resolution: {integrity: sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==}
     engines: {node: '>=14.0'}
 
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
@@ -7371,6 +7892,9 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  until-async@3.0.2:
+    resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
+
   unzip-crx-3@0.2.0:
     resolution: {integrity: sha512-0+JiUq/z7faJ6oifVB5nSwt589v1KCduqIJupNVDoWSXZtWDmjDGO3RAEOvwJ07w90aoXoP4enKsR7ecMrJtWQ==}
 
@@ -7406,6 +7930,10 @@ packages:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
+  validate-npm-package-name@7.0.2:
+    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -7550,6 +8078,10 @@ packages:
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
+  web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+
   web-tree-sitter@0.25.10:
     resolution: {integrity: sha512-Y09sF44/13XvgVKgO2cNDw5rGk6s26MgoZPXLESvMXeefBf7i6/73eFurre0IsTW6E14Y0ArIzhUMmjoc7xyzA==}
     peerDependencies:
@@ -7569,6 +8101,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   wide-align@1.1.5:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
 
@@ -7655,6 +8192,14 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  yocto-spinner@1.2.0:
+    resolution: {integrity: sha512-Yw0hUB6UA3o4YUgKy3oSe9a4cxoaZ9sBfYDw+JSxo6Id0KoJGoxzPA24qqUXYKBWABs/zDSGTz9kww7t3F0XGw==}
+    engines: {node: '>=18.19'}
+
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
   yoga-layout@3.2.1:
     resolution: {integrity: sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==}
 
@@ -8303,7 +8848,20 @@ snapshots:
       '@babel/helper-optimise-call-expression': 7.27.1
       '@babel/helper-replace-supers': 7.28.6(@babel/core@7.28.0)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.29.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -8312,7 +8870,7 @@ snapshots:
 
   '@babel/helper-member-expression-to-functions@7.28.5':
     dependencies:
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
       '@babel/types': 7.29.0
     transitivePeerDependencies:
       - supports-color
@@ -8366,19 +8924,28 @@ snapshots:
       '@babel/core': 7.28.0
       '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.6
+      '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+  '@babel/helper-replace-supers@7.28.6(@babel/core@7.29.0)':
     dependencies:
-      '@babel/traverse': 7.28.6
-      '@babel/types': 7.29.0
+      '@babel/core': 7.29.0
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-string-parser@7.27.1': {}
-
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.27.1': {}
+
   '@babel/helper-validator-identifier@7.28.5': {}
 
   '@babel/helper-validator-option@7.27.1': {}
@@ -8406,11 +8973,21 @@ snapshots:
       '@babel/core': 7.28.6
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.28.0)':
     dependencies:
       '@babel/core': 7.28.0
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-transform-modules-commonjs@7.28.6(@babel/core@7.28.0)':
     dependencies:
       '@babel/core': 7.28.0
@@ -8419,6 +8996,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-modules-commonjs@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-plugin-utils': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -8440,6 +9025,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/preset-typescript@7.27.1(@babel/core@7.28.0)':
     dependencies:
       '@babel/core': 7.28.0
@@ -8451,6 +9047,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/preset-typescript@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-transform-modules-commonjs': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/runtime@7.29.2': {}
 
   '@babel/template@7.28.6':
@@ -8493,6 +9100,29 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@base-ui/react@1.4.1(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@base-ui/utils': 0.2.8(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@base-ui/utils@0.2.8(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      reselect: 5.1.1
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@better-auth/api-key@1.5.6(@better-auth/core@1.5.6(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.0)(better-call@1.3.2(zod@4.3.6))(jose@6.1.3)(kysely@0.28.15)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(better-auth@1.5.6(@opentelemetry/api@1.9.0)(drizzle-kit@0.31.9)(drizzle-orm@0.45.1(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.6)(kysely@0.28.15)(mysql2@3.17.4))(mysql2@3.17.4)(next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.10))':
     dependencies:
       '@better-auth/core': 1.5.6(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.0)(better-call@1.3.2(zod@4.3.6))(jose@6.1.3)(kysely@0.28.15)(nanostores@1.2.0)
@@ -8712,8 +9342,25 @@ snapshots:
   '@dimforge/rapier2d-simd-compat@0.17.3':
     optional: true
 
+  '@dotenvx/dotenvx@1.64.0':
+    dependencies:
+      commander: 11.1.0
+      dotenv: 17.3.1
+      eciesjs: 0.4.18
+      execa: 5.1.1
+      fdir: 6.5.0(picomatch@4.0.4)
+      ignore: 5.3.2
+      object-treeify: 1.1.33
+      picomatch: 4.0.4
+      which: 4.0.0
+      yocto-spinner: 1.2.0
+
   '@drizzle-team/brocli@0.10.2': {}
 
+  '@ecies/ciphers@0.2.6(@noble/ciphers@1.3.0)':
+    dependencies:
+      '@noble/ciphers': 1.3.0
+
   '@electron/asar@3.4.1':
     dependencies:
       commander: 5.1.0
@@ -9049,6 +9696,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@fontsource-variable/geist@5.2.8': {}
+
+  '@fontsource-variable/ibm-plex-sans@5.2.8': {}
+
   '@gar/promisify@1.1.3': {}
 
   '@grammyjs/types@3.23.0': {}
@@ -9255,6 +9906,33 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
+  '@inquirer/ansi@2.0.5': {}
+
+  '@inquirer/confirm@6.0.12(@types/node@25.6.0)':
+    dependencies:
+      '@inquirer/core': 11.1.9(@types/node@25.6.0)
+      '@inquirer/type': 4.0.5(@types/node@25.6.0)
+    optionalDependencies:
+      '@types/node': 25.6.0
+
+  '@inquirer/core@11.1.9(@types/node@25.6.0)':
+    dependencies:
+      '@inquirer/ansi': 2.0.5
+      '@inquirer/figures': 2.0.5
+      '@inquirer/type': 4.0.5(@types/node@25.6.0)
+      cli-width: 4.1.0
+      fast-wrap-ansi: 0.2.0
+      mute-stream: 3.0.0
+      signal-exit: 4.1.0
+    optionalDependencies:
+      '@types/node': 25.6.0
+
+  '@inquirer/figures@2.0.5': {}
+
+  '@inquirer/type@4.0.5(@types/node@25.6.0)':
+    optionalDependencies:
+      '@types/node': 25.6.0
+
   '@isaacs/balanced-match@4.0.1': {}
 
   '@isaacs/brace-expansion@5.0.0':
@@ -9684,6 +10362,28 @@ snapshots:
     dependencies:
       langium: 4.2.1
 
+  '@modelcontextprotocol/sdk@1.29.0(zod@3.25.76)':
+    dependencies:
+      '@hono/node-server': 1.19.11(hono@4.12.12)
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
+      content-type: 1.0.5
+      cors: 2.8.6
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.0.6
+      express: 5.2.1
+      express-rate-limit: 8.4.1(express@5.2.1)
+      hono: 4.12.12
+      jose: 6.1.3
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.1
+      raw-body: 3.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - supports-color
+
   '@modelcontextprotocol/sdk@1.29.0(zod@4.3.6)':
     dependencies:
       '@hono/node-server': 1.19.11(hono@4.12.12)
@@ -9706,6 +10406,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@mswjs/interceptors@0.41.8':
+    dependencies:
+      '@open-draft/deferred-promise': 2.2.0
+      '@open-draft/logger': 0.3.0
+      '@open-draft/until': 2.1.0
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      strict-event-emitter: 0.5.1
+
   '@next/env@14.2.35': {}
 
   '@next/env@16.1.6': {}
@@ -9787,8 +10496,16 @@ snapshots:
   '@next/swc-win32-x64-msvc@16.2.1':
     optional: true
 
+  '@noble/ciphers@1.3.0': {}
+
   '@noble/ciphers@2.1.1': {}
 
+  '@noble/curves@1.9.7':
+    dependencies:
+      '@noble/hashes': 1.8.0
+
+  '@noble/hashes@1.8.0': {}
+
   '@noble/hashes@2.0.1': {}
 
   '@nodelib/fs.scandir@2.1.5':
@@ -9813,6 +10530,17 @@ snapshots:
       mkdirp: 1.0.4
       rimraf: 3.0.2
 
+  '@open-draft/deferred-promise@2.2.0': {}
+
+  '@open-draft/deferred-promise@3.0.0': {}
+
+  '@open-draft/logger@0.3.0':
+    dependencies:
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+
+  '@open-draft/until@2.1.0': {}
+
   '@opencode-ai/sdk@1.4.9':
     dependencies:
       cross-spawn: 7.0.6
@@ -10245,8 +10973,12 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.55.1':
     optional: true
 
+  '@sec-ant/readable-stream@0.4.1': {}
+
   '@sindresorhus/is@4.6.0': {}
 
+  '@sindresorhus/merge-streams@4.0.0': {}
+
   '@slack/logger@4.0.0':
     dependencies:
       '@types/node': 20.12.12
@@ -10735,12 +11467,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
 
-  '@tailwindcss/vite@4.1.18(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tailwindcss/vite@4.1.18(vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@tailwindcss/node': 4.1.18
       '@tailwindcss/oxide': 4.1.18
       tailwindcss: 4.1.18
-      vite: 6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   '@tanstack/query-core@5.96.2': {}
 
@@ -10841,6 +11573,12 @@ snapshots:
 
   '@tootallnate/once@2.0.0': {}
 
+  '@ts-morph/common@0.27.0':
+    dependencies:
+      fast-glob: 3.3.3
+      minimatch: 10.1.1
+      path-browserify: 1.0.1
+
   '@turbo/darwin-64@2.8.20':
     optional: true
 
@@ -11056,6 +11794,10 @@ snapshots:
     dependencies:
       undici-types: 7.18.2
 
+  '@types/node@25.6.0':
+    dependencies:
+      undici-types: 7.19.2
+
   '@types/plist@3.0.5':
     dependencies:
       '@types/node': 20.12.12
@@ -11087,6 +11829,12 @@ snapshots:
 
   '@types/retry@0.12.0': {}
 
+  '@types/set-cookie-parser@2.4.10':
+    dependencies:
+      '@types/node': 25.6.0
+
+  '@types/statuses@2.0.6': {}
+
   '@types/trusted-types@2.0.7':
     optional: true
 
@@ -11094,6 +11842,8 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
+  '@types/validate-npm-package-name@4.0.2': {}
+
   '@types/verror@1.10.11':
     optional: true
 
@@ -11123,7 +11873,7 @@ snapshots:
 
   '@vercel/oidc@3.1.0': {}
 
-  '@vitejs/plugin-react@5.2.0(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitejs/plugin-react@5.2.0(vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
@@ -11131,11 +11881,11 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-rc.3
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: 6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@5.2.0(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitejs/plugin-react@5.2.0(vite@7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
@@ -11143,7 +11893,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-rc.3
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: 7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -11329,6 +12079,10 @@ snapshots:
   assert-plus@1.0.0:
     optional: true
 
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
   astral-regex@2.0.0:
     optional: true
 
@@ -11518,7 +12272,7 @@ snapshots:
 
   browserslist@4.28.1:
     dependencies:
-      baseline-browser-mapping: 2.9.14
+      baseline-browser-mapping: 2.10.11
       caniuse-lite: 1.0.30001764
       electron-to-chromium: 1.5.267
       node-releases: 2.0.27
@@ -11680,6 +12434,8 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.3.0
 
+  callsites@3.1.0: {}
+
   camelcase-css@2.0.1: {}
 
   caniuse-lite@1.0.30001764: {}
@@ -11691,6 +12447,8 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  chalk@5.6.2: {}
+
   character-entities-html4@2.1.0: {}
 
   character-entities-legacy@3.0.0: {}
@@ -11749,12 +12507,20 @@ snapshots:
 
   cjs-module-lexer@2.2.0: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   clean-stack@2.2.0: {}
 
   cli-cursor@3.1.0:
     dependencies:
       restore-cursor: 3.1.0
 
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
   cli-spinners@2.9.2: {}
 
   cli-truncate@2.1.0:
@@ -11763,6 +12529,8 @@ snapshots:
       string-width: 4.2.3
     optional: true
 
+  cli-width@4.1.0: {}
+
   client-only@0.0.1: {}
 
   cliui@8.0.1:
@@ -11779,6 +12547,8 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  code-block-writer@13.0.3: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -11793,6 +12563,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@11.1.0: {}
+
   commander@12.1.0: {}
 
   commander@14.0.3: {}
@@ -11859,6 +12631,15 @@ snapshots:
     dependencies:
       layout-base: 2.0.1
 
+  cosmiconfig@9.0.1(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
   crc-32@1.2.2: {}
 
   crc32-stream@4.0.3:
@@ -12067,6 +12848,8 @@ snapshots:
       d3: 7.9.0
       lodash-es: 4.18.1
 
+  data-uri-to-buffer@4.0.1: {}
+
   dayjs@1.11.20: {}
 
   debug@4.4.3:
@@ -12081,6 +12864,10 @@ snapshots:
     dependencies:
       mimic-response: 3.1.0
 
+  dedent@1.7.2: {}
+
+  deepmerge@4.3.1: {}
+
   default-browser-id@5.0.1: {}
 
   default-browser@5.5.0:
@@ -12212,6 +12999,13 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  eciesjs@0.4.18:
+    dependencies:
+      '@ecies/ciphers': 0.2.6(@noble/ciphers@1.3.0)
+      '@noble/ciphers': 1.3.0
+      '@noble/curves': 1.9.7
+      '@noble/hashes': 1.8.0
+
   ee-first@1.1.1: {}
 
   ejs@3.1.10:
@@ -12285,6 +13079,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  emoji-regex@10.6.0: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
@@ -12311,6 +13107,10 @@ snapshots:
 
   err-code@2.0.3: {}
 
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -12428,6 +13228,8 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
+  esprima@4.0.1: {}
+
   estree-util-is-identifier-name@3.0.0: {}
 
   etag@1.8.1: {}
@@ -12446,6 +13248,33 @@ snapshots:
     dependencies:
       eventsource-parser: 3.0.6
 
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@9.6.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
   exif-parser@0.1.12: {}
 
   expand-tilde@2.0.2:
@@ -12521,8 +13350,18 @@ snapshots:
 
   fast-json-stable-stringify@2.1.0: {}
 
+  fast-string-truncated-width@3.0.3: {}
+
+  fast-string-width@3.0.2:
+    dependencies:
+      fast-string-truncated-width: 3.0.3
+
   fast-uri@3.1.0: {}
 
+  fast-wrap-ansi@0.2.0:
+    dependencies:
+      fast-string-width: 3.0.2
+
   fast-xml-builder@1.1.3:
     dependencies:
       path-expression-matcher: 1.1.3
@@ -12544,6 +13383,19 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  fetch-blob@3.2.0:
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
   file-type@16.5.4:
     dependencies:
       readable-web-to-node-stream: 3.0.4
@@ -12598,6 +13450,10 @@ snapshots:
       hasown: 2.0.2
       mime-types: 2.1.35
 
+  formdata-polyfill@4.0.10:
+    dependencies:
+      fetch-blob: 3.2.0
+
   forwarded-parse@2.1.2: {}
 
   forwarded@0.2.0: {}
@@ -12677,6 +13533,8 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
+  get-east-asian-width@1.5.0: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -12690,6 +13548,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-own-enumerable-keys@1.0.0: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -12699,6 +13559,13 @@ snapshots:
     dependencies:
       pump: 3.0.4
 
+  get-stream@6.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
   get-tsconfig@4.13.1:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -12806,6 +13673,8 @@ snapshots:
       - encoding
       - supports-color
 
+  graphql@16.13.2: {}
+
   hachure-fill@0.5.2: {}
 
   has-flag@4.0.0: {}
@@ -12906,6 +13775,11 @@ snapshots:
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
 
+  headers-polyfill@5.0.1:
+    dependencies:
+      '@types/set-cookie-parser': 2.4.10
+      set-cookie-parser: 3.1.0
+
   homedir-polyfill@1.0.3:
     dependencies:
       parse-passwd: 1.0.0
@@ -12992,6 +13866,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  human-signals@2.1.0: {}
+
+  human-signals@8.0.1: {}
+
   humanize-ms@1.2.1:
     dependencies:
       ms: 2.1.3
@@ -13012,12 +13890,19 @@ snapshots:
 
   ieee754@1.2.1: {}
 
+  ignore@5.3.2: {}
+
   image-q@4.0.0:
     dependencies:
       '@types/node': 16.9.1
 
   immediate@3.0.6: {}
 
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
   import-in-the-middle@2.0.6:
     dependencies:
       acorn: 8.16.0
@@ -13055,6 +13940,8 @@ snapshots:
       is-alphabetical: 2.0.1
       is-decimal: 2.0.1
 
+  is-arrayish@0.2.1: {}
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -13093,22 +13980,34 @@ snapshots:
 
   is-interactive@1.0.0: {}
 
+  is-interactive@2.0.0: {}
+
   is-lambda@1.0.1: {}
 
   is-node-process@1.2.0: {}
 
   is-number@7.0.0: {}
 
+  is-obj@3.0.0: {}
+
   is-plain-obj@4.1.0: {}
 
   is-promise@4.0.0: {}
 
   is-property@1.0.2: {}
 
+  is-regexp@3.1.0: {}
+
   is-stream@2.0.1: {}
 
+  is-stream@4.0.1: {}
+
   is-unicode-supported@0.1.0: {}
 
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
   is-what@4.1.16: {}
 
   is-wsl@3.1.1:
@@ -13123,6 +14022,8 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  isexe@3.1.5: {}
+
   isomorphic-ws@5.0.0(ws@8.19.0):
     dependencies:
       ws: 8.19.0
@@ -13191,6 +14092,8 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
+  json-parse-even-better-errors@2.3.1: {}
+
   json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
@@ -13233,6 +14136,10 @@ snapshots:
 
   khroma@2.1.0: {}
 
+  kleur@3.0.3: {}
+
+  kleur@4.1.5: {}
+
   kysely@0.28.15: {}
 
   langium@4.2.1:
@@ -13352,6 +14259,11 @@ snapshots:
       chalk: 4.1.2
       is-unicode-supported: 0.1.0
 
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
+
   long@5.3.2: {}
 
   longest-streak@3.1.0: {}
@@ -13590,6 +14502,8 @@ snapshots:
 
   merge-descriptors@2.0.0: {}
 
+  merge-stream@2.0.0: {}
+
   merge2@1.4.1: {}
 
   mermaid@11.14.0:
@@ -13830,6 +14744,8 @@ snapshots:
 
   mimic-fn@2.1.0: {}
 
+  mimic-function@5.0.1: {}
+
   mimic-response@1.0.1: {}
 
   mimic-response@3.1.0: {}
@@ -13922,6 +14838,33 @@ snapshots:
 
   ms@2.1.3: {}
 
+  msw@2.14.2(@types/node@25.6.0)(typescript@5.9.3):
+    dependencies:
+      '@inquirer/confirm': 6.0.12(@types/node@25.6.0)
+      '@mswjs/interceptors': 0.41.8
+      '@open-draft/deferred-promise': 3.0.0
+      '@types/statuses': 2.0.6
+      cookie: 1.1.1
+      graphql: 16.13.2
+      headers-polyfill: 5.0.1
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      path-to-regexp: 6.3.0
+      picocolors: 1.1.1
+      rettime: 0.11.11
+      statuses: 2.0.2
+      strict-event-emitter: 0.5.1
+      tough-cookie: 6.0.1
+      type-fest: 5.6.0
+      until-async: 3.0.2
+      yargs: 17.7.2
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  mute-stream@3.0.0: {}
+
   mysql2@3.17.4:
     dependencies:
       aws-ssl-profiles: 1.1.2
@@ -14041,6 +14984,8 @@ snapshots:
     dependencies:
       semver: 7.7.4
 
+  node-domexception@1.0.0: {}
+
   node-fetch-native@1.6.7: {}
 
   node-fetch@2.7.0(encoding@0.1.13):
@@ -14049,6 +14994,12 @@ snapshots:
     optionalDependencies:
       encoding: 0.1.13
 
+  node-fetch@3.3.2:
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+
   node-gyp@9.4.1:
     dependencies:
       env-paths: 2.2.1
@@ -14078,6 +15029,15 @@ snapshots:
 
   normalize-url@6.1.0: {}
 
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
   npmlog@6.0.2:
     dependencies:
       are-we-there-yet: 3.0.1
@@ -14100,6 +15060,8 @@ snapshots:
   object-keys@1.1.1:
     optional: true
 
+  object-treeify@1.1.33: {}
+
   ohash@2.0.11: {}
 
   omggif@1.0.10: {}
@@ -14118,6 +15080,10 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
   open@11.0.0:
     dependencies:
       default-browser: 5.5.0
@@ -14141,6 +15107,20 @@ snapshots:
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
 
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+
+  outvariant@1.4.3: {}
+
   p-cancelable@2.1.1: {}
 
   p-finally@1.0.0: {}
@@ -14183,6 +15163,10 @@ snapshots:
 
   pako@1.0.11: {}
 
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
   parse-bmfont-ascii@1.0.6: {}
 
   parse-bmfont-binary@1.0.6: {}
@@ -14202,6 +15186,15 @@ snapshots:
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
 
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-ms@4.0.0: {}
+
   parse-passwd@1.0.0: {}
 
   parse5@7.3.0:
@@ -14210,6 +15203,8 @@ snapshots:
 
   parseurl@1.3.3: {}
 
+  path-browserify@1.0.1: {}
+
   path-data-parser@0.1.0: {}
 
   path-exists@3.0.0: {}
@@ -14220,6 +15215,8 @@ snapshots:
 
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   path-parse@1.0.7: {}
 
   path-scurry@1.11.1:
@@ -14227,6 +15224,8 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
+  path-to-regexp@6.3.0: {}
+
   path-to-regexp@8.4.2: {}
 
   pathe@2.0.3: {}
@@ -14245,6 +15244,8 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  picomatch@4.0.4: {}
+
   pify@2.3.0: {}
 
   pino-abstract-transport@2.0.0:
@@ -14359,6 +15360,11 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-selector-parser@7.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-value-parser@4.2.0: {}
 
   postcss@8.4.31:
@@ -14381,6 +15387,10 @@ snapshots:
 
   powershell-utils@0.1.0: {}
 
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
   prismjs@1.30.0: {}
 
   process-nextick-args@2.0.1: {}
@@ -14398,6 +15408,11 @@ snapshots:
       err-code: 2.0.3
       retry: 0.12.0
 
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
   property-information@7.1.0: {}
 
   protobufjs@7.5.4:
@@ -14563,6 +15578,14 @@ snapshots:
 
   real-require@0.2.0: {}
 
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
   rehype-harden@1.1.8:
     dependencies:
       unist-util-visit: 5.1.0
@@ -14631,8 +15654,12 @@ snapshots:
 
   reselect@4.1.8: {}
 
+  reselect@5.1.1: {}
+
   resolve-alpn@1.2.1: {}
 
+  resolve-from@4.0.0: {}
+
   resolve-from@5.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -14652,10 +15679,17 @@ snapshots:
       onetime: 5.1.2
       signal-exit: 3.0.7
 
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
   retry@0.12.0: {}
 
   retry@0.13.1: {}
 
+  rettime@0.11.11: {}
+
   reusify@1.1.0: {}
 
   rimraf@3.0.2:
@@ -14809,6 +15843,49 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
+  shadcn@4.6.0(@types/node@25.6.0)(typescript@5.9.3):
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.2
+      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
+      '@babel/preset-typescript': 7.27.1(@babel/core@7.29.0)
+      '@dotenvx/dotenvx': 1.64.0
+      '@modelcontextprotocol/sdk': 1.29.0(zod@3.25.76)
+      '@types/validate-npm-package-name': 4.0.2
+      browserslist: 4.28.1
+      commander: 14.0.3
+      cosmiconfig: 9.0.1(typescript@5.9.3)
+      dedent: 1.7.2
+      deepmerge: 4.3.1
+      diff: 8.0.2
+      execa: 9.6.1
+      fast-glob: 3.3.3
+      fs-extra: 11.3.4
+      fuzzysort: 3.1.0
+      https-proxy-agent: 7.0.6
+      kleur: 4.1.5
+      msw: 2.14.2(@types/node@25.6.0)(typescript@5.9.3)
+      node-fetch: 3.3.2
+      open: 11.0.0
+      ora: 8.2.0
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+      prompts: 2.4.2
+      recast: 0.23.11
+      stringify-object: 5.0.0
+      tailwind-merge: 3.5.0
+      ts-morph: 26.0.0
+      tsconfig-paths: 4.2.0
+      validate-npm-package-name: 7.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - typescript
+
   sharp@0.34.5:
     dependencies:
       '@img/colour': 1.1.0
@@ -14886,6 +15963,8 @@ snapshots:
 
   simple-xml-to-json@1.2.3: {}
 
+  sisteransi@1.0.5: {}
+
   slice-ansi@3.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -14965,6 +16044,8 @@ snapshots:
 
   statuses@2.0.2: {}
 
+  stdin-discarder@0.2.2: {}
+
   stream-browserify@3.0.0:
     dependencies:
       inherits: 2.0.4
@@ -14995,6 +16076,8 @@ snapshots:
 
   streamsearch@1.1.0: {}
 
+  strict-event-emitter@0.5.1: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -15007,6 +16090,12 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.2.0
 
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.5.0
+      strip-ansi: 7.2.0
+
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -15020,6 +16109,12 @@ snapshots:
       character-entities-html4: 2.1.0
       character-entities-legacy: 3.0.0
 
+  stringify-object@5.0.0:
+    dependencies:
+      get-own-enumerable-keys: 1.0.0
+      is-obj: 3.0.0
+      is-regexp: 3.1.0
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -15028,6 +16123,12 @@ snapshots:
     dependencies:
       ansi-regex: 6.2.2
 
+  strip-bom@3.0.0: {}
+
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
   strnum@2.2.0: {}
 
   strtok3@6.3.0:
@@ -15087,6 +16188,8 @@ snapshots:
 
   tabbable@6.4.0: {}
 
+  tagged-tag@1.0.0: {}
+
   tailwind-merge@3.5.0: {}
 
   tailwindcss@3.4.7:
@@ -15167,6 +16270,8 @@ snapshots:
 
   throttleit@2.1.0: {}
 
+  tiny-invariant@1.3.3: {}
+
   tiny-typed-emitter@2.1.0: {}
 
   tinycolor2@1.6.0: {}
@@ -15180,6 +16285,12 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tldts-core@7.0.30: {}
+
+  tldts@7.0.30:
+    dependencies:
+      tldts-core: 7.0.30
+
   tmp-promise@3.0.3:
     dependencies:
       tmp: 0.2.5
@@ -15197,6 +16308,10 @@ snapshots:
       '@tokenizer/token': 0.3.0
       ieee754: 1.2.1
 
+  tough-cookie@6.0.1:
+    dependencies:
+      tldts: 7.0.30
+
   tr46@0.0.3: {}
 
   tree-kill@1.2.2: {}
@@ -15213,6 +16328,17 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
+  ts-morph@26.0.0:
+    dependencies:
+      '@ts-morph/common': 0.27.0
+      code-block-writer: 13.0.3
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@2.8.1: {}
 
   tsup@8.5.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2):
@@ -15259,9 +16385,15 @@ snapshots:
       '@turbo/windows-64': 2.8.20
       '@turbo/windows-arm64': 2.8.20
 
+  tw-animate-css@1.4.0: {}
+
   type-fest@0.13.1:
     optional: true
 
+  type-fest@5.6.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
   type-is@2.0.1:
     dependencies:
       content-type: 1.0.5
@@ -15286,10 +16418,14 @@ snapshots:
 
   undici-types@7.18.2: {}
 
+  undici-types@7.19.2: {}
+
   undici@5.29.0:
     dependencies:
       '@fastify/busboy': 2.1.1
 
+  unicorn-magic@0.3.0: {}
+
   unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.3
@@ -15337,6 +16473,8 @@ snapshots:
 
   unpipe@1.0.0: {}
 
+  until-async@3.0.2: {}
+
   unzip-crx-3@0.2.0:
     dependencies:
       jszip: 3.10.1
@@ -15369,6 +16507,8 @@ snapshots:
 
   uuid@11.1.0: {}
 
+  validate-npm-package-name@7.0.2: {}
+
   vary@1.1.2: {}
 
   verror@1.10.1:
@@ -15393,7 +16533,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-plugin-solid@2.11.10(solid-js@1.9.9)(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)):
+  vite-plugin-solid@2.11.10(solid-js@1.9.9)(vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       '@babel/core': 7.28.6
       '@types/babel__core': 7.20.5
@@ -15401,12 +16541,12 @@ snapshots:
       merge-anything: 5.1.7
       solid-js: 1.9.9
       solid-refresh: 0.6.3(solid-js@1.9.9)
-      vite: 6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
-      vitefu: 1.1.1(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
+      vite: 6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+      vitefu: 1.1.1(vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
     transitivePeerDependencies:
       - supports-color
 
-  vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2):
+  vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
@@ -15415,14 +16555,14 @@ snapshots:
       rollup: 4.55.1
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 25.4.0
+      '@types/node': 25.6.0
       fsevents: 2.3.3
       jiti: 2.6.1
       lightningcss: 1.30.2
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2):
+  vite@7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -15431,16 +16571,16 @@ snapshots:
       rollup: 4.55.1
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 25.4.0
+      '@types/node': 25.6.0
       fsevents: 2.3.3
       jiti: 2.6.1
       lightningcss: 1.30.2
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vitefu@1.1.1(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)):
+  vitefu@1.1.1(vite@6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)):
     optionalDependencies:
-      vite: 6.4.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)
 
   vscode-jsonrpc@8.2.0: {}
 
@@ -15467,6 +16607,8 @@ snapshots:
 
   web-namespaces@2.0.1: {}
 
+  web-streams-polyfill@3.3.3: {}
+
   web-tree-sitter@0.25.10: {}
 
   webidl-conversions@3.0.1: {}
@@ -15480,6 +16622,10 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.5
+
   wide-align@1.1.5:
     dependencies:
       string-width: 4.2.3
@@ -15551,6 +16697,12 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
+  yocto-spinner@1.2.0:
+    dependencies:
+      yoctocolors: 2.1.2
+
+  yoctocolors@2.1.2: {}
+
   yoga-layout@3.2.1: {}
 
   zip-stream@4.1.1:
@@ -15559,6 +16711,10 @@ snapshots:
       compress-commons: 4.1.2
       readable-stream: 3.6.2
 
+  zod-to-json-schema@3.25.2(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
   zod-to-json-schema@3.25.2(zod@4.3.6):
     dependencies:
       zod: 4.3.6