Initialized repository for project codebase-context-utility

Co-authored-by: Ivan Roman  <[email protected]>

Author: v0[bot]

.gitignore

@@ -0,0 +1,34 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,29 @@
+# Codebase Context Utility
+
+A tool for generating LLM-ready context from your codebase. This utility helps you analyze, understand, and prepare your code for AI-assisted development.
+
+## Features
+
+- **File System Integration**: Open and explore local directories and files
+- **Drag-and-Drop Functionality**: Easily add files to the project
+- **Context Generation**: Create LLM-ready context from your codebase
+- **LLM Integration**: Send generated context to various LLM providers
+- **Code Analysis**: Syntax highlighting and structure analysis
+- **Export Options**: JSON, Markdown, or Plain Text formats
+- **Token Estimation**: Calculate token usage for different LLM models
+
+## How Context Generation Works in the Codebase Context Utility
+
+```mermaid
+Context Generation Process.download-icon {
+            cursor: pointer;
+            transform-origin: center;
+        }
+        .download-icon .arrow-part {
+            transition: transform 0.35s cubic-bezier(0.35, 0.2, 0.14, 0.95);
+             transform-origin: center;
+        }
+        button:has(.download-icon):hover .download-icon .arrow-part, button:has(.download-icon):focus-visible .download-icon .arrow-part {
+          transform: translateY(-1.5px);
+        }
+        #mermaid-diagram-rh05{font-family:var(--font-geist-sans);font-size:12px;fill:#000000;}#mermaid-diagram-rh05 .error-icon{fill:#552222;}#mermaid-diagram-rh05 .error-text{fill:#552222;stroke:#552222;}#mermaid-diagram-rh05 .edge-thickness-normal{stroke-width:1px;}#mermaid-diagram-rh05 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-diagram-rh05 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-diagram-rh05 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-diagram-rh05 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-diagram-rh05 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-diagram-rh05 .marker{fill:#666;stroke:#666;}#mermaid-diagram-rh05 .marker.cross{stroke:#666;}#mermaid-diagram-rh05 svg{font-family:var(--font-geist-sans);font-size:12px;}#mermaid-diagram-rh05 p{margin:0;}#mermaid-diagram-rh05 .label{font-family:var(--font-geist-sans);color:#000000;}#mermaid-diagram-rh05 .cluster-label text{fill:#333;}#mermaid-diagram-rh05 .cluster-label span{color:#333;}#mermaid-diagram-rh05 .cluster-label span p{background-color:transparent;}#mermaid-diagram-rh05 .label text,#mermaid-diagram-rh05 span{fill:#000000;color:#000000;}#mermaid-diagram-rh05 .node rect,#mermaid-diagram-rh05 .node circle,#mermaid-diagram-rh05 .node ellipse,#mermaid-diagram-rh05 .node polygon,#mermaid-diagram-rh05 .node path{fill:#eee;stroke:#999;stroke-width:1px;}#mermaid-diagram-rh05 .rough-node .label text,#mermaid-diagram-rh05 .node .label text{text-anchor:middle;}#mermaid-diagram-rh05 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-diagram-rh05 .node .label{text-align:center;}#mermaid-diagram-rh05 .node.clickable{cursor:pointer;}#mermaid-diagram-rh05 .arrowheadPath{fill:#333333;}#mermaid-diagram-rh05 .edgePath .path{stroke:#666;stroke-width:2.0px;}#mermaid-diagram-rh05 .flowchart-link{stroke:#666;fill:none;}#mermaid-diagram-rh05 .edgeLabel{background-color:white;text-align:center;}#mermaid-diagram-rh05 .edgeLabel p{background-color:white;}#mermaid-diagram-rh05 .edgeLabel rect{opacity:0.5;background-color:white;fill:white;}#mermaid-diagram-rh05 .labelBkg{background-color:rgba(255, 255, 255, 0.5);}#mermaid-diagram-rh05 .cluster rect{fill:hsl(0, 0%, 98.9215686275%);stroke:#707070;stroke-width:1px;}#mermaid-diagram-rh05 .cluster text{fill:#333;}#mermaid-diagram-rh05 .cluster span{color:#333;}#mermaid-diagram-rh05 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:var(--font-geist-sans);font-size:12px;background:hsl(-160, 0%, 93.3333333333%);border:1px solid #707070;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-diagram-rh05 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#000000;}#mermaid-diagram-rh05 .flowchart-link{stroke:hsl(var(--gray-400));stroke-width:1px;}#mermaid-diagram-rh05 .marker,#mermaid-diagram-rh05 marker,#mermaid-diagram-rh05 marker *{fill:hsl(var(--gray-400))!important;stroke:hsl(var(--gray-400))!important;}#mermaid-diagram-rh05 .label,#mermaid-diagram-rh05 text,#mermaid-diagram-rh05 text>tspan{fill:hsl(var(--black))!important;color:hsl(var(--black))!important;}#mermaid-diagram-rh05 .background,#mermaid-diagram-rh05 rect.relationshipLabelBox{fill:hsl(var(--white))!important;}#mermaid-diagram-rh05 .entityBox,#mermaid-diagram-rh05 .attributeBoxEven{fill:hsl(var(--gray-150))!important;}#mermaid-diagram-rh05 .attributeBoxOdd{fill:hsl(var(--white))!important;}#mermaid-diagram-rh05 .label-container,#mermaid-diagram-rh05 rect.actor{fill:hsl(var(--white))!important;stroke:hsl(var(--gray-400))!important;}#mermaid-diagram-rh05 line{stroke:hsl(var(--gray-400))!important;}#mermaid-diagram-rh05 :root{--mermaid-font-family:var(--font-geist-sans);}Format & ExportContext GenerationFile System ProcessingUser Loads FilesFile System ProcessingContext GenerationFormat & ExportScan Directory StructureRead File ContentsFilter Files (Skip node_modules, .git,etc.)Process File MetadataMap Dependencies Between FilesGenerate Architecture OverviewApply User SettingsEstimate Token CountFormat as JSON/Markdown/PlainTextApply Token LimitsGenerate Final Context

app/globals.css

@@ -0,0 +1,126 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 8%;
+    --foreground: 0 0% 95%;
+
+    --card: 0 0% 12%;
+    --card-foreground: 0 0% 95%;
+
+    --popover: 0 0% 12%;
+    --popover-foreground: 0 0% 95%;
+
+    --primary: 0 0% 20%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 16%;
+    --secondary-foreground: 0 0% 90%;
+
+    --muted: 0 0% 14%;
+    --muted-foreground: 0 0% 70%;
+
+    --accent: 0 0% 18%;
+    --accent-foreground: 0 0% 95%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 22%;
+    --input: 0 0% 18%;
+    --ring: 0 0% 35%;
+
+    --radius: 0.5rem;
+
+    --sidebar-background: 0 0% 10%;
+    --sidebar-foreground: 0 0% 90%;
+    --sidebar-primary: 0 0% 25%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 0 0% 16%;
+    --sidebar-accent-foreground: 0 0% 95%;
+    --sidebar-border: 0 0% 20%;
+    --sidebar-ring: 0 0% 40%;
+  }
+
+  .dark {
+    --background: 0 0% 6%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 10%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 10%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 25%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 14%;
+    --secondary-foreground: 0 0% 95%;
+
+    --muted: 0 0% 12%;
+    --muted-foreground: 0 0% 75%;
+
+    --accent: 0 0% 20%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 18%;
+    --input: 0 0% 16%;
+    --ring: 0 0% 40%;
+
+    --sidebar-background: 0 0% 8%;
+    --sidebar-foreground: 0 0% 95%;
+    --sidebar-primary: 0 0% 30%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 0 0% 14%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 16%;
+    --sidebar-ring: 0 0% 45%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(0 0% 12%);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(0 0% 25%);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(0 0% 35%);
+}
+
+/* Add no-scrollbar utility class */
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

app/layout.tsx

@@ -0,0 +1,38 @@
+import type React from "react"
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import { ThemeProvider } from "@/components/theme-provider"
+import { ToastProvider } from "@/components/toast-provider"
+import { FileSystemProvider } from "@/components/file-system-provider"
+import { Header } from "@/components/header"
+import "./globals.css"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export const metadata: Metadata = {
+  title: "Codebase Context Utility",
+  description: "A tool for generating LLM context from your codebase",
+    generator: 'v0.app'
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          <FileSystemProvider>
+            <div className="flex min-h-screen flex-col">
+              <Header />
+              <main className="flex-1">{children}</main>
+            </div>
+          </FileSystemProvider>
+          <ToastProvider />
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,17 @@
+import { Dashboard } from "@/components/dashboard"
+import { FileSystemProvider } from "@/components/file-system-provider"
+import { ToastProvider } from "@/components/toast-provider"
+import { ThemeProvider } from "@/components/theme-provider"
+
+export default function Home() {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <FileSystemProvider>
+        <main className="flex min-h-screen flex-col">
+          <Dashboard />
+        </main>
+      </FileSystemProvider>
+      <ToastProvider />
+    </ThemeProvider>
+  )
+}

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components/advanced-search.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { useState } from "react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { useFileSystem, type FileEntry } from "@/components/file-system-provider"
+
+export function AdvancedSearch() {
+  const { fileTree, setSelectedFile } = useFileSystem()
+  const [searchTerm, setSearchTerm] = useState("")
+  const [searchResults, setSearchResults] = useState<string[]>([])
+
+  const searchFiles = async () => {
+    if (!searchTerm.trim()) return
+
+    const results: string[] = []
+
+    const searchInTree = async (tree: Record<string, FileEntry>, basePath = "") => {
+      for (const [name, entry] of Object.entries(tree)) {
+        const path = basePath ? `${basePath}/${name}` : name
+
+        if (entry.type === "file") {
+          if (name.toLowerCase().includes(searchTerm.toLowerCase())) {
+            results.push(path)
+          } else {
+            // Search in file content
+            const content = await entry.handle?.getFile().then((file) => file.text())
+            if (content && content.toLowerCase().includes(searchTerm.toLowerCase())) {
+              results.push(path)
+            }
+          }
+        } else if (entry.type === "directory" && entry.children) {
+          await searchInTree(entry.children, path)
+        }
+      }
+    }
+
+    await searchInTree(fileTree)
+    setSearchResults(results)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex space-x-2">
+        <Input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} placeholder="Search files..." />
+        <Button onClick={searchFiles}>Search</Button>
+      </div>
+      {searchResults.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="font-medium">Search Results:</h4>
+          <ul className="space-y-1">
+            {searchResults.map((result) => (
+              <li key={result} className="cursor-pointer hover:underline" onClick={() => setSelectedFile(result)}>
+                {result}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}