webui2

New web interface for git-bug. Built with Vite + React + TypeScript + Tailwind + shadcn/ui.

Quickstart

You need two processes running:

# 1. Go backend (from repo root)
go run . webui --no-open --port 3000

# 2. Vite dev server (from this directory)
npm install
npm run dev

Open http://localhost:5173. Vite proxies /graphql, /api, and /auth to the Go server on port 3000.

Node 22 is required. If you use asdf, .tool-versions pins the right version automatically.

Routes

Path	Page
`/`	Repo picker — auto-redirects when there is only one repo
`/_`	Default repo (issues + code browser)
`/_/issues`	Issue list with search and label filtering
`/_/issues/new`	New issue form
`/_/issues/:id`	Issue detail and timeline
`/_/user/:id`	User profile
`/_/commit/:hash`	Commit detail with collapsible file diffs
`/auth/select-identity`	OAuth identity adoption (first-time login)

_ is the URL segment for the default (unnamed) repository. Named repositories use their registered name.

Code structure

src/
├── pages/          # One file per route
├── components/
│   ├── bugs/       # Issue components (BugRow, Timeline, ...)
│   ├── code/       # Code browser (FileTree, FileViewer, ...)
│   ├── content/    # Markdown renderer
│   ├── layout/     # Header + Shell
│   └── ui/         # shadcn/ui — never edit manually
│                   # Update with: npx shadcn update <component>
├── graphql/        # .graphql source files — edit these, then run codegen
├── __generated__/  # Generated typed hooks — do not edit
└── lib/            # apollo.ts, auth.tsx, theme.tsx, gitApi.ts, repo.tsx, utils.ts

Data flow

Bug tracking uses GraphQL (/graphql). Queries and mutations are defined in src/graphql/*.graphql and codegen produces typed React hooks into src/__generated__/graphql.ts. After changing any .graphql file run:

npm run codegen

Code browser uses REST endpoints at /api/repos/{owner}/{repo}/git/* implemented in api/http/git_browse_handler.go. _ is used for both owner and repo (local single-user setup). The TypeScript client is src/lib/gitApi.ts.

Endpoint	Description
`GET /git/refs`	List branches and tags
`GET /git/trees/{ref}?path=`	Directory listing with last-commit info
`GET /git/blobs/{ref}?path=`	File content
`GET /git/raw/{ref}/{path}`	Raw file download
`GET /git/commits?ref=&limit=&after=`	Paginated commit log
`GET /git/commits/{sha}`	Commit metadata + changed file list
`GET /git/commits/{sha}/diff?path=`	Per-file structured diff (lazy-loaded)

Auth

Three modes, configured at server start:

local — single user derived from git config; all writes enabled, no login UI.
oauth — multi-user via external providers; all API endpoints require a valid session; unauthenticated requests get 401.
readonly — no identity; all write actions hidden in the UI.

AuthContext (src/lib/auth.tsx) fetches serverConfig + userIdentity on load and exposes { user, mode, oauthProviders } to the whole tree.

Build for production

The Go binary embeds the compiled frontend via //go:embed all:dist in webui2/handler.go. The Makefile build-webui2 target runs the Vite build before compiling Go:

# From repo root
make build

Or manually:

npm run build        # outputs to webui2/dist/
cd .. && go build .  # embeds dist/ into the binary

Theming

ThemeProvider (src/lib/theme.tsx) toggles the dark class on <html>. CSS variables for both modes are defined in src/index.css. shadcn/ui components pick them up automatically.

README.md