From 61184b04694fd4e812a22ef4ad263d5139767e29 Mon Sep 17 00:00:00 2001 From: AndyMik90 Date: Mon, 15 Dec 2025 17:18:05 +0100 Subject: [PATCH] auto-claude: subtask-2-4 - Create GraphitiStep component - optional Graphiti/FalkorDB configuration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Created GraphitiStep component for optional Graphiti memory backend configuration - Features Docker/infrastructure detection to warn if Docker is not running - Includes toggle switch to enable/disable Graphiti memory - Shows configuration fields (FalkorDB URI, OpenAI API key) when enabled - Saves OpenAI API key to global app settings - Provides informational content about Graphiti benefits - Implements proper loading/saving/success/error states - Follows same patterns as OAuthStep and WelcomeStep components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../components/onboarding/GraphitiStep.tsx | 399 ++++++++++++++++++ 1 file changed, 399 insertions(+) create mode 100644 auto-claude-ui/src/renderer/components/onboarding/GraphitiStep.tsx diff --git a/auto-claude-ui/src/renderer/components/onboarding/GraphitiStep.tsx b/auto-claude-ui/src/renderer/components/onboarding/GraphitiStep.tsx new file mode 100644 index 00000000..1549492c --- /dev/null +++ b/auto-claude-ui/src/renderer/components/onboarding/GraphitiStep.tsx @@ -0,0 +1,399 @@ +import { useState, useEffect } from 'react'; +import { + Brain, + Database, + Info, + Loader2, + CheckCircle2, + AlertCircle, + ExternalLink, + Eye, + EyeOff, + Server +} from 'lucide-react'; +import { Button } from '../ui/button'; +import { Input } from '../ui/input'; +import { Label } from '../ui/label'; +import { Card, CardContent } from '../ui/card'; +import { Switch } from '../ui/switch'; +import { + Tooltip, + TooltipContent, + TooltipTrigger +} from '../ui/tooltip'; +import { useSettingsStore } from '../../stores/settings-store'; + +interface GraphitiStepProps { + onNext: () => void; + onBack: () => void; + onSkip: () => void; +} + +interface GraphitiConfig { + enabled: boolean; + falkorDbUri: string; + openAiApiKey: string; +} + +/** + * Graphiti/FalkorDB configuration step for the onboarding wizard. + * Allows users to optionally configure Graphiti memory backend. + * This step is entirely optional and can be skipped. + */ +export function GraphitiStep({ onNext, onBack, onSkip }: GraphitiStepProps) { + const { settings, updateSettings } = useSettingsStore(); + const [config, setConfig] = useState({ + enabled: false, + falkorDbUri: 'bolt://localhost:7687', + openAiApiKey: settings.globalOpenAIApiKey || '' + }); + const [showApiKey, setShowApiKey] = useState(false); + const [isSaving, setIsSaving] = useState(false); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(false); + const [isCheckingDocker, setIsCheckingDocker] = useState(true); + const [dockerAvailable, setDockerAvailable] = useState(null); + + // Check Docker/Infrastructure availability on mount + useEffect(() => { + const checkInfrastructure = async () => { + setIsCheckingDocker(true); + try { + // Check infrastructure status via the electronAPI + const result = await window.electronAPI.getInfrastructureStatus(); + setDockerAvailable(result?.success && result?.data?.docker?.running); + } catch { + // Infrastructure check may fail, assume unavailable + setDockerAvailable(false); + } finally { + setIsCheckingDocker(false); + } + }; + + checkInfrastructure(); + }, []); + + const handleToggleEnabled = (checked: boolean) => { + setConfig(prev => ({ ...prev, enabled: checked })); + setError(null); + setSuccess(false); + }; + + const handleSave = async () => { + if (!config.enabled) { + // If not enabled, just continue + onNext(); + return; + } + + if (!config.openAiApiKey.trim()) { + setError('OpenAI API key is required for Graphiti embeddings'); + return; + } + + setIsSaving(true); + setError(null); + + try { + // Save OpenAI API key to global settings + const result = await window.electronAPI.saveSettings({ + globalOpenAIApiKey: config.openAiApiKey.trim() + }); + + if (result?.success) { + // Update local settings store + updateSettings({ globalOpenAIApiKey: config.openAiApiKey.trim() }); + setSuccess(true); + } else { + setError(result?.error || 'Failed to save Graphiti configuration'); + } + } catch (err) { + setError(err instanceof Error ? err.message : 'Unknown error occurred'); + } finally { + setIsSaving(false); + } + }; + + const handleContinue = () => { + if (config.enabled && !success) { + handleSave(); + } else { + onNext(); + } + }; + + const handleOpenDocs = () => { + window.open('https://github.com/getzep/graphiti', '_blank'); + }; + + const handleReconfigure = () => { + setSuccess(false); + setError(null); + }; + + return ( +
+
+ {/* Header */} +
+
+
+ +
+
+

+ Memory & Context (Optional) +

+

+ Enable Graphiti for persistent memory across coding sessions +

+
+ + {/* Loading state for Docker check */} + {isCheckingDocker && ( +
+ +
+ )} + + {/* Main content */} + {!isCheckingDocker && ( +
+ {/* Success state */} + {success && ( + + +
+ +
+

+ Graphiti configured successfully +

+

+ Memory features are enabled. Auto Claude will maintain context + across sessions for improved code understanding. +

+
+
+ + + )} + + {/* Reconfigure link after success */} + {success && ( +
+ +
+ )} + + {/* Configuration form */} + {!success && ( + <> + {/* Error banner */} + {error && ( + + +
+ +

{error}

+
+ + + )} + + {/* Docker warning */} + {dockerAvailable === false && ( + + +
+ +
+

+ Docker not detected +

+

+ FalkorDB requires Docker to run. You can still configure Graphiti now + and set up Docker later. +

+
+
+ + + )} + + {/* Info card about Graphiti */} + + +
+ +
+

+ What is Graphiti? +

+

+ Graphiti is an intelligent memory layer that helps Auto Claude remember + context across sessions. It uses a knowledge graph to store discoveries, + patterns, and insights about your codebase. +

+
    +
  • Persistent memory across coding sessions
    • +
  • Better understanding of your codebase over time
    • +
  • Reduces repetitive explanations
    • +
+ +
+
+ + + + {/* Enable toggle */} + + +
+
+ +
+ +

+ Requires FalkorDB (Docker) and OpenAI API key +

+
+
+ +
+ + + + {/* Configuration fields (shown when enabled) */} + {config.enabled && ( +
+ {/* FalkorDB URI */} +
+
+ + +
+ setConfig(prev => ({ ...prev, falkorDbUri: e.target.value }))} + placeholder="bolt://localhost:7687" + className="font-mono text-sm" + disabled={isSaving} + /> +

+ Default: bolt://localhost:7687 (for local Docker setup) +

+
+ + {/* OpenAI API Key */} +
+ +
+ setConfig(prev => ({ ...prev, openAiApiKey: e.target.value }))} + placeholder="sk-..." + className="pr-10 font-mono text-sm" + disabled={isSaving} + /> + + + + + + {showApiKey ? 'Hide API key' : 'Show API key'} + + +
+

+ Required for generating embeddings. Get your key from{' '} + + OpenAI + +

+
+
+ )} + + )} +
+ )} + + {/* Action Buttons */} +
+ +
+ + +
+
+
+
+ ); +}