app/components/elementTooltip.tsx (1)

1-30: Consider adding unit tests

This component handles important UI positioning logic that should be tested.

Would you like me to help create unit tests for:

• Rendering with valid props
• Handling undefined label/position
• Position calculations
• Boundary conditions

components/ui/progress.tsx (2)

12-19: Consider adding accessibility attributes and making the height configurable.

The component could benefit from better accessibility and flexibility.

Consider these improvements:

 <ProgressPrimitive.Root
   ref={ref}
+  aria-label="Progress indicator"
   className={cn(
-    "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+    "relative w-full overflow-hidden rounded-full bg-secondary",
+    "h-4", // Move height to a separate class or make it configurable via props
     className
   )}
   {...props}
 >

---

20-24: Consider improving the transform calculation readability.

The progress calculation logic could be more readable.

Consider this improvement:

 <ProgressPrimitive.Indicator
   className="h-full w-full flex-1 bg-primary transition-all"
-  style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+  style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
 />

app/components/combobox.tsx (3)

3-8: Add JSDoc comments to document the Props interface

While the interface is well-defined, adding JSDoc comments would improve documentation and provide better IDE support.

+/**
+ * Props for the Combobox component
+ */
 interface Props {
+    /** Array of options to display in the combobox */
     options: string[]
+    /** Currently selected value */
     selectedValue: string
+    /** Callback function triggered when selection changes */
     onSelectedValue: (value: string) => void
 }

---

13-13: Enhance accessibility attributes

The component should include proper ARIA attributes for better accessibility.

-            <SelectTrigger className="rounded-md border focus:ring-0 focus:ring-offset-0">
+            <SelectTrigger 
+                className="rounded-md border focus:ring-0 focus:ring-offset-0"
+                aria-label="Repository selection"
+                aria-invalid={options.length === 0}
+            >

---

20-22: Consider adding tooltips for long repository names

Long repository names might get truncated in the UI. Consider adding tooltips to show the full name.

-                        <SelectItem key={option} value={option}>
+                        <SelectItem 
+                            key={option} 
+                            value={option}
+                            title={option}
+                        >
                             {option}
                         </SelectItem>

components/ui/checkbox.tsx (2)

9-12: Consider adding JSDoc documentation for better developer experience.

The component typing is well-implemented with proper use of forwardRef and TypeScript. To enhance maintainability, consider adding JSDoc documentation describing the component's purpose and props.

Add documentation above the component:

+/**
+ * A checkbox component that builds on top of Radix UI's checkbox primitive.
+ * Supports all standard checkbox primitive props and custom styling.
+ */
const Checkbox = React.forwardRef<

---

28-30: Consider exporting component type for external usage.

While the current implementation is correct, consider exporting the component's type for consumers who might need it for type-safe composition.

Add type export:

+export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
export { Checkbox }

app/components/toolbar.tsx (3)

18-19: Document the fit parameter value.

The magic number 80 in chart.fit(undefined, 80) should be documented to explain its purpose and impact on the visualization.

Consider adding a comment or extracting it as a named constant:

+ // Padding of 80px when fitting the graph
+ const FIT_PADDING = 80;
- chart.fit(undefined, 80)
+ chart.fit(undefined, FIT_PADDING)

---

24-45: Consider enhancing accessibility.

The button implementation is clean and functional, but could benefit from additional accessibility attributes.

Consider adding aria-label attributes and keyboard focus styles:

 <button
   className="border p-2"
+  aria-label="Zoom Out"
   onClick={() => handleZoomClick(0.9)}
   title="Zoom Out"
+  focus:outline-none focus:ring-2 focus:ring-primary
 >
   <Minus />
 </button>

---

Missing import for cytoscape.Core type.

The Toolbar component uses cytoscape.Core but does not import it.

🔗 Analysis chain

Line range hint 4-6: Verify cytoscape type import.

The component uses the cytoscape.Core type but there's no explicit import for it.

