Large update to the visualizer UI

compose.yaml

@@ -0,0 +1,16 @@
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: frontend/Dockerfile.dev
+    ports:
+      - "3000:3000"
+    environment:
+      CHOKIDAR_USEPOLLING: "true"
+      WATCHPACK_POLLING: "true"
+    volumes:
+      - ./frontend:/app
+      - frontend_node_modules:/app/node_modules
+
+volumes:
+  frontend_node_modules:

docs/get-started.md

@@ -11,8 +11,7 @@ Ensure that you have [Docker] installed on your computer before proceeding.
 ### Frontend
 
 ```bash
-docker build -t visualizer-frontend -f frontend/Dockerfile .
-docker run --rm -p 3000:3000 visualizer-frontend
+docker compose up --build
 # App at http://localhost:3000
 ```
 
@@ -36,6 +35,7 @@ proceeding.
 First, build start the backend:
 
 Go (Gin) on port 5000:
+
 ```bash
 cd go-backend
 go mod download
@@ -58,6 +58,7 @@ commits, view/compare metadata, and analyze changes.
 ## Frontend usage
 
 From the home page:
+
 1. Enter a repository:
    - Remote: full Git URL (e.g., `https://github.com/gittuf/gittuf.git`)
    - Local: absolute path to a local Git repo

frontend/Dockerfile.dev

@@ -0,0 +1,8 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY frontend/package*.json ./
+RUN npm install
+
+CMD ["npm", "run", "dev", "--", "--hostname", "0.0.0.0"]

frontend/README.md

@@ -1,32 +1,34 @@
 # gittuf Metadata Visualizer (Frontend)
 
-This directory contains the frontend for the gittuf metadata visualizer, written
-in Next.js.
+This directory contains the active frontend for the gittuf metadata visualizer,
+written in Next.js.
 
 ## Features
 
-- **Commit Visualization**: Browse repository commits and view associated
-  security metadata JSON.
-- **JSON Tree View**: Interactive tree visualization of JSON structures using
-  ReactFlow.
-- **JSON Diff Visualization**: Visual diff between two commits’ metadata with
-  statistics.
-- **JSON Diff Statistics**: Summarize added, removed, changed, and unchanged
-  elements.
-- **Analysis Dashboard**: Chart the evolution, structure distribution, and
-  change frequency across multiple commits.
-- **Dynamic File Selection**: Switch between different metadata files (e.g.,
-  `root.json`, `targets.json`).
+- **Repository Entry Flow**: Connect a remote repository, point at a local
+  repository, or launch the demo workspace from the home screen.
+- **Policy Graph Workspace**: Explore one or more draggable policy graphs inside
+  the main visualizer canvas, with tabbed canvases along the bottom bar.
+- **Graph Source Controls**: Inspect repository, policy ref, policy version,
+  metadata source, and active mode from the detail panel.
+- **Policy Query Panel**: Query a branch and changed path to see the matched
+  rule, required approvals, and authorized users.
+- **History Timeline**: Open a history view with sortable commits, a commit
+  strip, and graph canvases for browsing policy state across revisions.
+- **Comparison Canvas**: Generate side-by-side base and compare graphs with
+  added, removed, modified, and unchanged diff highlighting.
+- **Metadata and Settings Panels**: Review metadata status and summary views,
+  then adjust visible node/detail settings for the workspace.
 
 ## Tech Stack
 
-- **Framework**: Next.js 15 (App Router)
+- **Framework**: Next.js 16 (App Router)
 - **UI**: Tailwind CSS, shadcn UI components, Radix UI
 - **Visualization**: ReactFlow, Chart.js & react-chartjs-2, Framer Motion
 - **Icons**: Lucide React
 - **Language**: TypeScript
 - **Linting**: ESLint (Next.js Core Web Vitals, TypeScript)
-- **Testing**: (Add when available)
+- **Testing**: Typecheck + lint today, broader automated UI tests still to be added
 
 ## Getting Started
 
