my-durable 0.0.21 → 0.0.23

package/apps/dpi-playground/apps/dpi-playground-fe/dist/index.html

@@ -7,8 +7,8 @@
     <meta name="referrer" content="no-referrer" />
     <link rel="icon" type="image/svg+xml" href="/icons/durable-pi.svg" />
     <title>Durable Pi | Network</title>
-    <script type="module" crossorigin src="/assets/index-Cv3w8azJ.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BvDyZN2S.css">
+    <script type="module" crossorigin src="/assets/index-CclVXMo8.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BT2MDDdt.css">
   </head>
   <body>
     <div id="app"></div>

package/apps/dpi-playground/apps/dpi-playground-fe/src/App.vue

@@ -33,6 +33,7 @@ import {
   toggleTree,
   toggleInspector,
 } from "./client/store";
+import { watchSessionGit } from "./client/session-git";
 import { auth } from "./client/auth";
 
 const onlineCount = () => network.devices.value.filter((d) => d.status === "online").length;
@@ -76,6 +77,7 @@ function resize(e: PointerEvent) {
   window.addEventListener("pointerup", up);
 }
 
+onMounted(() => watchSessionGit());
 onMounted(() => {
   document.addEventListener("keydown", keydown);
   void boot();

package/apps/dpi-playground/apps/dpi-playground-fe/src/client/git-store.ts

@@ -0,0 +1,101 @@
+// Git state, shared and LAZY: one entry per device+folder, fetched only when
+// something actually looks at it, kept across tab switches, never re-fetched
+// while fresh. In-flight calls are shared so chip + panel + re-entry of either
+// cost ONE device round-trip.
+import { reactive } from "vue";
+import type { GitStatus } from "@sdk/client";
+import { deviceClient } from "./hub";
+
+export interface GitEntry {
+  at: number; // last settled fetch (0 = never)
+  status: GitStatus | null;
+  error: string;
+  loading: boolean; // first fetch, nothing to show yet
+  refreshing: boolean; // refetch with data on screen
+}
+
+const entries = new Map<string, GitEntry>();
+const inflight = new Map<string, Promise<void>>();
+
+/** Fill MANY folders in one round-trip (session lists want branch-per-cwd).
+ *  Decorative by design: a failed batch stays silent — the Git tab is where
+ *  errors belong. */
+export async function ensureGitBatch(deviceId: string, paths: string[]) {
+  const stale = paths.filter((p) => !fresh(gitEntry(deviceId, p), staleMsForBatch));
+  if (!stale.length) return;
+  try {
+    const map = await deviceClient(deviceId).gitStatusBatch(stale, { timeoutMs: 60_000 });
+    for (const [p, s] of Object.entries(map)) {
+      const e = gitEntry(deviceId, p);
+      e.status = s;
+      e.at = Date.now();
+      e.error = "";
+    }
+  } catch {
+    /* decorative: never surface batch failures */
+  }
+}
+const staleMsForBatch = 60_000;
+
+/** Test hook: the store is module-global on purpose (tab switches must not
+ *  refetch) — tests reset it so entries never leak between cases. */
+export function clearGitCache() {
+  entries.clear();
+  inflight.clear();
+}
+
+const key = (deviceId: string, cwd: string) => `${deviceId}::${cwd}`;
+
+export function gitEntry(deviceId: string, cwd: string): GitEntry {
+  const k = key(deviceId, cwd);
+  let e = entries.get(k);
+  if (!e) {
+    e = reactive({ at: 0, status: null, error: "", loading: false, refreshing: false });
+    entries.set(k, e);
+  }
+  return e;
+}
+
+/** True when the entry is fresh enough to show without touching the device. */
+const fresh = (e: GitEntry, staleMs: number) => e.at > 0 && Date.now() - e.at < staleMs && (e.status !== null || e.error);
+
+/**
+ * Fetch only when nothing usable is cached. `force` bypasses the TTL (the
+ * retry/refresh buttons and post-op refreshes use it).
+ */
+export async function ensureGit(
+  deviceId: string,
+  cwd: string,
+  opts: { staleMs?: number; force?: boolean; timeoutMs?: number } = {},
+): Promise<void> {
+  const { staleMs = 60_000, force = false, timeoutMs = 60_000 } = opts;
+  if (!deviceId || !cwd) return;
+  const k = key(deviceId, cwd);
+  const e = gitEntry(deviceId, cwd);
+  if (!force && fresh(e, staleMs)) return;
+  const running = inflight.get(k);
+  if (running) return running;
+  const first = e.status === null && !e.error;
+  if (first) e.loading = true;
+  else e.refreshing = true;
+  e.error = ""; // a new attempt must not stack on the old verdict
+  const p = (async () => {
+    try {
+      // Big checkouts honestly take 20s+ — wait for the truth.
+      e.status = await deviceClient(deviceId).gitStatus(cwd, { timeoutMs });
+      e.at = Date.now();
+    } catch (err) {
+      const raw = (err as Error).message ?? "";
+      e.error = /fetch failed|Cannot reach|Failed to fetch|NetworkError|abort/i.test(raw)
+        ? `device unreachable — check that it is online, then retry (${raw.slice(0, 80)})`
+        : raw.slice(0, 160);
+      e.at = Date.now(); // a failed attempt is still an attempt: no hammering
+    } finally {
+      e.loading = false;
+      e.refreshing = false;
+      inflight.delete(k);
+    }
+  })();
+  inflight.set(k, p);
+  return p;
+}

package/apps/dpi-playground/apps/dpi-playground-fe/src/client/session-git.ts

@@ -0,0 +1,28 @@
+// Branch-per-session in the tree: watches the network feed and batch-fetches
+// git status for every ONLINE device's distinct session folders — at most one
+// call per device per minute (the shared store dedupes everything else).
+import { watch } from "vue";
+import { network } from "./store";
+import { ensureGitBatch, gitEntry } from "./git-store";
+
+const lastBatch = new Map<string, number>();
+
+/** Install once from App setup (client only). */
+export function watchSessionGit() {
+  watch(
+    () => network.devices.value.map((d) => `${d.id}:${d.status}:${d.tree?.sessions.length ?? 0}:${d.tree?.sessions.map((s) => s.cwd).join("|")}`).join(";"),
+    () => {
+      for (const d of network.devices.value) {
+        if (d.status !== "online" || !d.tree?.sessions.length) continue;
+        const now = Date.now();
+        if (now - (lastBatch.get(d.id) ?? 0) < 60_000) continue;
+        lastBatch.set(d.id, now);
+        void ensureGitBatch(d.id, d.tree.sessions.map((s) => s.cwd));
+      }
+    },
+    { immediate: true },
+  );
+}
+
+/** ⎇ branch for a session row, when we already know it (never triggers I/O). */
+export const branchOf = (deviceId: string, cwd: string) => gitEntry(deviceId, cwd).status?.branch;

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

@@ -1,161 +1,40 @@
 <script setup lang="ts">
-// Git chip for the session breadcrumb: branch + dirty at a glance, click for
-// the real panel — status, worktrees, fetch/pull/log/commit, new worktree.
-// Everything goes through the device's whitelisted /v1/git API.
-import { computed, onBeforeUnmount, onMounted, onServerPrefetch, ref, watch } from "vue";
-import { ChevronDown, GitBranch, RefreshCw } from "lucide-vue-next";
-import { deviceId, sessionSummary, notify } from "../client/store";
-import { deviceClient } from "../client/hub";
-import type { GitStatus } from "@sdk/client";
+// Git chip for the session breadcrumb: branch + dirty at a glance. Rides the
+// same LAZY shared store as the Git tab — one fetch per folder while fresh,
+// no polling, survives every tab/overlay switch. Click opens the Git tab.
+import { computed, onServerPrefetch, watch } from "vue";
+import { ChevronDown, GitBranch } from "lucide-vue-next";
+import { deviceId, sessionSummary, showInspector } from "../client/store";
+import { ensureGit, gitEntry } from "../client/git-store";
 
 const props = defineProps<{ deviceId?: string; cwd?: string }>();
-const status = ref<GitStatus | null>(null);
-const open = ref(false);
-const busy = ref("");
-const logText = ref("");
-const commitMsg = ref("");
-const wtName = ref("");
 
 const cwd = computed(() => props.cwd ?? sessionSummary.value?.cwd ?? "");
 const devId = computed(() => props.deviceId ?? deviceId.value);
+const entry = computed(() => gitEntry(devId.value || "?", cwd.value || "?"));
+const status = computed(() => entry.value.status);
+const loading = computed(() => entry.value.loading);
 const dirty = computed(() => (status.value?.staged ?? 0) + (status.value?.unstaged ?? 0) + (status.value?.untracked ?? 0));
 
-let timer: ReturnType<typeof setInterval> | undefined;
-async function refresh() {
-  if (!cwd.value || !devId.value) return;
-  try {
-    status.value = await deviceClient(devId.value).gitStatus(cwd.value);
-  } catch (e) {
-    status.value = null;
-  }
-}
-// Client: fire now, the chip fills reactively. SSR waits on the prefetch
-// hook — a top-level await would need <Suspense> and silently never mount.
-if (!import.meta.env.SSR) void refresh();
-onServerPrefetch(() => refresh());
-watch(cwd, () => void refresh());
-onMounted(() => {
-  timer = setInterval(refresh, 15000);
-});
-onBeforeUnmount(() => timer && clearInterval(timer));
-
-async function op(name: "fetch" | "pull" | "log" | "branch", keepOpen = true) {
-  if (!devId.value || !cwd.value) return;
-  busy.value = name;
-  logText.value = "";
-  try {
-    const out = await deviceClient(devId.value).gitOp(cwd.value, name);
-    if (name === "log" || name === "branch") logText.value = out.text;
-    else notify(`git ${name}: ${out.text.split("\n")[0] ?? "ok"}`);
-    await refresh();
-  } catch (e) {
-    notify(`git ${name} failed: ${(e as Error).message.slice(0, 120)}`);
-  } finally {
-    busy.value = "";
-    void keepOpen;
-  }
-}
-
-async function commit() {
-  if (!devId.value || !cwd.value || !commitMsg.value.trim()) return;
-  busy.value = "commit";
-  try {
-    const out = await deviceClient(devId.value).gitOp(cwd.value, "commit", { message: commitMsg.value.trim() });
-    notify(out.text);
-    commitMsg.value = "";
-    await refresh();
-  } catch (e) {
-    notify(`commit failed: ${(e as Error).message.slice(0, 120)}`);
-  } finally {
-    busy.value = "";
-  }
-}
-
-async function addWorktree() {
-  if (!devId.value || !cwd.value || !wtName.value.trim() || !status.value?.root) return;
-  busy.value = "wt";
-  const root = status.value.root;
-  const parent = root.slice(0, root.lastIndexOf("/"));
-  const base = root.slice(root.lastIndexOf("/") + 1);
-  const target = `${parent}/${base}-${wtName.value.trim()}`;
-  try {
-    const out = await deviceClient(devId.value).gitOp(cwd.value, "worktree-add", {
-      branch: wtName.value.trim(),
-      target,
-    });
-    notify(`worktree: ${out.text.split("\n")[0] ?? target}`);
-    wtName.value = "";
-    await refresh();
-  } catch (e) {
-    notify(`worktree 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";
-  try {
-    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)}`);
-  } finally {
-    busy.value = "";
-  }
-}
+if (!import.meta.env.SSR) void ensureGit(devId.value || "?", cwd.value || "?");
+onServerPrefetch(() => ensureGit(devId.value || "?", cwd.value || "?"));
+watch([devId, cwd], () => void ensureGit(devId.value || "?", cwd.value || "?"));
 </script>
 
 <template>
-  <span v-if="status?.repo" class="git-chip-wrap">
-    <button class="crumb git-chip" :title="`${status.root} · ${status.head ?? ''} ${status.subject ?? ''}`" @click="open = !open">
+  <span v-if="status?.repo || loading" class="git-chip-wrap">
+    <button
+      class="crumb git-chip"
+      :title="status ? `${status.root} · ${status.head ?? ''} ${status.subject ?? ''} — opens the Git tab` : 'loading git…'"
+      @click="showInspector('git')"
+    >
       <GitBranch :size="16" aria-hidden="true" />
-      <span class="branch">{{ status.branch ?? status.head }}</span>
+      <span class="branch">{{ status?.branch ?? status?.head ?? "…" }}</span>
       <span v-if="dirty" class="dirty">±{{ dirty }}</span>
-      <span v-if="status.ahead" class="ahead">↑{{ status.ahead }}</span>
-      <span v-if="status.behind" class="behind">↓{{ status.behind }}</span>
+      <span v-if="status?.ahead" class="ahead">↑{{ status.ahead }}</span>
+      <span v-if="status?.behind" class="behind">↓{{ status.behind }}</span>
       <ChevronDown :size="14" aria-hidden="true" />
     </button>
-    <div v-if="open" class="git-panel" @click.stop>
-      <header>
-        <strong>git · {{ status.root }}</strong>
-        <button :disabled="!!busy" title="refresh" @click="refresh()"><RefreshCw :size="14" /></button>
-      </header>
-      <p class="line">
-        {{ status.branch ?? "detached" }}<template v-if="status.upstream"> → {{ status.upstream }}</template>
-        · <span title="staged/unstaged/untracked">+{{ status.staged ?? 0 }} ~{{ status.unstaged ?? 0 }} ?{{ status.untracked ?? 0 }}</span>
-      </p>
-      <p class="line muted">{{ status.head }} {{ status.subject }}</p>
-      <p v-if="status.worktreeOf" class="line wt-of">worktree of {{ status.worktreeOf }}</p>
-
-      <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>
-      </div>
-
-      <div class="row commit">
-        <input v-model="commitMsg" placeholder="commit message…" @keyup.enter="commit" />
-        <button :disabled="!!busy || !commitMsg.trim()" @click="commit">commit -am</button>
-      </div>
-
-      <div class="row wt">
-        <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="logText" class="log">{{ logText.slice(0, 4000) }}</pre>
-    </div>
   </span>
 </template>
 
@@ -166,20 +45,4 @@ async function removeWorktree(path: string) {
 .dirty { color: var(--warn, #e5a50a); }
 .ahead { color: var(--ok, #2ea043); }
 .behind { color: var(--info, #58a6ff); }
-.git-panel {
-  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 320px; max-width: min(560px, 90vw);
-  background: var(--bg-2, #1c1c22); border: 1px solid var(--border, #333); border-radius: 8px; padding: 10px 12px;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 40%); font-size: 12px;
-}
-.git-panel header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
-.git-panel .line { margin: 4px 0; }
-.git-panel .muted, .muted { opacity: 0.7; }
-.git-panel .wt-of { color: var(--info, #58a6ff); }
-.git-panel .row { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
-.git-panel .row.commit, .git-panel .row.wt { flex-wrap: nowrap; }
-.git-panel input { flex: 1; min-width: 0; }
-.git-panel .wts { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 2px; }
-.git-panel .wts li { display: flex; gap: 8px; align-items: center; }
-.git-panel .wts code { font-size: 11px; }
-.git-panel .log { max-height: 220px; overflow: auto; background: rgb(0 0 0 / 25%); padding: 8px; border-radius: 6px; }
 </style>