diffden 0.1.0

package/dist/index.js

@@ -0,0 +1,883 @@
+// src/app.ts
+import {
+  createCliRenderer,
+  BoxRenderable as BoxRenderable2,
+  TextRenderable as TextRenderable3
+} from "@opentui/core";
+
+// src/config.ts
+import { mkdirSync, readFileSync, writeFileSync, existsSync } from "fs";
+import { resolve as resolve2, basename as basename2, join as join2 } from "path";
+
+// src/utils.ts
+import { homedir } from "os";
+import { join, basename, dirname, resolve } from "path";
+var DATA_DIR = join(homedir(), ".diffden");
+var CONFIG_PATH = join(DATA_DIR, "config.json");
+var REPOS_DIR = join(DATA_DIR, "repos");
+function relativeTime(date) {
+  const now = Date.now();
+  const diff = now - date.getTime();
+  const seconds = Math.floor(diff / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (seconds < 5) return "just now";
+  if (seconds < 60) return `${seconds}s ago`;
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days === 1) return "yesterday";
+  if (days < 30) return `${days}d ago`;
+  return date.toLocaleDateString();
+}
+function projectSlug(dirPath) {
+  return basename(resolve(dirPath)).replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+function projectDirFromFile(filePath) {
+  return dirname(resolve(filePath));
+}
+
+// src/config.ts
+function ensureDirs() {
+  mkdirSync(DATA_DIR, { recursive: true });
+  mkdirSync(REPOS_DIR, { recursive: true });
+}
+function loadConfig() {
+  ensureDirs();
+  if (!existsSync(CONFIG_PATH)) {
+    const config = { projects: [] };
+    saveConfig(config);
+    return config;
+  }
+  const raw = readFileSync(CONFIG_PATH, "utf-8");
+  return JSON.parse(raw);
+}
+function saveConfig(config) {
+  ensureDirs();
+  writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2));
+}
+function addFileToConfig(config, filePath) {
+  const absPath = resolve2(filePath);
+  const dir = projectDirFromFile(absPath);
+  const slug = projectSlug(dir);
+  const fileName = basename2(absPath);
+  let project = config.projects.find((p) => p.slug === slug);
+  if (!project) {
+    project = { slug, dir, files: [] };
+    config.projects.push(project);
+  }
+  if (!project.files.includes(fileName)) {
+    project.files.push(fileName);
+  }
+  saveConfig(config);
+  return config;
+}
+function removeFileFromConfig(config, filePath) {
+  const absPath = resolve2(filePath);
+  const dir = projectDirFromFile(absPath);
+  const slug = projectSlug(dir);
+  const fileName = basename2(absPath);
+  const project = config.projects.find((p) => p.slug === slug);
+  if (project) {
+    project.files = project.files.filter((f) => f !== fileName);
+    if (project.files.length === 0) {
+      config.projects = config.projects.filter((p) => p.slug !== slug);
+    }
+  }
+  saveConfig(config);
+  return config;
+}
+function getRepoPath(slug) {
+  return `${REPOS_DIR}/${slug}`;
+}
+function getFullFilePath(project, fileName) {
+  return join2(project.dir, fileName);
+}
+
+// src/tracker.ts
+import simpleGit from "simple-git";
+import { existsSync as existsSync2, mkdirSync as mkdirSync2, copyFileSync, writeFileSync as writeFileSync2 } from "fs";
+import { join as join3, basename as basename3 } from "path";
+function ensureRepoDir(slug) {
+  const repoPath = getRepoPath(slug);
+  mkdirSync2(repoPath, { recursive: true });
+  return repoPath;
+}
+async function getGit(slug) {
+  const repoPath = ensureRepoDir(slug);
+  const git = simpleGit(repoPath);
+  const isRepo = await git.checkIsRepo();
+  if (!isRepo) {
+    await git.init();
+    await git.addConfig("user.name", "diffden");
+    await git.addConfig("user.email", "diffden@local");
+  }
+  return git;
+}
+async function snapshot(slug, sourceFilePath) {
+  const git = await getGit(slug);
+  const repoPath = getRepoPath(slug);
+  const fileName = basename3(sourceFilePath);
+  const destPath = join3(repoPath, fileName);
+  if (!existsSync2(sourceFilePath)) return null;
+  copyFileSync(sourceFilePath, destPath);
+  await git.add(fileName);
+  const status = await git.status();
+  if (status.staged.length === 0) return null;
+  const result = await git.commit(`[${fileName}] auto-snapshot`);
+  return result.commit || null;
+}
+async function getLog(slug, fileName) {
+  const git = await getGit(slug);
+  const repoPath = getRepoPath(slug);
+  try {
+    const args = ["--stat", "--stat-width=200"];
+    if (fileName) {
+      args.push("--follow", "--", fileName);
+    }
+    const log = await git.log(args);
+    return log.all.map((entry) => {
+      const diff = entry.diff;
+      let insertions = 0;
+      let deletions = 0;
+      if (diff) {
+        insertions = diff.insertions ?? 0;
+        deletions = diff.deletions ?? 0;
+      }
+      if (insertions === 0 && deletions === 0 && entry.body) {
+        const statMatch = entry.body.match(/(\d+) insertion.*?(\d+) deletion/);
+        if (statMatch) {
+          insertions = parseInt(statMatch[1], 10);
+          deletions = parseInt(statMatch[2], 10);
+        }
+      }
+      return {
+        hash: entry.hash,
+        date: new Date(entry.date),
+        message: entry.message,
+        insertions,
+        deletions
+      };
+    });
+  } catch {
+    return [];
+  }
+}
+async function getDiff(slug, hash, fileName) {
+  const git = await getGit(slug);
+  try {
+    const args = [`${hash}^`, hash];
+    if (fileName) args.push("--", fileName);
+    const diff = await git.diff(args);
+    return diff || "(no diff available)";
+  } catch {
+    try {
+      const diff = await git.diff(["4b825dc642cb6eb9a060e54bf899d8b2da2e7862", hash]);
+      return diff || "(initial snapshot)";
+    } catch {
+      return "(no diff available)";
+    }
+  }
+}
+async function getContent(slug, hash, fileName) {
+  const git = await getGit(slug);
+  try {
+    return await git.show([`${hash}:${fileName}`]);
+  } catch {
+    return "(content not available)";
+  }
+}
+async function restore(slug, hash, fileName, destPath) {
+  try {
+    const content = await getContent(slug, hash, fileName);
+    if (content === "(content not available)") return false;
+    writeFileSync2(destPath, content);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function getSnapshotCount(slug, fileName) {
+  const log = await getLog(slug, fileName);
+  return log.length;
+}
+async function getLatestSnapshot(slug, fileName) {
+  const log = await getLog(slug, fileName);
+  return log[0] ?? null;
+}
+
+// src/watcher.ts
+import { watch } from "chokidar";
+import { join as join4 } from "path";
+var DEBOUNCE_MS = 500;
+var watchers = /* @__PURE__ */ new Map();
+var onSnapshotCallback = null;
+function onSnapshot(cb) {
+  onSnapshotCallback = cb;
+}
+async function startWatching(project) {
+  const slug = project.slug;
+  for (const fileName of project.files) {
+    const filePath = join4(project.dir, fileName);
+    const key = `${slug}:${fileName}`;
+    if (watchers.has(key)) continue;
+    let debounceTimer = null;
+    const watcher = watch(filePath, {
+      persistent: true,
+      ignoreInitial: true,
+      awaitWriteFinish: { stabilityThreshold: 200, pollInterval: 50 }
+    });
+    watcher.on("change", () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(async () => {
+        const hash = await snapshot(slug, filePath);
+        if (hash && onSnapshotCallback) {
+          onSnapshotCallback(slug, fileName);
+        }
+      }, DEBOUNCE_MS);
+    });
+    watchers.set(key, { watcher, filePath, slug });
+  }
+}
+async function stopWatching(slug, fileName) {
+  for (const [key, entry] of watchers) {
+    if (entry.slug === slug && (!fileName || key.endsWith(`:${fileName}`))) {
+      await entry.watcher.close();
+      watchers.delete(key);
+    }
+  }
+}
+async function stopAll() {
+  for (const [key, entry] of watchers) {
+    await entry.watcher.close();
+  }
+  watchers.clear();
+}
+
+// src/editor.ts
+import { spawn } from "child_process";
+function openInEditor(slug, editor) {
+  const repoPath = getRepoPath(slug);
+  const cmd = editor || process.env.VISUAL || process.env.EDITOR || "code";
+  try {
+    const child = spawn(cmd, [repoPath], {
+      detached: true,
+      stdio: "ignore"
+    });
+    child.unref();
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getLinkInstructions(slug) {
+  const repoPath = getRepoPath(slug);
+  return [
+    "To link the tracking repo in VS Code's git sidebar:",
+    "",
+    "Option 1: Add to workspace settings (.vscode/settings.json):",
+    `  "git.repositories": ["${repoPath}"]`,
+    "",
+    "Option 2: Add as multi-root workspace folder:",
+    `  File > Add Folder to Workspace... > ${repoPath}`,
+    "",
+    "Option 3: Open tracking repo directly:",
+    `  code ${repoPath}`,
+    "",
+    "Then use GitLens or the built-in Git sidebar to browse history."
+  ].join("\n");
+}
+
+// src/app.ts
+import { resolve as resolvePath, basename as basenamePath, dirname as dirnamePath } from "path";
+
+// src/ui/project-list.ts
+import { SelectRenderable } from "@opentui/core";
+function formatOption(item) {
+  return {
+    name: `${item.slug}`,
+    description: `${item.fileCount} file${item.fileCount !== 1 ? "s" : ""} \xB7 ${item.dir}`,
+    value: item
+  };
+}
+function createProjectList(ctx) {
+  return new SelectRenderable(ctx, {
+    showDescription: true,
+    showScrollIndicator: true,
+    wrapSelection: true,
+    backgroundColor: "#1a1a2e",
+    textColor: "#e0e0e0",
+    selectedBackgroundColor: "#16213e",
+    selectedTextColor: "#00d2ff",
+    focusedBackgroundColor: "#1a1a2e",
+    focusedTextColor: "#e0e0e0",
+    descriptionColor: "#666680",
+    selectedDescriptionColor: "#4a90d9"
+  });
+}
+function updateProjectList(select, items) {
+  select.options = items.map(formatOption);
+}
+
+// src/ui/file-list.ts
+import { SelectRenderable as SelectRenderable2 } from "@opentui/core";
+function formatOption2(item) {
+  const count = `${item.snapshotCount} snap${item.snapshotCount !== 1 ? "s" : ""}`;
+  const time = item.lastChanged ? relativeTime(item.lastChanged) : "no snapshots";
+  return {
+    name: item.fileName,
+    description: `${count} \xB7 ${time}`,
+    value: item
+  };
+}
+function createFileList(ctx) {
+  return new SelectRenderable2(ctx, {
+    showDescription: true,
+    showScrollIndicator: true,
+    wrapSelection: true,
+    backgroundColor: "#1a1a2e",
+    textColor: "#e0e0e0",
+    selectedBackgroundColor: "#16213e",
+    selectedTextColor: "#00d2ff",
+    focusedBackgroundColor: "#1a1a2e",
+    focusedTextColor: "#e0e0e0",
+    descriptionColor: "#666680",
+    selectedDescriptionColor: "#4a90d9"
+  });
+}
+function updateFileList(select, items) {
+  select.options = items.map(formatOption2);
+}
+
+// src/ui/snapshot-list.ts
+import { SelectRenderable as SelectRenderable3 } from "@opentui/core";
+function formatOption3(snap) {
+  const time = relativeTime(snap.date);
+  const stats = `+${snap.insertions} -${snap.deletions}`;
+  return {
+    name: time,
+    description: stats,
+    value: snap
+  };
+}
+function createSnapshotList(ctx) {
+  return new SelectRenderable3(ctx, {
+    showDescription: true,
+    showScrollIndicator: true,
+    wrapSelection: true,
+    backgroundColor: "#1a1a2e",
+    textColor: "#e0e0e0",
+    selectedBackgroundColor: "#16213e",
+    selectedTextColor: "#00d2ff",
+    focusedBackgroundColor: "#1a1a2e",
+    focusedTextColor: "#e0e0e0",
+    descriptionColor: "#666680",
+    selectedDescriptionColor: "#4a90d9"
+  });
+}
+function updateSnapshotList(select, snapshots) {
+  select.options = snapshots.map(formatOption3);
+}
+
+// src/ui/preview.ts
+import { TextRenderable } from "@opentui/core";
+function createPreview(ctx) {
+  return new TextRenderable(ctx, {
+    content: "",
+    fg: "#c0c0c0",
+    bg: "#0d0d1a",
+    wrapMode: "char"
+  });
+}
+function updatePreview(text, content) {
+  text.content = content;
+}
+
+// src/ui/command-bar.ts
+import { InputRenderable, BoxRenderable, TextRenderable as TextRenderable2 } from "@opentui/core";
+function createCommandBar(ctx) {
+  const container = new BoxRenderable(ctx, {
+    flexDirection: "row",
+    height: 1,
+    width: "100%",
+    backgroundColor: "#16213e"
+  });
+  const hints = new TextRenderable2(ctx, {
+    content: "[j/k] nav  [Enter/l] select  [Esc/h] back  [Tab] diff/full  [r] restore  [o] open  [/] cmd  [q] quit",
+    fg: "#666680",
+    bg: "#16213e",
+    flexGrow: 1,
+    height: 1,
+    truncate: true
+  });
+  const status = new TextRenderable2(ctx, {
+    content: "",
+    fg: "#00d2ff",
+    bg: "#16213e",
+    height: 1,
+    flexShrink: 0
+  });
+  const input = new InputRenderable(ctx, {
+    placeholder: "Type / for commands...",
+    width: "100%",
+    textColor: "#e0e0e0",
+    backgroundColor: "#16213e",
+    visible: false
+  });
+  container.add(hints);
+  container.add(status);
+  container.add(input);
+  return { container, input, hints, status };
+}
+function showInput(bar) {
+  bar.hints.visible = false;
+  bar.status.visible = false;
+  bar.input.visible = true;
+  bar.input.value = "/";
+  bar.input.focus();
+}
+function hideInput(bar) {
+  bar.input.visible = false;
+  bar.input.blur();
+  bar.input.value = "";
+  bar.hints.visible = true;
+  bar.status.visible = true;
+}
+function setStatus(bar, msg) {
+  bar.status.content = msg ? ` ${msg} ` : "";
+}
+function updateHints(bar, focusedColumn) {
+  const base = "[q] quit  [/] cmd";
+  const nav = "[j/k] nav";
+  const select = "[Enter/l] select";
+  const back = "[Esc/h] back";
+  switch (focusedColumn) {
+    case 0:
+      bar.hints.content = `${nav}  ${select}  [o] open  ${base}`;
+      break;
+    case 1:
+      bar.hints.content = `${nav}  ${select}  ${back}  [o] open  ${base}`;
+      break;
+    case 2:
+      bar.hints.content = `${nav}  ${select}  ${back}  [Tab] diff/full  [r] restore  ${base}`;
+      break;
+    case 3:
+      bar.hints.content = `${back}  [Tab] diff/full  [j/k] scroll  ${base}`;
+      break;
+  }
+}
+
+// src/app.ts
+var COL_PROJECTS = 0;
+var COL_FILES = 1;
+var COL_SNAPSHOTS = 2;
+var COL_PREVIEW = 3;
+async function startApp(initialFilePath) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+    useAlternateScreen: true,
+    useMouse: true,
+    backgroundColor: "#0d0d1a"
+  });
+  await renderer.setupTerminal();
+  const state = {
+    config: loadConfig(),
+    focusedColumn: 0,
+    selectedProject: null,
+    selectedFileName: null,
+    selectedSnapshot: null,
+    snapshots: [],
+    previewMode: "diff",
+    commandMode: false
+  };
+  if (initialFilePath) {
+    state.config = addFileToConfig(state.config, initialFilePath);
+  }
+  const rootBox = new BoxRenderable2(renderer.root.ctx, {
+    flexDirection: "column",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#0d0d1a"
+  });
+  const titleBar = new TextRenderable3(renderer.root.ctx, {
+    content: " DiffDen ",
+    fg: "#00d2ff",
+    bg: "#16213e",
+    height: 1,
+    width: "100%",
+    truncate: true
+  });
+  const columnsBox = new BoxRenderable2(renderer.root.ctx, {
+    flexDirection: "row",
+    flexGrow: 1,
+    width: "100%"
+  });
+  const projectBox = new BoxRenderable2(renderer.root.ctx, {
+    border: true,
+    borderColor: "#00d2ff",
+    title: " Projects ",
+    backgroundColor: "#1a1a2e",
+    flexGrow: 1,
+    minWidth: 15
+  });
+  const fileBox = new BoxRenderable2(renderer.root.ctx, {
+    border: true,
+    borderColor: "#333355",
+    title: " Files ",
+    backgroundColor: "#1a1a2e",
+    flexGrow: 1,
+    minWidth: 20
+  });
+  const snapshotBox = new BoxRenderable2(renderer.root.ctx, {
+    border: true,
+    borderColor: "#333355",
+    title: " Snapshots ",
+    backgroundColor: "#1a1a2e",
+    flexGrow: 1,
+    minWidth: 22
+  });
+  const previewBox = new BoxRenderable2(renderer.root.ctx, {
+    border: true,
+    borderColor: "#333355",
+    title: " Preview ",
+    backgroundColor: "#0d0d1a",
+    flexGrow: 2,
+    minWidth: 20
+  });
+  const projectList = createProjectList(renderer.root.ctx);
+  projectList.width = "100%";
+  projectList.height = "100%";
+  projectBox.add(projectList);
+  const fileList = createFileList(renderer.root.ctx);
+  fileList.width = "100%";
+  fileList.height = "100%";
+  fileBox.add(fileList);
+  const snapshotList = createSnapshotList(renderer.root.ctx);
+  snapshotList.width = "100%";
+  snapshotList.height = "100%";
+  snapshotBox.add(snapshotList);
+  const preview = createPreview(renderer.root.ctx);
+  preview.width = "100%";
+  preview.height = "100%";
+  previewBox.add(preview);
+  const commandBar = createCommandBar(renderer.root.ctx);
+  columnsBox.add(projectBox);
+  columnsBox.add(fileBox);
+  columnsBox.add(snapshotBox);
+  columnsBox.add(previewBox);
+  rootBox.add(titleBar);
+  rootBox.add(columnsBox);
+  rootBox.add(commandBar.container);
+  renderer.root.add(rootBox);
+  const columns = [projectList, fileList, snapshotList, preview];
+  const columnBoxes = [projectBox, fileBox, snapshotBox, previewBox];
+  function updateColumnVisibility() {
+    const w = renderer.width;
+    const focus = state.focusedColumn;
+    if (w >= 120) {
+      for (const box of columnBoxes) box.visible = true;
+    } else if (w >= 80) {
+      if (focus <= 1) {
+        projectBox.visible = true;
+        fileBox.visible = true;
+        snapshotBox.visible = true;
+        previewBox.visible = false;
+      } else {
+        projectBox.visible = false;
+        fileBox.visible = true;
+        snapshotBox.visible = true;
+        previewBox.visible = true;
+      }
+    } else {
+      for (const box of columnBoxes) box.visible = false;
+      columnBoxes[focus].visible = true;
+      if (focus < 3) {
+        columnBoxes[focus + 1].visible = true;
+      } else {
+        columnBoxes[focus - 1].visible = true;
+      }
+    }
+  }
+  function updateFocusStyles() {
+    for (let i = 0; i < columnBoxes.length; i++) {
+      columnBoxes[i].borderColor = i === state.focusedColumn ? "#00d2ff" : "#333355";
+    }
+    updateHints(commandBar, state.focusedColumn);
+    updateColumnVisibility();
+  }
+  function focusColumn(col) {
+    if (col < 0 || col > 3) return;
+    state.focusedColumn = col;
+    const target = columns[col];
+    if (target && "focus" in target) {
+      target.focus();
+    }
+    updateFocusStyles();
+    renderer.requestRender();
+  }
+  async function refreshProjects() {
+    state.config = loadConfig();
+    const items = [];
+    for (const project of state.config.projects) {
+      const fileCount = project.files.length;
+      items.push({ slug: project.slug, dir: project.dir, fileCount });
+    }
+    updateProjectList(projectList, items);
+    if (items.length === 0) {
+      titleBar.content = " DiffDen \u2014 use /watch <path> to add a file ";
+    } else {
+      titleBar.content = " DiffDen ";
+    }
+  }
+  async function refreshFiles() {
+    if (!state.selectedProject) {
+      updateFileList(fileList, []);
+      return;
+    }
+    const project = state.selectedProject;
+    const items = [];
+    for (const fileName of project.files) {
+      const count = await getSnapshotCount(project.slug, fileName);
+      const latest = await getLatestSnapshot(project.slug, fileName);
+      items.push({
+        fileName,
+        snapshotCount: count,
+        lastChanged: latest?.date ?? null
+      });
+    }
+    updateFileList(fileList, items);
+    fileBox.title = ` Files \u2014 ${project.slug} `;
+  }
+  async function refreshSnapshots() {
+    if (!state.selectedProject || !state.selectedFileName) {
+      updateSnapshotList(snapshotList, []);
+      state.snapshots = [];
+      return;
+    }
+    const snaps = await getLog(state.selectedProject.slug, state.selectedFileName);
+    state.snapshots = snaps;
+    updateSnapshotList(snapshotList, snaps);
+    snapshotBox.title = ` Snapshots \u2014 ${state.selectedFileName} `;
+  }
+  async function refreshPreview() {
+    if (!state.selectedProject || !state.selectedFileName || !state.selectedSnapshot) {
+      updatePreview(preview, "");
+      return;
+    }
+    const snap = state.selectedSnapshot;
+    if (state.previewMode === "diff") {
+      const diff = await getDiff(state.selectedProject.slug, snap.hash, state.selectedFileName);
+      updatePreview(preview, diff);
+      previewBox.title = " Diff ";
+    } else {
+      const content = await getContent(state.selectedProject.slug, snap.hash, state.selectedFileName);
+      updatePreview(preview, content);
+      previewBox.title = " Full Content ";
+    }
+  }
+  projectList.on("selectionChanged", async (_index, option) => {
+    if (!option?.value) return;
+    const item = option.value;
+    state.selectedProject = state.config.projects.find((p) => p.slug === item.slug) ?? null;
+    state.selectedFileName = null;
+    state.selectedSnapshot = null;
+    await refreshFiles();
+    updateSnapshotList(snapshotList, []);
+    updatePreview(preview, "");
+  });
+  projectList.on("itemSelected", async (_index, option) => {
+    if (!option?.value) return;
+    const item = option.value;
+    state.selectedProject = state.config.projects.find((p) => p.slug === item.slug) ?? null;
+    await refreshFiles();
+    focusColumn(COL_FILES);
+  });
+  fileList.on("selectionChanged", async (_index, option) => {
+    if (!option?.value) return;
+    const item = option.value;
+    state.selectedFileName = item.fileName;
+    state.selectedSnapshot = null;
+    await refreshSnapshots();
+    updatePreview(preview, "");
+  });
+  fileList.on("itemSelected", async (_index, option) => {
+    if (!option?.value) return;
+    const item = option.value;
+    state.selectedFileName = item.fileName;
+    await refreshSnapshots();
+    focusColumn(COL_SNAPSHOTS);
+  });
+  snapshotList.on("selectionChanged", async (_index, option) => {
+    if (!option?.value) return;
+    state.selectedSnapshot = option.value;
+    await refreshPreview();
+  });
+  snapshotList.on("itemSelected", async () => {
+    focusColumn(COL_PREVIEW);
+  });
+  commandBar.input.on("enter", async (value) => {
+    hideInput(commandBar);
+    state.commandMode = false;
+    focusColumn(state.focusedColumn);
+    await handleCommand(value.trim());
+  });
+  async function handleCommand(cmd) {
+    if (!cmd.startsWith("/")) return;
+    const parts = cmd.slice(1).split(/\s+/);
+    const command = parts[0];
+    const arg = parts.slice(1).join(" ");
+    switch (command) {
+      case "watch": {
+        if (!arg) {
+          setStatus(commandBar, "Usage: /watch <file-path>");
+          return;
+        }
+        state.config = addFileToConfig(state.config, arg);
+        const watchAbsPath = resolvePath(arg);
+        const watchSlug = projectSlug(dirnamePath(watchAbsPath));
+        await snapshot(watchSlug, watchAbsPath);
+        const watchProject = state.config.projects.find((p) => p.slug === watchSlug);
+        if (watchProject) await startWatching(watchProject);
+        await refreshProjects();
+        setStatus(commandBar, `Watching: ${basenamePath(watchAbsPath)}`);
+        break;
+      }
+      case "unwatch": {
+        if (!arg) {
+          setStatus(commandBar, "Usage: /unwatch <file-path>");
+          return;
+        }
+        const unwatchAbsPath = resolvePath(arg);
+        const unwatchSlug = projectSlug(dirnamePath(unwatchAbsPath));
+        await stopWatching(unwatchSlug, basenamePath(unwatchAbsPath));
+        state.config = removeFileFromConfig(state.config, arg);
+        await refreshProjects();
+        setStatus(commandBar, `Unwatched: ${basenamePath(unwatchAbsPath)}`);
+        break;
+      }
+      case "restore": {
+        if (state.selectedProject && state.selectedFileName && state.selectedSnapshot) {
+          const destPath = getFullFilePath(state.selectedProject, state.selectedFileName);
+          const ok = await restore(state.selectedProject.slug, state.selectedSnapshot.hash, state.selectedFileName, destPath);
+          setStatus(commandBar, ok ? "Restored!" : "Restore failed");
+        } else {
+          setStatus(commandBar, "Select a snapshot first");
+        }
+        break;
+      }
+      case "open": {
+        const slug = state.selectedProject?.slug;
+        if (slug) {
+          openInEditor(slug, state.config.editor);
+          setStatus(commandBar, "Opened in editor");
+        } else {
+          setStatus(commandBar, "Select a project first");
+        }
+        break;
+      }
+      case "link": {
+        const slug = state.selectedProject?.slug;
+        if (slug) {
+          const instructions = getLinkInstructions(slug);
+          updatePreview(preview, instructions);
+          previewBox.title = " Link Instructions ";
+          focusColumn(COL_PREVIEW);
+        } else {
+          setStatus(commandBar, "Select a project first");
+        }
+        break;
+      }
+      default:
+        setStatus(commandBar, `Unknown command: /${command}`);
+    }
+  }
+  renderer.keyInput.on("keypress", async (key) => {
+    if (state.commandMode) {
+      if (key.name === "escape") {
+        hideInput(commandBar);
+        state.commandMode = false;
+        focusColumn(state.focusedColumn);
+      }
+      return;
+    }
+    switch (key.name) {
+      case "q":
+        await stopAll();
+        renderer.destroy();
+        process.exit(0);
+        break;
+      case "/":
+        state.commandMode = true;
+        showInput(commandBar);
+        break;
+      case "l":
+      case "right": {
+        const col = state.focusedColumn;
+        if (col < 3) {
+          const current = columns[col];
+          if (current && "selectCurrent" in current) {
+            current.selectCurrent();
+          }
+          focusColumn(col + 1);
+        }
+        break;
+      }
+      case "h":
+      case "left":
+      case "escape":
+        if (state.focusedColumn > 0) {
+          focusColumn(state.focusedColumn - 1);
+        }
+        break;
+      case "tab": {
+        if (state.focusedColumn >= 2 && state.selectedSnapshot) {
+          state.previewMode = state.previewMode === "diff" ? "full" : "diff";
+          await refreshPreview();
+        }
+        break;
+      }
+      case "r": {
+        if (state.selectedProject && state.selectedFileName && state.selectedSnapshot) {
+          const destPath = getFullFilePath(state.selectedProject, state.selectedFileName);
+          const ok = await restore(state.selectedProject.slug, state.selectedSnapshot.hash, state.selectedFileName, destPath);
+          setStatus(commandBar, ok ? "Restored!" : "Restore failed");
+        }
+        break;
+      }
+      case "o": {
+        const slug = state.selectedProject?.slug;
+        if (slug) {
+          openInEditor(slug, state.config.editor);
+          setStatus(commandBar, "Opened in editor");
+        }
+        break;
+      }
+    }
+  });
+  onSnapshot(async (slug, fileName) => {
+    if (state.selectedProject?.slug === slug) {
+      await refreshFiles();
+      if (state.selectedFileName === fileName) {
+        await refreshSnapshots();
+        if (state.selectedSnapshot) {
+          await refreshPreview();
+        }
+      }
+    }
+    setStatus(commandBar, `Snapshot: ${fileName}`);
+    setTimeout(() => setStatus(commandBar, ""), 3e3);
+  });
+  for (const project of state.config.projects) {
+    await startWatching(project);
+  }
+  await refreshProjects();
+  focusColumn(COL_PROJECTS);
+  renderer.root.on("resized", () => {
+    updateColumnVisibility();
+    renderer.requestRender();
+  });
+  renderer.start();
+}
+export {
+  startApp
+};