@@ -66,35 +68,54 @@ Open [http://localhost:3000](http://localhost:3000) in your browser.
 ```
 frontend/
 ├── app/
-│   ├── globals.css      # Tailwind & global styles
-│   ├── layout.tsx       # Root layout & metadata
-│   └── page.tsx         # Main page with commit form & tabs
+│   ├── globals.css                 # Tailwind & global styles
+│   ├── layout.tsx                  # Root layout & metadata
+│   ├── page.tsx                    # Home route: repository entry + visualizer workspace
+├── screens/
+│   ├── repository/
+│   │   └── repository-selector.tsx # Repository selection screen
+│   └── visualizer/
+│       ├── visualizer-workspace.tsx
+│       ├── policy-graph-canvas.tsx
+│       ├── history-canvas.tsx
+│       ├── detail-content.tsx
+│       └── panel-tabs/             # Detail panel tabs shown inside the workspace
 ├── components/
-│   ├── collapsible-card.tsx
-│   ├── commit-list.tsx
-│   ├── commit-compare.tsx
-│   ├── commit-analysis.tsx
-│   ├── json-tree-visualization.tsx
-│   ├── json-diff-visualization.tsx
-│   └── ui/              # Reusable UI primitives (Button, Input, Card, etc.)
-├── lib/
-│   ├── mock-api.ts      # Mock fetching commits & metadata
-│   ├── json-diff.ts     # JSON comparison utilities
-│   ├── utils.ts         # Helper functions
-│   └── types.ts         # Type definitions
-├── public/              # Static assets
-├── components.json      # shadcn config
-├── next.config.ts
+│   ├── app/                        # Shared app shell pieces
+│   ├── common/                     # Reusable non-route-specific feature components
+│   ├── ui/                         # shadcn/Radix-based UI primitives
+│   └── visualizer/                 # Shared visualizer controls and primitives
+├── hooks/
+│   └── visualizer/                 # Visualizer-specific hooks
+├── lib/                            # Utilities, constants, demo fixtures, and API helpers
+├── archive/                        # Non-runtime historical code only; do not treat this as active architecture
+├── public/                         # Static assets served by Next.js
+├── assets/                         # Imported image assets used by the UI
+├── components.json                 # shadcn config
+├── next.config.mjs
 ├── package.json
 └── tsconfig.json
 ```
 
 ## Usage
 
-1. Enter a GitHub repository URL containing gittuf metadata (e.g.,
-   `https://github.com/gittuf/gittuf`).
-2. Click **Fetch Repository** to load commits.
-3. Select a commit to view its metadata or choose two commits to compare.
-4. Switch between **Commits**, **Visualization**, **Compare**, and **Analysis**
-   tabs.
-5. Toggle between `root.json` and `targets.json` using the file buttons.
+1. Open the home route and enter a Git repository URL, choose a local
+   repository, or launch the demo workspace.
+2. Explore the visualizer workspace, including the graph canvas, history strip,
+   and detail panel tabs.
+
+## Contributor Notes
+
+- Active runtime code lives in `app/`, `screens/`, `components/`, `hooks/`,
+  and `lib/`.
+- `archive/` is intentionally kept only for historical reference and is not
+  part of the active frontend architecture.
+- The current home flow is:
+  `app/page.tsx` -> `hooks/use-repository-session.ts` ->
+  `screens/repository/repository-selector.tsx` ->
+  `screens/visualizer/visualizer-workspace.tsx`
+- The visualizer feature is organized by responsibility:
+  `use-visualizer-layout.ts`, `use-visualizer-tabs.ts`,
+  `use-visualizer-history-compare.ts`, and `use-graph-viewport.ts`
+  coordinate the workspace state, while the policy graph renderer is split
+  between canvas composition, SVG rendering, and per-lane rendering helpers.

frontend/app/globals.css

@@ -12,6 +12,23 @@ body {
 
 @layer base {
   :root {
+    --primary-color: #a2c5e8;
+    --secondary-color: #bad1ea;
+    --tertiary-color: #04080e;
+    --gray-highlight: #f3f4f4;
+    --dark-gray: #7e7e7e;
+    --light-gray: #f5f5f5;
+    --background-color: #dbe3e5;
+    --modified-color: #3989d9;
+    --logo-blue: #c5dee5;
+    --approve-color: #79bc89;
+    --reject-color: #cb5151;
+    --selected-color: #e8f4ff;
+    --selected-color-50: rgba(232, 244, 255, 0.5);
+    --approve-color-12: rgba(121, 188, 137, 0.12);
+    --reject-color-12: rgba(203, 81, 81, 0.12);
+    --modified-color-18: rgba(57, 137, 217, 0.18);
+    --grid-color: rgba(4, 8, 14, 0.06);
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;

frontend/app/layout.tsx

@@ -1,24 +1,25 @@
-import type React from "react"
-import type { Metadata } from "next"
-import { Inter } from "next/font/google"
-import "./globals.css"
-
-const inter = Inter({ subsets: ["latin"] })
-
+import type React from "react";
+import type { Metadata } from "next";
+import "./globals.css";
 export const metadata: Metadata = {
-  title: "gittuf Metadata Visualizer",
-  description: "Visualize and analyze gittuf's security metadata structure across repository commits",
-    generator: 'v0.dev'
-}
+  title: "Gittuf Visualizer",
+  description:
+    "Visualize and analyze gittuf's security metadata structure across repository commits",
+  generator: "v0.dev",
+  applicationName: "Gittuf Visualizer",
+  icons: {
+    icon: "/favicon.png",
+  },
+};
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body>{children}</body>
     </html>
-  )
+  );
 }