- {
- setTempDependencyDepth(value[0]);
- }}
- className="grow"
- />
- {
- const parsedValue = parseInt(e.target.value, 10);
- if (!isNaN(parsedValue) && parsedValue >= 0) {
- setTempDependencyDepth(parsedValue);
- }
- }}
- onKeyUp={(e) => {
- if (e.key === "Up" || e.key === "ArrowUp") {
- setTempDependencyDepth(tempDependencyDepth + 1);
- } else if (e.key === "Down" || e.key === "ArrowDown") {
- setTempDependencyDepth(
- tempDependencyDepth === 0 ? 0 : tempDependencyDepth - 1,
- );
- }
- }}
- className="max-w-10"
- />
-
-
- {
- setTempDependentDepth(value[0]);
- }}
- className="grow"
- />
- {
- const parsedValue = parseInt(e.target.value, 10);
- if (!isNaN(parsedValue) && parsedValue >= 0) {
- setTempDependentDepth(parsedValue);
- }
- }}
- onKeyUp={(e) => {
- if (e.key === "Up" || e.key === "ArrowUp") {
- setTempDependentDepth(tempDependentDepth + 1);
- } else if (e.key === "Down" || e.key === "ArrowDown") {
- setTempDependentDepth(
- tempDependentDepth === 0 ? 0 : tempDependentDepth - 1,
- );
- }
- }}
- className="max-w-10"
- />
-
-
-
-
- );
-}
diff --git a/packages/app/src/components/Cytoscape/Skeleton.tsx b/packages/app/src/components/Cytoscape/Skeleton.tsx
deleted file mode 100644
index 11bdddd8..00000000
--- a/packages/app/src/components/Cytoscape/Skeleton.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Skeleton } from "@radix-ui/themes";
-
-export function CytoscapeSkeleton() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Used to pass extensions into the controls */}
- {props.children}
-
-
-
- );
-}
diff --git a/packages/app/src/components/Cytoscape/contextMenu/FileContextMenu.tsx b/packages/app/src/components/Cytoscape/contextMenu/FileContextMenu.tsx
deleted file mode 100644
index b3c11f20..00000000
--- a/packages/app/src/components/Cytoscape/contextMenu/FileContextMenu.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Link } from "react-router";
-import { DropdownMenu } from "@radix-ui/themes";
-import {
- LuFolderSearch2,
- LuGitGraph,
- LuPanelRightOpen,
- LuSearchCode,
-} from "react-icons/lu";
-import type { FileDependencyManifest } from "@napi/shared";
-
-export default function FileContextMenu(props: {
- position: { x: number; y: number };
- fileDependencyManifest: FileDependencyManifest;
- open: boolean;
- showInSidebar: (filename: string) => void;
- onOpenChange: (open: boolean) => void;
- setDetailsPaneOpen: (open: boolean) => void;
- setExtractionNodes: (
- filePath: string,
- symbols: string[],
- action: "add" | "remove",
- ) => void;
-}) {
- function handleOnExtract() {
- props.setExtractionNodes(
- props.fileDependencyManifest.filePath,
- Object.values(props.fileDependencyManifest.symbols).map(
- (symbol) => symbol.id,
- ),
- "add",
- );
- }
-
- return (
-
-
-
-
- props.onOpenChange(false)} // Optional auto-close
- >
-
-
-
-
-
-
-
- {props.fileDependencyManifest.filePath.split("/").pop()}
-
- props.setDetailsPaneOpen(true)}
- >
-
-
-
- Inspect symbols
-
-
- props.showInSidebar(
- props.fileDependencyManifest.filePath.split("/").pop() || "",
- )}
- >
-
- handleOnExtract()}
- >
-
-
-
-
- );
-}
diff --git a/packages/app/src/components/Cytoscape/contextMenu/SymbolContextMenu.tsx b/packages/app/src/components/Cytoscape/contextMenu/SymbolContextMenu.tsx
deleted file mode 100644
index d82fdbef..00000000
--- a/packages/app/src/components/Cytoscape/contextMenu/SymbolContextMenu.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Link, useParams } from "react-router";
-import { DropdownMenu } from "@radix-ui/themes";
-import { LuGitGraph, LuPanelRightOpen, LuSearchCode } from "react-icons/lu";
-import type { FileDependencyManifest } from "@napi/shared";
-
-export default function SymbolContextMenu(props: {
- position: { x: number; y: number };
- fileDependencyManifest: FileDependencyManifest;
- symbolId: string;
- open: boolean;
- onOpenChange: (open: boolean) => void;
- setDetailsPaneOpen: (open: boolean) => void;
- setExtractionNodes: (
- filePath: string,
- symbols: string[],
- action: "add" | "remove",
- ) => void;
-}) {
- const { file, instance } = useParams();
-
- const isSymbolLevelView = file && instance;
-
- function handleOnExtract() {
- props.setExtractionNodes(
- props.fileDependencyManifest.filePath,
- [props.symbolId],
- "add",
- );
- }
-
- return (
-
- Show details
-
-
- Show file
-
-
- Extract all symbols
-
- props.onOpenChange(false)} // Optional auto-close
- >
-
-
-
-
-
-
-
-
- {/* TODO: There is something wrong with the details pane on the symbol-level view */}
- {/* Fix it, and then remove the following */}
- {!isSymbolLevelView && (
- <>
- props.setDetailsPaneOpen(true)}
- >
-
-
-
- Inspect symbol
-
-
- )}
- handleOnExtract()}
- >
-
-
-
-
- );
-}
diff --git a/packages/app/src/components/DisplayNameWithTootip.tsx b/packages/app/src/components/DisplayNameWithTootip.tsx
new file mode 100644
index 00000000..d6e974e8
--- /dev/null
+++ b/packages/app/src/components/DisplayNameWithTootip.tsx
@@ -0,0 +1,32 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "./shadcn/Tooltip.tsx";
+
+export default function DisplayNameWithTooltip(props: {
+ name: string;
+ maxChar?: number;
+ truncateBefore?: boolean;
+}) {
+ const maxChar = props.maxChar || 30;
+
+ if (props.name.length > maxChar) {
+ let displayedName: string;
+
+ if (props.truncateBefore) {
+ displayedName = "..." + props.name.slice(0, maxChar);
+ } else {
+ displayedName = props.name.slice(0, maxChar) + "...";
+ }
+
+ return (
+ - {props.fileDependencyManifest.symbols[props.symbolId].id} -
-
- Details
-
-
- Extract symbol
-
- {props.name}
+
- {children}
-
- );
-}
-
-// Metric item component for consistent display
-function MetricItem({
- label,
- value,
- alert,
-}: {
- label: string;
- value: number | string;
- alert?: { message: { long: string } };
-}) {
- return (
-
-
-
-
- {alert.message.long}
-
- )}
-
- );
-}
-
-// Alert badge component
-function AlertBadge({ count }: { count: number }) {
- return (
-
-
- {label}:
-
-
- {alert && (
-
- {value}
- {alert &&
-
- 0 ? "text-amber-500" : "text-gray-400"}`}
- />
- 0 ? "text-amber-500" : "text-gray-400"}>
- {count}
-
-
- );
-}
-
-// Symbol metrics and alerts component
-function SymbolSection({
- symbol,
- fileDependencyManifest,
-}: {
- symbol: {
- id: string;
- alerts: Record
-
- );
-}
-
-export default function FileDetailsPane(props: {
- fileDependencyManifest: FileDependencyManifest;
- fileAuditManifest: FileAuditManifest;
- open: boolean;
- setOpen: (open: boolean) => void;
-}) {
- const { fileDependencyManifest, fileAuditManifest, open, setOpen } = props;
- const fileName = fileDependencyManifest.filePath.split("/").pop() || "";
- const fileAlerts = Object.values(fileAuditManifest.alerts) as {
- message: { long: string };
- metric: string;
- }[];
-
- // Organize alerts by their metric for file metrics
- const alertsByMetric = fileAlerts.reduce(
- (acc, alert) => {
- if (alert.metric) {
- acc[alert.metric] = alert;
- }
- return acc;
- },
- {} as Record
-
- {symbolData.type}: {symbol.id}
-
-
-
-
- {symbolData.metrics &&
- Object.entries(symbolData.metrics).map(([metricKey, value]) => (
-
-
-
- {/* Header */}
-
-
-
-
-
- {/* Total symbols count */}
-
-
- );
-}
diff --git a/packages/app/src/components/FileExplorer/FileExplorer.tsx b/packages/app/src/components/FileExplorer/FileExplorer.tsx
deleted file mode 100644
index 91f19162..00000000
--- a/packages/app/src/components/FileExplorer/FileExplorer.tsx
+++ /dev/null
@@ -1,832 +0,0 @@
-import {
- Button,
- Checkbox,
- IconButton,
- ScrollArea,
- TextField,
- Tooltip,
-} from "@radix-ui/themes";
-import { useEffect, useRef, useState } from "react";
-import { Link } from "react-router";
-import {
- type ImperativePanelHandle,
- Panel,
- PanelGroup,
- PanelResizeHandle,
-} from "react-resizable-panels";
-import type { ExtractionNode } from "@napi/shared";
-import { FileExplorerSkeleton } from "./Skeleton.tsx";
-import { LuSearchCode, LuSearchSlash, LuX } from "react-icons/lu";
-import languageIcon from "./languageIcons.tsx";
-import {
- MdDragHandle,
- MdOutlineKeyboardArrowDown,
- MdOutlineKeyboardArrowLeft,
- MdOutlineKeyboardArrowRight,
- MdOutlineRemoveRedEye,
- MdSearch,
- MdSubdirectoryArrowRight,
- MdVerticalAlignBottom,
- MdVerticalAlignTop,
-} from "react-icons/md";
-import { runExtraction } from "../../service/api/index.ts";
-import { toast } from "react-toastify";
-
-interface TreeData {
- id: string;
- level: number;
- name: string;
- matchesSearch: boolean;
- children?: TreeData[]; // Only for non leaf nodes
- isSymbol?: boolean; // Only for leaf nodes
-}
-
-export interface FileExplorerFile {
- path: string;
- symbols: string[];
-}
-
-export default function FileExplorer(props: {
- busy: boolean;
- files: FileExplorerFile[];
- isOpen: boolean;
- setIsOpen: (open: boolean) => void;
- search: string;
- setIsSearch: (search: string) => void;
- highlightedNodeId: string | null;
- setHighlightedNodeId: (node: string | null) => void;
- extractionState: {
- extractionNodes: Record
-
- - {fileName} -
- -
-
-
-
- File Metrics
-
-
-
- {/* Symbols with their metrics and alerts */}
-
-
-
- {/* Individual symbols with their metrics and alerts */}
-
-
- -
- {Object.entries(
- Object.values(fileDependencyManifest.symbols).reduce(
- (acc, symbol) => {
- acc[symbol.type] = (acc[symbol.type] || 0) + 1;
- return acc;
- },
- {} as Record
- - {type}: {count} - - ))} -
- {Object.values(fileAuditManifest.symbols).map((symbol) => (
-
-
- {/* Action Buttons */}
-
-
-
-
-
-
-
-
- {props.isOpen && (
-
- 
- NanoAPI
-
- )}
-
-
-
-
- NanoAPI
-
- )}
-
-
- {props.busy ? props.setIsSearch(e.target.value)}
- className={`min-h-8 transition-all duration-300 overflow-hidden ${
- !props.isOpen && "w-0"
- }`}
- >
-
-
- {props.search.length > 0 && (
-
- props.setIsSearch("")}
- >
-
-
- )}
-
-
-
-
- )}
-
-
- {extractionPanelSize > 0
- ? (
- handleExpandAndCollapse()}
- className="text-xl text-gray-light dark:text-gray-dark"
- />
- )
- : (
- handleExpandAndCollapse()}
- className="text-xl text-gray-light dark:text-gray-dark"
- />
- )}
-
- Symbol Extraction
-
-
- -
- {props.nodes.map((node) => {
- return (
-
- {props.node.children &&
- props.node.children.length > 0 &&
- !props.node.children[0].isSymbol
- ? (
-
- )
- : (
- <>
- {!props.node.isSymbol
- ? (
-
- {isOpen && props.node.children && (
-
-
- )
- : (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
- )}
-
-
-
-
-
-
- {`...${node.name.slice(-maxPathLength)}`}
-
-
- {node.name}
-
- );
-}
-
-enum EditMode {
- NONE = "none", // Nothing has been edited
- EDITING = "editing", // The user is currently editing
- CANCELLED = "cancelled", // The user has cancelled the edit
- COMPLETED = "completed", // The user has completed the edit
-}
-
-function ExtractionPanel(props: {
- extractionNodes: Record
-
- {Object.keys(props.extractionNodes).map((key) => {
- const node = props.extractionNodes[key];
- return (
-
-
- );
-}
-
-function ExtractionElement(props: {
- node: ExtractionNode;
- updateExtractionNodes: (
- filePath: string,
- symbols: string[],
- action: "add" | "remove",
- ) => void;
- editMode?: EditMode;
-}) {
- type CheckedState = boolean | "indeterminate";
-
- const symbolMap = new Map
- {editMode !== EditMode.EDITING && (
- <>
-
-
-
-
-
-
-
- )}
- {editMode === EditMode.EDITING && (
- <>
-
-
-
- )}
-
-
- {`...${
- name.slice(
- -maxPathLength,
- )
- }`}
-
- {name}
;
- }
-
- function resolveFileCheckedState(symbolMap: Map
-
- );
-}
diff --git a/packages/app/src/components/FileExplorer/Skeleton.tsx b/packages/app/src/components/FileExplorer/Skeleton.tsx
deleted file mode 100644
index ecaba2d5..00000000
--- a/packages/app/src/components/FileExplorer/Skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Skeleton } from "@radix-ui/themes";
-
-export function FileExplorerSkeleton() {
- return (
-
-
-
- )}
-
- {props.node.symbols.map((symbol) => (
-
- {languageIcon(props.node.filePath.split(".").pop() || "txt")}
- {getDisplayedPath(props.node.filePath)}
-
- {props.editMode === EditMode.EDITING && (
-
- {
- setFileChecked(Boolean(checked));
- for (const symbol of props.node.symbols) {
- if (checked) {
- checkedSymbols.set(symbol, true);
- } else {
- checkedSymbols.set(symbol, false);
- }
- }
- }}
- >
-
-
-
-
-
- )}
-
- ))}
-
-
- {props.editMode === EditMode.EDITING && (
-
- {
- handleSymbolCheck(symbol, Boolean(checked));
- }}
- >
-
-
-
-
- );
-}
diff --git a/packages/app/src/components/FileExplorer/languageIcons.tsx b/packages/app/src/components/FileExplorer/languageIcons.tsx
deleted file mode 100644
index 16e531d8..00000000
--- a/packages/app/src/components/FileExplorer/languageIcons.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { LuFileCode } from "react-icons/lu";
-import { DiPython } from "react-icons/di";
-import { TbBrandCSharp } from "react-icons/tb";
-import type { JSX } from "react";
-
-const languageIconMap: Record
- {children}
-
- );
-}
-
-// Metric item component for consistent display
-function MetricItem({
- label,
- value,
- alert,
-}: {
- label: string;
- value: number | string;
- alert?: { message: { long: string } };
-}) {
- return (
-
-
-
-
- {alert.message.long}
-
- )}
-
- );
-}
-
-// Alert badge component
-function AlertBadge({ count }: { count: number }) {
- return (
-
-
- {label}:
-
-
- {alert && (
-
- {value}
- {alert &&
-
- 0 ? "text-amber-500" : "text-gray-400"}`}
- />
- 0 ? "text-amber-500" : "text-gray-400"}>
- {count}
-
-
- );
-}
-
-export default function SymbolDetailsPane(props: {
- fileDependencyManifest: FileDependencyManifest;
- fileAuditManifest: FileAuditManifest;
- symbolId: string;
- open: boolean;
- setOpen: (open: boolean) => void;
-}) {
- const { fileDependencyManifest, fileAuditManifest, symbolId, open, setOpen } =
- props;
- const fileName = fileDependencyManifest.filePath.split("/").pop() || "";
- const symbolData = fileDependencyManifest.symbols[symbolId];
- const symbolName = symbolData?.id || symbolId;
- const symbolType = symbolData?.type || "";
-
- // Get alerts related to the current symbol only
- const symbolAlertsObj = fileAuditManifest.symbols[symbolId]?.alerts || {};
- const symbolAlerts = Object.values(symbolAlertsObj) as {
- message: { long: string };
- metric: string;
- }[];
-
- // Organize alerts by their metric for symbol metrics
- const symbolAlertsByMetric = symbolAlerts.reduce(
- (acc, alert) => {
- if (alert.metric) {
- acc[alert.metric] = alert;
- }
- return acc;
- },
- {} as Record
-
- {/* Header */}
-
-
-
-
-
- {symbolData && fileAuditManifest.symbols[symbolId] && (
-
-
- );
-}
diff --git a/packages/app/src/components/contextMenu/FileContextMenu.tsx b/packages/app/src/components/contextMenu/FileContextMenu.tsx
new file mode 100644
index 00000000..a9c013fa
--- /dev/null
+++ b/packages/app/src/components/contextMenu/FileContextMenu.tsx
@@ -0,0 +1,74 @@
+import { Link } from "react-router";
+import type { FileDependencyManifest } from "@napi/shared";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../shadcn/Dropdownmenu.tsx";
+import { PanelRight, SearchCode } from "lucide-react";
+import DisplayNameWithTooltip from "../DisplayNameWithTootip.tsx";
+
+export default function FileContextMenu(props: {
+ context: {
+ position: { x: number; y: number };
+ fileDependencyManifest: FileDependencyManifest;
+ } | undefined;
+ onClose: () => void;
+ onOpenDetails: (filePath: string) => void;
+}) {
+ return (
+
-
-
- - {fileName} -
- -
-
-
-
- File Metrics
-
-
-
- {/* Current Symbol with its metrics and alerts */}
-
-
- )}
-
- {/* Action Buttons */}
-
-
- {symbolType}: {symbolName}
-
-
-
-
- {symbolData.metrics &&
- Object.entries(symbolData.metrics).map(([metricKey, value]) => (
-
-
-
-
-
-
-
+ props.onClose()}
+ >
+
+
+
+
+ props.context?.fileDependencyManifest &&
+ props.onOpenDetails(
+ props.context?.fileDependencyManifest.filePath,
+ )}
+ >
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/app/src/components/contextMenu/SymbolContextMenu.tsx b/packages/app/src/components/contextMenu/SymbolContextMenu.tsx
new file mode 100644
index 00000000..e3277ddb
--- /dev/null
+++ b/packages/app/src/components/contextMenu/SymbolContextMenu.tsx
@@ -0,0 +1,84 @@
+import { Link } from "react-router";
+import type {
+ FileDependencyManifest,
+ SymbolDependencyManifest,
+} from "@napi/shared";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../shadcn/Dropdownmenu.tsx";
+import { PanelRight, SearchCode } from "lucide-react";
+import DisplayNameWithTooltip from "../DisplayNameWithTootip.tsx";
+
+export default function SymbolContextMenu(props: {
+ context: {
+ position: { x: number; y: number };
+ fileDependencyManifest: FileDependencyManifest;
+ symbolDependencyManifest: SymbolDependencyManifest;
+ } | undefined;
+ onClose: () => void;
+ onOpenDetails: (filePath: string, symbolId: string) => void;
+}) {
+ return (
+
+
+ Show details
+
+
+
+ Inspect symbols
+
+ props.onClose()}
+ >
+
+
+
+
+ props.context?.fileDependencyManifest &&
+ props.onOpenDetails(
+ props.context?.fileDependencyManifest.filePath,
+ props.context?.symbolDependencyManifest.id,
+ )}
+ >
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/app/src/components/controls/ControlExtensions/FiltersExtension.tsx b/packages/app/src/components/controls/ControlExtensions/FiltersExtension.tsx
new file mode 100644
index 00000000..f68f9cce
--- /dev/null
+++ b/packages/app/src/components/controls/ControlExtensions/FiltersExtension.tsx
@@ -0,0 +1,150 @@
+import { type MouseEvent, useEffect, useState } from "react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "../../shadcn/Tooltip.tsx";
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../../shadcn/Dropdownmenu.tsx";
+import { Button } from "../../shadcn/Button.tsx";
+import { Funnel } from "lucide-react";
+
+export default function FiltersExtension(props: {
+ busy: boolean;
+ currentFileName?: string;
+ onFilterChange: (
+ showExternal: boolean,
+ showVariables: boolean,
+ showFunctions: boolean,
+ showClasses: boolean,
+ showStructs: boolean,
+ showEnums: boolean,
+ showInterfaces: boolean,
+ showRecords: boolean,
+ showDelegates: boolean,
+ ) => void;
+}) {
+ const [showExternal, setShowExternal] = useState(true);
+ const [showVariables, setShowVariables] = useState(true);
+ const [showFunctions, setShowFunctions] = useState(true);
+ const [showClasses, setShowClasses] = useState(true);
+ const [showStructs, setShowStructs] = useState(true);
+ const [showEnums, setShowEnums] = useState(true);
+ const [showInterfaces, setShowInterfaces] = useState(true);
+ const [showRecords, setShowRecords] = useState(true);
+ const [showDelegates, setShowDelegates] = useState(true);
+
+ useEffect(() => {
+ props.onFilterChange(
+ showExternal,
+ showVariables,
+ showFunctions,
+ showClasses,
+ showStructs,
+ showEnums,
+ showInterfaces,
+ showRecords,
+ showDelegates,
+ );
+ }, [
+ showExternal,
+ showVariables,
+ showFunctions,
+ showClasses,
+ showStructs,
+ showEnums,
+ showInterfaces,
+ showRecords,
+ showDelegates,
+ ]);
+
+ function handleFilterClick(
+ e: MouseEvent
+
+ Show details
+
+
+
+ Inspect symbol
+
+
+
+
+
+
+ Fit to screen
+
+
+
+
+
+
+
+ Reset layout
+
+
+
+
+
+
+
+ Zoom out
+
+
+
+
+
+
+
+ Zoom in
+
+
+ {/* Used to pass extensions into the controls */}
+ {props.children}
+
+ );
+}
diff --git a/packages/app/src/components/detailsPanes/FileDetailsPane.tsx b/packages/app/src/components/detailsPanes/FileDetailsPane.tsx
new file mode 100644
index 00000000..9fa24ec2
--- /dev/null
+++ b/packages/app/src/components/detailsPanes/FileDetailsPane.tsx
@@ -0,0 +1,199 @@
+import type { FileAuditManifest, FileDependencyManifest } from "@napi/shared";
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "../shadcn/Sheet.tsx";
+import { Card, CardContent, CardHeader, CardTitle } from "../shadcn/Card.tsx";
+import { Code, File, Pickaxe, SearchCode } from "lucide-react";
+import { ScrollArea } from "../shadcn/Scrollarea.tsx";
+import { Button } from "../shadcn/Button.tsx";
+import { Link } from "react-router";
+import DisplayNameWithTooltip from "../DisplayNameWithTootip.tsx";
+import Metrics from "./metrics.tsx";
+import AlertBadge from "./alertBadge.tsx";
+
+export default function FileDetailsPane(props: {
+ context: {
+ fileDependencyManifest: FileDependencyManifest;
+ fileAuditManifest: FileAuditManifest;
+ } | undefined;
+ onClose: () => void;
+ onAddSymbolsForExtraction: (filePath: string, symbolIds: string[]) => void;
+}) {
+ function markAllSymbolsForExtraction() {
+ if (!props.context?.fileDependencyManifest) {
+ return;
+ }
+
+ props.onAddSymbolsForExtraction(
+ props.context?.fileDependencyManifest.filePath,
+ Object.keys(props.context.fileDependencyManifest.symbols),
+ );
+ }
+
+ function markSymbolForExtraction(symbolId: string) {
+ if (!props.context?.fileDependencyManifest) {
+ return;
+ }
+
+ props.onAddSymbolsForExtraction(
+ props.context.fileDependencyManifest.filePath,
+ [symbolId],
+ );
+ }
+
+ return (
+
+ props.onClose()}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/app/src/components/detailsPanes/SymbolDetailsPane.tsx b/packages/app/src/components/detailsPanes/SymbolDetailsPane.tsx
new file mode 100644
index 00000000..235156d9
--- /dev/null
+++ b/packages/app/src/components/detailsPanes/SymbolDetailsPane.tsx
@@ -0,0 +1,171 @@
+import type {
+ FileAuditManifest,
+ FileDependencyManifest,
+ SymbolAuditManifest,
+ SymbolDependencyManifest,
+} from "@napi/shared";
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "../shadcn/Sheet.tsx";
+import { Card, CardContent, CardHeader, CardTitle } from "../shadcn/Card.tsx";
+import { Code, File, Pickaxe, SearchCode } from "lucide-react";
+import { ScrollArea } from "../shadcn/Scrollarea.tsx";
+import { Button } from "../shadcn/Button.tsx";
+import { Link } from "react-router";
+import DisplayNameWithTooltip from "../DisplayNameWithTootip.tsx";
+import Metrics from "./metrics.tsx";
+import AlertBadge from "./alertBadge.tsx";
+
+export default function SymbolDetailsPane(props: {
+ context: {
+ fileDependencyManifest: FileDependencyManifest;
+ symbolDependencyManifest: SymbolDependencyManifest;
+ fileAuditManifest: FileAuditManifest;
+ symbolAuditManifest: SymbolAuditManifest;
+ } | undefined;
+ onClose: () => void;
+ onAddSymbolsForExtraction: (filePath: string, symbolIds: string[]) => void;
+}) {
+ function markSymbolForExtraction(symbolId: string) {
+ if (!props.context?.fileDependencyManifest) {
+ return;
+ }
+
+ props.onAddSymbolsForExtraction(
+ props.context.fileDependencyManifest.filePath,
+ [symbolId],
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Object.values(
+ props.context?.fileDependencyManifest.symbols || {},
+ ).map((symbol) => (
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+ File Metrics
+
+
+
+ Symbols ({Object.keys(
+ props.context?.fileDependencyManifest.symbols || {},
+ ).length || 0})
+
+
+ {Object.entries(
+ Object.values(
+ props.context?.fileDependencyManifest.symbols || [],
+ ).reduce((acc, symbol) => {
+ acc[symbol.type] = (acc[symbol.type] || 0) + 1;
+ return acc;
+ }, {} as Record),
+ ).map(([type, count]) => (
+
+
+
+ ))}
+ {type}
+ {count}
+
+
+
+ props.onClose()}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/app/src/components/detailsPanes/alertBadge.tsx b/packages/app/src/components/detailsPanes/alertBadge.tsx
new file mode 100644
index 00000000..fcab2042
--- /dev/null
+++ b/packages/app/src/components/detailsPanes/alertBadge.tsx
@@ -0,0 +1,16 @@
+import { Check, TriangleAlert } from "lucide-react";
+
+export default function AlertBadge(props: { count: number }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Symbol Metrics
+
+
+ File Metrics
+
+ {props.count > 0
+ ? (
+ <>
+
+ );
+}
diff --git a/packages/app/src/components/detailsPanes/metrics.tsx b/packages/app/src/components/detailsPanes/metrics.tsx
new file mode 100644
index 00000000..e1a44e35
--- /dev/null
+++ b/packages/app/src/components/detailsPanes/metrics.tsx
@@ -0,0 +1,69 @@
+import {
+ type FileAuditManifest,
+ type FileDependencyManifest,
+ metricCharacterCount,
+ metricCodeCharacterCount,
+ metricCodeLineCount,
+ metricCyclomaticComplexity,
+ metricDependencyCount,
+ metricDependentCount,
+ metricLinesCount,
+ type SymbolAuditManifest,
+ type SymbolDependencyManifest,
+} from "@napi/shared";
+import { Alert, AlertDescription } from "../shadcn/Alert.tsx";
+
+export default function Metrics(props: {
+ dependencyManifest:
+ | FileDependencyManifest
+ | SymbolDependencyManifest
+ | undefined;
+ auditManifest: FileAuditManifest | SymbolAuditManifest | undefined;
+}) {
+ function metricToHumanString(metric: string) {
+ switch (metric) {
+ case metricLinesCount:
+ return "Lines";
+ case metricCodeLineCount:
+ return "Code Lines";
+ case metricCharacterCount:
+ return "Characters";
+ case metricCodeCharacterCount:
+ return "Code Characters";
+ case metricDependencyCount:
+ return "Dependencies";
+ case metricDependentCount:
+ return "Dependents";
+ case metricCyclomaticComplexity:
+ return "Cyclomatic Complexity";
+ default:
+ return metric;
+ }
+ }
+
+ return (
+
+ {Object.entries(props.dependencyManifest?.metrics || {}).map((
+ [key, value],
+ ) => (
+
+ );
+}
diff --git a/packages/app/src/components/shadcn/Alert.tsx b/packages/app/src/components/shadcn/Alert.tsx
new file mode 100644
index 00000000..f80fec6d
--- /dev/null
+++ b/packages/app/src/components/shadcn/Alert.tsx
@@ -0,0 +1,59 @@
+import * 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",
+ {
+ variants: {
+ variant: {
+ default: "bg-background text-foreground",
+ destructive:
+ "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+const Alert = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+
+
+ {props.auditManifest?.alerts?.[key]?.message?.long}
+
+
+ )}
+
+ ))}
+
+
+ {(props.auditManifest?.alerts || {})?.[key] && (
+
+ {metricToHumanString(key)}
+
+
+ {value}
+
+
+
+ )}
+
+ {children}
+
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ );
+ },
+);
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<
+ React.ElementRef
+
+
+ {children}
+
+
+ {showIcon && (
+
+ );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<
+ HTMLUListElement,
+ React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+
- {props.sideBarSlot && (
-
- );
-}
diff --git a/packages/app/src/lib/utils.ts b/packages/app/src/lib/utils.ts
new file mode 100644
index 00000000..365058ce
--- /dev/null
+++ b/packages/app/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/packages/app/src/main.tsx b/packages/app/src/main.tsx
index 33e834f7..5a5526e1 100644
--- a/packages/app/src/main.tsx
+++ b/packages/app/src/main.tsx
@@ -1,17 +1,14 @@
///
- {props.sideBarSlot}
-
- )}
-
-
-
-
-
-
- {
- /* */}
-
- {[ViewNames.PROJECT, ViewNames.FILE].includes(currentView) &&
- file && (
- <>
-
- - File: -
- - {file} - - - )} - {currentView === ViewNames.INSTANCE && file && instance && ( - <> -- Symbol: -
- - {instance} - - - )} -
-
-
-
-
- {props.graphSlot}
-
-
-
-
+
+
+
+
+ "/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/audit/file/index.tsx b/packages/app/src/pages/audit/file/index.tsx
index e79b7a84..c03f604f 100644
--- a/packages/app/src/pages/audit/file/index.tsx
+++ b/packages/app/src/pages/audit/file/index.tsx
@@ -1,28 +1,36 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import {
useNavigate,
useOutletContext,
useParams,
useSearchParams,
} from "react-router";
-import Controls from "../../../components/Cytoscape/Controls.tsx";
-import { ThemeContext } from "../../../contexts/ThemeContext.tsx";
+import Controls from "../../../components/controls/Controls.tsx";
import type { AuditContext } from "../base.tsx";
-import { CytoscapeSkeleton } from "../../../components/Cytoscape/Skeleton.tsx";
import { FileDependencyVisualizer } from "../../../helpers/cytoscape/fileDependencyVisualizer/index.ts";
-import type { NapiNodeData } from "../../../helpers/cytoscape/fileDependencyVisualizer/types.ts";
-import type { Metric } from "@napi/shared";
-import SymbolContextMenu from "../../../components/Cytoscape/contextMenu/SymbolContextMenu.tsx";
-import SymbolDetailsPane from "../../../components/SymbolDetailsPane.tsx";
-import FiltersExtension from "../../../components/Cytoscape/ControlExtensions/FiltersExtension.tsx";
-import MetricsExtension from "../../../components/Cytoscape/ControlExtensions/MetricsExtension.tsx";
+import type {
+ FileAuditManifest,
+ FileDependencyManifest,
+ Metric,
+ SymbolAuditManifest,
+ SymbolDependencyManifest,
+} from "@napi/shared";
+import MetricsExtension from "../../../components/controls/ControlExtensions/MetricsExtension.tsx";
+import { useTheme } from "../../../contexts/ThemeProvider.tsx";
+import FiltersExtension from "../../../components/controls/ControlExtensions/FiltersExtension.tsx";
+import SymbolContextMenu from "../../../components/contextMenu/SymbolContextMenu.tsx";
+import SymbolDetailsPane from "../../../components/detailsPanes/SymbolDetailsPane.tsx";
export default function AuditFilePage() {
const navigate = useNavigate();
+
+ const { theme } = useTheme();
+
const params = useParams<{ file: string }>();
+
const [searchParams, setSearchParams] = useSearchParams();
+
const context = useOutletContext
+
+
+
+
+
+
+ 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
+
+
+
+
@@ -146,18 +185,16 @@ export default function AuditFilePage() {
{/* Otherwise, Cytoscape will not render correctly */}
- {(context.busy || busy || !fileVisualizer) && fileVisualizer.layoutGraph(fileVisualizer.cy)}
+ cy={fileVisualizer?.cy}
+ onLayout={() => fileVisualizer?.layoutGraph(fileVisualizer.cy)}
>
fileVisualizer.layoutGraph(fileVisualizer.cy)}
+ currentFileName={params.file}
+ onFilterChange={handleFilterChange}
/>
- )}
-
- {contextMenuSymbolId && (
- {
- setDetailsPaneOpen(open);
- if (open) {
- setDetailsPaneSymbolId(contextMenuSymbolId);
- }
- }}
- setExtractionNodes={context.actions.updateExtractionNodes}
- />
- )}
-
- {detailsPaneSymbolId && (
-
+
+ setContextMenu(undefined)}
+ onOpenDetails={(filePath, symbolId) => {
+ const fileDependencyManifest = context.dependencyManifest[filePath];
+ const symbolDependencyManifest =
+ fileDependencyManifest.symbols[symbolId];
+ const fileAuditManifest = context.auditManifest[filePath];
+ const symbolAuditManifest = fileAuditManifest.symbols[symbolId];
+ setDetailsPane({
+ fileDependencyManifest,
+ symbolDependencyManifest,
+ fileAuditManifest,
+ symbolAuditManifest,
+ });
+ }}
+ />
+
+ setDetailsPane(undefined)}
+ onAddSymbolsForExtraction={(filePath, symbolIds) => {
+ context.onAddSymbolsForExtraction(filePath, symbolIds);
+ }}
+ />
);
}
diff --git a/packages/app/src/pages/audit/file/instance/index.tsx b/packages/app/src/pages/audit/file/instance/index.tsx
index 6e66df8c..288d84e8 100644
--- a/packages/app/src/pages/audit/file/instance/index.tsx
+++ b/packages/app/src/pages/audit/file/instance/index.tsx
@@ -1,256 +1,210 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import cytoscape, { type Core } from "cytoscape";
-import Controls from "../../../../components/Cytoscape/Controls.tsx";
-import GraphDepthExtension from "../../../../components/Cytoscape/ControlExtensions/GraphDepthExtension.tsx";
-import SymbolContextMenu from "../../../../components/Cytoscape/contextMenu/SymbolContextMenu.tsx";
-import { useNavigate, useOutletContext, useParams } from "react-router";
-import fcose from "cytoscape-fcose";
-import { ThemeContext } from "../../../../contexts/ThemeContext.tsx";
+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 {
- getCyStyle,
- getNodeLabel,
- layout,
- type NodeElementDefinition,
-} from "../../../../helpers/cytoscape/views/auditFile.ts";
-import { getInstanceCyElements } from "../../../../helpers/cytoscape/views/auditInstance.ts";
-import { CytoscapeSkeleton } from "../../../../components/Cytoscape/Skeleton.tsx";
+ useNavigate,
+ useOutletContext,
+ useParams,
+ useSearchParams,
+} from "react-router";
import type { AuditContext } from "../../base.tsx";
-import SymbolDetailsPane from "../../../../components/SymbolDetailsPane.tsx";
-
-const DEFAULT_DEPENDENCY_DEPTH = 1;
-const DEFAULT_DEPENDENT_DEPTH = 1;
+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() {
const navigate = useNavigate();
+
+ const { theme } = useTheme();
+
const params = useParams<{ file: string; instance: string }>();
- const context = useOutletContext
-
-
- {context.busy || !cyInstance
- ?
- {/* TODO: Fix data shape for instane-level view and then uncomment */}
- {
- /*
- )}
-
- {contextMenuSymbolId && (
- {
- setDetailsPaneOpen(open);
- if (open) {
- setDetailsPaneSymbolId(contextMenuSymbolId);
- }
- }}
- setExtractionNodes={context.actions.updateExtractionNodes}
- />
- )}
-
- {detailsPaneSymbolId && (
- setContextMenu(undefined)}
+ onOpenDetails={(filePath, symbolId) => {
+ const fileDependencyManifest = context.dependencyManifest[filePath];
+ const symbolDependencyManifest =
+ fileDependencyManifest.symbols[symbolId];
+ const fileAuditManifest = context.auditManifest[filePath];
+ const symbolAuditManifest = fileAuditManifest.symbols[symbolId];
+ setDetailsPane({
+ fileDependencyManifest,
+ symbolDependencyManifest,
+ fileAuditManifest,
+ symbolAuditManifest,
+ });
+ }}
+ />
+
+ setDetailsPane(undefined)}
+ onAddSymbolsForExtraction={(filePath, symbolIds) => {
+ context.onAddSymbolsForExtraction(filePath, symbolIds);
+ }}
+ />
);
}
diff --git a/packages/app/src/pages/audit/index.tsx b/packages/app/src/pages/audit/index.tsx
index 8c3d9128..384fb560 100644
--- a/packages/app/src/pages/audit/index.tsx
+++ b/packages/app/src/pages/audit/index.tsx
@@ -1,23 +1,26 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { useNavigate, useOutletContext, useSearchParams } from "react-router";
-import Controls from "../../components/Cytoscape/Controls.tsx";
-import MetricsExtension from "../../components/Cytoscape/ControlExtensions/MetricsExtension.tsx";
-import { CytoscapeSkeleton } from "../../components/Cytoscape/Skeleton.tsx";
-import FileContextMenu from "../../components/Cytoscape/contextMenu/FileContextMenu.tsx";
-import { ThemeContext } from "../../contexts/ThemeContext.tsx";
+import Controls from "../../components/controls/Controls.tsx";
+import MetricsExtension from "../../components/controls/ControlExtensions/MetricsExtension.tsx";
+import FileContextMenu from "../../components/contextMenu/FileContextMenu.tsx";
import type { AuditContext } from "./base.tsx";
-import FileDetailsPane from "../../components/FileDetailsPane.tsx";
+import FileDetailsPane from "../../components/detailsPanes/FileDetailsPane.tsx";
import { ProjectDependencyVisualizer } from "../../helpers/cytoscape/projectDependencyVisualizer/index.ts";
-import type { NapiNodeData } from "../../helpers/cytoscape/projectDependencyVisualizer/types.ts";
-import type { Metric } from "@napi/shared";
+import type {
+ FileAuditManifest,
+ FileDependencyManifest,
+ Metric,
+} from "@napi/shared";
+import { useTheme } from "../../contexts/ThemeProvider.tsx";
export default function AuditPage() {
const navigate = useNavigate();
+ const { theme } = useTheme();
+
const [searchParams, setSearchParams] = useSearchParams();
- const context = useOutletContext
+ symbolVisualizer?.layoutGraph(symbolVisualizer.cy)}
+ >
+
+
+
+
@@ -125,13 +128,11 @@ export default function AuditPage() {
{/* Otherwise, Cytoscape will not render correctly */}
- {(context.busy || busy || !projectVisualizer) && projectVisualizer.layoutGraph(projectVisualizer.cy)}
+ cy={projectVisualizer?.cy}
+ onLayout={() => projectVisualizer?.layoutGraph(projectVisualizer.cy)}
>
- )}
-
- {contextMenuNodeId && (
- {
- setDetailsPaneOpen(open);
- if (open) {
- setDetailsPaneNodeId(contextMenuNodeId);
- }
- }}
- setExtractionNodes={context.actions.updateExtractionNodes}
- />
- )}
-
- {detailsPaneNodeId && (
-
+
+ setContextMenu(undefined)}
+ onOpenDetails={(filePath) => {
+ setDetailsPane({
+ fileDependencyManifest: context.dependencyManifest[filePath],
+ fileAuditManifest: context.auditManifest[filePath],
+ });
+ }}
+ />
+
+ setDetailsPane(undefined)}
+ onAddSymbolsForExtraction={(filePath, symbolIds) => {
+ context.onAddSymbolsForExtraction(filePath, symbolIds);
+ }}
+ />
);
}
diff --git a/packages/app/src/service/api/index.ts b/packages/app/src/service/api/index.ts
index 09b09235..dc015293 100644
--- a/packages/app/src/service/api/index.ts
+++ b/packages/app/src/service/api/index.ts
@@ -1,7 +1,7 @@
import type {
AuditManifest,
DependencyManifest,
- ExtractionNode,
+ SymbolsToExtract,
} from "@napi/shared";
export async function getDependencyManifest() {
@@ -33,14 +33,14 @@ export async function getAuditManifest() {
}
export async function runExtraction(
- extractionNodes: ExtractionNode[],
+ symbolsToExtract: SymbolsToExtract,
): Promise<{ success: boolean }> {
const response = await fetch("/api/extractSymbol/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
- body: JSON.stringify(extractionNodes),
+ body: JSON.stringify(symbolsToExtract),
});
if (!response.ok || response.status !== 200) {
diff --git a/packages/app/src/styles/global.css b/packages/app/src/styles/global.css
new file mode 100644
index 00000000..a28618e3
--- /dev/null
+++ b/packages/app/src/styles/global.css
@@ -0,0 +1,148 @@
+/* IMPORTANT: This file is used by shadcn/ui to generate the theme. Do not modify this file directly. */
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --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);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --radius: 0.625rem;
+ --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 {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.145 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.145 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.985 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --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);
+ --border: oklch(0.269 0 0);
+ --input: oklch(0.269 0 0);
+ --ring: oklch(0.439 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --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(0.269 0 0);
+ --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+
+ :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%;
+ }
+
+ .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%;
+ }
+}
diff --git a/packages/app/src/styles/index.css b/packages/app/src/styles/index.css
new file mode 100644
index 00000000..e529f24e
--- /dev/null
+++ b/packages/app/src/styles/index.css
@@ -0,0 +1 @@
+@import "./global.css";
diff --git a/packages/app/tailwind.config.js b/packages/app/tailwind.config.js
deleted file mode 100644
index 0519ecba..00000000
--- a/packages/app/tailwind.config.js
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/app/vite.config.ts b/packages/app/vite.config.ts
index 66ecef25..72af33f4 100644
--- a/packages/app/vite.config.ts
+++ b/packages/app/vite.config.ts
@@ -3,9 +3,6 @@ import react from "@vitejs/plugin-react";
import deno from "@deno/vite-plugin";
import tailwindcss from "@tailwindcss/vite";
-import "react";
-import "react-dom";
-
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
diff --git a/packages/cli/deno.json b/packages/cli/deno.json
index 9ae3ebee..c0967c1d 100644
--- a/packages/cli/deno.json
+++ b/packages/cli/deno.json
@@ -3,8 +3,8 @@
"version": "1.0.7",
"exports": "./src/index.ts",
"imports": {
- "@inquirer/prompts": "npm:@inquirer/prompts@^7.5.0",
"@napi/shared": "../shared/src/index.ts",
+ "@inquirer/prompts": "npm:@inquirer/prompts@^7.5.0",
"@types/express": "npm:@types/express@^5.0.1",
"@types/yargs": "npm:@types/yargs@^17.0.33",
"express": "npm:express@^5.1.0",
@@ -14,16 +14,15 @@
"tree-sitter-c-sharp": "npm:tree-sitter-c-sharp@^0.23.1",
"tree-sitter-python": "npm:tree-sitter-python@^0.23.6",
"uuid": "npm:uuid@^11.1.0",
- "vitest": "npm:vitest@^3.1.3",
"yargs": "npm:yargs@^17.7.2",
"zod": "npm:zod@^3.24.4"
},
"tasks": {
"dev": "NODE_ENV=development deno run --allow-all --watch src/index.ts",
"compile": "deno compile --allow-all --include=../app/dist --output=dist/napi src/index.ts",
- "compile:linux": "deno compile --allow-all --include=../app/dist --output=dist/napi.linux --target=x86_64-unknown-linux-gnu src/index.ts",
- "compile:macos": "deno compile --allow-all --include=../app/dist --output=dist/napi.macos --target=x86_64-apple-darwin src/index.ts",
- "compile:windows": "deno compile --allow-all --include=../app/dist --output=dist/napi.exe --target=x86_64-pc-windows-msvc src/index.ts",
+ "compile-linux": "deno compile --allow-all --include=../app/dist --output=dist/napi.linux --target=x86_64-unknown-linux-gnu src/index.ts",
+ "compile-macos": "deno compile --allow-all --include=../app/dist --output=dist/napi.macos --target=x86_64-apple-darwin src/index.ts",
+ "compile-windows": "deno compile --allow-all --include=../app/dist --output=dist/napi.exe --target=x86_64-pc-windows-msvc src/index.ts",
"test": "deno test --allow-all"
}
}
diff --git a/packages/cli/src/cli/handlers/init/index.ts b/packages/cli/src/cli/handlers/init/index.ts
index b553962c..77e10ab6 100644
--- a/packages/cli/src/cli/handlers/init/index.ts
+++ b/packages/cli/src/cli/handlers/init/index.ts
@@ -74,6 +74,3 @@ export default {
builder: {},
handler,
};
-
-// Export for testing
-export { generateConfig };
diff --git a/packages/cli/src/cli/helpers/server.ts b/packages/cli/src/cli/helpers/server.ts
index d7efa99d..4ca3d8d1 100644
--- a/packages/cli/src/cli/helpers/server.ts
+++ b/packages/cli/src/cli/helpers/server.ts
@@ -52,10 +52,9 @@ export async function runServer(
`Running in development mode, proxying all traffic to the app to ${targetServiceUrl}`,
);
app.use(createProxyMiddleware({
- target: targetServiceUrl,
- changeOrigin: true,
- }),
- );
+ target: targetServiceUrl,
+ changeOrigin: true,
+ }));
} else {
app.use(express.static(app_dist));
}
diff --git a/packages/cli/src/config/globalConfig.ts b/packages/cli/src/config/globalConfig.ts
index 75f1b475..cebef1ec 100644
--- a/packages/cli/src/config/globalConfig.ts
+++ b/packages/cli/src/config/globalConfig.ts
@@ -5,7 +5,7 @@ import { v4 } from "uuid";
import { z } from "zod";
import process from "node:process";
-export const globalConfigSchema = z.object({
+const globalConfigSchema = z.object({
userId: z.string(),
});
@@ -78,8 +78,3 @@ export function getOrCreateGlobalConfig() {
return config;
}
-
-export function updateConfig(newConfig: z.infer