@saadnvd1/agent-os 0.3.647 → 0.3.653

package/components/SessionList/RowRename.test.ts

@@ -0,0 +1,102 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { keepRenameFocus, RowRename } from "./RowParts";
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root;
+let host: HTMLElement;
+const input = () => host.querySelector("input")!;
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  host.remove();
+  vi.useRealTimers();
+});
+
+function mount(onDone: (n: string | null) => void, initial = "old") {
+  act(() => root.render(createElement(RowRename, { initial, onDone })));
+}
+
+describe("RowRename", () => {
+  it("retries focus the menu stole, and ignores blur until it has it", () => {
+    const real = window.HTMLElement.prototype.focus;
+    let calls = 0;
+    // The first focus attempts land while the menu still traps focus.
+    vi.spyOn(window.HTMLElement.prototype, "focus").mockImplementation(
+      function (this: HTMLElement) {
+        if (++calls > 2) real.call(this);
+      }
+    );
+    const done = vi.fn();
+    mount(done);
+    act(() => input().dispatchEvent(new window.FocusEvent("blur")));
+    expect(done).not.toHaveBeenCalled();
+    act(() => vi.advanceTimersByTime(150));
+    expect(document.activeElement).toBe(input());
+    vi.restoreAllMocks();
+  });
+
+  it("keeps typed text across a parent re-render (list refresh)", () => {
+    function Parent() {
+      const [n, setN] = useState(0);
+      return createElement(
+        "div",
+        null,
+        createElement("button", { onClick: () => setN(n + 1) }),
+        createElement(RowRename, { initial: "old", onDone: () => {} })
+      );
+    }
+    act(() => root.render(createElement(Parent)));
+    const el = input();
+    act(() => {
+      const set = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )!.set!;
+      set.call(el, "typed");
+      el.dispatchEvent(new window.Event("input", { bubbles: true }));
+    });
+    act(() => host.querySelector("button")!.click());
+    expect(input()).toBe(el);
+    expect(input().value).toBe("typed");
+  });
+
+  it("saves on Enter, cancels on Escape, saves on blur once focused", () => {
+    const done = vi.fn();
+    mount(done);
+    act(() => vi.advanceTimersByTime(60));
+    const key = (k: string) =>
+      act(() => {
+        input().dispatchEvent(
+          new window.KeyboardEvent("keydown", { key: k, bubbles: true })
+        );
+      });
+    key("Enter");
+    expect(done).toHaveBeenLastCalledWith("old");
+    key("Escape");
+    expect(done).toHaveBeenLastCalledWith(null);
+    act(() => input().blur());
+    expect(done).toHaveBeenCalledTimes(3);
+  });
+});
+
+describe("keepRenameFocus", () => {
+  it("stops the menu returning focus only while renaming", () => {
+    const e = { preventDefault: vi.fn() } as unknown as Event;
+    keepRenameFocus(false)(e);
+    expect(e.preventDefault).not.toHaveBeenCalled();
+    keepRenameFocus(true)(e);
+    expect(e.preventDefault).toHaveBeenCalled();
+  });
+});

package/components/SessionList/RowShell.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import * as DM from "@/components/ui/dropdown-menu";
 import * as CM from "@/components/ui/context-menu";
 import { cn } from "@/lib/utils";
+import { keepRenameFocus } from "./RowParts";
 
 // The open row's accent: a thin rounded tick at the left edge, inside the
 // row so the list's overflow can't clip it.
