frontend/README.md

Decompile.AI — Frontend

A web-based reverse engineering platform. Upload binaries, run static analysis engines (IDA, Ghidra), explore disassembly with an IDE-style interface, and interact with an AI assistant that suggests code mutations.

Tech Stack

Layer	Technology
Framework	React 19 + TypeScript 6
Bundler	Vite 8
Routing	React Router 7 (client-side, lazy-loaded routes)
Styling	Tailwind CSS 4 + shadcn/ui (Radix UI primitives)
Server state	TanStack React Query 5
HTTP client	Axios
API codegen	Orval (from OpenAPI spec)
Chat streaming	SSE via fetch + ReadableStream
Markdown	react-markdown + remark-gfm + remark-breaks
Code highlighting	react-syntax-highlighter
Graph layout	@dagrejs/dagre (CFG visualization)
Fonts	Inter (sans) + JetBrains Mono (monospace)

Project Structure

src/
├── api/
│   ├── api.ts                  # Axios instance
│   └── generated/              # Orval auto-generated hooks & types
├── components/
│   ├── layout/                 # AppLayout, Header
│   └── ui/                     # shadcn/ui components
├── features/
│   ├── binary/                 # Analysis page: code viewer, CFG, AI chat, mutations
│   ├── home/                   # Workspace list
│   ├── jobs/                   # Job queue
│   ├── libraries/              # Library symbol database
│   ├── project/                # Binary list + upload
│   └── workspace/              # Project list
├── pages/                      # Route-level page components + Router
├── providers/                  # React Query + Tooltip + Toaster
├── lib/utils.ts                # cn() class helper
└── utils/                      # Formatting utilities

Getting Started

Prerequisites

• Node.js 22+
• A running instance of the Decompile.AI backend (default: http://localhost:8080)

Setup

# Install dependencies
npm install

# Copy and configure environment
cp .env.example .env.local
# Edit VITE_API_BASE_URL if your backend runs on a different host/port

Environment Variables

Variable	Default	Description
VITE_API_BASE_URL	http://localhost:8080	Backend API base URL

Development

npm run dev       # Start Vite dev server with HMR

The app will be available at http://localhost:5173.

Production Build

npm run build     # Type-check + production bundle
npm run preview   # Preview the production build locally

Lint & Format

npm run lint       # ESLint check
npm run lint:fix   # ESLint auto-fix
npm run format     # Prettier format

API Client Generation

The API client in src/api/generated/ is auto-generated by Orval from the backend's OpenAPI spec.

npx orval          # Regenerate API hooks and types

The spec endpoint is configured in orval.config.ts (default: http://localhost:8080/v3/api-docs).

Docker

Build

docker build -t decompile-ai-frontend .

Uses a multi-stage build: Node.js builder (node:22-alpine) → Nginx runtime (nginx:alpine).

Run with Docker Compose

docker-compose up

The docker-compose.yml exposes the frontend on port 3000 and expects the backend at http://backend:8080. Nginx proxies /api/ requests to the backend.

Features

Workspace & Project Management

• Create, edit, delete workspaces and projects
• Upload binaries (executables, DLLs, etc.)
• Manage companion dependencies for binaries

Binary Analysis (IDE-Style 3-Panel Layout)

• Left panel — Function tree (filterable, segmentable), strings, imports, global variables, structures, enums, cross-references
• Center panel — Assembly view with syntax highlighting, control-flow graph visualization (dagre), pseudocode (decompiled C)
• Right panel — AI chat assistant with SSE streaming, mutation suggestion cards (rename, signature, comments, flags)

Analysis Engines

• Trigger analysis via IDA or Ghidra engines
• Track analysis progress on the Jobs page

AI Chat

• Multi-session chat with streaming responses (SSE)
• Markdown rendering with code syntax highlighting
• AI-suggested mutations: approve or reject renames, signatures, comments, and flags for functions, global variables, labels, and structures

Jobs Queue

• View and filter all jobs (status, type)
• Statistics dashboard (running, queued, completed, failed)
• Cancel running jobs

Library Symbols

• Upload library symbol dumps (Turbo Dump format)
• Browse library symbols (paginated)
• Bulk resolution of imports against libraries

Pages

Route	Page	Description
/	Home	Workspace list
/workspace/:id	Workspace	Projects within a workspace
/project/:id	Project	Binaries within a project
/binary/:id	Binary	Main analysis view (3-panel IDE)
/jobs	Jobs	Job queue and stats
/libraries	Libraries	Library symbol database

Theme

Dark-only IDE theme using OKLCH color space with teal accent. Custom CSS properties for code syntax highlighting (keywords, strings, comments, functions, addresses).