+
+
+
+
+ {
+ const p = new URLSearchParams(searchParams);
+ p.delete("fileId");
+ p.delete("instanceId");
+ return `?${p.toString()}`;
+ }}
+ fileId={fileId}
+ toFileIdLink={(fId) => {
+ const p = new URLSearchParams(searchParams);
+ p.set("fileId", fId);
+ p.delete("instanceId");
+ return `?${p.toString()}`;
+ }}
+ instanceId={instanceId}
+ toInstanceIdLink={(fId, iId) => {
+ const p = new URLSearchParams(searchParams);
+ p.set("fileId", fId);
+ p.set("instanceId", iId);
+ return `?${p.toString()}`;
+ }}
+ />
+
+
+ {fileId && instanceId ? (
+
+ {props.name}
+ 
+ NanoAPI
+
+
+ {!explorerTree
+ ? (
+
+
+ No matching files found
+
+ )
+ : (
+
+ {(() => {
+ switch (type) {
+ case "folder":
+ return (
+
+ );
+ case "file":
+ return (
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/components/SymbolExtractionDialog.tsx b/viewer/src/components/DependencyVisualizer/components/SymbolExtractionDialog.tsx
new file mode 100644
index 00000000..d1cf3dcf
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/components/SymbolExtractionDialog.tsx
@@ -0,0 +1,104 @@
+import { useState } from "react";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "../../shadcn/Dialog.tsx";
+import { Button } from "../../shadcn/Button.tsx";
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "../../shadcn/Card.tsx";
+import { Alert, AlertDescription, AlertTitle } from "../../shadcn/Alert.tsx";
+import { Separator } from "../../shadcn/Separator.tsx";
+import { Code, Copy, Info, Terminal } from "lucide-react";
+import { ScrollArea } from "../../shadcn/Scrollarea.tsx";
+
+export default function SymbolExtractionDialog(props: {
+ manifestId: string;
+ children: React.ReactNode;
+ filePath: string;
+ symbolIds: string[];
+}) {
+ const [open, setOpen] = useState(false);
+ const [copied, setCopied] = useState(false);
+
+ const generateCommand = () => {
+ const symbolOptions = props.symbolIds.map((symbolId) => {
+ return `--symbol="${props.filePath}|${symbolId}"`;
+ });
+ return `napi extract --manifestId=${props.manifestId} ${symbolOptions.join(" ")}`;
+ };
+
+ const copyToClipboard = async () => {
+ try {
+ await navigator.clipboard.writeText(generateCommand());
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error("Failed to copy to clipboard:", err);
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/components/contextMenu/FileContextMenu.tsx b/viewer/src/components/DependencyVisualizer/components/contextMenu/FileContextMenu.tsx
new file mode 100644
index 00000000..ee58290f
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/components/contextMenu/FileContextMenu.tsx
@@ -0,0 +1,84 @@
+import { Link, useSearchParams } from "react-router-dom";
+import type { DependencyManifest } from "../../../../types/dependencyManifest.ts";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../../../shadcn/Dropdownmenu.tsx";
+import { PanelRight, SearchCode } from "lucide-react";
+import DisplayNameWithTooltip from "../DisplayNameWithTooltip.tsx";
+
+export default function FileContextMenu(props: {
+ context:
+ | {
+ position: { x: number; y: number };
+ fileDependencyManifest: DependencyManifest[string];
+ }
+ | undefined;
+ onClose: () => void;
+ onOpenDetails: (filePath: string) => void;
+}) {
+ const [searchParams] = useSearchParams();
+
+ function getToFileLink(filePath: string) {
+ const newSearchParams = new URLSearchParams(searchParams);
+ newSearchParams.set("fileId", filePath);
+ newSearchParams.delete("instanceId");
+ return `?${newSearchParams.toString()}`;
+ }
+
+ return (
+
+
+ );
+ case "symbol":
+ return (
+
+
+
+
+
+
+
+
+
+ Highlight in graph
+
+
+
+
+
+
+
+ View graph for this file
+
+
+
+
+
+ );
+ }
+ })()}
+ {showChildren &&
+ Array.from(props.node.children.values()).map((child) => (
+
+
+
+
+
+
+
+
+ Highlight in graph
+
+
+
+
+
+
+
+ View graph for this symbol
+
+
+
+
+ props.onClose()}
+ >
+
+
+
+ {
+ props.context?.fileDependencyManifest &&
+ props.onOpenDetails(
+ props.context.fileDependencyManifest.filePath,
+ );
+ props.onClose();
+ }}
+ >
+
+
+
+
+
+
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/components/contextMenu/SymbolContextMenu.tsx b/viewer/src/components/DependencyVisualizer/components/contextMenu/SymbolContextMenu.tsx
new file mode 100644
index 00000000..29a925a4
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/components/contextMenu/SymbolContextMenu.tsx
@@ -0,0 +1,88 @@
+import { Link, useSearchParams } from "react-router-dom";
+import type { DependencyManifest } from "../../../../types/dependencyManifest.ts";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../../../shadcn/Dropdownmenu.tsx";
+import { PanelRight, SearchCode } from "lucide-react";
+import DisplayNameWithTooltip from "../DisplayNameWithTooltip.tsx";
+
+export default function SymbolContextMenu(props: {
+ context:
+ | {
+ position: { x: number; y: number };
+ fileDependencyManifest: DependencyManifest[string];
+ symbolDependencyManifest: DependencyManifest[string]["symbols"][string];
+ }
+ | undefined;
+ onClose: () => void;
+ onOpenDetails: (filePath: string, symbolId: string) => void;
+}) {
+ const [searchParams] = useSearchParams();
+
+ function getToSymbolLink(filePath: string, symbolId: string) {
+ const newSearchParams = new URLSearchParams(searchParams);
+ newSearchParams.set("fileId", filePath);
+ newSearchParams.set("instanceId", symbolId);
+ return `?${newSearchParams.toString()}`;
+ }
+
+ return (
+
+
+ Show details
+
+
+
+ Inspect symbols
+
+ props.onClose()}
+ >
+
+
+
+ {
+ props.context?.fileDependencyManifest &&
+ props.onOpenDetails(
+ props.context.fileDependencyManifest.filePath,
+ props.context.symbolDependencyManifest.id,
+ );
+ props.onClose();
+ }}
+ >
+
+
+
+
+
+
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/components/controls/ControlExtensions/FiltersExtension.tsx b/viewer/src/components/DependencyVisualizer/components/controls/ControlExtensions/FiltersExtension.tsx
new file mode 100644
index 00000000..c26f1099
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/components/controls/ControlExtensions/FiltersExtension.tsx
@@ -0,0 +1,95 @@
+import { type MouseEvent, useEffect, useState } from "react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "../../../../shadcn/Tooltip.tsx";
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../../../../shadcn/Dropdownmenu.tsx";
+import { Button } from "../../../../shadcn/Button.tsx";
+import { Funnel } from "lucide-react";
+
+export default function FiltersExtension(props: {
+ busy: boolean;
+ currentFileName?: string;
+ onFilterChange: (
+ showExternal: boolean,
+ showVariables: boolean,
+ showFunctions: boolean,
+ showClasses: boolean,
+ showStructs: boolean,
+ showEnums: boolean,
+ showInterfaces: boolean,
+ showRecords: boolean,
+ showDelegates: boolean,
+ ) => void;
+}) {
+ const [showExternal, setShowExternal] = useState(true);
+ const [showVariables, setShowVariables] = useState(true);
+ const [showFunctions, setShowFunctions] = useState(true);
+ const [showClasses, setShowClasses] = useState(true);
+ const [showStructs, setShowStructs] = useState(true);
+ const [showEnums, setShowEnums] = useState(true);
+ const [showInterfaces, setShowInterfaces] = useState(true);
+ const [showRecords, setShowRecords] = useState(true);
+ const [showDelegates, setShowDelegates] = useState(true);
+
+ useEffect(() => {
+ props.onFilterChange(
+ showExternal, showVariables, showFunctions, showClasses,
+ showStructs, showEnums, showInterfaces, showRecords, showDelegates,
+ );
+ }, [showExternal, showVariables, showFunctions, showClasses, showStructs, showEnums, showInterfaces, showRecords, showDelegates]);
+
+ function handleFilterClick(
+ e: MouseEvent
+
+ Show details
+
+
+
+ Inspect symbol
+
+
+
+
+
+ Fit to screen
+
+
+
+
+
+ Reset layout
+
+
+
+
+
+ Zoom out
+
+
+
+
+
+ Zoom in
+
+ {props.children}
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/components/detailsPanes/AlertBadge.tsx b/viewer/src/components/DependencyVisualizer/components/detailsPanes/AlertBadge.tsx
new file mode 100644
index 00000000..fcab2042
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/components/detailsPanes/AlertBadge.tsx
@@ -0,0 +1,16 @@
+import { Check, TriangleAlert } from "lucide-react";
+
+export default function AlertBadge(props: { count: number }) {
+ return (
+
+ {props.count > 0
+ ? (
+ <>
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/components/detailsPanes/FileDetailsPane.tsx b/viewer/src/components/DependencyVisualizer/components/detailsPanes/FileDetailsPane.tsx
new file mode 100644
index 00000000..d4517051
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/components/detailsPanes/FileDetailsPane.tsx
@@ -0,0 +1,167 @@
+import type { DependencyManifest } from "../../../../types/dependencyManifest.ts";
+import type { AuditManifest } from "../../../../types/auditManifest.ts";
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+} from "../../../shadcn/Sheet.tsx";
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "../../../shadcn/Card.tsx";
+import { Code, File, SearchCode } from "lucide-react";
+import { ScrollArea } from "../../../shadcn/Scrollarea.tsx";
+import { Button } from "../../../shadcn/Button.tsx";
+import { Link, useSearchParams } from "react-router-dom";
+import DisplayNameWithTooltip from "../DisplayNameWithTooltip.tsx";
+import Metrics from "./Metrics.tsx";
+import AlertBadge from "./AlertBadge.tsx";
+
+export default function FileDetailsPane(props: {
+ context:
+ | {
+ manifestId: string;
+ fileDependencyManifest: DependencyManifest[string];
+ fileAuditManifest: AuditManifest[string];
+ }
+ | undefined;
+ onClose: () => void;
+}) {
+ const [searchParams] = useSearchParams();
+
+ function getToFileLink(filePath: string) {
+ const newSearchParams = new URLSearchParams(searchParams);
+ newSearchParams.set("fileId", filePath);
+ newSearchParams.delete("instanceId");
+ return `?${newSearchParams.toString()}`;
+ }
+
+ return (
+
+ props.onClose()}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/components/detailsPanes/Metrics.tsx b/viewer/src/components/DependencyVisualizer/components/detailsPanes/Metrics.tsx
new file mode 100644
index 00000000..cab84ca7
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/components/detailsPanes/Metrics.tsx
@@ -0,0 +1,59 @@
+import type { DependencyManifest } from "../../../../types/dependencyManifest.ts";
+import type { AuditManifest } from "../../../../types/auditManifest.ts";
+import { Alert, AlertDescription } from "../../../shadcn/Alert.tsx";
+
+export default function Metrics(props: {
+ dependencyManifest:
+ | DependencyManifest[string]
+ | DependencyManifest[string]["symbols"][string]
+ | undefined;
+ auditManifest:
+ | AuditManifest[string]
+ | AuditManifest[string]["symbols"][string]
+ | undefined;
+}) {
+ function metricToHumanString(metric: string) {
+ switch (metric) {
+ case "linesCount":
+ return "Lines";
+ case "codeLineCount":
+ return "Code Lines";
+ case "characterCount":
+ return "Characters";
+ case "codeCharacterCount":
+ return "Code Characters";
+ case "dependencyCount":
+ return "Dependencies";
+ case "dependentCount":
+ return "Dependents";
+ case "cyclomaticComplexity":
+ return "Cyclomatic Complexity";
+ default:
+ return metric;
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Object.values(
+ props.context?.fileDependencyManifest?.symbols || {},
+ ).map((symbol) => (
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+ File Metrics
+
+
+
+ Symbols (
+ {Object.keys(
+ props.context?.fileDependencyManifest?.symbols || {},
+ ).length || 0}
+ )
+
+
+ {Object.entries(
+ Object.values(
+ props.context?.fileDependencyManifest?.symbols || {},
+ ).reduce(
+ (acc, symbol) => {
+ acc[symbol.type] = (acc[symbol.type] || 0) + 1;
+ return acc;
+ },
+ {} as Record,
+ ),
+ ).map(([type, count]) => (
+
+
+
+ ))}
+ {type}
+ {count}
+
+
+
+ {Object.entries(props.dependencyManifest?.metrics || {}).map((
+ [key, value],
+ ) => (
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/components/detailsPanes/SymbolDetailsPane.tsx b/viewer/src/components/DependencyVisualizer/components/detailsPanes/SymbolDetailsPane.tsx
new file mode 100644
index 00000000..c3685407
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/components/detailsPanes/SymbolDetailsPane.tsx
@@ -0,0 +1,165 @@
+import type { DependencyManifest } from "../../../../types/dependencyManifest.ts";
+import type { AuditManifest } from "../../../../types/auditManifest.ts";
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "../../../shadcn/Sheet.tsx";
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "../../../shadcn/Card.tsx";
+import { Code, File, SearchCode } from "lucide-react";
+import { ScrollArea } from "../../../shadcn/Scrollarea.tsx";
+import { Button } from "../../../shadcn/Button.tsx";
+import { Link, useSearchParams } from "react-router-dom";
+import DisplayNameWithTooltip from "../DisplayNameWithTooltip.tsx";
+import Metrics from "./Metrics.tsx";
+import AlertBadge from "./AlertBadge.tsx";
+
+export default function SymbolDetailsPane(props: {
+ context:
+ | {
+ manifestId: string;
+ fileDependencyManifest: DependencyManifest[string];
+ symbolDependencyManifest: DependencyManifest[string]["symbols"][string];
+ fileAuditManifest: AuditManifest[string];
+ symbolAuditManifest: AuditManifest[string]["symbols"][string];
+ }
+ | undefined;
+ onClose: () => void;
+}) {
+ const [searchParams] = useSearchParams();
+
+ function getToSymbolLink(filePath: string, symbolId: string) {
+ const newSearchParams = new URLSearchParams(searchParams);
+ newSearchParams.set("fileId", filePath);
+ newSearchParams.set("instanceId", symbolId);
+ return `?${newSearchParams.toString()}`;
+ }
+
+ function getToFileLink(filePath: string) {
+ const newSearchParams = new URLSearchParams(searchParams);
+ newSearchParams.set("fileId", filePath);
+ newSearchParams.delete("instanceId");
+ return `?${newSearchParams.toString()}`;
+ }
+
+ return (
+
+
+
+ {props.auditManifest?.alerts?.[key]?.message?.long}
+
+
+ )}
+
+ ))}
+
+
+ {(props.auditManifest?.alerts || {})?.[key] && (
+
+ {metricToHumanString(key)}
+
+ {value}
+
+ props.onClose()}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/visualizers/FileVisualizer.tsx b/viewer/src/components/DependencyVisualizer/visualizers/FileVisualizer.tsx
new file mode 100644
index 00000000..dfa2bc43
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/visualizers/FileVisualizer.tsx
@@ -0,0 +1,212 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import Controls from "../components/controls/Controls.tsx";
+import MetricsExtension from "../components/controls/ControlExtensions/MetricsExtension.tsx";
+import FiltersExtension from "../components/controls/ControlExtensions/FiltersExtension.tsx";
+import SymbolContextMenu from "../components/contextMenu/SymbolContextMenu.tsx";
+import SymbolDetailsPane from "../components/detailsPanes/SymbolDetailsPane.tsx";
+import { FileDependencyVisualizer } from "../../../cytoscape/fileDependencyVisualizer/index.ts";
+import type { DependencyManifest, Metric } from "../../../types/dependencyManifest.ts";
+import type { AuditManifest } from "../../../types/auditManifest.ts";
+import { useTheme } from "../../../contexts/ThemeProvider.tsx";
+
+interface FileVisualizerProps {
+ manifestId: string;
+ dependencyManifest: DependencyManifest;
+ auditManifest: AuditManifest;
+ highlightedCytoscapeRef:
+ | { filePath: string; symbolId: string | undefined }
+ | undefined;
+ fileId: string;
+}
+
+export default function FileVisualizer(props: FileVisualizerProps) {
+ const navigate = useNavigate();
+ const { theme } = useTheme();
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ const containerRef = useRef
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Symbol Metrics
+
+
+ File Metrics
+
+
+
+ setContextMenu(undefined)}
+ onOpenDetails={(filePath, symbolId) => {
+ const fileDependencyManifest = props.dependencyManifest[filePath];
+ const symbolDependencyManifest =
+ fileDependencyManifest.symbols[symbolId];
+ const fileAuditManifest = props.auditManifest[filePath];
+ const symbolAuditManifest = fileAuditManifest.symbols[symbolId];
+ setDetailsPane({
+ manifestId: props.manifestId,
+ fileDependencyManifest,
+ symbolDependencyManifest,
+ fileAuditManifest,
+ symbolAuditManifest,
+ });
+ }}
+ />
+
+ setDetailsPane(undefined)}
+ />
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/visualizers/ProjectVisualizer.tsx b/viewer/src/components/DependencyVisualizer/visualizers/ProjectVisualizer.tsx
new file mode 100644
index 00000000..eb4b160c
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/visualizers/ProjectVisualizer.tsx
@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import Controls from "../components/controls/Controls.tsx";
+import MetricsExtension from "../components/controls/ControlExtensions/MetricsExtension.tsx";
+import FileContextMenu from "../components/contextMenu/FileContextMenu.tsx";
+import FileDetailsPane from "../components/detailsPanes/FileDetailsPane.tsx";
+import { ProjectDependencyVisualizer } from "../../../cytoscape/projectDependencyVisualizer/index.ts";
+import type { DependencyManifest, Metric } from "../../../types/dependencyManifest.ts";
+import type { AuditManifest } from "../../../types/auditManifest.ts";
+import { useTheme } from "../../../contexts/ThemeProvider.tsx";
+
+interface ProjectVisualizerProps {
+ manifestId: string;
+ dependencyManifest: DependencyManifest;
+ auditManifest: AuditManifest;
+ highlightedCytoscapeRef:
+ | { filePath: string; symbolId: string | undefined }
+ | undefined;
+}
+
+export default function ProjectVisualizer(props: ProjectVisualizerProps) {
+ const navigate = useNavigate();
+ const { theme } = useTheme();
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ const containerRef = useRef
+ fileVisualizer?.layoutGraph(fileVisualizer.cy)}
+ >
+
+
+
+
+
+
+ setDetailsPane(undefined)}
+ />
+
+ setContextMenu(undefined)}
+ onOpenDetails={(filePath) => {
+ setDetailsPane({
+ manifestId: props.manifestId,
+ fileDependencyManifest: props.dependencyManifest[filePath],
+ fileAuditManifest: props.auditManifest[filePath],
+ });
+ }}
+ />
+
+ );
+}
diff --git a/viewer/src/components/DependencyVisualizer/visualizers/SymbolVisualizer.tsx b/viewer/src/components/DependencyVisualizer/visualizers/SymbolVisualizer.tsx
new file mode 100644
index 00000000..8533572e
--- /dev/null
+++ b/viewer/src/components/DependencyVisualizer/visualizers/SymbolVisualizer.tsx
@@ -0,0 +1,200 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import Controls from "../components/controls/Controls.tsx";
+import GraphDepthExtension from "../components/controls/ControlExtensions/GraphDepthExtension.tsx";
+import SymbolContextMenu from "../components/contextMenu/SymbolContextMenu.tsx";
+import SymbolDetailsPane from "../components/detailsPanes/SymbolDetailsPane.tsx";
+import { SymbolDependencyVisualizer } from "../../../cytoscape/symbolDependencyVisualizer/index.ts";
+import type { DependencyManifest } from "../../../types/dependencyManifest.ts";
+import type { AuditManifest } from "../../../types/auditManifest.ts";
+import { useTheme } from "../../../contexts/ThemeProvider.tsx";
+
+interface SymbolVisualizerProps {
+ manifestId: string;
+ dependencyManifest: DependencyManifest;
+ auditManifest: AuditManifest;
+ highlightedCytoscapeRef:
+ | { filePath: string; symbolId: string | undefined }
+ | undefined;
+ fileId: string;
+ instanceId: string;
+}
+
+export default function SymbolVisualizer(props: SymbolVisualizerProps) {
+ const navigate = useNavigate();
+ const { theme } = useTheme();
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ const containerRef = useRef
+ projectVisualizer?.layoutGraph(projectVisualizer.cy)}
+ >
+
+
+
+
+
+
+ setContextMenu(undefined)}
+ onOpenDetails={(filePath, symbolId) => {
+ const fileDependencyManifest = props.dependencyManifest[filePath];
+ const symbolDependencyManifest =
+ fileDependencyManifest.symbols[symbolId];
+ const fileAuditManifest = props.auditManifest[filePath];
+ const symbolAuditManifest = fileAuditManifest.symbols[symbolId];
+ setDetailsPane({
+ manifestId: props.manifestId,
+ fileDependencyManifest,
+ symbolDependencyManifest,
+ fileAuditManifest,
+ symbolAuditManifest,
+ });
+ }}
+ />
+
+ setDetailsPane(undefined)}
+ />
+
+ );
+}
diff --git a/viewer/src/components/shadcn/Alert.tsx b/viewer/src/components/shadcn/Alert.tsx
new file mode 100644
index 00000000..9ef9269b
--- /dev/null
+++ b/viewer/src/components/shadcn/Alert.tsx
@@ -0,0 +1,66 @@
+import type * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils.ts";
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+ {
+ variants: {
+ variant: {
+ default: "bg-card text-card-foreground",
+ destructive:
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps
+ symbolVisualizer?.layoutGraph(symbolVisualizer.cy)}
+ >
+
+
+
+
+ {children}
+
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ );
+}
+
+function SidebarTrigger({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps
+
+
+ {children}
+
+
+ {showIcon && (
+
+ );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+
+
+ );
+ }
+
+ return (
+ Loading manifests...
+
+
+ );
+}
diff --git a/viewer/src/pages/ManifestView.tsx b/viewer/src/pages/ManifestView.tsx
new file mode 100644
index 00000000..7ef8557e
--- /dev/null
+++ b/viewer/src/pages/ManifestView.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import { fetchManifest, fetchAudit, type ManifestEnvelope } from "../api";
+import type { DependencyManifest } from "../types/dependencyManifest";
+import type { AuditManifest } from "../types/auditManifest";
+import DependencyVisualizer from "../components/DependencyVisualizer/DependencyVisualizer";
+
+export default function ManifestView() {
+ const { id } = useParams<{ id: string }>();
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState
+
+
+
+
+ ) : (
+
+
+
+
+ {manifests.length === 0 ? (
+ + NanoAPI - Manifests +
+ +No manifests found.
+
+ Run{" "}
+
+ napi generate
+ {" "}
+ to create your first manifest.
+
+ {manifests.map((m) => (
+
+
+
+ {m.fileCount} files · Commit{" "}
+ {new Date(m.commitShaDate).toLocaleDateString()} ·
+ Generated {new Date(m.createdAt).toLocaleString()}
+
+
+
+ ))}
+
+ )}
+
+
+
+ {m.branch}
+
+
+
+
+
+ {m.commitSha.substring(0, 7)}
+
+
+
+ );
+ }
+
+ if (error || !envelope || !auditManifest) {
+ return (
+ Loading manifest...
+
+
+ );
+ }
+
+ return (
+ Error: {error || "Unknown error"}
+ + Back to manifests + +
+
+ );
+}
diff --git a/viewer/src/types/auditManifest.ts b/viewer/src/types/auditManifest.ts
new file mode 100644
index 00000000..b426cdf7
--- /dev/null
+++ b/viewer/src/types/auditManifest.ts
@@ -0,0 +1,23 @@
+import type { Metric } from "./dependencyManifest";
+
+export type AuditAlert = {
+ metric: Metric;
+ severity: number;
+ message: {
+ short: string;
+ long: string;
+ };
+};
+
+export type SymbolAuditManifest = {
+ id: string;
+ alerts: Record