my-durable 0.0.22 → 0.0.24

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

@@ -1,81 +1,100 @@
 <script setup lang="ts">
-// Inspector GIT tab: everything the device knows about the session's folder.
-// Always visible — "not a git repository" is a state, not a reason to hide.
-import { computed, onBeforeUnmount, onMounted, onServerPrefetch, ref, watch } from "vue";
-import { RefreshCw } from "lucide-vue-next";
-import { deviceId, sessionSummary, notify } from "../client/store";
+// 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.
+import { computed, onServerPrefetch, ref, watch } from "vue";
+import { Check, ChevronDown, RefreshCw, 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";
 import type { GitStatus } from "@sdk/client";
 
 const props = defineProps<{ deviceId?: string; cwd?: string }>();
-const status = ref<GitStatus | null>(null);
-const error = ref("");
-const loading = ref(false); // first fetch, nothing to show yet — SAY SO
-const refreshing = ref(false); // refetch with data on screen — dim, keep, never blank
-let inFlight: Promise<void> | undefined;
-const busy = ref("");
-const out = ref("");
-const commitMsg = ref("");
-const wtName = ref("");
 
 const cwd = computed(() => props.cwd ?? sessionSummary.value?.cwd ?? "");
 const devId = computed(() => props.deviceId ?? deviceId.value);
-const dirty = computed(() => (status.value?.staged ?? 0) + (status.value?.unstaged ?? 0) + (status.value?.untracked ?? 0));
-const client = () => (devId.value ? deviceClient(devId.value) : null);
-
-let timer: ReturnType<typeof setInterval> | undefined;
-async function refresh() {
-  const c = client();
-  if (!c || !cwd.value) return;
-  if (inFlight) return inFlight; // interval + session-switch must not pile up
-  const first = !status.value;
-  if (first) loading.value = true;
-  else refreshing.value = true;
-  error.value = ""; // a new attempt must not stack on the old verdict
-  inFlight = (async () => {
-    try {
-      // Big checkouts honestly take 20s+ (measured on the operator's repo):
-      // wait for the truth instead of declaring the device unreachable.
-      status.value = await c.gitStatus(cwd.value, { timeoutMs: 60_000 });
-      error.value = "";
-    } catch (e) {
-      const raw = (e as Error).message ?? "";
-      // Keep the LAST GOOD status — a dropped tunnel must not blank the tab
-      // the operator is reading (reported: "treo rất lâu", "Cannot reach …").
-      error.value = /fetch failed|Cannot reach|Failed to fetch|NetworkError|ERR_NAME/i.test(raw)
-        ? `device unreachable — check that it is online, then retry (${raw.slice(0, 80)})`
-        : raw.slice(0, 160);
-    } finally {
-      loading.value = false;
-      refreshing.value = false;
-      inFlight = undefined;
-    }
-  })();
-  return inFlight;
+const entry = computed(() => gitEntry(devId.value || "?", cwd.value || "?"));
+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 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;
+  }
 }
