@frockbot/plugin-shell 0.3.11 → 0.3.13

package/src/client/FrockBotApp.vue

@@ -2,11 +2,12 @@
 import { clientSurfaceRegistryKey } from "@frockbot/client-core";
 import {
   announceUiAnchor,
-  UiActivityRing,
+  UiActivityTrail,
   UiIcon,
   UiIconButton,
   UiMarkdown,
   UiSidebarOverlay,
+  type ActivityTrailBurstEventV1,
 } from "@frockbot/client-ui";
 import {
   computed,
@@ -27,7 +28,13 @@ import {
   type WebToolActivity,
 } from "../shared.js";
 import { ComposerDraftStore } from "./composer-draft.js";
-import { activityRingV1 } from "./activity-ring.js";
+import {
+  activityTrailBeginV1,
+  activityTrailSampleV1,
+  activityTrailStepV1,
+  type ActivityTrailMemoryV1,
+  type ActivityTrailStateV1,
+} from "./activity-trail.js";
 import {
   TURN_TEXT_MAX_CHARACTERS_V1,
   turnTextCounterVisibleV1,
@@ -39,6 +46,7 @@ import AppletCanvas from "./AppletCanvas.vue";
 import PackageIframeHost from "./PackageIframeHost.vue";
 import type { ClientSkillCatalogEntryV1 } from "../skill-protocol.js";
 import {
+  keptSkillHighlightV1,
   nextSkillHighlightV1,
   rankSkillCandidatesV1,
   SkillAttachmentStore,
@@ -255,6 +263,20 @@ const skillStore = new SkillAttachmentStore();
 const attachedSkills = ref<readonly ClientSkillCatalogEntryV1[]>([]);
 const skillPopover = ref<SkillPopoverStateV1 | undefined>(undefined);
 const skillHighlight = ref(0);
+/*
+ * The trigger the User has dismissed with Escape, by its index in the text.
+ *
+ * The popover is derived from the composer's text on every keyup, so closing it
+ * while the `/` is still typed used to last exactly until the Escape key came
+ * back up and the derivation opened it again. A dismissal is state the text
+ * cannot express, so it is held here: that one trigger stays shut, and typing
+ * on past it keeps it shut, until the `/` itself goes and a new trigger begins.
+ *
+ * Declared beside the state it guards rather than beside the functions that
+ * read it: `closeSkillPopover` is called from a watcher that runs during setup,
+ * so a `const` further down the file is still in its dead zone by then.
+ */
+const skillDismissedAt = ref<number | undefined>(undefined);
 const skillCandidates = computed(() =>
   skillPopover.value
     ? rankSkillCandidatesV1(
@@ -287,6 +309,8 @@ const hasBot = computed(() => Boolean(state.value.activeBotId));
  * inventing "Model unavailable" of its own.
  */
 const threadHeading = computed(() => {
+  // An unreadable Bot list is not an empty one.
+  if (state.value.botsUnavailable) return "Couldn't load your Bots.";
   if (!hasBot.value) return "No Bots yet.";
   if (!botName.value) return state.value.modelReady ? "Ready." : "Not ready.";
   return state.value.modelReady
@@ -294,6 +318,9 @@ const threadHeading = computed(() => {
     : `${botName.value} isn't ready.`;
 });
 const threadHint = computed(() => {
+  if (state.value.botsUnavailable) {
+    return "Check your connection, then try again.";
+  }
   if (!hasBot.value) return "Add your first sheep to start a conversation.";
   if (state.value.modelReady) {
     return "Say anything to get started.";
@@ -432,25 +459,6 @@ function taskChipsOf(message: WebChatMessage): Array<{
   });
 }
 
-/**
- * The activity ring for one assistant line.
- *
- * A Turn that spends a minute making tool calls used to show the User nothing
- * but a breathing avatar, and then — briefly — a list of tool names, which put
- * the model's plumbing into a conversation. The ring is neither: it pulses
- * while the Turn runs and ticks forward for every step that settles, so the
- * account of an ordinary tool call is a segment of a stroke and no words at
- * all. The rule lives in `activity-ring.ts`; this only reads the message.
- */
-function activityRingOf(
-  message: WebChatMessage,
-): ReturnType<typeof activityRingV1> {
-  return activityRingV1({
-    toolStatuses: message.tools.map((tool) => tool.status),
-    status: message.status,
-  });
-}
-
 /** Which chips the User has opened. Local, and per chip. */
 const expandedTasks = ref(new Set<string>());
 
@@ -503,6 +511,104 @@ const messages = computed(() => {
     .map((entry) => entry.message);
 });
 
+/**
+ * The comet trail: what the Turn the User is watching is actually doing.
+ *
+ * A Turn that spends a minute making tool calls used to show the User nothing
+ * but a breathing avatar, and then — briefly — a list of tool names, which put
+ * the model's plumbing into a conversation. The trail is neither. Particles
+ * stream off the right of the working Bot's avatar at the rate text is
+ * arriving, burst when a tool call starts or settles, flash when a reply
+ * lands, and trickle while the Turn waits on the model. Nobody is told which
+ * tool ran; the transcript stays a conversation.
+ *
+ * The mapping is `activity-trail.ts`, which is pure. This is the part that
+ * cannot be: reading the open Turn out of the projection, and keeping a slow
+ * tick so the trickle can start when a Turn goes quiet without anything
+ * arriving to notice it.
+ */
+
+/** How often the trail is re-read when nothing has changed. */
+const TRAIL_TICK_MS = 400;
+
+/** Bursts kept in the log handed to the canvas. Older ones have long fired. */
+const TRAIL_BURST_LOG = 24;
+
+const trailRate = ref(0);
+const trailState = ref<ActivityTrailStateV1>("ended");
+const trailBursts = ref<ActivityTrailBurstEventV1[]>([]);
+let trailMemory: ActivityTrailMemoryV1 | null = null;
+let trailRunId: string | undefined;
+let trailSeq = 0;
+let trailTick = 0;
+
+/**
+ * The Turn still going, if any. Only one executes at a time, but a Turn queued
+ * behind it is streaming-shaped too and has produced nothing yet, so the
+ * executing one wins: the trail keeps reading the words that are arriving
+ * rather than restarting on a Turn that has not begun.
+ */
+const workingMessage = computed(() => {
+  const streaming = messages.value.filter(
+    (message) => message.role === "assistant" && message.status === "streaming",
+  );
+  return streaming.find((message) => !message.pending) ?? streaming.at(-1);
+});
+
+const workingSample = computed(() => {
+  const message = workingMessage.value;
+  if (message === undefined) return undefined;
+  return activityTrailSampleV1({
+    text: message.text,
+    toolStatuses: message.tools.map((tool) => tool.status),
+    // Counted across the whole Turn, because every send the Bot delivers is a
+    // message of its own and the working line carries none of them. A send is
+    // still a beat the trail has to feel.
+    sends: messages.value.reduce(
+      (total, candidate) =>
+        candidate.runId === message.runId
+          ? total + candidate.sends.length
+          : total,
+      0,
+    ),
+    status: message.status,
+  });
+});
+
+function stepTrail(): void {
+  const sample = workingSample.value;
+  const message = workingMessage.value;
+  const now = Date.now();
+  if (sample === undefined || message === undefined) {
+    trailMemory = null;
+    trailRunId = undefined;
+    trailRate.value = 0;
+    trailState.value = "ended";
+    return;
+  }
+  // A second Turn starts from nothing rather than inheriting the first one's
+  // character count, which would otherwise read as a huge negative delta.
+  if (trailMemory === null || trailRunId !== message.runId) {
+    trailRunId = message.runId;
+    trailMemory = activityTrailBeginV1(sample, now);
+  }
+  const stepped = activityTrailStepV1(trailMemory, sample, now);
+  trailMemory = stepped.memory;
+  trailRate.value = stepped.plan.rate;
+  trailState.value = stepped.plan.state;
+  if (stepped.plan.bursts.length === 0) return;
+  const log = [...trailBursts.value];
+  for (const burst of stepped.plan.bursts) {
+    trailSeq += 1;
+    log.push({ seq: trailSeq, ...burst });
+  }
+  trailBursts.value = log.slice(-TRAIL_BURST_LOG);
+}
+
+watch(workingSample, () => {
+  stepTrail();
+});
+
 /*
  * One anchor per Turn, on its first visible line, so a deep link resolves to
  * exactly one element. A Turn shows as two lines — the prompt and the reply —
@@ -533,16 +639,45 @@ const prefersReducedMotion =
   typeof window !== "undefined" &&
   typeof window.matchMedia === "function" &&
   window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/*
+ * A conversation opens at its end, not at its start with a scroll after it.
+ *
+ * While this is true the thread is laid out and measured but not painted, so
+ * the frames where it sits at the top — and where a late-measuring code block
+ * or image moves it — are never shown. It is turned off inside a
+ * `requestAnimationFrame` callback, which runs after layout and before the
+ * paint of that same frame, so the first frame the reader sees is the last
+ * Turn and there is no animation between the two.
+ */
+const threadSettling = ref(true);
+/*
+ * True until this Bot's transcript has arrived. A Bot the cache was not
+ * holding opens empty and fills in from the read, and that arrival is an
+ * opening rather than new content: it is placed without a paint in between,
+ * the same as a restored one, instead of scrolling down where it can be seen.
+ */
+const threadOpening = ref(true);
 
 function onThreadScroll(): void {
   const element = thread.value;
   if (!element) return;
+  // A scroll the settling pass caused is not the reader moving.
+  if (threadSettling.value) return;
   pinnedToLatest.value =
     element.scrollHeight - element.scrollTop - element.clientHeight <=
     nearBottomThreshold;
   if (pinnedToLatest.value) hasUnseenBelow.value = false;
 }
 
+/** Puts the thread at its end now, without a scroll the reader can see. */
+function pinToLatest(): void {
+  const element = thread.value;
+  if (!element) return;
+  element.scrollTop = element.scrollHeight;
+  pinnedToLatest.value = true;
+  hasUnseenBelow.value = false;
+}
+
 async function scrollToLatest(
   behavior: ScrollBehavior = "smooth",
 ): Promise<void> {
@@ -557,6 +692,76 @@ async function scrollToLatest(
   hasUnseenBelow.value = false;
 }
 
+/**
+ * Opens a transcript where the reader left it, before the first paint.
+ *
+ * `viewport` is where they were when they switched away from this Bot;
+ * without one — or with one that was at the end — the thread opens at the
+ * end, which is where a conversation is read from.
+ */
+async function settleThread(viewport?: {
+  scrollTop: number;
+  pinnedToLatest: boolean;
+}): Promise<void> {
+  threadSettling.value = true;
+  await nextTick();
+  const place = (): void => {
+    const element = thread.value;
+    if (!element) return;
+    if (viewport && !viewport.pinnedToLatest) {
+      element.scrollTop = viewport.scrollTop;
+      pinnedToLatest.value = false;
+      return;
+    }
+    pinToLatest();
+  };
+  place();
+  /*
+   * Whichever comes first. The frame callback is the one that matters — it
+   * runs after layout and before that frame is painted, which is what makes
+   * the opening invisible. The timer is a floor under it: a thread that is
+   * hidden is a thread nobody can read or measure, so a browser that
+   * withholds frames from a backgrounded or throttled page must not be able
+   * to leave it that way.
+   */
+  let revealed = false;
+  const reveal = (): void => {
+    if (revealed) return;
+    revealed = true;
+    // Layout has happened: anything that measured late — a rendered code
+    // block, an avatar — has its real height now, so this is the placement
+    // the reader actually sees.
+    place();
+    threadSettling.value = false;
+  };
+  if (typeof requestAnimationFrame === "function")
+    requestAnimationFrame(reveal);
+  setTimeout(reveal, 120);
+}
+
+/** Where the reader has this Bot's thread, for the cache to hold. */
+function threadViewport(): { scrollTop: number; pinnedToLatest: boolean } {
+  const element = thread.value;
+  return {
+    scrollTop: element?.scrollTop ?? 0,
+    pinnedToLatest: pinnedToLatest.value,
+  };
+}
+
+/*
+ * Content that changes height after it is drawn — a loaded image, Markdown
+ * that reflowed — must not move a reader who is at the end away from it.
+ * Every message is observed, because the one that grows is usually the last
+ * but is not always.
+ */
+let threadResize: ResizeObserver | undefined;
+function observeThreadContent(): void {
+  const element = thread.value;
+  if (!element || !threadResize) return;
+  threadResize.disconnect();
+  for (const child of element.children) threadResize.observe(child);
+}
+
 /*
  * Settings deep links. `?settings=<surface>#<anchor>` names a registered
  * surface or the default Bot panel and one row inside it; the shell opens it and announces the
@@ -582,16 +787,33 @@ const applySettingsDeepLink = (): void => {
 
 onMounted(() => {
   void web.value.loadPluginCatalog();
-  void scrollToLatest("auto");
+  if (typeof ResizeObserver === "function") {
+    threadResize = new ResizeObserver(() => {
+      if (pinnedToLatest.value || threadSettling.value) pinToLatest();
+    });
+    observeThreadContent();
+  }
+  threadOpening.value = messages.value.length === 0;
+  void settleThread(
+    state.value.activeBotId
+      ? web.value.transcripts.viewportFor(state.value.activeBotId)
+      : undefined,
+  );
   void nextTick(syncComposerHeight);
   applySettingsDeepLink();
   window.addEventListener("popstate", applySettingsDeepLink);
   window.addEventListener("hashchange", applySettingsDeepLink);
   phoneLayoutMedia?.addEventListener("change", onPhoneLayoutChange);
   window.addEventListener("keydown", onRootKeydown);
+  // The trail is event-driven, but "nothing has arrived for a second and a
+  // half" is not an event: this slow tick is what notices it.
+  trailTick = window.setInterval(stepTrail, TRAIL_TICK_MS);
 });
 
 onBeforeUnmount(() => {
+  window.clearInterval(trailTick);
+  threadResize?.disconnect();
+  threadResize = undefined;
   window.removeEventListener("popstate", applySettingsDeepLink);
   window.removeEventListener("hashchange", applySettingsDeepLink);
   phoneLayoutMedia?.removeEventListener("change", onPhoneLayoutChange);
@@ -604,6 +826,19 @@ watch(
   () =>
     [messages.value.length, messages.value.at(-1)?.text.length ?? 0] as const,
   ([count], [previousCount]) => {
+    void nextTick(observeThreadContent);
+    // A transcript still settling is placed by `settleThread`, which is the
+    // path that never shows the move.
+    if (threadSettling.value) return;
+    if (threadOpening.value && count > 0) {
+      threadOpening.value = false;
+      void settleThread(
+        state.value.activeBotId
+          ? web.value.transcripts.viewportFor(state.value.activeBotId)
+          : undefined,
+      );
+      return;
+    }
     if (!pinnedToLatest.value) {
       hasUnseenBelow.value = true;
       return;
@@ -614,12 +849,21 @@ watch(
 );
 watch(
   () => state.value.activeBotId,
-  () => {
+  (botId, previousBotId) => {
     // Choosing a Bot is what the drawer is for, so it closes behind the choice
     // rather than covering the conversation it just opened.
     closeNav();
-    pinnedToLatest.value = true;
-    void scrollToLatest("auto");
+    // Pre-flush: the thread on screen is still the Bot being left, so this is
+    // the scroll position to come back to.
+    if (previousBotId) {
+      web.value.transcripts.rememberViewport(previousBotId, threadViewport());
+    }
+    // A restored transcript is already here, so this switch is not opening on
+    // an empty thread and the arrival below is not one either.
+    threadOpening.value = messages.value.length === 0;
+    void settleThread(
+      botId ? web.value.transcripts.viewportFor(botId) : undefined,
+    );
     // A Skill belongs to one Bot's instruction root, so a switch drops both
     // the attached refs and the catalog they came from.
     skillStore.take();
@@ -684,16 +928,50 @@ function syncAttachedSkills(): void {
 function closeSkillPopover(): void {
   skillPopover.value = undefined;
   skillHighlight.value = 0;
+  skillDismissedAt.value = undefined;
+}
+
+function dismissSkillPopover(): void {
+  const at = skillPopover.value?.at;
+  closeSkillPopover();
+  skillDismissedAt.value = at;
 }
 
 function refreshSkillPopover(): void {
   const element = composerInput.value;
   if (!element) return closeSkillPopover();
+  // Read the highlighted Skill before the query moves, so the refilter below
+  // can put the highlight back on the same Skill rather than on row zero.
+  const highlighted = skillCandidates.value[skillHighlight.value]?.entry.ref;
   const open = skillPopoverForV1(draft.value, element.selectionStart ?? 0);
+  if (!open) return closeSkillPopover();
+  if (skillDismissedAt.value === open.at) {
+    skillPopover.value = undefined;
+    skillHighlight.value = 0;
+    return;
+  }
   skillPopover.value = open;
-  skillHighlight.value = 0;
+  skillHighlight.value = keptSkillHighlightV1(
+    highlighted,
+    skillCandidates.value,
+  );
 }
 
+/*
+ * The popover is bounded and scrolls, so a highlight moved past its edge has
+ * to bring its row with it; `nearest` leaves a row that is already visible
+ * exactly where it is.
+ */
+const skillPopoverList = ref<HTMLUListElement | undefined>(undefined);
+watch(skillHighlight, (index) => {
+  void nextTick(() => {
+    const option = skillPopoverList.value?.children.item(index);
+    if (option instanceof HTMLElement && option.scrollIntoView) {
+      option.scrollIntoView({ block: "nearest" });
+    }
+  });
+});
+
 function attachSkill(entry: ClientSkillCatalogEntryV1): void {
   const open = skillPopover.value;
   if (!open) return;
@@ -768,7 +1046,7 @@ function handleComposerKeydown(event: KeyboardEvent): void {
     }
     if (event.key === "Escape") {
       event.preventDefault();
-      closeSkillPopover();
+      dismissSkillPopover();
       return;
     }
     if (event.key === "Enter" || event.key === "Tab") {
@@ -857,11 +1135,23 @@ function handleComposerKeydown(event: KeyboardEvent): void {
             <small>{{ state.modelLabel }}</small>
           </div>
           <k-slot name="frockbot.header-actions" />
+          <!--
+            A phone has no right panel on screen, so the controls that live in
+            its header — the settings gear above all, the only route to
+            Routines, the audit log and template import — have nowhere to be.
+            They come here instead, where the panel's own header would be at a
+            desktop width. The panel keeps them at every other size, so they
+            are never drawn twice.
+          -->
+          <div v-if="phoneLayout && !rightPanelOpen" class="topbar-bot-actions">
+            <k-slot name="frockbot.bot-actions" />
+          </div>
         </header>
 
         <section
           ref="thread"
           class="thread"
+          :class="{ 'thread-settling': threadSettling }"
           aria-live="polite"
           @scroll.passive="onThreadScroll"
         >
@@ -881,59 +1171,33 @@ function handleComposerKeydown(event: KeyboardEvent): void {
               { 'message-pending': message.pending },
             ]"
           >
-            <p v-if="message.role === 'system'" class="message-system-line">
-              {{ message.text }}
-            </p>
+            <!--
+              A system line is the product speaking, not the Bot, so it has no
+              avatar and no bubble — and when the thing it reports is something
+              the person can act on, it carries the same Retry the failed
+              assistant row does rather than leaving them to find the composer.
+            -->
+            <template v-if="message.role === 'system'">
+              <p class="message-system-line">{{ message.text }}</p>
+              <button
+                v-if="message.retry === 'resend'"
+                type="button"
+                class="message-retry"
+                :disabled="!canSend"
+                @click="sendMessage()"
+              >
+                Retry
+              </button>
+            </template>
             <template v-else-if="message.role === 'assistant'">
-              <!--
-                The Bot's own avatar, which appears only while it is working.
-                Every line in this transcript is from the same Bot — there are
-                no group conversations yet (issue 152) — so a sheep beside a
-                settled reply named nobody the reader did not already know. The
-                one beside a running Turn carries the ring, which is the whole
-                point of drawing it.
-
-                The art comes from whichever Package owns Bot identity; when no
-                Package fills the slot the sparkle tile is the only child and
-                shows through.
-              -->
-              <Transition name="activity-ring">
-                <div
-                  v-if="activityRingOf(message).active"
-                  class="bot-avatar bot-avatar-live"
-                  :class="{ 'bot-avatar-waiting': !message.text }"
-                >
-                  <span class="bot-avatar-fallback" aria-hidden="true"
-                    ><UiIcon name="sparkle" size="sm"
-                  /></span>
-                  <k-slot name="frockbot.bot-avatar" />
-                  <!--
-                    What the Bot is doing, while it is doing it — a stroke round
-                    the sheep that pulses and ticks a segment for every step the
-                    Turn settles. It completes and fades with the avatar when
-                    the Turn settles, and it never names a tool: the transcript
-                    stays a conversation.
-                  -->
-                  <UiActivityRing
-                    :progress="activityRingOf(message).progress"
-                    :running="activityRingOf(message).running"
-                    :laps="activityRingOf(message).laps"
-                  />
-                </div>
-              </Transition>
-              <!--
-                Everything the Turn produced stacks in one column. While the Bot
-                is working the avatar is beside it; once the Turn settles the
-                column is the whole row and starts at the transcript's edge.
-              -->
               <div class="message-column">
                 <div v-if="message.text" class="message-bubble">
                   <UiMarkdown :text="message.text" />
                 </div>
                 <!--
-                Why the Turn ends where it does, under whatever it had already
-                said rather than in place of it.
-              -->
+                  Why the Turn ends where it does, under whatever it had
+                  already said rather than in place of it.
+                -->
                 <p v-if="message.notice" class="message-notice">
                   {{ message.notice }}
                 </p>
@@ -1057,6 +1321,52 @@ function handleComposerKeydown(event: KeyboardEvent): void {
             </template>
             <div v-else class="message-bubble">{{ message.text }}</div>
           </article>
+          <!--
+            The working row: the Bot's own avatar on its own line at the end of
+            the thread, with the comet trail streaming off to its right. It
+            appears only while a Turn is running. Every line in this transcript
+            is from the same Bot — there are no group conversations yet (issue
+            152) — so a sheep beside a settled reply named nobody the reader did
+            not already know; the one under a running Turn is the whole account
+            of what the Bot is doing.
+
+            It is a child of the thread rather than of the running Turn's
+            article, so it is always the last thing in the transcript. Send a
+            message while the Bot is still winding down and the new message
+            lands above the sheep, where a reader looking at the bottom of the
+            thread expects the newest thing to be — not underneath a running
+            Turn that is already over.
+
+            The art comes from whichever Package owns Bot identity; when no
+            Package fills the slot the sparkle tile is the only child and shows
+            through. The row carries the status role, and the canvas beside it
+            is hidden from assistive technology: the trail is a picture of a
+            fact the label already states.
+          -->
+          <Transition name="bot-working">
+            <div
+              v-if="workingMessage"
+              class="bot-working"
+              role="status"
+              aria-label="Working"
+            >
+              <div
+                class="bot-avatar bot-avatar-live"
+                :class="{ 'bot-avatar-waiting': !workingMessage.text }"
+              >
+                <span class="bot-avatar-fallback" aria-hidden="true"
+                  ><UiIcon name="sparkle" size="sm"
+                /></span>
+                <k-slot name="frockbot.bot-avatar" />
+              </div>
+              <UiActivityTrail
+                class="bot-working-indicator"
+                :rate="trailRate"
+                :bursts="trailBursts"
+                :state="trailState"
+              />
+            </div>
+          </Transition>
         </section>
 
         <Transition name="banner">
@@ -1100,6 +1410,7 @@ function handleComposerKeydown(event: KeyboardEvent): void {
         >
           <ul
             v-if="skillPopoverOpen"
+            ref="skillPopoverList"
             id="skill-popover"
             class="skill-popover"
             role="listbox"
@@ -1250,7 +1561,18 @@ function handleComposerKeydown(event: KeyboardEvent): void {
               -->
               <AppletCanvas v-if="appletCanvasOpen" />
               <template v-else>
-                <header class="right-panel-header">
+                <!--
+                  The Bot's own controls sit wherever they can actually be
+                  pressed, and in exactly one place: here at desktop widths and
+                  whenever the panel is over the conversation, in the topbar on
+                  a phone with the panel closed. Two gears with the same name
+                  is two answers to "where is Bot settings", and one of them is
+                  always the one behind the open drawer.
+                -->
+                <header
+                  v-if="!phoneLayout || rightPanelOpen"
+                  class="right-panel-header"
+                >
                   <k-slot name="frockbot.bot-actions" />
                 </header>
                 <div class="right-panel-body">
@@ -1282,6 +1604,14 @@ function handleComposerKeydown(event: KeyboardEvent): void {
         </div>
       </aside>
 
+      <!--
+        The panel's own toggle. It stays at every width: on a phone the panel
+        is a drawer, and this is the only way to open it — the Bot's own
+        controls moved to the topbar (above), but the panel holds more than
+        they do. What made it read wrongly on a phone was being the *only*
+        survivor of that pair, saying "hide" beside a gear that had nowhere
+        to be.
+      -->
       <div class="window-actions">
         <UiIconButton
           class="panel-toggle"