@tyroneross/navgator 0.9.0 → 0.10.0

package/web/.next/standalone/web/components/settings-panel.tsx

@@ -1,671 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { Badge } from "@/components/ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import {
-  FolderOpen,
-  GitBranch,
-  Bell,
-  Shield,
-  Palette,
-  Terminal,
-  Save,
-  RotateCcw,
-  Check,
-  AlertCircle,
-  Info,
-  Loader2,
-} from "lucide-react"
-import {
-  useSettings,
-  type ScanConfig,
-  type DetectionConfig,
-  type NotificationConfig,
-  type DisplayConfig,
-} from "@/lib/hooks"
-
-const DEFAULT_SCAN: ScanConfig = {
-  rootPath: "./src",
-  excludePaths: ["node_modules", ".git", "dist", "build", ".next"],
-  includePatterns: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
-  scanDepth: 10,
-  watchMode: false,
-  autoScanOnChange: true,
-}
-
-const DEFAULT_DETECTION: DetectionConfig = {
-  npm: true,
-  database: true,
-  service: true,
-  queue: true,
-  cache: true,
-  storage: true,
-  auth: true,
-  llm: true,
-  staticAnalysis: true,
-  environmentVariables: true,
-  configFiles: true,
-}
-
-const DEFAULT_NOTIFICATIONS: NotificationConfig = {
-  enabled: true,
-  onNewConnection: false,
-  onBreakingChange: true,
-  onSecurityIssue: true,
-  slackWebhook: "",
-}
-
-const DEFAULT_DISPLAY: DisplayConfig = {
-  theme: "dark",
-  compactMode: false,
-  showLineNumbers: true,
-  diagramDirection: "TB",
-  maxVisibleConnections: 50,
-}
-
-export function SettingsPanel() {
-  const { settings, isLoading, isSaving, save } = useSettings({ autoFetch: true })
-  const [saved, setSaved] = useState(false)
-
-  const [scanConfig, setScanConfig] = useState<ScanConfig>(DEFAULT_SCAN)
-  const [detectionConfig, setDetectionConfig] = useState<DetectionConfig>(DEFAULT_DETECTION)
-  const [notificationConfig, setNotificationConfig] = useState<NotificationConfig>(DEFAULT_NOTIFICATIONS)
-  const [displayConfig, setDisplayConfig] = useState<DisplayConfig>(DEFAULT_DISPLAY)
-
-  // Sync local state when settings load from API
-  useEffect(() => {
-    if (settings) {
-      setScanConfig(settings.scan)
-      setDetectionConfig(settings.detection)
-      setNotificationConfig(settings.notifications)
-      setDisplayConfig(settings.display)
-    }
-  }, [settings])
-
-  const handleSave = async () => {
-    const success = await save({
-      scan: scanConfig,
-      detection: detectionConfig,
-      notifications: notificationConfig,
-      display: displayConfig,
-    })
-    if (success) {
-      setSaved(true)
-      setTimeout(() => setSaved(false), 2000)
-    }
-  }
-
-  const handleReset = async () => {
-    setScanConfig(DEFAULT_SCAN)
-    setDetectionConfig(DEFAULT_DETECTION)
-    setNotificationConfig(DEFAULT_NOTIFICATIONS)
-    setDisplayConfig(DEFAULT_DISPLAY)
-    await save({
-      scan: DEFAULT_SCAN,
-      detection: DEFAULT_DETECTION,
-      notifications: DEFAULT_NOTIFICATIONS,
-      display: DEFAULT_DISPLAY,
-    })
-  }
-
-  if (isLoading && !settings) {
-    return (
-      <div className="flex h-64 items-center justify-center">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex items-start justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold text-foreground">Settings</h1>
-          <p className="text-sm text-muted-foreground">
-            Configure NavGator scanning behavior and display preferences
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" className="gap-2 bg-transparent" onClick={handleReset}>
-            <RotateCcw className="h-4 w-4" />
-            Reset
-          </Button>
-          <Button size="sm" className="gap-2" onClick={handleSave} disabled={isSaving}>
-            {saved ? <Check className="h-4 w-4" /> : isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-            {saved ? "Saved" : isSaving ? "Saving..." : "Save Changes"}
-          </Button>
-        </div>
-      </div>
-
-      <Tabs defaultValue="scanning" className="w-full">
-        <TabsList className="bg-secondary">
-          <TabsTrigger value="scanning" className="gap-2">
-            <FolderOpen className="h-4 w-4" />
-            Scanning
-          </TabsTrigger>
-          <TabsTrigger value="detection" className="gap-2">
-            <GitBranch className="h-4 w-4" />
-            Detection
-          </TabsTrigger>
-          <TabsTrigger value="notifications" className="gap-2">
-            <Bell className="h-4 w-4" />
-            Notifications
-          </TabsTrigger>
-          <TabsTrigger value="display" className="gap-2">
-            <Palette className="h-4 w-4" />
-            Display
-          </TabsTrigger>
-        </TabsList>
-
-        {/* Scanning Settings */}
-        <TabsContent value="scanning" className="mt-4">
-          <div className="grid gap-4">
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <CardTitle className="text-base">Scan Configuration</CardTitle>
-                <CardDescription>
-                  Configure which files and directories NavGator should analyze
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-6">
-                <div className="grid gap-2">
-                  <Label htmlFor="rootPath">Root Path</Label>
-                  <Input
-                    id="rootPath"
-                    value={scanConfig.rootPath}
-                    onChange={(e) =>
-                      setScanConfig((c) => ({ ...c, rootPath: e.target.value }))
-                    }
-                    className="bg-secondary font-mono"
-                    placeholder="./src"
-                  />
-                  <p className="text-xs text-muted-foreground">
-                    Base directory for scanning (relative to project root)
-                  </p>
-                </div>
-
-                <div className="grid gap-2">
-                  <Label>Exclude Paths</Label>
-                  <div className="flex flex-wrap gap-2">
-                    {scanConfig.excludePaths.map((path, idx) => (
-                      <Badge
-                        key={idx}
-                        variant="secondary"
-                        className="gap-1 font-mono text-xs"
-                      >
-                        {path}
-                        <button
-                          type="button"
-                          className="ml-1 hover:text-destructive"
-                          onClick={() =>
-                            setScanConfig((c) => ({
-                              ...c,
-                              excludePaths: c.excludePaths.filter((_, i) => i !== idx),
-                            }))
-                          }
-                        >
-                          x
-                        </button>
-                      </Badge>
-                    ))}
-                    <Input
-                      placeholder="Add path..."
-                      className="h-6 w-32 bg-secondary text-xs"
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") {
-                          const value = e.currentTarget.value.trim()
-                          if (value) {
-                            setScanConfig((c) => ({
-                              ...c,
-                              excludePaths: [...c.excludePaths, value],
-                            }))
-                            e.currentTarget.value = ""
-                          }
-                        }
-                      }}
-                    />
-                  </div>
-                </div>
-
-                <div className="grid gap-2">
-                  <Label>Include Patterns</Label>
-                  <div className="flex flex-wrap gap-2">
-                    {scanConfig.includePatterns.map((pattern, idx) => (
-                      <Badge
-                        key={idx}
-                        variant="outline"
-                        className="gap-1 font-mono text-xs"
-                      >
-                        {pattern}
-                        <button
-                          type="button"
-                          className="ml-1 hover:text-destructive"
-                          onClick={() =>
-                            setScanConfig((c) => ({
-                              ...c,
-                              includePatterns: c.includePatterns.filter(
-                                (_, i) => i !== idx
-                              ),
-                            }))
-                          }
-                        >
-                          x
-                        </button>
-                      </Badge>
-                    ))}
-                  </div>
-                  <p className="text-xs text-muted-foreground">
-                    Glob patterns for files to include in analysis
-                  </p>
-                </div>
-
-                <div className="grid gap-2">
-                  <Label htmlFor="scanDepth">Scan Depth</Label>
-                  <Select
-                    value={scanConfig.scanDepth.toString()}
-                    onValueChange={(v) =>
-                      setScanConfig((c) => ({ ...c, scanDepth: Number.parseInt(v) }))
-                    }
-                  >
-                    <SelectTrigger className="w-32 bg-secondary">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="5">5 levels</SelectItem>
-                      <SelectItem value="10">10 levels</SelectItem>
-                      <SelectItem value="15">15 levels</SelectItem>
-                      <SelectItem value="20">20 levels</SelectItem>
-                      <SelectItem value="-1">Unlimited</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <p className="text-xs text-muted-foreground">
-                    Maximum directory depth to traverse
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <CardTitle className="text-base">Watch Mode</CardTitle>
-                <CardDescription>
-                  Automatically detect changes in your codebase
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <Label>Enable Watch Mode</Label>
-                    <p className="text-xs text-muted-foreground">
-                      Monitor file changes in real-time
-                    </p>
-                  </div>
-                  <Switch
-                    checked={scanConfig.watchMode}
-                    onCheckedChange={(v) =>
-                      setScanConfig((c) => ({ ...c, watchMode: v }))
-                    }
-                  />
-                </div>
-
-                <div className="flex items-center justify-between">
-                  <div>
-                    <Label>Auto-scan on Change</Label>
-                    <p className="text-xs text-muted-foreground">
-                      Automatically re-analyze when files change
-                    </p>
-                  </div>
-                  <Switch
-                    checked={scanConfig.autoScanOnChange}
-                    onCheckedChange={(v) =>
-                      setScanConfig((c) => ({ ...c, autoScanOnChange: v }))
-                    }
-                  />
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-
-        {/* Detection Settings */}
-        <TabsContent value="detection" className="mt-4">
-          <div className="grid gap-4">
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <CardTitle className="text-base">Component Detection</CardTitle>
-                <CardDescription>
-                  Configure what types of components NavGator should detect
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-4">
-                <div className="grid grid-cols-2 gap-4">
-                  {([
-                    { id: "npm" as const, label: "NPM Packages", desc: "Detect package.json dependencies" },
-                    { id: "database" as const, label: "Databases", desc: "PostgreSQL, MySQL, MongoDB, etc." },
-                    { id: "service" as const, label: "External Services", desc: "APIs, webhooks, third-party services" },
-                    { id: "queue" as const, label: "Message Queues", desc: "Redis, RabbitMQ, SQS, etc." },
-                    { id: "cache" as const, label: "Caching", desc: "Redis, Memcached, CDN caches" },
-                    { id: "storage" as const, label: "File Storage", desc: "S3, GCS, local filesystem" },
-                    { id: "auth" as const, label: "Authentication", desc: "OAuth, JWT, session providers" },
-                    { id: "llm" as const, label: "LLM Calls", desc: "AI/ML model invocations" },
-                  ] as const).map((item) => (
-                    <div
-                      key={item.id}
-                      className="flex items-start justify-between rounded-lg border border-border bg-secondary/50 p-3"
-                    >
-                      <div>
-                        <Label>{item.label}</Label>
-                        <p className="text-xs text-muted-foreground">{item.desc}</p>
-                      </div>
-                      <Switch
-                        checked={detectionConfig[item.id]}
-                        onCheckedChange={(v) =>
-                          setDetectionConfig((c) => ({ ...c, [item.id]: v }))
-                        }
-                      />
-                    </div>
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <CardTitle className="text-base">Connection Analysis</CardTitle>
-                <CardDescription>
-                  How NavGator identifies relationships between components
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <Label>Static Analysis</Label>
-                    <p className="text-xs text-muted-foreground">
-                      Analyze imports, function calls, and type references
-                    </p>
-                  </div>
-                  <Switch
-                    checked={detectionConfig.staticAnalysis}
-                    onCheckedChange={(v) =>
-                      setDetectionConfig((c) => ({ ...c, staticAnalysis: v }))
-                    }
-                  />
-                </div>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <Label>Environment Variables</Label>
-                    <p className="text-xs text-muted-foreground">
-                      Detect service URLs from env vars
-                    </p>
-                  </div>
-                  <Switch
-                    checked={detectionConfig.environmentVariables}
-                    onCheckedChange={(v) =>
-                      setDetectionConfig((c) => ({ ...c, environmentVariables: v }))
-                    }
-                  />
-                </div>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <Label>Config Files</Label>
-                    <p className="text-xs text-muted-foreground">
-                      Parse docker-compose, terraform, k8s manifests
-                    </p>
-                  </div>
-                  <Switch
-                    checked={detectionConfig.configFiles}
-                    onCheckedChange={(v) =>
-                      setDetectionConfig((c) => ({ ...c, configFiles: v }))
-                    }
-                  />
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-
-        {/* Notifications Settings */}
-        <TabsContent value="notifications" className="mt-4">
-          <div className="grid gap-4">
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <CardTitle className="text-base">Alert Preferences</CardTitle>
-                <CardDescription>
-                  Configure when and how you receive notifications
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <Label>Enable Notifications</Label>
-                    <p className="text-xs text-muted-foreground">
-                      Receive alerts for architecture changes
-                    </p>
-                  </div>
-                  <Switch
-                    checked={notificationConfig.enabled}
-                    onCheckedChange={(v) =>
-                      setNotificationConfig((c) => ({ ...c, enabled: v }))
-                    }
-                  />
-                </div>
-
-                <div className="border-t border-border pt-4">
-                  <Label className="mb-3 block text-muted-foreground">Notify me when...</Label>
-                  <div className="flex flex-col gap-3">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <Info className="h-4 w-4 text-info" />
-                        <span className="text-sm">New connection detected</span>
-                      </div>
-                      <Switch
-                        checked={notificationConfig.onNewConnection}
-                        onCheckedChange={(v) =>
-                          setNotificationConfig((c) => ({ ...c, onNewConnection: v }))
-                        }
-                        disabled={!notificationConfig.enabled}
-                      />
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <AlertCircle className="h-4 w-4 text-warning" />
-                        <span className="text-sm">Breaking change detected</span>
-                      </div>
-                      <Switch
-                        checked={notificationConfig.onBreakingChange}
-                        onCheckedChange={(v) =>
-                          setNotificationConfig((c) => ({ ...c, onBreakingChange: v }))
-                        }
-                        disabled={!notificationConfig.enabled}
-                      />
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <Shield className="h-4 w-4 text-destructive" />
-                        <span className="text-sm">Security issue found</span>
-                      </div>
-                      <Switch
-                        checked={notificationConfig.onSecurityIssue}
-                        onCheckedChange={(v) =>
-                          setNotificationConfig((c) => ({ ...c, onSecurityIssue: v }))
-                        }
-                        disabled={!notificationConfig.enabled}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <CardTitle className="text-base">Integrations</CardTitle>
-                <CardDescription>
-                  Connect to external services for notifications
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="slack">Slack Webhook URL</Label>
-                  <Input
-                    id="slack"
-                    type="url"
-                    value={notificationConfig.slackWebhook}
-                    onChange={(e) =>
-                      setNotificationConfig((c) => ({ ...c, slackWebhook: e.target.value }))
-                    }
-                    className="bg-secondary font-mono"
-                    placeholder="https://hooks.slack.com/services/..."
-                  />
-                </div>
-                <div className="flex items-center gap-2 rounded-lg border border-border bg-secondary/50 p-3">
-                  <Terminal className="h-4 w-4 text-muted-foreground" />
-                  <code className="text-xs text-muted-foreground">
-                    navgator config set slack-webhook &lt;url&gt;
-                  </code>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-
-        {/* Display Settings */}
-        <TabsContent value="display" className="mt-4">
-          <div className="grid gap-4">
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <CardTitle className="text-base">Appearance</CardTitle>
-                <CardDescription>
-                  Customize how NavGator looks and displays information
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-4">
-                <div className="grid gap-2">
-                  <Label>Theme</Label>
-                  <Select
-                    value={displayConfig.theme}
-                    onValueChange={(v) =>
-                      setDisplayConfig((c) => ({
-                        ...c,
-                        theme: v as DisplayConfig["theme"],
-                      }))
-                    }
-                  >
-                    <SelectTrigger className="w-40 bg-secondary">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="dark">Dark</SelectItem>
-                      <SelectItem value="light">Light</SelectItem>
-                      <SelectItem value="system">System</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="flex items-center justify-between">
-                  <div>
-                    <Label>Compact Mode</Label>
-                    <p className="text-xs text-muted-foreground">
-                      Reduce padding and spacing for more content
-                    </p>
-                  </div>
-                  <Switch
-                    checked={displayConfig.compactMode}
-                    onCheckedChange={(v) =>
-                      setDisplayConfig((c) => ({ ...c, compactMode: v }))
-                    }
-                  />
-                </div>
-
-                <div className="flex items-center justify-between">
-                  <div>
-                    <Label>Show Line Numbers</Label>
-                    <p className="text-xs text-muted-foreground">
-                      Display line numbers in code snippets
-                    </p>
-                  </div>
-                  <Switch
-                    checked={displayConfig.showLineNumbers}
-                    onCheckedChange={(v) =>
-                      setDisplayConfig((c) => ({ ...c, showLineNumbers: v }))
-                    }
-                  />
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <CardTitle className="text-base">Diagram Preferences</CardTitle>
-                <CardDescription>
-                  Configure architecture diagram visualization
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-4">
-                <div className="grid gap-2">
-                  <Label>Default Direction</Label>
-                  <Select
-                    value={displayConfig.diagramDirection}
-                    onValueChange={(v) =>
-                      setDisplayConfig((c) => ({
-                        ...c,
-                        diagramDirection: v as DisplayConfig["diagramDirection"],
-                      }))
-                    }
-                  >
-                    <SelectTrigger className="w-40 bg-secondary">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="TB">Top to Bottom</SelectItem>
-                      <SelectItem value="LR">Left to Right</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="grid gap-2">
-                  <Label>Max Visible Connections</Label>
-                  <Select
-                    value={displayConfig.maxVisibleConnections.toString()}
-                    onValueChange={(v) =>
-                      setDisplayConfig((c) => ({
-                        ...c,
-                        maxVisibleConnections: Number.parseInt(v),
-                      }))
-                    }
-                  >
-                    <SelectTrigger className="w-40 bg-secondary">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="25">25</SelectItem>
-                      <SelectItem value="50">50</SelectItem>
-                      <SelectItem value="100">100</SelectItem>
-                      <SelectItem value="200">200</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <p className="text-xs text-muted-foreground">
-                    Limit connections shown to improve performance
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}