feat: use new theme

web/components.json

@@ -4,11 +4,10 @@
   "rsc": false,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "src/index.css",
     "baseColor": "zinc",
-    "cssVariables": true,
+    "cssVariables": true
-    "prefix": ""
   },
   "aliases": {
     "components": "@/components",

web/package.json

@@ -15,14 +15,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/node": "^22.15.21",
+    "@types/node": "^22.15.28",
     "@types/react": "^19.1.6",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^19.1.5",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.5.0",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.1.8",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vite-bundle-visualizer": "^1.2.1"
@@ -34,7 +34,6 @@
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-context-menu": "^2.2.15",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -48,22 +47,18 @@
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@tailwindcss/vite": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.8",
-    "@tanstack/react-query": "^5.77.2",
+    "@tanstack/react-query": "^5.79.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.6.0",
     "i18next": "^25.2.1",
-    "input-otp": "^1.4.2",
     "lucide-react": "^0.511.0",
     "react": "^19.1.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -71,17 +66,15 @@
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.4",
     "react-i18next": "^15.5.2",
-    "react-resizable-panels": "^3.0.2",
     "react-router": "^7.6.1",
     "react-router-dom": "^7.6.1",
     "react-syntax-highlighter": "^15.6.1",
-    "recharts": "^2.15.3",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.3.0",
     "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.3.2",
-    "vaul": "^1.1.2",
+    "yup": "^1.6.1",
-    "yup": "^1.6.1"
+    "zod": "^3.25.42"
   },
   "trustedDependencies": ["@biomejs/biome"]
 }

web/src/components/main-config-card.tsx

