helder/design_handoff_helder_inline_diff

Handoff: Helder — in-pane diff (screen 3b)

Overview

Helder is a desktop editor for working with Claude Code. This handoff covers one screen: the workspace with a modified file open in the editor pane, in Actual view.

The idea behind the screen: the user always reads the current version of the file. A changed line is marked in place with a teal rule and a teal tint — nothing else moves, no split view, no +/− line pairs. When the user hovers a changed line, the whole original file slides in over the right-hand column (agent + terminal) at the same scroll position, so the two versions can be compared line by line. The overlay disappears on mouse-out. There is no mode to enter and no mode to leave.

About the design files

03b-in-pane-diff.html in this folder is a design reference created in HTML — a prototype that shows the intended look and behaviour. It is not production code to copy.

The task is to recreate this design in the target codebase's own environment (Electron + React, Tauri, SwiftUI, whatever Helder already uses) with that codebase's established patterns, components and styling layer. If no environment exists yet, choose the framework that fits the product and implement the design there.

The HTML uses inline styles throughout because of how the design tool works. Do not treat that as a styling instruction — move the values into the codebase's own token/theme layer.

Fidelity

High fidelity. Colours, type, spacing, row heights and states below are final and exact. Recreate the UI pixel-perfectly. The only intentionally loose part is the file-tree and source-control content, which is sample data.

Screen

Name: Workspace — file modified, Actual view Canvas: 1760 × 1000 px (design size; the real window is resizable — see Responsive behaviour) Purpose: read and edit a file that has uncommitted changes, while Claude Code works in the right column; check what any changed line used to be without leaving the file.

Column layout (left → right)

Region	Width	Background	Divider
Source control	300 px, fixed	#18202B	1 px #232C39 right
Explorer	288 px, fixed	#18202B	1 px #232C39 right
Editor	flexible (692 px at 1760)	#101720	—
Agent + terminal	480 px, fixed	#101720	1 px #232C39 left

Vertical stack: title bar 44 px → body row (flex: 1) → status bar 28 px.

Title bar — 44 px, #18202B, 1 px #232C39 bottom

