@frockbot/plugin-flock 0.3.11 → 0.3.13

package/frockbot.json

@@ -22,7 +22,8 @@
         { "slot": "frockbot.overlays", "order": 10 },
         { "slot": "frockbot.bot-identity", "order": 10 },
         { "slot": "frockbot.bot-avatar", "order": 10 },
-        { "slot": "frockbot.bot-avatar-editor", "order": 10 }
+        { "slot": "frockbot.bot-avatar-editor", "order": 10 },
+        { "slot": "frockbot.bot-settings-primary-sections", "order": 900 }
       ],
       "outlets": []
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frockbot/plugin-flock",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "private": false,
   "type": "module",
   "exports": {
@@ -27,20 +27,20 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@frockbot/client-core": "0.3.11",
-    "@frockbot/client-ui": "0.3.11",
-    "@frockbot/configuration-core": "0.3.11",
-    "@frockbot/kernel-contracts": "0.3.11",
-    "@frockbot/plugin-shell": "0.3.11",
+    "@frockbot/client-core": "0.3.13",
+    "@frockbot/client-ui": "0.3.13",
+    "@frockbot/configuration-core": "0.3.13",
+    "@frockbot/kernel-contracts": "0.3.13",
+    "@frockbot/plugin-shell": "0.3.13",
     "cordis": "4.0.0-rc.8",
     "vue": "3.5.41"
   },
   "devDependencies": {
-    "@frockbot/plugin-testkit": "0.3.11",
+    "@frockbot/plugin-testkit": "0.3.13",
     "@types/bun": "1.4.0",
     "@vitejs/plugin-vue": "6.0.8",
     "css-tree": "2.3.1",
-    "typescript": "5.9.3",
+    "typescript": "npm:typescript-native-bridge@6.0.3-bridge.16.tsgo.7.0.2",
     "vite": "8.2.2",
     "vue-tsc": "3.3.10"
   },

package/src/agent.ts

@@ -318,7 +318,9 @@ export async function createdBotIdV1(
       .replace(/[^a-z0-9]+/g, "-")
       .replace(/^-|-$/g, "")
       .slice(0, 80) || "bot";
-  const digest = await sha256HexV1(`${owner.userId}${owner.botId}${effectId}`);
+  const digest = await sha256HexV1(
+    `${owner.userId}\u0000${owner.botId}\u0000${effectId}`,
+  );
   return `${base}-${digest.slice(0, 12)}`;
 }
 

package/src/bot.test.ts

@@ -49,6 +49,7 @@ describe("Flock Bot contribution", () => {
           return Promise.resolve();
         },
         archiveEligible: () => Promise.resolve(true),
+        tearDown: () => Promise.resolve(),
       });
     expect(await create().read(registration, "user-1")).toMatchObject({
       botId: "alpha",
@@ -95,6 +96,7 @@ describe("Flock Bot contribution", () => {
         storage,
         materializeSettings: () => Promise.resolve(),
         archiveEligible: () => Promise.resolve(eligible),
+        tearDown: () => Promise.resolve(),
       });
     const contribution = create();
     await contribution.read(registration, "user-1");
@@ -153,12 +155,95 @@ describe("Flock Bot contribution", () => {
     });
   });
 
