@frockbot/plugin-computer 0.2.5 → 0.3.1

package/src/client/ComputerCard.test.ts

@@ -102,6 +102,12 @@ describe("Computer viewer", () => {
     expect(template).toContain(':src="viewerSrc"');
     expect(template).toContain('@load="handleFrameLoad"');
     expect(template).toContain('role="progressbar"');
+    expect(template).toContain(':aria-valuenow="progressValueNow"');
+    expect(template).toContain('aria-live="polite"');
+    expect(overlaySource).toContain(
+      "Setting up your computer for the first time",
+    );
+    expect(overlaySource).toContain("This usually takes 2-3 minutes");
     expect(template).toContain('@click="actions.requestTakeControl"');
     expect(template).toContain('role="alertdialog"');
     expect(template).toContain(
@@ -109,13 +115,27 @@ describe("Computer viewer", () => {
     );
   });
 
-  test("the card shows the update phase label", () => {
+  test("the card shows accessible cold-setup and update progress", () => {
+    const parsed = parse(cardSource, { filename: "ComputerCard.vue" });
+    expect(parsed.errors).toEqual([]);
+    const template = parsed.descriptor.template?.content ?? "";
+
+    expect(cardSource).toContain("Setting up your computer for the first time");
+    expect(cardSource).toContain("This usually takes 2-3 minutes");
+    expect(cardSource).toContain("Updating your computer");
+    expect(template).toContain('role="progressbar"');
+    expect(template).toContain(':aria-valuenow="progressValueNow"');
+    expect(template).toContain('aria-live="polite"');
+    expect(template).toContain("{{ progressPhaseLabel }}");
+  });
+
+  test("the card keys its durable capture only by content hash", () => {
     const parsed = parse(cardSource, { filename: "ComputerCard.vue" });
     expect(parsed.errors).toEqual([]);
     const template = parsed.descriptor.template?.content ?? "";
 
-    expect(template).toContain("state.phase === 'updating'");
-    expect(template).toContain("Updating computer…");
-    expect(template).toContain("{{ state.message }}");
+    expect(template).toContain(':key="screenshot.contentHash"');
+    expect(template).toContain(':src="screenshot.url"');
+    expect(template).not.toContain("viewerUrl");
   });
 });

package/src/client/ComputerCard.vue

@@ -3,11 +3,80 @@ import { useRpc } from "@cordisjs/client";
 import { UiIcon } from "@frockbot/client-ui";
 import { computed, inject, ref } from "vue";
 import { computerKey, type ComputerState } from "../shared.ts";
+import {
+  computerProgressElapsedMs,
+  computerProgressFrame,
+  computerProgressRunKind,
+} from "./progress.ts";
 
 const computer = inject(computerKey) ?? useRpc<ComputerState>();
 const state = computed(() => computer.value);
 const busy = ref(false);
 const screenshot = computed(() => state.value.screenshots?.[0]);
+const opening = computed(
+  () =>
+    state.value.phase === "provisioning" || state.value.phase === "updating",
+);
+const progressRunKind = computed(() => computerProgressRunKind(state.value));
+const openingHeading = computed(() => {
+  switch (progressRunKind.value) {
+    case "cold-provision":
+      return "Setting up your computer for the first time";
+    case "resumed-provision":
+      return "Resuming computer setup";
+    case "update":
+      return "Updating your computer";
+    case "warm-wake":
+      return "Preparing computer…";
+  }
+});
+const setupExpectation = computed(() =>
+  progressRunKind.value === "cold-provision"
+    ? "This usually takes 2-3 minutes"
+    : undefined,
+);
+const progressPhaseLabel = computed(
+  () =>
+    state.value.progress?.provisioning?.label ??
+    state.value.progress?.steps.find((step) => step.status === "active")
+      ?.label ??
+    state.value.message,
+);
+const progressFrame = computed(() =>
+  computerProgressFrame({
+    projection: state.value,
+    elapsedMs: computerProgressElapsedMs(state.value.progress, Date.now()),
+  }),
+);
+const progressValueNow = computed(() => {
+  const fraction = progressFrame.value.fraction;
+  return fraction === undefined ? undefined : Math.round(fraction * 100);
+});
+const progressAnimationKey = computed(() => {
+  const progress = state.value.progress;
+  return progress
+    ? [
+        progress.startedAt,
+        progress.updatedAt,
+        progress.index,
+        progress.provisioning?.index ?? "connect",
+      ].join(":")
+    : "indeterminate";
+});
+const progressFillStyle = computed(() => {
+  const frame = progressFrame.value;
+  if (frame.fraction === undefined || frame.nextBoundary === undefined) {
+    return undefined;
+  }
+  return {
+    "--computer-progress-from": String(frame.fraction),
+    "--computer-progress-to": String(frame.nextBoundary),
+    "--computer-progress-duration": `${frame.remainingMs ?? 0}ms`,
+  };
+});
+const progressAriaLabel = computed(
+  () => `${openingHeading.value}: ${progressPhaseLabel.value}`,
+);
 
 async function open(): Promise<void> {
   if (busy.value) return;
@@ -32,28 +101,51 @@ async function open(): Promise<void> {
       @click="open"
     >
       <img
-        v-if="screenshot"
+        v-if="screenshot && !opening"
         :key="screenshot.contentHash"
         :src="screenshot.url"
         alt=""
         draggable="false"
       />
       <span v-else class="computer-placeholder">
-        <UiIcon name="sparkle" size="lg" />
-        <strong v-if="state.phase === 'unconfigured'"
-          >Computer not configured</strong
-        >
-        <strong v-else-if="state.phase === 'provisioning'"
-          >Preparing computer…</strong
-        >
-        <strong v-else-if="state.phase === 'updating'"
-          >Updating computer…</strong
-        >
-        <strong v-else-if="state.phase === 'disconnected'"
-          >Viewer disconnected</strong
-        >
-        <strong v-else>Persistent Computer</strong>
-        <span class="computer-placeholder-message">{{ state.message }}</span>
+        <template v-if="opening">
+          <strong>{{ openingHeading }}</strong>
+          <span v-if="setupExpectation" class="computer-setup-expectation">
+            {{ setupExpectation }}
+          </span>
+          <span
+            class="computer-progress-phase"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            {{ progressPhaseLabel }}
+          </span>
+          <span
+            class="computer-progress-track computer-progress-track-compact"
+            :class="{
+              'is-determinate': progressValueNow !== undefined,
+              'is-css-timed': progressValueNow !== undefined,
+            }"
+            role="progressbar"
+            :aria-label="progressAriaLabel"
+            :aria-valuemin="progressValueNow === undefined ? undefined : 0"
+            :aria-valuemax="progressValueNow === undefined ? undefined : 100"
+            :aria-valuenow="progressValueNow"
+          >
+            <span :key="progressAnimationKey" :style="progressFillStyle" />
+          </span>
+        </template>
+        <template v-else>
+          <UiIcon name="sparkle" size="lg" />
+          <strong v-if="state.phase === 'unconfigured'"
+            >Computer not configured</strong
+          >
+          <strong v-else-if="state.phase === 'disconnected'"
+            >Viewer disconnected</strong
+          >
+          <strong v-else>Persistent Computer</strong>
+          <span class="computer-placeholder-message">{{ state.message }}</span>
+        </template>
       </span>
     </button>
   </section>

package/src/client/ComputerViewerOverlay.vue

@@ -12,6 +12,7 @@ import {
 } from "vue";
 import { computerKey, type ComputerState } from "../shared.ts";
 import { dialogFocusWrapTarget } from "./dialog-focus.ts";
+import { computerProgressFrame, computerProgressRunKind } from "./progress.ts";
 import {
   createComputerViewerActions,
   decodeComputerViewerFrameMessageV1,
@@ -55,6 +56,24 @@ const opening = computed(
   () =>
     state.value.phase === "provisioning" || state.value.phase === "updating",
 );
+const progressRunKind = computed(() => computerProgressRunKind(state.value));
+const openingHeading = computed(() => {
+  switch (progressRunKind.value) {
+    case "cold-provision":
+      return "Setting up your computer for the first time";
+    case "resumed-provision":
+      return "Resuming computer setup";
+    case "update":
+      return "Updating your computer";
+    case "warm-wake":
+      return "Preparing computer…";
+  }
+});
+const setupExpectation = computed(() =>
+  progressRunKind.value === "cold-provision"
+    ? "This usually takes 2-3 minutes"
+    : undefined,
+);
 const progressSteps = computed(
   () =>
     state.value.progress?.steps ?? [
@@ -66,9 +85,39 @@ const progressSteps = computed(
       },
     ],
 );
+const progressPhaseLabel = computed(
+  () =>
+    state.value.progress?.provisioning?.label ??
+    state.value.progress?.steps.find((step) => step.status === "active")
+      ?.label ??
+    state.value.message,
+);
+const progressFrame = computed(() =>
+  computerProgressFrame({
+    projection: state.value,
+    elapsedMs: elapsedSeconds.value * 1_000,
+  }),
+);
+const progressValueNow = computed(() => {
+  const fraction = progressFrame.value.fraction;
+  return fraction === undefined ? undefined : Math.round(fraction * 100);
+});
+const progressFillStyle = computed(() => {
+  const fraction = progressFrame.value.fraction;
+  return fraction === undefined ? undefined : { width: `${fraction * 100}%` };
+});
+const progressAriaLabel = computed(
+  () => `${openingHeading.value}: ${progressPhaseLabel.value}`,
+);
 const progressPosition = computed(() => {
   const progress = state.value.progress;
-  return progress ? `Step ${progress.index} of ${progress.total}` : undefined;
+  if (!progress) return undefined;
+  const provisioning = progress.provisioning;
+  return provisioning
+    ? provisioning.index === 0
+      ? "Starting setup"
+      : `Phase ${provisioning.index} of ${provisioning.total}`
+    : `Step ${progress.index} of ${progress.total}`;
 });
 const statusLabel = computed(() => {
   if (hasViewer.value && frameState.value !== "connected") {
@@ -282,19 +331,27 @@ onBeforeUnmount(() => {
             >Computer not configured</strong
           >
           <template v-else-if="opening">
-            <strong>
-              {{
-                state.phase === "updating"
-                  ? "Updating computer…"
-                  : "Preparing computer…"
-              }}
-            </strong>
+            <strong>{{ openingHeading }}</strong>
+            <p v-if="setupExpectation" class="computer-setup-expectation">
+              {{ setupExpectation }}
+            </p>
+            <p
+              class="computer-progress-phase"
+              aria-live="polite"
+              aria-atomic="true"
+            >
+              {{ progressPhaseLabel }}
+            </p>
             <div
               class="computer-progress-track"
+              :class="{ 'is-determinate': progressValueNow !== undefined }"
               role="progressbar"
-              :aria-label="state.message"
+              :aria-label="progressAriaLabel"
+              :aria-valuemin="progressValueNow === undefined ? undefined : 0"
+              :aria-valuemax="progressValueNow === undefined ? undefined : 100"
+              :aria-valuenow="progressValueNow"
             >
-              <span />
+              <span :style="progressFillStyle" />
             </div>
             <div class="computer-progress-meta">
               <span v-if="progressPosition">{{ progressPosition }}</span>

package/src/client/application.test.ts

@@ -66,7 +66,7 @@ class FakeRuntime implements ComputerClientRuntime {
 
 type Phase = "idle" | "updating" | "ready" | "human-control" | "disconnected";
 
-function mountHostedProvider() {
+function mountHostedProvider(options: { stateChannel?: boolean } = {}) {
   const shell = ref({ activeBotId: "scout" });
   const calls: Array<[string, string | undefined, string | undefined]> = [];
   const runtime = new FakeRuntime();
@@ -74,18 +74,42 @@ function mountHostedProvider() {
   let hostUpdating = false;
   let controlHeld = false;
   let renewFails = false;
+  let heldClose: { release: () => void; pending: Promise<void> } | undefined;
   let state: { value: ComputerState } | undefined;
   const slots: ClientSlotRegistration[] = [];
+  let stateObserver:
+    | Parameters<
+        NonNullable<ClientPluginContext["transport"]["watchBotState"]>
+      >[1]
+    | undefined;
   const context: ClientPluginContext = {
     transport: {
       turn: () => Promise.resolve({ runId: "run", text: "", events: [] }),
+      ...(options.stateChannel
+        ? {
+            watchBotState: (
+              _botId: string,
+              observer: NonNullable<typeof stateObserver>,
+            ) => {
+              stateObserver = observer;
+              observer.status("connecting");
+              return () => {
+                stateObserver = undefined;
+              };
+            },
+          }
+        : {}),
       hostedRequest: (path, method, body) => {
         calls.push([path, method, body]);
         if (method === "POST") {
           const command = JSON.parse(body ?? "{}") as {
             commandId: string;
             type:
-              "connect" | "takeControl" | "releaseControl" | "refreshViewer";
+              | "connect"
+              | "takeControl"
+              | "releaseControl"
+              | "refreshViewer"
+              | "closeViewer";
           };
           if (command.type === "connect") {
             phase = hostUpdating ? "updating" : "ready";
@@ -101,7 +125,7 @@ function mountHostedProvider() {
           if (command.type === "refreshViewer" && renewFails) {
             phase = "disconnected";
           }
-          return Promise.resolve({
+          const receipt = {
             version: 1,
             commandId: command.commandId,
             type: command.type,
@@ -113,7 +137,11 @@ function mountHostedProvider() {
             ...(command.type === "refreshViewer" && renewFails
               ? { failure: "viewer session expired" }
               : {}),
-          });
+          };
+          if (command.type === "closeViewer" && heldClose) {
+            return heldClose.pending.then(() => receipt);
+          }
+          return Promise.resolve(receipt);
         }
         return Promise.resolve({
           version: 1,
@@ -205,6 +233,17 @@ function mountHostedProvider() {
     setReady() {
       hostUpdating = false;
     },
+    holdCloseViewer() {
+      let release = (): void => {};
+      const pending = new Promise<void>((resolve) => {
+        release = resolve;
+      });
+      heldClose = { release, pending };
+      return () => heldClose?.release();
+    },
+    channelStatus(status: "connecting" | "open" | "fallback" | "hidden") {
+      stateObserver?.status(status);
+    },
     dispose() {
       if (Array.isArray(disposers)) {
         for (const dispose of disposers.toReversed()) dispose();
@@ -228,14 +267,13 @@ function postedTypes(
 }
 
 describe("hosted Computer provider", () => {
-  test("mounts the card and strip without connecting the Computer", async () => {
+  test("mounts the card and overlay without connecting the Computer", async () => {
     const mounted = mountHostedProvider();
     await flush();
 
     expect(mounted.state.phase).toBe("idle");
     expect(mounted.slots.map((slot) => slot.slot)).toEqual([
       "frockbot.computer",
-      "frockbot.sidebar-computer",
       "frockbot.overlays",
     ]);
     expect(postedTypes(mounted.calls)).toEqual([]);
@@ -262,11 +300,15 @@ describe("hosted Computer provider", () => {
     expect(mounted.runtime.count(VIEWER_REFRESH_INTERVAL_MS)).toBe(0);
     mounted.runtime.tick(VIEWER_REFRESH_INTERVAL_MS);
     await flush();
-    expect(postedTypes(mounted.calls)).toEqual(["connect", "refreshViewer"]);
+    expect(postedTypes(mounted.calls)).toEqual([
+      "connect",
+      "refreshViewer",
+      "closeViewer",
+    ]);
     mounted.dispose();
   });
 
-  test("an updating strip click rejoins the update and lands on ready when it finishes", async () => {
+  test("an updating card click rejoins the update and lands on ready when it finishes", async () => {
     const mounted = mountHostedProvider();
     await flush();
     mounted.setUpdating();
@@ -277,7 +319,7 @@ describe("hosted Computer provider", () => {
       message: "Updating the Computer runtime",
       expanded: false,
     });
-    // A collapsed strip never asks the host anything while it updates.
+    // A collapsed viewer never asks the host anything while it updates.
     expect(postedTypes(mounted.calls)).toEqual([]);
 
     // Opening rejoins: the host still reports the update, so the phase holds
@@ -355,7 +397,13 @@ describe("hosted Computer provider", () => {
     await mounted.state.closeViewer();
     expect(
       postedTypes(mounted.calls).filter((type) => type !== "refreshControl"),
-    ).toEqual(["connect", "takeControl", "refreshViewer", "releaseControl"]);
+    ).toEqual([
+      "connect",
+      "takeControl",
+      "refreshViewer",
+      "releaseControl",
+      "closeViewer",
+    ]);
     expect(mounted.state.expanded).toBe(false);
     mounted.dispose();
   });
@@ -377,10 +425,32 @@ describe("hosted Computer provider", () => {
       "connect",
       "takeControl",
       "releaseControl",
+      "closeViewer",
     ]);
     mounted.dispose();
   });
 
+  test("the overlay collapses without waiting for the close capture", async () => {
+    const mounted = mountHostedProvider();
+    await flush();
+    await mounted.state.openViewer();
+    const releaseClose = mounted.holdCloseViewer();
+
+    // The backend files an opportunistic screenshot on close, which crosses a
+    // service binding to reach the Sprite. The User asked for the overlay to
+    // go away; it must not sit on screen until a capture comes back.
+    await mounted.state.closeViewer();
+
+    expect(mounted.state.expanded).toBe(false);
+    expect(postedTypes(mounted.calls)).toEqual(["connect", "closeViewer"]);
+    expect(mounted.runtime.count(VIEWER_REFRESH_INTERVAL_MS)).toBe(0);
+
+    releaseClose();
+    await flush();
+    expect(mounted.state.expanded).toBe(false);
+    mounted.dispose();
+  });
+
   test("polls the wake-free projection only while the tab is visible", async () => {
     const mounted = mountHostedProvider();
     await flush();
@@ -403,6 +473,18 @@ describe("hosted Computer provider", () => {
     ).toBeGreaterThan(initialReads);
     mounted.dispose();
   });
+
+  test("polls only while the WebSocket channel is in fallback", async () => {
+    const mounted = mountHostedProvider({ stateChannel: true });
+    await flush();
+
+    expect(mounted.runtime.count(PROJECTION_POLL_INTERVAL_MS)).toBe(0);
+    mounted.channelStatus("fallback");
+    expect(mounted.runtime.count(PROJECTION_POLL_INTERVAL_MS)).toBe(1);
+    mounted.channelStatus("open");
+    expect(mounted.runtime.count(PROJECTION_POLL_INTERVAL_MS)).toBe(0);
+    mounted.dispose();
+  });
 });
 
 test("the hosted provider stays absent when only the local RPC transport exists", () => {
@@ -428,10 +510,6 @@ test("the hosted provider stays absent when only the local RPC transport exists"
   const dispose = createComputerClientPlugin(new FakeRuntime())(context);
 
   expect(provides).toBe(0);
-  expect(slots).toEqual([
-    "frockbot.computer",
-    "frockbot.sidebar-computer",
-    "frockbot.overlays",
-  ]);
+  expect(slots).toEqual(["frockbot.computer", "frockbot.overlays"]);
   if (typeof dispose === "function") dispose();
 });

package/src/client/application.ts

@@ -7,19 +7,17 @@ import type { ClientPlugin } from "@frockbot/client-core";
 import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
 import { ref, watch } from "vue";
 import {
-  decodeComputerCommandReceiptV1,
+  decodeComputerCommandResponse,
   decodeComputerProjectionV1,
   type ComputerCommandTypeV1,
 } from "../protocol.js";
 import { computerKey, type ComputerState } from "../shared.js";
 import ComputerCard from "./ComputerCard.vue";
-import ComputerStrip from "./ComputerStrip.vue";
 import ComputerViewerOverlay from "./ComputerViewerOverlay.vue";
 import {
   initialComputerMachineState,
   transitionComputerState,
   type ComputerMachineEvent,
-  type ComputerMachineState,
 } from "./state-machine.js";
 import "./styles.css";
 
@@ -70,11 +68,6 @@ export function createComputerClientPlugin(
         order: 10,
         component: ComputerCard,
       }),
-      ctx.slot({
-        slot: "frockbot.sidebar-computer",
-        order: 10,
-        component: ComputerStrip,
-      }),
       ctx.slot({
         slot: "frockbot.overlays",
         order: 20,
@@ -92,6 +85,11 @@ export function createComputerClientPlugin(
     let viewerHeartbeat: unknown;
     let projectionPoll: unknown;
     let projectionPollInterval: number | undefined;
+    let stateChannelStatus: "connecting" | "open" | "fallback" | "hidden" = ctx
+      .transport.watchBotState
+      ? "connecting"
+      : "fallback";
+    let stopStateChannel: (() => void) | undefined;
     let updateRejoin: unknown;
     let controlRequest: Promise<void> | undefined;
 
@@ -164,7 +162,11 @@ export function createComputerClientPlugin(
     }
 
     function syncProjectionPoll(): void {
-      if (!shell.value.activeBotId || !runtime.isVisible()) {
+      if (
+        stateChannelStatus !== "fallback" ||
+        !shell.value.activeBotId ||
+        !runtime.isVisible()
+      ) {
         stopProjectionPoll();
         return;
       }
@@ -191,6 +193,27 @@ export function createComputerClientPlugin(
       }, interval);
     }
 
+    function watchStateChannel(selectedBotId: string | undefined): void {
+      stopStateChannel?.();
+      stopStateChannel = undefined;
+      if (!selectedBotId || !ctx.transport.watchBotState) {
+        stateChannelStatus = selectedBotId ? "fallback" : "hidden";
+        syncProjectionPoll();
+        return;
+      }
+      stopStateChannel = ctx.transport.watchBotState(selectedBotId, {
+        async invalidate(topic) {
+          if (topic !== undefined && topic !== "computer") return;
+          if (shell.value.activeBotId !== selectedBotId) return;
+          await load(selectedBotId);
+        },
+        status(status) {
+          stateChannelStatus = status;
+          syncProjectionPoll();
+        },
+      });
+    }
+
     function stopUpdateRejoin(): void {
       if (updateRejoin !== undefined) runtime.clearInterval(updateRejoin);
       updateRejoin = undefined;
@@ -245,7 +268,7 @@ export function createComputerClientPlugin(
 
     async function post(type: ComputerCommandTypeV1): Promise<void> {
       const selectedBotId = botId();
-      const receipt = decodeComputerCommandReceiptV1(
+      const receipt = decodeComputerCommandResponse(
         await request(
           `/api/bots/${encodeURIComponent(selectedBotId)}/computer/commands`,
           "POST",
@@ -296,7 +319,7 @@ export function createComputerClientPlugin(
       if (!wake) return;
       if (machine.phase === "updating") {
         await execute("connect").catch(() => {
-          // Still updating; the projection poll keeps rejoining.
+          // Still updating; the durable update-rejoin cadence continues.
         });
         return;
       }
@@ -314,7 +337,21 @@ export function createComputerClientPlugin(
         }
       }
       if (machine.takingControl) await releaseControl();
+      // Collapse first. The capture the backend files on close is
+      // opportunistic, and it crosses a service binding to take a screenshot
+      // on the Sprite; an overlay that stayed on screen waiting for that would
+      // be the stall this capture was added to make unnecessary. Post rather
+      // than execute, so a refused capture never projects a failure onto a
+      // Computer the User has already stopped watching.
       apply({ type: "viewer-collapsed" });
+      void (async () => {
+        try {
+          await post("closeViewer");
+          await load();
+        } catch {
+          // The durable projection remains the only truth about the Computer.
+        }
+      })();
     }
 
     function takeControl(): Promise<void> {
@@ -368,7 +405,7 @@ export function createComputerClientPlugin(
         stopUpdateRejoin();
         machine = initialComputerMachineState();
         Object.assign(state.value, machine);
-        syncProjectionPoll();
+        watchStateChannel(selectedBotId);
         if (!selectedBotId || !runtime.isVisible()) return;
         void load(selectedBotId).catch((error) =>
           apply({ type: "failed", message: errorMessage(error) }),
@@ -395,6 +432,7 @@ export function createComputerClientPlugin(
         stopVisibility();
         stopControlHeartbeat();
         stopViewerHeartbeat();
+        stopStateChannel?.();
         stopProjectionPoll();
         stopUpdateRejoin();
       },

package/src/client/index.ts

@@ -2,7 +2,6 @@
 
 import type { Context } from "@cordisjs/client";
 import ComputerCard from "./ComputerCard.vue";
-import ComputerStrip from "./ComputerStrip.vue";
 import ComputerViewerOverlay from "./ComputerViewerOverlay.vue";
 import "./styles.css";
 
@@ -13,11 +12,6 @@ const computerWebPlugin = (ctx: Context) => {
     order: 10,
     component: ComputerCard,
   });
-  ctx.client.router.slot({
-    type: "frockbot.sidebar-computer",
-    order: 10,
-    component: ComputerStrip,
-  });
   ctx.client.router.slot({
     type: "frockbot.overlays",
     order: 20,