my-durable 0.0.24 → 0.0.26

package/apps/dpi-playground/apps/dpi-playground-fe/src/components/GitPanel.vue

@@ -1,12 +1,36 @@
 <script setup lang="ts">
-// Inspector GIT tab, IntelliJ-shaped:
-//   • branch PICKER — the list is right there, nobody types an existing name
-//   • worktrees are first-class rows: create a SESSION on one click
-//   • commit: big multi-line box + changed-file checkboxes (commit chosen files)
-// Lazy: rides the shared git-store (one fetch per folder while fresh), the
-// refresh button and every op are the only forced refetches.
+// Inspector GIT tab — the IDE git window, in the app's own design language
+// (panel-heading + tags + task-sections). IntelliJ features: branch popup,
+// changelist commit with per-file diff/stage/unstage/discard, structured log
+// with swimlane graph, push with ahead count + recovery hints, stash with
+// auto-stash on switch, conflict banner + abort, checkpoints/rewind,
+// session-scoped commits, worktree sessions.
+// Checklist: docs/git-ui-checklist.md (orca main, paseo/zcode niceties).
 import { computed, onServerPrefetch, ref, watch } from "vue";
-import { Check, ChevronDown, RefreshCw, X } from "lucide-vue-next";
+import {
+  ArrowDownToLine,
+  ArrowRight,
+  ArrowUpFromLine,
+  Ban,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  CornerUpLeft,
+  Eye,
+  Flag,
+  GitBranch,
+  GitCompare,
+  History,
+  Minus,
+  PackageOpen,
+  Plus,
+  RefreshCw,
+  Sparkles,
+  SquareStack,
+  Undo2,
+  X,
+} from "lucide-vue-next";
 import { deviceId, network, sessionSummary, notify, select } from "../client/store";
 import { deviceClient } from "../client/hub";
 import { ensureGit, gitEntry } from "../client/git-store";
@@ -21,53 +45,83 @@ const status = computed(() => entry.value.status);
 const loading = computed(() => entry.value.loading);
 const refreshing = computed(() => entry.value.refreshing);
 const error = computed(() => entry.value.error);
+const sessionId = computed(() => {
+  const s = sessionSummary.value;
+  return s && s.cwd === cwd.value && !props.deviceId ? s.id : undefined;
+});
 
 const busy = ref("");
 const out = ref("");
-/** IntelliJ's log window: lazily fetched once per folder, explicit refresh. */
-const commits = ref<{ hash: string; refs: string; author: string; date: string; subject: string }[]>([]);
-const logLoading = ref(false);
-let logAt = 0;
-async function loadLog(force = false) {
-  if (!devId.value || !cwd.value) return;
-  if (!force && commits.value.length && Date.now() - logAt < 120_000) return;
-  logLoading.value = true;
-  try {
-    const r = await deviceClient(devId.value).gitOp(cwd.value, "log-list");
-    commits.value = r.commits ?? [];
-    logAt = Date.now();
-  } catch {
-    /* the log is decorative; the ops row surfaces failures */
-  } finally {
-    logLoading.value = false;
-  }
-}
-if (!import.meta.env.SSR) void loadLog();
-watch([devId, cwd], () => {
-  commits.value = [];
-  logAt = 0;
-  void loadLog();
-});
 const commitMsg = ref("");
 const checked = ref<Set<string>>(new Set());
 const branchMenu = ref(false);
 const wtMenu = ref(false);
 const newBranch = ref("");
+/** IntelliJ: click a changed file → its diff, right there. */
+const fileDiff = ref<{ path: string; text: string } | null>(null);
+/** Working vs staged — paseo's diff modes. */
+const diffMode = ref<"working" | "staged">("working");
+/** orca commit drafts: the message survives navigation and reloads. */
+const draftKey = computed(() => `dpi-git-draft:${devId.value}:${cwd.value}`);
+/** Compare vs an arbitrary base (orca git-bridge). */
+const base = ref<{ ref: string; ahead: number; behind: number } | null>(null);
+/** paseo: stash → switch → pop, so a dirty tree never blocks a branch hop. */
+const autoStash = ref(true);
+/** Push/pull failures get a RECOVERY action, not just red text. */
+const pushHint = ref("");
+const pullHint = ref(false);
+/** Session-scoped commit (zcode flagship): files this session's agent touched. */
+const sessionFiles = ref<string[]>([]);
+const sessionCount = computed(() => {
+  if (!sessionFiles.value.length || !cwd.value) return null;
+  const abs = (p: string) => (p.startsWith("/") || p.includes(":\\") ? p : `${cwd.value}/${p}`);
+  const touched = new Set(sessionFiles.value);
+  const mine = (status.value?.files ?? []).filter((f) => touched.has(abs(f.path)));
+  return { changed: mine.length, total: sessionFiles.value.length };
+});
+/** Checkpoints (zcode): named refs of HEAD you can rewind to. */
+const checkpoints = ref<{ name: string; hash: string; date: string; subject: string }[]>([]);
+const cpsOpen = ref(false);
+/** Log row expander: files of one commit. */
+const expanded = ref<Map<string, { status: string; path: string }[]>>(new Map());
+/** Folder grouping (orca tree-directory-rows): collapse noise. */
+const collapsed = ref<Set<string>>(new Set());
 
-if (!import.meta.env.SSR) void ensureGit(devId.value || "?", cwd.value || "?");
+const draftLoad = () => {
+  if (typeof localStorage === "undefined") return;
+  commitMsg.value = localStorage.getItem(draftKey.value) ?? "";
+};
+if (!import.meta.env.SSR) {
+  void ensureGit(devId.value || "?", cwd.value || "?");
+  draftLoad();
+}
 onServerPrefetch(() => ensureGit(devId.value || "?", cwd.value || "?"));
+watch(commitMsg, (m) => {
+  if (typeof localStorage === "undefined") return;
+  if (m) localStorage.setItem(draftKey.value, m);
+  else localStorage.removeItem(draftKey.value);
+});
 watch([devId, cwd], () => {
   branchMenu.value = false;
   wtMenu.value = false;
-  void ensureGit(devId.value || "?", cwd.value || "?");
+  fileDiff.value = null;
+  base.value = null;
+  pushHint.value = "";
+  pullHint.value = false;
+  sessionFiles.value = [];
+  expanded.value = new Map();
+  collapsed.value = new Set();
+  if (!import.meta.env.SSR) {
+    void ensureGit(devId.value || "?", cwd.value || "?");
+    draftLoad();
+  }
 });
 const refresh = () => {
   checked.value = new Set();
+  fileDiff.value = null;
   return ensureGit(devId.value || "?", cwd.value || "?", { force: true });
 };
 