-// NO top-level await: an async setup outside <Suspense> never mounts in the
-// browser ("async setup invoked without a Suspense boundary") — the tab
-// rendered EMPTY (reported: "TAB git trống"). Fire now on the client;
-// onServerPrefetch is what SSR actually waits for.
-if (!import.meta.env.SSR) void refresh();
-onServerPrefetch(() => refresh());
-onMounted(() => {
-  timer = setInterval(refresh, 30000);
+if (!import.meta.env.SSR) void loadLog();
+watch([devId, cwd], () => {
+  commits.value = [];
+  logAt = 0;
+  void loadLog();
 });
-onBeforeUnmount(() => timer && clearInterval(timer));
-// The operator switching sessions changes cwd — refetch for the new folder.
-watch(cwd, () => void refresh());
+const commitMsg = ref("");
+const checked = ref<Set<string>>(new Set());
+const branchMenu = ref(false);
+const wtMenu = ref(false);
+const newBranch = ref("");
+
+if (!import.meta.env.SSR) void ensureGit(devId.value || "?", cwd.value || "?");
+onServerPrefetch(() => ensureGit(devId.value || "?", cwd.value || "?"));
+watch([devId, cwd], () => {
+  branchMenu.value = false;
+  wtMenu.value = false;
+  void ensureGit(devId.value || "?", cwd.value || "?");
+});
+const refresh = () => {
+  checked.value = new Set();
+  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>();
+  for (const f of list) if (f.x !== "?" && f.y !== "?") next.add(f.path);
+  checked.value = next;
+});
+const someChecked = computed(() => files.value.some((f) => checked.value.has(f.path)));
+const toggle = (p: string) => {
+  const next = new Set(checked.value);
+  if (next.has(p)) next.delete(p);
+  else next.add(p);
+  checked.value = next;
+};
+const toggleAll = () => {
+  checked.value = someChecked.value ? new Set() : new Set(files.value.map((f) => f.path));
+};
 
 async function op(name: "fetch" | "pull" | "log" | "branch" | "diff") {
-  const c = client();
-  if (!c || !cwd.value) return;
+  if (!devId.value || !cwd.value) return;
   busy.value = name;
   out.value = "";
   try {
-    const r = await c.gitOp(cwd.value, name);
+    const r = await deviceClient(devId.value).gitOp(cwd.value, name);
     out.value = r.text || "(empty)";
     if (name === "fetch" || name === "pull") notify(`git ${name} ✓`);
     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)}`;
   } finally {
@@ -83,55 +102,102 @@ async function op(name: "fetch" | "pull" | "log" | "branch" | "diff") {
   }
 }
 
+async function switchBranch(name: string) {
+  branchMenu.value = false;
+  if (!devId.value || !cwd.value || name === status.value?.branch) return;
+  busy.value = "switch";
+  try {
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "switch", { ref: name });
+    notify(r.text || `switched to ${name}`);
+    await refresh();
+  } catch (e) {
+    notify(`switch failed: ${(e as Error).message.slice(0, 140)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
 async function commit() {
-  const c = client();
-  if (!c || !cwd.value || !commitMsg.value.trim()) return;
+  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");
   try {
-    const r = await c.gitOp(cwd.value, "commit", { message: commitMsg.value.trim() });
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "commit", {
+      message: commitMsg.value.trim(),
+      files: chosen,
+    });
     notify(r.text);
     commitMsg.value = "";
     await refresh();
+    void loadLog(true);
   } catch (e) {
-    notify(`commit failed: ${(e as Error).message.slice(0, 120)}`);
+    notify(`commit failed: ${(e as Error).message.slice(0, 140)}`);
   } finally {
     busy.value = "";
   }
 }
 
-async function addWorktree() {
-  const c = client();
-  if (!c || !cwd.value || !wtName.value.trim() || !status.value?.root) return;
+async function addWorktree(branch: string) {
+  wtMenu.value = false;
+  if (!devId.value || !cwd.value || !status.value?.root) return;
   const root = status.value.root;
   const parent = root.slice(0, root.lastIndexOf("/"));
   const base = root.slice(root.lastIndexOf("/") + 1);
+  const target = `${parent}/${base}-${branch.replace(/[/\\]+/g, "-")}`;
   busy.value = "wt";
   try {
-    const r = await c.gitOp(cwd.value, "worktree-add", { branch: wtName.value.trim(), target: `${parent}/${base}-${wtName.value.trim()}` });
-    notify(r.text.split("\n")[0] ?? "worktree added");
-    wtName.value = "";
+    const r = await deviceClient(devId.value).gitOp(cwd.value, "worktree-add", {
+      branch: branch, // existing branch checks out; new name creates it
+      target,
+    });
+    notify(r.text.split("\n")[0] ?? `worktree ${target}`);
+    newBranch.value = "";
     await refresh();
   } catch (e) {
-    notify(`worktree failed: ${(e as Error).message.slice(0, 120)}`);
+    notify(`worktree failed: ${(e as Error).message.slice(0, 140)}`);
+  } finally {
+    busy.value = "";
+  }
+}
+
+/** 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];
+    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),
+      cwd: path,
+      model: { provider: model.provider, modelId: model.id },
+    });
+    select({ deviceId: devId.value, sessionId: s.id, agentId: 1 });
+    notify(`session "${s.name}" on ${path}`);
+  } catch (e) {
+    notify(`session failed: ${(e as Error).message.slice(0, 160)}`);
   } finally {
     busy.value = "";
   }
 }
 
 async function removeWorktree(path: string) {
-  const c = client();
-  if (!c || !cwd.value) return;
+  if (!devId.value || !cwd.value) return;
   if (!confirm(`Remove worktree ${path}?`)) return;
   busy.value = "wt";
   try {
-    await c.gitOp(cwd.value, "worktree-remove", { target: path });
+    await deviceClient(devId.value).gitOp(cwd.value, "worktree-remove", { target: path });
     await refresh();
   } catch (e) {
-    notify(`remove failed: ${(e as Error).message.slice(0, 120)}`);
+    notify(`remove failed: ${(e as Error).message.slice(0, 140)}`);
   } finally {
     busy.value = "";
   }
 }
+const worktrees = computed(() => (status.value?.worktrees ?? []).filter((w) => w.path));
 </script>
 
 <template>
@@ -141,82 +207,157 @@ async function removeWorktree(path: string) {
       <header class="git-head">
         <strong>git</strong>
         <code class="cwd" :title="cwd">{{ cwd }}</code>
-        <button :disabled="!!busy" title="refresh" @click="refresh()"><RefreshCw :size="14" /></button>
+        <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-if="refreshing" class="muted note">refreshing…</p>
-
-      <p v-if="error" class="error">
-        {{ error }}
-        <button :disabled="!!busy || !!loading" @click="refresh()">retry</button>
-      </p>
-
-      <div v-if="status" :class="{ stale: !!error || refreshing }">
-      <p v-if="status && !status.repo" class="empty">
-        Not a git repository — run <code>git init</code> (or open a session inside a repo) to see branch, status and worktrees here.
-      </p>
-
-      <template v-else-if="status">
-        <dl class="facts">
-          <div><dt>branch</dt><dd>{{ status.branch ?? "detached" }}</dd></div>
-          <div v-if="status.upstream"><dt>upstream</dt><dd>{{ status.upstream }}</dd></div>
-          <div><dt>changes</dt><dd>+{{ status.staged ?? 0 }} ~{{ status.unstaged ?? 0 }} ?{{ status.untracked ?? 0 }}</dd></div>
-          <div v-if="status.ahead || status.behind"><dt>sync</dt><dd>↑{{ status.ahead ?? 0 }} ↓{{ status.behind ?? 0 }}</dd></div>
-          <div><dt>head</dt><dd>{{ status.head }} {{ status.subject }}</dd></div>
-          <div v-if="status.worktreeOf" class="wt-of"><dt>worktree of</dt><dd>{{ status.worktreeOf }}</dd></div>
-        </dl>
-
-        <div class="row">
-          <button :disabled="!!busy" @click="op('fetch')">fetch</button>
-          <button :disabled="!!busy" @click="op('pull')">pull</button>
-          <button :disabled="!!busy" @click="op('log')">log</button>
-          <button :disabled="!!busy" @click="op('branch')">branches</button>
-          <button :disabled="!!busy" @click="op('diff')">diff</button>
-        </div>
-
-        <div class="row">
-          <input v-model="commitMsg" placeholder="commit message…" @keyup.enter="commit" />
-          <button :disabled="!!busy || !commitMsg.trim()" @click="commit">commit -am</button>
-        </div>
-
-        <div class="row">
-          <input v-model="wtName" placeholder="branch name…" @keyup.enter="addWorktree" />
-          <button :disabled="!!busy || !wtName.trim()" @click="addWorktree">+ worktree</button>
-        </div>
-        <ul v-if="(status.worktrees?.length ?? 0) > 1" class="wts">
-          <li v-for="w in status.worktrees" :key="w.path">
-            <code>{{ w.path }}</code>
-            <span class="muted">{{ w.branch ?? w.head }}</span>
-            <button v-if="w.path !== status.root" :disabled="!!busy" @click="removeWorktree(w.path)">remove</button>
-          </li>
-        </ul>
-
-        <pre v-if="out" class="out">{{ out.slice(0, 6000) }}</pre>
-      </template>
+      <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>
+
+      <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>
+
+        <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>
+              </button>
+              <p v-if="!(status.branches ?? []).length" class="muted pad">no local branches</p>
+            </div>
+          </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>
+          </div>
+
+          <!-- 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">
+              <label class="file all">
+                <input type="checkbox" :checked="someChecked" @change="toggleAll" />
+                <span class="muted">select all / none</span>
+              </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>
+              </label>
+            </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>
+            </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>
+            </div>
+            <p v-else class="muted">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>
+                </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="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" />
+            </div>
+          </section>
+
+          <pre v-if="out" class="out">{{ out.slice(0, 6000) }}</pre>
+        </template>
       </div>
     </template>
   </div>
 </template>
 
 <style scoped>
-.git-tab { display: grid; gap: 8px; font-size: 12px; padding: 8px 4px; }
+.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; }
-.facts { display: grid; gap: 2px; margin: 0; }
-.facts > div { display: flex; gap: 8px; }
-.facts dt { min-width: 72px; opacity: 0.6; }
-.facts dd { margin: 0; word-break: break-all; }
+.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; }
+.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%);
+}
+.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; }
-.row input { flex: 1; min-width: 0; }
-.wts { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
-.wts li { display: flex; gap: 8px; align-items: center; }
-.wts code { font-size: 11px; }
+.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; }
+.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; }
-.wt-of dd { color: var(--info, #58a6ff); }
-.out { max-height: 300px; overflow: auto; background: rgb(0 0 0 / 25%); padding: 8px; border-radius: 6px; font-size: 11px; }
-.empty { opacity: 0.75; }
 .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); }
 </style>

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

@@ -16,6 +16,7 @@ import {
 import DeviceIcon from "./DeviceIcon.vue";
 import type { TreeNode } from "@sdk/models";
 import { ago } from "../client/store";
+import { branchOf } from "../client/session-git";
 
 const props = defineProps<{
   node: TreeNode;
@@ -60,6 +61,10 @@ const dot = computed(() => {
   const s = device.value?.status;
   return s === "online" ? "on" : s === "checking" ? "chk" : s === "offline" ? "off" : "err";
 });
+const branch = computed(() => {
+  const n = props.node;
+  return n.type === "session" ? branchOf(n.deviceId, n.session.cwd) : undefined;
+});
 const label = computed(
   () => device.value?.name ?? device.value?.id ?? session.value?.name ?? agent.value?.name ?? "",
 );
@@ -137,6 +142,7 @@ const title = computed(() => {
       <FolderOpen class="ico" :size="16" />
       <b class="name">{{ label }}</b>
       <span class="path">…/{{ session.cwd.split("/").filter(Boolean).at(-1) }}</span>
+      <span v-if="branch" class="branch" :title="`git branch of ${session.cwd}`">⎇ {{ branch }}</span>
       <i v-if="busy" class="dot work" title="Working" />
       <span v-if="background" class="bg-count" :title="`${background} background task(s)`"
         ><i class="dot bg" />{{ background }} bg</span

package/apps/dpi-sdk/src/client.ts

@@ -53,10 +53,13 @@ export interface GitStatus {
   subject?: string;
   worktreeOf?: string;
   worktrees?: { path: string; branch: string | null; head: string }[];
+  files?: { path: string; x: string; y: string }[];
+  branches?: { name: string; current?: boolean; upstream?: string }[];
 }
 export type GitOpName =
   | "diff"
   | "log"
+  | "log-list"
   | "fetch"
   | "pull"
   | "switch"
@@ -175,8 +178,20 @@ export class DpiClient {
     return this.request<GitStatus>("GET", `/v1/git/status?path=${enc(path)}`, undefined, options);
   }
   /** One whitelisted git operation; see the device's git.ts for the op list. */
-  gitOp(path: string, op: GitOpName, opts: { ref?: string; branch?: string; message?: string; target?: string } = {}) {
-    return this.request<{ text: string }>("POST", "/v1/git", { path, op, ...opts });
+  gitOp(
+    path: string,
+    op: GitOpName,
+    opts: { ref?: string; branch?: string; message?: string; target?: string; files?: string[] } = {},
+  ) {
+    return this.request<{ text: string; commits?: { hash: string; refs: string; author: string; date: string; subject: string }[] }>(
+      "POST",
+      "/v1/git",
+      { path, op, ...opts },
+    );
+  }
+  /** Many paths, one round-trip — session lists want branch-per-cwd. */
+  gitStatusBatch(paths: string[], options: { timeoutMs?: number } = {}) {
+    return this.request<Record<string, GitStatus>>("POST", "/v1/git/status-batch", { paths }, options);
   }
 
   // ------------------------------------------------------------ sessions

package/apps/dpi-sdk/src/protocol/rest-routes.ts

@@ -15,6 +15,7 @@ const ROUTES: readonly (readonly [method: string, pattern: string])[] = [
   ["GET", "/fs/dirs"],
   ["GET", "/git/status"],
   ["POST", "/git"],
+  ["POST", "/git/status-batch"],
   ["GET", "/docs/:kind"],
 
   ["GET", "/sessions"],

package/apps/dpi-tui/src/app.ts

@@ -172,6 +172,27 @@ export class App {
   private gitOf(cwd: string | undefined): GitStatus | undefined {
     return cwd ? this.gitCache.get(cwd)?.s : undefined;
   }
+
+  /** ⎇ per herd ROW: one batched status for all distinct cwds, 60s TTL. */
+  private branchCache = new Map<string, { at: number; branch?: string }>();
+  private refreshBranches() {
+    const cwds = [...new Set(this.sessions.map((s) => s.cwd))];
+    const stale = cwds.filter((c) => {
+      const hit = this.branchCache.get(c);
+      return !hit || Date.now() - hit.at > 60_000;
+    });
+    if (!stale.length) return;
+    for (const c of stale) this.branchCache.set(c, { at: Date.now() });
+    void this.client
+      .gitStatusBatch(stale)
+      .then((map) => {
+        for (const [c, s] of Object.entries(map))
+          this.branchCache.set(c, { at: Date.now(), branch: s.repo ? (s.branch ?? s.head) : undefined });
+        this.requestRender();
+      })
+      .catch(() => {});
+  }
+  private branchOf = (cwd: string): string | undefined => this.branchCache.get(cwd)?.branch;
   private devicesCache: DeviceRow[] = [];
   private deviceOnline = false;
   private events: { at: string; glyph: string; text: string }[] = [];
@@ -345,6 +366,7 @@ export class App {
     this.cursor = 0;
     this.scrollOffset = 0;
     if (view === "herd") void this.refreshSessions();
+    if (view === "herd") this.refreshBranches();
     if (view === "network") this.devicesCache = this.networkDevices();
     this.requestRender();
   }
@@ -391,7 +413,7 @@ export class App {
     deviceId?: string;
     label: string;
   }> {
-    if (this.view === "herd") return herdRows(this.sessions, this.filter);
+    if (this.view === "herd") return herdRows(this.sessions, this.filter, this.branchOf);
     if (this.view === "network") return networkRows(this.devicesCache, this.device.id, this.filter);
     return [];
   }
@@ -981,10 +1003,11 @@ export class App {
   // ------------------------------------------------------------------ herd
 
   private herdBody(w: number, h: number): string[] {
-    const rows = herdRows(this.sessions, this.filter);
+    const rows = herdRows(this.sessions, this.filter, this.branchOf);
     const wide = w >= 104;
     const panelW = wide ? Math.min(44, Math.max(34, Math.round(w * 0.32))) : 0;
     const tableW = wide ? w - panelW - 1 : w;
+    this.refreshBranches();
     const table = renderHerd(tableW, rows, this.sessions, {
       selectedId: this.selectedId ?? this.sessionId,
       cursor: this.cursor,