# Build an Emdash Clone with Claude Code: 7-Step Developer Guide

A practical, step-by-step guide to building an Agentic Development Environment (ADE) — a desktop app that runs multiple coding agents in parallel, each isolated in its own git worktree.

**Prerequisites:** Node.js 20+, Git 2.35+ (worktree support), GitHub account, basic TypeScript knowledge.

---

## Step 1: Project Setup — Electron + TypeScript + SQLite Scaffold

### What you're building
A barebones Electron app with TypeScript compilation, a main process, a renderer process, and SQLite wired up via `better-sqlite3`.

### Claude Code commands
```
claude "scaffold an Electron app with TypeScript, using electron-forge with the webpack template. Add better-sqlite3 as a dependency and configure it to work with Electron's native module rebuilding."
```

```
claude "create a src/main/db.ts module that initializes a SQLite database at app.getPath('userData')/emdash.db and exports a singleton db instance"
```

### Key files to create
```
emdash/
├── src/
│   ├── main/           # Electron main process
│   │   ├── index.ts
│   │   └── db.ts
│   ├── renderer/       # Electron renderer (UI)
│   │   ├── index.html
│   │   └── app.tsx
│   └── shared/         # Shared types
│       └── types.ts
├── package.json
├── forge.config.ts
└── tsconfig.json
```

### package.json essentials
```json
{
  "scripts": {
    "start": "electron-forge start",
    "build": "electron-forge make",
    "lint": "eslint src --ext .ts,.tsx"
  },
  "dependencies": {
    "better-sqlite3": "^9.0.0",
    "electron": "^30.0.0"
  },
  "devDependencies": {
    "@electron-forge/cli": "^7.0.0",
    "@electron-forge/plugin-webpack": "^7.0.0",
    "typescript": "^5.4.0"
  }
}
```

Run `npm install` then `npm start` to verify Electron opens a window.

---

## Step 2: Git Worktree Manager

### What you're building
A module that creates, lists, and tears down git worktrees. Each agent session gets its own worktree — a separate checkout of the repo with no conflict risk.

### Claude Code commands
```
claude "write a WorktreeManager class in TypeScript that: (1) creates a git worktree with a unique branch name derived from session ID, (2) lists all active worktrees by parsing 'git worktree list --porcelain', (3) removes a worktree and deletes its branch on teardown. Use child_process.execSync wrapped in try/catch."
```

### Key implementation

```typescript
// src/main/worktree.ts
import { execSync } from 'child_process';
import * as path from 'path';
import * as os from 'os';

export interface Worktree {
  id: string;
  path: string;
  branch: string;
  repoRoot: string;
}

export class WorktreeManager {
  constructor(private repoRoot: string) {}

  create(sessionId: string, baseBranch = 'main'): Worktree {
    const branch = `ade/session-${sessionId}`;
    const worktreePath = path.join(os.tmpdir(), `emdash-${sessionId}`);
    this.exec(`git worktree add -b ${branch} ${worktreePath} ${baseBranch}`);
    return { id: sessionId, path: worktreePath, branch, repoRoot: this.repoRoot };
  }

  list(): Worktree[] {
    const raw = this.exec('git worktree list --porcelain');
    return raw.split('\n\n').filter(Boolean).map(this.parsePorcelainBlock);
  }

  teardown(worktree: Worktree): void {
    this.exec(`git worktree remove --force ${worktree.path}`);
    this.exec(`git branch -D ${worktree.branch}`);
  }

  private exec(cmd: string): string {
    return execSync(cmd, { cwd: this.repoRoot, encoding: 'utf8' });
  }

  private parsePorcelainBlock(block: string): Worktree {
    const lines = block.trim().split('\n');
    const worktreePath = lines[0].replace('worktree ', '');
    const branch = (lines[2] || '').replace('branch refs/heads/', '');
    return { id: path.basename(worktreePath), path: worktreePath, branch, repoRoot: worktreePath };
  }
}
```

### Test command
```
claude "write a Jest test for WorktreeManager that creates a temp git repo, creates a worktree, asserts the directory exists and appears in list(), then tears it down and asserts cleanup"
```

---

## Step 3: Agent Process Runner

