my-durable 0.0.19 → 0.0.21

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-Cbohux_s.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DJZ6A1cN.css">
+    <script type="module" crossorigin src="/assets/index-Cv3w8azJ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BvDyZN2S.css">
   </head>
   <body>
     <div id="app"></div>

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

@@ -2,7 +2,7 @@
 // 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, ref, watch } from "vue";
+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";
@@ -29,9 +29,10 @@ async function refresh() {
     status.value = null;
   }
 }
-// First fetch inside setup: SSR (and the first paint) wait for it, so the chip
-// never flashes empty; later refreshes ride the interval + cwd changes.
-await refresh();
+// 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);

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

@@ -1,7 +1,7 @@
 <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, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, onServerPrefetch, ref, watch } from "vue";
 import { RefreshCw } from "lucide-vue-next";
 import { deviceId, sessionSummary, notify } from "../client/store";
 import { deviceClient } from "../client/hub";
@@ -10,6 +10,9 @@ 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("");
@@ -24,17 +27,35 @@ let timer: ReturnType<typeof setInterval> | undefined;
 async function refresh() {
   const c = client();
   if (!c || !cwd.value) return;
-  try {
-    status.value = await c.gitStatus(cwd.value);
-    error.value = "";
-  } catch (e) {
-    status.value = null;
-    error.value = (e as Error).message.slice(0, 160);
-  }
+  if (inFlight) return inFlight; // interval + session-switch must not pile up
+  const first = !status.value;
+  if (first) loading.value = true;
+  else refreshing.value = true;
+  inFlight = (async () => {
+    try {
+      status.value = await c.gitStatus(cwd.value);
+      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;
 }
-// First fetch awaits in setup so SSR and first paint carry the state —
-// "not a repository" must be VISIBLE, not a blank tab.
-await refresh();
+// 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, 10000);
 });
@@ -120,8 +141,15 @@ async function removeWorktree(path: string) {
         <button :disabled="!!busy" title="refresh" @click="refresh()"><RefreshCw :size="14" /></button>
       </header>
 
-      <p v-if="error" class="error">{{ error }}</p>
+      <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>
@@ -163,6 +191,7 @@ async function removeWorktree(path: string) {
 
         <pre v-if="out" class="out">{{ out.slice(0, 6000) }}</pre>
       </template>
+      </div>
     </template>
   </div>
 </template>
@@ -184,5 +213,7 @@ async function removeWorktree(path: string) {
 .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; }
 .error { color: var(--danger, #f85149); }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-durable",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "Durable Pi \u2014 the durable agent network: hub web UI, device backend daemon, TUI admin and the shared SDK, packaged as one runnable monorepo install",
   "license": "MIT",
   "repository": {