@tyroneross/navgator 0.2.2 → 0.9.0

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

@@ -0,0 +1,309 @@
+"use client"
+
+import { useState } from "react"
+import {
+  AlertCircle,
+  AlertTriangle,
+  ChevronDown,
+  ChevronRight,
+  FileQuestion,
+  Loader2,
+  RefreshCw,
+  ShieldCheck,
+} from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Progress } from "@/components/ui/progress"
+import { useCoverage } from "@/lib/hooks"
+import type { CoverageGap } from "@/lib/types"
+
+const gapTypeConfig: Record<
+  string,
+  { label: string; icon: typeof AlertTriangle; color: string }
+> = {
+  "unmapped-file": {
+    label: "Unmapped Files",
+    icon: FileQuestion,
+    color: "text-amber-600",
+  },
+  "low-confidence-connection": {
+    label: "Low Confidence Connections",
+    icon: AlertTriangle,
+    color: "text-amber-600",
+  },
+  "zero-consumers": {
+    label: "Zero Consumers",
+    icon: AlertCircle,
+    color: "text-red-600",
+  },
+  "no-outgoing": {
+    label: "No Outgoing Connections",
+    icon: AlertCircle,
+    color: "text-blue-600",
+  },
+}
+
+const INITIAL_SHOW = 20
+
+export function CoveragePanel() {
+  const { coverage, isLoading, error, refresh } = useCoverage({ autoFetch: true })
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set())
+  const [showAll, setShowAll] = useState<Set<string>>(new Set())
+
+  const toggleGroup = (type: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev)
+      if (next.has(type)) next.delete(type)
+      else next.add(type)
+      return next
+    })
+  }
+
+  const toggleShowAll = (type: string) => {
+    setShowAll((prev) => {
+      const next = new Set(prev)
+      if (next.has(type)) next.delete(type)
+      else next.add(type)
+      return next
+    })
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  // Group gaps by type
+  const gapsByType = (coverage?.gaps || []).reduce<Record<string, CoverageGap[]>>(
+    (acc, gap) => {
+      if (!acc[gap.type]) acc[gap.type] = []
+      acc[gap.type].push(gap)
+      return acc
+    },
+    {}
+  )
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">
+            Architecture Coverage
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            {coverage
+              ? `${coverage.component_coverage.coverage_percent}% file coverage, ${coverage.connection_coverage.total_connections} connections tracked`
+              : "Analyzing architecture coverage"}
+          </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>
+
+      {error && (
+        <div className="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/10 p-3">
+          <AlertCircle className="h-4 w-4 text-destructive" />
+          <p className="text-sm text-destructive">{error}</p>
+        </div>
+      )}
+
+      {!coverage && !error && (
+        <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">
+            <ShieldCheck className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <p className="mt-4 text-sm font-medium text-foreground">
+            No coverage data
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Run <code className="rounded bg-secondary px-1">navgator scan</code>{" "}
+            to analyze your project.
+          </p>
+        </div>
+      )}
+
+      {coverage && (
+        <>
+          {/* Summary cards */}
+          <div className="grid gap-4 sm:grid-cols-3">
+            <Card className="bg-card">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">
+                  File Coverage
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-semibold text-foreground">
+                  {coverage.component_coverage.coverage_percent}%
+                </div>
+                <Progress
+                  value={coverage.component_coverage.coverage_percent}
+                  className="mt-2 h-2"
+                />
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {coverage.component_coverage.files_mapped_to_components} /{" "}
+                  {coverage.component_coverage.total_files_in_project} files
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-card">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">
+                  Connection Confidence
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-semibold text-foreground">
+                  {Math.round(coverage.overall_confidence * 100)}%
+                </div>
+                <div className="mt-2 flex gap-4 text-xs">
+                  <span className="text-green-600">
+                    {coverage.connection_coverage.by_confidence.high} high
+                  </span>
+                  <span className="text-amber-600">
+                    {coverage.connection_coverage.by_confidence.medium} med
+                  </span>
+                  <span className="text-red-600">
+                    {coverage.connection_coverage.by_confidence.low} low
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-card">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">
+                  Classification
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-semibold text-foreground">
+                  {Object.keys(coverage.connection_coverage.by_classification).length}
+                </div>
+                <div className="mt-2 space-y-1">
+                  {Object.entries(coverage.connection_coverage.by_classification)
+                    .sort((a, b) => b[1] - a[1])
+                    .slice(0, 4)
+                    .map(([cls, count]) => (
+                      <div
+                        key={cls}
+                        className="flex items-center justify-between text-xs"
+                      >
+                        <span className="text-muted-foreground">{cls}</span>
+                        <span className="font-medium text-foreground">
+                          {count}
+                        </span>
+                      </div>
+                    ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Gaps */}
+          {Object.keys(gapsByType).length > 0 && (
+            <div className="space-y-3">
+              <h2 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                Gaps ({coverage.gaps.length})
+              </h2>
+              {Object.entries(gapsByType).map(([type, gaps]) => {
+                const config = gapTypeConfig[type] || {
+                  label: type,
+                  icon: AlertTriangle,
+                  color: "text-muted-foreground",
+                }
+                const Icon = config.icon
+                const isExpanded = expandedGroups.has(type)
+                const isShowingAll = showAll.has(type)
+                const displayed = isShowingAll
+                  ? gaps
+                  : gaps.slice(0, INITIAL_SHOW)
+
+                return (
+                  <Card key={type} className="bg-card">
+                    <button
+                      className="flex w-full items-center gap-2 p-4 text-left"
+                      onClick={() => toggleGroup(type)}
+                    >
+                      {isExpanded ? (
+                        <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                      ) : (
+                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                      )}
+                      <Icon className={`h-4 w-4 ${config.color}`} />
+                      <span className="text-sm font-medium text-foreground">
+                        {config.label}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        ({gaps.length})
+                      </span>
+                    </button>
+                    {isExpanded && (
+                      <CardContent className="pt-0">
+                        <div className="divide-y divide-border">
+                          {displayed.map((gap, idx) => (
+                            <div
+                              key={`${gap.target}-${idx}`}
+                              className="py-2 first:pt-0 last:pb-0"
+                            >
+                              <p className="text-sm text-foreground font-mono">
+                                {gap.target}
+                              </p>
+                              <p className="text-xs text-muted-foreground">
+                                {gap.message}
+                              </p>
+                            </div>
+                          ))}
+                        </div>
+                        {gaps.length > INITIAL_SHOW && (
+                          <button
+                            onClick={() => toggleShowAll(type)}
+                            className="mt-2 text-xs text-primary hover:underline"
+                          >
+                            {isShowingAll
+                              ? "Show less"
+                              : `Show ${gaps.length - INITIAL_SHOW} more`}
+                          </button>
+                        )}
+                      </CardContent>
+                    )}
+                  </Card>
+                )
+              })}
+            </div>
+          )}
+
+          {/* No gaps */}
+          {coverage.gaps.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">
+                <ShieldCheck className="h-6 w-6 text-green-600" />
+              </div>
+              <p className="mt-4 text-sm font-medium text-foreground">
+                No coverage gaps
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                All components are well-connected.
+              </p>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,156 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import {
+  AlertTriangle,
+  AlertCircle,
+  Info,
+  Loader2,
+  RefreshCw,
+  Shield,
+} from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import type { RuleViolation, RulesApiResponse } from "@/lib/types"
+
+const severityConfig = {
+  error: { icon: AlertCircle, color: "text-red-600", label: "ERROR" },
+  warning: { icon: AlertTriangle, color: "text-amber-600", label: "WARN" },
+  info: { icon: Info, color: "text-blue-600", label: "INFO" },
+}
+
+const severityOrder: Array<"error" | "warning" | "info"> = ["error", "warning", "info"]
+
+export function RulesPanel() {
+  const [violations, setViolations] = useState<RuleViolation[]>([])
+  const [summary, setSummary] = useState<{ total: number; errors: number; warnings: number; info: number }>({ total: 0, errors: 0, warnings: 0, info: 0 })
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchRules = async () => {
+    setIsLoading(true)
+    setError(null)
+    try {
+      const res = await fetch("/api/rules")
+      const json: RulesApiResponse = await res.json()
+      if (json.success && json.data) {
+        setViolations(json.data.violations)
+        setSummary(json.data.summary)
+      } else {
+        setError(json.error || "Failed to load rules")
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch rules")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchRules()
+  }, [])
+
+  // Group violations by severity
+  const grouped = severityOrder.reduce<Record<string, RuleViolation[]>>((acc, sev) => {
+    const items = violations.filter((v) => v.severity === sev)
+    if (items.length > 0) acc[sev] = items
+    return acc
+  }, {})
+
+  if (isLoading) {
+    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="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Architecture Rules</h1>
+          <p className="text-sm text-muted-foreground">
+            {summary.total === 0
+              ? "No rule violations found"
+              : `${summary.total} violation${summary.total !== 1 ? "s" : ""} found`}
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={fetchRules} 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>
+
+      {error && (
+        <div className="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/10 p-3">
+          <AlertCircle className="h-4 w-4 text-destructive" />
+          <p className="text-sm text-destructive">{error}</p>
+        </div>
+      )}
+
+      {/* Summary stats */}
+      {summary.total > 0 && (
+        <div className="flex gap-6 text-sm">
+          {summary.errors > 0 && (
+            <span className="text-red-600 font-medium">{summary.errors} error{summary.errors !== 1 ? "s" : ""}</span>
+          )}
+          {summary.warnings > 0 && (
+            <span className="text-amber-600 font-medium">{summary.warnings} warning{summary.warnings !== 1 ? "s" : ""}</span>
+          )}
+          {summary.info > 0 && (
+            <span className="text-blue-600 font-medium">{summary.info} info</span>
+          )}
+        </div>
+      )}
+
+      {/* Violations grouped by severity */}
+      {Object.entries(grouped).map(([severity, items]) => {
+        const config = severityConfig[severity as keyof typeof severityConfig]
+        const SevIcon = config.icon
+
+        return (
+          <Card key={severity} className="bg-card">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-base font-medium">
+                <SevIcon className={`h-4 w-4 ${config.color}`} />
+                <span className={config.color}>{config.label}</span>
+                <span className="text-muted-foreground font-normal">({items.length})</span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="divide-y divide-border">
+                {items.map((v, idx) => (
+                  <div key={`${v.rule_id}-${idx}`} className="py-3 first:pt-0 last:pb-0">
+                    <p className="text-sm font-medium text-foreground">{v.rule_id.replace(/-/g, " ")}</p>
+                    <p className="mt-0.5 text-sm text-muted-foreground">{v.message}</p>
+                    {v.suggestion && (
+                      <p className="mt-0.5 text-xs text-muted-foreground/70">{v.suggestion}</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )
+      })}
+
+      {/* Empty state */}
+      {summary.total === 0 && !error && (
+        <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">
+            <Shield className="h-6 w-6 text-green-600" />
+          </div>
+          <p className="mt-4 text-sm font-medium text-foreground">All clear</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            No architecture rule violations detected.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -8,6 +8,10 @@ import {
   Share2,
   Settings,
   Brain,
+  Shield,
+  BarChart3,
+  Route,
+  Network,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import type { View } from "@/app/page"
@@ -24,6 +28,10 @@ const navItems = [
   { 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 },
+  { id: "rules" as const, label: "Rules", icon: Shield },
+  { id: "coverage" as const, label: "Coverage", icon: BarChart3 },
+  { id: "trace" as const, label: "Trace", icon: Route },
+  { id: "subgraph" as const, label: "Subgraph", icon: Network },
 ]
 
 export function Sidebar({ activeView, setActiveView }: SidebarProps) {

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

@@ -15,11 +15,14 @@ import {
   Brain,
   Loader2,
   Info,
+  Shield,
 } from "lucide-react"
+import { useState, useEffect } from "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"
+import type { RulesApiResponse } from "@/lib/types"
 
 interface StatusOverviewProps {
   onSelectComponent: (name: string) => void
@@ -62,6 +65,19 @@ export function StatusOverview({ onSelectComponent, onNavigate, onNavigateToType
   const { components, summary: componentsSummary, isLoading: componentsLoading } = useComponents({ autoFetch: true })
   const { calls, prompts, isLoading: promptsLoading } = usePrompts({ autoFetch: true })
 
+  // Fetch rules data
+  const [rulesSummary, setRulesSummary] = useState<{ total: number; errors: number; warnings: number; info: number } | null>(null)
+  useEffect(() => {
+    fetch("/api/rules")
+      .then((r) => r.json())
+      .then((json: RulesApiResponse) => {
+        if (json.success && json.data) {
+          setRulesSummary(json.data.summary)
+        }
+      })
+      .catch(() => {})
+  }, [])
+
   const isLoading = statusLoading || componentsLoading || promptsLoading
 
   // Count LLM issues for the stat card badge
@@ -99,6 +115,13 @@ export function StatusOverview({ onSelectComponent, onNavigate, onNavigateToType
       trend: llmIssueCount > 0 ? `${llmIssueCount} issues` : undefined,
       view: "llm" as View,
     },
+    {
+      label: "Rules",
+      value: rulesSummary ? rulesSummary.total.toString() : "—",
+      icon: Shield,
+      trend: rulesSummary?.errors ? `${rulesSummary.errors} errors` : undefined,
+      view: "rules" as View,
+    },
     {
       label: "Health",
       value: status?.stats.vulnerable_count === 0 ? "Good" : "Issues",
@@ -165,7 +188,7 @@ export function StatusOverview({ onSelectComponent, onNavigate, onNavigateToType
       )}
 
       {/* Stats Grid - Clickable Navigation */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
         {stats.map((stat) => (
           <button
             key={stat.label}