### What you're building
A module that spawns CLI agents (Claude Code, Codex, Gemini, etc.) as child processes inside a worktree, streams stdout/stderr back to the UI via IPC, and manages process lifecycle.

### Claude Code commands
```
claude "write an AgentRunner class that spawns a CLI agent command as a child process using child_process.spawn, streams stdout and stderr line-by-line to a callback, handles process exit and error events, and exposes a kill() method"
```

```
claude "add IPC bridge in the Electron main process that listens for 'agent:start' and 'agent:kill' events from the renderer, delegates to AgentRunner, and forwards stdout/stderr chunks back to the renderer via webContents.send"
```

### Key implementation

```typescript
// src/main/agent-runner.ts
import { spawn, ChildProcess } from 'child_process';

export type AgentName = 'claude' | 'codex' | 'gemini' | 'amp' | 'cline' | 'devin';

const AGENT_COMMANDS: Record<AgentName, string[]> = {
  claude: ['claude'],
  codex: ['codex'],
  gemini: ['gemini'],
  amp: ['amp'],
  cline: ['cline'],
  devin: ['devin'],
};

export interface AgentRunnerOptions {
  agent: AgentName;
  prompt: string;
  cwd: string;
  onStdout: (line: string) => void;
  onStderr: (line: string) => void;
  onExit: (code: number | null) => void;
}

export class AgentRunner {
  private process: ChildProcess | null = null;

  start(opts: AgentRunnerOptions): void {
    const [cmd, ...baseArgs] = AGENT_COMMANDS[opts.agent];
    const args = [...baseArgs, '--prompt', opts.prompt];
    this.process = spawn(cmd, args, { cwd: opts.cwd, env: { ...process.env }, stdio: ['ignore', 'pipe', 'pipe'] });
    this.process.stdout?.on('data', (chunk: Buffer) => {
      chunk.toString().split('\n').filter(Boolean).forEach(opts.onStdout);
    });
    this.process.stderr?.on('data', (chunk: Buffer) => {
      chunk.toString().split('\n').filter(Boolean).forEach(opts.onStderr);
    });
    this.process.on('exit', opts.onExit);
    this.process.on('error', (err) => opts.onStderr(err.message));
  }

  kill(): void { this.process?.kill('SIGTERM'); }
}
```

---

## Step 4: Session Store Schema (SQLite)

### What you're building
The complete SQLite schema for persisting sessions, agent runs, diffs, and tickets — the single source of truth for the app.

### Claude Code command
```
claude "create a src/main/schema.ts file that runs the following DDL on db initialization and exports typed query helpers using better-sqlite3 prepared statements"
```

### Schema DDL

```sql
CREATE TABLE IF NOT EXISTS sessions (
  id            TEXT PRIMARY KEY,
  repo_root     TEXT NOT NULL,
  branch        TEXT NOT NULL,
  worktree_path TEXT NOT NULL,
  created_at    INTEGER NOT NULL DEFAULT (unixepoch()),
  closed_at     INTEGER,
  status        TEXT NOT NULL DEFAULT 'active'
);

CREATE TABLE IF NOT EXISTS agent_runs (
  id         TEXT PRIMARY KEY,
  session_id TEXT NOT NULL REFERENCES sessions(id),
  agent_name TEXT NOT NULL,
  prompt     TEXT NOT NULL,
  started_at INTEGER NOT NULL DEFAULT (unixepoch()),
  ended_at   INTEGER,
  exit_code  INTEGER,
  status     TEXT NOT NULL DEFAULT 'running'
);

CREATE TABLE IF NOT EXISTS agent_output (
  id     INTEGER PRIMARY KEY AUTOINCREMENT,
  run_id TEXT NOT NULL REFERENCES agent_runs(id),
  stream TEXT NOT NULL,
  line   TEXT NOT NULL,
  ts     INTEGER NOT NULL DEFAULT (unixepoch())
);

CREATE TABLE IF NOT EXISTS diffs (
  id             TEXT PRIMARY KEY,
  run_id         TEXT NOT NULL REFERENCES agent_runs(id),
  raw_diff       TEXT NOT NULL,
  files_changed  INTEGER,
  insertions     INTEGER,
  deletions      INTEGER,
  captured_at    INTEGER NOT NULL DEFAULT (unixepoch())
);

CREATE TABLE IF NOT EXISTS tickets (
  id          TEXT PRIMARY KEY,
  source      TEXT NOT NULL,
  external_id TEXT NOT NULL,
  title       TEXT NOT NULL,
  body        TEXT,
  url         TEXT,
  imported_at INTEGER NOT NULL DEFAULT (unixepoch())
);

CREATE TABLE IF NOT EXISTS pull_requests (
  id               TEXT PRIMARY KEY,
  session_id       TEXT NOT NULL REFERENCES sessions(id),
  github_pr_number INTEGER,
  url              TEXT,
  status           TEXT,
  ci_status        TEXT,
  created_at       INTEGER NOT NULL DEFAULT (unixepoch()),
  updated_at       INTEGER
);

CREATE INDEX IF NOT EXISTS idx_agent_runs_session ON agent_runs(session_id);
CREATE INDEX IF NOT EXISTS idx_output_run ON agent_output(run_id);
CREATE INDEX IF NOT EXISTS idx_diffs_run ON diffs(run_id);
```