@@ -332,7 +332,7 @@ export function MainConfigCard({
         className="w-full"
       >
         <div className="relative bg-muted rounded-lg">
-          <TabsList className="flex flex-wrap gap-1 w-full bg-transparent tabs-list">
+          <TabsList className="flex flex-wrap gap-1 w-full bg-transparent overflow-x-auto tabs-list">
             {shellTools.map((shellTool) => (
               <TabsTrigger
                 key={shellTool}

web/src/components/ui/alert-dialog.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 

web/src/components/ui/checkbox.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";

web/src/components/ui/dropdown-menu.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";

web/src/components/ui/label.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 

web/src/components/ui/radio-group.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";

web/src/components/ui/separator.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
@@ -13,7 +11,7 @@ function Separator({
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
   return (
     <SeparatorPrimitive.Root
-      data-slot="separator-root"
+      data-slot="separator"
       decorative={decorative}
       orientation={orientation}
       className={cn(

web/src/components/ui/switch.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 

web/src/config.ts

@@ -60,7 +60,6 @@ const createEnv = () => {
     }
     return acc;
   }, {});
-  console.log(envVars);
   const parsedEnv = safeParseYup<EnvSchema>(EnvSchema, envVars);
   if (!parsedEnv.success) {
     throw new Error(

web/src/index.css

@@ -1,6 +1,9 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-@plugin "tailwindcss-animate";
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -10,58 +13,72 @@
 }
 
 :root {
-  --background: hsl(0 0% 100%);
+  --radius: 0.625rem;
-  --foreground: hsl(240 10% 3.9%);
+  --background: oklch(1 0 0);
-  --card: hsl(0 0% 100%);
+  --foreground: oklch(0.141 0.005 285.823);
-  --card-foreground: hsl(240 10% 3.9%);
+  --card: oklch(1 0 0);
-  --popover: hsl(0 0% 100%);
+  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover-foreground: hsl(240 10% 3.9%);
+  --popover: oklch(1 0 0);
-  --primary: hsl(240 5.9% 10%);
+  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary-foreground: hsl(0 0% 98%);
+  --primary: oklch(0.21 0.006 285.885);
-  --secondary: hsl(240 4.8% 95.9%);
+  --primary-foreground: oklch(0.985 0 0);
-  --secondary-foreground: hsl(240 5.9% 10%);
+  --secondary: oklch(0.967 0.001 286.375);
-  --muted: hsl(240 4.8% 95.9%);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted-foreground: hsl(240 3.8% 46.1%);
+  --muted: oklch(0.967 0.001 286.375);
-  --accent: hsl(240 4.8% 95.9%);
+  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent-foreground: hsl(240 5.9% 10%);
+  --accent: oklch(0.967 0.001 286.375);
-  --destructive: hsl(0 84.2% 60.2%);
+  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive-foreground: hsl(0 0% 98%);
+  --destructive: oklch(0.577 0.245 27.325);
-  --border: hsl(240 5.9% 90%);
+  --border: oklch(0.92 0.004 286.32);
-  --input: hsl(240 5.9% 90%);
+  --input: oklch(0.92 0.004 286.32);
-  --ring: hsl(240 10% 3.9%);
+  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: hsl(12 76% 61%);
+  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: hsl(173 58% 39%);
+  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: hsl(197 37% 24%);
+  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: hsl(43 74% 66%);
+  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: hsl(27 87% 67%);
+  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.3rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
-  --background: hsl(240 10% 3.9%);
+  --background: oklch(0.141 0.005 285.823);
-  --foreground: hsl(0 0% 98%);
+  --foreground: oklch(0.985 0 0);
-  --card: hsl(240 10% 3.9%);
+  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: hsl(0 0% 98%);
+  --card-foreground: oklch(0.985 0 0);
-  --popover: hsl(240 10% 3.9%);
+  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: hsl(0 0% 98%);
+  --popover-foreground: oklch(0.985 0 0);
-  --primary: hsl(0 0% 98%);
+  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: hsl(240 5.9% 10%);
+  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: hsl(240 3.7% 15.9%);
+  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: hsl(0 0% 98%);
+  --secondary-foreground: oklch(0.985 0 0);
-  --muted: hsl(240 3.7% 15.9%);
+  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: hsl(240 5% 64.9%);
+  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: hsl(240 3.7% 15.9%);
+  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: hsl(0 0% 98%);
+  --accent-foreground: oklch(0.985 0 0);
-  --destructive: hsl(0 62.8% 30.6%);
+  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: hsl(0 0% 98%);
+  --border: oklch(1 0 0 / 10%);
-  --border: hsl(240 3.7% 15.9%);
+  --input: oklch(1 0 0 / 15%);
-  --input: hsl(240 3.7% 15.9%);
+  --ring: oklch(0.552 0.016 285.938);
-  --ring: hsl(240 4.9% 83.9%);
+  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-1: hsl(220 70% 50%);
+  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-2: hsl(160 60% 45%);
+  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-3: hsl(30 80% 55%);
+  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-4: hsl(280 65% 60%);
+  --chart-5: oklch(0.645 0.246 16.439);
-  --chart-5: hsl(340 75% 55%);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
 @theme inline {
@@ -93,6 +110,14 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
 
 @layer base {
@@ -104,22 +129,7 @@
   }
 }
 
-.tabs-list-container {
-  @apply relative;
-
-  /* Add fade effect for overflow indication */
-  &::after {
-    content: "";
-    @apply absolute right-0 top-0 h-full w-8 
-           bg-gradient-to-l from-background to-transparent
-           pointer-events-none
-           md:hidden;
-  }
-}
-
-/* Custom scrollbar for tabs list */
 .tabs-list {
-  @apply pb-0.5 overflow-x-auto;
   scrollbar-width: thin;
 }
 
@@ -134,8 +144,3 @@
 .tabs-list::-webkit-scrollbar-thumb {
   @apply bg-muted-foreground/20 hover:bg-muted-foreground/30 rounded-full;
 }
-
-/* Ensure tab triggers have consistent sizing */
-.tab-trigger {
-  @apply whitespace-nowrap text-sm;
-}

web/tailwind.config.js

@@ -1,69 +0,0 @@
-import scrollbar from "tailwind-scrollbar";
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: ["class"],
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        chart: {
-          1: "hsl(var(--chart-1))",
-          2: "hsl(var(--chart-2))",
-          3: "hsl(var(--chart-3))",
-          4: "hsl(var(--chart-4))",
-          5: "hsl(var(--chart-5))",
-        },
-        sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          primary: "hsl(var(--sidebar-primary))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
-        },
-      },
-    },
-  },
-  plugins: [import("tailwindcss-animate"), scrollbar({ nocompatible: true })],
-};