@tyroneross/navgator 0.2.0 → 0.2.1

package/web/.next/standalone/web/components/sidebar.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import {
+  LayoutDashboard,
+  Boxes,
+  GitBranch,
+  Target,
+  Share2,
+  Settings,
+  Brain,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import type { View } from "@/app/page"
+
+interface SidebarProps {
+  activeView: View
+  setActiveView: (view: View) => void
+}
+
+const navItems = [
+  { id: "overview" as const, label: "Overview", icon: LayoutDashboard },
+  { id: "components" as const, label: "Components", icon: Boxes },
+  { id: "connections" as const, label: "Connections", icon: GitBranch },
+  { id: "impact" as const, label: "Impact", icon: Target },
+  { id: "diagram" as const, label: "Diagram", icon: Share2 },
+  { id: "llm" as const, label: "LLM Tracking", icon: Brain },
+]
+
+export function Sidebar({ activeView, setActiveView }: SidebarProps) {
+  return (
+    <aside className="hidden w-56 shrink-0 border-r border-border bg-sidebar md:block">
+      <nav className="flex h-full flex-col p-3">
+        <div className="space-y-1">
+          {navItems.map((item) => (
+            <button
+              key={item.id}
+              onClick={() => setActiveView(item.id)}
+              className={cn(
+                "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                activeView === item.id
+                  ? "bg-sidebar-accent text-sidebar-primary"
+                  : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
+              )}
+            >
+              <item.icon className="h-4 w-4" />
+              {item.label}
+              {activeView === item.id && (
+                <span className="ml-auto h-1.5 w-1.5 rounded-full bg-sidebar-primary" />
+              )}
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-auto space-y-1 border-t border-sidebar-border pt-3">
+          <button
+            onClick={() => setActiveView("settings")}
+            className={cn(
+              "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+              activeView === "settings"
+                ? "bg-sidebar-accent text-sidebar-primary"
+                : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
+            )}
+          >
+            <Settings className="h-4 w-4" />
+            Settings
+            {activeView === "settings" && (
+              <span className="ml-auto h-1.5 w-1.5 rounded-full bg-sidebar-primary" />
+            )}
+          </button>
+        </div>
+      </nav>
+    </aside>
+  )
+}

package/web/.next/standalone/web/components/status-overview.tsx

@@ -0,0 +1,326 @@
+"use client"
+
+import {
+  Boxes,
+  GitBranch,
+  Clock,
+  CheckCircle2,
+  Package,
+  Database,
+  Cloud,
+  Server,
+  ChevronRight,
+  AlertTriangle,
+  Activity,
+  Brain,
+  Loader2,
+  Info,
+} from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { useStatus, useComponents, usePrompts } from "@/lib/hooks"
+import type { View } from "@/app/page"
+
+interface StatusOverviewProps {
+  onSelectComponent: (name: string) => void
+  onNavigate: (view: View) => void
+  onNavigateToType?: (type: string) => void
+}
+
+const typeIcons: Record<string, typeof Package> = {
+  npm: Package,
+  pip: Package,
+  cargo: Package,
+  service: Cloud,
+  database: Database,
+  queue: Server,
+  infra: Server,
+  framework: Boxes,
+  prompt: Brain,
+}
+
+const typeColors: Record<string, string> = {
+  npm: "text-chart-1",
+  pip: "text-chart-1",
+  cargo: "text-chart-1",
+  service: "text-chart-2",
+  database: "text-chart-3",
+  queue: "text-chart-4",
+  infra: "text-chart-5",
+  framework: "text-primary",
+  prompt: "text-info",
+}
+
+const quickActions = [
+  { label: "Run Full Scan", description: "Analyze entire codebase", icon: Activity, view: "settings" as View },
+  { label: "View Diagram", description: "Architecture visualization", icon: GitBranch, view: "diagram" as View },
+  { label: "Impact Analysis", description: "Check change effects", icon: AlertTriangle, view: "impact" as View },
+]
+
+export function StatusOverview({ onSelectComponent, onNavigate, onNavigateToType }: StatusOverviewProps) {
+  const { status, isLoading: statusLoading, error: statusError } = useStatus({ autoFetch: true })
+  const { components, summary: componentsSummary, isLoading: componentsLoading } = useComponents({ autoFetch: true })
+  const { calls, prompts, isLoading: promptsLoading } = usePrompts({ autoFetch: true })
+
+  const isLoading = statusLoading || componentsLoading || promptsLoading
+
+  // Count LLM issues for the stat card badge
+  const llmIssueCount = (() => {
+    let count = 0
+    for (const call of calls) {
+      if (call.provider === "unknown") count++
+      if (call.model === "unknown") count++
+    }
+    for (const prompt of prompts) {
+      if (prompt.usedBy.length === 0) count++
+    }
+    return count
+  })()
+
+  // Build stats from real data
+  const stats = [
+    {
+      label: "Components",
+      value: status?.stats.total_components?.toString() || "0",
+      icon: Boxes,
+      trend: componentsSummary?.outdatedCount ? `${componentsSummary.outdatedCount} outdated` : undefined,
+      view: "components" as View,
+    },
+    {
+      label: "Connections",
+      value: status?.stats.total_connections?.toString() || "0",
+      icon: GitBranch,
+      view: "connections" as View,
+    },
+    {
+      label: "LLM Calls",
+      value: calls.length.toString(),
+      icon: Brain,
+      trend: llmIssueCount > 0 ? `${llmIssueCount} issues` : undefined,
+      view: "llm" as View,
+    },
+    {
+      label: "Health",
+      value: status?.stats.vulnerable_count === 0 ? "Good" : "Issues",
+      icon: CheckCircle2,
+      status: status?.stats.vulnerable_count === 0 ? "success" : "warning",
+      view: "settings" as View,
+    },
+  ]
+
+  // Build components by type from real data
+  const componentsByType = Object.entries(status?.stats.components_by_type || {})
+    .map(([type, count]) => ({
+      type,
+      count,
+      icon: typeIcons[type] || Package,
+      color: typeColors[type] || "text-muted-foreground",
+    }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 6)
+
+  // Get top connected components from real data
+  const recentComponents = components
+    .map((c) => ({
+      name: c.name,
+      type: c.type,
+      layer: c.layer,
+      connections: c.connections,
+    }))
+    .sort((a, b) => b.connections - a.connections)
+    .slice(0, 5)
+  // Show loading state
+  if (isLoading && !status) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  // Show empty state if no scan data
+  const hasData = status && status.stats.total_components > 0
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">Architecture Status</h1>
+        <p className="text-sm text-muted-foreground">
+          {status?.project_name
+            ? `Overview of ${status.project_name} architecture and connections`
+            : "Overview of your project architecture and connections"}
+        </p>
+      </div>
+
+      {!hasData && (
+        <div className="flex items-center gap-2 rounded-lg border border-info/30 bg-info/10 p-4">
+          <Info className="h-5 w-5 text-info" />
+          <div>
+            <p className="text-sm font-medium text-info">No scan data found</p>
+            <p className="text-xs text-info/80">
+              Run <code className="rounded bg-info/20 px-1.5 py-0.5">navgator setup</code> to scan your project.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Stats Grid - Clickable Navigation */}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {stats.map((stat) => (
+          <button
+            key={stat.label}
+            onClick={() => stat.view && onNavigate(stat.view)}
+            className="group text-left"
+          >
+            <Card className="bg-card transition-all duration-200 group-hover:border-primary/50 group-hover:bg-secondary/50">
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary transition-colors group-hover:bg-primary/10">
+                    <stat.icon className="h-5 w-5 text-primary" />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {stat.trend && (
+                      <Badge variant="secondary" className="bg-primary/10 text-primary">
+                        {stat.trend}
+                      </Badge>
+                    )}
+                    {stat.status === "success" && (
+                      <Badge variant="secondary" className="bg-success/10 text-success">
+                        Healthy
+                      </Badge>
+                    )}
+                    {stat.status === "warning" && (
+                      <Badge variant="secondary" className="bg-warning/10 text-warning">
+                        Issues
+                      </Badge>
+                    )}
+                    <ChevronRight className="h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <p className="text-2xl font-semibold text-card-foreground">{stat.value}</p>
+                  <p className="text-sm text-muted-foreground">{stat.label}</p>
+                </div>
+              </CardContent>
+            </Card>
+          </button>
+        ))}
+      </div>
+
+      {/* Quick Actions */}
+      <div className="grid gap-3 sm:grid-cols-3">
+        {quickActions.map((action) => (
+          <button
+            key={action.label}
+            onClick={() => onNavigate(action.view)}
+            className="group flex items-center gap-3 rounded-lg border border-border bg-card p-4 text-left transition-all hover:border-primary/50 hover:bg-secondary/50"
+          >
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-secondary transition-colors group-hover:bg-primary/10">
+              <action.icon className="h-5 w-5 text-primary" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium text-card-foreground">{action.label}</p>
+              <p className="truncate text-xs text-muted-foreground">{action.description}</p>
+            </div>
+            <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+          </button>
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Components by Type */}
+        <Card className="bg-card">
+          <CardHeader className="flex flex-row items-center justify-between pb-3">
+            <CardTitle className="text-base font-medium">Components by Type</CardTitle>
+            <button
+              onClick={() => onNavigate("components")}
+              className="text-xs text-muted-foreground transition-colors hover:text-primary"
+            >
+              View all
+            </button>
+          </CardHeader>
+          <CardContent>
+            {componentsByType.length === 0 ? (
+              <p className="py-4 text-center text-sm text-muted-foreground">
+                No components scanned yet
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {componentsByType.map((item) => (
+                  <button
+                    key={item.type}
+                    onClick={() => onNavigateToType ? onNavigateToType(item.type) : onNavigate("components")}
+                    className="group flex w-full items-center gap-3 rounded-md p-2 transition-colors hover:bg-secondary"
+                  >
+                    <div className="flex h-8 w-8 items-center justify-center rounded bg-secondary transition-colors group-hover:bg-primary/10">
+                      <item.icon className={`h-4 w-4 ${item.color}`} />
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium text-card-foreground capitalize">
+                          {item.type}
+                        </span>
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm text-muted-foreground">{item.count}</span>
+                          <ChevronRight className="h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+                        </div>
+                      </div>
+                      <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-secondary">
+                        <div
+                          className="h-full rounded-full bg-primary transition-all"
+                          style={{ width: `${Math.min(100, (item.count / Math.max(...componentsByType.map(c => c.count), 1)) * 100)}%` }}
+                        />
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Recent Components */}
+        <Card className="bg-card">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base font-medium">Top Connected Components</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {recentComponents.length === 0 ? (
+              <p className="py-4 text-center text-sm text-muted-foreground">
+                No components scanned yet
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {recentComponents.map((component) => (
+                  <button
+                    key={component.name}
+                    onClick={() => onSelectComponent(component.name)}
+                    className="flex w-full items-center justify-between rounded-md px-3 py-2 text-left transition-colors hover:bg-secondary"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-8 w-8 items-center justify-center rounded bg-primary/10">
+                        <span className="text-xs font-medium text-primary">
+                          {component.name.slice(0, 2).toUpperCase()}
+                        </span>
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-card-foreground">{component.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {component.type} · {component.layer}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <GitBranch className="h-3.5 w-3.5 text-muted-foreground" />
+                      <span className="text-sm text-muted-foreground">{component.connections}</span>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/web/.next/standalone/web/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/web/.next/standalone/web/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/web/.next/standalone/web/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}