@tyroneross/navgator 0.2.0 → 0.2.1

package/web/.next/standalone/web/app/api/settings/route.ts

@@ -0,0 +1,198 @@
+/**
+ * API Route: /api/settings
+ *
+ * Loads and saves NavGator settings to .claude/settings.json
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+import * as fs from "fs/promises";
+import * as path from "path";
+
+interface SettingsData {
+  scan: {
+    rootPath: string;
+    excludePaths: string[];
+    includePatterns: string[];
+    scanDepth: number;
+    watchMode: boolean;
+    autoScanOnChange: boolean;
+  };
+  detection: {
+    npm: boolean;
+    database: boolean;
+    service: boolean;
+    queue: boolean;
+    cache: boolean;
+    storage: boolean;
+    auth: boolean;
+    llm: boolean;
+    staticAnalysis: boolean;
+    environmentVariables: boolean;
+    configFiles: boolean;
+  };
+  notifications: {
+    enabled: boolean;
+    onNewConnection: boolean;
+    onBreakingChange: boolean;
+    onSecurityIssue: boolean;
+    slackWebhook: string;
+  };
+  display: {
+    theme: "dark" | "light" | "system";
+    compactMode: boolean;
+    showLineNumbers: boolean;
+    diagramDirection: "TB" | "LR";
+    maxVisibleConnections: number;
+  };
+  lastSaved?: number;
+}
+
+const DEFAULTS: SettingsData = {
+  scan: {
+    rootPath: "./src",
+    excludePaths: ["node_modules", ".git", "dist", "build", ".next"],
+    includePatterns: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+    scanDepth: 10,
+    watchMode: false,
+    autoScanOnChange: true,
+  },
+  detection: {
+    npm: true,
+    database: true,
+    service: true,
+    queue: true,
+    cache: true,
+    storage: true,
+    auth: true,
+    llm: true,
+    staticAnalysis: true,
+    environmentVariables: true,
+    configFiles: true,
+  },
+  notifications: {
+    enabled: true,
+    onNewConnection: false,
+    onBreakingChange: true,
+    onSecurityIssue: true,
+    slackWebhook: "",
+  },
+  display: {
+    theme: "dark",
+    compactMode: false,
+    showLineNumbers: true,
+    diagramDirection: "TB",
+    maxVisibleConnections: 50,
+  },
+};
+
+let cachedData: SettingsData | null = null;
+let cacheTimestamp = 0;
+const CACHE_TTL = 30000;
+
+function getSettingsPath(projectPath?: string | null): string {
+  const root =
+    projectPath ||
+    process.env.NAVGATOR_PROJECT_PATH ||
+    process.cwd().replace(/\/web$/, "");
+  return path.join(root, ".claude", "settings.json");
+}
+
+async function loadSettings(
+  projectPath?: string | null
+): Promise<{ data: SettingsData; source: "local" | "default" }> {
+  const settingsPath = getSettingsPath(projectPath);
+  try {
+    const content = await fs.readFile(settingsPath, "utf-8");
+    const parsed = JSON.parse(content) as SettingsData;
+    // Merge with defaults to fill any missing keys
+    return {
+      data: {
+        scan: { ...DEFAULTS.scan, ...parsed.scan },
+        detection: { ...DEFAULTS.detection, ...parsed.detection },
+        notifications: { ...DEFAULTS.notifications, ...parsed.notifications },
+        display: { ...DEFAULTS.display, ...parsed.display },
+        lastSaved: parsed.lastSaved,
+      },
+      source: "local",
+    };
+  } catch {
+    return { data: { ...DEFAULTS }, source: "default" };
+  }
+}
+
+/**
+ * GET /api/settings
+ */
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const refresh = searchParams.get("refresh") === "true";
+  const projectPath = searchParams.get("path");
+
+  if (!refresh && cachedData && Date.now() - cacheTimestamp < CACHE_TTL) {
+    return NextResponse.json({
+      success: true,
+      data: cachedData,
+      source: "cache",
+    });
+  }
+
+  try {
+    const { data, source } = await loadSettings(projectPath);
+    cachedData = data;
+    cacheTimestamp = Date.now();
+
+    return NextResponse.json({ success: true, data, source });
+  } catch (error) {
+    return NextResponse.json({
+      success: false,
+      data: DEFAULTS,
+      source: "default",
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+}
+
+/**
+ * POST /api/settings
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const projectPath = body.projectPath || null;
+    const settingsPath = getSettingsPath(projectPath);
+
+    // Load existing, merge with incoming
+    const { data: existing } = await loadSettings(projectPath);
+    const merged: SettingsData = {
+      scan: body.scan ? { ...existing.scan, ...body.scan } : existing.scan,
+      detection: body.detection
+        ? { ...existing.detection, ...body.detection }
+        : existing.detection,
+      notifications: body.notifications
+        ? { ...existing.notifications, ...body.notifications }
+        : existing.notifications,
+      display: body.display
+        ? { ...existing.display, ...body.display }
+        : existing.display,
+      lastSaved: Date.now(),
+    };
+
+    // Ensure directory exists
+    await fs.mkdir(path.dirname(settingsPath), { recursive: true });
+    await fs.writeFile(settingsPath, JSON.stringify(merged, null, 2));
+
+    // Invalidate cache
+    cachedData = merged;
+    cacheTimestamp = Date.now();
+
+    return NextResponse.json({ success: true, data: merged });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "Failed to save",
+      },
+      { status: 500 }
+    );
+  }
+}

package/web/.next/standalone/web/app/api/status/route.ts

@@ -0,0 +1,169 @@
+/**
+ * API Route: /api/status
+ *
+ * Returns project status and metadata from NavGator scans.
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+import * as fs from "fs/promises";
+import * as path from "path";
+import type { StatusApiResponse, ProjectStatus } from "@/lib/types";
+
+// Cache for status data (keyed by project path)
+const statusCache = new Map<string, { data: ProjectStatus; timestamp: number }>();
+const CACHE_TTL = 30000; // 30 second cache
+
+/**
+ * GET /api/status
+ */
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const refresh = searchParams.get("refresh") === "true";
+  const projectPath = searchParams.get("path");
+
+  const cacheKey = projectPath || "__default__";
+  const cached = statusCache.get(cacheKey);
+
+  // Check cache
+  if (!refresh && cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return NextResponse.json<StatusApiResponse>({
+      success: true,
+      data: cached.data,
+      source: "cache",
+    });
+  }
+
+  try {
+    const data = await loadStatusData(projectPath);
+
+    if (data) {
+      statusCache.set(cacheKey, { data, timestamp: Date.now() });
+
+      return NextResponse.json<StatusApiResponse>({
+        success: true,
+        data,
+        source: "scan",
+      });
+    }
+
+    // No scan data - return empty state
+    return NextResponse.json<StatusApiResponse>({
+      success: true,
+      data: getEmptyStatus(projectPath),
+      source: "scan",
+      error: "No scan data found. Run `navgator setup` to scan your project.",
+    });
+  } catch (error) {
+    console.error("Error loading status data:", error);
+    return NextResponse.json<StatusApiResponse>({
+      success: false,
+      data: getEmptyStatus(projectPath),
+      source: "scan",
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+}
+
+// =============================================================================
+// DATA LOADING
+// =============================================================================
+
+async function loadStatusData(projectPath?: string | null): Promise<ProjectStatus | null> {
+  // Priority: query param > env var > NavGator directory
+  const root = projectPath ||
+    process.env.NAVGATOR_PROJECT_PATH ||
+    process.cwd().replace(/\/web$/, "");
+  const indexPath = path.join(root, ".claude", "architecture", "index.json");
+
+  try {
+    const content = await fs.readFile(indexPath, "utf-8");
+    const index = JSON.parse(content);
+
+    // Extract project name from path
+    const projectName = extractProjectName(root);
+
+    return {
+      project_path: root,
+      project_name: projectName,
+      last_scan: index.last_scan || null,
+      last_scan_formatted: index.last_scan
+        ? formatRelativeTime(index.last_scan)
+        : null,
+      stats: {
+        total_components: index.stats?.total_components || 0,
+        total_connections: index.stats?.total_connections || 0,
+        components_by_type: index.stats?.components_by_type || {},
+        connections_by_type: index.stats?.connections_by_type || {},
+        outdated_count: index.stats?.outdated_count || 0,
+        vulnerable_count: index.stats?.vulnerable_count || 0,
+      },
+    };
+  } catch {
+    return null;
+  }
+}
+
+function extractProjectName(projectPath: string): string {
+  // Try to read package.json for a proper name
+  try {
+    const packageJsonPath = path.join(projectPath, "package.json");
+    // Use sync read since we're in a helper function
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const packageJson = require(packageJsonPath);
+    if (packageJson.name) {
+      return formatProjectName(packageJson.name);
+    }
+  } catch {
+    // Fall back to directory name
+  }
+
+  // Extract from path - get last segment and format
+  const segments = projectPath.split(path.sep).filter(Boolean);
+  const dirName = segments[segments.length - 1] || "project";
+  return formatProjectName(dirName);
+}
+
+function formatProjectName(name: string): string {
+  // Convert kebab-case, snake_case, etc to Title Case
+  return name
+    .replace(/[-_]/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+    .trim();
+}
+
+function formatRelativeTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = now - timestamp;
+
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+
+  return new Date(timestamp).toLocaleDateString();
+}
+
+function getEmptyStatus(projectPath?: string | null): ProjectStatus {
+  // Priority: query param > env var > NavGator directory
+  const root = projectPath ||
+    process.env.NAVGATOR_PROJECT_PATH ||
+    process.cwd().replace(/\/web$/, "");
+  return {
+    project_path: root,
+    project_name: extractProjectName(root),
+    last_scan: null,
+    last_scan_formatted: null,
+    stats: {
+      total_components: 0,
+      total_connections: 0,
+      components_by_type: {},
+      connections_by_type: {},
+      outdated_count: 0,
+      vulnerable_count: 0,
+    },
+  };
+}

package/web/.next/standalone/web/app/globals.css

@@ -0,0 +1,99 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* Dark theme as default - developer tool aesthetic */
+  --background: oklch(0.09 0 0);
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(0.12 0 0);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.12 0 0);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.75 0.15 160);
+  --primary-foreground: oklch(0.1 0 0);
+  --secondary: oklch(0.18 0 0);
+  --secondary-foreground: oklch(0.95 0 0);
+  --muted: oklch(0.18 0 0);
+  --muted-foreground: oklch(0.6 0 0);
+  --accent: oklch(0.75 0.15 160);
+  --accent-foreground: oklch(0.1 0 0);
+  --destructive: oklch(0.6 0.2 25);
+  --destructive-foreground: oklch(0.95 0 0);
+  --border: oklch(0.22 0 0);
+  --input: oklch(0.18 0 0);
+  --ring: oklch(0.75 0.15 160);
+  --chart-1: oklch(0.75 0.15 160);
+  --chart-2: oklch(0.7 0.15 250);
+  --chart-3: oklch(0.75 0.18 45);
+  --chart-4: oklch(0.65 0.2 300);
+  --chart-5: oklch(0.7 0.15 200);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.1 0 0);
+  --sidebar-foreground: oklch(0.95 0 0);
+  --sidebar-primary: oklch(0.75 0.15 160);
+  --sidebar-primary-foreground: oklch(0.1 0 0);
+  --sidebar-accent: oklch(0.18 0 0);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.22 0 0);
+  --sidebar-ring: oklch(0.75 0.15 160);
+  
+  /* Custom tokens for NavGator */
+  --success: oklch(0.75 0.15 160);
+  --warning: oklch(0.75 0.18 70);
+  --info: oklch(0.7 0.15 250);
+}
+
+@theme inline {
+  --font-sans: 'Geist', 'Geist Fallback';
+  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/web/.next/standalone/web/app/layout.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import type { Metadata } from 'next'
+import { Geist, Geist_Mono } from 'next/font/google'
+import { Analytics } from '@vercel/analytics/next'
+import { ProjectProvider } from '@/lib/project-context'
+import './globals.css'
+
+const _geist = Geist({ subsets: ["latin"] });
+const _geistMono = Geist_Mono({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: 'NavGator - Architecture Connection Tracker',
+  description: 'Know your stack before you change it. Track architecture connections across your entire stack.',
+  generator: 'v0.app',
+  icons: {
+    icon: [
+      {
+        url: '/icon-light-32x32.png',
+        media: '(prefers-color-scheme: light)',
+      },
+      {
+        url: '/icon-dark-32x32.png',
+        media: '(prefers-color-scheme: dark)',
+      },
+      {
+        url: '/icon.svg',
+        type: 'image/svg+xml',
+      },
+    ],
+    apple: '/apple-icon.png',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={`font-sans antialiased`}>
+        <ProjectProvider>
+          {children}
+        </ProjectProvider>
+        <Analytics />
+      </body>
+    </html>
+  )
+}

package/web/.next/standalone/web/app/page.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { useState } from "react"
+import { Header } from "@/components/header"
+import { Sidebar } from "@/components/sidebar"
+import { StatusOverview } from "@/components/status-overview"
+import { ComponentsPanel } from "@/components/components-panel"
+import { ConnectionsPanel } from "@/components/connections-panel"
+import { ImpactAnalysis } from "@/components/impact-analysis"
+import { DiagramView } from "@/components/diagram-view"
+import { LLMTrackingPanel } from "@/components/llm-tracking-panel"
+import { SettingsPanel } from "@/components/settings-panel"
+import { useProjects } from "@/lib/hooks"
+import { useActiveProject } from "@/lib/project-context"
+import { useStatus } from "@/lib/hooks"
+
+export type View = "overview" | "components" | "connections" | "impact" | "diagram" | "llm" | "settings"
+
+export default function Dashboard() {
+  const [activeView, setActiveView] = useState<View>("overview")
+  const [selectedComponent, setSelectedComponent] = useState<string | null>(null)
+  const [initialTypeFilter, setInitialTypeFilter] = useState<string | null>(null)
+
+  const { activeProjectPath, setActiveProjectPath } = useActiveProject()
+  const { projects, isLoading: isLoadingProjects, addProject, removeProject } = useProjects()
+  const { status } = useStatus({ autoFetch: true })
+
+  const handleSelectProject = (path: string) => {
+    setActiveProjectPath(path)
+    // Reset view state when switching projects
+    setActiveView("overview")
+    setSelectedComponent(null)
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background">
+      <Header
+        activeProject={activeProjectPath}
+        projectName={status?.project_name || null}
+        projectPath={status?.project_path || activeProjectPath}
+        projects={projects}
+        onSelectProject={handleSelectProject}
+        onAddProject={addProject}
+        onRemoveProject={removeProject}
+        isLoadingProjects={isLoadingProjects}
+      />
+      <div className="flex flex-1">
+        <Sidebar activeView={activeView} setActiveView={setActiveView} />
+        <main className="flex-1 overflow-auto p-6">
+          {activeView === "overview" && (
+            <StatusOverview
+              onSelectComponent={(name) => {
+                setSelectedComponent(name)
+                setActiveView("impact")
+              }}
+              onNavigate={setActiveView}
+              onNavigateToType={(type) => {
+                setInitialTypeFilter(type)
+                setActiveView("components")
+              }}
+            />
+          )}
+          {activeView === "components" && (
+            <ComponentsPanel
+              initialTypeFilter={initialTypeFilter}
+              onSelectComponent={(name) => {
+                setSelectedComponent(name)
+                setInitialTypeFilter(null)
+                setActiveView("impact")
+              }}
+            />
+          )}
+          {activeView === "connections" && (
+            <ConnectionsPanel
+              selectedComponent={selectedComponent}
+              onSelectComponent={setSelectedComponent}
+            />
+          )}
+          {activeView === "impact" && (
+            <ImpactAnalysis
+              componentName={selectedComponent}
+              onSelectComponent={setSelectedComponent}
+            />
+          )}
+          {activeView === "diagram" && (
+            <DiagramView selectedComponent={selectedComponent} />
+          )}
+          {activeView === "llm" && <LLMTrackingPanel />}
+          {activeView === "settings" && <SettingsPanel />}
+        </main>
+      </div>
+    </div>
+  )
+}