refactor: replace fs with secureFs for improved file handling

This commit updates various modules to utilize the secure file system operations from the secureFs module instead of the native fs module. Key changes include:

- Replaced fs imports with secureFs in multiple route handlers and services to enhance security and consistency in file operations.
- Added centralized validation for working directories in the sdk-options module to ensure all AI model invocations are secure.

These changes aim to improve the security and maintainability of file handling across the application.

apps/ui/src/components/views/setup-view/steps/theme-step.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@/components/ui/button";
-import { ArrowRight, ArrowLeft, Check } from "lucide-react";
-import { themeOptions } from "@/config/theme-options";
-import { useAppStore } from "@/store/app-store";
-import { cn } from "@/lib/utils";
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { ArrowRight, ArrowLeft, Check, Moon, Sun } from 'lucide-react';
+import { darkThemes, lightThemes } from '@/config/theme-options';
+import { useAppStore } from '@/store/app-store';
+import { cn } from '@/lib/utils';
 
 interface ThemeStepProps {
   onNext: () => void;
@@ -11,6 +12,7 @@ interface ThemeStepProps {
 
 export function ThemeStep({ onNext, onBack }: ThemeStepProps) {
   const { theme, setTheme, setPreviewTheme } = useAppStore();
+  const [activeTab, setActiveTab] = useState<'dark' | 'light'>('dark');
 
   const handleThemeHover = (themeValue: string) => {
     setPreviewTheme(themeValue as typeof theme);
@@ -25,19 +27,47 @@ export function ThemeStep({ onNext, onBack }: ThemeStepProps) {
     setPreviewTheme(null);
   };
 
+  const themesToShow = activeTab === 'dark' ? darkThemes : lightThemes;
+
   return (
     <div className="space-y-6">
       <div className="text-center">
-        <h2 className="text-3xl font-bold text-foreground mb-3">
-          Choose Your Theme
-        </h2>
+        <h2 className="text-3xl font-bold text-foreground mb-3">Choose Your Theme</h2>
         <p className="text-muted-foreground max-w-md mx-auto">
           Pick a theme that suits your style. Hover to preview, click to select.
         </p>
       </div>
 
+      {/* Dark/Light Tabs */}
+      <div className="flex justify-center gap-2">
+        <button
+          onClick={() => setActiveTab('dark')}
+          className={cn(
+            'flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium transition-all duration-200',
+            activeTab === 'dark'
+              ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/25'
+              : 'bg-accent/50 text-muted-foreground hover:bg-accent hover:text-foreground'
+          )}
+        >
+          <Moon className="w-4 h-4" />
+          Dark Themes
+        </button>
+        <button
+          onClick={() => setActiveTab('light')}
+          className={cn(
+            'flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium transition-all duration-200',
+            activeTab === 'light'
+              ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/25'
+              : 'bg-accent/50 text-muted-foreground hover:bg-accent hover:text-foreground'
+          )}
+        >
+          <Sun className="w-4 h-4" />
+          Light Themes
+        </button>
+      </div>
+
       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-        {themeOptions.map((option) => {
+        {themesToShow.map((option) => {
           const Icon = option.Icon;
           const isSelected = theme === option.value;
 
@@ -49,11 +79,11 @@ export function ThemeStep({ onNext, onBack }: ThemeStepProps) {
               onMouseLeave={handleThemeLeave}
               onClick={() => handleThemeClick(option.value)}
               className={cn(
-                "relative flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all duration-200",
-                "hover:scale-105 hover:shadow-lg",
+                'relative flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all duration-200',
+                'hover:scale-105 hover:shadow-lg',
                 isSelected
-                  ? "border-brand-500 bg-brand-500/10"
-                  : "border-border hover:border-brand-400 bg-card"
+                  ? 'border-brand-500 bg-brand-500/10'
+                  : 'border-border hover:border-brand-400 bg-card'
               )}
             >
               {isSelected && (
@@ -61,10 +91,8 @@ export function ThemeStep({ onNext, onBack }: ThemeStepProps) {
                   <Check className="w-4 h-4 text-brand-500" />
                 </div>
               )}
-              <Icon className="w-6 h-6 text-foreground" />
-              <span className="text-sm font-medium text-foreground">
-                {option.label}
-              </span>
+              <Icon className="w-6 h-6" style={{ color: option.color }} />
+              <span className="text-sm font-medium text-foreground">{option.label}</span>
             </button>
           );
         })}