feature(settings-reset): ability to reset all state

app/w/components/sidebar/components/settings-modal/components/general/general.tsx

@@ -1,7 +1,28 @@
+import { useRouter } from 'next/navigation'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { Switch } from '@/components/ui/switch'
+import { resetAllStores } from '@/stores'
 
 export function General() {
+  const router = useRouter()
+
+  const handleResetData = () => {
+    resetAllStores()
+    router.push('/w/1') // Redirect to home page after reset
+  }
+
   return (
     <div className="p-6 space-y-6">
       <div>
@@ -21,6 +42,38 @@ export function General() {
           </div>
         </div>
       </div>
+
+      {/* Danger Zone Section */}
+      <div>
+        <div className="flex items-center justify-between py-1">
+          <Label className="font-medium">Reset All Data</Label>
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive" size="sm">
+                Reset Data
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete all your workflows,
+                  settings, and stored data.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleResetData}
+                  className="bg-red-600 hover:bg-red-700"
+                >
+                  Reset All Data
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      </div>
     </div>
   )
 }

app/w/components/sidebar/components/settings-modal/components/settings-navigation/settings-navigation.tsx

@@ -28,10 +28,10 @@ export function SettingsNavigation({ activeSection, onSectionChange }: SettingsN
           onClick={() => onSectionChange(item.id)}
           className={cn(
             'w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors',
-            'hover:bg-accent/50',
+            'hover:bg-muted/50',
             activeSection === item.id
-              ? 'bg-accent/50 text-foreground font-medium'
-              : 'text-muted-foreground'
+              ? 'bg-muted/50 text-foreground font-medium'
+              : 'text-muted-foreground hover:text-foreground'
           )}
         >
           <item.icon className="h-4 w-4" />

stores/index.ts

@@ -0,0 +1,68 @@
+import { useChatStore } from './chat/store'
+import { useConsoleStore } from './console/store'
+import { useEnvironmentStore } from './environment/store'
+import { useExecutionStore } from './execution/store'
+import { useNotificationStore } from './notifications/store'
+import { useWorkflowRegistry } from './workflow/registry/store'
+import { useWorkflowStore } from './workflow/store'
+
+/**
+ * Reset all application stores to their initial state
+ */
+export const resetAllStores = () => {
+  // Clear localStorage first
+  if (typeof window !== 'undefined') {
+    localStorage.clear()
+  }
+
+  // Force immediate state reset for all stores
+  // This ensures in-memory state is also cleared
+  useWorkflowStore.getState().clear()
+  useWorkflowRegistry.setState({
+    workflows: {},
+    activeWorkflowId: null,
+    isLoading: false,
+    error: null,
+  })
+  useNotificationStore.setState({ notifications: [] })
+  useEnvironmentStore.setState({ variables: {} })
+  useExecutionStore.getState().reset()
+  useConsoleStore.setState({ entries: [], isOpen: false })
+  useChatStore.setState({ messages: [], isProcessing: false, error: null })
+}
+
+/**
+ * Log the current state of all stores
+ */
+export const logAllStores = () => {
+  const state = {
+    workflow: useWorkflowStore.getState(),
+    workflowRegistry: useWorkflowRegistry.getState(),
+    notifications: useNotificationStore.getState(),
+    environment: useEnvironmentStore.getState(),
+    execution: useExecutionStore.getState(),
+    console: useConsoleStore.getState(),
+    chat: useChatStore.getState(),
+  }
+
+  console.group('Application State')
+  Object.entries(state).forEach(([storeName, storeState]) => {
+    console.group(storeName)
+    console.log(storeState)
+    console.groupEnd()
+  })
+  console.groupEnd()
+
+  return state
+}
+
+// Export all stores for convenience
+export {
+  useWorkflowStore,
+  useWorkflowRegistry,
+  useNotificationStore,
+  useEnvironmentStore,
+  useExecutionStore,
+  useConsoleStore,
+  useChatStore,
+}