feat: enhance UI components and improve accessibility (#48)

- Updated typography styles across various components for better readability and consistency.
- Changed heading levels and classes in DependencyDetails for improved semantic structure.
- Refined button and text styles in HeaderControls and Header for a more cohesive design.
- Enhanced error messages and loading indicators in MainContent for better user experience.
- Improved session ID generation logic in utils for better uniqueness.
- Added connection header to API requests for better performance.
- Adjusted dropdown and tooltip components for improved usability and aesthetics.
- Fixed minor bugs and improved overall code quality.

Author: viralcodex

backend/config/env.ts

@@ -4,7 +4,7 @@ dotenv.config();
 
 // Load environment variables with defaults
 export const config = {
-  port: parseInt(process.env.PORT ?? "4000", 10),
+  port: parseInt(process.env.PORT ?? "8080", 10),
   nodeEnv: process.env.NODE_ENV ?? "development",
   openRouterApiKey: process.env.OPEN_ROUTER_KEY ?? "",
   defaultModel: process.env.DEFAULT_MODEL,

backend/prompts/schemas/inlineai-summary-schema.json

@@ -1,7 +1,5 @@
 {
   "type": "object",
-  "title": "Vulnerability Summary Schema",
-  "description": "Schema for AI-generated vulnerability summaries with strict formatting and prioritization rules.",
   "required": ["summary", "actionable_items", "explaination"],
   "properties": {
     "summary": {

backend/prompts/schemas/vulnerability-summary-schema.json

@@ -1,8 +1,5 @@
 {
-  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
-  "title": "Vulnerability Summary Schema",
-  "description": "Schema for one combined AI-generated vulnerabilities summary with strict formatting and prioritization rules.",
   "required": [
     "risk_score",
     "risk_score_justification",
@@ -40,16 +37,13 @@
     },
     "impact": {
       "type": "string",
-      "minLength": 50,
-      "maxLength": 200,
-      "description": "Description of potential impact (under 100 words). Focus on business and operational risk. **Do not repeat the summary** and **Bold** for critical information."
+      "description": "Description of potential business and technical impact."
     },
     "affected_components": {
       "type": "array",
       "items": {
         "type": "string",
-        "pattern": "^[a-zA-Z0-9._\\-]+(<[0-9]+\\.[0-9]+\\.[0-9]+)?$",
-        "description": "List of affected components/packages. Each item can include a version constraint (or a range) in the Semantic Versioning format (from version1 to version2)."
+        "description": "Affected component/package name, optionally with version."
       },
       "minItems": 1,
       "description": "List of affected components/packages along with optional version constraints."
@@ -63,15 +57,14 @@
       "type": "array",
       "items": {
         "type": "string",
-        "pattern": ".*\\*\\*.*\\*\\*.*"
+        "description": "Recommended action. Use **bold** for critical terms."
       },
       "minItems": 1,
       "description": "Ordered list of recommended actions. **Bold** the most critical information and <code></code> for commands. First action must be the primary fix."
     },
     "timeline": {
       "type": "string",
-      "pattern": "^(Within|In|By)\\s+(\\d+\\s+(Hours?|Days?|Weeks?|Months?)|Immediately|ASAP)$",
-      "description": "Estimated timeline for fix implementation. Exactly three words, title case. Examples: 'Within 2 Days', 'By 1 Week', 'Within X Hours'."
+      "description": "Estimated timeline for fix. Examples: 'Within 24 Hours', 'Within 2 Days', 'Within 1 Week'."
     },
     "exploit_vector": {
       "type": "string",

backend/server.ts

@@ -357,7 +357,6 @@ app.post("/analyseFile", analysisRateLimiter, (req: Request, res: Response) => {
     const cachedFileDetails = await getCachedFileDetails(file);
     try {
       const analysisResults = await analysisService.analyseFile(cachedFileDetails);
-
       res.json(analysisResults);
     } catch (error) {
       console.error("Error analysing file:", error);
@@ -378,10 +377,9 @@ app.post("/aiVulnSummary", aiRateLimiter, (req: Request, res: Response) => {
     console.log("Received aiVulnSummary request for:", vulnerabilities.name, "@", vulnerabilities.version);
     try {
       // Get credentials from session store
-      const { apiKey, model } = getSessionCredentials(sessionId);
-      console.log("Using credentials - apiKey:", apiKey ? "provided" : "default", "model:", model || "default");
+      const { apiKey, model } = getSessionCredentials(sessionId);      
       const service = getAiService(aiService, model, apiKey);
-      // Pass only the vulnerabilities array to the service
+
       console.log("Calling generateVulnerabilitySummary...");
       const summary = await service.generateVulnerabilitySummary(vulnerabilities.vulnerabilities);
       console.log("Got summary response, sending to client...");

backend/service/ai_service.ts

@@ -9,6 +9,8 @@ import { AIUtils } from "../utils/ai_utils";
 class AiService {
   private ai: OpenRouter;
   private defaultModel: string;
+  private readonly summaryTimeoutMs = 300000;
+  private readonly summaryMaxRetries = 3;
 
   constructor(model?: string, apiKey?: string) {
     const key = apiKey ?? process.env.OPEN_ROUTER_KEY;
@@ -28,12 +30,19 @@ class AiService {
       "{{vulnerabilities}}",
       JSON.stringify(vulnerabilities),
     );
-    console.log("Generating vulnerability summary with model:", model ?? this.defaultModel);
-    return AIUtils.callAI(this.ai, systemPrompt, userPrompt, vulnerabilitySummarySchema, {
-      model: model ?? this.defaultModel,
-      schemaName: "vulnerability_summary",
-      returnString: true,
-    });
+    const selectedModel = model ?? this.defaultModel;
+    console.log("Generating vulnerability summary with model:", selectedModel);
+
+    return AIUtils.callAIWithRetry(
+      () =>
+        AIUtils.callAI(this.ai, systemPrompt, userPrompt, vulnerabilitySummarySchema, {
+          model: selectedModel,
+          schemaName: "vulnerability_summary",
+          returnString: true,
+          timeout: this.summaryTimeoutMs,
+        }),
+      this.summaryMaxRetries,
+    );
   }
 
   generateInlineResponse(

backend/utils/ai_utils.ts

@@ -45,7 +45,7 @@ export class AIUtils {
         responseFormat: {
           type: "json_schema",
           jsonSchema: {
-            name: options.schemaName ?? "response",
+            name: options.schemaName ?? "response_schema",
             strict: true,
             schema: jsonSchema,
           },

backend/utils/utils.ts

@@ -38,10 +38,11 @@ export const getAiService = (aiService: AiService, model?: string, apiKey?: stri
   let service = aiServiceCache.get(cacheKey);
 
   if (!service) {
+    console.log("Creating new AiService instance for model:", model ?? "default");
     service = new AiService(model, apiKey);
     aiServiceCache.set(cacheKey, service);
   }
-
+  console.log("Using AiService instance for model:", model ?? "default");
   return service;
 };
 

src/app/globals.css

@@ -14,8 +14,9 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-pixel-square);
+  --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --font-pixel: var(--font-geist-pixel-square);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -191,6 +192,49 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground leading-relaxed;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-geist-sans);
+    font-weight: 700;
+    letter-spacing: -0.015em;
+  }
+  strong,
+  b {
+    font-family: var(--font-geist-sans);
+    font-weight: 700;
+  }
+}
+
+@layer utilities {
+  .font-ui-pixel {
+    font-family: var(--font-geist-pixel-square);
+    letter-spacing: 0.01em;
+  }
+
+  .font-ui-heading {
+    font-family: var(--font-geist-sans);
+    letter-spacing: -0.01em;
+  }
+
+  .font-ui-strong {
+    font-family: var(--font-geist-sans);
+    font-weight: 700;
+  }
+
+  .font-ui-mono {
+    font-family: var(--font-geist-mono);
+    letter-spacing: -0.01em;
+  }
+
+  .font-ui-data {
+    font-family: var(--font-geist-mono);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.01em;
   }
 }

src/app/layout.tsx

@@ -90,7 +90,7 @@ export default function RootLayout({
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
       </head>
-      <body className="flex h-screen flex-col bg-background bg-repeat bg-size-[300px_300px] bg-[url('/bg.svg')] bg-blend-multiply relative font-sans tracking-wide">
+      <body className="relative flex h-screen flex-col bg-background bg-repeat bg-size-[300px_300px] bg-[url('/bg.svg')] bg-blend-multiply font-sans antialiased">
         <SpeedInsights />
         <ThemeProvider>
           <NetworkStatusProvider>

src/components/banner.tsx

@@ -4,12 +4,12 @@ const Banner = () => {
       {/* Background SVG for large screens, hidden on small screens */}
       <div className="relative flex flex-col items-center justify-evenly space-y-4 px-4 sm:px-0">
         <div className="relative z-10 text-center">
-          <h1 className="sm:text-6xl text-[40px] font-bold leading-10 tracking-tighter text-yellow-300">
-            Scan and Secure your <em className="font-black tracking-light">Deps</em> !
+          <h1 className="font-ui-heading sm:text-6xl text-[40px] font-black leading-10 tracking-tighter text-yellow-300">
+            Scan and Secure your <em className="font-ui-pixel not-italic tracking-normal">Deps</em> !
           </h1>
         </div>
         <div className="mx-auto max-w-4xl text-center">
-          <p className="sm:mt-5 text-md ">
+          <p className="sm:mt-5 sm:text-lg text-md leading-relaxed">
             Visualise, detect and fix dependency vulnerabilities of your codebase in one click.{" "}
             <br /> Free & Open Source!
           </p>