@frockbot/plugin-flock 0.3.8 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frockbot/plugin-flock",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "private": false,
   "type": "module",
   "exports": {
@@ -27,16 +27,16 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@frockbot/client-core": "0.3.8",
-    "@frockbot/client-ui": "0.3.8",
-    "@frockbot/configuration-core": "0.3.8",
-    "@frockbot/kernel-contracts": "0.3.8",
-    "@frockbot/plugin-shell": "0.3.8",
+    "@frockbot/client-core": "0.3.10",
+    "@frockbot/client-ui": "0.3.10",
+    "@frockbot/configuration-core": "0.3.10",
+    "@frockbot/kernel-contracts": "0.3.10",
+    "@frockbot/plugin-shell": "0.3.10",
     "cordis": "4.0.0-rc.8",
     "vue": "3.5.41"
   },
   "devDependencies": {
-    "@frockbot/plugin-testkit": "0.3.8",
+    "@frockbot/plugin-testkit": "0.3.10",
     "@types/bun": "1.4.0",
     "@vitejs/plugin-vue": "6.0.8",
     "css-tree": "2.3.1",

package/src/client/FlockSidebar.vue

@@ -89,7 +89,13 @@ onMounted(() => void flock.value.load());
       {{ flock.showArchived ? "Hide archived" : "Manage" }}
     </button>
   </div>
-  <div v-if="flock.loading" class="flock-skeleton" aria-busy="true">
+  <!--
+    The skeleton is for a list nobody has yet, not for every request: the first
+    paint happens before `load()` is even called, and a reload after creating a
+    Bot must keep the list already on screen rather than blanking it. "No Bots
+    yet." is a fact about the account, so it waits for an answer.
+  -->
+  <div v-if="!flock.loaded" class="flock-skeleton" aria-busy="true">
     <span class="flock-skeleton-label">Loading your flock…</span>
     <div v-for="row in 3" :key="row" class="flock-skeleton-row">
       <UiSkeleton shape="circle" />

package/src/client/index.test.ts

@@ -376,6 +376,38 @@ describe("Flock client reconciliation", () => {
     expect(state.value.overlay).toBeUndefined();
     expect(selected).not.toHaveLength(0);
     expect(selected.every((botId) => botId === createdBotId)).toBe(true);
+    // The User has just made a Bot; nothing on screen may say they have none.
+    // `loaded` is what the sidebar reads before it renders "No Bots yet.", and
+    // the created Bot is in the list by the time the dialog is gone.
+    expect(state.value.loaded).toBe(true);
+    expect(state.value.directory.bots.map((bot) => bot.botId)).toEqual([
+      createdBotId,
+    ]);
+  });
+
+  // The empty state is a fact about the account, and before the first read the
+  // account is unknown: the sidebar used to claim "No Bots yet." on the first
+  // paint, before `load()` had even been called.
+  test("does not claim an empty flock before the first read lands", async () => {
+    installStorage();
+    const state = mount((path) => {
+      if (path === "/api/bots")
+        return Promise.resolve({ schemaVersion: 1, revision: 1, bots: [] });
+      if (path === "/api/bots/lifecycles")
+        return Promise.resolve({ schemaVersion: 1, lifecycles: [] });
+      if (path === "/api/bots/identities")
+        return Promise.resolve({ schemaVersion: 1, identities: [] });
+      return Promise.reject(new Error(`unexpected request: ${path}`));
+    });
+
+    // Before any read: the account is unknown, so the sidebar keeps its
+    // skeleton rather than asserting the User has no Bots.
+    expect(state.value.loaded).toBe(false);
+
+    await state.value.load();
+
+    expect(state.value.loaded).toBe(true);
+    expect(state.value.directory.bots).toEqual([]);
   });
 
   test("archives with confirmation, hides archived Bots, and selects a fallback", async () => {

package/src/client/index.ts

@@ -115,6 +115,7 @@ export const flockClientPlugin: ClientPlugin = (ctx) => {
     showArchived: false,
     showHidden: false,
     loading: false,
+    loaded: false,
     draftName: "",
     draftSheep: randomSheepRecipeV1(),
     bindShell(value) {
@@ -153,6 +154,7 @@ export const flockClientPlugin: ClientPlugin = (ctx) => {
         if (generation !== loadGeneration) return;
         authenticatedUserId = userId;
         state.value.directory = directory;
+        state.value.loaded = true;
         state.value.lifecycles = Object.fromEntries(
           lifecycleDirectory.lifecycles.map((item) => [
             item.botId,
@@ -503,9 +505,12 @@ export const flockClientPlugin: ClientPlugin = (ctx) => {
         }
         clearPendingCreate(userId);
         replacePreferredBot(command.botId);
-        state.value.overlay = undefined;
+        // The list first, the dialog last. Tearing the dialog down before the
+        // reload landed showed the User the first-run empty state — "No Bots
+        // yet. Add your first sheep." — for the Bot they had just added.
         await state.value.load();
         await state.value.select(command.botId);
+        state.value.overlay = undefined;
       } catch (error) {
         if (isDefinitiveFlockFailure(error) && authenticatedUserId)
           clearPendingCreate(authenticatedUserId);

package/src/client/state.ts

@@ -20,6 +20,14 @@ export interface FlockWebData {
   /** Per-Bot unread, as the Bot Durable Objects derive it. Never computed here. */
   unread: Record<string, BotUnreadViewV1>;
   loading: boolean;
+  /**
+   * Whether a directory read has ever completed.
+   *
+   * "No Bots yet." is a fact about the User's account, and it can only be
+   * stated once the account has been read. Before that — the first paint, and
+   * the reload after a Bot is created — the list is unknown, not empty.
+   */
+  loaded: boolean;
   error?: string;
   overlay?: "create" | "edit" | "archive";
   lifecycles: Record<string, BotLifecycleStatusV1>;