@tyroneross/navgator 0.2.0 → 0.2.2

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

@@ -0,0 +1,240 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Package,
+  Database,
+  Cloud,
+  Server,
+  Box,
+  Search,
+  Filter,
+  ChevronRight,
+  RefreshCw,
+  Loader2,
+  Info,
+} from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+import { useComponents } from "@/lib/hooks"
+
+interface ComponentsPanelProps {
+  onSelectComponent: (name: string) => void
+  initialTypeFilter?: string | null
+}
+
+const typeIcons: Record<string, typeof Package> = {
+  npm: Package,
+  service: Cloud,
+  database: Database,
+  infra: Server,
+  queue: Box,
+  framework: Box,
+}
+
+const typeColors: Record<string, string> = {
+  npm: "text-chart-1",
+  service: "text-chart-2",
+  database: "text-chart-3",
+  infra: "text-chart-4",
+  queue: "text-chart-5",
+  framework: "text-primary",
+}
+
+export function ComponentsPanel({ onSelectComponent, initialTypeFilter }: ComponentsPanelProps) {
+  const { components, isLoading, source, refresh } = useComponents({ autoFetch: true })
+  const [search, setSearch] = useState("")
+  const [selectedTypes, setSelectedTypes] = useState<string[]>(initialTypeFilter ? [initialTypeFilter] : [])
+  const [selectedLayers, setSelectedLayers] = useState<string[]>([])
+
+  const types = [...new Set(components.map((c) => c.type))]
+  const layers = [...new Set(components.map((c) => c.layer))]
+
+  const filtered = components.filter((c) => {
+    const matchesSearch = c.name.toLowerCase().includes(search.toLowerCase())
+    const matchesType = selectedTypes.length === 0 || selectedTypes.includes(c.type)
+    const matchesLayer = selectedLayers.length === 0 || selectedLayers.includes(c.layer)
+    return matchesSearch && matchesType && matchesLayer
+  })
+
+  const grouped = filtered.reduce(
+    (acc, c) => {
+      if (!acc[c.type]) acc[c.type] = []
+      acc[c.type].push(c)
+      return acc
+    },
+    {} as Record<string, typeof components>
+  )
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Components</h1>
+          <p className="text-sm text-muted-foreground">
+            All detected packages, services, and infrastructure
+            {source === "mock" && (
+              <span className="ml-2 text-info">(Demo data)</span>
+            )}
+          </p>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refresh()}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <RefreshCw className="h-4 w-4" />
+          )}
+          <span className="ml-2">Refresh</span>
+        </Button>
+      </div>
+
+      {source === "mock" && (
+        <div className="flex items-center gap-2 rounded-lg border border-info/30 bg-info/10 p-3">
+          <Info className="h-4 w-4 text-info" />
+          <p className="text-sm text-info">
+            Run <code className="rounded bg-info/20 px-1">navgator scan</code> to scan your project for real data.
+          </p>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Filter components..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="bg-card pl-9"
+          />
+        </div>
+        <div className="flex gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="gap-2 bg-transparent">
+                <Filter className="h-4 w-4" />
+                Type
+                {selectedTypes.length > 0 && (
+                  <Badge variant="secondary" className="ml-1 h-5 px-1.5">
+                    {selectedTypes.length}
+                  </Badge>
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {types.map((type) => (
+                <DropdownMenuCheckboxItem
+                  key={type}
+                  checked={selectedTypes.includes(type)}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      setSelectedTypes([...selectedTypes, type])
+                    } else {
+                      setSelectedTypes(selectedTypes.filter((t) => t !== type))
+                    }
+                  }}
+                >
+                  <span className="capitalize">{type}</span>
+                </DropdownMenuCheckboxItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="gap-2 bg-transparent">
+                <Filter className="h-4 w-4" />
+                Layer
+                {selectedLayers.length > 0 && (
+                  <Badge variant="secondary" className="ml-1 h-5 px-1.5">
+                    {selectedLayers.length}
+                  </Badge>
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {layers.map((layer) => (
+                <DropdownMenuCheckboxItem
+                  key={layer}
+                  checked={selectedLayers.includes(layer)}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      setSelectedLayers([...selectedLayers, layer])
+                    } else {
+                      setSelectedLayers(selectedLayers.filter((l) => l !== layer))
+                    }
+                  }}
+                >
+                  <span className="capitalize">{layer}</span>
+                </DropdownMenuCheckboxItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {/* Components List */}
+      <div className="grid gap-4 lg:grid-cols-2">
+        {Object.entries(grouped).map(([type, components]) => {
+          const Icon = typeIcons[type] || Box
+          const color = typeColors[type] || "text-muted-foreground"
+
+          return (
+            <Card key={type} className="bg-card">
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-base font-medium">
+                  <Icon className={cn("h-4 w-4", color)} />
+                  <span className="capitalize">{type}</span>
+                  <Badge variant="secondary" className="ml-auto">
+                    {components.length}
+                  </Badge>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="divide-y divide-border">
+                  {components.map((component) => (
+                    <button
+                      key={`${component.type}-${component.name}`}
+                      onClick={() => onSelectComponent(component.name)}
+                      className="flex w-full items-center justify-between py-2.5 text-left transition-colors hover:bg-secondary/50 -mx-2 px-2 rounded"
+                    >
+                      <div>
+                        <p className="text-sm font-medium text-card-foreground">
+                          {component.name}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          {component.version ? `v${component.version}` : component.purpose} ·{" "}
+                          {component.layer}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs text-muted-foreground">
+                          {component.connections} conn
+                        </span>
+                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,220 @@
+"use client"
+
+import { useState } from "react"
+import {
+  ArrowRight,
+  ArrowLeft,
+  Search,
+  Code2,
+  FileCode,
+  RefreshCw,
+  Loader2,
+  Info,
+} from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { cn } from "@/lib/utils"
+import { useConnections } from "@/lib/hooks"
+
+interface ConnectionsPanelProps {
+  selectedComponent: string | null
+  onSelectComponent: (name: string) => void
+}
+
+const connectionTypeColors: Record<string, string> = {
+  "service-call": "bg-chart-2/20 text-chart-2 border-chart-2/30",
+  "api-calls-db": "bg-chart-3/20 text-chart-3 border-chart-3/30",
+  "frontend-calls-api": "bg-chart-1/20 text-chart-1 border-chart-1/30",
+  "queue-triggers": "bg-chart-4/20 text-chart-4 border-chart-4/30",
+  "observes": "bg-info/20 text-info border-info/30",
+  "conforms-to": "bg-primary/20 text-primary border-primary/30",
+  "notifies": "bg-chart-5/20 text-chart-5 border-chart-5/30",
+  "stores": "bg-warning/20 text-warning border-warning/30",
+  "navigates-to": "bg-chart-1/20 text-chart-1 border-chart-1/30",
+  "requires-entitlement": "bg-destructive/20 text-destructive border-destructive/30",
+  "target-contains": "bg-chart-4/20 text-chart-4 border-chart-4/30",
+  "generates": "bg-chart-3/20 text-chart-3 border-chart-3/30",
+  "imports": "bg-muted text-muted-foreground border-muted",
+  "prompt-usage": "bg-warning/20 text-warning border-warning/30",
+  "deploys-to": "bg-info/20 text-info border-info/30",
+  "uses-package": "bg-chart-1/20 text-chart-1 border-chart-1/30",
+  "other": "bg-muted text-muted-foreground border-muted",
+}
+
+const connectionTypeLabels: Record<string, string> = {
+  "service-call": "Service Calls",
+  "api-calls-db": "DB Queries",
+  "frontend-calls-api": "API Calls",
+  "queue-triggers": "Queue Triggers",
+  "observes": "Observes",
+  "conforms-to": "Conforms To",
+  "notifies": "Notifies",
+  "stores": "Stores",
+  "navigates-to": "Navigates",
+  "requires-entitlement": "Entitlements",
+  "target-contains": "Target Contains",
+  "generates": "Generates",
+  "imports": "Imports",
+  "prompt-usage": "Prompt Usage",
+  "deploys-to": "Deploys To",
+  "uses-package": "Uses Package",
+  "other": "Other",
+}
+
+export function ConnectionsPanel({ selectedComponent, onSelectComponent }: ConnectionsPanelProps) {
+  const { connections, isLoading, source, refresh } = useConnections({ autoFetch: true })
+  const [search, setSearch] = useState("")
+  const [activeTab, setActiveTab] = useState("all")
+
+  const filtered = connections.filter((c) => {
+    const matchesSearch =
+      c.from.toLowerCase().includes(search.toLowerCase()) ||
+      c.to.toLowerCase().includes(search.toLowerCase()) ||
+      c.symbol.toLowerCase().includes(search.toLowerCase())
+
+    if (activeTab === "all") return matchesSearch
+    return matchesSearch && c.type === activeTab
+  })
+
+  // Dynamically group by connection type (only types that exist in the data)
+  const typeCounts = connections.reduce<Record<string, number>>((acc, c) => {
+    acc[c.type] = (acc[c.type] || 0) + 1
+    return acc
+  }, {})
+  const activeTypes = Object.entries(typeCounts)
+    .sort((a, b) => b[1] - a[1])
+    .map(([type]) => type)
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Connections</h1>
+          <p className="text-sm text-muted-foreground">
+            All detected relationships between components
+            {source === "mock" && (
+              <span className="ml-2 text-info">(Demo data)</span>
+            )}
+          </p>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refresh()}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <RefreshCw className="h-4 w-4" />
+          )}
+          <span className="ml-2">Refresh</span>
+        </Button>
+      </div>
+
+      {source === "mock" && (
+        <div className="flex items-center gap-2 rounded-lg border border-info/30 bg-info/10 p-3">
+          <Info className="h-4 w-4 text-info" />
+          <p className="text-sm text-info">
+            Run <code className="rounded bg-info/20 px-1">navgator scan</code> to scan your project for real data.
+          </p>
+        </div>
+      )}
+
+      {/* Search */}
+      <div className="relative max-w-md">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder="Search connections..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="bg-card pl-9"
+        />
+      </div>
+
+      {/* Tabs */}
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className="bg-secondary flex-wrap h-auto gap-1 p-1">
+          <TabsTrigger value="all">
+            All
+            <Badge variant="secondary" className="ml-2 h-5 px-1.5 bg-muted">
+              {filtered.length}
+            </Badge>
+          </TabsTrigger>
+          {activeTypes.map((type) => (
+            <TabsTrigger key={type} value={type}>
+              {connectionTypeLabels[type] || type.replace(/-/g, " ")}
+              <Badge variant="secondary" className="ml-2 h-5 px-1.5 bg-muted">
+                {typeCounts[type]}
+              </Badge>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        <TabsContent value={activeTab} className="mt-4">
+          <div className="space-y-3">
+            {filtered.map((connection, idx) => (
+              <Card
+                key={`${connection.id}-${idx}`}
+                className="bg-card transition-colors hover:bg-card/80"
+              >
+                <CardContent className="p-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="flex items-center gap-2 text-sm">
+                      <button
+                        onClick={() => {
+                          const name = connection.from.split("/").pop()?.replace(/\.(ts|tsx|js|jsx)$/, "") || connection.from
+                          onSelectComponent(name)
+                        }}
+                        className="flex items-center gap-1.5 rounded bg-secondary px-2 py-1 font-mono text-xs text-foreground hover:bg-secondary/80"
+                      >
+                        <FileCode className="h-3.5 w-3.5 text-muted-foreground" />
+                        {connection.from}
+                      </button>
+                      <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                      <button
+                        onClick={() => onSelectComponent(connection.to)}
+                        className="flex items-center gap-1.5 rounded bg-primary/10 px-2 py-1 font-mono text-xs text-primary hover:bg-primary/20"
+                      >
+                        {connection.to}
+                      </button>
+                    </div>
+                    <Badge
+                      variant="outline"
+                      className={cn("text-xs", connectionTypeColors[connection.type])}
+                    >
+                      {connection.type.replace(/-/g, " ")}
+                    </Badge>
+                  </div>
+
+                  <div className="mt-3 rounded-md bg-secondary/50 p-3">
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <Code2 className="h-3.5 w-3.5" />
+                      <span className="font-medium text-foreground">{connection.symbol}</span>
+                      <span>at line {connection.line}</span>
+                    </div>
+                    <pre className="mt-2 font-mono text-xs text-muted-foreground overflow-x-auto">
+                      {connection.code}
+                    </pre>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+
+            {filtered.length === 0 && (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-secondary">
+                  <ArrowLeft className="h-6 w-6 text-muted-foreground" />
+                </div>
+                <p className="mt-4 text-sm text-muted-foreground">No connections found</p>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}