Developer Tools

​

Overview

​

Key Capabilities

​

Integrated Terminal

• Built on xterm.js for rendering
• PTY (pseudoterminal) backend in Rust
• Multiple terminals per session
• Persistent across app restarts

// From src-tauri/src/terminal/
interface Terminal {
  id: string              // UUID v4
  worktree_path: string   // Working directory
  session_id: string      // Associated chat session
  pid: u32                // Process ID
  shell: string           // Shell command (zsh, bash, etc.)
}

// Terminal registry tracks all active terminals
struct TerminalRegistry {
  terminals: HashMap<String, TerminalInfo>
  pty_handles: HashMap<String, PtyHandle>
}

1. User opens terminal panel
2. Tauri command create_terminal spawns PTY
3. WebSocket connection established for I/O
4. xterm.js renders output
5. User input sent via write_to_terminal command
6. Terminal persists until closed or app exits

• Resizable split panel
• Multiple tabs
• Full shell capabilities
• Copy/paste support
• Scrollback buffer
• ANSI color support
• Keyboard shortcuts

​

File Diff Viewer

// FileDiffModal component
interface FileDiffModalProps {
  filePath: string | null
  worktreePath: string
  onClose: () => void
}

• Side-by-side (split) view
• Unified diff view
• Syntax highlighting
• Line numbers
• Expand/collapse hunks
• Status badges (new, deleted, modified, renamed)

// Uses @pierre/diffs library
import { FileDiff, parsePatchFiles } from '@pierre/diffs'

// Fetches git diff
const diff = await getGitDiff(worktreePath, 'uncommitted')
const parsed = parsePatchFiles(diff.patch)

type DiffType = 
  | 'uncommitted'     // Working directory changes
  | 'staged'          // Staged changes
  | 'branch'          // Branch vs base branch
  | 'commit'          // Specific commit

• Respects app theme (light/dark/system)
• Syntax highlighting matches settings
• Configurable color schemes

​

Git Diff Modal

// GitDiffModal component (lazy-loaded)
interface GitDiffModalProps {
  isOpen: boolean
  onClose: () => void
  diffType: DiffType
  commitHash?: string
}

• Multiple file diffs in one view
• File tree navigation
• Expand/collapse files
• Search within diffs
• Export diff as patch
• Jump to file in editor

• Lazy-loaded (code splitting)
• Virtual scrolling for large diffs
• Syntax highlighting on-demand
• Debounced search

​

File Preview

// Message content: "See <file>src/components/App.tsx</file>"
// Renders as clickable badge
interface FileMention {
  path: string
  displayName: string
}

// FileContentModal component
interface FileContentModalProps {
  filePath: string | null
  worktreePath: string
  onClose: () => void
}

• Syntax highlighting (via Shiki)
• Line numbers
• Copy button
• Open in editor button
• Theme-aware

• JavaScript/TypeScript
• Rust
• Python
• Go
• HTML/CSS
• JSON/YAML
• Markdown
• And 100+ more via Shiki

​

Editor Integration

type EditorApp = 'zed' | 'vscode' | 'cursor' | 'xcode'

const editorOptions = [
  { value: 'zed', label: 'Zed' },
  { value: 'vscode', label: 'VS Code' },
  { value: 'cursor', label: 'Cursor' },
  { value: 'xcode', label: 'Xcode' },
]

// Tauri command: open_in_editor
invoke('open_in_editor', {
  path: '/path/to/file.ts',
  editor: 'zed',
  line: 42  // Optional line number
})

• Zed: zed://file/path?line=42
• VS Code: vscode://file/path:42
• Cursor: cursor://file/path:42
• Xcode: Opens via xed command

• File mention badges
• Diff viewer “Open” buttons
• File preview “Edit” buttons
• Right-click context menus
• Review findings (jump to file:line)

​

Inline Code Editor

interface FileEditMode {
  mode: 'inline' | 'external'
}

• Syntax highlighting
• Line numbers
• Bracket matching
• Auto-indentation
• Vim keybindings (optional)
• Theme support

• Quick edits during review
• Small file changes
• JSON/config editing
• Viewing generated code

interface AppPreferences {
  file_edit_mode: FileEditMode
  // 'inline': Edit in Jean (CodeMirror)
  // 'external': Open in configured editor
}

​

Syntax Highlighting

interface AppPreferences {
  syntax_theme_dark: SyntaxTheme
  syntax_theme_light: SyntaxTheme
}

// Available themes
type SyntaxTheme =
  | 'vitesse-black'
  | 'vitesse-dark'
  | 'github-dark'
  | 'dracula'
  | 'nord'
  | 'catppuccin-mocha'
  | 'one-dark-pro'
  | 'tokyo-night'
  // ... and more

• 100+ bundled languages
• 20+ bundled themes
• Accurate syntax parsing
• Tree-sitter based
• Supports code blocks in chat

​

File System Browser

• Hierarchical folder structure
• Expand/collapse folders
• File type icons
• Search/filter
• Quick open
• Right-click actions

• Preview file
• Open in editor
• Copy path
• Reveal in Finder/Explorer
• Show git status
• View file diff

​

How to Use

​

Using the Terminal