@@ -41,6 +42,7 @@ export function RowShell({
   menu,
   menuLabel,
   menuButton = true,
+  renaming = false,
 }: {
   title: string;
   tipKey?: string;
@@ -60,6 +62,8 @@ export function RowShell({
   menuLabel: string;
   // False keeps the right-click menu but hides the ⋯ (while selecting).
   menuButton?: boolean;
+  // A rename input is open: closing the menu mustn't move focus off it.
+  renaming?: boolean;
 }) {
   const content = (
     <div
@@ -114,6 +118,7 @@ export function RowShell({
           <DM.DropdownMenuContent
             align="end"
             className={ROW_MENU_CONTENT}
+            onCloseAutoFocus={keepRenameFocus(renaming)}
             onClick={(e) => e.stopPropagation()}
           >
             {menu("dropdown")}
@@ -126,7 +131,10 @@ export function RowShell({
   return (
     <CM.ContextMenu>
       <CM.ContextMenuTrigger asChild>{content}</CM.ContextMenuTrigger>
-      <CM.ContextMenuContent className={ROW_MENU_CONTENT}>
+      <CM.ContextMenuContent
+        className={ROW_MENU_CONTENT}
+        onCloseAutoFocus={keepRenameFocus(renaming)}
+      >
         {menu("context")}
       </CM.ContextMenuContent>
     </CM.ContextMenu>

package/components/SessionList/SessionRow.tsx

@@ -76,7 +76,7 @@ export const SessionRow = memo(function SessionRow({
   );
 
   return (
-    <div>
+    <div data-session-row={session.id}>
       <RowShell
         title={session.name}
         tipKey={`session:${session.id}`}
@@ -115,6 +115,7 @@ export const SessionRow = memo(function SessionRow({
         menu={menu}
         menuLabel="Session actions"
         menuButton={!selecting}
+        renaming={renaming}
       >
         {renaming ? (
           <RowRename

package/components/SessionList/SessionShelves.tsx

@@ -8,6 +8,7 @@ import {
   doneSummary,
   type Shelves,
 } from "@/lib/sidebar/shelves";
+import { shownShelves } from "@/lib/sidebar/visible-order";
 import type { MachineGroup } from "@/lib/sidebar/machines";
 import { sidebarUiActions } from "@/stores/sidebarUi";
 import { cn } from "@/lib/utils";
@@ -124,8 +125,10 @@ export function SessionShelves({
   snoozedCollapsed: boolean;
   donePages: number;
 }) {
+  const folds = { doneCollapsed, snoozedCollapsed, donePages };
   const shown = shelves.done.slice(0, doneLimit(donePages));
   const hidden = shelves.done.length - shown.length;
+  const visible = shownShelves(shelves, folds);
   const pendingCards = usePendingCardSessions();
   const doneCards = shelves.done.reduce(
     (n, r) => n + (pendingCards.get(r.session.id) ?? 0),
@@ -210,10 +213,9 @@ export function SessionShelves({
             collapsed={snoozedCollapsed}
             onToggle={sidebarUiActions.toggleSnoozed}
           />
-          {!snoozedCollapsed &&
-            shelves.snoozed.map((r) => (
-              <SessionRow key={r.session.id} row={r} muted />
-            ))}
+          {visible.snoozed.map((r) => (
+            <SessionRow key={r.session.id} row={r} muted />
+          ))}
         </section>
       )}
       {shelves.done.length > 0 && (
@@ -223,8 +225,9 @@ export function SessionShelves({
             collapsed={doneCollapsed}
             onToggle={sidebarUiActions.toggleDone}
           />
-          {!doneCollapsed &&
-            shown.map((r) => <SessionRow key={r.session.id} row={r} muted />)}
+          {visible.done.map((r) => (
+            <SessionRow key={r.session.id} row={r} muted />
+          ))}
           {!doneCollapsed && hidden > 0 && (
             <button
               type="button"

package/components/SessionList/index.tsx

@@ -7,12 +7,13 @@ import { useDocsWorkspace } from "@/data/lumifyhub/docs";
 import { useFreshStart, usePinSession } from "@/data/sessions";
 import { useOrchestratorsQuery } from "@/data/orchestrators";
 import { docsUiActions } from "@/stores/docsUi";
-import type { SidebarRow } from "@/lib/sidebar/shelves";
+import { visibleSessionIds } from "@/lib/sidebar/visible-order";
 import type { OrchestratorOverview } from "@/lib/orchestrator/overview";
 import { useSessionListMutations } from "./hooks/useSessionListMutations";
 import { useBulkDelete } from "./hooks/useBulkDelete";
 import { useSidebarData } from "./useSidebarData";
 import { useSessionTips } from "./useSessionTips";
+import { useSessionSwitching } from "./useSessionSwitching";
 import { RowProvider, type RowContextValue } from "./RowContext";
 import { SidebarHeader } from "./SidebarHeader";
 import { useAddProject } from "@/components/Projects/AddProject/useAddProject";
@@ -28,9 +29,6 @@ export type { SessionListProps } from "./SessionList.types";
 // Shared, so a query still loading doesn't hand rows a new array each render.
 const NO_ORCHESTRATORS: OrchestratorOverview[] = [];
 
-const flatten = (rows: SidebarRow[]): string[] =>
-  rows.flatMap((r) => [r.session.id, ...flatten(r.workers)]);
-
 // One flat list of the workspace's sessions, on shelves: Pinned, Needs
 // you, Working, In review, Done.
 export function SessionList({
@@ -59,19 +57,20 @@ export function SessionList({
 
   const orderedIds = useMemo(
     () =>
-      flatten([
-        ...shelves.orchestrators,
-        ...shelves.pinned,
-        ...shelves.needsYou,
-        ...shelves.working,
-        ...shelves.inReview,
-        ...shelves.ongoing,
-        ...shelves.snoozed,
-        ...shelves.done,
-        ...data.machines.flatMap((g) => g.rows),
-      ]),
-    [shelves, data.machines]
+      visibleSessionIds(shelves, data.machines, {
+        doneCollapsed: ui.doneCollapsed,
+        snoozedCollapsed: ui.snoozedCollapsed,
+        donePages: ui.donePages,
+      }),
+    [
+      shelves,
+      data.machines,
+      ui.doneCollapsed,
+      ui.snoozedCollapsed,
+      ui.donePages,
+    ]
   );
+  useSessionSwitching(orderedIds, activeSessionId, onSelect);
 
   // Rows read their handlers through the latest render, so the context only
   // changes when what rows draw does: a status push redraws the rows it

package/components/SessionList/useSessionSwitching.ts

@@ -0,0 +1,55 @@
+"use client";
+
+import { MessageSquare } from "lucide-react";
+import { useKeybindings } from "@/hooks/useKeybindings";
+import { usePaletteCommands } from "@/hooks/usePaletteCommands";
+import { chordHint } from "@/lib/keybindings/chord";
+import { fieldOwnsKey } from "@/lib/keybindings/focus";
+import { neighbourSession } from "@/lib/sidebar/visible-order";
+
+const PREVIOUS = "mod+up";
+const NEXT = "mod+down";
+
+// ⌘↑ / ⌘↓ (Ctrl off a Mac) select the row above or below the active one, as
+// a click would, in the order the sidebar shows. Nothing happens at either end.
+export function useSessionSwitching(
+  orderedIds: string[],
+  activeSessionId: string | undefined,
+  onSelect: (id: string) => void
+) {
+  const step = (by: 1 | -1) => {
+    const id = neighbourSession(orderedIds, activeSessionId, by);
+    if (!id) return;
+    onSelect(id);
+    requestAnimationFrame(() =>
+      document
+        .querySelector(`[data-session-row="${CSS.escape(id)}"]`)
+        ?.scrollIntoView({ block: "nearest" })
+    );
+  };
+  const free = (e: KeyboardEvent) => !fieldOwnsKey(e.target);
+  useKeybindings("session-switching", [
+    { id: "session.previous", keys: PREVIOUS, when: free, run: () => step(-1) },
+    { id: "session.next", keys: NEXT, when: free, run: () => step(1) },
+  ]);
+  usePaletteCommands("session-switching", [
+    {
+      id: "session.previous",
+      title: "Previous session",
+      group: "Sessions",
+      hint: chordHint(PREVIOUS),
+      keywords: ["switch", "up"],
+      icon: MessageSquare,
+      run: () => step(-1),
+    },
+    {
+      id: "session.next",
+      title: "Next session",
+      group: "Sessions",
+      hint: chordHint(NEXT),
+      keywords: ["switch", "down"],
+      icon: MessageSquare,
+      run: () => step(1),
+    },
+  ]);
+}

package/hooks/useKeybindings.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { keybindings, type Keybinding } from "@/lib/keybindings/registry";
+
+// Binds chords while the caller is mounted. `when` and `run` always see the
+// latest render, so callers don't memoise them.
+export function useKeybindings(source: string, bindings: Keybinding[]) {
+  const latest = useRef(bindings);
+  useEffect(() => {
+    latest.current = bindings;
+  });
+  const keys = bindings
+    .map((b) => `${b.id}:${b.keys}:${b.repeat ? 1 : 0}`)
+    .join("|");
+  useEffect(() => {
+    const at = (id: string) => latest.current.find((b) => b.id === id)!;
+    return keybindings.register(
+      source,
+      latest.current.map((b) => ({
+        ...b,
+        when: (e) => at(b.id).when?.(e) ?? true,
+        run: () => at(b.id).run(),
+      }))
+    );
+  }, [source, keys]);
+}

package/lib/agents/brief.ts

@@ -2,7 +2,7 @@
 export const BUS_BRIEF = `You are one of several coding agents running in AgentOS. Other sessions may be working on related projects at the same time, and you can talk to them with the \`aos\` command:
 
 - \`aos peers\`: list sessions, their project and what each is doing
-- \`aos send <session> "<message>"\`: message a session by name (or project/name, an old name, or its id); it prints delivered, queued or FAILED
+- \`aos send <session> "<message>"\`: message a session by name (or project/name, an old name, or its id; \`orchestrator\` is your workspace's orchestrator); it prints delivered, queued or FAILED
 - \`aos inbox\`: read messages sent to you
 - \`aos history <session>\`: your conversation with a session
 - \`aos spawn <project> "<prompt>"\`: start a new agent session in a project

package/lib/bus/index.ts

@@ -7,7 +7,9 @@
 import { db, type Session } from "../db";
 import { getProject } from "../projects";
 import { statusDetector } from "../status-detector";
-import { sendChatConfirmed } from "../chat/runner";
+import { chatState, sendChatConfirmed } from "../chat/runner";
+import { chatActivityLine } from "../chat/activity";
+import { getWorkspace } from "../workspaces";
 import type { ChatOrigin, PeerMessage } from "../chat/events";
 import { sessionRowInfo } from "../session-meta";
 import { previousNames } from "../session-names";
@@ -38,6 +40,10 @@ export interface Peer {
   hostId: string;
   running: boolean;
   doing: string | null;
+  // The workspace it is the orchestrator of, else null.
+  orchestratorOf: string | null;
+  // The asking session's own workspace orchestrator.
+  yours?: boolean;
 }
 
 function liveSessions(): Session[] {
@@ -68,19 +74,41 @@ const sessionById = (id: string | null | undefined) =>
         | undefined)
     : undefined;
 
+// A chat has no pane: its worker is the state, and it can always take a
+// message (queued as its next prompt), so it is never "not running".
+async function peerState(
+  s: Session
+): Promise<{ running: boolean; subtitle: string | null }> {
+  if (s.view === "chat") {
+    const busy = chatState(s.id) === "running";
+    return {
+      running: true,
+      subtitle: chatActivityLine(s.id) ?? (busy ? "working" : "idle"),
+    };
+  }
+  const status = statusDetector.sessionExists(s.tmux_name)
+    ? await statusDetector.getStatus(s.tmux_name)
+    : "dead";
+  const info = sessionRowInfo(status, statusDetector.titleFor(s.tmux_name));
+  return { running: info.running, subtitle: info.subtitle };
+}
+
+const orchestratorOf = (s: Session) =>
+  s.role === "orchestrator" && s.workspace_id
+    ? (getWorkspace(s.workspace_id)?.name ?? "a workspace")
+    : null;
+
 // `callerId`: the asking session. A task its orchestrator moved here also
 // sees that orchestrator, which it can message though it runs elsewhere.
 export async function listPeers(callerId?: string): Promise<Peer[]> {
   await statusDetector.refreshCache();
   const sessions = liveSessions();
   const named = candidates(sessions);
-  const orchestrator = heldOrchestrator(sessionById(callerId));
+  const caller = sessionById(callerId);
+  const orchestrator = heldOrchestrator(caller);
   const listed = await Promise.all(
     sessions.map(async (s, i) => {
-      const status = statusDetector.sessionExists(s.tmux_name)
-        ? await statusDetector.getStatus(s.tmux_name)
-        : "dead";
-      const info = sessionRowInfo(status, statusDetector.titleFor(s.tmux_name));
+      const info = await peerState(s);
       return {
         id: s.id,
         name: s.name,
@@ -90,6 +118,10 @@ export async function listPeers(callerId?: string): Promise<Peer[]> {
         hostId: s.host_id,
         running: info.running,
         doing: info.subtitle,
+        orchestratorOf: orchestratorOf(s),
+        ...(caller?.workspace_id &&
+          s.role === "orchestrator" &&
+          s.workspace_id === caller.workspace_id && { yours: true }),
       };
     })
   );
@@ -105,6 +137,8 @@ export async function listPeers(callerId?: string): Promise<Peer[]> {
       hostId: "remote",
       running: true,
       doing: `your orchestrator, on ${orchestrator.heldFrom}`,
+      orchestratorOf: null,
+      yours: true,
     },
   ];
 }
@@ -116,28 +150,60 @@ export function resolveHeldOrchestrator(callerId: string, ref: string) {
 
 // A live session by name, old name, project/name, id or id prefix. The note
 // says when the name meant something other than its current owner.
-export function resolveTarget(ref: string): {
+export function resolveTarget(
+  ref: string,
+  callerId?: string | null
+): {
   session: Session;
   note?: string;
 } {
-  const found = tryResolveTarget(ref);
+  const found = tryResolveTarget(ref, callerId);
   if (!found.ok) throw new Error(found.error);
   return found;
 }
 
+// "orchestrator" / "my orchestrator": the caller's own workspace orchestrator.
+function ownOrchestrator(
+  ref: string,
+  sessions: Session[],
+  callerId?: string | null
+): Session | undefined {
+  if (!/^(my )?orchestrator$/i.test(ref.trim())) return undefined;
+  const workspace = sessionById(callerId)?.workspace_id;
+  if (!workspace) return undefined;
+  return sessions.find(
+    (s) => s.role === "orchestrator" && s.workspace_id === workspace
+  );
+}
+
 function tryResolveTarget(
-  ref: string
+  ref: string,
+  callerId?: string | null
 ):
   | { ok: true; session: Session; note?: string }
   | { ok: false; none: boolean; error: string } {
   const sessions = liveSessions();
+  const own = ownOrchestrator(ref, sessions, callerId);
+  if (own) return { ok: true, session: own };
   const r = resolveRef(ref, candidates(sessions));
-  if (!r.ok)
+  if (!r.ok) {
+    const orchestrators = /^(my )?orchestrator$/i.test(ref.trim())
+      ? sessions.filter((s) => s.role === "orchestrator")
+      : [];
+    if (orchestrators.length)
+      return {
+        ok: false,
+        none: true,
+        error: `You are in no workspace, so "${ref}" is ambiguous. Orchestrators: ${orchestrators
+          .map((s) => `${s.name} (id ${s.id.slice(0, 8)})`)
+          .join(", ")}`,
+      };
     return {
       ok: false,
       none: r.reason === "none",
       error: r.reason === "none" ? `${r.error}. Run: aos peers` : r.error,
     };
+  }
   return {
     ok: true,
     session: sessions.find((s) => s.id === r.id)!,
@@ -287,7 +353,7 @@ export async function sendMessage(opts: {
   // A held task's message to its orchestrator is kept for the holder to pull.
   const held = heldTarget(from, opts.to);
   if (from && held) return storeForHolder(from, held, body);
-  const target = tryResolveTarget(opts.to);
+  const target = tryResolveTarget(opts.to, opts.fromId);
   if (!target.ok) {
     // A task still in the start queue has no session yet: hold it.
     const queued = target.none ? findQueuedTarget(opts.to) : null;

package/lib/chat/background.ts

@@ -24,28 +24,6 @@ export function backgroundable(
   );
 }
 
-// Ctrl+B, nothing else held, and only while there is something to move;
-// otherwise the key is left to the page.
-export function backgroundKey(
-  e: {
-    key: string;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    altKey: boolean;
-    shiftKey: boolean;
-    repeat?: boolean;
-    isComposing?: boolean;
-  },
-  available: boolean
-): boolean {
-  return (
-    available &&
-    e.key.toLowerCase() === "b" &&
-    e.ctrlKey &&
-    !(e.metaKey || e.altKey || e.shiftKey || e.repeat || e.isComposing)
-  );
-}
-
 // Errors that mean the agent never got the request.
 const UNREACHED = new Set(["unsupported", "unavailable", "timeout"]);
 

package/lib/keybindings/chord.ts

@@ -0,0 +1,114 @@
+export interface Chord {
+  key: string;
+  ctrl: boolean;
+  meta: boolean;
+  alt: boolean;
+  shift: boolean;
+}
+
+export interface KeyLike {
+  key: string;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  altKey: boolean;
+  shiftKey: boolean;
+}
+
+const MODS: Record<string, "ctrl" | "meta" | "alt" | "shift"> = {
+  ctrl: "ctrl",
+  control: "ctrl",
+  cmd: "meta",
+  meta: "meta",
+  alt: "alt",
+  option: "alt",
+  shift: "shift",
+};
+
+const KEY_NAMES: Record<string, string> = {
+  esc: "escape",
+  space: " ",
+  return: "enter",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright",
+};
+
+export const isMac = () =>
+  typeof navigator !== "undefined" &&
+  /mac|iphone|ipad/i.test(navigator.platform);
+
+// "ctrl+b", "shift+tab", "meta+k". Modifiers must match exactly: ctrl+b is
+// not cmd+b and not ctrl+shift+b. "mod" is Cmd on a Mac and Ctrl elsewhere.
+export function parseChord(keys: string, mac: boolean = isMac()): Chord {
+  const chord: Chord = {
+    key: "",
+    ctrl: false,
+    meta: false,
+    alt: false,
+    shift: false,
+  };
+  for (const raw of keys.toLowerCase().split("+")) {
+    const part = raw.trim();
+    const mod = part === "mod" ? (mac ? "meta" : "ctrl") : MODS[part];
+    if (mod) chord[mod] = true;
+    else if (chord.key) throw new Error(`Two keys in chord "${keys}"`);
+    else chord.key = KEY_NAMES[part] ?? part;
+  }
+  if (!chord.key) throw new Error(`No key in chord "${keys}"`);
+  return chord;
+}
+
+export function matchChord(chord: Chord, e: KeyLike): boolean {
+  return (
+    e.key.toLowerCase() === chord.key &&
+    e.ctrlKey === chord.ctrl &&
+    e.metaKey === chord.meta &&
+    e.altKey === chord.alt &&
+    e.shiftKey === chord.shift
+  );
+}
+
+// "Ctrl+B" for display (the label users know from Claude Code).
+export function formatChord(keys: string): string {
+  return keys
+    .split("+")
+    .map((p) => {
+      const t = p.trim();
+      return t.length === 1
+        ? t.toUpperCase()
+        : t[0].toUpperCase() + t.slice(1).toLowerCase();
+    })
+    .join("+");
+}
+
+const SYMBOLS: Record<string, string> = {
+  up: "↑",
+  down: "↓",
+  left: "←",
+  right: "→",
+};
+
+// "mod+up" as a hint: "⌘↑" on a Mac, "Ctrl+↑" elsewhere.
+export function chordHint(keys: string, mac: boolean = isMac()): string {
+  const parts = keys.split("+").map((p) => p.trim().toLowerCase());
+  const label = (p: string) =>
+    SYMBOLS[p] ??
+    (p.length === 1 ? p.toUpperCase() : p[0].toUpperCase() + p.slice(1));
+  if (!mac)
+    return parts
+      .map((p) =>
+        p === "mod" || p === "cmd" || p === "meta" ? "Ctrl" : label(p)
+      )
+      .join("+");
+  const sym: Record<string, string> = {
+    mod: "⌘",
+    cmd: "⌘",
+    meta: "⌘",
+    ctrl: "⌃",
+    alt: "⌥",
+    option: "⌥",
+    shift: "⇧",
+  };
+  return parts.map((p) => sym[p] ?? label(p)).join("");
+}