```
claude "generate TypeScript type definitions for each table row and write prepared statement helpers: insertSession, getSession, insertAgentRun, appendOutput, insertDiff, insertTicket, upsertPR"
```

---

## Step 5: Ticket Integration (GitHub Issues + Linear APIs)

### What you're building
Fetch tickets from GitHub Issues and Linear, store them in the `tickets` table, and surface them in the UI as drag-and-drop prompt sources.

### Claude Code commands
```
claude "write a GitHubTicketProvider class that accepts a repo (owner/repo) and personal access token, fetches open issues via the GitHub REST API, maps them to the Ticket schema, and upserts into SQLite"
```

```
claude "write a LinearTicketProvider class that fetches issues assigned to the current user via the Linear GraphQL API, maps them to the Ticket schema, and upserts into SQLite"
```

### GitHub Issues integration

```typescript
// src/main/tickets/github.ts
export class GitHubTicketProvider {
  constructor(private repo: string, private token: string) {}

  async sync(): Promise<void> {
    const url = `https://api.github.com/repos/${this.repo}/issues?state=open&per_page=50`;
    const res = await fetch(url, {
      headers: { Authorization: `Bearer ${this.token}`, Accept: 'application/vnd.github+json' },
    });
    const issues = await res.json();
    const insert = db.prepare(
      `INSERT OR REPLACE INTO tickets (id, source, external_id, title, body, url, imported_at)
       VALUES (?, 'github', ?, ?, ?, ?, unixepoch())`
    );
    const insertMany = db.transaction((items: any[]) => {
      for (const issue of items) {
        insert.run(`github-${issue.number}`, String(issue.number), issue.title, issue.body ?? '', issue.html_url);
      }
    });
    insertMany(issues);
  }
}
```

### Linear GraphQL query
```graphql
query MyIssues {
  viewer {
    assignedIssues(filter: { state: { type: { in: ["started", "unstarted"] } } }) {
      nodes { id title description url }
    }
  }
}
```
POST to `https://api.linear.app/graphql` with `Authorization: <apiKey>` header.

---

## Step 6: Diff Viewer + PR Creation UI

### What you're building
Parse `git diff` output after an agent run, render it in the UI, and wire up a button to push the branch and open a PR via the GitHub API.

### Claude Code commands
```
claude "write a captureDiff function that runs 'git diff main...HEAD' in a worktree path, parses --stat output for files changed/insertions/deletions, and stores the result in the diffs table"
```

```
claude "write a React component DiffViewer that accepts a raw unified diff string, splits it by file (lines starting with 'diff --git'), and renders each file block with added lines in green and removed lines in red using a monospace pre element"
```

```
claude "write a createPullRequest function that pushes the branch with 'git push origin <branch>', calls the GitHub REST API to open a PR to main, then polls check runs every 30 seconds and updates the pull_requests table with CI status"
```

### Diff capture core

