+ NanoAPI
+
+
+ Search for a file or symbol.
+
+ The search will find partial matches in both symbol names and + file paths. +
+ + The search will find partial matches in both symbol names and + file paths. +
+ {!explorerTree
+ ? (
+
+
+ No Matching files found
+
+ )
+ : (
+
+ {(() => {
+ switch (type) {
+ case "folder":
+ return (
+
+ );
+ case "file":
+ return (
+
+ );
+}
diff --git a/packages/app/src/components/DependencyVisualizer/components/SymbolExtractionDialog.tsx b/packages/app/src/components/DependencyVisualizer/components/SymbolExtractionDialog.tsx
new file mode 100644
index 00000000..fbe5bc57
--- /dev/null
+++ b/packages/app/src/components/DependencyVisualizer/components/SymbolExtractionDialog.tsx
@@ -0,0 +1,107 @@
+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";
+import { toast } from "sonner";
+
+export default function SymbolExtractionDialog(props: {
+ 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 ${symbolOptions.join(" ")}`;
+ };
+
+ const copyToClipboard = async () => {
+ try {
+ await navigator.clipboard.writeText(generateCommand());
+ setCopied(true);
+ toast.info("Copied to clipboard");
+ } catch (err) {
+ console.error("Failed to copy to clipboard:", err);
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/packages/app/src/components/contextMenu/FileContextMenu.tsx b/packages/app/src/components/DependencyVisualizer/components/contextMenu/FileContextMenu.tsx
similarity index 74%
rename from packages/app/src/components/contextMenu/FileContextMenu.tsx
rename to packages/app/src/components/DependencyVisualizer/components/contextMenu/FileContextMenu.tsx
index a9c013fa..05a5910e 100644
--- a/packages/app/src/components/contextMenu/FileContextMenu.tsx
+++ b/packages/app/src/components/DependencyVisualizer/components/contextMenu/FileContextMenu.tsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router";
+import { Link, useSearchParams } from "react-router";
import type { FileDependencyManifest } from "@napi/shared";
import {
DropdownMenu,
@@ -7,7 +7,7 @@ import {
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
-} from "../shadcn/Dropdownmenu.tsx";
+} from "../../../shadcn/Dropdownmenu.tsx";
import { PanelRight, SearchCode } from "lucide-react";
import DisplayNameWithTooltip from "../DisplayNameWithTootip.tsx";
@@ -19,6 +19,15 @@ export default function FileContextMenu(props: {
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
+
+
+
+
@@ -70,24 +60,25 @@ export default function FileDetailsPane(props: {
onClick={props.onClose}
>
@@ -161,7 +152,7 @@ export default function FileDetailsPane(props: {
-
+
+
void;
- onAddSymbolsForExtraction: (filePath: string, symbolIds: string[]) => void;
}) {
- function markSymbolForExtraction(symbolId: string) {
- if (!props.context?.fileDependencyManifest) {
- return;
- }
+ const [searchParams] = useSearchParams();
- props.onAddSymbolsForExtraction(
- props.context.fileDependencyManifest.filePath,
- [symbolId],
- );
+ function getToSymbolLink(filePath: string, symbolId: string) {
+ const newSearchParams = new URLSearchParams(searchParams);
+ newSearchParams.set("fileId", filePath);
+ newSearchParams.set("instanceId", symbolId);
+ return `?${newSearchParams.toString()}`;
}
return (
@@ -48,7 +51,10 @@ export default function SymbolDetailsPane(props: {
onOpenChange={() => props.onClose()}
>
+
();
-
const containerRef = useRef(null);
const [busy, setBusy] = useState(true);
const [symbolVisualizer, setSymbolVisualizer] = useState<
@@ -81,18 +77,18 @@ export default function AuditInstancePage() {
useEffect(() => {
setBusy(true);
- if (!params.file || !params.instance) {
+ if (!props.fileId || !props.instanceId) {
return;
}
const symbolVisualizer = new SymbolDependencyVisualizer(
containerRef.current as HTMLElement,
- params.file,
- params.instance,
+ props.fileId,
+ props.instanceId,
dependencyDepth,
dependentDepth,
- context.dependencyManifest,
- context.auditManifest,
+ props.dependencyManifest,
+ props.auditManifest,
{
theme: theme,
onAfterNodeRightClick: (value: {
@@ -101,7 +97,7 @@ export default function AuditInstancePage() {
symbolId: string;
}) => {
const fileDependencyManifest =
- context.dependencyManifest[value.filePath];
+ props.dependencyManifest[value.filePath];
const symbolDependencyManifest =
fileDependencyManifest.symbols[value.symbolId];
setContextMenu({
@@ -118,7 +114,7 @@ export default function AuditInstancePage() {
symbolId,
);
const urlEncodedSymbolName =
- `/audit/${urlEncodedFileName}/${urlEncodedSymbolId}`;
+ `/${urlEncodedFileName}/${urlEncodedSymbolId}`;
navigate(urlEncodedSymbolName);
},
@@ -135,23 +131,23 @@ export default function AuditInstancePage() {
setSymbolVisualizer(undefined);
};
}, [
- context.dependencyManifest,
- context.auditManifest,
- params.file,
- params.instance,
+ props.dependencyManifest,
+ props.auditManifest,
+ props.fileId,
+ props.instanceId,
dependencyDepth,
dependentDepth,
]);
useEffect(() => {
if (symbolVisualizer) {
- if (context.highlightedCytoscapeRef) {
- symbolVisualizer.highlightNode(context.highlightedCytoscapeRef);
+ if (props.highlightedCytoscapeRef) {
+ symbolVisualizer.highlightNode(props.highlightedCytoscapeRef);
} else {
symbolVisualizer.unhighlightNodes();
}
}
- }, [context.highlightedCytoscapeRef]);
+ }, [props.highlightedCytoscapeRef]);
// Hook to update the theme in the graph
useEffect(() => {
@@ -169,12 +165,12 @@ export default function AuditInstancePage() {
symbolVisualizer?.layoutGraph(symbolVisualizer.cy)}
>
setContextMenu(undefined)}
onOpenDetails={(filePath, symbolId) => {
- const fileDependencyManifest = context.dependencyManifest[filePath];
+ const fileDependencyManifest = props.dependencyManifest[filePath];
const symbolDependencyManifest =
fileDependencyManifest.symbols[symbolId];
- const fileAuditManifest = context.auditManifest[filePath];
+ const fileAuditManifest = props.auditManifest[filePath];
const symbolAuditManifest = fileAuditManifest.symbols[symbolId];
setDetailsPane({
fileDependencyManifest,
@@ -208,9 +204,6 @@ export default function AuditInstancePage() {
setDetailsPane(undefined)}
- onAddSymbolsForExtraction={(filePath, symbolIds) => {
- context.onAddSymbolsForExtraction(filePath, symbolIds);
- }}
/>
);
diff --git a/packages/app/src/components/shadcn/Alert.tsx b/packages/app/src/components/shadcn/Alert.tsx
index f80fec6d..9ef9269b 100644
--- a/packages/app/src/components/shadcn/Alert.tsx
+++ b/packages/app/src/components/shadcn/Alert.tsx
@@ -1,16 +1,16 @@
-import * as React from "react";
+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 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+ "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-background text-foreground",
+ default: "bg-card text-card-foreground",
destructive:
- "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
},
},
defaultVariants: {
@@ -19,41 +19,48 @@ const alertVariants = cva(
},
);
-const Alert = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes & VariantProps
->(({ className, variant, ...props }, ref) => (
-
-));
-Alert.displayName = "Alert";
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ );
+}
-const AlertTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-AlertTitle.displayName = "AlertTitle";
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const AlertDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-AlertDescription.displayName = "AlertDescription";
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
export { Alert, AlertDescription, AlertTitle };
diff --git a/packages/app/src/components/shadcn/Breadcrumb.tsx b/packages/app/src/components/shadcn/Breadcrumb.tsx
index 05f4a7f6..3de86be9 100644
--- a/packages/app/src/components/shadcn/Breadcrumb.tsx
+++ b/packages/app/src/components/shadcn/Breadcrumb.tsx
@@ -1,108 +1,102 @@
-import * as React from "react";
+import type * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import { cn } from "../../lib/utils.ts";
-const Breadcrumb = React.forwardRef<
- HTMLElement,
- React.ComponentPropsWithoutRef<"nav"> & {
- separator?: React.ReactNode;
- }
->(({ ...props }, ref) => );
-Breadcrumb.displayName = "Breadcrumb";
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+ return ;
+}
-const BreadcrumbList = React.forwardRef<
- HTMLOListElement,
- React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
- ,
- VariantProps {
- asChild?: boolean;
-}
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}:
+ & React.ComponentProps<"button">
+ & VariantProps
+ & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : "button";
-const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button";
- return (
-
->(({ className, ...props }, ref) => (
-
-));
-Card.displayName = "Card";
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const CardHeader = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardHeader.displayName = "CardHeader";
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const CardTitle = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardTitle.displayName = "CardTitle";
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const CardDescription = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardDescription.displayName = "CardDescription";
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const CardContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardContent.displayName = "CardContent";
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const CardFooter = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardFooter.displayName = "CardFooter";
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
export {
Card,
+ CardAction,
CardContent,
CardDescription,
CardFooter,
diff --git a/packages/app/src/components/shadcn/Dialog.tsx b/packages/app/src/components/shadcn/Dialog.tsx
new file mode 100644
index 00000000..75b094ca
--- /dev/null
+++ b/packages/app/src/components/shadcn/Dialog.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import type * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils.ts";
+
+function Dialog({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ showCloseButton?: boolean;
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+ )}
+
+
+ );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ,
- React.ComponentPropsWithoutRef & {
- inset?: boolean;
- }
->(({ className, inset, children, ...props }, ref) => (
-
- {children}
-
-));
-DropdownMenuSubTrigger.displayName =
- DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, sideOffset = 4, ...props }, ref) => (
-
- ) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean;
+ variant?: "default" | "destructive";
+}) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean;
+}) {
+ return (
+
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean;
- }
->(({ className, inset, ...props }, ref) => (
- svg]:size-4 [&>svg]:shrink-0",
- inset && "pl-8",
- className,
- )}
- {...props}
- />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, checked, ...props }, ref) => (
-
-
-
-
-
- {children}
-
-));
-DropdownMenuCheckboxItem.displayName =
- DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
-
-
-
- {children}
-
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean;
- }
->(({ className, inset, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ) => {
+}: React.ComponentProps) {
+ return (
+ ) {
+ return & {
+ inset?: boolean;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ >(
- ({ className, type, ...props }, ref) => {
- return (
-
- );
- },
-);
-Input.displayName = "Input";
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ );
+}
export { Input };
diff --git a/packages/app/src/components/shadcn/Label.tsx b/packages/app/src/components/shadcn/Label.tsx
index c7fd301a..0fedd649 100644
--- a/packages/app/src/components/shadcn/Label.tsx
+++ b/packages/app/src/components/shadcn/Label.tsx
@@ -1,26 +1,24 @@
"use client";
-import * as React from "react";
+import type * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils.ts";
-const labelVariants = cva(
- "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-const Label = React.forwardRef<
- React.ElementRef,
- & React.ComponentPropsWithoutRef
- & VariantProps
->(({ className, ...props }, ref) => (
- ) {
+ return (
+ ) => (
- & {
- withHandle?: boolean;
-}) => (
- div]:rotate-90",
- className,
- )}
- {...props}
- >
- {withHandle && (
-
-);
-
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
diff --git a/packages/app/src/components/shadcn/Scrollarea.tsx b/packages/app/src/components/shadcn/Scrollarea.tsx
index 4364d158..b08e67cb 100644
--- a/packages/app/src/components/shadcn/Scrollarea.tsx
+++ b/packages/app/src/components/shadcn/Scrollarea.tsx
@@ -1,48 +1,58 @@
"use client";
-import * as React from "react";
+import type * as React from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { cn } from "../../lib/utils.ts";
-const ScrollArea = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
- {children}
-
-
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+function ScrollArea({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
-const ScrollBar = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, orientation = "vertical", ...props }, ref) => (
-
-
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ );
+}
export { ScrollArea, ScrollBar };
diff --git a/packages/app/src/components/shadcn/Separator.tsx b/packages/app/src/components/shadcn/Separator.tsx
index 13268e40..0d612faa 100644
--- a/packages/app/src/components/shadcn/Separator.tsx
+++ b/packages/app/src/components/shadcn/Separator.tsx
@@ -1,31 +1,28 @@
"use client";
-import * as React from "react";
+import type * as React from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import { cn } from "../../lib/utils.ts";
-const Separator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(
- (
- { className, orientation = "horizontal", decorative = true, ...props },
- ref,
- ) => (
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
) {
+ return ) {
+ return ) {
+ return ) {
+ return ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ) {
+ return (
+ & {
+ side?: "top" | "right" | "bottom" | "left";
+}) {
+ return (
+
+
+ {children}
+
+
+
+
+ );
+}
-interface SheetContentProps
- extends
- React.ComponentPropsWithoutRef,
- VariantProps {}
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const SheetContent = React.forwardRef<
- React.ElementRef,
- SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-
- ) {
+ return (
+ span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+ "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
size === "sm" && "text-xs",
size === "md" && "text-sm",
@@ -745,8 +691,7 @@ const SidebarMenuSubButton = React.forwardRef<
{...props}
/>
);
-});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+}
export {
Sidebar,
diff --git a/packages/app/src/components/shadcn/Skeleton.tsx b/packages/app/src/components/shadcn/Skeleton.tsx
index 20cc560d..89b225cc 100644
--- a/packages/app/src/components/shadcn/Skeleton.tsx
+++ b/packages/app/src/components/shadcn/Skeleton.tsx
@@ -1,12 +1,10 @@
import { cn } from "../../lib/utils.ts";
-function Skeleton({
- className,
- ...props
-}: React.HTMLAttributes) {
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
);
diff --git a/packages/app/src/components/shadcn/Slider.tsx b/packages/app/src/components/shadcn/Slider.tsx
index 556abc10..07138256 100644
--- a/packages/app/src/components/shadcn/Slider.tsx
+++ b/packages/app/src/components/shadcn/Slider.tsx
@@ -5,24 +5,62 @@ import * as SliderPrimitive from "@radix-ui/react-slider";
import { cn } from "../../lib/utils.ts";
-const Slider = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
-
-
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
+function Slider({
+ className,
+ defaultValue,
+ value,
+ min = 0,
+ max = 100,
+ ...props
+}: React.ComponentProps) {
+ const _values = React.useMemo(
+ () =>
+ Array.isArray(value)
+ ? value
+ : Array.isArray(defaultValue)
+ ? defaultValue
+ : [min, max],
+ [value, defaultValue, min, max],
+ );
+
+ return (
+
+
+
+ {Array.from(
+ { length: _values.length },
+ (_, index) => (
+
+ );
+}
export { Slider };
diff --git a/packages/app/src/components/shadcn/Sonner.tsx b/packages/app/src/components/shadcn/Sonner.tsx
new file mode 100644
index 00000000..2c5a2874
--- /dev/null
+++ b/packages/app/src/components/shadcn/Sonner.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme();
+
+ return (
+ ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- & React.ComponentPropsWithoutRef
- & VariantProps
->(({ className, variant, ...props }, ref) => {
- return (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ;
-
-type ToastActionElement = React.ReactElement;
-
-export {
- Toast,
- ToastAction,
- type ToastActionElement,
- ToastClose,
- ToastDescription,
- type ToastProps,
- ToastProvider,
- ToastTitle,
- ToastViewport,
-};
diff --git a/packages/app/src/components/shadcn/Toaster.tsx b/packages/app/src/components/shadcn/Toaster.tsx
deleted file mode 100644
index 39d06d71..00000000
--- a/packages/app/src/components/shadcn/Toaster.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import { useToast } from "./hooks/use-toast.tsx";
-import {
- Toast,
- ToastClose,
- ToastDescription,
- ToastProvider,
- ToastTitle,
- ToastViewport,
-} from "./Toast.tsx";
-
-export function Toaster() {
- const { toasts } = useToast();
-
- return (
-
- {toasts.map(function ({ id, title, description, action, ...props }) {
- return (
-
-
- );
- })}
-
- );
-}
diff --git a/packages/app/src/components/shadcn/Tooltip.tsx b/packages/app/src/components/shadcn/Tooltip.tsx
index 7e2d3805..e8d6446d 100644
--- a/packages/app/src/components/shadcn/Tooltip.tsx
+++ b/packages/app/src/components/shadcn/Tooltip.tsx
@@ -1,32 +1,61 @@
"use client";
-import * as React from "react";
+import type * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { cn } from "../../lib/utils.ts";
-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps) {
+ return ,
- React.ComponentPropsWithoutRef
->(({ className, sideOffset = 4, ...props }, ref) => (
-
-
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/packages/app/src/components/shadcn/hooks/use-toast.tsx b/packages/app/src/components/shadcn/hooks/use-toast.tsx
deleted file mode 100644
index 266573c8..00000000
--- a/packages/app/src/components/shadcn/hooks/use-toast.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-"use client";
-
-// Inspired by react-hot-toast library
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "../Toast.tsx";
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
- id: string;
- title?: React.ReactNode;
- description?: React.ReactNode;
- action?: ToastActionElement;
-};
-
-const actionTypes = {
- ADD_TOAST: "ADD_TOAST",
- UPDATE_TOAST: "UPDATE_TOAST",
- DISMISS_TOAST: "DISMISS_TOAST",
- REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
-let count = 0;
-
-function genId() {
- count = (count + 1) % Number.MAX_SAFE_INTEGER;
- return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
- | {
- type: ActionType["ADD_TOAST"];
- toast: ToasterToast;
- }
- | {
- type: ActionType["UPDATE_TOAST"];
- toast: Partial;
- }
- | {
- type: ActionType["DISMISS_TOAST"];
- toastId?: ToasterToast["id"];
- }
- | {
- type: ActionType["REMOVE_TOAST"];
- toastId?: ToasterToast["id"];
- };
-
-interface State {
- toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map>();
-
-const addToRemoveQueue = (toastId: string) => {
- if (toastTimeouts.has(toastId)) {
- return;
- }
-
- const timeout = setTimeout(() => {
- toastTimeouts.delete(toastId);
- dispatch({
- type: "REMOVE_TOAST",
- toastId: toastId,
- });
- }, TOAST_REMOVE_DELAY);
-
- toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
- switch (action.type) {
- case "ADD_TOAST":
- return {
- ...state,
- toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
- };
-
- case "UPDATE_TOAST":
- return {
- ...state,
- toasts: state.toasts.map((t) =>
- t.id === action.toast.id ? { ...t, ...action.toast } : t
- ),
- };
-
- case "DISMISS_TOAST": {
- const { toastId } = action;
-
- // ! Side effects ! - This could be extracted into a dismissToast() action,
- // but I'll keep it here for simplicity
- if (toastId) {
- addToRemoveQueue(toastId);
- } else {
- state.toasts.forEach((toast) => {
- addToRemoveQueue(toast.id);
- });
- }
-
- return {
- ...state,
- toasts: state.toasts.map((t) =>
- t.id === toastId || toastId === undefined
- ? {
- ...t,
- open: false,
- }
- : t
- ),
- };
- }
- case "REMOVE_TOAST":
- if (action.toastId === undefined) {
- return {
- ...state,
- toasts: [],
- };
- }
- return {
- ...state,
- toasts: state.toasts.filter((t) => t.id !== action.toastId),
- };
- }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
- memoryState = reducer(memoryState, action);
- listeners.forEach((listener) => {
- listener(memoryState);
- });
-}
-
-type Toast = Omit;
-
-function toast({ ...props }: Toast) {
- const id = genId();
-
- const update = (props: ToasterToast) =>
- dispatch({
- type: "UPDATE_TOAST",
- toast: { ...props, id },
- });
- const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-
- dispatch({
- type: "ADD_TOAST",
- toast: {
- ...props,
- id,
- open: true,
- onOpenChange: (open) => {
- if (!open) dismiss();
- },
- },
- });
-
- return {
- id: id,
- dismiss,
- update,
- };
-}
-
-function useToast() {
- const [state, setState] = React.useState(memoryState);
-
- React.useEffect(() => {
- listeners.push(setState);
- return () => {
- const index = listeners.indexOf(setState);
- if (index > -1) {
- listeners.splice(index, 1);
- }
- };
- }, [state]);
-
- return {
- ...state,
- toast,
- dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
- };
-}
-
-export { toast, useToast };
diff --git a/packages/app/src/main.tsx b/packages/app/src/main.tsx
index 5a5526e1..b2ea5b59 100644
--- a/packages/app/src/main.tsx
+++ b/packages/app/src/main.tsx
@@ -2,36 +2,15 @@
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
-import { createBrowserRouter, Navigate, RouterProvider } from "react-router";
-import BaseAuditPage from "./pages/audit/base.tsx";
-import AuditPage from "./pages/audit/index.tsx";
-import AuditFilePage from "./pages/audit/file/index.tsx";
-import AuditInstancePage from "./pages/audit/file/instance/index.tsx";
-import { Toaster } from "./components/shadcn/Toaster.tsx";
+import { createBrowserRouter, RouterProvider } from "react-router";
+import { Toaster } from "./components/shadcn/Sonner.tsx";
import { ThemeProvider } from "./contexts/ThemeProvider.tsx";
+import IndexPage from "./pages/index.tsx";
const router = createBrowserRouter([
{
path: "/",
- element:
+
,
);
diff --git a/packages/app/src/pages/audit/base.tsx b/packages/app/src/pages/audit/base.tsx
deleted file mode 100644
index 2b49fc75..00000000
--- a/packages/app/src/pages/audit/base.tsx
+++ /dev/null
@@ -1,779 +0,0 @@
-import { useEffect, useState } from "react";
-import { Link, Outlet, useParams } from "react-router";
-import {
- getAuditManifest,
- getDependencyManifest,
- runExtraction,
-} from "../../service/api/index.ts";
-import type {
- AuditManifest,
- DependencyManifest,
- SymbolsToExtract,
-} from "@napi/shared";
-import {
- Sidebar,
- SidebarContent,
- SidebarGroup,
- SidebarGroupLabel,
- SidebarHeader,
- SidebarProvider,
- SidebarRail,
- SidebarTrigger,
-} from "../../components/shadcn/Sidebar.tsx";
-import {
- Breadcrumb,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbList,
- BreadcrumbSeparator,
-} from "../../components/shadcn/Breadcrumb.tsx";
-import { Button } from "../../components/shadcn/Button.tsx";
-import { Skeleton } from "../../components/shadcn/Skeleton.tsx";
-import { Input } from "../../components/shadcn/Input.tsx";
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from "../../components/shadcn/Tooltip.tsx";
-import {
- ChevronDown,
- ChevronRight,
- CircleMinus,
- Code,
- File,
- Loader,
- Moon,
- Pickaxe,
- ScanEye,
- SearchCode,
- Sun,
-} from "lucide-react";
-import {
- ResizableHandle,
- ResizablePanel,
- ResizablePanelGroup,
-} from "../../components/shadcn/Resizable.tsx";
-import { ScrollArea, ScrollBar } from "../../components/shadcn/Scrollarea.tsx";
-import { useToast } from "../../components/shadcn/hooks/use-toast.tsx";
-import { useTheme } from "../../contexts/ThemeProvider.tsx";
-import {
- Card,
- CardContent,
- CardHeader,
- CardTitle,
-} from "../../components/shadcn/Card.tsx";
-import DisplayNameWithTooltip from "../../components/DisplayNameWithTootip.tsx";
-
-export interface AuditContext {
- busy: boolean;
- dependencyManifest: DependencyManifest;
- auditManifest: AuditManifest;
- highlightedCytoscapeRef: {
- filePath: string;
- symbolId: string | undefined;
- } | undefined;
- onAddSymbolsForExtraction: (
- filePath: string,
- symbolIds: string[],
- ) => void;
-}
-
-export default function BaseAuditPage() {
- const { theme, setTheme } = useTheme();
-
- const { file, instance } = useParams();
-
- const { toast } = useToast();
-
- const [busy, setBusy] = useState(true);
-
- const [auditManifest, setAuditManifest] = useState({});
- const [dependencyManifest, setDependencyManifest] = useState<
- DependencyManifest
- >({});
-
- const [highlightedCytoscapeRef, setHighlightedCytoscapeRef] = useState<
- {
- filePath: string;
- symbolId: string | undefined;
- } | undefined
- >(undefined);
-
- const [symbolsToExtract, setSymbolsToExtract] = useState(
- [],
- );
-
- async function extractSymbols() {
- setBusy(true);
- const extractionToast = toast({
- title: "Extracting symbols",
- description: "This may take a while...",
- });
- try {
- await runExtraction(symbolsToExtract);
- extractionToast.update({
- id: extractionToast.id,
- description: "Symbols extracted successfully",
- });
- } catch (_error) {
- extractionToast.update({
- id: extractionToast.id,
- description: "Failed to extract symbols",
- variant: "destructive",
- });
- } finally {
- setBusy(false);
- }
- }
-
- useEffect(() => {
- async function handleOnLoad() {
- setBusy(true);
- const allPromiseToast = toast({
- title: "Loading manifests",
- description: "This may take a while...",
- });
- try {
- const dependencyManifestPromise = getDependencyManifest();
- const auditManifestPromise = getAuditManifest();
-
- const allPromise = Promise.all([
- dependencyManifestPromise,
- auditManifestPromise,
- ]);
-
- const [dependencyManifest, auditManifest] = await allPromise;
-
- setDependencyManifest(dependencyManifest);
- setAuditManifest(auditManifest);
-
- allPromiseToast.update({
- id: allPromiseToast.id,
- description: "Manifests loaded successfully",
- });
- } catch (_error) {
- allPromiseToast.update({
- id: allPromiseToast.id,
- description: "Failed to load manifests",
- variant: "destructive",
- });
- } finally {
- setBusy(false);
- }
- }
-
- handleOnLoad();
- }, []);
-
- return (
-
- {
- if (!node.fileId) return;
- const newRef = {
- filePath: node.fileId,
- symbolId: node.symbolId,
- };
- // If the new ref is the same as the current ref, we un set it (unhighlight)
- if (
- highlightedCytoscapeRef?.filePath === newRef.filePath &&
- highlightedCytoscapeRef?.symbolId === newRef.symbolId
- ) {
- setHighlightedCytoscapeRef(undefined);
- } else {
- setHighlightedCytoscapeRef(newRef);
- }
- }}
- toDetails={(node: ExplorerNodeData) => {
- if (node.symbolId && node.fileId) {
- return `/audit/${encodeURIComponent(node.fileId)}/${
- encodeURIComponent(node.symbolId)
- }`;
- } else if (node.fileId) {
- return `/audit/${encodeURIComponent(node.fileId)}`;
- } else {
- return "/audit";
- }
- }}
- symbolsToExtract={symbolsToExtract}
- onUpdateSymbolsToExtract={setSymbolsToExtract}
- onExtractSymbols={extractSymbols}
- />
-
- );
-}
-
-function BreadcrumbNav(props: {
- toProjectLink: () => string;
- fileId: string | undefined;
- toFileIdLink: (fileId: string) => string;
- instanceId: string | undefined;
- toInstanceIdLink: (fileId: string, instanceId: string) => string;
-}) {
- return (
-
-
-
-
- Project
-
-
- {props.fileId && (
- <>
-
-
-
- {props.fileId}
-
-
-
- {props.instanceId && (
- <>
-
-
-
- {props.instanceId}
-
-
-
-
- )}
-
- )}
-
-
- );
-}
-
-interface ExplorerNodeData {
- id: string;
- displayName: string;
- fileId?: string;
- symbolId?: string;
- children: Map;
-}
-
-function FileExplorerSidebar(props: {
- busy: boolean;
- dependencyManifest: DependencyManifest;
- auditManifest: AuditManifest;
- onHighlightInCytoscape: (node: ExplorerNodeData) => void;
- toDetails: (node: ExplorerNodeData) => string;
- symbolsToExtract: SymbolsToExtract;
- onUpdateSymbolsToExtract: (symbolsToExtract: SymbolsToExtract) => void;
- onExtractSymbols: () => void;
-}) {
- const [search, setSearch] = useState("");
-
- const [explorerTree, setExplorerTree] = useState();
-
- // Build the explorer tree when the dependency manifest changes
- useEffect(() => {
- const tree = buildExplorerTree(props.dependencyManifest, search);
- setExplorerTree(tree);
- }, [props.dependencyManifest, search]);
-
- function buildExplorerTree(
- dependencyManifest: DependencyManifest,
- search: string,
- ): ExplorerNodeData | undefined {
- const getExplorerNodeId = (filePath: string, instanceId?: string) => {
- if (instanceId) {
- return `${filePath}#${instanceId}`;
- }
- return filePath;
- };
-
- const root: ExplorerNodeData = {
- id: "root",
- displayName: "Project",
- children: new Map(),
- };
-
- // Filter function to check if a string matches the search term
- const matchesSearch = (text: string): boolean => {
- if (!search) return true;
- return text.toLowerCase().includes(search.toLowerCase());
- };
-
- // Track if any nodes match the search to avoid empty results
- let hasMatchingNodes = false;
-
- for (const fileDependencyManifest of Object.values(dependencyManifest)) {
- const filePath = fileDependencyManifest.filePath;
- const fileName = filePath.split("/").pop() || "";
- const fileMatchesSearch = matchesSearch(fileName);
-
- // Check if any symbols match the search
- const matchingSymbols = Object.keys(fileDependencyManifest.symbols)
- .filter(
- (symbolId) => matchesSearch(symbolId),
- );
-
- // Skip this file if neither the file nor any symbols match the search
- if (search && !fileMatchesSearch && matchingSymbols.length === 0) {
- continue;
- }
-
- hasMatchingNodes = true;
-
- const parts = filePath.split("/");
- let currentNode: ExplorerNodeData = root;
- for (const part of parts) {
- const id = getExplorerNodeId(part);
- if (!currentNode.children.has(id)) {
- currentNode.children.set(id, {
- id: id,
- displayName: part,
- children: new Map(),
- });
- }
- currentNode = currentNode.children.get(id)!;
- }
- currentNode.fileId = getExplorerNodeId(filePath);
-
- // Only add symbols that match the search or if no search is provided
- for (const instanceId of Object.keys(fileDependencyManifest.symbols)) {
- if (!search || matchesSearch(instanceId)) {
- const id = getExplorerNodeId(filePath, instanceId);
- currentNode.children.set(id, {
- id: id,
- displayName: instanceId,
- fileId: filePath,
- symbolId: instanceId,
- children: new Map(),
- });
- }
- }
- }
-
- // If no nodes match the search, return an empty tree
- if (search && !hasMatchingNodes) {
- return undefined;
- }
-
- const flattenTree = (node: ExplorerNodeData): ExplorerNodeData => {
- // First recursively flatten all children
- if (node.children.size > 0) {
- const flattenedChildren = new Map();
- for (const [id, child] of node.children) {
- const flattenedChild = flattenTree(child);
- flattenedChildren.set(id, flattenedChild);
- }
- node.children = flattenedChildren;
- }
-
- // Then check if this node has exactly one child that can be merged
- while (node.children.size === 1) {
- const childEntry = Array.from(node.children.entries())[0];
- const child = childEntry[1];
-
- // Skip if the child has symbols (is a leaf node)
- if (child.fileId) {
- break;
- }
-
- // Merge child's name into parent
- node.displayName = `${node.displayName}/${child.displayName}`;
- // Update the parent's id to child's id
- node.id = child.id;
- // Replace parent's children with child's children
- node.children = child.children;
- }
-
- return node;
- };
-
- // Flatten nodes that have only one child
- return flattenTree(root);
- }
-
- function removeSymbolsFromExtraction(filePath: string, symbolIds: string[]) {
- const newSymbolsToExtract = props.symbolsToExtract.map(
- (symbolToExtract) => {
- if (symbolToExtract.filePath === filePath) {
- // Only filter out the specific symbol IDs from this file's symbols array
- return {
- ...symbolToExtract,
- symbols: symbolToExtract.symbols.filter(
- (symbolId) => !symbolIds.includes(symbolId),
- ),
- };
- }
- return symbolToExtract;
- },
- ).filter((symbolToExtract) => symbolToExtract.symbols.length > 0); // Remove entries with no symbols left
-
- props.onUpdateSymbolsToExtract(newSymbolsToExtract);
- }
-
- return (
-
-
-
-
-
-
-
- {props.busy
- ? (
-
- {Array.from({ length: 10 }).map((_, index) => (
-
- )
- : (
-
-
-
-
-
-
- setSearch(e.target.value)}
- placeholder="Search"
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
- );
-}
-
-function ExplorerNode(props: {
- node: ExplorerNodeData;
- level: number;
- onHighlightInCytoscape: (node: ExplorerNodeData) => void;
- toDetails: (node: ExplorerNodeData) => string;
-}) {
- const [showChildren, setShowChildren] = useState(false);
-
- const type: "folder" | "file" | "symbol" = props.node.symbolId
- ? "symbol"
- : props.node.fileId
- ? "file"
- : "folder";
-
- return (
- (
+ undefined,
+ );
+ const [dependencyManifest, setDependencyManifest] = useState<
+ DependencyManifest | undefined
+ >(undefined);
+
+ const { theme } = useTheme();
+
+ useEffect(() => {
+ async function handleOnLoad() {
+ const dependencyManifestPromise = getDependencyManifest();
+ const auditManifestPromise = getAuditManifest();
+
+ const allPromise = Promise.all([
+ dependencyManifestPromise,
+ auditManifestPromise,
+ ]);
+
+ toast.promise(allPromise, {
+ loading: "Loading manifests",
+ success: "Manifests loaded successfully",
+ error: "Failed to load manifests",
+ });
+
+ const [dependencyManifest, auditManifest] = await allPromise;
+
+ setDependencyManifest(dependencyManifest);
+ setAuditManifest(auditManifest);
+ }
+
+ handleOnLoad();
+ }, []);
+
+ return (
+ ,
+ dependencyManifest: DependencyManifest,
) {
- const fileExtensions = getExtensionsForLanguage(napiConfig.language);
-
- const files = getFilesFromDirectory(workDir, {
- includes: napiConfig.project.include,
- excludes: napiConfig.project.exclude,
- extensions: fileExtensions,
- logMessages: true,
- });
-
- const dependencyManifest = generateDependencyManifest(files, napiConfig);
const auditManifest = generateAuditManifest(dependencyManifest, napiConfig);
const api = new Router();
@@ -42,43 +24,5 @@ export function getApi(
ctx.response.body = auditManifest;
});
- api.post("/api/extractSymbol", async (ctx) => {
- const body = await ctx.request.body.json();
-
- const parsedPayload = extractSymbolPayloadSchema.safeParse(body);
-
- if (!parsedPayload.success) {
- ctx.response.status = 400;
- ctx.response.body = {
- success: false,
- error: parsedPayload.error,
- };
- return;
- }
-
- const symbolsToExtract = new Map<
- string,
- { filePath: string; symbols: Set }
- >();
- for (const { filePath, symbols } of parsedPayload.data) {
- symbolsToExtract.set(filePath, { filePath, symbols: new Set(symbols) });
- }
-
- const extractedFileMap = extractSymbols(
- files,
- dependencyManifest,
- symbolsToExtract,
- napiConfig,
- );
-
- const outputDir = join(workDir, napiConfig.outDir);
- writeFilesToDirectory(extractedFileMap, outputDir);
-
- ctx.response.status = 200;
- ctx.response.body = {
- success: true,
- };
- });
-
return api;
}
diff --git a/packages/cli/src/api/types.ts b/packages/cli/src/api/types.ts
deleted file mode 100644
index f13066ee..00000000
--- a/packages/cli/src/api/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import z from "npm:zod";
-
-export const extractSymbolPayloadSchema = z.array(
- z.object({
- filePath: z.string(),
- symbols: z.array(z.string()),
- }),
-);
diff --git a/packages/cli/src/cli/handlers/audit/index.ts b/packages/cli/src/cli/handlers/audit/index.ts
deleted file mode 100644
index 050424da..00000000
--- a/packages/cli/src/cli/handlers/audit/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import viewHandler from "./view.ts";
-import type { Argv, InferredOptionTypes } from "npm:yargs";
-import type { globalOptions } from "../../helpers/options.ts";
-
-function builder(
- yargs: Argv<
- Omit & InferredOptionTypes
- >,
-) {
- return yargs
- .command(viewHandler)
- .demandCommand(1, "You need to specify a valid command");
-}
-
-function handler() {
- // do nothing, we are handling the subcommands
-}
-
-export default {
- command: "audit",
- describe: "audit your program",
- builder,
- handler,
-};
diff --git a/packages/cli/src/cli/handlers/audit/view.ts b/packages/cli/src/cli/handlers/audit/view.ts
deleted file mode 100644
index 69388722..00000000
--- a/packages/cli/src/cli/handlers/audit/view.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { ArgumentsCamelCase, InferredOptionTypes } from "npm:yargs";
-import type { globalOptions } from "../../helpers/options.ts";
-import { TelemetryEvents, trackEvent } from "../../../telemetry.ts";
-import { getConfigFromWorkDir } from "../../../config/localConfig.ts";
-import { runServer } from "../../helpers/server.ts";
-
-function handler(
- argv: ArgumentsCamelCase>,
-) {
- const start = Date.now();
-
- trackEvent(TelemetryEvents.CLI_AUDIT_VIEW_COMMAND, {
- message: "Audit view command started",
- });
-
- const napiConfig = getConfigFromWorkDir(argv.workdir);
-
- if (!napiConfig) {
- console.error("Missing .napirc file in project. Run `napi init` first");
- trackEvent(TelemetryEvents.CLI_AUDIT_VIEW_COMMAND, {
- message: "Audit view command failed, missing .napirc file",
- duration: Date.now() - start,
- });
- return;
- }
-
- runServer(argv.workdir, napiConfig, "audit");
-
- trackEvent(TelemetryEvents.CLI_AUDIT_VIEW_COMMAND, {
- message: "Audit view command finished",
- duration: Date.now() - start,
- });
-}
-
-export default {
- command: "view",
- describe: "Audit your program with the UI",
- builder: {},
- handler,
-};
diff --git a/packages/cli/src/cli/handlers/extract/index.ts b/packages/cli/src/cli/handlers/extract/index.ts
new file mode 100644
index 00000000..bbf2151c
--- /dev/null
+++ b/packages/cli/src/cli/handlers/extract/index.ts
@@ -0,0 +1,204 @@
+import type { ArgumentsCamelCase, Argv, InferredOptionTypes } from "npm:yargs";
+import type { globalOptions } from "../../index.ts";
+import { TelemetryEvents, trackEvent } from "../../../telemetry.ts";
+import type { localConfigSchema } from "../../../config/localConfig.ts";
+import {
+ dependencyManifestExists,
+ getDependencyManifest,
+ getDependencyManifestPath,
+} from "../../../manifest/dependencyManifest/index.ts";
+import type { z } from "zod";
+import { extractSymbols } from "../../../symbolExtractor/index.ts";
+import {
+ getExtensionsForLanguage,
+ getFilesFromDirectory,
+ writeFilesToDirectory,
+} from "../../../helpers/fileSystem/index.ts";
+import { join } from "@std/path";
+import { napiConfigMiddleware } from "../../middlewares/napiConfig.ts";
+
+// Type for the symbol option
+const extractOptions = {
+ symbol: {
+ type: "array" as const,
+ description:
+ "Symbols to extract (format: file|symbol where file is absolute path from .napirc and symbol is the symbol name)",
+ string: true,
+ requiresArg: true,
+ demandOption: true,
+ },
+} as const;
+
+function builderFunction(
+ yargs: Argv>,
+) {
+ return yargs
+ .middleware(napiConfigMiddleware)
+ .option("symbol", extractOptions.symbol)
+ .check((argv) => {
+ const symbols = argv.symbol;
+
+ if (!symbols || symbols.length === 0) {
+ throw new Error("At least one symbol must be specified");
+ }
+
+ // Validate each symbol format
+ for (const symbolSpec of symbols) {
+ const splitSymbol = symbolSpec.split("|");
+ if (splitSymbol.length !== 2) {
+ throw new Error(
+ `Invalid symbol format: "${symbolSpec}". Expected format: file|symbol (e.g., "src/main.py|myFunction")`,
+ );
+ }
+ }
+
+ return true;
+ });
+}
+
+function handler(
+ argv: ArgumentsCamelCase<
+ InferredOptionTypes & {
+ symbol: string[];
+ }
+ >,
+) {
+ const napiConfig = argv.napiConfig as z.infer;
+ const start = Date.now();
+
+ console.info("🎯 Starting symbol extraction...");
+
+ trackEvent(TelemetryEvents.CLI_EXTRACT_COMMAND, {
+ message: "`napi extract` command started",
+ });
+
+ try {
+ const manifestPath = getDependencyManifestPath(argv.workdir, napiConfig);
+ const manifestExists = dependencyManifestExists(argv.workdir, napiConfig);
+
+ if (!manifestExists) {
+ console.error("❌ No dependency manifest found");
+ console.error(` Looking for: ${manifestPath}`);
+ console.error("");
+ console.error("💡 To generate a manifest:");
+ console.error(" 1. Run: napi manifest generate");
+ console.error(" 2. Then try your extract command again");
+ Deno.exit(1);
+ }
+
+ console.info(`📄 Loading manifest from: ${manifestPath}`);
+ const dependencyManifest = getDependencyManifest(argv.workdir, napiConfig);
+
+ console.info("🔍 Validating symbol specifications...");
+ const symbolsToExtract = new Map<
+ string,
+ { filePath: string; symbols: Set }
+ >();
+
+ for (const symbolSpec of argv.symbol) {
+ const [filePath, symbolName] = symbolSpec.split("|", 2);
+
+ // Check if the file exists in the manifest
+ if (!dependencyManifest[filePath]) {
+ console.warn(`⚠️ File not found in manifest: ${filePath}`);
+ console.warn(
+ " Make sure the file is included in your project configuration",
+ );
+ }
+
+ // Get existing entry or create new one
+ const existingEntry = symbolsToExtract.get(filePath) || {
+ filePath,
+ symbols: new Set(),
+ };
+
+ // Add the symbol to the set
+ existingEntry.symbols.add(symbolName);
+
+ // Set/update the entry
+ symbolsToExtract.set(filePath, existingEntry);
+ }
+
+ console.info(
+ `📊 Extracting ${argv.symbol.length} symbols from ${symbolsToExtract.size} files:`,
+ );
+ for (const [filePath, { symbols }] of symbolsToExtract) {
+ console.info(` • ${filePath}: ${Array.from(symbols).join(", ")}`);
+ }
+
+ console.info("🔧 Scanning project files...");
+ const fileExtensions = getExtensionsForLanguage(napiConfig.language);
+
+ const files = getFilesFromDirectory(argv.workdir, {
+ includes: napiConfig.project.include,
+ excludes: napiConfig.project.exclude,
+ extensions: fileExtensions,
+ logMessages: false, // We'll handle our own logging
+ });
+
+ console.info(`📁 Found ${files.size} files to process`);
+ console.info("⚙️ Extracting symbols...");
+
+ const extractedFiles = extractSymbols(
+ files,
+ dependencyManifest,
+ symbolsToExtract,
+ napiConfig,
+ );
+
+ const unixTimestamp = Date.now();
+ const outputDir = join(
+ argv.workdir,
+ napiConfig.outDir,
+ `extracted-${unixTimestamp}`,
+ );
+
+ console.info(`💾 Writing extracted symbols to: ${outputDir}`);
+ writeFilesToDirectory(extractedFiles, outputDir);
+
+ const duration = Date.now() - start;
+ console.info(
+ `✅ Symbol extraction completed successfully in ${duration}ms`,
+ );
+ console.info(`📄 Extracted files:`);
+ console.info(` • ${extractedFiles.size} files generated`);
+ console.info(` • Output directory: ${outputDir}`);
+
+ trackEvent(TelemetryEvents.CLI_EXTRACT_COMMAND, {
+ message: "`napi extract` command finished",
+ duration: duration,
+ });
+ } catch (error: unknown) {
+ const duration = Date.now() - start;
+ const errorMessage = error instanceof Error ? error.message : String(error);
+
+ console.error("❌ Symbol extraction failed");
+ console.error(` Error: ${errorMessage}`);
+ console.error("");
+ console.error("💡 Common solutions:");
+ console.error(
+ " • Check your symbol specifications (format: file|symbol)",
+ );
+ console.error(
+ " • Ensure the manifest is up to date: napi manifest generate",
+ );
+ console.error(
+ " • Verify the specified files contain the requested symbols",
+ );
+
+ trackEvent(TelemetryEvents.CLI_EXTRACT_COMMAND, {
+ message: "`napi extract` command failed",
+ duration: duration,
+ error: errorMessage,
+ });
+
+ Deno.exit(1);
+ }
+}
+
+export default {
+ command: "extract",
+ describe: "extract symbols from your program",
+ builder: builderFunction,
+ handler,
+};
diff --git a/packages/cli/src/cli/handlers/init/index.ts b/packages/cli/src/cli/handlers/init/index.ts
index f43fc188..03efc568 100644
--- a/packages/cli/src/cli/handlers/init/index.ts
+++ b/packages/cli/src/cli/handlers/init/index.ts
@@ -3,7 +3,7 @@ import {
getConfigFromWorkDir,
} from "../../../config/localConfig.ts";
import type { ArgumentsCamelCase, InferredOptionTypes } from "npm:yargs";
-import type { globalOptions } from "../../helpers/options.ts";
+import type { globalOptions } from "../../index.ts";
import { TelemetryEvents, trackEvent } from "../../../telemetry.ts";
import { generateConfig } from "./prompts.ts";
import { confirm } from "npm:@inquirer/prompts";
@@ -12,6 +12,10 @@ async function handler(
argv: ArgumentsCamelCase>,
) {
const startTime = Date.now();
+
+ console.info("🚀 Initializing NanoAPI project...");
+ console.info(`📁 Working directory: ${argv.workdir}`);
+
trackEvent(TelemetryEvents.CLI_INIT_COMMAND, {
message: "Init command started",
});
@@ -20,27 +24,37 @@ async function handler(
// Check if config already exists
try {
if (getConfigFromWorkDir(argv.workdir)) {
+ console.warn("⚠️ Configuration file already exists");
+ console.info(` Found: ${argv.workdir}/.napirc`);
+
const confirmOverwrite = await confirm({
message:
`A .napirc file already exists in the selected directory. Do you want to overwrite it?`,
default: false,
});
if (!confirmOverwrite) {
+ console.info("✅ Keeping existing configuration");
return;
}
+ console.info("🔄 Proceeding with configuration overwrite");
}
} catch {
// Config doesn't exist, continue with initialization
+ console.info("📝 No existing configuration found - creating new one");
}
- console.info("Generating a new .napirc configuration file...");
+ console.info("");
+ console.info("🔧 Starting interactive configuration...");
// Generate the config using the interactive prompts
const napiConfig = await generateConfig(argv.workdir);
// Confirm and show the config
- console.info("\nGenerated configuration:");
+ console.info("");
+ console.info("📋 Generated configuration:");
+ console.info("─".repeat(50));
console.info(JSON.stringify(napiConfig, null, 2));
+ console.info("─".repeat(50));
const confirmSave = await confirm({
message: "Do you want to save this configuration?",
@@ -49,22 +63,44 @@ async function handler(
if (confirmSave) {
createConfig(napiConfig, argv.workdir);
- console.info("Successfully created .napirc");
+ const duration = Date.now() - startTime;
+ console.info("");
+ console.info("✅ Configuration saved successfully!");
+ console.info(`📄 Created: ${argv.workdir}/.napirc`);
+ console.info("");
+ console.info("🎉 Your NanoAPI project is ready!");
+ console.info("");
+ console.info(`⚡ Setup completed in ${duration}ms`);
} else {
- console.info("Configuration not saved.");
+ console.info("❌ Configuration not saved");
+ console.info(" Run 'napi init' again when you're ready to configure");
}
trackEvent(TelemetryEvents.CLI_INIT_COMMAND, {
message: "Init command finished",
duration: Date.now() - startTime,
});
- } catch (error) {
+ } catch (error: unknown) {
+ const duration = Date.now() - startTime;
+ const errorMessage = error instanceof Error ? error.message : String(error);
+
+ console.error("❌ Initialization failed");
+ console.error(` Error: ${errorMessage}`);
+ console.error("");
+ console.error("💡 Common solutions:");
+ console.error(
+ " • Check that you have write permissions in the directory",
+ );
+ console.error(" • Ensure the directory exists and is accessible");
+ console.error(" • Try running the command again");
+
trackEvent(TelemetryEvents.CLI_INIT_COMMAND, {
message: "Init command error",
- duration: Date.now() - startTime,
- error: error,
+ duration: duration,
+ error: errorMessage,
});
- throw error;
+
+ Deno.exit(1);
}
}
diff --git a/packages/cli/src/cli/handlers/manifest/generate.ts b/packages/cli/src/cli/handlers/manifest/generate.ts
new file mode 100644
index 00000000..a2161d67
--- /dev/null
+++ b/packages/cli/src/cli/handlers/manifest/generate.ts
@@ -0,0 +1,112 @@
+import type { ArgumentsCamelCase, InferredOptionTypes } from "npm:yargs";
+import type { globalOptions } from "../../index.ts";
+import { TelemetryEvents, trackEvent } from "../../../telemetry.ts";
+import type { localConfigSchema } from "../../../config/localConfig.ts";
+import {
+ getExtensionsForLanguage,
+ getFilesFromDirectory,
+} from "../../../helpers/fileSystem/index.ts";
+import {
+ generateDependencyManifest,
+ getDependencyManifestPath,
+} from "../../../manifest/dependencyManifest/index.ts";
+import type { z } from "zod";
+
+function handler(
+ argv: ArgumentsCamelCase>,
+) {
+ const napiConfig = argv.napiConfig as z.infer;
+
+ const start = Date.now();
+
+ console.info("🔧 Generating dependency manifest...");
+
+ trackEvent(TelemetryEvents.CLI_MANIFEST_GENERATE_COMMAND, {
+ message: "`napi manifest generate` command started",
+ });
+
+ try {
+ console.info(`📝 Language: ${napiConfig.language}`);
+ console.info(`📁 Working directory: ${argv.workdir}`);
+
+ const fileExtensions = getExtensionsForLanguage(napiConfig.language);
+ console.info(
+ `🔍 Looking for files with extensions: ${fileExtensions.join(", ")}`,
+ );
+
+ const files = getFilesFromDirectory(argv.workdir, {
+ includes: napiConfig.project.include,
+ excludes: napiConfig.project.exclude,
+ extensions: fileExtensions,
+ logMessages: true,
+ });
+
+ if (files.size === 0) {
+ console.warn("⚠️ No files found matching your project configuration");
+ console.warn(" Check your include/exclude patterns in .napirc");
+ console.warn("");
+ console.warn("💡 Current patterns:");
+ console.warn(` Include: ${napiConfig.project.include.join(", ")}`);
+ if (napiConfig.project.exclude) {
+ console.warn(` Exclude: ${napiConfig.project.exclude.join(", ")}`);
+ }
+ Deno.exit(1);
+ }
+
+ console.info(`📊 Processing ${files.size} files...`);
+
+ const dependencyManifest = generateDependencyManifest(files, napiConfig);
+
+ const manifestPath = getDependencyManifestPath(
+ argv.workdir,
+ napiConfig,
+ );
+
+ console.info(`💾 Writing manifest to: ${manifestPath}`);
+
+ Deno.writeTextFileSync(
+ manifestPath,
+ JSON.stringify(dependencyManifest, null, 2),
+ );
+
+ const duration = Date.now() - start;
+
+ console.info(`✅ Manifest generated successfully in ${duration}ms`);
+ console.info(`📄 Generated manifest contains:`);
+ console.info(` • ${Object.keys(dependencyManifest).length} files`);
+ console.info(` • Dependencies and relationships mapped`);
+
+ trackEvent(TelemetryEvents.CLI_MANIFEST_GENERATE_COMMAND, {
+ message: "`napi manifest generate` command finished",
+ duration: duration,
+ });
+ } catch (error: unknown) {
+ const duration = Date.now() - start;
+ const errorMessage = error instanceof Error ? error.message : String(error);
+
+ console.error("❌ Failed to generate manifest");
+ console.error(` Error: ${errorMessage}`);
+ console.error("");
+ console.error("💡 Common solutions:");
+ console.error(" • Check that your project files are accessible");
+ console.error(" • Verify your .napirc configuration");
+ console.error(
+ " • Ensure you have write permissions to the output directory",
+ );
+
+ trackEvent(TelemetryEvents.CLI_MANIFEST_GENERATE_COMMAND, {
+ message: "`napi manifest generate` command failed",
+ duration: duration,
+ error: errorMessage,
+ });
+
+ Deno.exit(1);
+ }
+}
+
+export default {
+ command: "generate",
+ describe: "generate a manifest for your program",
+ builder: {},
+ handler,
+};
diff --git a/packages/cli/src/cli/handlers/manifest/index.ts b/packages/cli/src/cli/handlers/manifest/index.ts
new file mode 100644
index 00000000..4cedeaaa
--- /dev/null
+++ b/packages/cli/src/cli/handlers/manifest/index.ts
@@ -0,0 +1,28 @@
+import generateHandler from "./generate.ts";
+import viewHandler from "./view.ts";
+import type { Argv, InferredOptionTypes } from "yargs";
+import type { globalOptions } from "../../index.ts";
+import { napiConfigMiddleware } from "../../middlewares/napiConfig.ts";
+
+function builder(
+ yargs: Argv<
+ InferredOptionTypes
+ >,
+) {
+ return yargs
+ .middleware(napiConfigMiddleware)
+ .command(generateHandler)
+ .command(viewHandler)
+ .demandCommand(1, "You need to specify a valid command");
+}
+
+function handler() {
+ // do nothing, we are handling the subcommands
+}
+
+export default {
+ command: "manifest",
+ describe: "generate a manifest for your program",
+ builder,
+ handler,
+};
diff --git a/packages/cli/src/cli/handlers/manifest/view.ts b/packages/cli/src/cli/handlers/manifest/view.ts
new file mode 100644
index 00000000..d87a8786
--- /dev/null
+++ b/packages/cli/src/cli/handlers/manifest/view.ts
@@ -0,0 +1,82 @@
+import type { ArgumentsCamelCase, InferredOptionTypes } from "yargs";
+import type { globalOptions } from "../../index.ts";
+import { TelemetryEvents, trackEvent } from "../../../telemetry.ts";
+import type { localConfigSchema } from "../../../config/localConfig.ts";
+import { runServer } from "../../helpers/server.ts";
+import {
+ dependencyManifestExists,
+ getDependencyManifest,
+ getDependencyManifestPath,
+} from "../../../manifest/dependencyManifest/index.ts";
+import type { z } from "zod";
+
+function handler(
+ argv: ArgumentsCamelCase>,
+) {
+ const napiConfig = argv.napiConfig as z.infer;
+
+ const start = Date.now();
+
+ console.info("🔍 Loading dependency manifest...");
+
+ trackEvent(TelemetryEvents.CLI_MANIFEST_VIEW_COMMAND, {
+ message: "`napi manifest view` command started",
+ });
+
+ try {
+ const manifestPath = getDependencyManifestPath(argv.workdir, napiConfig);
+ const manifestExists = dependencyManifestExists(argv.workdir, napiConfig);
+
+ if (!manifestExists) {
+ console.error("❌ No dependency manifest found");
+ console.error(` Looking for: ${manifestPath}`);
+ console.error("");
+ console.error("💡 To generate a manifest:");
+ console.error(" 1. Run: napi manifest generate");
+ console.error(" 2. Then try: napi manifest view");
+ Deno.exit(1);
+ }
+
+ console.info(`📄 Found manifest: ${manifestPath}`);
+ console.info("📊 Loading dependency data...");
+
+ const dependencyManifest = getDependencyManifest(argv.workdir, napiConfig);
+
+ const fileCount = Object.keys(dependencyManifest).length;
+ console.info(`✅ Loaded manifest with ${fileCount} files`);
+ console.info("🚀 Starting web server...");
+
+ runServer(argv.workdir, napiConfig, dependencyManifest);
+
+ trackEvent(TelemetryEvents.CLI_MANIFEST_VIEW_COMMAND, {
+ message: "`napi manifest view` command finished",
+ duration: Date.now() - start,
+ });
+ } catch (error: unknown) {
+ const duration = Date.now() - start;
+ const errorMessage = error instanceof Error ? error.message : String(error);
+
+ console.error("❌ Failed to view manifest");
+ console.error(` Error: ${errorMessage}`);
+ console.error("");
+ console.error("💡 Common solutions:");
+ console.error(" • Run 'napi manifest generate' to create a manifest");
+ console.error(" • Check that the manifest file is not corrupted");
+ console.error(" • Verify file permissions");
+
+ trackEvent(TelemetryEvents.CLI_MANIFEST_VIEW_COMMAND, {
+ message: "`napi manifest view` command failed",
+ duration: duration,
+ error: errorMessage,
+ });
+
+ Deno.exit(1);
+ }
+}
+
+export default {
+ command: "view",
+ describe: "view the dependency manifest for your program",
+ builder: {},
+ handler,
+};
diff --git a/packages/cli/src/cli/helpers/options.ts b/packages/cli/src/cli/helpers/options.ts
deleted file mode 100644
index f8421939..00000000
--- a/packages/cli/src/cli/helpers/options.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { PositionalOptionsType } from "npm:yargs";
-
-export const globalOptions = {
- workdir: {
- type: "string" as PositionalOptionsType,
- default: Deno.cwd(),
- alias: "wd",
- description: "working directory",
- },
-};
diff --git a/packages/cli/src/cli/helpers/server.ts b/packages/cli/src/cli/helpers/server.ts
index 7554e3f4..bac4b169 100644
--- a/packages/cli/src/cli/helpers/server.ts
+++ b/packages/cli/src/cli/helpers/server.ts
@@ -3,6 +3,10 @@ import type { localConfigSchema } from "../../config/localConfig.ts";
import { getApi } from "../../api/index.ts";
import { getFrontendApp } from "../../frontend/index.ts";
import { Application } from "@oak/oak/application";
+import {
+ dependencyManifestExists,
+} from "../../manifest/dependencyManifest/index.ts";
+import type { DependencyManifest } from "@napi/shared";
function findAvailablePort(port: number): Promise {
return new Promise((resolve, reject) => {
@@ -36,30 +40,73 @@ function openInBrowser(url: string) {
args = [url];
}
- new Deno.Command(command, { args }).spawn();
+ try {
+ new Deno.Command(command, { args }).spawn();
+ console.info("🌐 Opening browser...");
+ } catch (error) {
+ console.warn(
+ `⚠️ Could not open browser automatically: ${
+ error instanceof Error ? error.message : String(error)
+ }`,
+ );
+ console.info(` Please open ${url} manually in your browser`);
+ }
}
export async function runServer(
workdir: string,
napiConfig: z.infer,
- route: string,
+ dependencyManifest: DependencyManifest,
) {
- const app = new Application();
- const api = getApi(workdir, napiConfig);
- app.use(api.routes());
+ try {
+ console.info("🔧 Setting up web server...");
- // Keep last to handle SPA routing
- const frontendApp = getFrontendApp();
- app.use(frontendApp.routes());
+ const app = new Application();
- const port = await findAvailablePort(3000);
+ const manifestExists = dependencyManifestExists(workdir, napiConfig);
- const url = `http://localhost:${port}/${route}`;
- console.info("Press Ctrl+C to stop the server");
- console.info(`Server started at ${url}`);
- if (Deno.env.get("NODE_ENV") !== "development") {
- openInBrowser(url);
- }
+ if (!manifestExists) {
+ console.error("❌ No dependency manifest found");
+ console.error(" Run `napi manifest generate` first.");
+ Deno.exit(1);
+ }
+
+ console.info("📡 Configuring API routes...");
+ const api = getApi(napiConfig, dependencyManifest);
+ app.use(api.routes());
+
+ console.info("🎨 Setting up frontend application...");
+ // Keep last to handle SPA routing
+ const frontendApp = getFrontendApp();
+ app.use(frontendApp.routes());
- app.listen({ port });
+ console.info("🔍 Finding available port...");
+ const port = await findAvailablePort(3000);
+
+ const url = `http://localhost:${port}`;
+ console.info("");
+ console.info("🎉 Server ready!");
+ console.info(`📍 URL: ${url}`);
+ console.info("🛑 Press Ctrl+C to stop the server");
+ console.info("");
+
+ if (Deno.env.get("NODE_ENV") !== "development") {
+ openInBrowser(url);
+ } else {
+ console.info("🔧 Development mode: Browser will not open automatically");
+ }
+
+ console.info("⚡ Starting server...");
+ app.listen({ port });
+ } catch (error: unknown) {
+ const errorMessage = error instanceof Error ? error.message : String(error);
+ console.error("❌ Failed to start server");
+ console.error(` Error: ${errorMessage}`);
+ console.error("");
+ console.error("💡 Common solutions:");
+ console.error(" • Check if another process is using the port");
+ console.error(" • Verify you have permission to start a server");
+ console.error(" • Try restarting your terminal");
+ Deno.exit(1);
+ }
}
diff --git a/packages/cli/src/cli/index.ts b/packages/cli/src/cli/index.ts
index 7d279707..2fe568e7 100644
--- a/packages/cli/src/cli/index.ts
+++ b/packages/cli/src/cli/index.ts
@@ -1,27 +1,35 @@
-import yargs from "npm:yargs";
+import yargs, { type PositionalOptionsType } from "yargs";
import {
checkVersionMiddleware,
getCurrentVersion,
-} from "./helpers/checkVersion.ts";
-import { globalOptions } from "./helpers/options.ts";
+} from "./middlewares/checkVersion.ts";
import initCommand from "./handlers/init/index.ts";
-import auditCommand from "./handlers/audit/index.ts";
+import manifestCommand from "./handlers/manifest/index.ts";
+import extractCommand from "./handlers/extract/index.ts";
import { TelemetryEvents, trackEvent } from "../telemetry.ts";
+export const globalOptions = {
+ workdir: {
+ type: "string" as PositionalOptionsType,
+ default: Deno.cwd(),
+ alias: "wd",
+ description: "working directory",
+ },
+};
+
export function initCli() {
- trackEvent(TelemetryEvents.APP_START, {
+ trackEvent(TelemetryEvents.CLI_START, {
message: "Napi started",
});
yargs(Deno.args)
.scriptName("napi")
.usage("Usage: $0 [options]")
- .middleware(async () => {
- await checkVersionMiddleware();
- })
+ .middleware(checkVersionMiddleware)
.options(globalOptions)
.command(initCommand)
- .command(auditCommand)
+ .command(manifestCommand)
+ .command(extractCommand)
.demandCommand(1, "You need to specify a command")
.strict()
.help()
diff --git a/packages/cli/src/cli/helpers/checkVersion.ts b/packages/cli/src/cli/middlewares/checkVersion.ts
similarity index 93%
rename from packages/cli/src/cli/helpers/checkVersion.ts
rename to packages/cli/src/cli/middlewares/checkVersion.ts
index 29e14fa8..0c81f16c 100644
--- a/packages/cli/src/cli/helpers/checkVersion.ts
+++ b/packages/cli/src/cli/middlewares/checkVersion.ts
@@ -1,10 +1,11 @@
+import type { ArgumentsCamelCase } from "yargs";
import localPackageJson from "../../../../../deno.json" with { type: "json" };
export function getCurrentVersion() {
return localPackageJson.version;
}
-export async function checkVersionMiddleware() {
+export async function checkVersionMiddleware(_args: ArgumentsCamelCase) {
const currentVersion = getCurrentVersion();
try {
diff --git a/packages/cli/src/cli/middlewares/napiConfig.ts b/packages/cli/src/cli/middlewares/napiConfig.ts
new file mode 100644
index 00000000..1a596af2
--- /dev/null
+++ b/packages/cli/src/cli/middlewares/napiConfig.ts
@@ -0,0 +1,84 @@
+import type { ArgumentsCamelCase } from "yargs";
+import {
+ getConfigFromWorkDir,
+ isConfigExistInWorkdir,
+} from "../../config/localConfig.ts";
+import { join } from "@std/path";
+
+export function napiConfigMiddleware(
+ args: ArgumentsCamelCase<{
+ workdir: string;
+ }>,
+) {
+ try {
+ // First, check if the workdir itself exists
+ try {
+ const stat = Deno.statSync(args.workdir);
+ if (!stat.isDirectory) {
+ console.error("❌ Error: Specified path is not a directory");
+ console.error(` Path: ${args.workdir}`);
+ console.error(" Please specify a valid directory path.");
+ Deno.exit(1);
+ }
+ } catch (error: unknown) {
+ if (error instanceof Deno.errors.NotFound) {
+ console.error("❌ Error: Directory not found");
+ console.error(` Path: ${args.workdir}`);
+ console.error(
+ " Please check that the directory exists and try again.",
+ );
+ } else {
+ console.error("❌ Error: Cannot access directory");
+ console.error(` Path: ${args.workdir}`);
+ console.error(
+ ` Reason: ${
+ error instanceof Error ? error.message : String(error)
+ }`,
+ );
+ }
+ Deno.exit(1);
+ }
+
+ // Check if .napirc config file exists
+ const isConfigExist = isConfigExistInWorkdir(args.workdir);
+
+ if (!isConfigExist) {
+ console.error("❌ No .napirc configuration file found");
+ console.error(` Looking in: ${args.workdir}`);
+ console.error(" Expected file: .napirc");
+ console.error("");
+ console.error("💡 To get started:");
+ console.error(" 1. Navigate to your project directory");
+ console.error(" 2. Run: napi init");
+ console.error(" 3. Follow the interactive setup");
+ Deno.exit(1);
+ }
+
+ // Then validate and load the config
+ try {
+ const napiConfig = getConfigFromWorkDir(args.workdir);
+ args.napiConfig = napiConfig;
+ } catch (error: unknown) {
+ console.error("❌ Invalid .napirc configuration file");
+ console.error(` File: ${join(args.workdir, ".napirc")}`);
+ console.error(
+ ` Error: ${error instanceof Error ? error.message : String(error)}`,
+ );
+ console.error("");
+ console.error("💡 To fix this:");
+ console.error(" 1. Check your .napirc file for syntax errors");
+ console.error(" 2. Or run 'napi init' to regenerate the configuration");
+ Deno.exit(1);
+ }
+ } catch (error: unknown) {
+ // Catch any unexpected errors
+ console.error("❌ Unexpected error while loading configuration");
+ console.error(
+ ` ${error instanceof Error ? error.message : String(error)}`,
+ );
+ console.error("");
+ console.error("💡 If this persists, please report this issue at:");
+ console.error(" https://github.com/nanoapi-io/napi/issues");
+ Deno.exit(1);
+ }
+}
diff --git a/packages/cli/src/config/localConfig.ts b/packages/cli/src/config/localConfig.ts
index 3370e246..3fd6e3c5 100644
--- a/packages/cli/src/config/localConfig.ts
+++ b/packages/cli/src/config/localConfig.ts
@@ -65,6 +65,15 @@ export const localConfigSchema = z.object({
const napiConfigFileName = ".napirc";
+export function isConfigExistInWorkdir(workdir: string) {
+ try {
+ const napircPath = join(workdir, napiConfigFileName);
+ return Deno.statSync(napircPath).isFile;
+ } catch {
+ return false;
+ }
+}
+
export function getConfigFromWorkDir(workdir: string) {
const napircPath = join(workdir, napiConfigFileName);
diff --git a/packages/cli/src/manifest/dependencyManifest/index.ts b/packages/cli/src/manifest/dependencyManifest/index.ts
index 8bffd11b..5508c938 100644
--- a/packages/cli/src/manifest/dependencyManifest/index.ts
+++ b/packages/cli/src/manifest/dependencyManifest/index.ts
@@ -12,6 +12,7 @@ import {
csharpLanguage,
pythonLanguage,
} from "../../helpers/treeSitter/parsers.ts";
+import { join } from "@std/path";
const handlerMap: Record<
string,
@@ -73,3 +74,38 @@ export function generateDependencyManifest(
return sortedDepMap;
}
+
+export function getDependencyManifestPath(
+ workDir: string,
+ napiConfig: z.infer,
+) {
+ return join(workDir, napiConfig.outDir, "napi-manifest.json");
+}
+
+export function dependencyManifestExists(
+ workDir: string,
+ napiConfig: z.infer,
+) {
+ const manifestPath = getDependencyManifestPath(workDir, napiConfig);
+ try {
+ const stat = Deno.statSync(manifestPath);
+ return stat.isFile;
+ } catch (error) {
+ if (error instanceof Deno.errors.NotFound) {
+ return false;
+ }
+ throw error;
+ }
+}
+
+export function getDependencyManifest(
+ workDir: string,
+ napiConfig: z.infer,
+): DependencyManifest {
+ const manifestPath = getDependencyManifestPath(workDir, napiConfig);
+
+ const manifest = JSON.parse(
+ Deno.readTextFileSync(manifestPath),
+ ) as DependencyManifest;
+ return manifest;
+}
diff --git a/packages/cli/src/telemetry.ts b/packages/cli/src/telemetry.ts
index f174d43c..c295e081 100644
--- a/packages/cli/src/telemetry.ts
+++ b/packages/cli/src/telemetry.ts
@@ -2,12 +2,11 @@ import { getOrCreateGlobalConfig } from "./config/globalConfig.ts";
import denoJson from "../../../deno.json" with { type: "json" };
export enum TelemetryEvents {
- APP_START = "app_start",
+ CLI_START = "app_start",
CLI_INIT_COMMAND = "cli_init_command",
- CLI_AUDIT_VIEW_COMMAND = "cli_audit_view_command",
-
- API_REQUEST_CONGIG = "api_request_config",
- API_REQUEST_AUDIT_VIEW = "api_request_audit_view",
+ CLI_MANIFEST_GENERATE_COMMAND = "cli_manifest_generate_command",
+ CLI_MANIFEST_VIEW_COMMAND = "cli_manifest_view_command",
+ CLI_EXTRACT_COMMAND = "cli_extract_command",
}
export interface TelemetryEvent {
diff --git a/packages/shared/src/extraction/types.ts b/packages/shared/src/extraction/types.ts
deleted file mode 100644
index e25a0267..00000000
--- a/packages/shared/src/extraction/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type SymbolsToExtract = {
- filePath: string;
- symbols: string[];
-}[];
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index f3e3809c..693c894b 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -1,3 +1,2 @@
export * from "./manifest/dependencyManifest/types.ts";
export * from "./manifest/auditManifest/types.ts";
-export * from "./extraction/types.ts";
diff --git a/scripts/bump_version.ts b/scripts/bump_version.ts
deleted file mode 100644
index 4d6064fd..00000000
--- a/scripts/bump_version.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import path from "node:path";
-
-const releaseType: string = Deno.args[0];
-if (
- !releaseType ||
- releaseType !== "patch" && releaseType !== "minor" && releaseType !== "major"
-) {
- console.error("Invalid release type");
- Deno.exit(1);
-}
-
-const denoJsonPath = path.resolve(
- import.meta.dirname as string,
- "..",
- "deno.json",
-);
-const denoJson = JSON.parse(await Deno.readTextFile(denoJsonPath)) as {
- version: string;
-};
-
-const [major, minor, patch] = denoJson.version.split(".").map(Number);
-
-let newVersion: string;
-
-if (releaseType === "patch") {
- newVersion = `${major}.${minor}.${patch + 1}`;
-} else if (releaseType === "minor") {
- newVersion = `${major}.${minor + 1}.0`;
-} else {
- newVersion = `${major + 1}.0.0`;
-}
-
-denoJson.version = newVersion;
-
-await Deno.writeTextFile(
- denoJsonPath,
- JSON.stringify(denoJson, null, 2) + "\n",
-);
-
-console.log(newVersion);
-Deno.exit(0);
@@ -74,32 +80,24 @@ export default function SymbolDetailsPane(props: {
onClick={props.onClose}
>
);
}
diff --git a/packages/app/src/pages/audit/file/instance/index.tsx b/packages/app/src/components/DependencyVisualizer/visualizers/SymbolVisualizer.tsx
similarity index 74%
rename from packages/app/src/pages/audit/file/instance/index.tsx
rename to packages/app/src/components/DependencyVisualizer/visualizers/SymbolVisualizer.tsx
index 6526ea95..8a5099c1 100644
--- a/packages/app/src/pages/audit/file/instance/index.tsx
+++ b/packages/app/src/components/DependencyVisualizer/visualizers/SymbolVisualizer.tsx
@@ -1,35 +1,31 @@
import { useEffect, useRef, useState } from "react";
-import Controls from "../../../../components/controls/Controls.tsx";
-import GraphDepthExtension from "../../../../components/controls/ControlExtensions/GraphDepthExtension.tsx";
-import SymbolContextMenu from "../../../../components/contextMenu/SymbolContextMenu.tsx";
-import {
- useNavigate,
- useOutletContext,
- useParams,
- useSearchParams,
-} from "react-router";
-import type { AuditContext } from "../../base.tsx";
-import SymbolDetailsPane from "../../../../components/detailsPanes/SymbolDetailsPane.tsx";
-import { useTheme } from "../../../../contexts/ThemeProvider.tsx";
+import Controls from "../components/controls/Controls.tsx";
+import GraphDepthExtension from "../components/controls/ControlExtensions/GraphDepthExtension.tsx";
+import SymbolContextMenu from "../components/contextMenu/SymbolContextMenu.tsx";
+import { useNavigate, useSearchParams } from "react-router";
+import type { VisualizerContext } from "../DependencyVisualizer.tsx";
+import SymbolDetailsPane from "../components/detailsPanes/SymbolDetailsPane.tsx";
+import { useTheme } from "../../../contexts/ThemeProvider.tsx";
import type {
FileAuditManifest,
FileDependencyManifest,
SymbolAuditManifest,
SymbolDependencyManifest,
} from "@napi/shared";
-import { SymbolDependencyVisualizer } from "../../../../helpers/cytoscape/symbolDependencyVisualizer/index.ts";
-
-export default function AuditInstancePage() {
+import { SymbolDependencyVisualizer } from "../cytoscape/symbolDependencyVisualizer/index.ts";
+
+export default function SymbolVisualizer(
+ props: VisualizerContext & {
+ fileId: string;
+ instanceId: string;
+ },
+) {
const navigate = useNavigate();
const { theme } = useTheme();
- const params = useParams<{ file: string; instance: string }>();
-
const [searchParams, setSearchParams] = useSearchParams();
- const context = useOutletContext
-
- )}
-
-
-
- {children}
-
-
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
+ />
+ );
+}
-const SheetHeader = ({
+function SheetTitle({
className,
...props
-}: React.HTMLAttributes) => (
-
-);
-SheetHeader.displayName = "SheetHeader";
+}: React.ComponentProps) {
+ return (
+ ) => (
-
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ) {
+ return (
+ (
- () => ({
- state,
- open,
- setOpen,
- isMobile,
- openMobile,
- setOpenMobile,
- toggleSidebar,
- }),
- [
- state,
- open,
- setOpen,
- isMobile,
- openMobile,
- setOpenMobile,
- toggleSidebar,
- ],
- );
+ [setOpenProp, open],
+ );
- return (
-
-
-
-
- );
- },
-);
-SidebarProvider.displayName = "SidebarProvider";
-
-const Sidebar = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<"div"> & {
- side?: "left" | "right";
- variant?: "sidebar" | "floating" | "inset";
- collapsible?: "offcanvas" | "icon" | "none";
- }
->(
- (
- {
- side = "left",
- variant = "sidebar",
- collapsible = "offcanvas",
- className,
- children,
- ...props
- },
- ref,
- ) => {
- const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+ // Helper to toggle the sidebar.
+ const toggleSidebar = React.useCallback(() => {
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+ }, [isMobile, setOpen, setOpenMobile]);
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (
+ event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+ (event.metaKey || event.ctrlKey)
+ ) {
+ event.preventDefault();
+ toggleSidebar();
+ }
+ };
+
+ globalThis.addEventListener("keydown", handleKeyDown);
+ return () => globalThis.removeEventListener("keydown", handleKeyDown);
+ }, [toggleSidebar]);
+
+ // We add a state so that we can do data-state="expanded" or "collapsed".
+ // This makes it easier to style the sidebar with Tailwind classes.
+ const state = open ? "expanded" : "collapsed";
+
+ const contextValue = React.useMemo(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar,
+ }),
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+ );
- if (collapsible === "none") {
- return (
+ return (
+
+
-
-
- Sidebar
- Displays the mobile sidebar.
-
-
-
- );
- }
+
+
+ );
+}
+function Sidebar({
+ side = "left",
+ variant = "sidebar",
+ collapsible = "offcanvas",
+ className,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ side?: "left" | "right";
+ variant?: "sidebar" | "floating" | "inset";
+ collapsible?: "offcanvas" | "icon" | "none";
+}) {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+ if (collapsible === "none") {
return (
+
+
+ Sidebar
+ Displays the mobile sidebar.
+
+
+
+ );
+ }
+
+ return (
+ ,
- React.ComponentProps
->(({ className, onClick, ...props }, ref) => {
+function SidebarTrigger({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps) {
const { toggleSidebar } = useSidebar();
return (
);
-});
-SidebarTrigger.displayName = "SidebarTrigger";
+}
-const SidebarRail = React.forwardRef<
- HTMLButtonElement,
- React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
const { toggleSidebar } = useSidebar();
return (
);
-});
-SidebarRail.displayName = "SidebarRail";
+}
-const SidebarInset = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
return (
);
-});
-SidebarInset.displayName = "SidebarInset";
+}
-const SidebarInput = React.forwardRef<
- React.ElementRef,
- React.ComponentProps
->(({ className, ...props }, ref) => {
+function SidebarInput({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
);
-});
-SidebarInput.displayName = "SidebarInput";
+}
-const SidebarHeader = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
);
-});
-SidebarHeader.displayName = "SidebarHeader";
+}
-const SidebarFooter = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
);
-});
-SidebarFooter.displayName = "SidebarFooter";
+}
-const SidebarSeparator = React.forwardRef<
- React.ElementRef,
- React.ComponentProps
->(({ className, ...props }, ref) => {
+function SidebarSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
return (
svg]:size-4 [&>svg]:shrink-0",
+ "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
className,
)}
{...props}
/>
);
-});
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
+}
-const SidebarGroupAction = React.forwardRef<
- HTMLButtonElement,
- React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
+function SidebarGroupAction({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "button";
return (
svg]:size-4 [&>svg]:shrink-0",
+ "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
- "after:absolute after:-inset-2 after:md:hidden",
+ "after:absolute after:-inset-2 md:after:hidden",
"group-data-[collapsible=icon]:hidden",
className,
)}
{...props}
/>
);
-});
-SidebarGroupAction.displayName = "SidebarGroupAction";
-
-const SidebarGroupContent = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-
-));
-SidebarGroupContent.displayName = "SidebarGroupContent";
-
-const SidebarMenu = React.forwardRef<
- HTMLUListElement,
- React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
- ;
- } & VariantProps
->(
- (
- {
- asChild = false,
- isActive = false,
- variant = "default",
- size = "default",
- tooltip,
- className,
- ...props
- },
- ref,
- ) => {
- const Comp = asChild ? Slot : "button";
- const { isMobile, state } = useSidebar();
-
- const button = (
- ;
+} & VariantProps) {
+ const Comp = asChild ? Slot : "button";
+ const { isMobile, state } = useSidebar();
- if (typeof tooltip === "string") {
- tooltip = {
- children: tooltip,
- };
- }
+ const button = (
+
- {button}
-
- );
- },
-);
-SidebarMenuButton.displayName = "SidebarMenuButton";
+ if (!tooltip) {
+ return button;
+ }
-const SidebarMenuAction = React.forwardRef<
- HTMLButtonElement,
- React.ComponentProps<"button"> & {
- asChild?: boolean;
- showOnHover?: boolean;
+ if (typeof tooltip === "string") {
+ tooltip = {
+ children: tooltip,
+ };
}
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+
+ return (
+
+ {button}
+
+ );
+}
+
+function SidebarMenuAction({
+ className,
+ asChild = false,
+ showOnHover = false,
+ ...props
+}: React.ComponentProps<"button"> & {
+ asChild?: boolean;
+ showOnHover?: boolean;
+}) {
const Comp = asChild ? Slot : "button";
return (
svg]:size-4 [&>svg]:shrink-0",
+ "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
- "after:absolute after:-inset-2 after:md:hidden",
+ "after:absolute after:-inset-2 md:after:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
showOnHover &&
- "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+ "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
className,
)}
{...props}
/>
);
-});
-SidebarMenuAction.displayName = "SidebarMenuAction";
-
-const SidebarMenuBadge = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-
-));
-SidebarMenuBadge.displayName = "SidebarMenuBadge";
-
-const SidebarMenuSkeleton = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<"div"> & {
- showIcon?: boolean;
- }
->(({ className, showIcon = false, ...props }, ref) => {
+}
+
+function SidebarMenuBadge({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarMenuSkeleton({
+ className,
+ showIcon = false,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showIcon?: boolean;
+}) {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`;
@@ -672,7 +610,7 @@ const SidebarMenuSkeleton = React.forwardRef<
return (
)}
);
-});
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-
-const SidebarMenuSub = React.forwardRef<
- HTMLUListElement,
- React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-
- {children}
-
-
{children}
- );
- }
-
- if (isMobile) {
- return (
- {children}
-
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ );
+}
-const SidebarTrigger = React.forwardRef<
- React.ElementRef
- {/* This is what handles the sidebar gap on desktop */}
-
- );
- },
-);
-Sidebar.displayName = "Sidebar";
+
-
- {children}
-
+ {children}
- {title && {title} }
- {description && (
- {description}
- )}
-
- {action}
-
-
-
-
-
- "/audit"}
- fileId={file}
- toFileIdLink={(fileId) => `/audit/${encodeURIComponent(fileId)}`}
- instanceId={instance}
- toInstanceIdLink={(fileId, instanceId) =>
- `/audit/${encodeURIComponent(fileId)}/${
- encodeURIComponent(instanceId)
- }`}
- />
-
-
-
- {
- const newSymbolsToExtract = [...symbolsToExtract];
- for (const symbolId of symbolIds) {
- // Check if there's an existing entry for this file
- const existingIndex = newSymbolsToExtract.findIndex(
- (s) => s.filePath === filePath,
- );
-
- if (existingIndex === -1) {
- // No existing entry for this file, create a new one
- newSymbolsToExtract.push({ filePath, symbols: [symbolId] });
- } else {
- // File exists, check if symbol is already included
- if (
- !newSymbolsToExtract[existingIndex].symbols.includes(
- symbolId,
- )
- ) {
- newSymbolsToExtract[existingIndex].symbols.push(symbolId);
- }
- }
- }
- setSymbolsToExtract(newSymbolsToExtract);
- },
- } as AuditContext}
- />
-
-
- NanoAPI
-
-
- Search for a file or symbol.
-
- The search will find partial matches in both symbol - names and file paths. -
- - The search will find partial matches in both symbol - names and file paths. -
- {!explorerTree
- ? (
-
-
- No Matching files found
-
- )
- : (
- Symbol Extraction
-
- {props.symbolsToExtract.length === 0
- ? (
-
-
- No symbols marked for extraction yet
-
- )
- : (
-
- {props.symbolsToExtract.map((symbolToExtract) => (
-
-
-
-
-
-
- ))}
-
-
- )}
-
-
-
-
-
-
- {symbolToExtract.symbols.map((symbol) => (
-
-
-
- ))}
-
-
-
-
- {(() => {
- switch (type) {
- case "folder":
- return (
-
- );
- case "file":
- return (
-
- );
-}
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
new file mode 100644
index 00000000..c74be87a
--- /dev/null
+++ b/packages/app/src/pages/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import {
+ getAuditManifest,
+ getDependencyManifest,
+} from "../service/api/index.ts";
+import type { AuditManifest, DependencyManifest } from "@napi/shared";
+import { toast } from "sonner";
+import DependencyVisualizer from "../components/DependencyVisualizer/DependencyVisualizer.tsx";
+import { Loader } from "lucide-react";
+import { useTheme } from "../contexts/ThemeProvider.tsx";
+
+export default function IndexPage() {
+ const [auditManifest, setAuditManifest] = useState
-
-
-
-
-
-
- Highlight in graph
-
-
-
-
-
-
-
- View graph for this file
-
-
-
- );
- case "symbol":
- return (
-
-
- );
- }
- })()}
- {showChildren &&
- Array.from(props.node.children.values()).map((child) => (
-
-
-
-
-
-
-
-
- Highlight in graph
-
-
-
-
-
-
-
- View graph for this symbol
-
-
-
-
+ {auditManifest && dependencyManifest
+ ? (
+
+ );
+}
diff --git a/packages/app/src/service/api/index.ts b/packages/app/src/service/api/index.ts
index dc015293..c68f1b85 100644
--- a/packages/app/src/service/api/index.ts
+++ b/packages/app/src/service/api/index.ts
@@ -1,8 +1,4 @@
-import type {
- AuditManifest,
- DependencyManifest,
- SymbolsToExtract,
-} from "@napi/shared";
+import type { AuditManifest, DependencyManifest } from "@napi/shared";
export async function getDependencyManifest() {
const response = await fetch("/api/dependency-manifest/", {
@@ -31,21 +27,3 @@ export async function getAuditManifest() {
return await responseBody;
}
-
-export async function runExtraction(
- symbolsToExtract: SymbolsToExtract,
-): Promise<{ success: boolean }> {
- const response = await fetch("/api/extractSymbol/", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify(symbolsToExtract),
- });
-
- if (!response.ok || response.status !== 200) {
- throw new Error("Failed to run extraction");
- }
-
- return await response.json();
-}
diff --git a/packages/app/src/styles/global.css b/packages/app/src/styles/global.css
index a28618e3..a7d9572d 100644
--- a/packages/app/src/styles/global.css
+++ b/packages/app/src/styles/global.css
@@ -1,5 +1,3 @@
-/* IMPORTANT: This file is used by shadcn/ui to generate the theme. Do not modify this file directly. */
-
@import "tailwindcss";
@import "tw-animate-css";
@@ -21,8 +19,7 @@
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
- /* was same as destructive here before. I changed it. */
- --destructive-foreground: oklch(0.985 0 0);
+ --destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
@@ -57,8 +54,8 @@
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
- --destructive: oklch(0.577 0.245 27.325);
- --destructive-foreground: oklch(0.85 0.3 25.331);
+ --destructive: oklch(0.396 0.141 25.723);
+ --destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0);
@@ -123,26 +120,28 @@
body {
@apply bg-background text-foreground;
}
+}
+@layer base {
:root {
- --sidebar-background: 0 0% 98%;
- --sidebar-foreground: 240 5.3% 26.1%;
- --sidebar-primary: 240 5.9% 10%;
- --sidebar-primary-foreground: 0 0% 98%;
- --sidebar-accent: 240 4.8% 95.9%;
- --sidebar-accent-foreground: 240 5.9% 10%;
- --sidebar-border: 220 13% 91%;
- --sidebar-ring: 217.2 91.2% 59.8%;
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
}
.dark {
- --sidebar-background: 240 5.9% 10%;
- --sidebar-foreground: 240 4.8% 95.9%;
- --sidebar-primary: 224.3 76.3% 48%;
- --sidebar-primary-foreground: 0 0% 100%;
- --sidebar-accent: 240 3.7% 15.9%;
- --sidebar-accent-foreground: 240 4.8% 95.9%;
- --sidebar-border: 240 3.7% 15.9%;
- --sidebar-ring: 217.2 91.2% 59.8%;
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.439 0 0);
}
}
diff --git a/packages/cli/src/api/index.ts b/packages/cli/src/api/index.ts
index 24685676..eac22300 100644
--- a/packages/cli/src/api/index.ts
+++ b/packages/cli/src/api/index.ts
@@ -1,31 +1,13 @@
import { Router } from "@oak/oak";
import type { z } from "zod";
import type { localConfigSchema } from "../config/localConfig.ts";
-import {
- getFilesFromDirectory,
- writeFilesToDirectory,
-} from "../helpers/fileSystem/index.ts";
-import { getExtensionsForLanguage } from "../helpers/fileSystem/index.ts";
-import { generateDependencyManifest } from "../manifest/dependencyManifest/index.ts";
import { generateAuditManifest } from "../manifest/auditManifest/index.ts";
-import { extractSymbols } from "../symbolExtractor/index.ts";
-import { join } from "@std/path";
-import { extractSymbolPayloadSchema } from "./types.ts";
+import type { DependencyManifest } from "@napi/shared";
export function getApi(
- workDir: string,
napiConfig: z.infer
+
+ )}
+ Loading...
+