jivanrij/helder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jonathan van Rij
2026-06-16 06:18:42 +02:00
parent 3f5078841d
commit 66248c4736
39 changed files with 6699 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
README.md
View File

@@ -4,7 +4,7 @@
Helder is an Electron app that puts code review, git, and a live Claude Code agent side by side in one dense, IDE-style window. It opens one project per window, is dark-only by design (no light mode, no theme toggle), and is built around a single idea: make it effortless to point an AI agent at exactly the code you're looking at.
> **Status: greenfield.** This repository currently contains the design handoff only — no application code yet. The first task is to scaffold the Electron app and port the prototype. See [Getting started](#getting-started).
> **Status: working build.** The Electron app is scaffolded and everything above is implemented against the real filesystem, git, terminals, ripgrep search, and the `.helder/` config system. The editor is writable (save · autosave · discard). See [Getting started](#getting-started).
---
@@ -48,19 +48,30 @@ Right-click in the editor to copy a project-relative `path:line` reference (e.g.
## Getting started
> No build tooling exists yet. This section will be filled in once the Electron + Vite toolchain is scaffolded.
Requires Node 18+ and a recent `git` on your `PATH`.
Planned implementation order:
```bash
npm install # also rebuilds node-pty for Electron (postinstall)
npm run dev # launch the app with hot reload
```
1. Electron shell + frameless dark window; port design tokens to CSS variables; bundle JetBrains Mono.
2. Static layout: four resizable columns + title/status bars.
3. Real file tree + open files into tabs (read-only) with Prism highlighting.
4. Git panel from `git status` → staging + commit → the four diff modes + Split.
5. Search (ripgrep + fuzzy).
6. Terminals via node-pty + xterm.js; run `claude` in the agent pane.
7. Copy reference + Pass-on-to-Agent.
Helder opens **one project per window** — by default the current working directory. Open a different folder by clicking the project name in the title bar, or launch with `HELDER_PROJECT=/path/to/repo npm run dev`. The agent pane auto-runs the `claude` CLI, so it must be on your `PATH`.
To preview the design prototype now, open `design_handoff_helder_workbench/design/Helder - AI Code Workbench.html` in a browser — it's a clickable React-via-Babel mock with sample data.
### Scripts
| Command | What it does |
|---------|--------------|
| `npm run dev` | Launch in Electron with HMR |
| `npm run build` | Production build into `out/` |
| `npm start` | Run the built app |
| `npm test` | Run the vitest suite |
| `npm run lint` | ESLint |
| `npm run typecheck` | `tsc --noEmit` (renderer + main/preload) |
| `npm run pack` | Unpacked app into `dist/` (electron-builder) |
| `npm run dist` | Distributable (`.dmg` / `.zip` / etc.) |
| `npm run rebuild` | Re-rebuild `node-pty` for Electron if a terminal shows "PTY unavailable" |
To preview the original design prototype, open `design_handoff_helder_workbench/design/Helder - AI Code Workbench.html` in a browser — a clickable React-via-Babel mock with sample data.
---
@@ -79,17 +90,20 @@ An effective setting is the value from `config.json` if present, otherwise from
## Repository layout
```
DESIGN.md Functional/UX spec — every panel, state, and interaction
CLAUDE.md Guidance for Claude Code working in this repo
design_handoff_helder_workbench/
README.md Technical handoff — structure, design tokens, integration mechanics
design/
Helder - AI Code Workbench.html Clickable prototype (open in a browser)
styles.css Canonical design tokens (the :root block)
src/*.jsx Prototype components (reference only — replace mock data)
src/
main/ Electron main process: window + IPC + services
(fs-service, git-service, pty-service, search-service, config, project)
preload/ contextIsolation bridge — the only renderer↔OS surface (window.helder)
renderer/ React UI: App, editor (4 diff modes + writable buffer), terminals (xterm),
overlays (search/menu/toasts), project store, diff/highlight/fuzzy helpers
test/ vitest suite — diff, fuzzy, highlight, config, fs, git
electron.vite.config.ts electron-builder.yml eslint.config.js vitest.config.ts
DESIGN.md Functional/UX spec — every panel, state, interaction
CLAUDE.md Guidance + current architecture for Claude Code
design_handoff_helder_workbench/ Original design handoff + clickable prototype
```
The two handoff documents are the source of truth: **`DESIGN.md`** for *what the app does*, **`design_handoff_helder_workbench/README.md`** for *how to build it*. The prototype is a visual reference — do not ship it as-is.
`DESIGN.md` and `design_handoff_helder_workbench/README.md` remain the design source of truth; the prototype is a visual reference, not shipped.
---