+  test("deletes every key, cancels the alarm, and refuses to come back", async () => {
+    const storage = new MemoryStorage();
+    // Whatever else the Bot owned: a run, a Routine schedule, its transcript.
+    // The teardown is the host's, so the test plays the host and asserts that
+    // the Contribution asked for one and left nothing but the tombstone.
+    let alarms = 1;
+    const torn: Array<{ userId: string; botId: string }> = [];
+    const create = () =>
+      createFlockBotBackendContribution({
+        storage,
+        materializeSettings: () => Promise.resolve(),
+        archiveEligible: () => Promise.resolve(false),
+        tearDown: (identity) => {
+          torn.push(identity);
+          alarms = 0;
+          storage.values.clear();
+          return Promise.resolve();
+        },
+      });
+    const contribution = create();
+    await contribution.read(registration, "user-1");
+    await storage.put("run:run-1", { schemaVersion: 1 });
+    await storage.put("conversation", { schemaVersion: 1 });
+    await storage.put("routine-schedule:daily", { schemaVersion: 1 });
+    const command = {
+      schemaVersion: 1 as const,
+      type: "bot/delete" as const,
+      commandId: "delete-1",
+      botId: "alpha",
+    };
+    const applied = await contribution.executeLifecycle(
+      registration,
+      "user-1",
+      command,
+    );
+    expect(applied).toMatchObject({
+      status: "applied",
+      lifecycle: { botId: "alpha", status: "deleted" },
+    });
+    // Deletion is not gated on `archiveEligible`: a Bot mid-run is still
+    // deleted when its owner says so.
+    expect(torn).toEqual([{ userId: "user-1", botId: "alpha" }]);
+    expect(alarms).toBe(0);
+    // Nothing survives but the tombstone and the receipt that proves it.
+    expect([...storage.values.keys()].sort()).toEqual([
+      "flock:lifecycle-receipt:delete-1",
+      "flock:lifecycle:v1",
+    ]);
+    // Replaying the command, and replaying it against a fresh instance, both
+    // settle from the tombstone without tearing anything down again.
+    expect(
+      await contribution.executeLifecycle(registration, "user-1", command),
+    ).toEqual(applied);
+    const reconstructed = create();
+    expect(
+      await reconstructed.executeLifecycle(registration, "user-1", {
+        ...command,
+        commandId: "delete-2",
+      }),
+    ).toMatchObject({ status: "applied", lifecycle: { status: "deleted" } });
+    expect(torn).toHaveLength(1);
+    expect(
+      await reconstructed.readLifecycle(registration, "user-1"),
+    ).toMatchObject({ botId: "alpha", status: "deleted" });
+    // Neither restore nor archive resurrects it, and no Turn or sheep command
+    // may run against it.
+    expect(
+      await reconstructed.executeLifecycle(registration, "user-1", {
+        schemaVersion: 1,
+        type: "bot/restore",
+        commandId: "restore-1",
+        botId: "alpha",
+      }),
+    ).toMatchObject({ status: "rejected", failure: 'Bot "alpha" is deleted' });
+    await expect(reconstructed.read(registration, "user-1")).rejects.toThrow(
+      "deleted",
+    );
+    await expect(reconstructed.assertActive(storage, "alpha")).rejects.toThrow(
+      "deleted",
+    );
+  });
+
   test("rejects malformed durable sheep identity and receipt records", async () => {
     const storage = new MemoryStorage();
     const contribution = createFlockBotBackendContribution({
       storage,
       materializeSettings: () => Promise.resolve(),
       archiveEligible: () => Promise.resolve(true),
+      tearDown: () => Promise.resolve(),
     });
     await storage.put("flock:sheep:v1", {
       schemaVersion: 1,

package/src/bot.ts

@@ -42,6 +42,17 @@ export interface FlockBotBackendHost {
     userId: string,
   ): Promise<void>;
   archiveEligible(storage: FlockBotTransaction): Promise<boolean>;
+  /**
+   * Destroy everything this Bot owns: every durable key in its own Durable
+   * Object, its scheduled alarm, and any object-store root keyed to it.
+   *
+   * The host owns this rather than the Contribution because the surfaces are
+   * the application's — `deleteAll()` and `deleteAlarm()` are not part of the
+   * transaction seam this Package writes against, and the object store is not
+   * named here at all. It must be idempotent: the delete saga replays, and a
+   * Bot torn down twice is torn down once.
+   */
+  tearDown(identity: { userId: string; botId: string }): Promise<void>;
 }
 
 export class BotArchivedError extends Error {
@@ -51,6 +62,19 @@ export class BotArchivedError extends Error {
   }
 }
 
+/**
+ * A Bot that has been permanently deleted. Distinct from `BotNotFoundError`
+ * because the tombstone is the one thing a deleted Bot still knows about
+ * itself: the registration may already be gone from the User's directory, or
+ * it may not be gone yet, and either way no Turn, command or routine may run.
+ */
+export class BotDeletedError extends Error {
+  constructor(readonly botId: string) {
+    super(`Bot "${botId}" is deleted`);
+    this.name = "BotDeletedError";
+  }
+}
+
 export class FlockBotBackendContribution {
   constructor(private readonly host: FlockBotBackendHost) {}
 
@@ -59,6 +83,10 @@ export class FlockBotBackendContribution {
     userId: string,
   ): Promise<SheepIdentityViewV1> {
     const registration = decodeBotRegistrationV1(registrationInput);
+    // A tombstone is checked before anything is written back: materializing a
+    // deleted Bot would recreate the very rows the delete removed.
+    const tombstone = await this.deletedLifecycle();
+    if (tombstone) throw new BotDeletedError(registration.botId);
     await this.host.materializeSettings(registration, userId);
     return this.host.storage.transaction(async (storage) => {
       const existingValue = await storage.get<unknown>(IDENTITY_KEY);
@@ -155,10 +183,28 @@ export class FlockBotBackendContribution {
     });
   }
 
+  /**
+   * The tombstone, if this Bot has been deleted.
+   *
+   * The delete teardown wipes every key and then writes the lifecycle back as
+   * `deleted`, so this single read is the whole of what a deleted Bot is.
+   */
+  private async deletedLifecycle(): Promise<BotLifecycleViewV1 | undefined> {
+    const stored = await this.host.storage.get<unknown>(LIFECYCLE_KEY);
+    if (stored === undefined) return undefined;
+    const lifecycle = decodeBotLifecycleViewV1(stored);
+    return lifecycle.status === "deleted" ? lifecycle : undefined;
+  }
+
   async readLifecycle(
     registration: BotRegistrationV1,
     userId: string,
   ): Promise<BotLifecycleViewV1> {
+    // The saga reconciles an uncertain delete by reading the lifecycle back,
+    // so a tombstone answers here rather than throwing: it is the proof the
+    // teardown ran.
+    const tombstone = await this.deletedLifecycle();
+    if (tombstone) return structuredClone(tombstone);
     await this.materialize(registration, userId);
     const stored = await this.host.storage.get<unknown>(LIFECYCLE_KEY);
     if (stored === undefined)
@@ -174,8 +220,25 @@ export class FlockBotBackendContribution {
     const command = decodeBotLifecycleCommandV1(input);
     if (registration.botId !== command.botId)
       throw new Error("lifecycle command does not match Bot registration");
-    await this.materialize(registration, userId);
     const fingerprint = flockCommandFingerprint(command);
+    // Deletion is terminal, so the tombstone is read before the Bot is
+    // materialized: a replayed `bot/delete` settles from it, and archive or
+    // restore is refused instead of resurrecting the Bot.
+    const tombstone = await this.deletedLifecycle();
+    if (tombstone)
+      return {
+        schemaVersion: 1,
+        commandId: command.commandId,
+        botId: command.botId,
+        status: command.type === "bot/delete" ? "applied" : "rejected",
+        lifecycle: structuredClone(tombstone),
+        ...(command.type === "bot/delete"
+          ? {}
+          : { failure: `Bot "${command.botId}" is deleted` }),
+      } satisfies BotLifecycleReceiptV1;
+    if (command.type === "bot/delete")
+      return this.delete(registration, userId, command, fingerprint);
+    await this.materialize(registration, userId);
     return this.host.storage.transaction(async (storage) => {
       const receiptKey = `${LIFECYCLE_RECEIPT_PREFIX}${command.commandId}`;
       const storedReceipt = await storage.get<unknown>(receiptKey);
@@ -229,6 +292,52 @@ export class FlockBotBackendContribution {
     });
   }
 
+  /**
+   * Permanent deletion, as one replayable step.
+   *
+   * The teardown runs first and the tombstone is written after it, so a crash
+   * anywhere in between leaves an empty Durable Object that the saga's retry
+   * tears down again — `tearDown` is idempotent, and an empty object has
+   * nothing left to remove. Writing the tombstone first would be the unsafe
+   * order: `deleteAll` would take it out again and the Bot would look alive.
+   */
+  private async delete(
+    registration: BotRegistrationV1,
+    userId: string,
+    command: BotLifecycleCommandV1,
+    fingerprint: string,
+  ): Promise<BotLifecycleReceiptV1> {
+    const currentValue = await this.host.storage.get<unknown>(LIFECYCLE_KEY);
+    const current =
+      currentValue === undefined
+        ? undefined
+        : decodeBotLifecycleViewV1(currentValue);
+    if (current && current.botId !== registration.botId)
+      throw new Error("Bot lifecycle identity does not match");
+    await this.host.tearDown({ userId, botId: registration.botId });
+    const lifecycle = {
+      schemaVersion: 1,
+      botId: command.botId,
+      status: "deleted",
+      revision: (current?.revision ?? 0) + 1,
+    } satisfies BotLifecycleViewV1;
+    const receipt = {
+      schemaVersion: 1,
+      commandId: command.commandId,
+      botId: command.botId,
+      status: "applied",
+      lifecycle,
+    } satisfies BotLifecycleReceiptV1;
+    await this.host.storage.put({
+      [LIFECYCLE_KEY]: lifecycle,
+      [`${LIFECYCLE_RECEIPT_PREFIX}${command.commandId}`]: {
+        fingerprint,
+        receipt,
+      },
+    });
+    return decodeBotLifecycleReceiptV1(receipt);
+  }
+
   async assertActive(
     storage: FlockBotTransaction,
     botId: string,
@@ -238,6 +347,7 @@ export class FlockBotBackendContribution {
     const lifecycle = decodeBotLifecycleViewV1(value);
     if (lifecycle.botId !== botId)
       throw new Error("Bot lifecycle identity does not match");
+    if (lifecycle.status === "deleted") throw new BotDeletedError(botId);
     if (lifecycle.status === "archived") throw new BotArchivedError(botId);
   }
 }

package/src/client/BotAvatar.vue

@@ -2,13 +2,18 @@
 /**
  * What a Bot looks like. The Flock's generated sheep recipe is the avatar.
  *
- * `working` draws the same activity ring the thread puts on the Bot it is
- * talking to, so a person reading one conversation can see another Bot still
- * going — on a list row and on a pinned tile alike. The sidebar knows only that
- * a Turn is running; the step count is the open conversation's to show, so a
- * ring out here pulses and does not tick.
+ * `working` draws the same language the thread uses for the Bot it is talking
+ * to — particles drifting off the avatar's right — so a person reading one
+ * conversation can see another Bot still going, on a list row and on a pinned
+ * tile alike.
+ *
+ * It is three CSS dots rather than the thread's canvas. A sidebar can hold
+ * twenty rows, and twenty `requestAnimationFrame` loops running full particle
+ * fields to say one bit each — "this Bot is busy" — is a cost the list should
+ * not pay. Out here that is genuinely all there is to say: the sidebar knows a
+ * Turn is running and nothing about its pace, which is the open
+ * conversation's to show.
  */
-import { UiActivityRing } from "@frockbot/client-ui";
 import SheepAvatar from "./SheepAvatar.vue";
 import type { SheepRecipeV1 } from "../shared.js";
 
@@ -26,8 +31,12 @@ withDefaults(
 <template>
   <span class="flock-avatar-slot">
     <SheepAvatar :sheep="sheep" :label="label" :size="size" />
-    <Transition name="flock-avatar-ring">
-      <UiActivityRing v-if="working" :progress="0" />
+    <Transition name="flock-avatar-drift">
+      <span v-if="working" class="flock-avatar-drift" aria-hidden="true">
+        <i />
+        <i />
+        <i />
+      </span>
     </Transition>
   </span>
 </template>
@@ -40,13 +49,86 @@ withDefaults(
   place-items: center;
 }
 
-.flock-avatar-ring-enter-active,
-.flock-avatar-ring-leave-active {
+/*
+ * Clear of the avatar rather than over it, in the strip of row to its right.
+ * `pointer-events` keeps the whole thing out of the way of the row's click,
+ * and it lives inside the gap the row already leaves between the avatar and the
+ * name, so it never runs under the text.
+ */
+.flock-avatar-drift {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 100%;
+  width: 12px;
+  height: 6px;
+  margin-left: 2px;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.flock-avatar-drift i {
+  position: absolute;
+  top: 2px;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: var(--frock-action-primary);
+  animation: frock-drift 2400ms linear infinite;
+}
+
+.flock-avatar-drift i:nth-child(2) {
+  animation-delay: 800ms;
+}
+
+.flock-avatar-drift i:nth-child(3) {
+  animation-delay: 1600ms;
+}
+
+/*
+ * The same journey the thread's particles make — born at the avatar's edge,
+ * out to the right, fading as they go — at a size a list can afford.
+ */
+@keyframes frock-drift {
+  0% {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+
+  20% {
+    opacity: 0.9;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(10px, -2px);
+  }
+}
+
+.flock-avatar-drift-enter-active,
+.flock-avatar-drift-leave-active {
   transition: opacity 420ms ease-out;
 }
 
-.flock-avatar-ring-enter-from,
-.flock-avatar-ring-leave-to {
+.flock-avatar-drift-enter-from,
+.flock-avatar-drift-leave-to {
   opacity: 0;
 }
+
+/*
+ * Reduced motion keeps the fact and drops the movement: one still dot beside
+ * the avatar, which is the whole of what this was saying.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .flock-avatar-drift i {
+    animation: none;
+    opacity: 0.9;
+    transform: translate(4px, 0);
+  }
+
+  .flock-avatar-drift i:nth-child(2),
+  .flock-avatar-drift i:nth-child(3) {
+    display: none;
+  }
+}
 </style>

package/src/client/FlockDangerZone.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// Deleting a Bot is Flock's authority — the directory it removes the
+// registration from is Flock's — so the affordance is contributed into the Bot
+// settings screen from here rather than reimplemented inside the Settings
+// Package, which would have to reach across a Package seam for the store.
+//
+// The confirmation itself is `FlockOverlay`'s: one dialog, one focus trap, one
+// mobile layout, and no second copy of the copy.
+import { inject } from "vue";
+import { flockWebDataKey } from "./state.js";
+import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
+
+const flock = inject(flockWebDataKey);
+if (!flock) throw new Error("Flock client data was not provided");
+const shell = inject(frockBotWebDataKey);
+if (!shell) throw new Error("FrockBot client data was not provided");
+</script>
+<template>
+  <section v-if="shell.activeBotId" class="flock-danger-zone">
+    <div>
+      <strong>Delete Bot</strong>
+      <small>This Bot and its chat history will be permanently deleted.</small>
+    </div>
+    <button
+      type="button"
+      class="flock-danger-zone__action"
+      @click="flock.openDelete(shell.activeBotId)"
+    >
+      Delete Bot
+    </button>
+  </section>
+</template>
+<style scoped>
+.flock-danger-zone {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 14px;
+  border: 1px solid var(--frock-danger-border);
+  border-radius: var(--frock-radius-surface, 12px);
+  background: var(--frock-danger-surface);
+}
+
+.flock-danger-zone div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.flock-danger-zone small {
+  color: var(--frock-text-muted);
+}
+
+.flock-danger-zone__action {
+  flex: none;
+  height: var(--frock-control-md, 32px);
+  padding: 0 14px;
+  border: 1px solid var(--frock-danger-strong);
+  border-radius: 999px;
+  background: var(--frock-danger-strong);
+  color: var(--frock-on-accent);
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.flock-danger-zone__action:hover {
+  background: var(--frock-danger-text);
+}
+</style>

package/src/client/FlockOverlay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { computed, inject, nextTick, onBeforeUnmount, ref, watch } from "vue";
 import { sheepCatalog } from "../shared.js";
 import { flockWebDataKey } from "./state.js";
 import { dialogFocusWrapTarget } from "./dialog-focus.js";
@@ -8,6 +8,22 @@ const providedFlock = inject(flockWebDataKey);
 if (!providedFlock) throw new Error("Flock client data was not provided");
 const flock = providedFlock;
 
+/**
+ * The name the confirmation names. The live profile is the Bot's current name;
+ * the registration seed is what it was called when it was made, and is the
+ * fallback for a Bot whose identity read has not landed.
+ */
+const pendingName = computed(() => {
+  const botId = flock.value.lifecyclePending;
+  if (!botId) return "this Bot";
+  return (
+    flock.value.profiles[botId]?.name ??
+    flock.value.directory.bots.find((bot) => bot.botId === botId)
+      ?.initialName ??
+    "this Bot"
+  );
+});
+
 const dialog = ref<HTMLElement>();
 let restoreFocus: HTMLElement | undefined;
 const focusable =
@@ -90,6 +106,25 @@ onBeforeUnmount(() => restoreFocus?.focus());
           </button>
         </div>
       </div>
+      <div v-else-if="flock.overlay === 'delete'" class="flock-form">
+        <span class="flock-eyebrow">Delete Bot</span>
+        <h1 id="flock-title">Delete {{ pendingName }}?</h1>
+        <p>This Bot and its chat history will be permanently deleted.</p>
+        <p
+          v-if="flock.error"
+          class="flock-error"
+          role="alert"
+          aria-live="assertive"
+        >
+          {{ flock.error }}
+        </p>
+        <div class="flock-actions">
+          <button type="button" @click="flock.closeOverlay">Cancel</button>
+          <button class="danger" type="button" @click="flock.deleteBot">
+            Delete
+          </button>
+        </div>
+      </div>
       <template v-else>
         <div class="flock-preview">
           <SheepAvatar

package/src/client/FlockSidebar.vue

@@ -109,17 +109,39 @@ onMounted(() => void flock.value.load());
 
 <template>
   <div class="flock-list-actions">
-    <button type="button" class="flock-manage" @click="flock.toggleArchived">
-      {{ flock.showArchived ? "Hide archived" : "Manage" }}
+    <button
+      type="button"
+      class="flock-manage"
+      :aria-pressed="flock.showArchived"
+      @click="flock.toggleArchived"
+    >
+      {{ flock.showArchived ? "Done" : "Manage" }}
     </button>
   </div>
+  <!--
+    An unreadable list is not an empty one, and it is not a loading one either.
+    Offering to add a first Bot to a User whose Bots simply did not load is the
+    worst thing this column can say; leaving the skeleton up forever is the
+    second worst, because it says the read is still coming when it has already
+    failed. So the failure takes the slot first, and offers the read again.
+  -->
+  <p
+    v-if="flock.error && !flock.directory.bots.length"
+    class="flock-error"
+    role="alert"
+  >
+    {{ flock.error }}
+    <button type="button" class="flock-retry" @click="flock.load()">
+      Retry
+    </button>
+  </p>
   <!--
     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">
+  <div v-else-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" />
@@ -257,6 +279,14 @@ onMounted(() => void flock.value.load());
             >
               Archive
             </button>
+            <button
+              v-if="flock.showArchived"
+              type="button"
+              class="flock-lifecycle flock-lifecycle--danger"
+              @click="flock.openDelete(bot.botId)"
+            >
+              Delete
+            </button>
           </div>
         </TransitionGroup>
       </section>
@@ -326,5 +356,13 @@ onMounted(() => void flock.value.load());
       </TransitionGroup>
     </div>
   </template>
-  <p v-if="flock.error" class="flock-error" role="alert">{{ flock.error }}</p>
+  <!-- The same failure over a list that still has rows: a banner, not a
+       replacement, because what is on screen is still the last thing known. -->
+  <p
+    v-if="flock.error && flock.directory.bots.length"
+    class="flock-error"
+    role="alert"
+  >
+    {{ flock.error }}
+  </p>
 </template>