daily-focus 0.1.1-dev.9 → 0.2.0-dev.13

package/README.md

@@ -41,7 +41,8 @@ daily-focus service
 
 Or, on a Mac, let the menu bar app keep it running: it starts the dashboard at login,
 shows the brief's age at a glance, and tells you when a new brief arrives. It carries
-everything it needs, Node.js included. See
+everything it needs, Node.js included, and installs a newer dashboard from its menu
+without a new download of the app. See
 [SETUP.md](SETUP.md#keep-the-dashboard-running).
 
 [SETUP.md](SETUP.md) covers each step, the integrations and every setting. The

package/SETUP.md

@@ -324,6 +324,20 @@ Download `Daily-Focus.dmg` from the [latest release](https://github.com/watson/d
 open it and drag the app to Applications, then open it from there.
 It has no window and no Dock icon: look for it in the menu bar.
 
+The dashboard updates without a new disk image. **Updates** in the menu shows two
+versions, the app's and the dashboard's, and which releases to take: **Stable
+Releases**, or **Development Builds**, a build of every change as soon as it is
+merged. A few times a day the app asks npm for the newest release, and when it
+finds a newer dashboard, it posts a notification and the menu offers **Install
+Dashboard**. Installing downloads it from the GitHub release, a few hundred
+kilobytes, and runs it only if it is signed by the same developer as the app
+and nothing in it has changed. The dashboard restarts into it once the morning
+agent and the assistant aren't busy. If it doesn't start, the app goes back to the
+one it had and says so. The app itself changes less often; when a release brings a
+new one, or a dashboard that needs one, the menu links to its disk image instead.
+A dashboard that `daily-focus service` or a terminal runs is updated the way it was
+installed, not by the app.
+
 To build it yourself from a checkout:
 
 ```sh

package/dist/{audit-TPBQFSL3.js → audit-JEJRPW7R.js}

@@ -8,7 +8,7 @@ import {
   readArchiveIndex,
   resolveItems,
   runContractChecks
-} from "./chunk-CQ53JYUU.js";
+} from "./chunk-ISUDD7OB.js";
 import {
   BRIEF_REFRESH_GRACE_HOURS,
   describeSchedule,
@@ -17,10 +17,10 @@ import {
   nextRunDate,
   resolveSchedule,
   runsOn
-} from "./chunk-G4K24I4M.js";
+} from "./chunk-Z57EHQZV.js";
 import {
   command
-} from "./chunk-6VWWJZKJ.js";
+} from "./chunk-BC2W7NND.js";
 import {
   workingMsBetween
 } from "./chunk-EXGTFXNV.js";

package/dist/{chunk-6VWWJZKJ.js → chunk-BC2W7NND.js}

@@ -1,6 +1,7 @@
 // src/install.ts
+import { readFileSync } from "node:fs";
 import { homedir } from "node:os";
-import { resolve, sep } from "node:path";
+import { dirname, join, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 var PACKAGED = import.meta.url.endsWith(".js");
 var ROOT = resolve(import.meta.dirname, "..");
@@ -13,7 +14,20 @@ function ranDirectly(url) {
   const file = fileURLToPath(url);
   return file.endsWith(".ts") && process.argv[1] !== void 0 && resolve(process.argv[1]) === file;
 }
-var APP_CALENDAR_APP = ROOT.includes(`.app${sep}Contents${sep}Resources${sep}`) ? resolve(ROOT, "..", "..", "Helpers", "Daily Focus Calendar.app") : null;
+function packageVersion(root = ROOT) {
+  try {
+    return JSON.parse(readFileSync(join(root, "package.json"), "utf8")).version ?? "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+function appCalendarApp(execPath, root) {
+  const contents = `.app${sep}Contents${sep}`;
+  if (dirname(execPath).endsWith(`${contents}Helpers`)) return resolve(dirname(execPath), "Daily Focus Calendar.app");
+  if (root.includes(`${contents}Resources${sep}`)) return resolve(root, "..", "..", "Helpers", "Daily Focus Calendar.app");
+  return null;
+}
+var APP_CALENDAR_APP = appCalendarApp(process.execPath, ROOT);
 var USER_CALENDAR_APP = resolve(homedir(), "Library", "Application Support", "Daily Focus", "Daily Focus Calendar.app");
 
 export {
@@ -22,6 +36,7 @@ export {
   IN_NPX_CACHE,
   command,
   ranDirectly,
+  packageVersion,
   APP_CALENDAR_APP,
   USER_CALENDAR_APP
 };

package/dist/{chunk-CQ53JYUU.js → chunk-ISUDD7OB.js}

@@ -4,7 +4,7 @@ import {
   nextRunDate,
   resolveSchedule,
   runsOn
-} from "./chunk-G4K24I4M.js";
+} from "./chunk-Z57EHQZV.js";
 import {
   calendarDaysBetween,
   isDateOnly,

package/dist/{chunk-G4K24I4M.js → chunk-Z57EHQZV.js}

@@ -1,7 +1,7 @@
 import {
   APP_CALENDAR_APP,
   USER_CALENDAR_APP
-} from "./chunk-6VWWJZKJ.js";
+} from "./chunk-BC2W7NND.js";
 import {
   isSameLocalDay,
   localDateKey,

package/dist/cli.js

@@ -2,12 +2,13 @@
 import {
   IN_NPX_CACHE,
   ROOT,
-  USER_CALENDAR_APP
-} from "./chunk-6VWWJZKJ.js";
+  USER_CALENDAR_APP,
+  packageVersion
+} from "./chunk-BC2W7NND.js";
 
 // src/cli.ts
 import { execFile, spawn } from "node:child_process";
-import { readFileSync, rmSync } from "node:fs";
+import { rmSync } from "node:fs";
 import { cp, mkdir, mkdtemp, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
@@ -36,13 +37,6 @@ Options
   -h, --help        print this
 
 Everything else is set up in the dashboard itself.`;
-function version() {
-  try {
-    return JSON.parse(readFileSync(join(ROOT, "package.json"), "utf8")).version ?? "unknown";
-  } catch {
-    return "unknown";
-  }
-}
 function openInBrowser(url) {
   const [command, args] = process.platform === "darwin" ? ["open", [url]] : process.platform === "win32" ? ["cmd", ["/c", "start", "", url]] : ["xdg-open", [url]];
   const child = spawn(command, args, { stdio: "ignore", detached: true });
@@ -78,7 +72,7 @@ async function demo(open) {
   });
 }
 async function start(open, onStarted) {
-  const { runServer } = await import("./server-O5GF3TRI.js");
+  const { runServer } = await import("./server-UIZFO5EF.js");
   await runServer({
     onStarted: (url) => {
       onStarted?.(url);
@@ -136,7 +130,7 @@ async function main(argv) {
     return;
   }
   if (values.version) {
-    console.log(version());
+    console.log(packageVersion());
     return;
   }
   if (values.data !== void 0) process.env.DAILY_FOCUS_DATA = values.data;
@@ -174,20 +168,20 @@ async function main(argv) {
       }
       return start(open);
     case "service": {
-      const { main: service } = await import("./service-ILBMIZB7.js");
+      const { main: service } = await import("./service-YVGOLKYX.js");
       process.exitCode = await service(values.remove ? ["--remove"] : []);
       return;
     }
     // These three are scripts that do their work as they load, and read their
     // own flags from the command line.
     case "init":
-      await import("./init-ZJCI2723.js");
+      await import("./init-YTIXVWOB.js");
       return;
     case "audit":
-      await import("./audit-TPBQFSL3.js");
+      await import("./audit-JEJRPW7R.js");
       return;
     case "seed":
-      await import("./seed-S5ZU6EIO.js");
+      await import("./seed-C2BLE6P2.js");
       return;
     case "build-calendar":
       return buildCalendar();

package/dist/{init-ZJCI2723.js → init-YTIXVWOB.js}

@@ -8,11 +8,11 @@ import {
 } from "./chunk-QKT2FAB5.js";
 import {
   loadConfig
-} from "./chunk-G4K24I4M.js";
+} from "./chunk-Z57EHQZV.js";
 import {
   PACKAGED,
   command
-} from "./chunk-6VWWJZKJ.js";
+} from "./chunk-BC2W7NND.js";
 import "./chunk-EXGTFXNV.js";
 
 // scripts/init.ts

package/dist/{seed-S5ZU6EIO.js → seed-C2BLE6P2.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-NDWZUZJE.js";
 import {
   Store
-} from "./chunk-CQ53JYUU.js";
+} from "./chunk-ISUDD7OB.js";
 import {
   loadConfig
-} from "./chunk-G4K24I4M.js";
+} from "./chunk-Z57EHQZV.js";
 import {
   command
-} from "./chunk-6VWWJZKJ.js";
+} from "./chunk-BC2W7NND.js";
 import "./chunk-EXGTFXNV.js";
 
 // scripts/seed.ts

package/dist/{server-O5GF3TRI.js → server-UIZFO5EF.js}

@@ -16,7 +16,7 @@ import {
   stopSession,
   tempPathFor,
   writeJsonAtomic
-} from "./chunk-CQ53JYUU.js";
+} from "./chunk-ISUDD7OB.js";
 import {
   CLI_NAMES,
   LAUNCH_SETTINGS,
@@ -30,12 +30,13 @@ import {
   readDotEnv,
   resolveSchedule,
   scheduledRunDue
-} from "./chunk-G4K24I4M.js";
+} from "./chunk-Z57EHQZV.js";
 import {
   PACKAGED,
   command,
+  packageVersion,
   ranDirectly
-} from "./chunk-6VWWJZKJ.js";
+} from "./chunk-BC2W7NND.js";
 import {
   laterISO,
   parseISO
@@ -4006,6 +4007,7 @@ async function hydratePath(env = process.env, platform2 = process.platform, exec
 
 // src/server.ts
 var PUBLIC_DIR = resolve(fileURLToPath(new URL("../public", import.meta.url)));
+var VERSION = packageVersion();
 var MIME = {
   ".html": "text/html; charset=utf-8",
   ".js": "text/javascript; charset=utf-8",
@@ -4102,13 +4104,15 @@ function configure(sources) {
     return { config: loadConfig(layerEnv(sources, {})), warnings };
   }
 }
-function statusOf(state, config) {
+function statusOf(state, config, busy) {
   const last = state.agentRun.last;
   return {
+    version: VERSION,
     dataDir: config.dataDir,
     profile: config.profile,
     setupNeeded: state.setup.needed,
     restartPending: state.restart !== null,
+    busy,
     brief: {
       generatedAt: state.brief.generatedAt,
       ageHours: state.brief.ageHours,
@@ -4692,7 +4696,7 @@ ${entry.source}`)).map(({ title, source }) => ({ title, source })).sort((a, b) =
       return;
     }
     if (path === "/api/status" && req.method === "GET") {
-      sendJSON(res, 200, statusOf(await buildState(), config));
+      sendJSON(res, 200, statusOf(await buildState(), config, agent.busy || assistant.busy));
       return;
     }
     if (path === "/api/health" && req.method === "GET") {

package/dist/{service-ILBMIZB7.js → service-YVGOLKYX.js}

@@ -1,13 +1,13 @@
 import {
   loadConfig
-} from "./chunk-G4K24I4M.js";
+} from "./chunk-Z57EHQZV.js";
 import {
   IN_NPX_CACHE,
   PACKAGED,
   ROOT,
   command,
   ranDirectly
-} from "./chunk-6VWWJZKJ.js";
+} from "./chunk-BC2W7NND.js";
 import "./chunk-EXGTFXNV.js";
 
 // scripts/service.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daily-focus",
-  "version": "0.1.1-dev.9",
+  "version": "0.2.0-dev.13",
   "description": "An interactive dashboard of what you should focus on today at work",
   "keywords": [
     "dashboard",
@@ -38,6 +38,10 @@
   "engines": {
     "node": ">=22.18"
   },
+  "daily-focus": {
+    "appInterface": 1,
+    "appSource": "0f59ad2ffabffbfd1054778996c4ee337199c92c"
+  },
   "scripts": {
     "start": "node src/server.ts",
     "prestart": "node scripts/build.ts",

package/public/app.js

@@ -1075,6 +1075,7 @@ function postListCalendars() {
 // client/state.ts
 var VIEWS = ["today", "board", "tickets", "settings"];
 var RUN_PREFIX = "run:";
+var PANEL_PREFIX = "panel:";
 var VIEW_KEY = "daily-focus:view";
 var UNATTENDED_SEEN_KEY = "daily-focus:unattended-seen";
 var AGENT_RUN_SEEN_KEY = "daily-focus:agent-run-seen";
@@ -2653,6 +2654,7 @@ function renderActions(item, state2, ui2, handlers2) {
           {
             type: "button",
             class: "button",
+            "aria-haspopup": "menu",
             "aria-expanded": String(ui2.menuFor.value === item.id),
             onClick: () => handlers2.toggleMenu(item.id)
           },
@@ -2676,9 +2678,9 @@ function renderSnoozeMenu(item, now, handlers2, { indefinite = true, longRange =
     presets.push(["Next month", addMonths(now, 1), true], ["Next quarter", addMonths(now, 3), true]);
   }
   let dateInput = null;
-  return el(
-    "div",
-    { class: "menu", role: "menu" },
+  return k(
+    Menu,
+    { class: "menu" },
     presets.map(
       ([label, until, dated]) => el(
         "button",
@@ -2727,6 +2729,14 @@ function renderSnoozeMenu(item, now, handlers2, { indefinite = true, longRange =
     )
   );
 }
+function Menu({ class: className, children }) {
+  const ref = A2(null);
+  _2(() => {
+    const node = ref.current;
+    if (node?.showPopover && !node.matches(":popover-open")) node.showPopover();
+  });
+  return el("div", { class: className, role: "menu", popover: "manual", ref }, children);
+}
 function addDays(from, days) {
   return localDateKey(new Date(from.getFullYear(), from.getMonth(), from.getDate() + days));
 }
@@ -3069,6 +3079,7 @@ function renderPullActions(row, ui2, handlers2) {
           type: "button",
           class: "button",
           title: "Park this until a date",
+          "aria-haspopup": "menu",
           "aria-expanded": String(ui2.menuFor.value === row.id),
           onClick: () => handlers2.toggleMenu(row.id)
         },
@@ -3303,31 +3314,41 @@ function TicketRowView({ item: row, state: state2, ui: ui2, handlers: handlers2
       renderTicketMeta(row, state2, handlers2)
     ),
     renderTicketActions(row, ui2, handlers2),
-    ui2.menuFor.value === row.id ? renderSnoozeMenu(row, now, handlers2, { indefinite: false, longRange: true }) : null
+    ui2.menuFor.value === row.id ? renderSnoozeMenu(row, now, handlers2, PARK_MENU) : null
   );
 }
-function renderTicketStatus(row, state2, ui2, handlers2) {
-  const offered = ticketStatusOptions(row, state2);
-  if (offered.length === 0) {
-    return el("div", { class: "item__meta item__meta--status" }, el("span", { class: "pill pill--status" }, row.workflowStatus || "\u2014"));
-  }
+var PARK_MENU = { indefinite: false, longRange: true };
+function renderTicketControls(row, state2, ui2, handlers2) {
+  const menuKey = `${PANEL_PREFIX}${row.id}`;
   return el(
     "div",
-    { class: "item__meta item__meta--status" },
-    el(
-      "button",
-      {
-        type: "button",
-        class: "pill pill--status pill--button",
-        title: `Move ${row.key} to another status`,
-        "aria-expanded": String(ui2.statusFor.value === row.id),
-        onClick: () => handlers2.toggleStatus(row.id)
-      },
-      row.workflowStatus || "\u2014"
-    ),
-    ui2.statusFor.value === row.id ? renderStatusMenu(row, offered, ui2, handlers2) : null
+    { class: "flyout__actions" },
+    statusControl(row, state2, ui2, handlers2, menuKey),
+    flagged(row) ? parkButton(row, ui2, handlers2, menuKey) : null,
+    flagged(row) && ui2.menuFor.value === menuKey ? renderSnoozeMenu(row, new Date(state2.now), handlers2, PARK_MENU) : null
   );
 }
+function renderTicketStatus(row, state2, ui2, handlers2) {
+  return el("div", { class: "item__meta item__meta--status" }, statusControl(row, state2, ui2, handlers2, row.id));
+}
+function statusControl(row, state2, ui2, handlers2, menuKey) {
+  const offered = ticketStatusOptions(row, state2);
+  if (offered.length === 0) return [el("span", { class: "pill pill--status" }, row.workflowStatus || "\u2014")];
+  const open = ui2.statusFor.value === menuKey;
+  const button = el(
+    "button",
+    {
+      type: "button",
+      class: "pill pill--status pill--button",
+      title: `Move ${row.key} to another status`,
+      "aria-haspopup": "menu",
+      "aria-expanded": String(open),
+      onClick: () => handlers2.toggleStatus(menuKey)
+    },
+    row.workflowStatus || "\u2014"
+  );
+  return open ? [button, renderStatusMenu(row, offered, ui2, handlers2)] : [button];
+}
 function ticketStatusOptions(row, state2) {
   const project = /^([A-Za-z][A-Za-z0-9_]*)-\d+$/.exec(row.key.trim())?.[1]?.toUpperCase();
   const all = project && state2.tickets?.statuses?.[project] || [];
@@ -3336,9 +3357,9 @@ function ticketStatusOptions(row, state2) {
 }
 function renderStatusMenu(row, offered, ui2, handlers2) {
   const busy = ui2.pending.value.has(row.id);
-  return el(
-    "div",
-    { class: "menu menu--status", role: "menu" },
+  return k(
+    Menu,
+    { class: "menu menu--status" },
     offered.map(
       (status) => el(
         "button",
@@ -3380,25 +3401,24 @@ function outOfSyncFlag(row, state2, handlers2) {
 }
 function renderTicketActions(row, ui2, handlers2) {
   if (!flagged(row)) return null;
-  const buttons = [];
-  if (row.status === "open") {
-    buttons.push(
-      el(
-        "button",
-        {
-          type: "button",
-          class: "button",
-          title: "Park this until a date",
-          "aria-expanded": String(ui2.menuFor.value === row.id),
-          onClick: () => handlers2.toggleMenu(row.id)
-        },
-        "Park"
-      )
-    );
-  } else {
-    buttons.push(el("button", { type: "button", class: "button", onClick: () => handlers2.unpark(row.id) }, "Unpark"));
+  return el("div", { class: "item__actions" }, parkButton(row, ui2, handlers2, row.id));
+}
+function parkButton(row, ui2, handlers2, menuKey) {
+  if (row.status !== "open") {
+    return el("button", { type: "button", class: "button", onClick: () => handlers2.unpark(row.id) }, "Unpark");
   }
-  return buttons.length > 0 ? el("div", { class: "item__actions" }, buttons) : null;
+  return el(
+    "button",
+    {
+      type: "button",
+      class: "button",
+      title: "Park this until a date",
+      "aria-haspopup": "menu",
+      "aria-expanded": String(ui2.menuFor.value === menuKey),
+      onClick: () => handlers2.toggleMenu(menuKey)
+    },
+    "Park"
+  );
 }
 
 // client/chrome.ts
@@ -3960,7 +3980,7 @@ function RowPanel({ row, state: state2, ui: ui2, handlers: handlers2 }) {
   const enabled = Boolean(state2.assistant?.enabled);
   const entry = state2.assistant?.items?.[row.id] ?? { running: false, sessionId: null, turns: [] };
   return [
-    flyoutHeader(facts, handlers2),
+    flyoutHeader(facts, rowControls(row, state2, ui2, handlers2), handlers2),
     el(
       "div",
       { class: "flyout__body", ref: body, onScroll },
@@ -3995,7 +4015,6 @@ function describeRow(row) {
       url: row.url ?? null,
       source: "jira",
       color: typeColor(row.issueType),
-      status: row.workflowStatus || null,
       people: [],
       detail: null
     };
@@ -4007,7 +4026,6 @@ function describeRow(row) {
       url: row.url ?? null,
       source: "github",
       color: sourceColor("github"),
-      status: null,
       people: [],
       detail: null
     };
@@ -4018,12 +4036,14 @@ function describeRow(row) {
     url: row.url ?? null,
     source: row.source,
     color: sourceColor(row.source),
-    status: null,
     people: row.people ?? [],
     detail: row.detail ?? null
   };
 }
-function flyoutHeader(facts, handlers2) {
+function rowControls(row, state2, ui2, handlers2) {
+  return "key" in row && "summary" in row ? renderTicketControls(row, state2, ui2, handlers2) : null;
+}
+function flyoutHeader(facts, controls, handlers2) {
   const title = facts.ref ? [el("span", { class: "item__ref" }, facts.ref), " ", facts.title] : [facts.title];
   return el(
     "div",
@@ -4033,7 +4053,6 @@ function flyoutHeader(facts, handlers2) {
       { class: "flyout__where" },
       el("span", { class: "item__dot", style: `background:${facts.color}`, "aria-hidden": "true" }),
       el("span", { class: "item__source" }, SOURCE_LABEL[facts.source] ?? "Other"),
-      facts.status ? el("span", null, `\xB7 ${facts.status}`) : null,
       facts.people.length ? el("span", null, `\xB7 ${facts.people.join(", ")}`) : null
     ),
     el(
@@ -4051,7 +4070,8 @@ function flyoutHeader(facts, handlers2) {
       "p",
       { class: "flyout__title" },
       facts.url ? el("a", { href: facts.url, target: "_blank", rel: "noopener noreferrer" }, ...title) : title
-    )
+    ),
+    controls
   );
 }
 function NoteForm({

package/public/style.css

@@ -1152,14 +1152,29 @@ body[data-session-active='true'] #today .item:not([data-running='true']):focus-w
 
 /* snooze menu */
 
+/*
+ * A popover in the top layer (`Menu` in client/items.ts says why), hung from the
+ * button that opened it. Only one menu is ever open, so only one button is
+ * expanded and the one anchor name is never ambiguous. `inset` and `margin`
+ * undo the popover's own centring on the viewport.
+ */
+[aria-haspopup='menu'][aria-expanded='true'] {
+  anchor-name: --menu;
+}
+
 .menu {
-  position: absolute;
-  top: 34px;
-  right: 10px;
-  z-index: 5;
+  position: fixed;
+  position-anchor: --menu;
+  inset: auto;
+  top: anchor(bottom);
+  right: anchor(right);
+  margin: 4px 0;
+  /* Above the button instead, when the window has no room left below it. */
+  position-try-fallbacks: flip-block;
   /* Wide enough that the date field below still shows its own placeholder. */
   min-width: 204px;
   padding: 5px;
+  color: var(--ink-2);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
@@ -1636,10 +1651,11 @@ body[data-view='settings'] .layout {
  * line up with the other tabs' however wide the display is. The 460px floor is
  * what drops it to one column on a narrow window rather than squeezing two.
  *
- * The abspos worry that picked the grid does not apply: `.item` is
- * `position: relative`, so `.item__actions` and the snooze `.menu` resolve
- * against the card and travel with it into its column. Only a child resolving
- * against the multicol container itself would land beside the wrong row.
+ * An absolutely positioned child is still fragmented by the columns, and counts
+ * toward balancing them. `.item__actions` stays inside its card, so it travels
+ * with the card into its column and nothing notices. Anything that hangs below a
+ * card must not be in here at all: the row menus once were, and were split
+ * across both columns and pushed the next section down. They are popovers now.
  */
 #tickets .list {
   display: block;
@@ -1836,14 +1852,13 @@ body[data-view='settings'] .layout {
 }
 
 /*
- * Anchored to the gutter rather than the card's right edge, unlike the park
- * menu: it belongs to the pill that opened it, and the two menus must not be
- * able to appear in the same place.
+ * Hung from the pill's left edge, where the park menu hangs from its button's
+ * right: the pill sits in the card's left gutter, so each menu opens toward the
+ * middle of its own card.
  */
 .menu--status {
-  top: 26px;
   right: auto;
-  left: 0;
+  left: anchor(left);
   min-width: 9rem;
 }
 
@@ -2073,6 +2088,23 @@ body[data-flyout='open'] .layout__side {
   text-decoration-color: var(--accent);
 }
 
+/*
+ * A ticket's status and park, laid out as on its card: the status at the left,
+ * the park at the right, so each menu opens into the panel rather than out over
+ * the list. Under the close button too, so the park lines up with it. A child
+ * combinator, because the park menu's own Set button is a `.button` in here.
+ */
+.flyout__actions {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+.flyout__actions > .button {
+  margin-left: auto;
+}
+
 .flyout__body {
   flex: 1;
   min-height: 0;