-// changed files: staged+modified default-checked, untracked not — IntelliJ's
-// changelist behavior.
 const files = computed(() => status.value?.files ?? []);
 watch(files, (list) => {
   const next = new Set<string>();
@@ -75,6 +129,18 @@ watch(files, (list) => {
   checked.value = next;
 });
 const someChecked = computed(() => files.value.some((f) => checked.value.has(f.path)));
+/** orca's split: staged (index changed) vs unstaged (worktree + untracked). */
+const stagedFiles = computed(() => files.value.filter((f) => f.x !== " " && f.x !== "?"));
+const unstagedFiles = computed(() => files.value.filter((f) => f.x === " " || f.x === "?"));
+const conflictFiles = computed(() => files.value.filter((f) => /U|A|D/.test(f.x) && /U|A|D/.test(f.y)));
+const atCap = computed(() => files.value.length >= 500);
+const dirty = computed(() => (status.value?.staged ?? 0) + (status.value?.unstaged ?? 0) + (status.value?.untracked ?? 0) > 0);
+const noIdentity = computed(() => !status.value?.identity?.name || !status.value?.identity?.email);
+const remoteWeb = computed(() => {
+  const u = status.value?.remoteUrl ?? "";
+  const m = u.match(/git@([^:]+):(.+?)(?:\.git)?$/) ?? u.match(/^https?:\/\/([^/]+)\/(.+?)(?:\.git)?$/);
+  return m ? `https://${m[1]}/${m[2]}` : "";
+});
 const toggle = (p: string) => {
   const next = new Set(checked.value);
   if (next.has(p)) next.delete(p);
@@ -84,51 +150,227 @@ const toggle = (p: string) => {
 const toggleAll = () => {
   checked.value = someChecked.value ? new Set() : new Set(files.value.map((f) => f.path));
 };
+const toggleGroup = (group: { path: string }[]) => {
+  const all = group.every((f) => checked.value.has(f.path));
+  const next = new Set(checked.value);
+  for (const f of group) {
+    if (all) next.delete(f.path);
+    else next.add(f.path);
+  }
+  checked.value = next;
+};
+const dirOf = (p: string) => {
+  const i = p.lastIndexOf("/");
+  return i === -1 ? "." : p.slice(0, i);
+};
+const grouped = (list: { path: string; x: string; y: string; a?: number; d?: number }[]) => {
+  const byDir = new Map<string, typeof list>();
+  for (const f of list) {
+    const d = dirOf(f.path);
+    if (!byDir.has(d)) byDir.set(d, []);
+    byDir.get(d)!.push(f);
+  }
+  return [...byDir.entries()].map(([dir, fs]) => ({
+    dir,
+    files: fs,
+    open: !collapsed.value.has(dir),
+  }));
+};
+const collapse = (dir: string) => {
+  const next = new Set(collapsed.value);
+  if (next.has(dir)) next.delete(dir);
+  else next.add(dir);
+  collapsed.value = next;
+};
+const numChip = (f: { a?: number; d?: number }) =>
+  f.a === undefined && f.d === undefined ? "" : f.a === -1 || f.d === -1 ? "bin" : `+${f.a ?? 0} −${f.d ?? 0}`;
+const copyPath = (p: string) => {
+  void navigator.clipboard?.writeText(p).then(() => notify(`copied ${p}`));
+};
 
-async function op(name: "fetch" | "pull" | "log" | "branch" | "diff") {
+async function op(
+  name: "fetch" | "pull" | "push" | "branch" | "diff" | "stash-push" | "stash-pop",
+  extra: { message?: string; rebase?: boolean; setUpstream?: boolean; ref?: string } = {},
+) {
   if (!devId.value || !cwd.value) return;
   busy.value = name;
   out.value = "";
   try {
-    const r = await deviceClient(devId.value).gitOp(cwd.value, name);
+    const r = await deviceClient(devId.value).gitOp(cwd.value, name, extra);
     out.value = r.text || "(empty)";
-    if (name === "fetch" || name === "pull") notify(`git ${name} ✓`);
+    if (name === "push") {
+      pushHint.value = "";
+    }
+    if (name === "pull") pullHint.value = false;
+    if (["fetch", "pull", "push", "stash-push", "stash-pop"].includes(name)) notify(`git ${name} ✓`);
+    await refresh();
+    void loadLog(true);
+  } catch (e) {
+    const msg = (e as Error).message;
+    if (name === "push") {
+      // orca push-recovery: name the fix, offer the button.
+      if (/no upstream|has no upstream|upstream is gone/i.test(msg)) pushHint.value = "no upstream — set it while pushing?";
+      else if (/fetch first|non-fast-forward|rejected.*fetch|behind/i.test(msg)) pushHint.value = "the remote has work you lack — pull first";
+      else if (/authentication|permission|could not read|403|denied/i.test(msg)) pushHint.value = "credentials rejected on the device — check its git login";
+      else pushHint.value = "";
+    }
+    if (name === "pull" && /not possible to fast-forward|divergent|unrelated histories/i.test(msg)) pullHint.value = true;
+    notify(`git ${name}: ${msg.slice(0, 160)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
+async function fileAction(name: "stage" | "discard", path?: string) {
+  if (!devId.value || !cwd.value) return;
+  if (!path && name !== "stage") return;
+  if (name === "discard" && path && !confirm(`Roll back ${path} to HEAD? Uncommitted changes are lost.`)) return;
+  busy.value = name;
+  const targets = path ? [path] : files.value.filter((f) => f.x === " " || f.x === "M").map((f) => f.path);
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, name, { files: targets });
+    notify(r.text);
+    await refresh();
+  } catch (e) {
+    notify(`${name} failed: ${(e as Error).message.slice(0, 140)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
+async function unstageFiles(paths: string[]) {
+  if (!devId.value || !cwd.value || !paths.length) return;
+  busy.value = "unstage";
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "unstage", { files: paths });
+    notify(r.text);
     await refresh();
-    if (name === "fetch" || name === "pull" || name === "branch") void loadLog(true);
   } catch (e) {
-    out.value = `${name} failed: ${(e as Error).message.slice(0, 200)}`;
+    notify(`unstage failed: ${(e as Error).message.slice(0, 140)}`);
   } finally {
     busy.value = "";
   }
 }
 
-async function switchBranch(name: string) {
+async function ignorePaths(paths: string[]) {
+  if (!devId.value || !cwd.value || !paths.length) return;
+  busy.value = "ignore";
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "ignore", { lines: paths });
+    notify(r.text);
+    await refresh();
+  } catch (e) {
+    notify(`ignore failed: ${(e as Error).message.slice(0, 140)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
+async function showDiff(path: string) {
+  if (!devId.value || !cwd.value) return;
+  if (fileDiff.value?.path === path) return (fileDiff.value = null);
+  busy.value = "diff";
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "diff-file", { target: path, staged: diffMode.value === "staged" });
+    fileDiff.value = { path, text: r.text };
+  } catch (e) {
+    notify(`diff failed: ${(e as Error).message.slice(0, 140)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+const reDiff = async () => {
+  const p = fileDiff.value?.path;
+  fileDiff.value = null;
+  if (p) await showDiff(p);
+};
+const diffIsBinary = computed(() => /Binary files .* differ/i.test(fileDiff.value?.text ?? ""));
+
+async function gitAbort() {
+  if (!devId.value || !cwd.value) return;
+  busy.value = "abort";
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "merge-abort");
+    notify(r.text);
+    await refresh();
+  } catch (e) {
+    notify(`abort failed: ${(e as Error).message.slice(0, 120)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
+async function compareWith(ref: string) {
+  branchMenu.value = false;
+  if (!devId.value || !cwd.value) return;
+  busy.value = "compare";
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "compare", { ref });
+    base.value = { ref, ahead: r.ahead ?? 0, behind: r.behind ?? 0 };
+  } catch (e) {
+    notify(`compare failed: ${(e as Error).message.slice(0, 140)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
+async function switchBranch(name: string, create = false) {
   branchMenu.value = false;
-  if (!devId.value || !cwd.value || name === status.value?.branch) return;
+  if (!devId.value || !cwd.value || (name === status.value?.branch && !create)) return;
   busy.value = "switch";
+  const client = deviceClient(devId.value);
+  let stashed = false;
   try {
-    const r = await deviceClient(devId.value).gitOp(cwd.value, "switch", { ref: name });
+    // paseo auto-stash: a dirty tree never blocks a branch hop.
+    if (autoStash.value && !create && dirty.value) {
+      await client.gitOp(cwd.value, "stash-push", { message: `dpi auto-stash before ${name}` });
+      stashed = true;
+    }
+    const r = await client.gitOp(cwd.value, "switch", { ref: name, create });
     notify(r.text || `switched to ${name}`);
+    if (stashed) {
+      try {
+        const pop = await client.gitOp(cwd.value, "stash-pop");
+        if (/conflict/i.test(pop.text)) notify(`stash popped WITH CONFLICTS — resolve in the file list`);
+      } catch {
+        notify(`switched, but the stash did not pop — resolve manually (git stash list)`);
+      }
+    }
     await refresh();
+    void loadLog(true);
   } catch (e) {
     notify(`switch failed: ${(e as Error).message.slice(0, 140)}`);
+    if (stashed) {
+      try {
+        await client.gitOp(cwd.value, "stash-pop");
+      } catch {}
+    }
   } finally {
     busy.value = "";
   }
 }
 
-async function commit() {
+async function commit(thenPush = false) {
   if (!devId.value || !cwd.value || !commitMsg.value.trim()) return;
   busy.value = "commit";
   const chosen = files.value.filter((f) => checked.value.has(f.path)).map((f) => f.path);
   if (!chosen.length) return notify("check the files to commit — nothing is selected");
+  const client = deviceClient(devId.value);
   try {
-    const r = await deviceClient(devId.value).gitOp(cwd.value, "commit", {
+    const r = await client.gitOp(cwd.value, "commit", {
       message: commitMsg.value.trim(),
       files: chosen,
     });
     notify(r.text);
     commitMsg.value = "";
+    if (thenPush) {
+      try {
+        const p = await client.gitOp(cwd.value, "push");
+        notify(`pushed: ${p.text.slice(0, 80)}`);
+      } catch (e) {
+        notify(`committed, but push failed: ${(e as Error).message.slice(0, 120)}`);
+      }
+    }
     await refresh();
     void loadLog(true);
   } catch (e) {
@@ -138,6 +380,123 @@ async function commit() {
   }
 }
 
+/** orca/zcode AI message: ask the device's own model to title the changelist. */
+async function aiMessage() {
+  if (!devId.value || !cwd.value) return;
+  const chosen = files.value.filter((f) => checked.value.has(f.path)).map((f) => f.path);
+  if (!chosen.length) return notify("check files first — the model summarises THOSE");
+  busy.value = "ai";
+  const client = deviceClient(devId.value);
+  let sid = "";
+  try {
+    const info = network.devices.value.find((d) => d.id === devId.value)?.info;
+    const model = (info?.models ?? []).find((m) => m.id === info?.defaultModel) ?? (info?.models ?? [])[0];
+    if (!model) return notify("no model on the device");
+    let diff = "";
+    for (const f of chosen.slice(0, 5)) {
+      const d = await client.gitOp(cwd.value, "diff-file", { target: f });
+      diff += `${d.text}\n`;
+      if (diff.length > 4000) break;
+    }
+    diff = diff.slice(0, 4000);
+    const s = await client.createSession({ name: "git-msg", cwd: cwd.value, model: { provider: model.provider, modelId: model.id } });
+    sid = s.id;
+    const r = await client.agent(sid, 1).send(
+      `Write ONE concise git commit message (under 72 chars, imperative, no quotes, no backticks) for these changes:\n\n${diff}`,
+      "followUp",
+      undefined,
+      120_000,
+    );
+    const text = r.status === "done" ? r.answer.text.trim().split("\n")[0]?.slice(0, 100) : "";
+    if (text) commitMsg.value = text;
+    else notify("the model returned nothing usable");
+  } catch (e) {
+    notify(`ai message failed: ${(e as Error).message.slice(0, 120)}`);
+  } finally {
+    busy.value = "";
+    if (sid) void client.session(sid).archive().catch(() => {});
+  }
+}
+
+/** zcode flagship: check exactly the files this session's agents touched. */
+async function selectSessionFiles() {
+  if (!devId.value || !sessionId.value) return;
+  busy.value = "session-files";
+  try {
+    const r = await deviceClient(devId.value).sessionGitFiles(sessionId.value);
+    sessionFiles.value = r.files;
+    const abs = (p: string) => (p.startsWith("/") || p.includes(":\\") ? p : `${cwd.value}/${p}`);
+    const touched = new Set(r.files.map(abs));
+    const mine = files.value.filter((f) => touched.has(abs(f.path)));
+    checked.value = new Set(mine.map((f) => f.path));
+    notify(mine.length ? `${mine.length} session file(s) still changed — checked` : "the session touched nothing that is still changed");
+  } catch (e) {
+    notify(`session files failed: ${(e as Error).message.slice(0, 120)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
+async function loadCommitFiles(hash: string) {
+  if (expanded.value.has(hash)) {
+    expanded.value.delete(hash);
+    expanded.value = new Map(expanded.value);
+    return;
+  }
+  if (!devId.value || !cwd.value) return;
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "show-files", { target: hash });
+    expanded.value = new Map(expanded.value).set(hash, r.changed ?? []);
+  } catch (e) {
+    notify(`commit files failed: ${(e as Error).message.slice(0, 120)}`);
+  }
+}
+
+async function saveCheckpoint() {
+  if (!devId.value || !cwd.value) return;
+  const name = `cp-${new Date().toISOString().slice(0, 16).replace(/[-:T]/g, "")}`;
+  busy.value = "checkpoint";
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "checkpoint", { name });
+    notify(r.text);
+    cpsOpen.value = true;
+    await loadCheckpoints();
+  } catch (e) {
+    notify(`checkpoint failed: ${(e as Error).message.slice(0, 120)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
+async function loadCheckpoints() {
+  if (!devId.value || !cwd.value) return;
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "checkpoints");
+    checkpoints.value = r.checkpoints ?? [];
+  } catch {
+    checkpoints.value = [];
+  }
+}
+
+async function rewind(name: string) {
+  if (!devId.value || !cwd.value) return;
+  if (!confirm(`Rewind this worktree to checkpoint "${name}"? reset --hard — ALL uncommitted changes here are LOST.`)) return;
+  busy.value = "rewind";
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "rewind", { name });
+    notify(r.text);
+    await refresh();
+    void loadLog(true);
+  } catch (e) {
+    notify(`rewind failed: ${(e as Error).message.slice(0, 120)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+watch(cpsOpen, (open) => {
+  if (open) void loadCheckpoints();
+});
+
 async function addWorktree(branch: string) {
   wtMenu.value = false;
   if (!devId.value || !cwd.value || !status.value?.root) return;
@@ -147,10 +506,7 @@ async function addWorktree(branch: string) {
   const target = `${parent}/${base}-${branch.replace(/[/\\]+/g, "-")}`;
   busy.value = "wt";
   try {
-    const r = await deviceClient(devId.value).gitOp(cwd.value, "worktree-add", {
-      branch: branch, // existing branch checks out; new name creates it
-      target,
-    });
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "worktree-add", { branch, target });
     notify(r.text.split("\n")[0] ?? `worktree ${target}`);
     newBranch.value = "";
     await refresh();
@@ -161,14 +517,12 @@ async function addWorktree(branch: string) {
   }
 }
 
-/** A worktree is a working copy — one click and it is a SESSION (herd flow). */
 async function sessionOn(path: string, branch: string | null) {
   if (!devId.value) return;
   busy.value = "session";
   try {
     const info = network.devices.value.find((d) => d.id === devId.value)?.info;
-    const model =
-      (info?.models ?? []).find((m) => m.id === info?.defaultModel) ?? (info?.models ?? [])[0];
+    const model = (info?.models ?? []).find((m) => m.id === info?.defaultModel) ?? (info?.models ?? [])[0];
     if (!model) return notify(`no model available on ${devId.value} — cannot create a session`);
     const s = await deviceClient(devId.value).createSession({
       name: branch ?? path.slice(path.lastIndexOf("/") + 1),
@@ -184,10 +538,38 @@ async function sessionOn(path: string, branch: string | null) {
   }
 }
 
+/** orca worktree palette: jump to whatever session already lives there. */
+async function goToWorktree(path: string) {
+  if (!devId.value) return;
+  busy.value = "go";
+  try {
+    const sessions = await deviceClient(devId.value).sessions();
+    const found = sessions.find((s) => s.cwd === path);
+    if (found) {
+      select({ deviceId: devId.value, sessionId: found.id, agentId: 1 });
+      notify(`switched to session "${found.name}"`);
+    } else {
+      await sessionOn(path, null);
+    }
+  } catch (e) {
+    notify(`switch failed: ${(e as Error).message.slice(0, 120)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
 async function removeWorktree(path: string) {
   if (!devId.value || !cwd.value) return;
-  if (!confirm(`Remove worktree ${path}?`)) return;
   busy.value = "wt";
+  let warn = "Uncommitted changes in it will be LOST.";
+  try {
+    // orca wording, earned honestly: only say "lost" when there ARE changes.
+    const batch = await deviceClient(devId.value).gitStatusBatch([path], { timeoutMs: 60_000 });
+    const s = batch[path];
+    if ((s?.staged ?? 0) + (s?.unstaged ?? 0) + (s?.untracked ?? 0) > 0) warn = `It CONTAINS uncommitted changes — they will be LOST.`;
+    else warn = "Its checkout is clean.";
+  } catch {}
+  if (!confirm(`Remove worktree ${path}? ${warn}`)) return;
   try {
     await deviceClient(devId.value).gitOp(cwd.value, "worktree-remove", { target: path });
     await refresh();
@@ -197,117 +579,318 @@ async function removeWorktree(path: string) {
     busy.value = "";
   }
 }
+
+type Commit = { hash: string; refs: string; author: string; date: string; subject: string; parents: string[] };
+const commits = ref<Commit[]>([]);
+const logLoading = ref(false);
+const logError = ref("");
+let logAt = 0;
+async function loadLog(force = false) {
+  if (!devId.value || !cwd.value) return;
+  if (!force && commits.value.length && Date.now() - logAt < 120_000) return;
+  logLoading.value = true;
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "log-list");
+    commits.value = r.commits ?? [];
+    logError.value = "";
+    logAt = Date.now();
+  } catch (e) {
+    // "no commits" lied when the fetch failed (checklist Wave 1a) — say it.
+    logError.value = (e as Error).message.slice(0, 120);
+  } finally {
+    logLoading.value = false;
+  }
+}
+if (!import.meta.env.SSR) void loadLog();
+watch([devId, cwd], () => {
+  commits.value = [];
+  logAt = 0;
+  void loadLog();
+});
 const worktrees = computed(() => (status.value?.worktrees ?? []).filter((w) => w.path));
+
+/** zcode's portable lane layout: newest first, first parent keeps the lane. */
+const LANE_COLORS = ["#4f8cc9", "#b8860b", "#7aa25c", "#a061ba", "#c96f6f", "#5fa8a0"];
+const lanes = computed(() => {
+  const laneOf = new Map<string, number>();
+  const rows: { lane: number; parents: number[]; width: number }[] = [];
+  const alive: (string | null)[] = [];
+  for (const c of commits.value) {
+    let lane = laneOf.get(c.hash);
+    if (lane === undefined) {
+      lane = alive.indexOf(null);
+      if (lane === -1) {
+        alive.push(null);
+        lane = alive.length - 1;
+      }
+      laneOf.set(c.hash, lane);
+    }
+    alive[lane] = null;
+    const parentLanes: number[] = [];
+    c.parents.forEach((p, i) => {
+      let pl = laneOf.get(p);
+      if (pl === undefined || alive[pl] === p) {
+        pl = alive.indexOf(null);
+        if (pl === -1) {
+          alive.push(null);
+          pl = alive.length - 1;
+        }
+        laneOf.set(p, pl);
+      }
+      alive[pl] = p;
+      if (i === 0) alive[lane!] = p;
+      parentLanes.push(pl);
+    });
+    rows.push({ lane, parents: parentLanes, width: Math.max(1, alive.length) });
+  }
+  return rows;
+});
+const laneX = (lane: number) => lane * 12 + 7;
 </script>
 
 <template>
-  <div class="git-tab">
-    <p v-if="!cwd" class="empty">No session selected — open a session to see its git.</p>
+  <div class="git-pane">
+    <p v-if="!cwd" class="hint">No session selected — open a session to see its git.</p>
     <template v-else>
-      <header class="git-head">
-        <strong>git</strong>
-        <code class="cwd" :title="cwd">{{ cwd }}</code>
-        <button :disabled="!!busy || loading || refreshing" title="refresh" @click="refresh()"><RefreshCw :size="14" /></button>
-      </header>
-
-      <p v-if="loading" class="empty">loading git…</p>
-      <p v-else-if="refreshing" class="muted note">refreshing…</p>
-      <p v-if="error" class="error">{{ error }} <button :disabled="!!busy" @click="refresh()">retry</button></p>
+      <p v-if="loading" class="hint">loading git…</p>
+      <p v-else-if="refreshing" class="muted-line">refreshing…</p>
+      <p v-if="error" class="message-error">{{ error }} <button @click="refresh()">retry</button></p>
 
       <div v-if="status" :class="{ stale: !!error || !!refreshing }">
-        <p v-if="!status.repo" class="empty">Not a git repository — run <code>git init</code> (or open a session inside a repo).</p>
+        <p v-if="!status.repo" class="hint">Not a git repository — run <code>git init</code> (or open a session inside a repo).</p>
 
         <template v-else>
-          <!-- branch bar: PICK, never type -->
-          <div class="branch-bar">
-            <button class="branch-btn" :disabled="!!busy" @click="branchMenu = !branchMenu">
-              <strong>{{ status.branch ?? "detached" }}</strong>
-              <span v-if="status.upstream" class="muted">→ {{ status.upstream }}</span>
-              <span v-if="status.ahead || status.behind" class="muted">↑{{ status.ahead ?? 0 }} ↓{{ status.behind ?? 0 }}</span>
-              <ChevronDown :size="14" />
-            </button>
-            <span class="muted">+{{ status.staged ?? 0 }} ~{{ status.unstaged ?? 0 }} ?{{ status.untracked ?? 0 }} · {{ status.head }}</span>
-            <div v-if="branchMenu" class="menu">
-              <button v-for="b in status.branches ?? []" :key="b.name" :class="{ cur: b.current }" @click="switchBranch(b.name)">
-                <span>{{ b.name }}</span>
-                <span class="muted">{{ b.current ? "● current" : b.upstream ? `→ ${b.upstream}` : "" }}</span>
+          <!-- conflict banner: the one state that blocks everything else -->
+          <p v-if="status.merge" class="message-error merge-banner">
+            merge in progress — {{ status.conflicts ?? conflictFiles.length }} unmerged path(s). Resolve them in the lists above, or
+            <button class="small" :disabled="!!busy" @click="gitAbort()">abort merge</button>
+          </p>
+
+          <!-- branch popup + sync, the IDE way -->
+          <div class="panel-heading git-top">
+            <div class="branch-wrap">
+              <button class="branch-btn" :disabled="!!busy" @click="branchMenu = !branchMenu">
+                <GitBranch :size="16" /><strong>{{ status.branch ?? "detached" }}</strong>
+                <ChevronDown :size="14" />
               </button>
-              <p v-if="!(status.branches ?? []).length" class="muted pad">no local branches</p>
+              <div v-if="branchMenu" class="menu">
+                <button v-for="b in status.branches ?? []" :key="b.name" :class="{ cur: b.current }" @click="switchBranch(b.name)">
+                  <GitBranch :size="13" /><span>{{ b.name }}</span>
+                  <span class="muted-line">{{ b.current ? "current" : b.upstream ? `→ ${b.upstream}` : "" }}</span>
+                  <span class="grow" />
+                  <GitCompare v-if="!b.current" :size="13" title="compare with this base" @click.stop="compareWith(b.name)" />
+                </button>
+                <div class="new-branch">
+                  <input v-model="newBranch" placeholder="new branch…" @keyup.enter="newBranch.trim() && switchBranch(newBranch.trim(), true)" />
+                  <button :disabled="!newBranch.trim()" @click="switchBranch(newBranch.trim(), true)"><Plus :size="13" /></button>
+                </div>
+                <label class="auto-stash"><input type="checkbox" v-model="autoStash" /> auto-stash on switch</label>
+              </div>
             </div>
+            <span class="tag">{{ status.upstream ?? "no upstream" }}</span>
+            <span v-if="status.ahead" class="tag">↑{{ status.ahead }}</span>
+            <span v-if="status.behind" class="tag">↓{{ status.behind }}</span>
+            <span v-if="base" class="tag" title="vs the picked base">
+              vs {{ base.ref }}: ↑{{ base.ahead }} ↓{{ base.behind }}
+              <button class="tag-x" @click="base = null"><X :size="11" /></button>
+            </span>
+            <span class="tag">+{{ status.staged ?? 0 }} ~{{ status.unstaged ?? 0 }} ?{{ status.untracked ?? 0 }}</span>
+            <a v-if="remoteWeb" class="icon-button" :href="`${remoteWeb}/tree/${status.branch ?? ''}`" target="_blank" rel="noopener" title="open on the remote"><ArrowUpFromLine :size="15" style="transform: rotate(45deg)" /></a>
+            <button class="icon-button" :disabled="!!busy || loading || refreshing" title="refresh" @click="refresh()"><RefreshCw :size="16" /></button>
           </div>
 
           <div class="row ops">
-            <button :disabled="!!busy" @click="op('fetch')">fetch</button>
-            <button :disabled="!!busy" @click="op('pull')">pull</button>
-            <button :disabled="!!busy" @click="op('branch')">branches</button>
-            <button :disabled="!!busy" @click="op('diff')">diff</button>
+            <button class="small" :disabled="!!busy" @click="op('fetch')"><ArrowDownToLine :size="14" />fetch</button>
+            <button class="small" :disabled="!!busy" @click="op('pull')"><ArrowDownToLine :size="14" />pull</button>
+            <button class="small primary" :disabled="!!busy" title="push" @click="op('push')"><ArrowUpFromLine :size="14" />push</button>
+            <button class="small" :disabled="!!busy" title="stash changes" @click="op('stash-push', { message: commitMsg.trim() || undefined })"><SquareStack :size="14" />stash</button>
+            <button class="small" :disabled="!!busy" title="pop the newest stash" @click="op('stash-pop')"><PackageOpen :size="14" />unstash</button>
           </div>
+          <p v-if="pushHint" class="message-error hintbox">
+            {{ pushHint }}
+            <button v-if="pushHint.includes('upstream')" class="small primary" :disabled="!!busy" @click="op('push', { setUpstream: true, ref: status.branch })">push -u origin {{ status.branch }}</button>
+            <button v-else-if="pushHint.includes('remote has work')" class="small primary" :disabled="!!busy" @click="op('pull')">pull now</button>
+          </p>
+          <p v-if="pullHint" class="message-error hintbox">
+            fast-forward is not possible — branches diverged.
+            <button class="small primary" :disabled="!!busy" @click="op('pull', { rebase: true })">pull --rebase</button>
+          </p>
 
-          <!-- COMMIT: always present — IntelliJ's Ctrl+K opens on a clean tree too -->
-          <section class="commit">
-            <div class="sec-head"><strong>Commit</strong><span class="muted">{{ files.length ? `${checked.size}/${files.length} files` : "no changes" }}</span></div>
-            <div v-if="files.length" class="files">
+          <!-- COMMIT — always present, changelist semantics -->
+          <section class="task-section" aria-label="Commit">
+            <div class="panel-heading">
+              <h4>Commit</h4>
+              <span class="tag">{{ files.length ? `${checked.size}/${files.length} files` : "no changes" }}</span>
+              <span class="grow" />
+              <button v-if="sessionId" class="small" :disabled="!!busy" title="check the files this session's agent touched" @click="selectSessionFiles">
+                <Flag :size="13" /> session files{{ sessionCount ? ` (${sessionCount.changed}/${sessionCount.total})` : "" }}
+              </button>
+            </div>
+            <p v-if="noIdentity" class="hintbox warn">git user.name/user.email is not set on the device — <code>dpi device config</code> or <code>git config --global</code> before committing.</p>
+            <p v-if="atCap" class="muted-line cap">showing the first 500 changed files — commit in smaller batches</p>
+            <div v-if="stagedFiles.length" class="files">
               <label class="file all">
-                <input type="checkbox" :checked="someChecked" @change="toggleAll" />
-                <span class="muted">select all / none</span>
+                <input type="checkbox" :checked="stagedFiles.every((f) => checked.has(f.path))" @change="toggleGroup(stagedFiles)" />
+                <span class="muted-line">Staged · {{ stagedFiles.length }}</span>
+                <span class="grow" />
+                <button class="icon-button" title="stage every changed file" @click="fileAction('stage')"><Plus :size="13" /> all</button>
+                <button class="icon-button" title="unstage all (git reset HEAD)" @click="unstageFiles(stagedFiles.map((f) => f.path))"><Minus :size="13" /> none</button>
               </label>
-              <label v-for="f in files" :key="f.path" class="file">
-                <input type="checkbox" :checked="checked.has(f.path)" @change="toggle(f.path)" />
-                <code class="xy">{{ f.x }}{{ f.y }}</code>
-                <span class="path" :title="f.path">{{ f.path }}</span>
+              <template v-for="g in grouped(stagedFiles)" :key="g.dir">
+                <button v-if="g.dir !== '.'" class="dir-row" @click="collapse(g.dir)">
+                  <ChevronRight :size="12" :class="{ open: g.open }" />{{ g.dir }}<span class="muted-line">· {{ g.files.length }}</span>
+                </button>
+                <div v-for="f in g.files" v-show="g.open" :key="f.path" class="file">
+                  <label class="file-label">
+                    <input type="checkbox" :checked="checked.has(f.path)" @change="toggle(f.path)" />
+                    <code class="xy" :title="`index ${f.x} · worktree ${f.y}`">{{ f.x }}{{ f.y }}</code>
+                    <span class="path" :title="f.path">{{ f.path }}</span>
+                    <span v-if="numChip(f)" class="nums" :class="{ bin: numChip(f) === 'bin' }">{{ numChip(f) }}</span>
+                  </label>
+                  <span class="file-acts">
+                    <button class="icon-button" title="view diff" @click="showDiff(f.path)"><Eye :size="13" /></button>
+                    <button class="icon-button" title="unstage (git reset HEAD)" @click="unstageFiles([f.path])"><Minus :size="13" /></button>
+                    <button class="icon-button" title="roll back to HEAD" @click="fileAction('discard', f.path)"><CornerUpLeft :size="13" /></button>
+                  </span>
+                </div>
+              </template>
+            </div>
+            <div v-if="unstagedFiles.length" class="files">
+              <label class="file all">
+                <input type="checkbox" :checked="unstagedFiles.every((f) => checked.has(f.path))" @change="toggleGroup(unstagedFiles)" />
+                <span class="muted-line">Unstaged · {{ unstagedFiles.length }}</span>
               </label>
+              <template v-for="g in grouped(unstagedFiles)" :key="g.dir">
+                <button v-if="g.dir !== '.'" class="dir-row" @click="collapse(g.dir)">
+                  <ChevronRight :size="12" :class="{ open: g.open }" />{{ g.dir }}<span class="muted-line">· {{ g.files.length }}</span>
+                </button>
+                <div v-for="f in g.files" v-show="g.open" :key="f.path" class="file">
+                  <label class="file-label">
+                    <input type="checkbox" :checked="checked.has(f.path)" @change="toggle(f.path)" />
+                    <code class="xy" :title="`index ${f.x} · worktree ${f.y}`">{{ f.x }}{{ f.y }}</code>
+                    <span class="path" :title="f.path">{{ f.path }}</span>
+                    <span v-if="numChip(f)" class="nums" :class="{ bin: numChip(f) === 'bin' }">{{ numChip(f) }}</span>
+                  </label>
+                  <span class="file-acts">
+                    <button class="icon-button" title="view diff" @click="showDiff(f.path)"><Eye :size="13" /></button>
+                    <button v-if="f.x === '?'" class="icon-button" title="add to .gitignore" @click="ignorePaths([f.path])"><Ban :size="13" /></button>
+                    <button v-else class="icon-button" title="stage (git add)" @click="fileAction('stage', f.path)"><Plus :size="13" /></button>
+                    <button v-if="f.x !== '?'" class="icon-button" title="roll back to HEAD" @click="fileAction('discard', f.path)"><CornerUpLeft :size="13" /></button>
+                    <button class="icon-button" title="copy path" @click="copyPath(f.path)"><Copy :size="13" /></button>
+                  </span>
+                </div>
+              </template>
+            </div>
+            <p v-if="fileDiff" class="file-diff">
+              <strong>{{ fileDiff.path }}</strong>
+              <span class="mode-chips">
+                <button :class="{ on: diffMode === 'working' }" @click="diffMode = 'working'; reDiff()">working</button>
+                <button :class="{ on: diffMode === 'staged' }" @click="diffMode = 'staged'; reDiff()">staged</button>
+              </span>
+              <span v-if="diffIsBinary" class="nums bin">binary file</span>
+              <span v-else-if="fileDiff.text.length > 8000" class="nums">truncated at 8000 chars</span>
+              <button class="icon-button" title="close diff" @click="fileDiff = null"><X :size="13" /></button>
+              <pre v-if="!diffIsBinary">{{ fileDiff.text.slice(0, 8000) }}</pre>
+            </p>
+            <textarea
+              v-model="commitMsg"
+              rows="4"
+              placeholder="Commit message…  (Ctrl+Enter to commit)"
+              @keydown.enter.exact.prevent="commit()"
+              @keydown.meta.enter.prevent="commit()"
+              @keydown.ctrl.enter.prevent="commit()"
+            />
+            <div class="row">
+              <button class="small" :disabled="!!busy || !checked.size" title="ask the device's model for a message" @click="aiMessage"><Sparkles :size="14" /> ai message</button>
+              <span class="grow" />
+              <button class="primary small" :disabled="!!busy || !commitMsg.trim() || !someChecked" @click="commit(false)">
+                <Check :size="14" /> Commit{{ checked.size ? ` ${checked.size} file${checked.size > 1 ? "s" : ""}` : "" }}
+              </button>
+              <button v-if="status.upstream" class="primary small" :disabled="!!busy || !commitMsg.trim() || !someChecked" title="commit, then push" @click="commit(true)">
+                <Check :size="14" /> Commit &amp; push
+              </button>
             </div>
-            <textarea v-model="commitMsg" rows="4" placeholder="Commit message…" />
-            <button class="primary" :disabled="!!busy || !commitMsg.trim() || !someChecked" @click="commit">
-              Commit{{ checked.size ? ` ${checked.size} file${checked.size > 1 ? "s" : ""}` : "" }}
-            </button>
           </section>
 
-          <!-- LOG: the IDE centerpiece — hash, refs, author, date, subject -->
-          <section class="logsec">
-            <div class="sec-head">
-              <strong>Log</strong>
-              <button :disabled="logLoading" title="refresh log" @click="loadLog(true)">↻</button>
+          <!-- LOG: swimlane graph + expandable commits + checkpoints -->
+          <section class="task-section" aria-label="Log">
+            <div class="panel-heading">
+              <h4><History :size="16" /> Log</h4>
+              <span class="grow" />
+              <button class="small" :disabled="!!busy" title="save a checkpoint ref of HEAD" @click="saveCheckpoint"><Flag :size="13" /> checkpoint</button>
+              <button class="small" :disabled="!!busy" @click="cpsOpen = !cpsOpen">checkpoints {{ checkpoints.length ? `(${checkpoints.length})` : "" }}</button>
+              <button class="icon-button" :disabled="logLoading" title="refresh log" @click="loadLog(true)"><RefreshCw :size="14" /></button>
             </div>
-            <p v-if="logLoading && !commits.length" class="muted">loading log…</p>
-            <div v-else-if="commits.length" class="commits">
-              <div v-for="c in commits" :key="c.hash" class="commit-row">
-                <code class="hash">{{ c.hash }}</code>
-                <span v-if="c.refs" class="refs" :title="c.refs">{{ c.refs.split(",")[0] }}</span>
-                <span class="subject">{{ c.subject }}</span>
-                <span class="muted who">{{ c.author }} · {{ c.date }}</span>
+            <div v-if="cpsOpen" class="cps">
+              <p v-if="!checkpoints.length" class="hint">no checkpoints yet — one click saves a named ref of HEAD.</p>
+              <div v-for="cp in checkpoints" :key="cp.name" class="cp-row">
+                <code>{{ cp.name }}</code>
+                <span class="muted-line">{{ cp.hash }} · {{ cp.date }}</span>
+                <span class="cp-subj">{{ cp.subject }}</span>
+                <span class="grow" />
+                <button class="small" :disabled="!!busy" title="reset --hard to this checkpoint (this worktree)" @click="rewind(cp.name)"><Undo2 :size="13" /> rewind</button>
               </div>
             </div>
-            <p v-else class="muted">no commits</p>
+            <p v-if="logLoading && !commits.length" class="hint">loading log…</p>
+            <div v-else-if="commits.length" class="commits">
+              <template v-for="(c, i) in commits" :key="c.hash">
+                <div class="commit-row" :title="c.refs">
+                  <svg v-if="lanes[i]" class="lane" :width="lanes[i].width * 12 + 4" height="24" aria-hidden="true">
+                    <line v-for="l in lanes[i].width" :key="l" :x1="laneX(l - 1)" :x2="laneX(l - 1)" y1="0" y2="24" :stroke="'#3a3134'" stroke-width="2" />
+                    <line v-for="(pl, j) in lanes[i].parents" :key="'p' + j" :x1="laneX(lanes[i].lane)" :x2="laneX(pl)" y1="12" y2="24" :stroke="LANE_COLORS[pl % LANE_COLORS.length]" stroke-width="2" />
+                    <circle :cx="laneX(lanes[i].lane)" cy="12" r="4" :fill="LANE_COLORS[lanes[i].lane % LANE_COLORS.length]" />
+                  </svg>
+                  <button class="icon-button hash-btn" title="files in this commit" @click="loadCommitFiles(c.hash)"><ChevronRight :size="12" :class="{ open: expanded.has(c.hash) }" /></button>
+                  <code class="hash">
+                    <a v-if="remoteWeb" :href="`${remoteWeb}/commit/${c.hash}`" target="_blank" rel="noopener" title="on the remote">{{ c.hash }}</a>
+                    <template v-else>{{ c.hash }}</template>
+                  </code>
+                  <span v-if="c.refs" class="refs">{{ c.refs.split(",")[0] }}</span>
+                  <span class="subject">{{ c.subject }}</span>
+                  <span class="muted-line who">{{ c.author }} · {{ c.date }}</span>
+                </div>
+                <div v-if="expanded.has(c.hash)" class="commit-files">
+                  <div v-for="f in expanded.get(c.hash)" :key="f.path" class="cf">
+                    <code class="cf-status" :data-s="f.status">{{ f.status }}</code>
+                    <span class="path">{{ f.path }}</span>
+                  </div>
+                  <p v-if="!expanded.get(c.hash)?.length" class="hint">no files (merge/empty commit)</p>
+                </div>
+              </template>
+            </div>
+            <p v-else-if="logError" class="message-error">log failed: {{ logError }}</p>
+            <p v-else class="hint">no commits</p>
           </section>
 
-          <!-- worktrees: local + linked, one click to a session -->
-          <section class="wts">
-            <div class="wt-head">
-              <strong>Worktrees</strong>
-              <button :disabled="!!busy" @click="wtMenu = !wtMenu">+ worktree</button>
-              <div v-if="wtMenu" class="menu">
-                <button v-for="b in (status.branches ?? []).filter((x) => !x.current)" :key="b.name" @click="addWorktree(b.name)">
-                  <span>{{ b.name }}</span>
-                  <span class="muted">existing branch</span>
-                </button>
-                <div class="new-branch">
-                  <input v-model="newBranch" placeholder="or a NEW branch name…" @keyup.enter="addWorktree(newBranch.trim() || 'wt')" />
-                  <button :disabled="!newBranch.trim()" @click="addWorktree(newBranch.trim())">create</button>
+          <!-- WORKTREES -->
+          <section class="task-section" aria-label="Worktrees">
+            <div class="panel-heading">
+              <h4><PackageOpen :size="16" /> Worktrees</h4>
+              <div class="branch-wrap">
+                <button class="small" :disabled="!!busy" @click="wtMenu = !wtMenu"><Plus :size="13" /> worktree</button>
+                <div v-if="wtMenu" class="menu">
+                  <button v-for="b in (status.branches ?? []).filter((x) => !x.current)" :key="b.name" @click="addWorktree(b.name)">
+                    <GitBranch :size="13" /><span>{{ b.name }}</span><span class="muted-line">existing</span>
+                  </button>
+                  <div class="new-branch">
+                    <input v-model="newBranch" placeholder="or a NEW branch…" @keyup.enter="newBranch.trim() && addWorktree(newBranch.trim())" />
+                    <button :disabled="!newBranch.trim()" @click="addWorktree(newBranch.trim())">create</button>
+                  </div>
                 </div>
               </div>
             </div>
             <div v-for="w in worktrees" :key="w.path" class="wt" :class="{ main: w.path === status.root }">
               <code :title="w.path">{{ w.path }}</code>
-              <span class="muted">{{ w.branch ?? w.head }}</span>
+              <span class="muted-line">{{ w.branch ?? w.head }}</span>
               <span class="grow" />
-              <button :disabled="!!busy" title="create a session on this worktree" @click="sessionOn(w.path, w.branch)">session</button>
-              <button v-if="w.path !== status.root" :disabled="!!busy" @click="removeWorktree(w.path)"><X :size="12" /></button>
-              <Check v-if="w.path === status.root" :size="12" class="muted" />
+              <button class="icon-button" :disabled="!!busy" title="jump to this worktree (session or new)" @click="goToWorktree(w.path)"><ArrowRight :size="13" /></button>
+              <button class="small" :disabled="!!busy" title="create a session on this worktree" @click="sessionOn(w.path, w.branch)">session</button>
+              <button v-if="w.path !== status.root" class="icon-button" :disabled="!!busy" @click="removeWorktree(w.path)"><X :size="13" /></button>
+              <Check v-if="w.path === status.root" :size="13" class="muted-line" />
             </div>
           </section>
 
-          <pre v-if="out" class="out">{{ out.slice(0, 6000) }}</pre>
+          <pre v-if="out" class="op-out">{{ out.slice(0, 6000) }}</pre>
         </template>
       </div>
     </template>
@@ -315,49 +898,65 @@ const worktrees = computed(() => (status.value?.worktrees ?? []).filter((w) => w
 </template>
 
 <style scoped>
-.git-tab { display: grid; gap: 10px; font-size: 12px; padding: 8px 4px; }
-.git-head { display: flex; align-items: center; gap: 8px; }
-.git-head .cwd { font-size: 11px; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.branch-bar { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.branch-btn { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; font-size: 12px; }
+.git-pane { display: grid; gap: 4px; }
+.git-top { gap: 8px; flex-wrap: wrap; }
+.branch-wrap { position: relative; }
+.branch-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; }
+.branch-btn strong { font-size: 16px; }
 .menu {
-  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 260px; max-height: 260px; overflow: auto;
-  background: var(--bg-2, #1c1c22); border: 1px solid var(--border, #333); border-radius: 8px; padding: 4px;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
+  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 300px; max-height: 280px; overflow: auto;
+  background: var(--bg-2, #221a1c); border: 1px solid var(--line); border-radius: 8px; padding: 4px;
+  box-shadow: 0 10px 30px rgb(0 0 0 / 50%);
 }
-.menu button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 5px 8px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
-.menu button:hover, .menu button.cur { background: rgb(127 127 127 / 15%); }
-.menu .pad { padding: 6px 8px; margin: 0; }
-.row { display: flex; gap: 6px; }
-.ops { flex-wrap: wrap; }
-.sec-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2px; border-bottom: 1px solid var(--border, #2a2a30); }
-.commit { display: grid; gap: 6px; }
-.logsec { display: grid; gap: 6px; }
-.commits { max-height: 320px; overflow: auto; display: grid; gap: 1px; }
-.commit-row { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
-.commit-row .hash { color: var(--ok, #2ea043); font-size: 11px; }
-.commit-row .refs { color: var(--warn, #e5a50a); font-size: 10px; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
-.commit-row .subject { overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
-.commit-row .who { font-size: 10px; }
-.files { max-height: 180px; overflow: auto; border: 1px solid var(--border, #2a2a30); border-radius: 6px; padding: 2px 6px; }
-.file { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
-.file.all { border-bottom: 1px solid var(--border, #2a2a30); }
-.file .path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.xy { opacity: 0.7; font-size: 10px; }
-textarea { width: 100%; resize: vertical; min-height: 64px; font: inherit; }
-button.primary { justify-self: start; }
-.wts { display: grid; gap: 4px; }
-.wt-head { position: relative; display: flex; align-items: center; gap: 8px; }
-.wt { display: flex; gap: 8px; align-items: center; }
-.wt code { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; }
-.wt.main code { font-weight: 600; }
+.menu button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 7px 10px; border-radius: 6px; text-align: left; font-size: 15px; }
+.menu button:hover, .menu button.cur { background: #403536; }
+.menu .new-branch { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
+.menu .new-branch input { flex: 1; min-width: 0; }
+.auto-stash { display: flex; gap: 8px; align-items: center; padding: 8px 10px; font-size: 14px; opacity: 0.85; }
+.muted-line { opacity: 0.65; font-size: 13px; }
+.cap { padding: 4px 0; }
+.row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; align-items: center; }
+.hintbox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 10px; border-radius: 6px; margin: 4px 0; }
+.hintbox.warn { border: 1px solid var(--warn, #e5a50a); color: var(--warn, #e5a50a); }
+.merge-banner { padding: 8px 10px; border-radius: 6px; }
+.files { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
+.file { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0; }
+.file.all { border-bottom: 1px solid var(--line); }
+.file-label { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; cursor: pointer; }
+.file .path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
+.file .xy { opacity: 0.7; font-size: 12px; }
+.nums { font-size: 11px; opacity: 0.8; color: var(--ok, #2ea043); white-space: nowrap; }
+.nums.bin { color: var(--warn, #e5a50a); }
+.dir-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 0; font-size: 13px; opacity: 0.8; }
+.dir-row .open { transform: rotate(90deg); }
+.file-acts { display: flex; gap: 2px; }
+.file-diff { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.file-diff pre { max-height: 260px; overflow: auto; font-size: 12px; margin: 6px 0 0; width: 100%; }
+.mode-chips { display: inline-flex; gap: 2px; }
+.mode-chips button { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); }
+.mode-chips button.on { background: #403536; }
+textarea { width: 100%; resize: vertical; min-height: 76px; font: inherit; margin-top: 8px; }
+.commits { max-height: 340px; overflow: auto; display: grid; gap: 3px; }
+.commit-row { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
+.commit-row .lane { flex-shrink: 0; }
+.commit-row .hash { color: var(--ok, #2ea043); font-size: 13px; }
+.hash-btn svg { transition: transform 0.1s; }
+.hash-btn svg.open { transform: rotate(90deg); }
+.commit-row .refs { color: var(--warn, #e5a50a); font-size: 12px; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
+.commit-row .subject { overflow: hidden; text-overflow: ellipsis; max-width: 40%; font-size: 14px; }
+.commit-row .who { font-size: 12px; }
+.commit-files { padding: 2px 0 6px 34px; border-left: 2px solid var(--line); margin-left: 16px; }
+.cf { display: flex; gap: 10px; font-size: 13px; padding: 1px 0; }
+.cf-status { font-size: 11px; opacity: 0.8; width: 2ch; }
+.cps { border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; margin-bottom: 6px; }
+.cp-row { display: flex; gap: 10px; align-items: center; padding: 2px 0; font-size: 14px; }
+.cp-row code { color: var(--warn, #e5a50a); }
+.cp-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
+.wt { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
+.wt code { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
+.wt.main code { font-weight: 650; }
 .grow { flex: 1; }
-.new-branch { display: flex; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--border, #2a2a30); }
-.new-branch input { flex: 1; min-width: 0; }
-.muted { opacity: 0.65; }
-.note { font-size: 11px; }
-.stale { opacity: 0.55; transition: opacity 0.2s; }
-.out { max-height: 300px; overflow: auto; background: rgb(0 0 0 / 25%); padding: 8px; border-radius: 6px; font-size: 11px; }
-.empty { opacity: 0.75; }
-.error { color: var(--danger, #f85149); }
+.tag-x { margin-left: 4px; opacity: 0.7; display: inline-flex; }
+.op-out { max-height: 300px; overflow: auto; background: rgb(0 0 0 / 25%); padding: 10px; border-radius: 6px; font-size: 12px; margin-top: 8px; }
+h4 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0; }
 </style>