Vis improvement 2 (#53)

* feat: enhance UI components and improve accessibility

- 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.

* Add backend setup script and UI/CLI tweaks

Add a backend setup-and-run.sh script and corresponding package scripts (root and backend) to automate environment creation, dependency install, DB container start, Drizzle schema generation/push, and dev server start; also add an MCP dev script and README quick-start/MCP notes. Update backend package.json and lockfile to include new dependencies required by these tools. Remove an old image optimization script. Apply assorted frontend/CLI refinements: adjust global font and diagram sizing, tweak dependency sidebar styling and tab label, enhance CodeBlock with a label and spacing, label batch commands, change save-analysis-history to deduplicate across all dates, and expand CLI command help/options and output formatting. These changes streamline local backend setup and improve UX for scanning/fixing workflows.

Author: viralcodex

README.md

@@ -43,6 +43,22 @@ Clone the repository and open the repository in any text editor/IDE you like.
 
 ## Backend
 
+- Quick start (one command from project root):
+
+  ```bash
+  bun run backend:setup
+  ```
+
+- This command will:
+  - create `backend/.env` if missing
+  - set local defaults for `PORT`, `NODE_ENV`, `DEV_ORIGIN`, and `DATABASE_URL` (only if empty/missing)
+  - install backend dependencies
+  - start or create the Postgres Docker container
+  - run Drizzle schema generation + push
+  - start the backend dev server
+
+- Manual setup (if you prefer step-by-step):
+
 - Navigate to the **./backend** directory inside the repository
 
   ```bash
@@ -90,6 +106,21 @@ Clone the repository and open the repository in any text editor/IDE you like.
   bun run dev
   ```
 
+### MCP (Phase 1)
+
+- Run the local MCP server (stdio transport) with:
+
+  ```bash
+  bun run backend:mcp
+  ```
+
+- Phase 1 tools:
+  - `scan_repo`
+  - `scan_manifest`
+  - `list_vulnerabilities`
+
+- Full MCP notes are in `backend/mcp/README.md`.
+
 # Ideation and Motivation
 
 I came across <a href='https://gitdiagram.com/'>GitDiagram</a> where I made some contributions to the repository, I also had some idea to before this to build something like a visualisation for vulnerable dependencies, which can help people find, see and resolve them easily.

backend/bun.lock

@@ -8,6 +8,8 @@
   "type": "commonjs",
   "main": "index.js",
   "scripts": {
+    "setup:dev": "./setup-and-run.sh",
+    "mcp:dev": "bun mcp/server.ts",
     "dev": "bun --watch server.ts",
     "build": "cross-env NODE_ENV=production tsc",
     "start": "bun server.ts",
@@ -34,6 +36,7 @@
     "@langchain/core": "^0.3.72",
     "@langchain/google-genai": "^0.2.16",
     "@langchain/langgraph": "^0.4.9",
+    "@modelcontextprotocol/sdk": "^1.26.0",
     "@openrouter/sdk": "^0.3.11",
     "@types/pg": "^8.15.5",
     "ae-cvss-calculator": "^1.0.8",
@@ -49,7 +52,8 @@
     "morgan": "^1.10.1",
     "multer": "^2.0.2",
     "pg": "^8.16.3",
-    "xml2js": "^0.6.2"
+    "xml2js": "^0.6.2",
+    "zod": "^3.25"
   },
   "devDependencies": {
     "@types/cors": "^2.8.19",

backend/package.json

@@ -0,0 +1,77 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+cd "$SCRIPT_DIR"
+
+require_command() {
+  local cmd="$1"
+  if ! command -v "$cmd" >/dev/null 2>&1; then
+    echo "Error: '$cmd' is required but not installed."
+    exit 1
+  fi
+}
+
+random_password() {
+  if command -v openssl >/dev/null 2>&1; then
+    openssl rand -base64 12 | tr '+/' '-_'
+  else
+    date +%s | shasum | awk '{print substr($1,1,16)}'
+  fi
+}
+
+upsert_env_value() {
+  local key="$1"
+  local value="$2"
+
+  if grep -q "^${key}=" .env; then
+    local current_value
+    current_value="$(grep "^${key}=" .env | tail -n 1 | cut -d '=' -f 2-)"
+    if [ -z "$current_value" ]; then
+      awk -v key="$key" -v value="$value" '
+        BEGIN { replaced = 0 }
+        {
+          if ($0 ~ "^" key "=$" && replaced == 0) {
+            print key "=" value
+            replaced = 1
+          } else {
+            print $0
+          }
+        }
+      ' .env > .env.tmp && mv .env.tmp .env
+    fi
+  else
+    echo "${key}=${value}" >> .env
+  fi
+}
+
+require_command bun
+require_command docker
+
+if [ ! -f .env ]; then
+  if [ -f .env.example ]; then
+    cp .env.example .env
+  else
+    touch .env
+  fi
+  echo "Created backend/.env"
+fi
+
+DB_PASSWORD="$(random_password)"
+upsert_env_value "PORT" "8080"
+upsert_env_value "NODE_ENV" "development"
+upsert_env_value "DEV_ORIGIN" "http://localhost:3000"
+upsert_env_value "DATABASE_URL" "postgresql://gitdepsec:${DB_PASSWORD}@localhost:5432/gitdepsec"
+
+echo "Installing backend dependencies..."
+bun install
+
+echo "Starting database container..."
+./database-start.sh
+
+echo "Generating and pushing Drizzle schema..."
+bun run db:generate
+bun run db:push
+
+echo "Starting backend server..."
+bun run dev

backend/setup-and-run.sh

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "backend:setup": "bun --cwd backend run setup:dev",
+    "backend:mcp": "bun --cwd backend run mcp:dev",
     "dev": "cross-env NODE_ENV=development next dev --turbopack",
     "build": "cross-env NODE_ENV=production && next build",
     "start": "cross-env NODE_ENV=production next start",