• Traffic lights: three 12 px circles, #E8913A / #6C7783 / #3A424C, 8 px gap, 14 px from left.
• Wordmark helder. — IBM Plex Mono 700 13 px #F4F5F4; the period is #E8913A and blinks (see Animation).
• Repo · worktree: bob #6C7783 · bob2 #E8913A 500, Plex Mono 12 px.
• Breadcrumb: Plex Mono 12 px #6C7783, › separators, last crumb #F4F5F4 600.
• Right cluster, each 6 px 9 px padding, Plex Sans 12 px label + Plex Mono 12 px 600 shortcut chip (1 px #232C39, radius 2, padding 4 px 6 px): Search ⌘F · Fluid ⌘L · Hidden ⌘. (label and chip #6C7783 — the off state) · Note ⌘N · Git ⌘G active: background rgba(232,145,58,.10), label #F4F5F4, chip border rgba(232,145,58,.35). Then a 26 × 26 ? button, 1 px #232C39.

The 46 px header row

All three panel headers sit on one 46 px row with their 1 px #232C39 bottom borders on the same line. This alignment is deliberate — do not let any one of them grow.

1. Source control commit row — 46 px, padding 0 12 px, flex, 8 px gap, centred. Commit field: flex 1, height 30 px, #101720, 1 px #232C39, radius 2, padding 0 9 px, Plex Sans 12 px #E4E7E6. Sample value: runs mail check once an hour. Push button: 30 × 30, 1 px #232C39, radius 2, glyph ↑ Plex Mono 15 px #BAC0C0.
2. Explorer header — 46 px, padding 0 12 px, space-between, Plex Mono 700 10 px, tracking .14em, uppercase, #6C7783: EXPLORER … BOB.
3. Editor header — 46 px. A 46 px-wide agent-rail cell first (centred BOB, same label style), then: MODIFIED (Plex Mono 700 10 px uppercase #6C7783), +2 #8FBFB4, −2 #C4741F (both Plex Mono 500 12 px), spacer, then the view switch.

View switch — a single bordered group, 1 px #232C39, radius 2, overflow: hidden, each item 5 px 12 px, Plex Sans 11 px, dividers 1 px #232C39 between items: Actual (active: #E8913A fill, #171C22 text, weight 500) · Original · Preview · Diff (inactive: #BAC0C0). Actual is the default and stays the default.

Source control panel

Section header: padding 14 px 12 px 6 px, Plex Mono 700 10 px tracking .14em uppercase #6C7783, count on the right in #E8913A. Folder line: 22 px, ▤ + path, Plex Mono 11 px #6C7783, ellipsis on overflow. File row: 26 px, 8 px gap — status letter (Plex Mono 600 10 px, 12 px wide; staged #8FBFB4, unstaged #F0B476), file-type chip (Plex Mono 600 10 px, #101720 text, radius 2, padding 4 px 5 px; md #BAC0C0, yml #F8C793, tsv #A8D6CB, sh #EFBCB0, json/php #C3A6CE, js #F0B476), then the file name Plex Sans 12 px #BAC0C0. Selected row: background #232C39, 2 px #E8913A left border, left padding reduced by 2 px so the text does not shift, name #F4F5F4 500. Unselected rows carry border-left: 2px solid transparent so nothing moves on selection. Footer: 12 px padding, 1 px #232C39 top, Plex Mono 11 px #6C7783, 3 staged · 3 unstaged.

Explorer

Rows are 24 px. Folder: 8 px-wide chevron (⌄ open #E8913A, › closed #6C7783), ▤ #828D9A, name Plex Sans 13 px (#F4F5F4 when open, #BAC0C0 when closed). Indent = 12 px + 16 px per level. Files use the same type chips as source control; a modified file shows a trailing M (Plex Mono 600 10 px #8FBFB4). Selected file: #232C39, 2 px #E8913A left border, name 500 #F4F5F4.

Editor pane

• Agent rail — 46 px, 1 px #232C39 right. Holds per-block M markers aligned to the changed region: a marker is Plex Mono 600 10 px, 20 px tall, centred; the active block is #8FBFB4 on #232C39, an unstaged block is #C4741F on transparent.
• Code grid — grid-template-columns: 44px 1fr, align-content: start, padding 8 px 0, Plex Mono 400 13 px / 20 px. Line numbers: right-aligned, padding-right 12 px, #5A6472. Line text: padding-right 18 px, #BAC0C0; markdown headings #F4F5F4; fenced-code markers #6C7783; inline code and links #F0B476; a markdown link target #A8D6CB. Long lines wrap (text-wrap: pretty) and keep their single line number — wrapped rows are how the pane behaves at any width.
• Changed line (the core of this screen) — line number #8FBFB4 on rgba(143,191,180,.12) with a 2 px #8FBFB4 left border; the text cell has the same rgba(143,191,180,.12) tint and text #F4F5F4. No + glyph, no second row, no strikethrough. This is the current content, simply marked as changed.
• Minimap strip — 16 px, 1 px #232C39 left, 4 × 4 px marks: #6C7783 normal, #8FBFB4 staged change, #C4741F unstaged change.

Agent + terminal column (480 px)

Conversation body: padding 14 px 16 px, 12 px gap, Plex Sans 13 px / 1.6 #BAC0C0; tool output and metadata in Plex Mono 12 px / 1.6 #6C7783; file paths and identifiers inline in Plex Mono #F0B476; lead-ins (Why it was there.) #F4F5F4 600. Prompt field: 44 px, #101720, 2 px #E8913A border + 0 0 0 2px rgba(232,145,58,.22) ring (the house focus state), radius 2, › #E8913A, 1 × 16 px #E8913A caret that blinks. Status lines: Plex Mono 11 px #6C7783; bob chip = #E8913A fill, #171C22 text, radius 2; ⑂ bob2 #A8D6CB; ▸▸ auto mode on #E8913A. Terminal: 150 px, 1 px #232C39 top, Plex Mono 12 px / 1.7; prompt [bob2] #A8D6CB, [~/code/bob]$ #828D9A, 7 × 14 px #E8913A blinking block cursor.

Status bar — 28 px, #18202B, 1 px #232C39 top

Plex Mono 11 px #6C7783, 16 px gap, 0 14 px padding: ⑂ bob2 #E8913A · +22 #A8D6CB · −66 #C4741F · spacer · file path · · · Ln 1, Col 1 · UTF-8 · LF · language #D4D9D8.

Interactions & behaviour

The hover reveal (the one behaviour to get right)

• Trigger: mouseenter anywhere on a changed line's text cell. Dismiss: mouseleave. No click, no pin, no delay in the prototype. If you add a delay, keep it under 120 ms in and 0 ms out — the gesture must feel like looking, not like opening something.
• What appears: a panel pinned to the top, right and bottom of the body row, 496 px wide, so it covers the whole agent + terminal column and nothing else. #101720, 2 px #C4741F left border, box-shadow: 0 4px 16px rgba(23,28,34,.10), overflow: hidden, z-index above the agent column.
• Panel header: 46 px (the same 46 px as the editor header, so the first code line of both panes starts at the same y), #18202B, 1 px #232C39 bottom: ORIGINAL Plex Mono 700 10 px tracking .14em #C4741F, then before this change · same scroll Plex Mono 11 px #6C7783, then hold hover right-aligned in the same muted style.
• Panel body: the whole original file, not a hunk — same lines, same order, same wrap points and the same vertical position for every line as in the editor pane. In the prototype this is achieved by scaling the type to the narrower column: grid-template-columns: 35px 1fr, font 400 10.3px/20px Plex Mono, gutter padding-right 9 px, text padding-right 11 px. The line-height stays 20 px, so line n sits at the same y in both panes. In the real implementation, do it properly: render the original text into the same layout the editor uses and synchronise scroll offsets, so line n of the original is always level with line n of the current file. The rule to satisfy: the changed line and its previous version are on the same horizontal line of the screen.
• The old line inside the panel: line number #C4741F on rgba(196,116,31,.14) with a 2 px #C4741F left border; text cell same tint, text #E4E7E6. So: teal = what is there now, amber = what was there before. Never green/red.
• The editor keeps its own scroll while the overlay is open; the overlay follows it.

Other states

• Hover on any list row (source control, explorer, menus): fill deepens one step (#18202B → #232C39). No lift, no shadow, no opacity change, no scale on press.
• Focus on a text field: 2 px #E8913A border + 2 px rgba(232,145,58,.22) ring.
• Disabled: 40 % opacity, cursor: not-allowed.

Animation

Only two things move:

1. The blinking period / caret — @keyframes blink { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }, 1.1s steps(1, end) infinite. Used on the wordmark period, the prompt caret and the terminal cursor. Freeze under prefers-reduced-motion.
2. Colour transitions — 160 ms cubic-bezier(0.22, 1, 0.36, 1); 120 ms on small controls.

No entrance animation, no slide, no fade for the overlay — it is there or it is not. No scroll reveal, no parallax.

Responsive behaviour

Source control (300) and explorer (288) and the agent column (480) are fixed; the editor takes the rest. Below roughly 1400 px the design has not been specified — ask before inventing collapse behaviour. The hover panel is always 496 px and always anchored right.

State

State	Type	Notes
activeView	'actual' | 'original' | 'preview' | 'diff'	Default 'actual'. Persist per file.
hoveredChangedLine	lineNumber | null	Drives the overlay. Cleared on mouse-out and on scroll-end if the pointer leaves.
changedLines	Map<lineNumber, { current: string, previous: string, staged: boolean }>	From the VCS diff of working tree vs HEAD/index.
originalText	string	Full HEAD/index version of the open file, needed for the overlay.
editorScrollTop	number	Mirrored into the overlay so the two panes stay in register.
selectedFile, stagedFiles, unstagedFiles	—	Source control and explorer content.

Data needed: the file's working-tree content, its original content, and a line-level diff mapping current line numbers to previous content. The overlay must be able to render the original file immediately — pre-fetch it when a modified file is opened, not on hover.

Design tokens

Surfaces #101720 base · #18202B raised · #232C39 selected/hover · #3A424C rule-strong Text #F4F5F4 strong · #E4E7E6 body-strong · #BAC0C0 body · #828D9A dim · #6C7783 muted · #5A6472 line numbers Accent #E8913A amber · #C4741F amber-deep (previous state) · #F0B476 amber-soft (inline code) Change #8FBFB4 current/changed, tint rgba(143,191,180,.12) · #C4741F previous, tint rgba(196,116,31,.14) Syntax / chips #A8D6CB string · #F8C793 number-keyword · #C3A6CE structural · #D8BEE4 directive · #EFBCB0 selector · #D4D9D8 property Radius 0 default · 2 px controls, chips, panels · 4 px window Borders 1 px #232C39 hairline · 2 px accent, used only for the selection marker, the changed-line rule and a focused field Shadow dropdown 0 4px 16px rgba(23,28,34,.10); modal 0 16px 48px rgba(23,28,34,.18). Nothing else casts a shadow. Row heights 22 px meta · 24 px explorer · 26 px source-control file · 28 px status bar · 30 px menu · 34/38 px fields · 44 px title bar · 46 px panel headers Type IBM Plex Mono 400/500/600/700 — code, labels, all numbers; IBM Plex Sans 400/500/600 — UI text and prose. Code 13 px / 20 px. Labels 10 px, tracking .14em, uppercase. UI text 12–13 px. Do not use green or red for change, gradients, blur, emoji, white or pure black.

Assets

None. No images, icons or fonts ship with this handoff. Both faces load from Google Fonts (IBM Plex Mono, IBM Plex Sans) — swap in the licensed binaries in the app. Every glyph in the design is a Unicode mark set in Plex Mono (› ⌄ ▤ ↑ ⑂ · → ▸▸ ✳ └); if the app already uses Lucide at stroke width 1.75, those are the sanctioned replacements for the folder and arrow marks.

Files

• 03b-in-pane-diff.html — the screen, standalone. Hover the teal line 31 (- The scheduler fires it. Job \mail-checker-ronde`, every hour, on the hour.`) to see the original overlay.
• Source of truth in the design project: Helder IDE.dc.html, section [ 03 ] Diff, screen 3b. Section 3a in the same file shows the older full-screen side-by-side diff, kept for reference; 3b replaces it for in-pane use.