```typescript
// src/main/diff.ts
export function captureDiff(runId: string, worktreePath: string): void {
  const rawDiff = execSync('git diff main...HEAD', { cwd: worktreePath, encoding: 'utf8', maxBuffer: 10 * 1024 * 1024 });
  const statLine = execSync('git diff main...HEAD --stat', { cwd: worktreePath, encoding: 'utf8' }).split('\n').at(-2) ?? '';
  const match = statLine.match(/(\d+) files? changed(?:, (\d+) insertions?)?(?:, (\d+) deletions?)?/);
  db.prepare(`INSERT INTO diffs (id, run_id, raw_diff, files_changed, insertions, deletions) VALUES (?, ?, ?, ?, ?, ?)`)
    .run(uuid(), runId, rawDiff, parseInt(match?.[1] ?? '0'), parseInt(match?.[2] ?? '0'), parseInt(match?.[3] ?? '0'));
}
```

---

## Step 7: SSH Remote Execution

### What you're building
Allow agent processes to run on a remote machine over SSH, with the Electron UI staying local.

### Claude Code commands
```
claude "write an SSHAgentRunner class using the 'ssh2' npm package that connects to a remote host with key-based auth, syncs the repo via 'git pull', executes an agent command over the SSH exec channel, and streams stdout/stderr back via callbacks identical to the local AgentRunner interface"
```

```
claude "add an SSHConfigStore that persists remote host configs (hostname, port, username, privateKeyPath, remotePath) in SQLite and exposes them to the renderer via IPC"
```

### SSH runner implementation

```typescript
// src/main/ssh-runner.ts
import { Client } from 'ssh2';
import * as fs from 'fs';

export class SSHAgentRunner {
  private client = new Client();

  run(opts: RemoteRunOptions): void {
    this.client.connect({
      host: opts.config.host,
      port: opts.config.port,
      username: opts.config.username,
      privateKey: fs.readFileSync(opts.config.privateKeyPath),
    });
    this.client.on('ready', () => {
      this.client.exec(`cd ${opts.config.remotePath} && git pull --ff-only`, (err, stream) => {
        if (err) { opts.onStderr(err.message); return; }
        stream.on('close', () => this.runAgent(opts));
      });
    });
    this.client.on('error', (err) => opts.onStderr(err.message));
  }

  private runAgent(opts: RemoteRunOptions): void {
    const escapedPrompt = opts.prompt.replace(/'/g, "'\\''");
    const cmd = `cd ${opts.config.remotePath} && ${opts.agentCommand} --prompt '${escapedPrompt}'`;
    this.client.exec(cmd, (err, stream) => {
      if (err) { opts.onStderr(err.message); return; }
      stream.stdout.on('data', (chunk: Buffer) => chunk.toString().split('\n').filter(Boolean).forEach(opts.onStdout));
      stream.stderr.on('data', (chunk: Buffer) => chunk.toString().split('\n').filter(Boolean).forEach(opts.onStderr));
      stream.on('close', (code: number) => { opts.onExit(code); this.client.end(); });
    });
  }

  disconnect(): void { this.client.end(); }
}
```

### Final wiring command
```
claude "wire up all seven modules: on session create call WorktreeManager.create(); on agent start check SSHConfig and use SSHAgentRunner or local AgentRunner; on agent exit call captureDiff(); expose all data to renderer via IPC; add settings panel for SSH config and API tokens"
```

---

## Dependency Summary

| Step | Module | Key dependency |
|------|--------|----------------|
| 1 | Electron scaffold | electron-forge, better-sqlite3 |
| 2 | Worktree manager | child_process (built-in) |
| 3 | Agent runner | child_process (built-in) |
| 4 | Session store | better-sqlite3 |
| 5 | Ticket integration | fetch (built-in), Linear GraphQL |
| 6 | Diff viewer + PR | child_process, GitHub REST API |
| 7 | SSH execution | ssh2 |

```bash
npm install better-sqlite3 ssh2 uuid react react-dom
npm install -D @types/better-sqlite3 @types/ssh2 @types/uuid @types/react @types/react-dom
```

The hardest parts in practice: SSH session state across reconnects, git worktree cleanup on crash, and streaming output fast enough that the UI feels live. Budget twice as long as you think for each of those three.