@frockbot/plugin-shell 0.3.11 → 0.3.12

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,93 @@ 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 one Turn still going, if any. Only one runs at a time. */
+const workingMessage = computed(() =>
+  messages.value.find(
+    (message) => message.role === "assistant" && message.status === "streaming",
+  ),
+);
+
+function isWorking(message: WebChatMessage): boolean {
+  return message.id === workingMessage.value?.id;
+}
+
+const workingSample = computed(() => {
+  const message = workingMessage.value;
+  if (message === undefined) return undefined;
+  return activityTrailSampleV1({
+    text: message.text,
+    toolStatuses: message.tools.map((tool) => tool.status),
+    sends: message.sends.length,
+    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 +628,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 +681,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 +776,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 +815,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 +838,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 +917,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 +1035,7 @@ function handleComposerKeydown(event: KeyboardEvent): void {
     }
     if (event.key === "Escape") {
       event.preventDefault();
-      closeSkillPopover();
+      dismissSkillPopover();
       return;
     }
     if (event.key === "Enter" || event.key === "Tab") {
@@ -857,11 +1124,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 +1160,50 @@ 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.
-              -->
+                  The working state. Until the model has produced a word there
+                  was nothing beside the avatar at all, for twenty seconds and
+                  occasionally for two minutes, and the only other signal — the
+                  composer's stop button — is at the far end of the window from
+                  where the reply will appear.
+                -->
+                <div
+                  v-else-if="message.status === 'streaming'"
+                  class="message-bubble message-working"
+                  role="status"
+                  aria-label="Working on a reply"
+                >
+                  <span class="working-dots" aria-hidden="true">
+                    <i></i><i></i><i></i>
+                  </span>
+                </div>
+                <!--
+                  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>
@@ -1054,6 +1324,46 @@ function handleComposerKeydown(event: KeyboardEvent): void {
                   </button>
                 </div>
               </div>
+              <!--
+                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 the 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.
+
+                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="isWorking(message)"
+                  class="bot-working"
+                  role="status"
+                  aria-label="Working"
+                >
+                  <div
+                    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" />
+                  </div>
+                  <UiActivityTrail
+                    class="bot-working-indicator"
+                    :rate="trailRate"
+                    :bursts="trailBursts"
+                    :state="trailState"
+                  />
+                </div>
+              </Transition>
             </template>
             <div v-else class="message-bubble">{{ message.text }}</div>
           </article>
@@ -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"