Let's verify the type availability:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if cytoscape types are properly imported somewhere in the project
rg -l "from ['|\"]@types/cytoscape['|\"]|from ['|\"]cytoscape['|\"]" 

Length of output: 203

tailwind.config.js (1)

26-28: Consider using HSL variables for consistency

The new colors are defined using hex values while existing colors use HSL variables. This inconsistency could make theme maintenance more difficult, especially for dark mode support.

Consider following the existing pattern:

-        pink: "#F43F5F",
-        yellow: "#E9B306",
-        blue: "#15B8A6",
+        pink: "hsl(var(--pink))",
+        yellow: "hsl(var(--yellow))",
+        teal: "hsl(var(--teal))",

Then define the corresponding CSS variables in your base styles.

app/globals.css (1)

81-92: Consider using CSS variables for colors

The .Tip class uses hardcoded color values. For better maintainability and consistency with the theme system, consider moving these to CSS variables.

 .Tip {
-  @apply flex gap-2 p-4 border border-[#0000001A] bg-[#F9F9F9] hover:bg-[#ECECEC] rounded-md text-left;
+  @apply flex gap-2 p-4 border rounded-md text-left;
+  border-color: hsl(var(--border) / 0.1);
+  background-color: hsl(var(--muted));
+  &:hover {
+    background-color: hsl(var(--muted) / 0.8);
+  }
   .label {
     @apply text-[16px] font-bold leading-[14px]
   }
   .text {
-    @apply text-[16px] font-normal leading-[20px] text-[#7D7D7D]
+    @apply text-[16px] font-normal leading-[20px] text-muted-foreground
   }
   div {
     @apply flex flex-col gap-2 text-start
   }
 }

app/components/dataPanel.tsx (3)

5-9: Consider improving type definitions for better type safety.

The Props interface could be enhanced with more specific types:

• Consider making url optional if it's not always required
• Add JSDoc comments to document the purpose of each prop

 interface Props {
+    /** The node object containing data to display */
     obj: Node | undefined;
+    /** Callback to update the selected node */
     setObj: Dispatch<SetStateAction<Node | undefined>>;
+    /** URL to the repository or source */
-    url: string;
+    url?: string;
 }

---

11-18: Add type safety to excluded properties.

Consider using a type-safe approach to ensure excluded properties match the Node type.

-const excludedProperties = [
+const excludedProperties: ReadonlyArray<keyof Node> = [
     "category",
     "color",
     "expand",
     "collapsed",
     "isPath",
     "isPathStartEnd"
 ]

---

20-22: Consider adding a placeholder for undefined state.

Instead of returning null, consider showing a placeholder message to improve user experience.

-    if (!obj) return null;
+    if (!obj) return (
+        <div className="text-gray-400 p-4">
+            Select an item to view details
+        </div>
+    );

app/components/elementMenu.tsx (3)

5-5: Remove unused icon imports

The following icons are imported but never used in the component: ChevronLeft, ChevronRight, and ChevronsRightLeft.

-import { ChevronLeft, ChevronRight, ChevronsLeftRight, ChevronsRightLeft, Copy, Globe, Maximize2 } from "lucide-react";
+import { ChevronsLeftRight, Copy, Globe, Maximize2 } from "lucide-react";

---

13-13: Fix typo in prop name

The prop name handelMaximize should be handleMaximize.

-    handelMaximize: () => void;
+    handleMaximize: () => void;

---

40-43: Add boundary checks for menu positioning

The current positioning logic might cause the menu to overflow screen boundaries. Consider adding checks to ensure the menu stays within viewport bounds.

 style={{
-    left: position.x - containerWidth / 2,
-    top: position.y + 5
+    left: Math.min(
+      Math.max(0, position.x - containerWidth / 2),
+      window.innerWidth - containerWidth
+    ),
+    top: Math.min(
+      position.y + 5,
+      window.innerHeight - 40
+    )
 }}

components/ui/dialog.tsx (1)

56-82: Consider adding forwardRef for consistency.

The implementation is clean and the responsive design is well thought out. However, for consistency with other components in this file, consider using forwardRef for both DialogHeader and DialogFooter.

app/components/commitList.tsx (3)

24-24: Define proper type for commitChanges state

The state uses 'any' type which can be replaced with a proper interface based on its usage.

-const [commitChanges, setCommitChanges] = useState<any>()
+interface CommitChanges {
+    additionsIds: string[];
+    modifiedIds: string[];
+}
+const [commitChanges, setCommitChanges] = useState<CommitChanges | undefined>()

---

99-101: Improve date formatting logic

The date formatting logic could be extracted into a utility function and use more robust formatting.

+const formatCommitDate = (timestamp: number) => {
+    const date = new Date(timestamp * 1000);
+    return {
+        month: date.toLocaleDateString('default', { 
+            day: 'numeric',
+            month: 'short'
+        }),
+        time: date.toLocaleTimeString('default', { 
+            hour: '2-digit',
+            minute: '2-digit'
+        })
+    };
+}

-                        const date = new Date(commit.date * 1000)
-                        const month = `${date.getDate()} ${date.toLocaleString('default', { month: 'short' })}`
-                        const hour = `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
+                        const { month, time } = formatCommitDate(commit.date)

---

81-142: Consider extracting navigation buttons into a separate component

The navigation buttons share similar structure and could be extracted into a reusable component to reduce code duplication.

interface NavigationButtonProps {
    direction: 'left' | 'right';
    onClick: () => void;
    disabled: boolean;
}

const NavigationButton = ({ direction, onClick, disabled }: NavigationButtonProps) => (
    <button
        className={`p-4 border-${direction === 'left' ? 'r' : 'l'} border-gray-300`}
        onClick={onClick}
        disabled={disabled}
    >
        {!disabled ? (
            direction === 'left' ? <ChevronLeft /> : <ChevronRight />
        ) : (
            <div className='h-6 w-6' />
        )}
    </button>
);

app/components/Input.tsx (5)

23-26: Improve state type definitions

The state types could be more specific for better type safety and maintainability.

-    const [options, setOptions] = useState<any[]>([])
-    const [selectedOption, setSelectedOption] = useState<number>(0)
+    interface AutoCompleteOption {
+        id: string
+        labels: string[]
+        properties: {
+            name: string
+            path: string
+        }
+    }
+    const [options, setOptions] = useState<AutoCompleteOption[]>([])
+    const [selectedOption, setSelectedOption] = useState<number | -1>(0)

---

36-68: Enhance data fetching implementation

Several improvements could be made to the data fetching logic:

1. Consider using a proper debounce utility
2. Add loading state for better UX
3. Improve error handling with specific messages

+    const [isLoading, setIsLoading] = useState(false)
+    const debouncedFetch = useMemo(
+        () => debounce(async (value: string) => {
+            if (!value || node?.id) {
+                setOptions([])
+                setOpen(false)
+                return
+            }
+            setIsLoading(true)
             try {
                 const result = await fetch(`/api/repo/${graph.Id}/?prefix=${value}&type=autoComplete`, {
                     method: 'POST'
                 })
                 if (!result.ok) {
+                    throw new Error(`Failed to fetch: ${result.statusText}`)
+                }
                 const json = await result.json()
                 const { completions } = json.result
                 setOptions(completions)
                 if (completions?.length > 0) {
                     setOpen(true)
                 }
             } catch (error) {
                 toast({
                     variant: "destructive",
                     title: "Uh oh! Something went wrong.",
-                    description: "Please try again later.",
+                    description: error instanceof Error ? error.message : "Please try again later.",
                 })
+            } finally {
+                setIsLoading(false)
             }
-        }, 500)
+        }, 500),
+        [graph.Id, node?.id]
+    )

---

87-87: Remove debug console.log statement

Remove the console.log statement from the production code.

-                console.log(selectedOption <= 0 ? selectedOption : selectedOption - 1);

---

110-174: Enhance UI implementation

Several UI improvements could be made:

1. Replace inline styles with CSS classes
2. Add loading indicator
3. Improve color handling

         <div
-            className={cn("w-[20dvw] relative pointer-events-none rounded-md gap-4", parentClassName)}
+            className={cn(
+                "w-[20dvw] relative pointer-events-none rounded-md gap-4",
+                "after:content-[''] after:absolute after:top-[calc(100%+16px)] after:left-0 after:w-full",
+                parentClassName
+            )}
         >
             <input
                 ref={inputRef}
                 onKeyDown={handelKeyDown}
-                className={cn("w-full border p-2 rounded-md pointer-events-auto", className)}
+                className={cn(
+                    "w-full border p-2 rounded-md pointer-events-auto",
+                    isLoading && "pr-8",
+                    className
+                )}
                 value={value || ""}
                 onChange={(e) => {
                     const newVal = e.target.value
                     onValueChange({ name: newVal })
                 }}
                 onBlur={() => setOpen(false)}
                 {...props}
             />
+            {isLoading && (
+                <div className="absolute right-8 top-1/2 -translate-y-1/2">
+                    <Spinner className="h-4 w-4" />
+                </div>
+            )}

🧰 Tools

🪛 Biome

[error] 151-151: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

32-32: Use optional chaining for cleaner code

Replace the logical AND operators with optional chaining for better readability.

-            scrollToBottom && scrollToBottom()
+            scrollToBottom?.()

-                                        handelSubmit && handelSubmit(option)
+                                        handelSubmit?.(option)

Also applies to: 151-151

🧰 Tools

🪛 Biome

[error] 32-32: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

components/ui/dropdown-menu.tsx (4)

21-42: Consider making the chevron icon size configurable

The implementation is solid, but the chevron icon size is hardcoded. Consider making it configurable through props for better flexibility.

-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className={cn("ml-auto", iconClassName ?? "h-4 w-4")} />

Add to the props interface:

{
  iconClassName?: string
}

---

43-58: Consider making z-index configurable

The z-index is hardcoded to 50. In complex UIs, this might need to be adjusted based on the context.

-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      cn("min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+       zIndex ? `z-[${zIndex}]` : "z-50"),

Add to the props interface:

{
  zIndex?: number
}

---

95-140: Consider consistent icon size configuration across items

Both CheckboxItem and RadioItem have hardcoded icon sizes. Consider extracting these to a shared configuration or making them configurable through props.

interface IconSizeProps {
  indicatorIconSize?: string
}

// Apply to both CheckboxItem and RadioItem props

Then in the components:

- <Check className="h-4 w-4" />
+ <Check className={cn(indicatorIconSize ?? "h-4 w-4")} />

- <Circle className="h-2 w-2 fill-current" />
+ <Circle className={cn(indicatorIconSize ?? "h-2 w-2", "fill-current")} />

---

1-200: Consider adding keyboard navigation documentation

While Radix UI handles accessibility well, it would be helpful to document the supported keyboard shortcuts for users of this component.

Consider adding a comment block at the top of the file:

/**
 * Keyboard Navigation:
 * - Space/Enter: Select item
 * - Arrow Up/Down: Navigate between items
 * - Arrow Right: Open submenu
 * - Arrow Left: Close submenu
 * - Esc: Close dropdown
 */

app/api/repo/route.ts (3)

5-7: Make the API base URL configurable

Hardcoding the API endpoint can lead to issues when deploying to different environments. Consider using an environment variable or a configuration file to define the base URL for better flexibility.

Apply this diff to make the base URL configurable:

+    const apiBaseUrl = process.env.API_BASE_URL || 'http://127.0.0.1:5000';
     const result = await fetch(`${apiBaseUrl}/list_repos`, {
         method: 'GET',
     })

---

26-28: Make the API base URL configurable

Similar to the GET method, hardcoding the API endpoint can cause deployment issues. Use an environment variable or configuration file for the base URL.

Apply this diff to make the base URL configurable:

+    const apiBaseUrl = process.env.API_BASE_URL || 'http://127.0.0.1:5000';
     const result = await fetch(`${apiBaseUrl}/process_repo`, {
         method: 'POST',
         body: JSON.stringify({ repo_url: url, ignore: ["./.github", "./sbin", "./.git", "./deps", "./bin", "./build"] }),

---

28-28: Consider making the 'ignore' list configurable

The list of directories to ignore is hardcoded. Allowing this list to be configurable can provide greater flexibility for different use cases.

You might define the 'ignore' list in a configuration file or accept it as a parameter.

app/components/model.ts (4)

25-35: Combine color names and values into a single data structure

To ensure that color names and their corresponding hex values remain synchronized, consider combining them into a single array of objects. This approach reduces the risk of index misalignment and makes the code more maintainable.

Example implementation:

const COLORS = [
  { name: "pink", value: "#F43F5F" },
  { name: "yellow", value: "#E9B306" },
  { name: "blue", value: "#15B8A6" },
];

Update the color retrieval functions accordingly:

export function getCategoryColor(index: number): { name: string; value: string } {
  return COLORS[index % COLORS.length];
}

---

37-42: Update color retrieval functions to use the new data structure

With the combined COLORS array, the getCategoryColorValue and getCategoryColorName functions can be simplified and consolidated.

Proposed changes:

export function getCategoryColorValue(index: number): string {
  return COLORS[index % COLORS.length].value;
}

export function getCategoryColorName(index: number): string {
  return COLORS[index % COLORS.length].name;
}

Alternatively, consider using a single function to retrieve both name and value, as shown in the previous comment.

---

116-120: Duplicate assignment of node.isPath

The property node.isPath is being assigned twice within the same if block. The second assignment is redundant and can be removed to streamline the code.

Apply this diff to remove the duplicate assignment:

if (node) {
  node.isPath = !!path;
  if (path?.start?.id == nodeData.id || path?.end?.id == nodeData.id) {
    node.isPathStartEnd = true;
  }
- node.isPath = !!path;
  return;
}

---

100-100: Initialize new elements array before extending

The newElements array is initialized but not used efficiently. Ensure that it collects all new elements added during the extend method for potential further processing or returning.

Also applies to: 102-102

app/api/repo/[graph]/route.tsx (3)

48-207: Avoid embedding large data directly in code; consider moving to external files or modules.

Embedding extensive JSON data within your code can make it harder to read and maintain. It may also increase load times and memory usage. Consider moving this data to an external JSON file or a dedicated module and import it as needed.

Example approach:

• Create a separate file (e.g., mockData/switchCommitData.ts) exporting the JSON data.
• Import the data in your route.tsx file:

import switchCommitData from 'path/to/mockData/switchCommitData';

...

case "switchCommit": {
    return NextResponse.json({ result: switchCommitData }, { status: 200 });
}

---

19-21: Use appropriate HTTP status codes for server errors in GET method.

Returning a 400 status code for server-side exceptions may not accurately represent the nature of the error. Consider using a 500 Internal Server Error status code for unexpected exceptions to inform the client that the error is on the server side.

Apply this diff:

-     return NextResponse.json({ message: (err as Error).message }, { status: 400 })
+     return NextResponse.json({ message: (err as Error).message }, { status: 500 })

---

245-247: Use appropriate HTTP status codes for server errors in POST method.

Similarly, in the POST method, return a 500 status code for server-side exceptions to accurately convey the error type.

Apply this diff:

-     return NextResponse.json({ message: (err as Error).message }, { status: 400 })
+     return NextResponse.json({ message: (err as Error).message }, { status: 500 })

app/components/code-graph.tsx (1)

356-364: Remove commented-out code to enhance code cleanliness

There are large blocks of commented-out code in the render method. Removing unused code can improve readability and maintainability.

Apply this diff to remove the commented code:

356,364d355
- {/* Commented code block */}
- <Input
-     graph={graph}
-     value={searchNode.name}
-     onValueChange={({ name }) => setSearchNode({ name })}
-     icon={<Search />}
-     handleSubmit={handleSearchSubmit}
-     node={searchNode}
- />
386,401d376
- {/* Commented code block */}
- <div className='bg-white flex gap-2 border rounded-md p-2 pointer-events-auto'>
-     <div className='flex gap-2 items-center'>
-         <Checkbox
-             className='h-5 w-5 bg-gray-500 data-[state true]'
-         />
-         <p className='text-bold'>Display Changes</p>
-     </div>
-     <div className='flex gap-2 items-center'>
-         <div className='h-4 w-4 bg-pink-500 bg-opacity-50 border-[3px] border-pink-500 rounded-full'/>
-         <p className='text-pink-500'>Were added</p>
-     </div>
-     <div className='flex gap-2 items-center'>
-         <div className='h-4 w-4 bg-blue-500 bg-opacity-50 border-[3px] border-blue-500 rounded-full'/>
-         <p className='text-blue-500'>Were edited</p>
-     </div>
- </div>
496,506d470
- {/* Commented code block */}
- {
-     graph.Id &&
-     <CommitList
-         commitIndex={commitIndex}
-         commits={commits}
-         currentCommit={currentCommit}
-         setCommitIndex={setCommitIndex}
-         setCurrentCommit={setCurrentCommit}
-         graph={graph}
-         chartRef={chartRef}
-     />
- }

Also applies to: 386-401, 496-506

app/components/chat.tsx (6)

100-190: Refactor 'handelSetSelectedPath' function for readability and maintainability

The handelSetSelectedPath function is lengthy and contains nested conditions with duplicated styling code, which can be hard to read and maintain.

• Typo Correction: Rename handelSetSelectedPath to handleSetSelectedPath for consistency.

  - const handelSetSelectedPath = (p: { nodes: any[], edges: any[] }) => {
  + const handleSetSelectedPath = (p: { nodes: any[], edges: any[] }) => {

• Extract Helper Functions: Break down the function into smaller helper functions to handle specific tasks like styling edges or nodes.

• Define Style Constants: Extract repeated style objects into constants to reduce duplication and improve clarity.

---

208-226: Enhance error handling in 'sendQuery' function

Currently, if the fetch request fails, the error message from the server is not displayed to the user.

Modify the error handling to provide more informative feedback.

if (!result.ok) {
    const errorText = await result.text();
    setMessages((prev) => {
        prev = [...prev.slice(0, -1)];
-       return [...prev, { type: MessageTypes.Response, text: "Sorry but I couldn't answer your question, please try rephrasing." }];
+       return [...prev, { type: MessageTypes.Response, text: `Error: ${errorText}` }];
    });
    return;
}

This allows users to see the actual error message returned by the server, which can aid in troubleshooting.

---

437-459: Simplify null checks using optional chaining

You can streamline your code by using optional chaining when accessing message.paths.

Replace the explicit null check with optional chaining.

{
-   message.paths &&
-   message.paths.map((p, i: number) => (
+   message.paths?.map((p, i: number) => (
        // code
    ))
}

This reduces verbosity and improves readability.

🧰 Tools

🪛 Biome

[error] 437-459: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

472-514: Ensure accessibility of interactive elements

Interactive elements like buttons and forms should be accessible using keyboard navigation.

Add appropriate ARIA labels and ensure that elements can be focused and activated using the keyboard.

<button
+   aria-label="Toggle Tip"
    className="p-4 border rounded-md hover:border-[#FF66B3] hover:bg-[#FFF0F7]"
    onClick={() => setTipOpen(prev => !prev)}
>

---

Line range hint 199-231: Consistent typo 'handel' instead of 'handle' in function names

Multiple functions have 'handel' instead of 'handle' in their names, which can be confusing.

Correct the typos to improve code clarity.

- async function handelQueryInputChange(event: any) {
+ async function handleQueryInputChange(event: any) {

...

- const handelSubmit = async () => {
+ const handleSubmit = async () => {

🧰 Tools

🪛 Biome

[error] 288-288: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

---

[error] 437-459: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

377-469: Consider refactoring 'getMessage' switch cases into separate components

The getMessage function's switch cases are lengthy and could benefit from refactoring into smaller, reusable components.

Extract each case into its own functional component for better modularity.

// Example:

const QueryMessage = ({ message, index }: { message: Message; index: number }) => (
    // JSX code
);

const ResponseMessage = ({ message, index }: { message: Message; index: number }) => (
    // JSX code
);

...

// In getMessage function:

switch (message.type) {
    case MessageTypes.Query:
        return <QueryMessage key={index} message={message} />;
    case MessageTypes.Response:
        return <ResponseMessage key={index} message={message} />;
    // Other cases...
}

This enhances readability and makes future maintenance easier.

🧰 Tools

🪛 Biome

[error] 437-459: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Search for absolute positioning classes or styles that might depend on the relative container
rg -g '*.tsx' -g '*.css' -l 'absolute|fixed|sticky' app/

 export default function ElementTooltip({ label, position }: Props) {
     const [containerWidth, setContainerWidth] = useState<number>(0);
 
-    if (!label || !position) return null
+    if (!label || !position?.x || !position?.y) return null

#!/bin/bash
# Search for Progress component usage in app/page.tsx
rg -A 5 "Progress" "app/page.tsx"

# Check for any other usages of the Progress component
ast-grep --pattern 'import { $$$, Progress, $$$ } from "@/components/ui/progress"'

#!/bin/bash
# Search for Combobox usage in CodeGraph component
rg -l "import.*Combobox.*from.*components/combobox" app/components/
rg -A 5 "<Combobox" app/components/

#!/bin/bash
# Search for Labels component usage to verify prop updates
ast-grep --pattern 'Labels $props' -l typescript,typescriptreact
rg -A 5 '<Labels' --type typescript --type typescriptreact

#!/bin/bash
# Search for other z-index values in the codebase to ensure proper layering
rg -g '*.{tsx,css,scss}' 'z-\d+|z-\[.*?\]' --no-heading

#!/bin/bash
# Description: Check peer dependencies for new packages

# Check peer dependencies for all new packages
for pkg in @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-progress react-type-animation; do
  echo "Checking $pkg:"
  npm view $pkg peerDependencies --json
done

#!/bin/bash
# Description: Check for version compatibility across Radix UI components

# List all Radix UI dependencies and their versions
echo "Current Radix UI versions:"
jq '.dependencies | with_entries(select(.key | startswith("@radix-ui")))' package.json

# Check latest versions from npm
echo -e "\nLatest versions from npm:"
for pkg in react-checkbox react-dialog react-dropdown-menu react-hover-card react-progress; do
  echo "@radix-ui/$pkg: $(npm view @radix-ui/$pkg version)"
done

-.font-roberto {
+.font-roboto {
   font-family: 'Roboto', sans-serif;
 }

#!/bin/bash
# Find all references to the incorrect class name
rg -l "font-roberto" --type html --type jsx --type tsx

#!/bin/bash
# Check for other components using similar z-index values
rg "z-\d+" --type tsx

# Look for other components with similar animation patterns
rg "data-\[state=(open|closed)\]:(animate|slide|zoom)" --type tsx

#!/bin/bash
# Check for other components using similar z-index values
rg "z-\d+" -- *.tsx

# Look for other components with similar animation patterns
rg "data-\[state=(open|closed)\]:(animate|slide|zoom)" -- *.tsx

#!/bin/bash
# Check for other components using similar z-index values
rg "z-\d+" -g "*.tsx"

# Look for other components with similar animation patterns
rg "data-\[state=(open|closed)\]:(animate|slide|zoom)" -g "*.tsx"

#!/bin/bash
# Check for other components using similar z-index values
rg "z-\d+" --glob "**/*.tsx"

# Look for other components with similar animation patterns
rg "data-\[state=(open|closed)\]:(animate|slide|zoom)" --glob "**/*.tsx"

-      <ChevronDown className="h-4 w-4" />
+      <ChevronDown className="h-4 w-4 opacity-[var(--icon-opacity)]" />

#!/bin/bash
# Description: Verify that edge property names are consistent across the codebase.

# Search for edge property usages
rg 'edgeData\.(src|dest|src_node|dest_node|type|relation)'

-           "properties": {
-               name: "Source"
+           "properties": {
+               "name": "Source"
            },

- chart.add(formattedPaths.flatMap((p: any) => graph.extend(p, false, path)));
+ const extendedPaths = formattedPaths.flatMap((p: any) => graph.extend(p, false, path));
+ chart.add(extendedPaths);

app/components/Input.tsx (3)

47-47: Move API URL to constants

Consider moving the API URL to a constants file for better maintainability and reusability.

+// constants/api.ts
+export const API_ROUTES = {
+    AUTOCOMPLETE: (graphId: string) => `/api/repo/${graphId}/?prefix=`
+}

-const result = await fetch(`/api/repo/${graph.Id}/?prefix=${value}&type=autoComplete`, {
+const result = await fetch(`${API_ROUTES.AUTOCOMPLETE(graph.Id)}${value}&type=autoComplete`, {

---

32-32: Use optional chaining for better null safety

Replace the conditional operator with optional chaining for better readability.

-scrollToBottom && scrollToBottom()
+scrollToBottom?.()

🧰 Tools

🪛 Biome

[error] 32-32: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

153-153: Use optional chaining for better null safety

Replace the conditional operator with optional chaining for better readability.

-handelSubmit && handelSubmit(option)
+handelSubmit?.(option)

🧰 Tools

🪛 Biome

[error] 153-153: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

app/components/code-graph.tsx (3)

55-67: Consider extracting magic numbers into constants

The node styles contain several hardcoded values that could be extracted into named constants for better maintainability and reusability.

Consider applying this refactor:

+ const NODE_STYLES = {
+   HEIGHT: "15rem",
+   WIDTH: "15rem",
+   FONT_SIZE: "3rem",
+   BORDER_WIDTH: 0.3,
+   OVERLAY_PADDING: "1rem",
+ };

  {
    selector: "node",
    style: {
      label: "data(name)",
      "color": "black",
      "text-valign": "center",
      "text-wrap": "ellipsis",
      "text-max-width": "10rem",
      shape: "ellipse",
-     height: "15rem",
-     width: "15rem",
-     "border-width": 0.3,
+     height: NODE_STYLES.HEIGHT,
+     width: NODE_STYLES.WIDTH,
+     "border-width": NODE_STYLES.BORDER_WIDTH,
      "border-color": "black",
      "border-opacity": 0.5,
      "background-color": "data(color)",
-     "font-size": "3rem",
-     "overlay-padding": "1rem",
+     "font-size": NODE_STYLES.FONT_SIZE,
+     "overlay-padding": NODE_STYLES.OVERLAY_PADDING,
    },
  }

---

254-293: Consider extracting graph manipulation logic into custom hooks

The double-tap handler contains complex graph manipulation logic that could be extracted into a custom hook for better reusability and testing.

Consider creating a custom hook:

function useGraphManipulation(chartRef: MutableRefObject<cytoscape.Core | null>) {
  const handleNodeExpansion = async (node: Node) => {
    const chart = chartRef.current;
    if (!chart) return;
    
    // ... existing logic ...
  };
  
  return { handleNodeExpansion };
}

---

495-506: Remove commented out code

The CommitList component is commented out. If this code is no longer needed, it should be removed. If it's for future use, consider tracking it in a separate issue.

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Search for references to this display changes feature
rg -l "Display Changes" --type tsx

#!/bin/bash
# Search for references to 'Display Changes' in .tsx files
rg -l 'Display Changes' --glob '*.tsx'