1. Click terminal icon in bottom toolbar
2. Or press Cmd/Ctrl + `
3. Terminal panel slides up

• Drag resize handle
• Double-click handle to collapse
• Min/max sizes enforced

1. Click ”+” in terminal tabs
2. New terminal spawns
3. Switch with tabs or Cmd/Ctrl + 1-9

• Click X on tab
• Or type exit in shell
• Terminal process killed immediately

​

Viewing File Diffs

1. Hover over file mention in chat
2. Click “View Diff” button
3. Diff modal opens

1. Click “Diff” button
2. Choose diff type:
   • Uncommitted changes
   • Staged changes
   • Branch diff
3. Modal shows all changed files

• Click split/unified toggle
• Split: Side-by-side comparison
• Unified: Traditional patch view

​

Previewing Files

1. Click file mention badge
2. Preview modal opens
3. View syntax-highlighted content
4. Click “Open in Editor” to edit

1. Click file in sidebar
2. Preview loads inline
3. Or double-click to open in editor

​

Opening in Editor

1. Settings (Cmd/Ctrl + ,)
2. Interface section
3. Editor dropdown
4. Select preferred editor

• Cmd/Ctrl + click file mention
• Right-click → Open in Editor
• Keyboard shortcut on file tree item

• From review findings
• From error messages
• From search results
• Editor opens at specific line

​

Syntax Theme Customization

1. Settings → Interface
2. Syntax Theme (Dark) or (Light)
3. Choose from dropdown
4. Preview updates immediately

• Separate themes for light and dark mode
• Automatically switches with app theme
• System theme detection supported

​

Configuration Options

​

Settings → Interface

terminal: TerminalApp  // Default: 'terminal'
// For opening external terminal (separate from integrated)

editor: EditorApp      // Default: 'zed'
file_edit_mode: FileEditMode  // Default: 'external'

syntax_theme_dark: SyntaxTheme    // Default: 'vitesse-black'
syntax_theme_light: SyntaxTheme   // Default: 'github-light'

​

Settings → Keybindings

'toggle_terminal': 'Cmd+`'        // Open/close terminal
'new_terminal': 'Cmd+Shift+`'     // New terminal tab

'quick_open': 'Cmd+P'             // Quick file picker
'reveal_in_finder': 'Cmd+Shift+R' // Show in file manager

​

Best Practices

​

Terminal Usage

• Quick commands during chat
• Running tests
• Git operations
• Build scripts
• File operations

• Long-running processes
• Multiple panes needed
• Advanced shell features
• Terminal multiplexing (tmux, screen)

• Close unused terminals
• Clear scrollback buffer
• Avoid excessive output
• Use external terminal for heavy tasks

​

File Diff Workflows

1. Review uncommitted diff
2. Check each changed file
3. Verify no debug code
4. Ensure tests pass
5. Stage and commit

1. Open branch diff
2. Review each file systematically
3. Note concerns in findings
4. Request changes or approve

1. Compare working vs broken commit
2. Identify changed lines
3. Narrow down regression
4. Fix and verify

​

Editor Integration

• Set editor to primary development tool
• Use inline editing for quick tweaks only
• External editor for substantial changes
• Keep editor and Jean side-by-side

• Consistent project structure
• Editor workspace synced with worktree
• Use editor’s file tree for navigation
• Use Jean for AI assistance

​

Syntax Highlighting

• Match editor theme for consistency
• High contrast for readability
• Consider color blindness
• Test in both light and dark modes

Dark mode:
  Code: vitesse-black, github-dark, dracula
  Terminal: Same as code theme

Light mode:
  Code: github-light, vitesse-light
  Terminal: Same as code theme

​

Performance Optimization

• Limit scrollback buffer
• Close inactive terminals
• Avoid cat-ing large files
• Use less/more for viewing

• Collapse unchanged sections
• Focus on specific files
• Use search to find relevant changes
• Export large diffs as patches

• Large files (> 1MB) may be slow
• Disable syntax highlighting if needed
• Use external editor for large files
• Clear preview cache periodically

​

Keyboard Shortcuts

Cmd/Ctrl + ` - Toggle terminal
Cmd/Ctrl + P - Quick open file
Cmd/Ctrl + K - Open canvas
Cmd/Ctrl + L - Clear chat
Cmd/Ctrl + Enter - Send message

Ctrl + C - Interrupt process
Ctrl + D - Exit shell
Ctrl + L - Clear screen
Ctrl + R - Search history

Cmd/Ctrl + O - Open file
Cmd/Ctrl + S - Save file (in inline editor)
Cmd/Ctrl + F - Find in file
Esc - Close preview

​

Troubleshooting

• Check shell path in settings
• Verify terminal app installed
• Review app logs for errors
• Try resetting terminal

• Ensure git repository initialized
• Check for uncommitted changes
• Verify working directory correct
• Refresh with Cmd/Ctrl + R

• Verify editor installed
• Check URL scheme registered
• Test with open vscode://file/test.txt
• Reinstall editor if needed

• Language not supported (check Shiki docs)
• Theme not loaded (try switching)
• File extension unrecognized
• Use plain text fallback

​

Advanced Usage

# Add to ~/.zshrc or ~/.bashrc
alias jt='cd $(pwd)'  # Jean terminal helper
function jpwd() { echo $(pwd) | pbcopy }  # Copy path

# Open at line in Zed
function jzed() {
  open "zed://file/${1}?line=${2:-1}"
}

# Usage: jzed src/App.tsx 42

# Export branch diff as patch
gh pr diff > feature.patch

# Apply patch
git apply feature.patch