Refactor SettingsPanel to use external open state management

- Removed internal state management for the SettingsPanel component.
- Added props for open state and onOpenChange callback to manage visibility from the parent component.
- Updated MonitorPage to handle the settings panel state and trigger its visibility.

src/components/monitor/SettingsPanel.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { Settings, X, History, Wifi, WifiOff, RefreshCw, Terminal, Download, Trash2, Database, HardDrive, Play, Square } from 'lucide-react'
 
@@ -12,6 +11,8 @@ interface SettingsPanelProps {
   persistenceStartedAt: number | null
   persistenceSessionCount: number
   persistenceActionCount: number
+  open: boolean
+  onOpenChange: (open: boolean) => void
   onHistoricalModeChange: (enabled: boolean) => void
   onDebugModeChange: (enabled: boolean) => void
   onLogCollectionChange: (enabled: boolean) => void
@@ -35,6 +36,8 @@ export function SettingsPanel({
   persistenceStartedAt,
   persistenceSessionCount,
   persistenceActionCount,
+  open,
+  onOpenChange,
   onHistoricalModeChange,
   onDebugModeChange,
   onLogCollectionChange,
@@ -47,12 +50,11 @@ export function SettingsPanel({
   onPersistenceStop,
   onPersistenceClear,
 }: SettingsPanelProps) {
-  const [open, setOpen] = useState(false)
 
   return (
     <>
       <button
-        onClick={() => setOpen(true)}
+        onClick={() => onOpenChange(true)}
         className="p-2 bg-shell-800 hover:bg-shell-700 rounded-lg transition-all group"
       >
         <Settings size={14} className="text-gray-400 group-hover:text-crab-400 transition-colors" />
@@ -66,7 +68,7 @@ export function SettingsPanel({
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
-              onClick={() => setOpen(false)}
+              onClick={() => onOpenChange(false)}
               className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40"
             />
 
@@ -87,7 +89,7 @@ export function SettingsPanel({
                   SETTINGS
                 </h2>
                 <button
-                  onClick={() => setOpen(false)}
+                  onClick={() => onOpenChange(false)}
                   className="p-2 hover:bg-shell-800 rounded-lg transition-all"
                 >
                   <X size={18} className="text-gray-400" />

src/integrations/clawdbot/persistence.ts

@@ -23,6 +23,10 @@ class PersistenceService {
     this.ensureDataDir()
     this.loadState()
     this.loadData()
+    // Auto-start by default if no state file exists
+    if (!this.enabled && !fs.existsSync(STATE_FILE)) {
+      this.start()
+    }
   }
 
   private ensureDataDir() {

src/routes/monitor/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react'
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useLiveQuery } from '@tanstack/react-db'
 import { motion } from 'framer-motion'
-import { ArrowLeft, Loader2 } from 'lucide-react'
+import { ArrowLeft, Loader2, HardDrive } from 'lucide-react'
 import { trpc } from '~/integrations/trpc/client'
 import {
   sessionsCollection,
@@ -77,6 +77,9 @@ function MonitorPage() {
   // Sidebar collapse state - default to collapsed
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
 
+  // Settings panel state
+  const [settingsOpen, setSettingsOpen] = useState(false)
+
   // Live queries from TanStack DB collections
   const sessionsQuery = useLiveQuery(sessionsCollection)
   const actionsQuery = useLiveQuery(actionsCollection)
@@ -380,6 +383,25 @@ function MonitorPage() {
             </motion.div>
           )}
 
+          {/* Persistence indicator */}
+          <button
+            onClick={() => setSettingsOpen(true)}
+            className={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-all ${
+              persistenceEnabled
+                ? 'bg-neon-mint/10 hover:bg-neon-mint/20'
+                : 'bg-shell-800/50 hover:bg-shell-700'
+            }`}
+            title={persistenceEnabled ? 'Background service running' : 'Background service stopped'}
+          >
+            <HardDrive
+              size={14}
+              className={persistenceEnabled ? 'text-neon-mint' : 'text-shell-500'}
+            />
+            {persistenceEnabled && (
+              <span className="w-1.5 h-1.5 rounded-full bg-neon-mint animate-pulse" />
+            )}
+          </button>
+
           {/* Stats display */}
           <div className="hidden sm:flex items-center gap-3 px-3 py-1.5 bg-shell-800/50 rounded-lg">
             <div className="flex items-center gap-2">
@@ -403,6 +425,8 @@ function MonitorPage() {
             persistenceStartedAt={persistenceStartedAt}
             persistenceSessionCount={persistenceSessionCount}
             persistenceActionCount={persistenceActionCount}
+            open={settingsOpen}
+            onOpenChange={setSettingsOpen}
             onHistoricalModeChange={handleHistoricalModeChange}
             onDebugModeChange={handleDebugModeChange}
             onLogCollectionChange={handleLogCollectionChange}